@morphika/andami 0.5.1 → 0.5.3

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

@@ -1,514 +1,518 @@
-"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 ──
-// v2: Card-based sections, colored icons, builder-aligned styling
-
-// ============================================
-// Field wrapper
-// ============================================
-
-export function Field({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <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 min-w-0">{children}</div>
-    </div>
-  );
-}
-
-// ============================================
-// Text input
-// ============================================
-
-export function TextInput({
-  value,
-  onChange,
-  placeholder,
-  type = "text",
-}: {
-  value: string | number;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  type?: "text" | "number";
-}) {
-  return (
-    <input
-      type={type}
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      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
-// ============================================
-
-export function SelectInput({
-  value,
-  onChange,
-  options,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  options: { value: string; label: string }[];
-}) {
-  return (
-    <div className="relative">
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        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}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
-        <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>
-      </div>
-    </div>
-  );
-}
-
-// ============================================
-// Segmented control
-// ============================================
-
-export function SegmentedControl({
-  value,
-  onChange,
-  options,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  options: { value: string; label: string | ReactNode }[];
-}) {
-  return (
-    <div className="flex bg-white rounded-lg p-0.5 border border-[#f0f0f0]">
-      {options.map((opt) => (
-        <button
-          key={String(opt.value)}
-          onClick={() => onChange(opt.value)}
-          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-neutral-100 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
-              : "text-neutral-400 hover:text-neutral-600"
-          }`}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-// ============================================
-// Toggle switch
-// ============================================
-
-export function Toggle({
-  value,
-  onChange,
-}: {
-  value: boolean;
-  onChange: (value: boolean) => void;
-}) {
-  return (
-    <button
-      onClick={() => onChange(!value)}
-      className="w-9 h-5 rounded-full relative transition-all cursor-pointer"
-      style={{
-        background: value ? "#076bff" : "#d4d4d4",
-      }}
-    >
-      <div
-        className="w-3.5 h-3.5 rounded-full bg-white absolute top-[2.5px] transition-all shadow-sm"
-        style={{ left: value ? 19 : 2 }}
-      />
-    </button>
-  );
-}
-
-// ============================================
-// Range slider
-// ============================================
-
-export function RangeSlider({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  suffix,
-}: {
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  suffix?: string;
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        type="range"
-        min={min}
-        max={max}
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1"
-        style={{ accentColor: "#076bff" }}
-      />
-      <span className="text-[10px] text-neutral-400 w-9 text-right tabular-nums">
-        {value}{suffix || ""}
-      </span>
-    </div>
-  );
-}
-
-// ============================================
-// 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,
-  defaultOpen = true,
-  children,
-}: {
-  title: string;
-  defaultOpen?: boolean;
-  children: ReactNode;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-
-  return (
-    <div>
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center justify-between w-full py-2 border-t border-neutral-200 mt-1 text-[11px] font-semibold text-neutral-900 tracking-wide cursor-pointer uppercase"
-      >
-        {title}
-        <span
-          className="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="pb-2">{children}</div>}
-    </div>
-  );
-}
-
-// ============================================
-// 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,
-  onChange,
-  placeholder = "Transparent",
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-}) {
-  return (
-    <div className="flex gap-1.5 items-center">
-      <div
-        className="w-7 h-7 rounded-lg border border-neutral-200 shrink-0 cursor-pointer"
-        style={{
-          background: value || "transparent",
-          backgroundImage: !value
-            ? "repeating-conic-gradient(#e5e5e5 0% 25%, transparent 0% 50%) 0 0 / 8px 8px"
-            : "none",
-        }}
-      />
-      <TextInput value={value} onChange={onChange} placeholder={placeholder} />
-      {value && (
-        <button
-          onClick={() => onChange("")}
-          className="text-neutral-400 hover:text-neutral-600 shrink-0"
-          title="Clear"
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-          </svg>
-        </button>
-      )}
-    </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>
-  );
-}
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  PositionIcon,
+  TypographyIcon,
+  AnimationIcon,
+  SpacingIcon,
+  ContentIcon,
+  LinkIcon,
+  GridIcon,
+  StyleIcon,
+  BackgroundIcon,
+} from "../../builder/editors/section-icons";
+import { BubbleTooltip } from "../../builder/BubbleIcons";
+
+// ── Nav viewport type for responsive overrides ──
+export type NavViewport = "desktop" | "tablet" | "phone";
+
+// ── Shared field components for NavBuilder settings panel ──
+// v2: Card-based sections, colored icons, builder-aligned styling
+
+// ============================================
+// Field wrapper
+// ============================================
+
+export function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <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 min-w-0">{children}</div>
+    </div>
+  );
+}
+
+// ============================================
+// Text input
+// ============================================
+
+export function TextInput({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: {
+  value: string | number;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "number";
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      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-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)] font-[inherit] placeholder:text-neutral-400"
+    />
+  );
+}
+
+// ============================================
+// Select input
+// ============================================
+
+export function SelectInput({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}) {
+  return (
+    <div className="relative">
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        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-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)] font-[inherit]"
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
+        <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>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Segmented control
+// ============================================
+
+export function SegmentedControl({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string | ReactNode }[];
+}) {
+  return (
+    <div className="flex bg-white rounded-lg p-0.5 border border-[#f0f0f0]">
+      {options.map((opt) => (
+        <button
+          key={String(opt.value)}
+          onClick={() => onChange(opt.value)}
+          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-neutral-100 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
+              : "text-neutral-400 hover:text-neutral-600"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ============================================
+// Toggle switch
+// ============================================
+
+export function Toggle({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <button
+      onClick={() => onChange(!value)}
+      className="w-9 h-5 rounded-full relative transition-all cursor-pointer"
+      style={{
+        background: value ? "#3580f9" : "#d4d4d4",
+      }}
+    >
+      <div
+        className="w-3.5 h-3.5 rounded-full bg-white absolute top-[2.5px] transition-all shadow-sm"
+        style={{ left: value ? 19 : 2 }}
+      />
+    </button>
+  );
+}
+
+// ============================================
+// Range slider
+// ============================================
+
+export function RangeSlider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  suffix,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  suffix?: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1"
+        style={{ accentColor: "#3580f9" }}
+      />
+      <span className="text-[10px] text-neutral-400 w-9 text-right tabular-nums">
+        {value}{suffix || ""}
+      </span>
+    </div>
+  );
+}
+
+// ============================================
+// 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,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full py-2 border-t border-neutral-200 mt-1 text-[11px] font-semibold text-neutral-900 tracking-wide cursor-pointer uppercase"
+      >
+        {title}
+        <span
+          className="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="pb-2">{children}</div>}
+    </div>
+  );
+}
+
+// ============================================
+// 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,
+  onChange,
+  placeholder = "Transparent",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <div className="flex gap-1.5 items-center">
+      <div
+        className="w-7 h-7 rounded-lg border border-neutral-200 shrink-0 cursor-pointer"
+        style={{
+          background: value || "transparent",
+          backgroundImage: !value
+            ? "repeating-conic-gradient(#e5e5e5 0% 25%, transparent 0% 50%) 0 0 / 8px 8px"
+            : "none",
+        }}
+      />
+      <TextInput value={value} onChange={onChange} placeholder={placeholder} />
+      {value && (
+        <button
+          onClick={() => onChange("")}
+          className="group/bb relative text-neutral-400 hover:text-neutral-600 shrink-0"
+          aria-label="Clear"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+          </svg>
+          <BubbleTooltip>Clear</BubbleTooltip>
+        </button>
+      )}
+    </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)}
+            aria-label={opt.label}
+            className={`group/bb relative flex-1 px-2 py-[5px] text-[10px] font-medium rounded-md transition-all flex items-center justify-center gap-1 ${
+              isActive
+                ? isNonDesktop
+                  ? "text-[#3580f9] bg-blue-50 shadow-[0_1px_2px_rgba(53, 128, 249,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}
+            <BubbleTooltip>{opt.label}</BubbleTooltip>
+          </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" ? "#3580f9" : "#7c3aed";
+  const bgColor = viewport === "tablet" ? "rgba(53, 128, 249, 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-[#3580f9] font-medium" : "text-neutral-400"
+          }`}
+        >
+          {label}
+        </label>
+        {isOverridden ? (
+          <span className="text-[8px] text-[#3580f9]/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="group/bb relative shrink-0 text-[#3580f9]/60 hover:text-[#3580f9] transition-colors"
+          aria-label="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>
+          <BubbleTooltip>Reset to desktop value</BubbleTooltip>
+        </button>
+      )}
+    </div>
+  );
+}