tldraw 3.16.0-canary.514c34dff258 → 3.16.0-canary.54408756ac9c

package/dist-cjs/lib/utils/export/exportAs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/exportAs.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tsanitizeId,\n\tTLExportType,\n\tTLFrameShape,\n\tTLImageExportOptions,\n\tTLShapeId,\n} from '@tldraw/editor'\n\n/** @public */\nexport interface ExportAsOptions extends TLImageExportOptions {\n\t/** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */\n\tformat: TLExportType\n\t/** Name of the exported file. If undefined a predefined name, based on the selection, will be used. */\n\tname?: string\n}\n\n/**\n * Export the given shapes as files.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param opts - Options for the export.\n *\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: ExportAsOptions\n): Promise<void>\n/**\n * @deprecated The format & name parameters are now part of the opts object.\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat?: TLExportType,\n\tname?: string,\n\topts?: TLImageExportOptions\n): Promise<void>\nexport async function exportAs(\n\t...args:\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\topts: TLImageExportOptions & { format: TLExportType; name?: string },\n\t\t  ]\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\tformat?: TLExportType,\n\t\t\t\tname?: string,\n\t\t\t\topts?: TLImageExportOptions,\n\t\t  ]\n) {\n\tconst [editor, ids, opts] =\n\t\ttypeof args[2] === 'object'\n\t\t\t? args\n\t\t\t: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]\n\n\t// If we don't get name then use a predefined one\n\tlet name = opts.name\n\tif (!name) {\n\t\tname = `shapes at ${getTimestamp()}`\n\t\tif (ids.length === 1) {\n\t\t\tconst first = editor.getShape(ids[0])!\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {\n\t\t\t\tname = first.props.name || 'frame'\n\t\t\t} else {\n\t\t\t\tname = `${sanitizeId(first.id)} at ${getTimestamp()}`\n\t\t\t}\n\t\t}\n\t}\n\tname += `.${opts.format}`\n\n\tconst { blob } = await editor.toImage(ids, opts)\n\tconst file = new File([blob], name, { type: blob.type })\n\tdownloadFile(file)\n}\n\nfunction getTimestamp() {\n\tconst now = new Date()\n\n\tconst year = String(now.getFullYear()).slice(2)\n\tconst month = String(now.getMonth() + 1).padStart(2, '0')\n\tconst day = String(now.getDate()).padStart(2, '0')\n\tconst hours = String(now.getHours()).padStart(2, '0')\n\tconst minutes = String(now.getMinutes()).padStart(2, '0')\n\tconst seconds = String(now.getSeconds()).padStart(2, '0')\n\n\treturn `${year}-${month}-${day} ${hours}.${minutes}.${seconds}`\n}\n\n/** @internal */\nexport function downloadFile(file: File) {\n\tconst link = document.createElement('a')\n\tconst url = URL.createObjectURL(file)\n\tlink.href = url\n\tlink.download = file.name\n\tlink.click()\n\tURL.revokeObjectURL(url)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOO;AAmCP,eAAsB,YAClB,MAaF;AACD,QAAM,CAAC,QAAQ,KAAK,IAAI,IACvB,OAAO,KAAK,CAAC,MAAM,WAChB,OACA,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,QAAQ,KAAK,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,EAAE,CAAC;AAG9E,MAAI,OAAO,KAAK;AAChB,MAAI,CAAC,MAAM;AACV,WAAO,aAAa,aAAa,CAAC;AAClC,QAAI,IAAI,WAAW,GAAG;AACrB,YAAM,QAAQ,OAAO,SAAS,IAAI,CAAC,CAAC;AACpC,UAAI,OAAO,cAA4B,OAAO,OAAO,GAAG;AACvD,eAAO,MAAM,MAAM,QAAQ;AAAA,MAC5B,OAAO;AACN,eAAO,OAAG,0BAAW,MAAM,EAAE,CAAC,OAAO,aAAa,CAAC;AAAA,MACpD;AAAA,IACD;AAAA,EACD;AACA,UAAQ,IAAI,KAAK,MAAM;AAEvB,QAAM,EAAE,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI;AAC/C,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AACvD,eAAa,IAAI;AAClB;AAEA,SAAS,eAAe;AACvB,QAAM,MAAM,oBAAI,KAAK;AAErB,QAAM,OAAO,OAAO,IAAI,YAAY,CAAC,EAAE,MAAM,CAAC;AAC9C,QAAM,QAAQ,OAAO,IAAI,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,MAAM,OAAO,IAAI,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,QAAQ,OAAO,IAAI,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AAExD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAC9D;AAGO,SAAS,aAAa,MAAY;AACxC,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,OAAK,OAAO;AACZ,OAAK,WAAW,KAAK;AACrB,OAAK,MAAM;AACX,MAAI,gBAAgB,GAAG;AACxB;",
+  "sourcesContent": ["import {\n\tEditor,\n\tsanitizeId,\n\tTLExportType,\n\tTLFrameShape,\n\tTLImageExportOptions,\n\tTLShapeId,\n} from '@tldraw/editor'\n\n/** @public */\nexport interface ExportAsOptions extends TLImageExportOptions {\n\t/** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */\n\tformat: TLExportType\n\t/** Name of the exported file. If undefined a predefined name, based on the selection, will be used. */\n\tname?: string\n}\n\n/**\n * Export the given shapes as files.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param opts - Options for the export.\n *\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: ExportAsOptions\n): Promise<void> {\n\t// If we don't get name then use a predefined one\n\tlet name = opts.name\n\tif (!name) {\n\t\tname = `shapes at ${getTimestamp()}`\n\t\tif (ids.length === 1) {\n\t\t\tconst first = editor.getShape(ids[0])!\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {\n\t\t\t\tname = first.props.name || 'frame'\n\t\t\t} else {\n\t\t\t\tname = `${sanitizeId(first.id)} at ${getTimestamp()}`\n\t\t\t}\n\t\t}\n\t}\n\tname += `.${opts.format}`\n\n\tconst { blob } = await editor.toImage(ids, opts)\n\tconst file = new File([blob], name, { type: blob.type })\n\tdownloadFile(file)\n}\n\nfunction getTimestamp() {\n\tconst now = new Date()\n\n\tconst year = String(now.getFullYear()).slice(2)\n\tconst month = String(now.getMonth() + 1).padStart(2, '0')\n\tconst day = String(now.getDate()).padStart(2, '0')\n\tconst hours = String(now.getHours()).padStart(2, '0')\n\tconst minutes = String(now.getMinutes()).padStart(2, '0')\n\tconst seconds = String(now.getSeconds()).padStart(2, '0')\n\n\treturn `${year}-${month}-${day} ${hours}.${minutes}.${seconds}`\n}\n\n/** @internal */\nexport function downloadFile(file: File) {\n\tconst link = document.createElement('a')\n\tconst url = URL.createObjectURL(file)\n\tlink.href = url\n\tlink.download = file.name\n\tlink.click()\n\tURL.revokeObjectURL(url)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOO;AAmBP,eAAsB,SACrB,QACA,KACA,MACgB;AAEhB,MAAI,OAAO,KAAK;AAChB,MAAI,CAAC,MAAM;AACV,WAAO,aAAa,aAAa,CAAC;AAClC,QAAI,IAAI,WAAW,GAAG;AACrB,YAAM,QAAQ,OAAO,SAAS,IAAI,CAAC,CAAC;AACpC,UAAI,OAAO,cAA4B,OAAO,OAAO,GAAG;AACvD,eAAO,MAAM,MAAM,QAAQ;AAAA,MAC5B,OAAO;AACN,eAAO,OAAG,0BAAW,MAAM,EAAE,CAAC,OAAO,aAAa,CAAC;AAAA,MACpD;AAAA,IACD;AAAA,EACD;AACA,UAAQ,IAAI,KAAK,MAAM;AAEvB,QAAM,EAAE,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI;AAC/C,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AACvD,eAAa,IAAI;AAClB;AAEA,SAAS,eAAe;AACvB,QAAM,MAAM,oBAAI,KAAK;AAErB,QAAM,OAAO,OAAO,IAAI,YAAY,CAAC,EAAE,MAAM,CAAC;AAC9C,QAAM,QAAQ,OAAO,IAAI,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,MAAM,OAAO,IAAI,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,QAAQ,OAAO,IAAI,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AAExD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAC9D;AAGO,SAAS,aAAa,MAAY;AACxC,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,OAAK,OAAO;AACZ,OAAK,WAAW,KAAK;AACrB,OAAK,MAAM;AACX,MAAI,gBAAgB,GAAG;AACxB;",
   "names": []
 }

package/dist-esm/index.d.mts

@@ -68,7 +68,6 @@ import { TLClickEventInfo } from '@tldraw/editor';
 import { TLContent } from '@tldraw/editor';
 import { TLCropInfo } from '@tldraw/editor';
 import { TLDefaultColorStyle } from '@tldraw/editor';
-import { TLDefaultColorTheme } from '@tldraw/editor';
 import { TLDefaultColorThemeColor } from '@tldraw/editor';
 import { TLDefaultDashStyle } from '@tldraw/editor';
 import { TLDefaultFillStyle } from '@tldraw/editor';
@@ -193,9 +192,6 @@ export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
 /** @public @react */
 export declare function ArrowDownToolbarItem(): JSX_2.Element;
 
-/** @public @react */
-export declare function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
-
 /** @public @react */
 export declare function ArrowLeftToolbarItem(): JSX_2.Element;
 
@@ -500,9 +496,6 @@ export declare function CloudToolbarItem(): JSX_2.Element;
 /** @public @react */
 export declare function ColorSchemeMenu(): JSX_2.Element;
 
-/** @public @react */
-export declare function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps): JSX_2.Element;
-
 /**
  * Contains the size within the given box size
  *
@@ -534,14 +527,6 @@ export declare function ConvertToEmbedMenuItem(): JSX_2.Element | null;
  */
 export declare function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>;
 
-/**
- * @deprecated The format parameter is now part of the opts object.
- * @public
- */
-export declare function copyAs(editor: Editor, ids: TLShapeId[], format: TLCopyType, opts?: TLImageExportOptions & {
-    format?: undefined;
-}): Promise<void>;
-
 /** @public @react */
 export declare function CopyAsMenuGroup(): JSX_2.Element;
 
@@ -999,7 +984,7 @@ export declare function DefaultSharePanel(): JSX_2.Element;
 export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
 
 /** @public @react */
-export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
+export declare function DefaultStylePanelContent(): JSX_2.Element;
 
 /** @public @react */
 export declare const DefaultToasts: NamedExoticComponent<object>;
@@ -1492,12 +1477,6 @@ export declare interface ExampleDialogProps {
  */
 export declare function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;
 
-/**
- * @deprecated The format & name parameters are now part of the opts object.
- * @public
- */
-export declare function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, name?: string, opts?: TLImageExportOptions): Promise<void>;
-
 /** @public */
 export declare interface ExportAsOptions extends TLImageExportOptions {
     /** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */
@@ -1509,23 +1488,6 @@ export declare interface ExportAsOptions extends TLImageExportOptions {
 /** @public @react */
 export declare function ExportFileContentSubMenu(): JSX_2.Element;
 
-/**
- * Export the given shapes as a blob.
- * @param editor - The editor instance.
- * @param ids - The ids of the shapes to export.
- * @param format - The format to export as.
- * @param opts - Rendering options.
- * @returns A promise that resolves to a blob.
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
- * @public
- */
-export declare function exportToBlob({ editor, ids, format, opts, }: {
-    editor: Editor;
-    format: TLExportType;
-    ids: TLShapeId[];
-    opts?: TLImageExportOptions;
-}): Promise<Blob>;
-
 /** @public @react */
 export declare function ExtrasGroup(): JSX_2.Element;
 
@@ -1582,6 +1544,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     canEdit(): boolean;
     canResize(): boolean;
     canResizeChildren(): boolean;
+    isExportBoundsContainer(): boolean;
     getDefaultProps(): TLFrameShape['props'];
     getAriaDescriptor(shape: TLFrameShape): string;
     getGeometry(shape: TLFrameShape): Geometry2d;
@@ -1590,6 +1553,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element;
     indicator(shape: TLFrameShape): JSX_2.Element;
     providesBackgroundForChildren(): boolean;
+    getClipPath(shape: TLFrameShape): Vec[];
     canReceiveNewChildrenOfType(shape: TLShape): boolean;
     onResize(shape: any, info: TLResizeInfo<any>): any;
     getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
@@ -1738,9 +1702,6 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
     getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
 }
 
-/** @public @react */
-export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
-
 /** @public */
 export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
 
@@ -1901,6 +1862,7 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     static migrations: TLPropsMigrations;
     isAspectRatioLocked(): boolean;
     canCrop(): boolean;
+    isExportBoundsContainer(): boolean;
     getDefaultProps(): TLImageShape['props'];
     getGeometry(shape: TLImageShape): Geometry2d;
     getAriaDescriptor(shape: TLImageShape): string;
@@ -2187,9 +2149,6 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
     onDragEnd?(id: TLShapeId): void;
 }
 
-/** @public @react */
-export declare function OpacitySlider(): JSX_2.Element | null;
-
 /** @public @react */
 export declare function OvalToolbarItem(): JSX_2.Element;
 
@@ -2581,9 +2540,6 @@ export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
 
 /* Excluded from this release type: Spinner */
 
-/** @public @react */
-export declare function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
-
 /** @public @react */
 export declare function StackMenuItems(): JSX_2.Element;
 
@@ -2641,11 +2597,124 @@ export declare interface StrokePoint {
     radius: number;
 }
 
+/** @public @react */
+export declare function StylePanelArrowheadPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelArrowKindPicker(): JSX_2.Element | null;
+
 /** @public */
-export declare interface StylePickerSetProps {
+export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement;
+
+/** @public */
+export declare interface StylePanelButtonPickerProps<T extends string> {
+    title: string;
+    uiType: string;
+    style: StyleProp<T>;
+    value: SharedStyle<T>;
+    items: StyleValuesForUi<T>;
+    onValueChange?(style: StyleProp<T>, value: T): void;
+    onHistoryMark?(id: string): void;
+}
+
+/** @public @react */
+export declare function StylePanelColorPicker(): JSX_2.Element | null;
+
+/** @public */
+export declare interface StylePanelContext {
+    styles: ReadonlySharedStyleMap;
+    showUiLabels: boolean;
+    onHistoryMark(id: string): void;
+    onValueChange<T>(style: StyleProp<T>, value: T): void;
+}
+
+/** @public @react */
+export declare function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX_2.Element;
+
+/** @public */
+export declare interface StylePanelContextProviderProps {
+    children: React.ReactNode;
     styles: ReadonlySharedStyleMap;
 }
 
+/** @public @react */
+export declare function StylePanelDashPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
+
+/** @public */
+export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
+    uiTypeA: string;
+    uiTypeB: string;
+    label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
+    labelA: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
+    labelB: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
+    itemsA: StyleValuesForUi<T>;
+    itemsB: StyleValuesForUi<T>;
+    styleA: StyleProp<T>;
+    styleB: StyleProp<T>;
+    valueA: SharedStyle<T>;
+    valueB: SharedStyle<T>;
+    onValueChange?(style: StyleProp<T>, value: T): void;
+}
+
+/** @public @react */
+export declare const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
+
+/** @public */
+export declare interface StylePanelDropdownPickerProps<T extends string> {
+    id: string;
+    label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
+    uiType: string;
+    stylePanelType: string;
+    style: StyleProp<T>;
+    value: SharedStyle<T>;
+    items: StyleValuesForUi<T>;
+    type: 'icon' | 'menu' | 'tool';
+    onValueChange?(style: StyleProp<T>, value: T): void;
+}
+
+/** @public @react */
+export declare function StylePanelFillPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelFontPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelGeoShapePicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelLabelAlignPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelOpacityPicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelSection({ children }: StylePanelSectionProps): JSX_2.Element;
+
+/** @public */
+export declare interface StylePanelSectionProps {
+    children: React_3.ReactNode;
+}
+
+/** @public @react */
+export declare function StylePanelSizePicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelSplinePicker(): JSX_2.Element | null;
+
+/** @public @react */
+export declare function StylePanelSubheading({ children }: StylePanelSubheadingProps): JSX_2.Element;
+
+/** @public */
+export declare interface StylePanelSubheadingProps {
+    children: React.ReactNode;
+}
+
+/** @public @react */
+export declare function StylePanelTextAlignPicker(): JSX_2.Element | null;
+
 /** @public */
 export declare type StyleValuesForUi<T> = readonly {
     readonly icon: string | TLUiIconJsx;
@@ -2685,12 +2754,6 @@ export declare interface TextAreaProps {
  */
 export declare const TextDirection: Extension<any, any>;
 
-/**
- * @deprecated Use `PlainTextLabel` instead.
- * @public
- */
-export declare const TextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;
-
 /** @public */
 export declare interface TextShapeOptions {
     /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
@@ -2768,18 +2831,9 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
     } | undefined;
 }
 
-/** @public @react */
-export declare function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
-
 /** @public @react */
 export declare function TextToolbarItem(): JSX_2.Element;
 
-/** @public */
-export declare interface ThemeStylePickerSetProps {
-    styles: ReadonlySharedStyleMap;
-    theme: TLDefaultColorTheme;
-}
-
 /**
  * Default extensions for the TipTap editor.
  *
@@ -3036,9 +3090,6 @@ export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButt
 /** @public @react */
 export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
 
-/** @public */
-export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
-
 /**
  * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
  *
@@ -3218,7 +3269,7 @@ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiTool
 export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
 
 /** @public @react */
-export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
+export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
 
 /** @public @react */
 export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
@@ -3405,18 +3456,6 @@ export declare interface TLUiButtonLabelProps {
     children?: ReactNode;
 }
 
-/** @public */
-export declare interface TLUiButtonPickerProps<T extends string> {
-    title: string;
-    uiType: string;
-    style: StyleProp<T>;
-    value: SharedStyle<T>;
-    items: StyleValuesForUi<T>;
-    theme: TLDefaultColorTheme;
-    onValueChange(style: StyleProp<T>, value: T): void;
-    onHistoryMark?(id: string): void;
-}
-
 /** @public */
 export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
@@ -3777,7 +3816,7 @@ export declare interface TLUiEventMap {
     'flatten-to-image': null;
     'a11y-repeat-shape-announce': null;
     'open-url': {
-        url: string;
+        destinationUrl: string;
     };
     'open-context-menu': null;
     'adjust-shape-styles': null;
@@ -4057,14 +4096,10 @@ export declare interface TLUiSliderProps {
     ariaValueModifier?: number;
 }
 
-/** @public */
-export declare interface TLUiStylePanelContentProps {
-    styles: ReturnType<typeof useRelevantStyles>;
-}
-
 /** @public */
 export declare interface TLUiStylePanelProps {
     isMobile?: boolean;
+    styles?: null | ReadonlySharedStyleMap;
     children?: ReactNode;
 }
 
@@ -4133,6 +4168,7 @@ export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttribu
     value: any;
     defaultValue?: any;
     type: 'multiple' | 'single';
+    asChild?: boolean;
 }
 
 /** @public */
@@ -4187,7 +4223,7 @@ export declare interface TLUiTranslation {
 export declare type TLUiTranslationContextType = TLUiTranslation;
 
 /** @public */
-export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
+export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop-confirm' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
 
 /** @public */
 export declare interface TLUiTranslationProviderProps {
@@ -4369,13 +4405,6 @@ export declare function useA11y(): TLUiA11yContextType;
 /** @public */
 export declare function useActions(): TLUiActionsContextType;
 
-/**
- * @deprecated Use {@link useImageOrVideoAsset} instead.
- *
- * @public
- */
-export declare const useAsset: typeof useImageOrVideoAsset;
-
 /* Excluded from this release type: useAssetUrls */
 
 /** @public */
@@ -4430,7 +4459,11 @@ export declare function useDefaultHelpers(): {
     copy: (source: TLUiEventSource) => Promise<void>;
     copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
     cut: (source: TLUiEventSource) => Promise<void>;
-    exportAs: (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
+    exportAs: (ids: TLShapeId[], opts?: {
+        format?: TLExportType;
+        name?: string;
+        scale?: number;
+    }) => void;
     getEmbedDefinition: (url: string) => TLEmbedResult;
     insertMedia: () => Promise<void>;
     isMobile: boolean;
@@ -4480,14 +4513,12 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
     rInput: RefObject<HTMLDivElement>;
 };
 
-/**
- * @deprecated Use `useEditablePlainText` instead.
- * @public
- */
-export declare const useEditableText: typeof useEditablePlainText;
-
 /** @public */
-export declare function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
+export declare function useExportAs(): (ids: TLShapeId[], opts?: {
+    format?: TLExportType;
+    name?: string;
+    scale?: number;
+}) => void;
 
 /**
  * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
@@ -4561,6 +4592,9 @@ export declare const useSelectedShapesAnnouncer: () => void;
 /** @public */
 export declare function useShowCollaborationUi(): boolean;
 
+/** @public */
+export declare function useStylePanelContext(): StylePanelContext;
+
 /** @public */
 export declare function useTldrawUiComponents(): TLUiComponents;