@morphika/andami 0.1.3 → 0.1.5

package/components/builder/color-picker/index.ts

@@ -0,0 +1,62 @@
+/**
+ * Color Picker v2 — Barrel exports.
+ *
+ * Phase 1: Solid color picker with modal UI.
+ * Phase 3: Gradient components (GradientBar, GradientPreview, AngleControl,
+ *           PositionControl, MeshCanvas, MeshPointList, StopEditor).
+ */
+
+export { default as UnifiedColorPicker } from "./UnifiedColorPicker";
+export { default as SaturationCanvas } from "./SaturationCanvas";
+export { default as HueSlider } from "./HueSlider";
+export { default as AlphaSlider } from "./AlphaSlider";
+export { default as ColorInputs } from "./ColorInputs";
+export { default as EyedropperButton } from "./EyedropperButton";
+export { default as SwatchBar } from "./SwatchBar";
+
+// Phase 3: Gradient components
+export { default as GradientBar } from "./GradientBar";
+export { default as GradientPreview } from "./GradientPreview";
+export { default as AngleControl } from "./AngleControl";
+export { default as PositionControl } from "./PositionControl";
+export { default as MeshCanvas } from "./MeshCanvas";
+export { default as MeshPointList } from "./MeshPointList";
+export { default as MeshPointEditor } from "./MeshPointEditor";
+export { default as StopEditor } from "./StopEditor";
+
+// Types
+export type {
+  ColorFormat,
+  HSV,
+  HSL,
+  RGB,
+  GradientStop,
+  MeshPoint,
+  LinearGradient,
+  RadialGradient,
+  MeshGradient,
+  GradientValue,
+  ColorField,
+  UnifiedColorPickerProps,
+  SaturationCanvasProps,
+  HueSliderProps,
+  AlphaSliderProps,
+  ColorInputsProps,
+  EyedropperButtonProps,
+  SwatchBarProps,
+} from "./types";
+
+// Utils
+export {
+  hexToRGB,
+  rgbToHex,
+  hslToHex,
+  formatColorValue,
+  parseColorInput,
+  clamp,
+  hexToHSL,
+  hexToHSV,
+  hsvToHex,
+  hexToRgba,
+  isValidHex,
+} from "./utils";

package/components/builder/color-picker/types.ts

@@ -0,0 +1,115 @@
+/**
+ * Color Picker v2 — Type definitions.
+ *
+ * Gradient/ColorField types are canonical in lib/sanity/types.ts.
+ * Re-exported here for convenience within the color-picker module.
+ */
+
+import type { ColorSwatch } from "../../../lib/sanity/types";
+
+// Re-export canonical gradient types from lib/sanity/types
+export type {
+  GradientStop,
+  MeshPoint,
+  LinearGradient,
+  RadialGradient,
+  MeshGradient,
+  GradientValue,
+  ColorField,
+} from "../../../lib/sanity/types";
+
+// ─── Color Formats ───
+
+/** Supported color input/display formats */
+export type ColorFormat = "hex" | "rgb" | "hsl";
+
+// ─── HSV / HSL / RGB ───
+
+export interface HSV {
+  h: number; // 0-360
+  s: number; // 0-100
+  v: number; // 0-100
+}
+
+export interface HSL {
+  h: number; // 0-360
+  s: number; // 0-100
+  l: number; // 0-100
+}
+
+export interface RGB {
+  r: number; // 0-255
+  g: number; // 0-255
+  b: number; // 0-255
+}
+
+// ─── Component Props ───
+
+import type { ColorField } from "../../../lib/sanity/types";
+
+/**
+ * Props for the unified color picker modal.
+ * Phase 3: value and onChange use ColorField (string | GradientValue).
+ */
+export interface UnifiedColorPickerProps {
+  /** Current color value — hex string or GradientValue */
+  value: ColorField;
+  /** Callback when color is confirmed */
+  onChange: (value: ColorField) => void;
+  /** Close modal */
+  onClose: () => void;
+  /** Palette swatches from global styles */
+  swatches?: ColorSwatch[];
+  /** Label for the confirm button */
+  confirmLabel?: string;
+  /** Alpha value 0-1 (used for solid tab display) */
+  alpha?: number;
+  /** Callback when alpha changes */
+  onAlphaChange?: (alpha: number) => void;
+  /** Allow gradient tabs? false = only Solid tab visible (default false) */
+  allowGradients?: boolean;
+  /** Live preview callback — called throttled during drag interactions (Phase 4).
+   *  Does NOT fire on confirm — use onChange for that. */
+  onPreview?: (value: ColorField) => void;
+}
+
+export interface SaturationCanvasProps {
+  hue: number;
+  saturation: number;
+  value: number;
+  onChange: (saturation: number, value: number) => void;
+}
+
+export interface HueSliderProps {
+  hue: number;
+  onChange: (hue: number) => void;
+}
+
+export interface AlphaSliderProps {
+  /** Current hex color (for the gradient display) */
+  color: string;
+  /** Alpha value 0-1 */
+  alpha: number;
+  onChange: (alpha: number) => void;
+}
+
+export interface ColorInputsProps {
+  hex: string;
+  onHexChange: (hex: string) => void;
+  alpha?: number;
+}
+
+export interface EyedropperButtonProps {
+  onColorPicked: (hex: string) => void;
+}
+
+export interface SwatchBarProps {
+  /** Current hex value (for active state) */
+  value: string;
+  /** Callback on swatch click */
+  onSelect: (hex: string) => void;
+  /** User palette swatches */
+  swatches?: ColorSwatch[];
+  /** Current hex to potentially add to palette */
+  currentColor?: string;
+}

package/components/builder/color-picker/utils.ts

@@ -0,0 +1,138 @@
+/**
+ * Color Picker v2 — Utility functions.
+ *
+ * Re-exports core conversions from lib/color-utils.ts and adds
+ * picker-specific helpers (HSV↔HSL, RGB↔hex, format display).
+ */
+
+import {
+  hexToHSL,
+  hexToHSV,
+  hsvToHex,
+  hexToRgba,
+  isValidHex,
+} from "../../../lib/color-utils";
+
+import type { HSV, HSL, RGB, ColorFormat } from "./types";
+
+// ─── Re-exports ───
+export { hexToHSL, hexToHSV, hsvToHex, hexToRgba, isValidHex };
+
+// ─── RGB helpers ───
+
+/** Parse a hex string (#RRGGBB) into RGB components. */
+export function hexToRGB(hex: string): RGB {
+  const clean = hex.replace("#", "");
+  return {
+    r: parseInt(clean.slice(0, 2), 16) || 0,
+    g: parseInt(clean.slice(2, 4), 16) || 0,
+    b: parseInt(clean.slice(4, 6), 16) || 0,
+  };
+}
+
+/** Convert RGB components to hex string (#rrggbb). */
+export function rgbToHex(r: number, g: number, b: number): string {
+  const clamp = (n: number) => Math.max(0, Math.min(255, Math.round(n)));
+  const toH = (n: number) => clamp(n).toString(16).padStart(2, "0");
+  return `#${toH(r)}${toH(g)}${toH(b)}`;
+}
+
+// ─── HSL helpers ───
+
+/** Convert HSL to hex. */
+export function hslToHex(h: number, s: number, l: number): string {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  return rgbToHex(
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255)
+  );
+}
+
+// ─── Format display ───
+
+/**
+ * Format a hex color for display in the given format.
+ * Returns the string to show in the color input.
+ */
+export function formatColorValue(hex: string, format: ColorFormat): string {
+  if (!isValidHex(hex)) return hex;
+  switch (format) {
+    case "hex":
+      return hex.toUpperCase();
+    case "rgb": {
+      const { r, g, b } = hexToRGB(hex);
+      return `${r}, ${g}, ${b}`;
+    }
+    case "hsl": {
+      const { h, s, l } = hexToHSL(hex);
+      return `${h}, ${s}%, ${l}%`;
+    }
+  }
+}
+
+/**
+ * Parse a color input string in the given format back to hex.
+ * Returns null if the input is not valid for the format.
+ */
+export function parseColorInput(
+  input: string,
+  format: ColorFormat
+): string | null {
+  const trimmed = input.trim();
+  switch (format) {
+    case "hex": {
+      let v = trimmed;
+      if (!v.startsWith("#")) v = "#" + v;
+      return isValidHex(v) ? v.toLowerCase() : null;
+    }
+    case "rgb": {
+      const parts = trimmed.split(/[,\s]+/).map((s) => parseInt(s, 10));
+      if (parts.length !== 3 || parts.some((n) => isNaN(n) || n < 0 || n > 255))
+        return null;
+      return rgbToHex(parts[0], parts[1], parts[2]);
+    }
+    case "hsl": {
+      const cleaned = trimmed.replace(/%/g, "");
+      const parts = cleaned.split(/[,\s]+/).map((s) => parseFloat(s));
+      if (parts.length !== 3) return null;
+      const [h, s, l] = parts;
+      if (isNaN(h) || isNaN(s) || isNaN(l)) return null;
+      if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return null;
+      return hslToHex(h, s, l);
+    }
+  }
+}
+
+/**
+ * Clamp a number to [min, max].
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}

package/components/builder/editors/CoverBlockEditor.tsx

@@ -15,6 +15,8 @@ import {
   SELECT_CLASS,
 } from "./shared";
 import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
+import type { ColorField } from "../../../lib/sanity/types";
 
 interface Props {
   block: CoverBlock;
@@ -354,41 +356,93 @@ export default function CoverBlockEditor({ block }: Props) {
 
       {/* ========== OVERLAY ========== */}
       <SettingsSection title="Cover Effects">
-        <SettingsField label="Overlay">
-          <select
-            value={block.overlay || "dark"}
-            onChange={(e) =>
-              update({
-                overlay: e.target.value as CoverBlock["overlay"],
-              })
-            }
-            className={SELECT_CLASS}
-          >
-            <option value="none">None</option>
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-            <option value="gradient-bottom">Gradient (Bottom)</option>
-            <option value="gradient-top">Gradient (Top)</option>
-          </select>
+        {/* Toggle: Custom gradient vs Preset overlay */}
+        <SettingsField label="Overlay Mode">
+          <div className="flex gap-1">
+            {(["preset", "custom"] as const).map((mode) => {
+              const isActive = mode === "custom" ? !!block.overlay_gradient : !block.overlay_gradient;
+              return (
+                <button
+                  key={mode}
+                  onClick={() => {
+                    if (mode === "custom" && !block.overlay_gradient) {
+                      // Switch to custom: initialize with a dark semi-transparent solid
+                      update({ overlay_gradient: "#00000080" });
+                    } else if (mode === "preset" && block.overlay_gradient) {
+                      // Switch to preset: clear overlay_gradient
+                      update({ overlay_gradient: undefined });
+                    }
+                  }}
+                  className={`flex-1 rounded border py-1 text-[10px] capitalize transition-colors ${
+                    isActive
+                      ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                      : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                  }`}
+                >
+                  {mode === "preset" ? "Preset" : "Custom"}
+                </button>
+              );
+            })}
+          </div>
         </SettingsField>
 
-        {block.overlay && block.overlay !== "none" && (
-          <SettingsField label="Opacity">
-            <div className="flex items-center gap-2">
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={block.overlay_opacity ?? 50}
+        {/* Preset overlay controls */}
+        {!block.overlay_gradient && (
+          <>
+            <SettingsField label="Overlay">
+              <select
+                value={block.overlay || "dark"}
                 onChange={(e) =>
-                  update({ overlay_opacity: parseInt(e.target.value, 10) })
+                  update({
+                    overlay: e.target.value as CoverBlock["overlay"],
+                  })
                 }
-                className="flex-1 accent-[#076bff]"
-              />
-              <span className="text-xs text-neutral-500 w-8 text-right">
-                {block.overlay_opacity ?? 50}%
-              </span>
-            </div>
+                className={SELECT_CLASS}
+              >
+                <option value="none">None</option>
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+                <option value="gradient-bottom">Gradient (Bottom)</option>
+                <option value="gradient-top">Gradient (Top)</option>
+              </select>
+            </SettingsField>
+
+            {block.overlay && block.overlay !== "none" && (
+              <SettingsField label="Opacity">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="range"
+                    min={0}
+                    max={100}
+                    value={block.overlay_opacity ?? 50}
+                    onChange={(e) =>
+                      update({ overlay_opacity: parseInt(e.target.value, 10) })
+                    }
+                    className="flex-1 accent-[#076bff]"
+                  />
+                  <span className="text-xs text-neutral-500 w-8 text-right">
+                    {block.overlay_opacity ?? 50}%
+                  </span>
+                </div>
+              </SettingsField>
+            )}
+          </>
+        )}
+
+        {/* Custom overlay gradient (Phase 4) */}
+        {block.overlay_gradient && (
+          <SettingsField label="Overlay Color">
+            <ColorSwatchPicker
+              value={(() => {
+                const parsed = parseColorField(block.overlay_gradient);
+                return typeof parsed === "string" ? parsed : parsed;
+              })()}
+              onChange={(val: ColorField) => {
+                update({ overlay_gradient: serializeColorField(val) });
+              }}
+              swatches={paletteSwatches}
+              allowGradients
+            />
           </SettingsField>
         )}
       </SettingsSection>
@@ -472,7 +526,7 @@ export default function CoverBlockEditor({ block }: Props) {
         <SettingsField label="Text Color">
           <ColorSwatchPicker
             value={block.text_color || ""}
-            onChange={(hex) => update({ text_color: hex || "#ffffff" })}
+            onChange={(hex) => update({ text_color: (typeof hex === "string" ? hex : "#ffffff") || "#ffffff" })}
             swatches={paletteSwatches}
           />
         </SettingsField>

package/components/builder/editors/ProjectGridEditor.tsx

@@ -232,6 +232,53 @@ function CardRatioChips({
   );
 }
 
+// ============================================
+// Section title icons (small, inline — matching BlockLayoutTab)
+// ============================================
+
+function GridSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1.5" y="1.5" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
+      <rect x="8" y="1.5" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
+      <rect x="1.5" y="8" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
+      <rect x="8" y="8" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
+    </svg>
+  );
+}
+
+function AppearanceSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
+      <path d="M7 2 A5 5 0 0 1 7 12 Z" fill="currentColor" opacity="0.3" />
+      <circle cx="7" cy="7" r="1.5" fill="currentColor" opacity="0.6" />
+    </svg>
+  );
+}
+
+function VideoSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1.5" y="3" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
+      <path d="M10 6 L12.5 4.5 L12.5 9.5 L10 8 Z" fill="currentColor" opacity="0.5" />
+    </svg>
+  );
+}
+
+function ProjectsSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1.5" y="2" width="11" height="3" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
+      <rect x="1.5" y="7" width="11" height="3" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
+      <circle cx="4" cy="3.5" r="0.8" fill="currentColor" opacity="0.6" />
+      <circle cx="4" cy="8.5" r="0.8" fill="currentColor" opacity="0.6" />
+      <rect x="6" y="3" width="4" height="1" rx="0.5" fill="currentColor" opacity="0.4" />
+      <rect x="6" y="8" width="4" height="1" rx="0.5" fill="currentColor" opacity="0.4" />
+    </svg>
+  );
+}
+
 // ============================================
 // Main Editor
 // ============================================
@@ -409,7 +456,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
       {isResponsive && <ViewportBadge />}
 
       {/* ─── Grid Settings ─── */}
-      <SettingsSection title="Grid">
+      <SettingsSection title="Grid" icon={<GridSectionIcon />}>
         <SettingsField label="Columns">
           <RangeSlider
             value={effectiveColumns}
@@ -450,7 +497,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
       </SettingsSection>
 
       {/* ─── Appearance ─── */}
-      <SettingsSection title="Appearance">
+      <SettingsSection title="Appearance" icon={<AppearanceSectionIcon />}>
         <SettingsField label="Hover">
           <SegmentedControl
             options={HOVER_EFFECT_OPTIONS}
@@ -477,7 +524,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
       </SettingsSection>
 
       {/* ─── Video ─── */}
-      <SettingsSection title="Video">
+      <SettingsSection title="Video" icon={<VideoSectionIcon />}>
         <SettingsField label="Mode">
           <SegmentedControl
             options={VIDEO_MODE_OPTIONS}
@@ -488,7 +535,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
       </SettingsSection>
 
       {/* ─── Projects ─── */}
-      <SettingsSection title={`Projects (${(block.projects || []).length})`}>
+      <SettingsSection title={`Projects (${(block.projects || []).length})`} icon={<ProjectsSectionIcon />}>
         {(block.projects || []).length === 0 ? (
           <p className="text-xs text-neutral-400 py-2">
             No projects selected. Add projects below.

package/components/builder/hooks/useColumnDrag.ts

@@ -177,7 +177,11 @@ export function useColumnDrag(): UseColumnDragReturn {
   const [insertBetween, setInsertBetween] = useState<InsertBetween | null>(null);
   const [overlayPosition, setOverlayPosition] = useState<{ x: number; y: number } | null>(null);
 
-  // --- Mutable ref for drag state + store actions (stale closure prevention) ---
+  // --- Mutable ref for drag state ---
+  // RC-002 fix: Store actions are read directly from useBuilderStore.getState()
+  // at execution time instead of being synced via useEffect. This eliminates
+  // the stale closure window between render and effect, where rapid
+  // click+drag could execute stale action references.
   const dragRef = useRef({
     sectionKey: "",
     columnKey: "",
@@ -186,26 +190,18 @@ export function useColumnDrag(): UseColumnDragReturn {
     startX: 0,
     startY: 0,
     draggedEl: null as HTMLElement | null, // pointer-events guard
-    // Store actions — updated every render via useEffect
-    swapColumnV2: null as ((s: string, d: string, t: string) => void) | null,
-    moveColumnToGapV2: null as ((s: string, c: string, r: number, col: number, sp: number) => void) | null,
-    moveColumnV2: null as ((s: string, c: string, r: number, col: number) => void) | null,
-    updateSectionV2Responsive: null as ((s: string, r: PageSectionV2["responsive"]) => void) | null,
   });
 
-  // Keep store actions fresh in the ref
-  const swapColumnV2 = useBuilderStore((s) => s.swapColumnV2);
-  const moveColumnToGapV2 = useBuilderStore((s) => s.moveColumnToGapV2);
-  const moveColumnV2 = useBuilderStore((s) => s.moveColumnV2);
-  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
-
-  // Update ref every render — no deps array
-  useEffect(() => {
-    dragRef.current.swapColumnV2 = swapColumnV2;
-    dragRef.current.moveColumnToGapV2 = moveColumnToGapV2;
-    dragRef.current.moveColumnV2 = moveColumnV2;
-    dragRef.current.updateSectionV2Responsive = updateSectionV2Responsive;
-  });
+  /** Read a fresh store action at call time — never stale */
+  const getActions = () => {
+    const s = useBuilderStore.getState();
+    return {
+      swapColumnV2: s.swapColumnV2,
+      moveColumnToGapV2: s.moveColumnToGapV2,
+      moveColumnV2: s.moveColumnV2,
+      updateSectionV2Responsive: s.updateSectionV2Responsive,
+    };
+  };
 
   // --- Stable mousemove handler (empty deps — delegates to dragRef) ---
   const stableMouseMove = useCallback((e: MouseEvent) => {
@@ -373,23 +369,25 @@ export function useColumnDrag(): UseColumnDragReturn {
       }
     }
 
-    // Execute the drop action
+    // Execute the drop action — read actions fresh from store (RC-002)
     if (finalTarget) {
-      const activeViewport = useBuilderStore.getState().activeViewport;
+      const storeState = useBuilderStore.getState();
+      const activeViewport = storeState.activeViewport;
       const isResponsive = activeViewport !== "desktop";
+      const actions = getActions();
 
       if (finalTarget.type === "swap" && finalTarget.columnKey) {
         if (!isResponsive) {
-          dragRef.current.swapColumnV2?.(sectionKey, columnKey, finalTarget.columnKey);
+          actions.swapColumnV2(sectionKey, columnKey, finalTarget.columnKey);
         } else {
           executeResponsiveSwap(
             sectionKey, columnKey, finalTarget.columnKey, activeViewport,
-            dragRef.current.updateSectionV2Responsive!
+            actions.updateSectionV2Responsive
           );
         }
       } else if (finalTarget.type === "gap") {
         if (!isResponsive) {
-          dragRef.current.moveColumnToGapV2?.(
+          actions.moveColumnToGapV2(
             sectionKey, columnKey,
             finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!
           );
@@ -398,12 +396,12 @@ export function useColumnDrag(): UseColumnDragReturn {
             sectionKey, columnKey,
             finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!,
             activeViewport,
-            dragRef.current.updateSectionV2Responsive!
+            actions.updateSectionV2Responsive
           );
         }
       } else if (finalTarget.type === "insert") {
         if (!isResponsive) {
-          dragRef.current.moveColumnV2?.(
+          actions.moveColumnV2(
             sectionKey, columnKey,
             finalTarget.insertRow!, finalTarget.insertCol!
           );
@@ -412,7 +410,7 @@ export function useColumnDrag(): UseColumnDragReturn {
             sectionKey, columnKey,
             finalTarget.insertRow!, finalTarget.insertCol!,
             activeViewport,
-            dragRef.current.updateSectionV2Responsive!
+            actions.updateSectionV2Responsive
           );
         }
       }