@agent-native/core 0.80.2 → 0.80.5

package/corpus/templates/design/app/components/design/inspector/{FigmaColorPicker.tsx → DesignColorPicker.tsx}

@@ -52,10 +52,10 @@ import { ShaderFillsPanel, shaderDescriptorToCss } from "./ShaderFillsPanel";
 
 // ─── Public types ──────────────────────────────────────────────────────────────
 
-export type FigmaColorMode = "hex" | "rgb" | "hsl" | "hsb";
-export type FigmaGradientType = "linear" | "radial" | "angular" | "diamond";
-export type FigmaFillType = "solid" | "gradient" | "image";
-export type FigmaPaintType =
+export type DesignColorMode = "hex" | "rgb" | "hsl" | "hsb";
+export type DesignGradientType = "linear" | "radial" | "angular" | "diamond";
+export type DesignFillType = "solid" | "gradient" | "image";
+export type DesignPaintType =
   | "solid"
   | "linear"
   | "radial"
@@ -70,22 +70,22 @@ export type FigmaPaintType =
 
 // These interfaces remain so EditPanel's prop types don't break, even though
 // the popover no longer renders the fills/gradient-stops list.
-export interface FigmaFillRow {
+export interface DesignFillRow {
   id: string;
   label: string;
   value: string;
-  type: FigmaFillType;
+  type: DesignFillType;
   opacity?: number;
   swatch?: string;
   selected?: boolean;
 }
 
-export interface FigmaFillRowPatch {
+export interface DesignFillRowPatch {
   value?: string;
   opacity?: number;
 }
 
-export interface FigmaGradientStop {
+export interface DesignGradientStop {
   id: string;
   color: string;
   position: number;
@@ -93,13 +93,13 @@ export interface FigmaGradientStop {
   label?: string;
 }
 
-export interface FigmaGradientStopPatch {
+export interface DesignGradientStopPatch {
   color?: string;
   position?: number;
   opacity?: number;
 }
 
-export interface FigmaColorPickerLabels {
+export interface DesignColorPickerLabels {
   trigger: string;
   hex: string;
   red: string;
@@ -126,7 +126,7 @@ export interface FigmaColorPickerLabels {
   diamond: string;
 }
 
-export interface FigmaColorPickerProps {
+export interface DesignColorPickerProps {
   value: string;
   onChange: (value: string) => void;
   onPaintValueChange?: (value: string) => void;
@@ -137,21 +137,21 @@ export interface FigmaColorPickerProps {
   onBlendModeChange?: (mode: string) => void;
   showBlendMode?: boolean;
   // Accepted but unused in the popover — list management lives in the sidebar.
-  fillRows?: FigmaFillRow[];
+  fillRows?: DesignFillRow[];
   selectedFillId?: string;
   onFillSelect?: (id: string) => void;
-  onFillChange?: (id: string, patch: FigmaFillRowPatch) => void;
+  onFillChange?: (id: string, patch: DesignFillRowPatch) => void;
   onAddFill?: () => void;
   onRemoveFill?: (id: string) => void;
-  paintType?: FigmaPaintType;
-  onPaintTypeChange?: (type: FigmaPaintType) => void;
-  gradientType?: FigmaGradientType;
-  onGradientTypeChange?: (type: FigmaGradientType) => void;
+  paintType?: DesignPaintType;
+  onPaintTypeChange?: (type: DesignPaintType) => void;
+  gradientType?: DesignGradientType;
+  onGradientTypeChange?: (type: DesignGradientType) => void;
   // Accepted but unused in the popover — gradient stop handles belong on canvas.
-  gradientStops?: FigmaGradientStop[];
+  gradientStops?: DesignGradientStop[];
   selectedStopId?: string;
   onGradientStopSelect?: (id: string) => void;
-  onGradientStopChange?: (id: string, patch: FigmaGradientStopPatch) => void;
+  onGradientStopChange?: (id: string, patch: DesignGradientStopPatch) => void;
   onAddGradientStop?: () => void;
   onRemoveGradientStop?: (id: string) => void;
   /**
@@ -173,7 +173,7 @@ export interface FigmaColorPickerProps {
   };
   /** Notified when a shader fill is applied/tuned (descriptor + CSS fallback). */
   onShaderChange?: (descriptor: ShaderDescriptor, css: string) => void;
-  labels?: Partial<FigmaColorPickerLabels>;
+  labels?: Partial<DesignColorPickerLabels>;
   disabled?: boolean;
   className?: string;
 }
@@ -191,7 +191,7 @@ interface HsvaColor {
 
 const FALLBACK_COLOR: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };
 
-const DEFAULT_LABELS: FigmaColorPickerLabels = {
+const DEFAULT_LABELS: DesignColorPickerLabels = {
   trigger: "Open color picker", // i18n-ignore fallback component label
   hex: "Hex", // i18n-ignore fallback component label
   red: "R", // i18n-ignore fallback component label
@@ -218,7 +218,7 @@ const DEFAULT_LABELS: FigmaColorPickerLabels = {
   diamond: "Diamond", // i18n-ignore fallback component label
 };
 
-// Figma-matching checkerboard: explicit light/dark tiles for legibility.
+// checkerboard: explicit light/dark tiles for legibility.
 const CHECKER_A = "#d4d4d4";
 const CHECKER_B = "#a3a3a3";
 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%)`;
@@ -448,7 +448,7 @@ function IconNoneFill({ className }: { className?: string }) {
 }
 
 function IconShaderFill({ className }: { className?: string }) {
-  // Droplet — Figma uses a teardrop for shader/blur-type fills.
+  // Droplet — the design editor uses a teardrop for shader/blur-type fills.
   return (
     <svg
       viewBox="0 0 24 24"
@@ -534,7 +534,7 @@ function IconPatternFill({ className }: { className?: string }) {
 // ─── Paint type definitions (only supported types rendered) ────────────────────
 
 const PAINT_TYPES: Array<{
-  type: FigmaPaintType;
+  type: DesignPaintType;
   label: string;
   Icon: (props: { className?: string }) => JSX.Element;
 }> = [
@@ -555,7 +555,7 @@ const PAINT_TYPES: Array<{
 // 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>([
+const GRADIENT_TYPES = new Set<DesignPaintType>([
   "linear",
   "radial",
   "angular",
@@ -571,7 +571,7 @@ const PATTERN_FALLBACK_CSS =
 
 // ─── Main component ────────────────────────────────────────────────────────────
 
-export function FigmaColorPicker({
+export function DesignColorPicker({
   value,
   onChange,
   onPaintValueChange,
@@ -603,24 +603,28 @@ export function FigmaColorPicker({
   labels,
   disabled = false,
   className,
-}: FigmaColorPickerProps) {
+}: DesignColorPickerProps) {
   const copy = { ...DEFAULT_LABELS, ...labels };
   const color = parseCssColor(value) ?? FALLBACK_COLOR;
   const hsv = rgbaToHsv(color);
   const hsl = rgbaToHsl(color);
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
 
-  const [mode, setMode] = useState<FigmaColorMode>("hex");
+  const [mode, setMode] = useState<DesignColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
   const [open, setOpen] = useState(false);
   const [picking, setPicking] = useState(false);
   const skipNextHexBlurCommitRef = useRef(false);
+  // Preserve the last non-zero hue so dragging through an achromatic point
+  // (s=0 or v=0) doesn't snap hue to 0° when the user drags back to a
+  // saturated region. Matches Figma's hue-preservation behavior.
+  const lastHueRef = useRef<number>(0);
 
-  // Whole-popover view: the standard picker, or the Figma "Shader fills" panel.
+  // Whole-popover view: the standard picker, or the 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>(
+  const [localPaintType, setLocalPaintType] = useState<DesignPaintType | null>(
     null,
   );
 
@@ -642,7 +646,7 @@ export function FigmaColorPicker({
   // 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 =
+  const effectivePaintType: DesignPaintType =
     localPaintType ?? paintType ?? inferPaintType(value, effectiveOpacity);
 
   // Resolve the active gradient: prefer EditPanel-driven props; otherwise parse
@@ -739,7 +743,7 @@ export function FigmaColorPicker({
   const emitGradient = (next: GradientValue) => {
     setLocalGradient(next);
     if (onGradientTypeChange && next.kind !== gradientType) {
-      onGradientTypeChange(next.kind as FigmaGradientType);
+      onGradientTypeChange(next.kind as DesignGradientType);
     }
     emitPaintValue(gradientToCss(next));
   };
@@ -752,7 +756,15 @@ export function FigmaColorPicker({
   const fieldColor: RgbaColor = activeGradient
     ? (parseCssColor(selectedStop?.color ?? "#000000") ?? FALLBACK_COLOR)
     : color;
-  const fieldHsv = rgbaToHsv(fieldColor);
+  const rawFieldHsv = rgbaToHsv(fieldColor);
+  // Preserve the last non-zero hue so dragging through gray doesn't lose it.
+  if (rawFieldHsv.s > 0 && rawFieldHsv.v > 0) {
+    lastHueRef.current = rawFieldHsv.h;
+  }
+  const fieldHsv: HsvaColor =
+    rawFieldHsv.s === 0
+      ? { ...rawFieldHsv, h: lastHueRef.current }
+      : rawFieldHsv;
   const fieldHsl = rgbaToHsl(fieldColor);
 
   // In gradient mode, mirror the selected stop's color into the hex draft.
@@ -808,10 +820,10 @@ export function FigmaColorPicker({
 
   // ── Paint-type switching (does real work for every type) ──────────────────────
 
-  const setPaintType = (nextType: FigmaPaintType) => {
+  const setPaintType = (nextType: DesignPaintType) => {
     if (disabled) return;
 
-    // Shader opens the dedicated Figma "Shader fills" panel.
+    // Shader opens the dedicated shader fills panel.
     if (nextType === "shader") {
       setLocalPaintType("shader");
       setView("shader");
@@ -1007,7 +1019,7 @@ export function FigmaColorPicker({
     <div className={cn("space-y-1.5", className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          {/* Trigger: compact swatch + hex + opacity% — matches Figma's fill row */}
+          {/* Trigger: compact swatch + hex + opacity% — matches the design editor's fill row */}
           <button
             type="button"
             disabled={disabled}
@@ -1018,7 +1030,7 @@ export function FigmaColorPicker({
               disabled && "pointer-events-none opacity-50",
             )}
           >
-            {/* Flat swatch chip — no shadow-inner (Figma is flat) */}
+            {/* Flat swatch chip — no shadow-inner (the design editor uses a flat chip) */}
             <span
               className="size-4 shrink-0 rounded-[3px] border border-border/60"
               style={triggerSwatchStyle(value, color)}
@@ -1032,7 +1044,7 @@ export function FigmaColorPicker({
           </button>
         </PopoverTrigger>
 
-        {/* Figma popover: ~240px wide, uniform 12px padding, tight controls */}
+        {/* design popover: ~240px wide, uniform 12px padding, tight controls */}
         <PopoverContent
           side="left"
           align="start"
@@ -1056,7 +1068,7 @@ export function FigmaColorPicker({
               />
             ) : (
               <>
-                {/* ── Paint-type icon row (Figma-style, full-width tabs) ─── */}
+                {/* ── Paint-type icon row (design-editor, 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. */}
@@ -1210,7 +1222,7 @@ export function FigmaColorPicker({
                           emitStopColor(
                             hsvToRgba({
                               ...nextHsv,
-                              a: opacityToAlpha(effectiveOpacity),
+                              a: fieldColor.a,
                             }),
                           );
                         } else {
@@ -1286,7 +1298,7 @@ export function FigmaColorPicker({
                         }}
                       />
 
-                      {/* Current-color swatch left of alpha (matches Figma's layout) */}
+                      {/* Current-color swatch left of alpha (matches the design editor's layout) */}
                       <div className="flex items-center gap-2">
                         <span
                           className="size-[18px] shrink-0 rounded-[3px] border border-border/60"
@@ -1330,11 +1342,11 @@ export function FigmaColorPicker({
                   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) */}
+                      {/* Model pill — bare text+chevron, no border or bg box (design-editor) */}
                       <ColorModelPill
                         value={mode}
                         disabled={disabled}
-                        onChange={(v) => setMode(v as FigmaColorMode)}
+                        onChange={(v) => setMode(v as DesignColorMode)}
                       />
 
                       {/* Value field(s) — adapts to mode */}
@@ -1379,9 +1391,9 @@ export function FigmaColorPicker({
                     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 label — matches Figma layout */}
+                  {/* Source label — matches the design editor 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 */}
+                    {"Document colors" /* i18n-ignore design picker source */}
                   </div>
 
                   {/* Swatch grid: document palette when available, else current color */}
@@ -1434,7 +1446,7 @@ export function FigmaColorPicker({
 
 // ─── Sub-components ────────────────────────────────────────────────────────────
 
-const COLOR_MODES: Array<{ value: FigmaColorMode; label: string }> = [
+const COLOR_MODES: Array<{ value: DesignColorMode; 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
@@ -1442,7 +1454,7 @@ const COLOR_MODES: Array<{ value: FigmaColorMode; label: string }> = [
 ];
 
 /**
- * Figma-style bare color-model selector: text + small chevron, no border/bg box.
+ * design-editor 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).
  */
@@ -1451,9 +1463,9 @@ function ColorModelPill({
   disabled,
   onChange,
 }: {
-  value: FigmaColorMode;
+  value: DesignColorMode;
   disabled: boolean;
-  onChange: (mode: FigmaColorMode) => void;
+  onChange: (mode: DesignColorMode) => void;
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -1720,7 +1732,7 @@ function ColorTrack({
       )}
       style={{ backgroundImage, backgroundSize, backgroundPosition }}
     >
-      {/* Thumb overhangs the track slightly, matching Figma */}
+      {/* Thumb overhangs the track slightly, matching the design editor */}
       <span
         className="pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_hsl(var(--foreground)/0.6)]"
         style={{ left: `${clamp(percent, 0, 100)}%` }}
@@ -1799,12 +1811,16 @@ function ScrubbyNumberInput({
         if (e.key === "ArrowUp") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          onChange(clamp(value + step, min, max));
+          const parsed = Number(draft);
+          const base = Number.isFinite(parsed) ? parsed : value;
+          onChange(clamp(base + step, min, max));
         }
         if (e.key === "ArrowDown") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          onChange(clamp(value - step, min, max));
+          const parsed = Number(draft);
+          const base = Number.isFinite(parsed) ? parsed : value;
+          onChange(clamp(base - step, min, max));
         }
       }}
       onBlur={() => {
@@ -1820,11 +1836,22 @@ function ScrubbyNumberInput({
 
 // ─── Utilities ─────────────────────────────────────────────────────────────────
 
-export function inferPaintType(value: string, opacity: number): FigmaPaintType {
+export function inferPaintType(
+  value: string,
+  opacity: number,
+): DesignPaintType {
   const lower = value.trim().toLowerCase();
   if (lower.includes("gradient(")) {
-    if (lower.startsWith("radial-gradient")) return "radial";
-    if (lower.startsWith("conic-gradient")) return "angular";
+    if (
+      lower.startsWith("radial-gradient") ||
+      lower.startsWith("repeating-radial-gradient")
+    )
+      return "radial";
+    if (
+      lower.startsWith("conic-gradient") ||
+      lower.startsWith("repeating-conic-gradient")
+    )
+      return "angular";
     return "linear";
   }
   if (lower.startsWith("url(")) return "image";
@@ -1836,7 +1863,7 @@ export function inferPaintType(value: string, opacity: number): FigmaPaintType {
 }
 
 /** The set of paint types that render a gradient editor. */
-export const GRADIENT_PAINT_TYPES: ReadonlySet<FigmaPaintType> = new Set([
+export const GRADIENT_PAINT_TYPES: ReadonlySet<DesignPaintType> = new Set([
   "linear",
   "radial",
   "angular",
@@ -1860,17 +1887,17 @@ export const GRADIENT_PAINT_TYPES: ReadonlySet<FigmaPaintType> = new Set([
  * @param opacity         The current opacity (0–100).
  */
 export function resolveActivePaint(
-  paintType: FigmaPaintType | undefined,
-  localPaintType: FigmaPaintType | null,
+  paintType: DesignPaintType | undefined,
+  localPaintType: DesignPaintType | null,
   value: string,
   opacity: number,
 ): {
-  effectivePaintType: FigmaPaintType;
+  effectivePaintType: DesignPaintType;
   showGradientEditor: boolean;
   showImageControls: boolean;
   showShaderPanel: boolean;
 } {
-  const effectivePaintType: FigmaPaintType =
+  const effectivePaintType: DesignPaintType =
     localPaintType ?? paintType ?? inferPaintType(value, opacity);
   return {
     effectivePaintType,
@@ -1884,12 +1911,12 @@ function toCssColor(color: RgbaColor): string {
   return rgbaToCss(color);
 }
 
-/** Show hex without the leading # for the display field (matches Figma). */
+/** Show hex without the leading # for the display field (matches the design editor). */
 function toDisplayHex(color: RgbaColor): string {
   return rgbaToHex(color).replace(/^#/, "").toUpperCase();
 }
 
-function triggerLabel(type: FigmaPaintType, color: RgbaColor): string {
+function triggerLabel(type: DesignPaintType, color: RgbaColor): string {
   if (type === "solid") return toDisplayHex(color);
   if (type === "none") return "None";
   if (type === "image") return "Image";

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

@@ -1,5 +1,5 @@
 import { IconDownload, IconPlus, IconX } from "@tabler/icons-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -37,7 +37,7 @@ export interface ExportSettingsPanelLabels {
 export interface ExportSettingsPanelProps {
   value: ExportSettingsValue;
   onChange: (patch: Partial<ExportSettingsValue>) => void;
-  onExport: (settings: ExportSettingsValue) => void;
+  onExport: (settings: ExportSettingsValue[]) => void;
   formats?: ExportFormat[];
   labels?: Partial<ExportSettingsPanelLabels>;
   disabled?: boolean;
@@ -57,7 +57,7 @@ const DEFAULT_LABELS: ExportSettingsPanelLabels = {
 
 const DEFAULT_FORMATS: ExportFormat[] = ["png", "jpg", "svg", "pdf", "webp"];
 
-/** Preset scale options shown in the scale dropdown — matches Figma's presets */
+/** 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" },
   { label: "1x", value: "1" },
@@ -103,7 +103,7 @@ function rowFromValue(v: ExportSettingsValue): ExportRow {
   };
 }
 
-/** Scale dropdown — shows Figma's 0.5x/1x/2x/3x/4x presets + Custom */
+/** Scale dropdown — shows the design editor's 0.5x/1x/2x/3x/4x presets + Custom */
 function ScaleSelect({
   scale,
   customScale,
@@ -162,15 +162,7 @@ export function ExportSettingsPanel({
   // Multi-row internal state — primary row is kept in sync with the `value` prop
   const [rows, setRows] = useState<ExportRow[]>(() => [rowFromValue(value)]);
 
-  // Keep primary row in sync when the controlled value prop changes externally
-  const primaryValue = rows[0];
-  const needsSync =
-    !primaryValue.customScale &&
-    (primaryValue.scale !== value.scale ||
-      primaryValue.format !== value.format ||
-      primaryValue.suffix !== value.suffix);
-
-  if (needsSync) {
+  useEffect(() => {
     setRows((prev) => [
       {
         ...prev[0],
@@ -180,7 +172,7 @@ export function ExportSettingsPanel({
       },
       ...prev.slice(1),
     ]);
-  }
+  }, [value.format, value.scale, value.suffix]);
 
   function patchRow(id: number, patch: Partial<ExportRow>) {
     setRows((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
@@ -226,19 +218,15 @@ export function ExportSettingsPanel({
   }
 
   function handleExport() {
-    // Pass the primary row's settings to onExport; rows array is internal
-    const primary = rows[0];
-    if (!primary) return;
-    onExport({
-      scale: primary.scale,
-      format: primary.format,
-      suffix: primary.suffix,
-    });
+    if (rows.length === 0) return;
+    onExport(
+      rows.map((r) => ({ scale: r.scale, format: r.format, suffix: r.suffix })),
+    );
   }
 
   return (
     <div className={cn("space-y-1.5", className)}>
-      {/* Section header: title left, "+" right — matches Figma export header */}
+      {/* Section header: title left, "+" right — matches the design editor export header */}
       <div className="flex h-6 items-center justify-between">
         <span className="text-[11px] font-medium text-muted-foreground">
           {copy.title}
@@ -254,7 +242,7 @@ export function ExportSettingsPanel({
         </button>
       </div>
 
-      {/* Export rows: [scale ▾] [format ▾] [suffix] [×] — Figma compact inline layout */}
+      {/* Export rows: [scale ▾] [format ▾] [suffix] [×] — design-editor compact inline layout */}
       {rows.map((row) => (
         <ExportRow
           key={row.id}
@@ -268,7 +256,7 @@ export function ExportSettingsPanel({
         />
       ))}
 
-      {/* Export button — full width at bottom, Figma style */}
+      {/* Export button — full width at bottom, design-editor style */}
       <Button
         type="button"
         variant="outline"
@@ -380,7 +368,7 @@ function ExportRow({
         aria-label={labels.suffix}
       />
 
-      {/* Remove row button — matches Figma's × on each export entry */}
+      {/* Remove row button — matches the design editor's × on each export entry */}
       <button
         type="button"
         aria-label={labels.removeExport}

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

@@ -27,7 +27,7 @@ export interface GradientValue {
   stops: GradientStopValue[];
 }
 
-// ─── Checkerboard (matches FigmaColorPicker) ───────────────────────────────────
+// ─── Checkerboard (matches DesignColorPicker) ───────────────────────────────────
 
 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%)`;
@@ -53,7 +53,7 @@ export function gradientToCss(value: GradientValue): string {
       return `radial-gradient(circle at center, ${stops})`;
     case "diamond":
       // CSS has no diamond gradient; a radial gradient with closest-side on a
-      // non-circular ellipse reads as the diamond falloff Figma shows.
+      // non-circular ellipse reads as the diamond falloff the design editor shows.
       return `radial-gradient(ellipse closest-side at center, ${stops})`;
     case "angular":
       return `conic-gradient(from ${round(value.angle)}deg at center, ${stops})`;
@@ -155,7 +155,7 @@ export function parseGradientCss(
       : false;
 
   if (fn === "linear") {
-    kind = fallbackKind === "linear" ? "linear" : fallbackKind;
+    kind = "linear";
     const angleMatch = first.match(ANGLE_RE);
     if (angleMatch) {
       angle = Number(angleMatch[1]);
@@ -166,7 +166,10 @@ export function parseGradientCss(
       stopStart = 1;
     }
   } else if (fn === "radial") {
-    kind = /ellipse/i.test(first) ? "diamond" : "radial";
+    kind =
+      /ellipse\s+closest-side/i.test(first) || fallbackKind === "diamond"
+        ? "diamond"
+        : "radial";
     if (/circle|ellipse|at\s/i.test(first)) stopStart = 1;
   } else if (fn === "conic") {
     kind = "angular";
@@ -199,7 +202,7 @@ interface AngleDialProps {
   disabled?: boolean;
 }
 
-/** Figma-style circular dial for rotating gradient angle. */
+/** design-editor circular dial for rotating gradient angle. */
 function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
   const dialRef = useRef<HTMLDivElement>(null);
   const draggingRef = useRef(false);
@@ -210,7 +213,7 @@ function AngleDial({ angle, onChange, disabled = false }: AngleDialProps) {
     const cx = rect.left + rect.width / 2;
     const cy = rect.top + rect.height / 2;
     const rad = Math.atan2(clientY - cy, clientX - cx);
-    // atan2 gives angle from east; Figma's 0° is north (up), clockwise.
+    // atan2 gives angle from east; the design editor's 0° is north (up), clockwise.
     let deg = (rad * 180) / Math.PI + 90;
     if (deg < 0) deg += 360;
     if (deg >= 360) deg -= 360;
@@ -311,7 +314,7 @@ export interface GradientEditorProps {
   className?: string;
 }
 
-// Stop handle dimensions — Figma uses ~12px handles with white ring.
+// Stop handle dimensions — the design editor uses ~12px handles with white ring.
 const STOP_SIZE = 12; // px, the colored circle diameter
 const STOP_RING = 2; // px, white border thickness
 const STOP_OUTER = STOP_SIZE + STOP_RING * 2; // 16px total outer
@@ -372,9 +375,29 @@ export function GradientEditor({
     barClickRef.current = null;
     const position = positionFromPointer(event.clientX);
     const ordered = sortedStops(value.stops);
-    // Interpolate the color from the nearest stops for a natural insert.
+    // Interpolate the color from the adjacent stops for a natural insert.
     const before = [...ordered].reverse().find((s) => s.position <= position);
-    const newColor = before?.color ?? ordered[0]?.color ?? "#000000";
+    const after = ordered.find((s) => s.position > position);
+    let newColor: string;
+    if (before && after) {
+      const range = after.position - before.position;
+      const t = range === 0 ? 0 : (position - before.position) / range;
+      const cb = parseCssColor(before.color);
+      const ca = parseCssColor(after.color);
+      if (cb && ca) {
+        newColor = rgbaToCss({
+          r: Math.round(cb.r + t * (ca.r - cb.r)),
+          g: Math.round(cb.g + t * (ca.g - cb.g)),
+          b: Math.round(cb.b + t * (ca.b - cb.b)),
+          a: cb.a + t * (ca.a - cb.a),
+        });
+      } else {
+        newColor = before.color;
+      }
+    } else {
+      newColor =
+        before?.color ?? after?.color ?? ordered[0]?.color ?? "#000000";
+    }
     const newStop: GradientStopValue = {
       id: nextStopId(),
       color: newColor,
@@ -501,7 +524,7 @@ export function GradientEditor({
                 "absolute cursor-grab active:cursor-grabbing",
                 "rounded-full border-[2px] border-white",
                 "focus-visible:outline-none",
-                // Selected: accent-colored outer ring (like Figma's blue ring)
+                // Selected: accent-colored outer ring (the same way's blue ring)
                 isSelected
                   ? "shadow-[0_0_0_1.5px_var(--primary),0_1px_3px_rgba(0,0,0,0.35)]"
                   : "shadow-[0_0_0_1px_rgba(0,0,0,0.25),0_1px_3px_rgba(0,0,0,0.25)]",
@@ -560,9 +583,14 @@ export function GradientEditor({
                 disabled={disabled}
                 value={angleInput ?? Math.round(value.angle)}
                 onChange={(e) => {
-                  setAngleInput(e.target.value);
                   const next = Number(e.target.value);
-                  if (Number.isFinite(next)) setAngle(next);
+                  if (Number.isFinite(next)) {
+                    const normalised = ((next % 360) + 360) % 360;
+                    setAngle(next);
+                    setAngleInput(String(Math.round(normalised)));
+                  } else {
+                    setAngleInput(e.target.value);
+                  }
                 }}
                 onBlur={() => setAngleInput(null)}
                 className="h-full min-w-0 flex-1 bg-transparent px-1.5 text-[11px] tabular-nums focus-visible:outline-none"