@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,242 +1,242 @@
-"use client";
-
-import { useCallback } from "react";
-import type { NavItem, NavDesign, MobileNavDesign } from "../../../lib/sanity/types";
-import NavMobileLivePreview from "./NavMobileLivePreview";
-import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
-import {
-  Field,
-  TextInput,
-  SelectInput,
-  SegmentedControl,
-  RangeSlider,
-  CardSection,
-  Divider,
-} from "./NavSettingsFields";
-
-// ============================================
-// NavMobileSettings — standalone panel for mobile menu customization
-// Session 158: Independent mobile menu styles that are NOT affected
-// by page-level nav_color or parallax slide color overrides.
-// ============================================
-
-interface NavMobileSettingsProps {
-  design: MobileNavDesign;
-  /** Desktop nav design — needed for fallback values and preview */
-  desktopDesign: NavDesign;
-  /** Nav items — needed for preview */
-  items: NavItem[];
-  onChange: (design: MobileNavDesign) => void;
-  onSave: () => void;
-  saving: boolean;
-  hasChanges: boolean;
-}
-
-export default function NavMobileSettings({
-  design,
-  desktopDesign,
-  items,
-  onChange,
-  onSave,
-  saving,
-  hasChanges,
-}: NavMobileSettingsProps) {
-  const swatches = usePaletteSwatches();
-  const update = useCallback(
-    (partial: Partial<MobileNavDesign>) => onChange({ ...design, ...partial }),
-    [design, onChange]
-  );
-
-  // ── Icon components for card sections ──
-  const OverlayIcon = (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" 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>
-  );
-  const NavbarBarIcon = (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" />
-    </svg>
-  );
-
-  return (
-    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200 flex flex-col" style={{ minHeight: "calc(100vh - 180px)" }}>
-      {/* ── Gradient header (matching Desktop panel) ── */}
-      <div className="relative flex items-center px-4 py-3.5 overflow-hidden" style={{ background: "linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #ddd6fe 100%)" }}>
-        <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)" }}>
-          <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="5" y="2" width="14" height="20" rx="2" /><line x1="12" y1="18" x2="12.01" y2="18" />
-          </svg>
-        </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)" }}>
-            Mobile Menu
-          </h3>
-          <p className="text-[10px] mt-0.5" style={{ color: "rgba(0,0,0,0.38)" }}>
-            Independent from the desktop navbar
-          </p>
-        </div>
-        <div className="relative z-10 flex items-center gap-3">
-          {hasChanges && (
-            <span className="text-[11px] text-amber-600 font-medium">Unsaved</span>
-          )}
-          <button
-            onClick={onSave}
-            disabled={saving || !hasChanges}
-            className={`px-4 py-1.5 text-[11px] font-medium rounded-lg transition-all ${
-              saving || !hasChanges
-                ? "bg-white/40 text-neutral-400 cursor-not-allowed"
-                : "bg-white text-[#076bff] shadow-sm hover:shadow-md"
-            }`}
-          >
-            {saving ? "Saving..." : "Save"}
-          </button>
-        </div>
-      </div>
-
-      {/* Side-by-side: settings left, preview right — flex-1 fills remaining height */}
-      <div className="flex flex-1 min-h-0">
-        {/* Settings content */}
-        <div className="flex-1 min-w-0 py-2 border-r border-neutral-200 overflow-y-auto">
-          {/* ── Menu Overlay card ── */}
-          <CardSection title="Overlay" icon={OverlayIcon} iconBg="#ede9fe">
-            <Field label="BG">
-              <ColorSwatchPicker
-                value={design.overlay_bg || ""}
-                onChange={(v) => update({ overlay_bg: typeof v === "string" ? v : "" })}
-                swatches={swatches}
-              />
-            </Field>
-            <Field label="Text">
-              <ColorSwatchPicker
-                value={design.text_color || ""}
-                onChange={(v) => update({ text_color: typeof v === "string" ? v : "" })}
-                swatches={swatches}
-              />
-            </Field>
-            <Divider />
-            <Field label="Size">
-              <TextInput
-                value={design.font_size ?? 24}
-                onChange={(v) =>
-                  update({
-                    font_size: Math.max(12, Math.min(72, parseInt(v) || 24)),
-                  })
-                }
-                type="number"
-              />
-            </Field>
-            <Field label="Case">
-              <SelectInput
-                value={design.text_transform || "uppercase"}
-                onChange={(v) =>
-                  update({
-                    text_transform: v as MobileNavDesign["text_transform"],
-                  })
-                }
-                options={[
-                  { value: "uppercase", label: "AA" },
-                  { value: "capitalize", label: "Aa" },
-                  { value: "lowercase", label: "aa" },
-                  { value: "none", label: "—" },
-                ]}
-              />
-            </Field>
-            <Field label="Align">
-              <SegmentedControl
-                value={design.items_align || "center"}
-                onChange={(v) =>
-                  update({ items_align: v as MobileNavDesign["items_align"] })
-                }
-                options={[
-                  { value: "left", label: "Left" },
-                  { value: "center", label: "Center" },
-                  { value: "right", label: "Right" },
-                ]}
-              />
-            </Field>
-            <Divider />
-            <Field label="Gap">
-              <RangeSlider
-                value={design.items_gap ?? 32}
-                onChange={(v) => update({ items_gap: v })}
-                min={8}
-                max={80}
-                suffix="px"
-              />
-            </Field>
-          </CardSection>
-
-          {/* ── Navbar Bar card ── */}
-          <CardSection title="Top Bar" icon={NavbarBarIcon} iconBg="#dbeafe">
-            <Field label="BG">
-              <ColorSwatchPicker
-                value={design.navbar_bg || ""}
-                onChange={(v) => update({ navbar_bg: typeof v === "string" ? v : "" })}
-                swatches={swatches}
-              />
-            </Field>
-            {design.navbar_bg && (
-              <Field label="Opacity">
-                <RangeSlider
-                  value={design.navbar_bg_opacity ?? 100}
-                  onChange={(v) => update({ navbar_bg_opacity: v })}
-                  min={0}
-                  max={100}
-                  suffix="%"
-                />
-              </Field>
-            )}
-            <Field label="Icon">
-              <ColorSwatchPicker
-                value={design.hamburger_color || ""}
-                onChange={(v) => update({ hamburger_color: typeof v === "string" ? v : "" })}
-                swatches={swatches}
-              />
-            </Field>
-            <Divider />
-            <Field label="Pad H">
-              <RangeSlider
-                value={design.padding_h ?? 24}
-                onChange={(v) => update({ padding_h: v })}
-                min={0}
-                max={60}
-                suffix="px"
-              />
-            </Field>
-            <Field label="Pad V">
-              <RangeSlider
-                value={design.padding_v ?? 27}
-                onChange={(v) => update({ padding_v: v })}
-                min={0}
-                max={60}
-                suffix="px"
-              />
-            </Field>
-          </CardSection>
-
-          {/* Info notice — card style */}
-          <div className="mx-2.5 my-1 px-3 py-2.5 bg-blue-50/60 rounded-[10px] border border-blue-100">
-            <p className="text-[10px] text-blue-500 leading-relaxed">
-              <strong>Independent from page overrides.</strong> Page-level{" "}
-              <code className="bg-blue-100 px-1 rounded text-[9px]">nav_color</code>{" "}
-              and parallax color changes only affect the desktop navbar.
-            </p>
-          </div>
-
-          <div className="h-2" />
-        </div>
-
-        {/* Live preview — stretches full height */}
-        <div className="w-[340px] shrink-0 sticky top-0 self-stretch">
-          <NavMobileLivePreview
-            items={items}
-            design={desktopDesign}
-            mobileDesign={design}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useCallback } from "react";
+import type { NavItem, NavDesign, MobileNavDesign } from "../../../lib/sanity/types";
+import NavMobileLivePreview from "./NavMobileLivePreview";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  RangeSlider,
+  CardSection,
+  Divider,
+} from "./NavSettingsFields";
+
+// ============================================
+// NavMobileSettings — standalone panel for mobile menu customization
+// Session 158: Independent mobile menu styles that are NOT affected
+// by page-level nav_color or parallax slide color overrides.
+// ============================================
+
+interface NavMobileSettingsProps {
+  design: MobileNavDesign;
+  /** Desktop nav design — needed for fallback values and preview */
+  desktopDesign: NavDesign;
+  /** Nav items — needed for preview */
+  items: NavItem[];
+  onChange: (design: MobileNavDesign) => void;
+  onSave: () => void;
+  saving: boolean;
+  hasChanges: boolean;
+}
+
+export default function NavMobileSettings({
+  design,
+  desktopDesign,
+  items,
+  onChange,
+  onSave,
+  saving,
+  hasChanges,
+}: NavMobileSettingsProps) {
+  const swatches = usePaletteSwatches();
+  const update = useCallback(
+    (partial: Partial<MobileNavDesign>) => onChange({ ...design, ...partial }),
+    [design, onChange]
+  );
+
+  // ── Icon components for card sections ──
+  const OverlayIcon = (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" 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>
+  );
+  const NavbarBarIcon = (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" />
+    </svg>
+  );
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200 flex flex-col" style={{ minHeight: "calc(100vh - 180px)" }}>
+      {/* ── Gradient header (matching Desktop panel) ── */}
+      <div className="relative flex items-center px-4 py-3.5 overflow-hidden" style={{ background: "linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #ddd6fe 100%)" }}>
+        <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)" }}>
+          <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="5" y="2" width="14" height="20" rx="2" /><line x1="12" y1="18" x2="12.01" y2="18" />
+          </svg>
+        </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)" }}>
+            Mobile Menu
+          </h3>
+          <p className="text-[10px] mt-0.5" style={{ color: "rgba(0,0,0,0.38)" }}>
+            Independent from the desktop navbar
+          </p>
+        </div>
+        <div className="relative z-10 flex items-center gap-3">
+          {hasChanges && (
+            <span className="text-[11px] text-amber-600 font-medium">Unsaved</span>
+          )}
+          <button
+            onClick={onSave}
+            disabled={saving || !hasChanges}
+            className={`px-4 py-1.5 text-[11px] font-medium rounded-lg transition-all ${
+              saving || !hasChanges
+                ? "bg-white/40 text-neutral-400 cursor-not-allowed"
+                : "bg-white text-[#3580f9] shadow-sm hover:shadow-md"
+            }`}
+          >
+            {saving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+
+      {/* Side-by-side: settings left, preview right — flex-1 fills remaining height */}
+      <div className="flex flex-1 min-h-0">
+        {/* Settings content */}
+        <div className="flex-1 min-w-0 py-2 border-r border-neutral-200 overflow-y-auto">
+          {/* ── Menu Overlay card ── */}
+          <CardSection title="Overlay" icon={OverlayIcon} iconBg="#ede9fe">
+            <Field label="BG">
+              <ColorSwatchPicker
+                value={design.overlay_bg || ""}
+                onChange={(v) => update({ overlay_bg: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Field label="Text">
+              <ColorSwatchPicker
+                value={design.text_color || ""}
+                onChange={(v) => update({ text_color: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Divider />
+            <Field label="Size">
+              <TextInput
+                value={design.font_size ?? 24}
+                onChange={(v) =>
+                  update({
+                    font_size: Math.max(12, Math.min(72, parseInt(v) || 24)),
+                  })
+                }
+                type="number"
+              />
+            </Field>
+            <Field label="Case">
+              <SelectInput
+                value={design.text_transform || "uppercase"}
+                onChange={(v) =>
+                  update({
+                    text_transform: v as MobileNavDesign["text_transform"],
+                  })
+                }
+                options={[
+                  { value: "uppercase", label: "AA" },
+                  { value: "capitalize", label: "Aa" },
+                  { value: "lowercase", label: "aa" },
+                  { value: "none", label: "—" },
+                ]}
+              />
+            </Field>
+            <Field label="Align">
+              <SegmentedControl
+                value={design.items_align || "center"}
+                onChange={(v) =>
+                  update({ items_align: v as MobileNavDesign["items_align"] })
+                }
+                options={[
+                  { value: "left", label: "Left" },
+                  { value: "center", label: "Center" },
+                  { value: "right", label: "Right" },
+                ]}
+              />
+            </Field>
+            <Divider />
+            <Field label="Gap">
+              <RangeSlider
+                value={design.items_gap ?? 32}
+                onChange={(v) => update({ items_gap: v })}
+                min={8}
+                max={80}
+                suffix="px"
+              />
+            </Field>
+          </CardSection>
+
+          {/* ── Navbar Bar card ── */}
+          <CardSection title="Top Bar" icon={NavbarBarIcon} iconBg="#dbeafe">
+            <Field label="BG">
+              <ColorSwatchPicker
+                value={design.navbar_bg || ""}
+                onChange={(v) => update({ navbar_bg: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            {design.navbar_bg && (
+              <Field label="Opacity">
+                <RangeSlider
+                  value={design.navbar_bg_opacity ?? 100}
+                  onChange={(v) => update({ navbar_bg_opacity: v })}
+                  min={0}
+                  max={100}
+                  suffix="%"
+                />
+              </Field>
+            )}
+            <Field label="Icon">
+              <ColorSwatchPicker
+                value={design.hamburger_color || ""}
+                onChange={(v) => update({ hamburger_color: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Divider />
+            <Field label="Pad H">
+              <RangeSlider
+                value={design.padding_h ?? 24}
+                onChange={(v) => update({ padding_h: v })}
+                min={0}
+                max={60}
+                suffix="px"
+              />
+            </Field>
+            <Field label="Pad V">
+              <RangeSlider
+                value={design.padding_v ?? 27}
+                onChange={(v) => update({ padding_v: v })}
+                min={0}
+                max={60}
+                suffix="px"
+              />
+            </Field>
+          </CardSection>
+
+          {/* Info notice — card style */}
+          <div className="mx-2.5 my-1 px-3 py-2.5 bg-blue-50/60 rounded-[10px] border border-blue-100">
+            <p className="text-[10px] text-blue-500 leading-relaxed">
+              <strong>Independent from page overrides.</strong> Page-level{" "}
+              <code className="bg-blue-100 px-1 rounded text-[9px]">nav_color</code>{" "}
+              and parallax color changes only affect the desktop navbar.
+            </p>
+          </div>
+
+          <div className="h-2" />
+        </div>
+
+        {/* Live preview — stretches full height */}
+        <div className="w-[340px] shrink-0 sticky top-0 self-stretch">
+          <NavMobileLivePreview
+            items={items}
+            design={desktopDesign}
+            mobileDesign={design}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}