tldraw 3.16.0-canary.aa1aff3ffe55 → 3.16.0-canary.da3348c13973

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

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

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

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

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, { orientation: "horizontal", 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, { orientation: "horizontal", 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, { orientation: "horizontal", 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, { orientation: "horizontal", 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, { orientation: "horizontal", 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, { orientation: "horizontal", label: msg("style-panel.align"), 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)(
+          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, { orientation: "horizontal", label: msg("style-panel.label-align"), 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
+          }
+        ),
+        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
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -266,7 +293,7 @@ function GeoStylePickerSet({ styles }) {
   if (geo === void 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.geo"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.geo"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DropdownPicker.DropdownPicker,
     {
       id: "geo",
@@ -288,7 +315,7 @@ function SplineStylePickerSet({ styles }) {
   if (spline === void 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.spline"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.spline"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DropdownPicker.DropdownPicker,
     {
       id: "spline",
@@ -310,7 +337,7 @@ function ArrowStylePickerSet({ styles }) {
   if (arrowKind === void 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: msg("style-panel.arrow-kind"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.arrow-kind"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DropdownPicker.DropdownPicker,
     {
       id: "arrow-kind",
@@ -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