@morphika/andami 0.1.8 → 0.1.10

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

@@ -1,271 +1,521 @@
-"use client";
-
-import type { NavDesign, ColorField } from "../../../lib/sanity/types";
-import { getSiteConfig } from "../../../lib/config";
-import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
-import {
-  Field,
-  TextInput,
-  SelectInput,
-  SegmentedControl,
-  Toggle,
-  RangeSlider,
-  Section,
-} from "./NavSettingsFields";
-
-interface NavGeneralSettingsProps {
-  design: NavDesign;
-  activeTab: "settings" | "layout";
-  onChange: (design: NavDesign) => void;
-  fonts: string[];
-}
-
-export default function NavGeneralSettings({
-  design,
-  activeTab,
-  onChange,
-  fonts,
-}: NavGeneralSettingsProps) {
-  const swatches = usePaletteSwatches();
-
-  const update = (partial: Partial<NavDesign>) =>
-    onChange({ ...design, ...partial });
-
-  if (activeTab === "settings") {
-    return (
-      <>
-        <Section title="POSITION">
-          <Field label="Position">
-            <SegmentedControl
-              value={design.position || "fixed"}
-              onChange={(v) => update({ position: v as NavDesign["position"] })}
-              options={[
-                { value: "fixed", label: "Fixed" },
-                { value: "sticky", label: "Sticky" },
-                { value: "static", label: "Static" },
-              ]}
-            />
-          </Field>
-          <Field label="Hide scroll">
-            <Toggle
-              value={design.hide_on_scroll ?? true}
-              onChange={(v) => update({ hide_on_scroll: v })}
-            />
-          </Field>
-        </Section>
-
-        <Section title="TYPOGRAPHY">
-          <Field label="Font">
-            <SelectInput
-              value={design.font_family || ""}
-              onChange={(v) => update({ font_family: v })}
-              options={[
-                { value: "", label: `Default (${getSiteConfig().typography.defaultFont})` },
-                ...fonts.map((f) => ({ value: f, label: f })),
-              ]}
-            />
-          </Field>
-          <Field label="Size">
-            <TextInput
-              value={design.font_size ?? 14}
-              onChange={(v) => update({ font_size: Math.max(8, Math.min(48, parseInt(v) || 14)) })}
-              type="number"
-            />
-          </Field>
-          <Field label="Weight">
-            <SelectInput
-              value={design.font_weight || "400"}
-              onChange={(v) => update({ font_weight: v })}
-              options={[
-                { value: "100", label: "100 · Thin" },
-                { value: "200", label: "200 · Extra Light" },
-                { value: "300", label: "300 · Light" },
-                { value: "400", label: "400 · Normal" },
-                { value: "500", label: "500 · Medium" },
-                { value: "600", label: "600 · Semi Bold" },
-                { value: "700", label: "700 · Bold" },
-                { value: "800", label: "800 · Extra Bold" },
-                { value: "900", label: "900 · Black" },
-              ]}
-            />
-          </Field>
-          <Field label="Transform">
-            <SelectInput
-              value={design.text_transform || "uppercase"}
-              onChange={(v) => update({ text_transform: v as NavDesign["text_transform"] })}
-              options={[
-                { value: "uppercase", label: "UPPERCASE" },
-                { value: "none", label: "None" },
-                { value: "lowercase", label: "lowercase" },
-                { value: "capitalize", label: "Capitalize" },
-              ]}
-            />
-          </Field>
-          <Field label="Align">
-            <SegmentedControl
-              value={design.text_align || "left"}
-              onChange={(v) => update({ text_align: v as NavDesign["text_align"] })}
-              options={[
-                { value: "left", label: "Left" },
-                { value: "center", label: "Center" },
-                { value: "right", label: "Right" },
-              ]}
-            />
-          </Field>
-          <Field label="V. Align">
-            <SegmentedControl
-              value={design.vertical_align || "top"}
-              onChange={(v) => update({ vertical_align: v as NavDesign["vertical_align"] })}
-              options={[
-                { value: "top", label: "Top" },
-                { value: "middle", label: "Middle" },
-                { value: "bottom", label: "Bottom" },
-              ]}
-            />
-          </Field>
-          <Field label="Color">
-            <ColorSwatchPicker
-              value={design.color || ""}
-              onChange={(v) => update({ color: typeof v === "string" ? v : "" })}
-              swatches={swatches}
-            />
-          </Field>
-        </Section>
-
-        <Section title="ANIMATION">
-          <Field label="Entrance">
-            <SelectInput
-              value={design.entrance_animation || ""}
-              onChange={(v) => update({ entrance_animation: v as NavDesign["entrance_animation"] })}
-              options={[
-                { value: "", label: "None" },
-                { value: "fade-in", label: "Fade In" },
-                { value: "slide-down", label: "Slide Down" },
-                { value: "blur-in", label: "Blur In" },
-              ]}
-            />
-          </Field>
-          {design.entrance_animation && (
-            <>
-              <Field label="Duration">
-                <RangeSlider
-                  value={design.entrance_duration ?? 600}
-                  onChange={(v) => update({ entrance_duration: v })}
-                  min={200}
-                  max={5000}
-                  suffix="ms"
-                />
-              </Field>
-              <Field label="Delay">
-                <RangeSlider
-                  value={design.entrance_delay ?? 0}
-                  onChange={(v) => update({ entrance_delay: v })}
-                  min={0}
-                  max={5000}
-                  suffix="ms"
-                />
-              </Field>
-              <Field label="Stagger">
-                <Toggle
-                  value={design.entrance_stagger ?? false}
-                  onChange={(v) => update({ entrance_stagger: v })}
-                />
-              </Field>
-              {design.entrance_stagger && (
-                <Field label="Stagger delay">
-                  <RangeSlider
-                    value={design.entrance_stagger_delay ?? 80}
-                    onChange={(v) => update({ entrance_stagger_delay: v })}
-                    min={20}
-                    max={300}
-                    suffix="ms"
-                  />
-                </Field>
-              )}
-            </>
-          )}
-        </Section>
-
-        <Section title="SPACING">
-          <Field label="Pad H">
-            <RangeSlider
-              value={design.padding_h ?? 24}
-              onChange={(v) => update({ padding_h: v })}
-              min={0}
-              max={120}
-              suffix="px"
-            />
-          </Field>
-          <Field label="Pad V">
-            <RangeSlider
-              value={design.padding_v ?? 27}
-              onChange={(v) => update({ padding_v: v })}
-              min={0}
-              max={80}
-              suffix="px"
-            />
-          </Field>
-          <Field label="Margin H">
-            <RangeSlider
-              value={design.margin_h ?? 0}
-              onChange={(v) => update({ margin_h: v })}
-              min={0}
-              max={120}
-              suffix="px"
-            />
-          </Field>
-          <Field label="Margin V">
-            <RangeSlider
-              value={design.margin_v ?? 0}
-              onChange={(v) => update({ margin_v: v })}
-              min={0}
-              max={80}
-              suffix="px"
-            />
-          </Field>
-          <Field label="Items gap">
-            <RangeSlider
-              value={design.items_gap ?? 32}
-              onChange={(v) => update({ items_gap: v })}
-              min={4}
-              max={80}
-              suffix="px"
-            />
-          </Field>
-        </Section>
-      </>
-    );
-  }
-
-  // Layout tab
-  return (
-    <>
-      <Section title="BACKGROUND">
-        <Field label="Color">
-          <ColorSwatchPicker
-            value={design.background_color || ""}
-            onChange={(v) => update({ background_color: typeof v === "string" ? v : "" })}
-            swatches={swatches}
-          />
-        </Field>
-        {design.background_color && (
-          <Field label="Opacity">
-            <RangeSlider
-              value={design.background_opacity ?? 100}
-              onChange={(v) => update({ background_opacity: v })}
-              min={0}
-              max={100}
-              suffix="%"
-            />
-          </Field>
-        )}
-        <Field label="Blur">
-          <Toggle
-            value={design.backdrop_blur ?? false}
-            onChange={(v) => update({ backdrop_blur: v })}
-          />
-        </Field>
-      </Section>
-    </>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import type { NavDesign, NavDesignResponsiveOverride } from "../../../lib/sanity/types";
+import { getSiteConfig } from "../../../lib/config";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  Toggle,
+  RangeSlider,
+  CardSection,
+  Divider,
+  PositionIcon,
+  TypographyIcon,
+  AnimationIcon,
+  SpacingIcon,
+  BackgroundIcon,
+  ViewportSwitcher,
+  NavViewportBadge,
+  ResponsiveField,
+  type NavViewport,
+} from "./NavSettingsFields";
+
+// ── Responsive helpers ──
+
+/** Read a responsive-overridable field value for the given viewport.
+ *  Desktop always returns the top-level design value.
+ *  Non-desktop returns the viewport override (or undefined if inherited). */
+function getResponsiveValue<K extends keyof NavDesignResponsiveOverride>(
+  design: NavDesign,
+  viewport: NavViewport,
+  field: K,
+): NavDesignResponsiveOverride[K] | undefined {
+  if (viewport === "desktop") return design[field as keyof NavDesign] as NavDesignResponsiveOverride[K];
+  return design.responsive?.[viewport]?.[field] ?? undefined;
+}
+
+/** Write a responsive-overridable field value for the given viewport.
+ *  Desktop writes to the top-level field. Non-desktop writes into the
+ *  responsive.[viewport] object. Pass `undefined` to clear an override. */
+function setResponsiveValue<K extends keyof NavDesignResponsiveOverride>(
+  design: NavDesign,
+  viewport: NavViewport,
+  field: K,
+  value: NavDesignResponsiveOverride[K] | undefined,
+): NavDesign {
+  if (viewport === "desktop") return { ...design, [field]: value };
+  const vpOverrides = { ...(design.responsive?.[viewport] ?? {}) };
+  if (value === undefined || value === null) {
+    delete vpOverrides[field];
+  } else {
+    (vpOverrides as Record<string, unknown>)[field] = value;
+  }
+  return {
+    ...design,
+    responsive: { ...(design.responsive ?? {}), [viewport]: vpOverrides },
+  };
+}
+
+/** Check if a field is overridden (has a non-null value) for this viewport */
+function isFieldOverridden<K extends keyof NavDesignResponsiveOverride>(
+  design: NavDesign,
+  viewport: NavViewport,
+  field: K,
+): boolean {
+  if (viewport === "desktop") return false;
+  const val = design.responsive?.[viewport]?.[field];
+  return val !== undefined && val !== null;
+}
+
+// ── Alignment icon SVGs for segmented controls ──
+
+const AlignLeftIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="6" x2="15" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="17" y2="18" />
+  </svg>
+);
+const AlignCenterIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="5" y1="6" x2="19" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="4" y1="18" x2="20" y2="18" />
+  </svg>
+);
+const AlignRightIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="9" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="7" y1="18" x2="21" y2="18" />
+  </svg>
+);
+const VAlignTopIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="3" x2="12" y2="15" /><polyline points="8 7 12 3 16 7" /><line x1="4" y1="21" x2="20" y2="21" />
+  </svg>
+);
+const VAlignMiddleIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="12" x2="8" y2="12" /><line x1="16" y1="12" x2="20" y2="12" /><rect x="9" y="6" width="6" height="12" rx="1" />
+  </svg>
+);
+const VAlignBottomIcon = (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="9" x2="12" y2="21" /><polyline points="16 17 12 21 8 17" /><line x1="4" y1="3" x2="20" y2="3" />
+  </svg>
+);
+
+interface NavGeneralSettingsProps {
+  design: NavDesign;
+  activeTab: "settings" | "layout" | "animation";
+  onChange: (design: NavDesign) => void;
+  fonts: string[];
+}
+
+export default function NavGeneralSettings({
+  design,
+  activeTab,
+  onChange,
+  fonts,
+}: NavGeneralSettingsProps) {
+  const swatches = usePaletteSwatches();
+  const [typoViewport, setTypoViewport] = useState<NavViewport>("desktop");
+  const [spacingViewport, setSpacingViewport] = useState<NavViewport>("desktop");
+
+  const update = (partial: Partial<NavDesign>) =>
+    onChange({ ...design, ...partial });
+
+  /** Update a responsive-overridable field respecting the current viewport */
+  const updateResponsive = (
+    viewport: NavViewport,
+    field: keyof NavDesignResponsiveOverride,
+    value: NavDesignResponsiveOverride[keyof NavDesignResponsiveOverride],
+  ) => onChange(setResponsiveValue(design, viewport, field, value));
+
+  /** Reset a viewport override back to inherited */
+  const resetResponsive = (
+    viewport: NavViewport,
+    field: keyof NavDesignResponsiveOverride,
+  ) => onChange(setResponsiveValue(design, viewport, field, undefined));
+
+  /** Get the display value: viewport override if set, else desktop fallback */
+  const getDisplay = <K extends keyof NavDesignResponsiveOverride>(
+    viewport: NavViewport,
+    field: K,
+    fallback: NonNullable<NavDesignResponsiveOverride[K]>,
+  ): NonNullable<NavDesignResponsiveOverride[K]> => {
+    const vpVal = getResponsiveValue(design, viewport, field);
+    if (vpVal !== undefined && vpVal !== null) return vpVal as NonNullable<NavDesignResponsiveOverride[K]>;
+    // Inherit from desktop
+    if (viewport !== "desktop") {
+      const desktopVal = design[field as keyof NavDesign];
+      if (desktopVal !== undefined && desktopVal !== null) return desktopVal as NonNullable<NavDesignResponsiveOverride[K]>;
+    }
+    return fallback;
+  };
+
+  // ── Settings tab ── (2-col grid on wide screens, 1-col on narrow)
+  if (activeTab === "settings") {
+    return (
+      <div className="grid grid-cols-1 min-[640px]:grid-cols-2 gap-0">
+        {/* Left column group */}
+        <div>
+        {/* Position card */}
+        <CardSection title="Position" icon={<PositionIcon />} iconBg="#ede9fe">
+          <Field label="Mode">
+            <SegmentedControl
+              value={design.position || "fixed"}
+              onChange={(v) => update({ position: v as NavDesign["position"] })}
+              options={[
+                { value: "fixed", label: "Fixed" },
+                { value: "sticky", label: "Sticky" },
+                { value: "static", label: "Static" },
+              ]}
+            />
+          </Field>
+          <Field label="Hide">
+            <div className="flex items-center gap-2">
+              <Toggle
+                value={design.hide_on_scroll ?? true}
+                onChange={(v) => update({ hide_on_scroll: v })}
+              />
+              <span className="text-[10px] text-neutral-400">on scroll</span>
+            </div>
+          </Field>
+        </CardSection>
+
+        {/* Typography card — responsive per viewport */}
+        <CardSection title="Typography" icon={<TypographyIcon />} iconBg="#dbeafe">
+          <ViewportSwitcher value={typoViewport} onChange={setTypoViewport} />
+          <NavViewportBadge viewport={typoViewport} />
+
+          {/* Font family — desktop only (not in responsive overrides) */}
+          {typoViewport === "desktop" && (
+            <Field label="Font">
+              <SelectInput
+                value={design.font_family || ""}
+                onChange={(v) => update({ font_family: v })}
+                options={[
+                  { value: "", label: `Default (${getSiteConfig().typography.defaultFont})` },
+                  ...fonts.map((f) => ({ value: f, label: f })),
+                ]}
+              />
+            </Field>
+          )}
+
+          <ResponsiveField
+            label="Size"
+            viewport={typoViewport}
+            isOverridden={isFieldOverridden(design, typoViewport, "font_size") || isFieldOverridden(design, typoViewport, "font_weight")}
+            onReset={() => { resetResponsive(typoViewport, "font_size"); resetResponsive(typoViewport, "font_weight"); }}
+          >
+            <div className="grid grid-cols-2 gap-1.5">
+              <TextInput
+                value={getDisplay(typoViewport, "font_size", 14)}
+                onChange={(v) => updateResponsive(typoViewport, "font_size", Math.max(8, Math.min(48, parseInt(v) || 14)))}
+                type="number"
+              />
+              <SelectInput
+                value={getDisplay(typoViewport, "font_weight", "400")}
+                onChange={(v) => updateResponsive(typoViewport, "font_weight", v)}
+                options={[
+                  { value: "100", label: "Thin" },
+                  { value: "200", label: "Extra Light" },
+                  { value: "300", label: "Light" },
+                  { value: "400", label: "Normal" },
+                  { value: "500", label: "Medium" },
+                  { value: "600", label: "Semi Bold" },
+                  { value: "700", label: "Bold" },
+                  { value: "800", label: "Extra Bold" },
+                  { value: "900", label: "Black" },
+                ]}
+              />
+            </div>
+          </ResponsiveField>
+
+          <ResponsiveField
+            label="Case"
+            viewport={typoViewport}
+            isOverridden={isFieldOverridden(design, typoViewport, "text_transform")}
+            onReset={() => resetResponsive(typoViewport, "text_transform")}
+          >
+            <SegmentedControl
+              value={getDisplay(typoViewport, "text_transform", "uppercase")}
+              onChange={(v) => updateResponsive(typoViewport, "text_transform", v as NavDesignResponsiveOverride["text_transform"])}
+              options={[
+                { value: "uppercase", label: "AA" },
+                { value: "capitalize", label: "Aa" },
+                { value: "lowercase", label: "aa" },
+                { value: "none", label: "—" },
+              ]}
+            />
+          </ResponsiveField>
+
+          <Divider />
+
+          <ResponsiveField
+            label="Align"
+            viewport={typoViewport}
+            isOverridden={isFieldOverridden(design, typoViewport, "text_align")}
+            onReset={() => resetResponsive(typoViewport, "text_align")}
+          >
+            <SegmentedControl
+              value={getDisplay(typoViewport, "text_align", "left")}
+              onChange={(v) => updateResponsive(typoViewport, "text_align", v as NavDesignResponsiveOverride["text_align"])}
+              options={[
+                { value: "left", label: AlignLeftIcon },
+                { value: "center", label: AlignCenterIcon },
+                { value: "right", label: AlignRightIcon },
+              ]}
+            />
+          </ResponsiveField>
+
+          <ResponsiveField
+            label="V. Align"
+            viewport={typoViewport}
+            isOverridden={isFieldOverridden(design, typoViewport, "vertical_align")}
+            onReset={() => resetResponsive(typoViewport, "vertical_align")}
+          >
+            <SegmentedControl
+              value={getDisplay(typoViewport, "vertical_align", "top")}
+              onChange={(v) => updateResponsive(typoViewport, "vertical_align", v as NavDesignResponsiveOverride["vertical_align"])}
+              options={[
+                { value: "top", label: VAlignTopIcon },
+                { value: "middle", label: VAlignMiddleIcon },
+                { value: "bottom", label: VAlignBottomIcon },
+              ]}
+            />
+          </ResponsiveField>
+
+          <Divider />
+
+          {/* Color — desktop only (global, not responsive) */}
+          {typoViewport === "desktop" && (
+            <Field label="Color">
+              <ColorSwatchPicker
+                value={design.color || ""}
+                onChange={(v) => update({ color: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+          )}
+        </CardSection>
+        </div>
+
+        {/* Right column group */}
+        <div>
+        {/* Spacing card — responsive per viewport */}
+        <CardSection title="Spacing" icon={<SpacingIcon />} iconBg="#fef3c7">
+          <ViewportSwitcher value={spacingViewport} onChange={setSpacingViewport} />
+          <NavViewportBadge viewport={spacingViewport} />
+
+          {/* Box model visual */}
+          <div className="relative border border-dashed border-neutral-200 rounded-lg p-4 mb-2">
+            <div className="absolute top-1 left-1/2 -translate-x-1/2 text-[8px] text-neutral-300 uppercase tracking-[1px]">
+              margin
+            </div>
+            <div className="border border-blue-100 rounded-md p-3 bg-blue-50/30 relative">
+              <div className="absolute top-0.5 left-1/2 -translate-x-1/2 text-[8px] text-blue-300 uppercase tracking-[1px]">
+                padding
+              </div>
+              <div className="bg-blue-200/30 rounded h-3 mt-1" />
+              <div className="grid grid-cols-2 gap-1.5 mt-2">
+                <div className="text-center">
+                  <div className="text-[8px] text-blue-300 mb-0.5">H</div>
+                  <ResponsiveField
+                    label=""
+                    viewport={spacingViewport}
+                    isOverridden={isFieldOverridden(design, spacingViewport, "padding_h")}
+                    onReset={() => resetResponsive(spacingViewport, "padding_h")}
+                  >
+                    <TextInput
+                      value={getDisplay(spacingViewport, "padding_h", 24)}
+                      onChange={(v) => updateResponsive(spacingViewport, "padding_h", Math.max(0, Math.min(120, parseInt(v) || 0)))}
+                      type="number"
+                    />
+                  </ResponsiveField>
+                </div>
+                <div className="text-center">
+                  <div className="text-[8px] text-blue-300 mb-0.5">V</div>
+                  <ResponsiveField
+                    label=""
+                    viewport={spacingViewport}
+                    isOverridden={isFieldOverridden(design, spacingViewport, "padding_v")}
+                    onReset={() => resetResponsive(spacingViewport, "padding_v")}
+                  >
+                    <TextInput
+                      value={getDisplay(spacingViewport, "padding_v", 27)}
+                      onChange={(v) => updateResponsive(spacingViewport, "padding_v", Math.max(0, Math.min(80, parseInt(v) || 0)))}
+                      type="number"
+                    />
+                  </ResponsiveField>
+                </div>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-1.5 mt-2">
+              <div className="text-center">
+                <div className="text-[8px] text-neutral-300 mb-0.5">H</div>
+                <ResponsiveField
+                  label=""
+                  viewport={spacingViewport}
+                  isOverridden={isFieldOverridden(design, spacingViewport, "margin_h")}
+                  onReset={() => resetResponsive(spacingViewport, "margin_h")}
+                >
+                  <TextInput
+                    value={getDisplay(spacingViewport, "margin_h", 0)}
+                    onChange={(v) => updateResponsive(spacingViewport, "margin_h", Math.max(0, Math.min(120, parseInt(v) || 0)))}
+                    type="number"
+                  />
+                </ResponsiveField>
+              </div>
+              <div className="text-center">
+                <div className="text-[8px] text-neutral-300 mb-0.5">V</div>
+                <ResponsiveField
+                  label=""
+                  viewport={spacingViewport}
+                  isOverridden={isFieldOverridden(design, spacingViewport, "margin_v")}
+                  onReset={() => resetResponsive(spacingViewport, "margin_v")}
+                >
+                  <TextInput
+                    value={getDisplay(spacingViewport, "margin_v", 0)}
+                    onChange={(v) => updateResponsive(spacingViewport, "margin_v", Math.max(0, Math.min(80, parseInt(v) || 0)))}
+                    type="number"
+                  />
+                </ResponsiveField>
+              </div>
+            </div>
+          </div>
+          <Divider />
+          <ResponsiveField
+            label="Gap"
+            viewport={spacingViewport}
+            isOverridden={isFieldOverridden(design, spacingViewport, "items_gap")}
+            onReset={() => resetResponsive(spacingViewport, "items_gap")}
+          >
+            <RangeSlider
+              value={getDisplay(spacingViewport, "items_gap", 32)}
+              onChange={(v) => updateResponsive(spacingViewport, "items_gap", v)}
+              min={4}
+              max={80}
+              suffix="px"
+            />
+          </ResponsiveField>
+        </CardSection>
+        </div>
+
+        <div className="h-2" />
+      </div>
+    );
+  }
+
+  // ── Animation tab ──
+  if (activeTab === "animation") {
+    return (
+      <>
+        <CardSection title="Entrance" icon={<AnimationIcon />} iconBg="#d1fae5">
+          <Field label="Effect">
+            <SelectInput
+              value={design.entrance_animation || ""}
+              onChange={(v) => update({ entrance_animation: v as NavDesign["entrance_animation"] })}
+              options={[
+                { value: "", label: "None" },
+                { value: "fade-in", label: "Fade In" },
+                { value: "slide-down", label: "Slide Down" },
+                { value: "blur-in", label: "Blur In" },
+              ]}
+            />
+          </Field>
+          {design.entrance_animation && (
+            <>
+              <Field label="Duration">
+                <RangeSlider
+                  value={design.entrance_duration ?? 600}
+                  onChange={(v) => update({ entrance_duration: v })}
+                  min={200}
+                  max={5000}
+                  suffix="ms"
+                />
+              </Field>
+              <Field label="Delay">
+                <RangeSlider
+                  value={design.entrance_delay ?? 0}
+                  onChange={(v) => update({ entrance_delay: v })}
+                  min={0}
+                  max={5000}
+                  suffix="ms"
+                />
+              </Field>
+              <Divider />
+              <Field label="Stagger">
+                <div className="flex items-center gap-2">
+                  <Toggle
+                    value={design.entrance_stagger ?? false}
+                    onChange={(v) => update({ entrance_stagger: v })}
+                  />
+                  <span className="text-[10px] text-neutral-400">per item</span>
+                </div>
+              </Field>
+              {design.entrance_stagger && (
+                <Field label="Interval">
+                  <RangeSlider
+                    value={design.entrance_stagger_delay ?? 80}
+                    onChange={(v) => update({ entrance_stagger_delay: v })}
+                    min={20}
+                    max={300}
+                    suffix="ms"
+                  />
+                </Field>
+              )}
+            </>
+          )}
+        </CardSection>
+
+        {!design.entrance_animation && (
+          <div className="mx-4 mt-2 px-3 py-4 rounded-lg bg-neutral-50 text-center">
+            <p className="text-[11px] text-neutral-400">
+              Select an entrance effect to configure animation timing.
+            </p>
+          </div>
+        )}
+
+        <div className="h-2" />
+      </>
+    );
+  }
+
+  // ── Layout tab ──
+  return (
+    <>
+      <CardSection title="Background" icon={<BackgroundIcon />} iconBg="#e0e7ff">
+        <Field label="Color">
+          <ColorSwatchPicker
+            value={design.background_color || ""}
+            onChange={(v) => update({ background_color: typeof v === "string" ? v : "" })}
+            swatches={swatches}
+          />
+        </Field>
+        {design.background_color && (
+          <Field label="Opacity">
+            <RangeSlider
+              value={design.background_opacity ?? 100}
+              onChange={(v) => update({ background_opacity: v })}
+              min={0}
+              max={100}
+              suffix="%"
+            />
+          </Field>
+        )}
+        <Field label="Blur">
+          <div className="flex items-center gap-2">
+            <Toggle
+              value={design.backdrop_blur ?? false}
+              onChange={(v) => update({ backdrop_blur: v })}
+            />
+            <span className="text-[10px] text-neutral-400">backdrop blur</span>
+          </div>
+        </Field>
+      </CardSection>
+
+      <div className="h-2" />
+    </>
+  );
+}