@morphika/webframe 0.1.0

package/app/api/admin/styles/route.ts

@@ -0,0 +1,304 @@
+import { NextRequest, NextResponse } from "next/server";
+import { isAdminAuthenticated } from "../../../../lib/auth";
+import { client } from "../../../../lib/sanity/client";
+import { writeClient } from "../../../../lib/sanity/writeClient";
+import { siteStylesQuery } from "../../../../lib/sanity/queries";
+import { validateCsrf, csrfErrorResponse } from "../../../../lib/csrf";
+import { isBodyTooLarge, MAX_JSON_BODY_SIZE } from "../../../../lib/security";
+import { logger } from "../../../../lib/logger";
+import { DEFAULT_GRID_WIDTH } from "../../../../lib/builder/constants";
+import { getSiteConfig } from "../../../../lib/config";
+
+/**
+ * GET /api/admin/styles — fetch siteStyles document
+ * POST /api/admin/styles — update siteStyles sections (authenticated)
+ */
+
+const STYLES_ID = "siteStyles";
+
+// Default values for a fresh siteStyles document.
+// Reads font name and palette from site.config.ts so different instances
+// get their own defaults without changing this file.
+function getDefaultStyles() {
+  const cfg = getSiteConfig();
+  const font = cfg.typography.defaultFont;
+  const pal = cfg.palette;
+
+  // Build built-in font entries from config
+  const builtinFonts = cfg.typography.builtinFonts || [];
+  const fontEntries = builtinFonts.length > 0
+    ? [{
+        _key: "builtin_default",
+        family: font,
+        is_builtin: true,
+        variants: builtinFonts
+          .filter((f) => f.family === font)
+          .map((f, i) => ({
+            _key: `builtin_${i}`,
+            weight: f.weight || "400",
+            style: (f.style || "normal") as "normal" | "italic",
+            file_url: f.src,
+            original_filename: f.src.split("/").pop() || "",
+          })),
+      }]
+    : [];
+
+  return {
+    _id: STYLES_ID,
+    _type: "siteStyles",
+    fonts: fontEntries,
+    typography_h1: { font_family: font, font_size: "3rem", font_weight: "700", line_height: "1.1", letter_spacing: "-0.02em", text_transform: "none" },
+    typography_h2: { font_family: font, font_size: "2rem", font_weight: "700", line_height: "1.2", letter_spacing: "-0.01em", text_transform: "none" },
+    typography_h3: { font_family: font, font_size: "1.5rem", font_weight: "500", line_height: "1.3", letter_spacing: "0", text_transform: "none" },
+    typography_h4: { font_family: font, font_size: "1.125rem", font_weight: "500", line_height: "1.4", letter_spacing: "0", text_transform: "none" },
+    typography_body: { font_family: font, font_size: "0.875rem", font_weight: "400", line_height: "1.6", letter_spacing: "0", text_transform: "none" },
+    typography_small: { font_family: font, font_size: "0.75rem", font_weight: "400", line_height: "1.5", letter_spacing: "0.02em", text_transform: "none" },
+    grid_width: DEFAULT_GRID_WIDTH,
+    grid_outer_padding: "30",
+    grid_gutter_desktop: "30",
+    grid_gutter_responsive: "30",
+    grid_gutter_phone: "16",
+    color_palette: [],
+    // Legacy fields — use config palette as defaults
+    color_background: pal.background,
+    color_text: pal.text,
+    color_primary: pal.primary,
+    color_secondary: pal.secondary,
+    color_accent: pal.accentAlt || pal.accent,
+    color_muted: pal.muted,
+    link_color: pal.primary,
+    link_hover_color: pal.primary,
+    link_underline: true,
+    button_primary_bg: "#ffffff",
+    button_primary_text: "#000000",
+    button_secondary_bg: "#1a1a1a",
+    button_secondary_text: "#ffffff",
+    button_border_radius: "8px",
+  };
+}
+
+export async function GET() {
+  const authenticated = await isAdminAuthenticated();
+  if (!authenticated) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const cfg = getSiteConfig();
+    let styles = await client.fetch(siteStylesQuery);
+
+    // Auto-create if missing
+    if (!styles) {
+      await writeClient.createIfNotExists(getDefaultStyles());
+      styles = await client.fetch(siteStylesQuery);
+    }
+
+    // Transform flat Sanity fields → nested SiteStyles structure
+    const transformed = {
+      grid: {
+        width: styles.grid_width || DEFAULT_GRID_WIDTH,
+        outer_padding: styles.grid_outer_padding || "30",
+        gutter_desktop: styles.grid_gutter_desktop || "30",
+        gutter_responsive: styles.grid_gutter_responsive || "30",
+        gutter_phone: styles.grid_gutter_phone || "16",
+      },
+      fonts: styles.fonts || [],
+      typography: {
+        h1: styles.typography_h1 || null,
+        h2: styles.typography_h2 || null,
+        h3: styles.typography_h3 || null,
+        h4: styles.typography_h4 || null,
+        body: styles.typography_body || null,
+        small: styles.typography_small || null,
+      },
+      colors: {
+        swatches: (styles.color_palette || []).map((s: { _key?: string; name?: string; hex?: string }) => ({
+          _key: s._key || "",
+          name: s.name || "",
+          hex: s.hex || "#000000",
+        })),
+        // Legacy fields — config palette as fallback
+        background: styles.color_background || cfg.palette.background,
+        text: styles.color_text || cfg.palette.text,
+        primary: styles.color_primary || cfg.palette.primary,
+        secondary: styles.color_secondary || cfg.palette.secondary,
+        accent: styles.color_accent || cfg.palette.accent,
+        muted: styles.color_muted || cfg.palette.muted,
+      },
+      link_style: {
+        color: styles.link_color || cfg.palette.primary,
+        hover_color: styles.link_hover_color || cfg.palette.primary,
+        underline: styles.link_underline ?? true,
+      },
+      button_style: {
+        primary_bg: styles.button_primary_bg || "#ffffff",
+        primary_text: styles.button_primary_text || "#000000",
+        secondary_bg: styles.button_secondary_bg || "#1a1a1a",
+        secondary_text: styles.button_secondary_text || "#ffffff",
+        border_radius: styles.button_border_radius || "8px",
+      },
+      disable_scroll_animations_mobile: styles.disable_scroll_animations_mobile ?? false,
+    };
+
+    return NextResponse.json({ styles: transformed });
+  } catch (error) {
+    logger.error("[Admin:Styles]", "Failed to fetch styles:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch styles" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const authenticated = await isAdminAuthenticated();
+  if (!authenticated) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!validateCsrf(request)) {
+    return csrfErrorResponse();
+  }
+  if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
+    return NextResponse.json({ error: "Request body too large" }, { status: 413 });
+  }
+
+  try {
+    const body = await request.json();
+    const { section, data } = body;
+
+    if (!section || !data) {
+      return NextResponse.json(
+        { error: "Missing section or data" },
+        { status: 400 }
+      );
+    }
+
+    const validSections = ["grid", "fonts", "typography", "colors", "links"];
+    if (!validSections.includes(section)) {
+      return NextResponse.json(
+        { error: `Invalid section: ${section}` },
+        { status: 400 }
+      );
+    }
+
+    let patch: Record<string, unknown> = {};
+
+    switch (section) {
+      case "grid": {
+        for (const key of ["grid_width", "grid_outer_padding", "grid_gutter_desktop", "grid_gutter_responsive", "grid_gutter_phone"]) {
+          if (data[key] !== undefined) {
+            patch[key] = data[key];
+          }
+        }
+        break;
+      }
+
+      case "fonts": {
+        interface FontInput {
+          _key?: string;
+          family: string;
+          is_builtin?: boolean;
+          variants?: VariantInput[];
+        }
+        interface VariantInput {
+          _key?: string;
+          weight?: string;
+          style?: string;
+          file_url?: string;
+          file_id?: string;
+          original_filename?: string;
+        }
+        patch = {
+          fonts: (data.fonts || []).map(
+            (font: FontInput) => ({
+              _key: font._key || crypto.randomUUID().slice(0, 8),
+              _type: "object",
+              family: font.family,
+              is_builtin: font.is_builtin || false,
+              variants: (font.variants || []).map(
+                (v: VariantInput) => ({
+                  _key: v._key || crypto.randomUUID().slice(0, 8),
+                  _type: "object",
+                  weight: v.weight || "400",
+                  style: v.style || "normal",
+                  file_url: v.file_url || "",
+                  file_id: v.file_id || "",
+                  original_filename: v.original_filename || "",
+                })
+              ),
+            })
+          ),
+        };
+        break;
+      }
+
+      case "typography": {
+        // Data contains typography_h1, typography_h2, etc.
+        for (const level of ["h1", "h2", "h3", "h4", "body", "small"]) {
+          const key = `typography_${level}`;
+          if (data[key]) {
+            patch[key] = data[key];
+          }
+        }
+        break;
+      }
+
+      case "colors": {
+        // New palette-based colors
+        if (data.color_palette !== undefined) {
+          interface SwatchInput { _key?: string; _type?: string; name?: string; hex?: string }
+          patch.color_palette = (data.color_palette as SwatchInput[]).map((s: SwatchInput) => ({
+            _key: s._key || crypto.randomUUID().slice(0, 8),
+            _type: "object",
+            name: s.name || "Unnamed",
+            hex: s.hex || "#000000",
+          }));
+        }
+        // Legacy fixed color fields (backward compat)
+        for (const key of ["color_background", "color_text", "color_primary", "color_secondary", "color_accent", "color_muted"]) {
+          if (data[key] !== undefined) {
+            patch[key] = data[key];
+          }
+        }
+        break;
+      }
+
+      case "links": {
+        for (const key of [
+          "link_color", "link_hover_color", "link_underline",
+          "button_primary_bg", "button_primary_text",
+          "button_secondary_bg", "button_secondary_text",
+          "button_border_radius",
+        ]) {
+          if (data[key] !== undefined) {
+            patch[key] = data[key];
+          }
+        }
+        break;
+      }
+
+      case "animations": {
+        if (data.disable_scroll_animations_mobile !== undefined) {
+          patch.disable_scroll_animations_mobile = !!data.disable_scroll_animations_mobile;
+        }
+        break;
+      }
+    }
+
+    // Ensure the document exists
+    await writeClient.createIfNotExists({
+      _id: STYLES_ID,
+      _type: "siteStyles",
+    });
+
+    await writeClient.patch(STYLES_ID).set(patch).commit();
+
+    return NextResponse.json({ success: true, section });
+  } catch (error) {
+    logger.error("[Admin:Styles]", "Failed to save styles:", error);
+    return NextResponse.json(
+      { error: "Failed to save styles" },
+      { status: 500 }
+    );
+  }
+}

package/app/api/assets/[...path]/route.ts

@@ -0,0 +1,98 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getCachedProviderConfig } from "../../../../lib/storage";
+import { logger } from "../../../../lib/logger";
+
+/**
+ * GET /api/assets/[...path] — Provider-aware asset redirect
+ *
+ * Checks the active storage provider and redirects to the appropriate CDN.
+ *
+ * Currently only R2 is supported:
+ * - **R2:** 302 redirect to direct R2 public URL (no API call, no auth).
+ *   Cache the redirect aggressively since R2 URLs are permanent.
+ *
+ * The provider is read from the assetRegistry in Sanity, cached in-memory
+ * for 5 minutes (lib/storage getCachedProviderConfig).
+ *
+ * Cache strategy (R2):
+ *   - CDN: 24 hours (R2 URLs are permanent, only change if bucket URL changes)
+ *   - Browser: 12 hours + stale-while-revalidate 12 hours
+ *   - Effectively near-infinite cache; Cloudflare CDN handles the real caching
+ */
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  try {
+    const { path } = await params;
+    const relativePath = path.join("/");
+
+    if (!relativePath) {
+      return NextResponse.json({ error: "Path required" }, { status: 400 });
+    }
+
+    // ── Check active provider (cached 5min) ──
+    const config = await getCachedProviderConfig();
+
+    // ── Texture mode: stream bytes instead of redirecting ──
+    // Used by ShaderCanvas (WebGL) which needs same-origin image data.
+    // Cross-origin 302 redirects fail when the target lacks CORS headers.
+    // ?texture=1 fetches the image server-side and streams it back.
+    const isTextureMode = request.nextUrl.searchParams.get("texture") === "1";
+
+    // ── R2: direct redirect to public URL ──
+    if (config.r2BucketUrl) {
+      const r2Url = `${config.r2BucketUrl}/${relativePath}`;
+
+      // Texture mode: fetch from R2 server-side and stream bytes back
+      if (isTextureMode) {
+        const r2Resp = await fetch(r2Url);
+        if (!r2Resp.ok) {
+          return NextResponse.json(
+            { error: "Asset not found" },
+            { status: r2Resp.status }
+          );
+        }
+        const contentType = r2Resp.headers.get("content-type") || "image/png";
+        return new NextResponse(r2Resp.body, {
+          status: 200,
+          headers: {
+            "Content-Type": contentType,
+            "Access-Control-Allow-Origin": "*",
+            // Short cache — this path is only for WebGL textures (rare)
+            "Cache-Control": "public, max-age=3600, stale-while-revalidate=3600",
+          },
+        });
+      }
+
+      return NextResponse.redirect(r2Url, {
+        status: 302,
+        headers: {
+          // R2 URLs are permanent — cache aggressively.
+          // Vercel CDN: 24 hours
+          "CDN-Cache-Control": "public, s-maxage=86400",
+          // #21: Added must-revalidate so browsers check back after provider switches
+          "Cache-Control":
+            "public, max-age=43200, must-revalidate, stale-while-revalidate=43200",
+          // #21: ETag based on provider for cache busting on switch
+          "ETag": `"r2-${relativePath}"`,
+        },
+      });
+    }
+
+    // No provider configured
+    return NextResponse.json(
+      { error: "Storage provider not configured" },
+      { status: 500 }
+    );
+  } catch (err) {
+    logger.error("[AssetProxy]", "Asset proxy error:", err);
+
+    // Transient error — 503 with Retry-After hint
+    return NextResponse.json(
+      { error: "Failed to fetch asset" },
+      { status: 503, headers: { "Retry-After": "5" } }
+    );
+  }
+}

package/app/api/custom-sections/[id]/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+import { client } from "../../../../lib/sanity/client";
+import { customSectionByIdQuery } from "../../../../lib/sanity/queries";
+import { logger } from "../../../../lib/logger";
+
+type RouteContext = { params: Promise<{ id: string }> };
+
+/**
+ * GET /api/custom-sections/[id] — Public: section data only (cached 1h CDN)
+ *
+ * Returns only the `section` field (PageSectionV2 data) for rendering
+ * custom section instances on the public site.
+ */
+export async function GET(_request: NextRequest, context: RouteContext) {
+  try {
+    const { id } = await context.params;
+
+    if (!id || typeof id !== "string") {
+      return NextResponse.json({ error: "Missing section ID" }, { status: 400 });
+    }
+
+    const result = await client.fetch(customSectionByIdQuery, { id });
+    if (!result?.section) {
+      return NextResponse.json({ error: "Custom section not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(
+      { section: result.section },
+      {
+        headers: {
+          "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=1800",
+          "CDN-Cache-Control": "public, s-maxage=3600",
+        },
+      }
+    );
+  } catch (err) {
+    logger.error("[Public:CustomSections]", "Failed to fetch custom section", err);
+    return NextResponse.json(
+      { error: "Failed to fetch custom section" },
+      { status: 500 }
+    );
+  }
+}

package/app/api/draft-mode/disable/route.ts

@@ -0,0 +1,10 @@
+import { draftMode } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const draft = await draftMode();
+  draft.disable();
+  return NextResponse.redirect(new URL("/", process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : "http://localhost:3000"));
+}

package/app/api/draft-mode/enable/route.ts

@@ -0,0 +1,26 @@
+import { defineEnableDraftMode } from "next-sanity/draft-mode";
+import { client } from "../../../../lib/sanity/client";
+import { NextRequest, NextResponse } from "next/server";
+import { validateAdminToken } from "../../../../lib/auth-token";
+
+// Create the Sanity draft mode handler
+const sanityDraftMode = defineEnableDraftMode({
+  client: client.withConfig({
+    token: process.env.SANITY_API_TOKEN,
+  }),
+});
+
+/**
+ * GET /api/draft-mode/enable — Enable Sanity draft mode.
+ * Defense-in-depth: requires admin auth in addition to Sanity token.
+ */
+export async function GET(request: NextRequest) {
+  // Explicit admin auth check (defense-in-depth alongside Sanity token)
+  const adminToken = request.cookies.get("admin_token")?.value;
+  if (!adminToken || !(await validateAdminToken(adminToken))) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Delegate to Sanity's draft mode handler
+  return sanityDraftMode.GET(request);
+}

package/app/api/projects/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import { client } from "../../../lib/sanity/client";
+import { publishedProjectSummariesQuery } from "../../../lib/sanity/queries";
+import { logger } from "../../../lib/logger";
+
+/**
+ * GET /api/projects — Public endpoint for published project summaries.
+ *
+ * Returns lightweight project data (title, slug, thumbnail_path, cover_video, seo_description)
+ * for use by public-site components like ProjectGridBlock.
+ *
+ * No authentication required — only returns published (non-draft) projects.
+ *
+ * Cache: ISR-managed via `revalidate` segment config (1 hour default).
+ * On-demand purge via `revalidatePath('/api/projects')` when projects are saved.
+ * Browser cache kept short (5 min) so users see updates quickly after ISR purge.
+ */
+
+// ISR: Next.js manages the cache — revalidatePath('/api/projects') purges it on demand
+export const revalidate = 3600; // 1 hour default
+
+export async function GET() {
+  try {
+    const projects = await client.fetch(publishedProjectSummariesQuery);
+
+    return NextResponse.json(
+      { projects: projects || [] },
+      {
+        headers: {
+          // Browser-only cache (short) — the ISR/CDN layer is managed by Next.js via `revalidate`
+          "Cache-Control": "public, max-age=300",
+        },
+      }
+    );
+  } catch (error) {
+    logger.error("[Projects]", "[Public Projects API] Error:", error);
+    return NextResponse.json(
+      { projects: [] },
+      { status: 500 }
+    );
+  }
+}

package/app/api/styles/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from "next/server";
+import { client } from "../../../lib/sanity/client";
+import { siteStylesQuery } from "../../../lib/sanity/queries";
+import { logger } from "../../../lib/logger";
+import { DEFAULT_GRID_WIDTH } from "../../../lib/builder/constants";
+import { getSiteConfig } from "../../../lib/config";
+
+/**
+ * GET /api/styles — Public endpoint for site styles (no auth).
+ * Used by StylesProvider to inject @font-face + CSS custom properties.
+ * Cached for 24 hours on CDN, serves stale for up to 1 hour while revalidating.
+ */
+
+export async function GET() {
+  try {
+    const raw = await client.fetch(siteStylesQuery);
+
+    if (!raw) {
+      return NextResponse.json({ styles: null });
+    }
+
+    const cfg = getSiteConfig();
+
+    // Transform flat fields → nested SiteStyles
+    const styles = {
+      grid: {
+        width: raw.grid_width || DEFAULT_GRID_WIDTH,
+        outer_padding: raw.grid_outer_padding || "30",
+        gutter_desktop: raw.grid_gutter_desktop || "30",
+        gutter_responsive: raw.grid_gutter_responsive || "30",
+        gutter_phone: raw.grid_gutter_phone || "16",
+      },
+      fonts: raw.fonts || [],
+      typography: {
+        h1: raw.typography_h1 || null,
+        h2: raw.typography_h2 || null,
+        h3: raw.typography_h3 || null,
+        h4: raw.typography_h4 || null,
+        body: raw.typography_body || null,
+        small: raw.typography_small || null,
+      },
+      colors: {
+        swatches: (raw.color_palette || []).map((s: { _key?: string; name?: string; hex?: string }) => ({
+          _key: s._key || "",
+          name: s.name || "",
+          hex: s.hex || "#000000",
+        })),
+        // Legacy fields — config palette as fallback
+        background: raw.color_background || cfg.palette.background,
+        text: raw.color_text || cfg.palette.text,
+        primary: raw.color_primary || cfg.palette.primary,
+        secondary: raw.color_secondary || cfg.palette.secondary,
+        accent: raw.color_accent || cfg.palette.accent,
+        muted: raw.color_muted || cfg.palette.muted,
+      },
+      spacing: {
+        section_padding: raw.spacing_section_padding || "80px",
+        content_gap: raw.spacing_content_gap || "24px",
+        border_radius: raw.spacing_border_radius || "8px",
+      },
+      link_style: {
+        color: raw.link_color || cfg.palette.primary,
+        hover_color: raw.link_hover_color || cfg.palette.primary,
+        underline: raw.link_underline ?? true,
+      },
+      button_style: {
+        primary_bg: raw.button_primary_bg || "#ffffff",
+        primary_text: raw.button_primary_text || "#000000",
+        secondary_bg: raw.button_secondary_bg || "#1a1a1a",
+        secondary_text: raw.button_secondary_text || "#ffffff",
+        border_radius: raw.button_border_radius || "8px",
+      },
+      disable_scroll_animations_mobile: raw.disable_scroll_animations_mobile ?? false,
+    };
+
+    return NextResponse.json(
+      { styles },
+      {
+        headers: {
+          "Cache-Control": "public, s-maxage=86400, stale-while-revalidate=3600",
+        },
+      }
+    );
+  } catch (error) {
+    logger.error("[Styles]", "Failed to fetch site styles:", error);
+    return NextResponse.json({ styles: null }, { status: 500 });
+  }
+}

package/app/globals.css

@@ -0,0 +1,7 @@
+/* Morphika instance — imports all core styles.
+   This is the monolith entry point; equivalent to:
+     @import "@morphika/webframe/styles/globals.css";
+   but uses relative paths since we're inside the monorepo. */
+@import "../packages/core/styles/base.css";
+@import "../packages/core/styles/animations.css";
+@import "../packages/core/styles/admin.css";

package/app/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from "next";
+import { VisualEditing } from "next-sanity/visual-editing";
+import { draftMode } from "next/headers";
+import { registerConfig, getSiteConfig } from "../lib/config";
+import siteConfig from "../site.config";
+import "./globals.css";
+
+// Register config at module load time — before any component calls getSiteConfig().
+// In the monolith this is redundant (static fallback exists), but it establishes
+// the pattern that instances will use when consuming @morphika/webframe as a package.
+registerConfig(siteConfig);
+
+const cfg = getSiteConfig();
+
+export const metadata: Metadata = {
+  title: {
+    default: cfg.defaults.metaTitle,
+    template: `%s — ${cfg.name}`,
+  },
+  description: cfg.defaults.metaDescription,
+  metadataBase: new URL(cfg.domain),
+  openGraph: {
+    title: cfg.defaults.metaTitle,
+    description: cfg.defaults.metaDescription,
+    siteName: cfg.name,
+    type: "website",
+    url: cfg.domain,
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: cfg.defaults.metaTitle,
+    description: cfg.defaults.metaDescription,
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const draft = await draftMode();
+
+  return (
+    <html lang={cfg.lang || "en"} className="h-full antialiased">
+      <body className="min-h-full flex flex-col">
+        {children}
+        {draft.isEnabled && (
+          <VisualEditing />
+        )}
+      </body>
+    </html>
+  );
+}