@agent-native/core 0.109.3 → 0.110.0

package/corpus/core/src/client/visual-style-controls.tsx

@@ -1,1088 +1 @@
-import { IconColorPicker } from "@tabler/icons-react";
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type PointerEvent,
-  type ReactNode,
-} from "react";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "./components/ui/popover.js";
-import { cn } from "./utils.js";
-
-export type VisualControlValue = string | number | boolean;
-
-export interface VisualControlOption {
-  label: string;
-  value: string;
-  color?: string;
-}
-
-export interface VisualTweakDefinition {
-  id: string;
-  label: string;
-  type: "color-swatch" | "color-swatches" | "segment" | "slider" | "toggle";
-  options?: VisualControlOption[];
-  min?: number;
-  max?: number;
-  step?: number;
-  defaultValue: VisualControlValue;
-  cssVar?: string;
-  unit?: string;
-}
-
-function clampNumber(value: number, min?: number, max?: number) {
-  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: number, unit?: string) {
-  const rounded = Number.isInteger(value) ? value : Number(value.toFixed(2));
-  return unit ? `${rounded}${unit}` : String(rounded);
-}
-
-function parseDraftNumber(value: string, fallback: number) {
-  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
-  if (!match) return fallback;
-  const next = Number(match[0]);
-  return Number.isFinite(next) ? next : fallback;
-}
-
-interface RgbaColor {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-interface HsvaColor {
-  h: number;
-  s: number;
-  v: number;
-  a: number;
-}
-
-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: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };
-
-function normalizeRgba(color: RgbaColor): RgbaColor {
-  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: string): string | null {
-  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: string): RgbaColor | null {
-  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: number): string {
-  return clamp(value, 0, 255).toString(16).padStart(2, "0");
-}
-
-function rgbaToHex(color: RgbaColor): string {
-  const normalized = normalizeRgba(color);
-  return `#${channelToHex(normalized.r)}${channelToHex(normalized.g)}${channelToHex(normalized.b)}`.toUpperCase();
-}
-
-function rgbaToCss(color: RgbaColor): string {
-  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: string | undefined): number {
-  if (!value) return 1;
-  if (value.endsWith("%")) return Number(value.slice(0, -1)) / 100;
-  return Number(value);
-}
-
-function trimNumber(value: number) {
-  return Number(value.toFixed(2)).toString();
-}
-
-function rgbaToHsv(color: RgbaColor): HsvaColor {
-  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: HsvaColor): RgbaColor {
-  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: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min;
-  return Math.max(min, Math.min(max, Math.round(value)));
-}
-
-function clampFloat(value: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min;
-  return Math.max(min, Math.min(max, value));
-}
-
-function swatchBackground(value: string) {
-  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,
-}: {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  headerAction?: ReactNode;
-}) {
-  return (
-    <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,
-      )}
-    >
-      <div className="flex min-h-10 items-start justify-between gap-2 border-b border-border/70 px-3 py-2.5">
-        <div className="min-w-0">
-          <div className="truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {title}
-          </div>
-          {subtitle && (
-            <div className="mt-0.5 truncate text-[12px] text-foreground">
-              {subtitle}
-            </div>
-          )}
-        </div>
-        {headerAction}
-      </div>
-      <div className="max-h-[min(680px,calc(100vh-7rem))] overflow-y-auto p-2">
-        {children}
-      </div>
-    </aside>
-  );
-}
-
-export function VisualInspectorSection({
-  title,
-  children,
-  className,
-}: {
-  title: ReactNode;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <section className={cn("rounded-lg px-1.5 py-2", className)}>
-      <div className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/75">
-        {title}
-      </div>
-      <div className="space-y-2">{children}</div>
-    </section>
-  );
-}
-
-export function VisualControlRow({
-  label,
-  children,
-  className,
-}: {
-  label: ReactNode;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("grid gap-1", className)}>
-      <span className="text-[11px] text-muted-foreground">{label}</span>
-      {children}
-    </div>
-  );
-}
-
-export function VisualSwatchControl({
-  options,
-  value,
-  onChange,
-  columns = 8,
-  className,
-}: {
-  options: VisualControlOption[];
-  value: string;
-  onChange: (value: string) => void;
-  columns?: number;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn("grid gap-1.5", className)}
-      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
-    >
-      {options.map((option) => {
-        const swatch = option.color ?? option.value;
-        const isTransparent = swatch === "transparent";
-        return (
-          <button
-            key={`${option.value}-${option.label}`}
-            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,
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-export function VisualColorPicker({
-  label,
-  value,
-  onChange,
-  documentColors = [],
-  allowTransparent = false,
-  hexLabel = "Hex",
-  documentColorsLabel = "Document colors",
-  transparentLabel = "Transparent",
-  className,
-}: {
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-  documentColors?: string[];
-  allowTransparent?: boolean;
-  hexLabel?: string;
-  documentColorsLabel?: string;
-  transparentLabel?: string;
-  className?: string;
-}) {
-  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: HsvaColor) => {
-    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 as unknown as {
-          EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> };
-        }
-      ).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) as string[],
-    ),
-  ).slice(0, 16);
-  const displayValue =
-    value === "transparent" || color.a === 0
-      ? transparentLabel
-      : colorHex.replace(/^#/, "");
-  const hsv = rgbaToHsv(color);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <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,
-          )}
-        >
-          <span
-            className="size-4 shrink-0 rounded-[3px] border border-border/70"
-            style={swatchBackground(value)}
-          />
-          <span className="min-w-0 flex-1 truncate text-left font-medium tabular-nums text-foreground">
-            {displayValue}
-          </span>
-          <span
-            aria-hidden="true"
-            className="size-0 border-x-[4px] border-t-[5px] border-x-transparent border-t-muted-foreground/70"
-          />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="left"
-        align="start"
-        sideOffset={8}
-        className="z-[10000] w-[252px] p-0 text-[11px] shadow-xl"
-        onFocusOutside={(event) => event.preventDefault()}
-      >
-        <div className="rounded-md bg-popover text-popover-foreground">
-          <VisualSaturationBrightnessField
-            hsv={hsv}
-            label={label}
-            onChange={emitHsv}
-          />
-
-          <div className="mt-2.5 px-3">
-            <div className="grid grid-cols-[1.5rem_1fr] items-center gap-x-2">
-              <div className="flex items-center justify-center">
-                <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",
-                  )}
-                >
-                  <IconColorPicker className="size-4" />
-                </button>
-              </div>
-              <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 })
-                }
-              />
-              <span
-                className="mt-2 size-[18px] shrink-0 rounded-[3px] border border-border/60"
-                style={swatchBackground(rgbaToCss(color))}
-              />
-              <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);
-                }}
-              />
-            </div>
-          </div>
-
-          <div className="mt-2.5 grid grid-cols-[4.5rem_1fr] items-center gap-1 border-b border-border/70 px-3 pb-3">
-            <span className="text-[11px] font-medium text-muted-foreground">
-              {hexLabel}
-            </span>
-            <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"
-            />
-          </div>
-          {(allowTransparent || uniqueDocumentColors.length > 0) && (
-            <div className="px-3 py-2.5">
-              <div className="mb-2 flex h-5 items-center justify-between text-[11px] text-muted-foreground">
-                <span>{documentColorsLabel}</span>
-              </div>
-              <div className="grid grid-cols-8 gap-1">
-                {allowTransparent && (
-                  <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) => (
-                  <button
-                    key={color}
-                    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);
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function VisualSaturationBrightnessField({
-  hsv,
-  label,
-  onChange,
-}: {
-  hsv: HsvaColor;
-  label: string;
-  onChange: (value: HsvaColor) => void;
-}) {
-  const fieldRef = useRef<HTMLDivElement>(null);
-  const draggingRef = useRef(false);
-  const hueColor = rgbaToCss(hsvToRgba({ h: hsv.h, s: 100, v: 100, a: 1 }));
-
-  const updateFromPointer = (event: PointerEvent<HTMLDivElement>) => {
-    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: KeyboardEvent<HTMLDivElement>) => {
-    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 (
-    <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%)`,
-      }}
-    >
-      <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}%`,
-        }}
-      />
-    </div>
-  );
-}
-
-function VisualColorTrack({
-  label,
-  value,
-  min,
-  max,
-  backgroundImage,
-  backgroundSize,
-  backgroundPosition,
-  onChange,
-}: {
-  label: string;
-  value: number;
-  min: number;
-  max: number;
-  backgroundImage: string;
-  backgroundSize?: string;
-  backgroundPosition?: string;
-  onChange: (value: number) => void;
-}) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const draggingRef = useRef(false);
-  const percent = ((value - min) / (max - min)) * 100;
-
-  const updateFromPointer = (event: PointerEvent<HTMLDivElement>) => {
-    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: KeyboardEvent<HTMLDivElement>) => {
-    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 (
-    <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 }}
-    >
-      <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)}%` }}
-      />
-    </div>
-  );
-}
-
-export function VisualSegmentedControl({
-  options,
-  value,
-  onChange,
-  className,
-}: {
-  options: VisualControlOption[];
-  value: string;
-  onChange: (value: string) => void;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex min-h-7 overflow-hidden rounded-md border border-border bg-background/60",
-        className,
-      )}
-    >
-      {options.map((option) => (
-        <button
-          key={option.value}
-          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",
-          )}
-        >
-          <span className="truncate">{option.label}</span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export function VisualToggleControl({
-  checked,
-  onChange,
-  label,
-}: {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label?: string;
-}) {
-  return (
-    <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",
-      )}
-    >
-      <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]",
-        )}
-      />
-    </button>
-  );
-}
-
-export function VisualSliderControl({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  unit,
-}: {
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  unit?: string;
-}) {
-  const safeValue = clampNumber(Number.isFinite(value) ? value : min, min, max);
-  return (
-    <div className="flex h-7 items-center gap-2">
-      <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"
-      />
-      <span className="w-9 text-right text-[11px] tabular-nums text-muted-foreground">
-        {formatNumber(safeValue, unit)}
-      </span>
-    </div>
-  );
-}
-
-export function VisualScrubInput({
-  label,
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  unit,
-  disabled = false,
-}: {
-  label: string;
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  unit?: string;
-  disabled?: boolean;
-}) {
-  const id = useId();
-  const [draft, setDraft] = useState(() => formatNumber(value, unit));
-  const [focused, setFocused] = useState(false);
-  const dragRef = useRef<{
-    pointerId: number;
-    prevX: number;
-    dragged: boolean;
-  } | null>(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: number) => {
-    const clamped = clampNumber(next, min, max);
-    onChange(clamped);
-    setDraft(formatNumber(clamped, unit));
-  };
-
-  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    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: PointerEvent<HTMLLabelElement>) => {
-    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: PointerEvent<HTMLLabelElement>) => {
-    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: PointerEvent<HTMLLabelElement>) => {
-    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 (
-    <div className="flex items-center gap-1.5">
-      <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",
-        )}
-      >
-        {label}
-      </label>
-      <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"
-      />
-    </div>
-  );
-}
-
-export function VisualTweakControl({
-  tweak,
-  value,
-  onChange,
-  className,
-}: {
-  tweak: VisualTweakDefinition;
-  value: VisualControlValue;
-  onChange: (value: VisualControlValue) => void;
-  className?: string;
-}) {
-  if (tweak.type === "toggle") {
-    return (
-      <div
-        className={cn("flex h-7 items-center justify-between gap-2", className)}
-      >
-        <span className="truncate text-[11px] text-muted-foreground">
-          {tweak.label}
-        </span>
-        <VisualToggleControl
-          checked={Boolean(value)}
-          onChange={onChange}
-          label={tweak.label}
-        />
-      </div>
-    );
-  }
-
-  const numericValue =
-    typeof value === "number"
-      ? value
-      : typeof value === "string"
-        ? Number(value)
-        : Number(tweak.defaultValue);
-
-  return (
-    <VisualControlRow label={tweak.label} className={className}>
-      {((tweak.type as string) === "color-swatch" ||
-        (tweak.type as string) === "color-swatches") && (
-        <VisualColorPicker
-          label={tweak.label}
-          value={String(value)}
-          documentColors={(tweak.options ?? []).map(
-            (option) => option.color ?? option.value,
-          )}
-          onChange={onChange}
-        />
-      )}
-      {tweak.type === "segment" && (
-        <VisualSegmentedControl
-          options={tweak.options ?? []}
-          value={String(value)}
-          onChange={onChange}
-        />
-      )}
-      {tweak.type === "slider" && (
-        <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}
-        />
-      )}
-    </VisualControlRow>
-  );
-}
+export * from "@agent-native/toolkit/design-tweaks";