tldraw 3.16.0-canary.aa1aff3ffe55 → 3.16.0-canary.cf24aedcd577

package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js

@@ -31,6 +31,7 @@ var import_useTranslation = require("../../hooks/useTranslation/useTranslation")
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
+var import_layout = require("../primitives/layout");
 var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
 var import_DefaultActionsMenuContent = require("./DefaultActionsMenuContent");
 const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
@@ -39,6 +40,7 @@ const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
   const msg = (0, import_useTranslation.useTranslation)();
   const breakpoint = (0, import_breakpoints.useBreakpoint)();
   const isReadonlyMode = (0, import_useReadonly.useReadonly)();
+  const { orientation } = (0, import_layout.useTldrawUiOrientation)();
   const ref = (0, import_react.useRef)(null);
   (0, import_editor.usePassThroughWheelEvents)(ref);
   const editor = (0, import_editor.useEditor)();
@@ -56,21 +58,28 @@ const DefaultActionsMenu = (0, import_react.memo)(function DefaultActionsMenu2({
         type: "icon",
         "data-testid": "actions-menu.button",
         title: msg("actions-menu.title"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "dots-vertical", small: true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonIcon.TldrawUiButtonIcon,
+          {
+            icon: orientation === "horizontal" ? "dots-vertical" : "dots-horizontal",
+            small: true
+          }
+        )
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TldrawUiPopover.TldrawUiPopoverContent,
       {
-        side: breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET ? "bottom" : "top",
+        side: orientation === "horizontal" ? breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET ? "bottom" : "top" : "right",
         sideOffset: 6,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_TldrawUiToolbar.TldrawUiToolbar,
           {
             ref,
             label: msg("actions-menu.title"),
-            className: "tlui-actions-menu tlui-buttons__grid",
+            className: "tlui-actions-menu",
             "data-testid": "actions-menu.content",
+            orientation: "grid",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "actions-menu", children: content })
           }
         )

package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultActionsMenuContent } from './DefaultActionsMenuContent'\n\n/** @public */\nexport interface TLUiActionsMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultActionsMenu = memo(function DefaultActionsMenu({\n\tchildren,\n}: TLUiActionsMenuProps) {\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst editor = useEditor()\n\tconst isInAcceptableReadonlyState = useValue(\n\t\t'should display quick actions when in readonly',\n\t\t() => editor.isInAny('hand', 'zoom'),\n\t\t[editor]\n\t)\n\n\t// Get the actions menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\n\tconst content = children ?? <DefaultActionsMenuContent />\n\tif (isReadonlyMode && !isInAcceptableReadonlyState) return\n\n\treturn (\n\t\t<TldrawUiPopover id=\"actions-menu\">\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"actions-menu.button\"\n\t\t\t\t\ttitle={msg('actions-menu.title')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"dots-vertical\" small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}\n\t\t\t\tsideOffset={6}\n\t\t\t>\n\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\tref={ref}\n\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\tclassName=\"tlui-actions-menu tlui-buttons__grid\"\n\t\t\t\t\tdata-testid=\"actions-menu.content\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"actions-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2C6B;AA3C7B,oBAA+D;AAC/D,mBAAwC;AACxC,uBAAoC;AACpC,yBAA8B;AAC9B,yBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,uCAA0C;AAQnC,MAAM,yBAAqB,mBAAK,SAASA,oBAAmB;AAAA,EAClE;AACD,GAAyB;AACxB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AACjC,QAAM,qBAAiB,gCAAY;AAEnC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,aAAS,yBAAU;AACzB,QAAM,kCAA8B;AAAA,IACnC;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,MAAM;AAAA,IACnC,CAAC,MAAM;AAAA,EACR;AAMA,QAAM,UAAU,YAAY,4CAAC,8DAA0B;AACvD,MAAI,kBAAkB,CAAC,4BAA6B;AAEpD,SACC,6CAAC,0CAAgB,IAAG,gBACnB;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO,IAAI,oBAAoB;AAAA,QAE/B,sDAAC,gDAAmB,MAAK,iBAAgB,OAAK,MAAC;AAAA;AAAA,IAChD,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,cAAc,qCAAoB,SAAS,WAAW;AAAA,QAC5D,YAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,OAAO,IAAI,oBAAoB;AAAA,YAC/B,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,gBACjD,mBACF;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { useTldrawUiOrientation } from '../primitives/layout'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultActionsMenuContent } from './DefaultActionsMenuContent'\n\n/** @public */\nexport interface TLUiActionsMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultActionsMenu = memo(function DefaultActionsMenu({\n\tchildren,\n}: TLUiActionsMenuProps) {\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst { orientation } = useTldrawUiOrientation()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst editor = useEditor()\n\tconst isInAcceptableReadonlyState = useValue(\n\t\t'should display quick actions when in readonly',\n\t\t() => editor.isInAny('hand', 'zoom'),\n\t\t[editor]\n\t)\n\n\t// Get the actions menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\n\tconst content = children ?? <DefaultActionsMenuContent />\n\tif (isReadonlyMode && !isInAcceptableReadonlyState) return\n\n\treturn (\n\t\t<TldrawUiPopover id=\"actions-menu\">\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"actions-menu.button\"\n\t\t\t\t\ttitle={msg('actions-menu.title')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\ticon={orientation === 'horizontal' ? 'dots-vertical' : 'dots-horizontal'}\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside={\n\t\t\t\t\torientation === 'horizontal'\n\t\t\t\t\t\t? breakpoint >= PORTRAIT_BREAKPOINT.TABLET\n\t\t\t\t\t\t\t? 'bottom'\n\t\t\t\t\t\t\t: 'top'\n\t\t\t\t\t\t: 'right'\n\t\t\t\t}\n\t\t\t\tsideOffset={6}\n\t\t\t>\n\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\tref={ref}\n\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\tclassName=\"tlui-actions-menu\"\n\t\t\t\t\tdata-testid=\"actions-menu.content\"\n\t\t\t\t\torientation=\"grid\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"actions-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C6B;AA7C7B,oBAA+D;AAC/D,mBAAwC;AACxC,uBAAoC;AACpC,yBAA8B;AAC9B,yBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,6BAIO;AACP,6BAAuD;AACvD,oBAAuC;AACvC,iCAA4C;AAC5C,uCAA0C;AAQnC,MAAM,yBAAqB,mBAAK,SAASA,oBAAmB;AAAA,EAClE;AACD,GAAyB;AACxB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AACjC,QAAM,qBAAiB,gCAAY;AACnC,QAAM,EAAE,YAAY,QAAI,sCAAuB;AAE/C,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,aAAS,yBAAU;AACzB,QAAM,kCAA8B;AAAA,IACnC;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,MAAM;AAAA,IACnC,CAAC,MAAM;AAAA,EACR;AAMA,QAAM,UAAU,YAAY,4CAAC,8DAA0B;AACvD,MAAI,kBAAkB,CAAC,4BAA6B;AAEpD,SACC,6CAAC,0CAAgB,IAAG,gBACnB;AAAA,gDAAC,iDACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO,IAAI,oBAAoB;AAAA,QAE/B;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,gBAAgB,eAAe,kBAAkB;AAAA,YACvD,OAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MACC,gBAAgB,eACb,cAAc,qCAAoB,SACjC,WACA,QACD;AAAA,QAEJ,YAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,OAAO,IAAI,oBAAoB;AAAA,YAC/B,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,aAAY;AAAA,YAEZ,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,gBACjD,mBACF;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF,CAAC;",
   "names": ["DefaultActionsMenu"]
 }

package/dist-cjs/lib/ui/components/DefaultMenuPanel.js

@@ -29,6 +29,7 @@ var import_breakpoints = require("../context/breakpoints");
 var import_components = require("../context/components");
 var import_useTranslation = require("../hooks/useTranslation/useTranslation");
 var import_TldrawUiToolbar = require("./primitives/TldrawUiToolbar");
+var import_layout = require("./primitives/layout");
 const DefaultMenuPanel = (0, import_react.memo)(function MenuPanel() {
   const breakpoint = (0, import_breakpoints.useBreakpoint)();
   const msg = (0, import_useTranslation.useTranslation)();
@@ -41,10 +42,10 @@ const DefaultMenuPanel = (0, import_react.memo)(function MenuPanel() {
   ]);
   const showQuickActions = editor.options.actionShortcutsLocation === "menu" ? true : editor.options.actionShortcutsLocation === "toolbar" ? false : breakpoint >= import_constants.PORTRAIT_BREAKPOINT.TABLET;
   if (!MainMenu && !PageMenu && !showQuickActions) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.TldrawUiRow, { children: [
     MainMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MainMenu, {}),
     PageMenu && !isSinglePageMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageMenu, {}),
-    showQuickActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { className: "tlui-buttons__horizontal", label: msg("actions-menu.title"), children: [
+    showQuickActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("actions-menu.title"), children: [
       QuickActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QuickActions, {}),
       ActionsMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsMenu, {})
     ] }) : null

package/dist-cjs/lib/ui/components/DefaultMenuPanel.js.map

@@ -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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCiB;AAnCjB,oBAA+D;AAC/D,mBAA6B;AAC7B,uBAAoC;AACpC,yBAA8B;AAC9B,wBAAsC;AACtC,4BAA+B;AAC/B,6BAAgC;AAGzB,MAAM,uBAAmB,mBAAK,SAAS,YAAY;AACzD,QAAM,iBAAa,kCAAc;AACjC,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,QAAI,yCAAsB;AAEhF,QAAM,aAAS,yBAAU;AACzB,QAAM,uBAAmB,wBAAS,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,qCAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,4CAAC,SAAI,KAAU,WAAU,kBACxB,uDAAC,SAAI,WAAU,4BACb;AAAA,gBAAY,4CAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,4CAAC,YAAS;AAAA,IAC3C,mBACA,6CAAC,0CAAgB,WAAU,4BAA2B,OAAO,IAAI,oBAAoB,GACnF;AAAA,sBAAgB,4CAAC,gBAAa;AAAA,MAC9B,eAAe,4CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCiB;AApCjB,oBAA+D;AAC/D,mBAA6B;AAC7B,uBAAoC;AACpC,yBAA8B;AAC9B,wBAAsC;AACtC,4BAA+B;AAC/B,6BAAgC;AAChC,oBAA4B;AAGrB,MAAM,uBAAmB,mBAAK,SAAS,YAAY;AACzD,QAAM,iBAAa,kCAAc;AACjC,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,EAAE,UAAU,cAAc,aAAa,SAAS,QAAI,yCAAsB;AAEhF,QAAM,aAAS,yBAAU;AACzB,QAAM,uBAAmB,wBAAS,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,qCAAoB;AAEvC,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,iBAAkB,QAAO;AAExD,SACC,4CAAC,SAAI,KAAU,WAAU,kBACxB,uDAAC,6BACC;AAAA,gBAAY,4CAAC,YAAS;AAAA,IACtB,YAAY,CAAC,oBAAoB,4CAAC,YAAS;AAAA,IAC3C,mBACA,6CAAC,0CAAgB,aAAY,cAAa,OAAO,IAAI,oBAAoB,GACvE;AAAA,sBAAgB,4CAAC,gBAAa;AAAA,MAC9B,eAAe,4CAAC,eAAY;AAAA,OAC9B,IACG;AAAA,KACL,GACD;AAEF,CAAC;",
   "names": []
 }

package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js

@@ -31,6 +31,7 @@ __export(DefaultMainMenuContent_exports, {
 module.exports = __toCommonJS(DefaultMainMenuContent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_menu_hooks = require("../../hooks/menu-hooks");
+var import_AccessibilityMenu = require("../AccessibilityMenu");
 var import_ColorSchemeMenu = require("../ColorSchemeMenu");
 var import_DefaultHelpMenuContent = require("../HelpMenu/DefaultHelpMenuContent");
 var import_LanguageMenu = require("../LanguageMenu");
@@ -120,13 +121,12 @@ function PreferencesGroup() {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleWrapModeItem, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleFocusModeItem, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleEdgeScrollingItem, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleReduceMotionItem, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleKeyboardShortcutsItem, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleDynamicSizeModeItem, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.TogglePasteAtCursorItem, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_items.ToggleDebugModeItem, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuGroup.TldrawUiMenuGroup, { id: "color-scheme", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorSchemeMenu.ColorSchemeMenu, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuGroup.TldrawUiMenuGroup, { id: "color-scheme", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorSchemeMenu.ColorSchemeMenu, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuGroup.TldrawUiMenuGroup, { id: "accessibility-menu", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AccessibilityMenu.AccessibilityMenu, {}) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LanguageMenu.LanguageMenu, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultHelpMenuContent.KeyboardShortcutsMenuItem, {})

package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx"],
-  "sourcesContent": ["import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'\nimport { ColorSchemeMenu } from '../ColorSchemeMenu'\nimport { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'\nimport { LanguageMenu } from '../LanguageMenu'\nimport {\n\tClipboardMenuGroup,\n\tConversionsMenuGroup,\n\tConvertToBookmarkMenuItem,\n\tConvertToEmbedMenuItem,\n\tEditLinkMenuItem,\n\tFitFrameToContentMenuItem,\n\tFlattenMenuItem,\n\tGroupMenuItem,\n\tRemoveFrameMenuItem,\n\tSelectAllMenuItem,\n\tToggleAutoSizeMenuItem,\n\tToggleDebugModeItem,\n\tToggleDynamicSizeModeItem,\n\tToggleEdgeScrollingItem,\n\tToggleFocusModeItem,\n\tToggleGridItem,\n\tToggleKeyboardShortcutsItem,\n\tToggleLockMenuItem,\n\tTogglePasteAtCursorItem,\n\tToggleReduceMotionItem,\n\tToggleSnapModeItem,\n\tToggleToolLockItem,\n\tToggleTransparentBgMenuItem,\n\tToggleWrapModeItem,\n\tUngroupMenuItem,\n\tUnlockAllMenuItem,\n\tZoomTo100MenuItem,\n\tZoomToFitMenuItem,\n\tZoomToSelectionMenuItem,\n} from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function DefaultMainMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup id=\"basic\">\n\t\t\t\t<EditSubmenu />\n\t\t\t\t<ViewSubmenu />\n\t\t\t\t<ExportFileContentSubMenu />\n\t\t\t\t<ExtrasGroup />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<PreferencesGroup />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ExportFileContentSubMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"export-all-as\" label=\"context-menu.export-all-as\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-svg\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-png\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function EditSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"menu.edit\">\n\t\t\t<UndoRedoGroup />\n\t\t\t<ClipboardMenuGroup />\n\t\t\t<ConversionsMenuGroup />\n\t\t\t<MiscMenuGroup />\n\t\t\t<LockGroup />\n\t\t\t<TldrawUiMenuGroup id=\"select-all\">\n\t\t\t\t<SelectAllMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MiscMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"misc\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function LockGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"lock\">\n\t\t\t<ToggleLockMenuItem />\n\t\t\t<UnlockAllMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function UndoRedoGroup() {\n\tconst canUndo = useCanUndo()\n\tconst canRedo = useCanRedo()\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"undo-redo\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" disabled={!canUndo} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" disabled={!canRedo} />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ViewSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"view\" label=\"menu.view\">\n\t\t\t<TldrawUiMenuGroup id=\"view-actions\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<ZoomTo100MenuItem />\n\t\t\t\t<ZoomToFitMenuItem />\n\t\t\t\t<ZoomToSelectionMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ExtrasGroup() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-embed\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t</>\n\t)\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function PreferencesGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"preferences\">\n\t\t\t<TldrawUiMenuSubmenu id=\"preferences\" label=\"menu.preferences\">\n\t\t\t\t<TldrawUiMenuGroup id=\"preferences-actions\">\n\t\t\t\t\t<ToggleSnapModeItem />\n\t\t\t\t\t<ToggleToolLockItem />\n\t\t\t\t\t<ToggleGridItem />\n\t\t\t\t\t<ToggleWrapModeItem />\n\t\t\t\t\t<ToggleFocusModeItem />\n\t\t\t\t\t<ToggleEdgeScrollingItem />\n\t\t\t\t\t<ToggleReduceMotionItem />\n\t\t\t\t\t<ToggleKeyboardShortcutsItem />\n\t\t\t\t\t<ToggleDynamicSizeModeItem />\n\t\t\t\t\t<TogglePasteAtCursorItem />\n\t\t\t\t\t<ToggleDebugModeItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"color-scheme\">\n\t\t\t\t\t<ColorSchemeMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<LanguageMenu />\n\t\t\t<KeyboardShortcutsMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CE;AA1CF,wBAAuC;AACvC,6BAAgC;AAChC,oCAA0C;AAC1C,0BAA6B;AAC7B,wBA8BO;AACP,oCAAuC;AACvC,+BAAkC;AAClC,iCAAoC;AAG7B,SAAS,yBAAyB;AACxC,SACC,4EACC;AAAA,iDAAC,8CAAkB,IAAG,SACrB;AAAA,kDAAC,eAAY;AAAA,MACb,4CAAC,eAAY;AAAA,MACb,4CAAC,4BAAyB;AAAA,MAC1B,4CAAC,eAAY;AAAA,OACd;AAAA,IACA,4CAAC,oBAAiB;AAAA,KACnB;AAEF;AAGO,SAAS,2BAA2B;AAC1C,SACC,6CAAC,kDAAoB,IAAG,iBAAgB,OAAM,8BAA6B,MAAK,SAC/E;AAAA,iDAAC,8CAAkB,IAAG,uBACrB;AAAA,kDAAC,wDAAuB,UAAS,qBAAoB;AAAA,MACrD,4CAAC,wDAAuB,UAAS,qBAAoB;AAAA,OACtD;AAAA,IACA,4CAAC,8CAAkB,IAAG,oBACrB,sDAAC,iDAA4B,GAC9B;AAAA,KACD;AAEF;AAGO,SAAS,cAAc;AAC7B,SACC,6CAAC,kDAAoB,IAAG,QAAO,OAAM,aACpC;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,wCAAmB;AAAA,IACpB,4CAAC,0CAAqB;AAAA,IACtB,4CAAC,iBAAc;AAAA,IACf,4CAAC,aAAU;AAAA,IACX,4CAAC,8CAAkB,IAAG,cACrB,sDAAC,uCAAkB,GACpB;AAAA,KACD;AAEF;AAGO,SAAS,gBAAgB;AAC/B,SACC,6CAAC,8CAAkB,IAAG,QACrB;AAAA,gDAAC,mCAAc;AAAA,IACf,4CAAC,qCAAgB;AAAA,IACjB,4CAAC,sCAAiB;AAAA,IAClB,4CAAC,4CAAuB;AAAA,IACxB,4CAAC,yCAAoB;AAAA,IACrB,4CAAC,+CAA0B;AAAA,IAC3B,4CAAC,4CAAuB;AAAA,IACxB,4CAAC,+CAA0B;AAAA,IAC3B,4CAAC,qCAAgB;AAAA,KAClB;AAEF;AAGO,SAAS,YAAY;AAC3B,SACC,6CAAC,8CAAkB,IAAG,QACrB;AAAA,gDAAC,wCAAmB;AAAA,IACpB,4CAAC,uCAAkB;AAAA,KACpB;AAEF;AAGO,SAAS,gBAAgB;AAC/B,QAAM,cAAU,8BAAW;AAC3B,QAAM,cAAU,8BAAW;AAC3B,SACC,6CAAC,8CAAkB,IAAG,aACrB;AAAA,gDAAC,wDAAuB,UAAS,QAAO,UAAU,CAAC,SAAS;AAAA,IAC5D,4CAAC,wDAAuB,UAAS,QAAO,UAAU,CAAC,SAAS;AAAA,KAC7D;AAEF;AAGO,SAAS,cAAc;AAC7B,SACC,4CAAC,kDAAoB,IAAG,QAAO,OAAM,aACpC,uDAAC,8CAAkB,IAAG,gBACrB;AAAA,gDAAC,wDAAuB,UAAS,WAAU;AAAA,IAC3C,4CAAC,wDAAuB,UAAS,YAAW;AAAA,IAC5C,4CAAC,uCAAkB;AAAA,IACnB,4CAAC,uCAAkB;AAAA,IACnB,4CAAC,6CAAwB;AAAA,KAC1B,GACD;AAEF;AAGO,SAAS,cAAc;AAC7B,SACC,4EACC;AAAA,gDAAC,wDAAuB,UAAS,gBAAe;AAAA,IAChD,4CAAC,wDAAuB,UAAS,gBAAe;AAAA,KACjD;AAEF;AAKO,SAAS,mBAAmB;AAClC,SACC,6CAAC,8CAAkB,IAAG,eACrB;AAAA,iDAAC,kDAAoB,IAAG,eAAc,OAAM,oBAC3C;AAAA,mDAAC,8CAAkB,IAAG,uBACrB;AAAA,oDAAC,wCAAmB;AAAA,QACpB,4CAAC,wCAAmB;AAAA,QACpB,4CAAC,oCAAe;AAAA,QAChB,4CAAC,wCAAmB;AAAA,QACpB,4CAAC,yCAAoB;AAAA,QACrB,4CAAC,6CAAwB;AAAA,QACzB,4CAAC,4CAAuB;AAAA,QACxB,4CAAC,iDAA4B;AAAA,QAC7B,4CAAC,+CAA0B;AAAA,QAC3B,4CAAC,6CAAwB;AAAA,QACzB,4CAAC,yCAAoB;AAAA,SACtB;AAAA,MACA,4CAAC,8CAAkB,IAAG,gBACrB,sDAAC,0CAAgB,GAClB;AAAA,OACD;AAAA,IACA,4CAAC,oCAAa;AAAA,IACd,4CAAC,2DAA0B;AAAA,KAC5B;AAEF;",
+  "sourcesContent": ["import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'\nimport { AccessibilityMenu } from '../AccessibilityMenu'\nimport { ColorSchemeMenu } from '../ColorSchemeMenu'\nimport { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'\nimport { LanguageMenu } from '../LanguageMenu'\nimport {\n\tClipboardMenuGroup,\n\tConversionsMenuGroup,\n\tConvertToBookmarkMenuItem,\n\tConvertToEmbedMenuItem,\n\tEditLinkMenuItem,\n\tFitFrameToContentMenuItem,\n\tFlattenMenuItem,\n\tGroupMenuItem,\n\tRemoveFrameMenuItem,\n\tSelectAllMenuItem,\n\tToggleAutoSizeMenuItem,\n\tToggleDebugModeItem,\n\tToggleDynamicSizeModeItem,\n\tToggleEdgeScrollingItem,\n\tToggleFocusModeItem,\n\tToggleGridItem,\n\tToggleLockMenuItem,\n\tTogglePasteAtCursorItem,\n\tToggleSnapModeItem,\n\tToggleToolLockItem,\n\tToggleTransparentBgMenuItem,\n\tToggleWrapModeItem,\n\tUngroupMenuItem,\n\tUnlockAllMenuItem,\n\tZoomTo100MenuItem,\n\tZoomToFitMenuItem,\n\tZoomToSelectionMenuItem,\n} from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function DefaultMainMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup id=\"basic\">\n\t\t\t\t<EditSubmenu />\n\t\t\t\t<ViewSubmenu />\n\t\t\t\t<ExportFileContentSubMenu />\n\t\t\t\t<ExtrasGroup />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<PreferencesGroup />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ExportFileContentSubMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"export-all-as\" label=\"context-menu.export-all-as\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-svg\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-png\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function EditSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"menu.edit\">\n\t\t\t<UndoRedoGroup />\n\t\t\t<ClipboardMenuGroup />\n\t\t\t<ConversionsMenuGroup />\n\t\t\t<MiscMenuGroup />\n\t\t\t<LockGroup />\n\t\t\t<TldrawUiMenuGroup id=\"select-all\">\n\t\t\t\t<SelectAllMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MiscMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"misc\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function LockGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"lock\">\n\t\t\t<ToggleLockMenuItem />\n\t\t\t<UnlockAllMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function UndoRedoGroup() {\n\tconst canUndo = useCanUndo()\n\tconst canRedo = useCanRedo()\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"undo-redo\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" disabled={!canUndo} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" disabled={!canRedo} />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ViewSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"view\" label=\"menu.view\">\n\t\t\t<TldrawUiMenuGroup id=\"view-actions\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<ZoomTo100MenuItem />\n\t\t\t\t<ZoomToFitMenuItem />\n\t\t\t\t<ZoomToSelectionMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ExtrasGroup() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-embed\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t</>\n\t)\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function PreferencesGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"preferences\">\n\t\t\t<TldrawUiMenuSubmenu id=\"preferences\" label=\"menu.preferences\">\n\t\t\t\t<TldrawUiMenuGroup id=\"preferences-actions\">\n\t\t\t\t\t<ToggleSnapModeItem />\n\t\t\t\t\t<ToggleToolLockItem />\n\t\t\t\t\t<ToggleGridItem />\n\t\t\t\t\t<ToggleWrapModeItem />\n\t\t\t\t\t<ToggleFocusModeItem />\n\t\t\t\t\t<ToggleEdgeScrollingItem />\n\t\t\t\t\t<ToggleDynamicSizeModeItem />\n\t\t\t\t\t<TogglePasteAtCursorItem />\n\t\t\t\t\t<ToggleDebugModeItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"color-scheme\">\n\t\t\t\t\t<ColorSchemeMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"accessibility-menu\">\n\t\t\t\t\t<AccessibilityMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<LanguageMenu />\n\t\t\t<KeyboardShortcutsMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -30,13 +30,15 @@ var import_useTranslation = require("../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("./primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("./primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiPopover = require("./primitives/TldrawUiPopover");
+var import_layout = require("./primitives/layout");
 function MobileStylePanel() {
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
+  const { orientation } = (0, import_layout.useTldrawUiOrientation)();
   const relevantStyles = (0, import_useRelevantStyles.useRelevantStyles)();
   const color = relevantStyles?.get(import_editor.DefaultColorStyle);
   const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: editor.user.getIsDarkMode() });
-  const currentColor = (color?.type === "shared" ? theme[color.value] : theme.black).solid;
+  const currentColor = color?.type === "shared" ? (0, import_editor.getColorValue)(theme, color.value, "solid") : (0, import_editor.getColorValue)(theme, "black", "solid");
   const disableStylePanel = (0, import_editor.useValue)(
     "disable style panel",
     () => editor.isInAny("hand", "zoom", "eraser", "laser"),
@@ -71,7 +73,7 @@ function MobileStylePanel() {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "top", align: "end", children: StylePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanel, { isMobile: true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: orientation === "horizontal" ? "top" : "right", align: "end", children: StylePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanel, { isMobile: true }) })
   ] });
 }
 //# sourceMappingURL=MobileStylePanel.js.map

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

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

package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js

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

package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map

@@ -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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCK;AArCL,oBAA0C;AAC1C,mBAA0C;AAC1C,uBAAoC;AACpC,qBAAwC;AACxC,yBAA8B;AAC9B,wBAAsC;AACtC,kCAAqC;AACrC,4BAA+B;AAC/B,uBAAuB;AACvB,gCAAmC;AACnC,6BAAuD;AAGhD,MAAM,6BAAyB,mBAAK,SAASA,0BAAyB;AAC5E,QAAM,cAAU,2BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AAEjC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,QAAI,kDAAqB,WAAW,IAAI;AAEtE,QAAM,oBAAgB,0BAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,QAAI,yCAAsB;AAEpD,MAAI,aAAa,qCAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,gDAAC,0CAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,qCAAoB,SAC7C,4CAAC,YAAS,IAEV,4EACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,4CAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,sDAAC,gDAAmB,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,sDAAC,gDAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,qCAAoB,UAAU,CAAC,aAAa,4CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCK;AArCL,oBAA0C;AAC1C,mBAA0C;AAC1C,uBAAoC;AACpC,qBAAwC;AACxC,yBAA8B;AAC9B,wBAAsC;AACtC,kCAAqC;AACrC,4BAA+B;AAC/B,uBAAuB;AACvB,gCAAmC;AACnC,6BAAuD;AAGhD,MAAM,6BAAyB,mBAAK,SAASA,0BAAyB;AAC5E,QAAM,cAAU,2BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,kCAAc;AAEjC,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,QAAI,kDAAqB,WAAW,IAAI;AAEtE,QAAM,oBAAgB,0BAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,QAAI,yCAAsB;AAEpD,MAAI,aAAa,qCAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,gDAAC,0CAAgB,aAAY,cAAa,OAAO,IAAI,uBAAuB,GAC1E,sBAAY,aAAa,qCAAoB,SAC7C,4CAAC,YAAS,IAEV,4EACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,4CAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,QAAI,4BAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,QAAI,yBAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,sDAAC,gDAAmB,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,sDAAC,gDAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,qCAAoB,UAAU,CAAC,aAAa,4CAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
   "names": ["DefaultNavigationPanel"]
 }

package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js

@@ -35,6 +35,7 @@ var import_TldrawUiButtonCheck = require("../primitives/Button/TldrawUiButtonChe
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiButtonLabel = require("../primitives/Button/TldrawUiButtonLabel");
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
+var import_layout = require("../primitives/layout");
 var import_PageItemInput = require("./PageItemInput");
 var import_PageItemSubmenu = require("./PageItemSubmenu");
 var import_edit_pages_shared = require("./edit-pages-shared");
@@ -282,7 +283,7 @@ const DefaultPageMenu = (0, import_react.memo)(function DefaultPageMenu2() {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-page-menu__wrapper", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-page-menu__header", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-page-menu__header__title", children: msg("page-menu.title") }),
-            !isReadonlyMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
+            !isReadonlyMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.TldrawUiRow, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_TldrawUiButton.TldrawUiButton,
                 {

package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map

@@ -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": "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",
   "names": ["DefaultPageMenu", "handleKeyDown"]
 }

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js

@@ -29,6 +29,7 @@ var import_useTranslation = require("../../hooks/useTranslation/useTranslation")
 var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiIcon = require("../primitives/TldrawUiIcon");
+var import_layout = require("../primitives/layout");
 const PeopleMenuItem = (0, import_editor.track)(function PeopleMenuItem2({ userId }) {
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
@@ -47,9 +48,9 @@ const PeopleMenuItem = (0, import_editor.track)(function PeopleMenuItem2({ userI
   const youAreFollowingThem = editor.getInstanceState().followingUserId === userId;
   if (!presence) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_layout.TldrawUiRow,
     {
-      className: "tlui-people-menu__item tlui-buttons__horizontal",
+      className: "tlui-people-menu__item",
       "data-follow": youAreFollowingThem || theyAreFollowingYou,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map

@@ -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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCG;AAnCH,oBAA8C;AAC9C,mBAA4B;AAC5B,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,0BAA6B;AAEtB,MAAM,qBAAiB,qBAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,2BAAY;AAE/B,QAAM,eAAW,2BAAY,MAAM;AAEnC,QAAM,wBAAoB,0BAAY,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,0DAAC,oCAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,4CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCG;AApCH,oBAA8C;AAC9C,mBAA4B;AAC5B,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,0BAA6B;AAC7B,oBAA4B;AAErB,MAAM,qBAAiB,qBAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,2BAAY;AAE/B,QAAM,eAAW,2BAAY,MAAM;AAEnC,QAAM,wBAAoB,0BAAY,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,0DAAC,oCAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,4CAAC,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-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js

@@ -39,6 +39,7 @@ var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
+var import_layout = require("../primitives/layout");
 const UserPresenceColorPicker = (0, import_editor.track)(function UserPresenceColorPicker2() {
   const editor = (0, import_editor.useEditor)();
   const container = (0, import_editor.useContainer)();
@@ -117,7 +118,7 @@ const UserPresenceColorPicker = (0, import_editor.track)(function UserPresenceCo
         align: "start",
         side: "left",
         sideOffset: 8,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__grid", children: import_editor.USER_COLORS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.TldrawUiGrid, { children: import_editor.USER_COLORS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_TldrawUiButton.TldrawUiButton,
           {
             type: "icon",
@@ -126,7 +127,6 @@ const UserPresenceColorPicker = (0, import_editor.track)(function UserPresenceCo
             "aria-label": item,
             isActive: value === item,
             title: item,
-            className: "tlui-button-grid__button",
             style: { color: item },
             onPointerEnter: handleButtonPointerEnter,
             onPointerDown: handleButtonPointerDown,

package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx"],
-  "sourcesContent": ["import { USER_COLORS, track, useContainer, useEditor } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React, { useCallback, useRef, useState } 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'\n\nexport const UserPresenceColorPicker = track(function UserPresenceColorPicker() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst rPointing = useRef(false)\n\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst handleOpenChange = useCallback((isOpen: boolean) => {\n\t\tsetIsOpen(isOpen)\n\t}, [])\n\n\tconst value = editor.user.getColor()\n\n\tconst onValueChange = useCallback(\n\t\t(item: string) => {\n\t\t\teditor.user.updateUserPreferences({ color: item })\n\t\t\ttrackEvent('set-color', { source: 'people-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tif (value === id) return\n\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\n\t\t\tonValueChange(id)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tclassName=\"tlui-people-menu__user__color\"\n\t\t\t\t\tstyle={{ color: editor.user.getColor() }}\n\t\t\t\t\ttitle={msg('people-menu.change-color')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu tlui-people-menu__user__color-picker\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tside=\"left\"\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t>\n\t\t\t\t\t<div className={'tlui-buttons__grid'}>\n\t\t\t\t\t\t{USER_COLORS.map((item: string) => (\n\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tdata-id={item}\n\t\t\t\t\t\t\t\tdata-testid={item}\n\t\t\t\t\t\t\t\taria-label={item}\n\t\t\t\t\t\t\t\tisActive={value === item}\n\t\t\t\t\t\t\t\ttitle={item}\n\t\t\t\t\t\t\t\tclassName={'tlui-button-grid__button'}\n\t\t\t\t\t\t\t\tstyle={{ color: item }}\n\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { USER_COLORS, track, useContainer, useEditor } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React, { useCallback, useRef, useState } 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 { TldrawUiGrid } from '../primitives/layout'\n\nexport const UserPresenceColorPicker = track(function UserPresenceColorPicker() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst rPointing = useRef(false)\n\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst handleOpenChange = useCallback((isOpen: boolean) => {\n\t\tsetIsOpen(isOpen)\n\t}, [])\n\n\tconst value = editor.user.getColor()\n\n\tconst onValueChange = useCallback(\n\t\t(item: string) => {\n\t\t\teditor.user.updateUserPreferences({ color: item })\n\t\t\ttrackEvent('set-color', { source: 'people-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tif (value === id) return\n\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\n\t\t\tonValueChange(id)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tclassName=\"tlui-people-menu__user__color\"\n\t\t\t\t\tstyle={{ color: editor.user.getColor() }}\n\t\t\t\t\ttitle={msg('people-menu.change-color')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu tlui-people-menu__user__color-picker\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tside=\"left\"\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiGrid>\n\t\t\t\t\t\t{USER_COLORS.map((item: string) => (\n\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tdata-id={item}\n\t\t\t\t\t\t\t\tdata-testid={item}\n\t\t\t\t\t\t\t\taria-label={item}\n\t\t\t\t\t\t\t\tisActive={value === item}\n\t\t\t\t\t\t\t\ttitle={item}\n\t\t\t\t\t\t\t\tstyle={{ color: item }}\n\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TldrawUiGrid>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["UserPresenceColorPicker", "isOpen", "React", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp", "_Popover"]
 }