@morphika/andami 0.1.2

package/components/blocks/ImageGridBlockRenderer.tsx

@@ -0,0 +1,545 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import type { ImageGridBlock } from "../../lib/sanity/types";
+import { useAssetUrl, useThumbUrl } from "../../lib/contexts/AssetContext";
+import { MAX_RETRIES, RETRY_ATTR, cacheBustUrl } from "../../lib/asset-retry";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+
+/** Attribute to store the full-resolution fallback URL */
+const FALLBACK_ATTR = "data-fallback-src";
+/** Attribute to track whether we've already fallen back to full-res */
+const FALLEN_BACK_ATTR = "data-fallen-back";
+
+function handleImgError(e: React.SyntheticEvent<HTMLImageElement>) {
+  const img = e.currentTarget;
+
+  // If we haven't tried the full-res fallback yet, try it first
+  const fallbackSrc = img.getAttribute(FALLBACK_ATTR);
+  const fallenBack = img.getAttribute(FALLEN_BACK_ATTR);
+
+  if (fallbackSrc && !fallenBack && img.src !== fallbackSrc) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[thumbs] fallback: ${img.src} → ${fallbackSrc}`);
+    }
+    img.setAttribute(FALLEN_BACK_ATTR, "1");
+    img.src = fallbackSrc;
+    return;
+  }
+
+  // Standard retry logic with cache busting
+  const retries = parseInt(img.getAttribute(RETRY_ATTR) || "0", 10);
+  if (retries < MAX_RETRIES) {
+    const next = retries + 1;
+    img.setAttribute(RETRY_ATTR, String(next));
+    setTimeout(() => {
+      img.src = cacheBustUrl(img.src, next);
+    }, 1000 * next);
+  }
+}
+
+// ============================================
+// Random Grid Layout Generator (Semplice-style)
+// ============================================
+
+/**
+ * Pre-defined row patterns for each mode.
+ * Each pattern is an array of column spans that sums to 12.
+ * The algorithm picks a random pattern per row, ensuring visual variety.
+ */
+const ROW_PATTERNS: Record<string, number[][]> = {
+  "small2-big4": [
+    [4, 4, 4],         // 3 big
+    [2, 2, 4, 4],      // 2 small + 2 big
+    [4, 2, 2, 4],      // big + 2 small + big
+    [4, 4, 2, 2],      // 2 big + 2 small
+    [2, 4, 4, 2],      // small + 2 big + small
+    [2, 2, 2, 2, 4],   // 4 small + 1 big
+    [4, 2, 2, 2, 2],   // 1 big + 4 small
+    [2, 2, 2, 2, 2, 2],// 6 small
+  ],
+  "small3-big6": [
+    [6, 3, 3],         // 1 big + 2 small
+    [3, 6, 3],         // small + big + small
+    [3, 3, 6],         // 2 small + 1 big
+    [6, 6],            // 2 big
+    [3, 3, 3, 3],      // 4 small
+  ],
+  "small4-big8": [
+    [8, 4],            // 1 big + 1 small
+    [4, 8],            // 1 small + 1 big
+    [4, 4, 4],         // 3 small
+  ],
+};
+
+/**
+ * Seeded PRNG — produces repeatable sequences from a given seed.
+ */
+function createRng(seed: number) {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 12345) % 2147483647;
+    return (s & 0x7fffffff) / 0x7fffffff;
+  };
+}
+
+/**
+ * Generate column spans for each image in a 12-column grid.
+ * Uses pre-defined row patterns and picks one randomly per row.
+ * The last row is stretched proportionally to fill the full 12 columns (no gaps).
+ */
+function generateRandomGridSpans(
+  count: number,
+  mode: "small2-big4" | "small3-big6" | "small4-big8",
+  seed: number = 1
+): number[] {
+  const patterns = ROW_PATTERNS[mode];
+  if (!patterns) return new Array(count).fill(Math.floor(12 / Math.max(count, 1)));
+
+  const rand = createRng(seed);
+  const spans: number[] = [];
+  let placed = 0;
+
+  while (placed < count) {
+    const imagesLeft = count - placed;
+
+    // Filter patterns that don't need more images than we have left
+    const valid = patterns.filter((p) => p.length <= imagesLeft);
+
+    // If no valid full pattern fits, handle the last partial row
+    if (valid.length === 0) {
+      // Stretch remaining images to fill 12 columns proportionally
+      const perImage = Math.floor(12 / imagesLeft);
+      let leftover = 12 - perImage * imagesLeft;
+      for (let i = 0; i < imagesLeft; i++) {
+        const extra = leftover > 0 ? 1 : 0;
+        spans.push(perImage + extra);
+        if (leftover > 0) leftover--;
+      }
+      placed += imagesLeft;
+      break;
+    }
+
+    // Pick a random valid pattern
+    const pattern = valid[Math.floor(rand() * valid.length)];
+    for (const span of pattern) {
+      spans.push(span);
+    }
+    placed += pattern.length;
+  }
+
+  return spans;
+}
+
+// ============================================
+// Lightbox Component
+// ============================================
+
+/** Minimum horizontal distance (px) to count as a swipe */
+const SWIPE_THRESHOLD = 50;
+/** Maximum vertical distance (px) — beyond this it's a scroll, not a swipe */
+const SWIPE_MAX_VERTICAL = 80;
+
+/** Duration (ms) for the slide transition between images */
+const SLIDE_DURATION = 250;
+
+/** CSS keyframes injected once for lightbox slide animations */
+const SLIDE_KEYFRAMES = `
+@keyframes lb-slide-from-right {
+  from { opacity: 0; transform: translateX(60px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes lb-slide-from-left {
+  from { opacity: 0; transform: translateX(-60px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes lb-scale-in {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}
+`;
+
+function GridLightbox({
+  images,
+  currentIndex,
+  resolveAsset,
+  onClose,
+  onPrev,
+  onNext,
+}: {
+  images: Array<{ asset_path: string; alt?: string }>;
+  currentIndex: number;
+  resolveAsset: (path: string) => string;
+  onClose: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  const img = images[currentIndex];
+  const [visible, setVisible] = useState(false);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  // Track navigation direction for slide animation
+  // null = initial open (scale-in), "left" = next, "right" = prev
+  const slideDirRef = useRef<"left" | "right" | null>(null);
+  const prevIndexRef = useRef(currentIndex);
+
+  // Detect direction when currentIndex changes
+  if (currentIndex !== prevIndexRef.current) {
+    // Determine direction: going forward = slide from right, going back = slide from left
+    const diff = currentIndex - prevIndexRef.current;
+    // Handle wrap-around: if jumping from last→first it's "next" (left), first→last is "prev" (right)
+    if (diff === 1 || diff === -(images.length - 1)) {
+      slideDirRef.current = "left"; // next → image enters from right
+    } else {
+      slideDirRef.current = "right"; // prev → image enters from left
+    }
+    prevIndexRef.current = currentIndex;
+  }
+
+  // Pick the animation name based on direction
+  const slideAnimation = slideDirRef.current === "left"
+    ? `lb-slide-from-right ${SLIDE_DURATION}ms ease both`
+    : slideDirRef.current === "right"
+      ? `lb-slide-from-left ${SLIDE_DURATION}ms ease both`
+      : undefined; // initial open uses the scale-in via visible state
+
+  // ---- Image preloading ----
+  // When the current image changes, preload the next and previous full-res
+  // images in the background so they're instant when the user navigates.
+  useEffect(() => {
+    if (images.length <= 1) return;
+    const toPreload: number[] = [
+      (currentIndex + 1) % images.length,
+      (currentIndex - 1 + images.length) % images.length,
+    ];
+    const preloaded: HTMLImageElement[] = [];
+    for (const idx of toPreload) {
+      const preImg = new Image();
+      preImg.src = resolveAsset(images[idx].asset_path);
+      preloaded.push(preImg);
+    }
+    // Cleanup: abort any in-flight loads if we navigate away quickly
+    return () => {
+      for (const p of preloaded) p.src = "";
+    };
+  }, [currentIndex, images, resolveAsset]);
+
+  // ---- Touch / swipe handling ----
+  const touchRef = useRef<{ startX: number; startY: number; startTime: number } | null>(null);
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    const touch = e.touches[0];
+    touchRef.current = { startX: touch.clientX, startY: touch.clientY, startTime: Date.now() };
+  }, []);
+
+  const onTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (!touchRef.current) return;
+      const touch = e.changedTouches[0];
+      const dx = touch.clientX - touchRef.current.startX;
+      const dy = touch.clientY - touchRef.current.startY;
+      touchRef.current = null;
+
+      // Only register as a swipe if horizontal distance exceeds threshold
+      // and vertical distance is small (not a scroll gesture)
+      if (Math.abs(dx) >= SWIPE_THRESHOLD && Math.abs(dy) <= SWIPE_MAX_VERTICAL) {
+        if (dx < 0) onNext();  // swipe left → next
+        else onPrev();         // swipe right → prev
+      }
+    },
+    [onNext, onPrev]
+  );
+
+  // Focus trap: keep focus inside the lightbox
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+  // Trigger enter animation on mount + manage focus
+  useEffect(() => {
+    // Store the element that had focus before opening
+    previouslyFocusedRef.current = document.activeElement as HTMLElement;
+    // requestAnimationFrame ensures the initial opacity:0 is painted first
+    const raf = requestAnimationFrame(() => setVisible(true));
+    // Focus the dialog container so keyboard events work immediately
+    dialogRef.current?.focus();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  // Restore focus on unmount
+  useEffect(() => {
+    return () => {
+      previouslyFocusedRef.current?.focus();
+    };
+  }, []);
+
+  // Focus trap: cycle focus within the lightbox
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      const focusable = dialog.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", handleTab);
+    return () => window.removeEventListener("keydown", handleTab);
+  }, []);
+
+  // Animated close: fade out, then call onClose after transition
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+      if (e.key === "ArrowLeft") onPrev();
+      if (e.key === "ArrowRight") onNext();
+    },
+    [handleClose, onPrev, onNext]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (!img) return null;
+
+  // Portal to document.body so the lightbox escapes any parent stacking
+  // contexts created by ScrollAnimationWrapper transforms / animation-timeline.
+  return createPortal(
+    <>
+      <style dangerouslySetInnerHTML={{ __html: SLIDE_KEYFRAMES }} />
+      <div
+        ref={(el) => {
+          (backdropRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+          (dialogRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Image viewer: ${img.alt || `image ${currentIndex + 1} of ${images.length}`}`}
+        tabIndex={-1}
+        className="fixed inset-0 z-[9999] flex items-center justify-center outline-none"
+        onClick={handleClose}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        style={{
+          backgroundColor: visible ? "rgba(0,0,0,0.85)" : "rgba(0,0,0,0)",
+          backdropFilter: visible ? "blur(8px)" : "blur(0px)",
+          transition: "background-color 300ms ease, backdrop-filter 300ms ease",
+          touchAction: "pan-y",
+        }}
+      >
+        {/* Close */}
+        <button
+          onClick={handleClose}
+          aria-label="Close image viewer"
+          className="absolute top-5 right-5 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
+          style={{
+            opacity: visible ? 1 : 0,
+            transition: "opacity 300ms ease",
+          }}
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        {/* Nav arrows */}
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={(e) => { e.stopPropagation(); onPrev(); }}
+              aria-label="Previous image"
+              className="absolute left-5 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
+              style={{
+                opacity: visible ? 1 : 0,
+                transition: "opacity 300ms ease 100ms",
+              }}
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" aria-hidden="true">
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </button>
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext(); }}
+              aria-label="Next image"
+              className="absolute right-5 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
+              style={{
+                opacity: visible ? 1 : 0,
+                transition: "opacity 300ms ease 100ms",
+              }}
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" aria-hidden="true">
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </button>
+          </>
+        )}
+
+        {/* Counter */}
+        <div
+          className="absolute bottom-5 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm rounded-full px-4 py-1.5 z-10"
+          style={{
+            opacity: visible ? 1 : 0,
+            transition: "opacity 300ms ease 150ms",
+          }}
+        >
+          <span className="text-xs text-white/70">
+            {currentIndex + 1} / {images.length}
+          </span>
+        </div>
+
+        {/* Image — key forces remount on index change to replay slide animation */}
+        <div
+          key={currentIndex}
+          className="max-w-[90vw] max-h-[85vh] flex items-center justify-center"
+          onClick={(e) => e.stopPropagation()}
+          style={slideAnimation
+            ? { animation: slideAnimation }
+            : {
+                opacity: visible ? 1 : 0,
+                transform: visible ? "scale(1)" : "scale(0.92)",
+                transition: "opacity 300ms ease, transform 300ms ease",
+              }
+          }
+        >
+          {/* 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" }}
+          />
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
+
+// ============================================
+// Main Renderer
+// ============================================
+
+export default function ImageGridBlockRenderer({
+  block,
+}: {
+  block: ImageGridBlock;
+}) {
+  const resolveAsset = useAssetUrl();
+  const resolveThumb = useThumbUrl();
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  // 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;
+
+  // Block is already resolved for the current viewport by BlockRenderer
+  if (!block.images?.length) return null;
+
+  const images = block.images;
+  const hGutter = block.h_gutter ?? 10;
+  const vGutter = block.v_gutter ?? 10;
+  const imagesPerRow = block.images_per_row ?? 2;
+  const randomGrid = block.random_grid ?? "disabled";
+  const lightboxEnabled = block.lightbox ?? false;
+  const fit = block.object_fit ?? "cover";
+  const borderRadius = block.border_radius ? `${String(block.border_radius).replace(/px$/i, "")}px` : undefined;
+
+  // Determine if using random grid or uniform grid
+  const useRandomGrid = randomGrid !== "disabled";
+  const randomSeed = block.random_seed ?? 1;
+  const spans = useRandomGrid
+    ? generateRandomGridSpans(images.length, randomGrid as "small2-big4" | "small3-big6" | "small4-big8", randomSeed)
+    : null;
+
+  // Uniform grid: columns = 12 / imagesPerRow
+  const uniformColSpan = 12 / imagesPerRow;
+
+  // On phone (≤640px), simplify grid: max 2 columns (span 6) for readability
+  const phoneSpan = Math.max(6, uniformColSpan);
+  const phoneCss = `@media(max-width:${BREAKPOINTS.phone}px){.${gridId}>div{grid-column:span ${phoneSpan}!important}}`;
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: phoneCss }} />
+      <div
+        className={gridId}
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(12, 1fr)",
+          columnGap: `${hGutter}px`,
+          rowGap: `${vGutter}px`,
+        }}
+      >
+        {images.map((img, i) => {
+          const colSpan = spans ? spans[i] : uniformColSpan;
+
+          return (
+            <div
+              key={i}
+              style={{
+                gridColumn: `span ${colSpan}`,
+                minWidth: 0,
+                overflow: "hidden",
+                borderRadius,
+              }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={resolveThumb(img.asset_path)}
+                data-fallback-src={resolveAsset(img.asset_path)}
+                alt={img.alt ?? ""}
+                loading="lazy"
+                decoding="async"
+                onError={handleImgError}
+                onClick={lightboxEnabled ? () => setLightboxIndex(i) : undefined}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                  objectFit: fit,
+                  cursor: lightboxEnabled ? "pointer" : "default",
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Lightbox */}
+      {lightboxEnabled && lightboxIndex !== null && (
+        <GridLightbox
+          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
+            )
+          }
+        />
+      )}
+    </>
+  );
+}

package/components/blocks/PageBackground.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Client component that syncs the body background-color to the current page's
+ * background. This prevents black body flashes during page transitions —
+ * when animated elements are at opacity:0, the body color matches the page
+ * instead of showing the default dark (#020202).
+ *
+ * The body has `transition: background-color 300ms ease` in globals.css,
+ * so navigating between pages with different backgrounds fades smoothly.
+ *
+ * Renders nothing — side-effect only. Resets to default on unmount.
+ */
+export function PageBackground({ color }: { color?: string }) {
+  useEffect(() => {
+    if (color && color !== "transparent") {
+      document.body.style.backgroundColor = color;
+    }
+    return () => {
+      // Reset to CSS default (--color-brand-dark) when leaving the page
+      document.body.style.backgroundColor = "";
+    };
+  }, [color]);
+
+  return null;
+}

package/components/blocks/PageNavAnimation.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+/**
+ * PageNavAnimation — Side-effect component that sets per-page nav animation override.
+ *
+ * Same pattern as PageNavColor: renders nothing, just pushes page-level
+ * settings into context. Resets on unmount.
+ *
+ * Session 115: Created for per-page nav entrance animation overrides.
+ */
+
+import { useEffect } from "react";
+import { useNavAnimation } from "../../lib/contexts/NavAnimationContext";
+import type { NavEntrancePreset } from "../../lib/sanity/types";
+
+interface PageNavAnimationProps {
+  preset?: NavEntrancePreset;
+  duration?: number;
+  delay?: number;
+  disabled?: boolean;
+}
+
+export function PageNavAnimation({ preset, duration, delay, disabled }: PageNavAnimationProps) {
+  const { setOverride } = useNavAnimation();
+
+  useEffect(() => {
+    // Only push an override if the page actually configured something
+    if (preset || duration || delay || disabled) {
+      setOverride({ preset, duration, delay, disabled });
+    }
+    return () => setOverride({});
+  }, [preset, duration, delay, disabled, setOverride]);
+
+  return null;
+}

package/components/blocks/PageNavColor.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import { useNavColor } from "../../lib/contexts/NavColorContext";
+
+/**
+ * Client component that sets the per-page nav color via context.
+ * Renders nothing — just a side-effect component.
+ * Resets to empty on unmount so navigation between pages works correctly.
+ */
+export function PageNavColor({ color }: { color: string }) {
+  const { setNavColor } = useNavColor();
+
+  useEffect(() => {
+    if (color) {
+      setNavColor(color);
+    }
+    return () => {
+      setNavColor("");
+    };
+  }, [color, setNavColor]);
+
+  return null;
+}