npm - tldraw - Versions diffs - 3.15.0-next.032b45f439ca → 3.15.0-next.82ffd490a4f1 - Mend

tldraw 3.15.0-next.032b45f439ca → 3.15.0-next.82ffd490a4f1

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

Files changed (110) hide show

package/dist-esm/lib/styles.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/styles.tsx"],
-  "sourcesContent": ["/** @public */\nexport type StyleValuesForUi<T> = readonly {\n\treadonly value: T\n\treadonly icon: string\n}[]\n\n// todo: default styles prop?\nexport const STYLES = {\n\tcolor: [\n\t\t{ value: 'black', icon: 'color' },\n\t\t{ value: 'grey', icon: 'color' },\n\t\t{ value: 'light-violet', icon: 'color' },\n\t\t{ value: 'violet', icon: 'color' },\n\t\t{ value: 'blue', icon: 'color' },\n\t\t{ value: 'light-blue', icon: 'color' },\n\t\t{ value: 'yellow', icon: 'color' },\n\t\t{ value: 'orange', icon: 'color' },\n\t\t{ value: 'green', icon: 'color' },\n\t\t{ value: 'light-green', icon: 'color' },\n\t\t{ value: 'light-red', icon: 'color' },\n\t\t{ value: 'red', icon: 'color' },\n\t],\n\tfill: [\n\t\t{ value: 'none', icon: 'fill-none' },\n\t\t{ value: 'semi', icon: 'fill-semi' },\n\t\t{ value: 'solid', icon: 'fill-solid' },\n\t\t{ value: 'pattern', icon: 'fill-pattern' },\n\t\t// { value: 'fill', icon: 'fill-fill' },\n\t],\n\tdash: [\n\t\t{ value: 'draw', icon: 'dash-draw' },\n\t\t{ value: 'dashed', icon: 'dash-dashed' },\n\t\t{ value: 'dotted', icon: 'dash-dotted' },\n\t\t{ value: 'solid', icon: 'dash-solid' },\n\t],\n\tsize: [\n\t\t{ value: 's', icon: 'size-small' },\n\t\t{ value: 'm', icon: 'size-medium' },\n\t\t{ value: 'l', icon: 'size-large' },\n\t\t{ value: 'xl', icon: 'size-extra-large' },\n\t],\n\tfont: [\n\t\t{ value: 'draw', icon: 'font-draw' },\n\t\t{ value: 'sans', icon: 'font-sans' },\n\t\t{ value: 'serif', icon: 'font-serif' },\n\t\t{ value: 'mono', icon: 'font-mono' },\n\t],\n\ttextAlign: [\n\t\t{ value: 'start', icon: 'text-align-left' },\n\t\t{ value: 'middle', icon: 'text-align-center' },\n\t\t{ value: 'end', icon: 'text-align-right' },\n\t],\n\thorizontalAlign: [\n\t\t{ value: 'start', icon: 'horizontal-align-start' },\n\t\t{ value: 'middle', icon: 'horizontal-align-middle' },\n\t\t{ value: 'end', icon: 'horizontal-align-end' },\n\t],\n\tverticalAlign: [\n\t\t{ value: 'start', icon: 'vertical-align-start' },\n\t\t{ value: 'middle', icon: 'vertical-align-middle' },\n\t\t{ value: 'end', icon: 'vertical-align-end' },\n\t],\n\tgeo: [\n\t\t{ value: 'rectangle', icon: 'geo-rectangle' },\n\t\t{ value: 'ellipse', icon: 'geo-ellipse' },\n\t\t{ value: 'triangle', icon: 'geo-triangle' },\n\t\t{ value: 'diamond', icon: 'geo-diamond' },\n\t\t{ value: 'star', icon: 'geo-star' },\n\t\t{ value: 'pentagon', icon: 'geo-pentagon' },\n\t\t{ value: 'hexagon', icon: 'geo-hexagon' },\n\t\t{ value: 'octagon', icon: 'geo-octagon' },\n\t\t{ value: 'rhombus', icon: 'geo-rhombus' },\n\t\t{ value: 'rhombus-2', icon: 'geo-rhombus-2' },\n\t\t{ value: 'oval', icon: 'geo-oval' },\n\t\t{ value: 'trapezoid', icon: 'geo-trapezoid' },\n\t\t{ value: 'arrow-left', icon: 'geo-arrow-left' },\n\t\t{ value: 'arrow-up', icon: 'geo-arrow-up' },\n\t\t{ value: 'arrow-down', icon: 'geo-arrow-down' },\n\t\t{ value: 'arrow-right', icon: 'geo-arrow-right' },\n\t\t{ value: 'cloud', icon: 'geo-cloud' },\n\t\t{ value: 'x-box', icon: 'geo-x-box' },\n\t\t{ value: 'check-box', icon: 'geo-check-box' },\n\t\t{ value: 'heart', icon: 'geo-heart' },\n\t],\n\tarrowKind: [\n\t\t{ value: 'arc', icon: 'arrow-arc' },\n\t\t{ value: 'elbow', icon: 'arrow-elbow' },\n\t],\n\tarrowheadStart: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tarrowheadEnd: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tspline: [\n\t\t{ value: 'line', icon: 'spline-line' },\n\t\t{ value: 'cubic', icon: 'spline-cubic' },\n\t],\n} as const satisfies Record<string, StyleValuesForUi<string>>\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TLUiIconJsx } from './ui/components/primitives/TldrawUiIcon'\n\n/** @public */\nexport type StyleValuesForUi<T> = readonly {\n\treadonly value: T\n\treadonly icon: string | TLUiIconJsx\n}[]\n\n// todo: default styles prop?\nexport const STYLES = {\n\tcolor: [\n\t\t{ value: 'black', icon: 'color' },\n\t\t{ value: 'grey', icon: 'color' },\n\t\t{ value: 'light-violet', icon: 'color' },\n\t\t{ value: 'violet', icon: 'color' },\n\t\t{ value: 'blue', icon: 'color' },\n\t\t{ value: 'light-blue', icon: 'color' },\n\t\t{ value: 'yellow', icon: 'color' },\n\t\t{ value: 'orange', icon: 'color' },\n\t\t{ value: 'green', icon: 'color' },\n\t\t{ value: 'light-green', icon: 'color' },\n\t\t{ value: 'light-red', icon: 'color' },\n\t\t{ value: 'red', icon: 'color' },\n\t],\n\tfill: [\n\t\t{ value: 'none', icon: 'fill-none' },\n\t\t{ value: 'semi', icon: 'fill-semi' },\n\t\t{ value: 'solid', icon: 'fill-solid' },\n\t\t{ value: 'pattern', icon: 'fill-pattern' },\n\t\t// { value: 'fill', icon: 'fill-fill' },\n\t],\n\tdash: [\n\t\t{ value: 'draw', icon: 'dash-draw' },\n\t\t{ value: 'dashed', icon: 'dash-dashed' },\n\t\t{ value: 'dotted', icon: 'dash-dotted' },\n\t\t{ value: 'solid', icon: 'dash-solid' },\n\t],\n\tsize: [\n\t\t{ value: 's', icon: 'size-small' },\n\t\t{ value: 'm', icon: 'size-medium' },\n\t\t{ value: 'l', icon: 'size-large' },\n\t\t{ value: 'xl', icon: 'size-extra-large' },\n\t],\n\tfont: [\n\t\t{ value: 'draw', icon: 'font-draw' },\n\t\t{ value: 'sans', icon: 'font-sans' },\n\t\t{ value: 'serif', icon: 'font-serif' },\n\t\t{ value: 'mono', icon: 'font-mono' },\n\t],\n\ttextAlign: [\n\t\t{ value: 'start', icon: 'text-align-left' },\n\t\t{ value: 'middle', icon: 'text-align-center' },\n\t\t{ value: 'end', icon: 'text-align-right' },\n\t],\n\thorizontalAlign: [\n\t\t{ value: 'start', icon: 'horizontal-align-start' },\n\t\t{ value: 'middle', icon: 'horizontal-align-middle' },\n\t\t{ value: 'end', icon: 'horizontal-align-end' },\n\t],\n\tverticalAlign: [\n\t\t{ value: 'start', icon: 'vertical-align-start' },\n\t\t{ value: 'middle', icon: 'vertical-align-middle' },\n\t\t{ value: 'end', icon: 'vertical-align-end' },\n\t],\n\tgeo: [\n\t\t{ value: 'rectangle', icon: 'geo-rectangle' },\n\t\t{ value: 'ellipse', icon: 'geo-ellipse' },\n\t\t{ value: 'triangle', icon: 'geo-triangle' },\n\t\t{ value: 'diamond', icon: 'geo-diamond' },\n\t\t{ value: 'star', icon: 'geo-star' },\n\t\t{ value: 'pentagon', icon: 'geo-pentagon' },\n\t\t{ value: 'hexagon', icon: 'geo-hexagon' },\n\t\t{ value: 'octagon', icon: 'geo-octagon' },\n\t\t{ value: 'rhombus', icon: 'geo-rhombus' },\n\t\t{ value: 'rhombus-2', icon: 'geo-rhombus-2' },\n\t\t{ value: 'oval', icon: 'geo-oval' },\n\t\t{ value: 'trapezoid', icon: 'geo-trapezoid' },\n\t\t{ value: 'arrow-left', icon: 'geo-arrow-left' },\n\t\t{ value: 'arrow-up', icon: 'geo-arrow-up' },\n\t\t{ value: 'arrow-down', icon: 'geo-arrow-down' },\n\t\t{ value: 'arrow-right', icon: 'geo-arrow-right' },\n\t\t{ value: 'cloud', icon: 'geo-cloud' },\n\t\t{ value: 'x-box', icon: 'geo-x-box' },\n\t\t{ value: 'check-box', icon: 'geo-check-box' },\n\t\t{ value: 'heart', icon: 'geo-heart' },\n\t],\n\tarrowKind: [\n\t\t{ value: 'arc', icon: 'arrow-arc' },\n\t\t{ value: 'elbow', icon: 'arrow-elbow' },\n\t],\n\tarrowheadStart: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tarrowheadEnd: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tspline: [\n\t\t{ value: 'line', icon: 'spline-line' },\n\t\t{ value: 'cubic', icon: 'spline-cubic' },\n\t],\n} as const satisfies Record<string, StyleValuesForUi<string>>\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs CHANGED Viewed

@@ -33,7 +33,7 @@ const DefaultNavigationPanel = memo(function DefaultNavigationPanel2() {
           "data-testid": "minimap.zoom-out",
           title: `${msg(unwrapLabel(actions["zoom-out"].label))} ${kbdStr(actions["zoom-out"].kbd)}`,
           onClick: () => actions["zoom-out"].onSelect("navigation-zone"),
-          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "minus" })
+          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: "minus" })
         }
       ),
       ZoomMenu && /* @__PURE__ */ jsx(ZoomMenu, {}, "zoom-menu"),
@@ -44,7 +44,7 @@ const DefaultNavigationPanel = memo(function DefaultNavigationPanel2() {
           "data-testid": "minimap.zoom-in",
           title: `${msg(unwrapLabel(actions["zoom-in"].label))} ${kbdStr(actions["zoom-in"].kbd)}`,
           onClick: () => actions["zoom-in"].onSelect("navigation-zone"),
-          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "plus" })
+          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: "plus" })
         }
       ),
       Minimap && /* @__PURE__ */ jsx(
@@ -53,9 +53,8 @@ const DefaultNavigationPanel = memo(function DefaultNavigationPanel2() {
           type: "icon",
           "data-testid": "minimap.toggle-button",
           title: msg("navigation-zone.toggle-minimap"),
-          className: "tlui-navigation-panel__toggle",
           onClick: toggleMinimap,
-          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: collapsed ? "chevrons-ne" : "chevrons-sw" })
+          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: collapsed ? "chevron-right" : "chevron-left" })
         }
       )
     ] }) }),

package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx"],
-  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tclassName=\"tlui-navigation-panel__toggle\"\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAqCK,SAEA,UAFA,KAEA,YAFA;AArCL,SAAS,iCAAiC;AAC1C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,2BAA2B;AACpC,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,6BAA6B;AAGhD,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC5E,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB,WAAW,IAAI;AAEtE,QAAM,gBAAgB,YAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,IAAI,sBAAsB;AAEpD,MAAI,aAAa,oBAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,wBAAC,mBAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,oBAAoB,SAC7C,oBAAC,YAAS,IAEV,iCACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,8BAAC,sBAAmB,MAAK,SAAQ;AAAA;AAAA,MAClC;AAAA,MAEA,YAAY,oBAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,8BAAC,sBAAmB,MAAK,QAAO;AAAA;AAAA,MACjC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,WAAU;AAAA,UACV,SAAS;AAAA,UAET,8BAAC,sBAAmB,MAAM,YAAY,gBAAgB,eAAe;AAAA;AAAA,MACtE;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,oBAAoB,UAAU,CAAC,aAAa,oBAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
+  "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { memo, useCallback, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { unwrapLabel, useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public @react */\nexport const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tconst { ZoomMenu, Minimap } = useTldrawUiComponents()\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-navigation-panel\">\n\t\t\t<TldrawUiToolbar className=\"tlui-buttons__horizontal\" label={msg('navigation-zone.title')}>\n\t\t\t\t{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"minus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ZoomMenu && <ZoomMenu key=\"zoom-menu\" />}\n\t\t\t\t\t\t{!collapsed && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\t\ttitle={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon=\"plus\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{Minimap && (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid=\"minimap.toggle-button\"\n\t\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t\t{Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && <Minimap />}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAqCK,SAEA,UAFA,KAEA,YAFA;AArCL,SAAS,iCAAiC;AAC1C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,2BAA2B;AACpC,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,6BAA6B;AAGhD,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC5E,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB,WAAW,IAAI;AAEtE,QAAM,gBAAgB,YAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,EAAE,UAAU,QAAQ,IAAI,sBAAsB;AAEpD,MAAI,aAAa,oBAAoB,QAAQ;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,KAAU,WAAU,yBACxB;AAAA,wBAAC,mBAAgB,WAAU,4BAA2B,OAAO,IAAI,uBAAuB,GACtF,sBAAY,aAAa,oBAAoB,SAC7C,oBAAC,YAAS,IAEV,iCACE;AAAA,OAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UACzF,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA,UAE7D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,MACxC;AAAA,MAEA,YAAY,oBAAC,cAAa,WAAY;AAAA,MACtC,CAAC,aACD;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,YAAY,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,IAAI,OAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UACvF,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA,UAE5D,8BAAC,sBAAmB,OAAK,MAAC,MAAK,QAAO;AAAA;AAAA,MACvC;AAAA,MAEA,WACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,SAAS;AAAA,UAET,8BAAC,sBAAmB,OAAK,MAAC,MAAM,YAAY,kBAAkB,gBAAgB;AAAA;AAAA,MAC/E;AAAA,OAEF,GAEF;AAAA,IACC,WAAW,cAAc,oBAAoB,UAAU,CAAC,aAAa,oBAAC,WAAQ;AAAA,KAChF;AAEF,CAAC;",
   "names": ["DefaultNavigationPanel"]
 }

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

@@ -1,32 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { DefaultSpinner } from "@tldraw/editor";
 import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
 function Spinner(props) {
   const msg = useTranslation();
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: 16,
-      height: 16,
-      viewBox: "0 0 16 16",
-      ...props,
-      "aria-label": msg("app.loading"),
-      "aria-hidden": "false",
-      children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
-        /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
-        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ jsx(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            type: "rotate",
-            from: "0 8 8",
-            to: "360 8 8",
-            dur: "1s",
-            repeatCount: "indefinite"
-          }
-        ) })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(DefaultSpinner, { "aria-label": msg("app.loading"), ...props });
 }
 export {
   Spinner

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/Spinner.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\n\n/** @internal */\nexport function Spinner(props: React.SVGProps<SVGSVGElement>) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t{...props}\n\t\t\taria-label={msg('app.loading')}\n\t\t\taria-hidden=\"false\"\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AAgBG,SACC,KADD;AAfH,SAAS,sBAAsB;AAGxB,SAAS,QAAQ,OAAsC;AAC7D,QAAM,MAAM,eAAe;AAE3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACP,GAAG;AAAA,MACJ,cAAY,IAAI,aAAa;AAAA,MAC7B,eAAY;AAAA,MAEZ,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,4BAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,UAAC;AAAA;AAAA,YACA,eAAc;AAAA,YACd,MAAK;AAAA,YACL,MAAK;AAAA,YACL,IAAG;AAAA,YACH,KAAI;AAAA,YACJ,aAAY;AAAA;AAAA,QACb,GACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { DefaultSpinner } from '@tldraw/editor'\nimport React from 'react'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\n\n/** @internal */\nexport function Spinner(props: React.SVGProps<SVGSVGElement>) {\n\tconst msg = useTranslation()\n\n\treturn <DefaultSpinner aria-label={msg('app.loading')} {...props} />\n}\n"],
+  "mappings": "AAQQ;AARR,SAAS,sBAAsB;AAE/B,SAAS,sBAAsB;AAGxB,SAAS,QAAQ,OAAsC;AAC7D,QAAM,MAAM,eAAe;AAE3B,SAAO,oBAAC,kBAAe,cAAY,IAAI,aAAa,GAAI,GAAG,OAAO;AACnE;",
   "names": []
 }

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

@@ -367,7 +367,8 @@ function OpacitySlider() {
       onValueChange: handleOpacityValueChange,
       steps: tldrawSupportedOpacities.length - 1,
       title: msg("style-panel.opacity"),
-      onHistoryMark
+      onHistoryMark,
+      ariaValueModifier: 25
     }
   );
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\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/>\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/** @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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",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx"],
-  "sourcesContent": ["import { TldrawUiIcon } from '../TldrawUiIcon'\n\n/** @public */\nexport interface TLUiButtonIconProps {\n\ticon: string\n\tsmall?: boolean\n\tinvertIcon?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) {\n\treturn (\n\t\t<TldrawUiIcon\n\t\t\taria-hidden=\"true\"\n\t\t\tlabel=\"\"\n\t\t\tclassName=\"tlui-button__icon\"\n\t\t\ticon={icon}\n\t\t\tsmall={small}\n\t\t\tinvertIcon={invertIcon}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "AAYE;AAZF,SAAS,oBAAoB;AAUtB,SAAS,mBAAmB,EAAE,MAAM,OAAO,WAAW,GAAwB;AACpF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'\n\n/** @public */\nexport interface TLUiButtonIconProps {\n\ticon: string | TLUiIconJsx\n\tsmall?: boolean\n\tinvertIcon?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) {\n\treturn (\n\t\t<TldrawUiIcon\n\t\t\taria-hidden=\"true\"\n\t\t\tlabel=\"\"\n\t\t\tclassName=\"tlui-button__icon\"\n\t\t\ticon={icon}\n\t\t\tsmall={small}\n\t\t\tinvertIcon={invertIcon}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAYE;AAZF,SAAS,oBAAiC;AAUnC,SAAS,mBAAmB,EAAE,MAAM,OAAO,WAAW,GAAwB;AACpF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs CHANGED Viewed

@@ -31,7 +31,7 @@ function TldrawUiDialogCloseButton() {
   ) }) });
 }
 function TldrawUiDialogBody({ className, children, style }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__body", className), style, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__body", className), style, tabIndex: 0, children });
 }
 function TldrawUiDialogFooter({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__footer", className), children });

package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiDialog.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { Dialog as _Dialog } from 'radix-ui'\nimport { CSSProperties, ReactNode } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\n\n/** @public */\nexport interface TLUiDialogHeaderProps {\n\tclassName?: string\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport interface TLUiDialogTitleProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps) {\n\treturn (\n\t\t<_Dialog.Title\n\t\t\tdir=\"ltr\"\n\t\t\tclassName={classNames('tlui-dialog__header__title', className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</_Dialog.Title>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiDialogCloseButton() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label={msg('ui.close')}\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"cross-2\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogBodyProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogFooterProps {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
-  "mappings": "AAeQ;AAfR,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAElC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAS5B,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAUO,SAAS,oBAAoB,EAAE,WAAW,UAAU,MAAM,GAAyB;AACzF,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,MAAM,eAAe;AAE3B,SACC,oBAAC,SAAI,WAAU,8BACd,8BAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,IAAI,UAAU;AAAA,MAC1B,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,8BAAC,sBAAmB,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC1C,GACD,GACD;AAEF;AAUO,SAAS,mBAAmB,EAAE,WAAW,UAAU,MAAM,GAAwB;AACvF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,OAC1D,UACF;AAEF;AASO,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { Dialog as _Dialog } from 'radix-ui'\nimport { CSSProperties, ReactNode } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\n\n/** @public */\nexport interface TLUiDialogHeaderProps {\n\tclassName?: string\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport interface TLUiDialogTitleProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps) {\n\treturn (\n\t\t<_Dialog.Title\n\t\t\tdir=\"ltr\"\n\t\t\tclassName={classNames('tlui-dialog__header__title', className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</_Dialog.Title>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiDialogCloseButton() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label={msg('ui.close')}\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"cross-2\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogBodyProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogFooterProps {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
+  "mappings": "AAeQ;AAfR,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAElC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAS5B,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAUO,SAAS,oBAAoB,EAAE,WAAW,UAAU,MAAM,GAAyB;AACzF,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,MAAM,eAAe;AAE3B,SACC,oBAAC,SAAI,WAAU,8BACd,8BAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,IAAI,UAAU;AAAA,MAC1B,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,8BAAC,sBAAmB,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC1C,GACD,GACD;AAEF;AAUO,SAAS,mBAAmB,EAAE,WAAW,UAAU,MAAM,GAAwB;AACvF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,OAAc,UAAU,GAClF,UACF;AAEF;AASO,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import { memo, useLayoutEffect, useRef } from "react";
+import { cloneElement, memo, useLayoutEffect, useRef } from "react";
 import { useAssetUrls } from "../../context/asset-urls.mjs";
 const TldrawUiIcon = memo(function TldrawUiIcon2({
   label,
@@ -10,6 +10,40 @@ const TldrawUiIcon = memo(function TldrawUiIcon2({
   color,
   className,
   ...props
+}) {
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsx(
+      TldrawUIIconInner,
+      {
+        label,
+        small,
+        invertIcon,
+        icon,
+        color,
+        className,
+        ...props
+      }
+    );
+  }
+  return cloneElement(icon, {
+    ...props,
+    className: classNames({ "tlui-icon__small": small }, className, icon.props.className),
+    "aria-label": label,
+    style: {
+      color,
+      transform: invertIcon ? "scale(-1, 1)" : void 0,
+      ...icon.props.style
+    }
+  });
+});
+function TldrawUIIconInner({
+  label,
+  small,
+  invertIcon,
+  icon,
+  color,
+  className,
+  ...props
 }) {
   const assetUrls = useAssetUrls();
   const asset = assetUrls.icons[icon] ?? assetUrls.icons["question-mark-circle"];
@@ -50,7 +84,7 @@ const TldrawUiIcon = memo(function TldrawUiIcon2({
       }
     }
   );
-});
+}
 export {
   TldrawUiIcon
 };

package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiIcon.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
-  "mappings": "AA8CG;AA9CH,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAC9C,SAAS,oBAAoB;AAetB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tif (typeof icon === 'string') {\n\t\treturn (\n\t\t\t<TldrawUIIconInner\n\t\t\t\tlabel={label}\n\t\t\t\tsmall={small}\n\t\t\t\tinvertIcon={invertIcon}\n\t\t\t\ticon={icon}\n\t\t\t\tcolor={color}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn cloneElement(icon, {\n\t\t...props,\n\t\tclassName: classNames({ 'tlui-icon__small': small }, className, icon.props.className),\n\t\t'aria-label': label,\n\t\tstyle: {\n\t\t\tcolor,\n\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t...icon.props.style,\n\t\t},\n\t})\n})\n\nfunction TldrawUIIconInner({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AA+BG;AA/BH,OAAO,gBAAgB;AACvB,SAAS,cAAc,MAAoB,iBAAiB,cAAc;AAC1E,SAAS,oBAAoB;AAkBtB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,MAAI,OAAO,SAAS,UAAU;AAC7B,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SAAO,aAAa,MAAM;AAAA,IACzB,GAAG;AAAA,IACH,WAAW,WAAW,EAAE,oBAAoB,MAAM,GAAG,WAAW,KAAK,MAAM,SAAS;AAAA,IACpF,cAAc;AAAA,IACd,OAAO;AAAA,MACN;AAAA,MACA,WAAW,aAAa,iBAAiB;AAAA,MACzC,GAAG,KAAK,MAAM;AAAA,IACf;AAAA,EACD,CAAC;AACF,CAAC;AAED,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA2E;AAC1E,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF;",
   "names": ["TldrawUiIcon"]
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs CHANGED Viewed

@@ -10,7 +10,8 @@ const TldrawUiSlider = React.forwardRef(function Slider({
   value,
   label,
   onValueChange,
-  ["data-testid"]: testId
+  ["data-testid"]: testId,
+  ariaValueModifier = 1
 }, ref) {
   const msg = useTranslation();
   const [tabIndex, setTabIndex] = useState(-1);
@@ -51,7 +52,9 @@ const TldrawUiSlider = React.forwardRef(function Slider({
         value !== null && /* @__PURE__ */ jsx(
           _Slider.Thumb,
           {
-            "aria-label": msg("style-panel.opacity"),
+            "aria-valuemin": (min ?? 0) * ariaValueModifier,
+            "aria-valuenow": value * ariaValueModifier,
+            "aria-valuemax": steps * ariaValueModifier,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,

package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-label={msg('style-panel.opacity')}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAgEG,SAeqB,KAfrB;AAhEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAexB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAClB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,cAAY,IAAI,qBAAqB;AAAA,YACrC,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAkEG,SAeqB,KAfrB;AAlEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAgBxB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
   "names": ["value"]
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs CHANGED Viewed

@@ -43,6 +43,7 @@ const TldrawUiToolbarToggleGroup = ({
     {
       type,
       ...props,
+      role: "radiogroup",
       className: classnames("tlui-toolbar-toggle-group", className),
       children
     }

package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiToolbar.tsx"],
-  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n}\n"],
-  "mappings": "AAgBG;AAhBH,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAWX,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,GAAG,MAAM,GAA2B,QAAQ;AACjF,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAWO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;",
+  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n}\n"],
+  "mappings": "AAgBG;AAhBH,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAWX,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,GAAG,MAAM,GAA2B,QAAQ;AACjF,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAWO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx"],
-  "sourcesContent": ["import { preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu, DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuCheckboxItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\ticon?: IconType\n\tid: string\n\tkbd?: string\n\ttitle?: string\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\treadonlyOk?: boolean\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\ttoggle?: boolean\n\tchecked?: boolean\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuCheckboxItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tid,\n\tkbd,\n\tlabel,\n\treadonlyOk,\n\tonSelect,\n\ttoggle = false,\n\tdisabled = false,\n\tchecked = false,\n}: TLUiMenuCheckboxItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\tconst isReadonlyMode = useReadonly()\n\tconst msg = useTranslation()\n\n\t// If the editor is in readonly mode and the item is not marked as readonlyok, return null\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<_DropdownMenu.CheckboxItem\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect?.(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_DropdownMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\tkey={id}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\t// no checkbox items in actions menu\n\t\t\treturn null\n\t\t}\n\t}\n}\n"],
-  "mappings": "AAuDI,SAWC,KAXD;AAvDJ,SAAS,sBAAsB;AAC/B,SAAS,eAAe,cAAc,gBAAgB,qBAAqB;AAC3E,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAoBhC,SAAS,yBAGd;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACX,GAAwD;AACvD,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAC5D,QAAM,iBAAiB,YAAY;AACnC,QAAM,MAAM,eAAe;AAG3B,MAAI,kBAAkB,CAAC,WAAY,QAAO;AAE1C,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,aACC;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACA,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,uBAAW,QAAQ;AACnB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,MAC3B;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,qBAAS,QAAQ;AACjB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,QArBrB;AAAA,MAsBN;AAAA,IAEF;AAAA,IACA,SAAS;AAER,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu, DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuCheckboxItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\ticon?: IconType | TLUiIconJsx\n\tid: string\n\tkbd?: string\n\ttitle?: string\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\treadonlyOk?: boolean\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\ttoggle?: boolean\n\tchecked?: boolean\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuCheckboxItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tid,\n\tkbd,\n\tlabel,\n\treadonlyOk,\n\tonSelect,\n\ttoggle = false,\n\tdisabled = false,\n\tchecked = false,\n}: TLUiMenuCheckboxItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\tconst isReadonlyMode = useReadonly()\n\tconst msg = useTranslation()\n\n\t// If the editor is in readonly mode and the item is not marked as readonlyok, return null\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<_DropdownMenu.CheckboxItem\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect?.(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_DropdownMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\tkey={id}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\t// no checkbox items in actions menu\n\t\t\treturn null\n\t\t}\n\t}\n}\n"],
+  "mappings": "AAuDI,SAWC,KAXD;AAvDJ,SAAS,sBAAsB;AAC/B,SAAS,eAAe,cAAc,gBAAgB,qBAAqB;AAC3E,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAiC;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAoBhC,SAAS,yBAGd;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACX,GAAwD;AACvD,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAC5D,QAAM,iBAAiB,YAAY;AACnC,QAAM,MAAM,eAAe;AAG3B,MAAI,kBAAkB,CAAC,WAAY,QAAO;AAE1C,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,aACC;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACA,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,uBAAW,QAAQ;AACnB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,MAC3B;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,qBAAS,QAAQ;AACjB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,QArBrB;AAAA,MAsBN;AAAA,IAEF;AAAA,IACA,SAAS;AAER,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
   "names": []
 }