@morphika/andami 0.1.3 → 0.1.6

package/components/blocks/CoverBlockRenderer.tsx

@@ -3,6 +3,7 @@
 import type { CoverBlock } from "../../lib/sanity/types";
 import { useAssetUrl } from "../../lib/contexts/AssetContext";
 import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
+import { parseColorField, colorToCSS, isGradient } from "../../lib/color-utils";
 
 function getOverlayStyle(
   overlay: CoverBlock["overlay"],
@@ -70,10 +71,18 @@ export default function CoverBlockRenderer({
       ? block.mobile_height
       : null;
 
-  const overlayStyle = getOverlayStyle(
-    block.overlay ?? "none",
-    block.overlay_opacity ?? 50
-  );
+  // Phase 4: custom overlay_gradient takes precedence over hardcoded presets
+  const overlayStyle: React.CSSProperties | null = (() => {
+    if (block.overlay_gradient) {
+      const parsed = parseColorField(block.overlay_gradient);
+      if (isGradient(parsed)) {
+        return { backgroundImage: colorToCSS(parsed) };
+      }
+      // Solid color overlay from gradient field
+      return { backgroundColor: colorToCSS(parsed) };
+    }
+    return getOverlayStyle(block.overlay ?? "none", block.overlay_opacity ?? 50);
+  })();
 
   const resolveAsset = useAssetUrl();
   const mediaSrc = block.media_path ? resolveAsset(block.media_path) : undefined;
@@ -82,10 +91,14 @@ export default function CoverBlockRenderer({
     : undefined;
   const isVideo = block.media_type === "video";
 
-  const objectFit = block.background_size || "cover";
+  // BLK-010: Validate objectFit against allowed CSS values
+  const allowedObjectFit = new Set(["cover", "contain", "none", "fill", "scale-down"]);
+  const objectFit = allowedObjectFit.has(block.background_size || "") ? block.background_size! : "cover";
   const objectPosition = block.background_position || "center center";
 
-  const textColor = block.text_color || "#ffffff";
+  // Guard: text color must be a solid hex string. Fallback if gradient slips through.
+  const rawTextColor = block.text_color || "#ffffff";
+  const textColor = typeof rawTextColor === "string" ? rawTextColor : "#ffffff";
 
   const ctaStyleClasses: Record<string, string> = {
     primary:
@@ -97,19 +110,28 @@ export default function CoverBlockRenderer({
     text: "underline underline-offset-4 hover:opacity-70",
   };
 
+  // BLK-002: Sanitize _key and mobileHeight before CSS interpolation
+  // _key: allow only alphanumeric, hyphens, underscores (strip anything else)
+  const safeKey = block._key?.replace(/[^a-zA-Z0-9_-]/g, "") || "";
+  // mobileHeight: must match valid CSS height (number+unit or CSS keyword)
+  const safeMobileHeight =
+    mobileHeight && /^(\d+(\.\d+)?(px|vh|vw|em|rem|%|svh|dvh)|auto|inherit)$/i.test(mobileHeight)
+      ? mobileHeight
+      : null;
+
   return (
     <>
       {/* Mobile height override via inline style tag */}
-      {mobileHeight && (
+      {safeMobileHeight && safeKey && (
         <style
           dangerouslySetInnerHTML={{
-            __html: `@media(max-width:767px){.cover-block-${block._key}{height:${mobileHeight}!important;min-height:${mobileHeight}!important;}}`,
+            __html: `@media(max-width:767px){.cover-block-${safeKey}{height:${safeMobileHeight}!important;min-height:${safeMobileHeight}!important;}}`,
           }}
         />
       )}
 
       <section
-        className={`cover-block-${block._key} relative flex overflow-hidden`}
+        className={`cover-block-${safeKey} relative flex overflow-hidden`}
         style={{
           height,
           minHeight: height,
@@ -127,7 +149,7 @@ export default function CoverBlockRenderer({
             onError={handleImageRetry}
             className="absolute inset-0 h-full w-full"
             style={{
-              objectFit: objectFit as "cover" | "contain" | "none",
+              objectFit: objectFit as React.CSSProperties["objectFit"],
               objectPosition,
             }}
           />
@@ -144,7 +166,7 @@ export default function CoverBlockRenderer({
             onError={handleVideoRetry}
             className="absolute inset-0 h-full w-full"
             style={{
-              objectFit: objectFit as "cover" | "contain" | "none",
+              objectFit: objectFit as React.CSSProperties["objectFit"],
               objectPosition,
             }}
           />
@@ -182,13 +204,13 @@ export default function CoverBlockRenderer({
           }}
         >
           {block.headline && (
-            <h1 className="font-mono text-4xl uppercase tracking-widest md:text-6xl lg:text-7xl">
+            <h1 className="font-sans text-4xl uppercase tracking-widest md:text-6xl lg:text-7xl">
               {block.headline}
             </h1>
           )}
 
           {block.subheadline && (
-            <p className="font-mono text-sm uppercase tracking-wider opacity-80 md:text-base">
+            <p className="font-sans text-sm uppercase tracking-wider opacity-80 md:text-base">
               {block.subheadline}
             </p>
           )}
@@ -205,7 +227,7 @@ export default function CoverBlockRenderer({
                     ? "noopener noreferrer"
                     : undefined
                 }
-                className={`inline-block px-6 py-3 font-mono text-sm uppercase tracking-wider transition ${
+                className={`inline-block px-6 py-3 font-sans text-sm uppercase tracking-wider transition ${
                   ctaStyleClasses[block.cta_button.style || "primary"]
                 }`}
               >

package/components/blocks/ImageBlockRenderer.tsx

@@ -28,7 +28,9 @@ export default function ImageBlockRenderer({ block }: { block: ImageBlock }) {
   const widthStyle = widthStyleMap[block.width ?? "full"] || widthStyleMap.full;
   const aspect = aspectMap[block.aspect_ratio ?? "auto"];
 
-  const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
+  // BLK-014: Strip any existing unit suffix, then validate as a number before appending px
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
 
   const imgStyle: React.CSSProperties = {
     width: "100%",
@@ -44,7 +46,7 @@ export default function ImageBlockRenderer({ block }: { block: ImageBlock }) {
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={src}
-        alt={block.alt ?? ""}
+        alt={block.alt || block.caption || ""}
         loading={block.lazy !== false ? "lazy" : "eager"}
         decoding="async"
         onError={handleImageRetry}
@@ -52,7 +54,7 @@ export default function ImageBlockRenderer({ block }: { block: ImageBlock }) {
         className={imgClassName}
       />
       {block.caption && (
-        <figcaption className="mt-2 font-mono text-xs uppercase tracking-wider text-brand-muted">
+        <figcaption className="mt-2 font-sans text-xs uppercase tracking-wider text-brand-muted">
           {block.caption}
         </figcaption>
       )}

package/components/blocks/ImageGridBlockRenderer.tsx

@@ -420,12 +420,19 @@ function GridLightbox({
           }
         >
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={resolveAsset(img.asset_path)}
-            alt={img.alt ?? ""}
-            className="max-w-full max-h-[85vh] object-contain"
-            style={{ borderRadius: "2px", pointerEvents: "none" }}
-          />
+          {/* BLK-009: Guard against missing asset_path from Sanity null fields */}
+          {img?.asset_path ? (
+            <img
+              src={resolveAsset(img.asset_path)}
+              alt={img.alt ?? ""}
+              className="max-w-full max-h-[85vh] object-contain"
+              style={{ borderRadius: "2px", pointerEvents: "none" }}
+            />
+          ) : (
+            <div className="flex h-40 w-60 items-center justify-center bg-neutral-900 text-sm text-neutral-500">
+              Image unavailable
+            </div>
+          )}
         </div>
       </div>
     </>,

package/components/blocks/PageRenderer.tsx

@@ -8,6 +8,7 @@ import { PageNavColor } from "./PageNavColor";
 import { PageNavAnimation } from "./PageNavAnimation";
 import { PageBackground } from "./PageBackground";
 import { assetUrl } from "../../lib/assets";
+import { parseColorField, colorToCSSProperty } from "../../lib/color-utils";
 
 /**
  * Find the first image-bearing block (CoverBlock or ImageBlock) in the page.
@@ -81,7 +82,7 @@ export default function PageRenderer({ page }: { page: Page }) {
   if (!page.content_rows?.length) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
-        <p className="font-mono text-sm text-brand-muted">
+        <p className="font-sans text-sm text-brand-muted">
           This page has no content yet.
         </p>
       </div>
@@ -95,7 +96,8 @@ export default function PageRenderer({ page }: { page: Page }) {
   const ps = page.page_settings;
   const pageStyle: React.CSSProperties = {};
   if (ps?.background_color && ps.background_color !== "transparent") {
-    pageStyle.backgroundColor = ps.background_color;
+    const colorField = parseColorField(ps.background_color);
+    Object.assign(pageStyle, colorToCSSProperty(colorField));
   }
   if (ps?.text_color) {
     pageStyle.color = ps.text_color;

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(