npm - tldraw - Versions diffs - 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d3a23ebd1b0b - Mend

tldraw 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d3a23ebd1b0b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist-cjs/lib/ui/assetUrls.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/assetUrls.ts"],
-  "sourcesContent": ["import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'\nimport { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'\nimport { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'\nimport { TLUiIconType, iconTypes } from './icon-types'\n\n/** @public */\nexport interface TLUiAssetUrls extends TLEditorAssetUrls {\n\ticons: Record<TLUiIconType | Exclude<string, TLUiIconType>, string>\n\ttranslations: Record<(typeof LANGUAGES)[number]['locale'], string>\n\tembedIcons: Partial<Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>>\n}\n\n/** @public */\nexport type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>\n\nexport let defaultUiAssetUrls: TLUiAssetUrls = {\n\t...defaultEditorAssetUrls,\n\ticons: Object.fromEntries(\n\t\ticonTypes.map((name) => [name, `${getDefaultCdnBaseUrl()}/icons/icon/0_merged.svg#${name}`])\n\t) as Record<TLUiIconType, string>,\n\ttranslations: Object.fromEntries(\n\t\tLANGUAGES.map((lang) => [\n\t\t\tlang.locale,\n\t\t\t`${getDefaultCdnBaseUrl()}/translations/${lang.locale}.json`,\n\t\t])\n\t) as Record<(typeof LANGUAGES)[number]['locale'], string>,\n\tembedIcons: Object.fromEntries(\n\t\tDEFAULT_EMBED_DEFINITIONS.map((def) => [\n\t\t\tdef.type,\n\t\t\t`${getDefaultCdnBaseUrl()}/embed-icons/${def.type}.png`,\n\t\t])\n\t) as Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>,\n}\n\n/** @internal */\nexport function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {\n\tdefaultUiAssetUrls = urls\n}\n\n/** @internal */\nexport function useDefaultUiAssetUrlsWithOverrides(\n\toverrides?: TLUiAssetUrlOverrides\n): TLUiAssetUrls {\n\tif (!overrides) return defaultUiAssetUrls\n\n\treturn {\n\t\tfonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),\n\t\ticons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),\n\t\tembedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),\n\t\ttranslations: Object.assign(\n\t\t\t{ ...defaultUiAssetUrls.translations },\n\t\t\t{ ...overrides?.translations }\n\t\t),\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkE;AAClE,qCAA0C;AAC1C,uBAA0D;AAC1D,wBAAwC;AAYjC,IAAI,qBAAoC;AAAA,EAC9C,GAAG;AAAA,EACH,OAAO,OAAO;AAAA,IACb,4BAAU,IAAI,CAAC,SAAS,CAAC,MAAM,OAAG,oCAAqB,CAAC,4BAA4B,IAAI,EAAE,CAAC;AAAA,EAC5F;AAAA,EACA,cAAc,OAAO;AAAA,IACpB,wBAAU,IAAI,CAAC,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,OAAG,oCAAqB,CAAC,iBAAiB,KAAK,MAAM;AAAA,IACtD,CAAC;AAAA,EACF;AAAA,EACA,YAAY,OAAO;AAAA,IAClB,yDAA0B,IAAI,CAAC,QAAQ;AAAA,MACtC,IAAI;AAAA,MACJ,OAAG,oCAAqB,CAAC,gBAAgB,IAAI,IAAI;AAAA,IAClD,CAAC;AAAA,EACF;AACD;AAGO,SAAS,sBAAsB,MAAqB;AAC1D,uBAAqB;AACtB;AAGO,SAAS,mCACf,WACgB;AAChB,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO;AAAA,IACN,OAAO,OAAO,OAAO,EAAE,GAAG,mBAAmB,MAAM,GAAG,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,IAC7E,OAAO,OAAO,OAAO,EAAE,GAAG,mBAAmB,MAAM,GAAG,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,IAC7E,YAAY,OAAO,OAAO,EAAE,GAAG,mBAAmB,WAAW,GAAG,EAAE,GAAG,WAAW,WAAW,CAAC;AAAA,IAC5F,cAAc,OAAO;AAAA,MACpB,EAAE,GAAG,mBAAmB,aAAa;AAAA,MACrC,EAAE,GAAG,WAAW,aAAa;AAAA,IAC9B;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'\nimport { useMemo } from 'react'\nimport { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'\nimport { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'\nimport { TLUiIconType, iconTypes } from './icon-types'\n\n/** @public */\nexport interface TLUiAssetUrls extends TLEditorAssetUrls {\n\ticons: Record<TLUiIconType | Exclude<string, TLUiIconType>, string>\n\ttranslations: Record<(typeof LANGUAGES)[number]['locale'], string>\n\tembedIcons: Partial<Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>>\n}\n\n/** @public */\nexport type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>\n\nexport let defaultUiAssetUrls: TLUiAssetUrls = {\n\t...defaultEditorAssetUrls,\n\ticons: Object.fromEntries(\n\t\ticonTypes.map((name) => [name, `${getDefaultCdnBaseUrl()}/icons/icon/0_merged.svg#${name}`])\n\t) as Record<TLUiIconType, string>,\n\ttranslations: Object.fromEntries(\n\t\tLANGUAGES.map((lang) => [\n\t\t\tlang.locale,\n\t\t\t`${getDefaultCdnBaseUrl()}/translations/${lang.locale}.json`,\n\t\t])\n\t) as Record<(typeof LANGUAGES)[number]['locale'], string>,\n\tembedIcons: Object.fromEntries(\n\t\tDEFAULT_EMBED_DEFINITIONS.map((def) => [\n\t\t\tdef.type,\n\t\t\t`${getDefaultCdnBaseUrl()}/embed-icons/${def.type}.png`,\n\t\t])\n\t) as Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>,\n}\n\n/** @internal */\nexport function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {\n\tdefaultUiAssetUrls = urls\n}\n\n/** @internal */\nexport function useDefaultUiAssetUrlsWithOverrides(\n\toverrides?: TLUiAssetUrlOverrides\n): TLUiAssetUrls {\n\treturn useMemo(() => {\n\t\tif (!overrides) return defaultUiAssetUrls\n\n\t\treturn {\n\t\t\tfonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),\n\t\t\ticons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),\n\t\t\tembedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),\n\t\t\ttranslations: Object.assign(\n\t\t\t\t{ ...defaultUiAssetUrls.translations },\n\t\t\t\t{ ...overrides?.translations }\n\t\t\t),\n\t\t}\n\t}, [overrides])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkE;AAClE,mBAAwB;AACxB,qCAA0C;AAC1C,uBAA0D;AAC1D,wBAAwC;AAYjC,IAAI,qBAAoC;AAAA,EAC9C,GAAG;AAAA,EACH,OAAO,OAAO;AAAA,IACb,4BAAU,IAAI,CAAC,SAAS,CAAC,MAAM,OAAG,oCAAqB,CAAC,4BAA4B,IAAI,EAAE,CAAC;AAAA,EAC5F;AAAA,EACA,cAAc,OAAO;AAAA,IACpB,wBAAU,IAAI,CAAC,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,OAAG,oCAAqB,CAAC,iBAAiB,KAAK,MAAM;AAAA,IACtD,CAAC;AAAA,EACF;AAAA,EACA,YAAY,OAAO;AAAA,IAClB,yDAA0B,IAAI,CAAC,QAAQ;AAAA,MACtC,IAAI;AAAA,MACJ,OAAG,oCAAqB,CAAC,gBAAgB,IAAI,IAAI;AAAA,IAClD,CAAC;AAAA,EACF;AACD;AAGO,SAAS,sBAAsB,MAAqB;AAC1D,uBAAqB;AACtB;AAGO,SAAS,mCACf,WACgB;AAChB,aAAO,sBAAQ,MAAM;AACpB,QAAI,CAAC,UAAW,QAAO;AAEvB,WAAO;AAAA,MACN,OAAO,OAAO,OAAO,EAAE,GAAG,mBAAmB,MAAM,GAAG,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,MAC7E,OAAO,OAAO,OAAO,EAAE,GAAG,mBAAmB,MAAM,GAAG,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,MAC7E,YAAY,OAAO,OAAO,EAAE,GAAG,mBAAmB,WAAW,GAAG,EAAE,GAAG,WAAW,WAAW,CAAC;AAAA,MAC5F,cAAc,OAAO;AAAA,QACpB,EAAE,GAAG,mBAAmB,aAAa;AAAA,QACrC,EAAE,GAAG,WAAW,aAAa;AAAA,MAC9B;AAAA,IACD;AAAA,EACD,GAAG,CAAC,SAAS,CAAC;AACf;",
   "names": []
 }

package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} RENAMED Viewed

@@ -16,14 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FollowingIndicator_exports = {};
-__export(FollowingIndicator_exports, {
-  FollowingIndicator: () => FollowingIndicator
+var DefaultFollowingIndicator_exports = {};
+__export(DefaultFollowingIndicator_exports, {
+  DefaultFollowingIndicator: () => DefaultFollowingIndicator
 });
-module.exports = __toCommonJS(FollowingIndicator_exports);
+module.exports = __toCommonJS(DefaultFollowingIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-function FollowingIndicator() {
+function DefaultFollowingIndicator() {
   const editor = (0, import_editor.useEditor)();
   const followingUserId = (0, import_editor.useValue)("follow", () => editor.getInstanceState().followingUserId, [
     editor
@@ -36,4 +36,4 @@ function FollowingIndicatorInner({ userId }) {
   if (!presence) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-following-indicator", style: { borderColor: presence.color } });
 }
-//# sourceMappingURL=FollowingIndicator.js.map
+//# sourceMappingURL=DefaultFollowingIndicator.js.map

package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/DefaultFollowingIndicator.tsx"],
+  "sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function DefaultFollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASQ;AATR,oBAAiD;AAG1C,SAAS,4BAA4B;AAC3C,QAAM,aAAS,yBAAU;AACzB,QAAM,sBAAkB,wBAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,4CAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,eAAW,2BAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,4CAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js CHANGED Viewed

@@ -160,7 +160,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "text-header",
           label: "tool.rich-text-header",
-          kbd: "cmd+shift+[[1-6]]",
+          kbd: "cmd+alt+[[1-6]]",
           onSelect: () => {
           }
         }
@@ -202,7 +202,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "a11y-select-next-shape-direction",
           label: "a11y.select-shape-direction",
-          kbd: "cmd+\u2191\u2192\u2193\u2190",
+          kbd: "cmd+[[\u2191\u2192\u2193\u2190]]",
           onSelect: () => {
           }
         }
@@ -212,7 +212,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "a11y-select-next-shape-container",
           label: "a11y.enter-leave-container",
-          kbd: "cmd+shift+\u2191\u2192",
+          kbd: "cmd+shift+[[\u2191\u2192]]",
           onSelect: () => {
           }
         }
@@ -222,7 +222,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "a11y-pan-camera",
           label: "a11y.pan-camera",
-          kbd: "[[Space]]+\u2191\u2192\u2193\u2190",
+          kbd: "[[Space]]+[[\u2191\u2192\u2193\u2190]]",
           onSelect: () => {
           }
         }
@@ -252,7 +252,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "a11y-move-shape",
           label: "a11y.move-shape",
-          kbd: "\u2191\u2192\u2193\u2190",
+          kbd: "[[\u2191\u2192\u2193\u2190]]",
           onSelect: () => {
           }
         }
@@ -262,7 +262,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "a11y-move-shape-faster",
           label: "a11y.move-shape-faster",
-          kbd: "shift+\u2191\u2192\u2193\u2190",
+          kbd: "shift+[[\u2191\u2192\u2193\u2190]]",
           onSelect: () => {
           }
         }

package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx"],
-  "sourcesContent": ["import { useShowCollaborationUi } from '../../hooks/useCollaborationStatus'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuToolItem } from '../primitives/menus/TldrawUiMenuToolItem'\n\n/** @public @react */\nexport function DefaultKeyboardShortcutsDialogContent() {\n\tconst showCollaborationUi = useShowCollaborationUi()\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.tools\" id=\"tools\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-tool-lock\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"select\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"draw\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"eraser\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"hand\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"rectangle\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"ellipse\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"arrow\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"line\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"text\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"frame\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"note\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"laser\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"pointer-down\"\n\t\t\t\t\tlabel=\"tool.pointer-down\"\n\t\t\t\t\tkbd=\",\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.preferences\" id=\"preferences\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-dark-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-focus-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-grid\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.edit\" id=\"edit\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"cut\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"paste\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"select-all\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"delete\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"duplicate\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.view\" id=\"view\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-100\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-fit\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-selection\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.transform\" id=\"transform\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"group\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"ungroup\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.text-formatting\" id=\"text\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bold\"\n\t\t\t\t\tlabel=\"tool.rich-text-bold\"\n\t\t\t\t\tkbd=\"cmd+b\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-italic\"\n\t\t\t\t\tlabel=\"tool.rich-text-italic\"\n\t\t\t\t\tkbd=\"cmd+i\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-code\"\n\t\t\t\t\tlabel=\"tool.rich-text-code\"\n\t\t\t\t\tkbd=\"cmd+e\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-highlight\"\n\t\t\t\t\tlabel=\"tool.rich-text-highlight\"\n\t\t\t\t\tkbd=\"cmd+shift+h\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-strikethrough\"\n\t\t\t\t\tlabel=\"tool.rich-text-strikethrough\"\n\t\t\t\t\tkbd=\"cmd+shift+s\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-link\"\n\t\t\t\t\tlabel=\"tool.rich-text-link\"\n\t\t\t\t\tkbd=\"cmd+shift+k\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-header\"\n\t\t\t\t\tlabel=\"tool.rich-text-header\"\n\t\t\t\t\tkbd=\"cmd+shift+[[1-6]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-orderedList\"\n\t\t\t\t\tlabel=\"tool.rich-text-orderedList\"\n\t\t\t\t\tkbd=\"cmd+shift+7\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bulletedlist\"\n\t\t\t\t\tlabel=\"tool.rich-text-bulletList\"\n\t\t\t\t\tkbd=\"cmd+shift+8\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.a11y\" id=\"a11y\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape\"\n\t\t\t\t\tlabel=\"a11y.select-shape\"\n\t\t\t\t\tkbd=\"[[Tab]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-direction\"\n\t\t\t\t\tlabel=\"a11y.select-shape-direction\"\n\t\t\t\t\tkbd=\"cmd+\u2191\u2192\u2193\u2190\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-container\"\n\t\t\t\t\tlabel=\"a11y.enter-leave-container\"\n\t\t\t\t\tkbd=\"cmd+shift+\u2191\u2192\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-pan-camera\"\n\t\t\t\t\tlabel=\"a11y.pan-camera\"\n\t\t\t\t\tkbd=\"[[Space]]+\u2191\u2192\u2193\u2190\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"adjust-shape-styles\"\n\t\t\t\t\tlabel=\"a11y.adjust-shape-styles\"\n\t\t\t\t\tkbd=\"cmd+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"open-context-menu\"\n\t\t\t\t\tlabel=\"a11y.open-context-menu\"\n\t\t\t\t\tkbd=\"cmd+shift+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape\"\n\t\t\t\t\tlabel=\"a11y.move-shape\"\n\t\t\t\t\tkbd=\"\u2191\u2192\u2193\u2190\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape-faster\"\n\t\t\t\t\tlabel=\"a11y.move-shape-faster\"\n\t\t\t\t\tkbd=\"shift+\u2191\u2192\u2193\u2190\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw\"\n\t\t\t\t\tkbd=\"shift+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw\"\n\t\t\t\t\tkbd=\"shift+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"enlarge-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"shrink-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"a11y-repeat-shape-announce\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-open-keyboard-shortcuts\"\n\t\t\t\t\tlabel=\"a11y.open-keyboard-shortcuts\"\n\t\t\t\t\tkbd=\"cmd+alt+/\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t{showCollaborationUi && (\n\t\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.collaboration\" id=\"collaboration\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "sourcesContent": ["import { useShowCollaborationUi } from '../../hooks/useCollaborationStatus'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuToolItem } from '../primitives/menus/TldrawUiMenuToolItem'\n\n/** @public @react */\nexport function DefaultKeyboardShortcutsDialogContent() {\n\tconst showCollaborationUi = useShowCollaborationUi()\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.tools\" id=\"tools\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-tool-lock\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"select\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"draw\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"eraser\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"hand\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"rectangle\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"ellipse\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"arrow\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"line\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"text\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"frame\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"note\" />\n\t\t\t\t<TldrawUiMenuToolItem toolId=\"laser\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"pointer-down\"\n\t\t\t\t\tlabel=\"tool.pointer-down\"\n\t\t\t\t\tkbd=\",\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.preferences\" id=\"preferences\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-dark-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-focus-mode\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"toggle-grid\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.edit\" id=\"edit\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"cut\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"paste\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"select-all\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"delete\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"duplicate\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.view\" id=\"view\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-100\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-fit\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-to-selection\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.transform\" id=\"transform\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"group\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"ungroup\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.text-formatting\" id=\"text\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bold\"\n\t\t\t\t\tlabel=\"tool.rich-text-bold\"\n\t\t\t\t\tkbd=\"cmd+b\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-italic\"\n\t\t\t\t\tlabel=\"tool.rich-text-italic\"\n\t\t\t\t\tkbd=\"cmd+i\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-code\"\n\t\t\t\t\tlabel=\"tool.rich-text-code\"\n\t\t\t\t\tkbd=\"cmd+e\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-highlight\"\n\t\t\t\t\tlabel=\"tool.rich-text-highlight\"\n\t\t\t\t\tkbd=\"cmd+shift+h\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-strikethrough\"\n\t\t\t\t\tlabel=\"tool.rich-text-strikethrough\"\n\t\t\t\t\tkbd=\"cmd+shift+s\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-link\"\n\t\t\t\t\tlabel=\"tool.rich-text-link\"\n\t\t\t\t\tkbd=\"cmd+shift+k\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-header\"\n\t\t\t\t\tlabel=\"tool.rich-text-header\"\n\t\t\t\t\tkbd=\"cmd+alt+[[1-6]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-orderedList\"\n\t\t\t\t\tlabel=\"tool.rich-text-orderedList\"\n\t\t\t\t\tkbd=\"cmd+shift+7\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"text-bulletedlist\"\n\t\t\t\t\tlabel=\"tool.rich-text-bulletList\"\n\t\t\t\t\tkbd=\"cmd+shift+8\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.a11y\" id=\"a11y\">\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape\"\n\t\t\t\t\tlabel=\"a11y.select-shape\"\n\t\t\t\t\tkbd=\"[[Tab]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-direction\"\n\t\t\t\t\tlabel=\"a11y.select-shape-direction\"\n\t\t\t\t\tkbd=\"cmd+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-select-next-shape-container\"\n\t\t\t\t\tlabel=\"a11y.enter-leave-container\"\n\t\t\t\t\tkbd=\"cmd+shift+[[\u2191\u2192]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-pan-camera\"\n\t\t\t\t\tlabel=\"a11y.pan-camera\"\n\t\t\t\t\tkbd=\"[[Space]]+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"adjust-shape-styles\"\n\t\t\t\t\tlabel=\"a11y.adjust-shape-styles\"\n\t\t\t\t\tkbd=\"cmd+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"open-context-menu\"\n\t\t\t\t\tlabel=\"a11y.open-context-menu\"\n\t\t\t\t\tkbd=\"cmd+shift+[[Enter]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape\"\n\t\t\t\t\tlabel=\"a11y.move-shape\"\n\t\t\t\t\tkbd=\"[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-move-shape-faster\"\n\t\t\t\t\tlabel=\"a11y.move-shape-faster\"\n\t\t\t\t\tkbd=\"shift+[[\u2191\u2192\u2193\u2190]]\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw\"\n\t\t\t\t\tkbd=\"shift+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-cw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-cw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE65\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw\"\n\t\t\t\t\tkbd=\"shift+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-rotate-shape-ccw-fine\"\n\t\t\t\t\tlabel=\"a11y.rotate-shape-ccw-fine\"\n\t\t\t\t\tkbd=\"shift+alt+\uFE64\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"enlarge-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"shrink-shapes\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"a11y-repeat-shape-announce\" />\n\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\tid=\"a11y-open-keyboard-shortcuts\"\n\t\t\t\t\tlabel=\"a11y.open-keyboard-shortcuts\"\n\t\t\t\t\tkbd=\"cmd+alt+/\"\n\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t/* do nothing */\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t{showCollaborationUi && (\n\t\t\t\t<TldrawUiMenuGroup label=\"shortcuts-dialog.collaboration\" id=\"collaboration\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js CHANGED Viewed

@@ -105,10 +105,10 @@ class MinimapManager {
   _getColors() {
     const style = getComputedStyle(this.editor.getContainer());
     return {
-      shapeFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-text-3").trim()),
-      selectFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-selected").trim()),
-      viewportFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-muted-1").trim()),
-      background: (0, import_getRgba.getRgba)(style.getPropertyValue("--color-low").trim())
+      shapeFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-text-3").trim()),
+      selectFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-selected").trim()),
+      viewportFill: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-muted-1").trim()),
+      background: (0, import_getRgba.getRgba)(style.getPropertyValue("--tl-color-low").trim())
     };
   }
   // this should be called after dark/light mode changes have propagated to the dom

package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Minimap/MinimapManager.ts"],
-  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tComputedCache,\n\tEditor,\n\tTLShape,\n\tVec,\n\tatom,\n\tbind,\n\tclamp,\n\tcomputed,\n\treact,\n\ttlenv,\n\tuniqueId,\n} from '@tldraw/editor'\nimport { getRgba } from './getRgba'\nimport { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'\nimport { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'\n\nexport class MinimapManager {\n\tdisposables = [] as (() => void)[]\n\n\t@bind\n\tclose() {\n\t\treturn this.disposables.forEach((d) => d())\n\t}\n\tgl: ReturnType<typeof setupWebGl>\n\tshapeGeometryCache: ComputedCache<Float32Array | null, TLShape>\n\tconstructor(\n\t\tpublic editor: Editor,\n\t\tpublic readonly elem: HTMLCanvasElement,\n\t\tpublic readonly container: HTMLElement\n\t) {\n\t\tthis.gl = setupWebGl(elem)\n\t\tthis.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {\n\t\t\tconst bounds = editor.getShapeMaskedPageBounds(r.id)\n\t\t\tif (!bounds) return null\n\t\t\tconst arr = new Float32Array(12)\n\t\t\trectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)\n\t\t\treturn arr\n\t\t})\n\t\tthis.colors = this._getColors()\n\t\tthis.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))\n\t}\n\n\tprivate _getColors() {\n\t\tconst style = getComputedStyle(this.editor.getContainer())\n\n\t\treturn {\n\t\t\tshapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),\n\t\t\tselectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),\n\t\t\tviewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),\n\t\t\tbackground: getRgba(style.getPropertyValue('--tl-color-low').trim()),\n\t\t}\n\t}\n\n\tprivate colors: ReturnType<MinimapManager['_getColors']>\n\t// this should be called after dark/light mode changes have propagated to the dom\n\tupdateColors() {\n\t\tthis.colors = this._getColors()\n\t}\n\n\treadonly id = uniqueId()\n\t@computed\n\tgetDpr() {\n\t\treturn this.editor.getInstanceState().devicePixelRatio\n\t}\n\n\t@computed\n\tgetContentPageBounds() {\n\t\tconst viewportPageBounds = this.editor.getViewportPageBounds()\n\t\tconst commonShapeBounds = this.editor.getCurrentPageBounds()\n\t\treturn commonShapeBounds\n\t\t\t? Box.Expand(commonShapeBounds, viewportPageBounds)\n\t\t\t: viewportPageBounds\n\t}\n\n\t@computed\n\tgetContentScreenBounds() {\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\t\tconst topLeft = this.editor.pageToScreen(contentPageBounds.point)\n\t\tconst bottomRight = this.editor.pageToScreen(\n\t\t\tnew Vec(contentPageBounds.maxX, contentPageBounds.maxY)\n\t\t)\n\t\treturn new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)\n\t}\n\n\tprivate _getCanvasBoundingRect() {\n\t\tconst { x, y, width, height } = this.elem.getBoundingClientRect()\n\t\treturn new Box(x, y, width, height)\n\t}\n\n\tprivate readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())\n\n\tgetCanvasScreenBounds() {\n\t\treturn this.canvasBoundingClientRect.get()\n\t}\n\n\tprivate _listenForCanvasResize() {\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tconst rect = this._getCanvasBoundingRect()\n\t\t\tthis.canvasBoundingClientRect.set(rect)\n\t\t})\n\t\tobserver.observe(this.elem)\n\t\tobserver.observe(this.container)\n\t\treturn () => observer.disconnect()\n\t}\n\n\t@computed\n\tgetCanvasSize() {\n\t\tconst rect = this.canvasBoundingClientRect.get()\n\t\tconst dpr = this.getDpr()\n\t\treturn new Vec(rect.width * dpr, rect.height * dpr)\n\t}\n\n\t@computed\n\tgetCanvasClientPosition() {\n\t\treturn this.canvasBoundingClientRect.get().point\n\t}\n\n\toriginPagePoint = new Vec()\n\toriginPageCenter = new Vec()\n\n\tisInViewport = false\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\t@computed getCanvasPageBounds() {\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\t\tconst contentPageBounds = this.getContentPageBounds()\n\n\t\tconst aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height\n\n\t\tlet targetWidth = contentPageBounds.width\n\t\tlet targetHeight = targetWidth / aspectRatio\n\t\tif (targetHeight < contentPageBounds.height) {\n\t\t\ttargetHeight = contentPageBounds.height\n\t\t\ttargetWidth = targetHeight * aspectRatio\n\t\t}\n\n\t\tconst box = new Box(0, 0, targetWidth, targetHeight)\n\t\tbox.center = contentPageBounds.center\n\t\treturn box\n\t}\n\n\t@computed getZoom() {\n\t\treturn this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width\n\t}\n\n\t@computed getCanvasPageBoundsArray() {\n\t\tconst { x, y, w, h } = this.getCanvasPageBounds()\n\t\treturn new Float32Array([x, y, w, h])\n\t}\n\n\tgetMinimapPagePoint(clientX: number, clientY: number) {\n\t\tconst canvasPageBounds = this.getCanvasPageBounds()\n\t\tconst canvasScreenBounds = this.getCanvasScreenBounds()\n\n\t\t// first offset the canvas position\n\t\tlet x = clientX - canvasScreenBounds.x\n\t\tlet y = clientY - canvasScreenBounds.y\n\n\t\t// then multiply by the ratio between the page and screen bounds\n\t\tx *= canvasPageBounds.width / canvasScreenBounds.width\n\t\ty *= canvasPageBounds.height / canvasScreenBounds.height\n\n\t\t// then add the canvas page bounds' offset\n\t\tx += canvasPageBounds.minX\n\t\ty += canvasPageBounds.minY\n\n\t\treturn new Vec(x, y, 1)\n\t}\n\n\tminimapScreenPointToPagePoint(x: number, y: number, shiftKey = false, clampToBounds = false) {\n\t\tconst { editor } = this\n\t\tconst vpPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getMinimapPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()\n\n\t\t\tconst minX = shapesPageBounds.minX - vpPageBounds.width / 2\n\t\t\tconst maxX = shapesPageBounds.maxX + vpPageBounds.width / 2\n\t\t\tconst minY = shapesPageBounds.minY - vpPageBounds.height / 2\n\t\t\tconst maxY = shapesPageBounds.maxY + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tpx += (lx - rx) / 2\n\t\t\tpy += (ly - ry) / 2\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec(px, py)\n\t}\n\n\t@bind\n\trender() {\n\t\t// make sure we update when dark mode switches\n\t\tconst context = this.gl.context\n\t\tconst canvasSize = this.getCanvasSize()\n\n\t\tthis.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())\n\n\t\tthis.elem.width = canvasSize.x\n\t\tthis.elem.height = canvasSize.y\n\t\tcontext.viewport(0, 0, canvasSize.x, canvasSize.y)\n\n\t\t// this affects which color transparent shapes are blended with\n\t\t// during rendering. If we were to invert this any shapes narrower\n\t\t// than 1 px in screen space would have much lower contrast. e.g.\n\t\t// draw shapes on a large canvas.\n\t\tcontext.clearColor(\n\t\t\tthis.colors.background[0],\n\t\t\tthis.colors.background[1],\n\t\t\tthis.colors.background[2],\n\t\t\t1\n\t\t)\n\n\t\tcontext.clear(context.COLOR_BUFFER_BIT)\n\n\t\tconst selectedShapes = new Set(this.editor.getSelectedShapeIds())\n\n\t\tconst colors = this.colors\n\t\tlet selectedShapeOffset = 0\n\t\tlet unselectedShapeOffset = 0\n\n\t\tconst ids = this.editor.getCurrentPageShapeIdsSorted()\n\n\t\tfor (let i = 0, len = ids.length; i < len; i++) {\n\t\t\tconst shapeId = ids[i]\n\t\t\tconst geometry = this.shapeGeometryCache.get(shapeId)\n\t\t\tif (!geometry) continue\n\n\t\t\tconst len = geometry.length\n\n\t\t\tif (selectedShapes.has(shapeId)) {\n\t\t\t\tappendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)\n\t\t\t\tselectedShapeOffset += len\n\t\t\t} else {\n\t\t\t\tappendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)\n\t\t\t\tunselectedShapeOffset += len\n\t\t\t}\n\t\t}\n\n\t\tthis.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)\n\t\tthis.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)\n\n\t\tthis.drawViewport()\n\t\tthis.drawCollaborators()\n\t}\n\n\tprivate drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {\n\t\tthis.gl.prepareTriangles(stuff, len)\n\t\tthis.gl.setFillColor(color)\n\t\tthis.gl.drawTriangles(len)\n\t}\n\n\tprivate drawViewport() {\n\t\tconst viewport = this.editor.getViewportPageBounds()\n\t\tconst len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())\n\n\t\tthis.gl.prepareTriangles(this.gl.viewport, len)\n\t\tthis.gl.setFillColor(this.colors.viewportFill)\n\t\tthis.gl.drawTrianglesTransparently(len)\n\t\tif (tlenv.isSafari) {\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t\tthis.gl.drawTrianglesTransparently(len)\n\t\t}\n\t}\n\n\tdrawCollaborators() {\n\t\tconst collaborators = this.editor.getCollaboratorsOnCurrentPage()\n\t\tif (!collaborators.length) return\n\n\t\t// just draw a little circle for each collaborator\n\t\tconst numSegmentsPerCircle = 20\n\t\tconst dataSizePerCircle = numSegmentsPerCircle * 6\n\t\tconst totalSize = dataSizePerCircle * collaborators.length\n\n\t\t// expand vertex array if needed\n\t\tif (this.gl.collaborators.vertices.length < totalSize) {\n\t\t\tthis.gl.collaborators.vertices = new Float32Array(totalSize)\n\t\t}\n\n\t\tconst vertices = this.gl.collaborators.vertices\n\t\tlet offset = 0\n\t\tconst zoom = this.getZoom()\n\t\tfor (const { cursor } of collaborators) {\n\t\t\tif (!cursor) continue\n\t\t\tpie(vertices, {\n\t\t\t\tcenter: Vec.From(cursor),\n\t\t\t\tradius: 3 * zoom,\n\t\t\t\toffset,\n\t\t\t\tnumArcSegments: numSegmentsPerCircle,\n\t\t\t})\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\n\t\tthis.gl.prepareTriangles(this.gl.collaborators, totalSize)\n\n\t\toffset = 0\n\t\tfor (const { color } of collaborators) {\n\t\t\tthis.gl.setFillColor(getRgba(color))\n\t\t\tthis.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)\n\t\t\toffset += dataSizePerCircle\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["len"]
 }

package/dist-cjs/lib/ui/components/MobileStylePanel.js CHANGED Viewed

@@ -61,7 +61,7 @@ function MobileStylePanel() {
         type: "tool",
         "data-testid": "mobile-styles.button",
         style: {
-          color: disableStylePanel ? "var(--color-muted-1)" : currentColor
+          color: disableStylePanel ? "var(--tl-color-muted-1)" : currentColor
         },
         title: msg("style-panel.title"),
         disabled: disableStylePanel,

package/dist-cjs/lib/ui/components/MobileStylePanel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/MobileStylePanel.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useRelevantStyles } from '../hooks/useRelevantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from './primitives/TldrawUiPopover'\nimport { useTldrawUiOrientation } from './primitives/layout'\n\n/** @public @react */\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst { orientation } = useTldrawUiOrientation()\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })\n\tconst currentColor =\n\t\tcolor?.type === 'shared'\n\t\t\t? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')\n\t\t\t: getColorValue(theme, 'black', 'solid')\n\n\tconst disableStylePanel = useValue(\n\t\t'disable style panel',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst { StylePanel } = useTldrawUiComponents()\n\tif (!StylePanel) return null\n\n\treturn (\n\t\t<TldrawUiPopover id=\"mobile style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\tdata-testid=\"mobile-styles.button\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t\tdisabled={disableStylePanel}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align=\"end\">\n\t\t\t\t{StylePanel && <StylePanel isMobile />}\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDE;AArDF,oBAOO;AACP,mBAA4B;AAC5B,wBAAsC;AACtC,+BAAkC;AAClC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,oBAAuC;AAGhC,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,EAAE,YAAY,QAAI,sCAAuB;AAC/C,QAAM,qBAAiB,4CAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,+BAAiB;AACnD,QAAM,YAAQ,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,eACL,OAAO,SAAS,eACb,6BAAc,OAAO,MAAM,OAA8B,OAAO,QAChE,6BAAc,OAAO,SAAS,OAAO;AAEzC,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,6BAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,QAAI,yCAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,6CAAC,0CAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,yBAAyB;AAAA,QACrD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAC9B,UAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU;AAAA;AAAA,QACxE;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,iDAAuB,MAAM,gBAAgB,eAAe,QAAQ,SAAS,OAAM,OAClF,wBAAc,4CAAC,cAAW,UAAQ,MAAC,GACrC;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetColorValue,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useRelevantStyles } from '../hooks/useRelevantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from './primitives/TldrawUiPopover'\nimport { useTldrawUiOrientation } from './primitives/layout'\n\n/** @public @react */\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst { orientation } = useTldrawUiOrientation()\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })\n\tconst currentColor =\n\t\tcolor?.type === 'shared'\n\t\t\t? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')\n\t\t\t: getColorValue(theme, 'black', 'solid')\n\n\tconst disableStylePanel = useValue(\n\t\t'disable style panel',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst { StylePanel } = useTldrawUiComponents()\n\tif (!StylePanel) return null\n\n\treturn (\n\t\t<TldrawUiPopover id=\"mobile style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\tdata-testid=\"mobile-styles.button\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t\tdisabled={disableStylePanel}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align=\"end\">\n\t\t\t\t{StylePanel && <StylePanel isMobile />}\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDE;AArDF,oBAOO;AACP,mBAA4B;AAC5B,wBAAsC;AACtC,+BAAkC;AAClC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,oBAAuC;AAGhC,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,EAAE,YAAY,QAAI,sCAAuB;AAC/C,QAAM,qBAAiB,4CAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,+BAAiB;AACnD,QAAM,YAAQ,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,eACL,OAAO,SAAS,eACb,6BAAc,OAAO,MAAM,OAA8B,OAAO,QAChE,6BAAc,OAAO,SAAS,OAAO;AAEzC,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,6BAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,QAAI,yCAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,6CAAC,0CAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,4BAA4B;AAAA,QACxD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAC9B,UAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU;AAAA;AAAA,QACxE;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,iDAAuB,MAAM,gBAAgB,eAAe,QAAQ,SAAS,OAAM,OAClF,wBAAc,4CAAC,cAAW,UAAQ,MAAC,GACrC;AAAA,KACD;AAEF;",
   "names": []
 }

package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js CHANGED Viewed

@@ -83,7 +83,7 @@ function DropdownPickerInner({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: labelStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: items.length > 4 ? "grid" : "horizontal", label: labelStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_TldrawUiToolbar.TldrawUiToolbarButton,
             {

package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.tsx"],
-  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\ninterface DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEI;AAjEJ,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAY,QAAO,OAAO,UAC1C,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\ninterface DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEI;AAjEJ,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
   "names": []
 }

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js CHANGED Viewed

@@ -220,7 +220,7 @@ const DefaultImageToolbarContent = (0, import_editor.track)(function DefaultImag
           type: "icon",
           onClick: onManipulatingEnd,
           "data-testid": "tool.image-confirm",
-          style: { borderLeft: "1px solid var(--color-divider)", marginLeft: "2px" },
+          style: { borderLeft: "1px solid var(--tl-color-divider)", marginLeft: "2px" },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "check" })
         }
       )

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx"],
-  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiButton title={msg('tool.aspect-ratio')} type=\"icon\">\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.replace-media')} onClick={handleImageReplace}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.image-crop')} onClick={onManipulatingStart}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiButton title={msg('tool.aspect-ratio')} type=\"icon\">\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.replace-media')} onClick={handleImageReplace}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.image-crop')} onClick={onManipulatingStart}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["DefaultImageToolbarContent", "zoom"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js CHANGED Viewed

@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -58,6 +59,7 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = (0, import_react.useCallback)(() => {
+    import_TldrawUiTooltip.tooltipManager.hideAllTooltips();
     onHistoryMark("click slider");
   }, [onHistoryMark]);
   const handleKeyEvent = (0, import_react.useCallback)((event) => {
@@ -65,7 +67,8 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const titleAndLabel = title + " \u2014 " + msg(label);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_radix_ui.Slider.Root,
     {
       "data-testid": testId,
@@ -79,7 +82,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -88,7 +90,7 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
             "aria-valuemin": (min ?? 0) * ariaValueModifier,
             "aria-valuenow": value * ariaValueModifier,
             "aria-valuemax": steps * ariaValueModifier,
-            "aria-label": title + " \u2014 " + msg(label),
+            "aria-label": titleAndLabel,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,
@@ -97,6 +99,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 //# sourceMappingURL=TldrawUiSlider.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\taria-label={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEG;AAlEH,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAgBxB,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY,QAAQ,aAAQ,IAAI,KAA2B;AAAA,YAC3D,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\tconst titleAndLabel = title + ' \u2014 ' + msg(label as TLUiTranslationKey)\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEI;AAvEJ,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAC/B,6BAAgD;AAgBzC,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,0CAAe,gBAAgB;AAC/B,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB,QAAQ,aAAQ,IAAI,KAA2B;AAErE,SACC,4CAAC,SAAI,WAAU,0BACd,sDAAC,0CAAgB,SAAS,eACzB;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["React", "value", "_Slider"]
 }