@morphika/webframe 0.1.0

package/app/robots.ts

@@ -0,0 +1,17 @@
+import type { MetadataRoute } from "next";
+import { getSiteConfig } from "../lib/config";
+
+const cfg = getSiteConfig();
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/admin/", "/studio/", "/api/admin/"],
+      },
+    ],
+    sitemap: `${cfg.domain}/sitemap.xml`,
+  };
+}

package/app/sitemap.ts

@@ -0,0 +1,48 @@
+import type { MetadataRoute } from "next";
+import { client } from "../lib/sanity/client";
+import { allPageSlugsQuery, allProjectSlugsQuery } from "../lib/sanity/queries";
+import { getSiteConfig } from "../lib/config";
+
+const cfg = getSiteConfig();
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = cfg.domain;
+
+  // Fetch all published slugs
+  const [pageSlugs, projectSlugs] = await Promise.all([
+    client.fetch<string[]>(allPageSlugsQuery).catch(() => [] as string[]),
+    client.fetch<string[]>(allProjectSlugsQuery).catch(() => [] as string[]),
+  ]);
+
+  // Homepage
+  const routes: MetadataRoute.Sitemap = [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+  ];
+
+  // Dynamic pages (About, Contact, Archive, etc.)
+  for (const slug of pageSlugs) {
+    routes.push({
+      url: `${baseUrl}/${slug}`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    });
+  }
+
+  // Project pages
+  for (const slug of projectSlugs) {
+    routes.push({
+      url: `${baseUrl}/work/${slug}`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.7,
+    });
+  }
+
+  return routes;
+}

package/app/studio/[[...index]]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { NextStudio } from "next-sanity/studio";
+import config from "../../../sanity/sanity.config";
+
+export default function StudioPage() {
+  return <NextStudio config={config} />;
+}

package/components/admin/MetadataEditor.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getSiteConfig } from "../../lib/config";
+
+interface MetadataData {
+  default_title: string;
+  default_description: string;
+  default_og_image: string;
+  favicon_path: string;
+  analytics_id: string;
+}
+
+interface MetadataEditorProps {
+  initialData: MetadataData;
+  onSave: (data: MetadataData) => Promise<void>;
+  saving: boolean;
+}
+
+export default function MetadataEditor({
+  initialData,
+  onSave,
+  saving,
+}: MetadataEditorProps) {
+  const [title, setTitle] = useState(initialData.default_title);
+  const [description, setDescription] = useState(
+    initialData.default_description
+  );
+  const [ogImage, setOgImage] = useState(initialData.default_og_image);
+  const [favicon, setFavicon] = useState(initialData.favicon_path);
+  const [analyticsId, setAnalyticsId] = useState(initialData.analytics_id);
+
+  useEffect(() => {
+    setTitle(initialData.default_title);
+    setDescription(initialData.default_description);
+    setOgImage(initialData.default_og_image);
+    setFavicon(initialData.favicon_path);
+    setAnalyticsId(initialData.analytics_id);
+  }, [initialData]);
+
+  const handleSave = () => {
+    onSave({
+      default_title: title,
+      default_description: description,
+      default_og_image: ogImage,
+      favicon_path: favicon,
+      analytics_id: analyticsId,
+    });
+  };
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between border-b border-neutral-200 pb-2">
+        <h2 className="text-base font-semibold text-neutral-800">
+          Site Metadata
+        </h2>
+      </div>
+
+      <p className="text-xs text-neutral-400">
+        Default SEO metadata used when pages don&apos;t specify their own.
+        Affects search results and social sharing.
+      </p>
+
+      {/* Title */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default Page Title
+        </label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={getSiteConfig().defaults.metaTitle}
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        />
+        <p className="text-xs text-neutral-400">
+          Shown in browser tabs and search results when no page-specific title is
+          set.
+        </p>
+      </div>
+
+      {/* Description */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default Description
+        </label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Motion graphics studio based in Barcelona..."
+          rows={3}
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none resize-none"
+        />
+        <div className="flex justify-between">
+          <p className="text-xs text-neutral-400">
+            Used in search results and social media previews.
+          </p>
+          <span
+            className={`text-xs ${
+              description.length > 160 ? "text-red-400" : "text-neutral-400"
+            }`}
+          >
+            {description.length}/160
+          </span>
+        </div>
+      </div>
+
+      {/* OG Image */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Default OG Image Path
+        </label>
+        <input
+          type="text"
+          value={ogImage}
+          onChange={(e) => setOgImage(e.target.value)}
+          placeholder="meta/og-image.jpg"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        />
+        <p className="text-xs text-neutral-400">
+          Relative path to the default image shown when sharing on social media.
+          Resolved via the asset seed URL.
+        </p>
+      </div>
+
+      {/* Favicon */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Favicon Path
+        </label>
+        <input
+          type="text"
+          value={favicon}
+          onChange={(e) => setFavicon(e.target.value)}
+          placeholder="meta/favicon.ico"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        />
+        <p className="text-xs text-neutral-400">
+          Relative path to the favicon. Resolved via the asset seed URL.
+        </p>
+      </div>
+
+      {/* Analytics ID */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-neutral-500">
+          Analytics ID (optional)
+        </label>
+        <input
+          type="text"
+          value={analyticsId}
+          onChange={(e) => setAnalyticsId(e.target.value)}
+          placeholder="G-XXXXXXXXXX or plausible domain"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        />
+        <p className="text-xs text-neutral-400">
+          Google Analytics measurement ID or Plausible domain. Leave empty to
+          disable analytics.
+        </p>
+      </div>
+
+      {/* Save */}
+      <div className="flex justify-end">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+        >
+          {saving ? "Saving..." : "Save Metadata"}
+        </button>
+      </div>
+    </section>
+  );
+}

package/components/admin/PublishToggle.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+/* ------------------------------------------------------------------ */
+/*  PublishToggle                                                      */
+/*  Segmented toggle: [ Draft | Published ]                            */
+/*  Active side is highlighted, inactive is subdued.                   */
+/*  Two modes:                                                         */
+/*    1. Builder (store) — uses Zustand store actions directly         */
+/*    2. List (api) — calls POST to /api/admin/pages/[slug]           */
+/* ------------------------------------------------------------------ */
+
+interface BuilderModeProps {
+  mode: "builder";
+  isDraft: boolean;
+  onPublish: () => void;
+  onUnpublish: () => void;
+}
+
+interface ApiModeProps {
+  mode: "api";
+  isDraft: boolean;
+  slug: string;
+  onToggled?: () => void;
+}
+
+type PublishToggleProps = BuilderModeProps | ApiModeProps;
+
+export default function PublishToggle(props: PublishToggleProps) {
+  const { isDraft } = props;
+  const [busy, setBusy] = useState(false);
+
+  const setDraft = useCallback(async (makeDraft: boolean) => {
+    // Already in the desired state
+    if (makeDraft === isDraft) return;
+
+    if (props.mode === "builder") {
+      if (makeDraft) props.onUnpublish();
+      else props.onPublish();
+      return;
+    }
+
+    // API mode
+    setBusy(true);
+    try {
+      const csrfToken =
+        document.cookie
+          .split("; ")
+          .find((c) => c.startsWith("csrf_token="))
+          ?.split("=")[1] ?? "";
+
+      const res = await fetch(`/api/admin/pages/${props.slug}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": csrfToken,
+        },
+        body: JSON.stringify({
+          draft_mode: makeDraft,
+          published_at: makeDraft ? null : new Date().toISOString(),
+        }),
+      });
+
+      if (res.ok) {
+        props.onToggled?.();
+      } else {
+        const data = await res.json().catch(() => ({ error: "Failed" }));
+        console.error("Toggle publish failed:", data.error || `HTTP ${res.status}`);
+      }
+    } catch (err) {
+      console.error("Toggle publish failed:", err);
+    } finally {
+      setBusy(false);
+    }
+  }, [props, isDraft]);
+
+  return (
+    <div
+      className="inline-flex items-center rounded-full bg-neutral-100 select-none"
+      style={{ padding: 2, gap: 0 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Draft side */}
+      <button
+        type="button"
+        onClick={() => setDraft(true)}
+        disabled={busy}
+        style={{
+          padding: "2px 10px",
+          fontSize: 11,
+          fontWeight: 500,
+          lineHeight: "20px",
+          borderRadius: 9999,
+          border: "none",
+          cursor: "pointer",
+          whiteSpace: "nowrap",
+          transition: "background-color 150ms, color 150ms",
+          backgroundColor: isDraft ? "#f59e0b" : "transparent",
+          color: isDraft ? "#fff" : "#a3a3a3",
+          ...(busy ? { opacity: 0.5 } : {}),
+        }}
+      >
+        Draft
+      </button>
+      {/* Published side */}
+      <button
+        type="button"
+        onClick={() => setDraft(false)}
+        disabled={busy}
+        style={{
+          padding: "2px 10px",
+          fontSize: 11,
+          fontWeight: 500,
+          lineHeight: "20px",
+          borderRadius: 9999,
+          border: "none",
+          cursor: "pointer",
+          whiteSpace: "nowrap",
+          transition: "background-color 150ms, color 150ms",
+          backgroundColor: !isDraft ? "#10b981" : "transparent",
+          color: !isDraft ? "#fff" : "#a3a3a3",
+          ...(busy ? { opacity: 0.5 } : {}),
+        }}
+      >
+        Published
+      </button>
+    </div>
+  );
+}

package/components/admin/icons.tsx

@@ -0,0 +1,40 @@
+// ============================================
+// Shared Admin Action Icons
+// ============================================
+// Extracted from pages/page.tsx and projects/page.tsx (Session 131)
+
+export function EditIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+    </svg>
+  );
+}
+
+export function DuplicateIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="9" y="9" width="13" height="13" rx="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+export function DeleteIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+}
+
+export function PreviewIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,182 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import type { NavItem, NavDesign, PageListItem } from "../../../lib/sanity/types";
+import { migrateNavItems, validateLayout } from "./nav-builder-utils";
+import NavBuilderGrid from "./NavBuilderGrid";
+import NavLivePreview from "./NavLivePreview";
+import NavSettingsPanel from "./NavSettingsPanel";
+
+interface NavBuilderProps {
+  initialItems: NavItem[];
+  initialDesign: NavDesign;
+  onSave: (items: NavItem[], design: NavDesign) => Promise<void>;
+  saving: boolean;
+}
+
+export default function NavBuilder({
+  initialItems,
+  initialDesign,
+  onSave,
+  saving,
+}: NavBuilderProps) {
+  // ── Migrate items from old format if needed ──
+  const [items, setItems] = useState<NavItem[]>(() =>
+    migrateNavItems(initialItems, initialDesign)
+  );
+  const [design, setDesign] = useState<NavDesign>(initialDesign);
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [pages, setPages] = useState<PageListItem[]>([]);
+  const [fonts, setFonts] = useState<string[]>([]);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // Sync from parent on external refresh
+  useEffect(() => {
+    setItems(migrateNavItems(initialItems, initialDesign));
+  }, [initialItems, initialDesign]);
+
+  useEffect(() => {
+    setDesign(initialDesign);
+  }, [initialDesign]);
+
+  // Load pages and fonts
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch("/api/admin/pages");
+        if (res.ok) {
+          const data = await res.json();
+          setPages(data.pages || []);
+        }
+      } catch {
+        /* silent */
+      }
+    })();
+    (async () => {
+      try {
+        const res = await fetch("/api/admin/styles", { credentials: "include" });
+        if (res.ok) {
+          const data = await res.json();
+          const families = (data.styles?.fonts || []).map(
+            (f: { family: string }) => f.family
+          );
+          if (families.length > 0) setFonts(families);
+        }
+      } catch {
+        /* silent */
+      }
+    })();
+  }, []);
+
+  // Mark changes
+  const markChanged = useCallback(() => {
+    setHasChanges(true);
+  }, []);
+
+  // ── Item CRUD ──
+  const handleAddItem = useCallback(
+    (newItem: NavItem) => {
+      setItems((prev) => [...prev, newItem]);
+      markChanged();
+    },
+    [markChanged]
+  );
+
+  const handleDeleteItem = useCallback(
+    (key: string) => {
+      setItems((prev) => prev.filter((i) => i._key !== key));
+      if (selectedKey === key) setSelectedKey(null);
+      markChanged();
+    },
+    [selectedKey, markChanged]
+  );
+
+  const handleUpdateItem = useCallback(
+    (updated: NavItem) => {
+      setItems((prev) =>
+        prev.map((i) => (i._key === updated._key ? updated : i))
+      );
+      markChanged();
+    },
+    [markChanged]
+  );
+
+  const handleDesignChange = useCallback(
+    (newDesign: NavDesign) => {
+      setDesign(newDesign);
+      markChanged();
+    },
+    [markChanged]
+  );
+
+  // ── Save ──
+  const handleSave = useCallback(async () => {
+    const validation = validateLayout(items);
+    if (!validation.valid) {
+      alert(`Layout conflicts:\n${validation.conflicts.join("\n")}`);
+      return;
+    }
+    await onSave(items, design);
+    setHasChanges(false);
+  }, [items, design, onSave]);
+
+  const selectedItem = items.find((i) => i._key === selectedKey) || null;
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200">
+      {/* Top bar */}
+      <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
+        <div>
+          <div className="text-sm font-semibold text-neutral-900">Grid Layout · 12 Columns</div>
+          <div className="text-[11px] text-neutral-400 mt-0.5">
+            {items.length} items · Click empty columns to add · Drag to reposition
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {hasChanges && (
+            <span className="text-[11px] text-amber-500 font-medium">
+              Unsaved changes
+            </span>
+          )}
+          <button
+            onClick={handleSave}
+            disabled={saving || !hasChanges}
+            className={`px-5 py-1.5 text-sm font-medium rounded-lg transition-all ${
+              saving || !hasChanges
+                ? "bg-neutral-100 text-neutral-400 cursor-not-allowed"
+                : "bg-[#076bff] text-white hover:bg-[#0559d4]"
+            }`}
+          >
+            {saving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+
+      {/* Live preview */}
+      <NavLivePreview items={items} design={design} />
+
+      {/* Grid editor */}
+      <NavBuilderGrid
+        items={items}
+        selectedKey={selectedKey}
+        onSelect={setSelectedKey}
+        onAddItem={handleAddItem}
+        onDeleteItem={handleDeleteItem}
+        onUpdateItem={handleUpdateItem}
+      />
+
+      {/* Settings panel — below the grid */}
+      <div className="border-t border-neutral-200">
+        <NavSettingsPanel
+          selectedItem={selectedItem}
+          items={items}
+          design={design}
+          onDesignChange={handleDesignChange}
+          onUpdateItem={handleUpdateItem}
+          pages={pages}
+          fonts={fonts}
+        />
+      </div>
+    </div>
+  );
+}