@morphika/andami 0.1.8 → 0.1.10

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

@@ -1,24 +1,42 @@
 "use client";
 
 import { useState, type ReactNode } from "react";
+import {
+  PositionIcon,
+  TypographyIcon,
+  AnimationIcon,
+  SpacingIcon,
+  ContentIcon,
+  LinkIcon,
+  GridIcon,
+  StyleIcon,
+  BackgroundIcon,
+} from "../../builder/editors/section-icons";
+
+// ── Nav viewport type for responsive overrides ──
+export type NavViewport = "desktop" | "tablet" | "phone";
 
 // ── Shared field components for NavBuilder settings panel ──
-// Matches admin page style: light theme, white cards, neutral borders
+// v2: Card-based sections, colored icons, builder-aligned styling
 
-// ── Field wrapper ──
+// ============================================
+// Field wrapper
+// ============================================
 
 export function Field({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <div className="flex items-center gap-3 py-1.5">
-      <label className="text-xs text-neutral-500 w-[72px] shrink-0 text-right">
+    <div className="flex items-center gap-2.5 py-[5px]">
+      <label className="text-[11px] text-neutral-400 w-[56px] min-w-[56px] shrink-0">
         {label}
       </label>
-      <div className="flex-1">{children}</div>
+      <div className="flex-1 min-w-0">{children}</div>
     </div>
   );
 }
 
-// ── Text input ──
+// ============================================
+// Text input
+// ============================================
 
 export function TextInput({
   value,
@@ -37,12 +55,14 @@ export function TextInput({
       value={value}
       onChange={(e) => onChange(e.target.value)}
       placeholder={placeholder}
-      className="w-full px-2.5 py-1.5 text-xs bg-white border border-neutral-200 rounded-lg text-neutral-900 outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors font-[inherit] placeholder:text-neutral-400"
+      className="w-full rounded-lg border border-transparent bg-white px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-neutral-50 focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)] font-[inherit] placeholder:text-neutral-400"
     />
   );
 }
 
-// ── Select input ──
+// ============================================
+// Select input
+// ============================================
 
 export function SelectInput({
   value,
@@ -58,7 +78,7 @@ export function SelectInput({
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full px-2.5 py-1.5 text-xs bg-white border border-neutral-200 rounded-lg text-neutral-900 outline-none appearance-none cursor-pointer pr-7 focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors font-[inherit]"
+        className="w-full rounded-lg border border-transparent bg-white px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none appearance-none cursor-pointer pr-7 transition-all hover:bg-neutral-50 focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)] font-[inherit]"
       >
         {options.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -81,7 +101,9 @@ export function SelectInput({
   );
 }
 
-// ── Segmented control ──
+// ============================================
+// Segmented control
+// ============================================
 
 export function SegmentedControl({
   value,
@@ -90,18 +112,18 @@ export function SegmentedControl({
 }: {
   value: string;
   onChange: (value: string) => void;
-  options: { value: string; label: string }[];
+  options: { value: string; label: string | ReactNode }[];
 }) {
   return (
-    <div className="flex bg-neutral-100 rounded-lg p-0.5">
+    <div className="flex bg-white rounded-lg p-0.5 border border-[#f0f0f0]">
       {options.map((opt) => (
         <button
-          key={opt.value}
+          key={String(opt.value)}
           onClick={() => onChange(opt.value)}
-          className={`flex-1 px-2 py-1.5 text-[11px] font-medium rounded-md transition-all ${
+          className={`flex-1 px-2 py-[5px] text-[10px] font-medium rounded-md transition-all flex items-center justify-center ${
             value === opt.value
-              ? "text-neutral-900 bg-white shadow-sm"
-              : "text-neutral-500 hover:text-neutral-700"
+              ? "text-neutral-900 bg-neutral-100 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
+              : "text-neutral-400 hover:text-neutral-600"
           }`}
         >
           {opt.label}
@@ -111,7 +133,9 @@ export function SegmentedControl({
   );
 }
 
-// ── Toggle switch ──
+// ============================================
+// Toggle switch
+// ============================================
 
 export function Toggle({
   value,
@@ -136,7 +160,9 @@ export function Toggle({
   );
 }
 
-// ── Range slider ──
+// ============================================
+// Range slider
+// ============================================
 
 export function RangeSlider({
   value,
@@ -162,14 +188,72 @@ export function RangeSlider({
         className="flex-1"
         style={{ accentColor: "#076bff" }}
       />
-      <span className="text-[10px] text-neutral-500 w-8 text-right tabular-nums">
+      <span className="text-[10px] text-neutral-400 w-9 text-right tabular-nums">
         {value}{suffix || ""}
       </span>
     </div>
   );
 }
 
-// ── Collapsible section ──
+// ============================================
+// Card section — collapsible with colored icon
+// ============================================
+
+export function CardSection({
+  title,
+  icon,
+  iconBg,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  iconBg: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      className="mx-2.5 my-1 rounded-[10px] bg-[#fafafa] border border-transparent transition-colors hover:border-[#f0f0f0]"
+    >
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full px-3 py-2.5 cursor-pointer select-none hover:bg-black/[0.01] rounded-[10px] transition-colors"
+      >
+        <div
+          className="w-[26px] h-[26px] rounded-[7px] flex items-center justify-center shrink-0"
+          style={{ background: iconBg }}
+        >
+          {icon}
+        </div>
+        <span className="text-[11px] font-semibold text-neutral-600 tracking-[0.2px]">
+          {title}
+        </span>
+        <span
+          className="ml-auto text-neutral-400 transition-transform"
+          style={{ transform: open ? "rotate(180deg)" : "rotate(0)" }}
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M3 4.5l3 3 3-3"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      </button>
+      {open && <div className="px-3 pb-3 pt-0.5">{children}</div>}
+    </div>
+  );
+}
+
+// ============================================
+// Legacy Section — kept for NavItemSettings compatibility
+// ============================================
 
 export function Section({
   title,
@@ -209,7 +293,17 @@ export function Section({
   );
 }
 
-// ── Color input (hex) with swatch preview ──
+// ============================================
+// Thin divider line
+// ============================================
+
+export function Divider() {
+  return <div className="h-px bg-[#f0f0f0] my-1.5" />;
+}
+
+// ============================================
+// Color input (hex) with swatch preview
+// ============================================
 
 export function ColorInput({
   value,
@@ -246,3 +340,175 @@ export function ColorInput({
     </div>
   );
 }
+
+// ============================================
+// Card section icon presets — re-exported from centralized section-icons.tsx
+// Session 163: Unified icon system. All icons now live in section-icons.tsx.
+// ============================================
+export {
+  PositionIcon,
+  TypographyIcon,
+  AnimationIcon,
+  SpacingIcon,
+  ContentIcon,
+  LinkIcon,
+  GridIcon,
+  StyleIcon,
+  BackgroundIcon,
+};
+
+// ============================================
+// Viewport Switcher — segmented control for Desktop / Tablet / Phone
+// ============================================
+
+const viewportOptions: { value: NavViewport; icon: ReactNode; label: string }[] = [
+  {
+    value: "desktop",
+    label: "Desktop",
+    icon: (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
+      </svg>
+    ),
+  },
+  {
+    value: "tablet",
+    label: "Tablet",
+    icon: (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="4" y="2" width="16" height="20" rx="2" /><line x1="12" y1="18" x2="12" y2="18" />
+      </svg>
+    ),
+  },
+  {
+    value: "phone",
+    label: "Phone",
+    icon: (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="5" y="2" width="14" height="20" rx="2" /><line x1="12" y1="18" x2="12" y2="18" />
+      </svg>
+    ),
+  },
+];
+
+export function ViewportSwitcher({
+  value,
+  onChange,
+}: {
+  value: NavViewport;
+  onChange: (v: NavViewport) => void;
+}) {
+  return (
+    <div className="flex bg-white rounded-lg p-0.5 border border-[#f0f0f0] mb-2">
+      {viewportOptions.map((opt) => {
+        const isActive = value === opt.value;
+        const isNonDesktop = opt.value !== "desktop";
+        return (
+          <button
+            key={opt.value}
+            onClick={() => onChange(opt.value)}
+            title={opt.label}
+            className={`flex-1 px-2 py-[5px] text-[10px] font-medium rounded-md transition-all flex items-center justify-center gap-1 ${
+              isActive
+                ? isNonDesktop
+                  ? "text-[#076bff] bg-blue-50 shadow-[0_1px_2px_rgba(7,107,255,0.08)]"
+                  : "text-neutral-900 bg-neutral-100 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
+                : "text-neutral-400 hover:text-neutral-600"
+            }`}
+          >
+            {opt.icon}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================
+// Viewport Badge — shows which viewport is being edited
+// ============================================
+
+export function NavViewportBadge({ viewport }: { viewport: NavViewport }) {
+  if (viewport === "desktop") return null;
+
+  const color = viewport === "tablet" ? "#076bff" : "#7c3aed";
+  const bgColor = viewport === "tablet" ? "rgba(7, 107, 255, 0.06)" : "rgba(124, 58, 237, 0.06)";
+  const label = viewport === "tablet" ? "Tablet" : "Phone";
+
+  return (
+    <div
+      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md mb-2 text-[10px]"
+      style={{ background: bgColor, color }}
+    >
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+      <span>
+        Editing <strong>{label}</strong> overrides &middot; empty fields inherit desktop
+      </span>
+    </div>
+  );
+}
+
+// ============================================
+// Responsive Field — wraps a field with inherited/overridden state
+// ============================================
+
+export function ResponsiveField({
+  label,
+  viewport,
+  isOverridden,
+  onReset,
+  children,
+}: {
+  label: string;
+  viewport: NavViewport;
+  isOverridden: boolean;
+  onReset?: () => void;
+  children: ReactNode;
+}) {
+  // Desktop mode — render as a normal field
+  if (viewport === "desktop") {
+    return <Field label={label}>{children}</Field>;
+  }
+
+  return (
+    <div className="flex items-center gap-2.5 py-[5px]">
+      <div className="w-[56px] min-w-[56px] shrink-0">
+        <label
+          className={`text-[11px] block ${
+            isOverridden ? "text-[#076bff] font-medium" : "text-neutral-400"
+          }`}
+        >
+          {label}
+        </label>
+        {isOverridden ? (
+          <span className="text-[8px] text-[#076bff]/60 uppercase tracking-[0.5px]">
+            override
+          </span>
+        ) : (
+          <span className="text-[8px] text-neutral-300 uppercase tracking-[0.5px]">
+            inherited
+          </span>
+        )}
+      </div>
+      <div
+        className="flex-1 min-w-0 transition-opacity"
+        style={{ opacity: isOverridden ? 1 : 0.5 }}
+      >
+        {children}
+      </div>
+      {isOverridden && onReset && (
+        <button
+          onClick={onReset}
+          className="shrink-0 text-[#076bff]/60 hover:text-[#076bff] transition-colors"
+          title="Reset to desktop value"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -1,127 +1,137 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import type { NavItem, NavDesign, PageListItem } from "../../../lib/sanity/types";
-import NavGeneralSettings from "./NavGeneralSettings";
-import NavItemSettings from "./NavItemSettings";
-
-type SettingsTab = "settings" | "layout";
-
-interface NavSettingsPanelProps {
-  selectedItem: NavItem | null;
-  items: NavItem[];
-  design: NavDesign;
-  onDesignChange: (design: NavDesign) => void;
-  onUpdateItem: (updated: NavItem) => void;
-  pages: PageListItem[];
-  fonts: string[];
-}
-
-// ── Tab button ──
-
-function TabButton({
-  active,
-  label,
-  onClick,
-}: {
-  active: boolean;
-  label: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`px-4 py-2 text-xs font-medium transition-colors border-b-2 -mb-px ${
-        active
-          ? "text-neutral-900 border-[#076bff]"
-          : "text-neutral-400 border-transparent hover:text-neutral-600"
-      }`}
-    >
-      {label}
-    </button>
-  );
-}
-
-// ── Main panel — renders below the grid as a horizontal block ──
-
-export default function NavSettingsPanel({
-  selectedItem,
-  items,
-  design,
-  onDesignChange,
-  onUpdateItem,
-  pages,
-  fonts,
-}: NavSettingsPanelProps) {
-  const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
-  const prevKeyRef = useRef(selectedItem?._key);
-
-  // Reset to settings tab when selection changes
-  useEffect(() => {
-    if (selectedItem?._key !== prevKeyRef.current) {
-      prevKeyRef.current = selectedItem?._key;
-      setActiveTab("settings");
-    }
-  }, [selectedItem?._key]);
-
-  const isItemMode = !!selectedItem;
-  const panelTitle = isItemMode
-    ? selectedItem.type === "logo"
-      ? "Logo"
-      : selectedItem.label || "Untitled"
-    : "Navigation";
-  const panelSubtitle = 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-neutral-50/50">
-      {/* Header + Tabs row */}
-      <div className="flex items-center gap-6 px-5 border-b border-neutral-200">
-        <div className="py-3 pr-4 border-r border-neutral-200">
-          <div className="text-[13px] font-semibold text-neutral-900 truncate">
-            {panelTitle}
-          </div>
-          <div className="text-[10px] text-neutral-400 mt-0.5">{panelSubtitle}</div>
-        </div>
-        <div className="flex gap-0.5">
-          <TabButton
-            active={activeTab === "settings"}
-            label="Settings"
-            onClick={() => setActiveTab("settings")}
-          />
-          <TabButton
-            active={activeTab === "layout"}
-            label="Layout"
-            onClick={() => setActiveTab("layout")}
-          />
-        </div>
-      </div>
-
-      {/* Content — constrained width for readability */}
-      <div className="px-5 py-4 max-w-xl">
-        {isItemMode ? (
-          <NavItemSettings
-            item={selectedItem}
-            items={items}
-            activeTab={activeTab}
-            onUpdate={onUpdateItem}
-            pages={pages}
-            fonts={fonts}
-          />
-        ) : (
-          <NavGeneralSettings
-            design={design}
-            activeTab={activeTab}
-            onChange={onDesignChange}
-            fonts={fonts}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import type { NavItem, NavDesign, PageListItem } from "../../../lib/sanity/types";
+import NavGeneralSettings from "./NavGeneralSettings";
+import NavItemSettings from "./NavItemSettings";
+
+type SettingsTab = "settings" | "layout" | "animation";
+
+interface NavSettingsPanelProps {
+  selectedItem: NavItem | null;
+  items: NavItem[];
+  design: NavDesign;
+  onDesignChange: (design: NavDesign) => void;
+  onUpdateItem: (updated: NavItem) => void;
+  pages: PageListItem[];
+  fonts: string[];
+}
+
+// ── Tab definitions ──
+
+const TAB_ICON_SETTINGS = (
+  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>
+);
+
+const TAB_ICON_LAYOUT = (
+  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
+    <rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
+  </svg>
+);
+
+const TAB_ICON_ANIMATION = (
+  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M5 12h14" /><path d="M12 5l7 7-7 7" />
+  </svg>
+);
+
+// ── Main panel ──
+
+export default function NavSettingsPanel({
+  selectedItem,
+  items,
+  design,
+  onDesignChange,
+  onUpdateItem,
+  pages,
+  fonts,
+}: NavSettingsPanelProps) {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
+  const prevKeyRef = useRef(selectedItem?._key);
+
+  // Reset to settings tab when selection changes
+  useEffect(() => {
+    if (selectedItem?._key !== prevKeyRef.current) {
+      prevKeyRef.current = selectedItem?._key;
+      setActiveTab("settings");
+    }
+  }, [selectedItem?._key]);
+
+  const isItemMode = !!selectedItem;
+
+  // For items, animation tab is not applicable — only Settings + Layout
+  const tabs: { id: SettingsTab; label: string; icon: React.ReactNode }[] = isItemMode
+    ? [
+        { id: "settings", label: "Settings", icon: TAB_ICON_SETTINGS },
+        { id: "layout", label: "Layout", icon: TAB_ICON_LAYOUT },
+      ]
+    : [
+        { id: "settings", label: "Settings", icon: TAB_ICON_SETTINGS },
+        { id: "layout", label: "Layout", icon: TAB_ICON_LAYOUT },
+        { id: "animation", label: "Anim", icon: TAB_ICON_ANIMATION },
+      ];
+
+  // Fall back to settings if the current tab doesn't exist in the current set
+  const validTab = tabs.some((t) => t.id === activeTab) ? activeTab : "settings";
+
+  const tabCount = tabs.length;
+  const activeIndex = tabs.findIndex((t) => t.id === validTab);
+  const pillIndex = activeIndex >= 0 ? activeIndex : 0;
+
+  return (
+    <div className="bg-white">
+      {/* ── Animated pill tabs ── */}
+      <div className="px-3 py-2 border-b border-[#f0f0f0] bg-[#fafafa]">
+        <div className="relative flex items-center bg-[#f0f0f0] rounded-lg p-[3px]">
+          {/* Sliding pill background */}
+          <div
+            className="absolute top-[3px] bottom-[3px] rounded-md bg-white shadow-sm border border-[#e5e5e5] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            style={{
+              width: `calc((100% - 6px) / ${tabCount})`,
+              left: `calc(${pillIndex} * (100% - 6px) / ${tabCount} + 3px)`,
+            }}
+          />
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`relative z-10 flex-1 flex items-center justify-center gap-1 py-1.5 rounded-md transition-colors duration-200 text-[11px] font-medium ${
+                validTab === tab.id
+                  ? "text-neutral-900"
+                  : "text-neutral-400 hover:text-neutral-500"
+              }`}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Panel body ── */}
+      <div className="py-1">
+        {isItemMode ? (
+          <NavItemSettings
+            item={selectedItem}
+            items={items}
+            activeTab={validTab === "animation" ? "settings" : validTab}
+            onUpdate={onUpdateItem}
+            pages={pages}
+            fonts={fonts}
+          />
+        ) : (
+          <NavGeneralSettings
+            design={design}
+            activeTab={validTab}
+            onChange={onDesignChange}
+            fonts={fonts}
+          />
+        )}
+      </div>
+    </div>
+  );
+}