npm - tldraw - Versions diffs - 3.16.0-next.34fddf633325 → 3.16.0-next.6611943ca24a - Mend

tldraw 3.16.0-next.34fddf633325 → 3.16.0-next.6611943ca24a

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 (320) hide show

package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ import { useBreakpoint } from "../context/breakpoints.mjs";
 import { useTldrawUiComponents } from "../context/components.mjs";
 import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiToolbar } from "./primitives/TldrawUiToolbar.mjs";
+import { TldrawUiRow } from "./primitives/layout.mjs";
 const DefaultMenuPanel = memo(function MenuPanel() {
   const breakpoint = useBreakpoint();
   const msg = useTranslation();
@@ -18,10 +19,10 @@ const DefaultMenuPanel = memo(function MenuPanel() {
   ]);
   const showQuickActions = editor.options.actionShortcutsLocation === "menu" ? true : editor.options.actionShortcutsLocation === "toolbar" ? false : breakpoint >= PORTRAIT_BREAKPOINT.TABLET;
   if (!MainMenu && !PageMenu && !showQuickActions) return null;
-  return /* @__PURE__ */ jsx("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
+  return /* @__PURE__ */ jsx("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ jsxs(TldrawUiRow, { children: [
     MainMenu && /* @__PURE__ */ jsx(MainMenu, {}),
     PageMenu && !isSinglePageMode && /* @__PURE__ */ jsx(PageMenu, {}),
-    showQuickActions ? /* @__PURE__ */ jsxs(TldrawUiToolbar, { className: "tlui-buttons__horizontal", label: msg("actions-menu.title"), children: [
+    showQuickActions ? /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("actions-menu.title"), children: [
       QuickActions && /* @__PURE__ */ jsx(QuickActions, {}),
       ActionsMenu && /* @__PURE__ */ jsx(ActionsMenu, {})
     ] }) : null

package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/DefaultMenuPanel.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../constants'\nimport { useBreakpoint } from '../context/breakpoints'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbar } from './primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultMenuPanel = memo(function MenuPanel() {\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents()\n\n\tconst editor = useEditor()\n\tconst isSinglePageMode = useValue('isSinglePageMode', () => editor.options.maxPages <= 1, [\n\t\teditor,\n\t])\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? true\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? false\n\t\t\t\t: breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\n\tif (!MainMenu && !PageMenu && !showQuickActions) return null\n\n\treturn (\n\t\t<nav ref={ref} className=\"tlui-menu-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t{MainMenu && <MainMenu />}\n\t\t\t\t{PageMenu && !isSinglePageMode && <PageMenu />}\n\t\t\t\t{showQuickActions ? (\n\t\t\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('actions-menu.title')}>\n\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</nav>\n\t)\n})\n"],
-  "mappings": "AAmCiB,cAGZ,YAHY;AAnCjB,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,SAAS,MAAM,cAAc;AAC7B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAGzB,MAAM,mBAAmB,KAAK,SAAS,YAAY;AACzD,QAAM,aAAa,cAAc;AACjC,QAAM,MAAM,eAAe;AAE3B,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,IAAI,sBAAsB;AAEhF,QAAM,SAAS,UAAU;AACzB,QAAM,mBAAmB,SAAS,oBAAoB,MAAM,OAAO,QAAQ,YAAY,GAAG;AAAA,IACzF;AAAA,EACD,CAAC;AAED,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,OACA,OAAO,QAAQ,4BAA4B,YAC1C,QACA,cAAc,oBAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,oBAAC,SAAI,KAAU,WAAU,kBACxB,+BAAC,SAAI,WAAU,4BACb;AAAA,gBAAY,oBAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,oBAAC,YAAS;AAAA,IAC3C,mBACA,qBAAC,mBAAgB,WAAU,4BAA2B,OAAO,IAAI,oBAAoB,GACnF;AAAA,sBAAgB,oBAAC,gBAAa;AAAA,MAC9B,eAAe,oBAAC,eAAY;AAAA,OAC9B,IACG;AAAA,KACL,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../constants'\nimport { useBreakpoint } from '../context/breakpoints'\nimport { useTldrawUiComponents } from '../context/components'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbar } from './primitives/TldrawUiToolbar'\nimport { TldrawUiRow } from './primitives/layout'\n\n/** @public @react */\nexport const DefaultMenuPanel = memo(function MenuPanel() {\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents()\n\n\tconst editor = useEditor()\n\tconst isSinglePageMode = useValue('isSinglePageMode', () => editor.options.maxPages <= 1, [\n\t\teditor,\n\t])\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? true\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? false\n\t\t\t\t: breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\n\tif (!MainMenu && !PageMenu && !showQuickActions) return null\n\n\treturn (\n\t\t<nav ref={ref} className=\"tlui-menu-zone\">\n\t\t\t<TldrawUiRow>\n\t\t\t\t{MainMenu && <MainMenu />}\n\t\t\t\t{PageMenu && !isSinglePageMode && <PageMenu />}\n\t\t\t\t{showQuickActions ? (\n\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('actions-menu.title')}>\n\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t) : null}\n\t\t\t</TldrawUiRow>\n\t\t</nav>\n\t)\n})\n"],
+  "mappings": "AAoCiB,cAGZ,YAHY;AApCjB,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,SAAS,MAAM,cAAc;AAC7B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAGrB,MAAM,mBAAmB,KAAK,SAAS,YAAY;AACzD,QAAM,aAAa,cAAc;AACjC,QAAM,MAAM,eAAe;AAE3B,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,IAAI,sBAAsB;AAEhF,QAAM,SAAS,UAAU;AACzB,QAAM,mBAAmB,SAAS,oBAAoB,MAAM,OAAO,QAAQ,YAAY,GAAG;AAAA,IACzF;AAAA,EACD,CAAC;AAED,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,OACA,OAAO,QAAQ,4BAA4B,YAC1C,QACA,cAAc,oBAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,oBAAC,SAAI,KAAU,WAAU,kBACxB,+BAAC,eACC;AAAA,gBAAY,oBAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,oBAAC,YAAS;AAAA,IAC3C,mBACA,qBAAC,mBAAgB,aAAY,cAAa,OAAO,IAAI,oBAAoB,GACvE;AAAA,sBAAgB,oBAAC,gBAAa;AAAA,MAC9B,eAAe,oBAAC,eAAY;AAAA,OAC9B,IACG;AAAA,KACL,GACD;AAEF,CAAC;",
   "names": []
 }

package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs CHANGED Viewed

@@ -137,7 +137,7 @@ function DefaultKeyboardShortcutsDialogContent() {
         {
           id: "text-header",
           label: "tool.rich-text-header",
-          kbd: "cmd+shift+[[1-6]]",
+          kbd: "cmd+alt+[[1-6]]",
           onSelect: () => {
           }
         }

package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.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-esm/lib/ui/components/Minimap/MinimapManager.mjs CHANGED Viewed

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

package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.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-esm/lib/ui/components/MobileStylePanel.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   DefaultColorStyle,
+  getColorValue,
   getDefaultColorTheme,
   useEditor,
   useValue
@@ -16,13 +17,15 @@ import {
   TldrawUiPopoverContent,
   TldrawUiPopoverTrigger
 } from "./primitives/TldrawUiPopover.mjs";
+import { useTldrawUiOrientation } from "./primitives/layout.mjs";
 function MobileStylePanel() {
   const editor = useEditor();
   const msg = useTranslation();
+  const { orientation } = useTldrawUiOrientation();
   const relevantStyles = useRelevantStyles();
   const color = relevantStyles?.get(DefaultColorStyle);
   const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() });
-  const currentColor = (color?.type === "shared" ? theme[color.value] : theme.black).solid;
+  const currentColor = color?.type === "shared" ? getColorValue(theme, color.value, "solid") : getColorValue(theme, "black", "solid");
   const disableStylePanel = useValue(
     "disable style panel",
     () => editor.isInAny("hand", "zoom", "eraser", "laser"),
@@ -45,7 +48,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,
@@ -57,7 +60,7 @@ function MobileStylePanel() {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "top", align: "end", children: StylePanel && /* @__PURE__ */ jsx(StylePanel, { isMobile: true }) })
+    /* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: orientation === "horizontal" ? "top" : "right", align: "end", children: StylePanel && /* @__PURE__ */ jsx(StylePanel, { isMobile: true }) })
   ] });
 }
 export {

package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/MobileStylePanel.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\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'\n\n/** @public @react */\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\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' ? theme[color.value as TLDefaultColorStyle] : theme.black\n\t).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=\"top\" align=\"end\">\n\t\t\t\t{StylePanel && <StylePanel isMobile />}\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n"],
-  "mappings": "AAkDE,SAWG,KAXH;AAlDF;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAGA,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,iBAAiB;AACnD,QAAM,QAAQ,qBAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,gBACL,OAAO,SAAS,WAAW,MAAM,MAAM,KAA4B,IAAI,MAAM,OAC5E;AAEF,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,yBAAyB;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,IAAI,sBAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,qBAAC,mBAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,wBAAC,0BACA;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,oBAAC,0BAAuB,MAAK,OAAM,OAAM,OACvC,wBAAc,oBAAC,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": "AAqDE,SAWG,KAXH;AArDF;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,8BAA8B;AAGhC,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,EAAE,YAAY,IAAI,uBAAuB;AAC/C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,QAAQ,gBAAgB,IAAI,iBAAiB;AACnD,QAAM,QAAQ,qBAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,eACL,OAAO,SAAS,WACb,cAAc,OAAO,MAAM,OAA8B,OAAO,IAChE,cAAc,OAAO,SAAS,OAAO;AAEzC,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,yBAAyB;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,IAAI,sBAAsB;AAC7C,MAAI,CAAC,WAAY,QAAO;AAExB,SACC,qBAAC,mBAAgB,IAAG,qBAAoB,cAAc,wBACrD;AAAA,wBAAC,0BACA;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,oBAAC,0BAAuB,MAAM,gBAAgB,eAAe,QAAQ,SAAS,OAAM,OAClF,wBAAc,oBAAC,cAAW,UAAQ,MAAC,GACrC;AAAA,KACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs CHANGED Viewed

@@ -25,7 +25,7 @@ const DefaultNavigationPanel = memo(function DefaultNavigationPanel2() {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { ref, className: "tlui-navigation-panel", children: [
-    /* @__PURE__ */ jsx(TldrawUiToolbar, { className: "tlui-buttons__horizontal", label: msg("navigation-zone.title"), children: ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? /* @__PURE__ */ jsx(ZoomMenu, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg("navigation-zone.title"), children: ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? /* @__PURE__ */ jsx(ZoomMenu, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       !collapsed && /* @__PURE__ */ jsx(
         TldrawUiToolbarButton,
         {

package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx"],
-  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAqCK,SAEA,UAFA,KAEA,YAFA;AArCL,SAAS,iCAAiC;AAC1C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,2BAA2B;AACpC,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,6BAA6B;AAGhD,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC5E,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB,WAAW,IAAI;AAEtE,QAAM,gBAAgB,YAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,IAAI,sBAAsB;AAEpD,MAAI,aAAa,oBAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,wBAAC,mBAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,oBAAoB,SAC7C,oBAAC,YAAS,IAEV,iCACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,oBAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,QAAO;AAAA;AAAA,MACvC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,SAAS;AAAA,UAET,8BAAC,sBAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,oBAAoB,UAAU,CAAC,aAAa,oBAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
+  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAqCK,SAEA,UAFA,KAEA,YAFA;AArCL,SAAS,iCAAiC;AAC1C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,2BAA2B;AACpC,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,6BAA6B;AAGhD,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC5E,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB,WAAW,IAAI;AAEtE,QAAM,gBAAgB,YAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,IAAI,sBAAsB;AAEpD,MAAI,aAAa,oBAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,wBAAC,mBAAgB,aAAY,cAAa,OAAO,IAAI,uBAAuB,GAC1E,sBAAY,aAAa,oBAAoB,SAC7C,oBAAC,YAAS,IAEV,iCACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,oBAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,QAAO;AAAA;AAAA,MACvC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,SAAS;AAAA,UAET,8BAAC,sBAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,oBAAoB,UAAU,CAAC,aAAa,oBAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
   "names": ["DefaultNavigationPanel"]
 }

package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs CHANGED Viewed

@@ -24,6 +24,7 @@ import {
   TldrawUiPopoverContent,
   TldrawUiPopoverTrigger
 } from "../primitives/TldrawUiPopover.mjs";
+import { TldrawUiRow } from "../primitives/layout.mjs";
 import { PageItemInput } from "./PageItemInput.mjs";
 import { PageItemSubmenu } from "./PageItemSubmenu.mjs";
 import { onMovePage } from "./edit-pages-shared.mjs";
@@ -272,7 +273,7 @@ const DefaultPageMenu = memo(function DefaultPageMenu2() {
           children: /* @__PURE__ */ jsxs("div", { className: "tlui-page-menu__wrapper", children: [
             /* @__PURE__ */ jsxs("div", { className: "tlui-page-menu__header", children: [
               /* @__PURE__ */ jsx("div", { className: "tlui-page-menu__header__title", children: msg("page-menu.title") }),
-              !isReadonlyMode && /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
+              !isReadonlyMode && /* @__PURE__ */ jsxs(TldrawUiRow, { children: [
                 /* @__PURE__ */ jsx(
                   TldrawUiButton,
                   {

package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/PageMenu/DefaultPageMenu.tsx"],
-  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\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<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<TldrawUiRow>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</TldrawUiRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\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<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
+  "mappings": "AAwTI,SAMC,KAND;AAxTJ;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,MAAM,aAAa,WAAW,iBAAiB,QAAQ,gBAAgB;AAChF,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAGpB,MAAM,kBAAkB,KAAK,SAASA,mBAAkB;AAC9D,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAC/B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,mBAAmB,YAAY,MAAM,aAAa,KAAK,GAAG,CAAC,CAAC;AAElE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa,gBAAgB;AAE1E,QAAM,cAAc;AAEpB,QAAM,qBAAqB,OAAuB,IAAI;AAEtD,QAAM,QAAQ,SAAS,SAAS,MAAM,OAAO,SAAS,GAAG,CAAC,MAAM,CAAC;AACjE,QAAM,cAAc,SAAS,eAAe,MAAM,OAAO,eAAe,GAAG,CAAC,MAAM,CAAC;AACnF,QAAM,gBAAgB,SAAS,iBAAiB,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAGzF,QAAM,iBAAiB,YAAY;AAGnC,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA,MAAM,OAAO,SAAS,EAAE,UAAU,OAAO,QAAQ;AAAA,IACjD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,kBAAkB;AAAA,IACvB;AAAA,IACA,MAAM,OAAO,iBAAiB,EAAE;AAAA,IAChC,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD;AAAA,IACC,SAAS,6DAA6D;AACrE,eAASC,iBAAgB;AACxB,YAAI,UAAW;AACf,YAAI,SAAS,kBAAkB,SAAS,MAAM;AAC7C,iBAAO,MAAM,eAAe;AAAA,QAC7B;AAAA,MACD;AAEA,eAAS,iBAAiB,WAAWA,gBAAe,EAAE,SAAS,KAAK,CAAC;AACrE,aAAO,MAAM;AACZ,iBAAS,oBAAoB,WAAWA,cAAa;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACnB;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACvC,QAAI,eAAgB;AACpB,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,YAAY,OAAO;AAAA,IACxB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,EACZ,CAAC;AAED,QAAM,CAAC,uBAAuB,wBAAwB,IAAI;AAAA,IACzD,OAAO;AAAA,MACN,MAAM,IAAI,CAAC,MAAM,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,aAAa,SAAS,GAAG,YAAY,MAAM,CAAC,CAAC;AAAA,IACxF;AAAA,EACD;AAGA,kBAAgB,MAAM;AACrB;AAAA,MACC,OAAO;AAAA,QACN,MAAM,IAAI,CAAC,MAAM,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,aAAa,SAAS,GAAG,YAAY,MAAM,CAAC,CAAC;AAAA,MACxF;AAAA,IACD;AAAA,EACD,GAAG,CAAC,aAAa,KAAK,CAAC;AAGvB,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AACb,WAAO,OAAO,sBAAsB,MAAM;AACzC,YAAM,MAAM,SAAS,cAAc,iBAAiB,aAAa,IAAI;AAErE,UAAI,KAAK;AACR,YAAI,cAAc,QAAQ,GAAG,MAAM;AAEnC,cAAM,YAAY,mBAAmB;AACrC,YAAI,CAAC,UAAW;AAIhB,cAAM,iBAAiB,IAAI;AAC3B,cAAM,6BAA6B,UAAU;AAC7C,YAAI,iBAAiB,4BAA4B;AAChD,oBAAU,SAAS,EAAE,KAAK,eAAe,CAAC;AAAA,QAC3C;AAEA,cAAM,oBAAoB,iBAAiB;AAC3C,cAAM,gCAAgC,UAAU,YAAY,UAAU;AACtE,YAAI,oBAAoB,+BAA+B;AACtD,oBAAU,SAAS,EAAE,KAAK,oBAAoB,UAAU,aAAa,CAAC;AAAA,QACvE;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,QAAQ,MAAM,CAAC;AAE/C,QAAM,oBAAoB;AAAA,IACzB,CAAC,MAA6C;AAC7C,YAAM,EAAE,SAAS,cAAc,IAAI;AACnC,YAAM;AAAA,QACL,SAAS,EAAE,IAAI,MAAM;AAAA,MACtB,IAAI;AAEJ,UAAI,CAAC,MAAM,CAAC,MAAO;AAEnB,YAAM,MAAM,UAAU;AAEtB,wBAAkB,EAAE,eAAe,CAAC;AAEpC,UAAI,SAAS;AACb,UAAI,WAAW,EAAE,IAAI,OAAO,CAAC,MAAO;AACpC,YAAM,UAAU,sBAAsB,EAAE;AACxC,YAAM,QAAQ,QAAQ;AAEtB,UAAI,SAAS;AACb,UAAI,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,QAAQ,WAAW,GAAG,MAAM,SAAS,CAAC,CAAC;AAAA,IACzF;AAAA,IACA,CAAC,aAAa,MAAM,QAAQ,qBAAqB;AAAA,EAClD;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAC,MAA6C;AAC7C,YAAM,MAAM,UAAU;AACtB,UAAI,IAAI,WAAW,YAAY;AAC9B,cAAM,EAAE,QAAQ,IAAI;AACpB,cAAM,SAAS,UAAU,IAAI;AAC7B,YAAI,KAAK,IAAI,MAAM,IAAI,GAAG;AACzB,cAAI,SAAS;AAAA,QACd;AAAA,MACD;AAEA,UAAI,IAAI,WAAW,YAAY;AAC9B,cAAM,EAAE,QAAQ,IAAI;AACpB,cAAM,UAAU,UAAU,IAAI;AAC9B,cAAM,UAAU,sBAAsB,IAAI,SAAU,EAAE;AAEtD,cAAM,EAAE,YAAY,SAAS,IAAI;AACjC,cAAM,QAAQ,QAAQ,IAAI;AAC1B,cAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,QAAQ,WAAW,GAAG,MAAM,SAAS,CAAC,CAAC;AAEzF,cAAM,OAAO,EAAE,GAAG,sBAAsB;AACxC,aAAK,SAAU,EAAE,IAAI;AAAA,UACpB,GAAG,QAAQ;AAAA,UACX;AAAA,UACA,YAAY;AAAA,QACb;AAEA,YAAI,cAAc,IAAI,WAAW;AAChC,cAAI,YAAY;AAEhB,mBAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACtC,kBAAM,OAAO,MAAM,CAAC;AACpB,gBAAI,KAAK,OAAO,IAAI,SAAU,IAAI;AACjC;AAAA,YACD;AAEA,gBAAI,EAAE,EAAE,IAAI,KAAK,KAAK,EAAE;AAExB,gBAAI,cAAc,YAAY;AAC7B,kBAAI,IAAI;AAAA,YACT,WAAW,YAAY,YAAY;AAClC,kBAAI,aAAa,KAAK,IAAI,YAAY;AACrC,qBAAK,IAAI,KAAK;AAAA,cACf,OAAO;AACN,oBAAI,IAAI;AAAA,cACT;AAAA,YACD,WAAW,YAAY,YAAY;AAClC,kBAAI,aAAa,KAAK,IAAI,YAAY;AACrC,qBAAK,IAAI,KAAK;AAAA,cACf,OAAO;AACN,oBAAI,IAAI;AAAA,cACT;AAAA,YACD;AAEA,gBAAI,MAAM,KAAK,KAAK,EAAE,EAAE,GAAG;AAC1B,mBAAK,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,GAAG,YAAY,KAAK;AAAA,YACnD;AAAA,UACD;AAAA,QACD;AAEA,iCAAyB,IAAI;AAAA,MAC9B;AAAA,IACD;AAAA,IACA,CAAC,aAAa,OAAO,qBAAqB;AAAA,EAC3C;AAEA,QAAM,kBAAkB;AAAA,IACvB,CAAC,MAA6C;AAC7C,YAAM,MAAM,UAAU;AAEtB,UAAI,IAAI,WAAW,YAAY;AAC9B,cAAM,EAAE,IAAI,MAAM,IAAI,IAAI;AAC1B,mBAAW,QAAQ,IAAgB,OAAO,IAAI,WAAW,UAAU;AAAA,MACpE;AAEA,4BAAsB,EAAE,eAAe,CAAC;AACxC,UAAI,SAAS;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAC,MAA8C;AAC9C,YAAM,MAAM,UAAU;AAEtB,UAAI,EAAE,QAAQ,UAAU;AACvB,YAAI,IAAI,WAAW,YAAY;AAC9B;AAAA,YACC,OAAO;AAAA,cACN,MAAM,IAAI,CAAC,MAAM,MAAM;AAAA,gBACtB,KAAK;AAAA,gBACL,EAAE,GAAG,IAAI,aAAa,SAAS,GAAG,YAAY,MAAM;AAAA,cACrD,CAAC;AAAA,YACF;AAAA,UACD;AAAA,QACD;AAEA,YAAI,SAAS;AAAA,MACd;AAAA,IACD;AAAA,IACA,CAAC,aAAa,KAAK;AAAA,EACpB;AAEA,QAAM,wBAAwB,YAAY,MAAM;AAC/C,QAAI,eAAgB;AAEpB,WAAO,IAAI,MAAM;AAChB,aAAO,yBAAyB,eAAe;AAC/C,YAAM,YAAY,eAAe,SAAS;AAC1C,aAAO,WAAW,EAAE,MAAM,IAAI,iCAAiC,GAAG,IAAI,UAAU,CAAC;AACjF,aAAO,eAAe,SAAS;AAE/B,mBAAa,IAAI;AAEjB,aAAO,OAAO,sBAAsB,MAAM;AACzC,cAAM,MAAM,SAAS,cAAc,iBAAiB,SAAS,IAAI;AAEjE,YAAI,KAAK;AACR,cAAI,cAAc,QAAQ,GAAG,MAAM;AAAA,QACpC;AAAA,MACD,CAAC;AAAA,IACF,CAAC;AACD,eAAW,YAAY,EAAE,QAAQ,YAAY,CAAC;AAAA,EAC/C,GAAG,CAAC,QAAQ,KAAK,gBAAgB,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IAClB,CAAC,OAAiB;AACjB,aAAO,eAAe,EAAE;AACxB,iBAAW,eAAe,EAAE,QAAQ,YAAY,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,QAAM,aAAa;AAAA,IAClB,CAAC,IAAc,SAAiB;AAC/B,aAAO,WAAW,IAAI,IAAI;AAC1B,iBAAW,eAAe,EAAE,QAAQ,YAAY,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,SACC,qBAAC,mBAAgB,IAAG,SAAQ,cAA4B,MAAM,QAC7D;AAAA,wBAAC,0BAAuB,eAAY,kBACnC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,YAAY;AAAA,QACnB,eAAY;AAAA,QACZ,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAU,wBAAwB,sBAAY,MAAK;AAAA,UACxD,oBAAC,sBAAmB,MAAK,gBAAe,OAAK,MAAC;AAAA;AAAA;AAAA,IAC/C,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,sBAAsB;AAAA,QAEtB,+BAAC,SAAI,WAAU,2BACd;AAAA,+BAAC,SAAI,WAAU,0BACd;AAAA,gCAAC,SAAI,WAAU,iCAAiC,cAAI,iBAAiB,GAAE;AAAA,YACtE,CAAC,kBACD,qBAAC,eACA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,eAAY;AAAA,kBACZ,OAAO,IAAI,YAAY,wBAAwB,sBAAsB;AAAA,kBACrE,SAAS;AAAA,kBAET,8BAAC,sBAAmB,MAAM,YAAY,UAAU,QAAQ;AAAA;AAAA,cACzD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,eAAY;AAAA,kBACZ,OAAO;AAAA,oBACN,sBACG,qCACA;AAAA,kBACJ;AAAA,kBACA,UAAU;AAAA,kBACV,SAAS;AAAA,kBAET,8BAAC,sBAAmB,MAAK,QAAO;AAAA;AAAA,cACjC;AAAA,eACD;AAAA,aAEF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,eAAY;AAAA,cACZ,WAAU;AAAA,cACV,OAAO,EAAE,QAAQ,cAAc,MAAM,SAAS,EAAE;AAAA,cAChD,KAAK;AAAA,cAEJ,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC3B,sBAAM,WAAW,sBAAsB,KAAK,EAAE,KAAK;AAAA,kBAClD,UAAU,QAAQ;AAAA,kBAClB,SAAS;AAAA,gBACV;AAEA,uBAAO,YACN;AAAA,kBAAC;AAAA;AAAA,oBAEA,eAAY;AAAA,oBACZ,eAAa,KAAK;AAAA,oBAClB,WAAU;AAAA,oBACV,OAAO;AAAA,sBACN,QAAQ,KAAK,OAAO,YAAY,KAAK,MAAM;AAAA,sBAC3C,WAAW,kBAAkB,SAAS,IAAI,SAAS,OAAO;AAAA,oBAC3D;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACA,MAAK;AAAA,0BACL,UAAU;AAAA,0BACV,WAAU;AAAA,0BACV,eAAe;AAAA,0BACf,aAAa;AAAA,0BACb,eAAe;AAAA,0BACf,WAAW;AAAA,0BACX,WAAS,KAAK;AAAA,0BACd,cAAY;AAAA,0BAEZ,8BAAC,sBAAmB,MAAK,oBAAmB;AAAA;AAAA,sBAC7C;AAAA,sBACC,aAAa,oBAAoB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK9C;AAAA,0BAAC;AAAA;AAAA,4BACA,MAAK;AAAA,4BACL,WAAU;AAAA,4BACV,SAAS,MAAM;AACd,oCAAM,OAAO,OAAO,OAAO,eAAe,KAAK,IAAI;AACnD,kCAAI,QAAQ,SAAS,KAAK,MAAM;AAC/B,2CAAW,KAAK,IAAI,IAAI;AAAA,8BACzB;AAAA,4BACD;AAAA,4BACA,eAAe;AAAA,4BAEf;AAAA,kDAAC,uBAAoB,SAAS,KAAK,OAAO,YAAY,IAAI;AAAA,8BAC1D,oBAAC,uBAAqB,eAAK,MAAK;AAAA;AAAA;AAAA,wBACjC;AAAA,0BAEA;AAAA,wBAAC;AAAA;AAAA,0BACA,WAAU;AAAA,0BACV,OAAO,EAAE,QAAQ,YAAY;AAAA,0BAE7B;AAAA,4BAAC;AAAA;AAAA,8BACA,IAAI,KAAK;AAAA,8BACT,MAAM,KAAK;AAAA,8BACX,eAAe,KAAK,OAAO,YAAY;AAAA,8BACvC,YAAY,MAAM;AACjB,6CAAa,KAAK;AAAA,8BACnB;AAAA,8BACA,UAAU,MAAM;AACf,6CAAa,KAAK;AAAA,8BACnB;AAAA;AAAA,0BACD;AAAA;AAAA,sBACD;AAAA,sBAEA,CAAC,kBACD,oBAAC,SAAI,WAAU,iCAAgC,kBAAgB,WAC9D,8BAAC,mBAAgB,OAAc,MAAM,MAAM,UAAU,MAAM,QAAQ,GACpE;AAAA;AAAA;AAAA,kBA9DI,KAAK,KAAK;AAAA,gBAgEhB,IAEA;AAAA,kBAAC;AAAA;AAAA,oBAEA,eAAa,KAAK;AAAA,oBAClB,eAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACA,MAAK;AAAA,0BACL,WAAU;AAAA,0BACV,SAAS,MAAM,WAAW,KAAK,EAAE;AAAA,0BACjC,eAAe;AAAA,0BACf,OAAO,IAAI,sBAAsB;AAAA,0BACjC,WAAW,CAAC,MAAM;AACjB,gCAAI,EAAE,QAAQ,SAAS;AACtB,kCAAI,KAAK,OAAO,YAAY,IAAI;AAC/B,8CAAc;AACd,qDAAqB,CAAC;AAAA,8BACvB;AAAA,4BACD;AAAA,0BACD;AAAA,0BAEA;AAAA,gDAAC,uBAAoB,SAAS,KAAK,OAAO,YAAY,IAAI;AAAA,4BAC1D,oBAAC,uBAAqB,eAAK,MAAK;AAAA;AAAA;AAAA,sBACjC;AAAA,sBACC,CAAC,kBACD,oBAAC,SAAI,WAAU,iCACd;AAAA,wBAAC;AAAA;AAAA,0BACA;AAAA,0BACA,MAAM;AAAA,0BACN,UAAU,MAAM;AAAA,0BAChB,UAAU,MAAM;AACf,gCAAI,MAAM,OAAO;AAChB,oCAAM,OAAO,OAAO,OAAO,eAAe,KAAK,IAAI;AACnD,kCAAI,QAAQ,SAAS,KAAK,MAAM;AAC/B,2CAAW,KAAK,IAAI,IAAI;AAAA,8BACzB;AAAA,4BACD,OAAO;AACN,2CAAa,IAAI;AACjB,kCAAI,kBAAkB,KAAK,IAAI;AAC9B,2CAAW,KAAK,EAAE;AAAA,8BACnB;AAAA,4BACD;AAAA,0BACD;AAAA;AAAA,sBACD,GACD;AAAA;AAAA;AAAA,kBA3CI,KAAK;AAAA,gBA6CX;AAAA,cAEF,CAAC;AAAA;AAAA,UACF;AAAA,WACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF,CAAC;",
   "names": ["DefaultPageMenu", "handleKeyDown"]
 }

package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiIcon } from "../primitives/TldrawUiIcon.mjs";
+import { TldrawUiRow } from "../primitives/layout.mjs";
 const PeopleMenuItem = track(function PeopleMenuItem2({ userId }) {
   const editor = useEditor();
   const msg = useTranslation();
@@ -24,9 +25,9 @@ const PeopleMenuItem = track(function PeopleMenuItem2({ userId }) {
   const youAreFollowingThem = editor.getInstanceState().followingUserId === userId;
   if (!presence) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    TldrawUiRow,
     {
-      className: "tlui-people-menu__item tlui-buttons__horizontal",
+      className: "tlui-people-menu__item",
       "data-follow": youAreFollowingThem || theyAreFollowingYou,
       children: [
         /* @__PURE__ */ jsxs(

package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenuItem.tsx"],
-  "sourcesContent": ["import { track, useEditor, usePresence } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiIcon } from '../primitives/TldrawUiIcon'\n\nexport const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst presence = usePresence(userId)\n\n\tconst handleFollowClick = useCallback(() => {\n\t\tif (editor.getInstanceState().followingUserId === userId) {\n\t\t\teditor.stopFollowingUser()\n\t\t\ttrackEvent('stop-following', { source: 'people-menu' })\n\t\t} else {\n\t\t\teditor.startFollowingUser(userId)\n\t\t\ttrackEvent('start-following', { source: 'people-menu' })\n\t\t}\n\t}, [editor, userId, trackEvent])\n\n\tconst theyAreFollowingYou = presence?.followingUserId === editor.user.getId()\n\tconst youAreFollowingThem = editor.getInstanceState().followingUserId === userId\n\n\tif (!presence) return null\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tlui-people-menu__item tlui-buttons__horizontal\"\n\t\t\tdata-follow={youAreFollowingThem || theyAreFollowingYou}\n\t\t>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-people-menu__item__button\"\n\t\t\t\tonClick={() => editor.zoomToUser(userId)}\n\t\t\t\tonDoubleClick={handleFollowClick}\n\t\t\t>\n\t\t\t\t<TldrawUiIcon label={msg('people-menu.avatar-color')} icon=\"color\" color={presence.color} />\n\t\t\t\t<div className=\"tlui-people-menu__name\">\n\t\t\t\t\t{presence.userName?.trim() || msg('people-menu.anonymous-user')}\n\t\t\t\t</div>\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__item__follow\"\n\t\t\t\ttitle={\n\t\t\t\t\ttheyAreFollowingYou\n\t\t\t\t\t\t? msg('people-menu.leading')\n\t\t\t\t\t\t: youAreFollowingThem\n\t\t\t\t\t\t\t? msg('people-menu.following')\n\t\t\t\t\t\t\t: msg('people-menu.follow')\n\t\t\t\t}\n\t\t\t\tonClick={handleFollowClick}\n\t\t\t\tdisabled={theyAreFollowingYou}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\ticon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}\n\t\t\t\t/>\n\t\t\t</TldrawUiButton>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAmCG,SAMC,KAND;AAnCH,SAAS,OAAO,WAAW,mBAAmB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAEtB,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,WAAW,YAAY,MAAM;AAEnC,QAAM,oBAAoB,YAAY,MAAM;AAC3C,QAAI,OAAO,iBAAiB,EAAE,oBAAoB,QAAQ;AACzD,aAAO,kBAAkB;AACzB,iBAAW,kBAAkB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACvD,OAAO;AACN,aAAO,mBAAmB,MAAM;AAChC,iBAAW,mBAAmB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,sBAAsB,UAAU,oBAAoB,OAAO,KAAK,MAAM;AAC5E,QAAM,sBAAsB,OAAO,iBAAiB,EAAE,oBAAoB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAa,uBAAuB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,WAAW,MAAM;AAAA,YACvC,eAAe;AAAA,YAEf;AAAA,kCAAC,gBAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,oBAAC,SAAI,WAAU,0BACb,mBAAS,UAAU,KAAK,KAAK,IAAI,4BAA4B,GAC/D;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OACC,sBACG,IAAI,qBAAqB,IACzB,sBACC,IAAI,uBAAuB,IAC3B,IAAI,oBAAoB;AAAA,YAE7B,SAAS;AAAA,YACT,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA,MAAM,sBAAsB,YAAY,sBAAsB,cAAc;AAAA;AAAA,YAC7E;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "sourcesContent": ["import { track, useEditor, usePresence } from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiIcon } from '../primitives/TldrawUiIcon'\nimport { TldrawUiRow } from '../primitives/layout'\n\nexport const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst presence = usePresence(userId)\n\n\tconst handleFollowClick = useCallback(() => {\n\t\tif (editor.getInstanceState().followingUserId === userId) {\n\t\t\teditor.stopFollowingUser()\n\t\t\ttrackEvent('stop-following', { source: 'people-menu' })\n\t\t} else {\n\t\t\teditor.startFollowingUser(userId)\n\t\t\ttrackEvent('start-following', { source: 'people-menu' })\n\t\t}\n\t}, [editor, userId, trackEvent])\n\n\tconst theyAreFollowingYou = presence?.followingUserId === editor.user.getId()\n\tconst youAreFollowingThem = editor.getInstanceState().followingUserId === userId\n\n\tif (!presence) return null\n\n\treturn (\n\t\t<TldrawUiRow\n\t\t\tclassName=\"tlui-people-menu__item\"\n\t\t\tdata-follow={youAreFollowingThem || theyAreFollowingYou}\n\t\t>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-people-menu__item__button\"\n\t\t\t\tonClick={() => editor.zoomToUser(userId)}\n\t\t\t\tonDoubleClick={handleFollowClick}\n\t\t\t>\n\t\t\t\t<TldrawUiIcon label={msg('people-menu.avatar-color')} icon=\"color\" color={presence.color} />\n\t\t\t\t<div className=\"tlui-people-menu__name\">\n\t\t\t\t\t{presence.userName?.trim() || msg('people-menu.anonymous-user')}\n\t\t\t\t</div>\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__item__follow\"\n\t\t\t\ttitle={\n\t\t\t\t\ttheyAreFollowingYou\n\t\t\t\t\t\t? msg('people-menu.leading')\n\t\t\t\t\t\t: youAreFollowingThem\n\t\t\t\t\t\t\t? msg('people-menu.following')\n\t\t\t\t\t\t\t: msg('people-menu.follow')\n\t\t\t\t}\n\t\t\t\tonClick={handleFollowClick}\n\t\t\t\tdisabled={theyAreFollowingYou}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\ticon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}\n\t\t\t\t/>\n\t\t\t</TldrawUiButton>\n\t\t</TldrawUiRow>\n\t)\n})\n"],
+  "mappings": "AAoCG,SAMC,KAND;AApCH,SAAS,OAAO,WAAW,mBAAmB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,WAAW,YAAY,MAAM;AAEnC,QAAM,oBAAoB,YAAY,MAAM;AAC3C,QAAI,OAAO,iBAAiB,EAAE,oBAAoB,QAAQ;AACzD,aAAO,kBAAkB;AACzB,iBAAW,kBAAkB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACvD,OAAO;AACN,aAAO,mBAAmB,MAAM;AAChC,iBAAW,mBAAmB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,sBAAsB,UAAU,oBAAoB,OAAO,KAAK,MAAM;AAC5E,QAAM,sBAAsB,OAAO,iBAAiB,EAAE,oBAAoB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAa,uBAAuB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,WAAW,MAAM;AAAA,YACvC,eAAe;AAAA,YAEf;AAAA,kCAAC,gBAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,oBAAC,SAAI,WAAU,0BACb,mBAAS,UAAU,KAAK,KAAK,IAAI,4BAA4B,GAC/D;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OACC,sBACG,IAAI,qBAAqB,IACzB,sBACC,IAAI,uBAAuB,IAC3B,IAAI,oBAAoB;AAAA,YAE7B,SAAS;AAAA,YACT,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA,MAAM,sBAAsB,YAAY,sBAAsB,cAAc;AAAA;AAAA,YAC7E;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF,CAAC;",
   "names": ["PeopleMenuItem"]
 }

package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ import { useUiEvents } from "../../context/events.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
+import { TldrawUiGrid } from "../primitives/layout.mjs";
 const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
   const editor = useEditor();
   const container = useContainer();
@@ -84,7 +85,7 @@ const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
         align: "start",
         side: "left",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: USER_COLORS.map((item) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(TldrawUiGrid, { children: USER_COLORS.map((item) => /* @__PURE__ */ jsx(
           TldrawUiButton,
           {
             type: "icon",
@@ -93,7 +94,6 @@ const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
             "aria-label": item,
             isActive: value === item,
             title: item,
-            className: "tlui-button-grid__button",
             style: { color: item },
             onPointerEnter: handleButtonPointerEnter,
             onPointerDown: handleButtonPointerDown,