@morphika/andami 0.1.3 → 0.1.6

package/app/api/admin/assets/relink/confirm/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../../lib/csrf";
@@ -210,7 +210,7 @@ export async function POST(request: NextRequest) {
     // Also update siteSettings seed_url if it changed
     if (new_seed_url && new_seed_url !== oldSeed) {
       const settings = await client.fetch(
-        `*[_type == "siteSettings"][0]._id`
+        `*[_id == "siteSettings"][0]._id`
       );
       if (settings) {
         transaction.patch(settings, {

package/app/api/admin/assets/relink/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { getStorageAdapter } from "../../../../../lib/storage";

package/app/api/admin/assets/scan/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";

package/app/api/admin/custom-sections/[slug]/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { customSectionBySlugQuery, pagesUsingCustomSectionQuery } from "../../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../../lib/auth";

package/app/api/admin/custom-sections/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { writeClient } from "../../../../lib/sanity/writeClient";
 import { allCustomSectionsQuery } from "../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../lib/auth";

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

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../lib/auth";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 
 /**
  * GET /api/admin/database — Sanity connection status & stats

package/app/api/admin/pages/[slug]/duplicate/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
-import { client } from "../../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../../lib/sanity/writeClient";
 import { pageBySlugQuery } from "../../../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../../../lib/auth";

package/app/api/admin/pages/[slug]/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { pageBySlugQuery } from "../../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
@@ -577,7 +577,7 @@ export async function DELETE(
     if (referencing > 0) {
       // Remove navigation references to this page before deleting
       const siteSettings = await client.fetch(
-        `*[_type == "siteSettings"][0]{ _id, nav_items }`
+        `*[_id == "siteSettings"][0]{ _id, nav_items }`
       );
       if (siteSettings?.nav_items?.length) {
         const filtered = siteSettings.nav_items.filter((item: RawNavItem) =>

package/app/api/admin/pages/[slug]/set-home/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
-import { client } from "../../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../../lib/csrf";

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

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { writeClient } from "../../../../lib/sanity/writeClient";
 import { allPagesQuery } from "../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../lib/auth";

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

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { pageBySlugQuery } from "../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../lib/auth";
 import { logger } from "../../../../lib/logger";

package/app/api/admin/r2/delete/route.ts

@@ -3,7 +3,7 @@ import { S3Client, DeleteObjectCommand, ListObjectsV2Command, DeleteObjectsComma
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath, checkRateLimit } from "../../../../../lib/security";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { decryptToken } from "../../../../../lib/security";
 import { auditLog } from "../../../../../lib/audit";

package/app/api/admin/r2/rename/route.ts

@@ -3,7 +3,7 @@ import { S3Client, CopyObjectCommand, DeleteObjectCommand, ListObjectsV2Command,
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath, checkRateLimit } from "../../../../../lib/security";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { decryptToken } from "../../../../../lib/security";
 import { auditLog } from "../../../../../lib/audit";

package/app/api/admin/r2/status/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { decryptToken } from "../../../../../lib/security";
 import { logger } from "../../../../../lib/logger";
 

package/app/api/admin/r2/upload-url/route.ts

@@ -4,7 +4,7 @@ import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath, checkRateLimit } from "../../../../../lib/security";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { decryptToken } from "../../../../../lib/security";
 import { getMimeType, isMediaFile } from "../../../../../lib/storage/types";
 import { logger } from "../../../../../lib/logger";

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

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../lib/auth";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { writeClient } from "../../../../lib/sanity/writeClient";
 import { siteSettingsQuery } from "../../../../lib/sanity/queries";
 import { isSafeUrl, isBodyTooLarge, MAX_JSON_BODY_SIZE } from "../../../../lib/security";
@@ -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

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { auditLog } from "../../../../../lib/audit";
 import { logger } from "../../../../../lib/logger";
@@ -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

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../lib/auth";
 import { getSetupStatus } from "../../../../lib/setup/detect";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { writeClient } from "../../../../lib/sanity/writeClient";
 import { validateCsrf, csrfErrorResponse } from "../../../../lib/csrf";
 
@@ -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/app/api/admin/storage/switch/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError } from "../../../../../lib/security";
 import { invalidateProviderConfigCache } from "../../../../../lib/storage";

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

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../lib/auth";
-import { client } from "../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../lib/sanity/client";
 import { writeClient } from "../../../../lib/sanity/writeClient";
 import { siteStylesQuery } from "../../../../lib/sanity/queries";
 import { validateCsrf, csrfErrorResponse } from "../../../../lib/csrf";

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;