@agent-native/core 0.92.10 → 0.92.12

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

@@ -285,11 +285,18 @@ export function parseGradientCss(
 interface AngleDialProps {
   angle: number;
   onChange: (angle: number) => void;
+  /** Fires once when a drag gesture ends (pointerup/pointercancel) — see GradientEditorProps.onCommit. */
+  onCommit?: () => void;
   disabled?: boolean;
 }
 
 /** design-editor circular dial for rotating gradient angle. */
-function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
+function AngleDial({
+  angle,
+  onChange,
+  onCommit,
+  disabled = false,
+}: AngleDialProps) {
   const dialRef = useRef<HTMLDivElement>(null);
   const draggingRef = useRef(false);
 
@@ -319,10 +326,12 @@ function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
   };
 
   const handlePointerUp = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const wasDragging = draggingRef.current;
     draggingRef.current = false;
     if (e.currentTarget.hasPointerCapture(e.pointerId)) {
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
+    if (wasDragging) onCommit?.();
   };
 
   const dotAngle = ((angle - 90) * Math.PI) / 180;
@@ -349,9 +358,11 @@ function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
         if (e.key === "ArrowRight" || e.key === "ArrowUp") {
           e.preventDefault();
           onChange((angle + 1) % 360);
+          onCommit?.();
         } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
           e.preventDefault();
           onChange((angle - 1 + 360) % 360);
+          onCommit?.();
         }
       }}
       className={cn(
@@ -394,6 +405,18 @@ function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
 export interface GradientEditorProps {
   value: GradientValue;
   onChange: (value: GradientValue) => void;
+  /**
+   * Fires once per discrete edit or drag gesture — mirrors the
+   * `onChangeComplete` convention used by `DesignColorPickerProps` (see the
+   * doc comment there): `onChange` alone fires on every stop-drag/angle-drag
+   * pointermove tick (cheap live preview), while `onCommit` fires exactly
+   * once (stop added, stop removed, stop-drag pointerup, angle-drag
+   * pointerup, or a position/angle field committed via blur/Enter) so a
+   * caller that persists through history only records one entry per gesture
+   * instead of one per tick. Optional so existing callers that only wired
+   * `onChange` keep their current every-tick-is-final behavior.
+   */
+  onCommit?: () => void;
   selectedStopId: string;
   onSelectStop: (id: string) => void;
   disabled?: boolean;
@@ -412,6 +435,7 @@ const WRAPPER_HEIGHT = BAR_HEIGHT + HANDLE_AREA; // total component height
 export function GradientEditor({
   value,
   onChange,
+  onCommit,
   selectedStopId,
   onSelectStop,
   disabled = false,
@@ -419,6 +443,10 @@ export function GradientEditor({
 }: GradientEditorProps) {
   const barRef = useRef<HTMLDivElement>(null);
   const draggingStopRef = useRef<string | null>(null);
+  // Set once a stop-drag actually moves the pointer (vs a plain click that
+  // only selects the stop) — endStopDrag uses this to skip firing onCommit
+  // for a no-op "select" click where nothing actually changed.
+  const stopDragMovedRef = useRef(false);
   // Track whether a pointerdown on the bar started a drag (vs click-to-add).
   const barClickRef = useRef<{ moved: boolean; startX: number } | null>(null);
 
@@ -502,6 +530,7 @@ export function GradientEditor({
     };
     onChange({ ...value, stops: [...value.stops, newStop] });
     onSelectStop(newStop.id);
+    onCommit?.();
   };
 
   const startStopDrag = (
@@ -513,6 +542,7 @@ export function GradientEditor({
     event.preventDefault();
     onSelectStop(id);
     draggingStopRef.current = id;
+    stopDragMovedRef.current = false;
     event.currentTarget.setPointerCapture(event.pointerId);
   };
 
@@ -520,6 +550,7 @@ export function GradientEditor({
     event: ReactPointerEvent<HTMLButtonElement>,
   ) => {
     if (!draggingStopRef.current || disabled) return;
+    stopDragMovedRef.current = true;
     updateStopPosition(
       draggingStopRef.current,
       positionFromPointer(event.clientX),
@@ -527,10 +558,14 @@ export function GradientEditor({
   };
 
   const endStopDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    const wasDragging =
+      draggingStopRef.current !== null && stopDragMovedRef.current;
     draggingStopRef.current = null;
+    stopDragMovedRef.current = false;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) {
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
+    if (wasDragging) onCommit?.();
   };
 
   const removeStop = (id: string) => {
@@ -541,6 +576,7 @@ export function GradientEditor({
     if (selectedStopId === id) {
       onSelectStop(nearestStopId(nextStops, removed?.position) ?? "");
     }
+    onCommit?.();
   };
 
   const setAngle = (angle: number) => {
@@ -576,6 +612,7 @@ export function GradientEditor({
       return;
     }
     updateStopPosition(selectedStopId, parsed);
+    onCommit?.();
   };
 
   const revertPositionDraft = () => {
@@ -651,6 +688,28 @@ export function GradientEditor({
                 e.stopPropagation();
                 removeStop(stop.id);
               }}
+              onKeyDown={(e) => {
+                if (disabled) return;
+                // Figma parity: Delete/Backspace removes the focused stop,
+                // and Left/Right nudges its position (Shift for a bigger
+                // step) — mirrors the numeric position field's arrow-key
+                // behavior but works directly on the handle too.
+                if (e.key === "Delete" || e.key === "Backspace") {
+                  e.preventDefault();
+                  removeStop(stop.id);
+                  return;
+                }
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                  e.preventDefault();
+                  const step = e.shiftKey ? 10 : 1;
+                  const delta = e.key === "ArrowRight" ? step : -step;
+                  updateStopPosition(
+                    stop.id,
+                    clamp(stop.position + delta, 0, 100),
+                  );
+                  onCommit?.();
+                }
+              }}
               className={cn(
                 // Base: round handle with white border ring + outer accent ring
                 "absolute cursor-grab active:cursor-grabbing",
@@ -724,6 +783,7 @@ export function GradientEditor({
             <AngleDial
               angle={value.angle}
               onChange={setAngle}
+              onCommit={onCommit}
               disabled={disabled}
             />
             <div className="flex h-6 w-14 items-center overflow-hidden rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)]">
@@ -744,7 +804,17 @@ export function GradientEditor({
                     setAngleInput(e.target.value);
                   }
                 }}
-                onBlur={() => setAngleInput(null)}
+                onBlur={() => {
+                  // `angleInput` is only non-null once the user has actually
+                  // typed into this field (see onChange below) — mirrors the
+                  // sibling stop-position field's commitPositionDraft, which
+                  // only commits on an actual edit rather than unconditionally
+                  // on every blur (tabbing through/refocusing without typing
+                  // must not re-fire the commit).
+                  const changed = angleInput !== null;
+                  setAngleInput(null);
+                  if (changed) onCommit?.();
+                }}
                 className="h-full min-w-0 flex-1 bg-transparent px-1.5 !text-[11px] tabular-nums focus-visible:outline-none"
               />
               <span className="flex w-4 shrink-0 items-center justify-center text-[10px] text-muted-foreground">

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

@@ -78,6 +78,26 @@ export interface ScrubInputProps extends ScrubExpressionOptions {
   tooltipLabel?: string;
 }
 
+export interface PendingScrubCommit {
+  value: number;
+  /** Incoming prop value at commit time. While this exact value remains, the
+   * host has not acknowledged the write yet and the optimistic draft should
+   * stay visible. A different incoming value is authoritative host
+   * normalization/rejection and must supersede the optimistic draft. */
+  baseline: number;
+}
+
+export function resolvePendingScrubCommit(
+  pending: PendingScrubCommit | null,
+  incomingValue: number,
+  options: ScrubExpressionOptions,
+): "none" | "hold" | "confirmed" | "superseded" {
+  if (pending === null) return "none";
+  const incoming = normalizeScrubNumber(incomingValue, options);
+  if (incoming === pending.value) return "confirmed";
+  return incoming === pending.baseline ? "hold" : "superseded";
+}
+
 export function ScrubInput({
   label,
   value,
@@ -128,18 +148,27 @@ export function ScrubInput({
   // value back to the old one the instant focus leaves the input, which
   // reads as "Enter resets to the old value". Cleared as soon as a fresh
   // `value` prop confirms (or supersedes) the pending commit.
-  const pendingCommitRef = useRef<number | null>(null);
+  const pendingCommitRef = useRef<PendingScrubCommit | null>(null);
   const options = { unit, min, max, precision };
 
   useEffect(() => {
-    if (pendingCommitRef.current !== null) {
-      if (normalizeScrubNumber(value, options) === pendingCommitRef.current) {
-        // The host echoed back exactly what we committed — resolved, safe to
-        // resume syncing from the prop again.
+    if (mixed) pendingCommitRef.current = null;
+    const resolution = resolvePendingScrubCommit(
+      pendingCommitRef.current,
+      value,
+      options,
+    );
+    if (resolution !== "none") {
+      if (resolution === "confirmed" || resolution === "superseded") {
+        // The host either echoed exactly what we committed or returned a new,
+        // authoritative normalized/rejected value. In both cases resume prop
+        // synchronization. The old equality-only logic held forever on the
+        // second path, leaving the field permanently stuck on a value the
+        // canvas never accepted.
         pendingCommitRef.current = null;
       } else {
-        // Still waiting for the round-trip (or the host is reporting a
-        // different in-flight value) — don't stomp the optimistic draft.
+        // Still seeing the exact pre-commit prop — don't stomp the optimistic
+        // draft while the source-write round trip is pending.
         return;
       }
     }
@@ -151,7 +180,7 @@ export function ScrubInput({
       setDraft(formatted);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `options` is a fresh object every render; the individual fields it's built from (unit/min/max/precision) are already listed below.
-  }, [focused, mixed, precision, unit, value]);
+  }, [focused, max, min, mixed, precision, unit, value]);
 
   const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
 
@@ -162,7 +191,12 @@ export function ScrubInput({
     // prop before the host's round-trip lands (see pendingCommitRef above).
     // Preview ticks don't need this: they're expected to be superseded by
     // the next tick or the gesture's own final commit almost immediately.
-    if (meta.phase === "commit") pendingCommitRef.current = normalized;
+    if (meta.phase === "commit") {
+      pendingCommitRef.current = {
+        value: normalized,
+        baseline: normalizeScrubNumber(value, options),
+      };
+    }
     onChange(normalized, meta);
     const formatted = formatScrubValue(normalized, options);
     draftRef.current = formatted;
@@ -192,7 +226,10 @@ export function ScrubInput({
     if (parsed.value !== value || mixed) {
       // See setNextValue's pendingCommitRef comment — this text-commit path
       // (Enter/blur) bypasses setNextValue, so mark it pending here too.
-      pendingCommitRef.current = parsed.value;
+      pendingCommitRef.current = {
+        value: parsed.value,
+        baseline: normalizeScrubNumber(value, options),
+      };
       onChange(parsed.value, {
         source: "commit",
         expression: currentDraft,
@@ -348,7 +385,10 @@ export function ScrubInput({
       // authoritative value as pending confirmation so releasing the drag
       // can't be clobbered back to the pre-drag value by a slow host
       // round-trip (same class of bug as the Enter/blur text-commit case).
-      pendingCommitRef.current = lastScrubValueRef.current;
+      pendingCommitRef.current = {
+        value: lastScrubValueRef.current,
+        baseline: normalizeScrubNumber(value, options),
+      };
       onChange(lastScrubValueRef.current, {
         source: "scrub",
         phase: "commit",

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

@@ -23,7 +23,7 @@ import {
   IconSearch,
   IconX,
 } from "@tabler/icons-react";
-import { Component, useMemo, useState, type ReactNode } from "react";
+import { Component, useMemo, useRef, useState, type ReactNode } from "react";
 
 import { Input } from "@/components/ui/input";
 import {
@@ -169,8 +169,27 @@ function ShaderThumbnail({
 export interface ShaderFillsPanelProps {
   /** Currently-applied shader descriptor, if the fill is already a shader. */
   descriptor?: ShaderDescriptor;
-  /** Emits when the user applies/tunes a shader. value = CSS fallback fill. */
+  /**
+   * Cheap live preview — fires on every ShaderControls tuning tick (typing
+   * or dragging a uniform) as well as once for a discrete preset/create-new
+   * pick. Should only update the visual CSS fallback fill; never trigger
+   * expensive persistence work.
+   */
   onApply: (descriptor: ShaderDescriptor, css: string) => void;
+  /**
+   * Fires once per gesture/discrete action with the same final
+   * descriptor+css already reported via `onApply` — mirrors GradientEditor's
+   * `onCommit` convention (see GradientEditor.tsx): `onApply` alone fires on
+   * every tuning tick for live preview, `onCommit` fires exactly once when a
+   * drag/type gesture ends (detected via pointerup/blur bubbling out of the
+   * tuning area below — `ShaderControls` doesn't surface its own ScrubInput
+   * gesture phase upward) or immediately for a discrete preset/create-new
+   * pick, so a caller that persists through undo history and the
+   * `apply-shader` codegen mutation only does so once per edit instead of
+   * once per tick. Optional so an existing caller that only wires `onApply`
+   * keeps that prop as the single source of truth.
+   */
+  onCommit?: (descriptor: ShaderDescriptor, css: string) => void;
   /** Close the shader panel and return to the color picker. */
   onBack: () => void;
   /** Optional design context forwarded to the apply-shader action. */
@@ -186,6 +205,7 @@ export interface ShaderFillsPanelProps {
 export function ShaderFillsPanel({
   descriptor,
   onApply,
+  onCommit,
   onBack,
   applyContext,
   disabled = false,
@@ -195,6 +215,18 @@ export function ShaderFillsPanel({
     descriptor ?? null,
   );
   const applyShader = useActionMutation("apply-shader");
+  // Last descriptor reported to `onApply`, so a bubbled pointerup/blur that
+  // ends a tuning gesture can re-commit that exact value once, without
+  // needing ShaderControls to surface its own gesture-end signal.
+  const lastAppliedRef = useRef<ShaderDescriptor | null>(descriptor ?? null);
+  // Whether `preview()` has applied a new descriptor since the last
+  // `commitNow()`. Any pointerup/blur that bubbles out of the tuning
+  // container — opening a Select, clicking a checkbox, tabbing between
+  // fields — would otherwise re-fire the real apply-shader mutation on an
+  // unchanged descriptor just because `lastAppliedRef` is seeded on mount.
+  // Gate `commitLastPreview` on this flag instead: only a real preview tick
+  // sets it, and every `commitNow` clears it.
+  const dirtyRef = useRef(false);
 
   const filtered = useMemo(() => {
     const query = search.trim().toLowerCase();
@@ -206,13 +238,26 @@ export function ShaderFillsPanel({
     );
   }, [search]);
 
-  /** Validate + surface the descriptor for the agent, then emit the CSS fill. */
-  const commit = (next: ShaderDescriptor) => {
+  /**
+   * Cheap live preview: updates the thumbnail/detail state and the caller's
+   * CSS fallback fill. Called on every ShaderControls tick — must never do
+   * the expensive apply-shader codegen mutation (see commitNow below).
+   */
+  const preview = (next: ShaderDescriptor) => {
     setActive(next);
+    lastAppliedRef.current = next;
+    dirtyRef.current = true;
+    onApply(next, shaderDescriptorToCss(next));
+  };
+
+  /** Validate + surface the descriptor for the agent exactly once. */
+  const commitNow = (next: ShaderDescriptor) => {
+    dirtyRef.current = false;
     const css = shaderDescriptorToCss(next);
-    onApply(next, css);
+    onCommit?.(next, css);
     // Fire-and-forget validation/codegen so the agent can write real shader
-    // code. The picker fill is applied immediately above regardless of result.
+    // code. The picker fill is already applied via `preview` above,
+    // regardless of this mutation's result.
     applyShader.mutate(
       {
         surface: SHADER_PRESET_MAP[next.preset]?.isEffect ? "effect" : "fill",
@@ -250,6 +295,25 @@ export function ShaderFillsPanel({
     );
   };
 
+  /** Discrete, one-shot pick (preset thumbnail / create-new tile): preview + commit in the same tick, same as before this change. */
+  const pick = (next: ShaderDescriptor) => {
+    preview(next);
+    commitNow(next);
+  };
+
+  /**
+   * Ends a ShaderControls tuning gesture: pointerup/blur bubbling out of the
+   * tuning area (see the wrapping div below). Gated on `dirtyRef` so any
+   * pointerup/blur that bubbles out without an intervening `preview()` tick —
+   * opening a Select, clicking a checkbox, tabbing between fields — is a
+   * no-op instead of re-committing the unchanged descriptor.
+   */
+  const commitLastPreview = () => {
+    if (dirtyRef.current && lastAppliedRef.current) {
+      commitNow(lastAppliedRef.current);
+    }
+  };
+
   // ── Detail view: a preset is selected → tune it with ShaderControls ───────
   if (active) {
     const preset = SHADER_PRESET_MAP[active.preset];
@@ -277,10 +341,19 @@ export function ShaderFillsPanel({
             <IconX className="size-3" />
           </button>
         </div>
-        <div className="border-t border-border/70 p-2">
+        {/* onPointerUp/onBlur here catch the bubbled event that ends a
+            ShaderControls drag/type gesture (pointer capture redirects the
+            event's target but it still bubbles through this ancestor), so
+            the expensive apply-shader mutation commits exactly once per
+            gesture instead of once per preview tick. */}
+        <div
+          className="border-t border-border/70 p-2"
+          onPointerUp={commitLastPreview}
+          onBlur={commitLastPreview}
+        >
           <ShaderControls
             descriptor={active}
-            onChange={(next) => commit(next)}
+            onChange={(next) => preview(next)}
           />
         </div>
       </div>
@@ -301,7 +374,7 @@ export function ShaderFillsPanel({
               type="button"
               aria-label={"Create new shader" /* i18n-ignore */}
               disabled={disabled}
-              onClick={() => commit(descriptorFromPreset(SHADER_PRESETS[0]))}
+              onClick={() => pick(descriptorFromPreset(SHADER_PRESETS[0]))}
               className="flex size-5 items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
             >
               <IconPlus className="size-3.5" />
@@ -358,7 +431,7 @@ export function ShaderFillsPanel({
               <button
                 type="button"
                 disabled={disabled}
-                onClick={() => commit(descriptorFromPreset(SHADER_PRESETS[0]))}
+                onClick={() => pick(descriptorFromPreset(SHADER_PRESETS[0]))}
                 className={cn(
                   "group relative flex aspect-[4/3] w-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-[var(--design-editor-control-border)] text-muted-foreground transition-colors",
                   "hover:border-foreground/40 hover:text-foreground",
@@ -399,7 +472,7 @@ export function ShaderFillsPanel({
                       type="button"
                       disabled={disabled}
                       aria-label={preset.label}
-                      onClick={() => commit(descriptorFromPreset(preset))}
+                      onClick={() => pick(descriptorFromPreset(preset))}
                       className={cn(
                         "group flex flex-col gap-1 text-left focus-visible:outline-none",
                         disabled && "pointer-events-none opacity-40",

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -14,6 +14,9 @@ export {
 export {
   AutoLayoutMatrix,
   type AutoLayoutDirection,
+  type AutoLayoutFlow,
+  type AutoLayoutGridTrackSizing,
+  type AutoLayoutGridValue,
   type AutoLayoutMatrixLabels,
   type AutoLayoutMatrixProps,
   type AutoLayoutMatrixValue,