@morphika/andami 0.1.2

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

@@ -0,0 +1,326 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  type DragStartEvent,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import type { NavItem } from "../../../lib/sanity/types";
+import {
+  TOTAL_COLUMNS,
+  getOccupiedColumns,
+  getMaxSpan,
+  canPlace,
+} from "./nav-builder-utils";
+import NavGridCell from "./NavGridCell";
+import NavGridItem from "./NavGridItem";
+import NavItemTypePicker from "./NavItemTypePicker";
+
+// ── Draggable item wrapper ──
+
+function DraggableNavItem({
+  item,
+  allItems,
+  isSelected,
+  isDragActive,
+  onSelect,
+  onDelete,
+  onSpanChange,
+}: {
+  item: NavItem;
+  allItems: NavItem[];
+  isSelected: boolean;
+  isDragActive: boolean;
+  onSelect: (key: string) => void;
+  onDelete: (key: string) => void;
+  onSpanChange: (key: string, newSpan: number) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+  } = useSortable({
+    id: item._key,
+  });
+
+  return (
+    <div ref={setNodeRef} style={{ gridColumn: `${item.grid_column} / span ${item.column_span}`, gridRow: 1 }}>
+      <NavGridItem
+        item={item}
+        allItems={allItems}
+        isSelected={isSelected}
+        onSelect={onSelect}
+        onDelete={onDelete}
+        onSpanChange={onSpanChange}
+        dragHandleProps={{ ...attributes, ...listeners }}
+        isDragging={isDragging}
+      />
+    </div>
+  );
+}
+
+// ── Droppable empty cell ──
+
+function DroppableCell({
+  column,
+  onAddItem,
+  isDragOver,
+}: {
+  column: number;
+  onAddItem: (column: number) => void;
+  isDragOver: boolean;
+}) {
+  const { setNodeRef } = useSortable({
+    id: `cell-${column}`,
+    disabled: true, // Cells aren't draggable, only drop targets
+  });
+
+  return (
+    <div ref={setNodeRef} style={{ gridColumn: column, gridRow: 1 }}>
+      <NavGridCell column={column} onAddItem={onAddItem} />
+      {isDragOver && (
+        <div className="absolute inset-0 rounded-lg ring-2 ring-[#076bff] bg-[#076bff]/10 pointer-events-none" />
+      )}
+    </div>
+  );
+}
+
+// ── Main grid ──
+
+interface NavBuilderGridProps {
+  items: NavItem[];
+  selectedKey: string | null;
+  onSelect: (key: string | null) => void;
+  onAddItem: (item: NavItem) => void;
+  onDeleteItem: (key: string) => void;
+  onUpdateItem: (updated: NavItem) => void;
+}
+
+export default function NavBuilderGrid({
+  items,
+  selectedKey,
+  onSelect,
+  onAddItem,
+  onDeleteItem,
+  onUpdateItem,
+}: NavBuilderGridProps) {
+  const [pickerColumn, setPickerColumn] = useState<number | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  const occupied = getOccupiedColumns(items);
+  const hasLogo = items.some((i) => i.type === "logo");
+
+  // Free columns
+  const freeColumns: number[] = [];
+  for (let c = 1; c <= TOTAL_COLUMNS; c++) {
+    if (!occupied.has(c)) freeColumns.push(c);
+  }
+
+  // dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  const handleAddClick = useCallback((column: number) => {
+    setPickerColumn(column);
+  }, []);
+
+  const handlePickerSelect = useCallback(
+    (type: "logo" | "menu-item", defaultSpan: number) => {
+      if (pickerColumn === null) return;
+      const maxAvailable = getMaxSpan(items, pickerColumn);
+      const span = Math.min(defaultSpan, maxAvailable);
+      if (span < 1) return;
+
+      const newItem: NavItem = {
+        _key: crypto.randomUUID().slice(0, 8),
+        type,
+        label: type === "logo" ? "LOGO" : "NEW ITEM",
+        link_type: "internal",
+        visible: true,
+        grid_column: pickerColumn,
+        column_span: span,
+      };
+
+      onAddItem(newItem);
+      onSelect(newItem._key);
+      setPickerColumn(null);
+    },
+    [items, pickerColumn, onAddItem, onSelect]
+  );
+
+  const handleSpanChange = useCallback(
+    (key: string, newSpan: number) => {
+      const item = items.find((i) => i._key === key);
+      if (!item) return;
+      onUpdateItem({ ...item, column_span: newSpan });
+    },
+    [items, onUpdateItem]
+  );
+
+  // ── Drag handlers ──
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveId(null);
+
+      if (!over) return;
+      const activeKey = active.id as string;
+      const overId = over.id as string;
+
+      // Dropped on itself
+      if (activeKey === overId) return;
+
+      const dragItem = items.find((i) => i._key === activeKey);
+      if (!dragItem) return;
+
+      // Determine target column
+      let targetColumn: number;
+
+      if (overId.startsWith("cell-")) {
+        // Dropped on empty cell
+        targetColumn = parseInt(overId.replace("cell-", ""), 10);
+      } else {
+        // Dropped on another item — swap columns
+        const overItem = items.find((i) => i._key === overId);
+        if (!overItem) return;
+        targetColumn = overItem.grid_column;
+
+        // Swap: move the other item to where the dragged item was
+        if (canPlace(items, dragItem.grid_column, overItem.column_span, overItem._key)) {
+          onUpdateItem({ ...overItem, grid_column: dragItem.grid_column });
+        }
+      }
+
+      // Check if the dragged item can be placed at target
+      if (canPlace(items, targetColumn, dragItem.column_span, dragItem._key)) {
+        onUpdateItem({ ...dragItem, grid_column: targetColumn });
+      }
+    },
+    [items, onUpdateItem]
+  );
+
+  const activeItem = activeId ? items.find((i) => i._key === activeId) : null;
+
+  return (
+    <>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div
+          ref={gridRef}
+          className="flex-1 p-5 overflow-auto"
+          onClick={() => onSelect(null)}
+        >
+          {/* Column numbers */}
+          <div
+            className="mb-1.5"
+            style={{
+              display: "grid",
+              gridTemplateColumns: `repeat(${TOTAL_COLUMNS}, 1fr)`,
+              gap: "4px",
+            }}
+          >
+            {Array.from({ length: TOTAL_COLUMNS }, (_, i) => (
+              <div
+                key={i}
+                className="text-center text-[9px] text-neutral-400 font-medium"
+              >
+                {i + 1}
+              </div>
+            ))}
+          </div>
+
+          {/* Grid */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: `repeat(${TOTAL_COLUMNS}, 1fr)`,
+              gap: "4px",
+            }}
+          >
+            {/* Placed items (draggable) */}
+            {items.map((item) => (
+              <DraggableNavItem
+                key={item._key}
+                item={item}
+                allItems={items}
+                isSelected={selectedKey === item._key}
+                isDragActive={activeId !== null}
+                onSelect={onSelect}
+                onDelete={onDeleteItem}
+                onSpanChange={handleSpanChange}
+              />
+            ))}
+
+            {/* Empty cells (drop targets + add buttons) */}
+            {freeColumns.map((col) => (
+              <DroppableCell
+                key={`empty-${col}`}
+                column={col}
+                onAddItem={handleAddClick}
+                isDragOver={false}
+              />
+            ))}
+          </div>
+
+          {/* Helper hints */}
+          <div className="mt-4 flex gap-4 text-[10px] text-neutral-400">
+            <span>
+              <span className="text-[#076bff]">+</span> Click empty column to add
+            </span>
+            <span>
+              <span className="text-neutral-500">&#x2807;</span> Drag to move
+            </span>
+            <span>
+              <span className="text-neutral-500">|</span> Drag edge to resize
+            </span>
+          </div>
+        </div>
+
+        {/* Drag overlay */}
+        <DragOverlay>
+          {activeItem ? (
+            <div
+              className="h-14 flex items-center px-3 gap-2 rounded-lg ring-2 ring-[#076bff] bg-white shadow-xl"
+              style={{ width: 120, opacity: 0.9 }}
+            >
+              <div className="text-xs font-mono text-neutral-900 uppercase tracking-wider truncate">
+                {activeItem.label || "Untitled"}
+              </div>
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+
+      {/* Type picker modal */}
+      {pickerColumn !== null && (
+        <NavItemTypePicker
+          column={pickerColumn}
+          hasLogo={hasLogo}
+          onSelect={handlePickerSelect}
+          onClose={() => setPickerColumn(null)}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,275 @@
+"use client";
+
+import type { NavDesign } from "../../../lib/sanity/types";
+import { getSiteConfig } from "../../../lib/config";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  Toggle,
+  RangeSlider,
+  Section,
+  ColorInput,
+} 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 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">
+            <SelectInput
+              value={design.color || "yellow-lime"}
+              onChange={(v) => update({ color: v as NavDesign["color"] })}
+              options={[
+                { value: "yellow-lime", label: "Yellow-Lime" },
+                { value: "yellow", label: "Yellow" },
+                { value: "red-coral", label: "Red / Coral" },
+                { value: "blue", label: "Blue" },
+                { value: "green", label: "Green" },
+                { value: "white", label: "White" },
+              ]}
+            />
+          </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">
+          <ColorInput
+            value={design.background_color || ""}
+            onChange={(v) => update({ background_color: v })}
+          />
+        </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>
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+
+interface NavGridCellProps {
+  column: number;
+  onAddItem: (column: number) => void;
+}
+
+export default function NavGridCell({ column, onAddItem }: NavGridCellProps) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onAddItem(column);
+      }}
+      className={`h-14 flex items-center justify-center cursor-pointer transition-all rounded-lg border border-dashed ${
+        hovered
+          ? "border-[#076bff]/50 bg-[#076bff]/[0.03]"
+          : "border-neutral-200 bg-transparent"
+      }`}
+      data-nav-cell={column}
+    >
+      <div
+        className={`flex flex-col items-center gap-0.5 transition-all ${
+          hovered ? "text-[#076bff]" : "text-neutral-300"
+        }`}
+        style={{
+          opacity: hovered ? 1 : 0.5,
+          transform: hovered ? "scale(1)" : "scale(0.9)",
+        }}
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M8 3v10M3 8h10"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}