use-chisel 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,879 +1,36 @@
-"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: `
+"use client";import{jsx as u,jsxs as w,Fragment as We}from"react/jsx-runtime";import*as p from"react";import{forwardRef as Bt,createElement as Rt}from"react";var Ra=e=>e?.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();function Ma(e,a,t=[]){if(a==null)throw new Error("[lucide]: iconNode is required when icon name is used");return{name:Ra(e),size:24,node:a,...t.length>0?{aliases:t}:{}}}var Da=e=>{let a="",t=!1;for(let o of e){if(o==="-"||o==="_"||o<=" "){t=a.length>0;continue}a.length===0?a+=o.toLowerCase():a+=t?o.toUpperCase():o,t=!1}return a};var Ta=e=>{let a=Da(e);return a.charAt(0).toUpperCase()+a.slice(1)};import{forwardRef as Ft,createElement as Ea}from"react";var Ge=(...e)=>e.filter((a,t,o)=>!!a&&a.trim()!==""&&o.indexOf(a)===t).join(" ").trim();var Le={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};function na(e){return e!=null}function qa(e,a={}){let t=a.attributeNames??{},o=M=>t[M]??M,r=e.size??e.width??Le.width,n=e.size??e.height??Le.height,i=e.aliases?.filter(M=>typeof M=="string"&&M.trim()!=="").map(M=>`lucide-${M}`)??[],c=[...e.name?[`lucide-${e.name}`]:[],...i],f=a.className?.split(" ").filter(Boolean)??[],g=a.includeDefaultClasses===!1?Ge(...f):Ge("lucide",...c,...f),S=a.absoluteStrokeWidth?Number(a.strokeWidth??Le["stroke-width"])*Number(e.size??e.width??Le.width)/Number(a.size??a.width??Le.width):a.strokeWidth??Le["stroke-width"];return["svg",{...Object.entries(Le).reduce((M,[F,k])=>(M[o(F)]=k,M),{}),..."color"in a&&a.color&&{[o("stroke")]:a.color},..."size"in a&&na(a.size)&&{[o("width")]:a.size,[o("height")]:a.size},..."width"in a&&na(a.width)&&{[o("width")]:a.width},..."height"in a&&na(a.height)&&{[o("height")]:a.height},[o("stroke-width")]:S,...g&&{[o("class")]:g},[o("viewBox")]:`0 0 ${r} ${n}`,...a.hasA11yProp===!1?{[o("aria-hidden")]:"true"}:{},..."attributes"in a&&a.attributes},e.node.map(M=>{let[F,k,P]=M,T=a.nonScalingStroke?{[o("vector-effect")]:"non-scaling-stroke",...k}:k;return P?[F,T,P]:[F,T]})]}function Ua(e,a={}){return qa(e,{...a,attributeNames:{...a.attributeNames,class:"className","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","vector-effect":"vectorEffect"}})}var Oa=e=>{for(let a in e)if(a.startsWith("aria-")||a==="role"||a==="title")return!0;return!1};import{createContext as Pt,useContext as At,useMemo as Xo,createElement as Ko}from"react";var vt=Pt({});var Ha=()=>At(vt);var Na=Ft(({color:e,size:a,width:t,height:o,strokeWidth:r,absoluteStrokeWidth:n,nonScalingStroke:i,className:c="",children:f,iconNode:g=[],icon:S={node:g,aliases:[],size:24},...A},M)=>{let{size:F=24,strokeWidth:k=2,absoluteStrokeWidth:P=!1,nonScalingStroke:T=!1,color:q="currentColor",className:H=""}=Ha()??{},ae=!!f||Oa(A),[v,U,B=[]]=Ua(S,{color:e??q,width:t??a??F,height:o??a??F,strokeWidth:r??k,absoluteStrokeWidth:n??P,nonScalingStroke:i??T,className:Ge(H,c),hasA11yProp:ae,attributes:A});return Ea(v,{ref:M,...U},[...B.map(([W,G])=>Ea(W,G)),...Array.isArray(f)?f:[f]])});function Pe(e,a=[],t=[]){let o=typeof e=="string"?Ma(e,a,t):e,r=Bt(({className:n,...i},c)=>Rt(Na,{ref:c,icon:o,className:n,...i}));return o.name&&(r.displayName=Ta(o.name)),r}var Ga={name:"chevron-down",size:24,node:[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]};Ga.node;var Ae=Pe(Ga);var Va={name:"plus",size:24,node:[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]};Va.node;var Ve=Pe(Va);var za={name:"x",size:24,node:[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]};za.node;var ze=Pe(za);var Wa=`
+:is(.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box) :focus{outline:none}
+.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{color-scheme:light;--chisel-ui-panel-shadow:0 4px 20px rgba(0,0,0,.08);--chisel-ui-canvas:#f7f7f7;--chisel-ui-surface:#ffffff;--chisel-ui-raised:#f5f5f5;--chisel-ui-inset:#eeeeee;--chisel-ui-hover:#f0f0f0;--chisel-ui-selected:#eaeaea;--chisel-ui-border:#e2e2e2;--chisel-ui-border-strong:#c4c4c4;--chisel-ui-text:#242424;--chisel-ui-secondary:#626262;--chisel-ui-muted:#686868;--chisel-ui-focus:#2468d3;--chisel-ui-accent-text:#2468d3;--chisel-ui-accent-surface:#edf4ff;--chisel-ui-action:#242424;--chisel-ui-action-text:#ffffff;--chisel-ui-danger:#b33737;--chisel-ui-avatar:#ededed;--chisel-ui-avatar-text:#565656;--chisel-ui-scrollbar:#c2c2c2;--chisel-ui-checker-light:#e5e5e5;--chisel-ui-checker-dark:#c7c7c7;}
+@media(prefers-color-scheme:dark){.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{color-scheme:dark;--chisel-ui-panel-shadow:0 4px 20px #0003;--chisel-ui-canvas:#171717;--chisel-ui-surface:#222222;--chisel-ui-raised:#2a2a2a;--chisel-ui-inset:#191919;--chisel-ui-hover:#303030;--chisel-ui-selected:#383838;--chisel-ui-border:#3c3c3c;--chisel-ui-border-strong:#555555;--chisel-ui-text:#ededed;--chisel-ui-secondary:#b7b7b7;--chisel-ui-muted:#a5a5a5;--chisel-ui-focus:#8bb9ff;--chisel-ui-accent-text:#8bb9ff;--chisel-ui-accent-surface:#253447;--chisel-ui-action:#ededed;--chisel-ui-action-text:#111111;--chisel-ui-danger:#ffa5a5;--chisel-ui-avatar:#383838;--chisel-ui-avatar-text:#cccccc;--chisel-ui-scrollbar:#50504d;--chisel-ui-checker-light:#555555;--chisel-ui-checker-dark:#333333;}
+}
+
+.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{--chisel-ui-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--chisel-ui-space:4px;--chisel-ui-control:40px;--chisel-ui-radius:8px;--chisel-ui-text-size:13px;--chisel-ui-small:12px;--chisel-ui-motion:120ms cubic-bezier(.2,0,0,1);--chisel-ui-popover-shadow:0 2px 6px #0000000f,0 12px 36px #0000001f;}
+@media(prefers-color-scheme:dark){.chisel-root,.feedback-shell,.chisel-sign-in,.chisel-color-picker,.comment-box{--chisel-ui-popover-shadow:0 0 0 1px #ffffff0d,0 4px 12px #0003,0 16px 40px #0004;}}
+`;function ca(e,a){return{schemaVersion:1,activeVersionId:e.some(o=>o.id===a)?a:e[0]?.id??a,versions:e}}function Xa(e){if(e===null)return{migrated:!1};let a;try{a=JSON.parse(e)}catch{return{migrated:!1,warning:"Saved edits could not be read. Edits will be kept for this session."}}if(Array.isArray(a)){let t=a.filter(Ka);return a.length>0&&t.length===0?{migrated:!1,warning:"Saved edits are malformed. Edits will be kept for this session."}:{envelope:ca(t,t[0]?.id??"version-1"),migrated:t.length===a.length,warning:t.length<a.length?"Some malformed saved versions were skipped. Recovered edits will be kept for this session until you make a change.":void 0}}return Mt(a)?{envelope:a,migrated:!1}:{migrated:!1,warning:"Saved edits use an unsupported or malformed format. Edits will be kept for this session."}}function Mt(e){return!ve(e)||e.schemaVersion!==1||typeof e.activeVersionId!="string"||!Array.isArray(e.versions)||!e.versions.every(Ka)?!1:e.versions.length===0||e.versions.some(a=>a.id===e.activeVersionId)}function Ka(e){return!ve(e)||typeof e.id!="string"||typeof e.name!="string"||!ve(e.elements)?!1:Object.values(e.elements).every(Dt)}function Dt(e){return!(!ve(e)||typeof e.selector!="string"||!ve(e.styles)||e.sourceHint!==void 0&&typeof e.sourceHint!="string"||e.text!==void 0&&typeof e.text!="string"||!Object.values(e.styles).every(a=>typeof a=="string")||e.asset!==void 0&&!Tt(e.asset))}function Tt(e){return ve(e)&&typeof e.fileName=="string"&&typeof e.mimeType=="string"&&typeof e.size=="number"&&Number.isFinite(e.size)&&e.size>=0}function ve(e){return!!e&&typeof e=="object"&&!Array.isArray(e)}var qt=["px","rem","em"],Ut=[{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"}],Ot=["Hex","RGB","RGBA","HSL"],Ht=["Solid","Gradient","Image"],Et=[{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:.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:.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"}],Sa=["color","backgroundColor","backgroundImage","backgroundPosition","backgroundSize","fontFamily","fontSize","lineHeight","letterSpacing","paddingInline","paddingBlock","marginInline","marginBlock","borderRadius","opacity","width","height"],Nt=new Set(["area","audio","base","br","button","canvas","col","embed","hr","iframe","img","input","link","meta","object","param","picture","portal","select","source","textarea","track","video","wbr"]),La="chisel:locationchange",ea=0,la,Ke=!1,$a=0,xa=new Map,Xe=new WeakMap;function Sr({id:e,as:a,children:t,...o}){return u(a??"span",{"data-chisel-id":e,...o,children:t})}function wr({enabled:e=process.env.NODE_ENV!=="production",position:a="right",projectName:t="Next.js app",embedded:o=!1}){let[r,n]=p.useState(null),[i,c]=p.useState(null),[f,g]=p.useState(null),[S,A]=p.useState([]),[M,F]=p.useState(null),[k,P]=p.useState([]),[T,q]=p.useState(!1),[H,ae]=p.useState(""),[v,U]=p.useState(()=>[pa(1)]),[B,W]=p.useState("version-1"),[G,K]=p.useState(!1),[te,E]=p.useState(""),[fe,oe]=p.useState(""),[re,le]=p.useState(!1),[$,ee]=p.useState([]),[m,I]=p.useState(0),[Z,j]=p.useState(""),se=p.useRef(new WeakMap),O=p.useRef(new Map),N=p.useRef(new Map),xe=p.useRef(""),V=p.useRef(null),ne=p.useRef(null),X=p.useRef([]),Je=p.useRef(null),Qe=p.useRef([]),me=p.useRef(null),Ie=p.useRef(null),ye=p.useRef(null),Ue=p.useRef(!1),ge=p.useRef(null),s=p.useRef(null),L=p.useRef(null),b=p.useRef(!0),D=r?new URLSearchParams(r.search).has("editor"):!1,Q=e&&(o||D),ya=r?ut(r.pathname,r.search):"";if(p.useEffect(()=>()=>ha(N.current),[]),p.useEffect(()=>{let l=()=>n(Kt());return l(),$t(l)},[]),p.useEffect(()=>{if(Q){Ue.current=!0;return}if(!Ue.current||(Ue.current=!1,o))return;let l=v.find(d=>d.id===B)??v[0];l&&Qa(l,O.current,N.current),ha(N.current),V.current=null,ne.current=null,X.current=[],c(null),g(null),A([]),F(null),P([]),q(!1)},[B,Q,o,v]),p.useEffect(()=>{if(!Q||!o)return;let l=()=>{let d=document.documentElement?.dataset.chiselSelection,x=d?document.querySelector(d):null;x instanceof HTMLElement&&!Be(x)&&Ye([x])};return window.addEventListener("chisel:select",l),()=>window.removeEventListener("chisel:select",l)},[Q,o]),p.useEffect(()=>{if(!Q){Ke=!1;return}let l=()=>{ge.current===null&&(ge.current=window.requestAnimationFrame(()=>{ge.current=null;let x=V.current,h=X.current;F(C=>x?ie(x.getBoundingClientRect()):C),P(h.map(C=>ie(C.getBoundingClientRect())))}))},d=x=>{let h=x.target;h instanceof HTMLElement&&Be(h)||x.key==="Escape"&&(ne.current=null,X.current=[],g(null),A([]),P([]))};return document.addEventListener("keydown",d),window.addEventListener("resize",l),window.addEventListener("scroll",l,!0),()=>{ge.current!==null&&window.cancelAnimationFrame(ge.current),s.current!==null&&window.cancelAnimationFrame(s.current),document.removeEventListener("keydown",d),window.removeEventListener("resize",l),window.removeEventListener("scroll",l,!0)}},[Q]),p.useEffect(()=>{ne.current=f},[f]),p.useEffect(()=>{X.current=S},[S]),p.useEffect(()=>{if(!S.length)return;let l=null,d=()=>{l===null&&(l=window.requestAnimationFrame(()=>{l=null,P(S.map(h=>ie(h.getBoundingClientRect())))}))};if(typeof ResizeObserver>"u"){let h=window.setInterval(d,750);return()=>{l!==null&&window.cancelAnimationFrame(l),window.clearInterval(h)}}let x=new ResizeObserver(d);for(let h of S)x.observe(h);return()=>{l!==null&&window.cancelAnimationFrame(l),x.disconnect()}},[f,S]),p.useEffect(()=>{if(!Q)return;let l=jt(ya);xe.current=l,oe(""),V.current=null,ne.current=null,X.current=[],c(null),g(null),A([]),F(null),P([]);let d=v.find(_=>_.id===B)??v[0];d&&Qa(d,O.current,N.current),O.current.clear(),ha(N.current);let x=Jt(r?.pathname??window.location.pathname,r?.search??window.location.search),h=Qt(l,x);b.current=!h.warning,E(h.warning??"");let C=h.envelope?.versions.length?h.envelope.versions:[pa(1)],y=h.envelope?.activeVersionId??C[0].id;U(C),W(y),oe(l);let R=C.find(_=>_.id===y)??C[0],z=window.setTimeout(()=>aa(R,C,O.current,N.current),0);if(h.migrated&&h.envelope){let _=Ja(l,C,y);_&&E(_)}return Ke=!1,()=>window.clearTimeout(z)},[ya,Q]),p.useEffect(()=>{if(!Q||!b.current||!xe.current||fe!==xe.current)return;let l=Ja(xe.current,v,B);l&&E(l)},[B,Q,fe,v]),p.useEffect(()=>{if(!Q||typeof MutationObserver>"u"||!document.body)return;let l=null,d=()=>{l=null;let h=v.find(y=>y.id===B)??v[0];h&&aa(h,v,O.current,N.current,!1),V.current&&!V.current.isConnected&&(V.current=null,c(null),F(null));let C=X.current.filter(y=>y.isConnected);if(C.length!==X.current.length){let y=C[C.length-1]??null;X.current=C,ne.current=y,A(C),g(y),P(C.map(R=>ie(R.getBoundingClientRect())))}},x=new MutationObserver(h=>{if(Ke)return;let C=h.some(R=>{let z=R.target instanceof HTMLElement?R.target:R.target.parentElement;return z&&Xe.has(z)?!1:z&&!Be(z)?!0:Array.from(R.addedNodes).some(_=>{let Ba=_ instanceof HTMLElement?_:_.parentElement;return!!(Ba&&!Be(Ba))})}),y=h.some(R=>Array.from(R.removedNodes).some(z=>z instanceof HTMLElement&&((V.current?z===V.current||z.contains(V.current):!1)||X.current.some(_=>z===_||z.contains(_)))));!C&&!y||l===null&&(l=window.requestAnimationFrame(d))});return x.observe(document.body,{attributes:!0,attributeFilter:["style"],characterData:!0,childList:!0,subtree:!0}),()=>{x.disconnect(),l!==null&&window.cancelAnimationFrame(l)}},[B,Q,v]),p.useEffect(()=>{if(!re)return;let l=h=>{let C=Y(h,0,Math.max(0,$.length-1)),y=$[C];I(C),y&&(V.current=y,c(y),F(ie(y.getBoundingClientRect())),j(at(y)))},d=()=>{Ye(Qe.current.filter(h=>h.isConnected)),le(!1),window.requestAnimationFrame(()=>Je.current?.focus())},x=h=>{let C=$[m],y=m;if(h.key==="ArrowDown")y=m+1;else if(h.key==="ArrowUp")y=m-1;else if(h.key==="Home")y=0;else if(h.key==="End")y=$.length-1;else if(h.key==="ArrowRight"&&C){let R=$.find(z=>z.parentElement===C);R&&(y=$.indexOf(R))}else if(h.key==="ArrowLeft"&&C){let R=C.parentElement;for(;R&&!$.includes(R);)R=R.parentElement;R&&(y=$.indexOf(R))}else if(h.key==="Enter"&&C){Ye(h.shiftKey?Ya(X.current,C):[C]),h.shiftKey||le(!1),h.preventDefault();return}else if(h.key==="Escape"){d(),h.preventDefault();return}else return;l(y),h.preventDefault()};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[re,$,m]),p.useEffect(()=>{H&&(me.current?.focus(),me.current?.select())},[H]),p.useEffect(()=>{if(!G)return;let l=h=>{K(!1),h&&window.requestAnimationFrame(()=>ye.current?.focus())},d=h=>{h.target instanceof Node&&Ie.current?.contains(h.target)||l(!0)},x=h=>{h.key==="Escape"&&(l(!0),h.preventDefault())};return document.addEventListener("pointerdown",d,!0),document.addEventListener("keydown",x),()=>{document.removeEventListener("pointerdown",d,!0),document.removeEventListener("keydown",x)}},[G]),!Q)return null;let he=S.length,Oe=f?se.current.get(f):void 0,fa=!!(he<=1&&f&&tt(f)),He=f?De(f):void 0,Pa=f?$e(f):"",ue=v.find(l=>l.id===B)??v[0]??pa(1),_e=he>1?S.flatMap(l=>ao(ue.elements[de(l)])):f&&Oe?eo(f,Oe):[],Ce=f?getComputedStyle(f):null,Ee=l=>he>1&&new Set(S.map(d=>getComputedStyle(d)[l])).size>1,Ne=()=>S.length?S:f?[f]:[];function Ye(l){for(let x of l)Wt(x,se.current);let d=l[l.length-1]??null;if(X.current=l,ne.current=d,A(l),g(d),P(l.map(x=>ie(x.getBoundingClientRect()))),o&&d){let x=d.getBoundingClientRect();window.dispatchEvent(new CustomEvent("chisel:selection",{detail:{selector:$e(d),tag:d.tagName.toLowerCase(),x:x.left+x.width/2+window.scrollX,y:x.top+x.height/2+window.scrollY,offsetX:.5,offsetY:.5}}))}}let Se=()=>{P(S.map(l=>ie(l.getBoundingClientRect())))},Aa=(l,d)=>{let x=document.elementsFromPoint(l,d).find(h=>h instanceof HTMLElement&&!Be(h));return x instanceof HTMLElement?lo(x):null},mt=l=>{L.current={x:l.clientX,y:l.clientY},s.current===null&&(s.current=window.requestAnimationFrame(()=>{s.current=null;let d=L.current;if(!d)return;let x=Aa(d.x,d.y);if(!x){V.current=null,c(null),F(null);return}x!==V.current&&(V.current=x,c(x),F(ie(x.getBoundingClientRect())))}))},ht=l=>{l.preventDefault(),l.stopPropagation();let d=Aa(l.clientX,l.clientY);d&&(le(!1),Ye(l.shiftKey?Ya(X.current,d):[d]))},Lt=()=>{let l=so();Qe.current=X.current,ee(l),I(0),le(!0);let d=l[0];d?(V.current=d,c(d),F(ie(d.getBoundingClientRect())),j(at(d))):j("No visible elements available")},xt=()=>{let l={id:`version-${Date.now()}`,name:`Version ${v.length+1}`,elements:Xt(ue.elements)};ia(d=>[...d,l]),W(l.id),K(!1);for(let[d,x]of Object.entries(ue.elements)){if(!x.asset)continue;let h=N.current.get(be(ue.id,d));h&&N.current.set(be(l.id,d),h)}aa(l,[...v,l],O.current,N.current),Se()},It=l=>{W(l.id),K(!1),aa(l,v,O.current,N.current),Se(),window.requestAnimationFrame(()=>ye.current?.focus())},gt=(l,d)=>{let x=l.unit==="px"?`${d}px`:String(d);va(l,x)},va=(l,d)=>{let x=Ne();if(x.length){for(let h of x)ke(h,de(h),O.current),ce(h),h.style[l.property]=d,we(h,{styles:{[l.property]:d}});Se()}},Fa=(l,d,x)=>{let h=Ne();if(h.length){for(let C of h){let y=de(C);if(ke(C,de(C),O.current),ce(C),l==="backgroundColor"&&ho(d)){if(C.style.backgroundImage=d,d.startsWith("url(")){let R=ga(d),z=be(B,y);x&&R?_t(N.current,z,R):ma(N.current,z),C.style.backgroundPosition="center",C.style.backgroundSize="cover",we(C,{styles:{backgroundImage:x?"":d,backgroundPosition:"center",backgroundSize:"cover"},asset:x??null})}else we(C,{styles:{backgroundImage:d},asset:null});continue}if(C.style[l]=d,l==="backgroundColor"){ma(N.current,be(B,y)),C.style.backgroundImage="",C.style.backgroundPosition="",C.style.backgroundSize="",we(C,{styles:{backgroundColor:d,backgroundImage:"",backgroundPosition:"",backgroundSize:""},asset:null});continue}we(C,{styles:{[l]:d}})}Se()}},Ct=l=>{let d=Ne();if(d.length){for(let x of d)ke(x,de(x),O.current),ce(x),x.style.fontFamily=l,we(x,{styles:{fontFamily:l}});Se()}},St=l=>{let d=Ne();if(d.length)for(let x of d)ke(x,de(x),O.current),ce(x),x.style.fontFamily=l},wt=l=>{!f||!fa||(ke(f,de(f),O.current),ce(f),f.textContent=l,we(f,{text:l}),Se())},kt=()=>{let l=Ne();if(l.length){for(let d of l){let x=se.current.get(d),h=de(d),C=O.current.get(h),y=ue.elements[h];if(y){ce(d);for(let R of Object.keys(y.styles))d.style[R]=C?.styles[R]??"";typeof y.text=="string"&&tt(d)&&(d.textContent=C?.text??x?.text??""),bt(d),y.asset&&ma(N.current,be(B,h))}}Se()}};function we(l,d){let x=de(l);ke(l,x,O.current),ia(h=>h.map(C=>{if(C.id!==B)return C;let y=C.elements[x];return{...C,elements:{...C.elements,[x]:{selector:$e(l),sourceHint:De(l),text:d.text??y?.text,asset:d.asset===null?void 0:d.asset??y?.asset,styles:{...y?.styles??{},...d.styles??{}}}}}}))}function bt(l){let d=de(l),x=v.some(h=>h.id!==B&&!!h.elements[d]);ia(h=>h.map(C=>{if(C.id!==B)return C;let{[d]:y,...R}=C.elements;return{...C,elements:R}})),x||O.current.delete(d)}function ia(l){b.current=!0,U(l)}let yt=async()=>{let l=f?ie(f.getBoundingClientRect()):void 0,d=Object.keys(ue.elements).length?oo({projectName:t,version:ue,baselines:O.current}):f&&Oe&&l?to({projectName:t,element:f,snapshot:Oe,rect:l,selector:Pa,sourceHint:He,changes:_e}):void 0;if(d)try{if(!navigator.clipboard?.writeText)throw new Error("Clipboard unavailable");await navigator.clipboard.writeText(d),ae(""),q(!0),window.setTimeout(()=>q(!1),1600)}catch{q(!1),ae(d)}};return w("div",{"data-chisel-root":"true",className:"chisel-root",children:[u(zt,{}),u("div",{className:"chisel-visually-hidden","aria-live":"polite",children:Z}),u("div",{className:"chisel-inspection-layer","aria-hidden":"true",onPointerMove:mt,onPointerLeave:()=>{L.current=null,s.current!==null&&window.cancelAnimationFrame(s.current),s.current=null,V.current=null,c(null),F(null)},onClick:ht}),M&&i&&!S.includes(i)?u(Za,{rect:M,tone:"hover"}):null,k.map((l,d)=>u(Za,{rect:l,tone:"selected"},`${l.left}-${l.top}-${d}`)),u("aside",{className:`chisel-panel chisel-panel-${a}`,"aria-label":"Chisel editor",children:u("div",{className:"chisel-panel-wrapper",children:u("div",{className:"chisel-panel-inner",children:w("div",{className:"chisel-folder chisel-folder-root",children:[u("header",{className:"chisel-folder-header chisel-panel-header",children:w("div",{className:"chisel-panel-toolbar",children:[u("button",{className:"chisel-toolbar-add",type:"button","aria-label":"Add version",onClick:xt,children:u(Ve,{size:16,strokeWidth:1.75,"aria-hidden":"true"})}),w("div",{className:"chisel-preset-manager",ref:Ie,children:[w("button",{className:"chisel-preset-trigger",type:"button","aria-expanded":G,"aria-haspopup":"listbox",ref:ye,onClick:()=>K(l=>{let d=!l;return d&&window.requestAnimationFrame(()=>Ie.current?.querySelector('[role="option"][aria-selected="true"]')?.focus()),d}),children:[u("span",{className:"chisel-preset-trigger-label",children:ue.name}),u(Ae,{className:"chisel-chevron",size:16,strokeWidth:1.75,"aria-hidden":"true"})]}),G?u("div",{className:"chisel-preset-dropdown",role:"listbox","aria-label":"Page versions",onKeyDown:ka,children:u("div",{className:"chisel-preset-list",children:v.map(l=>w("button",{className:"chisel-preset-item",type:"button",role:"option","aria-selected":l.id===ue.id,"data-active":l.id===ue.id,onClick:()=>It(l),children:[u("span",{className:"chisel-preset-name",children:l.name}),u("span",{className:"chisel-preset-count",children:Object.keys(l.elements).length})]},l.id))})}):null]}),u("button",{className:"chisel-toolbar-add",type:"button",onClick:()=>{ne.current=null,X.current=[],g(null),A([]),P([])},"aria-label":"Clear selection",children:u(ze,{size:16,strokeWidth:1.75,"aria-hidden":"true"})})]})}),te?u("div",{className:"chisel-note-row chisel-warning",role:"alert",children:te}):null,f&&Oe?w("div",{className:"chisel-content",children:[w("div",{className:"chisel-text-control chisel-context-row",children:[u("span",{className:"chisel-text-label",children:he>1?"Selection":"Element"}),u("code",{className:"chisel-text-code",children:he>1?`${he} elements`:f.tagName.toLowerCase()})]}),he===1?w(We,{children:[w("div",{className:"chisel-text-control chisel-context-row chisel-selector-row",children:[u("span",{className:"chisel-text-label",children:"Selector"}),u("code",{className:"chisel-selector",children:Pa})]}),w("div",{className:He?"chisel-text-control chisel-context-row":"chisel-text-control chisel-context-row chisel-warning-row",children:[u("span",{className:"chisel-text-label",children:"Source"}),u("span",{className:He?"chisel-text-value":"chisel-warning",children:He?`Source hint: ${He}`:"Low-confidence source mapping"})]})]}):null,w("div",{className:"chisel-folder",children:[u("div",{className:"chisel-folder-header",children:u("div",{className:"chisel-folder-header-top",children:u("div",{className:"chisel-folder-title-row",children:u("span",{className:"chisel-folder-title",children:"Content"})})})}),u("div",{className:"chisel-folder-content",children:w("div",{className:"chisel-folder-inner",children:[w("label",{className:"chisel-text-control chisel-textarea-control",children:[u("span",{className:"chisel-text-label",children:"Text"}),u("textarea",{className:"chisel-text-input",value:f.textContent??"",onChange:l=>wt(l.target.value),disabled:!fa,rows:3})]}),fa?null:u("div",{className:"chisel-note-row",children:he>1?"Text editing is enabled for one element at a time.":"Text editing is enabled for simple text elements."})]})})]}),w("div",{className:"chisel-folder",children:[u("div",{className:"chisel-folder-header",children:u("div",{className:"chisel-folder-header-top",children:u("div",{className:"chisel-folder-title-row",children:u("span",{className:"chisel-folder-title",children:"Color"})})})}),u("div",{className:"chisel-folder-content",children:w("div",{className:"chisel-folder-inner",children:[u(ja,{label:"Text",value:f.style.color||Me(Ce?.color??"#000000"),onChange:l=>Fa("color",l),mixed:Ee("color")}),u(ja,{label:"Fill",value:f.style.backgroundImage||(Ce?.backgroundImage&&Ce.backgroundImage!=="none"?Ce.backgroundImage:f.style.backgroundColor||Me(Ce?.backgroundColor??"#ffffff")),onChange:(l,d)=>Fa("backgroundColor",l,d),supportsBackgroundImages:!0,unavailableAsset:ue.elements[de(f)]?.asset,mixed:Ee("backgroundColor")||Ee("backgroundImage")})]})})]}),w("div",{className:"chisel-folder",children:[u("div",{className:"chisel-folder-header",children:u("div",{className:"chisel-folder-header-top",children:u("div",{className:"chisel-folder-title-row",children:u("span",{className:"chisel-folder-title",children:"Style"})})})}),u("div",{className:"chisel-folder-content",children:w("div",{className:"chisel-folder-inner",children:[u(Gt,{value:Ce?.fontFamily??"",onChange:Ct,onPreview:St,mixed:Ee("fontFamily")}),Et.map(l=>u(Vt,{control:l,computedStyle:Ce,element:f,mixed:Ee(l.property),onSlide:d=>gt(l,d),onValueChange:d=>va(l,d)},l.cssProperty))]})})]}),w("div",{className:"chisel-folder",children:[u("div",{className:"chisel-folder-header",children:w("div",{className:"chisel-folder-header-top",children:[u("div",{className:"chisel-folder-title-row",children:u("span",{className:"chisel-folder-title",children:"Changes"})}),u("span",{className:"chisel-folder-count",children:_e.length})]})}),u("div",{className:"chisel-folder-content",children:u("div",{className:"chisel-folder-inner",children:_e.length?_e.map((l,d)=>w("div",{className:"chisel-text-control",children:[u("span",{className:"chisel-text-label",children:l.property}),u("strong",{className:"chisel-text-value",children:String(l.after)})]},`${l.property}-${d}`)):u("div",{className:"chisel-note-row",children:"No preview changes yet."})})})]}),w("div",{className:"chisel-actions",children:[u("button",{className:"chisel-button",type:"button",onClick:kt,children:"Reset"}),u("button",{className:"chisel-button chisel-button-primary",type:"button",onClick:yt,children:T?"Copied":"Copy agent prompt"})]}),T?u("div",{className:"chisel-note-row",role:"status",children:"Prompt copied"}):null,H?w("div",{className:"chisel-note-row",role:"alert",children:["Press Cmd+C/Ctrl+C",u("textarea",{ref:me,readOnly:!0,value:H,"aria-label":"Agent prompt copy fallback"})]}):null]}):w("div",{className:"chisel-empty",children:[u("div",{className:"chisel-note-row",children:"Select any visible element to edit its text and style preview."}),u("button",{className:"chisel-button",type:"button",ref:Je,onClick:Lt,"aria-pressed":re,children:"Pick element"})]})]})})})})]})}function Za({rect:e,tone:a}){return u("div",{className:`chisel-box chisel-box-${a}`,style:{transform:`translate3d(${e.left}px, ${e.top}px, 0)`,width:e.width,height:e.height}})}function Gt({value:e,onChange:a,onPreview:t,mixed:o=!1}){let[r,n]=p.useState(!1),i=p.useRef(null),c=p.useRef(null),f=p.useRef(e),g=p.useMemo(()=>io(e),[e]),S=no(e,g),A=o?"Mixed":S?.label??Ze(e)??"Font";p.useEffect(()=>{r||(f.current=e)},[r,e]),p.useEffect(()=>{if(!r)return;let k=T=>{let q=T.target;q instanceof Node&&i.current?.contains(q)||(t(f.current),n(!1),window.requestAnimationFrame(()=>c.current?.focus()))},P=T=>{T.key==="Escape"&&(t(f.current),n(!1),window.requestAnimationFrame(()=>c.current?.focus()))};return document.addEventListener("pointerdown",k,!0),document.addEventListener("keydown",P),()=>{document.removeEventListener("pointerdown",k,!0),document.removeEventListener("keydown",P)}},[r,t]);let M=()=>{if(r){t(f.current),n(!1);return}f.current=e,n(!0),window.requestAnimationFrame(()=>i.current?.querySelector('[role="option"][aria-selected="true"]')?.focus())},F=k=>{f.current=k.value,a(k.value),n(!1),window.requestAnimationFrame(()=>c.current?.focus())};return w("div",{className:"chisel-font-control",ref:i,children:[u("span",{className:"chisel-font-label",children:"Font"}),w("div",{className:"chisel-font-picker",children:[w("button",{className:"chisel-font-trigger",ref:c,type:"button","aria-expanded":r,"aria-haspopup":"listbox",onClick:M,children:[u("span",{className:"chisel-font-trigger-label",children:A}),u(Ae,{className:"chisel-chevron",size:16,strokeWidth:1.75,"aria-hidden":"true"})]}),r?u("div",{className:"chisel-preset-dropdown chisel-font-dropdown",role:"listbox","aria-label":"Font family",onKeyDown:ka,children:u("div",{className:"chisel-preset-list chisel-font-list",children:g.map(k=>u("button",{className:"chisel-preset-item chisel-font-item","data-active":ua(e,k.value),"aria-selected":ua(e,k.value),onClick:()=>F(k),onFocus:()=>t(k.value),onPointerEnter:()=>t(k.value),role:"option",style:{fontFamily:k.value},type:"button",children:u("span",{className:"chisel-preset-name",children:k.label})},k.value))})}):null]})]})}function ja({label:e,value:a,onChange:t,supportsBackgroundImages:o=!1,unavailableAsset:r,mixed:n=!1}){let i=lt(a),c=ga(a),f=o&&i?"Gradient":o&&(c!==void 0||r)?"Image":"Solid",g=i?.start??(c!==void 0?"#FFFFFF":rt(a)),[S,A]=p.useState(f),[M,F]=p.useState(()=>Fe(g)),[k,P]=p.useState(g),[T,q]=p.useState(i?.start??g),[H,ae]=p.useState(i?.end??"#FFFFFF"),[v,U]=p.useState("start"),[B,W]=p.useState(c??""),[G,K]=p.useState(""),[te,E]=p.useState(!1),[fe,oe]=p.useState(!1),re=p.useRef(null),le=p.useRef(null),$=S==="Gradient"?v==="start"?T:H:k,ee=Me($).toUpperCase(),m=mo($),I=p.useMemo(()=>uo(ba(ee)),[ee]),Z=n?"Mixed":S==="Gradient"?"Gradient":S==="Image"?"Image":k;p.useEffect(()=>{let s=lt(a),L=ga(a);if(o&&s){let D=v==="end"?s.end:s.start;A("Gradient"),q(s.start),ae(s.end),P(D),F(Fe(D)),E(!1);return}if(o&&L!==void 0){A("Image"),W(L),P("#FFFFFF"),E(!1);return}if(o&&r){A("Image"),W(""),K(""),E(!1);return}let b=rt(a);A("Solid"),P(D=>D&&Me(D)===Me(b)?D:b),F(Fe(b)),E(!1)},[v,o,r,a]),p.useEffect(()=>{if(!fe)return;let s=b=>{let D=b.target;D instanceof Node&&re.current?.contains(D)||(oe(!1),window.requestAnimationFrame(()=>le.current?.focus()))},L=b=>{b.key==="Escape"&&(oe(!1),window.requestAnimationFrame(()=>le.current?.focus()),b.preventDefault())};return document.addEventListener("pointerdown",s,!0),document.addEventListener("keydown",L),()=>{document.removeEventListener("pointerdown",s,!0),document.removeEventListener("keydown",L)}},[fe]);let j=s=>{let L=ot(s);if(!L){E(s.trim().length>0);return}let b=Te(L)??L;if(F(Fe(b)),P(b),E(!1),S==="Gradient"){Ie(v,b);return}t(b)},se=(s,L=m,b=M)=>{let D=po(s,L,b);if(P(D),E(!1),S==="Gradient"){Ie(v,D);return}t(D)},O=(s,L)=>{let b=Y((s.clientX-L.left)/L.width*100,0,100),D=Y((1-(s.clientY-L.top)/L.height)*100,0,100);se(ta(I.h,b,D))},N=(s,L)=>{let b=Y((s.clientX-L.left)/L.width*360,0,360);se(ta(b,I.s,I.v))},xe=(s,L)=>{let b=Y((s.clientX-L.left)/L.width,0,1);se(ee,b)},V=s=>{if(!ra(s.key))return;let L=s.shiftKey?10:1,b=Y(I.s+(s.key==="ArrowRight"?L:s.key==="ArrowLeft"?-L:0),0,100),D=Y(I.v+(s.key==="ArrowUp"?L:s.key==="ArrowDown"?-L:0),0,100);se(ta(I.h,b,D)),s.preventDefault()},ne=s=>{if(!ra(s.key))return;let L=s.shiftKey?10:1,b=Y(I.h+(Ca(s.key)?L:-L),0,360);se(ta(b,I.s,I.v)),s.preventDefault()},X=s=>{if(!ra(s.key))return;let L=s.shiftKey?.1:.01;se(ee,Y(m+(Ca(s.key)?L:-L),0,1)),s.preventDefault()},Je=s=>{F(s),se(ee,m,s)},Qe=s=>{if(!(s!=="Solid"&&!o)){if(A(s),s==="Solid"&&t(k),s==="Gradient"){let L=T||k;q(L),U("start"),P(L),t(oa(L,H))}s==="Image"&&B.trim()&&t(Re(B))}},me=s=>{let L=s==="start"?T:H;U(s),P(L),F(Fe(L)),E(!1)},Ie=(s,L)=>{let b=s==="start"?L:T,D=s==="end"?L:H;q(b),ae(D),t(oa(b,D))},ye=(s,L)=>{let b=ot(L);if(s==="start"?q(L):ae(L),U(s),P(L),!b){E(L.trim().length>0);return}let D=Te(b)??b;F(Fe(D)),P(D),E(!1),Ie(s,D)},Ue=s=>{W(s),K(""),t(s.trim()?Re(s):"")},ge=s=>{let L=s.currentTarget.files?.[0];if(!L)return;let b=URL.createObjectURL(L);K(L.name),W(b),t(Re(b),{fileName:L.name,mimeType:L.type,size:L.size})};return w("div",{className:"chisel-color-control","data-picker-open":fe,ref:re,children:[u("span",{className:"chisel-color-label",children:e}),w("span",{className:"chisel-color-inputs",children:[u("button",{className:"chisel-color-swatch",ref:le,"aria-expanded":fe,"aria-label":`${e} color picker`,onClick:()=>oe(s=>!s),style:{background:S==="Gradient"?oa(T,H):S==="Image"&&B?Re(B):k},type:"button"}),u("input",{className:"chisel-color-value-input","aria-label":`${e} color value`,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off","data-invalid":te,readOnly:S!=="Solid",spellCheck:!1,style:{width:`${Math.max(7.5,Math.min(Z.length+.5,18))}ch`},value:Z,onBlur:()=>{S==="Solid"&&j(k)},onChange:s=>{if(S!=="Solid")return;let L=s.target.value;P(L),j(L)},onKeyDown:s=>{s.key==="Enter"&&(s.preventDefault(),j(k),s.currentTarget.blur()),s.key==="Escape"&&(s.preventDefault(),P(g),E(!1),oe(!1),s.currentTarget.blur())}})]}),fe?w("div",{className:"chisel-color-popover",role:"dialog","aria-label":`${e} custom color picker`,children:[w("div",{className:"chisel-color-tabs",children:[Ht.map(s=>u("button",{className:"chisel-color-tab","data-active":S===s,"aria-disabled":s!=="Solid"&&!o,onClick:()=>Qe(s),type:"button",children:s},s)),u("button",{className:"chisel-color-close","aria-label":"Close color picker",onClick:()=>oe(!1),type:"button",children:"\xD7"})]}),S!=="Image"?w(We,{children:[S==="Gradient"?w(We,{children:[u("div",{className:"chisel-color-gradient-preview",style:{backgroundImage:oa(T,H)}}),w("div",{className:"chisel-color-stop-buttons",role:"group","aria-label":`${e} gradient endpoints`,children:[w("button",{className:"chisel-color-stop-button","data-active":v==="start","aria-label":`${e} gradient From`,onClick:()=>me("start"),type:"button",children:[u("span",{className:"chisel-color-stop-swatch",style:{background:T}}),u("span",{children:"From"})]}),w("button",{className:"chisel-color-stop-button","data-active":v==="end","aria-label":`${e} gradient To`,onClick:()=>me("end"),type:"button",children:[u("span",{className:"chisel-color-stop-swatch",style:{background:H}}),u("span",{children:"To"})]})]})]}):null,u("div",{className:"chisel-color-field",role:"slider",tabIndex:0,"aria-label":`${e} saturation and brightness`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":I.s,"aria-valuetext":`Saturation ${I.s}%, brightness ${I.v}%`,onKeyDown:V,onPointerDown:s=>{let L=s.currentTarget.getBoundingClientRect();O(s,L),s.currentTarget.setPointerCapture(s.pointerId)},onPointerMove:s=>{s.buttons&1&&O(s,s.currentTarget.getBoundingClientRect())},style:{backgroundColor:`hsl(${I.h} 100% 50%)`},children:u("span",{className:"chisel-color-field-cursor",style:{left:`clamp(10px, ${I.s}%, calc(100% - 10px))`,top:`clamp(10px, ${100-I.v}%, calc(100% - 10px))`,backgroundColor:ee}})}),u("div",{className:"chisel-color-hue",role:"slider",tabIndex:0,"aria-label":`${e} hue`,"aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":I.h,onKeyDown:ne,onPointerDown:s=>{let L=s.currentTarget.getBoundingClientRect();N(s,L),s.currentTarget.setPointerCapture(s.pointerId)},onPointerMove:s=>{s.buttons&1&&N(s,s.currentTarget.getBoundingClientRect())},children:u("span",{className:"chisel-color-hue-cursor",style:{left:`clamp(8px, ${I.h/360*100}%, calc(100% - 8px))`}})}),w("div",{className:"chisel-color-alpha",role:"slider",tabIndex:0,"aria-label":`${e} alpha`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(m*100),"aria-valuetext":`${Math.round(m*100)}%`,onKeyDown:X,onPointerDown:s=>{let L=s.currentTarget.getBoundingClientRect();xe(s,L),s.currentTarget.setPointerCapture(s.pointerId)},onPointerMove:s=>{s.buttons&1&&xe(s,s.currentTarget.getBoundingClientRect())},style:{"--chisel-alpha-color":ee},children:[u("span",{className:"chisel-color-alpha-fill",style:{width:`${m*100}%`}}),u("span",{className:"chisel-color-alpha-cursor",style:{left:`clamp(12px, ${m*100}%, calc(100% - 12px))`,backgroundColor:ct(ee,m)}})]}),w("div",{className:"chisel-color-format-row",children:[u("select",{className:"chisel-color-format-select","aria-label":`${e} color format`,value:M,onChange:s=>Je(s.target.value),children:Ot.map(s=>u("option",{value:s,children:s},s))}),u("input",{className:"chisel-color-format-input","aria-label":`${e} formatted color value`,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off","data-invalid":te,spellCheck:!1,value:k,onBlur:()=>j(k),onChange:s=>{let L=s.target.value;P(L),j(L)}})]})]}):null,S==="Gradient"?w(We,{children:[w("label",{className:"chisel-color-extra-row",children:[u("span",{children:"From"}),u("input",{"aria-label":`${e} gradient From value`,value:T,onFocus:()=>me("start"),onChange:s=>ye("start",s.target.value)})]}),w("label",{className:"chisel-color-extra-row",children:[u("span",{children:"To"}),u("input",{"aria-label":`${e} gradient To value`,value:H,onFocus:()=>me("end"),onChange:s=>ye("end",s.target.value)})]})]}):null,S==="Image"?w(We,{children:[w("label",{className:"chisel-color-extra-row",children:[u("span",{children:"URL"}),u("input",{"aria-label":`${e} image URL`,value:B,onChange:s=>Ue(s.target.value),placeholder:"https://..."})]}),w("label",{className:"chisel-color-upload-row",children:[u("span",{children:"Upload"}),u("span",{className:"chisel-color-upload-name",children:G||"Choose image"}),u("input",{"aria-label":`${e} image upload`,accept:"image/*",type:"file",onChange:ge})]}),r&&!B.startsWith("blob:")?w("div",{className:"chisel-note-row",role:"status",children:["Re-select this asset: ",r.fileName]}):null]}):null]}):null]})}function Vt({control:e,computedStyle:a,element:t,onSlide:o,onValueChange:r,mixed:n=!1}){let c=(a??getComputedStyle(t))[e.property],f=parseFloat(c),g=e.property==="width"?t.getBoundingClientRect().width:e.property==="height"?t.getBoundingClientRect().height:e.min,S=Number.isFinite(f)?f:g,A=Y(S,e.min,e.max),M=Ao(A,e.min,e.max),F=t.style[e.property],k=n?"Mixed":F||`${pe(S)}${e.unit}`,P=yo(k,e),[T,q]=p.useState(k),[H,ae]=p.useState(!1),[v,U]=p.useState(!1),[B,W]=p.useState(!1),G=p.useRef(null),K=p.useRef(null),te=p.useRef(!1),E=p.useMemo(()=>xo(e),[e]),fe={left:`max(5px, ${M}% - 9px)`,"--chisel-handle-opacity":M<18?"0.18":"1","--chisel-handle-scale":M<18?"0.25":"1"};p.useEffect(()=>{H||(q(k),U(!1))},[k,H]),p.useEffect(()=>{if(!B)return;let m=()=>{W(!1),window.requestAnimationFrame(()=>G.current?.focus())},I=j=>{j.target instanceof Node&&G.current?.parentElement?.contains(j.target)||m()},Z=j=>{j.key==="Escape"&&(m(),j.preventDefault())};return document.addEventListener("pointerdown",I,!0),document.addEventListener("keydown",Z),()=>{document.removeEventListener("pointerdown",I,!0),document.removeEventListener("keydown",Z)}},[B]);let oe=(m=T)=>{let I=da(m,e,t,P);if(!I){U(!0);return}q(I),U(!1),r(I)},re=()=>{G.current?.focus(),G.current?.select()},le=(m,I)=>{let Z=vo(m,I,e);q(`${pe(Z)}${e.unit}`),U(!1),o(Z)},$=()=>{E.length<=1||(W(!0),window.requestAnimationFrame(()=>G.current?.parentElement?.querySelector('[role="option"][aria-selected="true"]')?.focus()))},ee=m=>{let I=Io(T,m,e,t,P);if(!I){U(!0);return}q(I),U(!1),r(I),W(!1),G.current?.focus()};return w("div",{className:"chisel-slider","data-units-open":B,onDoubleClick:m=>{m.preventDefault(),m.stopPropagation(),$()},onClick:()=>{if(te.current){te.current=!1;return}window.setTimeout(re,0)},onMouseUp:()=>{te.current||window.setTimeout(re,0)},onPointerCancel:m=>{K.current?.pointerId===m.pointerId&&(K.current=null)},onPointerDown:m=>{m.preventDefault(),K.current={pointerId:m.pointerId,startX:m.clientX,rect:m.currentTarget.getBoundingClientRect(),dragging:!1},m.currentTarget.setPointerCapture(m.pointerId),window.setTimeout(re,0)},onPointerMove:m=>{let I=K.current;!I||I.pointerId!==m.pointerId||!I.dragging&&Math.abs(m.clientX-I.startX)<4||(I.dragging=!0,G.current?.blur(),m.preventDefault(),le(m.clientX,I.rect))},onPointerUp:m=>{let I=K.current;!I||I.pointerId!==m.pointerId||(I.dragging&&(te.current=!0,window.setTimeout(()=>{te.current=!1},250),le(m.clientX,I.rect)),I.dragging||window.setTimeout(re,0),K.current=null)},children:[u("span",{className:"chisel-slider-label",children:e.label}),u("span",{className:"chisel-slider-hashmarks","aria-hidden":"true",children:Array.from({length:9},(m,I)=>u("span",{className:"chisel-slider-hashmark",style:{left:`${(I+1)*10}%`}},I))}),u("span",{className:"chisel-slider-fill",style:{width:`${M}%`}}),u("span",{className:"chisel-slider-handle",style:fe}),u("input",{type:"range",tabIndex:-1,"aria-hidden":"true",min:e.min,max:e.max,step:e.step,value:A,onChange:m=>o(Number(m.target.value))}),u("input",{ref:G,className:"chisel-slider-value-input","aria-label":`${e.label} value`,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off","data-invalid":v,spellCheck:!1,value:T,onBlur:m=>{oe(),ae(!1),m.relatedTarget instanceof HTMLElement&&m.currentTarget.parentElement?.contains(m.relatedTarget)||W(!1)},onChange:m=>{let I=m.target.value;q(I);let Z=da(I,e,t,P);if(!Z){U(I.trim().length>0);return}U(!1),r(Z),Z!==I&&Lo(I)&&q(Z)},onFocus:m=>{ae(!0),m.currentTarget.select()},onMouseDown:m=>{window.setTimeout(()=>{m.currentTarget.focus(),m.currentTarget.select()},0)},onMouseUp:m=>{window.setTimeout(()=>{m.currentTarget.focus(),m.currentTarget.select()},0)},onDoubleClick:m=>{m.preventDefault(),m.stopPropagation(),$()},onKeyDown:m=>{if(m.key==="Enter"&&(m.preventDefault(),oe(),m.currentTarget.blur()),ra(m.key)){let I=Po(T,e,t,P,m.shiftKey?10:1,Ca(m.key));if(!I)return;m.preventDefault(),q(I),U(!1),r(I)}m.key==="Escape"&&(m.preventDefault(),q(k),U(!1),W(!1),m.currentTarget.blur())}}),B?u("div",{className:"chisel-unit-menu",role:"listbox","aria-label":`${e.label} units`,onKeyDown:ka,children:E.map(m=>u("button",{className:"chisel-unit-option","data-active":m===P,"aria-selected":m===P,onClick:I=>{I.preventDefault(),ee(m)},onPointerDown:I=>{I.preventDefault(),I.stopPropagation()},role:"option",type:"button",children:m||"unitless"},m||"unitless"))}):null]})}function zt(){return u("style",{children:`
+      ${Wa}
       .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-root :where(button, input, textarea, select) { margin: 0; font: inherit; color: inherit; text-transform: none; }
+      .chisel-root button { appearance: none; min-width: var(--chisel-ui-control); min-height: var(--chisel-ui-control); }
+      .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.55); --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: 40px; --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; height: 100dvh; z-index: 2147483647; pointer-events: none; font-family: var(--chisel-ui-font); color: var(--chisel-text-primary); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+      .chisel-root { color-scheme: light; --chisel-warning-color: #805b12; --chisel-danger-color: #8a1f1f; }
+      @media (prefers-color-scheme: dark) {
+        .chisel-root { color-scheme: dark; --chisel-warning-color: #e2c78c; --chisel-danger-color: #ffa5a5; --chisel-surface: #303030; --chisel-surface-hover: #393939; --chisel-surface-active: #41413e; --chisel-surface-subtle: #383838; --chisel-text-root: #e8e8e5; --chisel-text-section: #b4b4ae; --chisel-text-label: #b4b4ae; --chisel-text-focus: #efeee9; --chisel-text-primary: #e8e8e5; --chisel-text-secondary: #b4b4ae; --chisel-text-tertiary: #9b9b93; --chisel-border: #41413e; --chisel-border-hover: #62625b; --chisel-glass-bg: #262626; --chisel-shadow: 0 4px 20px #0003; }
+      }
+      .chisel-root {--chisel-surface:var(--chisel-ui-raised); --chisel-surface-hover:var(--chisel-ui-hover); --chisel-surface-active:var(--chisel-ui-selected); --chisel-surface-subtle:var(--chisel-ui-border); --chisel-text-root:var(--chisel-ui-text); --chisel-text-section:var(--chisel-ui-secondary); --chisel-text-label:var(--chisel-ui-secondary); --chisel-text-focus:var(--chisel-ui-text); --chisel-text-primary:var(--chisel-ui-text); --chisel-text-secondary:var(--chisel-ui-secondary); --chisel-text-tertiary:var(--chisel-ui-muted); --chisel-border:var(--chisel-ui-border); --chisel-border-hover:var(--chisel-ui-border-strong); --chisel-glass-bg:var(--chisel-ui-surface); --chisel-radius:var(--chisel-ui-radius); --chisel-row-height:var(--chisel-ui-control); --chisel-shadow:var(--chisel-ui-panel-shadow); --chisel-motion:var(--chisel-ui-motion);}
+      .chisel-inspection-layer { position: fixed; inset: 0; pointer-events: auto; touch-action: pan-y pinch-zoom; }
+      .chisel-visually-hidden { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
       .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-box-hover { border: 1px solid var(--chisel-ui-focus); background: color-mix(in srgb,var(--chisel-ui-focus) 8%,transparent); }
+      .chisel-box-selected { border: 2px solid var(--chisel-ui-focus); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92), 0 0 0 4px color-mix(in srgb,var(--chisel-ui-focus) 18%,transparent); }
+      .chisel-panel { position: fixed; top: max(16px, env(safe-area-inset-top)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); 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 { width: 280px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 12px 16px 0; border: 0; border-radius: 16px; background: var(--chisel-glass-bg); box-shadow: var(--chisel-ui-popover-shadow); 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 { border: 0; margin-bottom: 16px; padding-bottom: 0; }
       .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-panel-header { border: 0; margin-bottom: 16px; padding-bottom: 0; }
       .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; }
@@ -882,37 +39,41 @@ function ChiselStyles() {
       .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-folder:not(.chisel-folder-root) { border: 0; margin-top: 16px; margin-bottom: 0; padding-bottom: 0; }
+      .chisel-folder:not(.chisel-folder-root) + .chisel-folder:not(.chisel-folder-root) { margin-top: 16px; }
       .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-toolbar-add:hover, .chisel-preset-trigger:hover, .chisel-button:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); }
+      .chisel-toolbar-add:active, .chisel-preset-trigger:active, .chisel-button:active { transform: 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-chevron { width: 16px; height: 16px; flex-shrink: 0; margin-left: 8px; opacity: 0.72; 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(180deg); }
+      .chisel-preset-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2147483647; padding: 4px; border: 0; border-radius: 12px; background: var(--chisel-glass-bg); 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:hover { background: var(--chisel-surface-hover); }
       .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-context-row { background: transparent; padding-inline: 0; }
       .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-warning { color: var(--chisel-warning-color); 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::selection, .chisel-color-value-input::selection, .chisel-slider-value-input::selection { background: color-mix(in srgb,var(--chisel-ui-focus) 22%,transparent); 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-note-row { min-height: var(--chisel-row-height); display: flex; align-items: center; padding: 8px 0; border-radius: var(--chisel-radius); background: transparent; color: var(--chisel-text-tertiary); font-size: 12px; font-weight: 400; line-height: 1.5; }
+      .chisel-toolbar-add { background: transparent; }
+      .chisel-actions .chisel-button { background: transparent; }
+      .chisel-actions .chisel-button-primary { background: var(--chisel-ui-action); color: var(--chisel-ui-action-text); }
+      .chisel-actions .chisel-button-primary:hover { background: var(--chisel-ui-action); opacity: .9; }
       .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; }
@@ -924,15 +85,16 @@ function ChiselStyles() {
       .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-inputs { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; justify-content: flex-end; }
+      .chisel-root .chisel-color-swatch { position: relative; width: 24px; height: 24px; min-width:24px; min-height:24px; flex-shrink: 0; padding: 0; border: 0; border-radius: 4.5px; box-shadow: inset 0 0 0 1px var(--chisel-border); cursor: pointer; transition: transform var(--chisel-motion), box-shadow var(--chisel-motion); }
+      .chisel-color-swatch:after { content:""; position:absolute; inset:-8px; border-radius:inherit; }
+      @media(pointer:coarse) { .chisel-color-swatch:after { inset:-10px; } }
+      .chisel-color-control:hover .chisel-color-swatch { box-shadow: 0 0 0 2px var(--chisel-surface-hover); }
       .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-value-input[data-invalid="true"] { color: var(--chisel-danger-color); }
+      .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: 8px 12px 0; border-top: 1px solid var(--chisel-surface-subtle); animation: chisel-pop-in var(--chisel-motion); }
+      .chisel-color-tabs { min-height:40px; 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); }
@@ -950,21 +112,19 @@ function ChiselStyles() {
       .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:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); }
       .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-stop-swatch { width: 10.5px; height: 10.5px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--chisel-border-hover); border-radius: 3px; 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, .chisel-color-format-input { height: 40px; 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-format-input[data-invalid="true"] { color: var(--chisel-danger-color); }
       .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:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); }
       .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; }
@@ -972,17 +132,17 @@ function ChiselStyles() {
       .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-root .chisel-slider-value-input: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: var(--chisel-danger-color); }
       .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:hover .chisel-slider-hashmark { background: var(--chisel-surface-hover); }
       .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-menu { position: absolute; top: calc(100% + 4px); right: 6px; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(40px, 1fr)); gap: 2px; width: 186px; padding: 4px; border: 1px solid var(--chisel-border); border-radius: 10px; background: var(--chisel-glass-bg); 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:hover { background: var(--chisel-surface-hover); color: var(--chisel-text-primary); }
       .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); }
@@ -991,711 +151,43 @@ function ChiselStyles() {
         .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; }
+        .chisel-root { --chisel-row-height: 44px; }
+        .chisel-panel { top: auto; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-height: 58dvh; touch-action: pan-y; }
+        .chisel-panel-inner { width: 100%; max-height: 58dvh; }
+        .chisel-color-tab, .chisel-color-close, .chisel-color-stop-button, .chisel-color-format-select, .chisel-color-format-input, .chisel-color-extra-row, .chisel-color-upload-row, .chisel-unit-option { min-width: 44px; min-height: 44px; }
+        .chisel-color-tabs { min-height:40px; height: 44px; }
+        .chisel-color-hue, .chisel-color-alpha { height: 44px; }
+        .chisel-unit-menu { grid-template-columns: repeat(4, minmax(44px, 1fr)); width: 206px; }
       }
-    ` }));
-}
-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);
-}
+      @media (forced-colors: active) {
+        .chisel-panel-inner, .chisel-preset-dropdown, .chisel-color-popover { forced-color-adjust: auto; border: 1px solid CanvasText; background: Canvas; }
+        .chisel-box { border-color: Highlight; }
+      }
+    `})}function Wt(e,a){if(a.has(e))return;let t=getComputedStyle(e),o={};for(let r of Sa)o[r]=t[r];a.set(e,{text:e.textContent??"",styles:o})}function pa(e){return{id:`version-${e}`,name:`Version ${e}`,elements:{}}}function Xt(e){return Object.fromEntries(Object.entries(e).map(([a,t])=>[a,{...t,styles:{...t.styles}}]))}function Kt(){return{pathname:window.location.pathname,search:window.location.search}}function $t(e){Zt(),ea+=1;let a=()=>{st(),e()};return window.addEventListener(La,a),window.addEventListener("popstate",a),()=>{window.removeEventListener(La,a),window.removeEventListener("popstate",a),ea-=1,ea<=0&&(ea=0,la?.(),la=void 0)}}function Zt(){if(la)return;let e=window.history.pushState,a=window.history.replaceState,t=()=>{st(),window.setTimeout(()=>window.dispatchEvent(new Event(La)),0)},o=function(...i){let c=e.apply(this,i);return t(),c},r=function(...i){let c=a.apply(this,i);return t(),c};window.history.pushState=o,window.history.replaceState=r,la=()=>{window.history.pushState===o&&(window.history.pushState=e),window.history.replaceState===r&&(window.history.replaceState=a)}}function st(){let e=++$a;Ke=!0,window.setTimeout(()=>{$a===e&&(Ke=!1)},0)}function jt(e=ut(window.location.pathname,window.location.search)){return`vse:versions:${e}`}function Jt(e,a){return`vse:versions:${e}${a}`}function ut(e,a){let t=new URLSearchParams(a);t.delete("editor");let o=Array.from(t.entries()).sort(([n,i],[c,f])=>n===c?i.localeCompare(f):n.localeCompare(c)),r=new URLSearchParams(o).toString();return r?`${e}?${r}`:e}function Qt(e,a=e){try{let t=window.localStorage.getItem(e),o=t??(a===e?null:window.localStorage.getItem(a)),r=Xa(o);return r.envelope&&xa.set(e,r.envelope),t===null&&o!==null?{...r,migrated:!r.warning}:r}catch{return{envelope:xa.get(e),migrated:!1,warning:"Browser storage is unavailable. Edits will be kept for this session."}}}function Ja(e,a,t){let o=ca(a,t);xa.set(e,o);try{window.localStorage.setItem(e,JSON.stringify(o));return}catch{return"Browser storage is unavailable or full. Edits will be kept for this session."}}function de(e){return De(e)??$e(e)}function ke(e,a,t){let o=t.get(a);if(o?.element===e||o?.element.isConnected)return;let r={};for(let n of Sa)r[n]=e.style[n]??"";t.set(a,{element:e,selector:$e(e),sourceHint:De(e),text:e.textContent??"",styles:r})}function ce(e){let a=(Xe.get(e)??0)+1;Xe.set(e,a),window.setTimeout(()=>{Xe.get(e)===a&&Xe.delete(e)},0)}function aa(e,a,t,o,r=!0){if(r)for(let[n,i]of t){let c=i.element.isConnected?i.element:null;if(!c)continue;let f=a.map(S=>S.elements[n]).filter(Boolean);if(!f.length)continue;ce(c),f.some(S=>typeof S.text=="string")&&c.textContent!==i.text&&(c.textContent=i.text);let g=new Set(f.flatMap(S=>Object.keys(S.styles)));f.some(S=>S.asset)&&g.add("backgroundImage");for(let S of g){let A=i.styles[S]??"";c.style[S]!==A&&(c.style[S]=A)}}for(let[n,i]of Object.entries(e.elements)){let c=dt(i);if(c){ke(c,n,t),ce(c),typeof i.text=="string"&&c.textContent!==i.text&&(c.textContent=i.text);for(let[f,g]of Object.entries(i.styles))c.style[f]!==g&&(c.style[f]=g);if(i.asset){let f=o.get(be(e.id,n)),g=f?Re(f):"";c.style.backgroundImage!==g&&(c.style.backgroundImage=g)}}}}function _t(e,a,t){let o=e.get(a);e.set(a,t),o&&o!==t&&!Array.from(e.values()).includes(o)&&URL.revokeObjectURL(o)}function ma(e,a){let t=e.get(a);e.delete(a),t&&!Array.from(e.values()).includes(t)&&URL.revokeObjectURL(t)}function ha(e){for(let a of new Set(e.values()))URL.revokeObjectURL(a);e.clear()}function be(e,a){return`${e}:${a}`}function Qa(e,a,t){for(let[o,r]of Object.entries(e.elements)){let n=a.get(o);if(!n)continue;let i=n.element.isConnected?n.element:null;if(i){ce(i),typeof r.text=="string"&&i.textContent===r.text&&(i.textContent=n.text);for(let[c,f]of Object.entries(r.styles)){if(c==="backgroundImage"&&r.asset)continue;let g=n.styles[c]??"";Yt(c,i.style[c],f)&&(i.style[c]=g)}if(r.asset){let c=t.get(be(e.id,o));c&&i.style.backgroundImage===Re(c)&&(i.style.backgroundImage=n.styles.backgroundImage??"")}}}}function Yt(e,a,t){if(a===t)return!0;let o=document.createElement("div").style;return o[e]=t,o[e]===a}function dt(e){let a=e.sourceHint?wa(e.sourceHint):void 0;return _a(a)??_a(e.selector)}function _a(e){if(e)try{let a=document.querySelector(e);return a instanceof HTMLElement?a:void 0}catch{return}}function Ya(e,a){return e.includes(a)?e.filter(t=>t!==a):[...e,a]}function eo(e,a){let t=getComputedStyle(e),o=[],r=e.textContent??"";r!==a.text&&o.push({property:"textContent",before:a.text,after:r});for(let n of Sa){let i=a.styles[n],f=(e.style[n]??"")||t[n];sa(i)!==sa(f)&&o.push({property:n,before:i,after:f})}return o}function ao(e){if(!e)return[];let a=[];e.text!==void 0&&a.push({property:"textContent",before:null,after:e.text});for(let[t,o]of Object.entries(e.styles))a.push({property:t,before:null,after:o??""});return e.asset&&a.push({property:"localAsset",before:null,after:e.asset.fileName}),a}function to({projectName:e,element:a,snapshot:t,rect:o,selector:r,sourceHint:n,changes:i}){let c={route:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},element:{tagName:a.tagName.toLowerCase(),selector:r,ancestry:it(a),boundingRect:o,textBefore:t.text,textAfter:a.textContent??"",sourceHint:n},changes:i},f=!n&&!r.includes("[data-chisel-id")&&!r.includes("#");return[`You are editing ${e}. 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.",f?"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(c,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(`
+`)}function oo({projectName:e,version:a,baselines:t}){let o=Object.entries(a.elements).sort(([r],[n])=>r.localeCompare(n)).map(([r,n])=>{let i=t.get(r),c=dt(n);return{selector:n.selector,sourceHint:n.sourceHint,tagName:c?.tagName.toLowerCase(),ancestry:c?it(c):void 0,textBefore:i?.text,textAfter:n.text,asset:n.asset,styleChanges:Object.fromEntries(Object.entries(n.styles).map(([f,g])=>[f,{before:i?.styles[f]??null,after:g}]))}});return[`You are editing ${e}. 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:o},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(`
+`)}function De(e){let a=ft(e);if(a)return et(a)?a:void 0;let t=ro(e);if(t)return et(t)?t:void 0}function ro(e){let a=e.parentElement?.closest("[data-chisel-id], [data-ai-edit], [data-component]");if(!(!(a instanceof HTMLElement)||a===e))return ft(a)}function ft(e){return e.dataset.chiselId??e.dataset.aiEdit??e.dataset.component}function et(e){return document.querySelectorAll(wa(e)).length===1}function wa(e){let a=Ia(e);return`[data-chisel-id="${a}"], [data-ai-edit="${a}"], [data-component="${a}"]`}function $e(e){let a=De(e);if(a)return wa(a);if(e.id)return`#${Ia(e.id)}`;let t=[],o=e;for(;o&&o!==document.body&&t.length<5;){let r=o.tagName.toLowerCase(),n=Array.from(o.classList).filter(Boolean).slice(0,2);n.length&&(r+=n.map(c=>`.${Ia(c)}`).join(""));let i=o.parentElement;if(i){let c=o.tagName,f=Array.from(i.children).filter(g=>g.tagName===c);f.length>1&&(r+=`:nth-of-type(${f.indexOf(o)+1})`)}t.unshift(r),o=i}return t.join(" > ")}function it(e){let a=[],t=e;for(;t&&t!==document.body&&a.length<6;){let o=(t.textContent??"").trim().replace(/\s+/g," ").slice(0,80);a.push(`${t.tagName.toLowerCase()}${t.id?`#${t.id}`:""}${o?` "${o}"`:""}`),t=t.parentElement}return a}function ie(e){return{x:J(e.x),y:J(e.y),width:J(e.width),height:J(e.height),top:J(e.top),right:J(e.right),bottom:J(e.bottom),left:J(e.left)}}function Be(e){return!!e.closest("[data-chisel-root='true']")}function lo(e){let a=e.closest("[data-chisel-id], [data-ai-edit], [data-component]");return a instanceof HTMLElement?a:e}function so(){return Array.from(document.body.querySelectorAll("*")).filter(e=>{if(Be(e)||e.closest("nextjs-portal")||["script","style","link","meta","noscript"].includes(e.tagName.toLowerCase()))return!1;let a=e.getBoundingClientRect(),t=getComputedStyle(e);return a.width>0&&a.height>0&&t.display!=="none"&&t.visibility!=="hidden"})}function at(e){let a=De(e),t=a?`source hint ${a}`:`selector confidence ${e.id?"high":"low"}`,o=(e.textContent??"").trim().replace(/\s+/g," ").slice(0,60);return`${e.tagName.toLowerCase()}, ${t}${o?`, ${o}`:""}`}function ka(e){let a=Array.from(e.currentTarget.querySelectorAll('[role="option"]')).filter(r=>r.getAttribute("aria-disabled")!=="true");if(!a.length)return;let t=Math.max(0,a.indexOf(document.activeElement)),o;if(e.key==="ArrowDown"||e.key==="ArrowRight")o=(t+1)%a.length;else if(e.key==="ArrowUp"||e.key==="ArrowLeft")o=(t-1+a.length)%a.length;else if(e.key==="Home")o=0;else if(e.key==="End")o=a.length-1;else if(e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey){let r=a.find(n=>(n.textContent??"").trim().toLowerCase().startsWith(e.key.toLowerCase()));r&&(o=a.indexOf(r))}o!==void 0&&(a[o]?.focus(),e.preventDefault())}function tt(e){return!(e.children.length>0||Nt.has(e.tagName.toLowerCase()))}function Ia(e){return typeof CSS<"u"&&CSS.escape?CSS.escape(e):e.replace(/["\\#.:,[\]>~+*^$|= ]/g,"\\$&")}function Me(e){let a=Te(e);if(a)return a;let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(t)return`#${[t[1],t[2],t[3]].map(n=>Number(n).toString(16).padStart(2,"0")).join("")}`;let o=nt(e);if(!o||o===e)return"#ffffff";let r=o.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);return r?`#${[r[1],r[2],r[3]].map(n=>Number(n).toString(16).padStart(2,"0")).join("")}`:"#ffffff"}function nt(e){if(typeof document>"u")return;let a=document.createElement("span");if(a.style.color=e,!a.style.color)return;a.style.position="absolute",a.style.visibility="hidden",document.body.appendChild(a);let t=getComputedStyle(a).color;return a.remove(),t}function Te(e){let a=e.trim(),t=a.match(/^#([0-9a-f]{3})$/i);if(t)return`#${t[1].split("").map(o=>`${o}${o}`).join("")}`.toUpperCase();if(/^#[0-9a-f]{6}$/i.test(a))return a.toUpperCase()}function ba(e){let t=(Te(e)??"#FFFFFF").slice(1);return{r:Number.parseInt(t.slice(0,2),16),g:Number.parseInt(t.slice(2,4),16),b:Number.parseInt(t.slice(4,6),16)}}function uo({r:e,g:a,b:t}){let o=e/255,r=a/255,n=t/255,i=Math.max(o,r,n),c=Math.min(o,r,n),f=i-c,g=0;return f!==0&&(i===o?g=(r-n)/f%6:i===r?g=(n-o)/f+2:g=(o-r)/f+4),g=Math.round(g*60),g<0&&(g+=360),{h:g,s:i===0?0:J(f/i*100),v:J(i*100)}}function fo({r:e,g:a,b:t}){let o=e/255,r=a/255,n=t/255,i=Math.max(o,r,n),c=Math.min(o,r,n),f=(i+c)/2,g=i-c;if(g===0)return{h:0,s:0,l:Math.round(f*100)};let S=g/(1-Math.abs(2*f-1)),A=0;return i===o?A=(r-n)/g%6:i===r?A=(n-o)/g+2:A=(o-r)/g+4,A=Math.round(A*60),A<0&&(A+=360),{h:A,s:Math.round(S*100),l:Math.round(f*100)}}function ta(e,a,t){let o=t/100*(a/100),r=o*(1-Math.abs(e/60%2-1)),n=t/100-o,i=Math.floor(e/60)%6;return`#${([[o,r,0],[r,o,0],[0,o,r],[0,r,o],[r,0,o],[o,0,r]][i]??[o,0,r]).map(f=>Math.round((f+n)*255).toString(16).padStart(2,"0")).join("")}`.toUpperCase()}function sa(e){return(e??"").replace(/\s+/g," ").trim()}function Ze(e){return e.split(",")[0]?.replace(/^["']|["']$/g,"").trim()}function io(e){let a=[],t=new Set,o=r=>{let n=Ze(r.value)?.toLowerCase()??r.label.toLowerCase();t.has(n)||(t.add(n),a.push(r))};for(let r of Ut)o(r);if(e&&!a.some(r=>ua(e,r.value))){let r=Ze(e);r&&a.unshift({label:r,value:e})}return a}function no(e,a){return a.find(t=>ua(e,t.value))}function ua(e,a){let t=Ze(e)?.toLowerCase(),o=Ze(a)?.toLowerCase();return t&&o&&t===o?!0:sa(e)===sa(a)}function ot(e){let a=e.trim();if(a&&qe("color",a))return a}function rt(e){return Te(e)??e}function lt(e){let a=e.trim();if(!a.toLowerCase().startsWith("linear-gradient(")||!a.endsWith(")"))return;let t=a.slice(a.indexOf("(")+1,-1),o=co(t);if(!(o.length<3))return{start:o[1].trim(),end:o.slice(2).join(", ").trim()}}function ga(e){let a=e.trim();if(!a.toLowerCase().startsWith("url(")||!a.endsWith(")"))return;let t=a.slice(a.indexOf("(")+1,-1).trim(),o=t[0];return(o==='"'||o==="'")&&t.endsWith(o)&&(t=t.slice(1,-1)),t.replace(/\\(["'\\])/g,"$1")}function co(e){let a=[],t="",o=0,r;for(let n=0;n<e.length;n+=1){let i=e[n],c=e[n-1];if(r){t+=i,i===r&&c!=="\\"&&(r=void 0);continue}if(i==='"'||i==="'"){r=i,t+=i;continue}if(i==="("&&(o+=1),i===")"&&(o=Math.max(0,o-1)),i===","&&o===0){a.push(t.trim()),t="";continue}t+=i}return t.trim()&&a.push(t.trim()),a}function Fe(e){let a=e.trim().toLowerCase();return a.startsWith("hsl")?"HSL":a.startsWith("rgba")?"RGBA":a.startsWith("rgb")?"RGB":"Hex"}function po(e,a,t){let o=(Te(e)??Me(e)).toUpperCase(),{r,g:n,b:i}=ba(o);if(t==="RGB")return`rgb(${r}, ${n}, ${i})`;if(t==="RGBA")return ct(o,a);if(t==="HSL"){let{h:c,s:f,l:g}=fo({r,g:n,b:i});return a<1?`hsl(${c} ${f}% ${g}% / ${pe(a)})`:`hsl(${c} ${f}% ${g}%)`}return o}function mo(e){let t=(nt(e)??e).match(/rgba?\([^,]+,\s*[^,]+,\s*[^,]+(?:,\s*([^)]+))?\)/i);if(!t?.[1])return 1;let o=Number.parseFloat(t[1]);return Number.isFinite(o)?Y(o,0,1):1}function ct(e,a){let{r:t,g:o,b:r}=ba(e);return`rgba(${t}, ${o}, ${r}, ${pe(a)})`}function oa(e,a){return`linear-gradient(135deg, ${e}, ${a})`}function Re(e){return`url("${e.trim().replace(/["\\]/g,"\\$&")}")`}function ho(e){return e.startsWith("linear-gradient(")||e.startsWith("url(")}function da(e,a,t,o=a.unit){let r=e.trim();if(!r)return;let i=wo(r,t)??ko(r,a,o);if(qe(a.cssProperty,i))return i}function qe(e,a){return typeof CSS>"u"||typeof CSS.supports!="function"?!0:CSS.supports(e,a)}function Lo(e){return/^-?(?:\d+|\d*\.\d+)(px|rem|em)(px|rem|em)$/i.test(e.trim())}function xo(e){let a=[];qe(e.cssProperty,"1")&&a.push("");for(let t of qt)qe(e.cssProperty,`1${t}`)&&a.push(t);return a}function Io(e,a,t,o,r){let n=da(e,t,o,r);if(!n)return;let i=go(n);if(!i)return;if(i.unit===a)return n;let c=Co(i.value,i.unit,t,o);if(c===void 0)return;let f=So(c,a,t,o);if(f===void 0)return;let g=a?`${pe(J(f))}${a}`:pe(J(f));return qe(t.cssProperty,g)?g:void 0}function go(e){let a=e.trim().match(/^(-?(?:\d+|\d*\.\d+))([a-z%]*)$/i);if(!a)return;let t=Number(a[1]);if(Number.isFinite(t))return{value:t,unit:a[2].toLowerCase()}}function Co(e,a,t,o){if(!a)return t.cssProperty==="line-height"?e*pt(o):t.cssProperty==="opacity"?e:void 0;let r=je(a,o,t);return r===void 0?void 0:e*r}function So(e,a,t,o){if(!a)return t.cssProperty==="line-height"?e/pt(o):t.cssProperty==="opacity"?e:void 0;let r=je(a,o,t);return r===void 0||r===0?void 0:e/r}function wo(e,a){let t=e.match(/^(-?(?:\d+|\d*\.\d+))(px|rem|em)(px|rem|em)$/i);if(!t)return;let o=Number(t[1]),r=t[2].toLowerCase(),n=t[3].toLowerCase();if(!Number.isFinite(o)||r===n)return;let i=je(r,a),c=je(n,a);if(!i||!c)return;let g=o*i/c;return`${pe(J(g))}${n}`}function ko(e,a,t){return!bo(e)||!t||qe(a.cssProperty,e)&&a.unit===""?e:`${e}${t}`}function bo(e){return/^-?(?:\d+|\d*\.\d+)$/.test(e)}function yo(e,a){return e.trim().match(/(-?(?:\d+|\d*\.\d+))([a-z%]+)$/i)?.[2]??a.unit}function ra(e){return e==="ArrowUp"||e==="ArrowRight"||e==="ArrowDown"||e==="ArrowLeft"}function Ca(e){return e==="ArrowUp"||e==="ArrowRight"}function Po(e,a,t,o,r,n){let i=e.trim().match(/^(-?(?:\d+|\d*\.\d+))([a-z%]*)$/i);if(!i)return;let c=Number(i[1]);if(!Number.isFinite(c))return;let f=i[2]||o,g=J(c+(n?r:-r)),S=f?`${pe(g)}${f}`:pe(g);return da(S,a,t,f)}function je(e,a,t){if(e==="px")return 1;if(e==="rem"){let o=parseFloat(getComputedStyle(document.documentElement).fontSize);return Number.isFinite(o)&&o>0?o:16}if(e==="em"){let o=t?.cssProperty==="font-size"?a.parentElement??a:a,r=parseFloat(getComputedStyle(o).fontSize);return Number.isFinite(r)&&r>0?r:je("rem",a)}}function pt(e){let a=parseFloat(getComputedStyle(e).fontSize);return Number.isFinite(a)&&a>0?a:16}function Y(e,a,t){return Math.min(t,Math.max(a,e))}function Ao(e,a,t){return t<=a?0:Y((e-a)/(t-a)*100,0,100)}function vo(e,a,t){let o=a.width>0?Y((e-a.left)/a.width,0,1):0,r=t.min+o*(t.max-t.min);return Fo(r,t.step,t.min)}function Fo(e,a,t){if(a<=0)return e;let o=Math.round((e-t)/a)*a+t,r=String(a).includes(".")?String(a).split(".")[1].length:0;return Number(o.toFixed(r))}function J(e){return Math.round(e*100)/100}function pe(e){return Number.isInteger(e)?String(e):e.toFixed(2)}export{wr as Chisel,Sr as EditableRegion};
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils/toKebabCase.mjs:
+lucide-react/dist/esm/shared/src/utils/toLucideIconData.mjs:
+lucide-react/dist/esm/shared/src/utils/toCamelCase.mjs:
+lucide-react/dist/esm/shared/src/utils/toPascalCase.mjs:
+lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs:
+lucide-react/dist/esm/shared/src/build/defaultAttributes.mjs:
+lucide-react/dist/esm/shared/src/build/buildLucideIconNode.mjs:
+lucide-react/dist/esm/shared/src/build/buildLucideIconForReact.mjs:
+lucide-react/dist/esm/shared/src/utils/hasA11yProp.mjs:
+lucide-react/dist/esm/context.mjs:
+lucide-react/dist/esm/Icon.mjs:
+lucide-react/dist/esm/createLucideIcon.mjs:
+lucide-react/dist/esm/icons/chevron-down.mjs:
+lucide-react/dist/esm/icons/plus.mjs:
+lucide-react/dist/esm/icons/x.mjs:
+lucide-react/dist/esm/lucide-react.mjs:
+  (**
+   * @license lucide-react v1.61.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/