@agent-native/core 0.90.1 → 0.90.2

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

@@ -29,6 +29,50 @@ export interface GradientValue {
   stops: GradientStopValue[];
 }
 
+/**
+ * Contract for "a gradient editing session is active for element X with
+ * value V" (Figma-parity on-canvas handles, IP21 follow-up). This popover
+ * component stays the source of truth for parsing/serializing the CSS string
+ * (`parseGradientCss`/`gradientToCss` below) and for the ramp-bar UI; a
+ * canvas-side overlay (see `MultiScreenCanvas`'s `gradientEditTarget` prop)
+ * is a *second*, purely-visual view of the same session, so the two must
+ * agree on one shared shape rather than inventing parallel state.
+ *
+ * A caller that wants on-canvas handles alongside this popover should:
+ *  1. Keep the "which element/selection is being fill-edited" id it already
+ *     has to open this popover (e.g. a selected draft primitive id or a
+ *     selected screen/frame id).
+ *  2. Track the *current* `GradientValue` for that element the same way this
+ *     component's `value` prop is already threaded (parsed once via
+ *     `parseGradientCss`, then serialized back to CSS via `gradientToCss` on
+ *     every change — exactly what this component's own `onChange` callers do
+ *     today).
+ *  3. Build a `GradientEditSessionTarget` from those two pieces and pass it
+ *     to `MultiScreenCanvas`'s `gradientEditTarget` prop whenever this
+ *     popover is open (gated on `showGradientEditor` /
+ *     `GRADIENT_PAINT_TYPES.has(effectivePaintType)`) and the target is a
+ *     board/draft primitive or screen frame that canvas can draw chrome for;
+ *     pass `null`/`undefined` otherwise (popover closed, non-canvas target,
+ *     or non-linear kind — see that prop's doc for the current linear-only
+ *     scope).
+ */
+export interface GradientEditSessionTarget {
+  /** Id of the draft primitive or screen/frame the gradient applies to. */
+  frameOrDraftId: string;
+  /** The live CSS gradient string, e.g. what `gradientToCss` produces. */
+  cssValue: string;
+  /**
+   * Called by the canvas overlay when the user drags an on-canvas handle.
+   * `nextCss` is a full replacement gradient CSS string (round-trippable
+   * through `parseGradientCss`). `phase` mirrors the gesture-coalescing
+   * convention used elsewhere in this popover (see `onChangeComplete` on
+   * `DesignColorPickerProps`): "preview" fires on every drag tick for live
+   * feedback, "commit" fires once on pointerup with the final value so undo
+   * history only gets one entry per drag.
+   */
+  onChange: (nextCss: string, meta?: { phase: "preview" | "commit" }) => void;
+}
+
 // ─── Checkerboard (matches DesignColorPicker) ───────────────────────────────────
 
 const CHECKER_A = "#d4d4d4";

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

@@ -0,0 +1,258 @@
+/**
+ * InteractionStatePanel — the Webflow-style element interaction-state
+ * selector (Default / Hover / Focus / Focus-visible / Active / Disabled).
+ *
+ * Rendered at the top of the style sections when exactly one element is
+ * selected (see `EditPanel`'s mount site). Selecting a non-default state:
+ *   1. Visually marks the control as "editing <State>" so users can't
+ *      forget they're no longer editing the element's base styling
+ *      (Webflow/Framer convention — a persistent, unmissable accent, not a
+ *      transient toast).
+ *   2. Tells the parent via `onInteractionStateChange` so DesignEditor can
+ *      force the canvas preview (phase 2 — see `shared/interaction-states.ts`
+ *      module doc for the forced-preview attribute mechanism this drives).
+ *   3. EditPanel then threads the active state through `StyleChangeMeta`
+ *      (see EditPanel.tsx) so every style commit made while a state is
+ *      active targets that state's managed CSS rule instead of the
+ *      element's inline style.
+ *
+ * This component owns ONLY the selector UI — it has no opinion on how
+ * styles are persisted. It reads `hasOverride` (per state) from the caller
+ * so the row for a state that already has authored overrides can carry a
+ * small accent dot, matching the rest of the app's "this control has a
+ * non-default value" convention (see `StatesPanel`'s active-row dot and the
+ * breakpoint override dot conventions).
+ */
+
+import { useT } from "@agent-native/core/client";
+import {
+  IconChevronDown,
+  IconPointer,
+  IconFocus2,
+  IconHandClick,
+  IconBan,
+} from "@tabler/icons-react";
+import { Fragment } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+import type { InteractionState } from "../../../../shared/interaction-states";
+
+export type { InteractionState };
+
+/** `null` (or omitted) means the Default (base) state is active. */
+export type ActiveInteractionState = InteractionState | null;
+
+export interface InteractionStatePanelProps {
+  /** `null` = Default. */
+  activeState: ActiveInteractionState;
+  onActiveStateChange: (state: ActiveInteractionState) => void;
+  /**
+   * Which non-default states are actually applicable to the selected
+   * element. `disabled` only makes sense on form controls / buttons, for
+   * example. Defaults to all five supported states when omitted so callers
+   * that haven't wired element-kind detection yet still get a working
+   * selector.
+   */
+  availableStates?: readonly InteractionState[];
+  /**
+   * States that already have at least one authored override, for the
+   * dropdown's per-row accent dot. Does not affect availability.
+   */
+  statesWithOverrides?: ReadonlySet<InteractionState>;
+}
+
+const STATE_ICONS: Record<InteractionState, typeof IconPointer> = {
+  hover: IconPointer,
+  focus: IconFocus2,
+  "focus-visible": IconFocus2,
+  active: IconHandClick,
+  disabled: IconBan,
+};
+
+function stateLabel(
+  t: ReturnType<typeof useT>,
+  state: ActiveInteractionState,
+): string {
+  switch (state) {
+    case "hover":
+      return t("editPanel.interactionStates.hover");
+    case "focus":
+      return t("editPanel.interactionStates.focus");
+    case "focus-visible":
+      return t("editPanel.interactionStates.focusVisible");
+    case "active":
+      return t("editPanel.interactionStates.active");
+    case "disabled":
+      return t("editPanel.interactionStates.disabled");
+    default:
+      return t("editPanel.interactionStates.default");
+  }
+}
+
+const DEFAULT_AVAILABLE_STATES: readonly InteractionState[] = [
+  "hover",
+  "focus",
+  "focus-visible",
+  "active",
+  "disabled",
+];
+
+export function InteractionStatePanel({
+  activeState,
+  onActiveStateChange,
+  availableStates = DEFAULT_AVAILABLE_STATES,
+  statesWithOverrides,
+}: InteractionStatePanelProps) {
+  const t = useT();
+  const isNonDefault = activeState !== null;
+
+  return (
+    <div className="border-b border-[var(--design-editor-control-border)] px-2 py-1.5">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  "flex h-7 w-full cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-[12px] font-semibold outline-none transition-colors",
+                  isNonDefault
+                    ? "bg-[var(--design-editor-accent-color)] text-white shadow-[0_0_0_1px_var(--design-editor-accent-color)]"
+                    : "bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+                )}
+                aria-label={t("editPanel.interactionStates.selectorLabel")}
+              >
+                {isNonDefault ? (
+                  <span
+                    className="size-1.5 shrink-0 rounded-full bg-white"
+                    aria-hidden="true"
+                  />
+                ) : null}
+                <span className="min-w-0 flex-1 truncate">
+                  {isNonDefault
+                    ? t("editPanel.interactionStates.editingState", {
+                        state: stateLabel(t, activeState),
+                      })
+                    : stateLabel(t, null)}
+                </span>
+                <IconChevronDown className="size-3.5 shrink-0 opacity-70" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              <DropdownMenuItem
+                onClick={() => onActiveStateChange(null)}
+                className={cn(activeState === null && "font-semibold")}
+              >
+                <span className="flex-1">{stateLabel(t, null)}</span>
+                {activeState === null && (
+                  <span className="size-1.5 rounded-full bg-primary" />
+                )}
+              </DropdownMenuItem>
+              {availableStates.map((state) => {
+                const Icon = STATE_ICONS[state];
+                const hasOverride = statesWithOverrides?.has(state) ?? false;
+                return (
+                  <DropdownMenuItem
+                    key={state}
+                    onClick={() => onActiveStateChange(state)}
+                    className={cn(activeState === state && "font-semibold")}
+                  >
+                    <Icon className="mr-2 size-3.5 shrink-0" />
+                    <span className="flex-1">{stateLabel(t, state)}</span>
+                    {hasOverride && (
+                      <span
+                        className={cn(
+                          "size-1.5 shrink-0 rounded-full",
+                          activeState === state
+                            ? "bg-primary"
+                            : "bg-[var(--design-editor-accent-color)]",
+                        )}
+                        aria-label={t(
+                          "editPanel.interactionStates.hasOverrideIndicator",
+                        )}
+                      />
+                    )}
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TooltipTrigger>
+        <TooltipContent>
+          {isNonDefault
+            ? t("editPanel.interactionStates.editingStateTooltip", {
+                state: stateLabel(t, activeState),
+              })
+            : t("editPanel.interactionStates.selectorTooltip")}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+/**
+ * PropertyRow reset/override indicator — a small accent dot placed next to
+ * any style-section field row that has a declared override in the active
+ * interaction state, plus a reset button that clears just that property.
+ * Follows the same "dot + reset" shape as the breakpoint-override indicator
+ * convention (`getBreakpointOverrideState` callers elsewhere in EditPanel).
+ *
+ * Usage: wrap or place inline next to a field's label when
+ * `hasOverride` is true. `onReset` should call the shared
+ * `removeStateProperty` helper (via the parent's style-change plumbing) for
+ * that property/state.
+ */
+export function InteractionStateOverrideIndicator({
+  hasOverride,
+  onReset,
+}: {
+  hasOverride: boolean;
+  onReset?: () => void;
+}) {
+  const t = useT();
+  if (!hasOverride) return null;
+  return (
+    <Fragment>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className="ml-1 inline-block size-1.5 shrink-0 rounded-full bg-[var(--design-editor-accent-color)]"
+            aria-hidden="true"
+          />
+        </TooltipTrigger>
+        <TooltipContent>
+          {t("editPanel.interactionStates.hasOverrideIndicator")}
+        </TooltipContent>
+      </Tooltip>
+      {onReset ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={onReset}
+              className="ml-0.5 cursor-pointer text-[10px] font-medium text-muted-foreground hover:text-foreground"
+              aria-label={t("editPanel.interactionStates.resetOverride")}
+            >
+              {t("editPanel.interactionStates.reset")}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {t("editPanel.interactionStates.resetOverrideTooltip")}
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,144 @@
+/**
+ * MotionKeyframeDiamond — the small ◆ affordance Figma places to the right
+ * of a keyframeable property's field/label once a timeline exists on the
+ * layer. Two states:
+ *   - outline (muted): the property has a timeline but no keyframes yet for
+ *     it — clicking adds one at the current playhead position.
+ *   - filled accent: the property already has one or more keyframes —
+ *     rendered solid so a glance across the panel shows which fields are
+ *     currently animated.
+ *
+ * This component owns ONLY the affordance's rendering + click wiring. It has
+ * no opinion on how keyframes are stored or how the timeline UI reacts to a
+ * toggle — see `EditPanel`'s `motionKeyframeState`/`onToggleMotionKeyframe`
+ * props for that contract. The CSS property name passed in `cssProperty`
+ * must be one of the identifiers `MOTION_PROPERTY_PRESETS` in
+ * `shared/motion-timeline.ts` already uses (`translate` / `scale` /
+ * `rotate` / `opacity` / `border-radius` / `background-color` /
+ * `border-color` / `border-width` / `box-shadow`) so the motion machinery
+ * that owns the timeline can resolve the click to the right track.
+ *
+ * Visibility: hidden entirely when there's no timeline for the selected
+ * layer (`hasTimeline: false` or the state prop is omitted) — Figma only
+ * shows the diamond rail once a layer has been added to a timeline/scroll
+ * animation.  When a timeline exists, the diamond is always in the DOM but
+ * stays visually muted (low-opacity outline) until the row is hovered, or is
+ * always visible once the property already carries a keyframe (filled),
+ * matching Figma's "quiet until relevant" treatment.
+ */
+
+import { useT } from "@agent-native/core/client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+/**
+ * The exact CSS property identifiers the motion catalog
+ * (`MOTION_PROPERTY_PRESETS` in `shared/motion-timeline.ts`) tracks.
+ * `EditPanel` fields must emit one of these when calling
+ * `onToggleMotionKeyframe` so the caller can resolve the click to a motion
+ * track without guessing at a mapping.
+ */
+export type MotionKeyframeCssProperty =
+  | "translate"
+  | "scale"
+  | "rotate"
+  | "opacity"
+  | "border-radius"
+  | "background-color"
+  | "border-color"
+  | "border-width"
+  | "box-shadow";
+
+export interface MotionKeyframeDiamondProps {
+  /** One of the motion catalog's tracked CSS properties — see module doc. */
+  cssProperty: MotionKeyframeCssProperty;
+  /** True when this property already has at least one authored keyframe. */
+  hasKeyframe: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+/**
+ * Small ◆ glyph, 8x8, drawn with currentColor so it inherits the button's
+ * text color for the outline/filled/hover states below.
+ */
+function DiamondGlyph({ filled }: { filled: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 8 8"
+      width="8"
+      height="8"
+      aria-hidden="true"
+      className="shrink-0"
+    >
+      <rect
+        x="1"
+        y="1"
+        width="6"
+        height="6"
+        transform="rotate(45 4 4)"
+        fill={filled ? "currentColor" : "none"}
+        stroke="currentColor"
+        strokeWidth={filled ? 0 : 1.25}
+      />
+    </svg>
+  );
+}
+
+export function MotionKeyframeDiamond({
+  cssProperty,
+  hasKeyframe,
+  onToggle,
+  className,
+}: MotionKeyframeDiamondProps) {
+  const t = useT();
+  const label = hasKeyframe
+    ? t("editPanel.motionKeyframe.removeTooltip")
+    : t("editPanel.motionKeyframe.addTooltip");
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-pressed={hasKeyframe}
+          aria-label={label}
+          data-motion-css-property={cssProperty}
+          className={cn(
+            // Hover/focus-reveal for the muted outline (not-yet-keyframed)
+            // state is the caller's responsibility (see `FieldTrailer`'s
+            // wrapper, which fades this whole affordance in on field
+            // hover) — this component itself always renders at full
+            // opacity so a filled (keyframed) diamond never gets hidden by
+            // an ancestor hover state it doesn't control.
+            "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground/50 transition-colors",
+            "hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+            hasKeyframe &&
+              "text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
+            className,
+          )}
+        >
+          <DiamondGlyph filled={hasKeyframe} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * Per-selection lookup helper: does `cssProperty` already have a keyframe,
+ * per the `motionKeyframeState.keyframedProperties` list threaded down from
+ * DesignEditor. Pure/cheap — safe to call inline in render.
+ */
+export function motionPropertyHasKeyframe(
+  keyframedProperties: readonly string[] | undefined,
+  cssProperty: MotionKeyframeCssProperty,
+): boolean {
+  return keyframedProperties?.includes(cssProperty) ?? false;
+}

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

@@ -23,6 +23,7 @@ import {
   getScrubStepFromEvent,
   normalizeScrubNumber,
   parseScrubExpression,
+  roundScrubDragValue,
   startScrubDrag,
   updateScrubDrag,
   type ScrubExpressionOptions,
@@ -47,6 +48,17 @@ export interface ScrubInputChangeMeta {
    *   change, since those are already discrete, complete edits.
    */
   phase: "preview" | "commit";
+  /**
+   * Set when an arrow-key nudge fires on a `mixed` selection (see
+   * `handleKeyDown`): there is no single current value to step from across a
+   * mixed selection, so `onChange`'s `value` arg is the step delta itself
+   * (not a new absolute value) and consumers that support per-target relative
+   * application should add this delta to each selected target's own current
+   * value instead of overwriting every target with `value`. Omitted for
+   * every other change — existing consumers that don't check for it keep
+   * receiving absolute values exactly as before.
+   */
+  relativeDelta?: number;
 }
 
 export interface ScrubInputProps extends ScrubExpressionOptions {
@@ -107,8 +119,30 @@ export function ScrubInput({
   // can re-emit it once as the gesture's authoritative "commit" — without
   // recomputing from stale pointer deltas after pointer capture is released.
   const lastScrubValueRef = useRef(value);
+  // The most recent value THIS input committed (typed Enter/blur, keyboard
+  // nudge, or scrub release) that the host hasn't echoed back yet. While this
+  // is set, the resync effect below must hold the optimistic committed
+  // display instead of snapping back to the still-stale incoming `value`
+  // prop — otherwise a round-trip slower than one React render (host commit
+  // -> computedStyles update -> fresh `value` prop) clobbers the just-typed
+  // 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 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.
+        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.
+        return;
+      }
+    }
     if (!focused) {
       const formatted = mixed
         ? "Mixed"
@@ -116,13 +150,19 @@ export function ScrubInput({
       draftRef.current = formatted;
       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]);
 
-  const options = { unit, min, max, precision };
   const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
 
   const setNextValue = (nextValue: number, meta: ScrubInputChangeMeta) => {
     const normalized = normalizeScrubNumber(nextValue, options);
+    // Mark commit-phase writes as pending confirmation so the resync effect
+    // holds this optimistic display instead of reverting to a stale `value`
+    // 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;
     onChange(normalized, meta);
     const formatted = formatScrubValue(normalized, options);
     draftRef.current = formatted;
@@ -150,6 +190,9 @@ export function ScrubInput({
     // when it equals the placeholder `value` prop (e.g. typing "0"): the
     // selected objects hold differing values, so "no change" is meaningless.
     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;
       onChange(parsed.value, {
         source: "commit",
         expression: currentDraft,
@@ -161,16 +204,33 @@ export function ScrubInput({
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "ArrowUp" || event.key === "ArrowDown") {
       event.preventDefault();
-      // Mixed selection: the `value` prop is only a placeholder (typically 0),
-      // so stepping from it would snap every selected object to a value the
-      // user never chose. Require an explicit typed value first — typing then
-      // committing applies to all, which is the design-editor convention.
-      if (mixed) return;
       const direction = event.key === "ArrowUp" ? 1 : -1;
       // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
       // Cmd (metaKey) mirrors Shift for ×10 — editor convention on macOS.
       const baseStep = getScrubStepFromEvent(event, step);
       const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
+      const delta = direction * baseStep * cmdMultiplier;
+      // Mixed selection: the `value` prop is only a placeholder (typically 0)
+      // — there's no single current value to step from, and there's no
+      // typed draft either (mixed keeps the draft as the literal "Mixed"
+      // string, see commitDraft's guard). Figma's behavior here is a
+      // *relative* nudge: apply the same +/-delta to each selected object's
+      // own value rather than snapping every object to one absolute number.
+      // ScrubInput itself can't resolve each target's individual value, so
+      // emit the delta via `onChange` (as both `value` and
+      // `meta.relativeDelta`) and let the consumer apply it per-target. Do
+      // NOT route through setNextValue: that formats/displays one absolute
+      // number in the draft, which would incorrectly replace the "Mixed"
+      // placeholder text with a single value that was never actually common
+      // to the whole selection.
+      if (mixed) {
+        onChange(delta, {
+          source: "keyboard",
+          phase: "commit",
+          relativeDelta: delta,
+        });
+        return;
+      }
       // Step from the currently typed draft, not the last-committed `value`
       // prop — otherwise an in-progress, uncommitted edit (typed but not yet
       // blurred/entered) is silently discarded the moment an arrow key is
@@ -182,7 +242,7 @@ export function ScrubInput({
         options,
       );
       const base = draftParsed ? draftParsed.value : value;
-      setNextValue(base + direction * baseStep * cmdMultiplier, {
+      setNextValue(base + delta, {
         source: "keyboard",
         phase: "commit",
       });
@@ -214,6 +274,13 @@ export function ScrubInput({
       pointerId: event.pointerId,
       drag: startScrubDrag(event.clientX),
     };
+    // Re-seed the gesture's running base from the current prop right as the
+    // drag starts. Without this, a stale `lastScrubValueRef` left over from a
+    // previous gesture (or from an out-of-band prop update that arrived while
+    // not dragging) would silently become this gesture's starting point
+    // instead of the value actually displayed when the user grabbed the
+    // control.
+    lastScrubValueRef.current = value;
     event.currentTarget.setPointerCapture(event.pointerId);
     setDragging(true);
   };
@@ -235,14 +302,32 @@ export function ScrubInput({
     // Use incremental deltas from the last move so that clamped/rounded values
     // committed by onChange are respected. A total-delta approach would create
     // a dead zone equal to the amount dragged past the clamp boundary.
+    //
+    // Accumulate from this gesture's OWN last emitted value
+    // (lastScrubValueRef), not the `value` prop. The prop only reflects
+    // whatever the host last echoed back through computedStyles — a "preview"
+    // phase commit is not guaranteed to round-trip before the next
+    // pointermove tick fires (the host may debounce/throttle/skip preview
+    // writes), so re-reading `value` here would recompute every tick from a
+    // stale, pre-drag base plus one tiny incremental delta: the displayed
+    // number barely creeps from the original value instead of following the
+    // cursor, which reads as jittery/near-random rather than a smooth
+    // continuum. The gesture's own running total is always current because
+    // this component sets it itself on every tick below.
     const next =
-      value +
+      lastScrubValueRef.current +
       tick.deltaX *
         getScrubStepFromEvent(
           { altKey: event.altKey, shiftKey: event.shiftKey },
           step,
         );
-    lastScrubValueRef.current = setNextValue(next, {
+    // Px-type fields snap to whole numbers while scrubbing (see
+    // roundScrubDragValue) even though `precision` — which also governs typed
+    // input and keyboard nudges — allows a decimal. Rounding here, before
+    // setNextValue's own normalizeScrubNumber pass, keeps every subsequent
+    // incremental delta measured from an already-whole value instead of
+    // drifting on fractional leftovers.
+    lastScrubValueRef.current = setNextValue(roundScrubDragValue(next, unit), {
       source: "scrub",
       phase: "preview",
     });
@@ -259,6 +344,11 @@ export function ScrubInput({
     // dragging" — without this, the last preview tick would be the only
     // signal, and a consumer that ignores preview ticks would never commit.
     if (wasDrag && !mixed) {
+      // See setNextValue's pendingCommitRef comment — mark this gesture's
+      // 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;
       onChange(lastScrubValueRef.current, {
         source: "scrub",
         phase: "commit",