@oh-just-another/react-ui 0.62.0 → 0.63.1

package/dist/panels/property-panel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isValidElement, useEffect, useRef, useState, } from "react";
-import { AlignCenter, AlignCenterHorizontal, AlignEndHorizontal, AlignLeft, AlignRight, AlignStartHorizontal, Bold, CaseSensitive, Download, Circle, Crop, Diamond, FileText, Hexagon as HexagonIcon, Highlighter, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link as LinkIcon, List, ListFilter, ListOrdered, Lock as LockIcon, MessageCircle, Minus, MoreHorizontal, MoreVertical, MoveRight, Proportions, RectangleHorizontal, RectangleVertical, SmilePlus, Spline, Square, Squircle, Star as StarIcon, StickyNote, SquareDashed, SquareDot, Tag, Strikethrough, Trash2, Tv, Underline, Upload, UserRound, Waypoints, Triangle as TriangleIcon, } from "lucide-react";
-import { getBinaryFile, isText, isImage, canCarryLabel, isSticky, isEmoji, isFrame, isRectangle, isEllipse, isBrush, isPolygon, sliceRuns, IMAGE_MASK_POLYGON_PRESETS, } from "@oh-just-another/scene";
-import { FRAME_SIZE_PRESETS, LABEL_DEFAULT_FONT_SIZE, STICKY_SIZE_PRESETS, TEXT_DEFAULT_FONT_FAMILY, } from "@oh-just-another/state";
+import { Fragment, isValidElement, useEffect, useRef, useState, } from "react";
+import { AlignCenter, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignHorizontalDistributeCenter, AlignStartVertical, AlignVerticalDistributeCenter, Group as GroupIcon, LayoutGrid, Ungroup as UngroupIcon, AlignLeft, AlignRight, AlignStartHorizontal, Bold, CaseSensitive, Download, Circle, Crop, Diamond, FileText, Hexagon as HexagonIcon, Highlighter, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link as LinkIcon, List, ListFilter, ListOrdered, Lock as LockIcon, MessageCircle, Minus, MoreHorizontal, MoreVertical, MoveRight, Proportions, RectangleHorizontal, RectangleVertical, SmilePlus, Spline, Square, Squircle, Star as StarIcon, StickyNote, SquareDashed, SquareDot, Tag, Strikethrough, Trash2, Tv, Underline, Upload, UserRound, Waypoints, Triangle as TriangleIcon, } from "lucide-react";
+import { getBinaryFile, isText, isImage, canCarryLabel, isSticky, isEmoji, isFrame, isGroup, getDescendantsOf, isRectangle, isEllipse, isBrush, isPolygon, sliceRuns, IMAGE_MASK_POLYGON_PRESETS, } from "@oh-just-another/scene";
+import { FRAME_SIZE_PRESETS, LABEL_DEFAULT_FONT_SIZE, STICKY_SIZE_PRESETS, TEXT_DEFAULT_FONT_FAMILY, defaultActionRegistry, formatHotkey, } from "@oh-just-another/state";
 import { useDiagramOptional, useReadOnly, useScene, useSelectedLink, useSelection, } from "../core/hooks.js";
 import { useEditorSelector } from "../core/context.js";
 import { useContextMenuController } from "../menus/context-menu-controller.js";
@@ -10,6 +10,7 @@ import { ColorSwatchPicker } from "../color/color-swatch-picker.js";
 import { Popover } from "../primitives/popover.js";
 import { SegmentedControl } from "../primitives/segmented-control.js";
 import { Slider } from "../primitives/slider.js";
+import { SEPARATOR, intersectControlSets, } from "./control-sets.js";
 import { BRUSH_WIDTH_MAX, BRUSH_WIDTH_MIN, TEXT_FONT_SIZE_MAX, TEXT_FONT_SIZE_MIN, TEXT_FONT_SIZE_PRESETS, TEXT_FONT_STACKS, EMOJI_QUICK_PICKS, IMAGE_MASK_DEFAULT_RADIUS, CONTROL_ICON, } from "../core/constants.js";
 export const PropertyPanel = ({ style, className, mobile = false }) => {
     const selection = useSelection();
@@ -26,101 +27,37 @@ export const PropertyPanel = ({ style, className, mobile = false }) => {
     // splits its controls into `primary` (always visible) and `overflow`
     // (behind the ⋮ on mobile; inline on desktop).
     if (selection.size > 0) {
-        const shapes = [...selection]
+        const selected = [...selection]
             .map((id) => scene.elements.get(id))
             .filter((s) => s !== undefined);
-        if (shapes.length === 0)
+        if (selected.length === 0)
             return null;
-        const allText = shapes.every((s) => isText(s));
-        const allImage = shapes.every((s) => isImage(s));
-        const allBrush = shapes.every((s) => isBrush(s));
-        const allFrame = shapes.every((s) => isFrame(s));
-        const allSticky = shapes.every((s) => isSticky(s));
-        const allEmoji = shapes.every((s) => isEmoji(s));
-        // Branch layouts mirror the target design (design.md): per-type clusters
-        // separated by dividers, then a shared tail
-        // (`… | z-order | align | actions | comment | lock | ⋯`).
-        const primary = [];
-        const overflow = [];
-        // Shared head: the type switcher always leads the toolbar (the
-        // control renders nothing for kinds outside the switch-type matrix).
-        if (shapes.every((s) => isConvertible(s))) {
-            primary.push(_jsx(ConvertTypeControl, { shapes: shapes }, "convert"), _jsx(Divider, {}, "d-type"));
-        }
-        if (allSticky) {
-            // text (with Auto size) | size S/M/L | background | tags / author.
-            // Text controls always show — a note without text yet edits the
-            // defaults its first text will take (create-on-write in the editor).
-            {
-                const labelViews = shapes.map(labelView);
-                primary.push(_jsx(FontFamilyControl, { shapes: labelViews, labelMode: true }, "l-family"), _jsx(FontSizeControl, { shapes: labelViews, labelMode: true, allowAuto: true }, "l-size"), _jsx(TextDecorationControl, { shapes: labelViews, labelMode: true }, "l-decor"), _jsx(TextAlignControl, { shapes: labelViews, labelMode: true }, "l-align"), _jsx(Divider, {}, "d-sticky"));
-            }
-            primary.push(_jsx(StickySizeControl, { shapes: shapes }, "size"), _jsx(FillOpacityControl, { shapes: shapes }, "bg"));
-            overflow.push(_jsx(StickyTagControl, { shapes: shapes }, "tags"), _jsx(StickyAuthorControl, { shapes: shapes }, "author"));
-        }
-        else if (allEmoji) {
-            primary.push(_jsx(EmojiPickerControl, { shapes: shapes }, "glyph"));
-        }
-        else if (allFrame) {
-            // A frame's border is fixed chrome (dashed outline); only its body fill
-            // is user-configurable. No stroke / width / dash / roundness controls.
-            primary.push(_jsx(FillControl, { shapes: shapes }, "fill"));
-            if (shapes.length === 1) {
-                primary.push(_jsx(FrameRatioControl, { shapes: shapes }, "ratio"));
-            }
-        }
-        else if (allText) {
-            // font family | size | style | align | link — then colors.
-            primary.push(_jsx(FontFamilyControl, { shapes: shapes }, "family"), _jsx(FontSizeControl, { shapes: shapes }, "size"), _jsx(TextDecorationControl, { shapes: shapes }, "decor"), _jsx(TextAlignControl, { shapes: shapes }, "align"), _jsx(ListControl, { shapes: shapes }, "list"));
-            overflow.push(_jsx(LinkControl, { shapes: shapes }, "link"), _jsx(Divider, {}, "d-color"), _jsx(ColorOpacityControl, { shapes: shapes }, "color"), _jsx(HighlightControl, { shapes: shapes }, "highlight"));
-        }
-        else if (allImage) {
-            // An image's pixels are the content — fill/stroke make no sense.
-            // name | replace | download | alt | crop | opacity.
-            if (shapes.length === 1) {
-                primary.push(_jsx(ImageNameControl, { shapes: shapes }, "name"));
-                overflow.push(_jsx(ReplaceImageControl, { shapes: shapes }, "replace"), _jsx(DownloadImageControl, { shapes: shapes }, "download"), _jsx(ImageAltControl, { shapes: shapes }, "alt"), _jsx(Divider, {}, "d-crop"));
-            }
-            overflow.push(_jsx(CropControl, { shapes: shapes }, "crop"), _jsx(MaskControl, { shapes: shapes }, "mask"), _jsx(OpacityControl, { shapes: shapes }, "opacity"));
-        }
-        else if (selectionBuckets(shapes).size > 1) {
-            // MIXED types (reference behaviour): the toolbar SHRINKS to the
-            // shared tail below, plus a Filter that narrows the actual
-            // selection to one type bucket. Per-type controls come back once
-            // the selection is uniform again.
-            primary.push(_jsx(SelectionFilterControl, { shapes: shapes }, "filter"));
-        }
-        else {
-            // label text controls (for every shape type that can carry text, even
-            // before it has any) | border group (color / width / dash / corners) |
-            // fill group (color / opacity) | link.
-            if (shapes.every((s) => canCarryLabel(s))) {
-                // Pseudo-shapes exposing the LABEL's font + style so the text
-                // controls read label values; `labelMode` reroutes their writes
-                // through the label APIs.
-                const labelViews = shapes.map(labelView);
-                primary.push(_jsx(FontFamilyControl, { shapes: labelViews, labelMode: true }, "l-family"), _jsx(FontSizeControl, { shapes: labelViews, labelMode: true }, "l-size"), _jsx(TextDecorationControl, { shapes: labelViews, labelMode: true }, "l-decor"), _jsx(TextAlignControl, { shapes: labelViews, labelMode: true }, "l-align"), _jsx(ColorOpacityControl, { shapes: labelViews, labelMode: true }, "l-color"), _jsx(HighlightControl, { shapes: labelViews, labelMode: true }, "l-highlight"), _jsx(Divider, {}, "d-label"));
-            }
-            if (allBrush) {
-                // Brush widths are baked per point — `style.strokeWidth` has no
-                // effect, so brush-only selections get a slider that re-bases the
-                // baked widths, plus the plain stroke color picker.
-                primary.push(_jsx(StrokeControl, { shapes: shapes }, "stroke"), _jsx(BrushWidthControl, { shapes: shapes }, "width"));
-            }
-            else {
-                primary.push(_jsx(BorderGroupControl, { shapes: shapes }, "border"), _jsx(FillOpacityControl, { shapes: shapes }, "fill"));
-            }
-            // PanelShell already separates `primary` from `overflow`.
-            overflow.push(_jsx(LinkControl, { shapes: shapes }, "link"));
+        // A selected group stands for its leaf descendants (reference
+        // behaviour): the toolbar shows — and writes — what those children share;
+        // the group element itself carries no editable style.
+        const targets = expandGroups(scene, selected);
+        if (targets.length === 0)
+            return null;
+        const single = targets.length === 1;
+        // Per-element control sets, intersected by control id for ≥2 targets
+        // (see control-sets.ts): uniform selections keep their type's multi set,
+        // mixed ones keep only what every member offers.
+        const set = intersectControlSets(targets.map((s) => controlSetFor(s, single ? "single" : "multi")));
+        const primary = renderControlSet(set.primary, targets);
+        const overflow = renderControlSet(set.overflow, targets);
+        // Mixed types: a Filter that narrows the actual selection to one type
+        // bucket leads the row, so the per-type controls come back on demand.
+        if (!single && selectionBuckets(targets).size > 1) {
+            primary.unshift(_jsx(SelectionFilterControl, { shapes: targets }, "filter"));
         }
-        // Shared tail for every selection type:
-        // `link (frame / image) | comment | lock | ⋯`.
-        // Text and shapes carry their link control in the type cluster above;
-        // z-order, align / distribute, duplicate / delete, group / ungroup and
-        // flip all live in the context menu (⋯).
-        if (allFrame || allImage)
-            overflow.push(_jsx(LinkControl, { shapes: shapes }, "link"));
-        overflow.push(_jsx(CommentControl, { shapes: shapes }, "comment"), _jsx(Divider, {}, "d-lock"), _jsx(LockControl, {}, "lock"), _jsx(MoreButton, {}, "more"));
+        // Shared tail: `arrange · group · ungroup | comment | lock | ⋯`.
+        // Arrange / group / ungroup gate themselves on the selection; comment is
+        // single-only; z-order, duplicate / delete and flip stay in the context
+        // menu (⋯).
+        overflow.push(_jsx(Divider, {}, "d-arrange"), _jsx(ArrangeControl, { targets: targets }, "arrange"), _jsx(GroupControls, { selected: selected }, "group"), _jsx(Divider, {}, "d-comment"));
+        if (single)
+            overflow.push(_jsx(CommentControl, { shapes: targets }, "comment"));
+        overflow.push(_jsx(Divider, {}, "d-lock"), _jsx(LockControl, {}, "lock"), _jsx(MoreButton, {}, "more"));
         return (_jsx(PanelShell, { mobile: mobile, primary: primary, overflow: overflow, className: className, style: style }));
     }
     if (selectedLinkId !== null) {
@@ -145,11 +82,202 @@ export const PropertyPanel = ({ style, className, mobile = false }) => {
     }
     return null;
 };
+const control = (id, render) => ({ id, payload: render });
+/**
+ * The text-carrying view of an element: text elements as they are, labelable
+ * shapes through their embedded label (`labelView`), so one control reads
+ * font / style / colour off a shape + text selection alike. Writes go through
+ * the label-aware `editor.updateTextStyle` / `updateTextProps`.
+ */
+const textView = (s) => (isText(s) ? s : labelView(s));
+const textViews = (targets) => targets.map(textView);
+/** Shared text-carrier cluster ids — identical for text and labelled shapes. */
+const TEXT_CLUSTER = [
+    control("font-family", (t) => _jsx(FontFamilyControl, { shapes: textViews(t) })),
+    control("font-size", (t) => _jsx(FontSizeControl, { shapes: textViews(t) })),
+    control("text-decoration", (t) => _jsx(TextDecorationControl, { shapes: textViews(t) })),
+    control("text-align", (t) => _jsx(TextAlignControl, { shapes: textViews(t) })),
+];
+const TEXT_COLOR_CLUSTER = [
+    control("text-color", (t) => _jsx(ColorOpacityControl, { shapes: textViews(t) })),
+    control("highlight", (t) => _jsx(HighlightControl, { shapes: textViews(t) })),
+];
+const CONVERT = control("convert", (t) => _jsx(ConvertTypeControl, { shapes: t }));
+const LINK = control("link", (t) => _jsx(LinkControl, { shapes: t }));
+/**
+ * Ordered controls one element offers. `multi` is the single set minus what
+ * makes no sense for several elements: the hyperlink, the text list type,
+ * per-file image actions, the frame ratio. Sticky notes use their own
+ * font ids (auto-size font, note fonts) so a note + shape selection shares
+ * only the style / alignment controls, as in the reference.
+ */
+const controlSetFor = (s, mode) => {
+    const single = mode === "single";
+    const convert = isConvertible(s) ? [CONVERT, SEPARATOR] : [];
+    if (isSticky(s)) {
+        return {
+            primary: [
+                ...convert,
+                control("sticky-font-family", (t) => _jsx(FontFamilyControl, { shapes: textViews(t) })),
+                control("sticky-font-size", (t) => _jsx(FontSizeControl, { shapes: textViews(t), allowAuto: true })),
+                ...TEXT_CLUSTER.slice(2),
+                SEPARATOR,
+                control("sticky-size", (t) => _jsx(StickySizeControl, { shapes: t })),
+                control("sticky-bg", (t) => _jsx(FillOpacityControl, { shapes: t })),
+            ],
+            overflow: [
+                control("sticky-tags", (t) => _jsx(StickyTagControl, { shapes: t })),
+                control("sticky-author", (t) => _jsx(StickyAuthorControl, { shapes: t })),
+            ],
+        };
+    }
+    if (isEmoji(s)) {
+        return { primary: [control("emoji", (t) => _jsx(EmojiPickerControl, { shapes: t }))], overflow: [] };
+    }
+    if (isFrame(s)) {
+        // A frame's border is fixed chrome; only its body fill is configurable.
+        return {
+            primary: [
+                control("frame-fill", (t) => _jsx(FillControl, { shapes: t })),
+                ...(single ? [control("frame-ratio", (t) => _jsx(FrameRatioControl, { shapes: t }))] : []),
+            ],
+            overflow: single ? [LINK] : [],
+        };
+    }
+    if (isText(s)) {
+        return {
+            primary: [
+                ...convert,
+                ...TEXT_CLUSTER,
+                ...(single ? [control("list", (t) => _jsx(ListControl, { shapes: t }))] : []),
+            ],
+            overflow: [...(single ? [LINK, SEPARATOR] : []), ...TEXT_COLOR_CLUSTER],
+        };
+    }
+    if (isImage(s)) {
+        // Pixels are the content — no fill / stroke. Per-file actions are
+        // single-only; crop / mask / opacity apply in bulk.
+        return {
+            primary: single ? [control("image-name", (t) => _jsx(ImageNameControl, { shapes: t }))] : [],
+            overflow: [
+                ...(single
+                    ? [
+                        control("image-replace", (t) => _jsx(ReplaceImageControl, { shapes: t })),
+                        control("image-download", (t) => _jsx(DownloadImageControl, { shapes: t })),
+                        control("image-alt", (t) => _jsx(ImageAltControl, { shapes: t })),
+                        SEPARATOR,
+                    ]
+                    : []),
+                control("image-crop", (t) => _jsx(CropControl, { shapes: t })),
+                control("image-mask", (t) => _jsx(MaskControl, { shapes: t })),
+                control("image-opacity", (t) => _jsx(OpacityControl, { shapes: t })),
+            ],
+        };
+    }
+    if (isGroup(s))
+        return { primary: [], overflow: [] };
+    const body = isBrush(s)
+        ? [
+            // Brush widths are baked per point — `style.strokeWidth` has no
+            // effect, so brushes get a slider that re-bases the baked widths.
+            control("stroke", (t) => _jsx(StrokeControl, { shapes: t })),
+            control("brush-width", (t) => _jsx(BrushWidthControl, { shapes: t })),
+        ]
+        : [
+            control("border", (t) => _jsx(BorderGroupControl, { shapes: t })),
+            control("fill", (t) => _jsx(FillOpacityControl, { shapes: t })),
+        ];
+    return {
+        primary: [
+            ...convert,
+            ...(canCarryLabel(s) ? [...TEXT_CLUSTER, ...TEXT_COLOR_CLUSTER, SEPARATOR] : []),
+            ...body,
+        ],
+        overflow: single ? [LINK] : [],
+    };
+};
+const renderControlSet = (entries, targets) => entries.map((e, i) => e === SEPARATOR ? (_jsx(Divider, {}, `sep-${String(i)}`)) : (_jsx(Fragment, { children: e.payload(targets) }, e.id)));
+/**
+ * Replace every selected group by its leaf descendants (nested groups
+ * flattened); plain elements pass through. Order and uniqueness preserved.
+ */
+const expandGroups = (scene, selected) => {
+    const out = [];
+    const seen = new Set();
+    const push = (s) => {
+        if (seen.has(s.id))
+            return;
+        seen.add(s.id);
+        out.push(s);
+    };
+    for (const s of selected) {
+        if (!isGroup(s)) {
+            push(s);
+            continue;
+        }
+        for (const d of getDescendantsOf(scene, s.id))
+            if (!isGroup(d))
+                push(d);
+    }
+    return out;
+};
+// ---------------------------------------------------------------------------
+// Tail: arrange / group / ungroup (registry-driven)
+// ---------------------------------------------------------------------------
+const ARRANGE_ALIGN = [
+    { id: "align-left", Icon: AlignStartVertical },
+    { id: "align-h-center", Icon: AlignCenterVertical },
+    { id: "align-right", Icon: AlignEndVertical },
+    { id: "align-top", Icon: AlignStartHorizontal },
+    { id: "align-v-center", Icon: AlignCenterHorizontal },
+    { id: "align-bottom", Icon: AlignEndHorizontal },
+];
+const ARRANGE_DISTRIBUTE = [
+    { id: "distribute-horizontal", Icon: AlignHorizontalDistributeCenter },
+    { id: "distribute-vertical", Icon: AlignVerticalDistributeCenter },
+];
+/** One registry action as a toolbar / popover button (disabled by its predicate). */
+const ActionIconButton = ({ id, Icon, }) => {
+    const editor = useDiagramOptional();
+    const action = defaultActionRegistry.get(id);
+    if (!editor || !action)
+        return null;
+    const enabled = action.predicate ? action.predicate({ editor }) : true;
+    const matchers = action.hotkey === undefined
+        ? []
+        : Array.isArray(action.hotkey)
+            ? action.hotkey
+            : [action.hotkey];
+    const first = matchers[0];
+    const label = action.label ?? id;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", "aria-label": label, title: first ? `${label} (${formatHotkey(first)})` : label, disabled: !enabled, onClick: () => {
+            defaultActionRegistry.dispatch(id, { editor });
+        }, children: _jsx(Icon, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+/**
+ * Arrange popover for ≥2 targets: align (left / centre / right, top /
+ * middle / bottom) and distribute (horizontally / vertically, from 3). The
+ * buttons follow the registry predicates, so a single whole group — two
+ * children but one selected id — shows them disabled, as in the reference.
+ */
+const ArrangeControl = ({ targets }) => {
+    if (targets.length < 2)
+        return null;
+    return (_jsx(Popover, { ariaLabel: "Arrange", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", "aria-label": "Arrange", title: "Arrange", children: _jsx(LayoutGrid, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Align" }), _jsx("div", { className: "du-sel-arrange-row", children: ARRANGE_ALIGN.map((a) => (_jsx(ActionIconButton, { id: a.id, Icon: a.Icon }, a.id))) }), _jsx("header", { className: "du-sel-popover-label", children: "Distribute" }), _jsx("div", { className: "du-sel-arrange-row", children: ARRANGE_DISTRIBUTE.map((a) => (_jsx(ActionIconButton, { id: a.id, Icon: a.Icon }, a.id))) })] }) }));
+};
 /**
- * Lays out the primary / overflow control groups. Desktop = one floating
- * pill row (primary · divider · overflow). Mobile = a primary row with a
- * vertical-dots ⋮ that expands a wrapped overflow grid below it.
+ * Group / Ungroup buttons. Group needs ≥2 selected ids; Ungroup needs a
+ * group among them (both show for a group + something else). Neither shows
+ * while editing inside a group (double-clicked in): the children are being
+ * edited in place, not regrouped.
  */
+const GroupControls = ({ selected }) => {
+    const enteredGroup = useEditorSelector((e) => e.enteredGroup, null);
+    if (enteredGroup !== null)
+        return null;
+    const hasGroup = selected.some((s) => isGroup(s));
+    return (_jsxs(_Fragment, { children: [selected.length >= 2 ? _jsx(ActionIconButton, { id: "group-selection", Icon: GroupIcon }) : null, hasGroup ? _jsx(ActionIconButton, { id: "ungroup-selection", Icon: UngroupIcon }) : null] }));
+};
 const PanelShell = ({ mobile, primary, overflow, className, style, }) => {
     const [expanded, setExpanded] = useState(false);
     const panelRef = useRef(null);
@@ -287,9 +415,10 @@ const useTextRunRange = (shapes) => {
  * Combined color & opacity control — a single swatch trigger whose
  * popover has both the palette and an opacity slider. Used for the text
  * panel in place of separate Fill + Opacity triggers. Writes `fill` and
- * `opacity` through `editor.updateStyle`.
+ * `opacity` through `editor.updateTextStyle` (element style for text,
+ * label style for labelable shapes).
  */
-const ColorOpacityControl = ({ shapes, labelMode, }) => {
+const ColorOpacityControl = ({ shapes }) => {
     const editor = useDiagramOptional();
     const runRange = useTextRunRange(shapes);
     if (!editor)
@@ -309,19 +438,13 @@ const ColorOpacityControl = ({ shapes, labelMode, }) => {
                                 fill: v ?? "transparent",
                             });
                         }
-                        else if (labelMode) {
-                            editor.updateLabelStyle(ids, { fill: v ?? "transparent" });
-                        }
                         else {
-                            editor.updateStyle(ids, { fill: v ?? "transparent" });
+                            editor.updateTextStyle(ids, { fill: v ?? "transparent" });
                         }
                     }, onEyedrop: (cb) => {
                         editor.beginEyedropperPick(cb);
                     } }), _jsx("header", { className: "du-sel-popover-label", children: "Opacity" }), _jsx(Slider, { value: pct, min: 0, max: 100, step: 5, ariaLabel: "Opacity", valueLabel: pct === null ? "—" : `${pct}%`, onChange: (v) => {
-                        if (labelMode)
-                            editor.updateLabelStyle(ids, { opacity: v / 100 });
-                        else
-                            editor.updateStyle(ids, { opacity: v / 100 });
+                        editor.updateTextStyle(ids, { opacity: v / 100 });
                     } })] }) }));
 };
 /** Sticky size presets (S / M / L squares). */
@@ -599,7 +722,7 @@ const ListControl = ({ shapes }) => {
  * characters (styled runs); otherwise on the whole element(s). Picking
  * "no color" clears the highlight.
  */
-const HighlightControl = ({ shapes, labelMode, }) => {
+const HighlightControl = ({ shapes }) => {
     const editor = useDiagramOptional();
     const runRange = useTextRunRange(shapes);
     if (!editor)
@@ -611,11 +734,8 @@ const HighlightControl = ({ shapes, labelMode, }) => {
                         if (runRange) {
                             editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, partial);
                         }
-                        else if (labelMode) {
-                            editor.updateLabelStyle(ids, partial);
-                        }
                         else {
-                            editor.updateStyle(ids, partial);
+                            editor.updateTextStyle(ids, partial);
                         }
                     }, onEyedrop: (cb) => {
                         editor.beginEyedropperPick(cb);
@@ -640,7 +760,7 @@ const FillControl = ({ shapes }) => {
 // `textAlign` / `textBaseline` are `TextStyle` fields written via
 // `editor.updateStyle`.
 // ---------------------------------------------------------------------------
-const FontSizeControl = ({ shapes, labelMode, allowAuto, }) => {
+const FontSizeControl = ({ shapes, allowAuto, }) => {
     const editor = useDiagramOptional();
     if (!editor)
         return null;
@@ -657,18 +777,12 @@ const FontSizeControl = ({ shapes, labelMode, allowAuto, }) => {
                         label: p.label,
                         icon: _jsx("span", { style: { fontSize: 11, fontWeight: 600 }, children: p.label }),
                     })), onChange: (v) => {
-                        if (labelMode)
-                            editor.updateLabelProps(ids, { fontSize: v });
-                        else
-                            editor.updateTextProps(ids, { fontSize: v });
+                        editor.updateTextProps(ids, { fontSize: v });
                     } }), _jsx(Slider, { value: value, min: TEXT_FONT_SIZE_MIN, max: TEXT_FONT_SIZE_MAX, step: 1, ariaLabel: "Font size", valueLabel: value === null ? "—" : `${value}px`, onChange: (v) => {
-                        if (labelMode)
-                            editor.updateLabelProps(ids, { fontSize: v });
-                        else
-                            editor.updateTextProps(ids, { fontSize: v });
+                        editor.updateTextProps(ids, { fontSize: v });
                     } })] }) }));
 };
-const FontFamilyControl = ({ shapes, labelMode, }) => {
+const FontFamilyControl = ({ shapes }) => {
     const editor = useDiagramOptional();
     if (!editor)
         return null;
@@ -677,10 +791,7 @@ const FontFamilyControl = ({ shapes, labelMode, }) => {
     const current = TEXT_FONT_STACKS.find((f) => f.value === value);
     const label = value === null ? "Mixed" : (current?.label ?? "Custom");
     return (_jsx(Popover, { ariaLabel: "Font family", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Font family", "aria-label": `Font family ${label}`, style: value ? { fontFamily: value } : undefined, children: label }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Font family" }), TEXT_FONT_STACKS.map((f) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": f.value === value, className: `du-sel-menu-row${f.value === value ? " is-active" : ""}`, style: { fontFamily: f.value }, onClick: () => {
-                        if (labelMode)
-                            editor.updateLabelProps(ids, { fontFamily: f.value });
-                        else
-                            editor.updateTextProps(ids, { fontFamily: f.value });
+                        editor.updateTextProps(ids, { fontFamily: f.value });
                     }, children: f.label }, f.value)))] }) }));
 };
 /**
@@ -689,7 +800,7 @@ const FontFamilyControl = ({ shapes, labelMode, }) => {
  * `textBaseline`). One trigger keeps the toolbar row compact and matches
  * the target design's grouped alignment control.
  */
-const TextAlignControl = ({ shapes, labelMode, }) => {
+const TextAlignControl = ({ shapes }) => {
     const editor = useDiagramOptional();
     if (!editor)
         return null;
@@ -705,10 +816,7 @@ const TextAlignControl = ({ shapes, labelMode, }) => {
                         },
                         { value: "right", label: "Right", icon: _jsx(AlignRight, { ...CONTROL_ICON }) },
                     ], onChange: (v) => {
-                        if (labelMode)
-                            editor.updateLabelStyle(ids, { textAlign: v });
-                        else
-                            editor.updateStyle(ids, { textAlign: v });
+                        editor.updateTextStyle(ids, { textAlign: v });
                     } }), _jsx(SegmentedControl, { ariaLabel: "Vertical text alignment", value: valign, options: [
                         {
                             value: "top",
@@ -726,10 +834,7 @@ const TextAlignControl = ({ shapes, labelMode, }) => {
                             icon: _jsx(AlignEndHorizontal, { ...CONTROL_ICON }),
                         },
                     ], onChange: (v) => {
-                        if (labelMode)
-                            editor.updateLabelStyle(ids, { textBaseline: v });
-                        else
-                            editor.updateStyle(ids, { textBaseline: v });
+                        editor.updateTextStyle(ids, { textBaseline: v });
                     } })] }) }));
 };
 /**
@@ -749,7 +854,7 @@ const TextStyleToggle = ({ active, label, icon, onClick, }) => (_jsx("button", {
  * underline/strikethrough→merged `textDecoration`. Active = every
  * selected shape already has that decoration on.
  */
-const TextDecorationControl = ({ shapes, labelMode, }) => {
+const TextDecorationControl = ({ shapes }) => {
     const editor = useDiagramOptional();
     const runRange = useTextRunRange(shapes);
     if (!editor)
@@ -778,24 +883,14 @@ const TextDecorationControl = ({ shapes, labelMode, }) => {
         if (runRange) {
             editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, partial);
         }
-        else if (labelMode) {
-            editor.updateLabelStyle(ids, partial);
-        }
         else {
-            editor.updateStyle(ids, partial);
+            editor.updateTextStyle(ids, partial);
         }
     };
     // Toggling underline/strikethrough must preserve the other flag. Range mode
     // replaces the whole `textDecoration`, so rebuild both flags from the
     // range's current state; whole-element mode merges per shape.
     const setDecoration = (key, on) => {
-        if (labelMode && !runRange) {
-            for (const s of shapes) {
-                const cur = s.style?.textDecoration ?? {};
-                editor.updateLabelStyle([s.id], { textDecoration: { ...cur, [key]: on } });
-            }
-            return;
-        }
         if (runRange) {
             editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, {
                 textDecoration: { underline: allUnderline, strikethrough: allStrike, [key]: on },
@@ -804,7 +899,7 @@ const TextDecorationControl = ({ shapes, labelMode, }) => {
         else {
             for (const s of shapes) {
                 const cur = s.style?.textDecoration ?? {};
-                editor.updateStyle([s.id], { textDecoration: { ...cur, [key]: on } });
+                editor.updateTextStyle([s.id], { textDecoration: { ...cur, [key]: on } });
             }
         }
     };