tldraw 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

package/dist-cjs/index.d.ts

@@ -1,3 +1,4 @@
+import { AssetUtil } from '@tldraw/editor';
 import { Atom } from '@tldraw/editor';
 import { BaseBoxShapeTool } from '@tldraw/editor';
 import { BaseBoxShapeUtil } from '@tldraw/editor';
@@ -78,12 +79,9 @@ import { TLClickEventInfo } from '@tldraw/editor';
 import { TLClipboardWriteInfo } from '@tldraw/editor';
 import { TLContent } from '@tldraw/editor';
 import { TLCropInfo } from '@tldraw/editor';
-import { TLDefaultColorThemeColor } from '@tldraw/tlschema';
-import { TLDefaultFillStyle } from '@tldraw/editor';
-import { TLDefaultFontStyle } from '@tldraw/editor';
-import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
+import { TLDefaultColorStyle } from '@tldraw/tlschema';
+import { TLDefaultFontStyle } from '@tldraw/tlschema';
 import { TLDefaultSizeStyle } from '@tldraw/editor';
-import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
 import { TLDragShapesOutInfo } from '@tldraw/editor';
 import { TLDragShapesOverInfo } from '@tldraw/editor';
 import { TldrawEditorBaseProps } from '@tldraw/editor';
@@ -100,7 +98,8 @@ import { TLEmbedShapeProps } from '@tldraw/editor';
 import { TLEventInfo } from '@tldraw/editor';
 import { TLExportType } from '@tldraw/editor';
 import { TLFileExternalAsset } from '@tldraw/editor';
-import { TLFontFace } from '@tldraw/editor';
+import { TLFontFace } from '@tldraw/tlschema';
+import { TLFontFace as TLFontFace_2 } from '@tldraw/editor';
 import { TLFrameShape } from '@tldraw/editor';
 import { TLFrameShapeProps } from '@tldraw/editor';
 import { TLGeometryOpts } from '@tldraw/editor';
@@ -143,10 +142,13 @@ import { TLStore } from '@tldraw/editor';
 import { TLStoreSnapshot } from '@tldraw/editor';
 import { TLTextOptions } from '@tldraw/editor';
 import { TLTextShape } from '@tldraw/editor';
+import { TLTheme } from '@tldraw/editor';
+import { TLThemeColors } from '@tldraw/editor';
 import { TLUrlExternalAsset } from '@tldraw/editor';
 import { TLVideoAsset } from '@tldraw/editor';
 import { TLVideoShape } from '@tldraw/editor';
 import { UnknownRecord } from '@tldraw/editor';
+import { Validator } from '@tldraw/validate';
 import { Vec } from '@tldraw/editor';
 import { VecLike } from '@tldraw/editor';
 import { VecModel } from '@tldraw/editor';
@@ -176,14 +178,11 @@ export declare type AlertSeverity = 'error' | 'info' | 'success' | 'warning';
 export declare function AlignMenuItems(): JSX.Element;
 
 /** @public */
-export declare const allDefaultFontFaces: TLFontFace[];
+export declare const allDefaultFontFaces: TLFontFace_2[];
 
 /** @public @react */
 export declare function ArrangeMenuSubmenu(): JSX.Element | null;
 
-/** @public */
-export declare const ARROW_LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
-
 /**
  * @public
  */
@@ -224,7 +223,7 @@ export declare function ArrowRightToolbarItem(): JSX.Element;
  *
  * @public
  */
-export declare interface ArrowShapeOptions {
+export declare interface ArrowShapeOptions extends ShapeOptionsWithDisplayValues<TLArrowShape, ArrowShapeUtilDisplayValues> {
     /**
      * How far should elbow arrows expand from the shapes they're targeting?
      */
@@ -315,13 +314,13 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     static props: RecordProps<TLArrowShape>;
     static migrations: MigrationSequence;
     options: ArrowShapeOptions;
-    canEdit(): boolean;
+    canEdit(shape: TLArrowShape): boolean;
     canBind({ toShape }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
-    canSnap(): boolean;
-    hideResizeHandles(): boolean;
-    hideRotateHandle(): boolean;
-    hideSelectionBoundsBg(): boolean;
-    hideSelectionBoundsFg(): boolean;
+    canSnap(shape: TLArrowShape): boolean;
+    hideResizeHandles(shape: TLArrowShape): boolean;
+    hideRotateHandle(shape: TLArrowShape): boolean;
+    hideSelectionBoundsBg(shape: TLArrowShape): boolean;
+    hideSelectionBoundsFg(shape: TLArrowShape): boolean;
     hideInMinimap(): boolean;
     canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean;
     getFontFaces(shape: TLArrowShape): TLFontFace[];
@@ -380,6 +379,20 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
 }
 
+/** @public */
+export declare interface ArrowShapeUtilDisplayValues {
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+    patternFillFallbackColor: string;
+    labelColor: string;
+    labelFontFamily: string;
+    labelFontSize: number;
+    labelLineHeight: number;
+    labelPadding: number;
+    labelBorderRadius: number;
+}
+
 /**
  * State representing what we're pointing to when drawing or updating an arrow. You can get this
  * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with
@@ -444,13 +457,32 @@ export declare interface BasePathBuilderOpts {
     props?: SVGProps<SVGPathElement & SVGGElement>;
 }
 
+/** @public */
+export declare class BookmarkAssetUtil extends AssetUtil<TLBookmarkAsset> {
+    static type: "bookmark";
+    static props: {
+        description: Validator<string>;
+        favicon: Validator<string>;
+        image: Validator<string>;
+        src: Validator<null | string>;
+        title: Validator<string>;
+    };
+    static migrations: MigrationSequence;
+    getDefaultProps(): TLBookmarkAsset['props'];
+}
+
+/** @public */
+export declare interface BookmarkShapeOptions extends ShapeOptionsWithDisplayValues<TLBookmarkShape, BookmarkShapeUtilDisplayValues> {
+}
+
 /** @public */
 export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
     static type: "bookmark";
     static props: RecordProps<TLBookmarkShape>;
     static migrations: TLPropsMigrations;
-    canResize(): boolean;
-    hideSelectionBoundsFg(): boolean;
+    options: BookmarkShapeOptions;
+    canResize(shape: TLBookmarkShape): boolean;
+    hideSelectionBoundsFg(shape: TLBookmarkShape): boolean;
     getText(shape: TLBookmarkShape): string;
     getAriaDescriptor(shape: TLBookmarkShape): string | undefined;
     getDefaultProps(): TLBookmarkShape['props'];
@@ -499,6 +531,9 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
     getInterpolatedProps(startShape: TLBookmarkShape, endShape: TLBookmarkShape, t: number): TLBookmarkShapeProps;
 }
 
+/** @public */
+export declare type BookmarkShapeUtilDisplayValues = object;
+
 /** @public */
 export declare interface BoxWidthHeight {
     w: number;
@@ -703,6 +738,16 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly toEmbedUrl: (url: string) => string | undefined;
     readonly type: "figma";
     readonly width: 720;
+}, {
+    readonly doesResize: true;
+    readonly embedOnPaste: true;
+    readonly fromEmbedUrl: (url: string) => string | undefined;
+    readonly height: 500;
+    readonly hostnames: readonly ["canva.com"];
+    readonly title: "Canva";
+    readonly toEmbedUrl: (url: string) => string | undefined;
+    readonly type: "canva";
+    readonly width: 720;
 }, {
     readonly doesResize: true;
     readonly embedOnPaste: true;
@@ -907,7 +952,10 @@ export declare const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuPro
 export declare function DefaultActionsMenuContent(): JSX.Element;
 
 /** @public */
-export declare function defaultAddFontsFromNode(node: Node_2, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void): RichTextFontVisitorState;
+export declare function defaultAddFontsFromNode(node: Node_2, state: RichTextFontVisitorState, addFont: (font: TLFontFace_2) => void): RichTextFontVisitorState;
+
+/** @public */
+export declare const defaultAssetUtils: readonly [typeof ImageAssetUtil, typeof VideoAssetUtil, typeof BookmarkAssetUtil];
 
 /** @public */
 export declare const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
@@ -955,7 +1003,7 @@ export declare function defaultHandleExternalExcalidrawContent(editor: Editor, {
 }): Promise<void>;
 
 /** @public */
-export declare function defaultHandleExternalFileAsset(editor: Editor, { file, assetId }: TLFileExternalAsset, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset>;
+export declare function defaultHandleExternalFileAsset(editor: Editor, { file, assetId }: TLFileExternalAsset, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset<"bookmark" | "image" | "video">>;
 
 /** @public */
 export declare function defaultHandleExternalFileContent(editor: Editor, { point, files }: {
@@ -1042,6 +1090,35 @@ export declare const DefaultNavigationPanel: NamedExoticComponent<object>;
 /** @public @react */
 export declare const DefaultPageMenu: NamedExoticComponent<object>;
 
+/** @public @react */
+declare function DefaultPeopleMenu({ children }: DefaultPeopleMenuProps): JSX.Element | null;
+export { DefaultPeopleMenu }
+export { DefaultPeopleMenu as PeopleMenu }
+
+/** @public @react */
+export declare function DefaultPeopleMenuAvatar({ userId }: TLUiPeopleMenuAvatarProps): JSX.Element | null;
+
+/** @public @react */
+export declare function DefaultPeopleMenuContent({ userIds }: DefaultPeopleMenuContentProps): JSX.Element;
+
+/** @public */
+export declare interface DefaultPeopleMenuContentProps {
+    userIds: string[];
+}
+
+/** @public @react */
+export declare function DefaultPeopleMenuFacePile({ userIds, userName, userColor }: TLUiPeopleMenuFacePileProps): JSX.Element;
+
+/** @public @react */
+export declare const DefaultPeopleMenuItem: NamedExoticComponent<TLUiPeopleMenuItemProps>;
+
+/** @public */
+declare interface DefaultPeopleMenuProps {
+    children?: ReactNode;
+}
+export { DefaultPeopleMenuProps }
+export { DefaultPeopleMenuProps as PeopleMenuProps }
+
 /** @public @react */
 export declare const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
 
@@ -1075,7 +1152,7 @@ export declare const defaultShapeTools: readonly [typeof TextShapeTool, typeof D
 export declare const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];
 
 /** @public @react */
-export declare function DefaultSharePanel(): JSX.Element;
+export declare function DefaultSharePanel(): JSX.Element | null;
 
 /** @public @react */
 export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
@@ -1112,6 +1189,9 @@ export declare interface DefaultToolbarProps {
 /** @public */
 export declare const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];
 
+/** @public @react */
+export declare function DefaultUserPresenceEditor(): JSX.Element;
+
 /** @public @react */
 export declare const DefaultVideoToolbar: NamedExoticComponent<TLUiVideoToolbarProps>;
 
@@ -1178,7 +1258,7 @@ export declare interface DrawPathBuilderOpts extends BasePathBuilderOpts, DrawPa
 }
 
 /** @public */
-export declare interface DrawShapeOptions {
+export declare interface DrawShapeOptions extends ShapeOptionsWithDisplayValues<TLDrawShape, DrawShapeUtilDisplayValues> {
     /**
      * The maximum number of points in a line before the draw tool will begin a new shape.
      * A higher number will lead to poor performance while drawing very long lines.
@@ -1224,6 +1304,14 @@ export declare class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
     getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
 }
 
+/** @public */
+export declare interface DrawShapeUtilDisplayValues {
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+    patternFillFallbackColor: string;
+}
+
 /** @public @react */
 export declare function DrawToolbarItem(): JSX.Element;
 
@@ -1487,7 +1575,7 @@ export declare interface EmbedDefinition {
 }
 
 /** @public */
-export declare interface EmbedShapeOptions {
+export declare interface EmbedShapeOptions extends ShapeOptionsWithDisplayValues<TLEmbedShape, EmbedShapeUtilDisplayValues> {
     /** The embed definitions to use for this shape util. */
     readonly embedDefinitions: readonly TLEmbedDefinition[];
 }
@@ -1531,9 +1619,9 @@ export declare class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     getText(shape: TLEmbedShape): string;
     getAriaDescriptor(shape: TLEmbedShape): string | undefined;
     hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
-    canEdit(): boolean;
+    canEdit(shape: TLEmbedShape): boolean;
     canResize(shape: TLEmbedShape): boolean;
-    canEditInReadonly(): boolean;
+    canEditInReadonly(shape: TLEmbedShape): boolean;
     getDefaultProps(): TLEmbedShape['props'];
     getGeometry(shape: TLEmbedShape): Geometry2d;
     isAspectRatioLocked(shape: TLEmbedShape): boolean;
@@ -1545,6 +1633,11 @@ export declare class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
 }
 
+/** @public */
+export declare interface EmbedShapeUtilDisplayValues {
+    showShadow: boolean;
+}
+
 /** @public */
 export declare class EraserTool extends StateNode {
     static id: string;
@@ -1628,13 +1721,7 @@ export declare function fitFrameToContent(editor: Editor, id: TLShapeId, opts?:
 export declare function FitFrameToContentMenuItem(): JSX.Element | null;
 
 /** @public */
-export declare const FONT_FAMILIES: Record<TLDefaultFontStyle, string>;
-
-/** @public */
-export declare const FONT_SIZES: Record<TLDefaultSizeStyle, number>;
-
-/** @public */
-export declare interface FrameShapeOptions {
+export declare interface FrameShapeOptions extends ShapeOptionsWithDisplayValues<TLFrameShape, FrameShapeUtilDisplayValues> {
     /**
      * When true, the frame will display colors for the shape's headings and background.
      */
@@ -1663,8 +1750,8 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
         options: infer Options;
     } ? Partial<Options> : never): T;
     canEdit(shape: TLFrameShape, info: TLEditStartInfo): boolean;
-    canResize(): boolean;
-    canResizeChildren(): boolean;
+    canResize(shape: TLFrameShape): boolean;
+    canResizeChildren(shape: TLFrameShape): boolean;
     isExportBoundsContainer(): boolean;
     getDefaultProps(): TLFrameShape['props'];
     getAriaDescriptor(shape: TLFrameShape): string;
@@ -1696,9 +1783,28 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     onDragShapesOut(shape: TLFrameShape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
 }
 
+/** @public */
+export declare interface FrameShapeUtilDisplayValues {
+    fillColor: string;
+    strokeColor: string;
+    showColorsFillColor: string;
+    showColorsStrokeColor: string;
+    headingFillColor: string;
+    headingStrokeColor: string;
+    headingTextColor: string;
+    showColorsHeadingFillColor: string;
+    showColorsHeadingStrokeColor: string;
+    showColorsHeadingTextColor: string;
+}
+
 /** @public @react */
 export declare function FrameToolbarItem(): JSX.Element;
 
+/** @public */
+export declare interface GeoShapeOptions extends ShapeOptionsWithDisplayValues<TLGeoShape, GeoShapeUtilDisplayValues> {
+    showTextOutline: boolean;
+}
+
 /** @public */
 export declare class GeoShapeTool extends StateNode {
     static id: string;
@@ -1712,17 +1818,15 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
     static type: "geo";
     static props: RecordProps<TLGeoShape>;
     static migrations: TLPropsMigrations;
-    options: {
-        showTextOutline: boolean;
-    };
-    canEdit(): boolean;
+    options: GeoShapeOptions;
+    canEdit(shape: TLGeoShape): boolean;
     getDefaultProps(): TLGeoShape['props'];
     getGeometry(shape: TLGeoShape): Group2d;
     getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry;
     getText(shape: TLGeoShape): string;
     getFontFaces(shape: TLGeoShape): TLFontFace[];
     component(shape: TLGeoShape): JSX.Element;
-    indicator(shape: TLGeoShape): JSX.Element;
+    indicator(shape: TLGeoShape): JSX.Element | null;
     useLegacyIndicator(): boolean;
     getIndicatorPath(shape: TLGeoShape): Path2D | undefined;
     toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX.Element;
@@ -1745,14 +1849,14 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         parentId: TLParentId;
         props: {
             align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            dash: "dashed" | "dotted" | "draw" | "solid";
+            color: TLDefaultColorStyle;
+            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
             fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
-            font: "draw" | "mono" | "sans" | "serif";
+            font: TLDefaultFontStyle;
             geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
             growY: number;
             h: number;
-            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            labelColor: TLDefaultColorStyle;
             richText: {
                 attrs?: any;
                 content: unknown[];
@@ -1779,14 +1883,14 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         parentId: TLParentId;
         props: {
             align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            dash: "dashed" | "dotted" | "draw" | "solid";
+            color: TLDefaultColorStyle;
+            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
             fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
-            font: "draw" | "mono" | "sans" | "serif";
+            font: TLDefaultFontStyle;
             geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
             growY: number;
             h: number;
-            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            labelColor: TLDefaultColorStyle;
             richText: {
                 attrs?: any;
                 content: unknown[];
@@ -1836,6 +1940,52 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         y: number;
     } | undefined;
     getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
+    /**
+     * Get the unscaled dimensions from a geo shape's props
+     */
+    private getUnscaledGeoProps;
+    /**
+     * Calculate the growY needed to fit a label within a shape.
+     * Returns null if no change is needed, otherwise returns the new unscaled growY value.
+     */
+    private calculateGrowY;
+    /**
+     * Calculate expanded dimensions when adding a label to a shape for the first time.
+     * Ensures the shape meets minimum size requirements and is square if originally small.
+     */
+    private expandShapeForFirstLabel;
+    private _labelSizesForGeoCache;
+    /**
+     * Get the cached label size for the shape. Don't call with empty rich text.
+     */
+    private getUnscaledLabelSize;
+    /**
+     * Expensively measure the unscaled label size for the shape. Avoid using it if we can.
+     */
+    private measureUnscaledLabelSize;
+}
+
+/** @public */
+export declare interface GeoShapeUtilDisplayValues {
+    strokeColor: string;
+    strokeRoundness: number;
+    strokeWidth: number;
+    fillColor: string;
+    patternFillFallbackColor: string;
+    labelColor: string;
+    labelFontFamily: string;
+    labelFontSize: number;
+    labelMinWidth: number;
+    labelExtraPadding: number;
+    labelLineHeight: number;
+    labelFontWeight: string;
+    labelFontVariant: string;
+    labelFontStyle: string;
+    labelHorizontalAlign: 'center' | 'end' | 'start';
+    labelVerticalAlign: 'end' | 'middle' | 'start';
+    labelPadding: number;
+    labelEdgeMargin: number;
+    minSizeWithLabel: number;
 }
 
 /** @public */
@@ -1859,7 +2009,19 @@ export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLA
 };
 
 /** @public */
-export declare function getAssetInfo(file: File, options: TLDefaultExternalContentHandlerOpts, assetId?: TLAssetId): Promise<TLImageAsset | TLVideoAsset>;
+export declare function getAssetInfo(editor: Editor, file: File, assetId?: TLAssetId): Promise<null | TLAsset>;
+
+/**
+ * Returns the current list of color style items for the style panel,
+ * derived from the theme's color palette. Only palette colors are included;
+ * utility colors like `text`, `background`, etc. are excluded.
+ *
+ * Colors are ordered by their position in {@link @tldraw/tlschema#DefaultColorStyle},
+ * followed by any additional theme colors in their object key order.
+ *
+ * @public
+ */
+export declare function getColorStyleItems(colors: TLThemeColors): StyleValuesForUi<string>;
 
 /** @public */
 export declare function getCropBox<T extends ShapeWithCrop>(shape: T, info: TLCropInfo<T>, opts?: CropBoxOptions): {
@@ -1873,6 +2035,16 @@ export declare function getCropBox<T extends ShapeWithCrop>(shape: T, info: TLCr
 /** @public */
 export declare function getDefaultCrop(): TLShapeCrop;
 
+/**
+ * Get the resolved display values for a shape, merging the base values with any overrides.
+ *
+ * @public
+ */
+export declare function getDisplayValues<Shape extends TLShape, DisplayValues extends object>(util: {
+    editor: Editor;
+    options: ShapeOptionsWithDisplayValues<Shape, DisplayValues>;
+}, shape: Shape, colorMode?: 'dark' | 'light'): DisplayValues;
+
 /**
  * Tests whether an URL supports embedding and returns the result. If we encounter an error, we
  * return undefined.
@@ -1883,10 +2055,21 @@ export declare function getDefaultCrop(): TLShapeCrop;
 export declare function getEmbedInfo(definitions: readonly TLEmbedDefinition[], inputUrl: string): TLEmbedResult;
 
 /** @public */
-export declare function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined;
+export declare function getFontFamily(theme: TLTheme, font: string): string;
+
+/**
+ * Returns the current list of font style items for the style panel,
+ * derived from the theme's font palette.
+ *
+ * Fonts are ordered by their position in {@link @tldraw/tlschema#DefaultFontStyle},
+ * followed by any additional theme fonts in their object key order.
+ *
+ * @public
+ */
+export declare function getFontStyleItems(theme: TLTheme): StyleValuesForUi<string>;
 
 /** @public */
-export declare function getMediaAssetInfoPartial(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean, maxImageDimension?: number, doc?: Document): Promise<TLImageAsset | TLVideoAsset>;
+export declare function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined;
 
 /** @public */
 export declare function getPointsFromDrawSegment(segment: TLDrawShapeSegment, scaleX: number, scaleY: number, points?: Vec[]): Vec[];
@@ -1990,14 +2173,12 @@ export declare function HexagonToolbarItem(): JSX.Element;
 export declare function hideAllTooltips(): void;
 
 /** @public */
-export declare interface HighlightShapeOptions {
+export declare interface HighlightShapeOptions extends ShapeOptionsWithDisplayValues<TLHighlightShape, HighlightShapeUtilDisplayValues> {
     /**
      * The maximum number of points in a line before the draw tool will begin a new shape.
      * A higher number will lead to poor performance while drawing very long lines.
      */
     readonly maxPointsPerShape: number;
-    readonly underlayOpacity: number;
-    readonly overlayOpacity: number;
 }
 
 /** @public */
@@ -2027,8 +2208,8 @@ export declare class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     indicator(shape: TLHighlightShape): JSX.Element;
     useLegacyIndicator(): boolean;
     getIndicatorPath(shape: TLHighlightShape): Path2D;
-    toSvg(shape: TLHighlightShape): JSX.Element;
-    toBackgroundSvg(shape: TLHighlightShape): JSX.Element;
+    toSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
+    toBackgroundSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
     onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>): {
         props: {
             scaleX: number;
@@ -2038,21 +2219,59 @@ export declare class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps;
 }
 
+/** @public */
+export declare interface HighlightShapeUtilDisplayValues {
+    strokeColor: string;
+    strokeWidth: number;
+    underlayOpacity: number;
+    overlayOpacity: number;
+}
+
 /** @public @react */
 export declare function HighlightToolbarItem(): JSX.Element;
 
 /** @public */
 export declare const iconTypes: readonly ["align-bottom", "align-center-horizontal", "align-center-vertical", "align-left", "align-right", "align-top", "alt", "arrow-arc", "arrow-cycle", "arrow-elbow", "arrow-left", "arrowhead-arrow", "arrowhead-bar", "arrowhead-diamond", "arrowhead-dot", "arrowhead-none", "arrowhead-square", "arrowhead-triangle-inverted", "arrowhead-triangle", "blob", "bold", "bookmark", "bring-forward", "bring-to-front", "broken", "bulletList", "check-circle", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-ne", "chevrons-sw", "clipboard-copied", "clipboard-copy", "code", "color", "comment", "corners", "crop", "cross-2", "cross-circle", "dash-dashed", "dash-dotted", "dash-draw", "dash-solid", "disconnected", "discord", "distribute-horizontal", "distribute-vertical", "dot", "dots-horizontal", "dots-vertical", "download", "drag-handle-dots", "duplicate", "edit", "external-link", "fill-fill", "fill-lined-fill", "fill-none", "fill-pattern", "fill-semi", "fill-solid", "follow", "following", "font-draw", "font-mono", "font-sans", "font-serif", "geo-arrow-down", "geo-arrow-left", "geo-arrow-right", "geo-arrow-up", "geo-check-box", "geo-cloud", "geo-diamond", "geo-ellipse", "geo-heart", "geo-hexagon", "geo-octagon", "geo-oval", "geo-pentagon", "geo-rectangle", "geo-rhombus-2", "geo-rhombus", "geo-star", "geo-trapezoid", "geo-triangle", "geo-x-box", "github", "group", "heading", "help-circle", "highlight", "horizontal-align-end", "horizontal-align-middle", "horizontal-align-start", "info-circle", "italic", "leading", "link", "list", "lock", "manual", "menu", "minus", "mixed", "pack", "plus", "question-mark-circle", "question-mark", "redo", "reset-zoom", "rotate-ccw", "rotate-cw", "send-backward", "send-to-back", "share-1", "size-extra-large", "size-large", "size-medium", "size-small", "spline-cubic", "spline-line", "stack-horizontal", "stack-vertical", "status-offline", "stretch-horizontal", "stretch-vertical", "strike", "text-align-center", "text-align-left", "text-align-right", "toggle-off", "toggle-on", "tool-arrow", "tool-eraser", "tool-frame", "tool-hand", "tool-highlight", "tool-laser", "tool-line", "tool-media", "tool-note", "tool-pencil", "tool-pointer", "tool-screenshot", "tool-text", "trash", "twitter", "underline", "undo", "ungroup", "unlock", "vertical-align-end", "vertical-align-middle", "vertical-align-start", "warning-triangle", "zoom-in", "zoom-out"];
 
+/** @public */
+export declare class ImageAssetUtil extends AssetUtil<TLImageAsset> {
+    static type: "image";
+    static props: {
+        fileSize: Validator<number | undefined>;
+        h: Validator<number>;
+        isAnimated: Validator<boolean>;
+        mimeType: Validator<null | string>;
+        name: Validator<string>;
+        pixelRatio: Validator<number | undefined>;
+        src: Validator<null | string>;
+        w: Validator<number>;
+    };
+    static migrations: MigrationSequence;
+    options: {
+        maxDimension: number;
+        supportedMimeTypes: null | readonly string[];
+    };
+    getDefaultProps(): TLImageAsset['props'];
+    getSupportedMimeTypes(): readonly string[];
+    getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLImageAsset>;
+}
+
+/** @public */
+export declare interface ImageShapeOptions extends ShapeOptionsWithDisplayValues<TLImageShape, ImageShapeUtilDisplayValues> {
+}
+
 /** @public */
 export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     static type: "image";
     static props: RecordProps<TLImageShape>;
     static migrations: TLPropsMigrations;
-    isAspectRatioLocked(): boolean;
-    canCrop(): boolean;
+    static handledAssetTypes: readonly ["image"];
+    options: ImageShapeOptions;
+    isAspectRatioLocked(shape: TLImageShape): boolean;
+    canCrop(shape: TLImageShape): boolean;
     isExportBoundsContainer(): boolean;
     getDefaultProps(): TLImageShape['props'];
+    createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
     getGeometry(shape: TLImageShape): Geometry2d;
     getAriaDescriptor(shape: TLImageShape): string;
     onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>): TLImageShape;
@@ -2065,15 +2284,16 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps;
 }
 
+/** @public */
+export declare interface ImageShapeUtilDisplayValues {
+}
+
 /** @public */
 export declare const KeyboardShiftEnterTweakExtension: Extension<any, any>;
 
 /** @public @react */
 export declare function KeyboardShortcutsMenuItem(): JSX.Element | null;
 
-/** @public */
-export declare const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
-
 /** @public @react */
 export declare function LanguageMenu(): JSX.Element | null;
 
@@ -2096,6 +2316,10 @@ export declare class LaserTool extends StateNode {
 /** @public @react */
 export declare function LaserToolbarItem(): JSX.Element;
 
+/** @public */
+export declare interface LineShapeOptions extends ShapeOptionsWithDisplayValues<TLLineShape, LineShapeUtilDisplayValues> {
+}
+
 /** @public */
 export declare class LineShapeTool extends StateNode {
     static id: string;
@@ -2109,10 +2333,11 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
     static type: "line";
     static props: RecordProps<TLLineShape>;
     static migrations: TLPropsMigrations;
-    hideResizeHandles(): boolean;
-    hideRotateHandle(): boolean;
-    hideSelectionBoundsFg(): boolean;
-    hideSelectionBoundsBg(): boolean;
+    options: LineShapeOptions;
+    hideResizeHandles(shape: TLLineShape): boolean;
+    hideRotateHandle(shape: TLLineShape): boolean;
+    hideSelectionBoundsFg(shape: TLLineShape): boolean;
+    hideSelectionBoundsBg(shape: TLLineShape): boolean;
     hideInMinimap(): boolean;
     getDefaultProps(): TLLineShape['props'];
     getGeometry(shape: TLLineShape): PathBuilderGeometry2d;
@@ -2138,8 +2363,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
         opacity: number;
         parentId: TLParentId;
         props: {
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            dash: "dashed" | "dotted" | "draw" | "solid";
+            color: TLDefaultColorStyle;
+            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
             points: {
                 [x: string]: {
                     id: string;
@@ -2166,8 +2391,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
         opacity: number;
         parentId: TLParentId;
         props: {
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            dash: "dashed" | "dotted" | "draw" | "solid";
+            color: TLDefaultColorStyle;
+            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
             points: {
                 [x: string]: {
                     id: IndexKey;
@@ -2187,14 +2412,20 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
         y: number;
     } | undefined;
     component(shape: TLLineShape): JSX.Element;
-    indicator(shape: TLLineShape): JSX.Element;
+    indicator(shape: TLLineShape): JSX.Element | null;
     useLegacyIndicator(): boolean;
     getIndicatorPath(shape: TLLineShape): Path2D;
-    toSvg(shape: TLLineShape): JSX.Element;
+    toSvg(shape: TLLineShape, ctx: SvgExportContext): JSX.Element;
     getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry;
     getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props'];
 }
 
+/** @public */
+export declare interface LineShapeUtilDisplayValues {
+    strokeColor: string;
+    strokeWidth: number;
+}
+
 /** @public @react */
 export declare function LineToolbarItem(): JSX.Element;
 
@@ -2215,7 +2446,12 @@ export declare function MoveToPageMenu(): JSX.Element | null;
 /* Excluded from this release type: MoveToPathBuilderCommand */
 
 /** @public */
-export declare interface NoteShapeOptions {
+export declare interface NonePathBuilderOpts extends BasePathBuilderOpts {
+    style: 'none';
+}
+
+/** @public */
+export declare interface NoteShapeOptions extends ShapeOptionsWithDisplayValues<TLNoteShape, NoteShapeUtilDisplayValues> {
     /**
      * How should the note shape resize? By default it does not resize (except automatically based on its text content),
      * but you can set it to be user-resizable using scale.
@@ -2237,10 +2473,10 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     static props: RecordProps<TLNoteShape>;
     static migrations: TLPropsMigrations;
     options: NoteShapeOptions;
-    canEdit(): boolean;
-    hideResizeHandles(): boolean;
-    isAspectRatioLocked(): boolean;
-    hideSelectionBoundsFg(): boolean;
+    canEdit(shape: TLNoteShape): boolean;
+    hideResizeHandles(shape: TLNoteShape): boolean;
+    isAspectRatioLocked(shape: TLNoteShape): boolean;
+    hideSelectionBoundsFg(shape: TLNoteShape): boolean;
     getDefaultProps(): TLNoteShape['props'];
     getGeometry(shape: TLNoteShape): Group2d;
     getHandles(shape: TLNoteShape): TLHandle[];
@@ -2268,11 +2504,11 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
         parentId: TLParentId;
         props: {
             align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            font: "draw" | "mono" | "sans" | "serif";
+            color: TLDefaultColorStyle;
+            font: TLDefaultFontStyle;
             fontSizeAdjustment: number;
             growY: number;
-            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            labelColor: TLDefaultColorStyle;
             richText: {
                 attrs?: any;
                 content: unknown[];
@@ -2292,6 +2528,38 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     } | undefined;
     onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): TLNoteShape | undefined;
     getInterpolatedProps(startShape: TLNoteShape, endShape: TLNoteShape, t: number): TLNoteShapeProps;
+    /**
+     * Get the growY and fontSizeAdjustment for a shape.
+     */
+    private getNoteSizeAdjustments;
+    private _labelSizesForNoteCache;
+    /**
+     * Get the cached label size for the shape.
+     */
+    private getLabelSize;
+    /**
+     * Expensively measure the label size for a note shape.
+     */
+    private measureNoteLabelSize;
+}
+
+/** @public */
+export declare interface NoteShapeUtilDisplayValues {
+    noteWidth: number;
+    noteHeight: number;
+    noteBackgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    labelColor: string;
+    labelFontFamily: string;
+    labelFontSize: number;
+    labelLineHeight: number;
+    labelFontWeight: string;
+    labelFontVariant: string;
+    labelFontStyle: string;
+    labelPadding: number;
+    labelHorizontalAlign: 'center' | 'end' | 'start';
+    labelVerticalAlign: 'end' | 'middle' | 'start';
 }
 
 /** @public @react */
@@ -2300,12 +2568,13 @@ export declare function NoteToolbarItem(): JSX.Element;
 /**
  * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
  *
+ * @param editor - The editor instance
  * @param file - The file to check
  * @param options - The options for the external content handler
  * @returns True if the file is allowed, false otherwise
  * @public
  */
-export declare function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
+export declare function notifyIfFileNotAllowed(editor: Editor, file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
 
 /** @public @react */
 export declare function OfflineIndicator(): JSX.Element;
@@ -2407,7 +2676,7 @@ export declare class PathBuilder {
     private cubicBezierToWithResolution;
     close(): this;
     toD(opts?: PathBuilderToDOpts): string;
-    toSvg(opts: PathBuilderOpts): JSX.Element;
+    toSvg(opts: PathBuilderOpts): JSX.Element | null;
     toPath2D(opts: PathBuilderOpts): Path2D;
     toGeometry(): Group2d | PathBuilderGeometry2d;
     private toSolidSvg;
@@ -2467,7 +2736,7 @@ export declare interface PathBuilderLineOpts extends PathBuilderCommandOpts {
 }
 
 /** @public */
-export declare type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | SolidPathBuilderOpts;
+export declare type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | NonePathBuilderOpts | SolidPathBuilderOpts;
 
 /** @public */
 export declare interface PathBuilderToDOpts {
@@ -2476,14 +2745,6 @@ export declare interface PathBuilderToDOpts {
     onlyFilled?: boolean;
 }
 
-/** @public @react */
-export declare function PeopleMenu({ children }: PeopleMenuProps): JSX.Element | null;
-
-/** @public */
-export declare interface PeopleMenuProps {
-    children?: ReactNode;
-}
-
 /**
  * A plain text area that can be used for basic editing text.
  *
@@ -2506,12 +2767,11 @@ export declare interface PlainTextLabelProps {
     type: ExtractShapeByProps<{
         text: string;
     }>['type'];
-    font: TLDefaultFontStyle;
+    fontFamily: string;
     fontSize: number;
     lineHeight: number;
-    fill?: TLDefaultFillStyle;
-    align: TLDefaultHorizontalAlignStyle;
-    verticalAlign: TLDefaultVerticalAlignStyle;
+    textAlign: 'center' | 'end' | 'start';
+    verticalAlign: 'end' | 'middle' | 'start';
     wrap?: boolean;
     text?: string;
     labelColor: string;
@@ -2663,12 +2923,11 @@ export declare interface RichTextLabelProps {
     type: ExtractShapeByProps<{
         richText: TLRichText;
     }>['type'];
-    font: TLDefaultFontStyle;
+    fontFamily: string;
     fontSize: number;
     lineHeight: number;
-    fill?: TLDefaultFillStyle;
-    align: TLDefaultHorizontalAlignStyle;
-    verticalAlign: TLDefaultVerticalAlignStyle;
+    textAlign: 'center' | 'end' | 'start';
+    verticalAlign: 'end' | 'middle' | 'start';
     wrap?: boolean;
     richText?: TLRichText;
     labelColor: string;
@@ -2689,16 +2948,17 @@ export declare interface RichTextLabelProps {
  *
  * @public @react
  */
-export declare function RichTextSVG({ bounds, richText, fontSize, font, align, verticalAlign, wrap, labelColor, padding, showTextOutline }: RichTextSVGProps): JSX.Element;
+export declare function RichTextSVG({ bounds, richText, fontSize, fontFamily, lineHeight, textAlign, verticalAlign, wrap, labelColor, padding, showTextOutline }: RichTextSVGProps): JSX.Element;
 
 /** @public */
 export declare interface RichTextSVGProps {
     bounds: Box;
     richText: TLRichText;
     fontSize: number;
-    font: TLDefaultFontStyle;
-    align: TLDefaultHorizontalAlignStyle;
-    verticalAlign: TLDefaultVerticalAlignStyle;
+    fontFamily: string;
+    lineHeight: number;
+    textAlign: 'center' | 'end' | 'start';
+    verticalAlign: 'end' | 'middle' | 'start';
     wrap?: boolean;
     labelColor: string;
     padding: number;
@@ -2755,6 +3015,12 @@ export declare function serializeTldrawJsonBlob(editor: Editor): Promise<Blob>;
 /** @public */
 export declare function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions): StrokePoint[];
 
+/** @public */
+export declare interface ShapeOptionsWithDisplayValues<Shape extends TLShape, DisplayValues extends object> {
+    getDefaultDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
+    getCustomDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
+}
+
 /** @public */
 export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
     style: 'solid';
@@ -2783,9 +3049,6 @@ export declare function startEditingShapeWithRichText(editor: Editor, shapeOrId:
 /** @public @react */
 export declare function StarToolbarItem(): JSX.Element;
 
-/** @public */
-export declare const STROKE_SIZES: Record<TLDefaultSizeStyle, number>;
-
 /**
  * The options object for `getStroke` or `getStrokePoints`.
  *
@@ -2866,6 +3129,7 @@ export declare interface StylePanelContext {
     enhancedA11yMode: boolean;
     onHistoryMark(id: string): void;
     onValueChange<T>(style: StyleProp<T>, value: T): void;
+    onOpacityChange(opacity: number): void;
 }
 
 /** @public @react */
@@ -2969,15 +3233,6 @@ export declare type StyleValuesForUi<T> = readonly {
     readonly value: T;
 }[];
 
-/** @public */
-export declare const TEXT_PROPS: {
-    fontStyle: string;
-    fontVariant: string;
-    fontWeight: string;
-    lineHeight: number;
-    padding: string;
-};
-
 /** @public */
 export declare interface TextAreaProps {
     isEditing: boolean;
@@ -2998,7 +3253,7 @@ export declare interface TextAreaProps {
 }
 
 /** @public */
-export declare interface TextShapeOptions {
+export declare interface TextShapeOptions extends ShapeOptionsWithDisplayValues<TLTextShape, TextShapeUtilDisplayValues> {
     /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
     extraArrowHorizontalPadding: number;
     /** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
@@ -3027,8 +3282,8 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
     getGeometry(shape: TLTextShape, opts: TLGeometryOpts): Rectangle2d;
     getFontFaces(shape: TLTextShape): TLFontFace[];
     getText(shape: TLTextShape): string;
-    canEdit(): boolean;
-    isAspectRatioLocked(): boolean;
+    canEdit(shape: TLTextShape): boolean;
+    isAspectRatioLocked(shape: TLTextShape): boolean;
     component(shape: TLTextShape): JSX.Element;
     indicator(shape: TLTextShape): JSX.Element | null;
     useLegacyIndicator(): boolean;
@@ -3062,8 +3317,8 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
         parentId: TLParentId;
         props: {
             autoSize: boolean;
-            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
-            font: "draw" | "mono" | "sans" | "serif";
+            color: TLDefaultColorStyle;
+            font: TLDefaultFontStyle;
             richText: {
                 attrs?: any;
                 content: unknown[];
@@ -3082,6 +3337,17 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
     } | undefined;
 }
 
+/** @public */
+export declare interface TextShapeUtilDisplayValues {
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: string;
+    fontStyle: string;
+    fontVariant: string;
+}
+
 /** @public @react */
 export declare function TextToolbarItem(): JSX.Element;
 
@@ -3165,12 +3431,12 @@ export declare interface TLDefaultExternalContentHandlerOpts extends TLExternalC
 /** @public */
 export declare interface TLDefaultFont {
     normal: {
-        bold: TLFontFace;
-        normal: TLFontFace;
+        bold: TLFontFace_2;
+        normal: TLFontFace_2;
     };
     italic: {
-        bold: TLFontFace;
-        normal: TLFontFace;
+        bold: TLFontFace_2;
+        normal: TLFontFace_2;
     };
 }
 
@@ -3681,13 +3947,17 @@ export declare interface TLExternalContentProps {
      */
     maxAssetSize?: number;
     /**
-     * The mime types of images that are allowed to be handled. Defaults to
-     * DEFAULT_SUPPORTED_IMAGE_TYPES.
+     * The mime types of images that are allowed to be handled. When using the
+     * `Tldraw` component, defaults to `DEFAULT_SUPPORTED_IMAGE_TYPES`. If neither
+     * this nor `acceptedVideoMimeTypes` is provided, the registered asset utils
+     * determine which MIME types are allowed.
      */
     acceptedImageMimeTypes?: readonly string[];
     /**
-     * The mime types of videos that are allowed to be handled. Defaults to
-     * DEFAULT_SUPPORT_VIDEO_TYPES.
+     * The mime types of videos that are allowed to be handled. When using the
+     * `Tldraw` component, defaults to `DEFAULT_SUPPORT_VIDEO_TYPES`. If neither
+     * this nor `acceptedImageMimeTypes` is provided, the registered asset utils
+     * determine which MIME types are allowed.
      */
     acceptedVideoMimeTypes?: readonly string[];
 }
@@ -3814,6 +4084,11 @@ export declare interface TLUiComponents {
     Toasts?: ComponentType | null;
     A11y?: ComponentType | null;
     FollowingIndicator?: ComponentType | null;
+    PeopleMenu?: ComponentType | null;
+    PeopleMenuAvatar?: ComponentType<TLUiPeopleMenuAvatarProps> | null;
+    PeopleMenuItem?: ComponentType<TLUiPeopleMenuItemProps> | null;
+    PeopleMenuFacePile?: ComponentType<TLUiPeopleMenuFacePileProps> | null;
+    UserPresenceEditor?: ComponentType | null;
 }
 
 /** @public */
@@ -4386,6 +4661,23 @@ export declare interface TLUiOverrides {
     translations?: TLUiTranslationProviderProps['overrides'];
 }
 
+/** @public */
+export declare interface TLUiPeopleMenuAvatarProps {
+    userId: string;
+}
+
+/** @public */
+export declare interface TLUiPeopleMenuFacePileProps {
+    userIds: string[];
+    userName: string;
+    userColor: string;
+}
+
+/** @public */
+export declare interface TLUiPeopleMenuItemProps {
+    userId: string;
+}
+
 /** @public */
 export declare interface TLUiPopoverContentProps {
     children: React_3.ReactNode;
@@ -4850,27 +5142,6 @@ export declare function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) =>
 /** @public */
 export declare function useCurrentTranslation(): TLUiTranslation;
 
-/** @public */
-export declare function useDefaultColorTheme(): {
-    "light-blue": TLDefaultColorThemeColor;
-    "light-green": TLDefaultColorThemeColor;
-    "light-red": TLDefaultColorThemeColor;
-    "light-violet": TLDefaultColorThemeColor;
-    background: string;
-    black: TLDefaultColorThemeColor;
-    blue: TLDefaultColorThemeColor;
-    green: TLDefaultColorThemeColor;
-    grey: TLDefaultColorThemeColor;
-    id: "dark" | "light";
-    orange: TLDefaultColorThemeColor;
-    red: TLDefaultColorThemeColor;
-    solid: string;
-    text: string;
-    violet: TLDefaultColorThemeColor;
-    white: TLDefaultColorThemeColor;
-    yellow: TLDefaultColorThemeColor;
-};
-
 /** @public */
 export declare function useDefaultHelpers(): {
     addDialog: (dialog: Omit<TLUiDialog, "id"> & {
@@ -5075,7 +5346,28 @@ export declare function useUiEvents(): TLUiEventContextType;
 export declare function useUnlockedSelectedShapesCount(min?: number, max?: number): boolean | number;
 
 /** @public */
-export declare interface VideoShapeOptions {
+export declare class VideoAssetUtil extends AssetUtil<TLVideoAsset> {
+    static type: "video";
+    static props: {
+        fileSize: Validator<number | undefined>;
+        h: Validator<number>;
+        isAnimated: Validator<boolean>;
+        mimeType: Validator<null | string>;
+        name: Validator<string>;
+        src: Validator<null | string>;
+        w: Validator<number>;
+    };
+    static migrations: MigrationSequence;
+    options: {
+        supportedMimeTypes: null | readonly string[];
+    };
+    getDefaultProps(): TLVideoAsset['props'];
+    getSupportedMimeTypes(): readonly string[];
+    getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLVideoAsset>;
+}
+
+/** @public */
+export declare interface VideoShapeOptions extends ShapeOptionsWithDisplayValues<TLVideoShape, VideoShapeUtilDisplayValues> {
     /**
      * Should videos play automatically?
      */
@@ -5087,10 +5379,12 @@ export declare class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
     static type: "video";
     static props: RecordProps<TLVideoShape>;
     static migrations: TLPropsMigrations;
+    static handledAssetTypes: readonly ["video"];
     options: VideoShapeOptions;
-    canEdit(): boolean;
-    isAspectRatioLocked(): boolean;
+    canEdit(shape: TLVideoShape): boolean;
+    isAspectRatioLocked(shape: TLVideoShape): boolean;
     getDefaultProps(): TLVideoShape['props'];
+    createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
     getAriaDescriptor(shape: TLVideoShape): string;
     component(shape: TLVideoShape): JSX.Element;
     indicator(shape: TLVideoShape): JSX.Element;
@@ -5099,6 +5393,10 @@ export declare class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
     toSvg(shape: TLVideoShape, ctx: SvgExportContext): Promise<JSX.Element | null>;
 }
 
+/** @public */
+export declare interface VideoShapeUtilDisplayValues {
+}
+
 /** @public @react */
 export declare function ViewSubmenu(): JSX.Element;