@agent-native/core 0.85.5 → 0.85.7

package/corpus/templates/design/app/components/design/canvas-primitive-style.ts

@@ -8,24 +8,35 @@
  * jump and the B6 ellipse border-radius jump.
  *
  * Design decisions:
- * - Fill: `hsl(var(--primary, 213 91% 67%) / 0.24)` — theme-adaptive when the
- *   document defines `--primary`, but still visibly blue inside standalone
- *   iframe documents such as the overview board.
- * - Stroke: `hsl(var(--primary, 213 91% 67%) / 0.95)` — same CSS-var approach
- *   with a fallback so committed shapes do not become invisible.
+ * - Fill (rect/ellipse): `rgb(218 218 218)` — a plain, theme-independent
+ *   neutral gray, not a CSS custom property. This is intentional: a shape
+ *   drawn with no explicit color should look the same (a soft Figma-like
+ *   gray) regardless of which document theme it lands in, rather than
+ *   silently tinting to whatever `--primary` resolves to there.
+ * - Stroke (rect/ellipse): `rgb(168 168 168)` — a slightly darker plain gray,
+ *   same rationale as fill above.
+ * - Frame fill: the one default that *is* theme-adaptive —
+ *   `hsl(var(--primary) / 0.05)`, a very faint tint of the editor's accent
+ *   color so a layout frame's interior reads as "structural chrome" rather
+ *   than a fixed gray. Its border stays a plain dashed gray, same as
+ *   rect/ellipse's border.
  * - Stroke width: 1px for div-based shapes.
  * - Ellipse: borderRadius "50%" in both paths — no more "oval on commit" jump.
  * - Rect: borderRadius "2px" (small, matches the previous committed value; the
  *   preview used Tailwind `rounded-sm` which resolves to 2px).
- * - Frame: dashed border, slightly lighter fill (matches preview semantics).
- * - Text: inherits current color. Selection/edit chrome owns outlines so text
- *   does not carry a persistent border that double-stacks with focused states.
+ * - Text: inherits current color by default. Selection/edit chrome owns
+ *   outlines so text does not carry a persistent border that double-stacks
+ *   with focused states.
  *
- * CSS custom properties (`hsl(var(--primary) / …)`) work in the committed HTML
- * because the iframe inherits the design-editor stylesheet that defines
- * `--primary`.  When a `fill` / `stroke` override is already present on the
- * primitive those are passed through unchanged so user-chosen colors are never
- * clobbered.
+ * Overrides: when a caller passes a `fill` override, it becomes the
+ * `background` for every kind EXCEPT text — a text primitive's `fill` maps to
+ * `color` instead (text has no fillable background box; DesignEditor's
+ * `appendCanvasPrimitiveToHtml` does the same `primitive.fill ?? "currentColor"`
+ * mapping for the committed element). Getting this wrong here previously
+ * meant a text primitive's chosen color rendered in the preview but was
+ * silently dropped, then jumped to the correct color only once committed.
+ * `stroke` / `strokeWidth` overrides are passed through unchanged for every
+ * kind.
  */
 
 import type * as React from "react";
@@ -152,18 +163,23 @@ export function canvasPrimitiveStyleString(
   overrides?: { fill?: string; stroke?: string; strokeWidth?: number },
 ): string {
   const v = canvasPrimitiveVisual(kind);
+  const isText = kind === "text";
 
   // Apply caller overrides so user-chosen colours are preserved.
   let background = v.background;
   let border = v.border;
 
-  if (overrides?.fill) {
+  // Text primitives render their fill as `color`, not `background` (see the
+  // matching note in canvasPrimitiveReactStyle) — otherwise a caller-chosen
+  // text color would paint a filled background box instead of tinting the
+  // glyphs, and would disagree with the committed HTML output.
+  if (overrides?.fill && !isText) {
     background = overrides.fill;
   }
   if (overrides?.stroke || overrides?.strokeWidth !== undefined) {
     const stroke = overrides.stroke ?? DEFAULT_STROKE;
     const width = overrides.strokeWidth ?? DEFAULT_STROKE_WIDTH_PX;
-    const style = kind === "frame" || kind === "text" ? "dashed" : "solid";
+    const style = kind === "frame" || isText ? "dashed" : "solid";
     border = `${width}px ${style} ${stroke}`;
   }
 
@@ -173,8 +189,9 @@ export function canvasPrimitiveStyleString(
     `border-radius:${v.borderRadius}`,
   ];
 
-  if (v.color) {
-    parts.push(`color:${v.color}`);
+  const color = isText ? overrides?.fill || v.color || "currentColor" : v.color;
+  if (color) {
+    parts.push(`color:${color}`);
   }
 
   return parts.join(";");
@@ -198,26 +215,30 @@ export function canvasPrimitiveReactStyle(
   overrides?: { fill?: string; stroke?: string; strokeWidth?: number },
 ): React.CSSProperties {
   const v = canvasPrimitiveVisual(kind);
+  const isText = kind === "text";
 
   let background = v.background as string | undefined;
   let borderColor: string | undefined;
   let borderWidth: number | string | undefined = DEFAULT_STROKE_WIDTH_PX;
   let borderStyle: string | undefined = "solid";
 
-  if (kind === "frame" || kind === "text") {
+  if (kind === "frame" || isText) {
     borderStyle = "dashed";
   }
 
-  if (
-    kind === "text" &&
-    !overrides?.stroke &&
-    overrides?.strokeWidth === undefined
-  ) {
+  if (isText && !overrides?.stroke && overrides?.strokeWidth === undefined) {
     borderWidth = 0;
     borderStyle = "solid";
   }
 
-  if (overrides?.fill) {
+  // Text primitives render their fill as `color`, not `background` — the
+  // element itself stays transparent so it doesn't paint a filled box behind
+  // the glyphs. Committed HTML output (DesignEditor's
+  // appendCanvasPrimitiveToHtml) already maps `primitive.fill` to
+  // `element.style.color`; this must match exactly or a text primitive with
+  // a custom fill shows the wrong color in the draft preview and visibly
+  // jumps to the correct color the moment it commits.
+  if (overrides?.fill && !isText) {
     background = overrides.fill;
   }
   if (overrides?.stroke) {
@@ -245,11 +266,14 @@ export function canvasPrimitiveReactStyle(
     style.color = v.color;
   }
 
-  // For text kind, clear fill-as-background since text uses `color`
-  if (kind === "text") {
+  if (isText) {
     style.background = "transparent";
     style.outline = "none";
     style.outlineOffset = 0;
+    // Matches DesignEditor's `primitive.fill ?? "currentColor"` convention
+    // for the committed element, so the preview and the commit never
+    // disagree on text color.
+    style.color = overrides?.fill || "currentColor";
   }
 
   return style;

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

@@ -344,7 +344,15 @@ export function AutoLayoutMatrix({
                   <IconFlowGrid className="size-3.5" />
                 </FlowButton>
               </div>
-              {/* Reset / reverse-flow button */}
+              {/* Swap axis: flips between horizontal/vertical flex flow
+                  without forcing a specific direction. Previously this
+                  unconditionally called selectFlow("horizontal"), silently
+                  destroying an authored vertical/grid/normal-flow layout
+                  every time it was clicked regardless of the current state
+                  (there's no stashed "authored" value to restore to, so a
+                  true reset isn't possible) — swapping is the one action
+                  here that's both non-destructive and matches what an
+                  undo/reverse-style icon implies. */}
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -353,16 +361,20 @@ export function AutoLayoutMatrix({
                     size="icon"
                     disabled={disabled}
                     aria-label={
-                      "Reset auto layout flow" /* i18n-ignore inspector tooltip */
+                      "Swap flow direction" /* i18n-ignore inspector tooltip */
+                    }
+                    onClick={() =>
+                      selectFlow(
+                        activeFlow === "vertical" ? "horizontal" : "vertical",
+                      )
                     }
-                    onClick={() => selectFlow("horizontal")}
                     className="size-7 shrink-0 rounded-md text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground"
                   >
                     <IconArrowBackUp className="size-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {"Reset auto layout flow" /* i18n-ignore inspector tooltip */}
+                  {"Swap flow direction" /* i18n-ignore inspector tooltip */}
                 </TooltipContent>
               </Tooltip>
             </div>

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

@@ -1,6 +1,7 @@
 import {
   alphaToOpacity,
   parseCssColor,
+  parseCssColorExtended,
   rgbaToCss,
   rgbaToHex,
   rgbaToHsl,
@@ -204,86 +205,10 @@ interface HsvaColor {
 
 const FALLBACK_COLOR: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };
 
-// ─── Extended CSS color parser ──────────────────────────────────────────────────
-//
-// `parseCssColor` from color-utils handles hex, comma-separated rgb/rgba, and
-// hsl/hsla. Browsers increasingly emit modern CSS Level 4 formats from
-// getComputedStyle: space-separated `rgb(R G B)`, `rgb(R G B / A)`, and
-// opaque formats like `oklch(...)` or `color(display-p3 ...)`.
-//
-// This local wrapper extends the parser to cover those cases so that colors
-// arriving from the canvas's computed-style bridge are always usable.
-
-const MODERN_RGB_PATTERN =
-  /^rgba?\(\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)(?:\s*\/\s*([0-9.]+%?))?\s*\)$/i;
-
-/** Canvas element reused across calls for DOM-based color resolution. */
-let _resolverCanvas: HTMLCanvasElement | null = null;
-let _resolverCtx: CanvasRenderingContext2D | null = null;
-
-/**
- * Parses a CSS color string into RgbaColor, extending the base parser with:
- *   - Modern space-separated `rgb(R G B)` / `rgb(R G B / A)` syntax
- *   - Opaque formats (oklch, color, etc.) resolved via a hidden canvas
- *
- * Falls back to null if the value is unparseable and the DOM is unavailable.
- */
-function parseCssColorExtended(value: string): RgbaColor | null {
-  // 1. Try the standard parser first (handles hex, comma rgb/rgba, hsl/hsla).
-  const standard = parseCssColor(value);
-  if (standard) return standard;
-
-  const trimmed = value.trim();
-  if (!trimmed || trimmed === "transparent" || trimmed === "none") return null;
-
-  // 2. Modern space-separated rgb/rgba — CSS Level 4.
-  const modernRgb = trimmed.match(MODERN_RGB_PATTERN);
-  if (modernRgb) {
-    const parseAlphaLocal = (v: string | undefined): number => {
-      if (!v) return 1;
-      if (v.endsWith("%"))
-        return Math.max(0, Math.min(1, Number(v.slice(0, -1)) / 100));
-      return Math.max(0, Math.min(1, Number(v)));
-    };
-    return {
-      r: Math.round(Math.max(0, Math.min(255, Number(modernRgb[1])))),
-      g: Math.round(Math.max(0, Math.min(255, Number(modernRgb[2])))),
-      b: Math.round(Math.max(0, Math.min(255, Number(modernRgb[3])))),
-      a: parseAlphaLocal(modernRgb[4]),
-    };
-  }
-
-  // 3. DOM-based resolver for oklch, color(display-p3 ...), hsl (modern), etc.
-  //    Uses a hidden 1×1 canvas to resolve any valid CSS color to rgb().
-  if (typeof document === "undefined") return null;
-  try {
-    if (!_resolverCanvas) {
-      _resolverCanvas = document.createElement("canvas");
-      _resolverCanvas.width = 1;
-      _resolverCanvas.height = 1;
-    }
-    if (!_resolverCtx) {
-      _resolverCtx = _resolverCanvas.getContext("2d", {
-        willReadFrequently: true,
-      });
-    }
-    const ctx = _resolverCtx;
-    if (!ctx) return null;
-    // Detect invalid color values: save fillStyle before and after assignment.
-    // If the browser rejects the value, fillStyle won't change.
-    const prev = ctx.fillStyle;
-    ctx.fillStyle = trimmed;
-    const next = ctx.fillStyle; // browser normalises to rgb/hex on accept
-    // If the value was rejected, fillStyle stays at the previous value.
-    if (next === prev) return null;
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillRect(0, 0, 1, 1);
-    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-    return { r, g, b, a: a / 255 };
-  } catch {
-    return null;
-  }
-}
+// `parseCssColorExtended` (from color-utils) extends `parseCssColor` with
+// modern CSS Level 4 syntax (space-separated rgb, `oklch(...)`,
+// `color(display-p3 ...)`) so that colors arriving from the canvas's
+// computed-style bridge are always usable.
 
 const DEFAULT_LABELS: DesignColorPickerLabels = {
   trigger: "Open color picker", // i18n-ignore fallback component label
@@ -865,13 +790,20 @@ export function DesignColorPicker({
     emitColor(hslToRgba({ ...nextHsl, a: opacityToAlpha(effectiveOpacity) }));
   };
 
+  // Shared by the invalid-commit path below and the Escape handler in the hex
+  // input: reverts the draft to the currently active color (the selected
+  // gradient stop while editing a gradient, otherwise the solid color).
+  const revertHexDraft = () => {
+    const reverted = toDisplayHex(activeGradient ? fieldColor : color);
+    hexDraftRef.current = reverted;
+    setHexDraft(reverted);
+  };
+
   const commitHex = () => {
-    const currentDraft = hexDraftRef.current;
+    const currentDraft = expandHexShorthand(hexDraftRef.current);
     const parsed = parseCssColor(`#${currentDraft.replace(/^#/, "")}`);
     if (!parsed) {
-      const reverted = toDisplayHex(activeGradient ? fieldColor : color);
-      hexDraftRef.current = reverted;
-      setHexDraft(reverted);
+      revertHexDraft();
       return;
     }
     if (activeGradient) {
@@ -913,9 +845,14 @@ export function DesignColorPicker({
     : color;
   const rawFieldHsv = rgbaToHsv(fieldColor);
   // Preserve the last non-zero hue so dragging through gray doesn't lose it.
-  if (rawFieldHsv.s > 0 && rawFieldHsv.v > 0) {
-    lastHueRef.current = rawFieldHsv.h;
-  }
+  // Recorded as an effect (not mutated during render) so the ref update is a
+  // render side-effect, not a render-body mutation.
+  useEffect(() => {
+    if (rawFieldHsv.s > 0 && rawFieldHsv.v > 0) {
+      lastHueRef.current = rawFieldHsv.h;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawFieldHsv.h, rawFieldHsv.s, rawFieldHsv.v]);
   const fieldHsv: HsvaColor =
     rawFieldHsv.s === 0
       ? { ...rawFieldHsv, h: lastHueRef.current }
@@ -1099,9 +1036,7 @@ export function DesignColorPicker({
               e.currentTarget.blur();
             }
             if (e.key === "Escape") {
-              const reverted = toDisplayHex(color);
-              hexDraftRef.current = reverted;
-              setHexDraft(reverted);
+              revertHexDraft();
               skipNextHexBlurCommitRef.current = true;
               e.currentTarget.blur();
             }
@@ -1235,12 +1170,12 @@ export function DesignColorPicker({
           // switch causes the canvas to re-project the element. Without this,
           // Radix treats the resulting focus shift as an "interact outside" event
           // and closes the popover before the type switch is visible.
-          onInteractOutside={(e) => {
-            // Allow closing only for genuine pointer clicks on the canvas area
-            // (the user clicked somewhere else). Programmatic focus changes from
-            // the canvas bridge (element re-projection) should not close the picker.
-            if (e.type === "focusoutside") e.preventDefault();
-          }}
+          // Radix fires a dedicated `onFocusOutside` (not `onInteractOutside`
+          // with e.type === "focusoutside" — that never matches) whenever focus
+          // moves outside the content; suppress it so canvas-driven focus
+          // re-projection can't close the popover. Genuine pointer clicks
+          // outside still close it via the default onInteractOutside behavior.
+          onFocusOutside={(e) => e.preventDefault()}
         >
           <div className="rounded-md bg-popover text-popover-foreground">
             {view === "shader" ? (
@@ -1475,6 +1410,13 @@ export function DesignColorPicker({
                         backgroundImage="linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
                         onChange={(next) => {
                           const h = next === 360 ? 0 : next;
+                          // Record the dragged hue immediately so the slider
+                          // doesn't snap back to a stale hue on the next
+                          // render when the color is (or becomes) achromatic
+                          // — the round-tripped color's s/v may still be 0,
+                          // so the lastHueRef-sync effect's s>0&&v>0 guard
+                          // won't fire on its own.
+                          lastHueRef.current = h;
                           if (activeGradient) {
                             emitStopColor(
                               hsvToRgba({
@@ -1627,7 +1569,7 @@ export function DesignColorPicker({
                       : [rgbaToCss(color)]
                     ).map((docColor) => {
                       const currentHex = rgbaToHex(
-                        parseCssColor(docColor) ?? color,
+                        parseCssColorExtended(docColor) ?? color,
                       );
                       const isActive =
                         rgbaToHex(color) === currentHex && !activeGradient;
@@ -1647,7 +1589,8 @@ export function DesignColorPicker({
                               )}
                               style={swatchStyle(docColor)}
                               onClick={() => {
-                                const parsed = parseCssColor(docColor) ?? color;
+                                const parsed =
+                                  parseCssColorExtended(docColor) ?? color;
                                 if (activeGradient) emitStopColor(parsed);
                                 else emitColor(parsed);
                               }}
@@ -1999,8 +1942,8 @@ function ScrubbyNumberInput({
   }, [value]);
 
   const commit = () => {
-    const parsed = Number(draftRef.current);
-    if (!Number.isFinite(parsed)) {
+    const parsed = parseNumericDraft(draftRef.current);
+    if (parsed === null) {
       const reverted = String(value);
       draftRef.current = reverted;
       setDraft(reverted);
@@ -2095,7 +2038,7 @@ export function inferPaintType(
     return "linear";
   }
   if (lower.startsWith("url(")) return "image";
-  const parsed = parseCssColor(value);
+  const parsed = parseCssColorExtended(value);
   if (opacity <= 0 || parsed?.a === 0 || value.trim() === "transparent") {
     return "none";
   }
@@ -2189,13 +2132,19 @@ function triggerSwatchStyle(
   return swatchStyle(rgbaToCss(color));
 }
 
+/** Values that render their own background without needing color parsing. */
+function looksLikeImageOrGradient(value: string): boolean {
+  const lower = value.trim().toLowerCase();
+  return lower.includes("gradient(") || lower.startsWith("url(");
+}
+
 function swatchStyle(value: string): {
   backgroundColor?: string;
   backgroundImage?: string;
   backgroundSize?: string;
   backgroundPosition?: string;
 } {
-  const parsed = parseCssColor(value);
+  const parsed = parseCssColorExtended(value);
   if (parsed && parsed.a < 1) {
     return {
       backgroundImage: `${CHECKERBOARD_IMAGE}, linear-gradient(${rgbaToCss(parsed)}, ${rgbaToCss(parsed)})`,
@@ -2204,7 +2153,16 @@ function swatchStyle(value: string): {
     };
   }
   if (parsed) return { backgroundColor: rgbaToCss(parsed) };
-  return { backgroundImage: value || "none" };
+  if (value && looksLikeImageOrGradient(value)) {
+    return { backgroundImage: value };
+  }
+  // Unparseable and not a gradient/image value (e.g. a stale/invalid document
+  // color) — show a neutral checkerboard instead of an invalid `background-image`
+  // that would otherwise render as a blank swatch.
+  return {
+    backgroundImage: CHECKERBOARD_IMAGE,
+    backgroundSize: "8px 8px",
+  };
 }
 
 function alphaTrackBackground(color: RgbaColor): string {
@@ -2275,3 +2233,32 @@ function clampFloat(value: number, min: number, max: number): number {
 function hasHexAlpha(value: string): boolean {
   return /^#?(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(value.trim());
 }
+
+/**
+ * Parses a `ScrubbyNumberInput` draft string into a finite number, or `null`
+ * when the draft should be treated as invalid (and thus reverted rather than
+ * committed). `Number("")` is `0`, not `NaN`, so an emptied field must be
+ * special-cased — otherwise clearing the input and blurring/pressing Enter
+ * would silently commit `0` instead of reverting to the last real value.
+ */
+export function parseNumericDraft(draft: string): number | null {
+  const trimmed = draft.trim();
+  if (trimmed === "") return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/**
+ * Expands a bare 1-digit hex fragment (e.g. "F") into the standard 3-digit
+ * shorthand ("FFF", which `parseCssColor` then doubles up to "FFFFFF") so a
+ * single typed hex digit still commits instead of being rejected as
+ * unparseable. Standard 3/4/6/8-digit hex (already handled by
+ * `parseCssColor`) passes through unchanged.
+ */
+export function expandHexShorthand(value: string): string {
+  const trimmed = value.trim().replace(/^#/, "");
+  if (/^[0-9a-f]$/i.test(trimmed)) {
+    return trimmed.repeat(3);
+  }
+  return trimmed;
+}

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

@@ -1,7 +1,9 @@
 import { parseCssColor, rgbaToCss } from "@shared/color-utils";
 import { IconTrash } from "@tabler/icons-react";
 import {
+  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -83,6 +85,44 @@ function clamp(n: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, n));
 }
 
+/**
+ * Parses a stop-position draft string into a finite 0–100 number, or `null`
+ * when the draft is invalid/empty and the field should revert instead of
+ * committing (mirrors `parseNumericDraft` in DesignColorPicker.tsx).
+ */
+export function parseStopPositionDraft(draft: string): number | null {
+  const trimmed = draft.trim();
+  if (trimmed === "") return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? clamp(parsed, 0, 100) : null;
+}
+
+/**
+ * Picks which remaining stop should become selected after deleting one.
+ * Returns the id of the stop whose position is closest to the removed
+ * stop's position (ties broken by whichever appears first in `stops`),
+ * rather than always jumping to the leftmost stop — deleting a stop near
+ * the right edge of the ramp should keep selection nearby, not teleport
+ * the user's focus across the gradient.
+ */
+export function nearestStopId(
+  stops: GradientStopValue[],
+  removedPosition: number | undefined,
+): string | null {
+  if (stops.length === 0) return null;
+  if (removedPosition === undefined) return sortedStops(stops)[0]?.id ?? null;
+  let best: GradientStopValue | null = null;
+  let bestDistance = Infinity;
+  for (const stop of stops) {
+    const distance = Math.abs(stop.position - removedPosition);
+    if (distance < bestDistance) {
+      best = stop;
+      bestDistance = distance;
+    }
+  }
+  return best?.id ?? null;
+}
+
 // ─── Default / parse helpers ───────────────────────────────────────────────────
 
 let stopCounter = 0;
@@ -356,9 +396,17 @@ export function GradientEditor({
   };
 
   // Bar background click → add a new stop (only if no significant drag movement).
+  // setPointerCapture pins all subsequent pointermove/pointerup events to the
+  // bar element regardless of where the cursor physically ends up — without
+  // it, a fast drag that leaves the bar's bounding box before the next
+  // pointermove fires stops delivering events to this handler (hit-testing
+  // sends them to whatever's now under the cursor instead), so the movement
+  // never gets flagged and the eventual pointerup elsewhere is misread as a
+  // stationary click that adds a spurious stop.
   const handleBarPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     if (disabled) return;
     barClickRef.current = { moved: false, startX: event.clientX };
+    event.currentTarget.setPointerCapture(event.pointerId);
   };
 
   const handleBarPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -369,6 +417,9 @@ export function GradientEditor({
   };
 
   const handleBarClick = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
     // Only add if the pointer didn't move significantly (not a drag).
     if (!barClickRef.current || barClickRef.current.moved) {
       barClickRef.current = null;
@@ -440,10 +491,11 @@ export function GradientEditor({
 
   const removeStop = (id: string) => {
     if (value.stops.length <= 2) return;
+    const removed = value.stops.find((stop) => stop.id === id);
     const nextStops = value.stops.filter((stop) => stop.id !== id);
     onChange({ ...value, stops: nextStops });
     if (selectedStopId === id) {
-      onSelectStop(sortedStops(nextStops)[0]?.id ?? "");
+      onSelectStop(nearestStopId(nextStops, removed?.position) ?? "");
     }
   };
 
@@ -454,6 +506,40 @@ export function GradientEditor({
   const showAngle = value.kind === "linear" || value.kind === "angular";
   const selectedStop = value.stops.find((s) => s.id === selectedStopId);
 
+  // Stop-position draft: buffered so typing doesn't commit (and dirty the
+  // history) on every keystroke. Commits on blur/Enter; Escape reverts.
+  const [positionDraft, setPositionDraft] = useState<string>(() =>
+    String(Math.round(selectedStop?.position ?? 0)),
+  );
+  const positionDraftRef = useRef(positionDraft);
+  const skipPositionBlurRef = useRef(false);
+  const selectedStopPosition = selectedStop?.position;
+  useEffect(() => {
+    const next = String(Math.round(selectedStopPosition ?? 0));
+    positionDraftRef.current = next;
+    setPositionDraft(next);
+    // Resync whenever the selected stop changes or its position changes
+    // externally (drag on the bar, another control).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedStopId, selectedStopPosition]);
+
+  const commitPositionDraft = () => {
+    const parsed = parseStopPositionDraft(positionDraftRef.current);
+    if (parsed === null) {
+      const reverted = String(Math.round(selectedStop?.position ?? 0));
+      positionDraftRef.current = reverted;
+      setPositionDraft(reverted);
+      return;
+    }
+    updateStopPosition(selectedStopId, parsed);
+  };
+
+  const revertPositionDraft = () => {
+    const reverted = String(Math.round(selectedStop?.position ?? 0));
+    positionDraftRef.current = reverted;
+    setPositionDraft(reverted);
+  };
+
   return (
     <div className={cn("px-3 pt-1.5 pb-1 select-none", className)}>
       {/* ── Gradient bar + stop handles ──────────────────────────────────────── */}
@@ -558,11 +644,31 @@ export function GradientEditor({
             max={100}
             aria-label={"Stop position" /* i18n-ignore */}
             disabled={disabled}
-            value={Math.round(selectedStop?.position ?? 0)}
+            value={positionDraft}
             onChange={(event) => {
-              const next = Number(event.target.value);
-              if (Number.isFinite(next))
-                updateStopPosition(selectedStopId, clamp(next, 0, 100));
+              positionDraftRef.current = event.target.value;
+              setPositionDraft(event.target.value);
+            }}
+            onFocus={(event) => event.target.select()}
+            onKeyDown={(event: ReactKeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitPositionDraft();
+                skipPositionBlurRef.current = true;
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                revertPositionDraft();
+                skipPositionBlurRef.current = true;
+                event.currentTarget.blur();
+              }
+            }}
+            onBlur={() => {
+              if (skipPositionBlurRef.current) {
+                skipPositionBlurRef.current = false;
+                return;
+              }
+              commitPositionDraft();
             }}
             className="h-full min-w-0 flex-1 bg-transparent px-1.5 !text-[11px] tabular-nums focus-visible:outline-none"
           />