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

package/dist/panels/property-panel.js

@@ -0,0 +1,1397 @@
+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 { useDiagramOptional, useReadOnly, useScene, useSelectedLink, useSelection, } from "../core/hooks.js";
+import { useEditorSelector } from "../core/context.js";
+import { useContextMenuController } from "../menus/context-menu-controller.js";
+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 { 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();
+    const selectedLinkId = useSelectedLink();
+    const scene = useScene();
+    const readOnly = useReadOnly();
+    // Every control here mutates the selection (style / text / z-order / align /
+    // convert / delete / link). In read-only / view mode the whole panel is
+    // suppressed — the canvas is view-only, so there's nothing to edit.
+    if (readOnly)
+        return null;
+    // Dispatcher: edge wins only when no shape is selected — if both
+    // happen to be set (rare), the shape panel is more useful. Each branch
+    // splits its controls into `primary` (always visible) and `overflow`
+    // (behind the ⋮ on mobile; inline on desktop).
+    if (selection.size > 0) {
+        const shapes = [...selection]
+            .map((id) => scene.elements.get(id))
+            .filter((s) => s !== undefined);
+        if (shapes.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"));
+        }
+        // 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"));
+        return (_jsx(PanelShell, { mobile: mobile, primary: primary, overflow: overflow, className: className, style: style }));
+    }
+    if (selectedLinkId !== null) {
+        const edge = scene.links.get(selectedLinkId);
+        if (!edge)
+            return null;
+        const primary = [
+            _jsx(LinkStrokeColorControl, { edge: edge }, "color"),
+            _jsx(LinkStrokeWidthControl, { edge: edge }, "width"),
+            _jsx(LinkArrowheadControl, { edge: edge, side: "to" }, "arrow-to"),
+        ];
+        const overflow = [
+            _jsx(LinkStrokeStyleControl, { edge: edge }, "dash"),
+            _jsx(LinkRoutingControl, { edge: edge }, "routing"),
+            _jsx(LinkLineKindControl, { edge: edge }, "kind"),
+            _jsx(LinkArrowheadControl, { edge: edge, side: "from" }, "arrow-from"),
+            _jsx(LinkAutoRouteControl, { edge: edge }, "auto"),
+            _jsx(LinkDeleteControl, {}, "delete"),
+            _jsx(MoreButton, {}, "more"),
+        ];
+        return (_jsx(PanelShell, { mobile: mobile, primary: primary, overflow: overflow, className: className, style: style }));
+    }
+    return null;
+};
+/**
+ * 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.
+ */
+const PanelShell = ({ mobile, primary, overflow, className, style, }) => {
+    const [expanded, setExpanded] = useState(false);
+    const panelRef = useRef(null);
+    // Collapse the expanded overflow sheet on a tap outside the panel.
+    // The ⋮ button and the grabber collapse it directly; this covers taps
+    // on the canvas / elsewhere.
+    useEffect(() => {
+        if (!mobile || !expanded)
+            return undefined;
+        const onDown = (e) => {
+            const el = panelRef.current;
+            if (el && e.target instanceof Node && !el.contains(e.target))
+                setExpanded(false);
+        };
+        // `capture` so we see the tap even if something stops propagation.
+        document.addEventListener("pointerdown", onDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onDown, true);
+        };
+    }, [mobile, expanded]);
+    if (!mobile) {
+        return (_jsx("div", { className: `du-sel-panel ${className ?? ""}`.trim(), style: style, children: groupControls([...primary, _jsx(Divider, {}, "d-overflow"), ...overflow]) }));
+    }
+    return (_jsxs("div", { ref: panelRef, className: `du-sel-panel du-sel-panel-mobile ${className ?? ""}`.trim(), style: style, children: [_jsxs("div", { className: "du-sel-mobile-row", children: [_jsx("div", { className: "du-sel-mobile-primary", children: groupControls(primary) }), overflow.length > 0 ? (_jsx("button", { type: "button", className: `du-sel-icon-button du-sel-mobile-expand${expanded ? " is-active" : ""}`, "aria-expanded": expanded, "aria-label": expanded ? "Hide more properties" : "More properties", title: "More properties", onClick: () => {
+                            setExpanded((v) => !v);
+                        }, children: _jsx(MoreVertical, { ...CONTROL_ICON, "aria-hidden": true }) })) : null] }), expanded && overflow.length > 0 ? (_jsx("div", { className: "du-sel-mobile-overflow", children: groupControls(overflow) })) : null] }));
+};
+/**
+ * Element link control. One trigger (chain icon, active when a link is
+ * set) opens a popover with a URL field plus Save / Open / Remove. Works
+ * for any shape — the href lives on `ElementBase`. The URL is normalised
+ * (`normalizeHref`: adds `https://`, `mailto:`, rejects `javascript:`)
+ * before storing. Multi-select applies to all.
+ */
+const LinkControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const inputRef = useRef(null);
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const current = sharedString(shapes, (s) => s.href);
+    const hasLink = shapes.some((s) => Boolean(s.href));
+    const save = (raw) => {
+        editor.setLink(ids, raw);
+    };
+    return (_jsx(Popover, { ariaLabel: "Link", trigger: _jsx("button", { type: "button", className: `du-sel-icon-button${hasLink ? " is-active" : ""}`, title: "Link", "aria-label": "Link", children: _jsx(LinkIcon, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Link" }), _jsx("input", { ref: inputRef, className: "du-sel-link-input", type: "text", placeholder: "https://\u2026  \u00B7  name@mail", defaultValue: current ?? "", "aria-label": "Link URL", onKeyDown: (ev) => {
+                        if (ev.key === "Enter") {
+                            ev.preventDefault();
+                            save(ev.currentTarget.value);
+                        }
+                    } }), _jsxs("div", { style: { display: "flex", gap: 2 }, children: [_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                save(inputRef.current?.value ?? "");
+                            }, children: "Save" }), hasLink ? (_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                editor.openLink(current);
+                            }, children: "Open" })) : null, hasLink ? (_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                editor.setLink(ids, null);
+                            }, children: "Remove" })) : null] })] }) }));
+};
+/**
+ * Start a comment thread on the selected element: adds an annotation pin
+ * anchored to the (first) selected shape and selects it, which opens the
+ * comment thread UI. Same backing model as the context menu's
+ * "Add comment" — this is just the toolbar affordance for it.
+ */
+const CommentControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const first = shapes[0];
+    if (!editor || !first)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Add comment", "aria-label": "Add comment", onClick: () => {
+            editor.addAnnotation({ position: { x: 0, y: 0 }, elementId: first.id });
+        }, children: _jsx(MessageCircle, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+/**
+ * Lock the current selection. Locked shapes become click-through (the
+ * hit-test skips them), so locking also drops the selection and hides
+ * this panel; unlocking goes through the right-click context menu.
+ */
+const LockControl = () => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Lock", "aria-label": "Lock selection", onClick: () => {
+            editor.toggleLockSelection();
+        }, children: _jsx(LockIcon, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+const MoreButton = () => {
+    const editor = useDiagramOptional();
+    const controller = useContextMenuController();
+    if (!editor || !controller)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "More actions", "aria-label": "More actions", onClick: (ev) => {
+            const rect = ev.currentTarget.getBoundingClientRect();
+            const screenPoint = { x: rect.left, y: rect.bottom + 4 };
+            const host = editor.hostElement;
+            const hostRect = host?.getBoundingClientRect();
+            const worldPoint = hostRect
+                ? editor.screenToWorld({
+                    x: screenPoint.x - hostRect.left,
+                    y: screenPoint.y - hostRect.top,
+                })
+                : { x: 0, y: 0 };
+            controller.open({ screenPoint, worldPoint });
+        }, children: _jsx(MoreHorizontal, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+// ---------------------------------------------------------------------------
+// Inline controls
+// ---------------------------------------------------------------------------
+/**
+ * Color trigger: a 24×24 square button with a colored fill plus an
+ * outer ring, opens the full swatch picker in a popover.
+ */
+const ColorTrigger = ({ label, color, onChange, ariaLabel, onEyedrop, }) => (_jsx(Popover, { ariaLabel: ariaLabel, trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: label, "aria-label": ariaLabel, children: _jsx("span", { className: "du-sel-color-swatch", style: {
+                background: !color || color === "transparent"
+                    ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+                    : color,
+            } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: label }), _jsx(ColorSwatchPicker, { value: color, onChange: onChange, ...(onEyedrop ? { onEyedrop } : {}) })] }) }));
+const useTextRunRange = (shapes) => {
+    const editingId = useEditorSelector((e) => e.editingTextElement, null);
+    const sel = useEditorSelector((e) => e.editingTextSelection, null);
+    if (editingId === null || sel === null || sel.start === sel.end)
+        return null;
+    const target = shapes.find((s) => s.id === editingId);
+    if (target === undefined)
+        return null;
+    if (!isText(target) && !("text" in target && target.label !== undefined))
+        return null;
+    return {
+        target: target,
+        from: Math.min(sel.start, sel.end),
+        to: Math.max(sel.start, sel.end),
+    };
+};
+/**
+ * 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`.
+ */
+const ColorOpacityControl = ({ shapes, labelMode, }) => {
+    const editor = useDiagramOptional();
+    const runRange = useTextRunRange(shapes);
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const color = sharedString(shapes, (s) => s.style.fill);
+    const opacity = sharedValue(shapes, (s) => s.style.opacity ?? 1);
+    const pct = opacity === null ? null : Math.round(opacity * 100);
+    const swatchBg = !color || color === "transparent"
+        ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+        : color;
+    return (_jsx(Popover, { ariaLabel: "Text color and opacity", trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: "Text color & opacity", "aria-label": "Text color and opacity", children: _jsx("span", { className: "du-sel-color-swatch", style: { background: swatchBg, opacity: opacity ?? 1 } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Text color" }), _jsx(ColorSwatchPicker, { value: color, onChange: (v) => {
+                        // In-edit text selection → colour just those characters (runs);
+                        // otherwise colour the whole element(s) / label(s).
+                        if (runRange) {
+                            editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, {
+                                fill: v ?? "transparent",
+                            });
+                        }
+                        else if (labelMode) {
+                            editor.updateLabelStyle(ids, { fill: v ?? "transparent" });
+                        }
+                        else {
+                            editor.updateStyle(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 });
+                    } })] }) }));
+};
+/** Sticky size presets (S / M / L squares). */
+const StickySizeControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const side = sharedValue(shapes, (s) => s.width);
+    return (_jsx(SegmentedControl, { ariaLabel: "Sticky size", value: side, options: STICKY_SIZE_PRESETS.map((p) => ({
+            value: p.side,
+            label: p.id.toUpperCase(),
+            icon: _jsx("span", { className: "du-sel-size-letter", children: p.id.toUpperCase() }),
+        })), onChange: (v) => {
+            editor.setStickySize(ids, v);
+        } }));
+};
+/** Tag editor for sticky notes: pills with remove + an input that adds on Enter. */
+const StickyTagControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const first = shapes[0];
+    if (!editor || !first)
+        return null;
+    const tags = first.tags ?? [];
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(Popover, { ariaLabel: "Tags", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Add tag", "aria-label": "Add tag", children: _jsx(Tag, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Tags" }), tags.length > 0 ? (_jsx("div", { className: "du-sel-tag-list", children: tags.map((tag) => (_jsxs("span", { className: "du-sel-tag-pill", children: [tag, _jsx("button", { type: "button", className: "du-sel-tag-remove", "aria-label": `Remove tag ${tag}`, onClick: () => {
+                                    editor.setStickyTags(ids, tags.filter((t) => t !== tag));
+                                }, children: "\u00D7" })] }, tag))) })) : null, _jsx("input", { type: "text", className: "du-sel-name-input", placeholder: "Add tag\u2026", "aria-label": "New tag", onKeyDown: (ev) => {
+                        if (ev.key !== "Enter")
+                            return;
+                        ev.preventDefault();
+                        const value = ev.currentTarget.value.trim();
+                        if (value === "" || tags.includes(value))
+                            return;
+                        editor.setStickyTags(ids, [...tags, value]);
+                        ev.currentTarget.value = "";
+                    } })] }) }));
+};
+/** Toggle the author-name strip along the sticky's bottom edge. */
+const StickyAuthorControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const on = shapes.every((s) => s.showAuthor === true);
+    return (_jsx("button", { type: "button", className: `du-sel-icon-button${on ? " is-active" : ""}`, title: "Show author", "aria-label": "Show author", "aria-pressed": on, onClick: () => {
+            editor.toggleStickyAuthor(ids);
+        }, children: _jsx(UserRound, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+/** Emoji picker: replace the element's glyph with one of the presets. */
+const EmojiPickerControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const first = shapes[0];
+    if (!editor || !first)
+        return null;
+    const current = first.glyph;
+    return (_jsx(Popover, { ariaLabel: "Choose emoji", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Choose emoji", "aria-label": "Choose emoji", children: current }), children: _jsx("div", { className: "du-sel-emoji-grid", children: EMOJI_QUICK_PICKS.map((glyph) => (_jsx("button", { type: "button", className: "du-sel-emoji-item", "aria-label": `Emoji ${glyph}`, onClick: () => {
+                    editor.setEmojiGlyph(shapes.map((s) => s.id), glyph);
+                }, children: glyph }, glyph))) }) }));
+};
+/**
+ * Grouped border editor: stroke color, width, dash style and corner
+ * rounding in ONE popover ("border style, opacity, corners and color").
+ * Every write goes through `editor.updateStyle` on the whole selection.
+ */
+const BorderGroupControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const stroke = sharedString(shapes, (s) => s.style.stroke);
+    const width = sharedValue(shapes, (s) => s.style.strokeWidth ?? 1);
+    const dash = sharedValue(shapes, (s) => {
+        const d = s.style.dashArray;
+        if (!d || d.length === 0)
+            return "solid";
+        return (d[0] ?? 0) <= 2 ? "dotted" : "dashed";
+    });
+    const round = sharedValue(shapes, (s) => s.style.roundness?.type ?? "sharp");
+    const roundable = shapes.some((s) => isRectangle(s));
+    return (_jsx(Popover, { ariaLabel: "Border style", trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: "Border style, corners and color", "aria-label": "Border style, corners and color", children: _jsx("span", { className: "du-sel-color-swatch du-sel-swatch-ring", style: { borderColor: stroke ?? "var(--menu-border)" } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Border color" }), _jsx(ColorSwatchPicker, { value: stroke, onChange: (v) => {
+                        editor.updateStyle(ids, { stroke: v ?? "transparent" });
+                    }, onEyedrop: (cb) => {
+                        editor.beginEyedropperPick(cb);
+                    } }), _jsx("header", { className: "du-sel-popover-label", children: "Width" }), _jsx(SegmentedControl, { ariaLabel: "Border width", value: width, options: [
+                        { value: 1, label: "Thin", icon: _jsx(StrokeWidthIcon, { thickness: 1 }) },
+                        { value: 2, label: "Medium", icon: _jsx(StrokeWidthIcon, { thickness: 2.5 }) },
+                        { value: 4, label: "Thick", icon: _jsx(StrokeWidthIcon, { thickness: 4 }) },
+                    ], onChange: (v) => {
+                        editor.updateStyle(ids, { strokeWidth: v });
+                    } }), _jsx("header", { className: "du-sel-popover-label", children: "Style" }), _jsx(SegmentedControl, { ariaLabel: "Border dash style", value: dash, options: [
+                        { value: "solid", label: "Solid", icon: _jsx(Square, { ...CONTROL_ICON }) },
+                        {
+                            value: "dashed",
+                            label: "Dashed",
+                            icon: _jsx(SquareDashed, { ...CONTROL_ICON }),
+                        },
+                        { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { ...CONTROL_ICON }) },
+                    ], onChange: (v) => {
+                        editor.updateStyle(ids, {
+                            dashArray: v === "solid" ? [] : v === "dashed" ? [8, 4] : [2, 4],
+                        });
+                    } }), roundable ? (_jsxs(_Fragment, { children: [_jsx("header", { className: "du-sel-popover-label", children: "Corners" }), _jsx(SegmentedControl, { ariaLabel: "Corner rounding", value: round, options: [
+                                { value: "sharp", label: "Sharp", icon: _jsx(CornerIcon, { kind: "sharp" }) },
+                                { value: "round", label: "Round", icon: _jsx(CornerIcon, { kind: "round" }) },
+                            ], onChange: (v) => {
+                                editor.updateStyle(ids, { roundness: { type: v } });
+                            } })] })) : null] }) }));
+};
+/**
+ * Grouped fill editor: fill color + opacity in one popover
+ * ("set color and opacity").
+ */
+const FillOpacityControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasFill))
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const fill = sharedString(shapes, (s) => s.style.fill);
+    const opacity = sharedValue(shapes, (s) => s.style.opacity ?? 1);
+    const pct = opacity === null ? null : Math.round(opacity * 100);
+    const swatchBg = !fill || fill === "transparent"
+        ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+        : fill;
+    return (_jsx(Popover, { ariaLabel: "Fill color and opacity", trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: "Fill color & opacity", "aria-label": "Fill color and opacity", children: _jsx("span", { className: "du-sel-color-swatch", style: { background: swatchBg, opacity: opacity ?? 1 } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Fill" }), _jsx(ColorSwatchPicker, { value: fill, onChange: (v) => {
+                        editor.updateStyle(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: "Fill opacity", valueLabel: pct === null ? "—" : `${String(pct)}%`, onChange: (v) => {
+                        editor.updateStyle(ids, { opacity: v / 100 });
+                    } })] }) }));
+};
+/**
+ * Frame size presets (paper / screen ratios) as a dropdown. Applying one
+ * resizes the frame to the canonical size; free resize simply diverges
+ * (Custom is implicit — nothing is stored on the element).
+ */
+const FrameRatioControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const first = shapes[0];
+    if (!editor || !first)
+        return null;
+    return (_jsx(Popover, { ariaLabel: "Frame size", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Frame size", "aria-label": "Frame size", children: _jsx(Proportions, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Frame size" }), _jsx("div", { className: "du-sel-preset-list", children: FRAME_SIZE_PRESETS.map((preset) => (_jsx("button", { type: "button", className: "du-sel-preset-item", onClick: () => {
+                            editor.applyFramePreset(first.id, preset);
+                        }, children: preset.label }, preset.id))) })] }) }));
+};
+/** The backing BinaryFile of a single-image selection, if any. */
+const backingFile = (editor, shapes) => {
+    const first = shapes[0];
+    if (!first || !isImage(first) || first.fileId === undefined)
+        return null;
+    const file = getBinaryFile(editor.scene, first.fileId);
+    return file ? { elementId: first.id, fileId: first.fileId, file } : null;
+};
+/**
+ * File-name input for a single selected image backed by a registered
+ * binary file. Commits on Enter / blur through the editor (undoable);
+ * images without a file registry entry (raw `src`) hide the control.
+ */
+const ImageNameControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const backing = backingFile(editor, shapes);
+    if (!backing)
+        return null;
+    const commit = (value) => {
+        const trimmed = value.trim();
+        if (trimmed.length > 0)
+            editor.renameBinaryFile(backing.fileId, trimmed);
+    };
+    return (_jsx("input", { type: "text", className: "du-sel-name-input", defaultValue: backing.file.name ?? "", placeholder: "File name", "aria-label": "File name", onBlur: (ev) => {
+            commit(ev.currentTarget.value);
+        }, onKeyDown: (ev) => {
+            if (ev.key === "Enter") {
+                ev.preventDefault();
+                commit(ev.currentTarget.value);
+                ev.currentTarget.blur();
+            }
+        } }, backing.file.name ?? backing.fileId));
+};
+/**
+ * Pick a new media file (image / GIF / video) and swap it under the
+ * selected shape. Position and width are kept (height refits to the new
+ * aspect); the crop resets when the media kind changes.
+ */
+const ReplaceImageControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const inputRef = useRef(null);
+    const first = shapes[0];
+    if (!editor || !first || !isImage(first))
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Replace media", "aria-label": "Replace media", onClick: () => {
+                    inputRef.current?.click();
+                }, children: _jsx(Upload, { ...CONTROL_ICON, "aria-hidden": true }) }), _jsx("input", { ref: inputRef, type: "file", accept: "image/*,video/*,.gif,.mp4,.webm,.mov", style: { display: "none" }, onChange: (ev) => {
+                    const file = ev.currentTarget.files?.[0];
+                    ev.currentTarget.value = "";
+                    if (file)
+                        void editor.replaceImageFile(first.id, file, file.name);
+                } })] }));
+};
+/** Download the image's original bytes with their stored name / mime. */
+const DownloadImageControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const backing = backingFile(editor, shapes);
+    if (!backing)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Download image", "aria-label": "Download image", onClick: () => {
+            const blob = new Blob([backing.file.data], { type: backing.file.mime });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = backing.file.name ?? "image";
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }, children: _jsx(Download, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+/** Alt-text editor (accessible description) for the selected image. */
+const ImageAltControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const first = shapes[0];
+    if (!editor || !first || !isImage(first))
+        return null;
+    const current = first.alt ?? "";
+    return (_jsx(Popover, { ariaLabel: "Alt text", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Alt text", "aria-label": "Alt text", children: _jsx(FileText, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Alt text" }), _jsx("textarea", { className: "du-sel-alt-input", defaultValue: current, rows: 3, placeholder: "Describe this image", "aria-label": "Alt text", onBlur: (ev) => {
+                        const value = ev.currentTarget.value.trim();
+                        if (value !== current)
+                            editor.setImageAlt([first.id], value === "" ? null : value);
+                    } })] }) }));
+};
+/**
+ * Text lists as a two-row dropdown block: list kind (bulleted / ordered)
+ * over nesting (decrease / increase indent). While inline-editing, the
+ * operations target the paragraphs under the caret / selection; otherwise
+ * the whole element. Clicking the active kind again clears it.
+ */
+const ListControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const kind = sharedValue(shapes, (s) => {
+        const paragraphs = s.paragraphs ?? [];
+        const first = paragraphs[0]?.list;
+        if (first === undefined)
+            return "none";
+        return paragraphs.every((p) => p.list === first) ? first : "none";
+    });
+    return (_jsx(Popover, { ariaLabel: "List", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "List", "aria-label": "List", children: _jsx(List, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-align-rows", children: [_jsx(SegmentedControl, { ariaLabel: "List kind", value: kind === "none" ? null : kind, options: [
+                        {
+                            value: "bullet",
+                            label: "Bulleted list",
+                            icon: _jsx(List, { ...CONTROL_ICON }),
+                        },
+                        {
+                            value: "numbered",
+                            label: "Ordered list",
+                            icon: _jsx(ListOrdered, { ...CONTROL_ICON }),
+                        },
+                    ], onChange: (v) => {
+                        editor.setParagraphList(ids, kind === v ? null : v);
+                    } }), _jsxs("div", { className: "du-sel-align-rows-row", children: [_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Decrease indent", "aria-label": "Decrease indent", onClick: () => {
+                                editor.indentParagraphs(ids, -1);
+                            }, children: _jsx(IndentDecrease, { ...CONTROL_ICON, "aria-hidden": true }) }), _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Increase indent", "aria-label": "Increase indent", onClick: () => {
+                                editor.indentParagraphs(ids, 1);
+                            }, children: _jsx(IndentIncrease, { ...CONTROL_ICON, "aria-hidden": true }) })] })] }) }));
+};
+/**
+ * Marker-style text highlight (background behind glyphs). During inline
+ * editing with a selected range the highlight lands on just those
+ * characters (styled runs); otherwise on the whole element(s). Picking
+ * "no color" clears the highlight.
+ */
+const HighlightControl = ({ shapes, labelMode, }) => {
+    const editor = useDiagramOptional();
+    const runRange = useTextRunRange(shapes);
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedString(shapes, (s) => s.style.highlight);
+    return (_jsx(Popover, { ariaLabel: "Highlight color", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Highlight color", "aria-label": "Highlight color", children: _jsx(Highlighter, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Highlight" }), _jsx(ColorSwatchPicker, { value: value, onChange: (v) => {
+                        const partial = { highlight: v ?? "transparent" };
+                        if (runRange) {
+                            editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, partial);
+                        }
+                        else if (labelMode) {
+                            editor.updateLabelStyle(ids, partial);
+                        }
+                        else {
+                            editor.updateStyle(ids, partial);
+                        }
+                    }, onEyedrop: (cb) => {
+                        editor.beginEyedropperPick(cb);
+                    } })] }) }));
+};
+const FillControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasFill))
+        return null;
+    const value = sharedString(shapes, (s) => s.style.fill);
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(ColorTrigger, { label: "Fill", ariaLabel: "Fill color", color: value, onChange: (v) => {
+            editor.updateStyle(ids, { fill: v ?? "transparent" });
+        }, onEyedrop: (cb) => {
+            editor.beginEyedropperPick(cb);
+        } }));
+};
+// ---------------------------------------------------------------------------
+// Text controls — rendered only for a text-only selection (see the
+// dispatcher in `PropertyPanel`). `fontSize` / `fontFamily` are
+// top-level `TextElement` fields written via `editor.updateTextProps`;
+// `textAlign` / `textBaseline` are `TextStyle` fields written via
+// `editor.updateStyle`.
+// ---------------------------------------------------------------------------
+const FontSizeControl = ({ shapes, labelMode, allowAuto, }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedValue(shapes, 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- cast asserts TextElement; non-text shapes lack fontSize at runtime
+    (s) => s.fontSize ?? null);
+    const auto = allowAuto === true && shapes.every((s) => s.label?.autoFit === true);
+    const presetValue = value !== null && TEXT_FONT_SIZE_PRESETS.some((p) => p.value === value) ? value : null;
+    return (_jsx(Popover, { ariaLabel: "Font size", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Font size", "aria-label": `Font size ${auto ? "auto" : (value ?? "mixed")}`, children: auto ? "A" : value === null ? "—" : `${Math.round(value)}` }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Font size" }), allowAuto === true ? (_jsx("button", { type: "button", className: `du-sel-icon-button du-sel-auto-size${auto ? " is-active" : ""}`, "aria-pressed": auto, title: "Auto \u2014 text size follows the sticky", onClick: () => {
+                        editor.setLabelAutoFit(ids, !auto);
+                    }, children: "Auto" })) : null, _jsx(SegmentedControl, { ariaLabel: "Font size preset", value: presetValue, options: TEXT_FONT_SIZE_PRESETS.map((p) => ({
+                        value: p.value,
+                        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 });
+                    } }), _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 });
+                    } })] }) }));
+};
+const FontFamilyControl = ({ shapes, labelMode, }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedString(shapes, (s) => s.fontFamily);
+    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 });
+                    }, children: f.label }, f.value)))] }) }));
+};
+/**
+ * Text alignment as a two-row dropdown block: horizontal (left / center /
+ * right → `textAlign`) over vertical (top / middle / bottom →
+ * `textBaseline`). One trigger keeps the toolbar row compact and matches
+ * the target design's grouped alignment control.
+ */
+const TextAlignControl = ({ shapes, labelMode, }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedValue(shapes, (s) => s.style.textAlign ?? "left");
+    const valign = sharedValue(shapes, (s) => s.style.textBaseline ?? "top");
+    return (_jsx(Popover, { ariaLabel: "Text alignment", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Text alignment", "aria-label": "Text alignment", children: value === "right" ? (_jsx(AlignRight, { ...CONTROL_ICON, "aria-hidden": true })) : value === "center" ? (_jsx(AlignCenter, { ...CONTROL_ICON, "aria-hidden": true })) : (_jsx(AlignLeft, { ...CONTROL_ICON, "aria-hidden": true })) }), children: _jsxs("div", { className: "du-sel-align-rows", children: [_jsx(SegmentedControl, { ariaLabel: "Horizontal text alignment", value: value, options: [
+                        { value: "left", label: "Left", icon: _jsx(AlignLeft, { ...CONTROL_ICON }) },
+                        {
+                            value: "center",
+                            label: "Center",
+                            icon: _jsx(AlignCenter, { ...CONTROL_ICON }),
+                        },
+                        { value: "right", label: "Right", icon: _jsx(AlignRight, { ...CONTROL_ICON }) },
+                    ], onChange: (v) => {
+                        if (labelMode)
+                            editor.updateLabelStyle(ids, { textAlign: v });
+                        else
+                            editor.updateStyle(ids, { textAlign: v });
+                    } }), _jsx(SegmentedControl, { ariaLabel: "Vertical text alignment", value: valign, options: [
+                        {
+                            value: "top",
+                            label: "Top",
+                            icon: _jsx(AlignStartHorizontal, { ...CONTROL_ICON }),
+                        },
+                        {
+                            value: "middle",
+                            label: "Middle",
+                            icon: _jsx(AlignCenterHorizontal, { ...CONTROL_ICON }),
+                        },
+                        {
+                            value: "bottom",
+                            label: "Bottom",
+                            icon: _jsx(AlignEndHorizontal, { ...CONTROL_ICON }),
+                        },
+                    ], onChange: (v) => {
+                        if (labelMode)
+                            editor.updateLabelStyle(ids, { textBaseline: v });
+                        else
+                            editor.updateStyle(ids, { textBaseline: v });
+                    } })] }) }));
+};
+/**
+ * One decoration toggle inside {@link TextDecorationControl}'s popover.
+ * MUST stay a module-level component: defining it inside its parent would
+ * give it a fresh identity on every parent re-render, so React would
+ * remount the `<button>` each frame. During inline text editing the panel
+ * re-renders constantly (caret blink), and a remount between `mousedown`
+ * and `mouseup` swallows the synthesized `click` — the toggle would then
+ * silently never fire.
+ */
+const TextStyleToggle = ({ active, label, icon, onClick, }) => (_jsx("button", { type: "button", className: `du-sel-icon-button${active ? " is-active" : ""}`, title: label, "aria-label": label, "aria-pressed": active, onClick: onClick, children: icon }));
+/**
+ * Bold / Italic / Underline / Strikethrough. One trigger (Aa) opens a
+ * popover with four independent toggles. Each writes through
+ * `editor.updateStyle`: bold→`fontWeight`, italic→`fontStyle`,
+ * underline/strikethrough→merged `textDecoration`. Active = every
+ * selected shape already has that decoration on.
+ */
+const TextDecorationControl = ({ shapes, labelMode, }) => {
+    const editor = useDiagramOptional();
+    const runRange = useTextRunRange(shapes);
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    // Active state: over an in-edit range, read the effective per-run style
+    // (run overlay ?? element style); otherwise read the whole-element style.
+    const rangeSegs = runRange ? sliceRuns(runRange.target, runRange.from, runRange.to) : [];
+    const base = runRange?.target.style;
+    const segEvery = (pred) => rangeSegs.length > 0 && rangeSegs.every((r) => pred(r.style));
+    const allBold = runRange
+        ? segEvery((st) => (st?.fontWeight ?? base?.fontWeight) === "bold")
+        : shapes.every((s) => s.style?.fontWeight === "bold");
+    const allItalic = runRange
+        ? segEvery((st) => (st?.fontStyle ?? base?.fontStyle) === "italic")
+        : shapes.every((s) => s.style?.fontStyle === "italic");
+    const allUnderline = runRange
+        ? segEvery((st) => (st?.textDecoration ?? base?.textDecoration)?.underline === true)
+        : shapes.every((s) => s.style?.textDecoration?.underline === true);
+    const allStrike = runRange
+        ? segEvery((st) => (st?.textDecoration ?? base?.textDecoration)?.strikethrough === true)
+        : shapes.every((s) => s.style?.textDecoration?.strikethrough === true);
+    // Apply a partial text style to the in-edit range (rich text) or, with no
+    // active range, to the whole selected element(s).
+    const applyPartial = (partial) => {
+        if (runRange) {
+            editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, partial);
+        }
+        else if (labelMode) {
+            editor.updateLabelStyle(ids, partial);
+        }
+        else {
+            editor.updateStyle(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 },
+            });
+        }
+        else {
+            for (const s of shapes) {
+                const cur = s.style?.textDecoration ?? {};
+                editor.updateStyle([s.id], { textDecoration: { ...cur, [key]: on } });
+            }
+        }
+    };
+    return (_jsx(Popover, { ariaLabel: "Text style", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Text style (bold / italic / \u2026)", "aria-label": "Text style", children: _jsx(CaseSensitive, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Style" }), _jsxs("div", { style: { display: "flex", gap: 2 }, children: [_jsx(TextStyleToggle, { active: allBold, label: "Bold", icon: _jsx(Bold, { ...CONTROL_ICON }), onClick: () => {
+                                applyPartial({ fontWeight: allBold ? "normal" : "bold" });
+                            } }), _jsx(TextStyleToggle, { active: allItalic, label: "Italic", icon: _jsx(Italic, { ...CONTROL_ICON }), onClick: () => {
+                                applyPartial({ fontStyle: allItalic ? "normal" : "italic" });
+                            } }), _jsx(TextStyleToggle, { active: allUnderline, label: "Underline", icon: _jsx(Underline, { ...CONTROL_ICON }), onClick: () => {
+                                setDecoration("underline", !allUnderline);
+                            } }), _jsx(TextStyleToggle, { active: allStrike, label: "Strikethrough", icon: _jsx(Strikethrough, { ...CONTROL_ICON }), onClick: () => {
+                                setDecoration("strikethrough", !allStrike);
+                            } })] })] }) }));
+};
+const StrokeControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasStroke))
+        return null;
+    const value = sharedString(shapes, (s) => s.style.stroke);
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(ColorTrigger, { label: "Stroke", ariaLabel: "Stroke color", color: value, onChange: (v) => {
+            editor.updateStyle(ids, { stroke: v ?? "transparent" });
+        }, onEyedrop: (cb) => {
+            editor.beginEyedropperPick(cb);
+        } }));
+};
+/**
+ * Width control for brush strokes: a popover with a range slider driving
+ * `editor.setBrushWidth`, which re-bases the baked per-point widths while
+ * keeping the stroke's pressure profile. Rendered instead of
+ * {@link StrokeWidthControl} when the whole selection is brush strokes.
+ */
+const BrushWidthControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedValue(shapes, (s) => {
+        const brush = s;
+        const base = brush.baseWidth ?? brush.points.reduce((m, p) => Math.max(m, p.width), 0);
+        return base > 0 ? Math.round(base) : null;
+    });
+    return (_jsx(Popover, { ariaLabel: "Brush width", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Brush width", "aria-label": "Brush width", children: _jsx(StrokeWidthIcon, { thickness: 2.5 }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: `Width ${value !== null ? String(value) : "mixed"}` }), _jsx("input", { type: "range", min: BRUSH_WIDTH_MIN, max: BRUSH_WIDTH_MAX, step: 1, value: value ?? BRUSH_WIDTH_MIN, onChange: (e) => {
+                        editor.setBrushWidth(ids, e.currentTarget.valueAsNumber);
+                    }, style: { width: "100%" }, "aria-label": "Brush width" })] }) }));
+};
+/**
+ * Opacity control: percentage badge button opens a popover with a
+ * slider. The trigger is always rendered (even at implicit opacity 1) so
+ * the user can jump to 50% without a multi-step interaction.
+ */
+const OpacityControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = sharedValue(shapes, (s) => s.style.opacity ?? 1);
+    const ids = shapes.map((s) => s.id);
+    const percent = value === null ? null : Math.round(value * 100);
+    const label = percent === null ? "—" : `${percent}%`;
+    return (_jsx(Popover, { ariaLabel: "Opacity", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Opacity", "aria-label": `Opacity ${label}`, children: label }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Opacity" }), _jsx(Slider, { value: percent, min: 0, max: 100, step: 5, ariaLabel: "Opacity", valueLabel: label, onChange: (v) => {
+                        editor.updateStyle(ids, { opacity: v / 100 });
+                    } })] }) }));
+};
+/**
+ * Convert-type control (F9): switch every selected rectangle / ellipse /
+ * diamond to another of those types, preserving position, size and style.
+ * Renders only when every selected shape is convertible. The active type is
+ * shown as the pressed segment (or `null` for a mixed selection).
+ */
+/**
+ * Selection-filter buckets (reference grouping): coarse type groups the
+ * Filter menu offers, keyed by bucket id. `types` maps element `type`
+ * strings into the bucket.
+ */
+const SELECTION_BUCKETS = [
+    {
+        id: "shapes",
+        label: "Shapes",
+        icon: Square,
+        types: ["rectangle", "ellipse", "polygon", "path", "block-arrow"],
+    },
+    { id: "sticky", label: "Sticky notes", icon: StickyNote, types: ["sticky"] },
+    { id: "text", label: "Text", icon: CaseSensitive, types: ["text"] },
+    { id: "image", label: "Images", icon: ImageIcon, types: ["image"] },
+    { id: "frame", label: "Frames", icon: Proportions, types: ["frame"] },
+    { id: "brush", label: "Drawings", icon: Spline, types: ["brush"] },
+    { id: "emoji", label: "Emoji", icon: SmilePlus, types: ["emoji"] },
+    { id: "other", label: "Other", icon: MoreHorizontal, types: [] },
+];
+const bucketIdOf = (type) => SELECTION_BUCKETS.find((b) => b.types.includes(type))?.id ?? "other";
+/** Group a selection's shapes into type buckets (insertion-ordered). */
+const selectionBuckets = (shapes) => {
+    const out = new Map();
+    for (const shape of shapes) {
+        const id = bucketIdOf(shape.type);
+        const list = out.get(id);
+        if (list)
+            list.push(shape);
+        else
+            out.set(id, [shape]);
+    }
+    return out;
+};
+/**
+ * Filter control for MIXED selections (reference behaviour): a popover
+ * listing the selection's type buckets with counts; picking one NARROWS
+ * THE ACTUAL SELECTION to that bucket's elements (the per-type toolbar
+ * then takes over). Single bucket per pick — no multi-filter.
+ */
+const SelectionFilterControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const buckets = selectionBuckets(shapes);
+    return (_jsx(Popover, { ariaLabel: "Filter selection", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Filter selection by type", "aria-label": "Filter selection by type", children: _jsx(ListFilter, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Select only" }), _jsx("div", { className: "du-sel-mask-list", role: "menu", "aria-label": "Selection type filter", children: [...buckets.entries()].map(([id, members]) => {
+                        const bucket = SELECTION_BUCKETS.find((b) => b.id === id);
+                        if (!bucket)
+                            return null;
+                        const Icon = bucket.icon;
+                        return (_jsxs("button", { type: "button", role: "menuitem", className: "du-sel-mask-row", "aria-label": `Select only ${bucket.label}`, onClick: () => {
+                                editor.setSelection(members.map((m) => m.id));
+                            }, children: [_jsx(Icon, { ...CONTROL_ICON, "aria-hidden": true }), _jsx("span", { children: bucket.label }), _jsx("span", { className: "du-sel-mask-ratio", children: members.length })] }, id));
+                    }) })] }) }));
+};
+/**
+ * Switch-type targets offered by {@link ConvertTypeControl}, in menu
+ * order. Every listed kind converts to every other one (shape kinds ↔
+ * text ↔ sticky).
+ */
+const CONVERT_TARGETS = [
+    { value: "rectangle", label: "Rectangle", icon: Square },
+    { value: "ellipse", label: "Ellipse", icon: Circle },
+    { value: "polygon", label: "Diamond", icon: Diamond },
+    { value: "text", label: "Text", icon: CaseSensitive },
+    { value: "sticky", label: "Sticky note", icon: StickyNote },
+];
+/** Kinds inside the switch-type matrix — the only ones the picker handles. */
+const isConvertible = (s) => isRectangle(s) || isEllipse(s) || isPolygon(s) || isText(s) || isSticky(s);
+const convertTargetOf = (s) => isRectangle(s)
+    ? "rectangle"
+    : isEllipse(s)
+        ? "ellipse"
+        : isText(s)
+            ? "text"
+            : isSticky(s)
+                ? "sticky"
+                : "polygon";
+/**
+ * Switch-type picker: one trigger showing the selection's current kind
+ * that opens a menu of every target kind. Picking a row converts the
+ * selection in place and closes the menu.
+ */
+const ConvertTypeControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const [open, setOpen] = useState(false);
+    if (!editor)
+        return null;
+    const value = sharedValue(shapes, convertTargetOf);
+    const current = CONVERT_TARGETS.find((t) => t.value === value);
+    const TriggerIcon = current?.icon ?? Square;
+    return (_jsx(Popover, { ariaLabel: "Switch type", open: open, onOpenChange: setOpen, trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Switch type", "aria-label": "Switch type", children: _jsx(TriggerIcon, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Switch type" }), _jsx("div", { className: "du-sel-mask-list", role: "menu", "aria-label": "Switch type targets", children: CONVERT_TARGETS.map((target) => {
+                        const Icon = target.icon;
+                        const active = target.value === value;
+                        return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": active, className: `du-sel-mask-row${active ? " is-active" : ""}`, "aria-label": target.label, onClick: () => {
+                                editor.convertSelection(target.value);
+                                setOpen(false);
+                            }, children: [_jsx(Icon, { ...CONTROL_ICON, "aria-hidden": true }), _jsx("span", { children: target.label })] }, target.value));
+                    }) })] }) }));
+};
+/**
+ * Mask presets offered by {@link MaskControl}: `null` = no mask, plus
+ * the two parametric kinds and the built-in polygon rings. `radius`
+ * default for round-rect comes from `IMAGE_MASK_DEFAULT_RADIUS`.
+ */
+const MASK_TILES = [
+    { key: "none", label: "No mask", icon: Square, mask: null },
+    { key: "ellipse", label: "Ellipse mask", icon: Circle, mask: { kind: "ellipse" } },
+    {
+        key: "round-rect",
+        label: "Rounded mask",
+        icon: Squircle,
+        mask: { kind: "round-rect", radius: IMAGE_MASK_DEFAULT_RADIUS },
+    },
+    ...[
+        ["diamond", "Diamond mask", Diamond],
+        ["triangle", "Triangle mask", TriangleIcon],
+        ["hexagon", "Hexagon mask", HexagonIcon],
+        ["star", "Star mask", StarIcon],
+    ].map(([key, label, icon]) => ({
+        key,
+        label,
+        icon,
+        mask: {
+            kind: "polygon",
+            points: IMAGE_MASK_POLYGON_PRESETS[key] ?? [],
+        },
+    })),
+];
+/**
+ * Aspect-preset tiles (reference mask list): momentary actions, not
+ * stored kinds — Custom enters the free-crop mode, Original resets
+ * crop + mask to the source's natural aspect, the rest centre-crop to
+ * the ratio via `Editor.setImageAspectPreset` (Circle also installs an
+ * ellipse mask on the square box).
+ */
+const ASPECT_TILES = [
+    { key: "custom", label: "Custom", icon: Crop },
+    { key: "original", label: "Original", icon: ImageIcon },
+    { key: "circle", label: "Circle", icon: Circle },
+    { key: "square", label: "Square", icon: Square },
+    { key: "portrait", label: "Portrait", icon: RectangleVertical, ratio: "3:4" },
+    { key: "landscape", label: "Landscape", icon: RectangleHorizontal, ratio: "4:3" },
+    { key: "wide", label: "Wide", icon: Tv, ratio: "16:9" },
+];
+/** The tile a shape's current mask corresponds to (for the pressed state). */
+const maskTileKey = (mask) => {
+    if (!mask)
+        return "none";
+    if (mask.kind === "polygon") {
+        for (const [name, ring] of Object.entries(IMAGE_MASK_POLYGON_PRESETS)) {
+            if (ring.length === mask.points.length &&
+                ring.every((p, i) => {
+                    const q = mask.points[i];
+                    return q?.x === p.x && q.y === p.y;
+                })) {
+                return name;
+            }
+        }
+        return "polygon";
+    }
+    return mask.kind;
+};
+/**
+ * Shape-mask picker for image selections: a popover of shape tiles
+ * (None / Ellipse / Rounded / polygon presets) applied instantly, plus a
+ * corner-radius slider when the rounded mask is active. The canvas
+ * renderer clips through `RenderTarget.clip`, so the mask reaches every
+ * backend and PNG / SVG exports.
+ */
+const MaskControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const images = shapes.filter((s) => isImage(s));
+    if (images.length === 0)
+        return null;
+    const ids = images.map((s) => s.id);
+    const current = sharedValue(images, (s) => maskTileKey(s.mask));
+    const firstMask = images[0]?.mask;
+    const radius = firstMask?.kind === "round-rect" ? firstMask.radius : null;
+    return (_jsx(Popover, { ariaLabel: "Image mask", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Mask", "aria-label": "Image mask", children: _jsx(Squircle, { ...CONTROL_ICON, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Mask" }), _jsx("div", { className: "du-sel-mask-list", role: "menu", "aria-label": "Aspect presets", children: ASPECT_TILES.map((tile) => {
+                        const Icon = tile.icon;
+                        return (_jsxs("button", { type: "button", role: "menuitem", className: "du-sel-mask-row", "aria-label": tile.label, onClick: () => {
+                                if (tile.key === "custom") {
+                                    const first = ids[0];
+                                    if (first !== undefined)
+                                        editor.beginImageCrop(first);
+                                }
+                                else {
+                                    editor.setImageAspectPreset(ids, tile.key);
+                                }
+                            }, children: [_jsx(Icon, { ...CONTROL_ICON, "aria-hidden": true }), _jsx("span", { children: tile.label }), tile.ratio !== undefined ? (_jsx("span", { className: "du-sel-mask-ratio", children: tile.ratio })) : null] }, tile.key));
+                    }) }), _jsx("div", { className: "du-sel-mask-tiles", children: MASK_TILES.map((tile) => {
+                        const Icon = tile.icon;
+                        const active = current === tile.key;
+                        return (_jsx("button", { type: "button", className: `du-sel-icon-button${active ? " is-active" : ""}`, title: tile.label, "aria-label": tile.label, "aria-pressed": active, onClick: () => {
+                                editor.setImageMask(ids, tile.mask);
+                            }, children: _jsx(Icon, { ...CONTROL_ICON, "aria-hidden": true }) }, tile.key));
+                    }) }), radius !== null ? (_jsx(Slider, { value: Math.round(radius * 100), min: 0, max: 50, step: 5, ariaLabel: "Corner radius", valueLabel: `${String(Math.round(radius * 100))}%`, onChange: (v) => {
+                        editor.setImageMask(ids, { kind: "round-rect", radius: v / 100 });
+                    } })) : null] }) }));
+};
+/**
+ * Crop control (F10): a button that enters image-crop mode for the single
+ * selected image. Renders only for a lone image selection (crop is
+ * single-target). Double-clicking the image on the canvas does the same.
+ */
+const CropControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const only = shapes.length === 1 ? shapes[0] : undefined;
+    if (only === undefined || !isImage(only))
+        return null;
+    const id = only.id;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Crop image (double-click)", "aria-label": "Crop image", onClick: () => {
+            editor.beginImageCrop(id);
+        }, children: _jsx(Crop, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+// ---------------------------------------------------------------------------
+// Link controls — horizontal compact set used when an edge (not a
+// shape) is the active selection. Mirrors the shape control surface
+// (color triggers + segmented row controls) so the floating panel
+// reads consistently regardless of selection type.
+// ---------------------------------------------------------------------------
+const LinkStrokeColorControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const color = typeof edge.style.stroke === "string" ? edge.style.stroke : null;
+    return (_jsx(ColorTrigger, { label: "Stroke", ariaLabel: "Link stroke color", color: color, onChange: (v) => {
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, stroke: v ?? "transparent" },
+            }));
+        }, onEyedrop: (cb) => {
+            editor.beginEyedropperPick(cb);
+        } }));
+};
+const LinkStrokeWidthControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = typeof edge.style.strokeWidth === "number" ? edge.style.strokeWidth : null;
+    return (_jsx(SegmentedControl, { ariaLabel: "Link stroke width", value: value, options: [
+            { value: 1, label: "Thin", icon: _jsx(StrokeWidthIcon, { thickness: 1 }) },
+            { value: 2, label: "Medium", icon: _jsx(StrokeWidthIcon, { thickness: 2.5 }) },
+            { value: 4, label: "Thick", icon: _jsx(StrokeWidthIcon, { thickness: 4 }) },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, strokeWidth: v },
+            }));
+        } }));
+};
+const LinkStrokeStyleControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const da = edge.style.dashArray;
+    const value = (() => {
+        if (!da || da.length === 0)
+            return "solid";
+        const first = da[0] ?? 0;
+        return first <= 3 ? "dotted" : "dashed";
+    })();
+    return (_jsx(SegmentedControl, { ariaLabel: "Link stroke style", value: value, options: [
+            { value: "solid", label: "Solid", icon: _jsx(Square, { ...CONTROL_ICON }) },
+            { value: "dashed", label: "Dashed", icon: _jsx(SquareDashed, { ...CONTROL_ICON }) },
+            { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { ...CONTROL_ICON }) },
+        ], onChange: (v) => {
+            const dashArray = v === "solid" ? [] : v === "dashed" ? [8, 4] : [2, 4];
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, dashArray },
+            }));
+        } }));
+};
+const LinkLineKindControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = edge.lineKind ?? "line";
+    return (_jsx(SegmentedControl, { ariaLabel: "Link body", value: value, options: [
+            { value: "line", label: "Line", icon: _jsx(Minus, { ...CONTROL_ICON }) },
+            {
+                value: "block-arrow",
+                label: "Block arrow",
+                icon: _jsx(MoveRight, { ...CONTROL_ICON }),
+            },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({ ...e, lineKind: v }));
+        } }));
+};
+const LinkRoutingControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = edge.routing ?? "straight";
+    return (_jsx(SegmentedControl, { ariaLabel: "Link routing", value: value, options: [
+            { value: "straight", label: "Straight", icon: _jsx(RoutingIcon, { kind: "straight" }) },
+            { value: "orthogonal", label: "Elbow", icon: _jsx(RoutingIcon, { kind: "orthogonal" }) },
+            { value: "bezier", label: "Curved", icon: _jsx(Spline, { ...CONTROL_ICON }) },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({ ...e, routing: v }));
+        } }));
+};
+const LinkArrowheadControl = ({ edge, side, }) => {
+    const editor = useDiagramOptional();
+    const [showErd, setShowErd] = useState(false);
+    if (!editor)
+        return null;
+    const current = edge.arrowheads?.[side] ?? "none";
+    const pick = (style) => {
+        editor.updateSelectedLink((e) => ({
+            ...e,
+            arrowheads: { ...(e.arrowheads ?? {}), [side]: style },
+        }));
+    };
+    const Option = ({ style }) => (_jsx("button", { type: "button", className: `du-arrowhead-option${style === current ? " du-arrowhead-option--active" : ""}`, title: ARROWHEAD_LABELS[style], "aria-label": ARROWHEAD_LABELS[style], "aria-pressed": style === current, onClick: () => {
+            pick(style);
+        }, children: style === "none" ? (_jsx("span", { className: "du-arrowhead-none", children: "\u2205" })) : arrowheadGlyphFamily(style) === "none" ? (_jsx("span", { className: "du-arrowhead-erd-label", children: ARROWHEAD_LABELS[style].replace(/^ERD /, "") })) : (_jsx(ArrowheadGlyph, { kind: style, side: side })) }));
+    return (_jsx(Popover, { trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: `Arrow ${side}: ${ARROWHEAD_LABELS[current]}`, "aria-label": `Arrow ${side}`, children: _jsx(ArrowheadGlyph, { kind: current, side: side }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsxs("header", { className: "du-sel-popover-label", children: ["Arrow ", side] }), _jsx("div", { className: "du-arrowhead-grid", children: BASIC_ARROWHEADS.map((s) => (_jsx(Option, { style: s }, s))) }), _jsxs("button", { type: "button", className: "du-arrowhead-erd-toggle", "aria-expanded": showErd, onClick: () => {
+                        setShowErd((v) => !v);
+                    }, children: [showErd ? "▾" : "▸", " ER diagram"] }), showErd && (_jsx("div", { className: "du-arrowhead-grid", children: ERD_ARROWHEADS.map((s) => (_jsx(Option, { style: s }, s))) }))] }) }));
+};
+const LinkAutoRouteControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    // Obstacle-avoidance produces an orthogonal path, so it only makes sense
+    // for straight / elbow links — a curved (bezier) link can't carry the
+    // routed polyline. Hide the toggle for curved.
+    const routing = edge.routing ?? "straight";
+    if (routing === "bezier")
+        return null;
+    const on = edge.avoidObstacles === true;
+    return (_jsx("button", { type: "button", className: `du-sel-icon-button${on ? " is-active" : ""}`, title: "Route around shapes", "aria-label": "Route around shapes", "aria-pressed": on, onClick: () => {
+            editor.setSelectedLinkAvoidObstacles(!on);
+        }, children: _jsx(Waypoints, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+const LinkDeleteControl = () => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Delete edge", "aria-label": "Delete edge", onClick: () => {
+            editor.deleteSelected();
+        }, children: _jsx(Trash2, { ...CONTROL_ICON, "aria-hidden": true }) }));
+};
+// Inline SVG glyph for routing variant — Lucide has `Spline` for the
+// curve but no clean "straight" / "elbow" line variants.
+const RoutingIcon = ({ kind }) => {
+    if (kind === "straight") {
+        return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("line", { x1: 2, y1: 11, x2: 12, y2: 3, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" }) }));
+    }
+    // orthogonal (elbow)
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M 2 11 L 2 7 L 12 7 L 12 3", stroke: "currentColor", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+// Which compact glyph family renders a given arrowhead style.
+const arrowheadGlyphFamily = (kind) => {
+    switch (kind) {
+        case "arrow":
+        case "openArrow":
+        case "roundedArrow":
+        case "arcArrow":
+            return "open";
+        case "triangle":
+        case "filledArrow":
+            return "triangle";
+        case "diamond":
+        case "rhombus":
+        case "filledRhombus":
+            return "diamond";
+        case "circle":
+        case "filledCircle":
+            return "circle";
+        default:
+            return "none"; // none + ERD caps (labelled by name in the picker)
+    }
+};
+// Picker option sets. ERD caps are gated behind a toggle.
+const BASIC_ARROWHEADS = [
+    "none",
+    "arrow",
+    "openArrow",
+    "roundedArrow",
+    "arcArrow",
+    "filledArrow",
+    "triangle",
+    "circle",
+    "filledCircle",
+    "rhombus",
+    "filledRhombus",
+];
+const ERD_ARROWHEADS = [
+    "erdOne",
+    "erdOnlyOne",
+    "erdMany",
+    "erdOneOrMany",
+    "erdZeroOrOne",
+    "erdZeroOrMany",
+];
+const ARROWHEAD_LABELS = {
+    none: "None",
+    arrow: "Arrow",
+    openArrow: "Open arrow",
+    roundedArrow: "Rounded arrow",
+    arcArrow: "Arc arrow",
+    triangle: "Triangle",
+    filledArrow: "Filled arrow",
+    circle: "Circle",
+    filledCircle: "Filled circle",
+    diamond: "Diamond",
+    rhombus: "Rhombus",
+    filledRhombus: "Filled rhombus",
+    erdOne: "ERD one",
+    erdOnlyOne: "ERD only one",
+    erdMany: "ERD many",
+    erdOneOrMany: "ERD one or many",
+    erdZeroOrOne: "ERD zero or one",
+    erdZeroOrMany: "ERD zero or many",
+};
+const ArrowheadGlyph = ({ kind, side, }) => {
+    // Build a 14×14 horizontal line with the head at right (for `to`) or
+    // left (for `from`), all in stroke / fill currentColor.
+    const flipped = side === "from";
+    const lineX1 = flipped ? 12 : 2;
+    const lineX2 = flipped ? 5 : 9;
+    const headCx = flipped ? 3 : 11;
+    const headBase = flipped ? 5 : 9;
+    const stroke = (_jsx("line", { x1: lineX1, y1: 7, x2: lineX2, y2: 7, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" }));
+    // Map the full vocabulary onto the four drawable glyph families. ERD caps
+    // have no compact glyph — they fall through to a bare line; the picker
+    // labels them by name so they stay distinguishable.
+    const fam = arrowheadGlyphFamily(kind);
+    let head = null;
+    if (fam === "open") {
+        head = (_jsx("polyline", { points: flipped
+                ? `${headCx + 3},4 ${headCx},7 ${headCx + 3},10`
+                : `${headCx - 3},4 ${headCx},7 ${headCx - 3},10`, stroke: "currentColor", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }));
+    }
+    else if (fam === "triangle") {
+        head = (_jsx("polygon", { points: flipped
+                ? `${headCx},7 ${headBase},4 ${headBase},10`
+                : `${headCx},7 ${headBase},4 ${headBase},10`, fill: "currentColor" }));
+    }
+    else if (fam === "diamond") {
+        head = (_jsx("polygon", { points: `${headCx},4 ${headCx + (flipped ? -3 : 3)},7 ${headCx},10 ${headCx + (flipped ? 3 : -3)},7`, fill: kind === "filledRhombus" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.2 }));
+    }
+    else if (fam === "circle") {
+        head = (_jsx("circle", { cx: headCx, cy: 7, r: 2.2, fill: kind === "filledCircle" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.2 }));
+    }
+    return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [stroke, head] }));
+};
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+const Divider = () => _jsx("span", { className: "du-sel-divider", "aria-hidden": true });
+/**
+ * Pseudo-shape exposing a shape's LABEL as if it were a text element, so
+ * the text controls read label values. A shape without a label yet shows
+ * the defaults its first text will take (`seedLabel` in the editor).
+ */
+const labelView = (s) => ({
+    ...s,
+    style: s.label?.style ?? {},
+    fontSize: s.label?.fontSize ?? LABEL_DEFAULT_FONT_SIZE,
+    fontFamily: s.label?.fontFamily ?? TEXT_DEFAULT_FONT_FAMILY,
+    text: s.label?.text ?? "",
+    runs: s.label?.runs,
+});
+/**
+ * Split the control list on `<Divider />` markers into `.du-sel-group`
+ * clusters. The separators themselves are CSS: a group draws one before
+ * itself only when a NON-EMPTY group precedes it, so an optional cluster
+ * whose controls all render `null` for this selection (no label text, no
+ * crop, …) never leaves a stray or doubled divider.
+ */
+const groupControls = (nodes) => {
+    const groups = [[]];
+    for (const node of nodes) {
+        if (isValidElement(node) && node.type === Divider)
+            groups.push([]);
+        else
+            groups[groups.length - 1]?.push(node);
+    }
+    return groups
+        .filter((g) => g.length > 0)
+        .map((g, i) => (_jsx("span", { className: "du-sel-group", children: g }, `g-${String(i)}`)));
+};
+// ---------------------------------------------------------------------------
+// Inline SVG glyphs
+// ---------------------------------------------------------------------------
+const StrokeWidthIcon = ({ thickness }) => (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("line", { x1: 2, y1: 7, x2: 12, y2: 7, stroke: "currentColor", strokeWidth: thickness, strokeLinecap: "round" }) }));
+const CornerIcon = ({ kind }) => {
+    if (kind === "sharp") {
+        return _jsx(Square, { ...CONTROL_ICON, "aria-hidden": true });
+    }
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("rect", { x: 2, y: 2, width: 10, height: 10, rx: 3, ry: 3, stroke: "currentColor", strokeWidth: 1.5 }) }));
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const sharedValue = (elements, pick) => {
+    const set = new Set();
+    for (const s of elements)
+        set.add(pick(s));
+    if (set.size !== 1)
+        return null;
+    const v = set.values().next().value;
+    return v ?? null;
+};
+const sharedString = (elements, pick) => {
+    const value = sharedValue(elements, (s) => pick(s));
+    return typeof value === "string" ? value : null;
+};
+// Frames are always fillable (white by default) even when `style.fill` is
+// unset.
+const hasFill = (shape) => shape.style.fill !== undefined || isFrame(shape);
+const hasStroke = (shape) => shape.style.stroke !== undefined;
+//# sourceMappingURL=property-panel.js.map