tldraw 3.16.0-next.282b7be564ae → 3.16.0-next.2f9d39693e4c

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tReadonlySharedStyleMap,\n\tStyleProp,\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorTheme,\n\tgetDefaultColorTheme,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\n\n// Local component for style panel subheadings\nfunction StylePanelSubheading({ children }: { children: React.ReactNode }) {\n\treturn <h3 className=\"tlui-style-panel__subheading\">{children}</h3>\n}\n\n/** @public */\nexport interface TLUiStylePanelContentProps {\n\tstyles: ReturnType<typeof useRelevantStyles>\n}\n\n/** @public @react */\nexport function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {\n\tconst isDarkMode = useIsDarkMode()\n\n\tif (!styles) return null\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideArrowKind = arrowKind === undefined\n\tconst hideText = font === undefined\n\n\tconst theme = getDefaultColorTheme({ isDarkMode: isDarkMode })\n\n\treturn (\n\t\t<>\n\t\t\t<CommonStylePickerSet theme={theme} styles={styles} />\n\t\t\t{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\treturn React.useMemo(\n\t\t() =>\n\t\t\tfunction handleStyleChange<T>(style: StyleProp<T>, value: T) {\n\t\t\t\teditor.run(() => {\n\t\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t\t}\n\t\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t\t})\n\n\t\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t\t},\n\t\t[editor, trackEvent]\n\t)\n}\n\n/** @public */\nexport interface ThemeStylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n\ttheme: TLDefaultColorTheme\n}\n\n/** @public */\nexport interface StylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-style-panel__section__common\" data-testid=\"style.panel\">\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.color')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<OpacitySlider />\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.fill')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.dash')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.size')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\t\t\tonValueChange={(style, value) => {\n\t\t\t\t\t\t\t\t\t\thandleValueChange(style, value)\n\t\t\t\t\t\t\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\t\t\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst editor = useEditor()\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\tconst labelStr = showUiLabels && msg('style-panel.font')\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && labelAlign === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.font')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\t\t\tvalue={font}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{textAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.align')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\t\t\tvalue={textAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<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</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{labelAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>\n\t\t\t\t\t)}\n\t\t\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.label-align')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{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</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n/** @public @react */\nexport function GeoStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" 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 orientation=\"horizontal\" 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 orientation=\"horizontal\" label={msg('style-panel.arrow-kind')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"arrow-kind\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\t\tuiType=\"arrow-kind\"\n\t\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\t\titems={STYLES.arrowKind}\n\t\t\t\tvalue={arrowKind}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function OpacitySlider() {\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport { StylePanelDropdownPicker } from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, showUiLabels } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.fill')}\n\t\t\tuiType=\"fill\"\n\t\t\tstyle={DefaultFillStyle}\n\t\t\titems={STYLES.fill}\n\t\t\tvalue={fill}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\titems={STYLES.textAlign}\n\t\t\t\tvalue={textAlign}\n\t\t\t/>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\tdisabled\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\n\treturn (\n\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg('style-panel.label-align')}>\n\t\t\t<StylePanelButtonPicker\n\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\tuiType=\"align\"\n\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\tvalue={labelAlign}\n\t\t\t/>\n\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t) : (\n\t\t\t\t<StylePanelDropdownPicker\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist-cjs/lib/ui/components/{primitives/TldrawUiButtonPicker.js → StylePanel/StylePanelButtonPicker.js}

@@ -16,32 +16,35 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TldrawUiButtonPicker_exports = {};
-__export(TldrawUiButtonPicker_exports, {
-  TldrawUiButtonPicker: () => TldrawUiButtonPicker
+var StylePanelButtonPicker_exports = {};
+__export(StylePanelButtonPicker_exports, {
+  StylePanelButtonPicker: () => StylePanelButtonPicker
 });
-module.exports = __toCommonJS(TldrawUiButtonPicker_exports);
+module.exports = __toCommonJS(StylePanelButtonPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_react = require("react");
+var import_useDefaultColorTheme = require("../../../shapes/shared/useDefaultColorTheme");
 var import_constants = require("../../constants");
 var import_breakpoints = require("../../context/breakpoints");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
-var import_TldrawUiButtonIcon = require("./Button/TldrawUiButtonIcon");
-var import_TldrawUiToolbar = require("./TldrawUiToolbar");
-var import_layout = require("./layout");
-const TldrawUiButtonPicker = (0, import_react.memo)(function TldrawUiButtonPicker2(props) {
+var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
+var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
+var import_layout = require("../primitives/layout");
+var import_StylePanelContext = require("./StylePanelContext");
+var import_StylePanelSubheading = require("./StylePanelSubheading");
+const StylePanelButtonPicker = (0, import_react.memo)(function StylePanelButtonPicker2(props) {
+  const ctx = (0, import_StylePanelContext.useStylePanelContext)();
   const {
     uiType,
     items,
     title,
     style,
     value,
-    // columns = clamp(items.length, 2, 4),
-    onValueChange,
-    onHistoryMark,
-    theme
+    onValueChange = ctx.onValueChange,
+    onHistoryMark = ctx.onHistoryMark
   } = props;
+  const theme = (0, import_useDefaultColorTheme.useDefaultColorTheme)();
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
   const breakpoint = (0, import_breakpoints.useBreakpoint)();
@@ -95,37 +98,41 @@ const TldrawUiButtonPicker = (0, import_react.memo)(function TldrawUiButtonPicke
       handleButtonPointerUp: handleButtonPointerUp2
     };
   }, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
-  const Wrapper = items.length > 4 ? import_layout.TldrawUiGrid : import_layout.TldrawUiRow;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
-    {
-      "data-testid": `style.${uiType}`,
-      type: "single",
-      value: value.type === "shared" ? value.value : void 0,
-      children: items.map((item) => {
-        const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
-          {
-            type: "icon",
-            "data-id": item.value,
-            "data-testid": `style.${uiType}.${item.value}`,
-            "aria-label": label,
-            value: item.value,
-            "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
-            "data-isactive": value.type === "shared" && value.value === item.value,
-            title: label,
-            style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
-            onPointerEnter: handleButtonPointerEnter,
-            onPointerDown: handleButtonPointerDown,
-            onPointerUp: handleButtonPointerUp,
-            onClick: handleButtonClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
-          },
-          item.value
-        );
-      })
-    }
-  ) });
+  const Layout = items.length > 4 ? import_layout.TldrawUiGrid : import_layout.TldrawUiRow;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    ctx.showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiToolbar.TldrawUiToolbarToggleGroup,
+      {
+        "data-testid": `style.${uiType}`,
+        type: "single",
+        value: value.type === "shared" ? value.value : void 0,
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { children: items.map((item) => {
+          const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_TldrawUiToolbar.TldrawUiToolbarToggleItem,
+            {
+              type: "icon",
+              "data-id": item.value,
+              "data-testid": `style.${uiType}.${item.value}`,
+              "aria-label": label,
+              value: item.value,
+              "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
+              "data-isactive": value.type === "shared" && value.value === item.value,
+              title: label,
+              style: style === import_editor.DefaultColorStyle ? { color: (0, import_editor.getColorValue)(theme, item.value, "solid") } : void 0,
+              onPointerEnter: handleButtonPointerEnter,
+              onPointerDown: handleButtonPointerDown,
+              onPointerUp: handleButtonPointerUp,
+              onClick: handleButtonClick,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: item.icon })
+            },
+            item.value
+          );
+        }) })
+      }
+    ) })
+  ] });
 });
-//# sourceMappingURL=TldrawUiButtonPicker.js.map
+//# sourceMappingURL=StylePanelButtonPicker.js.map

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

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

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

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StylePanelContext_exports = {};
+__export(StylePanelContext_exports, {
+  StylePanelContextProvider: () => StylePanelContextProvider,
+  useStylePanelContext: () => useStylePanelContext
+});
+module.exports = __toCommonJS(StylePanelContext_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
+var import_react = require("react");
+var import_events = require("../../context/events");
+const StylePanelContext = (0, import_react.createContext)(null);
+function StylePanelContextProvider({ children, styles }) {
+  const editor = (0, import_editor.useEditor)();
+  const trackEvent = (0, import_events.useUiEvents)();
+  const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
+  const onValueChange = (0, import_react.useCallback)(
+    function(style, value) {
+      editor.run(() => {
+        if (editor.isIn("select")) {
+          editor.setStyleForSelectedShapes(style, value);
+        }
+        editor.setStyleForNextShapes(style, value);
+        editor.updateInstanceState({ isChangingStyle: true });
+      });
+      trackEvent("set-style", { source: "style-panel", id: style.id, value });
+    },
+    [editor, trackEvent]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StylePanelContext.Provider,
+    {
+      value: {
+        styles,
+        showUiLabels,
+        onHistoryMark,
+        onValueChange
+      },
+      children
+    }
+  );
+}
+function useStylePanelContext() {
+  const context = (0, import_react.useContext)(StylePanelContext);
+  if (!context) {
+    throw new Error("useStylePanelContext must be used within a StylePanelContextProvider");
+  }
+  return context;
+}
+//# sourceMappingURL=StylePanelContext.js.map

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

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

package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js}

@@ -26,11 +26,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DoubleDropdownPicker_exports = {};
-__export(DoubleDropdownPicker_exports, {
-  DoubleDropdownPicker: () => DoubleDropdownPicker
+var StylePanelDoubleDropdownPicker_exports = {};
+__export(StylePanelDoubleDropdownPicker_exports, {
+  StylePanelDoubleDropdownPicker: () => StylePanelDoubleDropdownPicker
 });
-module.exports = __toCommonJS(DoubleDropdownPicker_exports);
+module.exports = __toCommonJS(StylePanelDoubleDropdownPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var React = __toESM(require("react"));
@@ -39,20 +39,23 @@ var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
-function DoubleDropdownPickerInner({
-  label,
-  uiTypeA,
-  uiTypeB,
-  labelA,
-  labelB,
-  itemsA,
-  itemsB,
-  styleA,
-  styleB,
-  valueA,
-  valueB,
-  onValueChange
-}) {
+var import_StylePanelContext = require("./StylePanelContext");
+function DoubleDropdownPickerInner(props) {
+  const ctx = (0, import_StylePanelContext.useStylePanelContext)();
+  const {
+    label,
+    uiTypeA,
+    uiTypeB,
+    labelA,
+    labelB,
+    itemsA,
+    itemsB,
+    styleA,
+    styleB,
+    valueA,
+    valueB,
+    onValueChange = ctx.onValueChange
+  } = props;
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
   const [isOpenA, setIsOpenA] = React.useState(false);
@@ -130,7 +133,5 @@ function DoubleDropdownPickerInner({
     ] })
   ] });
 }
-const DoubleDropdownPicker = React.memo(
-  DoubleDropdownPickerInner
-);
-//# sourceMappingURL=DoubleDropdownPicker.js.map
+const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner);
+//# sourceMappingURL=StylePanelDoubleDropdownPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DoubleDropdownPickerInner<T extends string>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tlabel,\n\t\tuiTypeA,\n\t\tuiTypeB,\n\t\tlabelA,\n\t\tlabelB,\n\t\titemsA,\n\t\titemsB,\n\t\tstyleA,\n\t\tstyleB,\n\t\tvalueA,\n\t\tvalueB,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst [isOpenA, setIsOpenA] = React.useState(false)\n\tconst [isOpenB, setIsOpenB] = React.useState(false)\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\tconst idA = `style panel ${uiTypeA} A`\n\tconst idB = `style panel ${uiTypeB} B`\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg(label)}>\n\t\t\t\t<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconA} small invertIcon />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={80} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelA)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleA, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idA, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenA(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} invertIcon />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\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</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t\t<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconB} small />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={116} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelB)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleB, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idB, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenB(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\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</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// need to memo like this to get generics\n/** @public @react */\nexport const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDoubleDropdownPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js}

@@ -26,11 +26,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DropdownPicker_exports = {};
-__export(DropdownPicker_exports, {
-  DropdownPicker: () => DropdownPicker
+var StylePanelDropdownPicker_exports = {};
+__export(StylePanelDropdownPicker_exports, {
+  StylePanelDropdownPicker: () => StylePanelDropdownPicker
 });
-module.exports = __toCommonJS(DropdownPicker_exports);
+module.exports = __toCommonJS(StylePanelDropdownPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var React = __toESM(require("react"));
@@ -40,17 +40,20 @@ var import_TldrawUiButtonLabel = require("../primitives/Button/TldrawUiButtonLab
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
-function DropdownPickerInner({
-  id,
-  label,
-  uiType,
-  stylePanelType,
-  style,
-  items,
-  type,
-  value,
-  onValueChange
-}) {
+var import_StylePanelContext = require("./StylePanelContext");
+function DropdownPickerInner(props) {
+  const ctx = (0, import_StylePanelContext.useStylePanelContext)();
+  const {
+    id,
+    label,
+    uiType,
+    stylePanelType,
+    style,
+    items,
+    type,
+    value,
+    onValueChange = ctx.onValueChange
+  } = props;
   const msg = (0, import_useTranslation.useTranslation)();
   const editor = (0, import_editor.useEditor)();
   const [isOpen, setIsOpen] = React.useState(false);
@@ -62,7 +65,7 @@ function DropdownPickerInner({
   const titleStr = value.type === "mixed" ? msg("style-panel.mixed") : stylePanelName + " \u2014 " + msg(`${uiType}-style.${value.value}`);
   const labelStr = label ? msg(label) : "";
   const popoverId = `style panel ${id}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: stylePanelName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_TldrawUiPopover.TldrawUiPopover,
     {
       id: popoverId,
@@ -83,7 +86,7 @@ function DropdownPickerInner({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "grid", label: labelStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: items.length > 4 ? "grid" : "horizontal", label: labelStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_TldrawUiToolbar.TldrawUiToolbarButton,
             {
@@ -92,7 +95,7 @@ function DropdownPickerInner({
               title: stylePanelName + " \u2014 " + msg(`${uiType}-style.${item.value}`),
               isActive: icon === item.icon,
               onClick: () => {
-                editor.markHistoryStoppingPoint("select style dropdown item");
+                ctx.onHistoryMark("select style dropdown item");
                 onValueChange(style, item.value);
                 import_editor.tlmenus.deleteOpenMenu(popoverId, editor.contextId);
                 setIsOpen(false);
@@ -104,7 +107,7 @@ function DropdownPickerInner({
         }) }) }) })
       ]
     }
-  );
+  ) });
 }
-const DropdownPicker = React.memo(DropdownPickerInner);
-//# sourceMappingURL=DropdownPicker.js.map
+const StylePanelDropdownPicker = React.memo(DropdownPickerInner);
+//# sourceMappingURL=StylePanelDropdownPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiToolbar label={stylePanelName}>\n\t\t\t<TldrawUiPopover\n\t\t\t\tid={popoverId}\n\t\t\t\topen={isOpen}\n\t\t\t\tonOpenChange={setIsOpen}\n\t\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t\t>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t</TldrawUiPopover>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEK;AAtEL,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,+BAAqC;AAerC,SAAS,oBAAsC,OAAyC;AACvF,QAAM,UAAM,+CAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC,4CAAC,0CAAgB,OAAO,gBACvB;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,mBAAmB;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StylePanelSubheading_exports = {};
+__export(StylePanelSubheading_exports, {
+  StylePanelSubheading: () => StylePanelSubheading
+});
+module.exports = __toCommonJS(StylePanelSubheading_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function StylePanelSubheading({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "tlui-style-panel__subheading", children });
+}
+//# sourceMappingURL=StylePanelSubheading.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelSubheading.tsx"],
+  "sourcesContent": ["/** @public */\nexport interface StylePanelSubheadingProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSubheading({ children }: StylePanelSubheadingProps) {\n\treturn <h3 className=\"tlui-style-panel__subheading\">{children}</h3>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AADD,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC7E,SAAO,4CAAC,QAAG,WAAU,gCAAgC,UAAS;AAC/D;",
+  "names": []
+}