@morphika/webframe 0.1.0

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

@@ -0,0 +1,189 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import type { NavItem } from "../../../lib/sanity/types";
+import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
+
+interface NavGridItemProps {
+  item: NavItem;
+  allItems: NavItem[];
+  isSelected: boolean;
+  onSelect: (key: string) => void;
+  onDelete: (key: string) => void;
+  onSpanChange: (key: string, newSpan: number) => void;
+  /** Drag handle props from dnd-kit */
+  dragHandleProps?: Record<string, unknown>;
+  isDragging?: boolean;
+}
+
+export default function NavGridItem({
+  item,
+  allItems,
+  isSelected,
+  onSelect,
+  onDelete,
+  onSpanChange,
+  dragHandleProps,
+  isDragging,
+}: NavGridItemProps) {
+  const [hovered, setHovered] = useState(false);
+  const [resizing, setResizing] = useState(false);
+  const resizeStartX = useRef(0);
+  const resizeStartSpan = useRef(item.column_span);
+  const cellWidth = useRef(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isLogo = item.type === "logo";
+  const showControls = hovered || isSelected;
+
+  // ── Resize logic ──
+  const maxSpan = getMaxSpan(allItems, item.grid_column, item._key);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setResizing(true);
+      resizeStartX.current = e.clientX;
+      resizeStartSpan.current = item.column_span;
+
+      // Calculate approximate cell width from container
+      const grid = containerRef.current?.parentElement;
+      if (grid) {
+        cellWidth.current = grid.getBoundingClientRect().width / TOTAL_COLUMNS;
+      }
+    },
+    [item.column_span]
+  );
+
+  useEffect(() => {
+    if (!resizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const dx = e.clientX - resizeStartX.current;
+      const colDelta = Math.round(dx / cellWidth.current);
+      const newSpan = Math.max(1, Math.min(maxSpan, resizeStartSpan.current + colDelta));
+      if (newSpan !== item.column_span) {
+        onSpanChange(item._key, newSpan);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setResizing(false);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizing, item._key, item.column_span, maxSpan, onSpanChange]);
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect(item._key);
+      }}
+      style={{
+        opacity: isDragging ? 0.3 : 1,
+      }}
+      className={`h-14 relative flex items-center px-3 gap-2 cursor-pointer rounded-lg transition-all border ${
+        isSelected
+          ? "border-[#076bff] bg-[#076bff]/5 shadow-sm"
+          : hovered
+          ? "border-neutral-300 bg-neutral-50"
+          : "border-neutral-200 bg-white"
+      }`}
+      data-nav-item={item._key}
+    >
+      {/* Drag handle */}
+      <div
+        className="shrink-0 cursor-grab transition-opacity text-neutral-400 hover:text-neutral-600"
+        style={{ opacity: showControls ? 1 : 0 }}
+        {...(dragHandleProps || {})}
+      >
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <circle cx="4" cy="3" r="1" fill="currentColor" />
+          <circle cx="8" cy="3" r="1" fill="currentColor" />
+          <circle cx="4" cy="6" r="1" fill="currentColor" />
+          <circle cx="8" cy="6" r="1" fill="currentColor" />
+          <circle cx="4" cy="9" r="1" fill="currentColor" />
+          <circle cx="8" cy="9" r="1" fill="currentColor" />
+        </svg>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div
+          className="text-neutral-900 font-mono whitespace-nowrap overflow-hidden text-ellipsis uppercase tracking-wider"
+          style={{
+            fontSize: isLogo ? 13 : 11,
+            fontWeight: isLogo ? 700 : 500,
+          }}
+        >
+          {item.label || "Untitled"}
+        </div>
+        <div className="text-[9px] text-neutral-400 mt-0.5 uppercase">
+          {isLogo ? "Logo" : "Link"} · Col {item.grid_column}
+          {item.column_span > 1
+            ? `–${item.grid_column + item.column_span - 1}`
+            : ""}
+        </div>
+      </div>
+
+      {/* Column span badge */}
+      {showControls && (
+        <div
+          className="absolute -top-2 -right-2 text-[9px] font-semibold px-1.5 py-0 rounded text-white"
+          style={{
+            background: isSelected ? "#076bff" : "#a3a3a3",
+          }}
+        >
+          {item.column_span}/{TOTAL_COLUMNS}
+        </div>
+      )}
+
+      {/* Delete button */}
+      {showControls && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(item._key);
+          }}
+          className="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-sm"
+          title="Remove item"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10">
+            <path
+              d="M2 2l6 6M8 2l-6 6"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      )}
+
+      {/* Resize handle (right edge) */}
+      <div
+        onMouseDown={handleResizeStart}
+        className="absolute -right-1 top-1/2 -translate-y-1/2 w-2 h-6 rounded cursor-col-resize transition-all"
+        style={{
+          background: resizing
+            ? "#076bff"
+            : isSelected
+            ? "#076bff"
+            : hovered
+            ? "#a3a3a3"
+            : "transparent",
+          opacity: showControls || resizing ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState } from "react";
+import type { NavItem, PageListItem } from "../../../lib/sanity/types";
+import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  Section,
+  ColorInput,
+} from "./NavSettingsFields";
+import AssetBrowser from "../../../components/builder/AssetBrowser";
+
+interface NavItemSettingsProps {
+  item: NavItem;
+  items: NavItem[];
+  activeTab: "settings" | "layout";
+  onUpdate: (updated: NavItem) => void;
+  pages: PageListItem[];
+  fonts: string[];
+}
+
+export default function NavItemSettings({
+  item,
+  items,
+  activeTab,
+  onUpdate,
+  pages,
+  fonts,
+}: NavItemSettingsProps) {
+  const isLogo = item.type === "logo";
+  const maxSpan = getMaxSpan(items, item.grid_column, item._key);
+  const [showAssetBrowser, setShowAssetBrowser] = useState(false);
+
+  const update = (partial: Partial<NavItem>) =>
+    onUpdate({ ...item, ...partial });
+
+  const updateOverride = (key: string, value: unknown) => {
+    const overrides = { ...item.style_overrides };
+    if (value === "" || value === undefined || value === null) {
+      delete (overrides as Record<string, unknown>)[key];
+    } else {
+      (overrides as Record<string, unknown>)[key] = value;
+    }
+    update({ style_overrides: overrides });
+  };
+
+  if (activeTab === "settings") {
+    return (
+      <>
+        <Section title={isLogo ? "LOGO" : "CONTENT"}>
+          <Field label={isLogo ? "Text" : "Label"}>
+            <TextInput
+              value={item.label}
+              onChange={(v) => update({ label: v })}
+              placeholder={isLogo ? "Brand name" : "Link text"}
+            />
+          </Field>
+          {isLogo && (
+            <Field label="Image">
+              <button className="w-full py-4 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                  <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+                  <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                </svg>
+                {item.logo_image ? (
+                  <span className="text-[#076bff] truncate max-w-full">
+                    {item.logo_image.split("/").pop()}
+                  </span>
+                ) : (
+                  "Browse image..."
+                )}
+              </button>
+            </Field>
+          )}
+        </Section>
+
+        <Section title="LINK">
+          <Field label="Type">
+            <SegmentedControl
+              value={item.link_type}
+              onChange={(v) => update({ link_type: v as "internal" | "external" | "content" })}
+              options={[
+                { value: "internal", label: "Page" },
+                { value: "external", label: "URL" },
+                { value: "content", label: "Content" },
+              ]}
+            />
+          </Field>
+          {item.link_type === "internal" ? (
+            <Field label="Page">
+              <SelectInput
+                value={item.internal_page?._id || ""}
+                onChange={(v) => {
+                  const page = pages.find((p) => p._id === v);
+                  update({
+                    internal_page: page
+                      ? { _id: page._id, title: page.title, slug: page.slug, page_type: page.page_type }
+                      : undefined,
+                  });
+                }}
+                options={[
+                  { value: "", label: "— Select page —" },
+                  ...pages.map((p) => ({
+                    value: p._id,
+                    label: p.title || (typeof p.slug === "string" ? p.slug : p.slug.current),
+                  })),
+                ]}
+              />
+            </Field>
+          ) : item.link_type === "external" ? (
+            <Field label="URL">
+              <TextInput
+                value={item.external_url || ""}
+                onChange={(v) => update({ external_url: v })}
+                placeholder="https://..."
+              />
+            </Field>
+          ) : (
+            <>
+              <Field label="Media">
+                <SegmentedControl
+                  value={item.content_type || "image"}
+                  onChange={(v) => update({ content_type: v as "image" | "video-file" | "video-embed" })}
+                  options={[
+                    { value: "image", label: "Image" },
+                    { value: "video-file", label: "Video" },
+                    { value: "video-embed", label: "Embed" },
+                  ]}
+                />
+              </Field>
+              {(item.content_type || "image") !== "video-embed" ? (
+                <Field label="Asset">
+                  <button
+                    onClick={() => setShowAssetBrowser(true)}
+                    className="w-full py-3 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
+                  >
+                    <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+                      <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                      <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+                      <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                    </svg>
+                    {item.content_asset ? (
+                      <span className="text-[#076bff] truncate max-w-full">
+                        {item.content_asset.split("/").pop()}
+                      </span>
+                    ) : (
+                      "Browse asset..."
+                    )}
+                  </button>
+                </Field>
+              ) : (
+                <Field label="URL">
+                  <TextInput
+                    value={item.content_url || ""}
+                    onChange={(v) => update({ content_url: v })}
+                    placeholder="https://youtube.com/watch?v=... or vimeo.com/..."
+                  />
+                </Field>
+              )}
+            </>
+          )}
+        </Section>
+
+        <AssetBrowser
+          open={showAssetBrowser}
+          onSelect={(path) => {
+            update({ content_asset: path });
+            setShowAssetBrowser(false);
+          }}
+          onClose={() => setShowAssetBrowser(false)}
+          filterType={item.content_type === "video-file" ? "video" : item.content_type === "image" ? "image" : "all"}
+        />
+      </>
+    );
+  }
+
+  // Layout tab
+  return (
+    <>
+      <Section title="GRID PLACEMENT">
+        <Field label="Column">
+          <TextInput
+            value={item.grid_column}
+            onChange={(v) => {
+              const col = Math.max(1, Math.min(TOTAL_COLUMNS, parseInt(v) || 1));
+              update({ grid_column: col });
+            }}
+            type="number"
+          />
+        </Field>
+        <Field label="Span">
+          <TextInput
+            value={item.column_span}
+            onChange={(v) => {
+              const span = Math.max(1, Math.min(maxSpan, parseInt(v) || 1));
+              update({ column_span: span });
+            }}
+            type="number"
+          />
+        </Field>
+        <div className="text-[10px] text-neutral-400 mt-1 ml-[76px]">
+          Max available: {maxSpan} columns
+        </div>
+      </Section>
+
+      <Section title="ALIGNMENT">
+        <Field label="V. Align">
+          <SegmentedControl
+            value={item.style_overrides?.vertical_align || ""}
+            onChange={(v) => updateOverride("vertical_align", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { value: "top", label: "Top" },
+              { value: "middle", label: "Mid" },
+              { value: "bottom", label: "Bot" },
+            ]}
+          />
+        </Field>
+      </Section>
+
+      <Section title="STYLE OVERRIDES">
+        <div className="text-[10px] text-neutral-400 italic mb-2">
+          Override general nav settings for this item
+        </div>
+        <Field label="Font size">
+          <TextInput
+            value={item.style_overrides?.font_size ?? ""}
+            onChange={(v) => updateOverride("font_size", v ? parseInt(v) : undefined)}
+            placeholder="Inherit"
+            type="number"
+          />
+        </Field>
+        <Field label="Weight">
+          <SelectInput
+            value={item.style_overrides?.font_weight || ""}
+            onChange={(v) => updateOverride("font_weight", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { 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="Font">
+          <SelectInput
+            value={item.style_overrides?.font_family || ""}
+            onChange={(v) => updateOverride("font_family", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              ...fonts.map((f) => ({ value: f, label: f })),
+            ]}
+          />
+        </Field>
+        <Field label="Color">
+          <ColorInput
+            value={item.style_overrides?.color || ""}
+            onChange={(v) => updateOverride("color", v || undefined)}
+            placeholder="Inherit"
+          />
+        </Field>
+        <Field label="Transform">
+          <SelectInput
+            value={item.style_overrides?.text_transform || ""}
+            onChange={(v) => updateOverride("text_transform", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { value: "uppercase", label: "UPPERCASE" },
+              { value: "none", label: "None" },
+              { value: "lowercase", label: "lowercase" },
+              { value: "capitalize", label: "Capitalize" },
+            ]}
+          />
+        </Field>
+      </Section>
+    </>
+  );
+}

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface NavItemTypePickerProps {
+  column: number;
+  onSelect: (type: "logo" | "menu-item", defaultSpan: number) => void;
+  onClose: () => void;
+  hasLogo: boolean; // prevent adding multiple logos
+}
+
+const ITEM_TYPES = [
+  {
+    type: "logo" as const,
+    label: "Logo",
+    description: "Brand logo (text or image)",
+    defaultSpan: 3,
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M6 10h8M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+        <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+      </svg>
+    ),
+  },
+  {
+    type: "menu-item" as const,
+    label: "Menu Item",
+    description: "Navigation link",
+    defaultSpan: 1,
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M4 7h12M4 10h8M4 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+];
+
+export default function NavItemTypePicker({
+  column,
+  onSelect,
+  onClose,
+  hasLogo,
+}: NavItemTypePickerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  // Focus trap
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+
+  const types = hasLogo
+    ? ITEM_TYPES.filter((t) => t.type !== "logo")
+    : ITEM_TYPES;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ background: "rgba(0,0,0,0.2)", backdropFilter: "blur(4px)" }}
+      onClick={onClose}
+    >
+      <div
+        ref={ref}
+        tabIndex={-1}
+        className="outline-none bg-white border border-neutral-200 rounded-2xl p-6 shadow-2xl"
+        style={{ width: 320 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="text-[13px] font-semibold text-neutral-900 mb-1">Add Nav Item</div>
+        <div className="text-[11px] text-neutral-500 mb-4">Column {column}</div>
+        <div className="flex flex-col gap-2">
+          {types.map((t) => (
+            <button
+              key={t.type}
+              onClick={() => onSelect(t.type, t.defaultSpan)}
+              className="flex items-center gap-3 p-3 rounded-xl border border-neutral-200 bg-white text-left transition-colors hover:border-[#076bff] hover:bg-[#076bff]/[0.02]"
+            >
+              <div className="w-10 h-10 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center text-[#076bff] shrink-0">
+                {t.icon}
+              </div>
+              <div>
+                <div className="text-[13px] font-medium text-neutral-900">{t.label}</div>
+                <div className="text-[11px] text-neutral-500 mt-0.5">
+                  {t.description}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}