@morphika/andami 0.1.2

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

@@ -0,0 +1,125 @@
+"use client";
+
+import type { NavItem, NavDesign, NavColorVariant } from "../../../lib/sanity/types";
+import { hexToRgba } from "./nav-builder-utils";
+import { getSiteConfig } from "../../../lib/config";
+
+const _cfg = getSiteConfig();
+
+const NAV_COLOR_HEX: Record<NavColorVariant, string> = {
+  "yellow-lime": _cfg.palette.accent,
+  yellow: _cfg.palette.accent,
+  "red-coral": _cfg.palette.secondary,
+  blue: "#076bff",
+  green: _cfg.palette.accent,
+  white: _cfg.palette.text,
+};
+
+interface NavLivePreviewProps {
+  items: NavItem[];
+  design: NavDesign;
+}
+
+export default function NavLivePreview({ items, design }: NavLivePreviewProps) {
+  const bgColor = design.background_color || "";
+  const bgOpacity = design.background_opacity ?? 0;
+  const isTransparent = !bgColor || bgOpacity <= 0;
+  const previewBg = isTransparent ? "transparent" : hexToRgba(bgColor, bgOpacity / 100);
+
+  const paddingH = design.padding_h ?? 24;
+  const paddingV = design.padding_v ?? 27;
+  const marginH = design.margin_h ?? 0;
+  const marginV = design.margin_v ?? 0;
+  const fontSize = design.font_size ?? 14;
+  const fontFamily =
+    design.font_family || `var(--font-family, '${_cfg.typography.defaultFont}', ${_cfg.typography.monoFallback})`;
+  const textTransform = (design.text_transform || "uppercase") as React.CSSProperties["textTransform"];
+  const textAlign = design.text_align || "left";
+  const itemJustify =
+    textAlign === "center"
+      ? "center"
+      : textAlign === "right"
+      ? "flex-end"
+      : "flex-start";
+  const color = NAV_COLOR_HEX[design.color || "yellow-lime"];
+  const verticalAlign = design.vertical_align || "top";
+  const gridAlignItems = verticalAlign === "bottom" ? "end" : verticalAlign === "middle" ? "center" : "start";
+  const hasMargin = marginH > 0 || marginV > 0;
+
+  const visibleItems = items.filter((i) => i.visible);
+
+  return (
+    <div
+      style={{
+        background: "#020202",
+        padding: `${marginV}px ${marginH}px`,
+        borderBottom: "1px solid rgba(51,51,51,0.3)",
+      }}
+    >
+      <div
+        style={{
+          paddingLeft: `${paddingH}px`,
+          paddingRight: `${paddingH}px`,
+          paddingTop: `${paddingV}px`,
+          paddingBottom: `${paddingV}px`,
+          background: isTransparent ? "transparent" : previewBg,
+          backdropFilter: design.backdrop_blur ? "blur(12px)" : "none",
+          borderRadius: hasMargin ? 8 : 0,
+          ...(isTransparent
+            ? {
+                backgroundImage:
+                  "linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)",
+                backgroundSize: "16px 16px",
+                backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
+                backgroundColor: "#111",
+              }
+            : {}),
+          display: "grid",
+          gridTemplateColumns: "repeat(12, 1fr)",
+          alignItems: gridAlignItems,
+          columnGap: `${design.items_gap ?? 32}px`,
+          minHeight: 20,
+          fontFamily,
+          fontSize,
+          textTransform,
+          letterSpacing: "0.05em",
+        }}
+      >
+        {visibleItems.map((item) => {
+          const overrides = item.style_overrides || {};
+          const itemVAlign = overrides.vertical_align;
+          return (
+            <div
+              key={item._key}
+              style={{
+                gridColumn: `${item.grid_column} / span ${item.column_span}`,
+                gridRow: 1,
+                color: overrides.color || color,
+                fontSize: overrides.font_size || "inherit",
+                fontFamily: overrides.font_family || "inherit",
+                textTransform: (overrides.text_transform || "inherit") as React.CSSProperties["textTransform"],
+                fontWeight: overrides.font_weight || design.font_weight || "400",
+                display: "flex",
+                justifyContent: item.type === "logo" ? "flex-start" : itemJustify,
+                alignItems: "center",
+                minWidth: 0,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                ...(itemVAlign ? {
+                  alignSelf: itemVAlign === "bottom" ? "end" : itemVAlign === "middle" ? "center" : "start",
+                } : {}),
+              }}
+            >
+              {item.label || "Untitled"}
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex items-center justify-between px-3 py-1 text-[9px] text-neutral-600">
+        <span>Live Preview</span>
+        <span>{visibleItems.length} visible items</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,248 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+
+// ── Shared field components for NavBuilder settings panel ──
+// Matches admin page style: light theme, white cards, neutral borders
+
+// ── Field wrapper ──
+
+export function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-3 py-1.5">
+      <label className="text-xs text-neutral-500 w-[72px] shrink-0 text-right">
+        {label}
+      </label>
+      <div className="flex-1">{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 px-2.5 py-1.5 text-xs bg-white border border-neutral-200 rounded-lg text-neutral-900 outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors font-[inherit] placeholder:text-neutral-400"
+    />
+  );
+}
+
+// ── 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 px-2.5 py-1.5 text-xs bg-white border border-neutral-200 rounded-lg text-neutral-900 outline-none appearance-none cursor-pointer pr-7 focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors font-[inherit]"
+      >
+        {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 }[];
+}) {
+  return (
+    <div className="flex bg-neutral-100 rounded-lg p-0.5">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className={`flex-1 px-2 py-1.5 text-[11px] font-medium rounded-md transition-all ${
+            value === opt.value
+              ? "text-neutral-900 bg-white shadow-sm"
+              : "text-neutral-500 hover:text-neutral-700"
+          }`}
+        >
+          {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-500 w-8 text-right tabular-nums">
+        {value}{suffix || ""}
+      </span>
+    </div>
+  );
+}
+
+// ── Collapsible section ──
+
+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>
+  );
+}
+
+// ── 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>
+  );
+}

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import type { NavItem, NavDesign, PageListItem } from "../../../lib/sanity/types";
+import NavGeneralSettings from "./NavGeneralSettings";
+import NavItemSettings from "./NavItemSettings";
+
+type SettingsTab = "settings" | "layout";
+
+interface NavSettingsPanelProps {
+  selectedItem: NavItem | null;
+  items: NavItem[];
+  design: NavDesign;
+  onDesignChange: (design: NavDesign) => void;
+  onUpdateItem: (updated: NavItem) => void;
+  pages: PageListItem[];
+  fonts: string[];
+}
+
+// ── Tab button ──
+
+function TabButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-4 py-2 text-xs font-medium transition-colors border-b-2 -mb-px ${
+        active
+          ? "text-neutral-900 border-[#076bff]"
+          : "text-neutral-400 border-transparent hover:text-neutral-600"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+// ── Main panel — renders below the grid as a horizontal block ──
+
+export default function NavSettingsPanel({
+  selectedItem,
+  items,
+  design,
+  onDesignChange,
+  onUpdateItem,
+  pages,
+  fonts,
+}: NavSettingsPanelProps) {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
+  const prevKeyRef = useRef(selectedItem?._key);
+
+  // Reset to settings tab when selection changes
+  useEffect(() => {
+    if (selectedItem?._key !== prevKeyRef.current) {
+      prevKeyRef.current = selectedItem?._key;
+      setActiveTab("settings");
+    }
+  }, [selectedItem?._key]);
+
+  const isItemMode = !!selectedItem;
+  const panelTitle = isItemMode
+    ? selectedItem.type === "logo"
+      ? "Logo"
+      : selectedItem.label || "Untitled"
+    : "Navigation";
+  const panelSubtitle = isItemMode
+    ? `${selectedItem.type === "logo" ? "Logo" : "Menu Item"} · Col ${selectedItem.grid_column}${
+        selectedItem.column_span > 1
+          ? `–${selectedItem.grid_column + selectedItem.column_span - 1}`
+          : ""
+      }`
+    : `${items.length} items · 12 columns`;
+
+  return (
+    <div className="bg-neutral-50/50">
+      {/* Header + Tabs row */}
+      <div className="flex items-center gap-6 px-5 border-b border-neutral-200">
+        <div className="py-3 pr-4 border-r border-neutral-200">
+          <div className="text-[13px] font-semibold text-neutral-900 truncate">
+            {panelTitle}
+          </div>
+          <div className="text-[10px] text-neutral-400 mt-0.5">{panelSubtitle}</div>
+        </div>
+        <div className="flex gap-0.5">
+          <TabButton
+            active={activeTab === "settings"}
+            label="Settings"
+            onClick={() => setActiveTab("settings")}
+          />
+          <TabButton
+            active={activeTab === "layout"}
+            label="Layout"
+            onClick={() => setActiveTab("layout")}
+          />
+        </div>
+      </div>
+
+      {/* Content — constrained width for readability */}
+      <div className="px-5 py-4 max-w-xl">
+        {isItemMode ? (
+          <NavItemSettings
+            item={selectedItem}
+            items={items}
+            activeTab={activeTab}
+            onUpdate={onUpdateItem}
+            pages={pages}
+            fonts={fonts}
+          />
+        ) : (
+          <NavGeneralSettings
+            design={design}
+            activeTab={activeTab}
+            onChange={onDesignChange}
+            fonts={fonts}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/components/admin/nav-builder/index.ts

@@ -0,0 +1,10 @@
+export { default as NavBuilder } from "./NavBuilder";
+export { default as NavBuilderGrid } from "./NavBuilderGrid";
+export { default as NavGridCell } from "./NavGridCell";
+export { default as NavGridItem } from "./NavGridItem";
+export { default as NavItemTypePicker } from "./NavItemTypePicker";
+export { default as NavLivePreview } from "./NavLivePreview";
+export { default as NavSettingsPanel } from "./NavSettingsPanel";
+export { default as NavGeneralSettings } from "./NavGeneralSettings";
+export { default as NavItemSettings } from "./NavItemSettings";
+export * from "./nav-builder-utils";