@tldraw/editor 4.6.0-next.d8328a2dcc3d → 4.6.0-next.e0f85e824397

package/dist-cjs/index.d.ts

@@ -57,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';
@@ -81,6 +84,11 @@ 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 { TLUnknownAsset } from '@tldraw/tlschema';
 import { TLUnknownBinding } from '@tldraw/tlschema';
 import { TLUnknownShape } from '@tldraw/tlschema';
 import { TLUser } from '@tldraw/tlschema';
@@ -147,6 +155,51 @@ export declare class Arc2d extends Geometry2d {
  */
 export declare function areAnglesCompatible(a: number, b: number): boolean;
 
+/**
+ * Abstract base class for defining asset-type-specific behavior.
+ *
+ * Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
+ * type-specific operations like determining supported MIME types and creating assets from files.
+ *
+ * @public
+ */
+export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
+    editor: Editor;
+    /** Configure this asset util's {@link AssetUtil.options | `options`}. */
+    static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
+        options: infer Options;
+    } ? Partial<Options> : never): T;
+    constructor(editor: Editor);
+    /**
+     * Options for this asset util. Override this to provide customization options for your asset.
+     * Use {@link AssetUtil.configure} to customize existing asset utils.
+     */
+    options: {};
+    static props?: RecordProps<TLUnknownAsset>;
+    static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
+    /**
+     * The type of the asset util, which should match the asset's type.
+     */
+    static type: string;
+    /**
+     * Get the default props for an asset of this type.
+     */
+    abstract getDefaultProps(): Asset['props'];
+    /**
+     * Get the MIME types that this asset type supports.
+     * Return an empty array if this asset type doesn't support files (e.g. bookmarks).
+     */
+    getSupportedMimeTypes(): readonly string[];
+    /**
+     * Check whether this asset type accepts a given MIME type.
+     */
+    acceptsMimeType(mimeType: string): boolean;
+    /**
+     * Create an asset from a file. Return null if this asset type can't handle the file.
+     */
+    getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
+}
+
 /** @public */
 export declare function average(A: VecLike, B: VecLike): string;
 
@@ -743,7 +796,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
  *
  * @public
  */
-export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
+export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
 
 /** @public */
 export declare class CubicBezier2d extends Polyline2d {
@@ -818,6 +871,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;
 
@@ -1043,7 +1103,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, assetUtils: assetUtilConstructors, 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;
@@ -1106,7 +1166,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.
@@ -1125,6 +1185,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly user: UserPreferencesManager;
+    /* Excluded from this release type: _themeManager */
     /**
      * A helper for measuring text.
      *
@@ -1175,6 +1236,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.
      *
@@ -1183,6 +1321,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     shapeUtils: {
         readonly [K in string]?: ShapeUtil<TLShape>;
     };
+    /* Excluded from this release type: _shapeUtilsByAssetType */
     styleProps: {
         [key: string]: Map<StyleProp<any>, string>;
     };
@@ -1214,6 +1353,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
     hasShapeUtil(type: TLShape['type']): boolean;
     hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
+    /**
+     * Get the shape util that handles the given asset type.
+     * Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
+     * the given asset type, or undefined if none matches.
+     *
+     * @param assetType - The asset type string.
+     * @public
+     */
+    getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
     /**
      * A map of shape utility classes (TLShapeUtils) by shape type.
      *
@@ -1244,6 +1392,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
         type: S['type'];
     } | S): BindingUtil<S>;
     getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
+    /**
+     * A map of asset utility classes by asset type.
+     *
+     * @public
+     */
+    assetUtils: {
+        readonly [K in string]?: AssetUtil<TLAsset>;
+    };
+    /**
+     * Get an asset util from an asset or asset type.
+     *
+     * @param arg - An asset, asset type string, or object with type.
+     *
+     * @public
+     */
+    getAssetUtil<S extends TLAsset>(asset: {
+        type: S['type'];
+    } | S): AssetUtil<S>;
+    getAssetUtil(type: string): AssetUtil;
+    /**
+     * Returns true if the editor has an asset util for the given asset type.
+     *
+     * @public
+     */
+    hasAssetUtil(arg: {
+        type: string;
+    } | string): boolean;
+    /**
+     * Get the asset util that accepts the given MIME type.
+     * Returns null if no registered asset util accepts the MIME type.
+     *
+     * @public
+     */
+    getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
     /**
      * A manager for the editor's history.
      *
@@ -4394,6 +4576,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;
 
@@ -5400,6 +5611,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;
 
@@ -5681,12 +5902,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      * @public
      */
     static type: string;
+    /**
+     * The asset types that this shape can be created from.
+     * When a file is dropped on the canvas, the editor finds the shape util
+     * whose `handledAssetTypes` includes the asset's type and calls
+     * {@link ShapeUtil.createShapeForAsset} to produce the shape.
+     *
+     * @public
+     */
+    static handledAssetTypes?: readonly string[];
     /**
      * Get the default props for a shape.
      *
      * @public
      */
     abstract getDefaultProps(): Shape['props'];
+    /**
+     * Create a shape partial for placing an asset on the canvas.
+     * Only called for shapes whose constructor declares matching
+     * {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
+     *
+     * @param asset - The asset to create a shape for.
+     * @param position - Where to place the shape.
+     * @returns A shape partial, or null if this shape can't be created for the asset.
+     * @public
+     */
+    createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
     /**
      * Get the shape's geometry.
      *
@@ -6525,6 +6766,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.
      */
@@ -6595,6 +6840,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 */
 
 /**
@@ -6613,12 +6899,23 @@ export declare type TiptapNode = Node_2;
 /** @public */
 export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
 
+/** @public */
+export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
+
 /** @public */
 export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
 
 /** @public */
 export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
 
+/** @public */
+export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
+    new (editor: Editor): U;
+    type: T['type'];
+    props?: RecordProps<T>;
+    migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
+}
+
 /** @public */
 export declare type TLBaseBoxShape = ExtractShapeByProps<{
     h: number;
@@ -6968,6 +7265,10 @@ export declare interface TldrawEditorBaseProps {
      * An array of binding utils to use in the editor.
      */
     bindingUtils?: readonly TLAnyBindingUtilConstructor[];
+    /**
+     * An array of asset utils to use in the editor.
+     */
+    assetUtils?: readonly TLAnyAssetUtilConstructor[];
     /**
      * An array of tools to add to the editor's state chart.
      */
@@ -6997,9 +7298,21 @@ export declare interface TldrawEditorBaseProps {
      */
     user?: TLCurrentUser;
     /**
-     * Whether to infer dark mode from the user's OS. Defaults to false.
+     * 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';
+    /**
+     * Named themes for the editor.
+     */
+    themes?: Partial<TLThemes>;
+    /**
+     * The id of the initially active theme. Defaults to `'default'`.
      */
-    inferDarkMode?: boolean;
+    initialTheme?: TLThemeId;
     /**
      * Camera options for the editor.
      *
@@ -7392,14 +7705,13 @@ export declare interface TLEditorOptions {
      */
     bindingUtils: readonly TLAnyBindingUtilConstructor[];
     /**
-     * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
+     * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
      */
-    tools: readonly TLStateNodeConstructor[];
+    assetUtils?: readonly TLAnyAssetUtilConstructor[];
     /**
-     * Should return a containing html element which has all the styles applied to the editor. If not
-     * given, the body element will be used.
+     * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
      */
-    getContainer(): HTMLElement;
+    tools: readonly TLStateNodeConstructor[];
     /**
      * A user defined externally to replace the default user.
      */
@@ -7412,27 +7724,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.
      *
@@ -7449,6 +7749,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;
 }
 
 /**
@@ -7507,6 +7841,7 @@ export declare const tlenv: {
  */
 export declare const tlenvReactive: Atom<    {
 isCoarsePointer: boolean;
+supportsP3ColorSpace: boolean;
 }, unknown>;
 
 /** @public */
@@ -7635,6 +7970,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
     type: 'file-replace';
     file: File;
     shapeId: TLShapeId;
+    /** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
     isImage: boolean;
 }
 
@@ -7645,72 +7981,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
@@ -8344,6 +8614,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
     type: T['type'];
     props?: RecordProps<T>;
     migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
+    handledAssetTypes?: readonly string[];
 }
 
 /** @public */
@@ -8383,6 +8654,12 @@ 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}. */
@@ -8404,6 +8681,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
 
 /** @public */
 export declare type TLStoreSchemaOptions = {
+    assetUtils?: readonly TLAnyAssetUtilConstructor[];
     bindingUtils?: readonly TLAnyBindingUtilConstructor[];
     migrations?: readonly MigrationSequence[];
     records?: Record<string, CustomRecordInfo>;
@@ -8672,6 +8950,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;
 
@@ -8710,9 +8991,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;
 
@@ -8750,11 +9028,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: TLCurrentUser, inferDarkMode: boolean);
+    constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
     updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
     getUserPreferences(): {
         animationSpeed: number;