@agent-native/core 0.85.7 → 0.86.1

package/dist/client/visual-style-controls.js

@@ -0,0 +1,499 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconColorPicker } from "@tabler/icons-react";
+import { useEffect, useId, useRef, useState, } from "react";
+import { Popover, PopoverContent, PopoverTrigger, } from "./components/ui/popover.js";
+import { cn } from "./utils.js";
+function clampNumber(value, min, max) {
+    let next = value;
+    if (typeof min === "number")
+        next = Math.max(min, next);
+    if (typeof max === "number")
+        next = Math.min(max, next);
+    return next;
+}
+function formatNumber(value, unit) {
+    const rounded = Number.isInteger(value) ? value : Number(value.toFixed(2));
+    return unit ? `${rounded}${unit}` : String(rounded);
+}
+function parseDraftNumber(value, fallback) {
+    const match = value.trim().match(/-?\d+(?:\.\d+)?/);
+    if (!match)
+        return fallback;
+    const next = Number(match[0]);
+    return Number.isFinite(next) ? next : fallback;
+}
+const CHECKERBOARD_IMAGE = "linear-gradient(45deg, #d4d4d4 25%, transparent 25%), linear-gradient(-45deg, #d4d4d4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d4 75%), linear-gradient(-45deg, transparent 75%, #d4d4d4 75%)";
+const FALLBACK_RGBA = { r: 0, g: 0, b: 0, a: 1 };
+function normalizeRgba(color) {
+    return {
+        r: clamp(color.r, 0, 255),
+        g: clamp(color.g, 0, 255),
+        b: clamp(color.b, 0, 255),
+        a: clampFloat(color.a, 0, 1),
+    };
+}
+function normalizeHexColor(value) {
+    const trimmed = value.trim();
+    if (/^#[0-9a-f]{6}$/i.test(trimmed))
+        return trimmed.toUpperCase();
+    if (/^[0-9a-f]{6}$/i.test(trimmed))
+        return `#${trimmed}`.toUpperCase();
+    if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+        return `#${trimmed
+            .slice(1)
+            .split("")
+            .map((char) => char + char)
+            .join("")}`.toUpperCase();
+    }
+    if (/^[0-9a-f]{3}$/i.test(trimmed)) {
+        return `#${trimmed
+            .split("")
+            .map((char) => char + char)
+            .join("")}`.toUpperCase();
+    }
+    return null;
+}
+function parseCssColor(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const normalizedHex = normalizeHexColor(trimmed);
+    if (normalizedHex) {
+        return normalizeRgba({
+            r: Number.parseInt(normalizedHex.slice(1, 3), 16),
+            g: Number.parseInt(normalizedHex.slice(3, 5), 16),
+            b: Number.parseInt(normalizedHex.slice(5, 7), 16),
+            a: 1,
+        });
+    }
+    const rgb = trimmed.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)(?:\s*,\s*([0-9.]+%?))?/i);
+    if (rgb) {
+        return normalizeRgba({
+            r: Number(rgb[1]),
+            g: Number(rgb[2]),
+            b: Number(rgb[3]),
+            a: parseAlpha(rgb[4]),
+        });
+    }
+    const lower = trimmed.toLowerCase();
+    if (lower === "transparent" || lower === "rgba(0, 0, 0, 0)") {
+        return { r: 0, g: 0, b: 0, a: 0 };
+    }
+    return null;
+}
+function channelToHex(value) {
+    return clamp(value, 0, 255).toString(16).padStart(2, "0");
+}
+function rgbaToHex(color) {
+    const normalized = normalizeRgba(color);
+    return `#${channelToHex(normalized.r)}${channelToHex(normalized.g)}${channelToHex(normalized.b)}`.toUpperCase();
+}
+function rgbaToCss(color) {
+    const normalized = normalizeRgba(color);
+    if (normalized.a >= 1)
+        return rgbaToHex(normalized);
+    return `rgba(${normalized.r}, ${normalized.g}, ${normalized.b}, ${trimNumber(normalized.a)})`;
+}
+function parseAlpha(value) {
+    if (!value)
+        return 1;
+    if (value.endsWith("%"))
+        return Number(value.slice(0, -1)) / 100;
+    return Number(value);
+}
+function trimNumber(value) {
+    return Number(value.toFixed(2)).toString();
+}
+function rgbaToHsv(color) {
+    const normalized = normalizeRgba(color);
+    const r = normalized.r / 255;
+    const g = normalized.g / 255;
+    const b = normalized.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+        if (max === r)
+            h = ((g - b) / delta) % 6;
+        else if (max === g)
+            h = (b - r) / delta + 2;
+        else
+            h = (r - g) / delta + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return {
+        h: Math.round(h),
+        s: max === 0 ? 0 : Math.round((delta / max) * 100),
+        v: Math.round(max * 100),
+        a: normalized.a,
+    };
+}
+function hsvToRgba(color) {
+    const h = ((color.h % 360) + 360) % 360;
+    const s = clampFloat(color.s, 0, 100) / 100;
+    const v = clampFloat(color.v, 0, 100) / 100;
+    const chroma = v * s;
+    const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - chroma;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h < 60)
+        [r, g, b] = [chroma, x, 0];
+    else if (h < 120)
+        [r, g, b] = [x, chroma, 0];
+    else if (h < 180)
+        [r, g, b] = [0, chroma, x];
+    else if (h < 240)
+        [r, g, b] = [0, x, chroma];
+    else if (h < 300)
+        [r, g, b] = [x, 0, chroma];
+    else
+        [r, g, b] = [chroma, 0, x];
+    return normalizeRgba({
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+        a: clampFloat(color.a, 0, 1),
+    });
+}
+function clamp(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.max(min, Math.min(max, Math.round(value)));
+}
+function clampFloat(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.max(min, Math.min(max, value));
+}
+function swatchBackground(value) {
+    if (value === "transparent" || value === "rgba(0, 0, 0, 0)") {
+        return {
+            background: CHECKERBOARD_IMAGE,
+            backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0",
+            backgroundSize: "8px 8px",
+        };
+    }
+    return { background: value };
+}
+export function VisualInspectorPanel({ title, subtitle, children, className, headerAction, }) {
+    return (_jsxs("aside", { className: cn("w-64 overflow-hidden rounded-xl border border-border bg-card/95 text-card-foreground shadow-2xl shadow-black/35 backdrop-blur", className), children: [_jsxs("div", { className: "flex min-h-10 items-start justify-between gap-2 border-b border-border/70 px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }), subtitle && (_jsx("div", { className: "mt-0.5 truncate text-[12px] text-foreground", children: subtitle }))] }), headerAction] }), _jsx("div", { className: "max-h-[min(680px,calc(100vh-7rem))] overflow-y-auto p-2", children: children })] }));
+}
+export function VisualInspectorSection({ title, children, className, }) {
+    return (_jsxs("section", { className: cn("rounded-lg px-1.5 py-2", className), children: [_jsx("div", { className: "mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/75", children: title }), _jsx("div", { className: "space-y-2", children: children })] }));
+}
+export function VisualControlRow({ label, children, className, }) {
+    return (_jsxs("div", { className: cn("grid gap-1", className), children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: label }), children] }));
+}
+export function VisualSwatchControl({ options, value, onChange, columns = 8, className, }) {
+    return (_jsx("div", { className: cn("grid gap-1.5", className), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: options.map((option) => {
+            const swatch = option.color ?? option.value;
+            const isTransparent = swatch === "transparent";
+            return (_jsx("button", { type: "button", title: option.label, "aria-label": option.label, onClick: () => onChange(option.value), className: cn("size-5 cursor-pointer rounded-md border border-border/70 transition-all hover:scale-105 hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", value === option.value &&
+                    "border-foreground/70 ring-2 ring-foreground/40 ring-offset-1 ring-offset-card"), style: {
+                    background: isTransparent
+                        ? "linear-gradient(45deg, hsl(var(--muted)) 25%, transparent 25%), linear-gradient(-45deg, hsl(var(--muted)) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(var(--muted)) 75%), linear-gradient(-45deg, transparent 75%, hsl(var(--muted)) 75%)"
+                        : swatch,
+                    backgroundPosition: isTransparent
+                        ? "0 0, 0 4px, 4px -4px, -4px 0"
+                        : undefined,
+                    backgroundSize: isTransparent ? "8px 8px" : undefined,
+                } }, `${option.value}-${option.label}`));
+        }) }));
+}
+export function VisualColorPicker({ label, value, onChange, documentColors = [], allowTransparent = false, hexLabel = "Hex", documentColorsLabel = "Document colors", transparentLabel = "Transparent", className, }) {
+    const [open, setOpen] = useState(false);
+    const color = parseCssColor(value) ?? FALLBACK_RGBA;
+    const colorHex = rgbaToHex(color);
+    const [draft, setDraft] = useState(colorHex.replace(/^#/, ""));
+    const [picking, setPicking] = useState(false);
+    const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
+    useEffect(() => {
+        if (!open)
+            setDraft(colorHex.replace(/^#/, ""));
+    }, [colorHex, open]);
+    const commitDraft = (nextDraft = draft) => {
+        const normalized = normalizeHexColor(nextDraft);
+        if (!normalized) {
+            setDraft(colorHex.replace(/^#/, ""));
+            return;
+        }
+        setDraft(normalized.replace(/^#/, ""));
+        onChange(normalized);
+    };
+    const emitHsv = (nextHsv) => {
+        const nextColor = hsvToRgba({ ...nextHsv, a: color.a });
+        const nextValue = rgbaToCss(nextColor);
+        setDraft(rgbaToHex(nextColor).replace(/^#/, ""));
+        onChange(nextValue);
+    };
+    const pickScreenColor = async () => {
+        if (!hasEyeDropper || picking)
+            return;
+        try {
+            setPicking(true);
+            const EyeDropperCtor = window.EyeDropper;
+            if (!EyeDropperCtor)
+                return;
+            const result = await new EyeDropperCtor().open();
+            if (result?.sRGBHex) {
+                const next = normalizeHexColor(result.sRGBHex);
+                if (next) {
+                    setDraft(next.replace(/^#/, ""));
+                    onChange(next);
+                }
+            }
+        }
+        finally {
+            setPicking(false);
+        }
+    };
+    const uniqueDocumentColors = Array.from(new Set(documentColors
+        .map((color) => color === "transparent" ? color : normalizeHexColor(color))
+        .filter(Boolean))).slice(0, 16);
+    const displayValue = value === "transparent" || color.a === 0
+        ? transparentLabel
+        : colorHex.replace(/^#/, "");
+    const hsv = rgbaToHsv(color);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": label, className: cn("flex h-7 w-full cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background/70 px-2 text-[11px] shadow-none transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: [_jsx("span", { className: "size-4 shrink-0 rounded-[3px] border border-border/70", style: swatchBackground(value) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left font-medium tabular-nums text-foreground", children: displayValue }), _jsx("span", { "aria-hidden": "true", className: "size-0 border-x-[4px] border-t-[5px] border-x-transparent border-t-muted-foreground/70" })] }) }), _jsx(PopoverContent, { side: "left", align: "start", sideOffset: 8, className: "z-[10000] w-[252px] p-0 text-[11px] shadow-xl", onFocusOutside: (event) => event.preventDefault(), children: _jsxs("div", { className: "rounded-md bg-popover text-popover-foreground", children: [_jsx(VisualSaturationBrightnessField, { hsv: hsv, label: label, onChange: emitHsv }), _jsx("div", { className: "mt-2.5 px-3", children: _jsxs("div", { className: "grid grid-cols-[1.5rem_1fr] items-center gap-x-2", children: [_jsx("div", { className: "flex items-center justify-center", children: _jsx("button", { type: "button", "aria-label": label, disabled: !hasEyeDropper || picking, onClick: () => void pickScreenColor(), className: cn("flex size-6 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", (!hasEyeDropper || picking) &&
+                                                "pointer-events-none opacity-40", picking &&
+                                                "bg-primary/10 text-primary ring-1 ring-primary/50"), children: _jsx(IconColorPicker, { className: "size-4" }) }) }), _jsx(VisualColorTrack, { label: label, value: hsv.h, min: 0, max: 360, backgroundImage: "linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)", onChange: (nextHue) => emitHsv({ ...hsv, h: nextHue === 360 ? 0 : nextHue }) }), _jsx("span", { className: "mt-2 size-[18px] shrink-0 rounded-[3px] border border-border/60", style: swatchBackground(rgbaToCss(color)) }), _jsx(VisualColorTrack, { label: transparentLabel, value: Math.round(color.a * 100), min: 0, max: 100, backgroundImage: `${CHECKERBOARD_IMAGE}, linear-gradient(90deg, rgba(${color.r}, ${color.g}, ${color.b}, 0), rgba(${color.r}, ${color.g}, ${color.b}, 1))`, backgroundSize: "8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%", backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0, 0 0", onChange: (nextOpacity) => {
+                                            const nextColor = normalizeRgba({
+                                                ...color,
+                                                a: nextOpacity / 100,
+                                            });
+                                            const nextValue = rgbaToCss(nextColor);
+                                            setDraft(rgbaToHex(nextColor).replace(/^#/, ""));
+                                            onChange(nextValue);
+                                        } })] }) }), _jsxs("div", { className: "mt-2.5 grid grid-cols-[4.5rem_1fr] items-center gap-1 border-b border-border/70 px-3 pb-3", children: [_jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: hexLabel }), _jsx("input", { value: draft, spellCheck: false, onChange: (event) => setDraft(event.currentTarget.value), onFocus: (event) => event.currentTarget.select(), onBlur: () => commitDraft(), onKeyDown: (event) => {
+                                        if (event.key === "Enter") {
+                                            event.preventDefault();
+                                            commitDraft();
+                                            event.currentTarget.blur();
+                                        }
+                                        if (event.key === "Escape") {
+                                            event.preventDefault();
+                                            setDraft(colorHex.replace(/^#/, ""));
+                                            event.currentTarget.blur();
+                                        }
+                                    }, className: "h-6 min-w-0 rounded-md border border-input bg-background/70 px-2 text-right text-[11px] uppercase tabular-nums outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring" })] }), (allowTransparent || uniqueDocumentColors.length > 0) && (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx("div", { className: "mb-2 flex h-5 items-center justify-between text-[11px] text-muted-foreground", children: _jsx("span", { children: documentColorsLabel }) }), _jsxs("div", { className: "grid grid-cols-8 gap-1", children: [allowTransparent && (_jsx("button", { type: "button", "aria-label": transparentLabel, "aria-pressed": value === "transparent", className: cn("size-5 cursor-pointer rounded-sm border transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", value === "transparent" || color.a === 0
+                                                ? "border-primary ring-1 ring-primary"
+                                                : "border-border/60"), style: swatchBackground("transparent"), onClick: () => {
+                                                setDraft(colorHex.replace(/^#/, ""));
+                                                onChange("transparent");
+                                            } })), uniqueDocumentColors.map((color) => (_jsx("button", { type: "button", title: color, "aria-label": color, "aria-pressed": colorHex === color, className: cn("size-5 cursor-pointer rounded-sm border transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", colorHex === color
+                                                ? "border-primary ring-1 ring-primary"
+                                                : "border-border/60"), style: swatchBackground(color), onClick: () => {
+                                                setDraft(color);
+                                                onChange(color);
+                                            } }, color)))] })] }))] }) })] }));
+}
+function VisualSaturationBrightnessField({ hsv, label, onChange, }) {
+    const fieldRef = useRef(null);
+    const draggingRef = useRef(false);
+    const hueColor = rgbaToCss(hsvToRgba({ h: hsv.h, s: 100, v: 100, a: 1 }));
+    const updateFromPointer = (event) => {
+        const rect = fieldRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        onChange({
+            ...hsv,
+            s: clamp(((event.clientX - rect.left) / rect.width) * 100, 0, 100),
+            v: clamp(100 - ((event.clientY - rect.top) / rect.height) * 100, 0, 100),
+        });
+    };
+    const stepWithKeyboard = (event) => {
+        const step = event.shiftKey ? 10 : 1;
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            onChange({ ...hsv, s: clamp(hsv.s + step, 0, 100) });
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            onChange({ ...hsv, s: clamp(hsv.s - step, 0, 100) });
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            onChange({ ...hsv, v: clamp(hsv.v + step, 0, 100) });
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            onChange({ ...hsv, v: clamp(hsv.v - step, 0, 100) });
+        }
+    };
+    return (_jsx("div", { ref: fieldRef, tabIndex: 0, "aria-label": label, onPointerDown: (event) => {
+            draggingRef.current = true;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            updateFromPointer(event);
+        }, onPointerMove: (event) => {
+            if (!draggingRef.current)
+                return;
+            updateFromPointer(event);
+        }, onPointerUp: (event) => {
+            draggingRef.current = false;
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+        }, onPointerCancel: () => {
+            draggingRef.current = false;
+        }, onKeyDown: stepWithKeyboard, className: "relative h-40 w-full cursor-crosshair overflow-hidden rounded-t-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset active:cursor-grabbing", style: {
+            backgroundImage: `linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, ${hueColor} 100%)`,
+        }, children: _jsx("span", { className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_hsl(var(--foreground)/0.6)]", style: {
+                left: `${hsv.s}%`,
+                top: `${100 - hsv.v}%`,
+            } }) }));
+}
+function VisualColorTrack({ label, value, min, max, backgroundImage, backgroundSize, backgroundPosition, onChange, }) {
+    const trackRef = useRef(null);
+    const draggingRef = useRef(false);
+    const percent = ((value - min) / (max - min)) * 100;
+    const updateFromPointer = (event) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const next = min + ((event.clientX - rect.left) / rect.width) * (max - min);
+        onChange(clamp(next, min, max));
+    };
+    const stepWithKeyboard = (event) => {
+        const step = event.shiftKey ? 10 : 1;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+            event.preventDefault();
+            onChange(clamp(value + step, min, max));
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+            event.preventDefault();
+            onChange(clamp(value - step, min, max));
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            onChange(min);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            onChange(max);
+        }
+    };
+    return (_jsx("div", { ref: trackRef, role: "slider", tabIndex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.round(value), onKeyDown: stepWithKeyboard, onPointerDown: (event) => {
+            draggingRef.current = true;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            updateFromPointer(event);
+        }, onPointerMove: (event) => {
+            if (!draggingRef.current)
+                return;
+            updateFromPointer(event);
+        }, onPointerUp: (event) => {
+            draggingRef.current = false;
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+        }, onPointerCancel: () => {
+            draggingRef.current = false;
+        }, className: "relative h-3.5 cursor-pointer rounded-full border border-border/60 outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:cursor-grabbing", style: { backgroundImage, backgroundSize, backgroundPosition }, children: _jsx("span", { className: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_hsl(var(--foreground)/0.6)]", style: { left: `${clamp(percent, 0, 100)}%` } }) }));
+}
+export function VisualSegmentedControl({ options, value, onChange, className, }) {
+    return (_jsx("div", { className: cn("flex min-h-7 overflow-hidden rounded-md border border-border bg-background/60", className), children: options.map((option) => (_jsx("button", { type: "button", onClick: () => onChange(option.value), className: cn("min-w-0 flex-1 cursor-pointer px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-accent/70 hover:text-foreground", value === option.value && "bg-accent text-foreground"), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }));
+}
+export function VisualToggleControl({ checked, onChange, label, }) {
+    return (_jsx("button", { type: "button", "aria-pressed": checked, "aria-label": label, onClick: () => onChange(!checked), className: cn("relative h-5 w-9 cursor-pointer rounded-full border border-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", checked ? "bg-primary/35" : "bg-muted"), children: _jsx("span", { className: cn("absolute top-1/2 size-3.5 -translate-y-1/2 rounded-full bg-foreground shadow transition-transform", checked ? "translate-x-[18px]" : "translate-x-[3px]") }) }));
+}
+export function VisualSliderControl({ value, onChange, min = 0, max = 100, step = 1, unit, }) {
+    const safeValue = clampNumber(Number.isFinite(value) ? value : min, min, max);
+    return (_jsxs("div", { className: "flex h-7 items-center gap-2", children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: safeValue, onChange: (event) => onChange(Number(event.currentTarget.value)), className: "min-w-0 flex-1 cursor-pointer accent-foreground" }), _jsx("span", { className: "w-9 text-right text-[11px] tabular-nums text-muted-foreground", children: formatNumber(safeValue, unit) })] }));
+}
+export function VisualScrubInput({ label, value, onChange, min, max, step = 1, unit, disabled = false, }) {
+    const id = useId();
+    const [draft, setDraft] = useState(() => formatNumber(value, unit));
+    const [focused, setFocused] = useState(false);
+    const dragRef = useRef(null);
+    useEffect(() => {
+        if (!focused)
+            setDraft(formatNumber(value, unit));
+    }, [focused, unit, value]);
+    const commit = (nextDraft = draft) => {
+        const parsed = parseDraftNumber(nextDraft, value);
+        const next = clampNumber(parsed, min, max);
+        onChange(next);
+        setDraft(formatNumber(next, unit));
+    };
+    const setNext = (next) => {
+        const clamped = clampNumber(next, min, max);
+        onChange(clamped);
+        setDraft(formatNumber(clamped, unit));
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            commit();
+            event.currentTarget.blur();
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setDraft(formatNumber(value, unit));
+            event.currentTarget.blur();
+            return;
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            const mult = event.shiftKey || event.metaKey ? 10 : event.altKey ? 0.1 : 1;
+            const direction = event.key === "ArrowUp" ? 1 : -1;
+            const base = parseDraftNumber(draft, value);
+            setNext(base + direction * step * mult);
+        }
+    };
+    const onPointerDown = (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        event.preventDefault();
+        dragRef.current = {
+            pointerId: event.pointerId,
+            prevX: event.clientX,
+            dragged: false,
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    };
+    const onPointerMove = (event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        const delta = event.clientX - drag.prevX;
+        if (delta === 0)
+            return;
+        drag.prevX = event.clientX;
+        drag.dragged = true;
+        const mult = event.shiftKey || event.metaKey ? 10 : event.altKey ? 0.1 : 1;
+        setNext(value + delta * step * mult);
+    };
+    const onPointerUp = (event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        dragRef.current = null;
+        if (!drag.dragged) {
+            document.getElementById(id)?.focus();
+        }
+    };
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("label", { htmlFor: id, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, className: cn("flex w-8 shrink-0 cursor-ew-resize select-none items-center justify-center rounded border border-transparent px-1 text-[10px] font-semibold text-muted-foreground hover:border-border hover:bg-accent/60", disabled && "cursor-not-allowed opacity-50"), children: label }), _jsx("input", { id: id, value: draft, disabled: disabled, onFocus: () => setFocused(true), onBlur: () => {
+                    setFocused(false);
+                    commit();
+                }, onChange: (event) => setDraft(event.currentTarget.value), onKeyDown: onKeyDown, className: "h-7 min-w-0 flex-1 rounded-md border border-input bg-background/70 px-2 text-right text-[11px] tabular-nums text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-50" })] }));
+}
+export function VisualTweakControl({ tweak, value, onChange, className, }) {
+    if (tweak.type === "toggle") {
+        return (_jsxs("div", { className: cn("flex h-7 items-center justify-between gap-2", className), children: [_jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: tweak.label }), _jsx(VisualToggleControl, { checked: Boolean(value), onChange: onChange, label: tweak.label })] }));
+    }
+    const numericValue = typeof value === "number"
+        ? value
+        : typeof value === "string"
+            ? Number(value)
+            : Number(tweak.defaultValue);
+    return (_jsxs(VisualControlRow, { label: tweak.label, className: className, children: [(tweak.type === "color-swatch" ||
+                tweak.type === "color-swatches") && (_jsx(VisualColorPicker, { label: tweak.label, value: String(value), documentColors: (tweak.options ?? []).map((option) => option.color ?? option.value), onChange: onChange })), tweak.type === "segment" && (_jsx(VisualSegmentedControl, { options: tweak.options ?? [], value: String(value), onChange: onChange })), tweak.type === "slider" && (_jsx(VisualSliderControl, { min: tweak.min ?? 0, max: tweak.max ?? 100, step: tweak.step ?? 1, unit: tweak.unit ??
+                    (tweak.cssVar?.toLowerCase().includes("radius") ? "px" : undefined), value: Number.isFinite(numericValue) ? numericValue : 0, onChange: onChange }))] }));
+}
+//# sourceMappingURL=visual-style-controls.js.map