@agent-native/core 0.80.0 → 0.80.2

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

@@ -16,9 +16,14 @@ import {
   type ShaderPresetDef,
   type ShaderPresetName,
 } from "@shared/shader-presets";
+import {
+  buildFallbackGradient,
+  isWebGLAvailable,
+  prefersReducedMotion,
+} from "@shared/shader-safety";
+import { IconArrowLeft, IconX } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -35,7 +40,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import { ScrubInput } from "./ScrubInput";
+import { type ScrubInputChangeMeta, ScrubInput } from "./ScrubInput";
 
 // ---------------------------------------------------------------------------
 // Dynamic shader component map
@@ -55,15 +60,6 @@ const SHADER_COMPONENTS: Record<ShaderPresetName, AnyShaderComponent> = {
   PaperTexture: PaperTexture as AnyShaderComponent,
 };
 
-// ---------------------------------------------------------------------------
-// Reduced-motion helper (inline, SSR-safe)
-// ---------------------------------------------------------------------------
-
-function getPreferreducedMotion(): boolean {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
 // ---------------------------------------------------------------------------
 // ShaderPreview sub-component
 // ---------------------------------------------------------------------------
@@ -76,6 +72,7 @@ interface ShaderPreviewProps {
 function ShaderPreview({ descriptor, animated }: ShaderPreviewProps) {
   const preset = SHADER_PRESET_MAP[descriptor.preset];
   const ShaderComponent = SHADER_COMPONENTS[descriptor.preset];
+  const webglOk = isWebGLAvailable();
 
   // Build props — memoized to avoid identity churn on the WebGL layer
   const shaderProps = useMemo(() => {
@@ -92,20 +89,38 @@ function ShaderPreview({ descriptor, animated }: ShaderPreviewProps) {
   }, [descriptor, animated]);
 
   // Fallback gradient from the preset's default colors
-  const fallbackColors =
-    (preset?.defaultColors ?? preset?.defaultColorBack)
-      ? [preset.defaultColorBack ?? "#555", preset.defaultColors?.[0] ?? "#888"]
-      : ["#555555", "#888888"];
-
   const fallbackStyle = {
-    background: `linear-gradient(135deg, ${fallbackColors.join(", ")})`,
+    background: buildFallbackGradient(
+      preset?.defaultColors ?? [],
+      preset?.defaultColorBack,
+    ),
   };
 
+  const fallbackEl = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="w-full rounded-lg"
+          style={{ aspectRatio: "16 / 9", ...fallbackStyle }}
+        />
+      </TooltipTrigger>
+      <TooltipContent>
+        {
+          "WebGL unavailable – showing fallback" /* i18n-ignore shader tooltip */
+        }
+      </TooltipContent>
+    </Tooltip>
+  );
+
+  if (!webglOk) {
+    return fallbackEl;
+  }
+
   try {
     return (
       <div
-        className="relative overflow-hidden rounded"
-        style={{ width: 120, height: 80 }}
+        className="relative w-full overflow-hidden rounded-lg"
+        style={{ aspectRatio: "16 / 9" }}
       >
         <ShaderComponent
           {...shaderProps}
@@ -119,24 +134,62 @@ function ShaderPreview({ descriptor, animated }: ShaderPreviewProps) {
       </div>
     );
   } catch {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div
-            className="rounded"
-            style={{ width: 120, height: 80, ...fallbackStyle }}
-          />
-        </TooltipTrigger>
-        <TooltipContent>
-          {
-            "WebGL unavailable - showing fallback" /* i18n-ignore shader tooltip */
-          }
-        </TooltipContent>
-      </Tooltip>
-    );
+    return fallbackEl;
   }
 }
 
+// ---------------------------------------------------------------------------
+// Shared row wrapper: label-left, control-right, h-6 density
+// ---------------------------------------------------------------------------
+
+function ParamLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="w-[5.5rem] shrink-0 truncate text-[11px] text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Color swatch button — Figma style: rounded rect swatch + hex label inline
+// ---------------------------------------------------------------------------
+
+interface ColorSwatchProps {
+  color: string;
+  label: string;
+  onChange: (value: string) => void;
+}
+
+function ColorSwatch({ color, label, onChange }: ColorSwatchProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {/* The label wraps the native color input so clicking the swatch opens the picker */}
+        <label
+          className="flex h-6 min-w-0 cursor-pointer items-center gap-1.5 rounded px-1 text-[11px] text-muted-foreground transition-colors hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-within:bg-[var(--design-editor-control-bg)]"
+          title={label}
+        >
+          <span
+            className="inline-block size-4 shrink-0 rounded-[3px] border border-black/20 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.15)]"
+            style={{ background: color }}
+          />
+          <span className="min-w-0 truncate font-mono uppercase">
+            {color.startsWith("#") ? color.slice(1).toUpperCase() : color}
+          </span>
+          <input
+            type="color"
+            value={color}
+            onChange={(e) => onChange(e.target.value)}
+            className="sr-only"
+            aria-label={label}
+          />
+        </label>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Param row renderers
 // ---------------------------------------------------------------------------
@@ -159,7 +212,7 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
         min={min}
         max={max}
         step={step ?? 1}
-        onChange={(v) => onChange(key, v)}
+        onChange={(v: number, _meta: ScrubInputChangeMeta) => onChange(key, v)}
         className="w-full"
       />
     );
@@ -168,17 +221,15 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
   if (kind === "enum") {
     const strVal = typeof value === "string" ? value : String(paramDef.default);
     return (
-      <div className="flex items-center gap-2">
-        <span className="w-20 shrink-0 truncate text-xs text-muted-foreground">
-          {label}
-        </span>
+      <div className="flex h-6 items-center gap-1.5">
+        <ParamLabel>{label}</ParamLabel>
         <Select value={strVal} onValueChange={(v) => onChange(key, v)}>
-          <SelectTrigger className="h-7 flex-1 text-xs">
+          <SelectTrigger className="h-6 flex-1 text-[11px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {(options ?? []).map((opt: string) => (
-              <SelectItem key={opt} value={opt} className="text-xs">
+              <SelectItem key={opt} value={opt} className="text-[11px]">
                 {opt}
               </SelectItem>
             ))}
@@ -193,15 +244,15 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
       typeof value === "boolean" ? value : Boolean(paramDef.default);
     const switchId = `shader-param-${key}`;
     return (
-      <div className="flex items-center justify-between gap-2">
-        <Label htmlFor={switchId} className="text-xs text-muted-foreground">
+      <div className="flex h-6 items-center justify-between gap-1.5">
+        <Label htmlFor={switchId} className="text-[11px] text-muted-foreground">
           {label}
         </Label>
         <Switch
           id={switchId}
           checked={boolVal}
           onCheckedChange={(checked) => onChange(key, checked)}
-          className="scale-90"
+          className="origin-right scale-[0.8]"
         />
       </div>
     );
@@ -210,23 +261,13 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
   if (kind === "color") {
     const strVal = typeof value === "string" ? value : String(paramDef.default);
     return (
-      <div className="flex items-center gap-2">
-        <span className="w-20 shrink-0 truncate text-xs text-muted-foreground">
-          {label}
-        </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <input
-              type="color"
-              value={strVal}
-              onChange={(e) => onChange(key, e.target.value)}
-              className="h-7 w-8 cursor-pointer rounded border border-border bg-transparent p-0.5"
-              aria-label={label}
-            />
-          </TooltipTrigger>
-          <TooltipContent>{label}</TooltipContent>
-        </Tooltip>
-        <span className="text-[10px] text-muted-foreground">{strVal}</span>
+      <div className="flex h-6 items-center gap-1.5">
+        <ParamLabel>{label}</ParamLabel>
+        <ColorSwatch
+          color={strVal}
+          label={label}
+          onChange={(v) => onChange(key, v)}
+        />
       </div>
     );
   }
@@ -238,28 +279,24 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
     const limit = maxCount ?? 10;
     return (
       <div className="flex flex-col gap-1">
-        <span className="text-xs text-muted-foreground">{label}</span>
-        <div className="flex flex-wrap gap-1">
+        {/* Section label sits at the top of the stop list */}
+        <span className="text-[11px] text-muted-foreground">{label}</span>
+        {/* Color stop rows — each a swatch + hex + remove button */}
+        <div className="flex flex-col gap-0.5">
           {arrVal.map((color, i) => {
             const colorLabel = `Color ${i + 1}`;
             return (
-              <div key={i} className="flex items-center gap-0.5">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <input
-                      type="color"
-                      value={color}
-                      onChange={(e) => {
-                        const next = [...arrVal];
-                        next[i] = e.target.value;
-                        onChange(key, next);
-                      }}
-                      className="h-6 w-6 cursor-pointer rounded border border-border bg-transparent p-0"
-                      aria-label={colorLabel}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>{colorLabel}</TooltipContent>
-                </Tooltip>
+              <div key={i} className="flex h-6 items-center gap-1">
+                <ColorSwatch
+                  color={color}
+                  label={colorLabel}
+                  onChange={(v) => {
+                    const next = [...arrVal];
+                    next[i] = v;
+                    onChange(key, next);
+                  }}
+                />
+                <span className="flex-1" />
                 {arrVal.length > 1 && (
                   <Tooltip>
                     <TooltipTrigger asChild>
@@ -269,12 +306,12 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
                           const next = arrVal.filter((_, idx) => idx !== i);
                           onChange(key, next);
                         }}
-                        className="text-[10px] leading-none text-muted-foreground hover:text-destructive"
+                        className="flex size-4 items-center justify-center rounded text-muted-foreground hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         aria-label={
                           "Remove color" /* i18n-ignore shader tooltip */
                         }
                       >
-                        x
+                        <IconX className="size-2.5" />
                       </button>
                     </TooltipTrigger>
                     <TooltipContent>
@@ -286,14 +323,18 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
             );
           })}
           {arrVal.length < limit && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-6 px-2 text-[10px]"
+            <button
+              type="button"
+              className="flex h-6 items-center gap-1.5 rounded px-1 text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               onClick={() => onChange(key, [...arrVal, "#ffffff"])}
             >
-              {"+ Add" /* i18n-ignore shader compact add button */}
-            </Button>
+              <span className="flex size-4 shrink-0 items-center justify-center rounded-[3px] border border-dashed border-muted-foreground/50 text-[10px]">
+                +
+              </span>
+              <span>
+                {"Add color" /* i18n-ignore shader compact add button */}
+              </span>
+            </button>
           )}
         </div>
       </div>
@@ -310,18 +351,21 @@ function ParamRow({ paramDef, value, onChange }: ParamRowProps) {
 export interface ShaderControlsProps {
   descriptor: ShaderDescriptor;
   onChange: (descriptor: ShaderDescriptor) => void;
+  /** Optional callback to navigate back to the preset browser. */
+  onBack?: () => void;
   className?: string;
 }
 
 export function ShaderControls({
   descriptor,
   onChange,
+  onBack,
   className,
 }: ShaderControlsProps) {
-  const prefersReducedMotion = getPreferreducedMotion();
+  const reducedMotion = prefersReducedMotion();
 
   const [animated, setAnimated] = useState(
-    () => (descriptor.speed ?? 0) !== 0 && !prefersReducedMotion,
+    () => (descriptor.speed ?? 0) !== 0 && !reducedMotion,
   );
 
   const preset = SHADER_PRESET_MAP[descriptor.preset];
@@ -397,31 +441,43 @@ export function ShaderControls({
     }
   }
 
-  function handleSpeedChange(v: number) {
+  function handleSpeedChange(v: number, _meta: ScrubInputChangeMeta) {
     onChange({ ...descriptor, speed: v });
   }
 
   const animateSwitchId = "shader-animate";
 
   return (
-    <div
-      className={cn(
-        "flex flex-col gap-3 rounded-md bg-[#1a1a1a] p-3 text-xs",
-        className,
+    <div className={cn("flex flex-col gap-0", className)}>
+      {/* ── Live preview ─ full-width, rounded, sits at top ─────────────── */}
+      <div className="px-3 pb-2 pt-1">
+        <ShaderPreview descriptor={descriptor} animated={animated} />
+      </div>
+
+      {/* ── "Back to presets" affordance ─────────────────────────────────── */}
+      {onBack && (
+        <div className="px-3 pb-1.5">
+          <button
+            type="button"
+            onClick={onBack}
+            className="flex h-6 items-center gap-1 rounded px-1 text-[11px] text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <IconArrowLeft className="size-3" />
+            <span>{"Back to presets" /* i18n-ignore shader nav */}</span>
+          </button>
+        </div>
       )}
-    >
-      {/* Preset picker */}
-      <div className="flex flex-col gap-1.5">
-        <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-          Preset
-        </span>
+
+      {/* ── Preset picker ────────────────────────────────────────────────── */}
+      <div className="flex h-6 items-center gap-1.5 px-3">
+        <ParamLabel>{"Preset" /* i18n-ignore */}</ParamLabel>
         <Select value={descriptor.preset} onValueChange={handlePresetChange}>
-          <SelectTrigger className="h-7 text-xs">
+          <SelectTrigger className="h-6 flex-1 text-[11px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {(SHADER_PRESETS as readonly ShaderPresetDef[]).map((p) => (
-              <SelectItem key={p.name} value={p.name} className="text-xs">
+              <SelectItem key={p.name} value={p.name} className="text-[11px]">
                 {p.label}
               </SelectItem>
             ))}
@@ -429,85 +485,86 @@ export function ShaderControls({
         </Select>
       </div>
 
-      {/* Live preview */}
-      <div className="flex justify-center">
-        <ShaderPreview descriptor={descriptor} animated={animated} />
-      </div>
-
-      {/* Animate toggle */}
-      <div className="flex items-center justify-between gap-2">
+      {/* ── Animate toggle ───────────────────────────────────────────────── */}
+      <div className="flex h-6 items-center justify-between gap-1.5 px-3 pt-1">
         <Label
           htmlFor={animateSwitchId}
           className={cn(
-            "text-xs text-muted-foreground",
-            prefersReducedMotion && "opacity-50",
+            "text-[11px] text-muted-foreground",
+            reducedMotion && "opacity-50",
           )}
         >
-          Animate
-          {prefersReducedMotion && (
-            <span className="ml-1 text-[10px]">(reduced motion)</span>
+          {"Animate" /* i18n-ignore shader label */}
+          {reducedMotion && (
+            <span className="ml-1 text-[10px]">
+              {"(reduced motion)" /* i18n-ignore */}
+            </span>
           )}
         </Label>
         <Switch
           id={animateSwitchId}
           checked={animated}
           onCheckedChange={handleAnimatedChange}
-          disabled={prefersReducedMotion}
-          className="scale-90"
+          disabled={reducedMotion}
+          className="origin-right scale-[0.8]"
         />
       </div>
 
-      {/* Speed scrub — only when animating */}
+      {/* ── Speed scrub — only when animating ───────────────────────────── */}
       {animated && (
-        <ScrubInput
-          label="Speed"
-          value={descriptor.speed ?? 1}
-          min={-5}
-          max={5}
-          step={0.1}
-          onChange={handleSpeedChange}
-          className="w-full"
-        />
+        <div className="px-3 pt-1">
+          <ScrubInput
+            label="Speed"
+            value={descriptor.speed ?? 1}
+            min={-5}
+            max={5}
+            step={0.1}
+            onChange={handleSpeedChange}
+            className="w-full"
+          />
+        </div>
       )}
 
-      {/* Shader-specific params */}
+      {/* ── Shader-specific params ───────────────────────────────────────── */}
       {preset && preset.params.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-            Parameters
-          </span>
-          {preset.params.map((paramDef: ParamDef) => {
-            if (paramDef.kind === "colors") {
-              // Resolve the current color array
-              const val: string[] =
-                descriptor.colors ?? preset.defaultColors ?? [];
+        <>
+          <div className="mx-3 mb-1 mt-2 border-t border-border/40" />
+          <div className="flex flex-col gap-1 px-3 pb-2">
+            {preset.params.map((paramDef: ParamDef) => {
+              if (paramDef.kind === "colors") {
+                // Resolve the current color array
+                const val: string[] =
+                  descriptor.colors ?? preset.defaultColors ?? [];
+                return (
+                  <ParamRow
+                    key={paramDef.key}
+                    paramDef={paramDef}
+                    value={val}
+                    onChange={(k, v) =>
+                      handleColorsParamChange(k, v as string[])
+                    }
+                  />
+                );
+              }
+
+              const val = descriptor.params[paramDef.key] ?? paramDef.default;
+
               return (
                 <ParamRow
                   key={paramDef.key}
                   paramDef={paramDef}
-                  value={val}
-                  onChange={(k, v) => handleColorsParamChange(k, v as string[])}
+                  value={val as number | boolean | string}
+                  onChange={handleParamChange}
                 />
               );
-            }
-
-            const val = descriptor.params[paramDef.key] ?? paramDef.default;
-
-            return (
-              <ParamRow
-                key={paramDef.key}
-                paramDef={paramDef}
-                value={val as number | boolean | string}
-                onChange={handleParamChange}
-              />
-            );
-          })}
-        </div>
+            })}
+          </div>
+        </>
       )}
 
-      {/* Expensive param performance warning */}
+      {/* ── Expensive param performance warning ─────────────────────────── */}
       {hasExpensiveParam && (
-        <p className="rounded bg-yellow-950/50 px-2 py-1 text-[10px] text-yellow-400">
+        <p className="mx-3 mb-2 rounded bg-yellow-950/50 px-2 py-1 text-[10px] text-yellow-400">
           {
             "grainMixer / grainOverlay may impact performance on mobile" /* i18n-ignore shader performance warning */
           }