@agent-native/core 0.80.7 → 0.80.9

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

@@ -14,6 +14,7 @@ import type { ShaderDescriptor } from "@shared/shader-presets";
 import { IconChevronDown, IconColorPicker } from "@tabler/icons-react";
 import {
   useEffect,
+  useMemo,
   useRef,
   useState,
   type JSX,
@@ -130,6 +131,7 @@ export interface DesignColorPickerProps {
   value: string;
   onChange: (value: string) => void;
   onPaintValueChange?: (value: string) => void;
+  onImageFillChange?: (value: ImageFillValue) => void;
   label?: string;
   opacity?: number;
   onOpacityChange?: (opacity: number) => void;
@@ -191,6 +193,87 @@ 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;
+  }
+}
+
 const DEFAULT_LABELS: DesignColorPickerLabels = {
   trigger: "Open color picker", // i18n-ignore fallback component label
   hex: "Hex", // i18n-ignore fallback component label
@@ -575,6 +658,7 @@ export function DesignColorPicker({
   value,
   onChange,
   onPaintValueChange,
+  onImageFillChange,
   label: _label,
   opacity,
   onOpacityChange,
@@ -605,7 +689,7 @@ export function DesignColorPicker({
   className,
 }: DesignColorPickerProps) {
   const copy = { ...DEFAULT_LABELS, ...labels };
-  const color = parseCssColor(value) ?? FALLBACK_COLOR;
+  const color = parseCssColorExtended(value) ?? FALLBACK_COLOR;
   const hsv = rgbaToHsv(color);
   const hsl = rgbaToHsl(color);
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
@@ -651,16 +735,24 @@ export function DesignColorPicker({
 
   // Resolve the active gradient: prefer EditPanel-driven props; otherwise parse
   // the live CSS value, falling back to local edit state.
-  const parsedGradient = parseGradientCss(value, gradientType ?? "linear");
+  const parsedGradient = useMemo(
+    () => parseGradientCss(value, gradientType ?? "linear"),
+    [gradientType, value],
+  );
+  const fallbackGradient = useMemo(
+    () =>
+      GRADIENT_TYPES.has(effectivePaintType)
+        ? defaultGradient(
+            effectivePaintType as GradientKind,
+            toCssColor(color) || "#000000",
+          )
+        : null,
+    [color.r, color.g, color.b, color.a, effectivePaintType],
+  );
   const activeGradient: GradientValue | null = GRADIENT_TYPES.has(
     effectivePaintType,
   )
-    ? (localGradient ??
-      parsedGradient ??
-      defaultGradient(
-        effectivePaintType as GradientKind,
-        toCssColor(color) || "#000000",
-      ))
+    ? (localGradient ?? parsedGradient ?? fallbackGradient)
     : null;
 
   useEffect(() => {
@@ -754,7 +846,8 @@ export function DesignColorPicker({
 
   // The 2D field edits the selected gradient stop's color when in gradient mode.
   const fieldColor: RgbaColor = activeGradient
-    ? (parseCssColor(selectedStop?.color ?? "#000000") ?? FALLBACK_COLOR)
+    ? (parseCssColorExtended(selectedStop?.color ?? "#000000") ??
+      FALLBACK_COLOR)
     : color;
   const rawFieldHsv = rgbaToHsv(fieldColor);
   // Preserve the last non-zero hue so dragging through gray doesn't lose it.
@@ -771,7 +864,7 @@ export function DesignColorPicker({
   const selectedStopColor = selectedStop?.color;
   useEffect(() => {
     if (!activeGradient || !selectedStopColor) return;
-    const parsed = parseCssColor(selectedStopColor);
+    const parsed = parseCssColorExtended(selectedStopColor);
     if (parsed) setHexDraft(toDisplayHex(parsed));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedStopColor, selectedStopId]);
@@ -807,6 +900,10 @@ export function DesignColorPicker({
 
   const emitImageFill = (next: ImageFillValue) => {
     setImageFill(next);
+    if (onImageFillChange) {
+      onImageFillChange(next);
+      return;
+    }
     emitPaintValue(imageFillToCss(next));
   };
 
@@ -860,6 +957,10 @@ export function DesignColorPicker({
       return;
     }
     if (nextType === "image") {
+      if (onImageFillChange && imageFill.url) {
+        onImageFillChange(imageFill);
+        return;
+      }
       emitPaintValue(imageFill.url ? imageFillToCss(imageFill) : "transparent");
       return;
     }
@@ -889,7 +990,17 @@ export function DesignColorPicker({
     setPicking(true);
     try {
       const result = await new EyeDropperCtor().open();
-      if (result.sRGBHex) onChange(result.sRGBHex);
+      if (result.sRGBHex) {
+        if (activeGradient) {
+          // In gradient mode, route to the selected stop (preserving its alpha)
+          // like every other color edit — don't replace the whole gradient with
+          // a solid hex.
+          const parsed = parseCssColor(result.sRGBHex);
+          if (parsed) emitStopColor({ ...parsed, a: fieldColor.a });
+        } else {
+          onChange(result.sRGBHex);
+        }
+      }
     } catch {
       // Browser cancels are expected; keep the current color.
     } finally {
@@ -1050,8 +1161,18 @@ export function DesignColorPicker({
           align="start"
           sideOffset={8}
           className="z-[10000] w-[252px] p-0 shadow-xl"
+          // Keep the picker open when the style change triggered by a paint-type
+          // 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();
+          }}
         >
-          <div className="overflow-hidden rounded-md bg-popover text-popover-foreground">
+          <div className="rounded-md bg-popover text-popover-foreground">
             {view === "shader" ? (
               <ShaderFillsPanel
                 descriptor={shaderDescriptor ?? undefined}
@@ -1845,8 +1966,14 @@ export function inferPaintType(
     if (
       lower.startsWith("radial-gradient") ||
       lower.startsWith("repeating-radial-gradient")
-    )
+    ) {
+      // Diamond fills serialize as a radial gradient (either "closest-corner"
+      // from EditPanel or "ellipse closest-side" from GradientEditor). Recognize
+      // both so a diamond doesn't silently become a plain radial on reselect.
+      if (/closest-corner/.test(lower) || /ellipse\s+closest-side/.test(lower))
+        return "diamond";
       return "radial";
+    }
     if (
       lower.startsWith("conic-gradient") ||
       lower.startsWith("repeating-conic-gradient")

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

@@ -57,6 +57,14 @@ const DEFAULT_LABELS: ExportSettingsPanelLabels = {
 
 const DEFAULT_FORMATS: ExportFormat[] = ["png", "jpg", "svg", "pdf", "webp"];
 
+const controlChromeClass =
+  "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground shadow-none hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground focus:ring-1 focus:ring-[var(--design-editor-accent-color)] focus:ring-offset-0 focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0";
+
+// Export scale bounds — must match the clamp in DesignEditor's PNG/SVG export
+// handlers so the panel never promises a range the exporter won't render.
+const MIN_EXPORT_SCALE = 0.1;
+const MAX_EXPORT_SCALE = 4;
+
 /** Preset scale options shown in the scale dropdown — matches the design editor's presets */
 const SCALE_PRESETS: { label: string; value: ExportScale }[] = [
   { label: "0.5x", value: "0.5" },
@@ -130,7 +138,12 @@ function ScaleSelect({
         }
       }}
     >
-      <SelectTrigger className="h-6 w-14 shrink-0 px-1.5 text-[11px]">
+      <SelectTrigger
+        className={cn(
+          "h-6 w-14 shrink-0 px-1.5 text-[11px]",
+          controlChromeClass,
+        )}
+      >
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
@@ -262,7 +275,7 @@ export function ExportSettingsPanel({
         variant="outline"
         disabled={isDisabled}
         onClick={handleExport}
-        className="h-6 w-full px-2 text-[11px]"
+        className={cn("h-6 w-full px-2 text-[11px]", controlChromeClass)}
       >
         <IconDownload className="size-3.5" />
         {copy.export}
@@ -297,13 +310,20 @@ function ExportRow({
           type="number"
           value={row.scale}
           disabled={isDisabled}
-          min={0.01}
-          max={100}
+          // Bounds match the exporter's real clamp ([0.1, 4]); see
+          // DesignEditor handleDownload* . Previously the field accepted up to
+          // 100x but the exporter silently clamped to 4x with no feedback.
+          min={MIN_EXPORT_SCALE}
+          max={MAX_EXPORT_SCALE}
           step={0.5}
           onChange={(e) => {
             const parsed = parseFloat(e.target.value);
             if (!Number.isNaN(parsed) && parsed > 0) {
-              onPatchRow(row.id, { scale: parsed });
+              const clamped = Math.min(
+                MAX_EXPORT_SCALE,
+                Math.max(MIN_EXPORT_SCALE, parsed),
+              );
+              onPatchRow(row.id, { scale: clamped });
             }
           }}
           onBlur={() => {
@@ -312,7 +332,10 @@ function ExportRow({
               onPatchRow(row.id, { customScale: false });
             }
           }}
-          className="h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums"
+          className={cn(
+            "h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums",
+            controlChromeClass,
+          )}
           aria-label="Scale"
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
@@ -340,7 +363,12 @@ function ExportRow({
           onPatchRow(row.id, { format: format as ExportFormat })
         }
       >
-        <SelectTrigger className="h-6 min-w-0 flex-1 px-1.5 text-[11px]">
+        <SelectTrigger
+          className={cn(
+            "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+            controlChromeClass,
+          )}
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -364,7 +392,10 @@ function ExportRow({
         disabled={isDisabled}
         onChange={(e) => onPatchRow(row.id, { suffix: e.target.value })}
         placeholder={labels.suffix}
-        className="h-6 min-w-0 flex-1 px-1.5 text-[11px]"
+        className={cn(
+          "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+          controlChromeClass,
+        )}
         aria-label={labels.suffix}
       />
 

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

@@ -167,10 +167,12 @@ export function parseGradientCss(
     }
   } else if (fn === "radial") {
     kind =
-      /ellipse\s+closest-side/i.test(first) || fallbackKind === "diamond"
+      /ellipse\s+closest-side/i.test(first) ||
+      /closest-corner/i.test(first) ||
+      fallbackKind === "diamond"
         ? "diamond"
         : "radial";
-    if (/circle|ellipse|at\s/i.test(first)) stopStart = 1;
+    if (/circle|ellipse|at\s|closest-/i.test(first)) stopStart = 1;
   } else if (fn === "conic") {
     kind = "angular";
     const angleMatch = first.match(ANGLE_RE);

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

@@ -34,6 +34,16 @@ const FIT_MODES: Array<{ mode: ImageFitMode; label: string }> = [
 
 // ─── CSS serialization ─────────────────────────────────────────────────────────
 
+/**
+ * Escape a URL for embedding inside a double-quoted CSS url("...") token.
+ * Only `"` and `\` are CSS-significant inside a double-quoted string; newlines
+ * must also be stripped. Everything else (parens, commas, single-quotes, etc.)
+ * is safe inside double quotes, so we leave it alone to keep the URL intact.
+ */
+function escapeForQuotedUrl(url: string): string {
+  return url.replace(/\\/g, "\\\\").replace(/"/g, "%22").replace(/\r?\n/g, "");
+}
+
 const CHECKER_A = "#d4d4d4";
 const CHECKERBOARD_IMAGE = `linear-gradient(45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(-45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${CHECKER_A} 75%), linear-gradient(-45deg, transparent 75%, ${CHECKER_A} 75%)`;
 const FIT_MARKER_RE =
@@ -55,7 +65,7 @@ function imageFitMarker(fit: ImageFitMode): string {
 export function imageFillToCss(value: ImageFillValue): string {
   const url = value.url.trim();
   if (!url) return "transparent";
-  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
+  const safeUrl = escapeForQuotedUrl(url);
   const image = `url("${safeUrl}")`;
   switch (value.fit) {
     case "fit":
@@ -70,13 +80,70 @@ export function imageFillToCss(value: ImageFillValue): string {
   }
 }
 
-const URL_RE = /url\((['"]?)([^'")]+)\1\)/i;
+export function imageFillToBackgroundStyles(
+  value: ImageFillValue,
+): Record<
+  | "backgroundImage"
+  | "backgroundSize"
+  | "backgroundRepeat"
+  | "backgroundPosition",
+  string
+> {
+  const url = value.url.trim();
+  if (!url) {
+    return {
+      backgroundImage: "none",
+      backgroundSize: "auto",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+    };
+  }
+  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
+  const backgroundImage = `url("${safeUrl}")`;
+  switch (value.fit) {
+    case "fit":
+      return {
+        backgroundImage,
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+    case "tile":
+      return {
+        backgroundImage,
+        backgroundSize: "auto",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "top left",
+      };
+    case "crop":
+      return {
+        backgroundImage,
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+    case "fill":
+    default:
+      return {
+        backgroundImage,
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+  }
+}
+
+// Matches url() in three forms:
+//   group 1 — double-quoted:  url("...anything...")
+//   group 2 — single-quoted:  url('...anything...')
+//   group 3 — unquoted:       url(...no-parens-or-quotes...)
+const URL_RE = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)'"]*?))\s*\)/i;
 
 /** Extract the URL + fit mode from a CSS background value, if present. */
 export function parseImageFillCss(value: string): ImageFillValue | null {
   const match = value.match(URL_RE);
   if (!match) return null;
-  const url = match[2];
+  const url = (match[1] ?? match[2] ?? match[3] ?? "").trim();
   const marker = value.match(FIT_MARKER_RE)?.[1] as ImageFitMode | undefined;
   if (marker) return { url, fit: marker };
   // Heuristic fallback when no marker comment is present (e.g. CSS pasted from
@@ -141,7 +208,7 @@ export function ImageFillControls({
         className="relative h-24 w-full overflow-hidden rounded-md border border-border/60"
         style={{
           backgroundImage: value.url
-            ? `url("${value.url.trim().replace(/["')]/g, encodeURIComponent)}")`
+            ? `url("${escapeForQuotedUrl(value.url.trim())}")`
             : CHECKERBOARD_IMAGE,
           backgroundSize: value.url
             ? value.fit === "fit"
@@ -235,7 +302,10 @@ export function ImageFillControls({
         onValueChange={(v) => onChange({ ...value, fit: v as ImageFitMode })}
         disabled={disabled}
       >
-        <SelectTrigger className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0">
+        <SelectTrigger
+          aria-label={"Fill" /* i18n-ignore image fit selector */}
+          className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0"
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent className="text-[11px]">

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

@@ -4,9 +4,9 @@ import {
   useId,
   useRef,
   useState,
-  type ComponentType,
   type KeyboardEvent,
   type PointerEvent,
+  type ReactNode,
 } from "react";
 
 import { Input } from "@/components/ui/input";
@@ -26,7 +26,7 @@ import {
   type ScrubExpressionOptions,
 } from "./scrub-input-utils";
 
-type ScrubInputIcon = ComponentType<{ className?: string }>;
+type ScrubInputIcon = (props: { className?: string }) => ReactNode;
 
 export interface ScrubInputChangeMeta {
   source: "commit" | "keyboard" | "scrub";
@@ -39,13 +39,14 @@ export interface ScrubInputProps extends ScrubExpressionOptions {
   onChange: (value: number, meta: ScrubInputChangeMeta) => void;
   id?: string;
   step?: number;
-  icon?: ScrubInputIcon;
+  icon?: ScrubInputIcon | null;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
   inputClassName?: string;
   labelClassName?: string;
   ariaLabel?: string;
+  tooltipLabel?: string;
 }
 
 export function ScrubInput({
@@ -65,12 +66,17 @@ export function ScrubInput({
   inputClassName,
   labelClassName,
   ariaLabel,
+  tooltipLabel,
 }: ScrubInputProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const [draft, setDraft] = useState(() =>
     formatScrubValue(value, { unit, precision }),
   );
+  // Track the latest draft in a ref so commitDraft always reads the most
+  // up-to-date value even if the blur event fires before the React state
+  // update has been committed to the render tree (concurrent mode / batching).
+  const draftRef = useRef(draft);
   const [focused, setFocused] = useState(false);
   const [dragging, setDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -83,27 +89,41 @@ export function ScrubInput({
   });
 
   useEffect(() => {
-    if (!focused) setDraft(formatScrubValue(value, { unit, precision }));
+    if (!focused) {
+      const formatted = formatScrubValue(value, { unit, precision });
+      draftRef.current = formatted;
+      setDraft(formatted);
+    }
   }, [focused, 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);
     onChange(normalized, meta);
-    setDraft(formatScrubValue(normalized, options));
+    const formatted = formatScrubValue(normalized, options);
+    draftRef.current = formatted;
+    setDraft(formatted);
   };
 
   const commitDraft = () => {
-    const parsed = parseScrubExpression(draft, value, options);
+    // Always read from the ref so we use the latest typed value even if the
+    // React render with the updated draft state hasn't committed yet (e.g.
+    // when blur fires in the same synchronous batch as the last onChange).
+    const currentDraft = draftRef.current;
+    const parsed = parseScrubExpression(currentDraft, value, options);
     if (!parsed) {
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       return;
     }
 
+    draftRef.current = parsed.normalized;
     setDraft(parsed.normalized);
     if (parsed.value !== value) {
-      onChange(parsed.value, { source: "commit", expression: draft });
+      onChange(parsed.value, { source: "commit", expression: currentDraft });
     }
   };
 
@@ -131,7 +151,9 @@ export function ScrubInput({
 
     if (event.key === "Escape") {
       event.preventDefault();
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       skipNextBlurCommitRef.current = true;
       event.currentTarget.blur();
     }
@@ -202,11 +224,11 @@ export function ScrubInput({
               labelClassName,
             )}
           >
-            <Icon className="size-3 shrink-0" />
+            {Icon ? <Icon className="size-3 shrink-0" /> : null}
             <span className="truncate">{label}</span>
           </Label>
         </TooltipTrigger>
-        <TooltipContent>{`${label} — drag to scrub · ↑↓ step · Shift ×10 · ⌥ fine`}</TooltipContent>
+        <TooltipContent>{resolvedTooltipLabel}</TooltipContent>
       </Tooltip>
       <Input
         ref={inputRef}
@@ -228,7 +250,10 @@ export function ScrubInput({
           }
           commitDraft();
         }}
-        onChange={(event) => setDraft(event.target.value)}
+        onChange={(event) => {
+          draftRef.current = event.target.value;
+          setDraft(event.target.value);
+        }}
         onKeyDown={handleKeyDown}
         className={cn(
           // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.

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

@@ -60,6 +60,7 @@ export {
 } from "./GradientEditor";
 export {
   ImageFillControls,
+  imageFillToBackgroundStyles,
   imageFillToCss,
   parseImageFillCss,
   type ImageFillControlsProps,

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -58,10 +58,23 @@ export function formatScrubValue(
   options: Pick<ScrubExpressionOptions, "precision" | "unit"> = {},
 ): string {
   const normalized = normalizeScrubNumber(value, options);
-  const numeric =
-    Number.isFinite(options.precision) && options.precision! >= 0
-      ? normalized.toFixed(options.precision).replace(/\.?0+$/, "")
-      : String(normalized);
+  let numeric: string;
+  if (Number.isFinite(options.precision) && options.precision! >= 0) {
+    const fixed = normalized.toFixed(options.precision!);
+    if (options.unit) {
+      // For fields with units (px, %, °, etc.) collapse all trailing zeros
+      // including the decimal point: "12.30px" → "12.3px", "10.00px" → "10px".
+      // Leave integer strings alone; otherwise precision 0 turns "100" into "1".
+      numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+    } else {
+      // For unitless fields (e.g. line-height), preserve at least one decimal
+      // digit so values like "2.0" stay "2.0" rather than collapsing to "2".
+      // Only strip redundant trailing zeros beyond the first decimal digit.
+      numeric = fixed.includes(".") ? fixed.replace(/(?<=\.\d)0+$/, "") : fixed;
+    }
+  } else {
+    numeric = String(normalized);
+  }
   return `${numeric}${options.unit ?? ""}`;
 }
 

package/corpus/templates/design/app/components/design/types.ts

@@ -36,6 +36,15 @@ export interface ElementInfo {
 
 export type DeviceFrameType = "none" | "desktop" | "tablet" | "mobile";
 
+export const DEVICE_FRAME_VIEWPORTS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const satisfies Record<
+  Exclude<DeviceFrameType, "none">,
+  { width: number; height: number }
+>;
+
 export interface ViewportTab {
   id: string;
   filename: string;