@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,102 +1,102 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-interface NavItemTypePickerProps {
-  column: number;
-  onSelect: (type: "logo" | "menu-item", defaultSpan: number) => void;
-  onClose: () => void;
-  hasLogo: boolean; // prevent adding multiple logos
-}
-
-const ITEM_TYPES = [
-  {
-    type: "logo" as const,
-    label: "Logo",
-    description: "Brand logo (text or image)",
-    defaultSpan: 3,
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-        <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
-        <path d="M6 10h8M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-        <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
-      </svg>
-    ),
-  },
-  {
-    type: "menu-item" as const,
-    label: "Menu Item",
-    description: "Navigation link",
-    defaultSpan: 1,
-    icon: (
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-        <path d="M4 7h12M4 10h8M4 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      </svg>
-    ),
-  },
-];
-
-export default function NavItemTypePicker({
-  column,
-  onSelect,
-  onClose,
-  hasLogo,
-}: NavItemTypePickerProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  // Close on Escape
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
-  }, [onClose]);
-
-  // Focus trap
-  useEffect(() => {
-    ref.current?.focus();
-  }, []);
-
-  const types = hasLogo
-    ? ITEM_TYPES.filter((t) => t.type !== "logo")
-    : ITEM_TYPES;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      style={{ background: "rgba(0,0,0,0.2)", backdropFilter: "blur(4px)" }}
-      onClick={onClose}
-    >
-      <div
-        ref={ref}
-        tabIndex={-1}
-        className="outline-none bg-white border border-neutral-200 rounded-2xl p-6 shadow-2xl"
-        style={{ width: 320 }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="text-[13px] font-semibold text-neutral-900 mb-1">Add Nav Item</div>
-        <div className="text-[11px] text-neutral-500 mb-4">Column {column}</div>
-        <div className="flex flex-col gap-2">
-          {types.map((t) => (
-            <button
-              key={t.type}
-              onClick={() => onSelect(t.type, t.defaultSpan)}
-              className="flex items-center gap-3 p-3 rounded-xl border border-neutral-200 bg-white text-left transition-colors hover:border-[#076bff] hover:bg-[#076bff]/[0.02]"
-            >
-              <div className="w-10 h-10 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center text-[#076bff] shrink-0">
-                {t.icon}
-              </div>
-              <div>
-                <div className="text-[13px] font-medium text-neutral-900">{t.label}</div>
-                <div className="text-[11px] text-neutral-500 mt-0.5">
-                  {t.description}
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface NavItemTypePickerProps {
+  column: number;
+  onSelect: (type: "logo" | "menu-item", defaultSpan: number) => void;
+  onClose: () => void;
+  hasLogo: boolean; // prevent adding multiple logos
+}
+
+const ITEM_TYPES = [
+  {
+    type: "logo" as const,
+    label: "Logo",
+    description: "Brand logo (text or image)",
+    defaultSpan: 3,
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M6 10h8M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+        <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+      </svg>
+    ),
+  },
+  {
+    type: "menu-item" as const,
+    label: "Menu Item",
+    description: "Navigation link",
+    defaultSpan: 1,
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M4 7h12M4 10h8M4 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+];
+
+export default function NavItemTypePicker({
+  column,
+  onSelect,
+  onClose,
+  hasLogo,
+}: NavItemTypePickerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  // Focus trap
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+
+  const types = hasLogo
+    ? ITEM_TYPES.filter((t) => t.type !== "logo")
+    : ITEM_TYPES;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ background: "rgba(0,0,0,0.2)", backdropFilter: "blur(4px)" }}
+      onClick={onClose}
+    >
+      <div
+        ref={ref}
+        tabIndex={-1}
+        className="outline-none bg-white border border-neutral-200 rounded-2xl p-6 shadow-2xl"
+        style={{ width: 320 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="text-[13px] font-semibold text-neutral-900 mb-1">Add Nav Item</div>
+        <div className="text-[11px] text-neutral-500 mb-4">Column {column}</div>
+        <div className="flex flex-col gap-2">
+          {types.map((t) => (
+            <button
+              key={t.type}
+              onClick={() => onSelect(t.type, t.defaultSpan)}
+              className="flex items-center gap-3 p-3 rounded-xl border border-neutral-200 bg-white text-left transition-colors hover:border-[#3580f9] hover:bg-[#3580f9]/[0.02]"
+            >
+              <div className="w-10 h-10 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center text-[#3580f9] shrink-0">
+                {t.icon}
+              </div>
+              <div>
+                <div className="text-[13px] font-medium text-neutral-900">{t.label}</div>
+                <div className="text-[11px] text-neutral-500 mt-0.5">
+                  {t.description}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -10,7 +10,7 @@ const NAV_COLOR_HEX: Record<NavColorVariant, string> = {
   "yellow-lime": _cfg.palette.accent,
   yellow: _cfg.palette.accent,
   "red-coral": _cfg.palette.secondary,
-  blue: "#076bff",
+  blue: "#3580f9",
   green: _cfg.palette.accent,
   white: _cfg.palette.text,
 };

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

@@ -1,226 +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>
-  );
-}
+"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: "#3580f9",
+  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>
+  );
+}