@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/app/components/design/inspector/ScrubInput.tsx

@@ -0,0 +1,238 @@
+import { IconArrowsHorizontal } from "@tabler/icons-react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentType,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+import {
+  formatScrubValue,
+  getScrubStepFromEvent,
+  normalizeScrubNumber,
+  parseScrubExpression,
+  type ScrubExpressionOptions,
+} from "./scrub-input-utils";
+
+type ScrubInputIcon = ComponentType<{ className?: string }>;
+
+export interface ScrubInputChangeMeta {
+  source: "commit" | "keyboard" | "scrub";
+  expression?: string;
+}
+
+export interface ScrubInputProps extends ScrubExpressionOptions {
+  label: string;
+  value: number;
+  onChange: (value: number, meta: ScrubInputChangeMeta) => void;
+  id?: string;
+  step?: number;
+  icon?: ScrubInputIcon;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  ariaLabel?: string;
+}
+
+export function ScrubInput({
+  label,
+  value,
+  onChange,
+  id,
+  step = 1,
+  unit,
+  min,
+  max,
+  precision,
+  icon: Icon = IconArrowsHorizontal,
+  disabled = false,
+  placeholder,
+  className,
+  inputClassName,
+  labelClassName,
+  ariaLabel,
+}: ScrubInputProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [draft, setDraft] = useState(() =>
+    formatScrubValue(value, { unit, precision }),
+  );
+  const [focused, setFocused] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const skipNextBlurCommitRef = useRef(false);
+  const dragRef = useRef({
+    pointerId: -1,
+    startX: 0,
+    startValue: value,
+    hasDragged: false,
+  });
+
+  useEffect(() => {
+    if (!focused) setDraft(formatScrubValue(value, { unit, precision }));
+  }, [focused, precision, unit, value]);
+
+  const options = { unit, min, max, precision };
+
+  const setNextValue = (nextValue: number, meta: ScrubInputChangeMeta) => {
+    const normalized = normalizeScrubNumber(nextValue, options);
+    onChange(normalized, meta);
+    setDraft(formatScrubValue(normalized, options));
+  };
+
+  const commitDraft = () => {
+    const parsed = parseScrubExpression(draft, value, options);
+    if (!parsed) {
+      setDraft(formatScrubValue(value, options));
+      return;
+    }
+
+    setDraft(parsed.normalized);
+    if (parsed.value !== value) {
+      onChange(parsed.value, { source: "commit", expression: draft });
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const direction = event.key === "ArrowUp" ? 1 : -1;
+      // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
+      // Cmd (metaKey) mirrors Shift for ×10 — Figma convention on macOS.
+      const baseStep = getScrubStepFromEvent(event, step);
+      const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
+      setNextValue(value + direction * baseStep * cmdMultiplier, {
+        source: "keyboard",
+      });
+      return;
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitDraft();
+      skipNextBlurCommitRef.current = true;
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setDraft(formatScrubValue(value, options));
+      skipNextBlurCommitRef.current = true;
+      event.currentTarget.blur();
+    }
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLLabelElement>) => {
+    if (disabled || event.button !== 0) return;
+    event.preventDefault();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startValue: value,
+      hasDragged: false,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLLabelElement>) => {
+    if (!dragging || dragRef.current.pointerId !== event.pointerId) return;
+    const delta = event.clientX - dragRef.current.startX;
+    if (delta === 0) return;
+    dragRef.current.hasDragged = true;
+    const next =
+      dragRef.current.startValue +
+      delta *
+        getScrubStepFromEvent(
+          { altKey: event.altKey, shiftKey: event.shiftKey },
+          step,
+        );
+    setNextValue(next, { source: "scrub" });
+  };
+
+  const endDrag = (event: PointerEvent<HTMLLabelElement>) => {
+    if (dragRef.current.pointerId !== event.pointerId) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    const wasDrag = dragRef.current.hasDragged;
+    setDragging(false);
+    // If the pointer was released without dragging (a plain click), focus the
+    // input so the user can type immediately — mirrors Figma's label click
+    // behaviour (the event.preventDefault() in handlePointerDown blocks the
+    // native label→input focus transfer).
+    if (!wasDrag && !disabled) {
+      inputRef.current?.focus();
+    }
+  };
+
+  return (
+    <div className={cn("flex items-center gap-1.5", className)}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Label
+            htmlFor={inputId}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            className={cn(
+              "flex h-6 w-20 shrink-0 cursor-ew-resize select-none items-center gap-1 rounded-sm text-[11px] text-muted-foreground transition-colors",
+              "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+              dragging &&
+                "bg-[var(--design-editor-control-bg)] text-foreground",
+              disabled && "pointer-events-none cursor-not-allowed opacity-50",
+              labelClassName,
+            )}
+          >
+            <Icon className="size-3 shrink-0" />
+            <span className="truncate">{label}</span>
+          </Label>
+        </TooltipTrigger>
+        <TooltipContent>{`${label} — drag to scrub · ↑↓ step · Shift ×10 · ⌥ fine`}</TooltipContent>
+      </Tooltip>
+      <Input
+        ref={inputRef}
+        id={inputId}
+        value={draft}
+        disabled={disabled}
+        placeholder={placeholder}
+        inputMode="decimal"
+        aria-label={ariaLabel ?? label}
+        onFocus={(event) => {
+          setFocused(true);
+          event.currentTarget.select();
+        }}
+        onBlur={() => {
+          setFocused(false);
+          if (skipNextBlurCommitRef.current) {
+            skipNextBlurCommitRef.current = false;
+            return;
+          }
+          commitDraft();
+        }}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          // Compact Figma-style: h-6, 11px tabular text, ring-1 with no offset.
+          "h-6 text-[11px] tabular-nums",
+          "focus-visible:ring-1 focus-visible:ring-offset-0",
+          inputClassName,
+        )}
+      />
+    </div>
+  );
+}

package/corpus/templates/design/app/components/design/inspector/ShaderControls.stories.tsx

@@ -0,0 +1,71 @@
+import type { ShaderDescriptor } from "@shared/shader-presets";
+import React, { useState } from "react";
+
+import { ShaderControls } from "./ShaderControls";
+
+const defaultMesh: ShaderDescriptor = {
+  preset: "MeshGradient",
+  params: { distortion: 0.8, swirl: 0.1 },
+  colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
+  speed: 1,
+  frame: 0,
+  fit: "contain",
+};
+
+const defaultGrain: ShaderDescriptor = {
+  preset: "GrainGradient",
+  params: { softness: 0.5, intensity: 0.5, noise: 0.25, shape: "corners" },
+  colors: ["#7300ff", "#eba8ff", "#00bfff"],
+  speed: 0,
+  frame: 0,
+  fit: "contain",
+};
+
+export function ShaderControlsDemo() {
+  const [mesh, setMesh] = useState<ShaderDescriptor>(defaultMesh);
+  const [grain, setGrain] = useState<ShaderDescriptor>(defaultGrain);
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: 24,
+        padding: 24,
+        background: "#111",
+        minHeight: "100vh",
+      }}
+    >
+      <div style={{ width: 280 }}>
+        <h3 style={{ color: "white", marginBottom: 12, fontSize: 12 }}>
+          MeshGradient
+        </h3>
+        <ShaderControls descriptor={mesh} onChange={setMesh} />
+        <pre
+          style={{
+            color: "#888",
+            fontSize: 10,
+            marginTop: 8,
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(mesh, null, 2)}
+        </pre>
+      </div>
+      <div style={{ width: 280 }}>
+        <h3 style={{ color: "white", marginBottom: 12, fontSize: 12 }}>
+          GrainGradient
+        </h3>
+        <ShaderControls descriptor={grain} onChange={setGrain} />
+        <pre
+          style={{
+            color: "#888",
+            fontSize: 10,
+            marginTop: 8,
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(grain, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}