tldraw 3.16.0-next.df90ce0ff566 → 3.16.0-next.eafb52d15064

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

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

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

@@ -42,6 +42,7 @@ 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 ref = (0, import_react.useRef)(null);
   (0, import_editor.usePassThroughWheelEvents)(ref);
   const styles = (0, import_useRelevantStyles.useRelevantStyles)();
@@ -70,6 +71,7 @@ const DefaultStylePanel = (0, import_react.memo)(function DefaultStylePanel2({
       ref,
       className: (0, import_classnames.default)("tlui-style-panel", { "tlui-style-panel__wrapper": !isMobile }),
       "data-ismobile": isMobile,
+      "data-show-ui-labels": showUiLabels,
       onPointerLeave: handlePointerOut,
       children: content
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanel.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\n\tchildren,\n}: TLUiStylePanelProps) {\n\tconst editor = useEditor()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst styles = useRelevantStyles()\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 content = children ?? <DefaultStylePanelContent styles={styles} />\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\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\tdata-ismobile={isMobile}\n\t\t\tonPointerLeave={handlePointerOut}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8B6B;AA9B7B,oBAAqD;AACrD,wBAAuB;AACvB,mBAAgE;AAChE,+BAAkC;AAClC,sCAAyC;AASlC,MAAM,wBAAoB,mBAAK,SAASA,mBAAkB;AAAA,EAChE;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,aAAS,yBAAU;AAEzB,QAAM,UAAM,qBAAuB,IAAI;AACvC,+CAA0B,GAAG;AAE7B,QAAM,aAAS,4CAAkB;AAEjC,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,UAAU,YAAY,4CAAC,4DAAyB,QAAgB;AAEtE,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;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAW,kBAAAC,SAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,gBAAgB;AAAA,MAEf;AAAA;AAAA,EACF;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\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 styles = useRelevantStyles()\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 content = children ?? <DefaultStylePanelContent styles={styles} />\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\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\tdata-ismobile={isMobile}\n\t\t\tdata-show-ui-labels={showUiLabels}\n\t\t\tonPointerLeave={handlePointerOut}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+B6B;AA/B7B,oBAA+D;AAC/D,wBAAuB;AACvB,mBAAgE;AAChE,+BAAkC;AAClC,sCAAyC;AASlC,MAAM,wBAAoB,mBAAK,SAASA,mBAAkB;AAAA,EAChE;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,aAAS,4CAAkB;AAEjC,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,UAAU,YAAY,4CAAC,4DAAyB,QAAgB;AAEtE,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;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAW,kBAAAC,SAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAEf;AAAA;AAAA,EACF;AAEF,CAAC;",
   "names": ["DefaultStylePanel", "classNames"]
 }

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

@@ -50,6 +50,9 @@ var import_TldrawUiSlider = require("../primitives/TldrawUiSlider");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 var import_DoubleDropdownPicker = require("./DoubleDropdownPicker");
 var import_DropdownPicker = require("./DropdownPicker");
+function StylePanelSubheading({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "tlui-style-panel__subheading", children });
+}
 function DefaultStylePanelContent({ styles }) {
   const isDarkMode = (0, import_editor.useIsDarkMode)();
   if (!styles) return null;
@@ -97,6 +100,7 @@ function CommonStylePickerSet({ styles, theme }) {
   const msg = (0, import_useTranslation.useTranslation)();
   const editor = (0, import_editor.useEditor)();
   const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
   const handleValueChange = useStyleChangeCallback();
   const color = styles.get(import_editor.DefaultColorStyle);
   const fill = styles.get(import_editor.DefaultFillStyle);
@@ -105,67 +109,79 @@ function CommonStylePickerSet({ styles, theme }) {
   const showPickers = fill !== void 0 || dash !== void 0 || size !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section__common", "data-testid": "style.panel", children: [
-      color === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.color"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.color"),
-          uiType: "color",
-          style: import_editor.DefaultColorStyle,
-          items: import_styles.STYLES.color,
-          value: color,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
+      color === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.color") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.color"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.color"),
+            uiType: "color",
+            style: import_editor.DefaultColorStyle,
+            items: import_styles.STYLES.color,
+            value: color,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpacitySlider, {})
     ] }),
     showPickers && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", children: [
-      fill === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.fill"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.fill"),
-          uiType: "fill",
-          style: import_editor.DefaultFillStyle,
-          items: import_styles.STYLES.fill,
-          value: fill,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
-      dash === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.dash"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.dash"),
-          uiType: "dash",
-          style: import_editor.DefaultDashStyle,
-          items: import_styles.STYLES.dash,
-          value: dash,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
-      size === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.size"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.size"),
-          uiType: "size",
-          style: import_editor.DefaultSizeStyle,
-          items: import_styles.STYLES.size,
-          value: size,
-          onValueChange: (style, value) => {
-            handleValueChange(style, value);
-            const selectedShapeIds = editor.getSelectedShapeIds();
-            if (selectedShapeIds.length > 0) {
-              (0, import_editor.kickoutOccludedShapes)(editor, selectedShapeIds);
-            }
-          },
-          theme,
-          onHistoryMark
-        }
-      ) })
+      fill === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.fill") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.fill"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.fill"),
+            uiType: "fill",
+            style: import_editor.DefaultFillStyle,
+            items: import_styles.STYLES.fill,
+            value: fill,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
+      dash === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.dash") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.dash"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.dash"),
+            uiType: "dash",
+            style: import_editor.DefaultDashStyle,
+            items: import_styles.STYLES.dash,
+            value: dash,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
+      size === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.size") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.size"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.size"),
+            uiType: "size",
+            style: import_editor.DefaultSizeStyle,
+            items: import_styles.STYLES.size,
+            value: size,
+            onValueChange: (style, value) => {
+              handleValueChange(style, value);
+              const selectedShapeIds = editor.getSelectedShapeIds();
+              if (selectedShapeIds.length > 0) {
+                (0, import_editor.kickoutOccludedShapes)(editor, selectedShapeIds);
+              }
+            },
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] })
     ] })
   ] });
 }
@@ -174,6 +190,8 @@ function TextStylePickerSet({ theme, styles }) {
   const handleValueChange = useStyleChangeCallback();
   const editor = (0, import_editor.useEditor)();
   const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
+  const labelStr = showUiLabels && msg("style-panel.font");
   const font = styles.get(import_editor.DefaultFontStyle);
   const textAlign = styles.get(import_editor.DefaultTextAlignStyle);
   const labelAlign = styles.get(import_editor.DefaultHorizontalAlignStyle);
@@ -182,80 +200,89 @@ function TextStylePickerSet({ theme, styles }) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", children: [
-    font === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.font"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-      {
-        title: msg("style-panel.font"),
-        uiType: "font",
-        style: import_editor.DefaultFontStyle,
-        items: import_styles.STYLES.font,
-        value: font,
-        onValueChange: handleValueChange,
-        theme,
-        onHistoryMark
-      }
-    ) }),
-    textAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.align"), className: "tlui-style-panel__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    font === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      labelStr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: labelStr }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.font"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_TldrawUiButtonPicker.TldrawUiButtonPicker,
         {
-          title: msg("style-panel.align"),
-          uiType: "align",
-          style: import_editor.DefaultTextAlignStyle,
-          items: import_styles.STYLES.textAlign,
-          value: textAlign,
+          title: msg("style-panel.font"),
+          uiType: "font",
+          style: import_editor.DefaultFontStyle,
+          items: import_styles.STYLES.font,
+          value: font,
           onValueChange: handleValueChange,
           theme,
           onHistoryMark
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__row__extra-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiToolbar.TldrawUiToolbarButton,
-        {
-          type: "icon",
-          title: msg("style-panel.vertical-align"),
-          "data-testid": "vertical-align",
-          disabled: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-        }
       ) })
     ] }),
-    labelAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.label-align"), className: "tlui-style-panel__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.label-align"),
-          uiType: "align",
-          style: import_editor.DefaultHorizontalAlignStyle,
-          items: import_styles.STYLES.horizontalAlign,
-          value: labelAlign,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__row__extra-button", children: verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiToolbar.TldrawUiToolbarButton,
-        {
-          type: "icon",
-          title: msg("style-panel.vertical-align"),
-          "data-testid": "vertical-align",
-          disabled: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_DropdownPicker.DropdownPicker,
-        {
-          type: "icon",
-          id: "geo-vertical-alignment",
-          uiType: "verticalAlign",
-          stylePanelType: "vertical-align",
-          style: import_editor.DefaultVerticalAlignStyle,
-          items: import_styles.STYLES.verticalAlign,
-          value: verticalLabelAlign,
-          onValueChange: handleValueChange
-        }
-      ) })
+    textAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.align") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.align"), className: "tlui-style-panel__row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.align"),
+            uiType: "align",
+            style: import_editor.DefaultTextAlignStyle,
+            items: import_styles.STYLES.textAlign,
+            value: textAlign,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__row__extra-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiToolbar.TldrawUiToolbarButton,
+          {
+            type: "icon",
+            title: msg("style-panel.vertical-align"),
+            "data-testid": "vertical-align",
+            disabled: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+          }
+        ) })
+      ] })
+    ] }),
+    labelAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.label-align") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.label-align"), className: "tlui-style-panel__row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.label-align"),
+            uiType: "align",
+            style: import_editor.DefaultHorizontalAlignStyle,
+            items: import_styles.STYLES.horizontalAlign,
+            value: labelAlign,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__row__extra-button", children: verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiToolbar.TldrawUiToolbarButton,
+          {
+            type: "icon",
+            title: msg("style-panel.vertical-align"),
+            "data-testid": "vertical-align",
+            disabled: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DropdownPicker.DropdownPicker,
+          {
+            type: "icon",
+            id: "geo-vertical-alignment",
+            uiType: "verticalAlign",
+            stylePanelType: "vertical-align",
+            style: import_editor.DefaultVerticalAlignStyle,
+            items: import_styles.STYLES.verticalAlign,
+            value: verticalLabelAlign,
+            onValueChange: handleValueChange
+          }
+        ) })
+      ] })
     ] })
   ] });
 }
@@ -354,6 +381,7 @@ const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
 function OpacitySlider() {
   const editor = (0, import_editor.useEditor)();
   const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
   const opacity = (0, import_editor.useValue)("opacity", () => editor.getSharedOpacity(), [editor]);
   const trackEvent = (0, import_events.useUiEvents)();
   const msg = (0, import_useTranslation.useTranslation)();
@@ -378,18 +406,21 @@ function OpacitySlider() {
       (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
     )
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_TldrawUiSlider.TldrawUiSlider,
-    {
-      "data-testid": "style.opacity",
-      value: opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1,
-      label: opacity.type === "mixed" ? "style-panel.mixed" : `opacity-style.${opacity.value}`,
-      onValueChange: handleOpacityValueChange,
-      steps: tldrawSupportedOpacities.length - 1,
-      title: msg("style-panel.opacity"),
-      onHistoryMark,
-      ariaValueModifier: 25
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.opacity") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiSlider.TldrawUiSlider,
+      {
+        "data-testid": "style.opacity",
+        value: opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1,
+        label: opacity.type === "mixed" ? "style-panel.mixed" : `opacity-style.${opacity.value}`,
+        onValueChange: handleOpacityValueChange,
+        steps: tldrawSupportedOpacities.length - 1,
+        title: msg("style-panel.opacity"),
+        onHistoryMark,
+        ariaValueModifier: 25
+      }
+    )
+  ] });
 }
 //# sourceMappingURL=DefaultStylePanelContent.js.map

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

@@ -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\tReadonlySharedStyleMap,\n\tStyleProp,\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorTheme,\n\tgetDefaultColorTheme,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\n\n/** @public */\nexport interface TLUiStylePanelContentProps {\n\tstyles: ReturnType<typeof useRelevantStyles>\n}\n\n/** @public @react */\nexport function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {\n\tconst isDarkMode = useIsDarkMode()\n\n\tif (!styles) return null\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideArrowKind = arrowKind === undefined\n\tconst hideText = font === undefined\n\n\tconst theme = getDefaultColorTheme({ isDarkMode: isDarkMode })\n\n\treturn (\n\t\t<>\n\t\t\t<CommonStylePickerSet theme={theme} styles={styles} />\n\t\t\t{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\treturn React.useMemo(\n\t\t() =>\n\t\t\tfunction handleStyleChange<T>(style: StyleProp<T>, value: T) {\n\t\t\t\teditor.run(() => {\n\t\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t\t}\n\t\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t\t})\n\n\t\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t\t},\n\t\t[editor, trackEvent]\n\t)\n}\n\n/** @public */\nexport interface ThemeStylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n\ttheme: TLDefaultColorTheme\n}\n\n/** @public */\nexport interface StylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-style-panel__section__common\" data-testid=\"style.panel\">\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.color')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t)}\n\t\t\t\t<OpacitySlider />\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.fill')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.dash')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.size')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\t\tonValueChange={(style, value) => {\n\t\t\t\t\t\t\t\t\thandleValueChange(style, value)\n\t\t\t\t\t\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\t\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\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\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst editor = useEditor()\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && labelAlign === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.font')}>\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\t\tvalue={font}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t)}\n\n\t\t\t{textAlign === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\t\tvalue={textAlign}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</div>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t)}\n\n\t\t\t{labelAlign === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.label-align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<DropdownPicker\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\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</TldrawUiToolbar>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n/** @public @react */\nexport function GeoStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.geo')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"geo\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.geo'}\n\t\t\t\tuiType=\"geo\"\n\t\t\t\tstylePanelType=\"geo\"\n\t\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\t\titems={STYLES.geo}\n\t\t\t\tvalue={geo}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function SplineStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.spline')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"spline\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.spline'}\n\t\t\t\tuiType=\"spline\"\n\t\t\t\tstylePanelType=\"spline\"\n\t\t\t\tstyle={LineShapeSplineStyle}\n\t\t\t\titems={STYLES.spline}\n\t\t\t\tvalue={spline}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"arrow-kind\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\t\tuiType=\"arrow-kind\"\n\t\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\t\titems={STYLES.arrowKind}\n\t\t\t\tvalue={arrowKind}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker<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\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\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 OpacitySlider() {\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\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<TldrawUiSlider\n\t\t\tdata-testid=\"style.opacity\"\n\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\tonHistoryMark={onHistoryMark}\n\t\t\tariaValueModifier={25}\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\tReadonlySharedStyleMap,\n\tStyleProp,\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorTheme,\n\tgetDefaultColorTheme,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\n\n// Local component for style panel subheadings\nfunction StylePanelSubheading({ children }: { children: React.ReactNode }) {\n\treturn <h3 className=\"tlui-style-panel__subheading\">{children}</h3>\n}\n\n/** @public */\nexport interface TLUiStylePanelContentProps {\n\tstyles: ReturnType<typeof useRelevantStyles>\n}\n\n/** @public @react */\nexport function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {\n\tconst isDarkMode = useIsDarkMode()\n\n\tif (!styles) return null\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideArrowKind = arrowKind === undefined\n\tconst hideText = font === undefined\n\n\tconst theme = getDefaultColorTheme({ isDarkMode: isDarkMode })\n\n\treturn (\n\t\t<>\n\t\t\t<CommonStylePickerSet theme={theme} styles={styles} />\n\t\t\t{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\treturn React.useMemo(\n\t\t() =>\n\t\t\tfunction handleStyleChange<T>(style: StyleProp<T>, value: T) {\n\t\t\t\teditor.run(() => {\n\t\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t\t}\n\t\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t\t})\n\n\t\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t\t},\n\t\t[editor, trackEvent]\n\t)\n}\n\n/** @public */\nexport interface ThemeStylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n\ttheme: TLDefaultColorTheme\n}\n\n/** @public */\nexport interface StylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-style-panel__section__common\" data-testid=\"style.panel\">\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.color')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<OpacitySlider />\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.fill')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.dash')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.size')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\t\t\tonValueChange={(style, value) => {\n\t\t\t\t\t\t\t\t\t\thandleValueChange(style, value)\n\t\t\t\t\t\t\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\t\t\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\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\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst editor = useEditor()\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\tconst labelStr = showUiLabels && msg('style-panel.font')\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && labelAlign === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.font')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\t\t\tvalue={font}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{textAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\t\t\tvalue={textAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{labelAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>\n\t\t\t\t\t)}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.label-align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<DropdownPicker\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n/** @public @react */\nexport function GeoStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.geo')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"geo\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.geo'}\n\t\t\t\tuiType=\"geo\"\n\t\t\t\tstylePanelType=\"geo\"\n\t\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\t\titems={STYLES.geo}\n\t\t\t\tvalue={geo}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function SplineStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.spline')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"spline\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.spline'}\n\t\t\t\tuiType=\"spline\"\n\t\t\t\tstylePanelType=\"spline\"\n\t\t\t\tstyle={LineShapeSplineStyle}\n\t\t\t\titems={STYLES.spline}\n\t\t\t\tvalue={spline}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"arrow-kind\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\t\tuiType=\"arrow-kind\"\n\t\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\t\titems={STYLES.arrowKind}\n\t\t\t\tvalue={arrowKind}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker<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\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\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 OpacitySlider() {\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\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"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js

@@ -72,13 +72,13 @@ function OverflowingToolbar({ children }) {
   const css = (0, import_react.useMemo)(() => {
     const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : "";
     return `
-			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
+			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
+			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
+			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
 				margin-top: 0;
 			}
         `;