@morphika/webframe 0.1.0

package/lib/shader/glsl/rgb-shift.ts

@@ -0,0 +1,45 @@
+/**
+ * RGB Shift (chromatic aberration) fragment shader.
+ *
+ * Samples R, G, B channels with slightly offset UVs.
+ * Offset direction follows cursor position (hover) or scroll progress (scroll).
+ *
+ * Uniforms:
+ *   uTexture     — image texture
+ *   uMouse       — normalized cursor/scroll position (0–1)
+ *   uIntensity   — config intensity (0.5–2.0)
+ *   uSpeed       — config speed (0.5–3.0) — unused for this preset
+ *   uTime        — elapsed time (seconds) — unused for this preset
+ *   uHover       — lerped hover/scroll state (0→1)
+ *   uResolution  — canvas size in pixels
+ *
+ * Phase 2 shader — included for completeness, activated in Session 72.
+ */
+export const rgbShiftFragment = /* glsl */ `
+precision highp float;
+
+uniform sampler2D uTexture;
+uniform vec2 uMouse;
+uniform float uIntensity;
+uniform float uSpeed;
+uniform float uTime;
+uniform float uHover;
+uniform vec2 uResolution;
+
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv;
+
+  // Direction from center to mouse/scroll position
+  vec2 dir = uMouse - 0.5;
+  float strength = length(dir) * 0.02 * uIntensity * uHover;
+
+  // Offset each channel in a different direction
+  float r = texture2D(uTexture, uv + dir * strength).r;
+  float g = texture2D(uTexture, uv).g;
+  float b = texture2D(uTexture, uv - dir * strength).b;
+
+  gl_FragColor = vec4(r, g, b, 1.0);
+}
+`;

package/lib/shader/glsl/ripple.ts

@@ -0,0 +1,46 @@
+/**
+ * Ripple distortion fragment shader.
+ *
+ * Circular wave distortion emanating from the cursor position.
+ * Trigger: hover only.
+ *
+ * Uniforms:
+ *   uTexture     — image texture
+ *   uMouse       — normalized cursor position (0–1)
+ *   uIntensity   — config intensity (0.5–2.0)
+ *   uSpeed       — config speed (0.5–3.0)
+ *   uTime        — elapsed time (seconds)
+ *   uHover       — lerped hover state (0→1)
+ *   uResolution  — canvas size in pixels
+ */
+export const rippleFragment = /* glsl */ `
+precision highp float;
+
+uniform sampler2D uTexture;
+uniform vec2 uMouse;
+uniform float uIntensity;
+uniform float uSpeed;
+uniform float uTime;
+uniform float uHover;
+uniform vec2 uResolution;
+
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vUv;
+
+  // Distance from cursor
+  float dist = distance(uv, uMouse);
+
+  // Ripple wave — frequency and time-based animation
+  float ripple = sin(dist * 30.0 * uSpeed - uTime * 4.0) * 0.02 * uIntensity;
+  ripple *= smoothstep(0.5, 0.0, dist); // Fade with distance from cursor
+  ripple *= uHover;                      // Only active when hovering
+
+  // Displacement direction: push outward from cursor
+  vec2 direction = dist > 0.001 ? normalize(uv - uMouse) : vec2(0.0);
+  vec2 displaced = uv + direction * ripple;
+
+  gl_FragColor = texture2D(uTexture, displaced);
+}
+`;

package/lib/shader/glsl/vertex.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared vertex shader — pass-through UV coordinates.
+ * Used by all shader presets.
+ */
+export const vertexShader = /* glsl */ `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`;

package/lib/storage/index.ts

@@ -0,0 +1,211 @@
+/**
+ * Storage Provider Factory
+ *
+ * Central entry point for the storage abstraction layer.
+ * Reads the active provider from Sanity and returns the
+ * appropriate adapter instance.
+ *
+ * Currently only R2 is implemented. The adapter pattern is
+ * preserved so new providers can be added in the future.
+ *
+ * Usage:
+ *   const adapter = await getStorageAdapter();
+ *   const files = await adapter.listFiles();
+ *   const url = await adapter.resolveUrl("projects/hero.jpg");
+ */
+
+import { client } from "../../lib/sanity/client";
+import { R2Adapter } from "./r2-adapter";
+import { logger } from "../../lib/logger";
+import type { StorageAdapter, StorageProvider, StorageProviderConfig } from "./types";
+
+// ============================================
+// Adapter singletons (reused across requests)
+// ============================================
+
+let r2Adapter: R2Adapter | null = null;
+
+function getR2Adapter(): R2Adapter {
+  if (!r2Adapter) r2Adapter = new R2Adapter();
+  return r2Adapter;
+}
+
+// ============================================
+// Active provider resolution
+// ============================================
+
+/**
+ * Read the active storage provider from the asset registry.
+ * Defaults to "r2". Preserved for multi-provider architecture.
+ */
+export async function getActiveProvider(): Promise<StorageProvider> {
+  try {
+    const registry = await client.fetch(
+      `*[_type == "assetRegistry"][0]{ storage_provider }`
+    );
+    const provider = registry?.storage_provider;
+    if (provider === "r2") return "r2";
+    // Default to r2 (only provider currently supported)
+    return "r2";
+  } catch (err) {
+    logger.error("[Storage]", "Failed to read active provider from Sanity, falling back to R2", err);
+    return "r2";
+  }
+}
+
+// ============================================
+// Factory
+// ============================================
+
+/**
+ * Get the storage adapter for the currently active provider.
+ *
+ * @param provider - Explicit provider override. If omitted, reads from Sanity.
+ *                   Use this when the caller already knows which provider to use
+ *                   (e.g., the storage admin page showing both providers).
+ */
+export async function getStorageAdapter(
+  provider?: StorageProvider
+): Promise<StorageAdapter> {
+  const activeProvider = provider ?? (await getActiveProvider());
+
+  switch (activeProvider) {
+    case "r2":
+    default:
+      return getR2Adapter();
+  }
+}
+
+/**
+ * Get a specific adapter by provider name (does not check active provider).
+ * Used by admin UI to interact with a non-active provider (e.g., testing
+ * a new provider connection while another is still active).
+ */
+export function getAdapterForProvider(provider: StorageProvider): StorageAdapter {
+  switch (provider) {
+    case "r2":
+      return getR2Adapter();
+  }
+}
+
+/**
+ * Get the status of all configured storage providers.
+ * Returns status for each provider, plus which one is active.
+ */
+export async function getAllProviderStatuses(): Promise<{
+  activeProvider: StorageProvider;
+  providers: StorageProviderConfig[];
+}> {
+  const [activeResult, r2Result] = await Promise.allSettled([
+    getActiveProvider(),
+    getR2Adapter().getStatus(),
+  ]);
+
+  const activeProvider = activeResult.status === "fulfilled" ? activeResult.value : "r2";
+
+  const r2Status: StorageProviderConfig = r2Result.status === "fulfilled"
+    ? r2Result.value
+    : { provider: "r2", connected: false, displayName: "Cloudflare R2 — Error loading status" };
+
+  return {
+    activeProvider,
+    providers: [r2Status],
+  };
+}
+
+// ============================================
+// Cached R2 public URL (for proxy routes)
+// ============================================
+
+/**
+ * In-memory cache for the R2 public URL.
+ * Used by the asset proxy routes to resolve R2 redirects without
+ * hitting Sanity on every request. TTL: 5 minutes.
+ */
+let r2ConfigCache: {
+  provider: StorageProvider;
+  r2BucketUrl: string | null;
+  fetchedAt: number;
+} | null = null;
+
+// #4: In-flight promise deduplication — prevents cache stampede race condition
+let inFlightFetch: Promise<ProviderConfig> | null = null;
+
+const PROVIDER_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+export interface ProviderConfig {
+  provider: StorageProvider;
+  r2BucketUrl: string | null;
+}
+
+/**
+ * Get the active provider + config, with in-memory caching.
+ *
+ * Used by /api/assets and /api/admin/assets/file to decide
+ * how to redirect asset requests.
+ * Cached for 5 minutes to avoid hitting Sanity on every asset request.
+ *
+ * #4: Uses promise chaining to deduplicate concurrent requests.
+ * #23: Adds AbortController timeout on Sanity fetch.
+ */
+export async function getCachedProviderConfig(): Promise<ProviderConfig> {
+  const now = Date.now();
+  if (r2ConfigCache && now - r2ConfigCache.fetchedAt < PROVIDER_CACHE_TTL_MS) {
+    return r2ConfigCache;
+  }
+
+  // #4: If there's already an in-flight fetch, reuse it instead of starting a new one
+  if (inFlightFetch) return inFlightFetch;
+
+  inFlightFetch = (async () => {
+    try {
+      // #23: Add 5-second timeout to prevent hanging on slow Sanity
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5000);
+
+      const registry = await client.fetch(
+        `*[_type == "assetRegistry"][0]{
+          storage_provider,
+          r2_bucket_url
+        }`,
+        {},
+        { signal: controller.signal } as Record<string, unknown>
+      );
+
+      clearTimeout(timeout);
+
+      const config: ProviderConfig = {
+        provider: registry?.storage_provider === "r2" ? "r2" : "r2",
+        r2BucketUrl: registry?.r2_bucket_url || null,
+      };
+
+      r2ConfigCache = { ...config, fetchedAt: Date.now() };
+      return config;
+    } catch (err) {
+      // #19: Log errors for detectability
+      logger.error("[Storage]", "Failed to fetch provider config from Sanity", err);
+      // On error, return cached value if available, otherwise default to R2
+      if (r2ConfigCache) return r2ConfigCache as ProviderConfig;
+      return { provider: "r2" as StorageProvider, r2BucketUrl: null };
+    } finally {
+      inFlightFetch = null;
+    }
+  })();
+
+  return inFlightFetch;
+}
+
+/**
+ * Invalidate the provider config cache.
+ * Call this after switching providers or updating R2 configuration.
+ */
+export function invalidateProviderConfigCache(): void {
+  r2ConfigCache = null;
+}
+
+// ============================================
+// Re-exports for convenience
+// ============================================
+
+export type { StorageAdapter, StorageProvider, StorageProviderConfig, ScannedFile } from "./types";
+export { getMimeType, isMediaFile, MEDIA_EXTENSIONS } from "./types";

package/lib/storage/r2-adapter.ts

@@ -0,0 +1,286 @@
+/**
+ * Cloudflare R2 Storage Adapter
+ *
+ * Implements the StorageAdapter interface for Cloudflare R2.
+ *
+ * R2 uses direct public URLs for resolveUrl() (no API call needed)
+ * and S3-compatible ListObjectsV2Command for file listing.
+ * Static API keys — no token refresh complexity.
+ */
+
+import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
+import { client } from "../../lib/sanity/client";
+import { decryptToken } from "../../lib/security";
+import { logger } from "../../lib/logger";
+import type { StorageAdapter, StorageProviderConfig, ScannedFile } from "./types";
+import { isMediaFile, getMimeType } from "./types";
+
+// #18: Singleton S3Client — lazy initialized, reused across all operations
+let s3Singleton: S3Client | null = null;
+let s3ConfigHash: string = "";
+
+// ============================================
+// R2 configuration (read from Sanity)
+// ============================================
+
+interface R2Config {
+  bucketUrl: string;      // Public URL (e.g. https://assets.example.com)
+  endpoint: string;       // S3 endpoint (e.g. https://<id>.r2.cloudflarestorage.com)
+  bucketName: string;     // Bucket name (e.g. my-assets)
+  accessKeyId: string;    // Decrypted
+  secretAccessKey: string; // Decrypted
+}
+
+// ============================================
+// Adapter implementation
+// ============================================
+
+export class R2Adapter implements StorageAdapter {
+  readonly provider = "r2" as const;
+
+  /**
+   * List all media files in the R2 bucket.
+   *
+   * Uses S3-compatible ListObjectsV2Command to paginate through all objects.
+   * Filters to supported media extensions only.
+   *
+   * @param rootPath - Optional key prefix to scan from (e.g. "projects/").
+   *                   Empty or undefined = scan entire bucket.
+   */
+  async listFiles(rootPath?: string): Promise<ScannedFile[]> {
+    const config = await this.getConfig();
+    if (!config.endpoint || !config.bucketName || !config.accessKeyId || !config.secretAccessKey) {
+      throw new Error(
+        "R2 not connected. Go to /admin/storage to connect your R2 bucket."
+      );
+    }
+
+    // #18: Reuse singleton S3Client instead of creating a new one per call
+    const s3 = this.getOrCreateS3Client(config);
+
+    // Normalize prefix: strip leading/trailing slashes, add trailing slash if non-empty
+    const prefix = rootPath
+      ? rootPath.replace(/^\/+|\/+$/g, "") + "/"
+      : undefined;
+
+    const files: ScannedFile[] = [];
+    let continuationToken: string | undefined;
+
+    do {
+      const response = await s3.send(
+        new ListObjectsV2Command({
+          Bucket: config.bucketName,
+          Prefix: prefix || undefined,
+          ContinuationToken: continuationToken,
+          MaxKeys: 1000,
+        })
+      );
+
+      for (const obj of response.Contents || []) {
+        const key = obj.Key;
+        if (!key || !isMediaFile(key)) continue;
+
+        // Skip zero-byte "folder marker" objects
+        if (!obj.Size) continue;
+
+        const filename = key.split("/").pop() || key;
+        const extension = filename.includes(".")
+          ? filename.split(".").pop()!.toLowerCase()
+          : "";
+
+        files.push({
+          path: key,
+          filename,
+          extension,
+          file_size: obj.Size,
+          mime_type: getMimeType(filename),
+          file_hash: obj.ETag?.replace(/"/g, "") || undefined,
+        });
+      }
+
+      continuationToken = response.NextContinuationToken;
+    } while (continuationToken);
+
+    // Sort by path for consistent ordering
+    files.sort((a, b) => a.path.localeCompare(b.path));
+
+    return files;
+  }
+
+  /**
+   * Resolve a relative path to a direct R2 public URL.
+   *
+   * This is the key advantage of R2: no API call needed.
+   * The URL is deterministic: {bucketUrl}/{relativePath}
+   */
+  async resolveUrl(relativePath: string): Promise<string> {
+    const config = await this.getConfig();
+    if (!config.bucketUrl) {
+      throw new Error("R2 public bucket URL not configured");
+    }
+
+    const base = config.bucketUrl.replace(/\/$/, "");
+    const path = relativePath.replace(/^\//, "");
+    return `${base}/${path}`;
+  }
+
+  /**
+   * Test R2 connectivity.
+   * #29: Tests both public URL reachability AND S3 API credentials.
+   */
+  async testConnection(): Promise<{ ok: boolean; error?: string }> {
+    try {
+      const config = await this.getConfig();
+      if (!config.bucketUrl) {
+        return { ok: false, error: "R2 public URL not configured" };
+      }
+
+      // Test 1: Public URL reachability
+      const response = await fetch(config.bucketUrl, {
+        method: "HEAD",
+        signal: AbortSignal.timeout(5000),
+      });
+
+      if (!response.ok && response.status !== 404) {
+        return {
+          ok: false,
+          error: `R2 bucket returned HTTP ${response.status}`,
+        };
+      }
+
+      // #29: Test 2: S3 API credentials by listing one key
+      if (config.endpoint && config.accessKeyId && config.secretAccessKey) {
+        try {
+          const s3 = this.getOrCreateS3Client(config);
+          await s3.send(new ListObjectsV2Command({
+            Bucket: config.bucketName,
+            MaxKeys: 1,
+          }));
+        } catch (s3Err) {
+          return {
+            ok: false,
+            error: `S3 API test failed: ${s3Err instanceof Error ? s3Err.message : "credential error"}`,
+          };
+        }
+      }
+
+      return { ok: true };
+    } catch (err) {
+      return {
+        ok: false,
+        error: err instanceof Error ? err.message : "Connection test failed",
+      };
+    }
+  }
+
+  /**
+   * Get R2 connection status for the admin UI.
+   */
+  async getStatus(): Promise<StorageProviderConfig> {
+    try {
+      const registry = await client.fetch(
+        `*[_type == "assetRegistry"][0]{
+          r2_bucket_url,
+          r2_bucket_name,
+          r2_connected_at
+        }`
+      );
+
+      const connected = !!registry?.r2_bucket_url && !!registry?.r2_bucket_name;
+
+      return {
+        provider: "r2",
+        connected,
+        connectedAt: registry?.r2_connected_at || undefined,
+        displayName: connected
+          ? `Cloudflare R2 — ${registry?.r2_bucket_name}`
+          : "Cloudflare R2 — Not connected",
+      };
+    } catch {
+      return {
+        provider: "r2",
+        connected: false,
+        displayName: "Cloudflare R2 — Status unavailable",
+      };
+    }
+  }
+
+  // ============================================
+  // Internal helpers
+  // ============================================
+
+  /**
+   * #18: Get or create a singleton S3Client, reusing it if config hasn't changed.
+   */
+  private getOrCreateS3Client(config: R2Config): S3Client {
+    const hash = `${config.endpoint}:${config.accessKeyId}:${config.bucketName}`;
+    if (s3Singleton && s3ConfigHash === hash) return s3Singleton;
+
+    // Destroy old client if config changed
+    if (s3Singleton) {
+      try { s3Singleton.destroy(); } catch { /* ignore */ }
+    }
+
+    s3Singleton = new S3Client({
+      region: "auto",
+      endpoint: config.endpoint,
+      credentials: {
+        accessKeyId: config.accessKeyId,
+        secretAccessKey: config.secretAccessKey,
+      },
+    });
+    s3ConfigHash = hash;
+    return s3Singleton;
+  }
+
+  /**
+   * Read R2 configuration from the asset registry in Sanity.
+   * Decrypts stored credentials.
+   * #5: Gracefully handles corrupted encrypted tokens.
+   */
+  private async getConfig(): Promise<R2Config> {
+    const registry = await client.fetch(
+      `*[_type == "assetRegistry"][0]{
+        r2_bucket_url,
+        r2_endpoint,
+        r2_bucket_name,
+        r2_access_key_id,
+        r2_secret_access_key
+      }`
+    );
+
+    if (!registry) {
+      return {
+        bucketUrl: "",
+        endpoint: "",
+        bucketName: "",
+        accessKeyId: "",
+        secretAccessKey: "",
+      };
+    }
+
+    // #5: Wrap decryptToken in try/catch to prevent crash on corrupted tokens
+    let accessKeyId = "";
+    let secretAccessKey = "";
+    try {
+      accessKeyId = registry.r2_access_key_id
+        ? await decryptToken(registry.r2_access_key_id)
+        : "";
+      secretAccessKey = registry.r2_secret_access_key
+        ? await decryptToken(registry.r2_secret_access_key)
+        : "";
+    } catch (err) {
+      logger.error("[R2Adapter]", "Failed to decrypt credentials", err);
+      // Return config without credentials — callers will see empty strings
+      // and handle appropriately (e.g., showing "R2 not connected")
+    }
+
+    return {
+      bucketUrl: registry.r2_bucket_url || "",
+      endpoint: registry.r2_endpoint || "",
+      bucketName: registry.r2_bucket_name || "",
+      accessKeyId,
+      secretAccessKey,
+    };
+  }
+}