@morphika/andami 0.1.2 → 0.1.5

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -66,6 +66,8 @@ export default function ProjectGridBlockRenderer({
   const containerTopRef = useRef<number | null>(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const [resolvedProjects, setResolvedProjects] = useState<ResolvedProject[]>([]);
+  // BLK-005: Track fetch errors so we can provide user feedback
+  const [fetchError, setFetchError] = useState(false);
 
   // ─── Measure container width via ResizeObserver ───
   // Uses callback ref so the observer is set up the instant the DOM node
@@ -116,8 +118,9 @@ export default function ProjectGridBlockRenderer({
 
     const slugs = block.projects.map((p) => p.project_slug);
 
+    setFetchError(false);
     fetch("/api/projects")
-      .then((r) => (r.ok ? r.json() : { projects: [] }))
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`API ${r.status}`))))
       .then((data) => {
         const projectMap = new Map<string, { title: string; subtitle: string; thumbnail_path?: string; cover_video?: string }>();
         for (const proj of data.projects || []) {
@@ -151,8 +154,10 @@ export default function ProjectGridBlockRenderer({
 
         setResolvedProjects(resolved);
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error("[ProjectGridBlock] Failed to fetch projects:", err);
         setResolvedProjects([]);
+        setFetchError(true);
       });
   }, [block.projects]);
 
@@ -270,7 +275,17 @@ export default function ProjectGridBlockRenderer({
     return indices;
   }, [entranceEnabled, masonry.items, aboveFoldKeys, gapV]);
 
-  if (resolvedProjects.length === 0) return null;
+  if (resolvedProjects.length === 0) {
+    // BLK-005: Show subtle error message if fetch failed (not just empty data)
+    if (fetchError) {
+      return (
+        <div className="py-8 text-center font-sans text-sm text-brand-muted opacity-60">
+          Unable to load projects. Please try refreshing the page.
+        </div>
+      );
+    }
+    return null;
+  }
 
   return (
     <div

package/components/blocks/SectionRenderer.tsx

@@ -16,6 +16,8 @@ import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
 import { getRowLayoutStyles, hexToRgba } from "../../lib/builder/layout-styles";
+import { colorToOverrideRule, borderColorToOverrideRule, parseColorField } from "../../lib/color-utils";
+import type { ColorField } from "../../lib/sanity/types";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 
 /**
@@ -81,9 +83,9 @@ function buildSectionResponsiveCss(section: PageSection): string | null {
       }
     }
 
-    // Border color
+    // Border color (supports solid + gradients via ColorField bridge)
     if (overrides.border_color) {
-      rules.push(`border-color:${overrides.border_color}!important`);
+      rules.push(borderColorToOverrideRule(parseColorField(overrides.border_color)));
     }
 
     // Border style
@@ -91,14 +93,13 @@ function buildSectionResponsiveCss(section: PageSection): string | null {
       rules.push(`border-style:${overrides.border_style}!important`);
     }
 
-    // Background color + opacity → rgba()
+    // Background color + opacity (gradient-safe via ColorField bridge)
     if (overrides.background_color) {
       const opacity = overrides.background_opacity as number | undefined;
-      if (opacity !== undefined && opacity < 100) {
-        rules.push(`background-color:${hexToRgba(overrides.background_color as string, opacity / 100)}!important`);
-      } else {
-        rules.push(`background-color:${overrides.background_color}!important`);
-      }
+      rules.push(colorToOverrideRule(
+        parseColorField(overrides.background_color),
+        opacity
+      ));
     }
 
     // Background image + sub-properties

package/components/blocks/SectionV2Renderer.tsx

@@ -25,6 +25,7 @@ import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
 import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, hexToRgba } from "../../lib/builder/layout-styles";
+import { parseColorField, colorToOverrideRule, borderColorToOverrideRule } from "../../lib/color-utils";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 
 // ── Responsive CSS generation ──
@@ -99,9 +100,9 @@ function buildSettingsOverrideRules(
     }
   }
 
-  // Border color
+  // Border color (supports solid + gradients via ColorField bridge)
   if (overrides.border_color) {
-    rules.push(`border-color:${overrides.border_color}!important`);
+    rules.push(borderColorToOverrideRule(parseColorField(overrides.border_color)));
   }
 
   // Border style
@@ -109,14 +110,13 @@ function buildSettingsOverrideRules(
     rules.push(`border-style:${overrides.border_style}!important`);
   }
 
-  // Background color + opacity
+  // Background color + opacity (supports solid + gradients via ColorField bridge)
   if (overrides.background_color) {
     const opacity = overrides.background_opacity;
-    if (opacity !== undefined && opacity < 100) {
-      rules.push(`background-color:${hexToRgba(overrides.background_color, opacity / 100)}!important`);
-    } else {
-      rules.push(`background-color:${overrides.background_color}!important`);
-    }
+    rules.push(colorToOverrideRule(
+      parseColorField(overrides.background_color),
+      opacity
+    ));
   }
 
   return rules;

package/components/blocks/SpacerBlockRenderer.tsx

@@ -8,8 +8,10 @@ const heightMap: Record<string, string> = {
 };
 
 export default function SpacerBlockRenderer({ block }: { block: SpacerBlock }) {
-  if (block.height === "custom" && block.custom_height) {
-    return <div style={{ height: `${block.custom_height}px` }} aria-hidden />;
+  // BLK-007: Use != null instead of truthiness to allow custom_height of 0
+  if (block.height === "custom" && block.custom_height != null) {
+    const h = Math.max(0, block.custom_height);
+    return <div style={{ height: `${h}px` }} aria-hidden />;
   }
   return (
     <div className={heightMap[block.height ?? "medium"]} aria-hidden />

package/components/blocks/TextBlockRenderer.tsx

@@ -3,7 +3,8 @@ import { PortableText } from "next-sanity";
 
 /** Resolve fontSize: supports numeric px and legacy string enum */
 function resolvePublicFontSize(fontSize?: number | string): string | undefined {
-  if (typeof fontSize === "number") return `${fontSize}px`;
+  // BLK-015: Guard against negative or zero font sizes
+  if (typeof fontSize === "number") return fontSize > 0 ? `${fontSize}px` : undefined;
   // Legacy Tailwind class mapping
   const tailwindMap: Record<string, string> = {
     small: "text-sm",
@@ -49,7 +50,7 @@ export function getTextBlockStyles(block: TextBlock): { className: string; style
   const isNumericWeight = s?.fontWeight && !isNaN(parseInt(s.fontWeight, 10));
 
   const classes = [
-    "font-mono",
+    "font-sans",
     !isNumericFontSize ? resolvePublicFontSize(s?.fontSize) : undefined,
     alignmentMap[s?.alignment ?? "left"],
     !isNumericWeight ? resolvePublicFontWeight(s?.fontWeight) : undefined,
@@ -58,9 +59,13 @@ export function getTextBlockStyles(block: TextBlock): { className: string; style
     .join(" ");
 
   const inlineStyle: React.CSSProperties = {};
-  if (isNumericFontSize) inlineStyle.fontSize = `${s!.fontSize}px`;
+  if (isNumericFontSize && (s!.fontSize as number) > 0) inlineStyle.fontSize = `${s!.fontSize}px`;
   if (isNumericWeight) inlineStyle.fontWeight = parseInt(s!.fontWeight!, 10);
-  if (s?.color) inlineStyle.color = s.color;
+  // Guard: text color must be a solid hex string, not a gradient.
+  // resolveColorHex extracts a representative hex if a gradient slips through.
+  if (s?.color) {
+    inlineStyle.color = typeof s.color === "string" ? s.color : "#000000";
+  }
   if (s?.lineHeight) inlineStyle.lineHeight = s.lineHeight;
   if (s?.letterSpacing) inlineStyle.letterSpacing = s.letterSpacing;
   if (s?.maxWidth) inlineStyle.maxWidth = s.maxWidth;

package/components/builder/BuilderCanvas.tsx

@@ -70,9 +70,15 @@ export default function BuilderCanvas({ children }: BuilderCanvasProps) {
   const zoomRef = useRef(zoom);
   const panXRef = useRef(panX);
   const panYRef = useRef(panY);
+  // LEAK-002 fix: Also ref action functions so flushWheel/handleWheel
+  // callbacks are truly stable and never cause wheel listener resubscription.
+  const zoomToPointRef = useRef(zoomToPoint);
+  const setCanvasPanRef = useRef(setCanvasPan);
   useEffect(() => { zoomRef.current = zoom; }, [zoom]);
   useEffect(() => { panXRef.current = panX; }, [panX]);
   useEffect(() => { panYRef.current = panY; }, [panY]);
+  useEffect(() => { zoomToPointRef.current = zoomToPoint; }, [zoomToPoint]);
+  useEffect(() => { setCanvasPanRef.current = setCanvasPan; }, [setCanvasPan]);
 
   // ---- Trigger smooth animation for programmatic zoom/pan ----
   const triggerAnimation = useCallback(() => {
@@ -128,7 +134,7 @@ export default function BuilderCanvas({ children }: BuilderCanvasProps) {
   // Throttled via requestAnimationFrame to prevent jank on rapid scroll.
   // Deltas accumulate between frames so no input is lost.
 
-  // Stable flush — reads current values from refs, never re-created
+  // Stable flush — reads current values from refs, never re-created (LEAK-002)
   const flushWheel = useCallback(() => {
     wheelRafRef.current = null;
     const accum = wheelAccumRef.current;
@@ -138,11 +144,11 @@ export default function BuilderCanvas({ children }: BuilderCanvasProps) {
     if (accum.isZoom) {
       const zoomDelta = -accum.deltaY * 0.005;
       const newZoom = zoomRef.current * (1 + zoomDelta);
-      zoomToPoint(newZoom, accum.cursorX, accum.cursorY);
+      zoomToPointRef.current(newZoom, accum.cursorX, accum.cursorY);
     } else {
-      setCanvasPan(panXRef.current - accum.deltaX, panYRef.current - accum.deltaY);
+      setCanvasPanRef.current(panXRef.current - accum.deltaX, panYRef.current - accum.deltaY);
     }
-  }, [zoomToPoint, setCanvasPan]);
+  }, []); // No deps — all values read from refs
 
   // Stable wheel handler — never re-subscribed during zoom/pan
   const handleWheel = useCallback(

package/components/builder/ColorPicker.tsx

@@ -1,243 +1,51 @@
-"use client";
-
-/**
- * ColorPicker — Full-featured HSL color picker with hex/RGB display.
- * Used in the Global Styles palette editor and inline block editors.
- */
-
-import { useState, useRef, useCallback, useEffect } from "react";
-import { hexToHSL, hsvToHex, hexToHSV, isValidHex } from "../../lib/color-utils";
-
-// ─── ColorPicker Component ───
-
-interface ColorPickerProps {
-  color: string;
-  onChange: (hex: string) => void;
-  onClose?: () => void;
-  /** Label for the confirm button */
-  confirmLabel?: string;
-  /** If true, shows a compact version (no confirm/cancel buttons, live onChange) */
-  compact?: boolean;
-}
-
-export default function ColorPicker({
-  color,
-  onChange,
-  onClose,
-  confirmLabel = "Confirm",
-  compact = false,
-}: ColorPickerProps) {
-  const initHsv = hexToHSV(isValidHex(color) ? color : "#ffffff");
-  const [hue, setHue] = useState(initHsv.h);
-  const [sat, setSat] = useState(initHsv.s);
-  const [val, setVal] = useState(initHsv.v);
-  const [hex, setHex] = useState(isValidHex(color) ? color : "#ffffff");
-  const canvasRef = useRef<HTMLDivElement>(null);
-  const hueRef = useRef<HTMLDivElement>(null);
-  const draggingCanvas = useRef(false);
-  const draggingHue = useRef(false);
-
-  // Sync hex from HSV
-  const updateHex = useCallback((h: number, s: number, v: number) => {
-    const newHex = hsvToHex(h, s, v);
-    setHex(newHex);
-    if (compact) onChange(newHex);
-  }, [compact, onChange]);
-
-  // Canvas (saturation + value) interaction
-  const handleCanvasMove = useCallback((e: React.MouseEvent | MouseEvent) => {
-    const rect = canvasRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-    const s = Math.round(x * 100);
-    const v = Math.round((1 - y) * 100);
-    setSat(s);
-    setVal(v);
-    updateHex(hue, s, v);
-  }, [hue, updateHex]);
-
-  // Hue slider interaction
-  const handleHueMove = useCallback((e: React.MouseEvent | MouseEvent) => {
-    const rect = hueRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const h = Math.round(x * 360);
-    setHue(h);
-    updateHex(h, sat, val);
-  }, [sat, val, updateHex]);
-
-  // Global mouse up
-  useEffect(() => {
-    const handleUp = () => {
-      draggingCanvas.current = false;
-      draggingHue.current = false;
-    };
-    const handleMove = (e: MouseEvent) => {
-      if (draggingCanvas.current) handleCanvasMove(e);
-      if (draggingHue.current) handleHueMove(e);
-    };
-    window.addEventListener("mouseup", handleUp);
-    window.addEventListener("mousemove", handleMove);
-    return () => {
-      window.removeEventListener("mouseup", handleUp);
-      window.removeEventListener("mousemove", handleMove);
-    };
-  }, [handleCanvasMove, handleHueMove]);
-
-  const handleHexInput = (v: string) => {
-    setHex(v);
-    if (isValidHex(v)) {
-      const hsv = hexToHSV(v);
-      setHue(hsv.h);
-      setSat(hsv.s);
-      setVal(hsv.v);
-      if (compact) onChange(v);
-    }
-  };
-
-  // Keyboard handlers for canvas (saturation/value) and hue slider
-  const handleCanvasKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const step = e.shiftKey ? 10 : 2;
-    let newSat = sat;
-    let newVal = val;
-    switch (e.key) {
-      case "ArrowRight": newSat = Math.min(100, sat + step); break;
-      case "ArrowLeft":  newSat = Math.max(0, sat - step); break;
-      case "ArrowUp":    newVal = Math.min(100, val + step); break;
-      case "ArrowDown":  newVal = Math.max(0, val - step); break;
-      default: return;
-    }
-    e.preventDefault();
-    setSat(newSat);
-    setVal(newVal);
-    updateHex(hue, newSat, newVal);
-  }, [sat, val, hue, updateHex]);
-
-  const handleHueKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const step = e.shiftKey ? 20 : 5;
-    let newHue = hue;
-    switch (e.key) {
-      case "ArrowRight": newHue = Math.min(360, hue + step); break;
-      case "ArrowLeft":  newHue = Math.max(0, hue - step); break;
-      default: return;
-    }
-    e.preventDefault();
-    setHue(newHue);
-    updateHex(newHue, sat, val);
-  }, [hue, sat, val, updateHex]);
-
-  const r = parseInt(hex.slice(1, 3), 16) || 0;
-  const g = parseInt(hex.slice(3, 5), 16) || 0;
-  const b = parseInt(hex.slice(5, 7), 16) || 0;
-
-  return (
-    <div className="bg-white rounded-2xl p-4 w-[260px] shadow-xl border border-neutral-200">
-      {/* Saturation/Value canvas */}
-      <div
-        ref={canvasRef}
-        role="slider"
-        tabIndex={0}
-        aria-label="Color saturation and brightness"
-        aria-valuetext={`Saturation ${sat}%, Brightness ${val}%`}
-        className="w-full h-[160px] rounded-xl cursor-crosshair relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
-        style={{
-          background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`,
-        }}
-        onMouseDown={(e) => { draggingCanvas.current = true; handleCanvasMove(e); }}
-        onKeyDown={handleCanvasKeyDown}
-      >
-        <div
-          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
-          style={{
-            left: `${sat}%`,
-            top: `${100 - val}%`,
-            transform: "translate(-50%, -50%)",
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3)",
-          }}
-        />
-      </div>
-
-      {/* Hue slider */}
-      <div
-        ref={hueRef}
-        role="slider"
-        tabIndex={0}
-        aria-label="Color hue"
-        aria-valuemin={0}
-        aria-valuemax={360}
-        aria-valuenow={hue}
-        aria-valuetext={`Hue ${hue} degrees`}
-        className="w-full h-3.5 rounded-full mt-3 cursor-pointer relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
-        style={{
-          background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
-        }}
-        onMouseDown={(e) => { draggingHue.current = true; handleHueMove(e); }}
-        onKeyDown={handleHueKeyDown}
-      >
-        <div
-          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
-          style={{
-            left: `${(hue / 360) * 100}%`,
-            top: "50%",
-            transform: "translate(-50%, -50%)",
-            background: `hsl(${hue}, 100%, 50%)`,
-            boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
-          }}
-        />
-      </div>
-
-      {/* Hex input */}
-      <div className="flex items-center gap-2.5 mt-3.5">
-        <div
-          className="w-8 h-8 rounded-lg border border-neutral-200 shrink-0"
-          style={{ background: hex }}
-        />
-        <input
-          value={hex.toUpperCase()}
-          onChange={(e) => handleHexInput(e.target.value)}
-          className="flex-1 bg-neutral-50 border border-neutral-200 rounded-lg px-2.5 py-1.5 text-neutral-900 text-xs font-mono outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors"
-        />
-      </div>
-
-      {/* RGB readout */}
-      <div className="flex gap-2 mt-2.5">
-        {[
-          { label: "R", val: r },
-          { label: "G", val: g },
-          { label: "B", val: b },
-        ].map(({ label, val: v }) => (
-          <div key={label} className="flex-1">
-            <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-0.5">{label}</div>
-            <div className="bg-neutral-50 border border-neutral-200 rounded-md px-2 py-1 text-neutral-600 text-[11px] text-center font-mono">
-              {v}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Buttons (non-compact mode) */}
-      {!compact && (
-        <div className="flex gap-2 mt-3.5">
-          {onClose && (
-            <button
-              onClick={onClose}
-              className="flex-1 py-2 rounded-lg border border-neutral-200 bg-transparent text-neutral-500 text-xs font-mono cursor-pointer hover:border-neutral-300 hover:text-neutral-700 transition-colors"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => { onChange(hex); onClose?.(); }}
-            className="flex-1 py-2 rounded-lg border-none bg-[#076bff] text-white text-xs font-mono font-semibold cursor-pointer hover:bg-[#0559d4] transition-colors"
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Export helpers ───
-export { isValidHex, hexToHSL, hexToHSV, hsvToHex };
+"use client";
+
+/**
+ * @deprecated Use `UnifiedColorPicker` from `./color-picker` instead.
+ *
+ * This file is kept for backward compatibility. It re-exports the new
+ * UnifiedColorPicker with an adapter that maps the old props to the new API.
+ *
+ * Old API:  ColorPicker({ color, onChange, onClose, confirmLabel, compact })
+ * New API:  UnifiedColorPicker({ value, onChange, onClose, confirmLabel, ... })
+ */
+
+import { UnifiedColorPicker } from "./color-picker";
+import { isValidHex } from "../../lib/color-utils";
+
+// Re-export helpers for any consumers that imported from here
+export { isValidHex } from "../../lib/color-utils";
+export { hexToHSL, hexToHSV, hsvToHex } from "../../lib/color-utils";
+
+// ─── Legacy ColorPicker Adapter ───
+
+interface ColorPickerProps {
+  /** @deprecated Use `value` instead */
+  color: string;
+  onChange: (hex: string) => void;
+  onClose?: () => void;
+  confirmLabel?: string;
+  /** @deprecated Compact mode is no longer supported. Ignored. */
+  compact?: boolean;
+}
+
+/**
+ * @deprecated Use `import { UnifiedColorPicker } from "./color-picker"` instead.
+ */
+export default function ColorPicker({
+  color,
+  onChange,
+  onClose,
+  confirmLabel = "Confirm",
+}: ColorPickerProps) {
+  const handleClose = onClose ?? (() => {});
+
+  return (
+    <UnifiedColorPicker
+      value={isValidHex(color) ? color : "#ffffff"}
+      onChange={(val) => onChange(typeof val === "string" ? val : "#000000")}
+      onClose={handleClose}
+      confirmLabel={confirmLabel}
+    />
+  );
+}