@morphika/andami 0.2.26 → 0.4.0

package/components/admin/styles/GridLayoutEditor.tsx

@@ -15,74 +15,74 @@ const DEFAULT_GRID = {
 
 /** SVG illustration for the Column Gutter card */
 function GutterIcon() {
+  const ACCENT = "#4794E2";
   return (
-    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
-      {/* 5 columns */}
-      <rect x="6" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
-      <rect x="28" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
-      <rect x="50" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
-      <rect x="72" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
-      <rect x="94" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
-      {/* Gap arrows between columns */}
-      <line x1="22" y1="36" x2="28" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
-      <path d="M26 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <path d="M24 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <line x1="44" y1="36" x2="50" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
-      <path d="M48 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <path d="M46 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <line x1="66" y1="36" x2="72" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
-      <path d="M70 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <path d="M68 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <line x1="88" y1="36" x2="94" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
-      <path d="M92 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
-      <path d="M90 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
+      {/* 5 columns (ghost blue) */}
+      <rect x="6" y="8" width="16" height="56" rx="2" fill="#DDE6F5" />
+      <rect x="28" y="8" width="16" height="56" rx="2" fill="#DDE6F5" />
+      <rect x="50" y="8" width="16" height="56" rx="2" fill="#DDE6F5" />
+      <rect x="72" y="8" width="16" height="56" rx="2" fill="#DDE6F5" />
+      <rect x="94" y="8" width="16" height="56" rx="2" fill="#DDE6F5" />
+      {/* Gap arrows between columns (accent) */}
+      <line x1="22" y1="36" x2="28" y2="36" stroke={ACCENT} />
+      <path d="M26 34l2 2-2 2" stroke={ACCENT} fill="none" />
+      <path d="M24 34l-2 2 2 2" stroke={ACCENT} fill="none" />
+      <line x1="44" y1="36" x2="50" y2="36" stroke={ACCENT} />
+      <path d="M48 34l2 2-2 2" stroke={ACCENT} fill="none" />
+      <path d="M46 34l-2 2 2 2" stroke={ACCENT} fill="none" />
+      <line x1="66" y1="36" x2="72" y2="36" stroke={ACCENT} />
+      <path d="M70 34l2 2-2 2" stroke={ACCENT} fill="none" />
+      <path d="M68 34l-2 2 2 2" stroke={ACCENT} fill="none" />
+      <line x1="88" y1="36" x2="94" y2="36" stroke={ACCENT} />
+      <path d="M92 34l2 2-2 2" stroke={ACCENT} fill="none" />
+      <path d="M90 34l-2 2 2 2" stroke={ACCENT} fill="none" />
     </svg>
   );
 }
 
 /** SVG illustration for the Max Page Width card */
 function MaxWidthIcon() {
+  // Frame/dots/content stay neutral; arrows + dashed boundaries are the accent.
+  const ACCENT = "#4794E2";
   return (
-    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
       {/* Browser frame */}
-      <rect x="10" y="10" width="100" height="52" rx="4" stroke="currentColor" strokeWidth="1.5" opacity="0.3" />
+      <rect x="10" y="10" width="100" height="52" rx="4" stroke="#b0b5bd" strokeWidth="1.5" opacity="0.3" />
       {/* Title bar dots */}
-      <circle cx="18" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
-      <circle cx="23" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
-      <circle cx="28" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
+      <circle cx="18" cy="17" r="1.5" fill="#b0b5bd" opacity="0.25" />
+      <circle cx="23" cy="17" r="1.5" fill="#b0b5bd" opacity="0.25" />
+      <circle cx="28" cy="17" r="1.5" fill="#b0b5bd" opacity="0.25" />
       {/* Divider */}
-      <line x1="10" y1="22" x2="110" y2="22" stroke="currentColor" strokeWidth="1" opacity="0.15" />
-      {/* Content area */}
-      <rect x="28" y="28" width="64" height="28" rx="2" fill="currentColor" opacity="0.1" />
+      <line x1="10" y1="22" x2="110" y2="22" stroke="#b0b5bd" strokeWidth="1" opacity="0.15" />
+      {/* Content area (ghost blue) */}
+      <rect x="28" y="28" width="64" height="28" rx="2" fill="#DDE6F5" />
       {/* Left arrow */}
-      <line x1="15" y1="42" x2="28" y2="42" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
-      <path d="M26 40l2 2-2 2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.5" />
+      <line x1="13" y1="42" x2="26" y2="42" stroke={ACCENT} strokeWidth="1.2" />
+      <path d="M24 40l2 2-2 2" stroke={ACCENT} strokeWidth="1.2" fill="none" />
       {/* Right arrow */}
-      <line x1="92" y1="42" x2="105" y2="42" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
-      <path d="M94 40l-2 2 2 2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.5" />
+      <line x1="94" y1="42" x2="107" y2="42" stroke={ACCENT} strokeWidth="1.2" />
+      <path d="M96 40l-2 2 2 2" stroke={ACCENT} strokeWidth="1.2" fill="none" />
       {/* Dashed boundary lines */}
-      <line x1="28" y1="26" x2="28" y2="58" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.3" />
-      <line x1="92" y1="26" x2="92" y2="58" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.3" />
+      <line x1="28" y1="26" x2="28" y2="58" stroke={ACCENT} strokeWidth="1" strokeDasharray="2 2" />
+      <line x1="92" y1="26" x2="92" y2="58" stroke={ACCENT} strokeWidth="1" strokeDasharray="2 2" />
     </svg>
   );
 }
 
 /** SVG illustration for the Scroll Animations card */
 function ScrollAnimIcon() {
+  // 3 blue layers with increasing opacity convey the fade-in effect; accent arrow below.
+  const ACCENT = "#4794E2";
   return (
-    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
-      {/* 3 stacked layers with increasing opacity (fade-in effect) */}
-      <rect x="30" y="6" width="60" height="14" rx="3" fill="currentColor" opacity="0.06" stroke="currentColor" strokeWidth="0.8" />
-      <rect x="30" y="24" width="60" height="14" rx="3" fill="currentColor" opacity="0.14" stroke="currentColor" strokeWidth="0.8" />
-      <rect x="30" y="42" width="60" height="14" rx="3" fill="currentColor" opacity="0.28" stroke="currentColor" strokeWidth="0.8" />
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
+      {/* 3 stacked layers (fade-in effect) */}
+      <rect x="30" y="6" width="60" height="14" rx="3" fill={ACCENT} opacity="0.06" />
+      <rect x="30" y="24" width="60" height="14" rx="3" fill={ACCENT} opacity="0.13" />
+      <rect x="30" y="42" width="60" height="14" rx="3" fill={ACCENT} opacity="0.36" />
       {/* Scroll-down arrow */}
-      <line x1="60" y1="60" x2="60" y2="70" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
-      <path d="M56 67l4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none" opacity="0.5" />
-      {/* Motion lines */}
-      <line x1="24" y1="46" x2="28" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
-      <line x1="24" y1="52" x2="28" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
-      <line x1="92" y1="46" x2="96" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
-      <line x1="92" y1="52" x2="96" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
+      <line x1="60" y1="60" x2="60" y2="70" stroke={ACCENT} strokeWidth="1.5" />
+      <path d="M56 67l4 4 4-4" stroke={ACCENT} strokeWidth="1.5" fill="none" />
     </svg>
   );
 }

package/components/blocks/BlockRenderer.tsx

@@ -24,6 +24,7 @@ import VideoBlockRenderer from "./VideoBlockRenderer";
 import SpacerBlockRenderer from "./SpacerBlockRenderer";
 import ButtonBlockRenderer from "./ButtonBlockRenderer";
 import ProjectGridBlockRenderer from "./ProjectGridBlockRenderer";
+import ProjectCarouselBlockRenderer from "./ProjectCarouselBlockRenderer";
 
 // ── BLK-003: Error Boundary for block renderers ──
 // Prevents a single broken block from crashing the entire page.
@@ -310,6 +311,9 @@ export default function BlockRenderer({
     case "projectGridBlock":
       content = <ProjectGridBlockRenderer block={resolved as import("../../lib/sanity/types").ProjectGridBlock} />;
       break;
+    case "projectCarouselBlock":
+      content = <ProjectCarouselBlockRenderer block={resolved as import("../../lib/sanity/types").ProjectCarouselBlock} />;
+      break;
     default: {
       const unknownBlock = resolved as ContentBlock;
       if (process.env.NODE_ENV === "development") {
@@ -418,13 +422,22 @@ export default function BlockRenderer({
     const isShader = isShaderPreset(blockHoverEffect.preset);
     if (isShader) {
       if (resolved._type === "imageBlock") {
-        shaderSrc = resolveAsset((resolved as import("../../lib/sanity/types").ImageBlock).asset_path);
+        const imgPath = (resolved as import("../../lib/sanity/types").ImageBlock).asset_path;
+        if (imgPath) {
+          shaderSrc = resolveAsset(imgPath);
+        }
         const br = (resolved as import("../../lib/sanity/types").ImageBlock).border_radius;
         if (br) shaderBorderRadius = `${String(br).replace(/px$/i, "")}px`;
       }
       // Shader preset without image src: skip wrapper entirely
       if (!shaderSrc) {
-        // No-op: can't apply shader without an image source
+        // Warn in development so the missing asset is debuggable — silent in prod
+        if (process.env.NODE_ENV === "development") {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[BlockRenderer] Shader hover preset "${blockHoverEffect.preset}" on block ${block._key} (${resolved._type}) has no asset_path — falling back to no hover effect.`
+          );
+        }
       } else {
         content = (
           <HoverAnimationWrapper

package/components/blocks/CoverSectionRenderer.tsx

@@ -10,6 +10,7 @@
  * Session 176: Cover Sections — Phase 9 (Public Renderer).
  */
 
+import { useEffect, useRef } from "react";
 import type {
   CoverSection,
   SectionColumn,
@@ -23,6 +24,13 @@ import EnterAnimationWrapper from "./EnterAnimationWrapper";
 import { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign } from "../../lib/builder/layout-styles";
 import { assetUrl } from "../../lib/assets";
 import { BREAKPOINTS } from "../../lib/builder/constants";
+import { normalizeRowHeights } from "../../lib/builder/store-cover";
+import { useNavColor } from "../../lib/contexts/NavColorContext";
+import { isValidHex } from "../../lib/color-utils";
+import {
+  sectionVisibilityRatio,
+  NAV_COLOR_OVERRIDE_THRESHOLD,
+} from "../../lib/builder/section-visibility";
 
 interface CoverSectionRendererProps {
   section: CoverSection;
@@ -51,10 +59,19 @@ function buildCoverResponsiveCss(section: CoverSection): string | null {
 
     if (override.cover_rows && override.cover_rows.length > 0) {
       const baseRows = section.cover_rows;
-      const rowTemplate = baseRows.map((r, i) => {
+      // Partial overrides mix desktop values with override values — the
+      // merged sum is not guaranteed to be 100. Normalize so the CSS
+      // grid-template-rows at that viewport stays valid. (Cover Sections
+      // audit bug #3.)
+      const mergedPercents = baseRows.map((r) => {
         const rowOverride = override.cover_rows?.find((o) => o._key === r._key);
-        return `${rowOverride?.height_percent ?? r.height_percent}%`;
-      }).join(" ");
+        return rowOverride?.height_percent ?? r.height_percent;
+      });
+      const total = mergedPercents.reduce((a, b) => a + b, 0);
+      const finalPercents = Math.abs(total - 100) <= 0.5
+        ? mergedPercents
+        : normalizeRowHeights(mergedPercents);
+      const rowTemplate = finalPercents.map((p) => `${p}%`).join(" ");
       rules.push(`grid-template-rows:${rowTemplate}!important`);
     }
 
@@ -87,6 +104,60 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
   const colGap = s.col_gap ?? 20;
   const rowGap = s.row_gap ?? 20;
 
+  // ── Navbar color override ────────────────────────────────────────────
+  // While this cover section is significantly on-screen (>30% of the
+  // viewport), push `nav_color` up through NavColorContext so the top
+  // nav text adopts it. When the next section takes over (or the cover
+  // scrolls off screen), clear the override so the page default returns.
+  const sectionRef = useRef<HTMLElement | null>(null);
+  const { setNavColor } = useNavColor();
+  const navColor = section.nav_color || "";
+
+  useEffect(() => {
+    const hasValidNavColor = navColor && isValidHex(navColor);
+    if (!hasValidNavColor) return;
+
+    // rAF-throttled scroll listener — cheap: one getBoundingClientRect per tick.
+    let ticking = false;
+    let rafId: number | null = null;
+    let overrideActive = false;
+
+    const update = () => {
+      ticking = false;
+      const el = sectionRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const ratio = sectionVisibilityRatio(rect.top, rect.bottom, window.innerHeight);
+      if (ratio > NAV_COLOR_OVERRIDE_THRESHOLD) {
+        if (!overrideActive) overrideActive = true;
+        setNavColor(navColor);
+      } else if (overrideActive) {
+        overrideActive = false;
+        setNavColor("");
+      }
+    };
+
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      rafId = requestAnimationFrame(update);
+    };
+
+    // Initial evaluation (e.g. cover is already the first section on mount)
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      // Release any override we set so the next section's nav color (or the
+      // page default) takes over cleanly.
+      if (overrideActive) setNavColor("");
+    };
+  }, [navColor, setNavColor]);
+
   const rowTemplate = section.cover_rows
     .map((r) => `${r.height_percent}%`)
     .join(" ");
@@ -132,6 +203,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
 
   const sectionContent = (
     <section
+      ref={sectionRef}
       style={{
         position: "relative",
         height: section.height,

package/components/blocks/ImageGridBlockRenderer.tsx

@@ -455,6 +455,20 @@ export default function ImageGridBlockRenderer({
   // Unique ID for phone responsive override — must be before early return (hooks rule)
   const gridId = useRef(`ig-${Math.random().toString(36).slice(2, 8)}`).current;
 
+  // Stable lightbox callbacks — inline versions rebuild every render and
+  // caused the lightbox keydown listener to add/remove on every parent render.
+  // Functional setState keeps them closure-safe regardless of prop changes.
+  const imagesLen = block.images?.length ?? 0;
+  const handleLightboxClose = useCallback(() => setLightboxIndex(null), []);
+  const handleLightboxPrev = useCallback(() => {
+    if (imagesLen <= 0) return;
+    setLightboxIndex((prev) => (prev !== null ? (prev - 1 + imagesLen) % imagesLen : 0));
+  }, [imagesLen]);
+  const handleLightboxNext = useCallback(() => {
+    if (imagesLen <= 0) return;
+    setLightboxIndex((prev) => (prev !== null ? (prev + 1) % imagesLen : 0));
+  }, [imagesLen]);
+
   // Block is already resolved for the current viewport by BlockRenderer
   if (!block.images?.length) return null;
 
@@ -534,17 +548,9 @@ export default function ImageGridBlockRenderer({
           images={images}
           currentIndex={lightboxIndex}
           resolveAsset={resolveAsset}
-          onClose={() => setLightboxIndex(null)}
-          onPrev={() =>
-            setLightboxIndex((prev) =>
-              prev !== null ? (prev - 1 + images.length) % images.length : 0
-            )
-          }
-          onNext={() =>
-            setLightboxIndex((prev) =>
-              prev !== null ? (prev + 1) % images.length : 0
-            )
-          }
+          onClose={handleLightboxClose}
+          onPrev={handleLightboxPrev}
+          onNext={handleLightboxNext}
         />
       )}
     </>

package/components/blocks/ParallaxGroupRenderer.tsx

@@ -109,6 +109,45 @@ export default function ParallaxGroupRenderer({
 
   // ── Nav color interpolation helper ──
 
+  /**
+   * Cache the per-slide {center, color} array. Building it reads offsetTop /
+   * offsetHeight for every slide — a layout read that's cheap on its own but
+   * was previously done on every rAF tick inside the scroll loop, adding up
+   * to measurable jank on groups with 10+ slides + nav color interpolation.
+   * The cache is invalidated on resize and when `group.slides` changes.
+   */
+  const slideDataCacheRef = useRef<{ center: number; color: string }[] | null>(null);
+  const slideDataDirtyRef = useRef(true);
+
+  const buildSlideData = useCallback((): { center: number; color: string }[] => {
+    const slideData: { center: number; color: string }[] = [];
+    const orderedSlides = group.slides || [];
+    for (let i = 0; i < orderedSlides.length; i++) {
+      const refs = slideRefsMap.current.get(orderedSlides[i]._key);
+      if (!refs?.slide) continue;
+      const el = refs.slide;
+      slideData.push({
+        center: el.offsetTop + el.offsetHeight / 2,
+        color: slideNavColors[i] || "",
+      });
+    }
+    return slideData;
+  }, [group.slides, slideNavColors]);
+
+  // Mark cache dirty when slides array or colors change
+  useEffect(() => {
+    slideDataDirtyRef.current = true;
+  }, [group.slides, slideNavColors]);
+
+  // Invalidate cache on resize (layout shifts)
+  useEffect(() => {
+    const onResize = () => {
+      slideDataDirtyRef.current = true;
+    };
+    window.addEventListener("resize", onResize, { passive: true });
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   /**
    * Compute the interpolated navbar color based on current scroll position.
    * Uses slide centers: the viewport center's position between two adjacent
@@ -124,16 +163,12 @@ export default function ParallaxGroupRenderer({
 
     const viewCenter = scrollY + vh / 2;
 
-    // Build ordered array of {center, color} for each slide
-    const slideData: { center: number; color: string }[] = [];
-    const orderedSlides = group.slides || [];
-    for (let i = 0; i < orderedSlides.length; i++) {
-      const refs = slideRefsMap.current.get(orderedSlides[i]._key);
-      if (!refs?.slide) continue;
-      const el = refs.slide;
-      const center = el.offsetTop + el.offsetHeight / 2;
-      slideData.push({ center, color: slideNavColors[i] || "" });
+    // Build ordered array of {center, color} for each slide — from cache when fresh
+    if (slideDataDirtyRef.current || !slideDataCacheRef.current) {
+      slideDataCacheRef.current = buildSlideData();
+      slideDataDirtyRef.current = false;
     }
+    const slideData = slideDataCacheRef.current;
 
     if (slideData.length === 0) return null;
 
@@ -170,7 +205,7 @@ export default function ParallaxGroupRenderer({
     }
 
     return null;
-  }, [slideNavColors, group.slides]);
+  }, [slideNavColors, group.slides, buildSlideData]);
 
   // ── Capture page-level nav color on mount, restore on unmount ──