@morphika/webframe 0.1.0

package/components/builder/asset-browser/helpers.ts

@@ -0,0 +1,88 @@
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import type { FolderNode } from "./types";
+
+// ============================================
+// Folder drag & drop helpers
+// ============================================
+
+/** Resolve a FileSystemEntry (file or directory) recursively into File objects with relative paths. */
+export function readEntryAsFiles(entry: FileSystemEntry, basePath: string): Promise<{ file: File; relativePath: string }[]> {
+  return new Promise((resolve) => {
+    if (entry.isFile) {
+      (entry as FileSystemFileEntry).file(
+        (file) => resolve([{ file, relativePath: basePath }]),
+        () => resolve([]) // skip unreadable files
+      );
+    } else if (entry.isDirectory) {
+      const reader = (entry as FileSystemDirectoryEntry).createReader();
+      const allEntries: FileSystemEntry[] = [];
+
+      // readEntries returns batches of up to 100 — must loop until empty
+      const readBatch = () => {
+        reader.readEntries(
+          (batch) => {
+            if (batch.length === 0) {
+              // All entries read — recurse into each
+              Promise.all(
+                allEntries.map((child) =>
+                  readEntryAsFiles(child, basePath ? `${basePath}/${child.name}` : child.name)
+                )
+              ).then((nested) => resolve(nested.flat()));
+            } else {
+              allEntries.push(...batch);
+              readBatch();
+            }
+          },
+          () => resolve([]) // skip unreadable directories
+        );
+      };
+      readBatch();
+    } else {
+      resolve([]);
+    }
+  });
+}
+
+// ============================================
+// Helpers
+// ============================================
+
+export function formatFileSize(bytes: number | undefined): string {
+  if (!bytes) return "";
+  if (bytes > 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;
+  if (bytes > 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${bytes} B`;
+}
+
+export function isImageType(ext: string): boolean {
+  return ["jpg", "jpeg", "png", "webp", "gif", "svg"].includes(ext);
+}
+
+export function isVideoType(ext: string): boolean {
+  return ["mp4", "webm", "mov"].includes(ext);
+}
+
+export function isFontType(ext: string): boolean {
+  return ["otf", "ttf", "woff", "woff2"].includes(ext);
+}
+
+export function buildFolderTree(assets: RegisteredAsset[]): FolderNode {
+  const root: FolderNode = { name: "Unsorted", path: "", children: new Map(), files: [] };
+
+  for (const asset of assets) {
+    const parts = asset.path.split("/");
+    parts.pop(); // remove filename
+    let current = root;
+    let currentPath = "";
+
+    for (const folder of parts) {
+      currentPath = currentPath ? `${currentPath}/${folder}` : folder;
+      if (!current.children.has(folder)) {
+        current.children.set(folder, { name: folder, path: currentPath, children: new Map(), files: [] });
+      }
+      current = current.children.get(folder)!;
+    }
+    current.files.push(asset);
+  }
+  return root;
+}

package/components/builder/asset-browser/index.ts

@@ -0,0 +1 @@
+export { default, AssetBrowserInline } from "./AssetBrowser";

package/components/builder/asset-browser/types.ts

@@ -0,0 +1,49 @@
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+
+// ============================================
+// Upload types & constants
+// ============================================
+
+export interface UploadingFile {
+  id: string;
+  file: File;
+  key: string;         // R2 object key (folder/filename)
+  progress: number;    // 0–100
+  status: "pending" | "uploading" | "registering" | "done" | "error";
+  error?: string;
+}
+
+export const MAX_UPLOAD_SIZE = 500 * 1024 * 1024; // 500 MB per file
+export const ALLOWED_EXTENSIONS = new Set([
+  "jpg", "jpeg", "png", "webp", "gif", "svg",
+  "mp4", "webm", "mov",
+]);
+
+// ============================================
+// Component props
+// ============================================
+
+export interface AssetBrowserProps {
+  open: boolean;
+  onSelect: (path: string) => void;
+  onClose: () => void;
+  filterType?: "image" | "video" | "all";
+  /** Enable multi-select mode: user can pick multiple assets at once */
+  multiSelect?: boolean;
+  /** Called with all selected paths when multiSelect is true */
+  onSelectMultiple?: (paths: string[]) => void;
+}
+
+export interface AssetBrowserInlineProps {
+  /** If provided, triggers a refetch when this value changes */
+  refreshKey?: number;
+  /** Called after a successful scan with the API response data */
+  onScanComplete?: (result: Record<string, unknown>) => void;
+}
+
+export interface FolderNode {
+  name: string;
+  path: string;
+  children: Map<string, FolderNode>;
+  files: RegisteredAsset[];
+}

package/components/builder/asset-browser/useAssetBrowser.ts

@@ -0,0 +1,344 @@
+"use client";
+
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { generateThumbnail, isRasterImage, thumbKeyForPath } from "../../../lib/thumbnails/generate";
+import type { UploadingFile } from "./types";
+import { MAX_UPLOAD_SIZE, ALLOWED_EXTENSIONS } from "./types";
+
+// ============================================
+// Hook: shared asset fetching + scan logic
+// ============================================
+
+export function useAssetBrowser(onScanComplete?: (result: Record<string, unknown>) => void, onUploadComplete?: () => void) {
+  const [assets, setAssets] = useState<RegisteredAsset[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [seedUrl, setSeedUrl] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentFolder, setCurrentFolder] = useState("");
+  const [selectedAsset, setSelectedAsset] = useState<RegisteredAsset | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [uploading, setUploading] = useState<UploadingFile[]>([]);
+  const [r2Available, setR2Available] = useState(false);
+  const uploadCleanupTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Clean up pending timer on unmount
+  useEffect(() => {
+    return () => {
+      if (uploadCleanupTimer.current) clearTimeout(uploadCleanupTimer.current);
+    };
+  }, []);
+
+  const fetchAssets = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/admin/assets/registry");
+      if (!res.ok) throw new Error("Failed to load assets");
+      const data = await res.json();
+      setAssets(data.registry?.assets || []);
+      setSeedUrl(data.registry?.seed_url || "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Check provider status
+  const checkProviderStatus = useCallback(async () => {
+    try {
+      const r2Res = await fetch("/api/admin/r2/status");
+      if (r2Res.ok) {
+        const data = await r2Res.json();
+        setR2Available(data.connected === true);
+      }
+    } catch {
+      // Best effort
+    }
+  }, []);
+
+  const handleScan = useCallback(async () => {
+    setScanning(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/admin/assets/scan", { method: "POST", headers: { ...csrfHeaders() } });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        throw new Error(data.error || `Scan failed (${res.status})`);
+      }
+      onScanComplete?.(data);
+      await fetchAssets();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Scan failed");
+    } finally {
+      setScanning(false);
+    }
+  }, [fetchAssets, onScanComplete]);
+
+  /**
+   * Upload files to R2 via presigned URLs.
+   *
+   * Flow per file:
+   * 1. Request presigned PUT URL from server
+   * 2. PUT directly to R2 (XHR for progress tracking)
+   * 3. Register the asset in Sanity
+   * 4. Refresh the asset list
+   */
+  const handleUpload = useCallback(async (files: File[], targetFolder: string) => {
+    if (!files.length) return;
+
+    // Validate files — collect all errors before displaying
+    const validFiles: File[] = [];
+    const errors: string[] = [];
+    for (const file of files) {
+      const ext = file.name.split(".").pop()?.toLowerCase() || "";
+      if (!ALLOWED_EXTENSIONS.has(ext)) {
+        errors.push(`"${file.name}" is not a supported file type.`);
+        continue;
+      }
+      if (file.size > MAX_UPLOAD_SIZE) {
+        errors.push(`"${file.name}" exceeds the 500 MB limit.`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+
+    if (errors.length) setError(errors.join(" "));
+    if (!validFiles.length) return;
+
+    // Create upload entries
+    const uploads: UploadingFile[] = validFiles.map((file) => ({
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      file,
+      key: targetFolder ? `${targetFolder}/${file.name}` : file.name,
+      progress: 0,
+      status: "pending" as const,
+    }));
+
+    setUploading((prev) => [...prev, ...uploads]);
+
+    // Process uploads sequentially to avoid overwhelming the server
+    for (const upload of uploads) {
+      try {
+        // Step 0: Generate thumbnail for raster images (client-side, ~200ms)
+        let thumbBlob: Blob | null = null;
+        if (isRasterImage(upload.file.name)) {
+          try {
+            const thumbResult = await generateThumbnail(upload.file);
+            if (thumbResult) thumbBlob = thumbResult.blob;
+          } catch {
+            // Thumb generation failed — continue without thumbnail
+            console.warn(`[upload] Thumbnail generation failed for ${upload.file.name}`);
+          }
+        }
+
+        // Step 1: Get presigned URL(s)
+        setUploading((prev) =>
+          prev.map((u) => u.id === upload.id ? { ...u, status: "uploading" as const } : u)
+        );
+
+        // Build the thumb key: _thumbs/{folder}/{name_without_ext}.jpg
+        const thumbKey = thumbBlob
+          ? thumbKeyForPath(targetFolder ? `${targetFolder}/${upload.file.name}` : upload.file.name)
+          : null;
+        // thumbKey is e.g. "_thumbs/projects/hero.jpg" — split into folder + filename
+        const thumbFolder = thumbKey ? thumbKey.slice(0, thumbKey.lastIndexOf("/")) : null;
+        const thumbFilename = thumbKey ? thumbKey.slice(thumbKey.lastIndexOf("/") + 1) : null;
+
+        // Request presigned URLs in parallel (original + thumbnail if applicable)
+        const urlPromise = fetch("/api/admin/r2/upload-url", {
+          method: "POST",
+          headers: { "Content-Type": "application/json", ...csrfHeaders() },
+          body: JSON.stringify({
+            filename: upload.file.name,
+            folder: targetFolder,
+            contentType: upload.file.type || undefined,
+          }),
+        });
+
+        const thumbUrlPromise = thumbBlob && thumbFolder && thumbFilename
+          ? fetch("/api/admin/r2/upload-url", {
+              method: "POST",
+              headers: { "Content-Type": "application/json", ...csrfHeaders() },
+              body: JSON.stringify({
+                filename: thumbFilename,
+                folder: thumbFolder,
+                contentType: "image/jpeg",
+              }),
+            })
+          : null;
+
+        const [urlRes, thumbUrlRes] = await Promise.all([
+          urlPromise,
+          thumbUrlPromise,
+        ]);
+
+        if (!urlRes.ok) {
+          const urlErr = await urlRes.json().catch(() => ({}));
+          throw new Error(urlErr.error || `Failed to get upload URL (${urlRes.status})`);
+        }
+
+        const { uploadUrl, key } = await urlRes.json();
+
+        // Parse thumb presigned URL (best-effort — don't fail the original)
+        let thumbUploadUrl: string | null = null;
+        if (thumbUrlRes) {
+          if (thumbUrlRes.ok) {
+            const thumbData = await thumbUrlRes.json();
+            thumbUploadUrl = thumbData.uploadUrl;
+          } else {
+            console.warn(`[upload] Failed to get thumb upload URL for ${upload.file.name}`);
+          }
+        }
+
+        // Step 2: Upload original to R2 via XHR (progress tracking) + thumbnail in parallel
+        const originalUploadPromise = new Promise<void>((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open("PUT", uploadUrl, true);
+          xhr.setRequestHeader("Content-Type", upload.file.type || "application/octet-stream");
+
+          const onProgress = (e: ProgressEvent) => {
+            if (e.lengthComputable) {
+              const pct = Math.round((e.loaded / e.total) * 100);
+              setUploading((prev) =>
+                prev.map((u) => u.id === upload.id ? { ...u, progress: pct } : u)
+              );
+            }
+          };
+          const onLoad = () => {
+            cleanup();
+            if (xhr.status >= 200 && xhr.status < 300) {
+              resolve();
+            } else {
+              reject(new Error(`R2 upload failed (HTTP ${xhr.status})`));
+            }
+          };
+          const onError = () => { cleanup(); reject(new Error("Upload network error")); };
+          const onAbort = () => { cleanup(); reject(new Error("Upload cancelled")); };
+
+          const cleanup = () => {
+            xhr.upload.removeEventListener("progress", onProgress);
+            xhr.removeEventListener("load", onLoad);
+            xhr.removeEventListener("error", onError);
+            xhr.removeEventListener("abort", onAbort);
+          };
+
+          xhr.upload.addEventListener("progress", onProgress);
+          xhr.addEventListener("load", onLoad);
+          xhr.addEventListener("error", onError);
+          xhr.addEventListener("abort", onAbort);
+
+          xhr.send(upload.file);
+        });
+
+        // Thumbnail upload: fire-and-forget via simple fetch (no progress tracking)
+        let thumbUploadOk = false;
+        const thumbUploadPromise = thumbUploadUrl && thumbBlob
+          ? fetch(thumbUploadUrl, {
+              method: "PUT",
+              headers: { "Content-Type": "image/jpeg" },
+              body: thumbBlob,
+            })
+              .then((res) => { thumbUploadOk = res.ok; })
+              .catch(() => { thumbUploadOk = false; })
+          : Promise.resolve();
+
+        // Wait for both in parallel — original is required, thumb is best-effort
+        await Promise.all([originalUploadPromise, thumbUploadPromise]);
+
+        // Step 3: Register in Sanity (with has_thumbnail if thumb succeeded)
+        setUploading((prev) =>
+          prev.map((u) => u.id === upload.id ? { ...u, status: "registering" as const, progress: 100 } : u)
+        );
+
+        const regRes = await fetch("/api/admin/assets/register", {
+          method: "POST",
+          headers: { "Content-Type": "application/json", ...csrfHeaders() },
+          body: JSON.stringify({
+            key,
+            fileSize: upload.file.size,
+            contentType: upload.file.type || undefined,
+            ...(thumbUploadOk ? { has_thumbnail: true } : {}),
+          }),
+        });
+
+        if (!regRes.ok) {
+          const regErr = await regRes.json().catch(() => ({}));
+          throw new Error(regErr.error || "Failed to register asset");
+        }
+
+        // Step 4: Mark done
+        setUploading((prev) =>
+          prev.map((u) => u.id === upload.id ? { ...u, status: "done" as const } : u)
+        );
+
+        // Subtle warning if raster image but thumbnail failed
+        if (isRasterImage(upload.file.name) && !thumbUploadOk) {
+          console.warn(`[upload] Thumbnail not created for ${upload.file.name} — full resolution will be used`);
+        }
+      } catch (err) {
+        setUploading((prev) =>
+          prev.map((u) =>
+            u.id === upload.id
+              ? { ...u, status: "error" as const, error: err instanceof Error ? err.message : "Upload failed" }
+              : u
+          )
+        );
+      }
+    }
+
+    // Refresh assets after all uploads complete
+    await fetchAssets();
+
+    // Notify ThumbStatusProvider so builder badges update immediately
+    onUploadComplete?.();
+
+    // Clear completed uploads after a short delay (with cleanup on unmount)
+    if (uploadCleanupTimer.current) clearTimeout(uploadCleanupTimer.current);
+    uploadCleanupTimer.current = setTimeout(() => {
+      uploadCleanupTimer.current = null;
+      setUploading((prev) => prev.filter((u) => u.status !== "done"));
+    }, 2000);
+  }, [fetchAssets, onUploadComplete]);
+
+  const clearUploadError = useCallback((id: string) => {
+    setUploading((prev) => prev.filter((u) => u.id !== id));
+  }, []);
+
+  // Only expose active assets (exclude missing/deleted) — browser is a mirror of storage
+  const activeAssets = useMemo(() => assets.filter((a) => a.status !== "missing"), [assets]);
+
+  // Optimistically add a synthetic .folder entry so buildFolderTree sees the new folder
+  // immediately, without waiting for a full registry refresh.
+  const addSyntheticFolder = useCallback((folderPath: string) => {
+    const syntheticKey = `${folderPath}/.folder`;
+    setAssets((prev) => {
+      // Don't add if an asset already exists in this folder
+      if (prev.some((a) => a.path.startsWith(folderPath + "/"))) return prev;
+      return [
+        ...prev,
+        {
+          _key: `synthetic-${Date.now()}`,
+          path: syntheticKey,
+          filename: ".folder",
+          extension: "",
+          file_size: 0,
+          mime_type: "application/x-empty",
+          has_thumbnail: false,
+          status: "active",
+        } as RegisteredAsset,
+      ];
+    });
+  }, []);
+
+  return {
+    assets: activeAssets, loading, error, seedUrl, searchQuery, setSearchQuery,
+    currentFolder, setCurrentFolder, selectedAsset, setSelectedAsset,
+    scanning, fetchAssets, handleScan,
+    uploading, r2Available,
+    handleUpload, clearUploadError, checkProviderStatus, addSyntheticFolder,
+  };
+}

package/components/builder/asset-browser/useR2DragDrop.ts

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { readEntryAsFiles } from "./helpers";
+
+// ============================================
+// R2 Drag & Drop hook
+// ============================================
+
+export interface UseR2DragDropOptions {
+  currentFolder: string;
+  onUpload?: (files: File[], folder: string) => void | Promise<void>;
+}
+
+export function useR2DragDrop({ currentFolder, onUpload }: UseR2DragDropOptions) {
+  const [dragOver, setDragOver] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer?.types.includes("Files")) {
+      setDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setDragOver(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    dragCounterRef.current = 0;
+
+    if (!onUpload) return;
+
+    // Try webkitGetAsEntry() first — this detects directories vs files
+    const items = e.dataTransfer?.items;
+    if (items && items.length > 0 && typeof items[0].webkitGetAsEntry === "function") {
+      const entries: FileSystemEntry[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const entry = items[i].webkitGetAsEntry();
+        if (entry) entries.push(entry);
+      }
+
+      if (entries.length > 0) {
+        // Resolve directories recursively into flat file list with relative paths
+        const results = await Promise.all(
+          entries.map((entry) =>
+            readEntryAsFiles(entry, entry.isDirectory ? entry.name : "")
+          )
+        );
+        const flatFiles = results.flat();
+
+        if (flatFiles.length > 0) {
+          // Group files by their target subfolder so each group gets one handleUpload call.
+          const byFolder = new Map<string, File[]>();
+          for (const { file, relativePath } of flatFiles) {
+            const pathParts = relativePath.split("/");
+            pathParts.pop(); // remove filename → subfolder path
+            const subFolder = pathParts.join("/");
+            const targetFolder = subFolder
+              ? (currentFolder ? `${currentFolder}/${subFolder}` : subFolder)
+              : currentFolder;
+            const existing = byFolder.get(targetFolder) || [];
+            existing.push(file);
+            byFolder.set(targetFolder, existing);
+          }
+
+          // Upload each folder group sequentially to avoid race conditions
+          for (const [folder, files] of byFolder) {
+            await onUpload(files, folder);
+          }
+          return;
+        }
+      }
+    }
+
+    // Fallback: plain file drop (no webkitGetAsEntry support)
+    const files = Array.from(e.dataTransfer?.files || []);
+    if (files.length > 0) {
+      onUpload(files, currentFolder);
+    }
+  }, [onUpload, currentFolder]);
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!onUpload) return;
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      onUpload(files, currentFolder);
+    }
+    e.target.value = "";
+  }, [onUpload, currentFolder]);
+
+  return {
+    dragOver,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileInputChange,
+  };
+}