@morphika/andami 0.1.3 → 0.1.5

package/components/builder/ColorSwatchPicker.tsx

@@ -1,274 +1,214 @@
-"use client";
-
-/**
- * ColorSwatchPicker — Dropdown color picker used in block editors.
- * Shows the user's palette swatches + common colors + custom picker.
- *
- * Used in: SettingsPanel (row/block bg, border), TextBlockEditor (text color),
- * CoverBlockEditor (text color), and any future color field.
- *
- * The dropdown uses a portal + fixed positioning so it is never clipped
- * by ancestor `overflow: auto/hidden` containers (e.g. SettingsPanel).
- */
-
-import { useState, useRef, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
-import ColorPicker, { isValidHex } from "./ColorPicker";
-import type { ColorSwatch } from "../../lib/sanity/types";
-
-// Common neutral colors always available
-const COMMON_COLORS = [
-  "#ffffff", "#f5f5f5", "#e5e5e5", "#a3a3a3",
-  "#525252", "#262626", "#171717", "#000000",
-];
-
-interface ColorSwatchPickerProps {
-  /** Current color value (hex string or empty) */
-  value: string;
-  /** Callback when color changes */
-  onChange: (hex: string) => void;
-  /** Palette swatches from global styles */
-  swatches?: ColorSwatch[];
-  /** Optional label */
-  label?: string;
-  /** Allow clearing the color */
-  allowClear?: boolean;
-  /** Compact inline mode (no popover, just the swatch row) */
-  inline?: boolean;
-}
-
-export default function ColorSwatchPicker({
-  value,
-  onChange,
-  swatches = [],
-  label,
-  allowClear = true,
-  inline = false,
-}: ColorSwatchPickerProps) {
-  const [open, setOpen] = useState(false);
-  const [customOpen, setCustomOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const portalRef = useRef<HTMLDivElement>(null);
-  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-
-  // Compute dropdown position from trigger button's bounding rect
-  useEffect(() => {
-    if (!open || !containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    // Position below the trigger, right-aligned
-    const panelWidth = 244; // min-w-[220px] + padding
-    let left = rect.right - panelWidth;
-    // Clamp to viewport left edge
-    if (left < 8) left = 8;
-    setDropdownPos({ top: rect.bottom + 4, left });
-  }, [open]);
-
-  // Close on outside click — check both container and portal
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      const target = e.target as Node;
-      const inContainer = containerRef.current?.contains(target);
-      const inPortal = portalRef.current?.contains(target);
-      if (!inContainer && !inPortal) {
-        setOpen(false);
-        setCustomOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  // Close on scroll of any ancestor (reposition would be complex; just close)
-  useEffect(() => {
-    if (!open) return;
-    const handler = () => {
-      if (!containerRef.current) return;
-      // Recompute position on scroll instead of closing
-      const rect = containerRef.current.getBoundingClientRect();
-      const panelWidth = 244;
-      let left = rect.right - panelWidth;
-      if (left < 8) left = 8;
-      setDropdownPos({ top: rect.bottom + 4, left });
-    };
-    // Listen on capture phase to catch scrolls on any ancestor
-    window.addEventListener("scroll", handler, { capture: true, passive: true });
-    return () => window.removeEventListener("scroll", handler, { capture: true });
-  }, [open]);
-
-  const handleSelect = useCallback((hex: string) => {
-    onChange(hex);
-    if (!inline) {
-      setOpen(false);
-      setCustomOpen(false);
-    }
-  }, [onChange, inline]);
-
-  const handleClear = useCallback(() => {
-    onChange("");
-    setOpen(false);
-  }, [onChange]);
-
-  // ─── Trigger button (the colored swatch + hex label) ───
-  const trigger = (
-    <button
-      type="button"
-      onClick={() => setOpen(!open)}
-      className="flex items-center gap-2 px-1.5 py-1 rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 transition-colors cursor-pointer w-full"
-    >
-      <div
-        className="w-6 h-6 rounded-md border border-neutral-200 shrink-0"
-        style={{
-          background: value && isValidHex(value) ? value : "transparent",
-          backgroundImage: !value ? "linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%), linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%)" : undefined,
-          backgroundSize: !value ? "6px 6px" : undefined,
-          backgroundPosition: !value ? "0 0, 3px 3px" : undefined,
-        }}
-      />
-      <span className="text-[11px] text-neutral-500 font-mono truncate">
-        {value ? value.toUpperCase() : "None"}
-      </span>
-    </button>
-  );
-
-  // ─── Dropdown panel ───
-  const panel = (
-    <div className="bg-white rounded-xl border border-neutral-200 p-3 shadow-xl min-w-[220px]">
-
-      {/* User palette swatches */}
-      {swatches.length > 0 && (
-        <div className="mb-3">
-          <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-1.5">Palette</div>
-          <div className="flex flex-wrap gap-1.5">
-            {swatches.map((s, i) => (
-              <button
-                key={s._key || i}
-                onClick={() => handleSelect(s.hex)}
-                title={`${s.name}: ${s.hex}`}
-                className={`w-7 h-7 rounded-lg cursor-pointer transition-all ${
-                  value === s.hex
-                    ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                    : "border border-neutral-200 hover:border-neutral-400"
-                }`}
-                style={{ background: s.hex }}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Common colors */}
-      <div className="mb-3">
-        <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-1.5">Common</div>
-        <div className="flex flex-wrap gap-1.5">
-          {COMMON_COLORS.map((c) => (
-            <button
-              key={c}
-              onClick={() => handleSelect(c)}
-              title={c}
-              className={`w-7 h-7 rounded-lg cursor-pointer transition-all ${
-                value === c
-                  ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                  : "border border-neutral-200 hover:border-neutral-400"
-              }`}
-              style={{ background: c }}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Custom color toggle */}
-      {!customOpen ? (
-        <button
-          onClick={() => setCustomOpen(true)}
-          className="w-full py-1.5 rounded-lg border border-dashed border-neutral-300 text-neutral-400 text-[10px] uppercase tracking-widest cursor-pointer hover:border-neutral-400 hover:text-neutral-600 transition-colors"
-        >
-          Custom color
-        </button>
-      ) : (
-        <div className="mt-1">
-          <ColorPicker
-            color={value || "#ffffff"}
-            onChange={(hex) => handleSelect(hex)}
-            onClose={() => setCustomOpen(false)}
-            confirmLabel="Apply"
-          />
-        </div>
-      )}
-
-      {/* Clear button */}
-      {allowClear && value && (
-        <button
-          onClick={handleClear}
-          className="w-full mt-2 py-1.5 rounded-lg border border-neutral-200 text-neutral-400 text-[10px] uppercase tracking-widest cursor-pointer hover:border-red-300 hover:text-red-500 transition-colors"
-        >
-          Clear color
-        </button>
-      )}
-    </div>
-  );
-
-  return (
-    <div ref={containerRef} className="relative">
-      {label && (
-        <label className="text-[10px] text-neutral-500 uppercase tracking-wider block mb-1">
-          {label}
-        </label>
-      )}
-      {trigger}
-      {open && typeof document !== "undefined" &&
-        createPortal(
-          <div
-            ref={portalRef}
-            className="fixed z-[9999]"
-            style={{ top: dropdownPos.top, left: dropdownPos.left }}
-          >
-            {panel}
-          </div>,
-          document.body
-        )
-      }
-    </div>
-  );
-}
-
-// ─── Hook: fetch palette swatches from admin styles API ───
-
-let cachedSwatches: ColorSwatch[] | null = null;
-let cachePromise: Promise<ColorSwatch[]> | null = null;
-
-export function usePaletteSwatches(): ColorSwatch[] {
-  const [swatches, setSwatches] = useState<ColorSwatch[]>(cachedSwatches || []);
-
-  useEffect(() => {
-    if (cachedSwatches) {
-      setSwatches(cachedSwatches);
-      return;
-    }
-
-    if (!cachePromise) {
-      cachePromise = fetch("/api/admin/styles")
-        .then((res) => (res.ok ? res.json() : { styles: { colors: { swatches: [] } } }))
-        .then((data) => {
-          const s = data?.styles?.colors?.swatches || [];
-          cachedSwatches = s;
-          return s;
-        })
-        .catch(() => {
-          /* Color palette unavailable — use empty swatches */
-          cachedSwatches = [];
-          return [];
-        });
-    }
-
-    cachePromise.then((s) => setSwatches(s));
-  }, []);
-
-  return swatches;
-}
-
-/** Invalidate the cached swatches (call after saving palette) */
-export function invalidatePaletteCache() {
-  cachedSwatches = null;
-  cachePromise = null;
-}
+"use client";
+
+/**
+ * ColorSwatchPicker — Trigger component for the color picker.
+ *
+ * Shows a colored swatch + hex/gradient label. On click, opens the
+ * UnifiedColorPicker as a centered modal (Color Picker v2).
+ *
+ * Phase 3: Supports `ColorField` (string | GradientValue) for value/onChange.
+ * - When `allowGradients={true}`, gradient tabs appear in the modal.
+ * - The trigger swatch renders gradients as a mini CSS preview.
+ * - Backward compatible: string-only usage still works (default behavior).
+ *
+ * Used in: SettingsPanel (row/block bg, border), TextBlockEditor (text color),
+ * CoverBlockEditor (text color), BlockLayoutTab, SectionV2LayoutTab,
+ * PageSettings, ParallaxSlideSettings, and any future color field.
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import { UnifiedColorPicker } from "./color-picker";
+import {
+  isValidHex,
+  isGradient,
+  colorToCSS,
+  resolveColorHex,
+  serializeColorField,
+} from "../../lib/color-utils";
+import type { ColorSwatch, ColorField } from "../../lib/sanity/types";
+
+interface ColorSwatchPickerProps {
+  /** Current color value (hex string, empty string, or GradientValue) */
+  value: ColorField | string;
+  /** Callback when color changes */
+  onChange: (value: ColorField) => void;
+  /** Palette swatches from global styles */
+  swatches?: ColorSwatch[];
+  /** Optional label */
+  label?: string;
+  /** Allow clearing the color */
+  allowClear?: boolean;
+  /** Allow gradient tabs in the picker (default false) */
+  allowGradients?: boolean;
+  /** Live preview callback — called during drag in the picker (Phase 4). */
+  onPreview?: (value: ColorField) => void;
+  /** @deprecated Inline mode is no longer supported in v2. Ignored. */
+  inline?: boolean;
+}
+
+export default function ColorSwatchPicker({
+  value,
+  onChange,
+  swatches = [],
+  label,
+  allowClear = true,
+  allowGradients = false,
+  onPreview,
+}: ColorSwatchPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleChange = useCallback(
+    (newValue: ColorField) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  const handleClear = useCallback(() => {
+    onChange("");
+    setOpen(false);
+  }, [onChange]);
+
+  // Determine display values for the trigger
+  const isGrad = typeof value !== "string" && isGradient(value as ColorField);
+  const displayHex = isGrad
+    ? resolveColorHex(value as ColorField)
+    : typeof value === "string"
+    ? value
+    : "";
+  const displayLabel = isGrad
+    ? (value as { type: string }).type.charAt(0).toUpperCase() +
+      (value as { type: string }).type.slice(1)
+    : displayHex
+    ? displayHex.toUpperCase()
+    : "None";
+
+  // Build trigger swatch style
+  const swatchStyle: React.CSSProperties = isGrad
+    ? {
+        backgroundImage: colorToCSS(value as ColorField),
+      }
+    : {
+        background:
+          typeof value === "string" && value && isValidHex(value)
+            ? value
+            : "transparent",
+        backgroundImage:
+          !value
+            ? "linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%), linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%)"
+            : undefined,
+        backgroundSize: !value ? "6px 6px" : undefined,
+        backgroundPosition: !value ? "0 0, 3px 3px" : undefined,
+      };
+
+  // Picker value: ensure we pass a valid ColorField
+  const pickerValue: ColorField =
+    isGrad
+      ? (value as ColorField)
+      : typeof value === "string" && isValidHex(value)
+      ? value
+      : "#ffffff";
+
+  return (
+    <div className="relative">
+      {label && (
+        <label className="text-[10px] text-neutral-500 uppercase tracking-wider block mb-1">
+          {label}
+        </label>
+      )}
+
+      {/* Trigger button */}
+      <button
+        type="button"
+        onClick={handleOpen}
+        className="flex items-center gap-2 px-1.5 py-1 rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 transition-colors cursor-pointer w-full"
+      >
+        <div
+          className="w-6 h-6 rounded-md border border-neutral-200 shrink-0"
+          style={swatchStyle}
+        />
+        <span className="text-[11px] text-neutral-500 font-mono truncate">
+          {displayLabel}
+        </span>
+      </button>
+
+      {/* Clear button (inline, below trigger) */}
+      {allowClear && value && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className="w-full mt-1 py-1 rounded-md border border-neutral-200 text-neutral-400 text-[9px] uppercase tracking-widest cursor-pointer hover:border-red-300 hover:text-red-500 transition-colors"
+        >
+          Clear
+        </button>
+      )}
+
+      {/* Modal picker */}
+      {open && (
+        <UnifiedColorPicker
+          value={pickerValue}
+          onChange={handleChange}
+          onClose={handleClose}
+          swatches={swatches}
+          confirmLabel="Apply Color"
+          allowGradients={allowGradients}
+          onPreview={onPreview}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Hook: fetch palette swatches from admin styles API ───
+
+let cachedSwatches: ColorSwatch[] | null = null;
+let cachePromise: Promise<ColorSwatch[]> | null = null;
+
+export function usePaletteSwatches(): ColorSwatch[] {
+  const [swatches, setSwatches] = useState<ColorSwatch[]>(
+    cachedSwatches || []
+  );
+
+  useEffect(() => {
+    if (cachedSwatches) {
+      setSwatches(cachedSwatches);
+      return;
+    }
+
+    if (!cachePromise) {
+      cachePromise = fetch("/api/admin/styles")
+        .then((res) =>
+          res.ok
+            ? res.json()
+            : { styles: { colors: { swatches: [] } } }
+        )
+        .then((data) => {
+          const s = data?.styles?.colors?.swatches || [];
+          cachedSwatches = s;
+          return s;
+        })
+        .catch(() => {
+          cachedSwatches = [];
+          return [];
+        });
+    }
+
+    cachePromise.then((s) => setSwatches(s));
+  }, []);
+
+  return swatches;
+}
+
+/** Invalidate the cached swatches (call after saving palette) */
+export function invalidatePaletteCache() {
+  cachedSwatches = null;
+  cachePromise = null;
+}

package/components/builder/DndWrapper.tsx

@@ -65,7 +65,10 @@ function parseId(id: string) {
 // Drag Overlay Components
 // ============================================
 
-function RowDragOverlay({ rowKey }: { rowKey: string }) {
+// PERF-001 fix: Memoize RowDragOverlay — subscribes to s.rows which changes
+// on any content mutation. Without memo, DragOverlay re-renders on every
+// zoom/pan change because DndWrapper re-renders (canvasZoom subscription).
+const RowDragOverlay = memo(function RowDragOverlay({ rowKey }: { rowKey: string }) {
   const rows = useBuilderStore((s) => s.rows);
   const item = rows.find((r) => r._key === rowKey);
   if (!item) return null;
@@ -114,7 +117,7 @@ function RowDragOverlay({ rowKey }: { rowKey: string }) {
   }
 
   return null;
-}
+});
 
 const BlockDragOverlay = memo(function BlockDragOverlay({ blockKey, rowKey }: { blockKey: string; rowKey: string }) {
   const rows = useBuilderStore((s) => s.rows);

package/components/builder/SectionV2Canvas.tsx

@@ -101,18 +101,29 @@ export default function SectionV2Canvas({
   // Measure container width for pixel position calculation.
   // Uses ResizeObserver so it updates when the grid resizes (zoom change, window resize)
   // and is also immediately available when a drag starts (no stale 0 value).
+  // PERF-003 fix: Debounce ResizeObserver callback to avoid excessive re-renders
+  // during continuous resize events (zoom drag, window resize).
   useEffect(() => {
     const el = gridContainerRef.current;
     if (!el) return;
+    let rafId: number | null = null;
     const ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setContainerWidth(entry.contentRect.width);
-      }
+      // Coalesce via rAF — at most one setState per frame
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        for (const entry of entries) {
+          setContainerWidth(entry.contentRect.width);
+        }
+      });
     });
     ro.observe(el);
     // Set initial value immediately
     setContainerWidth(el.getBoundingClientRect().width);
-    return () => ro.disconnect();
+    return () => {
+      ro.disconnect();
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
   }, []);
 
   // Use preview columns during resize, otherwise responsive-aware effective columns

package/components/builder/asset-browser/useAssetBrowser.ts

@@ -23,10 +23,15 @@ export function useAssetBrowser(onScanComplete?: (result: Record<string, unknown
   const [uploading, setUploading] = useState<UploadingFile[]>([]);
   const [r2Available, setR2Available] = useState(false);
   const uploadCleanupTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // LEAK-001 fix: Mounted guard prevents setState calls from timer callbacks
+  // that fire during the unmount cleanup race window.
+  const isMountedRef = useRef(true);
 
   // Clean up pending timer on unmount
   useEffect(() => {
+    isMountedRef.current = true;
     return () => {
+      isMountedRef.current = false;
       if (uploadCleanupTimer.current) clearTimeout(uploadCleanupTimer.current);
     };
   }, []);
@@ -297,10 +302,13 @@ export function useAssetBrowser(onScanComplete?: (result: Record<string, unknown
     onUploadComplete?.();
 
     // Clear completed uploads after a short delay (with cleanup on unmount)
+    // LEAK-001 fix: Guard prevents setState after unmount.
     if (uploadCleanupTimer.current) clearTimeout(uploadCleanupTimer.current);
     uploadCleanupTimer.current = setTimeout(() => {
       uploadCleanupTimer.current = null;
-      setUploading((prev) => prev.filter((u) => u.status !== "done"));
+      if (isMountedRef.current) {
+        setUploading((prev) => prev.filter((u) => u.status !== "done"));
+      }
     }, 2000);
   }, [fetchAssets, onUploadComplete]);