@agent-native/core 0.80.0 → 0.80.2

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

@@ -10,7 +10,8 @@ import {
   type HslaColor,
   type RgbaColor,
 } from "@shared/color-utils";
-import { IconChevronDown, IconColorPicker, IconX } from "@tabler/icons-react";
+import type { ShaderDescriptor } from "@shared/shader-presets";
+import { IconChevronDown, IconColorPicker } from "@tabler/icons-react";
 import {
   useEffect,
   useRef,
@@ -26,13 +27,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Tooltip,
   TooltipContent,
@@ -40,6 +34,22 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
+import {
+  GradientEditor,
+  defaultGradient,
+  gradientToCss,
+  parseGradientCss,
+  type GradientKind,
+  type GradientValue,
+} from "./GradientEditor";
+import {
+  ImageFillControls,
+  imageFillToCss,
+  parseImageFillCss,
+  type ImageFillValue,
+} from "./ImageFillControls";
+import { ShaderFillsPanel, shaderDescriptorToCss } from "./ShaderFillsPanel";
+
 // ─── Public types ──────────────────────────────────────────────────────────────
 
 export type FigmaColorMode = "hex" | "rgb" | "hsl" | "hsb";
@@ -53,6 +63,9 @@ export type FigmaPaintType =
   | "diamond"
   | "image"
   | "video"
+  | "shader"
+  | "noise"
+  | "pattern"
   | "none";
 
 // These interfaces remain so EditPanel's prop types don't break, even though
@@ -116,6 +129,7 @@ export interface FigmaColorPickerLabels {
 export interface FigmaColorPickerProps {
   value: string;
   onChange: (value: string) => void;
+  onPaintValueChange?: (value: string) => void;
   label?: string;
   opacity?: number;
   onOpacityChange?: (opacity: number) => void;
@@ -140,6 +154,25 @@ export interface FigmaColorPickerProps {
   onGradientStopChange?: (id: string, patch: FigmaGradientStopPatch) => void;
   onAddGradientStop?: () => void;
   onRemoveGradientStop?: (id: string) => void;
+  /**
+   * Colors already present in the document (e.g. unique hex values collected
+   * from the current selection or page). Rendered as a swatch grid under the
+   * "Document colors" heading — click any swatch to apply it. Deduplicated and
+   * limited in the caller; the component renders whatever is passed.
+   */
+  documentColors?: string[];
+  /**
+   * Optional design context forwarded to the apply-shader action when a shader
+   * fill is selected, so the agent can write real shader code for the target.
+   */
+  shaderContext?: {
+    designId?: string;
+    fileId?: string;
+    nodeId?: string;
+    selector?: string;
+  };
+  /** Notified when a shader fill is applied/tuned (descriptor + CSS fallback). */
+  onShaderChange?: (descriptor: ShaderDescriptor, css: string) => void;
   labels?: Partial<FigmaColorPickerLabels>;
   disabled?: boolean;
   className?: string;
@@ -414,6 +447,90 @@ function IconNoneFill({ className }: { className?: string }) {
   );
 }
 
+function IconShaderFill({ className }: { className?: string }) {
+  // Droplet — Figma uses a teardrop for shader/blur-type fills.
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="shader-ico" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0.25" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M12 3c3.5 4 6 7 6 10a6 6 0 0 1-12 0c0-3 2.5-6 6-10z"
+        fill="url(#shader-ico)"
+        stroke="currentColor"
+        strokeOpacity="0.7"
+      />
+    </svg>
+  );
+}
+
+function IconNoiseFill({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="none"
+      className={className}
+    >
+      <rect
+        x="3.5"
+        y="3.5"
+        width="17"
+        height="17"
+        rx="2"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.6}
+        strokeOpacity="0.6"
+      />
+      {[
+        [7, 7],
+        [11, 6.5],
+        [15, 8],
+        [8, 10.5],
+        [13, 11],
+        [16.5, 11.5],
+        [6.5, 13],
+        [10, 14],
+        [14, 13.5],
+        [9, 16.5],
+        [13, 16.5],
+        [16, 15.5],
+      ].map(([cx, cy], index) => (
+        <circle key={index} cx={cx} cy={cy} r="0.9" />
+      ))}
+    </svg>
+  );
+}
+
+function IconPatternFill({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <rect x="3.5" y="3.5" width="17" height="17" rx="2" strokeOpacity="0.6" />
+      <path d="M3.5 9h17M3.5 15h17M9 3.5v17M15 3.5v17" strokeOpacity="0.85" />
+    </svg>
+  );
+}
+
 // ─── Paint type definitions (only supported types rendered) ────────────────────
 
 const PAINT_TYPES: Array<{
@@ -428,39 +545,36 @@ const PAINT_TYPES: Array<{
   { type: "diamond", label: "Diamond", Icon: IconDiamondGradient }, // i18n-ignore paint type label
   { type: "image", label: "Image", Icon: IconImageFill }, // i18n-ignore paint type label
   { type: "video", label: "Video", Icon: IconVideoFill }, // i18n-ignore paint type label
+  { type: "shader", label: "Shader", Icon: IconShaderFill }, // i18n-ignore paint type label
+  { type: "noise", label: "Noise", Icon: IconNoiseFill }, // i18n-ignore paint type label
+  { type: "pattern", label: "Pattern", Icon: IconPatternFill }, // i18n-ignore paint type label
   { type: "none", label: "None", Icon: IconNoneFill }, // i18n-ignore paint type label
 ];
 
-// ─── Document swatch placeholder (shown until real doc colors are provided) ────
-
-const PLACEHOLDER_SWATCHES = [
-  "#1f2937",
-  "#6b7280",
-  "#ffffff",
-  "#a3a3a3",
-  "#f8fafc",
-  "#111111",
-  "#000000",
-  "#a8a29e",
-  "#22c1e8",
-  "#f08ce3",
-  "#737373",
-  "#050505",
-  "#23d4b5",
-  "#d9d9d2",
-  "#e6d05c",
-  "#9ca3af",
-  "#020617",
-  "#171717",
-  "#d4d4d8",
-  "#27272a",
-];
+// Alias used internally before the exported constant is defined below.
+// Both point at the same member set — keep reads using this name so the
+// component body compiles even though the exported constant is declared
+// at the bottom of the file (hoisting doesn't apply to const).
+const GRADIENT_TYPES = new Set<FigmaPaintType>([
+  "linear",
+  "radial",
+  "angular",
+  "diamond",
+]);
+
+// Static fallback fills for the "functional but minimal" paint types so the
+// element fill always reflects the selected mode even without bespoke editors.
+const NOISE_FALLBACK_CSS =
+  "repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 0 0 / 6px 6px, #8a8a8a";
+const PATTERN_FALLBACK_CSS =
+  "repeating-linear-gradient(45deg, #00000014 0 6px, #ffffff14 6px 12px), #9aa0a6";
 
 // ─── Main component ────────────────────────────────────────────────────────────
 
 export function FigmaColorPicker({
   value,
   onChange,
+  onPaintValueChange,
   label: _label,
   opacity,
   onOpacityChange,
@@ -475,14 +589,17 @@ export function FigmaColorPicker({
   onRemoveFill: _onRemoveFill,
   paintType,
   onPaintTypeChange,
-  gradientType: _gradientType,
-  onGradientTypeChange: _onGradientTypeChange,
+  gradientType,
+  onGradientTypeChange,
   gradientStops: _gradientStops,
   selectedStopId: _selectedStopId,
   onGradientStopSelect: _onGradientStopSelect,
   onGradientStopChange: _onGradientStopChange,
   onAddGradientStop: _onAddGradientStop,
   onRemoveGradientStop: _onRemoveGradientStop,
+  documentColors,
+  shaderContext,
+  onShaderChange,
   labels,
   disabled = false,
   className,
@@ -496,23 +613,95 @@ export function FigmaColorPicker({
   const [mode, setMode] = useState<FigmaColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
   const [open, setOpen] = useState(false);
-  const [sourceTab, setSourceTab] = useState<"custom" | "libraries">("custom");
   const [picking, setPicking] = useState(false);
   const skipNextHexBlurCommitRef = useRef(false);
 
-  const effectivePaintType =
-    paintType ?? inferPaintType(value, effectiveOpacity);
+  // Whole-popover view: the standard picker, or the Figma "Shader fills" panel.
+  const [view, setView] = useState<"picker" | "shader">("picker");
+
+  // Self-managed paint-type fallback for when EditPanel doesn't drive it.
+  const [localPaintType, setLocalPaintType] = useState<FigmaPaintType | null>(
+    null,
+  );
+
+  // Locally-managed gradient/image/shader state, seeded from the current value
+  // so the editors round-trip when EditPanel passes the CSS back through value.
+  const [localGradient, setLocalGradient] = useState<GradientValue | null>(
+    null,
+  );
+  const [selectedStopId, setSelectedStopId] = useState<string>("");
+  const [imageFill, setImageFill] = useState<ImageFillValue>({
+    url: "",
+    fit: "fill",
+  });
+  const [shaderDescriptor, setShaderDescriptor] =
+    useState<ShaderDescriptor | null>(null);
+
+  // The user's explicit paint-type click (localPaintType) wins over the
+  // EditPanel-driven `paintType` prop so selecting a gradient/image/shader
+  // engages its editor even when EditPanel doesn't complete the structural
+  // fill switch. localPaintType is reset below when the prop changes (i.e. a
+  // different element/fill is selected) so the picker still follows selection.
+  const effectivePaintType: FigmaPaintType =
+    localPaintType ?? paintType ?? inferPaintType(value, effectiveOpacity);
+
+  // 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 activeGradient: GradientValue | null = GRADIENT_TYPES.has(
+    effectivePaintType,
+  )
+    ? (localGradient ??
+      parsedGradient ??
+      defaultGradient(
+        effectivePaintType as GradientKind,
+        toCssColor(color) || "#000000",
+      ))
+    : null;
 
   useEffect(() => {
     setHexDraft(toDisplayHex(color));
   }, [color.r, color.g, color.b]);
 
+  // The local override (the user's explicit paint-type click) persists for the
+  // life of the open popover so EditPanel bouncing `paintType` back to solid
+  // can't wipe a just-selected gradient/image/shader. A new element selection
+  // remounts this popover content, which resets the local state naturally.
+
+  // Keep image-fill state synced when the incoming value is an image fill.
+  useEffect(() => {
+    if (effectivePaintType !== "image") return;
+    const parsed = parseImageFillCss(value);
+    if (
+      parsed &&
+      (parsed.url !== imageFill.url || parsed.fit !== imageFill.fit)
+    ) {
+      setImageFill(parsed);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, effectivePaintType]);
+
+  // Ensure a selected stop id exists whenever a gradient is active.
+  useEffect(() => {
+    if (!activeGradient) return;
+    const ids = activeGradient.stops.map((s) => s.id);
+    if (!ids.includes(selectedStopId)) {
+      setSelectedStopId(activeGradient.stops[0]?.id ?? "");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeGradient?.stops.map((s) => s.id).join(",")]);
+
   // ── Emit helpers ────────────────────────────────────────────────────────────
 
   const emitColor = (nextColor: RgbaColor, nextOpacity = effectiveOpacity) => {
     onChange(rgbaToCss(withColorOpacity(nextColor, nextOpacity)));
   };
 
+  const emitPaintValue = (nextValue: string) => {
+    if (onPaintValueChange) onPaintValueChange(nextValue);
+    else onChange(nextValue);
+  };
+
   const emitColorFromHsv = (nextHsv: HsvaColor) => {
     emitColor(hsvToRgba({ ...nextHsv, a: opacityToAlpha(effectiveOpacity) }));
   };
@@ -524,7 +713,12 @@ export function FigmaColorPicker({
   const commitHex = () => {
     const parsed = parseCssColor(`#${hexDraft.replace(/^#/, "")}`);
     if (!parsed) {
-      setHexDraft(toDisplayHex(color));
+      setHexDraft(toDisplayHex(activeGradient ? fieldColor : color));
+      return;
+    }
+    if (activeGradient) {
+      const hexIncludesAlpha = hasHexAlpha(hexDraft);
+      emitStopColor(hexIncludesAlpha ? parsed : { ...parsed, a: fieldColor.a });
       return;
     }
     const hexIncludesAlpha = hasHexAlpha(hexDraft);
@@ -540,12 +734,99 @@ export function FigmaColorPicker({
     else onChange(rgbaToCss(withColorOpacity(color, nextOpacity)));
   };
 
+  // ── Gradient editing ─────────────────────────────────────────────────────────
+
+  const emitGradient = (next: GradientValue) => {
+    setLocalGradient(next);
+    if (onGradientTypeChange && next.kind !== gradientType) {
+      onGradientTypeChange(next.kind as FigmaGradientType);
+    }
+    emitPaintValue(gradientToCss(next));
+  };
+
+  const selectedStop =
+    activeGradient?.stops.find((s) => s.id === selectedStopId) ??
+    activeGradient?.stops[0];
+
+  // The 2D field edits the selected gradient stop's color when in gradient mode.
+  const fieldColor: RgbaColor = activeGradient
+    ? (parseCssColor(selectedStop?.color ?? "#000000") ?? FALLBACK_COLOR)
+    : color;
+  const fieldHsv = rgbaToHsv(fieldColor);
+  const fieldHsl = rgbaToHsl(fieldColor);
+
+  // In gradient mode, mirror the selected stop's color into the hex draft.
+  const selectedStopColor = selectedStop?.color;
+  useEffect(() => {
+    if (!activeGradient || !selectedStopColor) return;
+    const parsed = parseCssColor(selectedStopColor);
+    if (parsed) setHexDraft(toDisplayHex(parsed));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedStopColor, selectedStopId]);
+
+  const emitStopColor = (nextColor: RgbaColor) => {
+    if (!activeGradient || !selectedStop) return;
+    emitGradient({
+      ...activeGradient,
+      stops: activeGradient.stops.map((stop) =>
+        stop.id === selectedStop.id
+          ? { ...stop, color: rgbaToCss(nextColor) }
+          : stop,
+      ),
+    });
+  };
+
+  // Value-row emit helpers: route to the selected stop in gradient mode,
+  // else to the solid color (preserving the existing solid behavior).
+  const emitFieldColor = (next: RgbaColor) => {
+    if (activeGradient) emitStopColor({ ...next, a: fieldColor.a });
+    else emitColor(next);
+  };
+  const emitFieldHsl = (next: HslaColor) => {
+    if (activeGradient) emitStopColor(hslToRgba({ ...next, a: fieldColor.a }));
+    else emitColorFromHsl(next);
+  };
+  const emitFieldHsv = (next: HsvaColor) => {
+    if (activeGradient) emitStopColor(hsvToRgba({ ...next, a: fieldColor.a }));
+    else emitColorFromHsv(next);
+  };
+
+  // ── Image editing ─────────────────────────────────────────────────────────────
+
+  const emitImageFill = (next: ImageFillValue) => {
+    setImageFill(next);
+    emitPaintValue(imageFillToCss(next));
+  };
+
+  // ── Shader editing ──────────────────────────────────────────────────────────────
+
+  const emitShader = (descriptor: ShaderDescriptor, css: string) => {
+    setShaderDescriptor(descriptor);
+    onShaderChange?.(descriptor, css);
+    emitPaintValue(css);
+  };
+
+  // ── Paint-type switching (does real work for every type) ──────────────────────
+
   const setPaintType = (nextType: FigmaPaintType) => {
     if (disabled) return;
+
+    // Shader opens the dedicated Figma "Shader fills" panel.
+    if (nextType === "shader") {
+      setLocalPaintType("shader");
+      setView("shader");
+      return;
+    }
+
+    // Defer structural fill changes to EditPanel when it manages layered fills.
     if (onPaintTypeChange) {
+      setLocalPaintType(nextType);
       onPaintTypeChange(nextType);
       return;
     }
+
+    setLocalPaintType(nextType);
+
     if (nextType === "none") {
       onChange("transparent");
       return;
@@ -554,6 +835,36 @@ export function FigmaColorPicker({
       emitColor(color, effectiveOpacity > 0 ? effectiveOpacity : 100);
       return;
     }
+    if (GRADIENT_TYPES.has(nextType)) {
+      const base =
+        activeGradient ??
+        defaultGradient(
+          nextType as GradientKind,
+          toCssColor(color) || "#000000",
+        );
+      const next: GradientValue = { ...base, kind: nextType as GradientKind };
+      setSelectedStopId(next.stops[0]?.id ?? "");
+      emitGradient(next);
+      return;
+    }
+    if (nextType === "image") {
+      emitPaintValue(imageFill.url ? imageFillToCss(imageFill) : "transparent");
+      return;
+    }
+    if (nextType === "video") {
+      // No standalone CSS for video; mark the fill type and keep a checker fill
+      // until a source is wired. The agent can replace it with a <video> layer.
+      emitPaintValue("transparent");
+      return;
+    }
+    if (nextType === "noise") {
+      emitPaintValue(NOISE_FALLBACK_CSS);
+      return;
+    }
+    if (nextType === "pattern") {
+      emitPaintValue(PATTERN_FALLBACK_CSS);
+      return;
+    }
   };
 
   const pickScreenColor = async () => {
@@ -619,11 +930,11 @@ export function FigmaColorPicker({
             <ScrubbyNumberInput
               key={ch}
               aria-label={ch.toUpperCase()}
-              value={color[ch]}
+              value={fieldColor[ch]}
               min={0}
               max={255}
               disabled={disabled}
-              onChange={(next) => emitColor({ ...color, [ch]: next })}
+              onChange={(next) => emitFieldColor({ ...fieldColor, [ch]: next })}
             />
           ))}
         </div>
@@ -634,27 +945,27 @@ export function FigmaColorPicker({
         <div className="flex gap-1">
           <ScrubbyNumberInput
             aria-label={copy.hue}
-            value={hsl.h}
+            value={fieldHsl.h}
             min={0}
             max={360}
             disabled={disabled}
-            onChange={(h) => emitColorFromHsl({ ...hsl, h })}
+            onChange={(h) => emitFieldHsl({ ...fieldHsl, h })}
           />
           <ScrubbyNumberInput
             aria-label={copy.saturation}
-            value={hsl.s}
+            value={fieldHsl.s}
             min={0}
             max={100}
             disabled={disabled}
-            onChange={(s) => emitColorFromHsl({ ...hsl, s })}
+            onChange={(s) => emitFieldHsl({ ...fieldHsl, s })}
           />
           <ScrubbyNumberInput
             aria-label={copy.lightness}
-            value={hsl.l}
+            value={fieldHsl.l}
             min={0}
             max={100}
             disabled={disabled}
-            onChange={(l) => emitColorFromHsl({ ...hsl, l })}
+            onChange={(l) => emitFieldHsl({ ...fieldHsl, l })}
           />
         </div>
       );
@@ -664,27 +975,27 @@ export function FigmaColorPicker({
       <div className="flex gap-1">
         <ScrubbyNumberInput
           aria-label={copy.hue}
-          value={hsv.h}
+          value={fieldHsv.h}
           min={0}
           max={360}
           disabled={disabled}
-          onChange={(h) => emitColorFromHsv({ ...hsv, h })}
+          onChange={(h) => emitFieldHsv({ ...fieldHsv, h })}
         />
         <ScrubbyNumberInput
           aria-label={copy.saturation}
-          value={hsv.s}
+          value={fieldHsv.s}
           min={0}
           max={100}
           disabled={disabled}
-          onChange={(s) => emitColorFromHsv({ ...hsv, s })}
+          onChange={(s) => emitFieldHsv({ ...fieldHsv, s })}
         />
         <ScrubbyNumberInput
           aria-label={copy.brightness}
-          value={hsv.v}
+          value={fieldHsv.v}
           min={0}
           max={100}
           disabled={disabled}
-          onChange={(v) => emitColorFromHsv({ ...hsv, v })}
+          onChange={(v) => emitFieldHsv({ ...fieldHsv, v })}
         />
       </div>
     );
@@ -710,10 +1021,10 @@ export function FigmaColorPicker({
             {/* Flat swatch chip — no shadow-inner (Figma is flat) */}
             <span
               className="size-4 shrink-0 rounded-[3px] border border-border/60"
-              style={swatchStyle(rgbaToCss(color))}
+              style={triggerSwatchStyle(value, color)}
             />
             <span className="min-w-0 flex-1 truncate text-left tabular-nums uppercase text-[11px]">
-              {toDisplayHex(color)}
+              {triggerLabel(effectivePaintType, color)}
             </span>
             <span className="tabular-nums text-muted-foreground text-[11px]">
               {effectiveOpacity}%
@@ -729,70 +1040,31 @@ export function FigmaColorPicker({
           className="z-[10000] w-[252px] p-0 shadow-xl"
         >
           <div className="overflow-hidden rounded-md bg-popover text-popover-foreground">
-            {/* ── Header: Custom | Libraries  +  ✕ ────────────────────────── */}
-            <div className="flex items-center justify-between px-3 py-1.5">
-              <div className="flex items-center gap-2">
-                {(["custom", "libraries"] as const).map((tab) => (
-                  <button
-                    key={tab}
-                    type="button"
-                    role="tab"
-                    aria-selected={sourceTab === tab}
-                    onClick={() => setSourceTab(tab)}
-                    className={cn(
-                      "cursor-pointer rounded px-1.5 py-0.5 text-[11px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      sourceTab === tab
-                        ? "bg-[var(--design-editor-control-bg)] text-foreground shadow-[inset_0_0_0_1px_var(--design-editor-control-border)]"
-                        : "text-muted-foreground hover:text-foreground",
-                    )}
-                  >
-                    {
-                      tab === "custom"
-                        ? "Custom" /* i18n-ignore Figma picker tab */
-                        : "Libraries" /* i18n-ignore Figma picker tab */
-                    }
-                  </button>
-                ))}
-              </div>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    aria-label={
-                      "Close" /* i18n-ignore Figma picker close label */
-                    }
-                    onClick={() => setOpen(false)}
-                    className="flex size-5 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <IconX className="size-3" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>{"Close" /* i18n-ignore */}</TooltipContent>
-              </Tooltip>
-            </div>
-
-            {sourceTab === "custom" ? (
+            {view === "shader" ? (
+              <ShaderFillsPanel
+                descriptor={shaderDescriptor ?? undefined}
+                applyContext={shaderContext}
+                disabled={disabled}
+                onApply={emitShader}
+                onBack={() => {
+                  setView("picker");
+                  if (effectivePaintType === "shader") {
+                    // No shader chosen — revert to a solid so the row isn't dead.
+                    if (!shaderDescriptor) setPaintType("solid");
+                  }
+                }}
+              />
+            ) : (
               <>
-                {/* ── Paint-type icon row ──────────────────────────────────── */}
-                <div className="border-t border-border/70 px-2 py-1.5">
-                  <div className="grid grid-cols-8 gap-px">
-                    {PAINT_TYPES.map(({ type, label, Icon }) => {
+                {/* ── Paint-type icon row (Figma-style, full-width tabs) ─── */}
+                {/* 11 types → two rows: first 6, then 5. Each icon is a
+                    clearly-hittable 36×32px target with a distinct active
+                    accent so the selected mode is immediately obvious. */}
+                <div className="border-b border-border/70 px-2 pt-2 pb-1.5">
+                  {/* Row 1: Solid · Linear · Radial · Angular · Diamond · Image */}
+                  <div className="mb-1 grid grid-cols-6 gap-1">
+                    {PAINT_TYPES.slice(0, 6).map(({ type, label, Icon }) => {
                       const isActive = effectivePaintType === type;
-                      const isGradientType =
-                        type === "linear" ||
-                        type === "radial" ||
-                        type === "angular" ||
-                        type === "diamond";
-                      const gradientDisabled =
-                        isGradientType &&
-                        !onPaintTypeChange &&
-                        !_onGradientTypeChange &&
-                        !_onAddGradientStop;
-                      const imageDisabled =
-                        (type === "image" || type === "video") &&
-                        !onPaintTypeChange;
-                      const isDisabled =
-                        disabled || gradientDisabled || imageDisabled;
                       return (
                         <Tooltip key={type}>
                           <TooltipTrigger asChild>
@@ -800,227 +1072,358 @@ export function FigmaColorPicker({
                               type="button"
                               aria-label={label}
                               aria-pressed={isActive}
-                              disabled={isDisabled}
+                              disabled={disabled}
                               onClick={() => setPaintType(type)}
                               className={cn(
-                                "flex h-6 w-full cursor-pointer items-center justify-center rounded-sm transition-colors",
+                                "flex h-8 w-full cursor-pointer flex-col items-center justify-center gap-0.5 rounded transition-colors",
                                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                                 "active:scale-95",
                                 isActive
-                                  ? "bg-primary/10 text-primary shadow-[inset_0_0_0_1px_var(--primary)]"
+                                  ? "bg-accent text-accent-foreground ring-1 ring-primary/60"
                                   : "text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
-                                isDisabled && "pointer-events-none opacity-40",
+                                disabled && "pointer-events-none opacity-40",
                               )}
                             >
-                              <Icon className="size-3.5" />
+                              <Icon className="size-4" />
                             </button>
                           </TooltipTrigger>
-                          <TooltipContent>{label}</TooltipContent>
+                          <TooltipContent side="bottom" className="text-[10px]">
+                            {label}
+                          </TooltipContent>
                         </Tooltip>
                       );
                     })}
                   </div>
+                  {/* Row 2: Video · Shader · Noise · Pattern · None */}
+                  <div className="grid grid-cols-5 gap-1">
+                    {PAINT_TYPES.slice(6).map(({ type, label, Icon }) => {
+                      const isActive = effectivePaintType === type;
+                      return (
+                        <Tooltip key={type}>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              aria-label={label}
+                              aria-pressed={isActive}
+                              disabled={disabled}
+                              onClick={() => setPaintType(type)}
+                              className={cn(
+                                "flex h-8 w-full cursor-pointer flex-col items-center justify-center gap-0.5 rounded transition-colors",
+                                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                "active:scale-95",
+                                isActive
+                                  ? "bg-accent text-accent-foreground ring-1 ring-primary/60"
+                                  : "text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+                                disabled && "pointer-events-none opacity-40",
+                              )}
+                            >
+                              <Icon className="size-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom" className="text-[10px]">
+                            {label}
+                          </TooltipContent>
+                        </Tooltip>
+                      );
+                    })}
+                  </div>
+                  {/* Active-type label — shows which mode is selected */}
+                  <p className="mt-1 text-center text-[10px] font-medium text-muted-foreground">
+                    {PAINT_TYPES.find((p) => p.type === effectivePaintType)
+                      ?.label ?? effectivePaintType}
+                  </p>
                 </div>
 
-                {/* ── 2D Saturation/Brightness field (edge-to-edge, no side padding) */}
-                <div className="border-t border-border/70">
-                  <SaturationBrightnessField
-                    hsv={hsv}
-                    label={copy.saturationBrightness}
-                    disabled={disabled}
-                    onChange={emitColorFromHsv}
-                  />
-                </div>
-
-                {/* ── Eyedropper + Hue slider / Swatch + Alpha slider ─────── */}
-                {/* Left gutter spans both rows with dropper centered vertically */}
-                <div className="mt-2.5 px-3">
-                  <div className="grid grid-cols-[1.5rem_1fr] items-center gap-x-2">
-                    {/* Eyedropper centered across the two slider rows via row-span-2 */}
-                    <div className="row-span-2 flex items-center justify-center">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <button
-                            type="button"
-                            aria-label={
-                              "Pick color" /* i18n-ignore browser eyedropper label */
-                            }
-                            disabled={disabled || !hasEyeDropper}
-                            onClick={() => void pickScreenColor()}
-                            className={cn(
-                              "flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors",
-                              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                              picking
-                                ? "bg-primary/10 text-primary ring-1 ring-primary/50"
-                                : "text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
-                              (disabled || !hasEyeDropper) &&
-                                "pointer-events-none opacity-40",
-                            )}
-                          >
-                            <IconColorPicker className="size-4" />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {
-                            hasEyeDropper
-                              ? "Pick color" // i18n-ignore browser eyedropper label
-                              : "Not supported in this browser" // i18n-ignore browser eyedropper disabled label
-                          }
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-
-                    {/* Hue track */}
-                    <ColorTrack
-                      label={copy.hue}
-                      value={hsv.h}
-                      min={0}
-                      max={360}
+                {/* ── Image fill controls ─────────────────────────────────── */}
+                {effectivePaintType === "image" && (
+                  <div>
+                    <ImageFillControls
+                      value={imageFill}
                       disabled={disabled}
-                      backgroundImage="linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
-                      onChange={(next) =>
-                        emitColorFromHsv({ ...hsv, h: next === 360 ? 0 : next })
+                      onChange={emitImageFill}
+                    />
+                  </div>
+                )}
+
+                {/* ── Video fill: source field ────────────────────────────── */}
+                {effectivePaintType === "video" && (
+                  <div className="px-3 py-2">
+                    <p className="mb-1.5 text-[10px] text-muted-foreground">
+                      {
+                        "Paste a video URL to use as the fill." /* i18n-ignore */
                       }
+                    </p>
+                    <Input
+                      defaultValue=""
+                      disabled={disabled}
+                      placeholder={"Video URL (mp4, webm)" /* i18n-ignore */}
+                      aria-label={"Video URL" /* i18n-ignore */}
+                      spellCheck={false}
+                      className="h-6 w-full rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          const url = e.currentTarget.value.trim();
+                          if (url)
+                            emitPaintValue(
+                              `url("${url}") center / cover no-repeat`,
+                            );
+                          e.currentTarget.blur();
+                        }
+                      }}
+                      onBlur={(e) => {
+                        const url = e.currentTarget.value.trim();
+                        if (url)
+                          emitPaintValue(
+                            `url("${url}") center / cover no-repeat`,
+                          );
+                      }}
+                    />
+                  </div>
+                )}
+
+                {/* ── Gradient editor (linear / radial / angular / diamond) ── */}
+                {activeGradient && (
+                  <div>
+                    <GradientEditor
+                      value={activeGradient}
+                      selectedStopId={selectedStopId}
+                      disabled={disabled}
+                      onSelectStop={setSelectedStopId}
+                      onChange={emitGradient}
                     />
+                  </div>
+                )}
+
+                {/* ── 2D Saturation/Brightness field ──────────────────────── */}
+                {/* Hidden for non-color fills (image/video/noise/pattern). */}
+                {(effectivePaintType === "solid" ||
+                  effectivePaintType === "none" ||
+                  activeGradient) && (
+                  <div className="border-t border-border/70">
+                    <SaturationBrightnessField
+                      hsv={fieldHsv}
+                      label={copy.saturationBrightness}
+                      disabled={disabled}
+                      onChange={(nextHsv) => {
+                        if (activeGradient) {
+                          emitStopColor(
+                            hsvToRgba({
+                              ...nextHsv,
+                              a: opacityToAlpha(effectiveOpacity),
+                            }),
+                          );
+                        } else {
+                          emitColorFromHsv(nextHsv);
+                        }
+                      }}
+                    />
+                  </div>
+                )}
+
+                {/* ── Eyedropper + Hue slider / Swatch + Alpha slider ─────── */}
+                {/* Color sliders only apply to color-based fills. */}
+                {(effectivePaintType === "solid" ||
+                  effectivePaintType === "none" ||
+                  activeGradient) && (
+                  <div className="mt-2.5 px-3">
+                    <div className="grid grid-cols-[1.5rem_1fr] items-center gap-x-2">
+                      {/* Eyedropper centered across the two slider rows via row-span-2 */}
+                      <div className="row-span-2 flex items-center justify-center">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              aria-label={
+                                "Pick color" /* i18n-ignore browser eyedropper label */
+                              }
+                              disabled={disabled || !hasEyeDropper}
+                              onClick={() => void pickScreenColor()}
+                              className={cn(
+                                "flex size-6 cursor-pointer items-center justify-center rounded-sm transition-colors",
+                                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                picking
+                                  ? "bg-primary/10 text-primary ring-1 ring-primary/50"
+                                  : "text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+                                (disabled || !hasEyeDropper) &&
+                                  "pointer-events-none opacity-40",
+                              )}
+                            >
+                              <IconColorPicker className="size-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {
+                              hasEyeDropper
+                                ? "Pick color" // i18n-ignore browser eyedropper label
+                                : "Not supported in this browser" // i18n-ignore browser eyedropper disabled label
+                            }
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
 
-                    {/* Current-color swatch left of alpha (matches Figma's layout) */}
-                    <div className="flex items-center gap-2">
-                      <span
-                        className="size-[18px] shrink-0 rounded-[3px] border border-border/60"
-                        style={swatchStyle(rgbaToCss(color))}
+                      {/* Hue track */}
+                      <ColorTrack
+                        label={copy.hue}
+                        value={fieldHsv.h}
+                        min={0}
+                        max={360}
+                        disabled={disabled}
+                        backgroundImage="linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
+                        onChange={(next) => {
+                          const h = next === 360 ? 0 : next;
+                          if (activeGradient) {
+                            emitStopColor(
+                              hsvToRgba({
+                                ...fieldHsv,
+                                h,
+                                a: fieldColor.a,
+                              }),
+                            );
+                          } else {
+                            emitColorFromHsv({ ...hsv, h });
+                          }
+                        }}
                       />
-                      {/* Alpha track fills remaining width */}
-                      <div className="flex-1">
-                        <ColorTrack
-                          label={copy.opacity}
-                          value={effectiveOpacity}
-                          min={0}
-                          max={100}
-                          disabled={disabled}
-                          backgroundImage={alphaTrackBackground(color)}
-                          backgroundSize="8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%"
-                          backgroundPosition="0 0, 0 4px, 4px -4px, -4px 0, 0 0"
-                          onChange={setOpacity}
+
+                      {/* Current-color swatch left of alpha (matches Figma's layout) */}
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="size-[18px] shrink-0 rounded-[3px] border border-border/60"
+                          style={swatchStyle(rgbaToCss(fieldColor))}
                         />
+                        {/* Alpha track fills remaining width */}
+                        <div className="flex-1">
+                          <ColorTrack
+                            label={copy.opacity}
+                            value={
+                              activeGradient
+                                ? alphaToOpacity(fieldColor.a)
+                                : effectiveOpacity
+                            }
+                            min={0}
+                            max={100}
+                            disabled={disabled}
+                            backgroundImage={alphaTrackBackground(fieldColor)}
+                            backgroundSize="8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%"
+                            backgroundPosition="0 0, 0 4px, 4px -4px, -4px 0, 0 0"
+                            onChange={(next) => {
+                              if (activeGradient) {
+                                emitStopColor({
+                                  ...fieldColor,
+                                  a: opacityToAlpha(next),
+                                });
+                              } else {
+                                setOpacity(next);
+                              }
+                            }}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                )}
 
                 {/* ── Value row: [Hex ▾] [value input(s)] [opacity %] ─────── */}
-                <div className="mt-2.5 px-3 pb-3">
-                  <div className="grid grid-cols-[4.5rem_1fr_3rem] items-center gap-1">
-                    {/* Model dropdown */}
-                    <Select
-                      value={mode}
-                      onValueChange={(v) => setMode(v as FigmaColorMode)}
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="h-6 w-[4.5rem] rounded-md border-transparent bg-transparent px-1.5 text-[11px] font-semibold shadow-none hover:bg-[var(--design-editor-control-bg)] 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]">
-                        <SelectItem value="hex" className="text-[11px]">
-                          Hex
-                        </SelectItem>{" "}
-                        {/* i18n-ignore color mode */}
-                        <SelectItem value="rgb" className="text-[11px]">
-                          RGB
-                        </SelectItem>{" "}
-                        {/* i18n-ignore color mode */}
-                        <SelectItem value="hsl" className="text-[11px]">
-                          HSL
-                        </SelectItem>{" "}
-                        {/* i18n-ignore color mode */}
-                        <SelectItem value="hsb" className="text-[11px]">
-                          HSB
-                        </SelectItem>{" "}
-                        {/* i18n-ignore color mode */}
-                      </SelectContent>
-                    </Select>
-
-                    {/* Value field(s) — adapts to mode */}
-                    {renderValueInputs()}
-
-                    {/* Opacity % field */}
-                    <div className="flex h-6 overflow-hidden rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)]">
-                      <ScrubbyNumberInput
-                        aria-label={copy.opacity}
-                        value={effectiveOpacity}
-                        min={0}
-                        max={100}
+                {(effectivePaintType === "solid" ||
+                  effectivePaintType === "none" ||
+                  activeGradient) && (
+                  <div className="mt-2.5 px-3 pb-3">
+                    <div className="grid grid-cols-[4.5rem_1fr_3rem] items-center gap-1">
+                      {/* Model pill — bare text+chevron, no border or bg box (Figma-style) */}
+                      <ColorModelPill
+                        value={mode}
                         disabled={disabled}
-                        onChange={setOpacity}
-                        className="h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-1 text-[11px] tabular-nums shadow-none focus-visible:ring-0"
-                        compact
+                        onChange={(v) => setMode(v as FigmaColorMode)}
                       />
-                      <span className="flex w-4 shrink-0 items-center justify-center border-l border-border/60 text-[10px] text-muted-foreground">
-                        %
-                      </span>
+
+                      {/* Value field(s) — adapts to mode */}
+                      {renderValueInputs()}
+
+                      {/* Opacity % field */}
+                      <div className="flex h-6 overflow-hidden rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)]">
+                        <ScrubbyNumberInput
+                          aria-label={copy.opacity}
+                          value={
+                            activeGradient
+                              ? alphaToOpacity(fieldColor.a)
+                              : effectiveOpacity
+                          }
+                          min={0}
+                          max={100}
+                          disabled={disabled}
+                          onChange={(next) => {
+                            if (activeGradient) {
+                              emitStopColor({
+                                ...fieldColor,
+                                a: opacityToAlpha(next),
+                              });
+                            } else {
+                              setOpacity(next);
+                            }
+                          }}
+                          className="h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-1 text-[11px] tabular-nums shadow-none focus-visible:ring-0"
+                          compact
+                        />
+                        <span className="flex w-4 shrink-0 items-center justify-center border-l border-border/60 text-[10px] text-muted-foreground">
+                          %
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
+                )}
 
-                {/* ── "On this page" source + swatches ────────────────────── */}
+                {/* ── Document colors ──────────────────────────────────────── */}
+                {/* Renders the palette of colors already used in the design.
+                    When `documentColors` is provided, those swatches are shown;
+                    otherwise falls back to the single current color so the
+                    section is never empty. */}
                 <div className="border-t border-border/70 px-3 py-2.5">
-                  {/* Source selector styled as a full-width bordered dropdown */}
-                  <button
-                    type="button"
-                    className="mb-2 flex h-6 w-full items-center justify-between rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-left text-[11px] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]"
-                  >
-                    {"On this page" /* i18n-ignore Figma picker source */}
-                    <IconChevronDown className="size-3 text-muted-foreground" />
-                  </button>
-
-                  {/* Swatch grid: flat chips (no shadow-inner), 8 columns */}
+                  {/* Source label — matches Figma layout */}
+                  <div className="mb-2 flex h-6 w-full items-center justify-between px-0.5 text-[11px] text-muted-foreground">
+                    {"Document colors" /* i18n-ignore Figma picker source */}
+                  </div>
+
+                  {/* Swatch grid: document palette when available, else current color */}
                   <div className="grid grid-cols-8 gap-1">
-                    {PLACEHOLDER_SWATCHES.map((swatch, index) => {
-                      const isCurrentColor =
-                        rgbaToHex(parseCssColor(swatch) ?? FALLBACK_COLOR) ===
-                        rgbaToHex(color);
+                    {(documentColors && documentColors.length > 0
+                      ? documentColors
+                      : [rgbaToCss(color)]
+                    ).map((docColor) => {
+                      const currentHex = rgbaToHex(
+                        parseCssColor(docColor) ?? color,
+                      );
+                      const isActive =
+                        rgbaToHex(color) === currentHex && !activeGradient;
                       return (
-                        <Tooltip key={`${swatch}-${index}`}>
+                        <Tooltip key={docColor}>
                           <TooltipTrigger asChild>
                             <button
                               type="button"
                               disabled={disabled}
-                              aria-label={swatch}
-                              aria-pressed={isCurrentColor}
+                              aria-label={currentHex}
+                              aria-pressed={isActive}
                               className={cn(
                                 "size-5 rounded-sm border transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                                isCurrentColor
+                                isActive
                                   ? "border-primary ring-1 ring-primary"
                                   : "border-border/60",
                               )}
-                              style={swatchStyle(swatch)}
-                              onClick={() =>
-                                emitColor(parseCssColor(swatch) ?? color)
-                              }
+                              style={swatchStyle(docColor)}
+                              onClick={() => {
+                                const parsed = parseCssColor(docColor) ?? color;
+                                if (activeGradient) emitStopColor(parsed);
+                                else emitColor(parsed);
+                              }}
                             />
                           </TooltipTrigger>
-                          <TooltipContent>{swatch}</TooltipContent>
+                          <TooltipContent>{currentHex}</TooltipContent>
                         </Tooltip>
                       );
                     })}
                   </div>
                 </div>
               </>
-            ) : (
-              /* ── Libraries tab: honest empty state ────────────────────── */
-              <div className="border-t border-border/70 p-3">
-                <div className="rounded-md border border-dashed border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-3 py-5 text-center">
-                  <p className="text-[11px] font-medium text-foreground">
-                    {
-                      "No color libraries connected" /* i18n-ignore Figma picker library empty state */
-                    }
-                  </p>
-                  <p className="mt-1 text-[10px] text-muted-foreground">
-                    {
-                      "Connect a library in the Assets panel to browse colors here." /* i18n-ignore Figma picker library hint */
-                    }
-                  </p>
-                </div>
-              </div>
             )}
           </div>
         </PopoverContent>
@@ -1031,6 +1434,104 @@ export function FigmaColorPicker({
 
 // ─── Sub-components ────────────────────────────────────────────────────────────
 
+const COLOR_MODES: Array<{ value: FigmaColorMode; label: string }> = [
+  { value: "hex", label: "Hex" }, // i18n-ignore color mode
+  { value: "rgb", label: "RGB" }, // i18n-ignore color mode
+  { value: "hsl", label: "HSL" }, // i18n-ignore color mode
+  { value: "hsb", label: "HSB" }, // i18n-ignore color mode
+];
+
+/**
+ * Figma-style bare color-model selector: text + small chevron, no border/bg box.
+ * Hover reveals a subtle bg tint; active mode is font-semibold.
+ * Renders its own lightweight dropdown (no Radix Select overhead).
+ */
+function ColorModelPill({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: FigmaColorMode;
+  disabled: boolean;
+  onChange: (mode: FigmaColorMode) => void;
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const label =
+    COLOR_MODES.find((m) => m.value === value)?.label ?? value.toUpperCase();
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [menuOpen]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={menuOpen}
+        onClick={() => setMenuOpen((o) => !o)}
+        className={cn(
+          "flex h-6 w-[4.5rem] items-center gap-0.5 rounded px-1.5",
+          "text-[11px] font-semibold text-foreground",
+          "bg-transparent border-0 shadow-none",
+          "hover:bg-[var(--design-editor-control-bg)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "transition-colors",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        <span className="flex-1 text-left">{label}</span>
+        <IconChevronDown className="size-3 shrink-0 text-muted-foreground" />
+      </button>
+
+      {menuOpen && (
+        <div
+          role="listbox"
+          aria-label="Color model" // i18n-ignore aria label
+          className={cn(
+            "absolute left-0 top-full z-[10001] mt-0.5 min-w-[4.5rem]",
+            "rounded-md border border-border bg-popover shadow-lg",
+            "overflow-hidden py-0.5",
+          )}
+        >
+          {COLOR_MODES.map((m) => (
+            <button
+              key={m.value}
+              type="button"
+              role="option"
+              aria-selected={m.value === value}
+              onClick={() => {
+                onChange(m.value);
+                setMenuOpen(false);
+              }}
+              className={cn(
+                "flex w-full items-center px-2 py-1 text-[11px]",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus-visible:outline-none focus-visible:bg-accent",
+                m.value === value
+                  ? "font-semibold text-foreground"
+                  : "font-normal text-foreground/80",
+              )}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SaturationBrightnessField({
   hsv,
   label,
@@ -1319,7 +1820,14 @@ function ScrubbyNumberInput({
 
 // ─── Utilities ─────────────────────────────────────────────────────────────────
 
-function inferPaintType(value: string, opacity: number): FigmaPaintType {
+export function inferPaintType(value: string, opacity: number): FigmaPaintType {
+  const lower = value.trim().toLowerCase();
+  if (lower.includes("gradient(")) {
+    if (lower.startsWith("radial-gradient")) return "radial";
+    if (lower.startsWith("conic-gradient")) return "angular";
+    return "linear";
+  }
+  if (lower.startsWith("url(")) return "image";
   const parsed = parseCssColor(value);
   if (opacity <= 0 || parsed?.a === 0 || value.trim() === "transparent") {
     return "none";
@@ -1327,11 +1835,93 @@ function inferPaintType(value: string, opacity: number): FigmaPaintType {
   return "solid";
 }
 
+/** The set of paint types that render a gradient editor. */
+export const GRADIENT_PAINT_TYPES: ReadonlySet<FigmaPaintType> = new Set([
+  "linear",
+  "radial",
+  "angular",
+  "diamond",
+]);
+
+/**
+ * Pure helper: resolves the effective paint type and which editor panel should
+ * be visible given the three-level precedence:
+ *
+ *   localPaintType (user's explicit click this session)
+ *   ?? paintType prop (EditPanel-driven structural type)
+ *   ?? inferred from the CSS value string
+ *
+ * The shader panel is a view-level switch (not just a paint-type), so
+ * `showShaderPanel` is derived directly from the effective type.
+ *
+ * @param paintType       The `paintType` prop from the parent (or undefined).
+ * @param localPaintType  The user's explicit in-session selection (or null).
+ * @param value           The current CSS fill value string.
+ * @param opacity         The current opacity (0–100).
+ */
+export function resolveActivePaint(
+  paintType: FigmaPaintType | undefined,
+  localPaintType: FigmaPaintType | null,
+  value: string,
+  opacity: number,
+): {
+  effectivePaintType: FigmaPaintType;
+  showGradientEditor: boolean;
+  showImageControls: boolean;
+  showShaderPanel: boolean;
+} {
+  const effectivePaintType: FigmaPaintType =
+    localPaintType ?? paintType ?? inferPaintType(value, opacity);
+  return {
+    effectivePaintType,
+    showGradientEditor: GRADIENT_PAINT_TYPES.has(effectivePaintType),
+    showImageControls: effectivePaintType === "image",
+    showShaderPanel: effectivePaintType === "shader",
+  };
+}
+
+function toCssColor(color: RgbaColor): string {
+  return rgbaToCss(color);
+}
+
 /** Show hex without the leading # for the display field (matches Figma). */
 function toDisplayHex(color: RgbaColor): string {
   return rgbaToHex(color).replace(/^#/, "").toUpperCase();
 }
 
+function triggerLabel(type: FigmaPaintType, color: RgbaColor): string {
+  if (type === "solid") return toDisplayHex(color);
+  if (type === "none") return "None";
+  if (type === "image") return "Image";
+  if (type === "video") return "Video";
+  if (type === "shader") return "Shader";
+  if (type === "noise") return "Noise";
+  if (type === "pattern") return "Pattern";
+  return `${type[0].toUpperCase()}${type.slice(1)} gradient`;
+}
+
+function triggerSwatchStyle(
+  value: string,
+  color: RgbaColor,
+): {
+  backgroundColor?: string;
+  backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+} {
+  const lower = value.trim().toLowerCase();
+  if (!lower || lower === "transparent") {
+    return {
+      backgroundImage: CHECKERBOARD_IMAGE,
+      backgroundSize: "8px 8px",
+    };
+  }
+  if (lower.includes("gradient(") || lower.startsWith("url(")) {
+    return swatchStyle(value);
+  }
+  return swatchStyle(rgbaToCss(color));
+}
+
 function swatchStyle(value: string): {
   backgroundColor?: string;
   backgroundImage?: string;