@morphika/andami 0.1.3 → 0.1.5

package/app/api/admin/settings/route.ts

@@ -15,7 +15,6 @@ import { logger } from "../../../../lib/logger";
  */
 
 const SETTINGS_ID = "siteSettings";
-const cfg = getSiteConfig();
 
 export async function GET() {
   const authenticated = await isAdminAuthenticated();
@@ -32,7 +31,7 @@ export async function GET() {
         _id: SETTINGS_ID,
         _type: "siteSettings",
         nav_items: [],
-        default_title: cfg.defaults.metaTitle,
+        default_title: getSiteConfig().defaults.metaTitle,
       });
       settings = await client.fetch(siteSettingsQuery);
     }
@@ -71,7 +70,7 @@ export async function POST(request: NextRequest) {
     }
 
     // Validate section name
-    const validSections = ["navigation", "nav_design", "metadata", "assets"];
+    const validSections = ["navigation", "nav_design", "nav_mobile_design", "metadata", "assets"];
     if (!validSections.includes(section)) {
       return NextResponse.json(
         { error: "Invalid section" },
@@ -111,14 +110,17 @@ export async function POST(request: NextRequest) {
               { status: 400 }
             );
           }
-          if (!["internal", "external", "content"].includes(item.link_type)) {
+          // Logo items don't require a link_type — default to "internal" if missing
+          const isLogo = item.type === "logo";
+          const linkType = item.link_type || (isLogo ? "internal" : undefined);
+          if (!linkType || !["internal", "external", "content"].includes(linkType)) {
             return NextResponse.json(
-              { error: "link_type must be 'internal', 'external', or 'content'" },
+              { error: `link_type must be 'internal', 'external', or 'content' (item: "${item.label}")` },
               { status: 400 }
             );
           }
           // Validate external URLs — reject javascript:, data:, vbscript: etc.
-          if (item.link_type === "external" && item.external_url) {
+          if (linkType === "external" && item.external_url) {
             if (!isSafeUrl(item.external_url)) {
               return NextResponse.json(
                 { error: "External URL uses a disallowed protocol" },
@@ -127,7 +129,7 @@ export async function POST(request: NextRequest) {
             }
           }
           // Validate content embed URLs
-          if (item.link_type === "content" && item.content_type === "video-embed" && item.content_url) {
+          if (linkType === "content" && item.content_type === "video-embed" && item.content_url) {
             if (!isSafeUrl(item.content_url)) {
               return NextResponse.json(
                 { error: "Content embed URL uses a disallowed protocol" },
@@ -143,7 +145,7 @@ export async function POST(request: NextRequest) {
               type?: string;
               label: string;
               logo_image?: string;
-              link_type: string;
+              link_type?: string;
               internal_page?: { _ref: string };
               external_url?: string;
               content_type?: string;
@@ -159,14 +161,14 @@ export async function POST(request: NextRequest) {
               type: item.type || "menu-item",
               label: item.label,
               ...(item.logo_image ? { logo_image: item.logo_image } : {}),
-              link_type: item.link_type,
-              ...(item.link_type === "internal" && item.internal_page
+              link_type: item.link_type || (item.type === "logo" ? "internal" : item.link_type),
+              ...((item.link_type || "internal") === "internal" && item.internal_page
                 ? { internal_page: { _type: "reference", _ref: item.internal_page._ref } }
                 : {}),
-              ...(item.link_type === "external" && item.external_url
+              ...((item.link_type || "internal") === "external" && item.external_url
                 ? { external_url: item.external_url }
                 : {}),
-              ...(item.link_type === "content" ? {
+              ...((item.link_type || "internal") === "content" ? {
                 ...(item.content_type ? { content_type: item.content_type } : {}),
                 ...(item.content_asset ? { content_asset: item.content_asset } : {}),
                 ...(item.content_url ? { content_url: item.content_url } : {}),
@@ -194,8 +196,8 @@ export async function POST(request: NextRequest) {
         patch = {
           nav_design: {
             _type: "object",
-            logo_text: typeof nd.logo_text === "string" ? nd.logo_text.slice(0, 200) : cfg.defaults.logoText,
-            color: ["yellow-lime", "yellow", "red-coral", "blue", "green", "white"].includes(nd.color) ? nd.color : "yellow-lime",
+            logo_text: typeof nd.logo_text === "string" ? nd.logo_text.slice(0, 200) : getSiteConfig().defaults.logoText,
+            color: typeof nd.color === "string" && (["yellow-lime", "yellow", "red-coral", "blue", "green", "white"].includes(nd.color) || /^#[0-9a-fA-F]{6}$/.test(nd.color)) ? nd.color : "yellow-lime",
             position: ["fixed", "sticky", "static"].includes(nd.position) ? nd.position : "fixed",
             hide_on_scroll: nd.hide_on_scroll !== false,
             font_size: typeof nd.font_size === "number" ? Math.max(8, Math.min(48, nd.font_size)) : 14,
@@ -206,7 +208,7 @@ export async function POST(request: NextRequest) {
             padding_v: typeof nd.padding_v === "number" ? Math.max(0, Math.min(200, nd.padding_v)) : 27,
             margin_h: typeof nd.margin_h === "number" ? Math.max(0, Math.min(200, nd.margin_h)) : 0,
             margin_v: typeof nd.margin_v === "number" ? Math.max(0, Math.min(200, nd.margin_v)) : 0,
-            background_color: typeof nd.background_color === "string" ? nd.background_color.slice(0, 50) : "",
+            background_color: typeof nd.background_color === "string" ? nd.background_color.slice(0, 500) : "",
             background_opacity: typeof nd.background_opacity === "number" ? Math.max(0, Math.min(100, nd.background_opacity)) : 0,
             backdrop_blur: !!nd.backdrop_blur,
             items_gap: typeof nd.items_gap === "number" ? Math.max(0, Math.min(200, nd.items_gap)) : 32,
@@ -224,6 +226,29 @@ export async function POST(request: NextRequest) {
         break;
       }
 
+      case "nav_mobile_design": {
+        const md = data.nav_mobile_design || {};
+        patch = {
+          nav_mobile_design: {
+            _type: "object",
+            // Overlay
+            overlay_bg: typeof md.overlay_bg === "string" ? md.overlay_bg.slice(0, 50) : "",
+            text_color: typeof md.text_color === "string" ? md.text_color.slice(0, 50) : "",
+            font_size: typeof md.font_size === "number" ? Math.max(12, Math.min(72, md.font_size)) : 24,
+            text_transform: ["none", "uppercase", "lowercase", "capitalize"].includes(md.text_transform) ? md.text_transform : "uppercase",
+            items_gap: typeof md.items_gap === "number" ? Math.max(0, Math.min(120, md.items_gap)) : 32,
+            items_align: ["left", "center", "right"].includes(md.items_align) ? md.items_align : "center",
+            // Navbar bar
+            navbar_bg: typeof md.navbar_bg === "string" ? md.navbar_bg.slice(0, 50) : "",
+            navbar_bg_opacity: typeof md.navbar_bg_opacity === "number" ? Math.max(0, Math.min(100, md.navbar_bg_opacity)) : 0,
+            hamburger_color: typeof md.hamburger_color === "string" ? md.hamburger_color.slice(0, 50) : "",
+            padding_h: typeof md.padding_h === "number" ? Math.max(0, Math.min(120, md.padding_h)) : 24,
+            padding_v: typeof md.padding_v === "number" ? Math.max(0, Math.min(120, md.padding_v)) : 27,
+          },
+        };
+        break;
+      }
+
       case "metadata": {
         // Validate text field lengths
         if (data.default_title && typeof data.default_title === "string" && data.default_title.length > 1000) {

package/app/api/admin/setup/complete/route.ts

@@ -26,7 +26,7 @@ export async function POST(request: NextRequest) {
   try {
     // Find the siteSettings document
     const doc = await client.fetch<{ _id: string } | null>(
-      `*[_type == "siteSettings"][0]{ _id }`
+      `*[_id == "siteSettings"][0]{ _id }`
     );
 
     if (!doc) {

package/app/api/admin/setup/route.ts

@@ -59,7 +59,8 @@ export async function POST(request: NextRequest) {
 
     // Seed siteSettings
     if (existing.siteSettings === 0) {
-      await writeClient.create({
+      await writeClient.createIfNotExists({
+        _id: "siteSettings",
         _type: "siteSettings",
         site_title: "",
         site_description: "",
@@ -84,7 +85,8 @@ export async function POST(request: NextRequest) {
 
     // Seed siteStyles
     if (existing.siteStyles === 0) {
-      await writeClient.create({
+      await writeClient.createIfNotExists({
+        _id: "siteStyles",
         _type: "siteStyles",
         grid_columns: 12,
         grid_width: 1200,
@@ -100,7 +102,8 @@ export async function POST(request: NextRequest) {
 
     // Seed assetRegistry
     if (existing.assetRegistry === 0) {
-      await writeClient.create({
+      await writeClient.createIfNotExists({
+        _id: "assetRegistry",
         _type: "assetRegistry",
         assets: [],
         storage_provider: "",

package/components/admin/index.ts

@@ -0,0 +1,7 @@
+// ============================================
+// Admin Components Barrel Export
+// ============================================
+
+export { default as MetadataEditor } from "./MetadataEditor";
+export { default as PublishToggle } from "./PublishToggle";
+export * from "./icons";

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

@@ -1,7 +1,8 @@
 "use client";
 
-import type { NavDesign } from "../../../lib/sanity/types";
+import type { NavDesign, ColorField } from "../../../lib/sanity/types";
 import { getSiteConfig } from "../../../lib/config";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
 import {
   Field,
   TextInput,
@@ -10,7 +11,6 @@ import {
   Toggle,
   RangeSlider,
   Section,
-  ColorInput,
 } from "./NavSettingsFields";
 
 interface NavGeneralSettingsProps {
@@ -26,6 +26,8 @@ export default function NavGeneralSettings({
   onChange,
   fonts,
 }: NavGeneralSettingsProps) {
+  const swatches = usePaletteSwatches();
+
   const update = (partial: Partial<NavDesign>) =>
     onChange({ ...design, ...partial });
 
@@ -122,17 +124,10 @@ export default function NavGeneralSettings({
             />
           </Field>
           <Field label="Color">
-            <SelectInput
-              value={design.color || "yellow-lime"}
-              onChange={(v) => update({ color: v as NavDesign["color"] })}
-              options={[
-                { value: "yellow-lime", label: "Yellow-Lime" },
-                { value: "yellow", label: "Yellow" },
-                { value: "red-coral", label: "Red / Coral" },
-                { value: "blue", label: "Blue" },
-                { value: "green", label: "Green" },
-                { value: "white", label: "White" },
-              ]}
+            <ColorSwatchPicker
+              value={design.color || ""}
+              onChange={(v) => update({ color: typeof v === "string" ? v : "" })}
+              swatches={swatches}
             />
           </Field>
         </Section>
@@ -247,9 +242,10 @@ export default function NavGeneralSettings({
     <>
       <Section title="BACKGROUND">
         <Field label="Color">
-          <ColorInput
+          <ColorSwatchPicker
             value={design.background_color || ""}
-            onChange={(v) => update({ background_color: v })}
+            onChange={(v) => update({ background_color: typeof v === "string" ? v : "" })}
+            swatches={swatches}
           />
         </Field>
         {design.background_color && (

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

@@ -3,13 +3,13 @@
 import { useState } from "react";
 import type { NavItem, PageListItem } from "../../../lib/sanity/types";
 import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
 import {
   Field,
   TextInput,
   SelectInput,
   SegmentedControl,
   Section,
-  ColorInput,
 } from "./NavSettingsFields";
 import AssetBrowser from "../../../components/builder/AssetBrowser";
 
@@ -33,6 +33,8 @@ export default function NavItemSettings({
   const isLogo = item.type === "logo";
   const maxSpan = getMaxSpan(items, item.grid_column, item._key);
   const [showAssetBrowser, setShowAssetBrowser] = useState(false);
+  const [showLogoAssetBrowser, setShowLogoAssetBrowser] = useState(false);
+  const swatches = usePaletteSwatches();
 
   const update = (partial: Partial<NavItem>) =>
     onUpdate({ ...item, ...partial });
@@ -60,7 +62,10 @@ export default function NavItemSettings({
           </Field>
           {isLogo && (
             <Field label="Image">
-              <button className="w-full py-4 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors">
+              <button
+                onClick={() => setShowLogoAssetBrowser(true)}
+                className="w-full py-4 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
+              >
                 <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" />
                   <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
@@ -74,6 +79,14 @@ export default function NavItemSettings({
                   "Browse image..."
                 )}
               </button>
+              {item.logo_image && (
+                <button
+                  onClick={() => update({ logo_image: undefined })}
+                  className="mt-1 text-[10px] text-red-400 hover:text-red-600 transition-colors"
+                >
+                  Remove image
+                </button>
+              )}
             </Field>
           )}
         </Section>
@@ -174,6 +187,17 @@ export default function NavItemSettings({
           onClose={() => setShowAssetBrowser(false)}
           filterType={item.content_type === "video-file" ? "video" : item.content_type === "image" ? "image" : "all"}
         />
+
+        {/* Logo image asset browser */}
+        <AssetBrowser
+          open={showLogoAssetBrowser}
+          onSelect={(path) => {
+            update({ logo_image: path });
+            setShowLogoAssetBrowser(false);
+          }}
+          onClose={() => setShowLogoAssetBrowser(false)}
+          filterType="image"
+        />
       </>
     );
   }
@@ -263,10 +287,10 @@ export default function NavItemSettings({
           />
         </Field>
         <Field label="Color">
-          <ColorInput
+          <ColorSwatchPicker
             value={item.style_overrides?.color || ""}
-            onChange={(v) => updateOverride("color", v || undefined)}
-            placeholder="Inherit"
+            onChange={(v) => updateOverride("color", (typeof v === "string" ? v : "") || undefined)}
+            swatches={swatches}
           />
         </Field>
         <Field label="Transform">

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

@@ -41,7 +41,10 @@ export default function NavLivePreview({ items, design }: NavLivePreviewProps) {
       : textAlign === "right"
       ? "flex-end"
       : "flex-start";
-  const color = NAV_COLOR_HEX[design.color || "yellow-lime"];
+  const colorKey = design.color || "yellow-lime";
+  const color = /^#[0-9a-fA-F]{6}$/.test(colorKey)
+    ? colorKey
+    : NAV_COLOR_HEX[colorKey as keyof typeof NAV_COLOR_HEX] || NAV_COLOR_HEX["yellow-lime"];
   const verticalAlign = design.vertical_align || "top";
   const gridAlignItems = verticalAlign === "bottom" ? "end" : verticalAlign === "middle" ? "center" : "start";
   const hasMargin = marginH > 0 || marginV > 0;

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