@morphika/webframe 0.1.0

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

@@ -0,0 +1,238 @@
+import type { NavItem, NavDesign } from "../../../lib/sanity/types";
+
+export const TOTAL_COLUMNS = 12;
+
+// ── Occupancy helpers ──────────────────────────────────────
+
+/** Get all column numbers occupied by items, optionally excluding one item */
+export function getOccupiedColumns(items: NavItem[], excludeKey?: string): Set<number> {
+  const occupied = new Set<number>();
+  for (const item of items) {
+    if (item._key === excludeKey) continue;
+    for (let c = item.grid_column; c < item.grid_column + item.column_span; c++) {
+      if (c >= 1 && c <= TOTAL_COLUMNS) occupied.add(c);
+    }
+  }
+  return occupied;
+}
+
+/** Check if an item can be placed at column with given span */
+export function canPlace(
+  items: NavItem[],
+  column: number,
+  span: number,
+  excludeKey?: string
+): boolean {
+  if (column < 1 || column + span - 1 > TOTAL_COLUMNS) return false;
+  const occupied = getOccupiedColumns(items, excludeKey);
+  for (let c = column; c < column + span; c++) {
+    if (occupied.has(c)) return false;
+  }
+  return true;
+}
+
+/** Get maximum span from a column before hitting another item or grid edge */
+export function getMaxSpan(items: NavItem[], column: number, currentKey?: string): number {
+  const occupied = getOccupiedColumns(items, currentKey);
+  let maxSpan = 0;
+  for (let c = column; c <= TOTAL_COLUMNS; c++) {
+    if (occupied.has(c)) break;
+    maxSpan++;
+  }
+  return maxSpan;
+}
+
+/** Find the next free column from a starting point */
+export function findNextFreeColumn(items: NavItem[], from = 1): number | null {
+  const occupied = getOccupiedColumns(items);
+  for (let c = from; c <= TOTAL_COLUMNS; c++) {
+    if (!occupied.has(c)) return c;
+  }
+  return null;
+}
+
+/** Validate all items don't overlap and are in range */
+export function validateLayout(items: NavItem[]): { valid: boolean; conflicts: string[] } {
+  const conflicts: string[] = [];
+  const columnOwner = new Map<number, string>();
+
+  for (const item of items) {
+    for (let c = item.grid_column; c < item.grid_column + item.column_span; c++) {
+      if (c < 1 || c > TOTAL_COLUMNS) {
+        conflicts.push(`"${item.label}" extends beyond grid (column ${c})`);
+        continue;
+      }
+      const existing = columnOwner.get(c);
+      if (existing) {
+        conflicts.push(`Column ${c} conflict: "${item.label}" overlaps with "${existing}"`);
+      } else {
+        columnOwner.set(c, item.label);
+      }
+    }
+  }
+
+  return { valid: conflicts.length === 0, conflicts };
+}
+
+/** Get list of free (unoccupied) column numbers */
+export function getFreeColumns(items: NavItem[]): number[] {
+  const occupied = getOccupiedColumns(items);
+  const free: number[] = [];
+  for (let c = 1; c <= TOTAL_COLUMNS; c++) {
+    if (!occupied.has(c)) free.push(c);
+  }
+  return free;
+}
+
+/** Convert old format (logo in NavDesign + basic items) to new format (all items with type) */
+export function migrateNavItems(items: NavItem[], design: NavDesign): NavItem[] {
+  // Empty array = no items yet (fresh start or user deleted all). Don't auto-create anything.
+  if (items.length === 0) return [];
+
+  // Check if items already have the new format
+  const hasTypedItems = items.some((i) => i.type === "logo" || i.type === "menu-item");
+
+  if (hasTypedItems) {
+    // Already migrated — but still run cleanup to fix common data issues
+    return cleanupNavItems(items);
+  }
+
+  const migrated: NavItem[] = [];
+  const logoCols = design.logo_columns ?? 3;
+
+  // Create logo item from design
+  migrated.push({
+    _key: "logo-migrated",
+    type: "logo",
+    label: design.logo_text || "Logo",
+    link_type: "internal",
+    internal_page: undefined,
+    external_url: "",
+    visible: true,
+    grid_column: 1,
+    column_span: logoCols,
+  });
+
+  // Migrate existing items as menu-items, starting AFTER the logo span
+  let nextFreeCol = 1 + logoCols;
+  for (const item of items) {
+    const col = item.grid_column && item.grid_column > logoCols ? item.grid_column : nextFreeCol;
+    const span = item.column_span || 1;
+    migrated.push({
+      ...item,
+      type: "menu-item",
+      column_span: span,
+      grid_column: Math.min(col, TOTAL_COLUMNS),
+    });
+    nextFreeCol = col + span;
+  }
+
+  return migrated;
+}
+
+/**
+ * Clean up common data issues in nav items:
+ * - Ensure all items have a type
+ * - Ensure only ONE logo item exists (keep first, convert duplicates to menu-item)
+ * - Ensure no two items occupy the same column (resolve overlaps)
+ * - Ensure all items have valid grid_column and column_span
+ */
+function cleanupNavItems(items: NavItem[]): NavItem[] {
+  let logoFound = false;
+  const cleaned: NavItem[] = [];
+
+  for (const item of items) {
+    const patched = { ...item };
+
+    // Ensure type is set
+    if (!patched.type) {
+      patched.type = "menu-item";
+    }
+
+    // Ensure only one logo
+    if (patched.type === "logo") {
+      if (logoFound) {
+        // Duplicate logo — convert to menu-item
+        patched.type = "menu-item";
+      } else {
+        logoFound = true;
+      }
+    }
+
+    // Ensure valid grid position
+    if (!patched.grid_column || patched.grid_column < 1 || patched.grid_column > TOTAL_COLUMNS) {
+      patched.grid_column = 1;
+    }
+    if (!patched.column_span || patched.column_span < 1) {
+      patched.column_span = 1;
+    }
+    // Clamp span to not exceed grid
+    if (patched.grid_column + patched.column_span - 1 > TOTAL_COLUMNS) {
+      patched.column_span = TOTAL_COLUMNS - patched.grid_column + 1;
+    }
+
+    cleaned.push(patched);
+  }
+
+  // Resolve overlapping items — nudge overlapping items to the next free column
+  const resolved: NavItem[] = [];
+  const occupiedCols = new Set<number>();
+
+  for (const item of cleaned) {
+    // Check if this item's columns are already occupied
+    let hasOverlap = false;
+    for (let c = item.grid_column; c < item.grid_column + item.column_span; c++) {
+      if (occupiedCols.has(c)) {
+        hasOverlap = true;
+        break;
+      }
+    }
+
+    if (hasOverlap) {
+      // Find next free position that can fit this item
+      let placed = false;
+      for (let startCol = 1; startCol <= TOTAL_COLUMNS - item.column_span + 1; startCol++) {
+        let fits = true;
+        for (let c = startCol; c < startCol + item.column_span; c++) {
+          if (occupiedCols.has(c)) {
+            fits = false;
+            break;
+          }
+        }
+        if (fits) {
+          const relocated = { ...item, grid_column: startCol };
+          resolved.push(relocated);
+          for (let c = startCol; c < startCol + relocated.column_span; c++) {
+            occupiedCols.add(c);
+          }
+          placed = true;
+          break;
+        }
+      }
+      // If no space at all, shrink to span 1 and try again
+      if (!placed) {
+        for (let startCol = 1; startCol <= TOTAL_COLUMNS; startCol++) {
+          if (!occupiedCols.has(startCol)) {
+            resolved.push({ ...item, grid_column: startCol, column_span: 1 });
+            occupiedCols.add(startCol);
+            placed = true;
+            break;
+          }
+        }
+      }
+      // If still not placed (grid is full), skip this item
+      if (!placed) continue;
+    } else {
+      // No overlap — place as-is
+      resolved.push(item);
+      for (let c = item.grid_column; c < item.grid_column + item.column_span; c++) {
+        occupiedCols.add(c);
+      }
+    }
+  }
+
+  return resolved;
+}
+
+// Re-export from centralized color-utils
+export { hexToRgba } from "../../../lib/color-utils";

package/components/admin/setup-wizard/BrandingStep.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { getSiteConfig } from "../../../lib/config";
+import type { WizardStepProps } from "./SetupWizard";
+
+// ── Icons ──
+
+function CheckCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="animate-spin">
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+// ── Component ──
+
+/**
+ * Step 4 — Branding (minimal)
+ *
+ * Sets the site title via the existing settings API.
+ * Full branding (fonts, colors, typography) is available in /admin/styles.
+ */
+export function BrandingStep({ onNext, onBack }: WizardStepProps) {
+  const config = getSiteConfig();
+
+  const [siteTitle, setSiteTitle] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load current settings on mount
+  useEffect(() => {
+    fetch("/api/admin/settings")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data?.settings) {
+          // Use existing title or fall back to config default
+          setSiteTitle(data.settings.default_title || "");
+        }
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!siteTitle.trim()) {
+      setError("Please enter a site title");
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/admin/settings", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...csrfHeaders(),
+        },
+        body: JSON.stringify({
+          section: "metadata",
+          data: {
+            default_title: siteTitle.trim(),
+            default_description: "",
+            default_og_image: "",
+            favicon_path: "",
+            analytics_id: "",
+          },
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Save failed");
+        return;
+      }
+
+      setSaved(true);
+      // Auto-advance after a brief pause
+      setTimeout(() => onNext(), 600);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  }, [siteTitle, onNext]);
+
+  const inputClass =
+    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2.5 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#076bff]/20 focus:border-[#076bff]/40";
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <Spinner />
+        <p className="text-[#999] text-xs mt-3">Loading settings...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-8">
+      <h2 className="text-lg font-semibold text-[#111] mb-1">Branding</h2>
+      <p className="text-sm text-[#666] mb-8">
+        Set your site title. You can customize fonts, colors, and typography later in{" "}
+        <span className="font-medium text-[#333]">Customize</span>.
+      </p>
+
+      <div className="bg-white rounded-xl border border-black/[0.06] p-5 mb-6">
+        {/* Site Title */}
+        <div className="mb-4">
+          <label className="block text-xs font-medium text-[#666] mb-1.5">
+            Site Title
+          </label>
+          <input
+            type="text"
+            value={siteTitle}
+            onChange={(e) => {
+              setSiteTitle(e.target.value);
+              setSaved(false);
+              setError(null);
+            }}
+            placeholder={config.defaults.metaTitle || "My Website"}
+            className={inputClass}
+            maxLength={200}
+            disabled={saving}
+          />
+          <p className="text-[11px] text-[#bbb] mt-1.5">
+            Used in the browser tab, search results, and social sharing.
+          </p>
+        </div>
+
+        {/* Saved indicator */}
+        {saved && (
+          <div className="flex items-center gap-2 mt-3">
+            <CheckCircle />
+            <span className="text-xs text-green-600 font-medium">
+              Title saved
+            </span>
+          </div>
+        )}
+
+        {/* Info about further customization */}
+        <div className="mt-4 p-3 rounded-lg bg-[#f8f8f8] border border-black/[0.04]">
+          <p className="text-xs text-[#999] leading-relaxed">
+            Full branding options (logo, fonts, color palette, typography hierarchy)
+            are available in the <span className="font-medium text-[#666]">Customize</span> section
+            after setup is complete.
+          </p>
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-3 rounded-lg bg-red-50 border border-red-200 mb-6">
+          <p className="text-xs text-red-700">{error}</p>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <div>
+          {onBack && (
+            <button
+              onClick={onBack}
+              className="px-4 py-2 text-sm text-[#666] hover:text-[#333] transition-colors"
+            >
+              Back
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Skip */}
+          <button
+            onClick={onNext}
+            className="px-4 py-2 text-sm text-[#999] hover:text-[#333] transition-colors"
+          >
+            Skip for now
+          </button>
+
+          {/* Save & Continue */}
+          {!saved && (
+            <button
+              onClick={handleSave}
+              disabled={saving || !siteTitle.trim()}
+              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+            >
+              {saving ? "Saving..." : "Save & Continue"}
+            </button>
+          )}
+
+          {/* Next (after saved) */}
+          {saved && (
+            <button
+              onClick={onNext}
+              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+            >
+              Next
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}