tldraw 3.16.0-canary.acb40a76700b → 3.16.0-canary.b2da39015a73

package/dist-esm/lib/ui/kbd-utils.mjs

@@ -7,9 +7,15 @@ function kbd(str) {
   return str.split(",")[0].split(/(\[\[[^\]]+\]\])/g).map(
     (s) => s.startsWith("[[") ? s.replace(/[[\]]/g, "") : s.replace(/cmd\+/g, cmdKey).replace(/ctrl\+/g, ctrlKey).replace(/alt\+/g, altKey).replace(/shift\+/g, "\u21E7").replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, "\u21E7").match(/__CTRL__|__ALT__|./g) || []
   ).flat().map((sub, index) => {
-    if (sub === "__CTRL__") return "Ctrl";
-    if (sub === "__ALT__") return "Alt";
-    const modifiedKey = sub[0].toUpperCase() + sub.slice(1);
+    if (sub[0] === "+") return [];
+    let modifiedKey;
+    if (sub === "__CTRL__") {
+      modifiedKey = "Ctrl";
+    } else if (sub === "__ALT__") {
+      modifiedKey = "Alt";
+    } else {
+      modifiedKey = sub[0].toUpperCase() + sub.slice(1);
+    }
     return tlenv.isDarwin || !index ? modifiedKey : ["+", modifiedKey];
   }).flat();
 }

package/dist-esm/lib/ui/kbd-utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/kbd-utils.ts"],
-  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\tif (str === ',') return [',']\n\n\treturn (\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub === '__CTRL__') return 'Ctrl'\n\t\t\t\tif (sub === '__ALT__') return 'Alt'\n\t\t\t\tconst modifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAGtB,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG;AAE5B,SACC,IACE,MAAM,GAAG,EAAE,CAAC,EAGZ,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,QAAQ,WAAY,QAAO;AAC/B,QAAI,QAAQ,UAAW,QAAO;AAC9B,UAAM,cAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AACtD,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
+  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\tif (str === ',') return [',']\n\n\treturn (\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub[0] === '+') return []\n\n\t\t\t\tlet modifiedKey\n\t\t\t\tif (sub === '__CTRL__') {\n\t\t\t\t\tmodifiedKey = 'Ctrl'\n\t\t\t\t} else if (sub === '__ALT__') {\n\t\t\t\t\tmodifiedKey = 'Alt'\n\t\t\t\t} else {\n\t\t\t\t\tmodifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\t}\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAGtB,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG;AAE5B,SACC,IACE,MAAM,GAAG,EAAE,CAAC,EAGZ,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,IAAI,CAAC,MAAM,IAAK,QAAO,CAAC;AAE5B,QAAI;AACJ,QAAI,QAAQ,YAAY;AACvB,oBAAc;AAAA,IACf,WAAW,QAAQ,WAAW;AAC7B,oBAAc;AAAA,IACf,OAAO;AACN,oBAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAAA,IACjD;AACA,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
   "names": []
 }

package/dist-esm/lib/ui/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.16.0-canary.acb40a76700b";
+const version = "3.16.0-canary.b2da39015a73";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-08-14T14:04:21.487Z",
-  patch: "2025-08-14T14:04:21.487Z"
+  minor: "2025-09-16T15:21:33.081Z",
+  patch: "2025-09-16T15:21:33.081Z"
 };
 export {
   publishDates,

package/dist-esm/lib/ui/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.16.0-canary.acb40a76700b'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-08-14T14:04:21.487Z',\n\tpatch: '2025-08-14T14:04:21.487Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.16.0-canary.b2da39015a73'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-09-16T15:21:33.081Z',\n\tpatch: '2025-09-16T15:21:33.081Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/lib/utils/export/copyAs.mjs

@@ -8,8 +8,7 @@ import {
   getAdditionalClipboardWriteType
 } from "../clipboard.mjs";
 import { exportToImagePromiseForClipboard } from "./export.mjs";
-function copyAs(...args) {
-  const [editor, ids, opts] = typeof args[2] === "string" ? [args[0], args[1], { ...args[3], format: args[2] }] : args;
+function copyAs(editor, ids, opts) {
   if (!navigator.clipboard) return Promise.reject(new Error("Copy not supported"));
   if (navigator.clipboard.write) {
     const { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts);

package/dist-esm/lib/utils/export/copyAs.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/copyAs.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\nimport {\n\tclipboardWrite,\n\tdoesClipboardSupportType,\n\tgetAdditionalClipboardWriteType,\n} from '../clipboard'\nimport { exportToImagePromiseForClipboard } from './export'\n\n/** @public */\nexport type TLCopyType = 'svg' | 'png'\n\n/** @public */\nexport interface CopyAsOptions extends TLImageExportOptions {\n\t/** The format to copy as. */\n\tformat: TLCopyType\n}\n\n/**\n * Copy the given shapes to the clipboard.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to copy.\n * @param format - The format to copy as. Defaults to png.\n * @param opts - Options for the copy.\n *\n * @public\n */\nexport function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>\n/**\n * @deprecated The format parameter is now part of the opts object.\n * @public\n */\nexport function copyAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: TLCopyType,\n\topts?: TLImageExportOptions & { format?: undefined }\n): Promise<void>\nexport function copyAs(\n\t...args:\n\t\t| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\tformat: TLCopyType,\n\t\t\t\topts?: TLImageExportOptions & { format?: undefined },\n\t\t  ]\n) {\n\tconst [editor, ids, opts] =\n\t\ttypeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args\n\n\t// Note:  it's important that this function itself isn't async and doesn't really use promises -\n\t// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write\n\t// synchronously to make sure safari knows that the user _wants_ to copy See\n\t// https://bugs.webkit.org/show_bug.cgi?id=222262\n\n\tif (!navigator.clipboard) return Promise.reject(new Error('Copy not supported'))\n\tif (navigator.clipboard.write as any) {\n\t\tconst { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts)\n\n\t\tconst types: Record<string, Promise<Blob>> = { [mimeType]: blobPromise }\n\t\tconst additionalMimeType = getAdditionalClipboardWriteType(opts.format)\n\t\tif (additionalMimeType && doesClipboardSupportType(additionalMimeType)) {\n\t\t\ttypes[additionalMimeType] = blobPromise.then((blob) =>\n\t\t\t\tFileHelpers.rewriteMimeType(blob, additionalMimeType)\n\t\t\t)\n\t\t}\n\n\t\treturn clipboardWrite(types)\n\t}\n\n\tswitch (opts.format) {\n\t\tcase 'svg': {\n\t\t\treturn fallbackWriteTextAsync(async () => {\n\t\t\t\tconst result = await editor.getSvgString(ids, opts)\n\n\t\t\t\tif (!result) throw new Error('Failed to copy')\n\t\t\t\treturn result.svg\n\t\t\t})\n\t\t}\n\n\t\tcase 'png':\n\t\t\tthrow new Error('Copy not supported')\n\t\tdefault:\n\t\t\texhaustiveSwitchError(opts.format)\n\t}\n}\n\nasync function fallbackWriteTextAsync(getText: () => Promise<string>) {\n\tawait navigator.clipboard?.writeText?.(await getText())\n}\n"],
-  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wCAAwC;AAgC1C,SAAS,UACZ,MAQF;AACD,QAAM,CAAC,QAAQ,KAAK,IAAI,IACvB,OAAO,KAAK,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,QAAQ,KAAK,CAAC,EAAE,CAAC,IAAI;AAOrF,MAAI,CAAC,UAAU,UAAW,QAAO,QAAQ,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAC/E,MAAI,UAAU,UAAU,OAAc;AACrC,UAAM,EAAE,aAAa,SAAS,IAAI,iCAAiC,QAAQ,KAAK,IAAI;AAEpF,UAAM,QAAuC,EAAE,CAAC,QAAQ,GAAG,YAAY;AACvE,UAAM,qBAAqB,gCAAgC,KAAK,MAAM;AACtE,QAAI,sBAAsB,yBAAyB,kBAAkB,GAAG;AACvE,YAAM,kBAAkB,IAAI,YAAY;AAAA,QAAK,CAAC,SAC7C,YAAY,gBAAgB,MAAM,kBAAkB;AAAA,MACrD;AAAA,IACD;AAEA,WAAO,eAAe,KAAK;AAAA,EAC5B;AAEA,UAAQ,KAAK,QAAQ;AAAA,IACpB,KAAK,OAAO;AACX,aAAO,uBAAuB,YAAY;AACzC,cAAM,SAAS,MAAM,OAAO,aAAa,KAAK,IAAI;AAElD,YAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,gBAAgB;AAC7C,eAAO,OAAO;AAAA,MACf,CAAC;AAAA,IACF;AAAA,IAEA,KAAK;AACJ,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACrC;AACC,4BAAsB,KAAK,MAAM;AAAA,EACnC;AACD;AAEA,eAAe,uBAAuB,SAAgC;AACrE,QAAM,UAAU,WAAW,YAAY,MAAM,QAAQ,CAAC;AACvD;",
+  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\nimport {\n\tclipboardWrite,\n\tdoesClipboardSupportType,\n\tgetAdditionalClipboardWriteType,\n} from '../clipboard'\nimport { exportToImagePromiseForClipboard } from './export'\n\n/** @public */\nexport type TLCopyType = 'svg' | 'png'\n\n/** @public */\nexport interface CopyAsOptions extends TLImageExportOptions {\n\t/** The format to copy as. */\n\tformat: TLCopyType\n}\n\n/**\n * Copy the given shapes to the clipboard.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to copy.\n * @param format - The format to copy as. Defaults to png.\n * @param opts - Options for the copy.\n *\n * @public\n */\nexport function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {\n\t// Note:  it's important that this function itself isn't async and doesn't really use promises -\n\t// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write\n\t// synchronously to make sure safari knows that the user _wants_ to copy See\n\t// https://bugs.webkit.org/show_bug.cgi?id=222262\n\n\tif (!navigator.clipboard) return Promise.reject(new Error('Copy not supported'))\n\tif (navigator.clipboard.write as any) {\n\t\tconst { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts)\n\n\t\tconst types: Record<string, Promise<Blob>> = { [mimeType]: blobPromise }\n\t\tconst additionalMimeType = getAdditionalClipboardWriteType(opts.format)\n\t\tif (additionalMimeType && doesClipboardSupportType(additionalMimeType)) {\n\t\t\ttypes[additionalMimeType] = blobPromise.then((blob) =>\n\t\t\t\tFileHelpers.rewriteMimeType(blob, additionalMimeType)\n\t\t\t)\n\t\t}\n\n\t\treturn clipboardWrite(types)\n\t}\n\n\tswitch (opts.format) {\n\t\tcase 'svg': {\n\t\t\treturn fallbackWriteTextAsync(async () => {\n\t\t\t\tconst result = await editor.getSvgString(ids, opts)\n\n\t\t\t\tif (!result) throw new Error('Failed to copy')\n\t\t\t\treturn result.svg\n\t\t\t})\n\t\t}\n\n\t\tcase 'png':\n\t\t\tthrow new Error('Copy not supported')\n\t\tdefault:\n\t\t\texhaustiveSwitchError(opts.format)\n\t}\n}\n\nasync function fallbackWriteTextAsync(getText: () => Promise<string>) {\n\tawait navigator.clipboard?.writeText?.(await getText())\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wCAAwC;AAqB1C,SAAS,OAAO,QAAgB,KAAkB,MAAoC;AAM5F,MAAI,CAAC,UAAU,UAAW,QAAO,QAAQ,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAC/E,MAAI,UAAU,UAAU,OAAc;AACrC,UAAM,EAAE,aAAa,SAAS,IAAI,iCAAiC,QAAQ,KAAK,IAAI;AAEpF,UAAM,QAAuC,EAAE,CAAC,QAAQ,GAAG,YAAY;AACvE,UAAM,qBAAqB,gCAAgC,KAAK,MAAM;AACtE,QAAI,sBAAsB,yBAAyB,kBAAkB,GAAG;AACvE,YAAM,kBAAkB,IAAI,YAAY;AAAA,QAAK,CAAC,SAC7C,YAAY,gBAAgB,MAAM,kBAAkB;AAAA,MACrD;AAAA,IACD;AAEA,WAAO,eAAe,KAAK;AAAA,EAC5B;AAEA,UAAQ,KAAK,QAAQ;AAAA,IACpB,KAAK,OAAO;AACX,aAAO,uBAAuB,YAAY;AACzC,cAAM,SAAS,MAAM,OAAO,aAAa,KAAK,IAAI;AAElD,YAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,gBAAgB;AAC7C,eAAO,OAAO;AAAA,MACf,CAAC;AAAA,IACF;AAAA,IAEA,KAAK;AACJ,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACrC;AACC,4BAAsB,KAAK,MAAM;AAAA,EACnC;AACD;AAEA,eAAe,uBAAuB,SAAgC;AACrE,QAAM,UAAU,WAAW,YAAY,MAAM,QAAQ,CAAC;AACvD;",
   "names": []
 }

package/dist-esm/lib/utils/export/export.mjs

@@ -23,25 +23,6 @@ async function exportToString(editor, ids, format, opts = {}) {
     }
   }
 }
-async function exportToBlob({
-  editor,
-  ids,
-  format,
-  opts = {}
-}) {
-  const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()];
-  switch (format) {
-    case "jpeg":
-    case "png":
-    case "webp":
-    case "svg": {
-      return (await editor.toImage(idsToUse, { ...opts, format })).blob;
-    }
-    default: {
-      exhaustiveSwitchError(format);
-    }
-  }
-}
 const clipboardMimeTypesByFormat = {
   jpeg: "image/jpeg",
   png: "image/png",
@@ -59,7 +40,6 @@ function exportToImagePromiseForClipboard(editor, ids, opts = {}) {
   };
 }
 export {
-  exportToBlob,
   exportToImagePromiseForClipboard,
   exportToString
 };

package/dist-esm/lib/utils/export/export.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/export.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLExportType,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\n\nasync function getSvgString(editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions) {\n\tconst svg = await editor.getSvgString(ids, opts)\n\tif (!svg) {\n\t\tthrow new Error('Could not construct SVG.')\n\t}\n\treturn svg\n}\n\nexport async function exportToString(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: 'svg' | 'json',\n\topts: TLImageExportOptions = {}\n) {\n\tswitch (format) {\n\t\tcase 'svg': {\n\t\t\treturn (await getSvgString(editor, ids, opts))?.svg\n\t\t}\n\t\tcase 'json': {\n\t\t\tconst data = await editor.resolveAssetsInContent(editor.getContentFromCurrentPage(ids))\n\t\t\treturn JSON.stringify(data)\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\n/**\n * Export the given shapes as a blob.\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param format - The format to export as.\n * @param opts - Rendering options.\n * @returns A promise that resolves to a blob.\n * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.\n * @public\n */\nexport async function exportToBlob({\n\teditor,\n\tids,\n\tformat,\n\topts = {},\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n\tformat: TLExportType\n\topts?: TLImageExportOptions\n}): Promise<Blob> {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tswitch (format) {\n\t\tcase 'jpeg':\n\t\tcase 'png':\n\t\tcase 'webp':\n\t\tcase 'svg': {\n\t\t\treturn (await editor.toImage(idsToUse, { ...opts, format })).blob\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\nconst clipboardMimeTypesByFormat = {\n\tjpeg: 'image/jpeg',\n\tpng: 'image/png',\n\twebp: 'image/webp',\n\tsvg: 'text/plain',\n}\n\nexport function exportToImagePromiseForClipboard(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: TLImageExportOptions = {}\n): { blobPromise: Promise<Blob>; mimeType: string } {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tconst format = opts.format ?? 'png'\n\treturn {\n\t\tblobPromise: editor\n\t\t\t.toImage(idsToUse, opts)\n\t\t\t.then((result) =>\n\t\t\t\tFileHelpers.rewriteMimeType(result.blob, clipboardMimeTypesByFormat[format])\n\t\t\t),\n\t\tmimeType: clipboardMimeTypesByFormat[format],\n\t}\n}\n"],
-  "mappings": "AAAA;AAAA,EAEC;AAAA,EAIA;AAAA,OACM;AAEP,eAAe,aAAa,QAAgB,KAAkB,MAA4B;AACzF,QAAM,MAAM,MAAM,OAAO,aAAa,KAAK,IAAI;AAC/C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC3C;AACA,SAAO;AACR;AAEA,eAAsB,eACrB,QACA,KACA,QACA,OAA6B,CAAC,GAC7B;AACD,UAAQ,QAAQ;AAAA,IACf,KAAK,OAAO;AACX,cAAQ,MAAM,aAAa,QAAQ,KAAK,IAAI,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,OAAO,MAAM,OAAO,uBAAuB,OAAO,0BAA0B,GAAG,CAAC;AACtF,aAAO,KAAK,UAAU,IAAI;AAAA,IAC3B;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAYA,eAAsB,aAAa;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AACT,GAKkB;AACjB,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,UAAQ,QAAQ;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,OAAO;AACX,cAAQ,MAAM,OAAO,QAAQ,UAAU,EAAE,GAAG,MAAM,OAAO,CAAC,GAAG;AAAA,IAC9D;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAEA,MAAM,6BAA6B;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACN;AAEO,SAAS,iCACf,QACA,KACA,OAA6B,CAAC,GACqB;AACnD,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,QAAM,SAAS,KAAK,UAAU;AAC9B,SAAO;AAAA,IACN,aAAa,OACX,QAAQ,UAAU,IAAI,EACtB;AAAA,MAAK,CAAC,WACN,YAAY,gBAAgB,OAAO,MAAM,2BAA2B,MAAM,CAAC;AAAA,IAC5E;AAAA,IACD,UAAU,2BAA2B,MAAM;AAAA,EAC5C;AACD;",
+  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\n\nasync function getSvgString(editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions) {\n\tconst svg = await editor.getSvgString(ids, opts)\n\tif (!svg) {\n\t\tthrow new Error('Could not construct SVG.')\n\t}\n\treturn svg\n}\n\nexport async function exportToString(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: 'svg' | 'json',\n\topts: TLImageExportOptions = {}\n) {\n\tswitch (format) {\n\t\tcase 'svg': {\n\t\t\treturn (await getSvgString(editor, ids, opts))?.svg\n\t\t}\n\t\tcase 'json': {\n\t\t\tconst data = await editor.resolveAssetsInContent(editor.getContentFromCurrentPage(ids))\n\t\t\treturn JSON.stringify(data)\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\nconst clipboardMimeTypesByFormat = {\n\tjpeg: 'image/jpeg',\n\tpng: 'image/png',\n\twebp: 'image/webp',\n\tsvg: 'text/plain',\n}\n\nexport function exportToImagePromiseForClipboard(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: TLImageExportOptions = {}\n): { blobPromise: Promise<Blob>; mimeType: string } {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tconst format = opts.format ?? 'png'\n\treturn {\n\t\tblobPromise: editor\n\t\t\t.toImage(idsToUse, opts)\n\t\t\t.then((result) =>\n\t\t\t\tFileHelpers.rewriteMimeType(result.blob, clipboardMimeTypesByFormat[format])\n\t\t\t),\n\t\tmimeType: clipboardMimeTypesByFormat[format],\n\t}\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AAEP,eAAe,aAAa,QAAgB,KAAkB,MAA4B;AACzF,QAAM,MAAM,MAAM,OAAO,aAAa,KAAK,IAAI;AAC/C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC3C;AACA,SAAO;AACR;AAEA,eAAsB,eACrB,QACA,KACA,QACA,OAA6B,CAAC,GAC7B;AACD,UAAQ,QAAQ;AAAA,IACf,KAAK,OAAO;AACX,cAAQ,MAAM,aAAa,QAAQ,KAAK,IAAI,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,OAAO,MAAM,OAAO,uBAAuB,OAAO,0BAA0B,GAAG,CAAC;AACtF,aAAO,KAAK,UAAU,IAAI;AAAA,IAC3B;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAEA,MAAM,6BAA6B;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACN;AAEO,SAAS,iCACf,QACA,KACA,OAA6B,CAAC,GACqB;AACnD,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,QAAM,SAAS,KAAK,UAAU;AAC9B,SAAO;AAAA,IACN,aAAa,OACX,QAAQ,UAAU,IAAI,EACtB;AAAA,MAAK,CAAC,WACN,YAAY,gBAAgB,OAAO,MAAM,2BAA2B,MAAM,CAAC;AAAA,IAC5E;AAAA,IACD,UAAU,2BAA2B,MAAM;AAAA,EAC5C;AACD;",
   "names": []
 }

package/dist-esm/lib/utils/export/exportAs.mjs

@@ -1,8 +1,7 @@
 import {
   sanitizeId
 } from "@tldraw/editor";
-async function exportAs(...args) {
-  const [editor, ids, opts] = typeof args[2] === "object" ? args : [args[0], args[1], { ...args[4], format: args[2] ?? "png", name: args[3] }];
+async function exportAs(editor, ids, opts) {
   let name = opts.name;
   if (!name) {
     name = `shapes at ${getTimestamp()}`;

package/dist-esm/lib/utils/export/exportAs.mjs.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,EAEC;AAAA,OAKM;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,GAAG,WAAW,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,EAEC;AAAA,OAKM;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,GAAG,WAAW,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "3.16.0-canary.acb40a76700b",
+  "version": "3.16.0-canary.b2da39015a73",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -27,9 +27,9 @@
   ],
   "main": "dist-cjs/index.js",
   "scripts": {
-    "test-ci": "lazy inherit",
-    "test": "yarn run -T jest",
-    "test-coverage": "lazy inherit",
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "predev": "node ./scripts/copy-css-files.mjs",
     "dev": "chokidar '../{editor/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs'",
     "prebuild": "node ./scripts/copy-css-files.mjs",
@@ -38,7 +38,8 @@
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
+    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "files": [
     "tldraw.css",
@@ -54,13 +55,13 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "@tldraw/editor": "3.16.0-canary.acb40a76700b",
-    "@tldraw/store": "3.16.0-canary.acb40a76700b",
+    "@tldraw/editor": "3.16.0-canary.b2da39015a73",
+    "@tldraw/store": "3.16.0-canary.b2da39015a73",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",
     "lz-string": "^1.5.0",
-    "radix-ui": "^1.3.4"
+    "radix-ui": "^1.4.2"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -68,40 +69,16 @@
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/classnames": "^2.3.4",
     "@types/lz-string": "^1.5.0",
     "@types/react": "^18.3.18",
     "chokidar-cli": "^3.0.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "jest": {
-    "preset": "../../internal/config/jest/node/jest-preset.js",
-    "testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
-    "fakeTimers": {
-      "enableGlobally": true
-    },
-    "testPathIgnorePatterns": [
-      "^.+\\.*.css$"
-    ],
-    "moduleNameMapper": {
-      "^~(.*)": "<rootDir>/src/$1",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    "setupFiles": [
-      "raf/polyfill",
-      "jest-canvas-mock",
-      "<rootDir>/setupTests.js"
-    ],
-    "setupFilesAfterEnv": [
-      "../../internal/config/setupJest.ts"
-    ]
+    "resize-observer-polyfill": "^1.5.1",
+    "vitest": "^3.2.4"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/index.ts

@@ -24,6 +24,7 @@ export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMo
 export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
 export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
+export { DefaultFollowingIndicator } from './lib/ui/components/DefaultFollowingIndicator'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
 export {
 	TldrawUiColumn,
@@ -85,6 +86,7 @@ export {
 	defaultHandleExternalUrlContent,
 	getAssetInfo,
 	getMediaAssetInfoPartial,
+	notifyIfFileNotAllowed,
 	registerDefaultExternalContentHandlers,
 	type TLDefaultExternalContentHandlerOpts,
 	type TLExternalContentProps,
@@ -166,11 +168,10 @@ export {
 	type TLDefaultFont,
 	type TLDefaultFonts,
 } from './lib/shapes/shared/defaultFonts'
-export {
-	PlainTextLabel,
-	TextLabel,
-	type PlainTextLabelProps,
-} from './lib/shapes/shared/PlainTextLabel'
+export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
+export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
+export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
+export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
 export {
 	RichTextLabel,
 	RichTextSVG,
@@ -178,10 +179,9 @@ export {
 	type RichTextSVGProps,
 } from './lib/shapes/shared/RichTextLabel'
 export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
-export { useEditablePlainText, useEditableText } from './lib/shapes/shared/useEditablePlainText'
+export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
 export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
 export {
-	useAsset,
 	useImageOrVideoAsset,
 	type UseImageOrVideoAssetOptions,
 } from './lib/shapes/shared/useImageOrVideoAsset'
@@ -360,10 +360,6 @@ export {
 	TldrawUiMenuSubmenu,
 	type TLUiMenuSubmenuProps,
 } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
-export {
-	TldrawUiButtonPicker,
-	type TLUiButtonPickerProps,
-} from './lib/ui/components/primitives/TldrawUiButtonPicker'
 export {
 	TldrawUiContextualToolbar,
 	type TLUiContextualToolbarProps,
@@ -443,17 +439,44 @@ export {
 	type TLUiStylePanelProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanel'
 export {
-	ArrowheadStylePickerSet,
-	CommonStylePickerSet,
 	DefaultStylePanelContent,
-	GeoStylePickerSet,
-	OpacitySlider,
-	SplineStylePickerSet,
-	TextStylePickerSet,
-	type StylePickerSetProps,
-	type ThemeStylePickerSetProps,
-	type TLUiStylePanelContentProps,
+	StylePanelArrowheadPicker,
+	StylePanelArrowKindPicker,
+	StylePanelColorPicker,
+	StylePanelDashPicker,
+	StylePanelFillPicker,
+	StylePanelFontPicker,
+	StylePanelGeoShapePicker,
+	StylePanelLabelAlignPicker,
+	StylePanelOpacityPicker,
+	StylePanelSection,
+	StylePanelSizePicker,
+	StylePanelSplinePicker,
+	StylePanelTextAlignPicker,
+	type StylePanelSectionProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
+export {
+	StylePanelButtonPicker,
+	type StylePanelButtonPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
+export {
+	StylePanelContextProvider,
+	useStylePanelContext,
+	type StylePanelContext,
+	type StylePanelContextProviderProps,
+} from './lib/ui/components/StylePanel/StylePanelContext'
+export {
+	StylePanelDoubleDropdownPicker,
+	type StylePanelDoubleDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
+export {
+	StylePanelDropdownPicker,
+	type StylePanelDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
+export {
+	StylePanelSubheading,
+	type StylePanelSubheadingProps,
+} from './lib/ui/components/StylePanel/StylePanelSubheading'
 export {
 	DefaultImageToolbar,
 	type TLUiImageToolbarProps,
@@ -625,13 +648,12 @@ export {
 } from './lib/ui/hooks/useTranslation/useTranslation'
 export { type TLUiIconType } from './lib/ui/icon-types'
 export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
-export { TldrawUi, type TldrawUiProps } from './lib/ui/TldrawUi'
+export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
 export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'
 export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
 export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
 export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
 export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
-export { exportToBlob } from './lib/utils/export/export'
 export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
 export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
 export {

package/src/lib/Tldraw.tsx

@@ -33,7 +33,7 @@ import { registerDefaultSideEffects } from './defaultSideEffects'
 import { defaultTools } from './defaultTools'
 import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
 import { allDefaultFontFaces } from './shapes/shared/defaultFonts'
-import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
+import { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'
 import { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'
 import { LoadingScreen } from './ui/components/LoadingScreen'
 import { Spinner } from './ui/components/Spinner'
@@ -118,6 +118,18 @@ export function Tldraw(props: TldrawProps) {
 
 	const _components = useShallowObjectIdentity(components)
 
+	const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas
+	const InFrontOfTheCanvas = useMemo(() => {
+		if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null
+		if (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas
+
+		return () => (
+			<>
+				<TldrawUiInFrontOfTheCanvas />
+				<CustomInFrontOfTheCanvas />
+			</>
+		)
+	}, [rest.hideUi, CustomInFrontOfTheCanvas])
 	const componentsWithDefault = useMemo(
 		() => ({
 			Scribble: TldrawScribble,
@@ -129,8 +141,9 @@ export function Tldraw(props: TldrawProps) {
 			Spinner,
 			LoadingScreen,
 			..._components,
+			InFrontOfTheCanvas,
 		}),
-		[_components]
+		[_components, InFrontOfTheCanvas]
 	)
 
 	const _shapeUtils = useShallowArrayIdentity(shapeUtils)

package/src/lib/defaultExternalContentHandlers.ts

@@ -144,7 +144,7 @@ export async function defaultHandleExternalFileAsset(
 	{ file, assetId }: TLFileExternalAsset,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const assetInfo = await getAssetInfo(file, options, assetId)
@@ -161,7 +161,7 @@ export async function defaultHandleExternalFileReplaceContent(
 	{ file, shapeId, isImage }: TLFileReplaceExternalContent,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const shape = editor.getShape(shapeId)
@@ -399,7 +399,7 @@ export async function defaultHandleExternalFileContent(
 		file: File
 	}[] = []
 	for (const file of files) {
-		const isSuccess = runFileChecks(file, options)
+		const isSuccess = notifyIfFileNotAllowed(file, options)
 		if (!isSuccess) continue
 
 		const assetInfo = await getAssetInfo(file, options)
@@ -873,7 +873,15 @@ export function createEmptyBookmarkShape(
 	return editor.getShape(partial.id) as TLBookmarkShape
 }
 
-function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts) {
+/**
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
+ *
+ * @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 function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {
 	const {
 		acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
 		acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,
@@ -893,8 +901,22 @@ function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts)
 	}
 
 	if (file.size > maxAssetSize) {
+		const formatBytes = (bytes: number): string => {
+			if (bytes === 0) return '0 bytes'
+
+			const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+			const base = 1024
+			const unitIndex = Math.floor(Math.log(bytes) / Math.log(base))
+
+			const value = bytes / Math.pow(base, unitIndex)
+			const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1)
+
+			return `${formatted} ${units[unitIndex]}`
+		}
+
 		toasts.addToast({
 			title: msg('assets.files.size-too-big'),
+			description: msg('assets.files.maximum-size').replace('{size}', formatBytes(maxAssetSize)),
 			severity: 'error',
 		})
 		return false

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -1,4 +1,5 @@
 import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { updateArrowTargetState } from './arrowTargetState'
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -1,4 +1,5 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
 	clearTimeout(id)
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
 			},
 		})
 
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Give time for the velocity to die down
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -568,12 +569,12 @@ describe('reparenting issue', () => {
 		const arrow1BoundIndex = editor.getShape(arrow1Id)!.index
 		const arrow2BoundIndex = editor.getShape(arrow2Id)!.index
 		expect(arrow1BoundIndex).toBe('a1V')
-		expect(arrow2BoundIndex).toBe('a1F')
+		expect(arrow2BoundIndex).toBe('a1G')
 
 		// nudge everything around and make sure we all stay in the right order
 		editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: -1, y: 0 })
 		expect(editor.getShape(arrow1Id)!.index).toBe('a1V')
-		expect(editor.getShape(arrow2Id)!.index).toBe('a1F')
+		expect(editor.getShape(arrow2Id)!.index).toBe('a1G')
 	})
 })