@morphika/andami 0.1.3 → 0.1.6

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

@@ -0,0 +1,226 @@
+"use client";
+
+import type { NavItem, NavDesign, MobileNavDesign, NavColorVariant } from "../../../lib/sanity/types";
+import { hexToRgba } from "./nav-builder-utils";
+import { getSiteConfig } from "../../../lib/config";
+
+const _cfg = getSiteConfig();
+
+const NAV_COLOR_HEX: Record<NavColorVariant, string> = {
+  "yellow-lime": _cfg.palette.accent,
+  yellow: _cfg.palette.accent,
+  "red-coral": _cfg.palette.secondary,
+  blue: "#076bff",
+  green: _cfg.palette.accent,
+  white: _cfg.palette.text,
+};
+
+// ============================================
+// NavMobileLivePreview — phone-sized preview of the mobile menu
+// Session 158: Mirrors NavLivePreview visual language (dark bg, footer label)
+// but renders the mobile hamburger overlay layout inside a phone frame.
+// Designed to sit on the right side of NavMobileSettings.
+// ============================================
+
+interface NavMobileLivePreviewProps {
+  items: NavItem[];
+  design: NavDesign;
+  mobileDesign: MobileNavDesign;
+}
+
+export default function NavMobileLivePreview({
+  items,
+  design,
+  mobileDesign,
+}: NavMobileLivePreviewProps) {
+  // Desktop fallback values
+  const desktopColorKey = design.color || "yellow-lime";
+  const desktopColor = /^#[0-9a-fA-F]{6}$/.test(desktopColorKey)
+    ? desktopColorKey
+    : NAV_COLOR_HEX[desktopColorKey as keyof typeof NAV_COLOR_HEX] || NAV_COLOR_HEX["yellow-lime"];
+
+  // ── Navbar bar (logo + hamburger) ──
+  const barPaddingH = mobileDesign.padding_h ?? design.padding_h ?? 24;
+  const barPaddingV = mobileDesign.padding_v ?? design.padding_v ?? 27;
+  const barBg = mobileDesign.navbar_bg || "";
+  const barBgOpacity = mobileDesign.navbar_bg_opacity ?? 0;
+  const barBgColor =
+    barBg && barBgOpacity > 0 ? hexToRgba(barBg, barBgOpacity / 100) : "transparent";
+  const hamburgerColor = mobileDesign.hamburger_color || desktopColor;
+
+  // ── Overlay (expanded menu) ──
+  const overlayBg = mobileDesign.overlay_bg || "#0a0a0a";
+  const textColor = mobileDesign.text_color || desktopColor;
+  const fontSize = mobileDesign.font_size ?? 24;
+  const textTransform = (mobileDesign.text_transform || design.text_transform || "uppercase") as React.CSSProperties["textTransform"];
+  const itemsGap = mobileDesign.items_gap ?? 32;
+  const itemsAlign = mobileDesign.items_align || "center";
+  const alignItems =
+    itemsAlign === "right" ? "flex-end" : itemsAlign === "left" ? "flex-start" : "center";
+
+  const fontFamily =
+    design.font_family || `var(--font-family, '${_cfg.typography.defaultFont}', ${_cfg.typography.monoFallback})`;
+
+  const logoLabel =
+    items.find((i) => i.type === "logo")?.label ||
+    design.logo_text ||
+    _cfg.defaults.logoText;
+  const menuItems = items
+    .filter((i) => i.type !== "logo" && i.visible !== false)
+    .sort((a, b) => (a.grid_column || 0) - (b.grid_column || 0));
+
+  return (
+    <div
+      style={{
+        background: "#020202",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {/* Phone frame — centered */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "20px 24px 12px",
+        }}
+      >
+        <div
+          style={{
+            width: "100%",
+            maxWidth: 280,
+            borderRadius: 20,
+            overflow: "hidden",
+            border: "1px solid rgba(255,255,255,0.08)",
+            background: overlayBg,
+          }}
+        >
+          {/* Navbar bar — logo + hamburger icon */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingLeft: `${Math.min(barPaddingH, 24)}px`,
+              paddingRight: `${Math.min(barPaddingH, 24)}px`,
+              paddingTop: `${Math.min(barPaddingV, 20)}px`,
+              paddingBottom: `${Math.min(barPaddingV, 20)}px`,
+              background: barBgColor,
+            }}
+          >
+            {/* Logo label */}
+            <span
+              style={{
+                color: hamburgerColor,
+                fontSize: Math.min(design.font_size ?? 14, 14),
+                fontWeight: design.font_weight || "400",
+                fontFamily,
+                textTransform,
+                letterSpacing: "0.05em",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {logoLabel}
+            </span>
+
+            {/* Hamburger icon */}
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 3.5,
+                flexShrink: 0,
+              }}
+            >
+              <span
+                style={{
+                  display: "block",
+                  width: 16,
+                  height: 1.5,
+                  borderRadius: 1,
+                  background: hamburgerColor,
+                }}
+              />
+              <span
+                style={{
+                  display: "block",
+                  width: 16,
+                  height: 1.5,
+                  borderRadius: 1,
+                  background: hamburgerColor,
+                }}
+              />
+              <span
+                style={{
+                  display: "block",
+                  width: 16,
+                  height: 1.5,
+                  borderRadius: 1,
+                  background: hamburgerColor,
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Overlay — menu items */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems,
+              justifyContent: "center",
+              gap: `${Math.min(itemsGap, 40)}px`,
+              paddingLeft: `${Math.min(barPaddingH, 24)}px`,
+              paddingRight: `${Math.min(barPaddingH, 24)}px`,
+              paddingTop: 24,
+              paddingBottom: 32,
+              minHeight: 180,
+            }}
+          >
+            {menuItems.map((item) => (
+              <span
+                key={item._key}
+                style={{
+                  color: textColor,
+                  fontSize: Math.min(fontSize, 28),
+                  fontWeight: design.font_weight || "400",
+                  fontFamily,
+                  textTransform,
+                  letterSpacing: "0.05em",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  maxWidth: "100%",
+                }}
+              >
+                {item.label || "Untitled"}
+              </span>
+            ))}
+            {menuItems.length === 0 && (
+              <span
+                style={{
+                  color: "rgba(255,255,255,0.2)",
+                  fontSize: 12,
+                  fontStyle: "italic",
+                }}
+              >
+                No menu items
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer — matches NavLivePreview style */}
+      <div className="flex items-center justify-between px-3 py-1.5 text-[9px] text-neutral-600">
+        <span>Mobile Preview</span>
+        <span>{menuItems.length} menu items</span>
+      </div>
+    </div>
+  );
+}

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>
   );
 }