npm - tldraw - Versions diffs - 3.16.0-canary.e5e61b17cef3 → 3.16.0-canary.e618c2fbc95d - Mend

tldraw 3.16.0-canary.e5e61b17cef3 → 3.16.0-canary.e618c2fbc95d

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx"],
-  "sourcesContent": ["import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'\nimport { AccessibilityMenu } from '../AccessibilityMenu'\nimport { ColorSchemeMenu } from '../ColorSchemeMenu'\nimport { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'\nimport { LanguageMenu } from '../LanguageMenu'\nimport {\n\tClipboardMenuGroup,\n\tConversionsMenuGroup,\n\tConvertToBookmarkMenuItem,\n\tConvertToEmbedMenuItem,\n\tEditLinkMenuItem,\n\tFitFrameToContentMenuItem,\n\tFlattenMenuItem,\n\tGroupMenuItem,\n\tRemoveFrameMenuItem,\n\tSelectAllMenuItem,\n\tToggleAutoSizeMenuItem,\n\tToggleDebugModeItem,\n\tToggleDynamicSizeModeItem,\n\tToggleEdgeScrollingItem,\n\tToggleFocusModeItem,\n\tToggleGridItem,\n\tToggleLockMenuItem,\n\tTogglePasteAtCursorItem,\n\tToggleSnapModeItem,\n\tToggleToolLockItem,\n\tToggleTransparentBgMenuItem,\n\tToggleWrapModeItem,\n\tUngroupMenuItem,\n\tUnlockAllMenuItem,\n\tZoomTo100MenuItem,\n\tZoomToFitMenuItem,\n\tZoomToSelectionMenuItem,\n} from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function DefaultMainMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup id=\"basic\">\n\t\t\t\t<EditSubmenu />\n\t\t\t\t<ViewSubmenu />\n\t\t\t\t<ExportFileContentSubMenu />\n\t\t\t\t<ExtrasGroup />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<PreferencesGroup />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ExportFileContentSubMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"export-all-as\" label=\"context-menu.export-all-as\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-svg\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-png\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function EditSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"menu.edit\">\n\t\t\t<UndoRedoGroup />\n\t\t\t<ClipboardMenuGroup />\n\t\t\t<ConversionsMenuGroup />\n\t\t\t<MiscMenuGroup />\n\t\t\t<LockGroup />\n\t\t\t<TldrawUiMenuGroup id=\"select-all\">\n\t\t\t\t<SelectAllMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MiscMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"misc\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function LockGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"lock\">\n\t\t\t<ToggleLockMenuItem />\n\t\t\t<UnlockAllMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function UndoRedoGroup() {\n\tconst canUndo = useCanUndo()\n\tconst canRedo = useCanRedo()\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"undo-redo\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" disabled={!canUndo} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" disabled={!canRedo} />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ViewSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"view\" label=\"menu.view\">\n\t\t\t<TldrawUiMenuGroup id=\"view-actions\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<ZoomTo100MenuItem />\n\t\t\t\t<ZoomToFitMenuItem />\n\t\t\t\t<ZoomToSelectionMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ExtrasGroup() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-embed\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t</>\n\t)\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function PreferencesGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"preferences\">\n\t\t\t<TldrawUiMenuSubmenu id=\"preferences\" label=\"menu.preferences\">\n\t\t\t\t<TldrawUiMenuGroup id=\"preferences-actions\">\n\t\t\t\t\t<ToggleSnapModeItem />\n\t\t\t\t\t<ToggleToolLockItem />\n\t\t\t\t\t<ToggleGridItem />\n\t\t\t\t\t<ToggleWrapModeItem />\n\t\t\t\t\t<ToggleFocusModeItem />\n\t\t\t\t\t<ToggleEdgeScrollingItem />\n\t\t\t\t\t<ToggleDynamicSizeModeItem />\n\t\t\t\t\t<TogglePasteAtCursorItem />\n\t\t\t\t\t<ToggleDebugModeItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"color-scheme\">\n\t\t\t\t\t<ColorSchemeMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"accessibility-menu\">\n\t\t\t\t\t<AccessibilityMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<LanguageMenu />\n\t\t\t<KeyboardShortcutsMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'\nimport { AccessibilityMenu } from '../AccessibilityMenu'\nimport { ColorSchemeMenu } from '../ColorSchemeMenu'\nimport { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'\nimport { InputModeMenu } from '../InputModeMenu'\nimport { LanguageMenu } from '../LanguageMenu'\nimport {\n\tClipboardMenuGroup,\n\tConversionsMenuGroup,\n\tConvertToBookmarkMenuItem,\n\tConvertToEmbedMenuItem,\n\tEditLinkMenuItem,\n\tFitFrameToContentMenuItem,\n\tFlattenMenuItem,\n\tGroupMenuItem,\n\tRemoveFrameMenuItem,\n\tSelectAllMenuItem,\n\tToggleAutoSizeMenuItem,\n\tToggleDebugModeItem,\n\tToggleDynamicSizeModeItem,\n\tToggleEdgeScrollingItem,\n\tToggleFocusModeItem,\n\tToggleGridItem,\n\tToggleLockMenuItem,\n\tTogglePasteAtCursorItem,\n\tToggleSnapModeItem,\n\tToggleToolLockItem,\n\tToggleTransparentBgMenuItem,\n\tToggleWrapModeItem,\n\tUngroupMenuItem,\n\tUnlockAllMenuItem,\n\tZoomTo100MenuItem,\n\tZoomToFitMenuItem,\n\tZoomToSelectionMenuItem,\n} from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'\n\n/** @public @react */\nexport function DefaultMainMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuGroup id=\"basic\">\n\t\t\t\t<EditSubmenu />\n\t\t\t\t<ViewSubmenu />\n\t\t\t\t<ExportFileContentSubMenu />\n\t\t\t\t<ExtrasGroup />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<PreferencesGroup />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ExportFileContentSubMenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"export-all-as\" label=\"context-menu.export-all-as\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-svg\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-all-as-png\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"export-all-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function EditSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"menu.edit\">\n\t\t\t<UndoRedoGroup />\n\t\t\t<ClipboardMenuGroup />\n\t\t\t<ConversionsMenuGroup />\n\t\t\t<MiscMenuGroup />\n\t\t\t<LockGroup />\n\t\t\t<TldrawUiMenuGroup id=\"select-all\">\n\t\t\t\t<SelectAllMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MiscMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"misc\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function LockGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"lock\">\n\t\t\t<ToggleLockMenuItem />\n\t\t\t<UnlockAllMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function UndoRedoGroup() {\n\tconst canUndo = useCanUndo()\n\tconst canRedo = useCanRedo()\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"undo-redo\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"undo\" disabled={!canUndo} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"redo\" disabled={!canRedo} />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ViewSubmenu() {\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"view\" label=\"menu.view\">\n\t\t\t<TldrawUiMenuGroup id=\"view-actions\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-in\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"zoom-out\" />\n\t\t\t\t<ZoomTo100MenuItem />\n\t\t\t\t<ZoomToFitMenuItem />\n\t\t\t\t<ZoomToSelectionMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ExtrasGroup() {\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-embed\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"insert-media\" />\n\t\t</>\n\t)\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function PreferencesGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"preferences\">\n\t\t\t<TldrawUiMenuSubmenu id=\"preferences\" label=\"menu.preferences\">\n\t\t\t\t<TldrawUiMenuGroup id=\"preferences-actions\">\n\t\t\t\t\t<ToggleSnapModeItem />\n\t\t\t\t\t<ToggleToolLockItem />\n\t\t\t\t\t<ToggleGridItem />\n\t\t\t\t\t<ToggleWrapModeItem />\n\t\t\t\t\t<ToggleFocusModeItem />\n\t\t\t\t\t<ToggleEdgeScrollingItem />\n\t\t\t\t\t<ToggleDynamicSizeModeItem />\n\t\t\t\t\t<TogglePasteAtCursorItem />\n\t\t\t\t\t<ToggleDebugModeItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"input-mode\">\n\t\t\t\t\t<InputModeMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"color-scheme\">\n\t\t\t\t\t<ColorSchemeMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"accessibility-menu\">\n\t\t\t\t\t<AccessibilityMenu />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<LanguageMenu />\n\t\t\t<KeyboardShortcutsMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -154,7 +154,7 @@ function DefaultMinimap() {
         type: "pointer",
         target: "canvas",
         name: "pointer_move",
-        ...(0, import_editor.getPointerInfo)(e),
+        ...(0, import_editor.getPointerInfo)(editor, e),
         point: screenPoint,
         isPen: editor.getInstanceState().isPenMode
       };
@@ -191,6 +191,7 @@ function DefaultMinimap() {
     {
       role: "img",
       "aria-label": msg("navigation-zone.minimap"),
+      "data-testid": "minimap.canvas",
       ref: rCanvas,
       className: "tlui-minimap__canvas",
       onDoubleClick,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Minimap/DefaultMinimap.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tTLPointerEventInfo,\n\tVec,\n\tgetPointerInfo,\n\tisAccelKey,\n\tnormalizeWheel,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseIsDarkMode,\n} from '@tldraw/editor'\nimport * as React from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MinimapManager } from './MinimapManager'\n\n/** @public @react */\nexport function DefaultMinimap() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null!)\n\tconst rPointing = React.useRef(false)\n\n\tconst minimapRef = React.useRef<MinimapManager>()\n\n\tReact.useEffect(() => {\n\t\ttry {\n\t\t\tconst minimap = new MinimapManager(editor, rCanvas.current, container)\n\t\t\tminimapRef.current = minimap\n\t\t\treturn minimapRef.current.close\n\t\t} catch (e) {\n\t\t\teditor.annotateError(e, {\n\t\t\t\torigin: 'minimap',\n\t\t\t\twillCrashApp: false,\n\t\t\t})\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\tthrow e\n\t\t\t})\n\t\t}\n\t}, [editor, container])\n\n\tconst onDoubleClick = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLCanvasElement>) => {\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\t\t\tif (!minimapRef.current) return\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\tminimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)\n\n\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerDown = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst elm = e.currentTarget\n\t\t\tsetPointerCapture(elm, e)\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\trPointing.current = true\n\n\t\t\tminimapRef.current.isInViewport = false\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst _vpPageBounds = editor.getViewportPageBounds()\n\t\t\tconst commonBounds = minimapRef.current.getContentPageBounds()\n\t\t\tconst allowedBounds = new Box(\n\t\t\t\tcommonBounds.x - _vpPageBounds.width / 2,\n\t\t\t\tcommonBounds.y - _vpPageBounds.height / 2,\n\t\t\t\tcommonBounds.width + _vpPageBounds.width,\n\t\t\t\tcommonBounds.height + _vpPageBounds.height\n\t\t\t)\n\n\t\t\t// If we clicked inside of the allowed area, but outside of the viewport\n\t\t\tif (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)\n\t\t\t\tconst delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)\n\t\t\t\tconst pagePoint = Vec.Add(point, delta)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(pagePoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(point)\n\t\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t\t} else {\n\t\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\t\te.clientX,\n\t\t\t\t\te.clientY,\n\t\t\t\t\tfalse,\n\t\t\t\t\ttrue\n\t\t\t\t)\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(_vpPageBounds.center)\n\t\t\t}\n\n\t\t\tfunction release(e: PointerEvent) {\n\t\t\t\tif (elm) {\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\t\t\t\trPointing.current = false\n\t\t\t\tdocument.body.removeEventListener('pointerup', release)\n\t\t\t}\n\n\t\t\tdocument.body.addEventListener('pointerup', release)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerMove = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\te.shiftKey,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tif (rPointing.current) {\n\t\t\t\tif (minimapRef.current.isInViewport) {\n\t\t\t\t\tconst delta = minimapRef.current.originPagePoint\n\t\t\t\t\t\t.clone()\n\t\t\t\t\t\t.sub(minimapRef.current.originPageCenter)\n\t\t\t\t\teditor.centerOnPoint(Vec.Sub(point, delta))\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\teditor.centerOnPoint(point)\n\t\t\t}\n\n\t\t\tconst pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)\n\n\t\t\tconst screenPoint = editor.pageToScreen(pagePoint)\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t\tpoint: screenPoint,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onWheel = React.useCallback(\n\t\t(e: React.WheelEvent<HTMLCanvasElement>) => {\n\t\t\tconst offset = normalizeWheel(e)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta: offset,\n\t\t\t\tpoint: new Vec(e.clientX, e.clientY),\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst isDarkMode = useIsDarkMode()\n\n\tReact.useEffect(() => {\n\t\t// need to wait a tick for next theme css to be applied\n\t\t// otherwise the minimap will render with the wrong colors\n\t\teditor.timers.setTimeout(() => {\n\t\t\tminimapRef.current?.updateColors()\n\t\t\tminimapRef.current?.render()\n\t\t})\n\t}, [isDarkMode, editor])\n\n\treturn (\n\t\t<div className=\"tlui-minimap\">\n\t\t\t<canvas\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label={msg('navigation-zone.minimap')}\n\t\t\t\tref={rCanvas}\n\t\t\t\tclassName=\"tlui-minimap__canvas\"\n\t\t\t\tonDoubleClick={onDoubleClick}\n\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\tonWheelCapture={onWheel}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tTLPointerEventInfo,\n\tVec,\n\tgetPointerInfo,\n\tisAccelKey,\n\tnormalizeWheel,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseIsDarkMode,\n} from '@tldraw/editor'\nimport * as React from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MinimapManager } from './MinimapManager'\n\n/** @public @react */\nexport function DefaultMinimap() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null!)\n\tconst rPointing = React.useRef(false)\n\n\tconst minimapRef = React.useRef<MinimapManager>()\n\n\tReact.useEffect(() => {\n\t\ttry {\n\t\t\tconst minimap = new MinimapManager(editor, rCanvas.current, container)\n\t\t\tminimapRef.current = minimap\n\t\t\treturn minimapRef.current.close\n\t\t} catch (e) {\n\t\t\teditor.annotateError(e, {\n\t\t\t\torigin: 'minimap',\n\t\t\t\twillCrashApp: false,\n\t\t\t})\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\tthrow e\n\t\t\t})\n\t\t}\n\t}, [editor, container])\n\n\tconst onDoubleClick = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLCanvasElement>) => {\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\t\t\tif (!minimapRef.current) return\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\tminimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)\n\n\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerDown = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst elm = e.currentTarget\n\t\t\tsetPointerCapture(elm, e)\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\trPointing.current = true\n\n\t\t\tminimapRef.current.isInViewport = false\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst _vpPageBounds = editor.getViewportPageBounds()\n\t\t\tconst commonBounds = minimapRef.current.getContentPageBounds()\n\t\t\tconst allowedBounds = new Box(\n\t\t\t\tcommonBounds.x - _vpPageBounds.width / 2,\n\t\t\t\tcommonBounds.y - _vpPageBounds.height / 2,\n\t\t\t\tcommonBounds.width + _vpPageBounds.width,\n\t\t\t\tcommonBounds.height + _vpPageBounds.height\n\t\t\t)\n\n\t\t\t// If we clicked inside of the allowed area, but outside of the viewport\n\t\t\tif (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)\n\t\t\t\tconst delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)\n\t\t\t\tconst pagePoint = Vec.Add(point, delta)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(pagePoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(point)\n\t\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t\t} else {\n\t\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\t\te.clientX,\n\t\t\t\t\te.clientY,\n\t\t\t\t\tfalse,\n\t\t\t\t\ttrue\n\t\t\t\t)\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(_vpPageBounds.center)\n\t\t\t}\n\n\t\t\tfunction release(e: PointerEvent) {\n\t\t\t\tif (elm) {\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\t\t\t\trPointing.current = false\n\t\t\t\tdocument.body.removeEventListener('pointerup', release)\n\t\t\t}\n\n\t\t\tdocument.body.addEventListener('pointerup', release)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerMove = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\te.shiftKey,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tif (rPointing.current) {\n\t\t\t\tif (minimapRef.current.isInViewport) {\n\t\t\t\t\tconst delta = minimapRef.current.originPagePoint\n\t\t\t\t\t\t.clone()\n\t\t\t\t\t\t.sub(minimapRef.current.originPageCenter)\n\t\t\t\t\teditor.centerOnPoint(Vec.Sub(point, delta))\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\teditor.centerOnPoint(point)\n\t\t\t}\n\n\t\t\tconst pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)\n\n\t\t\tconst screenPoint = editor.pageToScreen(pagePoint)\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\tpoint: screenPoint,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onWheel = React.useCallback(\n\t\t(e: React.WheelEvent<HTMLCanvasElement>) => {\n\t\t\tconst offset = normalizeWheel(e)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta: offset,\n\t\t\t\tpoint: new Vec(e.clientX, e.clientY),\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst isDarkMode = useIsDarkMode()\n\n\tReact.useEffect(() => {\n\t\t// need to wait a tick for next theme css to be applied\n\t\t// otherwise the minimap will render with the wrong colors\n\t\teditor.timers.setTimeout(() => {\n\t\t\tminimapRef.current?.updateColors()\n\t\t\tminimapRef.current?.render()\n\t\t})\n\t}, [isDarkMode, editor])\n\n\treturn (\n\t\t<div className=\"tlui-minimap\">\n\t\t\t<canvas\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label={msg('navigation-zone.minimap')}\n\t\t\t\tdata-testid=\"minimap.canvas\"\n\t\t\t\tref={rCanvas}\n\t\t\t\tclassName=\"tlui-minimap__canvas\"\n\t\t\t\tonDoubleClick={onDoubleClick}\n\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\tonWheelCapture={onWheel}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2MG;AA3MH,oBAYO;AACP,YAAuB;AACvB,4BAA+B;AAC/B,4BAA+B;AAGxB,SAAS,iBAAiB;AAChC,QAAM,aAAS,yBAAU;AACzB,QAAM,gBAAY,4BAAa;AAC/B,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAU,MAAM,OAA0B,IAAK;AACrD,QAAM,YAAY,MAAM,OAAO,KAAK;AAEpC,QAAM,aAAa,MAAM,OAAuB;AAEhD,QAAM,UAAU,MAAM;AACrB,QAAI;AACH,YAAM,UAAU,IAAI,qCAAe,QAAQ,QAAQ,SAAS,SAAS;AACrE,iBAAW,UAAU;AACrB,aAAO,WAAW,QAAQ;AAAA,IAC3B,SAAS,GAAG;AACX,aAAO,cAAc,GAAG;AAAA,QACvB,QAAQ;AAAA,QACR,cAAc;AAAA,MACf,CAAC;AACD,aAAO,OAAO,WAAW,MAAM;AAC9B,cAAM;AAAA,MACP,CAAC;AAAA,IACF;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,QAAM,gBAAgB,MAAM;AAAA,IAC3B,CAAC,MAA2C;AAC3C,UAAI,CAAC,OAAO,uBAAuB,EAAE,KAAM;AAC3C,UAAI,CAAC,WAAW,QAAS;AAEzB,YAAM,QAAQ,WAAW,QAAQ;AAAA,QAChC,EAAE;AAAA,QACF,EAAE;AAAA,QACF;AAAA,QACA;AAAA,MACD;AAEA,YAAM,eAAe,WAAW,QAAQ;AAAA,QACvC,EAAE;AAAA,QACF,EAAE;AAAA,QACF;AAAA,QACA;AAAA,MACD;AAEA,iBAAW,QAAQ,gBAAgB,MAAM,YAAY;AACrD,iBAAW,QAAQ,iBAAiB,MAAM,OAAO,sBAAsB,EAAE,MAAM;AAE/E,aAAO,cAAc,OAAO,EAAE,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB,EAAE,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,gBAAgB,MAAM;AAAA,IAC3B,CAAC,MAA6C;AAC7C,UAAI,CAAC,WAAW,QAAS;AACzB,YAAM,MAAM,EAAE;AACd,2CAAkB,KAAK,CAAC;AACxB,UAAI,CAAC,OAAO,uBAAuB,EAAE,KAAM;AAE3C,gBAAU,UAAU;AAEpB,iBAAW,QAAQ,eAAe;AAElC,YAAM,QAAQ,WAAW,QAAQ;AAAA,QAChC,EAAE;AAAA,QACF,EAAE;AAAA,QACF;AAAA,QACA;AAAA,MACD;AAEA,YAAM,gBAAgB,OAAO,sBAAsB;AACnD,YAAM,eAAe,WAAW,QAAQ,qBAAqB;AAC7D,YAAM,gBAAgB,IAAI;AAAA,QACzB,aAAa,IAAI,cAAc,QAAQ;AAAA,QACvC,aAAa,IAAI,cAAc,SAAS;AAAA,QACxC,aAAa,QAAQ,cAAc;AAAA,QACnC,aAAa,SAAS,cAAc;AAAA,MACrC;AAGA,UAAI,cAAc,cAAc,KAAK,KAAK,CAAC,cAAc,cAAc,KAAK,GAAG;AAC9E,mBAAW,QAAQ,eAAe,cAAc,cAAc,KAAK;AACnE,cAAM,QAAQ,kBAAI,IAAI,cAAc,QAAQ,cAAc,KAAK;AAC/D,cAAM,YAAY,kBAAI,IAAI,OAAO,KAAK;AACtC,mBAAW,QAAQ,gBAAgB,MAAM,SAAS;AAClD,mBAAW,QAAQ,iBAAiB,MAAM,KAAK;AAC/C,eAAO,cAAc,OAAO,EAAE,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB,EAAE,CAAC;AAAA,MAC1F,OAAO;AACN,cAAM,eAAe,WAAW,QAAQ;AAAA,UACvC,EAAE;AAAA,UACF,EAAE;AAAA,UACF;AAAA,UACA;AAAA,QACD;AACA,mBAAW,QAAQ,eAAe,cAAc,cAAc,YAAY;AAC1E,mBAAW,QAAQ,gBAAgB,MAAM,YAAY;AACrD,mBAAW,QAAQ,iBAAiB,MAAM,cAAc,MAAM;AAAA,MAC/D;AAEA,eAAS,QAAQA,IAAiB;AACjC,YAAI,KAAK;AACR,mDAAsB,KAAKA,EAAC;AAAA,QAC7B;AACA,kBAAU,UAAU;AACpB,iBAAS,KAAK,oBAAoB,aAAa,OAAO;AAAA,MACvD;AAEA,eAAS,KAAK,iBAAiB,aAAa,OAAO;AAAA,IACpD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,gBAAgB,MAAM;AAAA,IAC3B,CAAC,MAA6C;AAC7C,UAAI,CAAC,WAAW,QAAS;AACzB,YAAM,QAAQ,WAAW,QAAQ;AAAA,QAChC,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF;AAAA,MACD;AAEA,UAAI,UAAU,SAAS;AACtB,YAAI,WAAW,QAAQ,cAAc;AACpC,gBAAM,QAAQ,WAAW,QAAQ,gBAC/B,MAAM,EACN,IAAI,WAAW,QAAQ,gBAAgB;AACzC,iBAAO,cAAc,kBAAI,IAAI,OAAO,KAAK,CAAC;AAC1C;AAAA,QACD;AAEA,eAAO,cAAc,KAAK;AAAA,MAC3B;AAEA,YAAM,YAAY,WAAW,QAAQ,oBAAoB,EAAE,SAAS,EAAE,OAAO;AAE7E,YAAM,cAAc,OAAO,aAAa,SAAS;AAEjD,YAAM,OAA2B;AAAA,QAChC,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAG,8BAAe,QAAQ,CAAC;AAAA,QAC3B,OAAO;AAAA,QACP,OAAO,OAAO,iBAAiB,EAAE;AAAA,MAClC;AAEA,aAAO,SAAS,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,UAAU,MAAM;AAAA,IACrB,CAAC,MAA2C;AAC3C,YAAM,aAAS,8BAAe,CAAC;AAE/B,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO,IAAI,kBAAI,EAAE,SAAS,EAAE,OAAO;AAAA,QACnC,UAAU,EAAE;AAAA,QACZ,QAAQ,EAAE;AAAA,QACV,SAAS,EAAE,WAAW,EAAE;AAAA,QACxB,SAAS,EAAE;AAAA,QACX,cAAU,0BAAW,CAAC;AAAA,MACvB,CAAC;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,iBAAa,6BAAc;AAEjC,QAAM,UAAU,MAAM;AAGrB,WAAO,OAAO,WAAW,MAAM;AAC9B,iBAAW,SAAS,aAAa;AACjC,iBAAW,SAAS,OAAO;AAAA,IAC5B,CAAC;AAAA,EACF,GAAG,CAAC,YAAY,MAAM,CAAC;AAEvB,SACC,4CAAC,SAAI,WAAU,gBACd;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,IAAI,yBAAyB;AAAA,MACzC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA;AAAA,EACjB,GACD;AAEF;",
   "names": ["e"]
 }

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

@@ -414,7 +414,7 @@ const DefaultPageMenu = (0, import_react.memo)(function DefaultPageMenu2() {
                             if (e.key === "Enter") {
                               if (page.id === currentPage.id) {
                                 toggleEditing();
-                                (0, import_editor.stopEventPropagation)(e);
+                                editor.markEventAsHandled(e);
                               }
                             }
                           },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/PageMenu/DefaultPageMenu.tsx"],
-  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<TldrawUiRow>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</TldrawUiRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<TldrawUiRow>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</TldrawUiRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["DefaultPageMenu", "handleKeyDown"]
 }

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

@@ -44,7 +44,9 @@ const DefaultStylePanel = (0, import_react.memo)(function DefaultStylePanel2({
   children
 }) {
   const editor = (0, import_editor.useEditor)();
-  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
+  const enhancedA11yMode = (0, import_editor.useValue)("enhancedA11yMode", () => editor.user.getEnhancedA11yMode(), [
+    editor
+  ]);
   const ref = (0, import_react.useRef)(null);
   (0, import_editor.usePassThroughWheelEvents)(ref);
   const handlePointerOut = (0, import_react.useCallback)(() => {
@@ -76,7 +78,7 @@ const DefaultStylePanel = (0, import_react.memo)(function DefaultStylePanel2({
       "data-testid": "style.panel",
       className: (0, import_classnames.default)("tlui-style-panel", { "tlui-style-panel__wrapper": !isMobile }),
       "data-ismobile": isMobile,
-      "data-show-ui-labels": showUiLabels,
+      "data-enhanced-a11y-mode": enhancedA11yMode,
       onPointerLeave: handlePointerOut,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelContext.StylePanelContextProvider, { styles, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultStylePanelContent.DefaultStylePanelContent, {}) })
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanel.tsx"],
-  "sourcesContent": ["import {\n\tReadonlySharedStyleMap,\n\tuseEditor,\n\tusePassThroughWheelEvents,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\nimport { StylePanelContextProvider } from './StylePanelContext'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tstyles?: ReadonlySharedStyleMap | null\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\n\tstyles,\n\tchildren,\n}: TLUiStylePanelProps) {\n\tconst editor = useEditor()\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tconst defaultStyles = useRelevantStyles()\n\tif (styles === undefined) {\n\t\tstyles = defaultStyles\n\t}\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && ref.current?.contains(document.activeElement)) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t}\n\n\t\tconst stylePanelContainerEl = ref.current\n\t\tstylePanelContainerEl?.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tstylePanelContainerEl?.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [editor])\n\n\treturn (\n\t\tstyles && (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"style.panel\"\n\t\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\t\tdata-ismobile={isMobile}\n\t\t\t\tdata-show-ui-labels={showUiLabels}\n\t\t\t\tonPointerLeave={handlePointerOut}\n\t\t\t>\n\t\t\t\t<StylePanelContextProvider styles={styles}>\n\t\t\t\t\t{children ?? <DefaultStylePanelContent />}\n\t\t\t\t</StylePanelContextProvider>\n\t\t\t</div>\n\t\t)\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoEkB;AApElB,oBAKO;AACP,wBAAuB;AACvB,mBAAgE;AAChE,+BAAkC;AAClC,sCAAyC;AACzC,+BAA0C;AAUnC,MAAM,wBAAoB,mBAAK,SAASA,mBAAkB;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,aAAS,yBAAU;AACzB,QAAM,mBAAe,wBAAS,gBAAgB,MAAM,OAAO,KAAK,gBAAgB,GAAG,CAAC,MAAM,CAAC;AAE3F,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,uBAAmB,0BAAY,MAAM;AAC1C,QAAI,CAAC,UAAU;AACd,aAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,QAAM,oBAAgB,4CAAkB;AACxC,MAAI,WAAW,QAAW;AACzB,aAAS;AAAA,EACV;AAEA,8BAAU,MAAM;AACf,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,YAAY,IAAI,SAAS,SAAS,SAAS,aAAa,GAAG;AAC5E,cAAM,gBAAgB;AACtB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAEA,UAAM,wBAAwB,IAAI;AAClC,2BAAuB,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACnF,WAAO,MAAM;AACZ,6BAAuB,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACvF;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,UACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,eAAW,kBAAAC,SAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAEhB,sDAAC,sDAA0B,QACzB,sBAAY,4CAAC,4DAAyB,GACxC;AAAA;AAAA,EACD;AAGH,CAAC;",
+  "sourcesContent": ["import {\n\tReadonlySharedStyleMap,\n\tuseEditor,\n\tusePassThroughWheelEvents,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\nimport { StylePanelContextProvider } from './StylePanelContext'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tstyles?: ReadonlySharedStyleMap | null\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\n\tstyles,\n\tchildren,\n}: TLUiStylePanelProps) {\n\tconst editor = useEditor()\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tconst defaultStyles = useRelevantStyles()\n\tif (styles === undefined) {\n\t\tstyles = defaultStyles\n\t}\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && ref.current?.contains(document.activeElement)) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t}\n\n\t\tconst stylePanelContainerEl = ref.current\n\t\tstylePanelContainerEl?.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tstylePanelContainerEl?.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [editor])\n\n\treturn (\n\t\tstyles && (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"style.panel\"\n\t\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\t\tdata-ismobile={isMobile}\n\t\t\t\tdata-enhanced-a11y-mode={enhancedA11yMode}\n\t\t\t\tonPointerLeave={handlePointerOut}\n\t\t\t>\n\t\t\t\t<StylePanelContextProvider styles={styles}>\n\t\t\t\t\t{children ?? <DefaultStylePanelContent />}\n\t\t\t\t</StylePanelContextProvider>\n\t\t\t</div>\n\t\t)\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEkB;AAtElB,oBAKO;AACP,wBAAuB;AACvB,mBAAgE;AAChE,+BAAkC;AAClC,sCAAyC;AACzC,+BAA0C;AAUnC,MAAM,wBAAoB,mBAAK,SAASA,mBAAkB;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,aAAS,yBAAU;AACzB,QAAM,uBAAmB,wBAAS,oBAAoB,MAAM,OAAO,KAAK,oBAAoB,GAAG;AAAA,IAC9F;AAAA,EACD,CAAC;AAED,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,uBAAmB,0BAAY,MAAM;AAC1C,QAAI,CAAC,UAAU;AACd,aAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,QAAM,oBAAgB,4CAAkB;AACxC,MAAI,WAAW,QAAW;AACzB,aAAS;AAAA,EACV;AAEA,8BAAU,MAAM;AACf,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,YAAY,IAAI,SAAS,SAAS,SAAS,aAAa,GAAG;AAC5E,cAAM,gBAAgB;AACtB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAEA,UAAM,wBAAwB,IAAI;AAClC,2BAAuB,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACnF,WAAO,MAAM;AACZ,6BAAuB,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACvF;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,UACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,eAAW,kBAAAC,SAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,2BAAyB;AAAA,MACzB,gBAAgB;AAAA,MAEhB,sDAAC,sDAA0B,QACzB,sBAAY,4CAAC,4DAAyB,GACxC;AAAA;AAAA,EACD;AAGH,CAAC;",
   "names": ["DefaultStylePanel", "classNames"]
 }

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

@@ -104,7 +104,7 @@ function StylePanelColorPicker() {
 const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
 function StylePanelOpacityPicker() {
   const editor = (0, import_editor.useEditor)();
-  const { onHistoryMark, showUiLabels } = (0, import_StylePanelContext.useStylePanelContext)();
+  const { onHistoryMark, enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
   const opacity = (0, import_editor.useValue)("opacity", () => editor.getSharedOpacity(), [editor]);
   const trackEvent = (0, import_events.useUiEvents)();
   const msg = (0, import_useTranslation.useTranslation)();
@@ -130,7 +130,7 @@ function StylePanelOpacityPicker() {
     )
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: msg("style-panel.opacity") }),
+    enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: msg("style-panel.opacity") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TldrawUiSlider.TldrawUiSlider,
       {

package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.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, showUiLabels } = 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{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}\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 } 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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",
   "names": ["React"]
 }

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

@@ -100,7 +100,7 @@ const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonP
   }, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
   const Layout = items.length > 4 ? import_layout.TldrawUiGrid : import_layout.TldrawUiRow;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    ctx.showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
+    ctx.enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
       {
@@ -109,6 +109,7 @@ const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonP
         value: value.type === "shared" ? value.value : void 0,
         asChild: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
             import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
@@ -116,10 +117,18 @@ const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonP
               type: "icon",
               "data-id": item.value,
               "data-testid": `style.${uiType}.${item.value}`,
-              "aria-label": label,
+              "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
+              tooltip: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
+                isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  "(",
+                  msg("style-panel.selected"),
+                  ")"
+                ] }) : null
+              ] }),
               value: item.value,
               "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
-              "data-isactive": value.type === "shared" && value.value === item.value,
+              "data-isactive": isActive,
               title: label,
               style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
               onPointerEnter: handleButtonPointerEnter,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst isActive = value.type === 'shared' && value.value === item.value\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}\n\t\t\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div>{label}</div>\n\t\t\t\t\t\t\t\t\t\t\t{isActive ? <div>({msg('style-panel.selected')})</div> : null}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={isActive}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
+  "mappings": "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",
   "names": ["StylePanelButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
 }

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

@@ -31,7 +31,9 @@ function StylePanelContextProvider({ children, styles }) {
   const editor = (0, import_editor.useEditor)();
   const trackEvent = (0, import_events.useUiEvents)();
   const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
-  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
+  const enhancedA11yMode = (0, import_editor.useValue)("enhancedA11yMode", () => editor.user.getEnhancedA11yMode(), [
+    editor
+  ]);
   const onValueChange = (0, import_react.useCallback)(
     function(style, value) {
       editor.run(() => {
@@ -50,7 +52,7 @@ function StylePanelContextProvider({ children, styles }) {
     {
       value: {
         styles,
-        showUiLabels,
+        enhancedA11yMode,
         onHistoryMark,
         onValueChange
       },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelContext.tsx"],
-  "sourcesContent": ["import { ReadonlySharedStyleMap, StyleProp, useEditor, useValue } from '@tldraw/editor'\nimport { createContext, useCallback, useContext } from 'react'\nimport { useUiEvents } from '../../context/events'\n\n/** @public */\nexport interface StylePanelContext {\n\tstyles: ReadonlySharedStyleMap\n\tshowUiLabels: boolean\n\tonHistoryMark(id: string): void\n\tonValueChange<T>(style: StyleProp<T>, value: T): void\n}\nconst StylePanelContext = createContext<null | StylePanelContext>(null)\n\n/** @public */\nexport interface StylePanelContextProviderProps {\n\tchildren: React.ReactNode\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\tconst onValueChange = useCallback(\n\t\tfunction <T>(style: StyleProp<T>, value: T) {\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t}\n\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<StylePanelContext.Provider\n\t\t\tvalue={{\n\t\t\t\tstyles: styles,\n\t\t\t\tshowUiLabels,\n\t\t\t\tonHistoryMark,\n\t\t\t\tonValueChange,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</StylePanelContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useStylePanelContext() {\n\tconst context = useContext(StylePanelContext)\n\tif (!context) {\n\t\tthrow new Error('useStylePanelContext must be used within a StylePanelContextProvider')\n\t}\n\treturn context\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CE;AA1CF,oBAAuE;AACvE,mBAAuD;AACvD,oBAA4B;AAS5B,MAAM,wBAAoB,4BAAwC,IAAI;AAS/D,SAAS,0BAA0B,EAAE,UAAU,OAAO,GAAmC;AAC/F,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,2BAAY;AAE/B,QAAM,oBAAgB,0BAAY,CAAC,OAAe,OAAO,yBAAyB,EAAE,GAAG,CAAC,MAAM,CAAC;AAC/F,QAAM,mBAAe,wBAAS,gBAAgB,MAAM,OAAO,KAAK,gBAAgB,GAAG,CAAC,MAAM,CAAC;AAC3F,QAAM,oBAAgB;AAAA,IACrB,SAAa,OAAqB,OAAU;AAC3C,aAAO,IAAI,MAAM;AAChB,YAAI,OAAO,KAAK,QAAQ,GAAG;AAC1B,iBAAO,0BAA0B,OAAO,KAAK;AAAA,QAC9C;AACA,eAAO,sBAAsB,OAAO,KAAK;AACzC,eAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,MACrD,CAAC;AAED,iBAAW,aAAa,EAAE,QAAQ,eAAe,IAAI,MAAM,IAAI,MAAuB,CAAC;AAAA,IACxF;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,SACC;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,cAAU,yBAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACb,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACvF;AACA,SAAO;AACR;",
+  "sourcesContent": ["import { ReadonlySharedStyleMap, StyleProp, useEditor, useValue } from '@tldraw/editor'\nimport { createContext, useCallback, useContext } from 'react'\nimport { useUiEvents } from '../../context/events'\n\n/** @public */\nexport interface StylePanelContext {\n\tstyles: ReadonlySharedStyleMap\n\tenhancedA11yMode: boolean\n\tonHistoryMark(id: string): void\n\tonValueChange<T>(style: StyleProp<T>, value: T): void\n}\nconst StylePanelContext = createContext<null | StylePanelContext>(null)\n\n/** @public */\nexport interface StylePanelContextProviderProps {\n\tchildren: React.ReactNode\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\tconst onValueChange = useCallback(\n\t\tfunction <T>(style: StyleProp<T>, value: T) {\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t}\n\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<StylePanelContext.Provider\n\t\t\tvalue={{\n\t\t\t\tstyles: styles,\n\t\t\t\tenhancedA11yMode,\n\t\t\t\tonHistoryMark,\n\t\t\t\tonValueChange,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</StylePanelContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useStylePanelContext() {\n\tconst context = useContext(StylePanelContext)\n\tif (!context) {\n\t\tthrow new Error('useStylePanelContext must be used within a StylePanelContextProvider')\n\t}\n\treturn context\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CE;AA5CF,oBAAuE;AACvE,mBAAuD;AACvD,oBAA4B;AAS5B,MAAM,wBAAoB,4BAAwC,IAAI;AAS/D,SAAS,0BAA0B,EAAE,UAAU,OAAO,GAAmC;AAC/F,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,2BAAY;AAE/B,QAAM,oBAAgB,0BAAY,CAAC,OAAe,OAAO,yBAAyB,EAAE,GAAG,CAAC,MAAM,CAAC;AAC/F,QAAM,uBAAmB,wBAAS,oBAAoB,MAAM,OAAO,KAAK,oBAAoB,GAAG;AAAA,IAC9F;AAAA,EACD,CAAC;AACD,QAAM,oBAAgB;AAAA,IACrB,SAAa,OAAqB,OAAU;AAC3C,aAAO,IAAI,MAAM;AAChB,YAAI,OAAO,KAAK,QAAQ,GAAG;AAC1B,iBAAO,0BAA0B,OAAO,KAAK;AAAA,QAC9C;AACA,eAAO,sBAAsB,OAAO,KAAK;AACzC,eAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,MACrD,CAAC;AAED,iBAAW,aAAa,EAAE,QAAQ,eAAe,IAAI,MAAM,IAAI,MAAuB,CAAC;AAAA,IACxF;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,SACC;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,uBAAuB;AACtC,QAAM,cAAU,yBAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACb,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACvF;AACA,SAAO;AACR;",
   "names": []
 }