npm - tldraw - Versions diffs - 4.1.0-canary.9c36de6e611c → 4.1.0-canary.a152954244d2 - Mend

tldraw 4.1.0-canary.9c36de6e611c → 4.1.0-canary.a152954244d2

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

Files changed (225) hide show

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

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

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

@@ -231,6 +231,11 @@ class MinimapManager {
       const geometry = this.shapeGeometryCache.get(shapeId);
       if (!geometry) continue;
       const len2 = geometry.length;
+      const shape = this.editor.getShape(shapeId);
+      if (shape) {
+        const shapeUtil = this.editor.getShapeUtil(shape.type);
+        if (shapeUtil.hideInMinimap?.(shape)) continue;
+      }
       if (selectedShapes.has(shapeId)) {
         appendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry);
         selectedShapeOffset += len2;

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

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

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

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContainer, useEditor, usePeerIds, useValue } from "@tldraw/editor";
 import { Popover as _Popover } from "radix-ui";
+import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
+import { useBreakpoint } from "../../context/breakpoints.mjs";
 import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { PeopleMenuAvatar } from "./PeopleMenuAvatar.mjs";
@@ -15,10 +17,12 @@ function PeopleMenu({ children }) {
   const userColor = useValue("user", () => editor.user.getColor(), [editor]);
   const userName = useValue("user", () => editor.user.getName(), [editor]);
   const [isOpen, onOpenChange] = useMenuIsOpen("people menu");
+  const breakpoint = useBreakpoint();
+  const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5;
   if (!userIds.length) return null;
   return /* @__PURE__ */ jsxs(_Popover.Root, { onOpenChange, open: isOpen, children: [
     /* @__PURE__ */ jsx(_Popover.Trigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ jsx("button", { className: "tlui-people-menu__avatars-button", title: msg("people-menu.title"), children: /* @__PURE__ */ jsxs("div", { className: "tlui-people-menu__avatars", children: [
-      userIds.slice(-5).map((userId) => /* @__PURE__ */ jsx(PeopleMenuAvatar, { userId }, userId)),
+      userIds.slice(-maxAvatars).map((userId) => /* @__PURE__ */ jsx(PeopleMenuAvatar, { userId }, userId)),
       userIds.length > 0 && /* @__PURE__ */ jsx(
         "div",
         {
@@ -29,7 +33,7 @@ function PeopleMenu({ children }) {
           children: userName?.[0] ?? ""
         }
       ),
-      userIds.length > 5 && /* @__PURE__ */ jsx(PeopleMenuMore, { count: userIds.length - 5 })
+      userIds.length > maxAvatars && /* @__PURE__ */ jsx(PeopleMenuMore, { count: userIds.length - maxAvatars })
     ] }) }) }),
     /* @__PURE__ */ jsx(_Popover.Portal, { container, children: /* @__PURE__ */ jsx(
       _Popover.Content,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenu.tsx"],
-  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-5).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\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\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\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": "AAkCK,SAEE,KAFF;AAlCL,SAAS,cAAc,WAAW,YAAY,gBAAgB;AAC9D,SAAS,WAAW,gBAAgB;AAEpC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAC3B,QAAM,YAAY,SAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,WAAW,SAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa;AAE1D,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,qBAAC,SAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,wBAAC,SAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,8BAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,+BAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,EAAE,EAAE,IAAI,CAAC,WACvB,oBAAC,oBAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,KAAK,oBAAC,kBAAe,OAAO,QAAQ,SAAS,GAAG;AAAA,OACnE,GACD,GACD;AAAA,IACA,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,+BAAC,SAAI,WAAU,6BACd;AAAA,8BAAC,SAAI,WAAU,6BACd,8BAAC,sBAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,oBAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,oBAAC,kBAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-maxAvatars).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\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\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\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": "AAsCK,SAEE,KAFF;AAtCL,SAAS,cAAc,WAAW,YAAY,gBAAgB;AAC9D,SAAS,WAAW,gBAAgB;AAEpC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAC3B,QAAM,YAAY,SAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,WAAW,SAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa;AAC1D,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,cAAc,oBAAoB,YAAY,IAAI;AAErE,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,qBAAC,SAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,wBAAC,SAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,8BAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,+BAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,WAChC,oBAAC,oBAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,cAAc,oBAAC,kBAAe,OAAO,QAAQ,SAAS,YAAY;AAAA,OACrF,GACD,GACD;AAAA,IACA,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,+BAAC,SAAI,WAAU,6BACd;AAAA,8BAAC,SAAI,WAAU,6BACd,8BAAC,sBAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,oBAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,oBAAC,kBAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
   "names": []
 }

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

@@ -25,10 +25,13 @@ import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiSlider } from "../primitives/TldrawUiSlider.mjs";
 import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
-import { StylePanelButtonPicker } from "./StylePanelButtonPicker.mjs";
+import { StylePanelButtonPicker, StylePanelButtonPickerInline } from "./StylePanelButtonPicker.mjs";
 import { useStylePanelContext } from "./StylePanelContext.mjs";
 import { StylePanelDoubleDropdownPicker } from "./StylePanelDoubleDropdownPicker.mjs";
-import { StylePanelDropdownPicker } from "./StylePanelDropdownPicker.mjs";
+import {
+  StylePanelDropdownPicker,
+  StylePanelDropdownPickerInline
+} from "./StylePanelDropdownPicker.mjs";
 import { StylePanelSubheading } from "./StylePanelSubheading.mjs";
 function DefaultStylePanelContent() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -191,71 +194,79 @@ function StylePanelFontPicker() {
   );
 }
 function StylePanelTextAlignPicker() {
-  const { styles } = useStylePanelContext();
+  const { styles, enhancedA11yMode } = useStylePanelContext();
   const msg = useTranslation();
   const textAlign = styles.get(DefaultTextAlignStyle);
   if (textAlign === void 0) return null;
-  return /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
-    /* @__PURE__ */ jsx(
-      StylePanelButtonPicker,
-      {
-        title: msg("style-panel.align"),
-        uiType: "align",
-        style: DefaultTextAlignStyle,
-        items: STYLES.textAlign,
-        value: textAlign
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TldrawUiToolbarButton,
-      {
-        type: "icon",
-        title: msg("style-panel.vertical-align"),
-        "data-testid": "vertical-align",
-        disabled: true,
-        children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-      }
-    )
+  const title = msg("style-panel.align");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ jsx(StylePanelSubheading, { children: title }),
+    /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: title, children: [
+      /* @__PURE__ */ jsx(
+        StylePanelButtonPickerInline,
+        {
+          title,
+          uiType: "align",
+          style: DefaultTextAlignStyle,
+          items: STYLES.textAlign,
+          value: textAlign
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TldrawUiToolbarButton,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          disabled: true,
+          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+        }
+      )
+    ] })
   ] });
 }
 function StylePanelLabelAlignPicker() {
-  const { styles } = useStylePanelContext();
+  const { styles, enhancedA11yMode } = useStylePanelContext();
   const msg = useTranslation();
   const labelAlign = styles.get(DefaultHorizontalAlignStyle);
   const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle);
   if (labelAlign === void 0) return null;
-  return /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
-    /* @__PURE__ */ jsx(
-      StylePanelButtonPicker,
-      {
-        title: msg("style-panel.label-align"),
-        uiType: "align",
-        style: DefaultHorizontalAlignStyle,
-        items: STYLES.horizontalAlign,
-        value: labelAlign
-      }
-    ),
-    verticalLabelAlign === void 0 ? /* @__PURE__ */ jsx(
-      TldrawUiToolbarButton,
-      {
-        type: "icon",
-        title: msg("style-panel.vertical-align"),
-        "data-testid": "vertical-align",
-        disabled: true,
-        children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-      }
-    ) : /* @__PURE__ */ jsx(
-      StylePanelDropdownPicker,
-      {
-        type: "icon",
-        id: "geo-vertical-alignment",
-        uiType: "verticalAlign",
-        stylePanelType: "vertical-align",
-        style: DefaultVerticalAlignStyle,
-        items: STYLES.verticalAlign,
-        value: verticalLabelAlign
-      }
-    )
+  const title = msg("style-panel.label-align");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ jsx(StylePanelSubheading, { children: title }),
+    /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: title, children: [
+      /* @__PURE__ */ jsx(
+        StylePanelButtonPickerInline,
+        {
+          title,
+          uiType: "align",
+          style: DefaultHorizontalAlignStyle,
+          items: STYLES.horizontalAlign,
+          value: labelAlign
+        }
+      ),
+      verticalLabelAlign === void 0 ? /* @__PURE__ */ jsx(
+        TldrawUiToolbarButton,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          disabled: true,
+          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+        }
+      ) : /* @__PURE__ */ jsx(
+        StylePanelDropdownPickerInline,
+        {
+          type: "icon",
+          id: "geo-vertical-alignment",
+          uiType: "verticalAlign",
+          stylePanelType: "vertical-align",
+          style: DefaultVerticalAlignStyle,
+          items: STYLES.verticalAlign,
+          value: verticalLabelAlign
+        }
+      )
+    ] })
   ] });
 }
 function StylePanelGeoShapePicker() {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport { StylePanelDropdownPicker } from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.fill')}\n\t\t\tuiType=\"fill\"\n\t\t\tstyle={DefaultFillStyle}\n\t\t\titems={STYLES.fill}\n\t\t\tvalue={fill}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\titems={STYLES.textAlign}\n\t\t\t\tvalue={textAlign}\n\t\t\t/>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\tdisabled\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.label-align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\tvalue={labelAlign}\n\t\t\t/>\n\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t) : (\n\t\t\t\t<StylePanelDropdownPicker\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.fill')}\n\t\t\tuiType=\"fill\"\n\t\t\tstyle={DefaultFillStyle}\n\t\t\titems={STYLES.fill}\n\t\t\tvalue={fill}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAuCE,mBAEE,KADD,YADD;AAvCF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,WAAW;AAClB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,wBAAwB,oCAAoC;AACrE,SAAS,4BAA4B;AACrC,SAAS,sCAAsC;AAC/C;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,4BAA4B;AAG9B,SAAS,2BAA2B;AAC1C,SACC,iCACC;AAAA,yBAAC,qBACA;AAAA,0BAAC,yBAAsB;AAAA,MACvB,oBAAC,2BAAwB;AAAA,OAC1B;AAAA,IACA,qBAAC,qBACA;AAAA,0BAAC,wBAAqB;AAAA,MACtB,oBAAC,wBAAqB;AAAA,MACtB,oBAAC,wBAAqB;AAAA,OACvB;AAAA,IACA,qBAAC,qBACA;AAAA,0BAAC,wBAAqB;AAAA,MACtB,oBAAC,6BAA0B;AAAA,MAC3B,oBAAC,8BAA2B;AAAA,OAC7B;AAAA,IACA,qBAAC,qBACA;AAAA,0BAAC,4BAAyB;AAAA,MAC1B,oBAAC,6BAA0B;AAAA,MAC3B,oBAAC,6BAA0B;AAAA,MAC3B,oBAAC,0BAAuB;AAAA,OACzB;AAAA,KACD;AAEF;AAQO,SAAS,kBAAkB,EAAE,SAAS,GAA2B;AACvE,SAAO,oBAAC,SAAI,WAAU,6BAA6B,UAAS;AAC7D;AAGO,SAAS,wBAAwB;AACvC,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,OAAO,IAAI,iBAAiB;AAC1C,MAAI,UAAU,OAAW,QAAO;AAEhC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,mBAAmB;AAAA,MAC9B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAEA,MAAM,2BAA2B,CAAC,KAAK,MAAM,KAAK,MAAM,CAAC;AAElD,SAAS,0BAA0B;AACzC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,iBAAiB,IAAI,qBAAqB;AAEjE,QAAM,UAAU,SAAS,WAAW,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAC7E,QAAM,aAAa,YAAY;AAC/B,QAAM,MAAM,eAAe;AAE3B,QAAM,2BAA2B,MAAM;AAAA,IACtC,CAAC,UAAkB;AAClB,YAAM,OAAO,yBAAyB,KAAK;AAC3C,aAAO,IAAI,MAAM;AAChB,YAAI,OAAO,KAAK,QAAQ,GAAG;AAC1B,iBAAO,4BAA4B,IAAI;AAAA,QACxC;AACA,eAAO,wBAAwB,IAAI;AACnC,eAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,MACrD,CAAC;AAED,iBAAW,aAAa,EAAE,QAAQ,eAAe,IAAI,WAAW,MAAM,CAAC;AAAA,IACxE;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,MAAI,YAAY,OAAW,QAAO;AAElC,QAAM,eACL,QAAQ,SAAS,UACd,KACA,yBAAyB;AAAA,IACzB;AAAA,MAAM;AAAA,MAA0B,CAAC,qBAChC,KAAK,IAAI,mBAAmB,QAAQ,KAAK;AAAA,IAC1C;AAAA,EACD;AAEH,SACC,iCACE;AAAA,wBACA,oBAAC,wBAAsB,cAAI,qBAAqB,GAAE;AAAA,IAEnD;AAAA,MAAC;AAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAO,gBAAgB,IAAI,eAAe,yBAAyB,SAAS;AAAA,QAC5E,OAAO,QAAQ,SAAS,UAAU,sBAAsB,iBAAiB,QAAQ,KAAK;AAAA,QACtF,eAAe;AAAA,QACf,OAAO,yBAAyB,SAAS;AAAA,QACzC,OAAO,IAAI,qBAAqB;AAAA,QAChC;AAAA,QACA,mBAAmB;AAAA;AAAA,IACpB;AAAA,KACD;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,MAAM,eAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,gBAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,MAAM,eAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,gBAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,QAAQ,cAAc,IAAI,qBAAqB;AACvD,QAAM,MAAM,eAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,gBAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA,MACP,eAAe,CAAC,OAAO,UAAU;AAChC,sBAAc,OAAO,KAAK;AAC1B,cAAM,mBAAmB,OAAO,oBAAoB;AACpD,YAAI,iBAAiB,SAAS,GAAG;AAChC,gCAAsB,QAAQ,gBAAgB;AAAA,QAC/C;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,MAAM,eAAe;AAC3B,QAAM,OAAO,OAAO,IAAI,gBAAgB;AACxC,MAAI,SAAS,OAAW,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,IAAI,kBAAkB;AAAA,MAC7B,QAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,QAAQ,iBAAiB,IAAI,qBAAqB;AAC1D,QAAM,MAAM,eAAe;AAC3B,QAAM,YAAY,OAAO,IAAI,qBAAqB;AAClD,MAAI,cAAc,OAAW,QAAO;AACpC,QAAM,QAAQ,IAAI,mBAAmB;AAErC,SACC,iCACE;AAAA,wBAAoB,oBAAC,wBAAsB,iBAAM;AAAA,IAClD,qBAAC,mBAAgB,aAAY,cAAa,OAAO,OAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,QAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO,OAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,OAAO,IAAI,4BAA4B;AAAA,UACvC,eAAY;AAAA,UACZ,UAAQ;AAAA,UAER,8BAAC,sBAAmB,MAAK,yBAAwB;AAAA;AAAA,MAClD;AAAA,OACD;AAAA,KACD;AAEF;AAGO,SAAS,6BAA6B;AAC5C,QAAM,EAAE,QAAQ,iBAAiB,IAAI,qBAAqB;AAC1D,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,OAAO,IAAI,2BAA2B;AACzD,QAAM,qBAAqB,OAAO,IAAI,yBAAyB;AAC/D,MAAI,eAAe,OAAW,QAAO;AACrC,QAAM,QAAQ,IAAI,yBAAyB;AAE3C,SACC,iCACE;AAAA,wBAAoB,oBAAC,wBAAsB,iBAAM;AAAA,IAClD,qBAAC,mBAAgB,aAAY,cAAa,OAAO,OAChD;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,QAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO,OAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,MACC,uBAAuB,SACvB;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,OAAO,IAAI,4BAA4B;AAAA,UACvC,eAAY;AAAA,UACZ,UAAQ;AAAA,UAER,8BAAC,sBAAmB,MAAK,yBAAwB;AAAA;AAAA,MAClD,IAEA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,IAAG;AAAA,UACH,QAAO;AAAA,UACP,gBAAe;AAAA,UACf,OAAO;AAAA,UACP,OAAO,OAAO;AAAA,UACd,OAAO;AAAA;AAAA,MACR;AAAA,OAEF;AAAA,KACD;AAEF;AAGO,SAAS,2BAA2B;AAC1C,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,MAAM,OAAO,IAAI,gBAAgB;AACvC,MAAI,QAAQ,OAAW,QAAO;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,MAAK;AAAA,MACL,IAAG;AAAA,MACH,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,YAAY,OAAO,IAAI,mBAAmB;AAChD,MAAI,cAAc,OAAW,QAAO;AAEpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,MAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,eAAe,OAAO,IAAI,2BAA2B;AAC3D,QAAM,iBAAiB,OAAO,IAAI,6BAA6B;AAC/D,MAAI,iBAAiB,UAAa,mBAAmB,OAAW,QAAO;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,OAAO;AAAA,MACf,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,OAAO;AAAA,MACf,QAAQ;AAAA,MACR,QAAO;AAAA,MACP,QAAO;AAAA;AAAA,EACR;AAEF;AAGO,SAAS,yBAAyB;AACxC,QAAM,EAAE,OAAO,IAAI,qBAAqB;AACxC,QAAM,SAAS,OAAO,IAAI,oBAAoB;AAC9C,MAAI,WAAW,OAAW,QAAO;AAEjC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,IAAG;AAAA,MACH,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,OAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACR;AAEF;",
   "names": []
 }

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

@@ -18,7 +18,14 @@ import {
 import { TldrawUiGrid, TldrawUiRow } from "../primitives/layout.mjs";
 import { useStylePanelContext } from "./StylePanelContext.mjs";
 import { StylePanelSubheading } from "./StylePanelSubheading.mjs";
-const StylePanelButtonPicker = memo(function StylePanelButtonPicker2(props) {
+function StylePanelButtonPickerInner(props) {
+  const { enhancedA11yMode } = useStylePanelContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ jsx(StylePanelSubheading, { children: props.title }),
+    /* @__PURE__ */ jsx(TldrawUiToolbar, { label: props.title, children: /* @__PURE__ */ jsx(StylePanelButtonPickerInline, { ...props }) })
+  ] });
+}
+function StylePanelButtonPickerInlineInner(props) {
   const ctx = useStylePanelContext();
   const {
     uiType,
@@ -84,52 +91,52 @@ const StylePanelButtonPicker = memo(function StylePanelButtonPicker2(props) {
     };
   }, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
   const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ctx.enhancedA11yMode && /* @__PURE__ */ jsx(StylePanelSubheading, { children: title }),
-    /* @__PURE__ */ jsx(TldrawUiToolbar, { label: title, children: /* @__PURE__ */ jsx(
-      TldrawUiToolbarToggleGroup,
-      {
-        "data-testid": `style.${uiType}`,
-        type: "single",
-        value: value.type === "shared" ? value.value : void 0,
-        asChild: true,
-        children: /* @__PURE__ */ jsx(Layout, { children: items.map((item) => {
-          const isActive = value.type === "shared" && value.value === item.value;
-          const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
-          return /* @__PURE__ */ jsx(
-            TldrawUiToolbarToggleItem,
-            {
-              type: "icon",
-              "data-id": item.value,
-              "data-testid": `style.${uiType}.${item.value}`,
-              "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
-              tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { children: label }),
-                isActive ? /* @__PURE__ */ jsxs("div", { children: [
-                  "(",
-                  msg("style-panel.selected"),
-                  ")"
-                ] }) : null
-              ] }),
-              value: item.value,
-              "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
-              "data-isactive": isActive,
-              title: label,
-              style: style === DefaultColorStyle ? { color: getColorValue(theme, item.value, "solid") } : void 0,
-              onPointerEnter: handleButtonPointerEnter,
-              onPointerDown: handleButtonPointerDown,
-              onPointerUp: handleButtonPointerUp,
-              onClick: handleButtonClick,
-              children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
-            },
-            item.value
-          );
-        }) })
-      }
-    ) })
-  ] });
-});
+  return /* @__PURE__ */ jsx(
+    TldrawUiToolbarToggleGroup,
+    {
+      "data-testid": `style.${uiType}`,
+      type: "single",
+      value: value.type === "shared" ? value.value : null,
+      asChild: true,
+      children: /* @__PURE__ */ jsx(Layout, { children: items.map((item) => {
+        const isActive = value.type === "shared" && value.value === item.value;
+        const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
+        return /* @__PURE__ */ jsx(
+          TldrawUiToolbarToggleItem,
+          {
+            type: "icon",
+            "data-id": item.value,
+            "data-testid": `style.${uiType}.${item.value}`,
+            "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
+            tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { children: label }),
+              isActive ? /* @__PURE__ */ jsxs("div", { children: [
+                "(",
+                msg("style-panel.selected"),
+                ")"
+              ] }) : null
+            ] }),
+            value: item.value,
+            "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
+            "data-isactive": isActive,
+            title: label,
+            style: style === DefaultColorStyle ? { color: getColorValue(theme, item.value, "solid") } : void 0,
+            onPointerEnter: handleButtonPointerEnter,
+            onPointerDown: handleButtonPointerDown,
+            onPointerUp: handleButtonPointerUp,
+            onClick: handleButtonClick,
+            children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
+          },
+          item.value
+        );
+      }) })
+    }
+  );
+}
+const StylePanelButtonPicker = memo(StylePanelButtonPickerInner);
+const StylePanelButtonPickerInline = memo(StylePanelButtonPickerInlineInner);
 export {
-  StylePanelButtonPicker
+  StylePanelButtonPicker,
+  StylePanelButtonPickerInline
 };
 //# sourceMappingURL=StylePanelButtonPicker.mjs.map