@morphika/webframe 0.1.0

package/app/admin/styles/page.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { revalidateSite } from "../../../lib/revalidate";
+import type { SiteStyles, TypographyLevel, GridSettings } from "../../../lib/sanity/types";
+import { DEFAULT_GRID_WIDTH } from "../../../lib/builder/constants";
+import {
+  GridLayoutEditor,
+  FontsEditor,
+  TypographyEditor,
+  ColorsEditor,
+  LinksButtonsEditor,
+} from "../../../components/admin/styles";
+
+// ============================================
+// Tab definitions
+// ============================================
+
+type TabId = "grid" | "typography" | "colors" | "buttons";
+
+function TabIcon({ id, size = 15 }: { id: TabId; size?: number }) {
+  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none" as const, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
+  switch (id) {
+    case "grid":
+      return (
+        <svg {...props}>
+          <rect x="3" y="3" width="7" height="7" />
+          <rect x="14" y="3" width="7" height="7" />
+          <rect x="3" y="14" width="7" height="7" />
+          <rect x="14" y="14" width="7" height="7" />
+        </svg>
+      );
+    case "typography":
+      return (
+        <svg {...props}>
+          <polyline points="4 7 4 4 20 4 20 7" />
+          <line x1="9" y1="20" x2="15" y2="20" />
+          <line x1="12" y1="4" x2="12" y2="20" />
+        </svg>
+      );
+    case "colors":
+      return (
+        <svg {...props}>
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 2a7 7 0 0 0 0 14 3.5 3.5 0 0 1 0 7 10 10 0 0 0 0-20Z" fill="currentColor" opacity="0.15" />
+          <circle cx="12" cy="8" r="1.5" fill="currentColor" />
+          <circle cx="8" cy="12" r="1.5" fill="currentColor" />
+          <circle cx="16" cy="12" r="1.5" fill="currentColor" />
+        </svg>
+      );
+    case "buttons":
+      return (
+        <svg {...props}>
+          <rect x="2" y="7" width="20" height="10" rx="2" />
+          <line x1="8" y1="12" x2="16" y2="12" />
+        </svg>
+      );
+  }
+}
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: "grid", label: "Grid & Layout" },
+  { id: "typography", label: "Typography" },
+  { id: "colors", label: "Colors" },
+  { id: "buttons", label: "Buttons & Links" },
+];
+
+// ============================================
+// Default values
+// ============================================
+
+const DEFAULT_GRID: GridSettings = {
+  width: DEFAULT_GRID_WIDTH,
+  outer_padding: "30",
+  gutter_desktop: "30",
+  gutter_responsive: "30",
+  gutter_phone: "16",
+};
+
+const DEFAULT_TYPOGRAPHY: Record<string, TypographyLevel> = {
+  h1: { font_size: "3rem", font_weight: "700", line_height: "1.1", letter_spacing: "-0.02em" },
+  h2: { font_size: "2rem", font_weight: "700", line_height: "1.2", letter_spacing: "-0.01em" },
+  h3: { font_size: "1.5rem", font_weight: "500", line_height: "1.3", letter_spacing: "0" },
+  h4: { font_size: "1.125rem", font_weight: "500", line_height: "1.4", letter_spacing: "0" },
+  body: { font_size: "0.875rem", font_weight: "400", line_height: "1.6", letter_spacing: "0" },
+  small: { font_size: "0.75rem", font_weight: "400", line_height: "1.5", letter_spacing: "0.02em" },
+};
+
+// ============================================
+// Main Page
+// ============================================
+
+export default function AdminStylesPage() {
+  const [styles, setStyles] = useState<SiteStyles | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+  const [activeTab, setActiveTab] = useState<TabId>("grid");
+
+  const fetchStyles = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/styles");
+      if (res.ok) {
+        const data = await res.json();
+        setStyles(data.styles || null);
+      }
+    } catch {
+      setMessage({ type: "error", text: "Failed to load styles" });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchStyles(); }, [fetchStyles]);
+
+  useEffect(() => {
+    if (!message) return;
+    const timer = setTimeout(() => setMessage(null), 5000);
+    return () => clearTimeout(timer);
+  }, [message]);
+
+  const saveSection = async (section: string, data: Record<string, unknown>) => {
+    setSaving(section);
+    setMessage(null);
+    try {
+      const res = await fetch("/api/admin/styles", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ section, data }),
+      });
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.error || "Save failed");
+      }
+      setMessage({ type: "success", text: `${section} saved` });
+      await fetchStyles();
+      // Revalidate public site so style changes appear immediately
+      revalidateSite();
+    } catch (err) {
+      setMessage({ type: "error", text: err instanceof Error ? err.message : "Save failed" });
+    } finally {
+      setSaving(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">Loading styles...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Page header */}
+      <div>
+        <h1 className="text-2xl font-semibold text-neutral-900">Customize</h1>
+        <p className="text-sm text-neutral-500 mt-1">
+          Global design system — grid, typography, colors, spacing, and button styles.
+        </p>
+      </div>
+
+      {/* Tab navigation — matches admin webapp style */}
+      <div className="flex items-center gap-1 border-b border-neutral-200">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-medium transition-colors border-b-2 -mb-px ${
+                isActive
+                  ? "text-neutral-900 border-[#076bff]"
+                  : "text-neutral-400 border-transparent hover:text-neutral-600"
+              }`}
+            >
+              <TabIcon id={tab.id} />
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Toast message */}
+      {message && (
+        <div className={`p-3 rounded-xl border ${
+          message.type === "success"
+            ? "border-green-200 bg-green-50 text-green-700"
+            : "border-red-200 bg-red-50 text-red-700"
+        }`}>
+          <p className="text-sm">{message.text}</p>
+        </div>
+      )}
+
+      {/* Tab content */}
+      {activeTab === "grid" && (
+        <GridLayoutEditor
+          grid={styles?.grid}
+          disableMobile={styles?.disable_scroll_animations_mobile ?? false}
+          onSaveGrid={(data) => saveSection("grid", data)}
+          onSaveAnimations={(data) => saveSection("animations", data)}
+          savingGrid={saving === "grid"}
+          savingAnimations={saving === "animations"}
+        />
+      )}
+
+      {activeTab === "typography" && (
+        <div className="space-y-8">
+          <FontsEditor
+            fonts={styles?.fonts || []}
+            onSave={(fonts) => saveSection("fonts", { fonts })}
+            saving={saving === "fonts"}
+          />
+          <TypographyEditor
+            typography={styles?.typography}
+            fontFamilies={(styles?.fonts || []).map((f) => f.family)}
+            onSave={(data) => saveSection("typography", data)}
+            saving={saving === "typography"}
+          />
+        </div>
+      )}
+
+      {activeTab === "colors" && (
+        <ColorsEditor
+          colors={styles?.colors}
+          onSave={(data) => saveSection("colors", data)}
+          saving={saving === "colors"}
+        />
+      )}
+
+      {activeTab === "buttons" && (
+        <LinksButtonsEditor
+          linkStyle={styles?.link_style}
+          buttonStyle={styles?.button_style}
+          onSave={(data) => saveSection("links", data)}
+          saving={saving === "links"}
+        />
+      )}
+    </div>
+  );
+}

package/app/api/admin/assets/file/route.ts

@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from "next/server";
+import { isAdminAuthenticated } from "../../../../../lib/auth";
+import { getCachedProviderConfig } from "../../../../../lib/storage";
+import { logger } from "../../../../../lib/logger";
+
+/**
+ * GET /api/admin/assets/file?path=Projects/House of Delights/image.jpg
+ *
+ * Provider-aware admin asset proxy. Returns a 302 redirect to the asset's
+ * CDN URL based on the active storage provider.
+ *
+ * Currently only R2 is supported:
+ * - **R2:** Redirect to direct public URL (no auth needed — bucket is public).
+ *   Cache for 24 hours since R2 URLs are permanent.
+ *
+ * Auth: Requires admin authentication (cookies). This prevents unauthorized
+ * access to the proxy endpoint, even though the underlying R2 URLs
+ * may be publicly accessible.
+ */
+export async function GET(request: NextRequest) {
+  if (!(await isAdminAuthenticated())) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const filePath = request.nextUrl.searchParams.get("path");
+  if (!filePath) {
+    return new NextResponse("Missing path", { status: 400 });
+  }
+
+  try {
+    // ── Texture mode: stream bytes instead of redirecting ──
+    // Used by ShaderCanvas (WebGL) in preview mode. Cross-origin 302
+    // redirects lack CORS headers, breaking WebGL texture loading.
+    const isTextureMode = request.nextUrl.searchParams.get("texture") === "1";
+
+    // ── Check active provider (cached 5min) ──
+    const config = await getCachedProviderConfig();
+
+    // ── R2: direct redirect to public URL ──
+    if (config.r2BucketUrl) {
+      const cleanPath = filePath.replace(/^\/+/, "");
+      const r2Url = `${config.r2BucketUrl}/${cleanPath}`;
+
+      // Texture mode: fetch from R2 and stream bytes back
+      if (isTextureMode) {
+        const r2Resp = await fetch(r2Url);
+        if (!r2Resp.ok) {
+          return new NextResponse("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,
+            "Cache-Control": "private, max-age=3600",
+          },
+        });
+      }
+
+      // #12: For SVG files, add CSP to prevent XSS if viewed directly
+      const isSvg = cleanPath.toLowerCase().endsWith(".svg");
+      const headers: Record<string, string> = {
+        "Cache-Control": "private, max-age=86400",
+      };
+      if (isSvg) {
+        headers["Content-Security-Policy"] = "default-src 'none'; img-src 'self'; style-src 'unsafe-inline'";
+      }
+
+      return NextResponse.redirect(r2Url, {
+        status: 302,
+        headers,
+      });
+    }
+
+    // No provider configured
+    return new NextResponse("Storage provider not configured", { status: 500 });
+  } catch (err) {
+    logger.error("[Admin:AssetFile]", "Error", err);
+    return new NextResponse("Failed to get file link", { status: 500 });
+  }
+}

package/app/api/admin/assets/health/route.ts

@@ -0,0 +1,170 @@
+import { NextResponse } from "next/server";
+import { client } from "../../../../../lib/sanity/client";
+import { writeClient } from "../../../../../lib/sanity/writeClient";
+import { isAdminAuthenticated } from "../../../../../lib/auth";
+import { logger } from "../../../../../lib/logger";
+
+/**
+ * Validate that a seed URL is safe to use for health checks.
+ * Prevents SSRF by blocking private IPs, localhost, and non-http(s) schemes.
+ */
+function isValidSeedUrl(urlStr: string): boolean {
+  try {
+    const url = new URL(urlStr);
+
+    // Only allow http(s)
+    if (url.protocol !== "https:" && url.protocol !== "http:") return false;
+
+    const hostname = url.hostname.toLowerCase();
+
+    // Block localhost variants
+    if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1") return false;
+    if (hostname === "0.0.0.0") return false;
+
+    // Block private IP ranges
+    if (hostname.startsWith("10.")) return false;
+    if (hostname.startsWith("192.168.")) return false;
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(hostname)) return false;
+
+    // Block link-local
+    if (hostname.startsWith("169.254.")) return false;
+
+    // Block metadata endpoints (cloud providers)
+    if (hostname === "metadata.google.internal") return false;
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * GET /api/admin/assets/health — Check if registered assets are accessible
+ *
+ * Sends HEAD requests to each asset URL to verify availability.
+ * Updates asset statuses in the registry.
+ */
+export async function GET() {
+  if (!(await isAdminAuthenticated())) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const registry = await client.fetch(
+      `*[_type == "assetRegistry"][0]{ seed_url, assets }`
+    );
+
+    if (!registry) {
+      return NextResponse.json(
+        { error: "Asset registry not found" },
+        { status: 404 }
+      );
+    }
+
+    if (!registry.seed_url) {
+      return NextResponse.json(
+        { error: "No seed URL configured" },
+        { status: 400 }
+      );
+    }
+
+    // Validate seed URL to prevent SSRF
+    if (!isValidSeedUrl(registry.seed_url)) {
+      return NextResponse.json(
+        { error: "Seed URL is not a valid public URL" },
+        { status: 400 }
+      );
+    }
+
+    const assets = registry.assets || [];
+    const seedUrl = registry.seed_url.replace(/\/$/, "");
+    const now = new Date().toISOString();
+
+    // Check all assets including "missing" ones (they may have recovered)
+    const assetsToCheck = assets.filter(
+      (a: { status: string }) =>
+        a.status === "active" || a.status === "new" || a.status === "missing"
+    );
+
+    // Limit concurrent requests
+    const BATCH_SIZE = 10;
+    const results: { path: string; ok: boolean; status: number }[] = [];
+
+    for (let i = 0; i < assetsToCheck.length; i += BATCH_SIZE) {
+      const batch = assetsToCheck.slice(i, i + BATCH_SIZE);
+      const batchResults = await Promise.allSettled(
+        batch.map(async (asset: { path: string }) => {
+          const url = `${seedUrl}/${asset.path.replace(/^\//, "")}`;
+          try {
+            const res = await fetch(url, {
+              method: "HEAD",
+              signal: AbortSignal.timeout(10000),
+            });
+            return { path: asset.path, ok: res.ok, status: res.status };
+          } catch {
+            return { path: asset.path, ok: false, status: 0 };
+          }
+        })
+      );
+
+      for (const result of batchResults) {
+        if (result.status === "fulfilled") {
+          results.push(result.value);
+        }
+      }
+    }
+
+    // Build sets
+    const missingPaths = new Set(
+      results.filter((r) => !r.ok).map((r) => r.path)
+    );
+    const healthyPaths = new Set(
+      results.filter((r) => r.ok).map((r) => r.path)
+    );
+
+    // Update asset statuses
+    const updatedAssets = assets.map(
+      (asset: { _key: string; path: string; status: string }) => {
+        if (missingPaths.has(asset.path)) {
+          return { ...asset, status: "missing", last_checked_at: now };
+        }
+        if (healthyPaths.has(asset.path)) {
+          // Preserve "new" status for newly scanned assets; mark recovered "missing" as "active"
+          const newStatus = asset.status === "new" ? "new" : "active";
+          return { ...asset, status: newStatus, last_checked_at: now };
+        }
+        return asset;
+      }
+    );
+
+    // Count recovered assets (were "missing", now healthy)
+    const recoveredCount = assets.filter(
+      (a: { path: string; status: string }) =>
+        a.status === "missing" && healthyPaths.has(a.path)
+    ).length;
+
+    // Persist
+    await writeClient
+      .patch("assetRegistry")
+      .set({ assets: updatedAssets })
+      .commit();
+
+    return NextResponse.json({
+      healthy_count: healthyPaths.size,
+      missing_count: missingPaths.size,
+      recovered_count: recoveredCount,
+      checked_count: results.length,
+      total_assets: assets.length,
+      missing_assets: results
+        .filter((r) => !r.ok)
+        .map((r) => r.path),
+      checked_at: now,
+    });
+  } catch (err) {
+    logger.error("[Admin:Health]", "Health check failed", err);
+    return NextResponse.json(
+      { error: "Health check failed" },
+      { status: 500 }
+    );
+  }
+}

package/app/api/admin/assets/register/route.ts

@@ -0,0 +1,163 @@
+import { NextRequest, NextResponse } from "next/server";
+import { isAdminAuthenticated } from "../../../../../lib/auth";
+import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath } from "../../../../../lib/security";
+import { writeClient } from "../../../../../lib/sanity/writeClient";
+import { client } from "../../../../../lib/sanity/client";
+import { isMediaFile, getMimeType } from "../../../../../lib/storage/types";
+import { auditLog } from "../../../../../lib/audit";
+import { logger } from "../../../../../lib/logger";
+
+/**
+ * POST /api/admin/assets/register — Register a newly uploaded asset in the registry.
+ *
+ * Called after a successful direct upload to R2 via presigned URL.
+ * Adds the asset to the Sanity assetRegistry if it doesn't already exist,
+ * or updates it if the path already exists (e.g., overwriting a file).
+ *
+ * Body: { key, fileSize, contentType?, has_thumbnail? }
+ *   - key: relative path in R2 (e.g. "projects/hero.jpg")
+ *   - fileSize: size in bytes
+ *   - contentType: MIME type (optional, inferred from extension if omitted)
+ *   - has_thumbnail: whether a _thumbs/ counterpart was uploaded (optional, default false)
+ */
+export async function POST(request: NextRequest) {
+  if (!(await isAdminAuthenticated())) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!validateCsrf(request)) {
+    return csrfErrorResponse();
+  }
+  if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
+    return jsonError("Request body too large", 413);
+  }
+
+  try {
+    const body = await request.json();
+    const { key, fileSize, contentType, has_thumbnail: hasThumbnailParam } = body;
+    // Normalize has_thumbnail — only accept explicit boolean true
+    const hasThumbnail = hasThumbnailParam === true;
+
+    // ── Validate key (relative path) ──
+    if (!key || typeof key !== "string") {
+      return jsonError("Asset key is required", 400);
+    }
+
+    if (!isValidAssetPath(key)) {
+      return jsonError("Invalid asset path", 400);
+    }
+
+    if (!isMediaFile(key)) {
+      return jsonError("Unsupported file type", 400);
+    }
+
+    // ── Extract metadata ──
+    const filename = key.split("/").pop() || key;
+    const extension = filename.includes(".")
+      ? filename.split(".").pop()!.toLowerCase()
+      : "";
+    const mimeType =
+      contentType && typeof contentType === "string"
+        ? contentType
+        : getMimeType(filename);
+    const size =
+      typeof fileSize === "number" && fileSize > 0 ? fileSize : undefined;
+
+    // ── Fetch current registry ──
+    const registry = await client.fetch(
+      `*[_type == "assetRegistry"][0]{ _id, assets, storage_provider }`
+    );
+
+    if (!registry) {
+      return jsonError("Asset registry not found. Scan your storage first.", 404);
+    }
+
+    // #20: Validate that R2 is the active provider for R2-uploaded assets
+    const activeProvider = registry.storage_provider || "r2";
+    if (activeProvider !== "r2") {
+      return jsonError(
+        "Cannot register R2-uploaded assets: R2 is not the active provider. Switch to R2 first.",
+        400
+      );
+    }
+
+    const existingAssets: Array<Record<string, unknown>> = registry.assets || [];
+
+    // Check if this path already exists in the registry
+    const existingIndex = existingAssets.findIndex(
+      (a) => a.path === key
+    );
+
+    const now = new Date().toISOString();
+    // #66: Use crypto.randomUUID for collision-resistant key generation
+    const assetKey = `upload-${crypto.randomUUID().replace(/-/g, "").slice(0, 16)}`;
+
+    if (existingIndex >= 0) {
+      // ── Update existing entry ──
+      // Use Sanity array patching: unset the old entry, then append the updated one
+      const existing = existingAssets[existingIndex];
+      const updatedAsset = {
+        _key: existing._key || assetKey,
+        _type: "assetEntry",
+        path: key,
+        filename,
+        extension,
+        file_size: size ?? existing.file_size,
+        mime_type: mimeType,
+        file_hash: existing.file_hash, // Keep old hash — we don't know the new one yet
+        has_thumbnail: hasThumbnail || existing.has_thumbnail || false,
+        status: "active",
+        last_checked_at: now,
+        previous_paths: existing.previous_paths || [],
+      };
+
+      // Replace the asset at the existing index
+      const patchKey = existing._key as string;
+      await writeClient
+        .patch(registry._id)
+        .set({
+          [`assets[_key=="${patchKey}"]`]: updatedAsset,
+        })
+        .commit();
+
+      auditLog("asset.register.update", { path: key, fileSize: size });
+
+      return NextResponse.json({
+        success: true,
+        action: "updated",
+        asset: { path: key, filename, extension, file_size: size },
+      });
+    } else {
+      // ── Insert new entry ──
+      const newAsset = {
+        _key: assetKey,
+        _type: "assetEntry",
+        path: key,
+        filename,
+        extension,
+        file_size: size,
+        mime_type: mimeType,
+        has_thumbnail: hasThumbnail,
+        status: "active",
+        last_checked_at: now,
+      };
+
+      await writeClient
+        .patch(registry._id)
+        .setIfMissing({ assets: [] })
+        .append("assets", [newAsset])
+        .commit();
+
+      auditLog("asset.register.create", { path: key, fileSize: size });
+
+      return NextResponse.json({
+        success: true,
+        action: "created",
+        asset: { path: key, filename, extension, file_size: size },
+      });
+    }
+  } catch (err) {
+    logger.error("[Admin:Register]", "Failed to register asset", err);
+    return jsonError("Failed to register asset", 500);
+  }
+}