@morphika/webframe 0.1.0

package/lib/storage/types.ts

@@ -0,0 +1,125 @@
+/**
+ * Storage Provider Abstraction Layer
+ *
+ * Defines a provider-agnostic interface for asset storage backends.
+ * Currently supports Cloudflare R2. The adapter pattern allows adding
+ * new providers in the future.
+ *
+ * The key insight: assets are stored as relative paths in Sanity.
+ * Only the resolution layer (path → public URL) needs to be pluggable.
+ */
+
+// ============================================
+// Provider types
+// ============================================
+
+export type StorageProvider = "r2";
+
+export interface StorageProviderConfig {
+  provider: StorageProvider;
+  connected: boolean;
+  connectedAt?: string;
+  /** Human-readable label, e.g. "R2 — my-assets" */
+  displayName: string;
+}
+
+// ============================================
+// Scanned file — provider-agnostic
+// ============================================
+
+/**
+ * A file discovered during a storage scan.
+ * Standardized field names (file_size, mime_type, file_hash)
+ * for compatibility with the registry merge algorithm.
+ */
+export interface ScannedFile {
+  /** Relative path from storage root (e.g. "projects/hero.jpg") */
+  path: string;
+  /** Filename only (e.g. "hero.jpg") */
+  filename: string;
+  /** File extension without dot (e.g. "jpg") */
+  extension: string;
+  /** File size in bytes */
+  file_size: number;
+  /** MIME type (e.g. "image/jpeg") */
+  mime_type: string;
+  /** Content hash if available (e.g. R2 ETag) */
+  file_hash?: string;
+}
+
+// ============================================
+// Storage Adapter interface
+// ============================================
+
+export interface StorageAdapter {
+  /** Which provider this adapter serves */
+  readonly provider: StorageProvider;
+
+  /**
+   * List all media files recursively from the given root path.
+   * Returns a flat array sorted by path.
+   *
+   * @param rootPath - Subfolder to scan from (empty = root). Dropbox uses this
+   *                   as the API path; R2 uses it as a key prefix.
+   */
+  listFiles(rootPath?: string): Promise<ScannedFile[]>;
+
+  /**
+   * Resolve a relative asset path to a servable URL.
+   *
+   * - R2: returns a direct public URL (no API call needed).
+   * - Future providers may return temporary links or other URL types.
+   *
+   * @param relativePath - Path relative to storage root (e.g. "projects/hero.jpg")
+   * @returns Full URL the browser can fetch the asset from
+   */
+  resolveUrl(relativePath: string): Promise<string>;
+
+  /**
+   * Test whether the provider is reachable and credentials are valid.
+   */
+  testConnection(): Promise<{ ok: boolean; error?: string }>;
+
+  /**
+   * Get the current connection status for display in the admin UI.
+   */
+  getStatus(): Promise<StorageProviderConfig>;
+}
+
+// ============================================
+// MIME type utilities (shared across adapters)
+// ============================================
+
+const MIME_TYPES: Record<string, string> = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  webp: "image/webp",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  pdf: "application/pdf",
+};
+
+/** Supported media file extensions (for filtering during scans) */
+export const MEDIA_EXTENSIONS = new Set([
+  "jpg", "jpeg", "png", "webp", "gif", "svg",
+  "mp4", "webm", "mov",
+]);
+
+/** Get MIME type from a filename or extension */
+export function getMimeType(filenameOrExt: string): string {
+  const ext = filenameOrExt.includes(".")
+    ? filenameOrExt.split(".").pop()?.toLowerCase() || ""
+    : filenameOrExt.toLowerCase();
+  return MIME_TYPES[ext] || "application/octet-stream";
+}
+
+/** Check if a filename/key is a supported media file */
+export function isMediaFile(key: string | undefined): boolean {
+  if (!key) return false;
+  const ext = key.split(".").pop()?.toLowerCase() || "";
+  return MEDIA_EXTENSIONS.has(ext);
+}

package/lib/styles/provider.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+/**
+ * StylesProvider — Fetches site-wide styles from Sanity and generates
+ * @font-face declarations + CSS custom properties for the entire site.
+ *
+ * Usage: Wrap the root layout with <StylesProvider> to inject global styles.
+ * The builder reads DEFAULT_PAGE_SETTINGS from the store which can be
+ * initialized from these global styles.
+ */
+
+import { createContext, useContext, useEffect, useState } from "react";
+import type { SiteStyles } from "../../lib/sanity/types";
+import {
+  sanitizeCssColor,
+  sanitizeCssNumeric,
+  sanitizeFontFamily,
+  sanitizeFontWeight,
+  sanitizeFontStyle,
+  sanitizeFontUrl,
+} from "../../lib/security";
+import { BREAKPOINTS, DEFAULT_GRID_WIDTH_PX } from "../../lib/builder/constants";
+import { getSiteConfig } from "../../lib/config";
+
+// ============================================
+// Context
+// ============================================
+
+const StylesContext = createContext<SiteStyles | null>(null);
+
+export function useSiteStyles(): SiteStyles | null {
+  return useContext(StylesContext);
+}
+
+// ============================================
+// Generate @font-face CSS from font data
+// ============================================
+
+function generateFontFaceCSS(styles: SiteStyles): string {
+  if (!styles.fonts) return "";
+
+  const faces: string[] = [];
+
+  for (const font of styles.fonts) {
+    const family = sanitizeFontFamily(font.family);
+    if (!family) continue;
+
+    for (const variant of font.variants || []) {
+      const fileUrl = sanitizeFontUrl(variant.file_url || "");
+      if (!fileUrl) continue;
+
+      const weight = sanitizeFontWeight(String(variant.weight));
+      const style = sanitizeFontStyle(variant.style || "normal");
+
+      // For built-in fonts, use local path; for uploaded fonts, use CDN URL
+      const src = font.is_builtin
+        ? `url('${fileUrl}') format('woff2')`
+        : `url('${fileUrl}')`;
+
+      faces.push(`
+@font-face {
+  font-family: '${family}';
+  src: ${src};
+  font-weight: ${weight};
+  font-style: ${style};
+  font-display: swap;
+}`.trim());
+    }
+  }
+
+  return faces.join("\n\n");
+}
+
+// ============================================
+// Generate brand token CSS (--brand-* variables)
+// These are consumed by the @theme block in globals.css via var().
+// Priority: admin palette (from styles) → site.config.ts palette.
+// ============================================
+
+function generateBrandTokens(styles: SiteStyles | null): string {
+  const cfg = getSiteConfig();
+  const pal = cfg.palette;
+
+  // Admin colors override config palette if present.
+  // Mapping: --brand-accent uses accentAlt (or accent fallback),
+  //          --brand-accent-alt uses accent.
+  // When admin overrides accent via styles, that takes priority for --brand-accent.
+  const c = styles?.colors;
+  const accent = c?.accent || pal.accentAlt || pal.accent;
+  const accentAlt = pal.accent;
+  const secondary = c?.secondary || pal.secondary;
+  const primary = c?.primary || pal.primary;
+  const accent2 = pal.accent2 || pal.accent;
+  const text = c?.text || pal.text;
+  const muted = c?.muted || pal.muted;
+  const dark = pal.dark || pal.background;
+
+  // Font stack from config
+  const typo = cfg.typography;
+  const fontMono = `"${typo.defaultFont}", ${typo.monoFallback}`;
+
+  const props = [
+    `--brand-accent: ${sanitizeCssColor(accent, "#888888")}`,
+    `--brand-accent-alt: ${sanitizeCssColor(accentAlt, "#888888")}`,
+    `--brand-secondary: ${sanitizeCssColor(secondary, "#888888")}`,
+    `--brand-primary: ${sanitizeCssColor(primary, "#888888")}`,
+    `--brand-accent-2: ${sanitizeCssColor(accent2, "#888888")}`,
+    `--brand-text: ${sanitizeCssColor(text, "#ffffff")}`,
+    `--brand-muted: ${sanitizeCssColor(muted, "#888888")}`,
+    `--brand-dark: ${sanitizeCssColor(dark, "#111111")}`,
+    `--brand-font-mono: ${fontMono}`,
+  ];
+
+  let css = `:root {\n  ${props.join(";\n  ")};\n}`;
+
+  // Built-in font @font-face from config (prevents FOUT before admin styles load)
+  const builtinFonts = typo.builtinFonts || [];
+  for (const font of builtinFonts) {
+    const family = sanitizeFontFamily(font.family);
+    if (!family) continue;
+    const src = sanitizeFontUrl(font.src);
+    if (!src) continue;
+    css += `\n@font-face {\n  font-family: '${family}';\n  src: url('${src}') format('woff2');\n  font-weight: ${font.weight || "400"};\n  font-style: ${font.style || "normal"};\n  font-display: swap;\n}`;
+  }
+
+  return css;
+}
+
+
+// ============================================
+// Generate CSS custom properties from styles
+// ============================================
+
+function generateCSSProperties(styles: SiteStyles): string {
+  const cfg = getSiteConfig();
+  const pal = cfg.palette;
+  const props: string[] = [];
+
+  // Colors — generate CSS custom properties from palette swatches
+  if (styles.colors) {
+    // Palette swatches → --palette-0, --palette-1, etc.
+    if (styles.colors.swatches) {
+      for (let i = 0; i < styles.colors.swatches.length; i++) {
+        const swatch = styles.colors.swatches[i];
+        props.push(`--palette-${i}: ${sanitizeCssColor(swatch.hex, "#000000")}`);
+      }
+    }
+    // Legacy color variables (backward compat for existing pages)
+    if (styles.colors.background) props.push(`--color-background: ${sanitizeCssColor(styles.colors.background, pal.background)}`);
+    if (styles.colors.text) props.push(`--color-text: ${sanitizeCssColor(styles.colors.text, pal.text)}`);
+    if (styles.colors.primary) props.push(`--color-primary: ${sanitizeCssColor(styles.colors.primary, pal.primary)}`);
+    if (styles.colors.secondary) props.push(`--color-secondary: ${sanitizeCssColor(styles.colors.secondary, pal.secondary)}`);
+    if (styles.colors.accent) props.push(`--color-accent: ${sanitizeCssColor(styles.colors.accent, pal.accent)}`);
+    if (styles.colors.muted) props.push(`--color-muted: ${sanitizeCssColor(styles.colors.muted, pal.muted)}`);
+  }
+
+  // Typography — sanitize each value type appropriately
+  if (styles.typography) {
+    for (const [level, t] of Object.entries(styles.typography)) {
+      if (!t) continue;
+      // Validate level name to prevent CSS injection via key
+      if (!/^[a-zA-Z0-9_-]+$/.test(level)) continue;
+      if (t.font_family) {
+        const family = sanitizeFontFamily(t.font_family);
+        if (family) props.push(`--font-${level}: '${family}', monospace`);
+      }
+      props.push(`--text-${level}-size: ${sanitizeCssNumeric(t.font_size, "16px")}`);
+      props.push(`--text-${level}-weight: ${sanitizeFontWeight(String(t.font_weight), "400")}`);
+      props.push(`--text-${level}-lh: ${sanitizeCssNumeric(t.line_height, "1.5")}`);
+      props.push(`--text-${level}-ls: ${sanitizeCssNumeric(t.letter_spacing, "0")}`);
+    }
+  }
+
+  // Links
+  if (styles.link_style) {
+    props.push(`--link-color: ${sanitizeCssColor(styles.link_style.color, pal.primary)}`);
+    props.push(`--link-hover: ${sanitizeCssColor(styles.link_style.hover_color, pal.secondary)}`);
+    props.push(`--link-underline: ${styles.link_style.underline ? "underline" : "none"}`);
+  }
+
+  // Grid
+  if (styles.grid) {
+    const w = sanitizeCssNumeric(styles.grid.width + "px", DEFAULT_GRID_WIDTH_PX);
+    // Outer padding always 0 — padding is controlled per-row via Spacing TRBL
+    const pad = "0px";
+    const gutter = sanitizeCssNumeric(styles.grid.gutter_desktop + "px", "30px");
+    const gutterR = sanitizeCssNumeric(styles.grid.gutter_responsive + "px", "30px");
+    props.push(`--grid-width: ${w}`);
+    props.push(`--grid-padding: ${pad}`);
+    props.push(`--grid-gutter: ${gutter}`);
+    props.push(`--grid-gutter-responsive: ${gutterR}`);
+  }
+
+  // Buttons
+  if (styles.button_style) {
+    props.push(`--btn-primary-bg: ${sanitizeCssColor(styles.button_style.primary_bg, pal.primary)}`);
+    props.push(`--btn-primary-text: ${sanitizeCssColor(styles.button_style.primary_text, "#ffffff")}`);
+    props.push(`--btn-secondary-bg: ${sanitizeCssColor(styles.button_style.secondary_bg, "#ffffff")}`);
+    props.push(`--btn-secondary-text: ${sanitizeCssColor(styles.button_style.secondary_text, "#000000")}`);
+    props.push(`--btn-radius: ${sanitizeCssNumeric(styles.button_style.border_radius, "0px")}`);
+  }
+
+  if (props.length === 0 && !styles.disable_scroll_animations_mobile) return "";
+
+  let css = props.length > 0 ? `:root {\n  ${props.join(";\n  ")};\n}` : "";
+
+  // Responsive gutter overrides: tablet (≤1024px) and phone (≤640px)
+  if (styles.grid) {
+    const gutterTablet = sanitizeCssNumeric(styles.grid.gutter_responsive + "px", "30px");
+    const gutterPhone = sanitizeCssNumeric((styles.grid.gutter_phone || "16") + "px", "16px");
+    css += `\n@media (max-width: ${BREAKPOINTS.tablet}px) {\n  :root { --grid-gutter: ${gutterTablet}; }\n}`;
+    css += `\n@media (max-width: ${BREAKPOINTS.phone}px) {\n  :root { --grid-gutter: ${gutterPhone}; }\n}`;
+  }
+
+  // Global mobile disable for enter animations (§3.7)
+  if (styles.disable_scroll_animations_mobile) {
+    css += `\n@media (max-width: ${BREAKPOINTS.mobileAnimation}px) {\n  [data-enter-animation] {\n    animation: none !important;\n    opacity: 1 !important;\n    transform: none !important;\n    filter: none !important;\n    clip-path: none !important;\n  }\n}`;
+  }
+
+  return css;
+}
+
+// ============================================
+// Provider component
+// ============================================
+
+export function StylesProvider({ children }: { children: React.ReactNode }) {
+  const [styles, setStyles] = useState<SiteStyles | null>(null);
+
+  useEffect(() => {
+    // Fetch styles from public API (no auth needed for rendering)
+    fetch("/api/styles")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data?.styles) setStyles(data.styles);
+      })
+      .catch(() => {
+        // Silently fail — site works without custom styles
+      });
+  }, []);
+
+  // Brand tokens from config (immediate, no fetch needed).
+  // These set --brand-* variables consumed by the @theme block in globals.css.
+  // Once admin styles load, generateCSSProperties may further override some values.
+  const brandTokensCSS = generateBrandTokens(styles);
+
+  return (
+    <StylesContext.Provider value={styles}>
+      {/* Brand tokens — always injected (config fallback until admin styles load) */}
+      <style dangerouslySetInnerHTML={{ __html: brandTokensCSS }} />
+      {/* Admin styles — layered on top after fetch */}
+      {styles && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: [
+              generateFontFaceCSS(styles),
+              generateCSSProperties(styles),
+            ]
+              .filter(Boolean)
+              .join("\n\n"),
+          }}
+        />
+      )}
+      {children}
+    </StylesContext.Provider>
+  );
+}

package/lib/thumbnails/generate.ts

@@ -0,0 +1,151 @@
+/**
+ * Client-side thumbnail generator for R2 uploads.
+ *
+ * Uses browser-native Canvas + createImageBitmap APIs to resize images
+ * to 1400px max dimension JPEG thumbnails. Zero Vercel processing.
+ *
+ * Matches the existing thumbnail spec from tools/builder-thumbs/:
+ *   - Max dimension: 1400px (longest edge, maintains aspect ratio)
+ *   - Format: JPEG (.jpg)
+ *   - Quality: 0.80
+ *   - EXIF rotation: automatic via createImageBitmap
+ *   - Typical output: 80–180 KB
+ */
+
+// ── Raster extensions eligible for thumbnails ──
+const RASTER_EXTENSIONS = new Set(["jpg", "jpeg", "png", "webp", "gif"]);
+
+/** Maximum pixels on the longest edge */
+const MAX_DIMENSION = 1400;
+
+/** JPEG quality (0–1) */
+const JPEG_QUALITY = 0.80;
+
+// ── Types ──
+
+export interface ThumbnailResult {
+  blob: Blob;
+  width: number;
+  height: number;
+}
+
+// ── Public API ──
+
+/**
+ * Check whether a filename is a raster image eligible for thumbnails.
+ * Returns false for svg, mp4, pdf, etc.
+ */
+export function isRasterImage(filename: string): boolean {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  return RASTER_EXTENSIONS.has(ext);
+}
+
+/**
+ * Compute the `_thumbs/` key for a given asset path.
+ *
+ * Example:
+ *   thumbKeyForPath("projects/house-of-delights/hero.png")
+ *   → "_thumbs/projects/house-of-delights/hero.jpg"
+ */
+export function thumbKeyForPath(assetPath: string): string {
+  const dotIndex = assetPath.lastIndexOf(".");
+  const pathWithoutExt = dotIndex > 0 ? assetPath.slice(0, dotIndex) : assetPath;
+  return `_thumbs/${pathWithoutExt}.jpg`;
+}
+
+/**
+ * Generate a JPEG thumbnail from a File.
+ *
+ * Returns null for non-raster files or if generation fails
+ * (e.g., Canvas memory exhaustion on very large images).
+ *
+ * @param file - The uploaded File object
+ * @returns ThumbnailResult with JPEG blob and dimensions, or null
+ */
+export async function generateThumbnail(
+  file: File
+): Promise<ThumbnailResult | null> {
+  // Only process raster images
+  if (!isRasterImage(file.name)) {
+    return null;
+  }
+
+  try {
+    // createImageBitmap decodes the image and applies EXIF rotation automatically.
+    // For animated GIFs, it extracts the first frame (default behavior).
+    const bitmap = await createImageBitmap(file);
+
+    try {
+      const { width: srcW, height: srcH } = bitmap;
+
+      // Calculate target dimensions (fit within MAX_DIMENSION box)
+      let targetW = srcW;
+      let targetH = srcH;
+
+      if (srcW > MAX_DIMENSION || srcH > MAX_DIMENSION) {
+        if (srcW >= srcH) {
+          targetW = MAX_DIMENSION;
+          targetH = Math.round((srcH / srcW) * MAX_DIMENSION);
+        } else {
+          targetH = MAX_DIMENSION;
+          targetW = Math.round((srcW / srcH) * MAX_DIMENSION);
+        }
+      }
+
+      // Ensure minimum 1px dimensions
+      targetW = Math.max(1, targetW);
+      targetH = Math.max(1, targetH);
+
+      // Draw onto canvas and export as JPEG
+      const blob = await renderToJpeg(bitmap, targetW, targetH);
+      if (!blob) return null;
+
+      return { blob, width: targetW, height: targetH };
+    } finally {
+      bitmap.close();
+    }
+  } catch (err) {
+    // Canvas memory exhaustion on very large images (>50MP), or
+    // createImageBitmap failures on corrupted files — graceful fallback.
+    console.warn("[generateThumbnail] Failed for", file.name, err);
+    return null;
+  }
+}
+
+// ── Internal helpers ──
+
+/**
+ * Render an ImageBitmap to a JPEG Blob via OffscreenCanvas (or Canvas fallback).
+ */
+async function renderToJpeg(
+  bitmap: ImageBitmap,
+  width: number,
+  height: number
+): Promise<Blob | null> {
+  // Prefer OffscreenCanvas (Chrome, Firefox, Safari 16.4+)
+  if (typeof OffscreenCanvas !== "undefined") {
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    return canvas.convertToBlob({ type: "image/jpeg", quality: JPEG_QUALITY });
+  }
+
+  // Fallback: regular Canvas (older Safari)
+  return new Promise<Blob | null>((resolve) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      resolve(null);
+      return;
+    }
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    canvas.toBlob(
+      (blob) => resolve(blob),
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  });
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+/**
+ * Combine class names, filtering out falsy values.
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(" ");
+}