@agent-native/core 0.109.3 → 0.110.0

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

@@ -1,499 +1,2 @@
-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-[transform,border-color] 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 }))] }));
-}
+export * from "@agent-native/toolkit/design-tweaks";
 //# sourceMappingURL=visual-style-controls.js.map