3bbb34eba8
This PR adds support for seeing **another user**'s chat messages. It's part 1 of two PRs relating to Cursor Chat. And it's needed for the much bigger part 2: https://github.com/tldraw/brivate/pull/1981 # Presence You can see another person's chat messages!  If they have a name, it gets popped on top.  That's it! With this PR, there's no way of actually *typing* your chat messages. That comes with the [next one](https://github.com/tldraw/brivate/pull/1981)! # Admin ### To-do - [x] Store chat message - [x] Allow overflowing chat - [x] Presence for chat message - [x] Display chat message to others ### Change Type - [x] `minor` — New Feature ### Test Plan To test this, I recommend checking out both `lu/cursor-chat` branches, and opening two browser sessions in the same shared project. 1. In one session, type some cursor chat by pressing the Enter key while on the canvas (and typing). 2. On the other session, check that you can see the chat message appear. 3. Repeat this while being both named, and unnamed. I recommend just focusing on the visible presense in this PR. The [other PR](https://github.com/tldraw/brivate/pull/1981) is where we can focus about how we _input_ the cursor chat. ### Release Notes - [dev] Added support for cursor chat presence. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
38 KiB
38 KiB
API Report File for "@tldraw/tlschema"
Do not edit this file. It is a report generated by API Extractor.
import { BaseRecord } from '@tldraw/store';
import { Migrations } from '@tldraw/store';
import { RecordId } from '@tldraw/store';
import { RecordType } from '@tldraw/store';
import { Signal } from 'signia';
import { Store } from '@tldraw/store';
import { StoreSchema } from '@tldraw/store';
import { StoreSnapshot } from '@tldraw/store';
import { T } from '@tldraw/validate';
import { UnknownRecord } from '@tldraw/store';
// @internal (undocumented)
export const alignValidator: T.Validator<"end" | "middle" | "start">;
// @internal (undocumented)
export const arrowShapeMigrations: Migrations;
// @internal (undocumented)
export const arrowShapeProps: ShapeProps<TLArrowShape>;
// @public
export const assetIdValidator: T.Validator<TLAssetId>;
// @internal (undocumented)
export const assetMigrations: Migrations;
// @public (undocumented)
export const AssetRecordType: RecordType<TLAsset, "props" | "type">;
// @internal (undocumented)
export const assetValidator: T.Validator<TLAsset>;
// @internal (undocumented)
export const bookmarkShapeMigrations: Migrations;
// @internal (undocumented)
export const bookmarkShapeProps: ShapeProps<TLBookmarkShape>;
// @public
export interface Box2dModel {
// (undocumented)
h: number;
// (undocumented)
w: number;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public (undocumented)
export const CameraRecordType: RecordType<TLCamera, never>;
// @public
export const canvasUiColorTypeValidator: T.Validator<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
// @internal (undocumented)
export function CLIENT_FIXUP_SCRIPT(persistedStore: StoreSnapshot<TLRecord>): StoreSnapshot<TLRecord>;
// @internal (undocumented)
export const colorValidator: T.Validator<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
// @public
export function createAssetValidator<Type extends string, Props extends object>(type: Type, props: T.Validator<Props>): T.ObjectValidator<{
id: TLAssetId;
typeName: 'asset';
type: Type;
props: Props;
}>;
// @public (undocumented)
export const createPresenceStateDerivation: ($user: Signal<{
id: string;
color: string;
name: string;
}>) => (store: TLStore) => Signal<null | TLInstancePresence>;
// @public (undocumented)
export function createShapeId(id?: string): TLShapeId;
// @public (undocumented)
export function createShapeValidator<Type extends string, Props extends object>(type: Type, props?: {
[K in keyof Props]: T.Validatable<Props[K]>;
}): T.ObjectValidator<{
id: TLShapeId;
typeName: "shape";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
type: Type;
isLocked: boolean;
opacity: number;
props: Props | Record<string, unknown>;
}>;
// @public
export function createTLSchema({ shapes }: {
shapes: Record<string, SchemaShapeInfo>;
}): TLSchema;
// @internal (undocumented)
export const dashValidator: T.Validator<"dashed" | "dotted" | "draw" | "solid">;
// @public (undocumented)
export const DocumentRecordType: RecordType<TLDocument, never>;
// @internal (undocumented)
export const drawShapeMigrations: Migrations;
// @internal (undocumented)
export const drawShapeProps: ShapeProps<TLDrawShape>;
// @public (undocumented)
export const EMBED_DEFINITIONS: readonly [{
readonly type: "tldraw";
readonly title: "tldraw";
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "codesandbox";
readonly title: "CodeSandbox";
readonly hostnames: readonly ["codesandbox.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "codepen";
readonly title: "Codepen";
readonly hostnames: readonly ["codepen.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 520;
readonly height: 400;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "scratch";
readonly title: "Scratch";
readonly hostnames: readonly ["scratch.mit.edu"];
readonly width: 520;
readonly height: 400;
readonly doesResize: false;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "youtube";
readonly title: "YouTube";
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly width: 800;
readonly height: 450;
readonly doesResize: true;
readonly canUnmount: false;
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "figma";
readonly title: "Figma";
readonly hostnames: readonly ["figma.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "google_maps";
readonly title: "Google Maps";
readonly hostnames: readonly ["google.*"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "google_calendar";
readonly title: "Google Calendar";
readonly hostnames: readonly ["calendar.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly canUnmount: false;
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "google_slides";
readonly title: "Google Slides";
readonly hostnames: readonly ["docs.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "github_gist";
readonly title: "GitHub Gist";
readonly hostnames: readonly ["gist.github.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "replit";
readonly title: "Replit";
readonly hostnames: readonly ["replit.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "felt";
readonly title: "Felt";
readonly hostnames: readonly ["felt.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "spotify";
readonly title: "Spotify";
readonly hostnames: readonly ["open.spotify.com"];
readonly width: 720;
readonly height: 500;
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly doesResize: true;
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "vimeo";
readonly title: "Vimeo";
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly width: 640;
readonly height: 360;
readonly doesResize: true;
readonly canUnmount: false;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "excalidraw";
readonly title: "Excalidraw";
readonly hostnames: readonly ["excalidraw.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}, {
readonly type: "observable";
readonly title: "Observable";
readonly hostnames: readonly ["observablehq.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: false;
readonly isAspectRatioLocked: false;
readonly backgroundColor: "#fff";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
}];
// @public (undocumented)
export type EmbedDefinition = {
readonly type: string;
readonly title: string;
readonly hostnames: readonly string[];
readonly minWidth?: number;
readonly minHeight?: number;
readonly width: number;
readonly height: number;
readonly doesResize: boolean;
readonly canUnmount: boolean;
readonly isAspectRatioLocked?: boolean;
readonly overridePermissions?: TLEmbedShapePermissions;
readonly instructionLink?: string;
readonly backgroundColor?: string;
readonly overrideOutlineRadius?: number;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
};
// @internal (undocumented)
export const embedShapeMigrations: Migrations;
// @public
export const embedShapePermissionDefaults: {
readonly 'allow-downloads-without-user-activation': false;
readonly 'allow-downloads': false;
readonly 'allow-modals': false;
readonly 'allow-orientation-lock': false;
readonly 'allow-pointer-lock': false;
readonly 'allow-popups': true;
readonly 'allow-popups-to-escape-sandbox': false;
readonly 'allow-presentation': false;
readonly 'allow-storage-access-by-user-activation': false;
readonly 'allow-top-navigation': false;
readonly 'allow-top-navigation-by-user-activation': false;
readonly 'allow-scripts': true;
readonly 'allow-same-origin': true;
readonly 'allow-forms': true;
};
// @internal (undocumented)
export const embedShapeProps: ShapeProps<TLEmbedShape>;
// @internal (undocumented)
export const fillValidator: T.Validator<"none" | "pattern" | "semi" | "solid">;
// @internal (undocumented)
export function fixupRecord(oldRecord: TLRecord): {
record: any;
issues: string[];
};
// @internal (undocumented)
export const fontValidator: T.Validator<"draw" | "mono" | "sans" | "serif">;
// @internal (undocumented)
export const frameShapeMigrations: Migrations;
// @internal (undocumented)
export const frameShapeProps: ShapeProps<TLFrameShape>;
// @internal (undocumented)
export const geoShapeMigrations: Migrations;
// @internal (undocumented)
export const geoShapeProps: ShapeProps<TLGeoShape>;
// @internal (undocumented)
export const geoValidator: T.Validator<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
// @public (undocumented)
export function getDefaultTranslationLocale(): TLLanguage['locale'];
// @internal (undocumented)
export const groupShapeMigrations: Migrations;
// @internal (undocumented)
export const groupShapeProps: ShapeProps<TLGroupShape>;
// @internal (undocumented)
export const highlightShapeMigrations: Migrations;
// @internal (undocumented)
export const highlightShapeProps: ShapeProps<TLHighlightShape>;
// @internal (undocumented)
export const iconShapeMigrations: Migrations;
// @internal (undocumented)
export const iconShapeProps: ShapeProps<TLIconShape>;
// @internal (undocumented)
export const iconValidator: T.Validator<"activity" | "airplay" | "alert-circle" | "alert-octagon" | "alert-triangle" | "align-center" | "align-justify" | "align-left" | "align-right" | "anchor" | "aperture" | "archive" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-down" | "arrow-left-circle" | "arrow-left" | "arrow-right-circle" | "arrow-right" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "arrow-up" | "at-sign" | "award" | "bar-chart-2" | "bar-chart" | "battery-charging" | "battery" | "bell-off" | "bell" | "bluetooth" | "bold" | "book-open" | "book" | "bookmark" | "briefcase" | "calendar" | "camera-off" | "camera" | "cast" | "check-circle" | "check-square" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chrome" | "circle" | "clipboard" | "clock" | "cloud-drizzle" | "cloud-lightning" | "cloud-off" | "cloud-rain" | "cloud-snow" | "cloud" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "compass" | "copy" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "credit-card" | "crop" | "crosshair" | "database" | "delete" | "disc" | "divide-circle" | "divide-square" | "divide" | "dollar-sign" | "download-cloud" | "download" | "dribbble" | "droplet" | "edit-2" | "edit-3" | "edit" | "external-link" | "eye-off" | "eye" | "facebook" | "fast-forward" | "feather" | "figma" | "file-minus" | "file-plus" | "file-text" | "file" | "film" | "filter" | "flag" | "folder-minus" | "folder-plus" | "folder" | "framer" | "frown" | "geo" | "gift" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "github" | "gitlab" | "globe" | "grid" | "hard-drive" | "hash" | "headphones" | "heart" | "help-circle" | "hexagon" | "home" | "image" | "inbox" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "life-buoy" | "link-2" | "link" | "linkedin" | "list" | "loader" | "lock" | "log-in" | "log-out" | "mail" | "map-pin" | "map" | "maximize-2" | "maximize" | "meh" | "menu" | "message-circle" | "message-square" | "mic-off" | "mic" | "minimize-2" | "minimize" | "minus-circle" | "minus-square" | "minus" | "monitor" | "moon" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move" | "music" | "navigation-2" | "navigation" | "octagon" | "package" | "paperclip" | "pause-circle" | "pause" | "pen-tool" | "percent" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "phone" | "pie-chart" | "play-circle" | "play" | "plus-circle" | "plus-square" | "plus" | "pocket" | "power" | "printer" | "radio" | "refresh-ccw" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "rss" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share-2" | "share" | "shield-off" | "shield" | "shopping-bag" | "shopping-cart" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slack" | "slash" | "sliders" | "smartphone" | "smile" | "speaker" | "square" | "star" | "stop-circle" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "terminal" | "thermometer" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "tool" | "trash-2" | "trash" | "trello" | "trending-down" | "trending-up" | "triangle" | "truck" | "tv" | "twitch" | "twitter" | "type" | "umbrella" | "underline" | "unlock" | "upload-cloud" | "upload" | "user-check" | "user-minus" | "user-plus" | "user-x" | "user" | "users" | "video-off" | "video" | "voicemail" | "volume-1" | "volume-2" | "volume-x" | "volume" | "watch" | "wifi-off" | "wifi" | "wind" | "x-circle" | "x-octagon" | "x-square" | "x" | "youtube" | "zap-off" | "zap" | "zoom-in" | "zoom-out">;
// @internal (undocumented)
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
// @internal (undocumented)
export const imageShapeMigrations: Migrations;
// @internal (undocumented)
export const imageShapeProps: ShapeProps<TLImageShape>;
// @public (undocumented)
export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageId">;
// @public (undocumented)
export const InstancePresenceRecordType: RecordType<TLInstancePresence, "currentPageId" | "userId" | "userName">;
// @public (undocumented)
export const InstanceRecordType: RecordType<TLInstance, "currentPageId">;
// @internal (undocumented)
export const instanceTypeValidator: T.Validator<TLInstance>;
// @public (undocumented)
export function isPageId(id: string): id is TLPageId;
// @public (undocumented)
export function isShape(record?: UnknownRecord): record is TLShape;
// @public (undocumented)
export function isShapeId(id?: string): id is TLShapeId;
// @public (undocumented)
export const LANGUAGES: readonly [{
readonly locale: "ar";
readonly label: "عربي";
}, {
readonly locale: "ca";
readonly label: "Català";
}, {
readonly locale: "da";
readonly label: "Danish";
}, {
readonly locale: "de";
readonly label: "Deutsch";
}, {
readonly locale: "en";
readonly label: "English";
}, {
readonly locale: "es";
readonly label: "Español";
}, {
readonly locale: "fa";
readonly label: "فارسی";
}, {
readonly locale: "fi";
readonly label: "Suomi";
}, {
readonly locale: "fr";
readonly label: "Français";
}, {
readonly locale: "gl";
readonly label: "Galego";
}, {
readonly locale: "he";
readonly label: "עברית";
}, {
readonly locale: "it";
readonly label: "Italiano";
}, {
readonly locale: "ja";
readonly label: "日本語";
}, {
readonly locale: "ko-kr";
readonly label: "한국어";
}, {
readonly locale: "ku";
readonly label: "کوردی";
}, {
readonly locale: "hi-in";
readonly label: "हिन्दी";
}, {
readonly locale: "hu";
readonly label: "Magyar";
}, {
readonly locale: "my";
readonly label: "မြန်မာစာ";
}, {
readonly locale: "ne";
readonly label: "नेपाली";
}, {
readonly locale: "no";
readonly label: "Norwegian";
}, {
readonly locale: "pl";
readonly label: "Polski";
}, {
readonly locale: "pt-br";
readonly label: "Português - Brasil";
}, {
readonly locale: "pt-pt";
readonly label: "Português - Europeu";
}, {
readonly locale: "ro";
readonly label: "Română";
}, {
readonly locale: "ru";
readonly label: "Russian";
}, {
readonly locale: "sv";
readonly label: "Svenska";
}, {
readonly locale: "te";
readonly label: "తెలుగు";
}, {
readonly locale: "th";
readonly label: "ภาษาไทย";
}, {
readonly locale: "tr";
readonly label: "Türkçe";
}, {
readonly locale: "uk";
readonly label: "Ukrainian";
}, {
readonly locale: "vi";
readonly label: "Tiếng Việt";
}, {
readonly locale: "zh-cn";
readonly label: "Chinese - Simplified";
}, {
readonly locale: "zh-tw";
readonly label: "繁體中文 (台灣)";
}];
// @internal (undocumented)
export const lineShapeMigrations: Migrations;
// @internal (undocumented)
export const lineShapeProps: ShapeProps<TLLineShape>;
// @internal (undocumented)
export const noteShapeMigrations: Migrations;
// @internal (undocumented)
export const noteShapeProps: ShapeProps<TLNoteShape>;
// @internal (undocumented)
export const opacityValidator: T.Validator<number>;
// @internal (undocumented)
export const pageIdValidator: T.Validator<TLPageId>;
// @public (undocumented)
export const PageRecordType: RecordType<TLPage, "index" | "name">;
// @public (undocumented)
export const parentIdValidator: T.Validator<TLParentId>;
// @public (undocumented)
export const PointerRecordType: RecordType<TLPointer, never>;
// @internal (undocumented)
export const rootShapeMigrations: Migrations;
// @public (undocumented)
export type SchemaShapeInfo = {
migrations?: Migrations;
props?: Record<string, {
validate: (prop: any) => any;
}>;
};
// @internal (undocumented)
export const scribbleValidator: T.Validator<TLScribble>;
// @public (undocumented)
export const shapeIdValidator: T.Validator<TLShapeId>;
// @public (undocumented)
export type ShapeProps<Shape extends TLBaseShape<any, any>> = {
[K in keyof Shape['props']]: T.Validator<Shape['props'][K]>;
};
// @internal (undocumented)
export const sizeValidator: T.Validator<"l" | "m" | "s" | "xl">;
// @internal (undocumented)
export const splineValidator: T.Validator<"cubic" | "line">;
// @internal (undocumented)
export const textShapeMigrations: Migrations;
// @internal (undocumented)
export const textShapeProps: ShapeProps<TLTextShape>;
// @public (undocumented)
export const TL_ALIGN_TYPES: Set<"end" | "middle" | "start">;
// @public (undocumented)
export const TL_ARROWHEAD_TYPES: Set<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
// @public
export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
// @public (undocumented)
export const TL_COLOR_TYPES: Set<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
// @public (undocumented)
export const TL_DASH_TYPES: Set<"dashed" | "dotted" | "draw" | "solid">;
// @public (undocumented)
export const TL_FILL_TYPES: Set<"none" | "pattern" | "semi" | "solid">;
// @public (undocumented)
export const TL_FONT_TYPES: Set<"draw" | "mono" | "sans" | "serif">;
// @public (undocumented)
export const TL_GEO_TYPES: Set<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
// @public (undocumented)
export const TL_SIZE_TYPES: Set<"l" | "m" | "s" | "xl">;
// @public (undocumented)
export const TL_SPLINE_TYPES: Set<"cubic" | "line">;
// @public (undocumented)
export const TL_STYLE_TYPES: Set<"align" | "arrowheadEnd" | "arrowheadStart" | "color" | "dash" | "fill" | "font" | "geo" | "icon" | "labelColor" | "size" | "spline" | "verticalAlign">;
// @public (undocumented)
export interface TLAlignStyle extends TLBaseStyle {
// (undocumented)
id: TLAlignType;
// (undocumented)
type: 'align';
}
// @public (undocumented)
export type TLAlignType = SetValue<typeof TL_ALIGN_TYPES>;
// @public (undocumented)
export interface TLArrowheadEndStyle extends TLBaseStyle {
// (undocumented)
id: TLArrowheadType;
// (undocumented)
type: 'arrowheadEnd';
}
// @public (undocumented)
export interface TLArrowheadStartStyle extends TLBaseStyle {
// (undocumented)
id: TLArrowheadType;
// (undocumented)
type: 'arrowheadStart';
}
// @public (undocumented)
export type TLArrowheadType = SetValue<typeof TL_ARROWHEAD_TYPES>;
// @public (undocumented)
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
// @public (undocumented)
export type TLArrowShapeProps = {
labelColor: TLColorType;
color: TLColorType;
fill: TLFillType;
dash: TLDashType;
size: TLSizeType;
arrowheadStart: TLArrowheadType;
arrowheadEnd: TLArrowheadType;
font: TLFontType;
start: TLArrowTerminal;
end: TLArrowTerminal;
bend: number;
text: string;
};
// @public (undocumented)
export type TLArrowTerminal = {
type: 'binding';
boundShapeId: TLShapeId;
normalizedAnchor: Vec2dModel;
isExact: boolean;
} | {
type: 'point';
x: number;
y: number;
};
// @public (undocumented)
export type TLArrowTerminalType = SetValue<typeof TL_ARROW_TERMINAL_TYPE>;
// @public (undocumented)
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
// @public (undocumented)
export type TLAssetId = RecordId<TLBaseAsset<any, any>>;
// @public (undocumented)
export type TLAssetPartial<T extends TLAsset = TLAsset> = T extends T ? {
id: TLAssetId;
type: T['type'];
props?: Partial<T['props']>;
} & Partial<Omit<T, 'id' | 'props' | 'type'>> : never;
// @public (undocumented)
export type TLAssetShape = Extract<TLShape, {
props: {
assetId: TLAssetId;
};
}>;
// @public (undocumented)
export interface TLBaseAsset<Type extends string, Props> extends BaseRecord<'asset', TLAssetId> {
// (undocumented)
props: Props;
// (undocumented)
type: Type;
}
// @public (undocumented)
export interface TLBaseShape<Type extends string, Props extends object> extends BaseRecord<'shape', TLShapeId> {
// (undocumented)
index: string;
// (undocumented)
isLocked: boolean;
// (undocumented)
opacity: TLOpacityType;
// (undocumented)
parentId: TLParentId;
// (undocumented)
props: Props;
// (undocumented)
rotation: number;
// (undocumented)
type: Type;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public
export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
title: string;
description: string;
image: string;
src: null | string;
}>;
// @public (undocumented)
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>;
// @public
export interface TLCamera extends BaseRecord<'camera', TLCameraId> {
// (undocumented)
x: number;
// (undocumented)
y: number;
// (undocumented)
z: number;
}
// @public
export type TLCameraId = RecordId<TLCamera>;
// @public
export type TLCanvasUiColor = SetValue<typeof TL_CANVAS_UI_COLOR_TYPES>;
// @public (undocumented)
export interface TLColorStyle extends TLBaseStyle {
// (undocumented)
id: TLColorType;
// (undocumented)
type: 'color';
}
// @public (undocumented)
export type TLColorType = SetValue<typeof TL_COLOR_TYPES>;
// @public
export interface TLCursor {
// (undocumented)
color: TLCanvasUiColor;
// (undocumented)
rotation: number;
// (undocumented)
type: TLCursorType;
}
// @public
export type TLCursorType = SetValue<typeof TL_CURSOR_TYPES>;
// @public (undocumented)
export interface TLDashStyle extends TLBaseStyle {
// (undocumented)
id: TLDashType;
// (undocumented)
type: 'dash';
}
// @public (undocumented)
export type TLDashType = SetValue<typeof TL_DASH_TYPES>;
// @public
export type TLDefaultShape = TLArrowShape | TLBookmarkShape | TLDrawShape | TLEmbedShape | TLFrameShape | TLGeoShape | TLGroupShape | TLHighlightShape | TLIconShape | TLImageShape | TLLineShape | TLNoteShape | TLTextShape | TLVideoShape;
// @public
export interface TLDocument extends BaseRecord<'document', RecordId<TLDocument>> {
// (undocumented)
gridSize: number;
// (undocumented)
name: string;
}
// @public (undocumented)
export const TLDOCUMENT_ID: RecordId<TLDocument>;
// @public (undocumented)
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>;
// @public (undocumented)
export type TLDrawShapeSegment = {
type: SetValue<typeof TL_DRAW_SHAPE_SEGMENT_TYPE>;
points: Vec2dModel[];
};
// @public (undocumented)
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>;
// @public (undocumented)
export type TLEmbedShapePermissions = {
[K in keyof typeof embedShapePermissionDefaults]?: boolean;
};
// @public (undocumented)
export interface TLFillStyle extends TLBaseStyle {
// (undocumented)
id: TLFillType;
// (undocumented)
type: 'fill';
}
// @public (undocumented)
export type TLFillType = SetValue<typeof TL_FILL_TYPES>;
// @public (undocumented)
export interface TLFontStyle extends TLBaseStyle {
// (undocumented)
id: TLFontType;
// (undocumented)
type: 'font';
}
// @public (undocumented)
export type TLFontType = SetValue<typeof TL_FONT_TYPES>;
// @public (undocumented)
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>;
// @public (undocumented)
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>;
// @public (undocumented)
export interface TLGeoStyle extends TLBaseStyle {
// (undocumented)
id: TLGeoType;
// (undocumented)
type: 'geo';
}
// @public (undocumented)
export type TLGeoType = SetValue<typeof TL_GEO_TYPES>;
// @public (undocumented)
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>;
// @public
export interface TLHandle {
// (undocumented)
canBind?: boolean;
id: string;
// (undocumented)
index: string;
// (undocumented)
type: TLHandleType;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public
export type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>;
// @public (undocumented)
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>;
// @public (undocumented)
export type TLIconShape = TLBaseShape<'icon', TLIconShapeProps>;
// @public (undocumented)
export interface TLIconStyle extends TLBaseStyle {
// (undocumented)
id: TLIconType;
// (undocumented)
type: 'icon';
}
// @public (undocumented)
export type TLIconType = SetValue<typeof TL_ICON_TYPES>;
// @public
export type TLImageAsset = TLBaseAsset<'image', {
w: number;
h: number;
name: string;
isAnimated: boolean;
mimeType: null | string;
src: null | string;
}>;
// @public (undocumented)
export type TLImageCrop = {
topLeft: Vec2dModel;
bottomRight: Vec2dModel;
};
// @public (undocumented)
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>;
// @public (undocumented)
export type TLImageShapeProps = {
url: string;
playing: boolean;
w: number;
h: number;
assetId: null | TLAssetId;
crop: null | TLImageCrop;
};
// @public
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
// (undocumented)
brush: Box2dModel | null;
// (undocumented)
chatMessage: string;
// (undocumented)
currentPageId: TLPageId;
// (undocumented)
cursor: TLCursor;
// (undocumented)
exportBackground: boolean;
// (undocumented)
followingUserId: null | string;
// (undocumented)
isChatting: boolean;
// (undocumented)
isDebugMode: boolean;
// (undocumented)
isFocusMode: boolean;
// (undocumented)
isGridMode: boolean;
// (undocumented)
isPenMode: boolean;
// (undocumented)
isToolLocked: boolean;
// (undocumented)
opacityForNextShape: TLOpacityType;
// (undocumented)
propsForNextShape: TLInstancePropsForNextShape;
// (undocumented)
screenBounds: Box2dModel;
// (undocumented)
scribble: null | TLScribble;
// (undocumented)
zoomBrush: Box2dModel | null;
}
// @public (undocumented)
export const TLINSTANCE_ID: TLInstanceId;
// @public (undocumented)
export type TLInstanceId = RecordId<TLInstance>;
// @public
export interface TLInstancePageState extends BaseRecord<'instance_page_state', TLInstancePageStateId> {
// (undocumented)
croppingId: null | TLShapeId;
// (undocumented)
editingId: null | TLShapeId;
// (undocumented)
erasingIds: TLShapeId[];
// (undocumented)
focusLayerId: null | TLShapeId;
// (undocumented)
hintingIds: TLShapeId[];
// (undocumented)
hoveredId: null | TLShapeId;
// (undocumented)
pageId: RecordId<TLPage>;
// (undocumented)
selectedIds: TLShapeId[];
}
// @public (undocumented)
export interface TLInstancePresence extends BaseRecord<'instance_presence', TLInstancePresenceID> {
// (undocumented)
brush: Box2dModel | null;
// (undocumented)
camera: {
x: number;
y: number;
z: number;
};
// (undocumented)
chatMessage: string;
// (undocumented)
color: string;
// (undocumented)
currentPageId: TLPageId;
// (undocumented)
cursor: {
x: number;
y: number;
type: TLCursor['type'];
rotation: number;
};
// (undocumented)
followingUserId: null | string;
// (undocumented)
lastActivityTimestamp: number;
// (undocumented)
screenBounds: Box2dModel;
// (undocumented)
scribble: null | TLScribble;
// (undocumented)
selectedIds: TLShapeId[];
// (undocumented)
userId: string;
// (undocumented)
userName: string;
}
// @public (undocumented)
export type TLInstancePropsForNextShape = Pick<TLShapeProps, TLStyleType>;
// @public (undocumented)
export type TLLanguage = (typeof LANGUAGES)[number];
// @public (undocumented)
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>;
// @public (undocumented)
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>;
// @public (undocumented)
export type TLNullableShapeProps = {
[K in TLShapeProp]?: null | TLShapeProps[K];
};
// @public (undocumented)
export type TLOpacityType = number;
// @public
export interface TLPage extends BaseRecord<'page', TLPageId> {
// (undocumented)
index: string;
// (undocumented)
name: string;
}
// @public (undocumented)
export type TLPageId = RecordId<TLPage>;
// @public (undocumented)
export type TLParentId = TLPageId | TLShapeId;
// @public (undocumented)
export const TLPOINTER_ID: TLPointerId;
// @public (undocumented)
export type TLRecord = TLAsset | TLCamera | TLDocument | TLInstance | TLInstancePageState | TLInstancePresence | TLPage | TLPointer | TLShape;
// @public (undocumented)
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>;
// @public
export type TLScribble = {
points: Vec2dModel[];
size: number;
color: TLCanvasUiColor;
opacity: number;
state: SetValue<typeof TL_SCRIBBLE_STATES>;
delay: number;
};
// @public
export type TLShape = TLDefaultShape | TLUnknownShape;
// @public (undocumented)
export type TLShapeId = RecordId<TLUnknownShape>;
// @public (undocumented)
export type TLShapePartial<T extends TLShape = TLShape> = T extends T ? {
id: TLShapeId;
type: T['type'];
props?: Partial<T['props']>;
} & Partial<Omit<T, 'id' | 'props' | 'type'>> : never;
// @public (undocumented)
export type TLShapeProp = keyof TLShapeProps;
// @public (undocumented)
export type TLShapeProps = Identity<UnionToIntersection<TLDefaultShape['props']>>;
// @public (undocumented)
export interface TLSizeStyle extends TLBaseStyle {
// (undocumented)
id: TLSizeType;
// (undocumented)
type: 'size';
}
// @public (undocumented)
export type TLSizeType = SetValue<typeof TL_SIZE_TYPES>;
// @public (undocumented)
export interface TLSplineStyle extends TLBaseStyle {
// (undocumented)
id: TLSplineType;
// (undocumented)
type: 'spline';
}
// @public (undocumented)
export type TLSplineType = SetValue<typeof TL_SPLINE_TYPES>;
// @public (undocumented)
export type TLStore = Store<TLRecord, TLStoreProps>;
// @public (undocumented)
export type TLStoreProps = {
defaultName: string;
};
// @public (undocumented)
export type TLStoreSchema = StoreSchema<TLRecord, TLStoreProps>;
// @public (undocumented)
export type TLStoreSnapshot = StoreSnapshot<TLRecord>;
// @public (undocumented)
export interface TLStyleCollections {
// (undocumented)
align: TLAlignStyle[];
// (undocumented)
arrowheadEnd: TLArrowheadEndStyle[];
// (undocumented)
arrowheadStart: TLArrowheadStartStyle[];
// (undocumented)
color: TLColorStyle[];
// (undocumented)
dash: TLDashStyle[];
// (undocumented)
fill: TLFillStyle[];
// (undocumented)
font: TLFontStyle[];
// (undocumented)
geo: TLGeoStyle[];
// (undocumented)
size: TLSizeStyle[];
// (undocumented)
spline: TLSplineStyle[];
// (undocumented)
verticalAlign: TLVerticalAlignStyle[];
}
// @public (undocumented)
export type TLStyleItem = TLAlignStyle | TLArrowheadEndStyle | TLArrowheadStartStyle | TLColorStyle | TLDashStyle | TLFillStyle | TLFontStyle | TLGeoStyle | TLSizeStyle | TLSplineStyle | TLVerticalAlignStyle;
// @public (undocumented)
export type TLStyleProps = Pick<TLShapeProps, TLStyleType>;
// @public (undocumented)
export type TLStyleType = SetValue<typeof TL_STYLE_TYPES>;
// @public (undocumented)
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
// @public (undocumented)
export type TLTextShapeProps = {
color: TLColorType;
size: TLSizeType;
font: TLFontType;
align: TLAlignType;
w: number;
text: string;
scale: number;
autoSize: boolean;
};
// @public
export type TLUnknownShape = TLBaseShape<string, object>;
// @public (undocumented)
export type TLVerticalAlignType = SetValue<typeof TL_VERTICAL_ALIGN_TYPES>;
// @public
export type TLVideoAsset = TLBaseAsset<'video', {
w: number;
h: number;
name: string;
isAnimated: boolean;
mimeType: null | string;
src: null | string;
}>;
// @public (undocumented)
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>;
// @public
export interface Vec2dModel {
// (undocumented)
x: number;
// (undocumented)
y: number;
// (undocumented)
z?: number;
}
// @internal (undocumented)
export const verticalAlignValidator: T.Validator<"end" | "middle" | "start">;
// @internal (undocumented)
export const videoShapeMigrations: Migrations;
// @internal (undocumented)
export const videoShapeProps: ShapeProps<TLVideoShape>;
// (No @packageDocumentation comment for this package)