@morphika/webframe 0.1.0

package/components/builder/asset-browser/FolderTreeItem.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import type { FolderNode } from "./types";
+
+export function FolderTreeItem({
+  node,
+  depth,
+  currentFolder,
+  onSelectFolder,
+}: {
+  node: FolderNode;
+  depth: number;
+  currentFolder: string;
+  onSelectFolder: (path: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(depth < 2);
+  const isActive = currentFolder === node.path;
+  const hasChildren = node.children.size > 0;
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          onSelectFolder(node.path);
+          if (hasChildren) setExpanded(!expanded);
+        }}
+        className={`w-full flex items-center gap-2 px-3 py-1.5 text-left transition-colors rounded-md ${
+          isActive
+            ? "bg-neutral-200 text-neutral-900 font-medium"
+            : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800"
+        }`}
+        style={{ paddingLeft: `${depth * 16 + 12}px` }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={isActive ? "text-neutral-700" : "text-neutral-400"}>
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+        </svg>
+        <span className="text-xs truncate flex-1">{node.name}</span>
+      </button>
+
+      {expanded &&
+        Array.from(node.children.values())
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((child) => (
+            <FolderTreeItem
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              currentFolder={currentFolder}
+              onSelectFolder={onSelectFolder}
+            />
+          ))}
+    </div>
+  );
+}

package/components/builder/asset-browser/R2BrowserContent.tsx

@@ -0,0 +1,436 @@
+"use client";
+
+import { useState, useMemo, useCallback, useRef, useEffect, Fragment } from "react";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import { VirtualAssetGrid } from "../VirtualAssetGrid";
+import type { UploadingFile } from "./types";
+import { formatFileSize, isImageType, isVideoType, isFontType, buildFolderTree } from "./helpers";
+import { FolderTreeItem } from "./FolderTreeItem";
+import { VideoThumbnail } from "./VideoThumbnail";
+import { FileLightbox } from "./FileLightbox";
+import { useR2Operations } from "./useR2Operations";
+import { useR2DragDrop } from "./useR2DragDrop";
+import { R2ContextMenu, type ContextMenuState } from "./R2ContextMenu";
+import { ADMIN_ACCENT, BUILDER_GREEN } from "../../../lib/builder/constants";
+
+// ============================================
+// R2 Browser — Composition shell
+// ============================================
+
+export function R2BrowserContent({
+  assets, loading, error, currentFolder, setCurrentFolder,
+  selectedAsset, setSelectedAsset, onRetry, onDoubleClick,
+  filterType = "all", multiSelect = false, selectedAssets = [],
+  setSelectedAssets, uploading = [], onUpload, onClearUploadError,
+  searchQuery, setSearchQuery, toggleSlot, onMutationComplete,
+  onFolderCreated,
+}: {
+  assets: RegisteredAsset[];
+  loading: boolean;
+  error: string | null;
+  currentFolder: string;
+  setCurrentFolder: (f: string) => void;
+  selectedAsset: RegisteredAsset | null;
+  setSelectedAsset: (a: RegisteredAsset | null) => void;
+  onRetry: () => void;
+  onDoubleClick?: (asset: RegisteredAsset) => void;
+  filterType?: "image" | "video" | "all";
+  multiSelect?: boolean;
+  selectedAssets?: RegisteredAsset[];
+  setSelectedAssets?: (assets: RegisteredAsset[]) => void;
+  uploading?: UploadingFile[];
+  onUpload?: (files: File[], folder: string) => void | Promise<void>;
+  onClearUploadError?: (id: string) => void;
+  searchQuery: string;
+  setSearchQuery: (q: string) => void;
+  toggleSlot?: React.ReactNode;
+  onMutationComplete?: () => void;
+  onFolderCreated?: (folderPath: string) => void;
+}) {
+  const [lightboxAsset, setLightboxAsset] = useState<RegisteredAsset | null>(null);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const newFolderInputRef = useRef<HTMLInputElement>(null);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  // Hooks
+  const ops = useR2Operations({ onRetry, onMutationComplete, onFolderCreated, currentFolder });
+
+  // Focus the new folder input when it appears — uses rAF to ensure focus
+  // survives portal-inside-modal contexts where autoFocus can fail.
+  useEffect(() => {
+    if (ops.showNewFolderInput && newFolderInputRef.current) {
+      requestAnimationFrame(() => newFolderInputRef.current?.focus());
+    }
+  }, [ops.showNewFolderInput]);
+
+  // Same for rename input
+  useEffect(() => {
+    if (ops.renameTarget && renameInputRef.current) {
+      requestAnimationFrame(() => renameInputRef.current?.focus());
+    }
+  }, [ops.renameTarget]);
+
+  const dnd = useR2DragDrop({ currentFolder, onUpload });
+
+  // Context menu handler
+  const handleContextMenu = useCallback((e: React.MouseEvent, asset?: RegisteredAsset, folder?: import("./types").FolderNode) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, asset, folder });
+  }, []);
+
+  // Only show assets that actually exist in storage
+  const activeAssets = useMemo(() => assets.filter((a) => a.status !== "missing"), [assets]);
+
+  // Folder tree (built from active assets only — includes synthetic .folder entries)
+  const folderTree = useMemo(() => buildFolderTree(activeAssets), [activeAssets]);
+
+  // Filter assets for current view (hide .folder placeholders from file grid)
+  const filteredAssets = useMemo(() => {
+    let filtered = activeAssets.filter((a) => a.filename !== ".folder");
+
+    if (currentFolder) {
+      filtered = filtered.filter(
+        (a) => a.path.startsWith(currentFolder + "/") && !a.path.slice(currentFolder.length + 1).includes("/")
+      );
+    } else {
+      filtered = filtered.filter((a) => !a.path.includes("/"));
+    }
+
+    if (filterType === "image") filtered = filtered.filter((a) => isImageType(a.extension));
+    else if (filterType === "video") filtered = filtered.filter((a) => isVideoType(a.extension));
+
+    if (searchQuery.trim()) {
+      const q = searchQuery.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+      filtered = activeAssets.filter(
+        (a) => {
+          const nameNorm = a.filename.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+          const pathNorm = a.path.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+          return a.filename !== ".folder" && (nameNorm.includes(q) || pathNorm.includes(q)) &&
+            (filterType === "all" || (filterType === "image" ? isImageType(a.extension) : isVideoType(a.extension)));
+        }
+      );
+    }
+
+    return filtered;
+  }, [activeAssets, currentFolder, filterType, searchQuery]);
+
+  // Subfolders
+  const currentSubfolders = useMemo(() => {
+    if (searchQuery) return [];
+    if (!currentFolder) return Array.from(folderTree.children.values()).sort((a, b) => a.name.localeCompare(b.name));
+    const parts = currentFolder.split("/");
+    let node = folderTree;
+    for (const part of parts) {
+      const child = node.children.get(part);
+      if (!child) return [];
+      node = child;
+    }
+    return Array.from(node.children.values()).sort((a, b) => a.name.localeCompare(b.name));
+  }, [folderTree, currentFolder, searchQuery]);
+
+  // Breadcrumbs
+  const breadcrumbs = useMemo(() => {
+    if (!currentFolder) return [{ name: "All Files", path: "" }];
+    const parts = currentFolder.split("/");
+    const crumbs = [{ name: "All Files", path: "" }];
+    let path = "";
+    for (const part of parts) {
+      path = path ? `${path}/${part}` : part;
+      crumbs.push({ name: part, path });
+    }
+    return crumbs;
+  }, [currentFolder]);
+
+  const resolveAssetUrl = (path: string) => `/api/admin/assets/file?path=${encodeURIComponent(path)}`;
+
+  const handleItemDoubleClick = (asset: RegisteredAsset) => {
+    if (onDoubleClick) onDoubleClick(asset);
+    else setLightboxAsset(asset);
+  };
+
+  // Thumbnail renderer
+  const renderThumbnail = (asset: RegisteredAsset) => {
+    if (isImageType(asset.extension)) {
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={resolveAssetUrl(asset.path)}
+          alt={asset.filename}
+          className="w-full h-full object-cover"
+          loading="lazy"
+          onError={(e) => {
+            const el = e.target as HTMLImageElement;
+            el.style.display = "none";
+            if (el.parentElement) {
+              const fallback = document.createElement("div");
+              fallback.className = "w-full h-full flex items-center justify-center bg-neutral-100 text-neutral-400";
+              fallback.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
+              el.parentElement.appendChild(fallback);
+            }
+          }}
+        />
+      );
+    }
+
+    if (isVideoType(asset.extension)) {
+      return <VideoThumbnail src={resolveAssetUrl(asset.path)} alt={asset.filename} />;
+    }
+
+    if (isFontType(asset.extension)) {
+      return (
+        <div className="w-full h-full flex items-center justify-center bg-neutral-50">
+          <span className="text-3xl text-neutral-300 font-serif">Aa</span>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-neutral-50">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-300">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+          <polyline points="14 2 14 8 20 8" />
+        </svg>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className="flex flex-1 min-h-0 relative"
+      onDragEnter={dnd.handleDragEnter}
+      onDragLeave={dnd.handleDragLeave}
+      onDragOver={dnd.handleDragOver}
+      onDrop={dnd.handleDrop}
+    >
+      {/* Hidden file input for upload button */}
+      <input
+        ref={ops.fileInputRef}
+        type="file"
+        multiple
+        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime"
+        className="hidden"
+        onChange={dnd.handleFileInputChange}
+      />
+
+      {/* Drag & drop overlay */}
+      {dnd.dragOver && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#076bff]/10 border-2 border-dashed border-[#076bff] rounded-lg backdrop-blur-[2px]">
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-16 h-16 rounded-full bg-[#076bff]/10 flex items-center justify-center">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={ADMIN_ACCENT} strokeWidth="1.5">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+            </div>
+            <p className="text-sm font-medium text-[#076bff]">
+              Drop files or folders here{currentFolder ? ` to ${currentFolder}` : ""}
+            </p>
+            <p className="text-xs text-neutral-500">Supported formats: JPG, PNG, WebP, GIF, SVG, MP4, WebM, MOV</p>
+            <p className="text-xs text-neutral-400">Maximum file size: 500 MB</p>
+          </div>
+        </div>
+      )}
+
+      {/* Sidebar — Folder Tree */}
+      <div className="w-[220px] border-r border-neutral-200 flex flex-col bg-[#fafafa]">
+        <div className="flex items-center justify-between px-4 h-11 border-b border-neutral-200 shrink-0">
+          <span className="text-sm font-medium text-neutral-900">Folders</span>
+          {toggleSlot}
+        </div>
+        <div className="flex-1 overflow-y-auto py-2 px-1">
+          <button
+            onClick={() => setCurrentFolder("")}
+            className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
+              currentFolder === "" ? "bg-neutral-200 text-neutral-900 font-medium" : "text-neutral-600 hover:bg-neutral-100"
+            }`}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={currentFolder === "" ? "text-neutral-700" : "text-neutral-400"}>
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+            </svg>
+            <span className="text-xs">All Files</span>
+          </button>
+          {Array.from(folderTree.children.values())
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((child) => (
+              <FolderTreeItem key={child.path} node={child} depth={1} currentFolder={currentFolder} onSelectFolder={setCurrentFolder} />
+            ))}
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Toolbar */}
+        <div className="flex items-center justify-between px-4 h-11 border-b border-neutral-200 shrink-0">
+          <div className="flex items-center gap-1 min-w-0 shrink">
+            {breadcrumbs.map((crumb, i) => (
+              <Fragment key={crumb.path + i}>
+                {i > 0 && <span className="text-neutral-300 text-xs mx-1">/</span>}
+                <button onClick={() => setCurrentFolder(crumb.path)} className="text-xs text-neutral-500 hover:text-neutral-800 transition-colors whitespace-nowrap">
+                  {crumb.name}
+                </button>
+              </Fragment>
+            ))}
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={ops.openNewFolderInput} disabled={ops.actionLoading} className="inline-flex items-center gap-1.5 rounded-lg bg-neutral-100 px-3 py-1.5 text-[11px] text-neutral-700 font-medium uppercase tracking-wider hover:bg-neutral-200 transition-colors disabled:opacity-50" title="Create a new folder" type="button">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                <line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" />
+              </svg>
+              New Folder
+            </button>
+            <button
+              onClick={() => ops.fileInputRef.current?.click()}
+              disabled={uploading.some((u) => u.status === "uploading" || u.status === "registering")}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[#076bff] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#076bff]/90 transition-colors disabled:opacity-50"
+              title={`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}
+              type="button"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              Upload
+            </button>
+          </div>
+        </div>
+
+        {/* Upload progress bar */}
+        {uploading.length > 0 && (
+          <div className="border-b border-neutral-200 px-4 py-2 space-y-1.5 bg-neutral-50/50">
+            {uploading.map((u) => (
+              <div key={u.id} className="flex items-center gap-3">
+                {u.status === "done" ? (
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={BUILDER_GREEN} strokeWidth="2.5"><polyline points="20 6 9 17 4 12" /></svg>
+                ) : u.status === "error" ? (
+                  <button onClick={() => onClearUploadError?.(u.id)} title="Dismiss">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                  </button>
+                ) : (
+                  <div className="w-3.5 h-3.5 border-2 border-[#076bff] border-t-transparent rounded-full animate-spin" />
+                )}
+                <span className="text-[11px] text-neutral-600 truncate flex-1 min-w-0">
+                  {u.file.name}
+                  {u.status === "registering" && <span className="text-neutral-400 ml-1">Registering...</span>}
+                  {u.status === "error" && <span className="text-red-500 ml-1">{u.error}</span>}
+                </span>
+                {(u.status === "uploading" || u.status === "registering") && (
+                  <div className="w-24 h-1.5 bg-neutral-200 rounded-full overflow-hidden">
+                    <div className="h-full bg-[#076bff] rounded-full transition-all duration-300" style={{ width: `${u.progress}%` }} />
+                  </div>
+                )}
+                <span className="text-[10px] text-neutral-400 tabular-nums">{formatFileSize(u.file.size)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Grid content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading && (
+            <div className="flex items-center justify-center h-40">
+              <span className="text-xs text-neutral-400 animate-pulse">Loading assets...</span>
+            </div>
+          )}
+
+          {error && (
+            <div className="flex flex-col items-center justify-center h-40 gap-3 px-8">
+              <span className="text-xs text-red-500 text-center max-w-md leading-relaxed">{error}</span>
+              <button onClick={onRetry} className="text-xs text-[#076bff] hover:underline">Retry</button>
+            </div>
+          )}
+
+          {!loading && !error && (
+            <>
+              {/* New folder input */}
+              {ops.showNewFolderInput && (
+                <div className="flex items-center gap-2 mb-4 p-3 bg-neutral-50 rounded-lg border border-neutral-200">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400 shrink-0">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                  </svg>
+                  <input
+                    ref={newFolderInputRef}
+                    type="text" value={ops.newFolderName} onChange={(e) => ops.setNewFolderName(e.target.value)}
+                    onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleCreateFolder(); if (e.key === "Escape") ops.cancelNewFolderInput(); }}
+                    placeholder="Folder name..." className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                  />
+                  <button onClick={ops.handleCreateFolder} disabled={!ops.newFolderName.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Create</button>
+                  <button onClick={ops.cancelNewFolderInput} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
+                </div>
+              )}
+
+              {/* Rename dialog */}
+              {ops.renameTarget && (
+                <div className="flex items-center gap-2 mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                  <span className="text-xs text-neutral-500 shrink-0">Rename:</span>
+                  <input
+                    ref={renameInputRef}
+                    type="text" value={ops.renameValue} onChange={(e) => ops.setRenameValue(e.target.value)}
+                    onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleRename(); if (e.key === "Escape") ops.cancelRename(); }}
+                    className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                  />
+                  <button onClick={ops.handleRename} disabled={!ops.renameValue.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Rename</button>
+                  <button onClick={ops.cancelRename} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
+                </div>
+              )}
+
+              {/* Subfolders */}
+              {currentSubfolders.length > 0 && (
+                <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-3 mb-4">
+                  {currentSubfolders.map((folder) => (
+                    <button key={folder.path} onClick={() => setCurrentFolder(folder.path)} onContextMenu={(e) => handleContextMenu(e, undefined, folder)} className="flex flex-col items-center gap-1.5 p-3 rounded-lg hover:bg-neutral-100 transition-colors">
+                      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" className="text-neutral-400">
+                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" fill="#f5f5f5" />
+                      </svg>
+                      <span className="text-xs text-neutral-600 truncate w-full text-center">{folder.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {/* Files grid */}
+              {filteredAssets.length > 0 && (
+                <VirtualAssetGrid
+                  assets={filteredAssets} selectedAsset={selectedAsset} selectedAssets={selectedAssets}
+                  multiSelect={multiSelect} setSelectedAsset={setSelectedAsset} setSelectedAssets={setSelectedAssets}
+                  onDoubleClick={handleItemDoubleClick} onContextMenu={handleContextMenu} renderThumbnail={renderThumbnail} isImageType={isImageType}
+                />
+              )}
+
+              {filteredAssets.length === 0 && currentSubfolders.length === 0 && (
+                <div className="flex flex-col items-center justify-center h-40 gap-2">
+                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" className="text-neutral-300">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                  </svg>
+                  <span className="text-xs text-neutral-400">
+                    {assets.length === 0 ? "No assets yet. Upload files to get started." : "No files in this folder."}
+                  </span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Context menu */}
+      {contextMenu && (
+        <R2ContextMenu
+          menu={contextMenu}
+          onClose={() => setContextMenu(null)}
+          onRenameFile={ops.startRenameFile}
+          onRenameFolder={ops.startRenameFolder}
+          onDeleteFile={(key) => ops.handleDelete(key, false)}
+          onDeleteFolder={(key) => ops.handleDelete(key, true)}
+        />
+      )}
+
+      {/* Lightbox */}
+      {lightboxAsset && (
+        <FileLightbox asset={lightboxAsset} resolveUrl={resolveAssetUrl} onClose={() => setLightboxAsset(null)} />
+      )}
+    </div>
+  );
+}

package/components/builder/asset-browser/R2ContextMenu.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import type { FolderNode } from "./types";
+
+// ============================================
+// R2 Context Menu (right-click menu)
+// ============================================
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  asset?: RegisteredAsset;
+  folder?: FolderNode;
+}
+
+interface R2ContextMenuProps {
+  menu: ContextMenuState;
+  onClose: () => void;
+  onRenameFile: (asset: RegisteredAsset) => void;
+  onRenameFolder: (folder: FolderNode) => void;
+  onDeleteFile: (key: string) => void;
+  onDeleteFolder: (key: string) => void;
+}
+
+export function R2ContextMenu({
+  menu,
+  onClose,
+  onRenameFile,
+  onRenameFolder,
+  onDeleteFile,
+  onDeleteFolder,
+}: R2ContextMenuProps) {
+  // Close context menu on click outside
+  useEffect(() => {
+    const close = () => onClose();
+    window.addEventListener("click", close);
+    return () => window.removeEventListener("click", close);
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="fixed z-[200] bg-white rounded-lg shadow-xl border border-neutral-200 py-1 min-w-[160px]"
+      style={{ left: menu.x, top: menu.y }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {menu.asset && (
+        <>
+          <button
+            onClick={() => {
+              onRenameFile(menu.asset!);
+              onClose();
+            }}
+            className="w-full text-left px-4 py-2 text-xs text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+            type="button"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /></svg>
+            Rename
+          </button>
+          <button
+            onClick={() => onDeleteFile(menu.asset!.path)}
+            className="w-full text-left px-4 py-2 text-xs text-red-600 hover:bg-red-50 flex items-center gap-2"
+            type="button"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
+            Delete
+          </button>
+        </>
+      )}
+      {menu.folder && (
+        <>
+          <button
+            onClick={() => {
+              onRenameFolder(menu.folder!);
+              onClose();
+            }}
+            className="w-full text-left px-4 py-2 text-xs text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+            type="button"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /></svg>
+            Rename Folder
+          </button>
+          <button
+            onClick={() => onDeleteFolder(menu.folder!.path)}
+            className="w-full text-left px-4 py-2 text-xs text-red-600 hover:bg-red-50 flex items-center gap-2"
+            type="button"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
+            Delete Folder
+          </button>
+        </>
+      )}
+    </div>,
+    document.body
+  );
+}

package/components/builder/asset-browser/VideoThumbnail.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useRef } from "react";
+
+export function VideoThumbnail({ src }: { src: string; alt?: string }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const handleMouseEnter = () => {
+    if (videoRef.current && hasLoaded) {
+      videoRef.current.play().catch(() => { /* Browser may reject autoplay — safe to ignore */ });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (videoRef.current && hasLoaded) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  };
+
+  if (hasError) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-neutral-100">
+        <div className="flex flex-col items-center gap-1">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+          <span className="text-[9px] text-neutral-400 uppercase tracking-wider">Video</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="w-full h-full relative bg-neutral-900"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <video
+        ref={videoRef}
+        src={src}
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        className="w-full h-full object-cover"
+        onLoadedData={() => setHasLoaded(true)}
+        onError={() => setHasError(true)}
+      />
+      {/* Play icon overlay — hide when hovering */}
+      <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-100 hover:opacity-0 transition-opacity pointer-events-none">
+        <div className="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center backdrop-blur-sm">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="white" className="ml-0.5">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}