@tldraw/editor 4.6.0-canary.f9c762eafbc3 → 4.6.0-canary.fc83e96f57ca

package/dist-cjs/index.d.ts

@@ -1,5 +1,6 @@
 import { Atom } from '@tldraw/state';
 import { AtomSet } from '@tldraw/store';
+import { Awaitable } from '@tldraw/utils';
 import { BoxModel } from '@tldraw/tlschema';
 import { ComponentType } from 'react';
 import { Computed } from '@tldraw/state';
@@ -56,9 +57,12 @@ import { TLCamera } from '@tldraw/tlschema';
 import { TLCreateShapePartial } from '@tldraw/tlschema';
 import { TLCursor } from '@tldraw/tlschema';
 import { TLCursorType } from '@tldraw/tlschema';
+import { TLDefaultColor } from '@tldraw/tlschema';
+import { TLDefaultColorStyle } from '@tldraw/tlschema';
 import { TLDefaultDashStyle } from '@tldraw/tlschema';
 import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
 import { TLDocument } from '@tldraw/tlschema';
+import { TLFontFace } from '@tldraw/tlschema';
 import { TLGroupShape } from '@tldraw/tlschema';
 import { TLHandle } from '@tldraw/tlschema';
 import { TLImageAsset } from '@tldraw/tlschema';
@@ -80,8 +84,14 @@ import { TLStore } from '@tldraw/tlschema';
 import { TLStoreProps } from '@tldraw/tlschema';
 import { TLStoreSchema } from '@tldraw/tlschema';
 import { TLStoreSnapshot } from '@tldraw/tlschema';
+import { TLTheme } from '@tldraw/tlschema';
+import { TLThemeColors } from '@tldraw/tlschema';
+import { TLThemeId } from '@tldraw/tlschema';
+import { TLThemes } from '@tldraw/tlschema';
 import { TLUnknownBinding } from '@tldraw/tlschema';
 import { TLUnknownShape } from '@tldraw/tlschema';
+import { TLUser } from '@tldraw/tlschema';
+import { TLUserStore } from '@tldraw/tlschema';
 import { TLVideoAsset } from '@tldraw/tlschema';
 import { UnknownRecord } from '@tldraw/store';
 import { VecModel } from '@tldraw/tlschema';
@@ -164,6 +174,12 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
     getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
 }
 
+/** @public */
+export declare interface BatchMeasurementRequest {
+    html: string;
+    opts: TLMeasureTextOpts;
+}
+
 /**
  * Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange},
  * describing the data associated with a binding being changed.
@@ -711,6 +727,12 @@ export declare function createDeepLinkString(deepLink: TLDeepLink): string;
  */
 export declare function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
 
+/** @public */
+export declare function createTLCurrentUser(opts?: {
+    setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
+    userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
+}): TLCurrentUser;
+
 /**
  * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and
  * migrations, or a schema.
@@ -728,13 +750,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
  *
  * @public
  */
-export declare function createTLStore({ initialData, defaultName, id, assets, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
-
-/** @public */
-export declare function createTLUser(opts?: {
-    setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
-    userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
-}): TLUser;
+export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
 
 /** @public */
 export declare class CubicBezier2d extends Polyline2d {
@@ -809,6 +825,13 @@ export declare interface DebugFlagDefaults<T> {
 
 /* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
 
+/**
+ * The default theme definition containing color palettes for both light and dark modes.
+ *
+ * @public
+ */
+export declare const DEFAULT_THEME: TLTheme;
+
 /** @public @react */
 export declare function DefaultBackground(): JSX.Element;
 
@@ -923,6 +946,9 @@ export declare const defaultTldrawOptions: {
     readonly maxShapesPerPage: 4000;
     readonly multiClickDurationMs: 200;
     readonly nonce: undefined;
+    readonly onBeforeCopyToClipboard: undefined;
+    readonly onBeforePasteFromClipboard: undefined;
+    readonly onClipboardPasteRaw: undefined;
     readonly quickZoomPreservesScreenBounds: true;
     readonly snapThreshold: 8;
     readonly spacebarPanning: true;
@@ -953,6 +979,9 @@ export declare const defaultUserPreferences: Readonly<{
     name: "";
 }>;
 
+/** @public */
+export declare const defaultUserStore: TLUserStore;
+
 /**
  * Convert degrees to radians.
  *
@@ -1028,7 +1057,7 @@ export declare class EdgeScrollManager {
 /** @public */
 export declare class Editor extends EventEmitter<TLEventMap> {
     readonly id: string;
-    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls }: TLEditorOptions);
+    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
     private readonly _getShapeVisibility?;
     private getIsShapeHiddenCache;
     isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1091,7 +1120,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly snaps: SnapManager;
-    private readonly _spatialIndex;
+    /* Excluded from this release type: _spatialIndex */
     /**
      * A manager for the any asynchronous events and making sure they're
      * cleaned up upon disposal.
@@ -1110,6 +1139,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly user: UserPreferencesManager;
+    /* Excluded from this release type: _themeManager */
     /**
      * A helper for measuring text.
      *
@@ -1160,6 +1190,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     dispose(): void;
+    /**
+     * Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
+     *
+     * @public
+     */
+    getColorMode(): 'dark' | 'light';
+    /**
+     * Set the color mode. Note that this is a convenience method that passes the mode to
+     * `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
+     *
+     * @public
+     */
+    setColorMode(mode: 'dark' | 'light'): this;
+    /**
+     * Get the id of the current theme.
+     *
+     * @public
+     */
+    getCurrentThemeId(): TLThemeId;
+    /**
+     * Get the current theme definition.
+     *
+     * @public
+     */
+    getCurrentTheme(): TLTheme;
+    /**
+     * Set the current theme by id.
+     *
+     * @public
+     */
+    setCurrentTheme(id: TLThemeId): this;
+    /**
+     * Get all registered theme definitions.
+     *
+     * @public
+     */
+    getThemes(): TLThemes;
+    /**
+     * Get a single theme definition by id.
+     *
+     * @public
+     */
+    getTheme(id: TLThemeId): TLTheme | undefined;
+    /**
+     * Replace all theme definitions, or update them via a callback that receives a deep copy.
+     * The `'default'` theme must always be present in the result.
+     *
+     * @example
+     * ```ts
+     * // Replace all themes
+     * editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
+     *
+     * // Update via callback
+     * editor.updateThemes((themes) => {
+     *   delete themes.ocean
+     *   return themes
+     * })
+     * ```
+     *
+     * @public
+     */
+    updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
+    /**
+     * Register or update a single theme definition. The theme is keyed by its `id` property.
+     *
+     * @example
+     * ```ts
+     * // Override a property on the default theme
+     * editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
+     *
+     * // Register a new theme
+     * editor.updateTheme({ id: 'ocean', ...myOceanTheme })
+     * ```
+     *
+     * @public
+     */
+    updateTheme(theme: TLTheme): this;
     /**
      * A map of shape utility classes (TLShapeUtils) by shape type.
      *
@@ -2259,6 +2366,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getCollaboratorsOnCurrentPage(): TLInstancePresence[];
+    /**
+     * Get the current user's ID for attribution purposes.
+     * Also ensures a `user:` record exists in the store for the current user.
+     * Returns `null` when the user store has no current user.
+     *
+     * @public
+     */
+    getAttributionUserId(): null | string;
+    /* Excluded from this release type: _ensureUserRecord */
+    /**
+     * Resolve a display name for a user ID. Asks the
+     * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+     * falling back to the `user:` record in the store.
+     *
+     * @public
+     */
+    getAttributionDisplayName(userId: null | string): null | string;
+    /**
+     * Resolve a user record by ID. Asks the
+     * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+     * falling back to the `user:` record in the store.
+     *
+     * @public
+     */
+    getAttributionUser(userId: null | string): null | TLUser;
+    /* Excluded from this release type: _getReferencedUserIds */
     private _isLockedOnFollowingUser;
     /**
      * Start viewport-following a user.
@@ -4353,6 +4486,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
  */
 export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
 
+/**
+ * Resolves a color style value to its actual CSS color string for a given theme and variant.
+ * If the color is not a default theme color, returns the color value as-is.
+ *
+ * @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
+ * @param color - The color style value to resolve
+ * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
+ * @returns The CSS color string for the specified color and variant
+ *
+ * @example
+ * ```ts
+ * import { getColorValue } from 'tldraw'
+ *
+ * const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
+ *
+ * // Get the solid variant of red
+ * const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
+ *
+ * // Get the fill variant of blue
+ * const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
+ *
+ * // Custom color passes through unchanged
+ * const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
+ * ```
+ *
+ * @public
+ */
+export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
+
 /** @public */
 export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
 
@@ -5359,6 +5521,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
     y: number;
 };
 
+/**
+ * Resolve a partial set of user-provided themes into a complete `TLThemes`
+ * record by merging with `DEFAULT_THEME`. The result is suitable for passing to
+ * `registerColorsFromThemes`, `registerFontsFromThemes`, and the
+ * `ThemeManager` constructor.
+ *
+ * @public
+ */
+export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
+
 /** @public */
 export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
 
@@ -5947,6 +6119,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      */
     getHandleSnapGeometry(shape: Shape): HandleSnapGeometry;
     getText(shape: Shape): string | undefined;
+    /**
+     * Return user IDs referenced in shape-specific props.
+     * Used when copying shapes to include referenced users on the clipboard.
+     * Override this if your shape stores user IDs in custom props.
+     *
+     * @public
+     */
+    getReferencedUserIds(shape: Shape): string[];
     getAriaDescriptor(shape: Shape): string | undefined;
     /**
      * A callback called just before a shape is created. This method provides a last chance to modify
@@ -6476,6 +6656,10 @@ export declare interface SvgExportContext {
      * Whether the export should be in dark mode.
      */
     readonly isDarkMode: boolean;
+    /**
+     * The color mode to use for this export.
+     */
+    readonly colorMode: 'dark' | 'light';
     /**
      * The scale of the export - how much CSS pixels will be scaled up/down by.
      */
@@ -6507,15 +6691,18 @@ export declare const TAB_ID: string;
 export declare class TextManager {
     editor: Editor;
     private elm;
+    private poolElms;
     constructor(editor: Editor);
+    private createMeasurementEl;
+    private resetElementStyles;
     private setElementStyles;
+    private getMeasureStyles;
     dispose(): void;
-    measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & {
-        scrollWidth: number;
-    };
-    measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & {
-        scrollWidth: number;
-    };
+    private ensurePoolSize;
+    private getPoolItem;
+    measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[];
+    measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
+    measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
     /**
      * Given an html element, measure the position of each span of unbroken
      * word/white-space characters within any text nodes it contains.
@@ -6543,6 +6730,47 @@ export declare class TextManager {
     }[];
 }
 
+/**
+ * Manages the editor's color themes.
+ *
+ * Stores named theme definitions (each containing light and dark color palettes
+ * alongside shared properties like font size). The current theme is resolved by
+ * combining the current theme name with the user's color mode preference.
+ *
+ * **Terminology:**
+ * - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
+ * - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
+ *   `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
+ *
+ * @public
+ */
+export declare class ThemeManager {
+    private readonly editor;
+    private readonly _themes;
+    private readonly _currentThemeId;
+    constructor(editor: Editor, options: {
+        initial: TLThemeId;
+        themes: TLThemes;
+    });
+    /** Get the current color mode based on the user's dark mode preference. */
+    getColorMode(): 'dark' | 'light';
+    /** Get all registered theme definitions. */
+    getThemes(): TLThemes;
+    /** Get a single theme definition by id. */
+    getTheme(id: TLThemeId): TLTheme | undefined;
+    /** Get the id of the current theme. */
+    getCurrentThemeId(): TLThemeId;
+    getCurrentTheme(): TLTheme;
+    /** Set the current theme by id. The theme must have been previously registered. */
+    setCurrentTheme(id: TLThemeId): void;
+    /** Replace all theme definitions, or update them via a callback that receives a deep copy. */
+    updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
+    /** Register or update a named theme definition. */
+    updateTheme(theme: TLTheme): void;
+    /** Clean up any resources held by the manager. */
+    dispose(): void;
+}
+
 /* Excluded from this release type: TickManager */
 
 /**
@@ -6727,6 +6955,40 @@ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'tri
 /** @public */
 export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
 
+/**
+ * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
+ *
+ * - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
+ *   `navigator.clipboard.read()`).
+ * - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
+ *   exists
+ *   (no `DataTransfer`).
+ *
+ * @public
+ */
+export declare type TLClipboardPasteRawInfo = {
+    readonly clipboardData: DataTransfer | null;
+    readonly editor: Editor;
+    readonly event: ClipboardEvent;
+    readonly point: undefined | VecLike;
+    readonly source: 'native-event';
+} | {
+    readonly clipboardItems: readonly ClipboardItem[];
+    readonly editor: Editor;
+    readonly point: undefined | VecLike;
+    readonly source: 'clipboard-read';
+};
+
+/**
+ * Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
+ *
+ * @public
+ */
+export declare interface TLClipboardWriteInfo {
+    readonly operation: 'copy' | 'cut';
+    readonly source: 'menu' | 'native';
+}
+
 /** @public */
 export declare interface TLCollaboratorHintProps {
     userId: string;
@@ -6754,6 +7016,7 @@ export declare interface TLContent {
     rootShapeIds: TLShapeId[];
     assets: TLAsset[];
     schema: SerializedSchema;
+    users?: TLUser[];
 }
 
 /**
@@ -6775,6 +7038,12 @@ export declare interface TLCropInfo<T extends TLShape> {
     aspectRatioLocked?: boolean;
 }
 
+/** @public */
+export declare interface TLCurrentUser {
+    readonly userPreferences: Signal<TLUserPreferences>;
+    readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
+}
+
 /** @public */
 export declare interface TLCursorProps {
     userId: string;
@@ -6902,11 +7171,23 @@ export declare interface TldrawEditorBaseProps {
     /**
      * The user interacting with the editor.
      */
-    user?: TLUser;
+    user?: TLCurrentUser;
+    /**
+     * The editor's color scheme. Defaults to `'light'`.
+     *
+     * - `'light'` - Always use light mode.
+     * - `'dark'` - Always use dark mode.
+     * - `'system'` - Follow the OS color scheme preference.
+     */
+    colorScheme?: 'dark' | 'light' | 'system';
     /**
-     * Whether to infer dark mode from the user's OS. Defaults to false.
+     * Named themes for the editor.
      */
-    inferDarkMode?: boolean;
+    themes?: Partial<TLThemes>;
+    /**
+     * The id of the initially active theme. Defaults to `'default'`.
+     */
+    initialTheme?: TLThemeId;
     /**
      * Camera options for the editor.
      *
@@ -7166,6 +7447,72 @@ export declare interface TldrawOptions {
      * viewport's page dimensions regardless of overview zoom changes.
      */
     readonly quickZoomPreservesScreenBounds: boolean;
+    /**
+     * Called before content is written to the clipboard during a copy or cut operation.
+     * Receives the serialized content (shapes, bindings, assets) and can filter or transform
+     * it before it reaches the clipboard.
+     *
+     * Return a modified `TLContent` object to change what is copied or cut. Return `false` to
+     * cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
+     * (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
+     * the hook is async.
+     *
+     * @example
+     * ```tsx
+     * // Filter out "locked" shapes from copy
+     * onBeforeCopyToClipboard({ content, operation }) {
+     *     return {
+     *         ...content,
+     *         shapes: content.shapes.filter(s => !s.meta.locked),
+     *         rootShapeIds: content.rootShapeIds.filter(id =>
+     *             content.shapes.find(s => s.id === id && !s.meta.locked)
+     *         ),
+     *     }
+     * }
+     * ```
+     */
+    onBeforeCopyToClipboard?(info: {
+        content: TLContent;
+        editor: Editor;
+    } & TLClipboardWriteInfo): Awaitable<false | TLContent | void>;
+    /**
+     * Called before pasted content is processed and shapes are created. Receives the parsed
+     * external content from the clipboard and can filter, transform, or cancel it.
+     *
+     * Return `false` to cancel the paste. Return a modified content object to transform it.
+     * Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
+     * those values if the hook is async.
+     *
+     * This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
+     * not for file drops or programmatic `putExternalContent` calls.
+     *
+     * @example
+     * ```tsx
+     * // Block pasting of image files
+     * onBeforePasteFromClipboard({ content }) {
+     *     if (content.type === 'files') {
+     *         const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
+     *         if (nonImages.length === 0) return false
+     *         return { ...content, files: nonImages }
+     *     }
+     * }
+     * ```
+     */
+    onBeforePasteFromClipboard?(info: {
+        content: TLExternalContent<unknown>;
+        editor: Editor;
+        point?: VecLike;
+        source: 'clipboard-read' | 'native-event';
+    }): Awaitable<false | TLExternalContent<unknown> | void>;
+    /**
+     * Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
+     * (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
+     *
+     * Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
+     * {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
+     * raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
+     */
+    onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void;
     /**
      * Called when content is dropped on the canvas. Provides the page position
      * where the drop occurred and the underlying drag event object.
@@ -7236,15 +7583,10 @@ export declare interface TLEditorOptions {
      * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
      */
     tools: readonly TLStateNodeConstructor[];
-    /**
-     * Should return a containing html element which has all the styles applied to the editor. If not
-     * given, the body element will be used.
-     */
-    getContainer(): HTMLElement;
     /**
      * A user defined externally to replace the default user.
      */
-    user?: TLUser;
+    user?: TLCurrentUser;
     /**
      * The editor's initial active tool (or other state node id).
      */
@@ -7253,27 +7595,15 @@ export declare interface TLEditorOptions {
      * Whether to automatically focus the editor when it mounts.
      */
     autoFocus?: boolean;
-    /**
-     * Whether to infer dark mode from the user's system preferences. Defaults to false.
-     */
-    inferDarkMode?: boolean;
-    /**
-     * Options for the editor's camera.
-     *
-     * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
-     */
-    cameraOptions?: Partial<TLCameraOptions>;
-    options?: Partial<TldrawOptions>;
-    /**
-     * Text options for the editor.
-     *
-     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
-     */
-    textOptions?: TLTextOptions;
     licenseKey?: string;
     fontAssetUrls?: {
         [key: string]: string | undefined;
     };
+    /**
+     * Should return a containing html element which has all the styles applied to the editor. If not
+     * given, the body element will be used.
+     */
+    getContainer(): HTMLElement;
     /**
      * Provides a way to hide shapes.
      *
@@ -7290,6 +7620,40 @@ export declare interface TLEditorOptions {
      * @param editor - The editor instance.
      */
     getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
+    /**
+     * Named theme definitions for the editor. Each theme contains shared
+     * properties (font size, line height, stroke width) and color palettes
+     * for both light and dark modes.
+     */
+    themes?: Partial<TLThemes>;
+    /**
+     * The id of the initially active theme. Defaults to `'default'`.
+     */
+    initialTheme?: TLThemeId;
+    /**
+     * The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
+     *
+     * - `'light'` - Always use light mode.
+     * - `'dark'` - Always use dark mode.
+     * - `'system'` - Follow the OS color scheme preference.
+     */
+    colorScheme?: 'dark' | 'light' | 'system';
+    /**
+     * Additional configuration options for the tldraw editor.
+     */
+    options?: Partial<TldrawOptions>;
+    /**
+     * Options for the editor's camera.
+     *
+     * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
+     */
+    cameraOptions?: Partial<TLCameraOptions>;
+    /**
+     * Text options for the editor.
+     *
+     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
+     */
+    textOptions?: TLTextOptions;
 }
 
 /**
@@ -7348,6 +7712,7 @@ export declare const tlenv: {
  */
 export declare const tlenvReactive: Atom<    {
 isCoarsePointer: boolean;
+supportsP3ColorSpace: boolean;
 }, unknown>;
 
 /** @public */
@@ -7486,72 +7851,6 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
     ignoreParent?: boolean;
 }
 
-/**
- * A font face that can be used in the editor. The properties of this are largely the same as the
- * ones in the
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
- * @public
- */
-export declare interface TLFontFace {
-    /**
-     * How this font can be referred to in CSS.
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
-     */
-    readonly family: string;
-    /**
-     * The source of the font. This
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
-     */
-    readonly src: TLFontFaceSource;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
-     */
-    readonly ascentOverride?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
-     */
-    readonly descentOverride?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
-     */
-    readonly stretch?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
-     */
-    readonly style?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
-     */
-    readonly weight?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
-     */
-    readonly featureSettings?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
-     */
-    readonly lineGapOverride?: string;
-    /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
-     */
-    readonly unicodeRange?: string;
-}
-
-/**
- * Represents the `src` property of a {@link TLFontFace}.
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
- * @public
- */
-export declare interface TLFontFaceSource {
-    /**
-     * A URL from which to load the font. If the value here is a key in
-     * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
-     */
-    url: string;
-    format?: string;
-    tech?: string;
-}
-
 /** Additional options for the {@link ShapeUtil.getGeometry} method.
  *
  * @public
@@ -7743,6 +8042,11 @@ export declare interface TLLoadSnapshotOptions {
     forceOverwriteSessionState?: boolean;
 }
 
+/** @public */
+export declare type TLMeasuredTextSize = BoxModel & {
+    scrollWidth: number;
+};
+
 /** @public */
 export declare interface TLMeasureTextOpts {
     fontStyle: string;
@@ -8219,6 +8523,14 @@ export declare interface TLStoreBaseOptions {
     defaultName?: string;
     /** How should this store upload & resolve assets? */
     assets?: TLAssetStore;
+    /**
+     * Named theme definitions. When provided, custom color names are automatically
+     * registered before the store is constructed so persisted data with those
+     * colors passes validation on load.
+     */
+    themes?: Partial<TLThemes>;
+    /** How should this store resolve users for attribution? */
+    users?: TLUserStore;
     /** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
     onMount?(editor: Editor): (() => void) | void;
 }
@@ -8406,12 +8718,6 @@ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
     url: string;
 }
 
-/** @public */
-export declare interface TLUser {
-    readonly userPreferences: Signal<TLUserPreferences>;
-    readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
-}
-
 /**
  * A user of tldraw
  *
@@ -8512,6 +8818,9 @@ export declare function uniq<T>(array: {
     readonly length: number;
 } | null | undefined): T[];
 
+/** @public */
+export declare function useColorMode(): 'dark' | 'light';
+
 /** @public */
 export declare function useContainer(): HTMLElement;
 
@@ -8550,9 +8859,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
 /** @public */
 export declare function useIsCropping(shapeId: TLShapeId): boolean;
 
-/** @public */
-export declare function useIsDarkMode(): boolean;
-
 /** @public */
 export declare function useIsEditing(shapeId: TLShapeId): boolean;
 
@@ -8590,11 +8896,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
 /** @public */
 export declare class UserPreferencesManager {
     private readonly user;
-    private readonly inferDarkMode;
+    private readonly colorScheme;
     systemColorScheme: Atom<"dark" | "light", unknown>;
     disposables: Set<() => void>;
     dispose(): void;
-    constructor(user: TLUser, inferDarkMode: boolean);
+    constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
     updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
     getUserPreferences(): {
         animationSpeed: number;
@@ -8665,10 +8971,10 @@ export declare function useSvgExportContext(): null | SvgExportContext;
 /**
  * @public
  */
-export declare function useTldrawUser(opts: {
+export declare function useTldrawCurrentUser(opts: {
     setUserPreferences?: (userPreferences: TLUserPreferences) => void;
     userPreferences?: Signal<TLUserPreferences> | TLUserPreferences;
-}): TLUser;
+}): TLCurrentUser;
 
 /** @public */
 export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema<TLRecord, TLStoreProps>;