@morphika/andami 0.1.9 → 0.1.10

package/components/builder/settings-panel/ColumnV2Settings.tsx

@@ -16,6 +16,9 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import {
+  ColumnSizeIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -90,7 +93,7 @@ export default function ColumnV2Settings({
         </div>
       )}
 
-      <SettingsSection title="Column Size" defaultOpen>
+      <SettingsSection title="Column Size" defaultOpen icon={<ColumnSizeIcon />}>
         <SettingsField label={
           <span>
             Span

package/components/builder/settings-panel/LayoutTab.tsx

@@ -29,49 +29,13 @@ import {
 } from "./responsive-helpers";
 import { TRBLInputs } from "./TRBLInputs";
 
-// ── Section title icons (matching BlockLayoutTab / SectionV2LayoutTab) ──
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 /**
  * BUG-007 fix: LayoutTab now handles PageSection styling (spacing, background, border).
@@ -141,7 +105,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       )}
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={effectiveSpacingTop}
           right={effectiveSpacingRight}
@@ -192,7 +156,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getRowSettingValue<string>(section, activeViewport, "offset_top", "0")}
           right={getRowSettingValue<string>(section, activeViewport, "offset_right", "0")}
@@ -205,7 +169,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", ""))}
@@ -305,7 +269,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getRowSettingValue<string>(section, activeViewport, "border_color", ""))}

package/components/builder/settings-panel/PageSettings.tsx

@@ -11,6 +11,12 @@
 
 import { useState } from "react";
 import { useBuilderStore } from "../../../lib/builder/store";
+import {
+  GeneralIcon,
+  AppearanceIcon,
+  NavigationIcon,
+  SEOIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -39,7 +45,7 @@ export default function PageSettings() {
 
   return (
     <>
-      <SettingsSection title="General" defaultOpen>
+      <SettingsSection title="General" defaultOpen icon={<GeneralIcon />}>
         <SettingsField label="Title">
           <input
             type="text"
@@ -73,7 +79,7 @@ export default function PageSettings() {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Appearance" defaultOpen>
+      <SettingsSection title="Appearance" defaultOpen icon={<AppearanceIcon />}>
         <SettingsField label="Background">
           <ColorSwatchPicker
             value={parseColorField(store.pageSettings.background_color || "")}
@@ -91,7 +97,7 @@ export default function PageSettings() {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Navigation">
+      <SettingsSection title="Navigation" icon={<NavigationIcon />}>
         <SettingsField label="Nav Color">
           <ColorSwatchPicker
             value={store.pageSettings.nav_color || ""}
@@ -164,7 +170,7 @@ export function PageSeoSettings() {
 
   return (
     <>
-      <SettingsSection title="SEO" defaultOpen>
+      <SettingsSection title="SEO" defaultOpen icon={<SEOIcon />}>
         <SettingsField label="SEO Title">
           <input
             type="text"

package/components/builder/settings-panel/ParallaxGroupSettings.tsx

@@ -14,6 +14,10 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { ParallaxGroup } from "../../../lib/sanity/types";
+import {
+  TransitionIcon,
+  InfoIcon,
+} from "../editors/section-icons";
 import {
   SettingsSection,
 } from "../editors/shared";
@@ -56,7 +60,7 @@ export default function ParallaxGroupSettings({
 
   return (
     <>
-      <SettingsSection title="Transition Effect" defaultOpen>
+      <SettingsSection title="Transition Effect" defaultOpen icon={<TransitionIcon />}>
         <div className="space-y-1.5">
           {TRANSITION_EFFECTS.map((effect) => {
             const isActive = activeEffect === effect.value;
@@ -103,7 +107,7 @@ export default function ParallaxGroupSettings({
       </SettingsSection>
 
       {/* Group info */}
-      <SettingsSection title="Info">
+      <SettingsSection title="Info" icon={<InfoIcon />}>
         <div className="text-[11px] text-neutral-500 space-y-1">
           <p>
             {group.slides.length} slide{group.slides.length !== 1 ? "s" : ""}

package/components/builder/settings-panel/ParallaxSlideSettings.tsx

@@ -19,6 +19,11 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { ParallaxSlideV2, ParallaxGroup, PageSectionV2 } from "../../../lib/sanity/types";
+import {
+  BackgroundIcon,
+  NavbarColorIcon,
+  OverlayIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -70,7 +75,7 @@ export default function ParallaxSlideSettings({
   return (
     <>
       {/* Background Type */}
-      <SettingsSection title="Background" defaultOpen>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         {/* Segmented control: Image / Video */}
         <SettingsField label="Type">
           <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
@@ -123,7 +128,7 @@ export default function ParallaxSlideSettings({
       </SettingsSection>
 
       {/* Navbar Color Override */}
-      <SettingsSection title="Navbar Color" defaultOpen={false}>
+      <SettingsSection title="Navbar Color" defaultOpen={false} icon={<NavbarColorIcon />}>
         <SettingsField label="Color">
           <div className="flex items-center gap-2">
             <ColorSwatchPicker
@@ -147,7 +152,7 @@ export default function ParallaxSlideSettings({
       </SettingsSection>
 
       {/* Overlay */}
-      <SettingsSection title="Overlay" defaultOpen>
+      <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={overlayColor}

package/components/builder/settings-panel/SectionV2LayoutTab.tsx

@@ -25,49 +25,13 @@ import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
 import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
 import { TRBLInputs } from "./TRBLInputs";
 
-// ── Section title icons (matching BlockLayoutTab) ──
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 // ── Override indicator badge (matching BlockLayoutTab pattern) ──
 
@@ -179,7 +143,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       )}
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={getSettingValue<string>("spacing_top", "0")}
           right={getSettingValue<string>("spacing_right", "0")}
@@ -197,7 +161,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getSettingValue<string>("offset_top", "0")}
           right={getSettingValue<string>("offset_right", "0")}
@@ -215,7 +179,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("background_color", ""))}
@@ -309,7 +273,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("border_color", ""))}

package/components/builder/settings-panel/SectionV2Settings.tsx

@@ -50,32 +50,11 @@ const PRESETS: PresetOption[] = [
 
 const CUSTOM_PRESET: PresetOption = { id: "custom", label: "Custom", cols: [], readonly: true };
 
-// ============================================
-// Section title icons (small, inline)
-// ============================================
-
-function LayoutPresetIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
-      <line x1="6" y1="1.5" x2="6" y2="12.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
-      <rect x="1.5" y="1.5" width="4.5" height="11" rx="0" fill="currentColor" opacity="0.12" />
-    </svg>
-  );
-}
-
-function GridGapIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="8" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="1" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="8" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
-      <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  LayoutPresetIcon,
+  GridGapsIcon,
+} from "../editors/section-icons";
 
 // ============================================
 // Preset Grid Component
@@ -278,7 +257,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
       )}
 
       {/* Gaps */}
-      <SettingsSection title="Grid Gaps" defaultOpen icon={<GridGapIcon />}>
+      <SettingsSection title="Grid Gaps" defaultOpen icon={<GridGapsIcon />}>
         <SettingsField label={
           <span>
             Col Gap

package/components/ui/Navbar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useId, useMemo } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import type { NavItem, NavDesign, NavEntrancePreset, MobileNavDesign } from "../../lib/sanity/types";
+import type { NavItem, NavDesign, NavEntrancePreset, NavDesignResponsiveOverride, MobileNavDesign } from "../../lib/sanity/types";
 import { useNavColor } from "../../lib/contexts/NavColorContext";
 import { useNavAnimation } from "../../lib/contexts/NavAnimationContext";
 import { usePageExit } from "../../lib/contexts/PageExitContext";
@@ -23,6 +23,79 @@ const colorMap: Record<string, string> = {
   white: "text-brand-text",
 };
 
+// ============================================
+// Responsive CSS custom properties generator
+// ============================================
+
+/** Breakpoints matching the builder's responsive system */
+const NAV_BREAKPOINTS = { tablet: 1024, phone: 640 } as const;
+
+/** Generates a <style> block with CSS custom properties for responsive nav overrides.
+ *  Desktop values are set on the scoping selector; tablet/phone overrides via media queries.
+ *  Returns empty string if no responsive overrides exist. */
+function buildResponsiveNavCSS(design: NavDesign | undefined, scopeSelector: string): string {
+  if (!design) return "";
+
+  // Desktop (base) custom properties
+  const vars: Record<string, string> = {
+    "--nav-font-size": `${design.font_size ?? 14}px`,
+    "--nav-font-weight": design.font_weight || "400",
+    "--nav-text-transform": design.text_transform || "uppercase",
+    "--nav-text-align": design.text_align || "left",
+    "--nav-vertical-align": (() => {
+      const v = design.vertical_align || "top";
+      return v === "bottom" ? "end" : v === "middle" ? "center" : "start";
+    })(),
+    "--nav-items-justify": (() => {
+      const a = design.text_align || "left";
+      return a === "center" ? "center" : a === "right" ? "flex-end" : "flex-start";
+    })(),
+    "--nav-padding-h": `${design.padding_h ?? 24}px`,
+    "--nav-padding-v": `${design.padding_v ?? 27}px`,
+    "--nav-margin-h": `${design.margin_h ?? 0}px`,
+    "--nav-margin-v": `${design.margin_v ?? 0}px`,
+    "--nav-items-gap": `${design.items_gap ?? 32}px`,
+  };
+
+  const responsive = design.responsive;
+  if (!responsive) {
+    // No responsive overrides — still emit base vars for consistency
+    const baseLines = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+    return `${scopeSelector}{${baseLines}}`;
+  }
+
+  // Build media query blocks for tablet and phone
+  const mqBlocks: string[] = [];
+  for (const [viewport, bp] of [["tablet", NAV_BREAKPOINTS.tablet], ["phone", NAV_BREAKPOINTS.phone]] as const) {
+    const overrides = responsive[viewport] as NavDesignResponsiveOverride | undefined;
+    if (!overrides) continue;
+    const ovLines: string[] = [];
+    if (overrides.font_size != null) ovLines.push(`--nav-font-size:${overrides.font_size}px`);
+    if (overrides.font_weight != null) ovLines.push(`--nav-font-weight:${overrides.font_weight}`);
+    if (overrides.text_transform != null) ovLines.push(`--nav-text-transform:${overrides.text_transform}`);
+    if (overrides.text_align != null) {
+      ovLines.push(`--nav-text-align:${overrides.text_align}`);
+      const j = overrides.text_align === "center" ? "center" : overrides.text_align === "right" ? "flex-end" : "flex-start";
+      ovLines.push(`--nav-items-justify:${j}`);
+    }
+    if (overrides.vertical_align != null) {
+      const v = overrides.vertical_align === "bottom" ? "end" : overrides.vertical_align === "middle" ? "center" : "start";
+      ovLines.push(`--nav-vertical-align:${v}`);
+    }
+    if (overrides.padding_h != null) ovLines.push(`--nav-padding-h:${overrides.padding_h}px`);
+    if (overrides.padding_v != null) ovLines.push(`--nav-padding-v:${overrides.padding_v}px`);
+    if (overrides.margin_h != null) ovLines.push(`--nav-margin-h:${overrides.margin_h}px`);
+    if (overrides.margin_v != null) ovLines.push(`--nav-margin-v:${overrides.margin_v}px`);
+    if (overrides.items_gap != null) ovLines.push(`--nav-items-gap:${overrides.items_gap}px`);
+    if (ovLines.length > 0) {
+      mqBlocks.push(`@media(max-width:${bp}px){${scopeSelector}{${ovLines.join(";")}}}`);
+    }
+  }
+
+  const baseLines = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+  return `${scopeSelector}{${baseLines}}${mqBlocks.join("")}`;
+}
+
 // ============================================
 // NavLink — shared link component (eliminates duplication)
 // ============================================
@@ -181,6 +254,18 @@ export default function Navbar({
   // Map vertical_align to CSS align-items value for the grid container
   const gridAlignItems = verticalAlign === "bottom" ? "end" : verticalAlign === "middle" ? "center" : "start";
 
+  // ── Responsive CSS custom properties (Session 164) ──
+  // Uses a stable ID scoped to the nav element. CSS vars + media queries
+  // ensure zero-flash SSR: the correct values apply before hydration.
+  const hasResponsive = !!(design?.responsive?.tablet || design?.responsive?.phone);
+  const reactId = useId();
+  const navScopeId = `nav-${reactId.replace(/:/g, "")}`;
+  const responsiveCSS = useMemo(
+    () => hasResponsive ? buildResponsiveNavCSS(design, `[data-nav-scope="${navScopeId}"]`) : "",
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasResponsive, design?.responsive, navScopeId, fontSize, fontWeight, textTransformVal, textAlignVal, paddingH, paddingV, marginH, marginV, itemsGap, verticalAlign],
+  );
+
   // ── Mobile menu resolved values (Session 158) ──
   // Mobile styles are independent from page-level NavColorContext overrides.
   // They fall back to desktop design values when not explicitly set.
@@ -374,13 +459,23 @@ export default function Navbar({
   // When using hex color, we must set `color: inherit` on links because browser
   // user-agent stylesheet sets `a { color: ... }` which overrides CSS inheritance.
   const linkClassName = `tracking-normal ${textColorClass} transition-colors duration-200 hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`;
-  const linkStyle: React.CSSProperties = {
-    fontSize: `${fontSize}px`,
-    fontWeight: fontWeight as React.CSSProperties["fontWeight"],
-    textTransform: textTransformVal as React.CSSProperties["textTransform"],
-    fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
-    ...(isHexColor ? { color: "inherit" } : {}),
-  };
+  // When responsive overrides exist, link styles reference CSS custom properties
+  // so they respond to media queries without JS. Otherwise use direct values.
+  const linkStyle: React.CSSProperties = hasResponsive
+    ? {
+        fontSize: "var(--nav-font-size)",
+        fontWeight: "var(--nav-font-weight)" as React.CSSProperties["fontWeight"],
+        textTransform: "var(--nav-text-transform)" as React.CSSProperties["textTransform"],
+        fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
+        ...(isHexColor ? { color: "inherit" } : {}),
+      }
+    : {
+        fontSize: `${fontSize}px`,
+        fontWeight: fontWeight as React.CSSProperties["fontWeight"],
+        textTransform: textTransformVal as React.CSSProperties["textTransform"],
+        fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
+        ...(isHexColor ? { color: "inherit" } : {}),
+      };
 
   return (
     <>
@@ -388,6 +483,7 @@ export default function Navbar({
       <nav
         role="navigation"
         aria-label="Main navigation"
+        data-nav-scope={navScopeId}
         className={`${positionClass} top-0 left-0 right-0 z-50 transition-transform duration-300 ease-in-out ${
           shouldHide ? "-translate-y-full" : "translate-y-0"
         }`}
@@ -397,14 +493,21 @@ export default function Navbar({
         style={{
           ...navBgStyle,
           ...textColorStyle,
-          ...(marginH > 0 || marginV > 0
+          ...(hasResponsive
             ? {
-                left: `${marginH}px`,
-                right: `${marginH}px`,
-                top: `${marginV}px`,
-                borderRadius: "8px",
+                left: "var(--nav-margin-h)",
+                right: "var(--nav-margin-h)",
+                top: "var(--nav-margin-v)",
+                ...(marginH > 0 || marginV > 0 ? { borderRadius: "8px" } : {}),
               }
-            : {}),
+            : marginH > 0 || marginV > 0
+              ? {
+                  left: `${marginH}px`,
+                  right: `${marginH}px`,
+                  top: `${marginV}px`,
+                  borderRadius: "8px",
+                }
+              : {}),
           // CSS custom properties for animation duration
           ...(entrancePreset && !entranceStagger ? {
             "--nav-entrance-duration": `${entranceDuration}ms`,
@@ -412,21 +515,39 @@ export default function Navbar({
           } as React.CSSProperties : {}),
         }}
       >
+        {/* Responsive nav CSS custom properties + media queries */}
+        {responsiveCSS && (
+          <style dangerouslySetInnerHTML={{ __html: responsiveCSS }} />
+        )}
         {/* Desktop: 12-column grid constrained to --grid-width */}
         <div
           className="hidden lg:grid"
-          style={{
-            gridTemplateColumns: "repeat(12, 1fr)",
-            maxWidth: "var(--grid-width, 1445px)",
-            marginLeft: "auto",
-            marginRight: "auto",
-            paddingLeft: `${paddingH}px`,
-            paddingRight: `${paddingH}px`,
-            paddingTop: `${paddingV}px`,
-            paddingBottom: `${paddingV}px`,
-            alignItems: gridAlignItems,
-            columnGap: `${itemsGap}px`,
-          }}
+          style={hasResponsive
+            ? {
+                gridTemplateColumns: "repeat(12, 1fr)",
+                maxWidth: "var(--grid-width, 1445px)",
+                marginLeft: "auto",
+                marginRight: "auto",
+                paddingLeft: "var(--nav-padding-h)",
+                paddingRight: "var(--nav-padding-h)",
+                paddingTop: "var(--nav-padding-v)",
+                paddingBottom: "var(--nav-padding-v)",
+                alignItems: "var(--nav-vertical-align)" as React.CSSProperties["alignItems"],
+                columnGap: "var(--nav-items-gap)",
+              }
+            : {
+                gridTemplateColumns: "repeat(12, 1fr)",
+                maxWidth: "var(--grid-width, 1445px)",
+                marginLeft: "auto",
+                marginRight: "auto",
+                paddingLeft: `${paddingH}px`,
+                paddingRight: `${paddingH}px`,
+                paddingTop: `${paddingV}px`,
+                paddingBottom: `${paddingV}px`,
+                alignItems: gridAlignItems,
+                columnGap: `${itemsGap}px`,
+              }
+          }
         >
           {/* Logo */}
           <div
@@ -480,7 +601,7 @@ export default function Navbar({
                 gridColumn: `${item.grid_column} / span ${item.column_span || 1}`,
                 gridRow: 1,
                 display: "flex",
-                justifyContent: itemsJustify,
+                justifyContent: hasResponsive ? "var(--nav-items-justify)" as React.CSSProperties["justifyContent"] : itemsJustify,
                 alignItems: "center",
                 minWidth: 0,
                 overflow: "hidden",
@@ -518,9 +639,9 @@ export default function Navbar({
               style={{
                 gridColumn: `${logoCols + 1} / -1`,
                 display: "flex",
-                justifyContent: itemsJustify,
+                justifyContent: hasResponsive ? "var(--nav-items-justify)" as React.CSSProperties["justifyContent"] : itemsJustify,
                 alignItems: "center",
-                gap: `${design?.items_gap ?? 32}px`,
+                gap: hasResponsive ? "var(--nav-items-gap)" : `${design?.items_gap ?? 32}px`,
               }}
             >
               {unplacedItems.map((item) => (

package/lib/sanity/types.ts

@@ -704,6 +704,28 @@ export interface NavDesign {
   entrance_delay?: number;      // ms, default 0
   entrance_stagger?: boolean;   // stagger items, default false
   entrance_stagger_delay?: number; // ms between items, default 80
+
+  /** Per-viewport overrides for responsive nav settings.
+   *  Only typography + spacing fields are overridable.
+   *  Missing fields = inherit from desktop. */
+  responsive?: {
+    tablet?: NavDesignResponsiveOverride;
+    phone?: NavDesignResponsiveOverride;
+  };
+}
+
+/** Subset of NavDesign fields that can be overridden per viewport */
+export interface NavDesignResponsiveOverride {
+  font_size?: number;
+  font_weight?: string;
+  text_align?: "left" | "center" | "right";
+  vertical_align?: "top" | "middle" | "bottom";
+  text_transform?: "none" | "uppercase" | "lowercase" | "capitalize";
+  padding_h?: number;
+  padding_v?: number;
+  margin_h?: number;
+  margin_v?: number;
+  items_gap?: number;
 }
 
 // ============================================