@agent-native/core 0.80.8 → 0.80.9

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

@@ -151,6 +151,12 @@ export interface AutoLayoutMatrixProps {
     axis: AutoLayoutSizingAxis,
     sizing: AutoLayoutSizing,
   ) => void;
+  /**
+   * Invoked when the user directly edits the resolved size (scrub or type) in
+   * fixed-sizing mode. `value` is the new size in CSS pixels. Optional —
+   * when omitted the resolved-size display is read-only (mode-picker only).
+   */
+  onChildSizeChange?: (axis: AutoLayoutSizingAxis, value: number) => void;
   /**
    * Set or clear a min/max constraint on an axis. `value === null` clears it.
    * Optional — when omitted the "Add min/max…" rows and constraint sub-rows are
@@ -244,6 +250,7 @@ export function AutoLayoutMatrix({
   onChildMinMaxChange,
   onApplyVariable,
   onDisplayChange,
+  onChildSizeChange,
   availableChildSizing,
   labels,
   disabled = false,
@@ -371,6 +378,11 @@ export function AutoLayoutMatrix({
               labels={copy}
               disabled={disabled}
               onChange={(next) => onChildSizingChange("horizontal", next)}
+              onSizeChange={
+                onChildSizeChange
+                  ? (px) => onChildSizeChange("horizontal", px)
+                  : undefined
+              }
               onMinMaxChange={onChildMinMaxChange}
               onApplyVariable={onApplyVariable}
             />
@@ -387,6 +399,11 @@ export function AutoLayoutMatrix({
               labels={copy}
               disabled={disabled}
               onChange={(next) => onChildSizingChange("vertical", next)}
+              onSizeChange={
+                onChildSizeChange
+                  ? (px) => onChildSizeChange("vertical", px)
+                  : undefined
+              }
               onMinMaxChange={onChildMinMaxChange}
               onApplyVariable={onApplyVariable}
             />
@@ -417,36 +434,35 @@ export function AutoLayoutMatrix({
           </div>
         </div>
 
-        {/* ── Alignment + Gap (single label row) ── */}
-        <div className="grid grid-cols-[78px_1fr] items-start gap-3">
-          {/* Left: Alignment label + compact 3×3 matrix (no border box) */}
-          <div className="space-y-1.5">
-            <ControlLabel>
-              {"Alignment" /* i18n-ignore design inspector label */}
-            </ControlLabel>
-            <CompactAlignmentMatrix
-              value={value.alignment}
-              onChange={onAlignmentChange}
-              direction={value.direction}
-              disabled={disabled || isBlock}
-              onDistribute={onDistribute}
-            />
-          </div>
+        {!isBlock ? (
+          <div className="grid grid-cols-[78px_1fr] items-start gap-3">
+            <div className="space-y-1.5">
+              <ControlLabel>
+                {"Alignment" /* i18n-ignore design inspector label */}
+              </ControlLabel>
+              <CompactAlignmentMatrix
+                value={value.alignment}
+                onChange={onAlignmentChange}
+                direction={value.direction}
+                disabled={disabled}
+                onDistribute={onDistribute}
+              />
+            </div>
 
-          {/* Right: Gap label + [icon] value [▾] + sliders */}
-          <div className="space-y-1.5">
-            <ControlLabel>{copy.gap}</ControlLabel>
-            <GapField
-              value={value.gap}
-              onGapChange={onGapChange}
-              onDistribute={onDistribute}
-              label={copy.gap}
-              disabled={disabled || isBlock}
-              direction={value.direction}
-              gapMode={value.spaceBetween ? "auto" : "fixed"}
-            />
+            <div className="space-y-1.5">
+              <ControlLabel>{copy.gap}</ControlLabel>
+              <GapField
+                value={value.gap}
+                onGapChange={onGapChange}
+                onDistribute={onDistribute}
+                label={copy.gap}
+                disabled={disabled}
+                direction={value.direction}
+                gapMode={value.spaceBetween ? "auto" : "fixed"}
+              />
+            </div>
           </div>
-        </div>
+        ) : null}
 
         {/* ── Padding ── */}
         <div className="space-y-1.5">
@@ -860,16 +876,15 @@ function GapField({
       {/* [gap-icon] value [▾] in one control surface */}
       <div
         className={cn(
-          "flex h-7 min-w-0 flex-1 items-center rounded-md bg-[var(--design-editor-control-bg)] pl-1.5",
+          "flex h-7 min-w-0 flex-1 items-center rounded-md bg-[var(--design-editor-control-bg)]",
           disabled && "opacity-40",
         )}
       >
-        <span className="flex shrink-0 items-center text-muted-foreground">
-          <IconGap className="size-3.5" />
-        </span>
         <ScrubInput
           label={label}
           ariaLabel={label}
+          tooltipLabel={label}
+          icon={IconGap}
           value={value}
           onChange={(next) => onGapChange(next)}
           unit="px"
@@ -878,7 +893,7 @@ function GapField({
           precision={1}
           disabled={disabled}
           className="min-w-0 flex-1 gap-0"
-          labelClassName="hidden"
+          labelClassName="h-7 w-6 justify-center gap-0 rounded-l-md text-muted-foreground [&>span]:hidden"
           inputClassName="h-6 border-0 bg-transparent px-1 text-[11px] shadow-none focus-visible:ring-0"
         />
         {onDistribute != null ? (
@@ -972,16 +987,15 @@ function PaddingField({
   return (
     <div
       className={cn(
-        "flex h-7 min-w-0 items-center rounded-md bg-[var(--design-editor-control-bg)] pl-1.5",
+        "flex h-7 min-w-0 items-center rounded-md bg-[var(--design-editor-control-bg)]",
         disabled && "opacity-40",
       )}
     >
-      <span className="flex shrink-0 items-center text-muted-foreground">
-        <Icon className="size-3.5" />
-      </span>
       <ScrubInput
         label={ariaLabel}
         ariaLabel={ariaLabel}
+        tooltipLabel={ariaLabel}
+        icon={Icon}
         value={value}
         onChange={(next) => onChange(next)}
         unit="px"
@@ -990,7 +1004,7 @@ function PaddingField({
         precision={1}
         disabled={disabled}
         className="min-w-0 flex-1 gap-0"
-        labelClassName="hidden"
+        labelClassName="h-7 w-6 justify-center gap-0 rounded-l-md text-muted-foreground [&>span]:hidden"
         inputClassName="h-6 border-0 bg-transparent px-1 text-[11px] shadow-none focus-visible:ring-0"
       />
     </div>
@@ -1055,6 +1069,12 @@ export interface SizingFieldProps {
   labels?: Partial<AutoLayoutMatrixLabels>;
   disabled: boolean;
   onChange: (value: AutoLayoutSizing) => void;
+  /**
+   * Invoked when the user directly scrubs or types a new pixel value while in
+   * "fixed" sizing mode. When omitted the numeric display is read-only and the
+   * entire trigger is a mode-picker dropdown (legacy behaviour).
+   */
+  onSizeChange?: (px: number) => void;
   onMinMaxChange?: (
     axis: AutoLayoutSizingAxis,
     kind: "min" | "max",
@@ -1085,6 +1105,7 @@ export function SizingField({
   labels: labelOverrides,
   disabled,
   onChange,
+  onSizeChange,
   onMinMaxChange,
   onApplyVariable,
 }: SizingFieldProps) {
@@ -1108,6 +1129,9 @@ export function SizingField({
   const minLabel = isWidth ? labels.minWidth : labels.minHeight;
   const maxLabel = isWidth ? labels.maxWidth : labels.maxHeight;
 
+  // Whether we're in editable fixed mode (ScrubInput shown for size).
+  const isEditableFixed = value === "fixed" && onSizeChange != null;
+
   const openEditor = (kind: "min" | "max") => {
     // Commit immediately so the shown row always reflects real state and
     // persists across selection changes, remounts, and parent re-renders.
@@ -1116,105 +1140,173 @@ export function SizingField({
     onMinMaxChange?.(sizingAxis, kind, seedValue);
   };
 
-  return (
-    <div className="flex min-w-0 flex-col gap-1">
-      <DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                aria-label={`${axis} ${Math.round(resolvedSize ?? 0)} ${labels[value]}`}
-                disabled={disabled}
-                className={cn(
-                  "flex h-7 w-full items-center gap-1 overflow-hidden rounded-md px-1.5",
-                  "bg-[var(--design-editor-control-bg)] text-[11px]",
-                  "hover:bg-[var(--design-editor-panel-raised-bg)]",
-                  "disabled:pointer-events-none disabled:opacity-40",
-                  "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color,hsl(var(--primary)))]",
-                )}
-              >
-                {/* Axis letter */}
-                <span className="shrink-0 text-muted-foreground">{axis}</span>
-                {/* Resolved size */}
-                <span className="min-w-0 flex-1 truncate text-left tabular-nums text-foreground">
-                  {Math.round(resolvedSize ?? 0)}
-                </span>
-                {/* Mode word (Hug/Fill only) */}
-                {showWord ? (
-                  <span className="shrink-0 truncate text-muted-foreground">
-                    {labels[value]}
-                  </span>
-                ) : null}
-                {/* Caret */}
-                <span className="flex shrink-0 items-center text-muted-foreground">
-                  <ChevronDownMini />
-                </span>
-              </button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>{`${axis} · ${labels[value]}`}</TooltipContent>
-        </Tooltip>
-        <DropdownMenuContent
-          align="start"
-          className="min-w-[180px] text-[12px]"
-          sideOffset={4}
-        >
-          {/* ── Modes ── */}
-          <SizingMenuItem
-            icon={<IconSizingFixed />}
-            label={labels.fixed}
-            active={value === "fixed"}
-            onSelect={() => onChange("fixed")}
-          />
-          {canHug ? (
-            <SizingMenuItem
-              icon={<IconSizingHug />}
-              label={labels.hugContents}
-              active={value === "hug"}
-              onSelect={() => onChange("hug")}
-            />
-          ) : null}
-          {canFill ? (
-            <SizingMenuItem
-              icon={<IconSizingFill />}
-              label={labels.fillContainer}
-              active={value === "fill"}
-              onSelect={() => onChange("fill")}
-            />
-          ) : null}
-
-          {/* ── Min / Max ── */}
-          {onMinMaxChange ? (
-            <>
-              <DropdownMenuSeparator />
-              <SizingMenuItem
-                icon={<IconSizingMin />}
-                label={addMinLabel}
-                active={hasMin}
-                disabled={hasMin}
-                onSelect={() => openEditor("min")}
-              />
-              <SizingMenuItem
-                icon={<IconSizingMax />}
-                label={addMaxLabel}
-                active={hasMax}
-                disabled={hasMax}
-                onSelect={() => openEditor("max")}
-              />
-            </>
-          ) : null}
+  // Shared dropdown content (mode picker menu).
+  const dropdownContent = (
+    <DropdownMenuContent
+      align="start"
+      className="min-w-[180px] text-[12px]"
+      sideOffset={4}
+    >
+      {/* ── Modes ── */}
+      <SizingMenuItem
+        icon={<IconSizingFixed />}
+        label={labels.fixed}
+        active={value === "fixed"}
+        onSelect={() => onChange("fixed")}
+      />
+      {canHug ? (
+        <SizingMenuItem
+          icon={<IconSizingHug />}
+          label={labels.hugContents}
+          active={value === "hug"}
+          onSelect={() => onChange("hug")}
+        />
+      ) : null}
+      {canFill ? (
+        <SizingMenuItem
+          icon={<IconSizingFill />}
+          label={labels.fillContainer}
+          active={value === "fill"}
+          onSelect={() => onChange("fill")}
+        />
+      ) : null}
 
-          {/* ── Variable ── */}
+      {/* ── Min / Max ── */}
+      {onMinMaxChange ? (
+        <>
           <DropdownMenuSeparator />
           <SizingMenuItem
-            icon={<IconSizingVariable />}
-            label={labels.applyVariable}
-            disabled={!onApplyVariable}
-            onSelect={() => onApplyVariable?.(sizingAxis)}
+            icon={<IconSizingMin />}
+            label={addMinLabel}
+            active={hasMin}
+            disabled={hasMin}
+            onSelect={() => openEditor("min")}
           />
-        </DropdownMenuContent>
-      </DropdownMenu>
+          <SizingMenuItem
+            icon={<IconSizingMax />}
+            label={addMaxLabel}
+            active={hasMax}
+            disabled={hasMax}
+            onSelect={() => openEditor("max")}
+          />
+        </>
+      ) : null}
+
+      {/* ── Variable ── */}
+      <DropdownMenuSeparator />
+      <SizingMenuItem
+        icon={<IconSizingVariable />}
+        label={labels.applyVariable}
+        disabled={!onApplyVariable}
+        onSelect={() => onApplyVariable?.(sizingAxis)}
+      />
+    </DropdownMenuContent>
+  );
+
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      {isEditableFixed ? (
+        /*
+         * Editable fixed mode: split the trigger into two zones —
+         *   [axis letter | ScrubInput (numeric) | ▾ mode-picker caret]
+         * The ScrubInput occupies the center and lets the user type or
+         * drag-to-scrub the size in px. The chevron opens the mode dropdown.
+         */
+        <DropdownMenu>
+          <div
+            className={cn(
+              "flex h-7 w-full items-center overflow-hidden rounded-md",
+              "bg-[var(--design-editor-control-bg)] text-[11px]",
+              disabled && "pointer-events-none opacity-40",
+            )}
+          >
+            {/* Scrub-editable size value */}
+            <ScrubInput
+              label={axis}
+              ariaLabel={`${axis} size in pixels`}
+              tooltipLabel={`${axis} size`}
+              icon={null}
+              value={Math.round(resolvedSize ?? 0)}
+              onChange={(next) => onSizeChange!(Math.max(1, Math.round(next)))}
+              unit="px"
+              min={1}
+              step={1}
+              precision={0}
+              disabled={disabled}
+              className="min-w-0 flex-1 gap-0"
+              labelClassName="h-7 w-5 justify-center gap-0 rounded-l-md px-0 text-muted-foreground"
+              inputClassName="h-6 border-0 bg-transparent px-1 text-[11px] shadow-none focus-visible:ring-0"
+            />
+            {/* Caret opens the mode picker */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={`${axis} sizing mode — ${labels[value]}`}
+                    disabled={disabled}
+                    className={cn(
+                      "flex h-7 w-6 shrink-0 items-center justify-center rounded-r-md",
+                      "text-muted-foreground hover:text-foreground",
+                      "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color,hsl(var(--primary)))]",
+                    )}
+                  >
+                    <ChevronDownMini />
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                {`${axis} · ${labels[value]} — click to change sizing mode`}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          {dropdownContent}
+        </DropdownMenu>
+      ) : (
+        /*
+         * Non-editable / hug / fill mode: keep the original single-button
+         * dropdown trigger showing [axis | resolved size | mode word | ▾].
+         */
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`${axis} ${Math.round(resolvedSize ?? 0)} ${labels[value]}`}
+                  disabled={disabled}
+                  className={cn(
+                    "flex h-7 w-full items-center gap-1 overflow-hidden rounded-md px-1.5",
+                    "bg-[var(--design-editor-control-bg)] text-[11px]",
+                    "hover:bg-[var(--design-editor-panel-raised-bg)]",
+                    "disabled:pointer-events-none disabled:opacity-40",
+                    "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color,hsl(var(--primary)))]",
+                  )}
+                >
+                  {/* Axis letter */}
+                  <span className="shrink-0 text-muted-foreground">{axis}</span>
+                  {/* Resolved size */}
+                  <span className="min-w-0 flex-1 truncate text-left tabular-nums text-foreground">
+                    {Math.round(resolvedSize ?? 0)}
+                  </span>
+                  {/* Mode word (Hug/Fill only) */}
+                  {showWord ? (
+                    <span className="shrink-0 truncate text-muted-foreground">
+                      {labels[value]}
+                    </span>
+                  ) : null}
+                  {/* Caret */}
+                  <span className="flex shrink-0 items-center text-muted-foreground">
+                    <ChevronDownMini />
+                  </span>
+                </button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>{`${axis} · ${labels[value]} — click to change sizing mode`}</TooltipContent>
+          </Tooltip>
+          {dropdownContent}
+        </DropdownMenu>
+      )}
 
       {/* ── Constraint sub-rows ── */}
       {hasMin ? (

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;
     }
@@ -1060,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}