@morphika/webframe 0.1.0

package/lib/hooks/useViewport.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * Viewport breakpoints for the public site.
+ *
+ * The builder previews at fixed frame widths (desktop=1200, tablet=810,
+ * phone=390), but on the live site we use wider ranges so that real
+ * devices hit the correct layout:
+ *
+ *   Desktop: > 810px
+ *   Tablet:  481–810px
+ *   Phone:   ≤ 480px  (covers iPhone SE 375, iPhone 14 390, Pixel 412, etc.)
+ *
+ * Used by public-site renderers to apply the same responsive overrides
+ * that the builder previews via resolveBlock().
+ */
+export type Viewport = "desktop" | "tablet" | "phone";
+
+function getViewport(width: number): Viewport {
+  if (width <= 480) return "phone";
+  if (width <= 810) return "tablet";
+  return "desktop";
+}
+
+/**
+ * Returns the current viewport based on window width.
+ * Updates on resize. SSR-safe (defaults to "desktop").
+ */
+export function useViewport(): Viewport {
+  const [viewport, setViewport] = useState<Viewport>("desktop");
+
+  useEffect(() => {
+    const update = () => setViewport(getViewport(window.innerWidth));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  return viewport;
+}

package/lib/logger.ts

@@ -0,0 +1,81 @@
+/**
+ * Structured logger for production code.
+ *
+ * Replaces raw console.log/error/warn with consistent, structured output.
+ * Server-side logs emit JSON for easy parsing by log aggregation tools.
+ * Client-side logs use console methods with consistent formatting.
+ *
+ * Usage:
+ *   logger.error("[Storage]", "Operation failed", { status: 401 });
+ *   logger.warn("[R2]", "CORS auto-configure failed");
+ *   logger.info("[Scan]", "Retrying with empty root");
+ *   logger.debug("[Storage]", "Provider resolved", { provider: "r2" });
+ */
+
+type LogLevel = "debug" | "info" | "warn" | "error";
+
+const IS_SERVER = typeof window === "undefined";
+const IS_PROD = process.env.NODE_ENV === "production";
+
+function formatLog(level: LogLevel, tag: string, message: string, details?: unknown): string {
+  const entry: Record<string, unknown> = {
+    level,
+    tag,
+    message,
+    timestamp: new Date().toISOString(),
+  };
+  if (details !== undefined) {
+    // For Error objects, extract message and stack
+    if (details instanceof Error) {
+      entry.error = { message: details.message, stack: details.stack };
+    } else {
+      entry.details = details;
+    }
+  }
+  return JSON.stringify(entry);
+}
+
+function log(level: LogLevel, tag: string, message: string, details?: unknown): void {
+  // Suppress debug in production
+  if (level === "debug" && IS_PROD) return;
+
+  if (IS_SERVER) {
+    // Server: structured JSON for log aggregation
+    const line = formatLog(level, tag, message, details);
+    switch (level) {
+      case "error":
+        console.error(line);
+        break;
+      case "warn":
+        console.warn(line);
+        break;
+      default:
+        console.log(line);
+        break;
+    }
+  } else {
+    // Client: human-readable console output
+    const prefix = `${tag} ${message}`;
+    switch (level) {
+      case "error":
+        details !== undefined ? console.error(prefix, details) : console.error(prefix);
+        break;
+      case "warn":
+        details !== undefined ? console.warn(prefix, details) : console.warn(prefix);
+        break;
+      case "debug":
+        details !== undefined ? console.debug(prefix, details) : console.debug(prefix);
+        break;
+      default:
+        details !== undefined ? console.log(prefix, details) : console.log(prefix);
+        break;
+    }
+  }
+}
+
+export const logger = {
+  debug: (tag: string, message: string, details?: unknown) => log("debug", tag, message, details),
+  info: (tag: string, message: string, details?: unknown) => log("info", tag, message, details),
+  warn: (tag: string, message: string, details?: unknown) => log("warn", tag, message, details),
+  error: (tag: string, message: string, details?: unknown) => log("error", tag, message, details),
+};

package/lib/revalidate.ts

@@ -0,0 +1,23 @@
+import { csrfHeaders } from "../lib/csrf-client";
+import { logger } from "../lib/logger";
+
+/**
+ * Trigger on-demand ISR revalidation from the admin UI.
+ * Call after any save that should be reflected on the public site.
+ *
+ * @param paths - Specific paths to revalidate, e.g. ["/", "/about"].
+ *                If omitted, revalidates the entire site layout.
+ */
+export async function revalidateSite(paths?: string[]): Promise<void> {
+  try {
+    await fetch("/api/admin/revalidate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...csrfHeaders() },
+      body: JSON.stringify(paths ? { paths } : {}),
+    });
+  } catch {
+    // Silent fail — revalidation is best-effort.
+    // The ISR timer will still catch up within 1 hour.
+    logger.warn("[Revalidate]", "Revalidation request failed (non-critical)");
+  }
+}

package/lib/sanitize.ts

@@ -0,0 +1,91 @@
+/**
+ * HTML sanitization utilities.
+ *
+ * Defense-in-depth: currently the site doesn't render raw HTML from user input,
+ * but this module provides sanitization in case features evolve.
+ *
+ * For production use with user-generated HTML content, install DOMPurify:
+ *   npm install dompurify @types/dompurify
+ * and replace the stripHtml/sanitizeHtml functions below with DOMPurify calls.
+ */
+
+/** Characters that must be escaped in HTML contexts */
+const HTML_ESCAPE_MAP: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;",
+  "/": "&#x2F;",
+};
+
+const HTML_ESCAPE_RE = /[&<>"'/]/g;
+
+/**
+ * Escape a string for safe insertion into HTML.
+ * Prevents XSS by encoding characters that have special meaning in HTML.
+ */
+export function escapeHtml(str: string): string {
+  if (!str || typeof str !== "string") return "";
+  return str.replace(HTML_ESCAPE_RE, (char) => HTML_ESCAPE_MAP[char] || char);
+}
+
+/**
+ * Strip all HTML tags from a string, leaving only text content.
+ * Use this when you need plain text from potentially HTML-containing input.
+ */
+export function stripHtml(str: string): string {
+  if (!str || typeof str !== "string") return "";
+  // Remove all tags
+  return str.replace(/<[^>]*>/g, "");
+}
+
+/**
+ * Basic HTML sanitization — strips dangerous elements and attributes.
+ * Allows a limited set of safe tags for basic formatting.
+ *
+ * NOTE: For full HTML sanitization with user-generated content,
+ * replace this with DOMPurify. This is a minimal server-side fallback.
+ */
+const SAFE_TAGS = new Set([
+  "p", "br", "b", "i", "em", "strong", "u", "s",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "ul", "ol", "li", "blockquote", "code", "pre",
+  "a", "span", "div",
+]);
+
+const SAFE_ATTRS = new Set([
+  "href", "title", "class", "id",
+]);
+
+/**
+ * Sanitize HTML by stripping dangerous tags and attributes.
+ * For defense-in-depth only — prefer escapeHtml() or DOMPurify for
+ * actual user-generated HTML rendering.
+ */
+export function sanitizeHtml(html: string): string {
+  if (!html || typeof html !== "string") return "";
+
+  return html
+    // Remove script/style/iframe/object/embed tags and their contents
+    .replace(/<(script|style|iframe|object|embed|form)[^>]*>[\s\S]*?<\/\1>/gi, "")
+    // Remove event handler attributes
+    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    // Remove javascript: and data: URLs in attributes
+    .replace(/(?:href|src|action)\s*=\s*(?:"(?:javascript|data|vbscript):[^"]*"|'(?:javascript|data|vbscript):[^']*')/gi, "")
+    // Remove tags not in the safe list
+    .replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g, (match, tagName) => {
+      const tag = tagName.toLowerCase();
+      if (!SAFE_TAGS.has(tag)) return "";
+
+      // For opening tags, strip unsafe attributes
+      if (!match.startsWith("</")) {
+        return match.replace(/\s+([a-zA-Z-]+)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/g,
+          (attrMatch, attrName) => {
+            return SAFE_ATTRS.has(attrName.toLowerCase()) ? attrMatch : "";
+          }
+        );
+      }
+      return match;
+    });
+}

package/lib/sanity/client.ts

@@ -0,0 +1,8 @@
+import { createClient } from "next-sanity";
+
+export const client = createClient({
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
+  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
+  apiVersion: "2024-01-01",
+  useCdn: false,
+});