@morphika/andami 0.1.9 → 0.2.0

package/app/admin/pages/[slug]/page.tsx

@@ -18,8 +18,8 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import type { Page, PageSection, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../../lib/sanity/types";
+import type { Page, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallexGroup } from "../../../../lib/sanity/types";
 import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
 import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
 import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
@@ -665,10 +665,8 @@ export default function PageEditorPage() {
                   >
                     {store.rows.map((item, rowIndex) => {
                       const isV2Section = isPageSectionV2(item);
-                      const isSection = isPageSection(item);
                       const isInstance = isCustomSectionInstance(item);
-                      const isParallax = isParallaxGroup(item);
-                      const section = isSection ? (item as PageSection) : null;
+                      const isParallax = isParallexGroup(item);
                       const v2Section = isV2Section ? (item as PageSectionV2) : null;
 
                       // Custom Section Instance — rendered directly without SortableRow chrome
@@ -770,8 +768,6 @@ export default function PageEditorPage() {
                               section={v2Section}
                               onAddBlockTarget={handleAddBlockTargetV2}
                             />
-                          ) : isSection && section?.block?.[0] ? (
-                            <BlockLivePreview block={section.block[0]} viewport={store.activeViewport} />
                           ) : null}
                         </SortableRow>
                       );

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

@@ -18,7 +18,7 @@ interface RawNavItem {
 // ─── Helpers ──────────────────────────────────────────────────────────────
 
 /** Validate basic row→column→block structure before deeper sanitization.
- *  Supports both Row (columns→blocks) and PageSection (_type: "pageSection", block array).
+ *  Supports PageSectionV2, ParallaxGroup, and CustomSectionInstance.
  */
 function validateBlockStructure(rows: unknown[]): { valid: boolean; error?: string } {
   if (!Array.isArray(rows)) return { valid: false, error: "content_rows must be an array" };
@@ -43,20 +43,6 @@ function validateBlockStructure(rows: unknown[]): { valid: boolean; error?: stri
       continue;
     }
 
-    // PageSection: validate block array instead of columns
-    if (r._type === "pageSection") {
-      if (!Array.isArray(r.block)) return { valid: false, error: `Section ${i}: block must be an array` };
-      const blocks = r.block as unknown[];
-      for (let k = 0; k < blocks.length; k++) {
-        const block = blocks[k];
-        if (!block || typeof block !== "object") return { valid: false, error: `Section ${i}, block ${k}: must be an object` };
-        const b = block as Record<string, unknown>;
-        if (typeof b._key !== "string" || !b._key) return { valid: false, error: `Section ${i}, block ${k}: missing _key` };
-        if (typeof b._type !== "string" || !b._type) return { valid: false, error: `Section ${i}, block ${k}: missing _type` };
-      }
-      continue;
-    }
-
     // ParallaxGroup: validate slides array with columns→blocks inside each slide (Session 127)
     if (r._type === "parallaxGroup") {
       if (!Array.isArray(r.slides)) return { valid: false, error: `ParallaxGroup ${i}: slides must be an array` };
@@ -167,7 +153,7 @@ function sanitizeColumnsBlocks(columns: unknown[]): { valid: boolean; error?: st
 }
 
 /** Recursively sanitize URLs and asset paths in block content.
- *  Supports Row (columns→blocks), PageSection (block array), and ParallaxGroup (slides→columns→blocks).
+ *  Supports PageSectionV2 (columns→blocks) and ParallaxGroup (slides→columns→blocks).
  */
 function sanitizeBlockContent(rows: unknown[]): { valid: boolean; error?: string } {
   if (!Array.isArray(rows)) return { valid: true };
@@ -176,18 +162,6 @@ function sanitizeBlockContent(rows: unknown[]): { valid: boolean; error?: string
     if (!row || typeof row !== "object") continue;
     const rowRecord = row as Record<string, unknown>;
 
-    // PageSection: sanitize block array directly
-    if (rowRecord._type === "pageSection") {
-      const sectionBlocks = rowRecord.block;
-      if (!Array.isArray(sectionBlocks)) continue;
-      for (const block of sectionBlocks) {
-        if (!block || typeof block !== "object") continue;
-        const result = sanitizeSingleBlock(block as Record<string, unknown>);
-        if (!result.valid) return result;
-      }
-      continue;
-    }
-
     // ParallaxGroup: sanitize blocks inside each slide's columns (Session 127)
     if (rowRecord._type === "parallaxGroup") {
       const slides = rowRecord.slides;

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

@@ -16,6 +16,23 @@ import { logger } from "../../../../lib/logger";
 
 const SETTINGS_ID = "siteSettings";
 
+/** Sanitize a per-viewport responsive override object for nav_design.
+ *  Only allows the known overridable fields with proper type/range checks. */
+function sanitizeNavResponsiveOverride(o: Record<string, unknown>) {
+  const result: Record<string, unknown> = {};
+  if (typeof o.font_size === "number") result.font_size = Math.max(8, Math.min(48, o.font_size));
+  if (typeof o.font_weight === "string") result.font_weight = o.font_weight.slice(0, 10);
+  if (typeof o.text_align === "string" && ["left", "center", "right"].includes(o.text_align)) result.text_align = o.text_align;
+  if (typeof o.vertical_align === "string" && ["top", "middle", "bottom"].includes(o.vertical_align)) result.vertical_align = o.vertical_align;
+  if (typeof o.text_transform === "string" && ["none", "uppercase", "lowercase", "capitalize"].includes(o.text_transform)) result.text_transform = o.text_transform;
+  if (typeof o.padding_h === "number") result.padding_h = Math.max(0, Math.min(200, o.padding_h));
+  if (typeof o.padding_v === "number") result.padding_v = Math.max(0, Math.min(200, o.padding_v));
+  if (typeof o.margin_h === "number") result.margin_h = Math.max(0, Math.min(200, o.margin_h));
+  if (typeof o.margin_v === "number") result.margin_v = Math.max(0, Math.min(200, o.margin_v));
+  if (typeof o.items_gap === "number") result.items_gap = Math.max(0, Math.min(200, o.items_gap));
+  return result;
+}
+
 export async function GET() {
   const authenticated = await isAdminAuthenticated();
   if (!authenticated) {
@@ -221,6 +238,19 @@ export async function POST(request: NextRequest) {
             entrance_delay: typeof nd.entrance_delay === "number" ? Math.max(0, Math.min(5000, nd.entrance_delay)) : 0,
             entrance_stagger: !!nd.entrance_stagger,
             entrance_stagger_delay: typeof nd.entrance_stagger_delay === "number" ? Math.max(20, Math.min(500, nd.entrance_stagger_delay)) : 80,
+            // ── Responsive overrides (tablet / phone) ──
+            ...(nd.responsive && typeof nd.responsive === "object"
+              ? {
+                  responsive: {
+                    ...(nd.responsive.tablet && typeof nd.responsive.tablet === "object"
+                      ? { tablet: sanitizeNavResponsiveOverride(nd.responsive.tablet) }
+                      : {}),
+                    ...(nd.responsive.phone && typeof nd.responsive.phone === "object"
+                      ? { phone: sanitizeNavResponsiveOverride(nd.responsive.phone) }
+                      : {}),
+                  },
+                }
+              : {}),
           },
         };
         break;

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

@@ -7,6 +7,44 @@ import NavBuilderGrid from "./NavBuilderGrid";
 import NavLivePreview from "./NavLivePreview";
 import NavSettingsPanel from "./NavSettingsPanel";
 
+// ── Header icons ──
+
+const NAV_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+  </svg>
+);
+const LOGO_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+const ITEM_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+);
+
+function getHeaderConfig(selectedItem: NavItem | null) {
+  if (!selectedItem) {
+    return {
+      gradient: "linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #ddd6fe 100%)",
+      icon: NAV_HEADER_ICON,
+    };
+  }
+  if (selectedItem.type === "logo") {
+    return {
+      gradient: "linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fcd34d 100%)",
+      icon: LOGO_HEADER_ICON,
+    };
+  }
+  return {
+    gradient: "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 40%, #c7d2fe 100%)",
+    icon: ITEM_HEADER_ICON,
+  };
+}
+
 interface NavBuilderProps {
   initialItems: NavItem[];
   initialDesign: NavDesign;
@@ -121,30 +159,68 @@ export default function NavBuilder({
   }, [items, design, onSave]);
 
   const selectedItem = items.find((i) => i._key === selectedKey) || null;
+  const headerConfig = getHeaderConfig(selectedItem);
+
+  const isItemMode = !!selectedItem;
+  const headerTitle = isItemMode
+    ? selectedItem.type === "logo"
+      ? "Logo"
+      : selectedItem.label || "Untitled"
+    : "Navigation";
+  const headerSubtitle = isItemMode
+    ? `${selectedItem.type === "logo" ? "Logo" : "Menu Item"} · Col ${selectedItem.grid_column}${
+        selectedItem.column_span > 1
+          ? `–${selectedItem.grid_column + selectedItem.column_span - 1}`
+          : ""
+      }`
+    : `${items.length} items · 12 columns`;
 
   return (
     <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200">
-      {/* Top bar */}
-      <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">Grid Layout · 12 Columns</div>
-          <div className="text-[11px] text-neutral-400 mt-0.5">
-            {items.length} items · Click empty columns to add · Drag to reposition
-          </div>
+      {/* ── Gradient header (matches Mobile Menu style) ── */}
+      <div
+        className="relative flex items-center px-4 py-3.5 overflow-hidden"
+        style={{ background: headerConfig.gradient }}
+      >
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)" }}
+        />
+        <div
+          className="relative shrink-0 flex items-center justify-center"
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 10,
+            background: "rgba(255,255,255,0.4)",
+            backdropFilter: "blur(8px)",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
+          }}
+        >
+          {headerConfig.icon}
+        </div>
+        <div className="relative z-10 ml-2.5 min-w-0 flex-1">
+          <h3
+            className="text-[13px] font-semibold truncate"
+            style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
+          >
+            {headerTitle}
+          </h3>
+          <p className="text-[10px] mt-0.5" style={{ color: "rgba(0,0,0,0.38)" }}>
+            {headerSubtitle}
+          </p>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="relative z-10 flex items-center gap-3">
           {hasChanges && (
-            <span className="text-[11px] text-amber-500 font-medium">
-              Unsaved changes
-            </span>
+            <span className="text-[11px] text-amber-600 font-medium">Unsaved</span>
           )}
           <button
             onClick={handleSave}
             disabled={saving || !hasChanges}
-            className={`px-5 py-1.5 text-sm font-medium rounded-lg transition-all ${
+            className={`px-4 py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               saving || !hasChanges
-                ? "bg-neutral-100 text-neutral-400 cursor-not-allowed"
-                : "bg-[#076bff] text-white hover:bg-[#0559d4]"
+                ? "bg-white/40 text-neutral-400 cursor-not-allowed"
+                : "bg-white text-[#076bff] shadow-sm hover:shadow-md"
             }`}
           >
             {saving ? "Saving..." : "Save"}