use-chisel 0.1.0

package/dist/index.js

@@ -0,0 +1,1701 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+const CSS_NUMERIC_UNITS = ["px", "rem", "em"];
+const FONT_FAMILY_OPTIONS = [
+    { label: "Inter", value: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" },
+    { label: "System", value: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" },
+    { label: "Arial", value: "Arial, Helvetica, sans-serif" },
+    { label: "Georgia", value: "Georgia, \"Times New Roman\", serif" },
+    { label: "Mono", value: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" }
+];
+const COLOR_FORMATS = ["Hex", "RGB", "RGBA", "HSL"];
+const COLOR_MODES = ["Solid", "Gradient", "Image"];
+const NUMERIC_CONTROLS = [
+    { label: "Font Size", property: "fontSize", cssProperty: "font-size", min: 8, max: 96, step: 1, unit: "px" },
+    { label: "Line", property: "lineHeight", cssProperty: "line-height", min: 8, max: 120, step: 1, unit: "px" },
+    { label: "Tracking", property: "letterSpacing", cssProperty: "letter-spacing", min: -2, max: 12, step: 0.25, unit: "px" },
+    { label: "Padding X", property: "paddingInline", cssProperty: "padding-inline", min: 0, max: 120, step: 1, unit: "px" },
+    { label: "Padding Y", property: "paddingBlock", cssProperty: "padding-block", min: 0, max: 120, step: 1, unit: "px" },
+    { label: "Margin X", property: "marginInline", cssProperty: "margin-inline", min: -80, max: 160, step: 1, unit: "px" },
+    { label: "Margin Y", property: "marginBlock", cssProperty: "margin-block", min: -80, max: 160, step: 1, unit: "px" },
+    { label: "Radius", property: "borderRadius", cssProperty: "border-radius", min: 0, max: 80, step: 1, unit: "px" },
+    { label: "Opacity", property: "opacity", cssProperty: "opacity", min: 0, max: 1, step: 0.01, unit: "" },
+    { label: "Width", property: "width", cssProperty: "width", min: 0, max: 1200, step: 1, unit: "px" },
+    { label: "Height", property: "height", cssProperty: "height", min: 0, max: 1200, step: 1, unit: "px" }
+];
+const STYLE_PROPERTIES = [
+    "color",
+    "backgroundColor",
+    "backgroundImage",
+    "backgroundPosition",
+    "backgroundSize",
+    "fontFamily",
+    "fontSize",
+    "lineHeight",
+    "letterSpacing",
+    "paddingInline",
+    "paddingBlock",
+    "marginInline",
+    "marginBlock",
+    "borderRadius",
+    "opacity",
+    "width",
+    "height"
+];
+export function EditableRegion({ id, as, children, ...props }) {
+    const Component = (as ?? "span");
+    return (_jsx(Component, { "data-chisel-id": id, ...props, children: children }));
+}
+export function Chisel({ enabled = process.env.NODE_ENV !== "production", position = "right", projectName = "Next.js app" }) {
+    const [hovered, setHovered] = React.useState(null);
+    const [selected, setSelected] = React.useState(null);
+    const [selectedElements, setSelectedElements] = React.useState([]);
+    const [hoverRect, setHoverRect] = React.useState(null);
+    const [selectedRects, setSelectedRects] = React.useState([]);
+    const [copied, setCopied] = React.useState(false);
+    const [versions, setVersions] = React.useState(() => [createVersion(1)]);
+    const [activeVersionId, setActiveVersionId] = React.useState("version-1");
+    const [versionsOpen, setVersionsOpen] = React.useState(false);
+    const snapshots = React.useRef(new WeakMap());
+    const baselines = React.useRef(new Map());
+    const routeKey = React.useRef("");
+    const hoveredRef = React.useRef(null);
+    const selectedRef = React.useRef(null);
+    const selectedElementsRef = React.useRef([]);
+    const hoverFrame = React.useRef(null);
+    const rectFrame = React.useRef(null);
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const clearHover = () => {
+            if (!hoveredRef.current)
+                return;
+            hoveredRef.current = null;
+            setHovered(null);
+            setHoverRect(null);
+        };
+        const scheduleHoverRect = (target) => {
+            if (hoverFrame.current !== null)
+                window.cancelAnimationFrame(hoverFrame.current);
+            hoverFrame.current = window.requestAnimationFrame(() => {
+                hoverFrame.current = null;
+                if (hoveredRef.current !== target)
+                    return;
+                setHoverRect(rectToJSON(target.getBoundingClientRect()));
+            });
+        };
+        const scheduleRects = () => {
+            if (rectFrame.current !== null)
+                return;
+            rectFrame.current = window.requestAnimationFrame(() => {
+                rectFrame.current = null;
+                const currentHovered = hoveredRef.current;
+                const currentSelected = selectedRef.current;
+                const currentSelectedElements = selectedElementsRef.current;
+                setHoverRect((current) => (currentHovered ? rectToJSON(currentHovered.getBoundingClientRect()) : current));
+                setSelectedRects(currentSelectedElements.map((element) => rectToJSON(element.getBoundingClientRect())));
+            });
+        };
+        const onMove = (event) => {
+            const target = event.target;
+            if (!(target instanceof HTMLElement) || isEditorElement(target)) {
+                clearHover();
+                return;
+            }
+            if (target === hoveredRef.current)
+                return;
+            hoveredRef.current = target;
+            setHovered(target);
+            scheduleHoverRect(target);
+        };
+        const onClick = (event) => {
+            const target = event.target;
+            if (!(target instanceof HTMLElement) || isEditorElement(target))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            selectElements(event.shiftKey ? toggleElementSelection(selectedElementsRef.current, target) : [target]);
+        };
+        const onKeyDown = (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement && isEditorElement(target))
+                return;
+            if (event.key === "Escape") {
+                selectedRef.current = null;
+                selectedElementsRef.current = [];
+                setSelected(null);
+                setSelectedElements([]);
+                setSelectedRects([]);
+            }
+        };
+        document.addEventListener("mousemove", onMove, true);
+        document.addEventListener("click", onClick, true);
+        document.addEventListener("keydown", onKeyDown);
+        window.addEventListener("resize", scheduleRects);
+        window.addEventListener("scroll", scheduleRects, true);
+        return () => {
+            if (hoverFrame.current !== null)
+                window.cancelAnimationFrame(hoverFrame.current);
+            if (rectFrame.current !== null)
+                window.cancelAnimationFrame(rectFrame.current);
+            document.removeEventListener("mousemove", onMove, true);
+            document.removeEventListener("click", onClick, true);
+            document.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("resize", scheduleRects);
+            window.removeEventListener("scroll", scheduleRects, true);
+        };
+    }, [enabled]);
+    React.useEffect(() => {
+        selectedRef.current = selected;
+    }, [selected]);
+    React.useEffect(() => {
+        selectedElementsRef.current = selectedElements;
+    }, [selectedElements]);
+    React.useEffect(() => {
+        if (!selectedElements.length)
+            return;
+        let frame = null;
+        const scheduleSelectedRect = () => {
+            if (frame !== null)
+                return;
+            frame = window.requestAnimationFrame(() => {
+                frame = null;
+                setSelectedRects(selectedElements.map((element) => rectToJSON(element.getBoundingClientRect())));
+            });
+        };
+        if (typeof ResizeObserver === "undefined") {
+            const id = window.setInterval(scheduleSelectedRect, 750);
+            return () => {
+                if (frame !== null)
+                    window.cancelAnimationFrame(frame);
+                window.clearInterval(id);
+            };
+        }
+        const observer = new ResizeObserver(scheduleSelectedRect);
+        for (const element of selectedElements)
+            observer.observe(element);
+        return () => {
+            if (frame !== null)
+                window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [selected, selectedElements]);
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const key = getRouteStorageKey();
+        routeKey.current = key;
+        const storedVersions = readStoredVersions(key);
+        const nextVersions = storedVersions.length ? storedVersions : [createVersion(1)];
+        setVersions(nextVersions);
+        setActiveVersionId(nextVersions[0].id);
+        window.setTimeout(() => applyVersionToDom(nextVersions[0], baselines.current), 0);
+    }, [enabled]);
+    React.useEffect(() => {
+        if (!enabled || !routeKey.current)
+            return;
+        window.localStorage.setItem(routeKey.current, JSON.stringify(versions));
+    }, [enabled, versions]);
+    if (!enabled)
+        return null;
+    const selectionCount = selectedElements.length;
+    const snapshot = selected ? snapshots.current.get(selected) : undefined;
+    const canEditText = Boolean(selectionCount <= 1 && selected && selected.children.length === 0);
+    const sourceHint = selected ? getSourceHint(selected) : undefined;
+    const selector = selected ? getBestSelector(selected) : "";
+    const changedValues = selected && snapshot ? getChanges(selected, snapshot) : [];
+    const activeVersion = versions.find((version) => version.id === activeVersionId) ?? versions[0] ?? createVersion(1);
+    const selectedComputedStyle = selected ? getComputedStyle(selected) : null;
+    const getSelectedTargets = () => (selectedElements.length ? selectedElements : selected ? [selected] : []);
+    function selectElements(elements) {
+        for (const element of elements)
+            ensureSnapshot(element, snapshots.current);
+        const nextSelected = elements[elements.length - 1] ?? null;
+        selectedElementsRef.current = elements;
+        selectedRef.current = nextSelected;
+        setSelectedElements(elements);
+        setSelected(nextSelected);
+        setSelectedRects(elements.map((element) => rectToJSON(element.getBoundingClientRect())));
+    }
+    const refreshSelectedRects = () => {
+        setSelectedRects(selectedElements.map((element) => rectToJSON(element.getBoundingClientRect())));
+    };
+    const addVersion = () => {
+        const nextVersion = {
+            id: `version-${Date.now()}`,
+            name: `Version ${versions.length + 1}`,
+            elements: cloneVersionElements(activeVersion.elements)
+        };
+        setVersions((current) => [...current, nextVersion]);
+        setActiveVersionId(nextVersion.id);
+        setVersionsOpen(false);
+        applyVersionToDom(nextVersion, baselines.current);
+        refreshSelectedRects();
+    };
+    const selectVersion = (version) => {
+        setActiveVersionId(version.id);
+        setVersionsOpen(false);
+        applyVersionToDom(version, baselines.current);
+        refreshSelectedRects();
+    };
+    const applyNumeric = (control, value) => {
+        const next = control.unit === "px" ? `${value}px` : String(value);
+        applyStyleValue(control, next);
+    };
+    const applyStyleValue = (control, value) => {
+        const targets = getSelectedTargets();
+        if (!targets.length)
+            return;
+        for (const element of targets) {
+            ensureElementBaseline(element, getElementKey(element), baselines.current);
+            element.style[control.property] = value;
+            recordElementChange(element, { styles: { [control.property]: value } });
+        }
+        refreshSelectedRects();
+    };
+    const applyColor = (property, value) => {
+        const targets = getSelectedTargets();
+        if (!targets.length)
+            return;
+        for (const element of targets) {
+            ensureElementBaseline(element, getElementKey(element), baselines.current);
+            if (property === "backgroundColor" && isBackgroundImageValue(value)) {
+                element.style.backgroundImage = value;
+                if (value.startsWith("url(")) {
+                    element.style.backgroundPosition = "center";
+                    element.style.backgroundSize = "cover";
+                    recordElementChange(element, { styles: { backgroundImage: value, backgroundPosition: "center", backgroundSize: "cover" } });
+                }
+                else {
+                    recordElementChange(element, { styles: { backgroundImage: value } });
+                }
+                continue;
+            }
+            element.style[property] = value;
+            if (property === "backgroundColor") {
+                element.style.backgroundImage = "";
+                element.style.backgroundPosition = "";
+                element.style.backgroundSize = "";
+                recordElementChange(element, { styles: { backgroundColor: value, backgroundImage: "", backgroundPosition: "", backgroundSize: "" } });
+                continue;
+            }
+            recordElementChange(element, { styles: { [property]: value } });
+        }
+        refreshSelectedRects();
+    };
+    const applyFontFamily = (value) => {
+        const targets = getSelectedTargets();
+        if (!targets.length)
+            return;
+        for (const element of targets) {
+            ensureElementBaseline(element, getElementKey(element), baselines.current);
+            element.style.fontFamily = value;
+            recordElementChange(element, { styles: { fontFamily: value } });
+        }
+        refreshSelectedRects();
+    };
+    const previewFontFamily = (value) => {
+        const targets = getSelectedTargets();
+        if (!targets.length)
+            return;
+        for (const element of targets) {
+            ensureElementBaseline(element, getElementKey(element), baselines.current);
+            element.style.fontFamily = value;
+        }
+        refreshSelectedRects();
+    };
+    const applyText = (value) => {
+        if (!selected || !canEditText)
+            return;
+        ensureElementBaseline(selected, getElementKey(selected), baselines.current);
+        selected.textContent = value;
+        recordElementChange(selected, { text: value });
+        refreshSelectedRects();
+    };
+    const resetSelected = () => {
+        const targets = getSelectedTargets();
+        if (!targets.length)
+            return;
+        for (const element of targets) {
+            const elementSnapshot = snapshots.current.get(element);
+            const baseline = baselines.current.get(getElementKey(element));
+            for (const property of STYLE_PROPERTIES) {
+                element.style[property] = baseline?.styles[property] ?? "";
+            }
+            if (element === selected && canEditText)
+                element.textContent = baseline?.text ?? elementSnapshot?.text ?? "";
+            removeElementChange(element);
+        }
+        refreshSelectedRects();
+    };
+    function recordElementChange(element, patch) {
+        const key = getElementKey(element);
+        ensureElementBaseline(element, key, baselines.current);
+        setVersions((current) => current.map((version) => {
+            if (version.id !== activeVersionId)
+                return version;
+            const existing = version.elements[key];
+            return {
+                ...version,
+                elements: {
+                    ...version.elements,
+                    [key]: {
+                        selector: getBestSelector(element),
+                        sourceHint: getSourceHint(element),
+                        text: patch.text ?? existing?.text,
+                        styles: {
+                            ...(existing?.styles ?? {}),
+                            ...(patch.styles ?? {})
+                        }
+                    }
+                }
+            };
+        }));
+    }
+    function removeElementChange(element) {
+        const key = getElementKey(element);
+        setVersions((current) => current.map((version) => {
+            if (version.id !== activeVersionId)
+                return version;
+            const { [key]: _removed, ...elements } = version.elements;
+            return { ...version, elements };
+        }));
+    }
+    const copyPrompt = async () => {
+        const prompt = getPrompt();
+        if (!prompt)
+            return;
+        await navigator.clipboard.writeText(prompt);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1600);
+    };
+    function getPrompt() {
+        const selectedRect = selected ? rectToJSON(selected.getBoundingClientRect()) : undefined;
+        if (Object.keys(activeVersion.elements).length)
+            return buildPageAgentPrompt({ projectName, version: activeVersion, baselines: baselines.current });
+        if (!selected || !snapshot || !selectedRect)
+            return undefined;
+        return buildAgentPrompt({
+            projectName,
+            element: selected,
+            snapshot,
+            rect: selectedRect,
+            selector,
+            sourceHint,
+            changes: changedValues
+        });
+    }
+    return (_jsxs("div", { "data-chisel-root": "true", className: "chisel-root", children: [_jsx(ChiselStyles, {}), hoverRect && hovered && !selectedElements.includes(hovered) ? _jsx(Box, { rect: hoverRect, tone: "hover" }) : null, selectedRects.map((rect, index) => (_jsx(Box, { rect: rect, tone: "selected" }, `${rect.left}-${rect.top}-${index}`))), _jsx("aside", { className: `chisel-panel chisel-panel-${position}`, "aria-label": "Chisel editor", children: _jsx("div", { className: "chisel-panel-wrapper", children: _jsx("div", { className: "chisel-panel-inner", children: _jsxs("div", { className: "chisel-folder chisel-folder-root", children: [_jsx("header", { className: "chisel-folder-header chisel-panel-header", children: _jsxs("div", { className: "chisel-panel-toolbar", children: [_jsx("button", { className: "chisel-toolbar-add", type: "button", "aria-label": "Add version", onClick: addVersion, children: "+" }), _jsxs("div", { className: "chisel-preset-manager", children: [_jsxs("button", { className: "chisel-preset-trigger", type: "button", "aria-expanded": versionsOpen, "aria-haspopup": "listbox", onClick: () => setVersionsOpen((open) => !open), children: [_jsx("span", { className: "chisel-preset-trigger-label", children: activeVersion.name }), _jsx("span", { className: "chisel-chevron", "aria-hidden": "true" })] }), versionsOpen ? (_jsx("div", { className: "chisel-preset-dropdown", role: "listbox", "aria-label": "Page versions", children: _jsx("div", { className: "chisel-preset-list", children: versions.map((version) => (_jsxs("button", { className: "chisel-preset-item", type: "button", role: "option", "aria-selected": version.id === activeVersion.id, "data-active": version.id === activeVersion.id, onClick: () => selectVersion(version), children: [_jsx("span", { className: "chisel-preset-name", children: version.name }), _jsx("span", { className: "chisel-preset-count", children: Object.keys(version.elements).length })] }, version.id))) }) })) : null] }), _jsx("button", { className: "chisel-toolbar-add", type: "button", onClick: () => {
+                                                    selectedRef.current = null;
+                                                    selectedElementsRef.current = [];
+                                                    setSelected(null);
+                                                    setSelectedElements([]);
+                                                    setSelectedRects([]);
+                                                }, "aria-label": "Clear selection", children: "\u00D7" })] }) }), selected && snapshot ? (_jsxs("div", { className: "chisel-content", children: [_jsxs("div", { className: "chisel-text-control", children: [_jsx("span", { className: "chisel-text-label", children: selectionCount > 1 ? "Selection" : "Element" }), _jsx("code", { className: "chisel-text-code", children: selectionCount > 1 ? `${selectionCount} elements` : selected.tagName.toLowerCase() })] }), _jsxs("div", { className: "chisel-text-control chisel-selector-row", children: [_jsx("span", { className: "chisel-text-label", children: "Selector" }), _jsx("code", { className: "chisel-selector", children: selector })] }), _jsxs("div", { className: sourceHint ? "chisel-text-control" : "chisel-text-control chisel-warning-row", children: [_jsx("span", { className: "chisel-text-label", children: "Source" }), _jsx("span", { className: sourceHint ? "chisel-text-value" : "chisel-warning", children: sourceHint ? `Source hint: ${sourceHint}` : "Low-confidence source mapping" })] }), _jsxs("div", { className: "chisel-folder", children: [_jsx("div", { className: "chisel-folder-header", children: _jsx("div", { className: "chisel-folder-header-top", children: _jsx("div", { className: "chisel-folder-title-row", children: _jsx("span", { className: "chisel-folder-title", children: "Content" }) }) }) }), _jsx("div", { className: "chisel-folder-content", children: _jsxs("div", { className: "chisel-folder-inner", children: [_jsxs("label", { className: "chisel-text-control chisel-textarea-control", children: [_jsx("span", { className: "chisel-text-label", children: "Text" }), _jsx("textarea", { className: "chisel-text-input", value: selected.textContent ?? "", onChange: (event) => applyText(event.target.value), disabled: !canEditText, rows: 3 })] }), !canEditText ? _jsx("div", { className: "chisel-note-row", children: selectionCount > 1 ? "Text editing is enabled for one element at a time." : "Text editing is enabled for simple text elements." }) : null] }) })] }), _jsxs("div", { className: "chisel-folder", children: [_jsx("div", { className: "chisel-folder-header", children: _jsx("div", { className: "chisel-folder-header-top", children: _jsx("div", { className: "chisel-folder-title-row", children: _jsx("span", { className: "chisel-folder-title", children: "Color" }) }) }) }), _jsx("div", { className: "chisel-folder-content", children: _jsxs("div", { className: "chisel-folder-inner", children: [_jsx(ColorControl, { label: "Text", value: selected.style.color || toHex(selectedComputedStyle?.color ?? "#000000"), onChange: (value) => applyColor("color", value) }), _jsx(ColorControl, { label: "Fill", value: selected.style.backgroundImage ||
+                                                                    (selectedComputedStyle?.backgroundImage && selectedComputedStyle.backgroundImage !== "none" ? selectedComputedStyle.backgroundImage : selected.style.backgroundColor || toHex(selectedComputedStyle?.backgroundColor ?? "#ffffff")), onChange: (value) => applyColor("backgroundColor", value), supportsBackgroundImages: true })] }) })] }), _jsxs("div", { className: "chisel-folder", children: [_jsx("div", { className: "chisel-folder-header", children: _jsx("div", { className: "chisel-folder-header-top", children: _jsx("div", { className: "chisel-folder-title-row", children: _jsx("span", { className: "chisel-folder-title", children: "Style" }) }) }) }), _jsx("div", { className: "chisel-folder-content", children: _jsxs("div", { className: "chisel-folder-inner", children: [_jsx(FontFamilyControl, { value: selectedComputedStyle?.fontFamily ?? "", onChange: applyFontFamily, onPreview: previewFontFamily }), NUMERIC_CONTROLS.map((control) => (_jsx(SliderControl, { control: control, computedStyle: selectedComputedStyle, element: selected, onSlide: (value) => applyNumeric(control, value), onValueChange: (value) => applyStyleValue(control, value) }, control.cssProperty)))] }) })] }), _jsxs("div", { className: "chisel-folder", children: [_jsx("div", { className: "chisel-folder-header", children: _jsxs("div", { className: "chisel-folder-header-top", children: [_jsx("div", { className: "chisel-folder-title-row", children: _jsx("span", { className: "chisel-folder-title", children: "Changes" }) }), _jsx("span", { className: "chisel-folder-count", children: changedValues.length })] }) }), _jsx("div", { className: "chisel-folder-content", children: _jsx("div", { className: "chisel-folder-inner", children: changedValues.length ? (changedValues.map((change) => (_jsxs("div", { className: "chisel-text-control", children: [_jsx("span", { className: "chisel-text-label", children: change.property }), _jsx("strong", { className: "chisel-text-value", children: String(change.after) })] }, change.property)))) : (_jsx("div", { className: "chisel-note-row", children: "No preview changes yet." })) }) })] }), _jsxs("div", { className: "chisel-actions", children: [_jsx("button", { className: "chisel-button", type: "button", onClick: resetSelected, children: "Reset" }), _jsx("button", { className: "chisel-button", type: "button", onClick: copyPrompt, children: copied ? "Copied" : "Copy agent prompt" })] })] })) : (_jsxs("div", { className: "chisel-empty", children: [_jsx("div", { className: "chisel-note-row", children: "Select any visible element to edit its text and style preview." }), _jsx("button", { className: "chisel-button", type: "button", children: "Next" })] }))] }) }) }) })] }));
+}
+function Box({ rect, tone }) {
+    return (_jsx("div", { className: `chisel-box chisel-box-${tone}`, style: {
+            transform: `translate3d(${rect.left}px, ${rect.top}px, 0)`,
+            width: rect.width,
+            height: rect.height
+        } }));
+}
+function FontFamilyControl({ value, onChange, onPreview }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const options = React.useMemo(() => getFontFamilyOptions(value), [value]);
+    const selectedOption = getMatchingFontOption(value, options);
+    const selectedLabel = selectedOption?.label ?? getFontFamilyLabel(value) ?? "Font";
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const closeOnOutsidePointer = (event) => {
+            const target = event.target;
+            if (target instanceof Node && rootRef.current?.contains(target))
+                return;
+            onPreview(value);
+            setIsOpen(false);
+        };
+        const closeOnEscape = (event) => {
+            if (event.key !== "Escape")
+                return;
+            onPreview(value);
+            setIsOpen(false);
+        };
+        document.addEventListener("pointerdown", closeOnOutsidePointer, true);
+        document.addEventListener("keydown", closeOnEscape);
+        return () => {
+            document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+            document.removeEventListener("keydown", closeOnEscape);
+        };
+    }, [isOpen, onPreview, value]);
+    const openMenu = () => {
+        setIsOpen((open) => {
+            if (open) {
+                onPreview(value);
+                return false;
+            }
+            return true;
+        });
+    };
+    const closeMenu = () => {
+        onPreview(value);
+        setIsOpen(false);
+    };
+    const selectFont = (option) => {
+        onChange(option.value);
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: "chisel-font-control", ref: rootRef, children: [_jsx("span", { className: "chisel-font-label", children: "Font" }), _jsxs("div", { className: "chisel-font-picker", children: [_jsxs("button", { className: "chisel-font-trigger", type: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox", onClick: openMenu, children: [_jsx("span", { className: "chisel-font-trigger-label", children: selectedLabel }), _jsx("span", { className: "chisel-chevron", "aria-hidden": "true" })] }), isOpen ? (_jsx("div", { className: "chisel-preset-dropdown chisel-font-dropdown", role: "listbox", "aria-label": "Font family", onMouseLeave: closeMenu, children: _jsx("div", { className: "chisel-preset-list chisel-font-list", children: options.map((option) => (_jsx("button", { className: "chisel-preset-item chisel-font-item", "data-active": isMatchingFontFamily(value, option.value), onClick: () => selectFont(option), onFocus: () => onPreview(option.value), onPointerEnter: () => onPreview(option.value), role: "option", style: { fontFamily: option.value }, type: "button", children: _jsx("span", { className: "chisel-preset-name", children: option.label }) }, option.value))) }) })) : null] })] }));
+}
+function ColorControl({ label, value, onChange, supportsBackgroundImages = false }) {
+    const parsedGradient = parseGradientValue(value);
+    const parsedImageUrl = parseImageUrlValue(value);
+    const initialMode = supportsBackgroundImages && parsedGradient ? "Gradient" : supportsBackgroundImages && parsedImageUrl !== undefined ? "Image" : "Solid";
+    const initialDraft = parsedGradient?.start ?? (parsedImageUrl !== undefined ? "#FFFFFF" : getColorDisplayValue(value));
+    const [mode, setMode] = React.useState(initialMode);
+    const [format, setFormat] = React.useState(() => inferColorFormat(initialDraft));
+    const [draft, setDraft] = React.useState(initialDraft);
+    const [gradientStart, setGradientStart] = React.useState(parsedGradient?.start ?? initialDraft);
+    const [gradientEnd, setGradientEnd] = React.useState(parsedGradient?.end ?? "#FFFFFF");
+    const [activeGradientStop, setActiveGradientStop] = React.useState("start");
+    const [imageUrl, setImageUrl] = React.useState(parsedImageUrl ?? "");
+    const [imageFileName, setImageFileName] = React.useState("");
+    const [isInvalid, setIsInvalid] = React.useState(false);
+    const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+    const pickerRef = React.useRef(null);
+    const currentColorValue = mode === "Gradient" ? (activeGradientStop === "start" ? gradientStart : gradientEnd) : draft;
+    const currentHex = toHex(currentColorValue).toUpperCase();
+    const currentAlpha = getColorAlpha(currentColorValue);
+    const currentHsv = React.useMemo(() => rgbToHsv(hexToRgb(currentHex)), [currentHex]);
+    const summaryValue = mode === "Gradient" ? "Gradient" : mode === "Image" ? "Image" : draft;
+    React.useEffect(() => {
+        const nextGradient = parseGradientValue(value);
+        const nextImageUrl = parseImageUrlValue(value);
+        if (supportsBackgroundImages && nextGradient) {
+            const nextDraft = activeGradientStop === "end" ? nextGradient.end : nextGradient.start;
+            setMode("Gradient");
+            setGradientStart(nextGradient.start);
+            setGradientEnd(nextGradient.end);
+            setDraft(nextDraft);
+            setFormat(inferColorFormat(nextDraft));
+            setIsInvalid(false);
+            return;
+        }
+        if (supportsBackgroundImages && nextImageUrl !== undefined) {
+            setMode("Image");
+            setImageUrl(nextImageUrl);
+            setDraft("#FFFFFF");
+            setIsInvalid(false);
+            return;
+        }
+        const displayValue = getColorDisplayValue(value);
+        setMode("Solid");
+        setDraft((currentDraft) => (currentDraft && toHex(currentDraft) === toHex(displayValue) ? currentDraft : displayValue));
+        setFormat(inferColorFormat(displayValue));
+        setIsInvalid(false);
+    }, [activeGradientStop, supportsBackgroundImages, value]);
+    React.useEffect(() => {
+        if (!isPickerOpen)
+            return;
+        const closeOnOutsidePointer = (event) => {
+            const target = event.target;
+            if (target instanceof Node && pickerRef.current?.contains(target))
+                return;
+            setIsPickerOpen(false);
+        };
+        document.addEventListener("pointerdown", closeOnOutsidePointer, true);
+        return () => document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+    }, [isPickerOpen]);
+    const applyColorValue = (nextValue) => {
+        const normalized = normalizeColorInput(nextValue);
+        if (!normalized) {
+            setIsInvalid(nextValue.trim().length > 0);
+            return;
+        }
+        const formatted = normalizeHexColor(normalized) ?? normalized;
+        setFormat(inferColorFormat(formatted));
+        setDraft(formatted);
+        setIsInvalid(false);
+        if (mode === "Gradient") {
+            applyGradientStop(activeGradientStop, formatted);
+            return;
+        }
+        onChange(formatted);
+    };
+    const applyFormattedColor = (nextHex, nextAlpha = currentAlpha, nextFormat = format) => {
+        const formatted = formatColorValue(nextHex, nextAlpha, nextFormat);
+        setDraft(formatted);
+        setIsInvalid(false);
+        if (mode === "Gradient") {
+            applyGradientStop(activeGradientStop, formatted);
+            return;
+        }
+        onChange(formatted);
+    };
+    const applySaturationValue = (event, rect) => {
+        const saturation = clamp(((event.clientX - rect.left) / rect.width) * 100, 0, 100);
+        const brightness = clamp((1 - (event.clientY - rect.top) / rect.height) * 100, 0, 100);
+        applyFormattedColor(hsvToHex(currentHsv.h, saturation, brightness));
+    };
+    const applyHue = (event, rect) => {
+        const hue = clamp(((event.clientX - rect.left) / rect.width) * 360, 0, 360);
+        applyFormattedColor(hsvToHex(hue, currentHsv.s, currentHsv.v));
+    };
+    const applyAlpha = (event, rect) => {
+        const alpha = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        applyFormattedColor(currentHex, alpha);
+    };
+    const selectFormat = (nextFormat) => {
+        setFormat(nextFormat);
+        applyFormattedColor(currentHex, currentAlpha, nextFormat);
+    };
+    const selectMode = (nextMode) => {
+        if (nextMode !== "Solid" && !supportsBackgroundImages)
+            return;
+        setMode(nextMode);
+        if (nextMode === "Solid")
+            onChange(draft);
+        if (nextMode === "Gradient") {
+            const nextStart = gradientStart || draft;
+            setGradientStart(nextStart);
+            setActiveGradientStop("start");
+            setDraft(nextStart);
+            onChange(getGradientValue(nextStart, gradientEnd));
+        }
+        if (nextMode === "Image" && imageUrl.trim())
+            onChange(getImageValue(imageUrl));
+    };
+    const selectGradientStop = (stop) => {
+        const nextDraft = stop === "start" ? gradientStart : gradientEnd;
+        setActiveGradientStop(stop);
+        setDraft(nextDraft);
+        setFormat(inferColorFormat(nextDraft));
+        setIsInvalid(false);
+    };
+    const applyGradientStop = (stop, nextValue) => {
+        const nextStart = stop === "start" ? nextValue : gradientStart;
+        const nextEnd = stop === "end" ? nextValue : gradientEnd;
+        setGradientStart(nextStart);
+        setGradientEnd(nextEnd);
+        onChange(getGradientValue(nextStart, nextEnd));
+    };
+    const applyGradientStopValue = (stop, nextValue) => {
+        const normalized = normalizeColorInput(nextValue);
+        if (stop === "start")
+            setGradientStart(nextValue);
+        else
+            setGradientEnd(nextValue);
+        setActiveGradientStop(stop);
+        setDraft(nextValue);
+        if (!normalized) {
+            setIsInvalid(nextValue.trim().length > 0);
+            return;
+        }
+        const formatted = normalizeHexColor(normalized) ?? normalized;
+        setFormat(inferColorFormat(formatted));
+        setDraft(formatted);
+        setIsInvalid(false);
+        applyGradientStop(stop, formatted);
+    };
+    const applyImageUrl = (nextValue) => {
+        setImageUrl(nextValue);
+        setImageFileName("");
+        if (nextValue.trim())
+            onChange(getImageValue(nextValue));
+    };
+    const applyImageFile = (event) => {
+        const file = event.currentTarget.files?.[0];
+        if (!file)
+            return;
+        setImageFileName(file.name);
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result !== "string")
+                return;
+            setImageUrl(reader.result);
+            onChange(getImageValue(reader.result));
+        };
+        reader.readAsDataURL(file);
+    };
+    return (_jsxs("div", { className: "chisel-color-control", "data-picker-open": isPickerOpen, ref: pickerRef, children: [_jsx("span", { className: "chisel-color-label", children: label }), _jsxs("span", { className: "chisel-color-inputs", children: [_jsx("button", { className: "chisel-color-swatch", "aria-expanded": isPickerOpen, "aria-label": `${label} color picker`, onClick: () => setIsPickerOpen((open) => !open), style: { background: mode === "Gradient" ? getGradientValue(gradientStart, gradientEnd) : mode === "Image" && imageUrl ? getImageValue(imageUrl) : draft }, type: "button" }), _jsx("input", { className: "chisel-color-value-input", "aria-label": `${label} color value`, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", "data-invalid": isInvalid, readOnly: mode !== "Solid", spellCheck: false, style: { width: `${Math.max(7.5, Math.min(summaryValue.length + 0.5, 18))}ch` }, value: summaryValue, onBlur: () => {
+                            if (mode === "Solid")
+                                applyColorValue(draft);
+                        }, onChange: (event) => {
+                            if (mode !== "Solid")
+                                return;
+                            const nextDraft = event.target.value;
+                            setDraft(nextDraft);
+                            applyColorValue(nextDraft);
+                        }, onKeyDown: (event) => {
+                            if (event.key === "Enter") {
+                                event.preventDefault();
+                                applyColorValue(draft);
+                                event.currentTarget.blur();
+                            }
+                            if (event.key === "Escape") {
+                                event.preventDefault();
+                                setDraft(initialDraft);
+                                setIsInvalid(false);
+                                setIsPickerOpen(false);
+                                event.currentTarget.blur();
+                            }
+                        } })] }), isPickerOpen ? (_jsxs("div", { className: "chisel-color-popover", role: "dialog", "aria-label": `${label} custom color picker`, children: [_jsxs("div", { className: "chisel-color-tabs", children: [COLOR_MODES.map((colorMode) => (_jsx("button", { className: "chisel-color-tab", "data-active": mode === colorMode, "aria-disabled": colorMode !== "Solid" && !supportsBackgroundImages, onClick: () => selectMode(colorMode), type: "button", children: colorMode }, colorMode))), _jsx("button", { className: "chisel-color-close", "aria-label": "Close color picker", onClick: () => setIsPickerOpen(false), type: "button", children: "\u00D7" })] }), mode !== "Image" ? (_jsxs(_Fragment, { children: [mode === "Gradient" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "chisel-color-gradient-preview", style: { backgroundImage: getGradientValue(gradientStart, gradientEnd) } }), _jsxs("div", { className: "chisel-color-stop-buttons", role: "group", "aria-label": `${label} gradient endpoints`, children: [_jsxs("button", { className: "chisel-color-stop-button", "data-active": activeGradientStop === "start", "aria-label": `${label} gradient From`, onClick: () => selectGradientStop("start"), type: "button", children: [_jsx("span", { className: "chisel-color-stop-swatch", style: { background: gradientStart } }), _jsx("span", { children: "From" })] }), _jsxs("button", { className: "chisel-color-stop-button", "data-active": activeGradientStop === "end", "aria-label": `${label} gradient To`, onClick: () => selectGradientStop("end"), type: "button", children: [_jsx("span", { className: "chisel-color-stop-swatch", style: { background: gradientEnd } }), _jsx("span", { children: "To" })] })] })] })) : null, _jsx("div", { className: "chisel-color-field", onPointerDown: (event) => {
+                                    const rect = event.currentTarget.getBoundingClientRect();
+                                    applySaturationValue(event, rect);
+                                    event.currentTarget.setPointerCapture(event.pointerId);
+                                }, onPointerMove: (event) => {
+                                    if (!(event.buttons & 1))
+                                        return;
+                                    applySaturationValue(event, event.currentTarget.getBoundingClientRect());
+                                }, style: { backgroundColor: `hsl(${currentHsv.h} 100% 50%)` }, children: _jsx("span", { className: "chisel-color-field-cursor", style: {
+                                        left: `clamp(6px, ${currentHsv.s}%, calc(100% - 6px))`,
+                                        top: `clamp(6px, ${100 - currentHsv.v}%, calc(100% - 6px))`,
+                                        backgroundColor: currentHex
+                                    } }) }), _jsx("div", { className: "chisel-color-hue", onPointerDown: (event) => {
+                                    const rect = event.currentTarget.getBoundingClientRect();
+                                    applyHue(event, rect);
+                                    event.currentTarget.setPointerCapture(event.pointerId);
+                                }, onPointerMove: (event) => {
+                                    if (!(event.buttons & 1))
+                                        return;
+                                    applyHue(event, event.currentTarget.getBoundingClientRect());
+                                }, children: _jsx("span", { className: "chisel-color-hue-cursor", style: { left: `clamp(4px, ${(currentHsv.h / 360) * 100}%, calc(100% - 4px))` } }) }), _jsxs("div", { className: "chisel-color-alpha", onPointerDown: (event) => {
+                                    const rect = event.currentTarget.getBoundingClientRect();
+                                    applyAlpha(event, rect);
+                                    event.currentTarget.setPointerCapture(event.pointerId);
+                                }, onPointerMove: (event) => {
+                                    if (!(event.buttons & 1))
+                                        return;
+                                    applyAlpha(event, event.currentTarget.getBoundingClientRect());
+                                }, style: { "--chisel-alpha-color": currentHex }, children: [_jsx("span", { className: "chisel-color-alpha-fill", style: { width: `${currentAlpha * 100}%` } }), _jsx("span", { className: "chisel-color-alpha-cursor", style: { left: `clamp(8px, ${currentAlpha * 100}%, calc(100% - 8px))`, backgroundColor: colorWithAlpha(currentHex, currentAlpha) } })] }), _jsxs("div", { className: "chisel-color-format-row", children: [_jsx("select", { className: "chisel-color-format-select", "aria-label": `${label} color format`, value: format, onChange: (event) => selectFormat(event.target.value), children: COLOR_FORMATS.map((option) => (_jsx("option", { value: option, children: option }, option))) }), _jsx("input", { className: "chisel-color-format-input", "aria-label": `${label} formatted color value`, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", "data-invalid": isInvalid, spellCheck: false, value: draft, onBlur: () => applyColorValue(draft), onChange: (event) => {
+                                            const nextDraft = event.target.value;
+                                            setDraft(nextDraft);
+                                            applyColorValue(nextDraft);
+                                        } })] })] })) : null, mode === "Gradient" ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "chisel-color-extra-row", children: [_jsx("span", { children: "From" }), _jsx("input", { "aria-label": `${label} gradient From value`, value: gradientStart, onFocus: () => selectGradientStop("start"), onChange: (event) => applyGradientStopValue("start", event.target.value) })] }), _jsxs("label", { className: "chisel-color-extra-row", children: [_jsx("span", { children: "To" }), _jsx("input", { "aria-label": `${label} gradient To value`, value: gradientEnd, onFocus: () => selectGradientStop("end"), onChange: (event) => applyGradientStopValue("end", event.target.value) })] })] })) : null, mode === "Image" ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "chisel-color-extra-row", children: [_jsx("span", { children: "URL" }), _jsx("input", { "aria-label": `${label} image URL`, value: imageUrl, onChange: (event) => applyImageUrl(event.target.value), placeholder: "https://..." })] }), _jsxs("label", { className: "chisel-color-upload-row", children: [_jsx("span", { children: "Upload" }), _jsx("span", { className: "chisel-color-upload-name", children: imageFileName || "Choose image" }), _jsx("input", { "aria-label": `${label} image upload`, accept: "image/*", type: "file", onChange: applyImageFile })] })] })) : null] })) : null] }));
+}
+function SliderControl({ control, computedStyle, element, onSlide, onValueChange }) {
+    const computed = computedStyle ?? getComputedStyle(element);
+    const raw = computed[control.property];
+    const parsed = parseFloat(raw);
+    const fallback = control.property === "width" ? element.getBoundingClientRect().width : control.property === "height" ? element.getBoundingClientRect().height : control.min;
+    const value = Number.isFinite(parsed) ? parsed : fallback;
+    const clamped = clamp(value, control.min, control.max);
+    const percent = getSliderPercent(clamped, control.min, control.max);
+    const authoredValue = element.style[control.property];
+    const displayValue = authoredValue || `${formatNumber(value)}${control.unit}`;
+    const inferredUnit = getInferredUnit(displayValue, control);
+    const [draft, setDraft] = React.useState(displayValue);
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [isInvalid, setIsInvalid] = React.useState(false);
+    const [unitMenuOpen, setUnitMenuOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const dragState = React.useRef(null);
+    const suppressClickFocus = React.useRef(false);
+    const unitOptions = React.useMemo(() => getSupportedUnits(control), [control]);
+    const handleStyle = {
+        left: `max(5px, ${percent}% - 9px)`,
+        "--chisel-handle-opacity": percent < 18 ? "0.18" : "1",
+        "--chisel-handle-scale": percent < 18 ? "0.25" : "1"
+    };
+    React.useEffect(() => {
+        if (!isEditing) {
+            setDraft(displayValue);
+            setIsInvalid(false);
+        }
+    }, [displayValue, isEditing]);
+    const commitDraft = (nextDraft = draft) => {
+        const normalized = normalizeStyleInput(nextDraft, control, element, inferredUnit);
+        if (!normalized) {
+            setIsInvalid(true);
+            return;
+        }
+        setDraft(normalized);
+        setIsInvalid(false);
+        onValueChange(normalized);
+    };
+    const focusValueInput = () => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    };
+    const applyPointerValue = (clientX, rect) => {
+        const nextValue = getSliderValueFromPointer(clientX, rect, control);
+        setDraft(`${formatNumber(nextValue)}${control.unit}`);
+        setIsInvalid(false);
+        onSlide(nextValue);
+    };
+    const openUnitMenu = () => {
+        if (unitOptions.length <= 1)
+            return;
+        setUnitMenuOpen(true);
+        focusValueInput();
+    };
+    const applyUnit = (unit) => {
+        const nextValue = convertStyleInputToUnit(draft, unit, control, element, inferredUnit);
+        if (!nextValue) {
+            setIsInvalid(true);
+            return;
+        }
+        setDraft(nextValue);
+        setIsInvalid(false);
+        onValueChange(nextValue);
+        setUnitMenuOpen(false);
+        inputRef.current?.focus();
+    };
+    return (_jsxs("div", { className: "chisel-slider", "data-units-open": unitMenuOpen, onDoubleClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            openUnitMenu();
+        }, onClick: () => {
+            if (suppressClickFocus.current) {
+                suppressClickFocus.current = false;
+                return;
+            }
+            window.setTimeout(focusValueInput, 0);
+        }, onMouseUp: () => {
+            if (!suppressClickFocus.current)
+                window.setTimeout(focusValueInput, 0);
+        }, onPointerCancel: (event) => {
+            if (dragState.current?.pointerId !== event.pointerId)
+                return;
+            dragState.current = null;
+        }, onPointerDown: (event) => {
+            event.preventDefault();
+            dragState.current = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                rect: event.currentTarget.getBoundingClientRect(),
+                dragging: false
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+            window.setTimeout(focusValueInput, 0);
+        }, onPointerMove: (event) => {
+            const state = dragState.current;
+            if (!state || state.pointerId !== event.pointerId)
+                return;
+            if (!state.dragging && Math.abs(event.clientX - state.startX) < 4)
+                return;
+            state.dragging = true;
+            inputRef.current?.blur();
+            event.preventDefault();
+            applyPointerValue(event.clientX, state.rect);
+        }, onPointerUp: (event) => {
+            const state = dragState.current;
+            if (!state || state.pointerId !== event.pointerId)
+                return;
+            if (state.dragging) {
+                suppressClickFocus.current = true;
+                window.setTimeout(() => {
+                    suppressClickFocus.current = false;
+                }, 250);
+                applyPointerValue(event.clientX, state.rect);
+            }
+            if (!state.dragging)
+                window.setTimeout(focusValueInput, 0);
+            dragState.current = null;
+        }, children: [_jsx("span", { className: "chisel-slider-label", children: control.label }), _jsx("span", { className: "chisel-slider-hashmarks", "aria-hidden": "true", children: Array.from({ length: 9 }, (_, index) => (_jsx("span", { className: "chisel-slider-hashmark", style: { left: `${(index + 1) * 10}%` } }, index))) }), _jsx("span", { className: "chisel-slider-fill", style: { width: `${percent}%` } }), _jsx("span", { className: "chisel-slider-handle", style: handleStyle }), _jsx("input", { type: "range", min: control.min, max: control.max, step: control.step, value: clamped, onChange: (event) => onSlide(Number(event.target.value)) }), _jsx("input", { ref: inputRef, className: "chisel-slider-value-input", "aria-label": `${control.label} value`, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", "data-invalid": isInvalid, spellCheck: false, value: draft, onBlur: () => {
+                    commitDraft();
+                    setIsEditing(false);
+                    setUnitMenuOpen(false);
+                }, onChange: (event) => {
+                    const nextDraft = event.target.value;
+                    setDraft(nextDraft);
+                    const normalized = normalizeStyleInput(nextDraft, control, element, inferredUnit);
+                    if (!normalized) {
+                        setIsInvalid(nextDraft.trim().length > 0);
+                        return;
+                    }
+                    setIsInvalid(false);
+                    onValueChange(normalized);
+                    if (normalized !== nextDraft && isCompleteUnitConversion(nextDraft))
+                        setDraft(normalized);
+                }, onFocus: (event) => {
+                    setIsEditing(true);
+                    event.currentTarget.select();
+                }, onMouseDown: (event) => {
+                    window.setTimeout(() => {
+                        event.currentTarget.focus();
+                        event.currentTarget.select();
+                    }, 0);
+                }, onMouseUp: (event) => {
+                    window.setTimeout(() => {
+                        event.currentTarget.focus();
+                        event.currentTarget.select();
+                    }, 0);
+                }, onDoubleClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    openUnitMenu();
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        commitDraft();
+                        event.currentTarget.blur();
+                    }
+                    if (isArrowStepKey(event.key)) {
+                        const nextValue = stepStyleInput(draft, control, element, inferredUnit, event.shiftKey ? 10 : 1, isIncrementKey(event.key));
+                        if (!nextValue)
+                            return;
+                        event.preventDefault();
+                        setDraft(nextValue);
+                        setIsInvalid(false);
+                        onValueChange(nextValue);
+                    }
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        setDraft(displayValue);
+                        setIsInvalid(false);
+                        setUnitMenuOpen(false);
+                        event.currentTarget.blur();
+                    }
+                } }), unitMenuOpen ? (_jsx("div", { className: "chisel-unit-menu", role: "listbox", "aria-label": `${control.label} units`, children: unitOptions.map((unit) => (_jsx("button", { className: "chisel-unit-option", "data-active": unit === inferredUnit, onClick: (event) => {
+                        event.preventDefault();
+                        applyUnit(unit);
+                    }, onPointerDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, role: "option", type: "button", children: unit || "unitless" }, unit || "unitless"))) })) : null] }));
+}
+function ChiselStyles() {
+    return (_jsx("style", { children: `
+      .chisel-root, .chisel-root * { box-sizing: border-box; }
+      .chisel-root { --chisel-surface: rgba(0, 0, 0, 0.04); --chisel-surface-hover: rgba(0, 0, 0, 0.08); --chisel-surface-active: rgba(0, 0, 0, 0.1); --chisel-surface-subtle: rgba(0, 0, 0, 0.06); --chisel-text-root: #000; --chisel-text-section: rgba(0, 0, 0, 0.65); --chisel-text-label: rgba(0, 0, 0, 0.6); --chisel-text-focus: #000; --chisel-text-primary: rgba(0, 0, 0, 0.9); --chisel-text-secondary: rgba(0, 0, 0, 0.55); --chisel-text-tertiary: rgba(0, 0, 0, 0.35); --chisel-border: rgba(0, 0, 0, 0.1); --chisel-border-hover: rgba(0, 0, 0, 0.15); --chisel-glass-bg: rgba(250, 250, 250, 0.88); --chisel-radius: 8px; --chisel-row-height: 36px; --chisel-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --chisel-motion: 150ms cubic-bezier(0.2, 0.8, 0.2, 1); position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; color: var(--chisel-text-primary); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+      .chisel-box { position: fixed; left: 0; top: 0; border-radius: 0; pointer-events: none; transition: none; }
+      .chisel-box-hover { border: 1px solid #9b2cff; background: rgba(155, 44, 255, 0.08); }
+      .chisel-box-selected { border: 2px solid #9b2cff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92), 0 0 0 4px rgba(155, 44, 255, 0.18); }
+      .chisel-panel { position: fixed; top: 16px; max-height: calc(100vh - 32px); width: 280px; pointer-events: auto; overflow: visible; }
+      .chisel-panel-right { right: 16px; }
+      .chisel-panel-left { left: 16px; }
+      .chisel-panel-wrapper { display: inline-flex; flex-direction: column; width: 100%; }
+      .chisel-panel-inner { width: 280px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 10px 12px 0; border: 1px solid var(--chisel-border); border-radius: 14px; background: var(--chisel-glass-bg); box-shadow: var(--chisel-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08); transform: translateZ(0); -ms-overflow-style: none; scrollbar-width: none; }
+      .chisel-panel-inner::-webkit-scrollbar { display: none; }
+      .chisel-folder { border-bottom: 1px solid var(--chisel-surface-subtle); margin-bottom: 8px; padding-bottom: 8px; }
+      .chisel-folder-root { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
+      .chisel-panel-header { border-bottom: 1px solid var(--chisel-surface-subtle); margin-bottom: 12px; padding-bottom: 6px; }
+      .chisel-folder-header { user-select: none; }
+      .chisel-folder-header-top { display: flex; align-items: center; justify-content: space-between; height: var(--chisel-row-height); padding: 0; }
+      .chisel-folder-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
+      .chisel-folder-title { color: var(--chisel-text-section); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transform: translateY(-0.5px); }
+      .chisel-folder-title-root { color: var(--chisel-text-root); font-size: 15px; font-weight: 600; transform: translateZ(0); }
+      .chisel-folder-count { color: var(--chisel-text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-weight: 500; }
+      .chisel-folder-content { position: relative; }
+      .chisel-folder-inner, .chisel-content, .chisel-empty { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
+      .chisel-folder:not(.chisel-folder-root) { border-top: 1px solid var(--chisel-surface-subtle); border-bottom: 1px solid var(--chisel-surface-subtle); margin-top: 4px; margin-bottom: 4px; padding-bottom: 0; }
+      .chisel-folder:not(.chisel-folder-root) + .chisel-folder:not(.chisel-folder-root) { border-top: none; margin-top: -10px; }
+      .chisel-panel-toolbar { display: flex; align-items: center; gap: 6px; height: var(--chisel-row-height); min-width: 0; margin-bottom: 6px; overflow: visible; }
+      .chisel-toolbar-add { width: var(--chisel-row-height); height: var(--chisel-row-height); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-label); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      .chisel-toolbar-add:hover, .chisel-preset-trigger:hover, .chisel-button:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); transform: translateY(-1px); }
+      .chisel-toolbar-add:active, .chisel-preset-trigger:active, .chisel-button:active { transform: translateY(0) scale(0.96); }
+      .chisel-preset-manager { position: relative; flex: 1; min-width: 0; }
+      .chisel-preset-trigger { width: 100%; min-width: 0; height: var(--chisel-row-height); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: none; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); overflow: hidden; }
+      .chisel-preset-trigger[aria-expanded="true"] { background: var(--chisel-surface-active); }
+      .chisel-preset-trigger-label, .chisel-font-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .chisel-chevron { width: 7px; height: 7px; flex-shrink: 0; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: 0.72; transform: rotate(45deg) translateY(-2px); transition: transform var(--chisel-motion), opacity var(--chisel-motion); }
+      .chisel-preset-trigger[aria-expanded="true"] .chisel-chevron, .chisel-font-trigger[aria-expanded="true"] .chisel-chevron { opacity: 1; transform: rotate(225deg) translate(-1px, -1px); }
+      .chisel-preset-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2147483647; padding: 4px; border: 1px solid var(--chisel-border); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); animation: chisel-pop-in var(--chisel-motion); transform-origin: top center; }
+      .chisel-preset-list { display: flex; flex-direction: column; gap: 2px; }
+      .chisel-preset-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      .chisel-preset-item:hover { background: var(--chisel-surface-hover); transform: translateX(2px); }
+      .chisel-preset-item[data-active="true"] { background: var(--chisel-surface-active); color: var(--chisel-text-primary); }
+      .chisel-preset-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .chisel-preset-count { color: var(--chisel-text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; }
+      .chisel-text-control, .chisel-color-control, .chisel-font-control { min-height: var(--chisel-row-height); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-radius: var(--chisel-radius); background: var(--chisel-surface); }
+      .chisel-text-label, .chisel-color-label, .chisel-font-label, .chisel-slider-label { color: var(--chisel-text-label); flex-shrink: 0; font-size: 13px; font-weight: 500; line-height: 17px; transform: translateY(-0.5px); }
+      .chisel-text-code, .chisel-text-value, .chisel-selector, .chisel-warning, .chisel-color-value-input, .chisel-slider-value-input { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chisel-text-label); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 500; text-align: right; }
+      .chisel-selector-row { min-height: var(--chisel-row-height); }
+      .chisel-selector { max-width: 168px; line-height: 1.25; }
+      .chisel-warning { color: #805b12; font-family: inherit; }
+      .chisel-textarea-control { height: auto; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
+      .chisel-text-input { min-width: 0; width: 100%; flex: 1; resize: vertical; border: none; outline: none; background: transparent; color: var(--chisel-text-label); text-align: right; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.35; }
+      .chisel-text-input::selection, .chisel-color-value-input::selection, .chisel-slider-value-input::selection { background: rgba(155, 44, 255, 0.22); color: var(--chisel-text-focus); }
+      .chisel-text-input:focus { color: var(--chisel-text-focus); }
+      .chisel-text-input:disabled { color: var(--chisel-text-tertiary); cursor: not-allowed; }
+      .chisel-note-row { min-height: var(--chisel-row-height); display: flex; align-items: center; padding: 9px 12px; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-tertiary); font-size: 13px; font-weight: 500; line-height: 1.35; }
+      .chisel-button:disabled { color: var(--chisel-text-tertiary); cursor: not-allowed; transform: none; }
+      .chisel-font-control { position: relative; overflow: visible; cursor: default; }
+      .chisel-font-picker { min-width: 0; flex: 0 1 150px; }
+      .chisel-font-trigger { width: 100%; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: flex-end; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color var(--chisel-motion); }
+      .chisel-font-trigger:hover, .chisel-font-trigger[aria-expanded="true"] { color: var(--chisel-text-primary); }
+      .chisel-font-dropdown { left: 0; right: 0; width: 100%; max-height: 262px; overflow: hidden; }
+      .chisel-font-list { max-height: 252px; overflow-y: auto; padding-right: 1px; -ms-overflow-style: none; scrollbar-width: none; }
+      .chisel-font-list::-webkit-scrollbar { display: none; }
+      .chisel-font-item { justify-content: flex-start; text-align: left; font-size: 14px; }
+      .chisel-color-control { position: relative; overflow: visible; flex-wrap: wrap; }
+      .chisel-color-control[data-picker-open="true"] { z-index: 25; padding-bottom: 0; }
+      .chisel-color-inputs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; justify-content: flex-end; }
+      .chisel-color-swatch { position: relative; width: 20px; height: 20px; flex-shrink: 0; overflow: hidden; padding: 0; border: 1px solid var(--chisel-border-hover); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); cursor: pointer; transition: transform var(--chisel-motion), box-shadow var(--chisel-motion); }
+      .chisel-color-control:hover .chisel-color-swatch { transform: scale(1.1); }
+      .chisel-color-swatch:active { transform: scale(0.96); }
+      .chisel-color-value-input { width: 7.5ch; max-width: 150px; padding: 0; border: 0; outline: none; background: transparent; font-variant-numeric: tabular-nums; text-align: right; }
+      .chisel-color-value-input:focus { color: var(--chisel-text-focus); }
+      .chisel-color-value-input[data-invalid="true"] { color: #8a1f1f; }
+      .chisel-color-popover { flex: 0 0 calc(100% + 24px); width: calc(100% + 24px); display: flex; flex-direction: column; gap: 8px; margin: 4px -12px 0; padding: 6px 12px 0; border-top: 1px solid var(--chisel-surface-subtle); animation: chisel-pop-in var(--chisel-motion); }
+      .chisel-color-tabs { height: 32px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--chisel-surface-subtle); }
+      .chisel-color-tab, .chisel-color-close, .chisel-color-saved-row button { border: none; background: transparent; color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
+      .chisel-color-tab { height: 32px; padding: 0; border-bottom: 2px solid transparent; }
+      .chisel-color-tab[data-active="true"] { color: var(--chisel-text-primary); border-bottom-color: var(--chisel-text-primary); }
+      .chisel-color-tab[aria-disabled="true"] { color: var(--chisel-text-tertiary); cursor: default; }
+      .chisel-color-close { margin-left: auto; font-size: 18px; line-height: 1; color: var(--chisel-text-tertiary); }
+      .chisel-color-close:hover, .chisel-color-saved-row button:hover { color: var(--chisel-text-primary); }
+      .chisel-color-field { position: relative; height: 132px; overflow: hidden; border-radius: 9px; cursor: crosshair; touch-action: none; background-image: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)), linear-gradient(0deg, #000, rgba(0, 0, 0, 0)); }
+      .chisel-color-field-cursor { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; }
+      .chisel-color-hue { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; touch-action: none; }
+      .chisel-color-hue-cursor { position: absolute; top: 50%; width: 8px; height: 16px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); transform: translate(-50%, -50%); pointer-events: none; }
+      .chisel-color-alpha { position: relative; height: 12px; overflow: visible; border-radius: 999px; background-color: #fff; background-image: linear-gradient(45deg, rgba(0,0,0,0.12) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,0.12) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.12) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.12) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; cursor: pointer; touch-action: none; }
+      .chisel-color-alpha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--chisel-alpha-color)); pointer-events: none; }
+      .chisel-color-alpha-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: color-mix(in srgb, var(--chisel-alpha-color), transparent 18%); pointer-events: none; }
+      .chisel-color-alpha-cursor { position: absolute; top: 50%; z-index: 2; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22); transform: translate(-50%, -50%); pointer-events: none; }
+      .chisel-color-gradient-preview { height: 28px; border: 1px solid var(--chisel-border); border-radius: var(--chisel-radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
+      .chisel-color-stop-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+      .chisel-color-stop-button { min-width: 0; height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; border: none; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      .chisel-color-stop-button:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); transform: translateY(-1px); }
+      .chisel-color-stop-button[data-active="true"] { background: var(--chisel-surface-active); color: var(--chisel-text-primary); }
+      .chisel-color-stop-swatch { width: 14px; height: 14px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--chisel-border-hover); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
+      .chisel-color-format-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px; }
+      .chisel-color-format-select, .chisel-color-format-input { height: 32px; min-width: 0; border: none; border-radius: var(--chisel-radius); outline: none; background: var(--chisel-surface); color: var(--chisel-text-label); font: inherit; font-size: 13px; font-weight: 500; }
+      .chisel-color-format-select { padding: 0 8px; cursor: pointer; }
+      .chisel-color-format-input { padding: 0 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+      .chisel-color-format-input:focus, .chisel-color-format-select:focus { color: var(--chisel-text-focus); background: var(--chisel-surface-hover); }
+      .chisel-color-format-input[data-invalid="true"] { color: #8a1f1f; }
+      .chisel-color-extra-row, .chisel-color-upload-row { position: relative; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-label); font-size: 13px; font-weight: 500; }
+      .chisel-color-extra-row span, .chisel-color-upload-row span:first-child { flex-shrink: 0; }
+      .chisel-color-extra-row input { min-width: 0; flex: 1; border: none; outline: none; background: transparent; color: var(--chisel-text-label); font: inherit; text-align: right; }
+      .chisel-color-extra-row input:focus { color: var(--chisel-text-focus); }
+      .chisel-color-upload-row { cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      .chisel-color-upload-row:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); transform: translateY(-1px); }
+      .chisel-color-upload-row input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+      .chisel-color-upload-name { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; color: var(--chisel-text-tertiary); }
+      .chisel-slider { position: relative; height: var(--chisel-row-height); display: block; overflow: hidden; border-radius: var(--chisel-radius); background: var(--chisel-surface); cursor: pointer; user-select: none; touch-action: none; }
+      .chisel-slider[data-units-open="true"] { z-index: 20; overflow: visible; }
+      .chisel-slider input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; cursor: pointer; }
+      .chisel-slider-label { position: absolute; top: 50%; left: 10px; pointer-events: none; transform: translateY(calc(-50% - 0.5px)); z-index: 2; }
+      .chisel-slider-value-input { position: absolute; inset: 0; z-index: 4; width: 100%; max-width: none; height: 100%; padding: 0 10px 0 92px; border: 1px solid transparent; border-radius: var(--chisel-radius); outline: none; background: transparent; font-variant-numeric: tabular-nums; cursor: pointer; }
+      .chisel-slider-value-input:focus { border-color: var(--chisel-border-hover); background: transparent; color: var(--chisel-text-focus); cursor: text; }
+      .chisel-slider-value-input[data-invalid="true"] { border-color: rgba(170, 48, 48, 0.38); background: rgba(170, 48, 48, 0.08); color: #8a1f1f; }
+      .chisel-slider-hashmarks { position: absolute; inset: 0; pointer-events: none; }
+      .chisel-slider-hashmark { position: absolute; top: 50%; width: 1px; height: 8px; border-radius: 999px; background: transparent; transform: translate(-50%, -50%); transition: background 0.2s; }
+      .chisel-slider:hover .chisel-slider-hashmark, .chisel-slider:focus-within .chisel-slider-hashmark { background: rgba(20, 20, 20, 0.12); }
+      .chisel-slider-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--chisel-surface-active); pointer-events: none; transition: background 0.15s; }
+      .chisel-slider-handle { position: absolute; top: 50%; z-index: 2; width: 3px; height: 20px; border-radius: 999px; background: var(--chisel-text-primary); pointer-events: none; opacity: 0; transform: translateY(-50%) scaleX(var(--chisel-handle-scale, 1)); transition: opacity 0.15s, transform 0.15s; }
+      .chisel-slider:hover .chisel-slider-handle { opacity: var(--chisel-handle-opacity, 1); }
+      .chisel-unit-menu { position: absolute; top: calc(100% + 4px); right: 6px; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(34px, 1fr)); gap: 2px; width: 174px; padding: 4px; border: 1px solid var(--chisel-border); border-radius: 10px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); animation: chisel-pop-in var(--chisel-motion); cursor: default; }
+      .chisel-unit-option { min-width: 0; height: 26px; border: none; border-radius: 7px; background: transparent; color: var(--chisel-text-label); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      .chisel-unit-option:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); transform: scale(1.04); }
+      .chisel-unit-option[data-active="true"] { background: var(--chisel-surface-active); color: var(--chisel-text-primary); }
+      .chisel-actions { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
+      .chisel-button { width: 100%; min-height: var(--chisel-row-height); border: none; border-radius: var(--chisel-radius); background: var(--chisel-surface); color: var(--chisel-text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--chisel-motion), color var(--chisel-motion), transform var(--chisel-motion); }
+      @keyframes chisel-pop-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
+      @media (prefers-reduced-motion: reduce) {
+        .chisel-root, .chisel-root * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+      }
+      @media (max-width: 760px) {
+        .chisel-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 58vh; }
+        .chisel-panel-inner { width: 100%; max-height: 58vh; }
+      }
+    ` }));
+}
+function ensureSnapshot(element, snapshots) {
+    if (snapshots.has(element))
+        return;
+    const computed = getComputedStyle(element);
+    const styles = {};
+    for (const property of STYLE_PROPERTIES) {
+        styles[property] = computed[property];
+    }
+    snapshots.set(element, {
+        text: element.textContent ?? "",
+        styles
+    });
+}
+function createVersion(index) {
+    return {
+        id: `version-${index}`,
+        name: `Version ${index}`,
+        elements: {}
+    };
+}
+function cloneVersionElements(elements) {
+    return Object.fromEntries(Object.entries(elements).map(([key, change]) => [
+        key,
+        {
+            ...change,
+            styles: { ...change.styles }
+        }
+    ]));
+}
+function getRouteStorageKey() {
+    return `vse:versions:${window.location.pathname}${window.location.search}`;
+}
+function readStoredVersions(key) {
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter(isVersionState);
+    }
+    catch {
+        return [];
+    }
+}
+function isVersionState(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const version = value;
+    return typeof version.id === "string" && typeof version.name === "string" && Boolean(version.elements) && typeof version.elements === "object";
+}
+function getElementKey(element) {
+    return getSourceHint(element) ?? getBestSelector(element);
+}
+function ensureElementBaseline(element, key, baselines) {
+    if (baselines.has(key))
+        return;
+    const styles = {};
+    for (const property of STYLE_PROPERTIES) {
+        styles[property] = element.style[property] ?? "";
+    }
+    baselines.set(key, {
+        selector: getBestSelector(element),
+        sourceHint: getSourceHint(element),
+        text: element.textContent ?? "",
+        styles
+    });
+}
+function applyVersionToDom(version, baselines) {
+    for (const [key, baseline] of baselines) {
+        const element = findVersionElement(baseline);
+        if (!element)
+            continue;
+        element.textContent = baseline.text;
+        for (const property of STYLE_PROPERTIES) {
+            element.style[property] = baseline.styles[property] ?? "";
+        }
+        baselines.set(key, baseline);
+    }
+    for (const [key, change] of Object.entries(version.elements)) {
+        const element = findVersionElement(change);
+        if (!element)
+            continue;
+        ensureElementBaseline(element, key, baselines);
+        if (typeof change.text === "string")
+            element.textContent = change.text;
+        for (const [property, value] of Object.entries(change.styles)) {
+            element.style[property] = value;
+        }
+    }
+}
+function findVersionElement(change) {
+    const hintedSelector = change.sourceHint
+        ? `[data-chisel-id="${cssEscape(change.sourceHint)}"], [data-ai-edit="${cssEscape(change.sourceHint)}"], [data-component="${cssEscape(change.sourceHint)}"]`
+        : undefined;
+    return queryHTMLElement(hintedSelector) ?? queryHTMLElement(change.selector);
+}
+function queryHTMLElement(selector) {
+    if (!selector)
+        return undefined;
+    try {
+        const element = document.querySelector(selector);
+        return element instanceof HTMLElement ? element : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function toggleElementSelection(current, target) {
+    return current.includes(target) ? current.filter((element) => element !== target) : [...current, target];
+}
+function getChanges(element, snapshot) {
+    const computed = getComputedStyle(element);
+    const changes = [];
+    const currentText = element.textContent ?? "";
+    if (currentText !== snapshot.text) {
+        changes.push({ property: "textContent", before: snapshot.text, after: currentText });
+    }
+    for (const property of STYLE_PROPERTIES) {
+        const before = snapshot.styles[property];
+        const authoredAfter = element.style[property] ?? "";
+        const after = authoredAfter || computed[property];
+        if (normalizeStyleValue(before) !== normalizeStyleValue(after)) {
+            changes.push({ property, before, after });
+        }
+    }
+    return changes;
+}
+function buildAgentPrompt({ projectName, element, snapshot, rect, selector, sourceHint, changes }) {
+    const intent = {
+        route: window.location.href,
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        element: {
+            tagName: element.tagName.toLowerCase(),
+            selector,
+            ancestry: getAncestry(element),
+            boundingRect: rect,
+            textBefore: snapshot.text,
+            textAfter: element.textContent ?? "",
+            sourceHint
+        },
+        changes
+    };
+    const lowConfidence = !sourceHint && !selector.includes("[data-chisel-id") && !selector.includes("#");
+    return [
+        `You are editing ${projectName}. Update the source files for this Next.js app to match the visual edit intent below.`,
+        "",
+        "Do not ship a broad global CSS override. Find the component, JSX, CSS module, Tailwind classes, or style object that owns the selected element and make the smallest source-level change.",
+        lowConfidence ? "Selector confidence is low. Use the route, visible text, DOM ancestry, and nearby structure to find the matching source component before editing." : "A source hint is available. Prefer it when locating the component.",
+        "",
+        "Edit intent:",
+        "```json",
+        JSON.stringify(intent, null, 2),
+        "```",
+        "",
+        "Acceptance criteria:",
+        "- The selected element visually matches the requested text/style changes on the same route.",
+        "- Existing responsive behavior is preserved.",
+        "- No editor-only attributes or temporary inline preview styles are added unless they already belong to the app source."
+    ].join("\n");
+}
+function buildPageAgentPrompt({ projectName, version, baselines }) {
+    const elements = Object.entries(version.elements).map(([key, change]) => {
+        const baseline = baselines.get(key);
+        const element = findVersionElement(change);
+        return {
+            selector: change.selector,
+            sourceHint: change.sourceHint,
+            tagName: element?.tagName.toLowerCase(),
+            ancestry: element ? getAncestry(element) : undefined,
+            textBefore: baseline?.text,
+            textAfter: change.text,
+            styleChanges: Object.fromEntries(Object.entries(change.styles).map(([property, after]) => [property, { before: baseline?.styles[property] ?? null, after }]))
+        };
+    });
+    return [
+        `You are editing ${projectName}. Update the source files for this Next.js app to match all page-level visual edit intents below.`,
+        "",
+        "Do not ship broad global CSS overrides. Find the owning components, JSX, CSS modules, Tailwind classes, or style objects and make the smallest source-level changes.",
+        "",
+        "Edit intent:",
+        "```json",
+        JSON.stringify({
+            route: window.location.href,
+            viewport: { width: window.innerWidth, height: window.innerHeight },
+            elements
+        }, null, 2),
+        "```",
+        "",
+        "Acceptance criteria:",
+        "- All changed elements visually match the requested page edits on the same route.",
+        "- Existing responsive behavior is preserved.",
+        "- No editor-only attributes or temporary inline preview styles are added unless they already belong to the app source."
+    ].join("\n");
+}
+function getSourceHint(element) {
+    return element.dataset.chiselId ?? element.dataset.aiEdit ?? element.dataset.component ?? findClosestSourceHint(element);
+}
+function findClosestSourceHint(element) {
+    const parent = element.closest("[data-chisel-id], [data-ai-edit], [data-component]");
+    if (!(parent instanceof HTMLElement) || parent === element)
+        return undefined;
+    return parent.dataset.chiselId ?? parent.dataset.aiEdit ?? parent.dataset.component;
+}
+function getBestSelector(element) {
+    const hint = getSourceHint(element);
+    if (hint)
+        return `[data-chisel-id="${cssEscape(hint)}"], [data-ai-edit="${cssEscape(hint)}"], [data-component="${cssEscape(hint)}"]`;
+    if (element.id)
+        return `#${cssEscape(element.id)}`;
+    const parts = [];
+    let current = element;
+    while (current && current !== document.body && parts.length < 5) {
+        let part = current.tagName.toLowerCase();
+        const classNames = Array.from(current.classList).filter(Boolean).slice(0, 2);
+        if (classNames.length)
+            part += classNames.map((name) => `.${cssEscape(name)}`).join("");
+        const parent = current.parentElement;
+        if (parent) {
+            const tagName = current.tagName;
+            const siblings = Array.from(parent.children).filter((child) => child.tagName === tagName);
+            if (siblings.length > 1)
+                part += `:nth-of-type(${siblings.indexOf(current) + 1})`;
+        }
+        parts.unshift(part);
+        current = parent;
+    }
+    return parts.join(" > ");
+}
+function getAncestry(element) {
+    const ancestry = [];
+    let current = element;
+    while (current && current !== document.body && ancestry.length < 6) {
+        const text = (current.textContent ?? "").trim().replace(/\s+/g, " ").slice(0, 80);
+        ancestry.push(`${current.tagName.toLowerCase()}${current.id ? `#${current.id}` : ""}${text ? ` "${text}"` : ""}`);
+        current = current.parentElement;
+    }
+    return ancestry;
+}
+function rectToJSON(rect) {
+    return {
+        x: round(rect.x),
+        y: round(rect.y),
+        width: round(rect.width),
+        height: round(rect.height),
+        top: round(rect.top),
+        right: round(rect.right),
+        bottom: round(rect.bottom),
+        left: round(rect.left)
+    };
+}
+function isEditorElement(element) {
+    return Boolean(element.closest("[data-chisel-root='true']"));
+}
+function cssEscape(value) {
+    if (typeof CSS !== "undefined" && CSS.escape)
+        return CSS.escape(value);
+    return value.replace(/["\\#.:,[\]>~+*^$|= ]/g, "\\$&");
+}
+function toHex(color) {
+    const hex = normalizeHexColor(color);
+    if (hex)
+        return hex;
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+    if (match) {
+        return `#${[match[1], match[2], match[3]]
+            .map((value) => Number(value).toString(16).padStart(2, "0"))
+            .join("")}`;
+    }
+    const computed = computeCSSColor(color);
+    if (!computed || computed === color)
+        return "#ffffff";
+    const computedMatch = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+    if (!computedMatch)
+        return "#ffffff";
+    return `#${[computedMatch[1], computedMatch[2], computedMatch[3]]
+        .map((value) => Number(value).toString(16).padStart(2, "0"))
+        .join("")}`;
+}
+function computeCSSColor(color) {
+    if (typeof document === "undefined")
+        return undefined;
+    const probe = document.createElement("span");
+    probe.style.color = color;
+    if (!probe.style.color)
+        return undefined;
+    probe.style.position = "absolute";
+    probe.style.visibility = "hidden";
+    document.body.appendChild(probe);
+    const computed = getComputedStyle(probe).color;
+    probe.remove();
+    return computed;
+}
+function normalizeHexColor(color) {
+    const trimmed = color.trim();
+    const shortHex = trimmed.match(/^#([0-9a-f]{3})$/i);
+    if (shortHex) {
+        return `#${shortHex[1]
+            .split("")
+            .map((value) => `${value}${value}`)
+            .join("")}`.toUpperCase();
+    }
+    if (/^#[0-9a-f]{6}$/i.test(trimmed))
+        return trimmed.toUpperCase();
+    return undefined;
+}
+function hexToRgb(hex) {
+    const normalized = normalizeHexColor(hex) ?? "#FFFFFF";
+    const value = normalized.slice(1);
+    return {
+        r: Number.parseInt(value.slice(0, 2), 16),
+        g: Number.parseInt(value.slice(2, 4), 16),
+        b: Number.parseInt(value.slice(4, 6), 16)
+    };
+}
+function rgbToHsv({ r, g, b }) {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const delta = max - min;
+    let hue = 0;
+    if (delta !== 0) {
+        if (max === red)
+            hue = ((green - blue) / delta) % 6;
+        else if (max === green)
+            hue = (blue - red) / delta + 2;
+        else
+            hue = (red - green) / delta + 4;
+    }
+    hue = Math.round(hue * 60);
+    if (hue < 0)
+        hue += 360;
+    return {
+        h: hue,
+        s: max === 0 ? 0 : round((delta / max) * 100),
+        v: round(max * 100)
+    };
+}
+function rgbToHsl({ r, g, b }) {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const lightness = (max + min) / 2;
+    const delta = max - min;
+    if (delta === 0)
+        return { h: 0, s: 0, l: Math.round(lightness * 100) };
+    const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+    let hue = 0;
+    if (max === red)
+        hue = ((green - blue) / delta) % 6;
+    else if (max === green)
+        hue = (blue - red) / delta + 2;
+    else
+        hue = (red - green) / delta + 4;
+    hue = Math.round(hue * 60);
+    if (hue < 0)
+        hue += 360;
+    return { h: hue, s: Math.round(saturation * 100), l: Math.round(lightness * 100) };
+}
+function hsvToHex(hue, saturation, brightness) {
+    const chroma = (brightness / 100) * (saturation / 100);
+    const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const match = brightness / 100 - chroma;
+    const sector = Math.floor(hue / 60) % 6;
+    const channels = [
+        [chroma, x, 0],
+        [x, chroma, 0],
+        [0, chroma, x],
+        [0, x, chroma],
+        [x, 0, chroma],
+        [chroma, 0, x]
+    ][sector] ?? [chroma, 0, x];
+    return `#${channels
+        .map((channel) => Math.round((channel + match) * 255).toString(16).padStart(2, "0"))
+        .join("")}`.toUpperCase();
+}
+function normalizeStyleValue(value) {
+    return (value ?? "").replace(/\s+/g, " ").trim();
+}
+function getFontFamilyLabel(value) {
+    const firstFamily = value
+        .split(",")[0]
+        ?.replace(/^["']|["']$/g, "")
+        .trim();
+    return firstFamily;
+}
+function getFontFamilyOptions(value) {
+    const options = [];
+    const seen = new Set();
+    const addOption = (option) => {
+        const key = getFontFamilyLabel(option.value)?.toLowerCase() ?? option.label.toLowerCase();
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        options.push(option);
+    };
+    for (const option of FONT_FAMILY_OPTIONS)
+        addOption(option);
+    if (value && !options.some((option) => isMatchingFontFamily(value, option.value))) {
+        const label = getFontFamilyLabel(value);
+        if (label)
+            options.unshift({ label, value });
+    }
+    return options;
+}
+function getMatchingFontOption(value, options) {
+    return options.find((option) => isMatchingFontFamily(value, option.value));
+}
+function isMatchingFontFamily(firstValue, secondValue) {
+    const first = getFontFamilyLabel(firstValue)?.toLowerCase();
+    const second = getFontFamilyLabel(secondValue)?.toLowerCase();
+    if (first && second && first === second)
+        return true;
+    return normalizeStyleValue(firstValue) === normalizeStyleValue(secondValue);
+}
+function normalizeColorInput(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    if (isSupportedCSSValue("color", trimmed))
+        return trimmed;
+    return undefined;
+}
+function getColorDisplayValue(value) {
+    return normalizeHexColor(value) ?? value;
+}
+function parseGradientValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed.toLowerCase().startsWith("linear-gradient(") || !trimmed.endsWith(")"))
+        return undefined;
+    const content = trimmed.slice(trimmed.indexOf("(") + 1, -1);
+    const parts = splitCSSFunctionArgs(content);
+    if (parts.length < 3)
+        return undefined;
+    return {
+        start: parts[1].trim(),
+        end: parts.slice(2).join(", ").trim()
+    };
+}
+function parseImageUrlValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed.toLowerCase().startsWith("url(") || !trimmed.endsWith(")"))
+        return undefined;
+    let content = trimmed.slice(trimmed.indexOf("(") + 1, -1).trim();
+    const quote = content[0];
+    if ((quote === "\"" || quote === "'") && content.endsWith(quote)) {
+        content = content.slice(1, -1);
+    }
+    return content.replace(/\\(["'\\])/g, "$1");
+}
+function splitCSSFunctionArgs(value) {
+    const parts = [];
+    let current = "";
+    let depth = 0;
+    let quote;
+    for (let index = 0; index < value.length; index += 1) {
+        const char = value[index];
+        const previous = value[index - 1];
+        if (quote) {
+            current += char;
+            if (char === quote && previous !== "\\")
+                quote = undefined;
+            continue;
+        }
+        if (char === "\"" || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === "(")
+            depth += 1;
+        if (char === ")")
+            depth = Math.max(0, depth - 1);
+        if (char === "," && depth === 0) {
+            parts.push(current.trim());
+            current = "";
+            continue;
+        }
+        current += char;
+    }
+    if (current.trim())
+        parts.push(current.trim());
+    return parts;
+}
+function inferColorFormat(value) {
+    const normalized = value.trim().toLowerCase();
+    if (normalized.startsWith("hsl"))
+        return "HSL";
+    if (normalized.startsWith("rgba"))
+        return "RGBA";
+    if (normalized.startsWith("rgb"))
+        return "RGB";
+    return "Hex";
+}
+function formatColorValue(hex, alpha, format) {
+    const normalizedHex = (normalizeHexColor(hex) ?? toHex(hex)).toUpperCase();
+    const { r, g, b } = hexToRgb(normalizedHex);
+    if (format === "RGB")
+        return `rgb(${r}, ${g}, ${b})`;
+    if (format === "RGBA")
+        return colorWithAlpha(normalizedHex, alpha);
+    if (format === "HSL") {
+        const { h, s, l } = rgbToHsl({ r, g, b });
+        return alpha < 1 ? `hsl(${h} ${s}% ${l}% / ${formatNumber(alpha)})` : `hsl(${h} ${s}% ${l}%)`;
+    }
+    return normalizedHex;
+}
+function getColorAlpha(value) {
+    const rgba = computeCSSColor(value) ?? value;
+    const match = rgba.match(/rgba?\([^,]+,\s*[^,]+,\s*[^,]+(?:,\s*([^)]+))?\)/i);
+    if (!match?.[1])
+        return 1;
+    const alpha = Number.parseFloat(match[1]);
+    return Number.isFinite(alpha) ? clamp(alpha, 0, 1) : 1;
+}
+function colorWithAlpha(hex, alpha) {
+    const { r, g, b } = hexToRgb(hex);
+    return `rgba(${r}, ${g}, ${b}, ${formatNumber(alpha)})`;
+}
+function getGradientValue(start, end) {
+    return `linear-gradient(135deg, ${start}, ${end})`;
+}
+function getImageValue(url) {
+    return `url("${url.trim().replace(/["\\]/g, "\\$&")}")`;
+}
+function isBackgroundImageValue(value) {
+    return value.startsWith("linear-gradient(") || value.startsWith("url(");
+}
+function normalizeStyleInput(value, control, element, inferredUnit = control.unit) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    const converted = convertUnitExpression(trimmed, element);
+    const candidate = converted ?? inferUnitForBareNumber(trimmed, control, inferredUnit);
+    if (isSupportedCSSValue(control.cssProperty, candidate))
+        return candidate;
+    return undefined;
+}
+function isSupportedCSSValue(property, value) {
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function")
+        return true;
+    return CSS.supports(property, value);
+}
+function isCompleteUnitConversion(value) {
+    return /^-?(?:\d+|\d*\.\d+)(px|rem|em)(px|rem|em)$/i.test(value.trim());
+}
+function getSupportedUnits(control) {
+    const units = [];
+    if (isSupportedCSSValue(control.cssProperty, "1"))
+        units.push("");
+    for (const unit of CSS_NUMERIC_UNITS) {
+        if (isSupportedCSSValue(control.cssProperty, `1${unit}`))
+            units.push(unit);
+    }
+    return units;
+}
+function convertStyleInputToUnit(value, targetUnit, control, element, inferredUnit) {
+    const normalized = normalizeStyleInput(value, control, element, inferredUnit);
+    if (!normalized)
+        return undefined;
+    const parsed = parseNumericCSSValue(normalized);
+    if (!parsed)
+        return undefined;
+    if (parsed.unit === targetUnit)
+        return normalized;
+    const pxValue = numericValueToPx(parsed.value, parsed.unit, control, element);
+    if (pxValue === undefined)
+        return undefined;
+    const nextAmount = pxToNumericValue(pxValue, targetUnit, control, element);
+    if (nextAmount === undefined)
+        return undefined;
+    const candidate = targetUnit ? `${formatNumber(round(nextAmount))}${targetUnit}` : formatNumber(round(nextAmount));
+    return isSupportedCSSValue(control.cssProperty, candidate) ? candidate : undefined;
+}
+function parseNumericCSSValue(value) {
+    const match = value.trim().match(/^(-?(?:\d+|\d*\.\d+))([a-z%]*)$/i);
+    if (!match)
+        return undefined;
+    const numericValue = Number(match[1]);
+    if (!Number.isFinite(numericValue))
+        return undefined;
+    return { value: numericValue, unit: match[2].toLowerCase() };
+}
+function numericValueToPx(value, unit, control, element) {
+    if (!unit) {
+        if (control.cssProperty === "line-height")
+            return value * getElementFontSize(element);
+        if (control.cssProperty === "opacity")
+            return value;
+        return undefined;
+    }
+    const unitSize = getUnitSizeInPx(unit, element, control);
+    return unitSize === undefined ? undefined : value * unitSize;
+}
+function pxToNumericValue(pxValue, unit, control, element) {
+    if (!unit) {
+        if (control.cssProperty === "line-height")
+            return pxValue / getElementFontSize(element);
+        if (control.cssProperty === "opacity")
+            return pxValue;
+        return undefined;
+    }
+    const unitSize = getUnitSizeInPx(unit, element, control);
+    return unitSize === undefined || unitSize === 0 ? undefined : pxValue / unitSize;
+}
+function convertUnitExpression(value, element) {
+    const match = value.match(/^(-?(?:\d+|\d*\.\d+))(px|rem|em)(px|rem|em)$/i);
+    if (!match)
+        return undefined;
+    const amount = Number(match[1]);
+    const fromUnit = match[2].toLowerCase();
+    const toUnit = match[3].toLowerCase();
+    if (!Number.isFinite(amount) || fromUnit === toUnit)
+        return undefined;
+    const fromSize = getUnitSizeInPx(fromUnit, element);
+    const toSize = getUnitSizeInPx(toUnit, element);
+    if (!fromSize || !toSize)
+        return undefined;
+    const pxValue = amount * fromSize;
+    const converted = pxValue / toSize;
+    return `${formatNumber(round(converted))}${toUnit}`;
+}
+function inferUnitForBareNumber(value, control, inferredUnit) {
+    if (!isBareNumber(value) || !inferredUnit)
+        return value;
+    if (isSupportedCSSValue(control.cssProperty, value) && control.unit === "")
+        return value;
+    return `${value}${inferredUnit}`;
+}
+function isBareNumber(value) {
+    return /^-?(?:\d+|\d*\.\d+)$/.test(value);
+}
+function getInferredUnit(value, control) {
+    const match = value.trim().match(/(-?(?:\d+|\d*\.\d+))([a-z%]+)$/i);
+    return match?.[2] ?? control.unit;
+}
+function isArrowStepKey(key) {
+    return key === "ArrowUp" || key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft";
+}
+function isIncrementKey(key) {
+    return key === "ArrowUp" || key === "ArrowRight";
+}
+function stepStyleInput(value, control, element, inferredUnit, step, increment) {
+    const match = value.trim().match(/^(-?(?:\d+|\d*\.\d+))([a-z%]*)$/i);
+    if (!match)
+        return undefined;
+    const current = Number(match[1]);
+    if (!Number.isFinite(current))
+        return undefined;
+    const unit = match[2] || inferredUnit;
+    const next = round(current + (increment ? step : -step));
+    const candidate = unit ? `${formatNumber(next)}${unit}` : formatNumber(next);
+    return normalizeStyleInput(candidate, control, element, unit);
+}
+function getUnitSizeInPx(unit, element, control) {
+    if (unit === "px")
+        return 1;
+    if (unit === "rem") {
+        const rootSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        return Number.isFinite(rootSize) && rootSize > 0 ? rootSize : 16;
+    }
+    if (unit === "em") {
+        const base = control?.cssProperty === "font-size" ? element.parentElement ?? element : element;
+        const emSize = parseFloat(getComputedStyle(base).fontSize);
+        return Number.isFinite(emSize) && emSize > 0 ? emSize : getUnitSizeInPx("rem", element);
+    }
+    return undefined;
+}
+function getElementFontSize(element) {
+    const fontSize = parseFloat(getComputedStyle(element).fontSize);
+    return Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 16;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function getSliderPercent(value, min, max) {
+    if (max <= min)
+        return 0;
+    return clamp(((value - min) / (max - min)) * 100, 0, 100);
+}
+function getSliderValueFromPointer(clientX, rect, control) {
+    const percent = rect.width > 0 ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0;
+    const raw = control.min + percent * (control.max - control.min);
+    return roundToStep(raw, control.step, control.min);
+}
+function roundToStep(value, step, min) {
+    if (step <= 0)
+        return value;
+    const stepped = Math.round((value - min) / step) * step + min;
+    const decimals = String(step).includes(".") ? String(step).split(".")[1].length : 0;
+    return Number(stepped.toFixed(decimals));
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+function formatNumber(value) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+}