@morphika/andami 0.1.2 → 0.1.5

package/components/admin/nav-builder/NavMobileSettings.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { useCallback } from "react";
+import type { NavItem, NavDesign, MobileNavDesign } from "../../../lib/sanity/types";
+import NavMobileLivePreview from "./NavMobileLivePreview";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  RangeSlider,
+  Section,
+} from "./NavSettingsFields";
+
+// ============================================
+// NavMobileSettings — standalone panel for mobile menu customization
+// Session 158: Independent mobile menu styles that are NOT affected
+// by page-level nav_color or parallax slide color overrides.
+// ============================================
+
+interface NavMobileSettingsProps {
+  design: MobileNavDesign;
+  /** Desktop nav design — needed for fallback values and preview */
+  desktopDesign: NavDesign;
+  /** Nav items — needed for preview */
+  items: NavItem[];
+  onChange: (design: MobileNavDesign) => void;
+  onSave: () => void;
+  saving: boolean;
+  hasChanges: boolean;
+}
+
+export default function NavMobileSettings({
+  design,
+  desktopDesign,
+  items,
+  onChange,
+  onSave,
+  saving,
+  hasChanges,
+}: NavMobileSettingsProps) {
+  const swatches = usePaletteSwatches();
+  const update = useCallback(
+    (partial: Partial<MobileNavDesign>) => onChange({ ...design, ...partial }),
+    [design, onChange]
+  );
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200">
+      {/* Header */}
+      <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
+        <div>
+          <div className="text-sm font-semibold text-neutral-900">
+            Mobile Menu
+          </div>
+          <div className="text-[11px] text-neutral-400 mt-0.5">
+            Customize the hamburger menu independently from the desktop navbar
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {hasChanges && (
+            <span className="text-[11px] text-amber-500 font-medium">
+              Unsaved changes
+            </span>
+          )}
+          <button
+            onClick={onSave}
+            disabled={saving || !hasChanges}
+            className={`px-5 py-1.5 text-sm font-medium rounded-lg transition-all ${
+              saving || !hasChanges
+                ? "bg-neutral-100 text-neutral-400 cursor-not-allowed"
+                : "bg-[#076bff] text-white hover:bg-[#0559d4]"
+            }`}
+          >
+            {saving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+
+      {/* Side-by-side: settings left, preview right */}
+      <div className="flex">
+        {/* Settings content */}
+        <div className="flex-1 min-w-0 px-5 py-4 border-r border-neutral-200">
+          <div className="max-w-md">
+            {/* ── Menu Overlay (expanded fullscreen menu) ── */}
+            <Section title="MENU OVERLAY">
+              <Field label="Background">
+                <ColorSwatchPicker
+                  value={design.overlay_bg || ""}
+                  onChange={(v) => update({ overlay_bg: typeof v === "string" ? v : "" })}
+                  swatches={swatches}
+                />
+              </Field>
+              <Field label="Text color">
+                <ColorSwatchPicker
+                  value={design.text_color || ""}
+                  onChange={(v) => update({ text_color: typeof v === "string" ? v : "" })}
+                  swatches={swatches}
+                />
+              </Field>
+              <Field label="Font size">
+                <TextInput
+                  value={design.font_size ?? 24}
+                  onChange={(v) =>
+                    update({
+                      font_size: Math.max(12, Math.min(72, parseInt(v) || 24)),
+                    })
+                  }
+                  type="number"
+                />
+              </Field>
+              <Field label="Transform">
+                <SelectInput
+                  value={design.text_transform || "uppercase"}
+                  onChange={(v) =>
+                    update({
+                      text_transform: v as MobileNavDesign["text_transform"],
+                    })
+                  }
+                  options={[
+                    { value: "uppercase", label: "UPPERCASE" },
+                    { value: "none", label: "None" },
+                    { value: "lowercase", label: "lowercase" },
+                    { value: "capitalize", label: "Capitalize" },
+                  ]}
+                />
+              </Field>
+              <Field label="Align">
+                <SegmentedControl
+                  value={design.items_align || "center"}
+                  onChange={(v) =>
+                    update({ items_align: v as MobileNavDesign["items_align"] })
+                  }
+                  options={[
+                    { value: "left", label: "Left" },
+                    { value: "center", label: "Center" },
+                    { value: "right", label: "Right" },
+                  ]}
+                />
+              </Field>
+              <Field label="Items gap">
+                <RangeSlider
+                  value={design.items_gap ?? 32}
+                  onChange={(v) => update({ items_gap: v })}
+                  min={8}
+                  max={80}
+                  suffix="px"
+                />
+              </Field>
+            </Section>
+
+            {/* ── Navbar Bar (logo + hamburger row) ── */}
+            <Section title="NAVBAR BAR">
+              <Field label="BG color">
+                <ColorSwatchPicker
+                  value={design.navbar_bg || ""}
+                  onChange={(v) => update({ navbar_bg: typeof v === "string" ? v : "" })}
+                  swatches={swatches}
+                />
+              </Field>
+              {design.navbar_bg && (
+                <Field label="BG opacity">
+                  <RangeSlider
+                    value={design.navbar_bg_opacity ?? 100}
+                    onChange={(v) => update({ navbar_bg_opacity: v })}
+                    min={0}
+                    max={100}
+                    suffix="%"
+                  />
+                </Field>
+              )}
+              <Field label="Icon color">
+                <ColorSwatchPicker
+                  value={design.hamburger_color || ""}
+                  onChange={(v) => update({ hamburger_color: typeof v === "string" ? v : "" })}
+                  swatches={swatches}
+                />
+              </Field>
+              <Field label="Pad H">
+                <RangeSlider
+                  value={design.padding_h ?? 24}
+                  onChange={(v) => update({ padding_h: v })}
+                  min={0}
+                  max={60}
+                  suffix="px"
+                />
+              </Field>
+              <Field label="Pad V">
+                <RangeSlider
+                  value={design.padding_v ?? 27}
+                  onChange={(v) => update({ padding_v: v })}
+                  min={0}
+                  max={60}
+                  suffix="px"
+                />
+              </Field>
+            </Section>
+
+            {/* Info notice */}
+            <div className="mt-4 p-3 bg-blue-50 rounded-xl border border-blue-200">
+              <p className="text-[11px] text-blue-600 leading-relaxed">
+                <strong>Independent from page overrides:</strong> Page-level{" "}
+                <code className="bg-blue-100 px-1 rounded text-[10px]">nav_color</code>{" "}
+                and parallax slide color changes only affect the desktop navbar.
+                The mobile menu always uses these dedicated styles.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Live preview — sticky on the right */}
+        <div className="w-[340px] shrink-0 self-start sticky top-0">
+          <NavMobileLivePreview
+            items={items}
+            design={desktopDesign}
+            mobileDesign={design}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/admin/nav-builder/index.ts

@@ -7,4 +7,6 @@ export { default as NavLivePreview } from "./NavLivePreview";
 export { default as NavSettingsPanel } from "./NavSettingsPanel";
 export { default as NavGeneralSettings } from "./NavGeneralSettings";
 export { default as NavItemSettings } from "./NavItemSettings";
+export { default as NavMobileSettings } from "./NavMobileSettings";
+export { default as NavMobileLivePreview } from "./NavMobileLivePreview";
 export * from "./nav-builder-utils";

package/components/blocks/BlockRenderer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Component } from "react";
 import type { ContentBlock, BlockLayout } from "../../lib/sanity/types";
 import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
 import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
@@ -9,7 +10,8 @@ import { useAssetUrl } from "../../lib/contexts/AssetContext";
 import { useViewport } from "../../lib/hooks/useViewport";
 import { resolveBlock } from "../../lib/builder/responsive";
 import { getBlockLayoutStyles, hasBlockLayout } from "../../lib/builder/layout-styles";
-import { hexToRgba } from "../../lib/color-utils";
+import { hexToRgba, colorToOverrideRule, borderColorToOverrideRule, parseColorField } from "../../lib/color-utils";
+import type { ColorField } from "../../lib/sanity/types";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
 import HoverAnimationWrapper from "./HoverAnimationWrapper";
@@ -24,6 +26,50 @@ import ButtonBlockRenderer from "./ButtonBlockRenderer";
 import CoverBlockRenderer from "./CoverBlockRenderer";
 import ProjectGridBlockRenderer from "./ProjectGridBlockRenderer";
 
+// ── BLK-003: Error Boundary for block renderers ──
+// Prevents a single broken block from crashing the entire page.
+// Class component required — React error boundaries don't support hooks.
+interface BlockErrorBoundaryProps {
+  blockType: string;
+  blockKey: string;
+  children: React.ReactNode;
+}
+interface BlockErrorBoundaryState {
+  hasError: boolean;
+}
+class BlockErrorBoundary extends Component<BlockErrorBoundaryProps, BlockErrorBoundaryState> {
+  constructor(props: BlockErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): BlockErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error) {
+    console.error(
+      `[BlockRenderer] Error in ${this.props.blockType} (key: ${this.props.blockKey}):`,
+      error
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (process.env.NODE_ENV === "development") {
+        return (
+          <div className="border border-dashed border-red-400 bg-red-50 p-4 font-mono text-xs text-red-600">
+            Block crashed: {this.props.blockType} ({this.props.blockKey})
+          </div>
+        );
+      }
+      // Production: render nothing — block silently disappears instead of page crash
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
 /**
  * Central block dispatcher for the public site.
  *
@@ -111,9 +157,9 @@ function buildBlockLayoutOverrideRules(
     }
   }
 
-  // Border color (no px)
+  // 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 (no px)
@@ -121,15 +167,13 @@ function buildBlockLayoutOverrideRules(
     rules.push(`border-style:${overrides.border_style}!important`);
   }
 
-  // Background color (with opacity support)
+  // Background color (with opacity support, gradient-safe via ColorField bridge)
   if (overrides.background_color) {
     const opacity = overrides.background_opacity;
-    if (opacity !== undefined && opacity < 100) {
-      const rgba = hexToRgba(overrides.background_color, opacity / 100);
-      rules.push(`background-color:${rgba}!important`);
-    } else {
-      rules.push(`background-color:${overrides.background_color}!important`);
-    }
+    rules.push(colorToOverrideRule(
+      parseColorField(overrides.background_color),
+      opacity !== undefined ? opacity : undefined
+    ));
   } else if (overrides.background_opacity !== undefined) {
     // Opacity-only override (color inherited from desktop) — handled at render via resolveBlock
   }
@@ -269,16 +313,20 @@ export default function BlockRenderer({
     case "projectGridBlock":
       content = <ProjectGridBlockRenderer block={resolved as import("../../lib/sanity/types").ProjectGridBlock} />;
       break;
-    default:
+    default: {
+      const unknownBlock = resolved as ContentBlock;
       if (process.env.NODE_ENV === "development") {
         content = (
           <div className="border border-dashed border-brand-secondary/50 p-4 font-mono text-xs text-brand-secondary">
-            Unknown block type: {(resolved as ContentBlock)._type}
+            Unknown block type: {unknownBlock._type}
           </div>
         );
       } else {
+        // BLK-004: Log unknown block types in production for debugging
+        console.warn(`[BlockRenderer] Unknown block type "${unknownBlock._type}" (key: ${unknownBlock._key}) — skipped`);
         return null;
       }
+    }
   }
 
   // ── Resolve enter animation once (used both for typewriter early-wrap and normal path) ──
@@ -400,5 +448,9 @@ export default function BlockRenderer({
     }
   }
 
-  return <>{content}</>;
+  return (
+    <BlockErrorBoundary blockType={resolved._type} blockKey={block._key}>
+      {content}
+    </BlockErrorBoundary>
+  );
 }

package/components/blocks/ButtonBlockRenderer.tsx

@@ -21,6 +21,18 @@ const alignmentMap: Record<string, string> = {
   right: "justify-end",
 };
 
+// BLK-001: Validate URL — only allow safe protocols and non-empty values
+function isValidUrl(url: unknown): url is string {
+  if (!url || typeof url !== "string") return false;
+  const trimmed = url.trim();
+  if (!trimmed) return false;
+  // Allow relative paths, http(s), mailto, tel — block javascript: and data:
+  if (/^(https?:\/\/|mailto:|tel:|\/)/i.test(trimmed)) return true;
+  // Allow fragment-only links (#section)
+  if (trimmed.startsWith("#")) return true;
+  return false;
+}
+
 export default function ButtonBlockRenderer({
   block,
 }: {
@@ -30,23 +42,34 @@ export default function ButtonBlockRenderer({
   const size = sizeMap[block.size ?? "medium"];
   const alignment = alignmentMap[block.alignment ?? "left"];
 
+  const href = isValidUrl(block.url) ? block.url : undefined;
+
+  // Don't render a broken link — render as inert span if URL is missing/invalid
+  const Tag = href ? "a" : "span";
+  const linkProps = href
+    ? {
+        href,
+        target: block.target ? ("_blank" as const) : undefined,
+        rel: block.target ? "noopener noreferrer" : undefined,
+      }
+    : {};
+
   return (
     <div className={`flex ${alignment}`}>
-      <a
-        href={block.url}
-        target={block.target ? "_blank" : undefined}
-        rel={block.target ? "noopener noreferrer" : undefined}
+      <Tag
+        {...linkProps}
         className={[
-          "inline-block font-mono uppercase tracking-wider transition-all",
+          "inline-block font-sans uppercase tracking-wider transition-all",
           variant,
           size,
           block.full_width ? "w-full text-center" : "",
+          !href ? "cursor-default opacity-60" : "",
         ]
           .filter(Boolean)
           .join(" ")}
       >
         {block.text}
-      </a>
+      </Tag>
     </div>
   );
 }

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;