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

package/dist/property-panel.js

@@ -1,917 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { AlignCenter, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignHorizontalDistributeCenter, AlignLeft, AlignRight, AlignStartHorizontal, AlignStartVertical, AlignVerticalDistributeCenter, Bold, CaseSensitive, ChevronsDown, ChevronsUp, Circle, Copy as CopyIcon, Crop, Diamond, FlipHorizontal2 as FlipHorizontalIcon, FlipVertical2 as FlipVerticalIcon, Group as GroupIcon, Italic, Link as LinkIcon, Minus, MoreHorizontal, MoreVertical, MoveDown, MoveRight, MoveUp, Spline, Square, SquareDashed, SquareDot, Strikethrough, Trash2, Underline, Ungroup as UngroupIcon, Waypoints, } from "lucide-react";
-import { isGroup, isText, isImage, isFrame, isRectangle, isEllipse, isBrush, isPolygon, sliceRuns, } from "@oh-just-another/scene";
-import { useDiagramOptional, useReadOnly, useScene, useSelectedLink, useSelection, } from "./hooks.js";
-import { useEditorSelector } from "./context.js";
-import { useContextMenuController } from "./context-menu-controller.js";
-import { ColorSwatchPicker } from "./color-swatch-picker.js";
-import { Popover } from "./popover.js";
-import { SegmentedControl } from "./segmented-control.js";
-import { Slider } from "./slider.js";
-import { BRUSH_WIDTH_MAX, BRUSH_WIDTH_MIN, TEXT_FONT_SIZE_MAX, TEXT_FONT_SIZE_MIN, TEXT_FONT_SIZE_PRESETS, TEXT_FONT_STACKS, } from "./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 primary = [];
-        const overflow = [];
-        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"));
-        }
-        else if (allText) {
-            primary.push(_jsx(FontSizeControl, { shapes: shapes }, "size"), _jsx(ColorOpacityControl, { shapes: shapes }, "color"), _jsx(TextAlignControl, { shapes: shapes }, "align"));
-            overflow.push(_jsx(FontFamilyControl, { shapes: shapes }, "family"), _jsx(TextDecorationControl, { shapes: shapes }, "decor"));
-        }
-        else if (allImage) {
-            // An image's pixels are the content — fill/stroke make no sense.
-            primary.push(_jsx(OpacityControl, { shapes: shapes }, "opacity"), _jsx(CropControl, { shapes: shapes }, "crop"));
-        }
-        else {
-            primary.push(_jsx(FillControl, { shapes: shapes }, "fill"), _jsx(StrokeControl, { shapes: shapes }, "stroke"), 
-            // Brush widths are baked per point — `style.strokeWidth` has no
-            // effect, so brush-only selections get a slider that re-bases the
-            // baked widths instead of the Thin/Medium/Thick segmented control.
-            allBrush ? (_jsx(BrushWidthControl, { shapes: shapes }, "width")) : (_jsx(StrokeWidthControl, { shapes: shapes }, "width")));
-            overflow.push(_jsx(StrokeStyleControl, { shapes: shapes }, "dash"), _jsx(RoundnessControl, { shapes: shapes }, "round"), _jsx(OpacityControl, { shapes: shapes }, "opacity"), _jsx(ConvertTypeControl, { shapes: shapes }, "convert"));
-        }
-        // Common trailing controls for every shape type.
-        overflow.push(_jsx(ZOrderControl, {}, "z"), _jsx(LinkControl, { shapes: shapes }, "link"));
-        // Alignment needs a reference box — only meaningful for 2+ shapes.
-        if (shapes.length >= 2)
-            overflow.push(_jsx(AlignControl, {}, "align"));
-        overflow.push(_jsx(ActionsControl, { shapes: shapes }, "actions"), _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 (_jsxs("div", { className: `du-sel-panel ${className ?? ""}`.trim(), style: style, children: [primary, overflow.length > 0 ? _jsx(Divider, {}) : null, 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: 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, { size: 18, strokeWidth: 1.75, "aria-hidden": true }) })) : null] }), expanded && overflow.length > 0 ? (_jsx("div", { className: "du-sel-mobile-overflow", children: 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, { size: 14, strokeWidth: 1.75, "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] })] }) }));
-};
-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, { size: 14, strokeWidth: 1.75, "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 || !isText(target))
-        return null;
-    return { 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 }) => {
-    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: "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: "Color" }), _jsx(ColorSwatchPicker, { value: color, onChange: (v) => {
-                        // In-edit text selection → colour just those characters (runs);
-                        // otherwise colour the whole element(s).
-                        if (runRange) {
-                            editor.applyTextStyleToRange(runRange.target.id, runRange.from, runRange.to, {
-                                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) => {
-                        editor.updateStyle(ids, { opacity: v / 100 });
-                    } })] }) }));
-};
-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 }) => {
-    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 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 ${value ?? "mixed"}`, children: value === null ? "—" : `${Math.round(value)}` }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Font size" }), _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) => {
-                        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) => {
-                        editor.updateTextProps(ids, { fontSize: v });
-                    } })] }) }));
-};
-const FontFamilyControl = ({ shapes }) => {
-    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: () => {
-                        editor.updateTextProps(ids, { fontFamily: f.value });
-                    }, children: f.label }, f.value)))] }) }));
-};
-const TextAlignControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor)
-        return null;
-    const ids = shapes.map((s) => s.id);
-    const value = sharedValue(shapes, (s) => s.style.textAlign ?? "left");
-    return (_jsx(SegmentedControl, { ariaLabel: "Text alignment", value: value, options: [
-            { value: "left", label: "Left", icon: _jsx(AlignLeft, { size: 14, strokeWidth: 1.75 }) },
-            { value: "center", label: "Center", icon: _jsx(AlignCenter, { size: 14, strokeWidth: 1.75 }) },
-            { value: "right", label: "Right", icon: _jsx(AlignRight, { size: 14, strokeWidth: 1.75 }) },
-        ], onChange: (v) => {
-            editor.updateStyle(ids, { textAlign: 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 }) => {
-    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 {
-            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 (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, { size: 16, strokeWidth: 1.75, "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, { size: 14, strokeWidth: 1.75 }), onClick: () => {
-                                applyPartial({ fontWeight: allBold ? "normal" : "bold" });
-                            } }), _jsx(TextStyleToggle, { active: allItalic, label: "Italic", icon: _jsx(Italic, { size: 14, strokeWidth: 1.75 }), onClick: () => {
-                                applyPartial({ fontStyle: allItalic ? "normal" : "italic" });
-                            } }), _jsx(TextStyleToggle, { active: allUnderline, label: "Underline", icon: _jsx(Underline, { size: 14, strokeWidth: 1.75 }), onClick: () => {
-                                setDecoration("underline", !allUnderline);
-                            } }), _jsx(TextStyleToggle, { active: allStrike, label: "Strikethrough", icon: _jsx(Strikethrough, { size: 14, strokeWidth: 1.75 }), 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" })] }) }));
-};
-const StrokeWidthControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor || !shapes.some((s) => s.style.stroke !== undefined))
-        return null;
-    const value = sharedValue(shapes, (s) => s.style.strokeWidth ?? null);
-    const ids = shapes.map((s) => s.id);
-    return (_jsx(SegmentedControl, { ariaLabel: "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.updateStyle(ids, { strokeWidth: v });
-        } }));
-};
-const StrokeStyleControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor || !shapes.some(hasStroke))
-        return null;
-    // Tolerant detection: any 2-element array with first ≤ 3 → dotted;
-    // anything else with first > 3 → dashed. Lets the panel recognise
-    // template-authored arrays like `[6, 4]` (auto-grid frames) as
-    // "dashed" instead of "mixed".
-    const value = sharedValue(shapes, (s) => {
-        const da = s.style.dashArray;
-        if (!da || da.length === 0)
-            return "solid";
-        const first = da[0] ?? 0;
-        return first <= 3 ? "dotted" : "dashed";
-    });
-    const ids = shapes.map((s) => s.id);
-    return (_jsx(SegmentedControl, { ariaLabel: "Stroke style", value: value, options: [
-            { value: "solid", label: "Solid", icon: _jsx(Square, { size: 14, strokeWidth: 1.75 }) },
-            { value: "dashed", label: "Dashed", icon: _jsx(SquareDashed, { size: 14, strokeWidth: 1.75 }) },
-            { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { size: 14, strokeWidth: 1.75 }) },
-        ], onChange: (v) => {
-            // An empty `dashArray: []` renders solid (Canvas2D `setLineDash([])`),
-            // and an empty array is truthy in JS so the renderer's dash call still
-            // goes through. Always pass an array.
-            const dashArray = v === "solid" ? [] : v === "dashed" ? [8, 4] : [2, 4];
-            editor.updateStyle(ids, { dashArray });
-        } }));
-};
-/**
- * Corner control: an icon button (sharp / round) opens a popover with
- * the round-radius slider plus an auto checkbox. Renders nothing when no
- * corner-capable shapes are selected.
- */
-const RoundnessControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor)
-        return null;
-    const supports = shapes.every((s) => isRectangle(s) || s.type === "container");
-    if (!supports)
-        return null;
-    const type = sharedValue(shapes, (s) => s.style.roundness?.type ?? "sharp");
-    const radius = sharedValue(shapes, (s) => s.style.roundness?.value ?? null);
-    const ids = shapes.map((s) => s.id);
-    const isAuto = radius === null;
-    return (_jsx(Popover, { ariaLabel: "Corners", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Corners", "aria-label": "Corners", children: _jsx(CornerIcon, { kind: type ?? "sharp" }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Corners" }), _jsx(SegmentedControl, { ariaLabel: "Corner roundness", value: type, 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 } });
-                    } }), type === "round" ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "du-prop-checkbox", children: [_jsx("input", { type: "checkbox", checked: isAuto, onChange: (ev) => {
-                                        if (ev.target.checked) {
-                                            editor.updateStyle(ids, { roundness: { type: "round" } });
-                                        }
-                                        else {
-                                            editor.updateStyle(ids, {
-                                                roundness: { type: "round", value: radius ?? 8 },
-                                            });
-                                        }
-                                    } }), _jsx("span", { children: "Auto radius" })] }), !isAuto ? (_jsx(Slider, { value: radius, min: 0, max: 64, step: 1, ariaLabel: "Corner radius", valueLabel: `${radius}px`, onChange: (v) => {
-                                editor.updateStyle(ids, { roundness: { type: "round", value: v } });
-                            } })) : null] })) : null] }) }));
-};
-/**
- * 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 });
-                    } })] }) }));
-};
-const ZOrderControl = () => {
-    const editor = useDiagramOptional();
-    if (!editor)
-        return null;
-    return (_jsx(SegmentedControl, { ariaLabel: "Z-order", value: null, options: [
-            {
-                value: "back",
-                label: "Send to back",
-                icon: _jsx(ChevronsDown, { size: 14, strokeWidth: 1.75 }),
-            },
-            {
-                value: "backward",
-                label: "Send backward",
-                icon: _jsx(MoveDown, { size: 14, strokeWidth: 1.75 }),
-            },
-            { value: "forward", label: "Bring forward", icon: _jsx(MoveUp, { size: 14, strokeWidth: 1.75 }) },
-            {
-                value: "front",
-                label: "Bring to front",
-                icon: _jsx(ChevronsUp, { size: 14, strokeWidth: 1.75 }),
-            },
-        ], onChange: (v) => {
-            if (v === "back")
-                editor.sendToBack();
-            else if (v === "backward")
-                editor.sendBackward();
-            else if (v === "forward")
-                editor.bringForward();
-            else
-                editor.bringToFront();
-        } }));
-};
-/**
- * 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).
- */
-const ConvertTypeControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor)
-        return null;
-    const convertible = shapes.every((s) => isRectangle(s) || isEllipse(s) || isPolygon(s));
-    if (!convertible)
-        return null;
-    const value = sharedValue(shapes, (s) => isRectangle(s) ? "rectangle" : isEllipse(s) ? "ellipse" : "polygon");
-    return (_jsx(SegmentedControl, { ariaLabel: "Shape type", value: value, options: [
-            { value: "rectangle", label: "Rectangle", icon: _jsx(Square, { size: 14, strokeWidth: 1.75 }) },
-            { value: "ellipse", label: "Ellipse", icon: _jsx(Circle, { size: 14, strokeWidth: 1.75 }) },
-            { value: "polygon", label: "Diamond", icon: _jsx(Diamond, { size: 14, strokeWidth: 1.75 }) },
-        ], onChange: (v) => {
-            editor.convertSelection(v);
-        } }));
-};
-/**
- * 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-icon-button", title: "Crop image (double-click)", "aria-label": "Crop image", onClick: () => {
-            editor.beginImageCrop(id);
-        }, children: _jsx(Crop, { size: 16, strokeWidth: 1.75 }) }));
-};
-const ActionsControl = ({ shapes }) => {
-    const editor = useDiagramOptional();
-    if (!editor)
-        return null;
-    const canGroup = shapes.length >= 2;
-    const canUngroup = shapes.some((s) => isGroup(s));
-    const options = [
-        { value: "duplicate", label: "Duplicate", icon: _jsx(CopyIcon, { size: 14, strokeWidth: 1.75 }) },
-        { value: "delete", label: "Delete", icon: _jsx(Trash2, { size: 14, strokeWidth: 1.75 }) },
-    ];
-    if (canGroup) {
-        options.push({
-            value: "group",
-            label: "Group",
-            icon: _jsx(GroupIcon, { size: 14, strokeWidth: 1.75 }),
-        });
-    }
-    if (canUngroup) {
-        options.push({
-            value: "ungroup",
-            label: "Ungroup",
-            icon: _jsx(UngroupIcon, { size: 14, strokeWidth: 1.75 }),
-        });
-    }
-    options.push({
-        value: "flip-h",
-        label: "Flip horizontal",
-        icon: _jsx(FlipHorizontalIcon, { size: 14, strokeWidth: 1.75 }),
-    }, {
-        value: "flip-v",
-        label: "Flip vertical",
-        icon: _jsx(FlipVerticalIcon, { size: 14, strokeWidth: 1.75 }),
-    });
-    return (_jsx(SegmentedControl, { ariaLabel: "Element actions", value: null, options: options, onChange: (v) => {
-            if (v === "duplicate")
-                editor.duplicateSelected();
-            else if (v === "delete")
-                editor.deleteSelected();
-            else if (v === "group")
-                editor.groupSelected();
-            else if (v === "ungroup")
-                editor.ungroup();
-            else if (v === "flip-h")
-                editor.flipSelection("horizontal");
-            else
-                editor.flipSelection("vertical");
-        } }));
-};
-const ALIGN_OPTIONS = [
-    { edge: "left", label: "Align left", icon: _jsx(AlignStartVertical, { size: 16, strokeWidth: 1.75 }) },
-    {
-        edge: "h-center",
-        label: "Align horizontal centres",
-        icon: _jsx(AlignCenterVertical, { size: 16, strokeWidth: 1.75 }),
-    },
-    { edge: "right", label: "Align right", icon: _jsx(AlignEndVertical, { size: 16, strokeWidth: 1.75 }) },
-    { edge: "top", label: "Align top", icon: _jsx(AlignStartHorizontal, { size: 16, strokeWidth: 1.75 }) },
-    {
-        edge: "v-center",
-        label: "Align vertical centres",
-        icon: _jsx(AlignCenterHorizontal, { size: 16, strokeWidth: 1.75 }),
-    },
-    {
-        edge: "bottom",
-        label: "Align bottom",
-        icon: _jsx(AlignEndHorizontal, { size: 16, strokeWidth: 1.75 }),
-    },
-];
-const AlignControl = () => {
-    const editor = useDiagramOptional();
-    const selection = useSelection();
-    if (!editor)
-        return null;
-    // Distribution needs three+ elements; alignment is offered from two.
-    const canDistribute = selection.size >= 3;
-    return (_jsx(Popover, { ariaLabel: "Align and distribute", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Align", "aria-label": "Align", children: _jsx(AlignCenterVertical, { size: 16, strokeWidth: 1.75 }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Align" }), _jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4 }, children: ALIGN_OPTIONS.map((o) => (_jsx("button", { type: "button", className: "du-sel-icon-button", title: o.label, "aria-label": o.label, onClick: () => {
-                            editor.alignSelection(o.edge);
-                        }, children: o.icon }, o.edge))) }), canDistribute ? (_jsxs(_Fragment, { children: [_jsx("header", { className: "du-sel-popover-label", children: "Distribute" }), _jsxs("div", { style: { display: "flex", gap: 4 }, children: [_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Distribute horizontally", "aria-label": "Distribute horizontally", onClick: () => {
-                                        editor.distributeSelection("horizontal");
-                                    }, children: _jsx(AlignHorizontalDistributeCenter, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Distribute vertically", "aria-label": "Distribute vertically", onClick: () => {
-                                        editor.distributeSelection("vertical");
-                                    }, children: _jsx(AlignVerticalDistributeCenter, { size: 16, strokeWidth: 1.75 }) })] })] })) : null] }) }));
-};
-// ---------------------------------------------------------------------------
-// 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, { size: 14, strokeWidth: 1.75 }) },
-            { value: "dashed", label: "Dashed", icon: _jsx(SquareDashed, { size: 14, strokeWidth: 1.75 }) },
-            { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { size: 14, strokeWidth: 1.75 }) },
-        ], 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, { size: 14, strokeWidth: 1.75 }) },
-            {
-                value: "block-arrow",
-                label: "Block arrow",
-                icon: _jsx(MoveRight, { size: 14, strokeWidth: 2.5 }),
-            },
-        ], 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, { size: 14, strokeWidth: 1.75 }) },
-        ], 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, { size: 14, strokeWidth: 1.75, "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, { size: 14, strokeWidth: 1.75, "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 });
-// ---------------------------------------------------------------------------
-// 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, { size: 14, strokeWidth: 1.75, "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