@drawnagency/primitives 0.1.98 → 0.1.100

package/src/components/shell/MediaLibraryModal.tsx

@@ -1,13 +1,14 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from "react";
-import { Search, Upload, Trash2, FolderPlus, FolderInput } from "lucide-react";
+import { Search, Upload, Trash2, FolderPlus, FolderInput, FileText } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
 import { UploadRejectionAlert } from "../shared/UploadRejectionAlert";
 import { Select } from "../shared/Select";
-import type { MediaFolder, MediaItem, MediaKind } from "../../media/types";
+import type { MediaFolder, MediaItem } from "../../media/types";
 import { displayFilename, displayName, formatFileSize, mimeToExt } from "../../media/utils";
 import {
-  childFolderIds, descendantFolderIds, folderPathIds, folderPathNames, itemFolderId, recursiveItemCounts,
+  childFolderIds, descendantFolderIds, DOCUMENTS_FOLDER_ID, folderPathIds, folderPathNames,
+  itemFolderId, recursiveItemCounts,
 } from "../../lib/media-folders";
 import { buildMediaDragData } from "../../lib/media-dnd";
 import { useMediaDraggable } from "../../hooks/useMediaFolderDnd";
@@ -16,15 +17,42 @@ import { MediaFolderTile } from "./MediaFolderTile";
 import { MediaBreadcrumb } from "./MediaBreadcrumb";
 import { MoveToFolderDialog } from "./MoveToFolderDialog";
 import { collectDroppedFiles, type DroppedFile } from "../../media/folder-drop";
+import { DOCUMENT_MIME_TO_EXT } from "../../schemas/documents";
+import type { LibraryKind } from "./MediaLibraryContext";
+
+/** Flattened document-manifest row for display. The document manifest is a
+ *  sidecar keyed by documentId; this is the id + the fields the tile shows. */
+export interface DocumentLibraryItem {
+  id: string;
+  filename: string;
+  size: number;
+  kind: "pdf" | "html";
+}
+
+const ALL_LIBRARY_KINDS: ReadonlyArray<LibraryKind> = ["image", "animated", "video", "document"];
+/** Kinds a picker sees when the caller specified none — the pre-documents
+ *  behavior every existing openSelectModal call site relies on. */
+const DEFAULT_PICKER_KINDS: ReadonlyArray<LibraryKind> = ["image", "animated", "video"];
 
 export interface MediaLibraryModalProps {
   mode: "select" | "manage";
   items: MediaItem[];
+  /** Sidecar-manifest documents, merged into the grid for display only. */
+  documents?: DocumentLibraryItem[];
+  /** Restricts which kinds are shown and which filter options are offered. */
+  kinds?: ReadonlyArray<LibraryKind>;
   onSelect: (id: string) => void;
   onUpload: (files: File[], targetFolderId?: string | null) => void;
   onDelete: (ids: string[]) => void;
+  /** Manage-mode delete for the document half of a selection. Required: a
+   *  no-op default would let an editor confirm a deletion that silently
+   *  vanishes. */
+  onDeleteDocuments: (ids: string[]) => void;
   onAltChange?: (id: string, alt: string) => void;
   referenceCountMap: Record<string, number>;
+  /** Usage counts keyed by documentId (the `tallyDocumentIds` twin of
+   *  `referenceCountMap`). */
+  documentReferenceCountMap?: Record<string, number>;
   localUrlMap?: Record<string, string>;
   maxFileSize?: number;
   // Direct-to-bucket large-video upload progress, keyed by content hash (0..1).
@@ -45,7 +73,7 @@ export interface MediaLibraryModalProps {
   onDismissUploadNotice?: () => void;
 }
 
-type KindFilter = "all" | MediaKind;
+type KindFilter = "all" | LibraryKind;
 
 function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): string {
   const localUrl = localUrls[item.id];
@@ -60,6 +88,71 @@ function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): strin
   return `/api/media/${item.id}/poster.webp`;
 }
 
+function DocumentTile({ doc, manage, isSelected, refCount, showFolderChip, onClick }: {
+  doc: DocumentLibraryItem;
+  manage: boolean;
+  isSelected: boolean;
+  refCount: number;
+  showFolderChip: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={`Select ${doc.filename}`}
+      // Manage mode is a selection toggle, not a picker — aria-pressed is what
+      // says which of the two this click does.
+      aria-pressed={manage ? isSelected : undefined}
+      onClick={onClick}
+      className="group flex cursor-pointer flex-col gap-1.5 text-left"
+    >
+      <div className={cn(
+        "relative flex aspect-square items-center justify-center rounded-lg border-2 bg-base-accent transition-colors",
+        manage
+          ? isSelected ? "border-primary" : "border-transparent hover:border-base-300"
+          : "border-transparent hover:border-primary",
+      )}>
+        <FileText size={32} className="text-base-contrast-light" aria-hidden="true" />
+        <span className="absolute bottom-1.5 right-1.5 rounded-full bg-black/50 px-2 py-0.5 text-[11px] font-medium text-white">
+          {doc.kind.toUpperCase()}
+        </span>
+
+        {/* Selection radio + usage pill — the image-tile idioms, same corners. */}
+        {manage && (
+          <div className={cn(
+            "absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors",
+            isSelected
+              ? "border-primary bg-primary"
+              : "border-white/80 bg-white/40 opacity-0 group-hover:opacity-100",
+          )}>
+            {isSelected && <div className="h-2 w-2 rounded-full bg-white" />}
+          </div>
+        )}
+        {manage && (
+          <div className={cn(
+            "absolute top-1.5 right-1.5 rounded-full bg-black/50 px-2 py-0.5 text-[11px] font-medium transition-opacity",
+            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+            refCount > 0 ? "text-white" : "text-white/70",
+          )}>
+            {refCount === 0 ? "Not used" : `Used ${refCount}x`}
+          </div>
+        )}
+
+        {/* Folder chip — documents live in the pseudo-folder, so a global
+            search result says so the same way a filed image does. */}
+        {showFolderChip && (
+          <div className="absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-full bg-black/50 px-2 py-0.5 text-[11px] text-white">
+            Documents
+          </div>
+        )}
+      </div>
+      <div className="px-0.5">
+        <p className="truncate text-xs text-base-contrast">{doc.filename}</p>
+        <p className="text-[11px] text-base-contrast-light">{formatFileSize(doc.size)}</p>
+      </div>
+    </button>
+  );
+}
 
 function UploadZone({ onUpload, onFolderUpload }: {
   onUpload: (files: File[]) => void;
@@ -135,7 +228,7 @@ function UploadZone({ onUpload, onFolderUpload }: {
         ref={inputRef}
         type="file"
         multiple
-        accept="image/*,video/*"
+        accept="image/*,video/*,application/pdf,text/html"
         className="hidden"
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => { handleFiles(e.target.files); e.target.value = ""; }}
@@ -185,11 +278,15 @@ function MediaCard({ item, manage, isSelected, dragIds, onClick, children }: {
 export function MediaLibraryModal({
   mode,
   items,
+  documents = [],
+  kinds,
   onSelect,
   onUpload,
   onDelete,
+  onDeleteDocuments,
   onAltChange,
   referenceCountMap,
+  documentReferenceCountMap = {},
   localUrlMap = {},
   maxFileSize,
   uploadProgress = {},
@@ -219,6 +316,16 @@ export function MediaLibraryModal({
   const [folderToDelete, setFolderToDelete] = useState<string | null>(null);
 
   const manage = mode === "manage";
+  // Manage mode curates everything; a picker sees only what it asked for.
+  const visibleKinds = kinds ?? (manage ? ALL_LIBRARY_KINDS : DEFAULT_PICKER_KINDS);
+  const showDocuments = visibleKinds.includes("document");
+  // The pseudo-folder exists to keep documents out of a MIXED grid. A picker
+  // restricted to documents is already the documents view, so it gets none.
+  const documentsFolderEnabled = showDocuments && visibleKinds.some((k) => k !== "document");
+  const inDocuments = currentFolderId === DOCUMENTS_FOLDER_ID;
+  // Every write path that takes the current folder: the pseudo-folder is not a
+  // real folder, so uploads and new folders made from inside it land at root.
+  const writeFolderId = inDocuments ? null : currentFolderId;
   const filtering = search !== "" || kindFilter !== "all";
 
   const itemsById = useMemo(
@@ -270,18 +377,24 @@ export function MediaLibraryModal({
     });
   }, []);
 
-  // Current folder deleted (or healed away) -> back to root.
+  // Current folder deleted (or healed away) -> back to root. The Documents
+  // pseudo-folder is exempt: it has no `folders` entry BY DESIGN, so without
+  // this it could never be opened.
   useEffect(() => {
-    if (currentFolderId && !folders[currentFolderId]) setCurrentFolderId(null);
+    if (currentFolderId && currentFolderId !== DOCUMENTS_FOLDER_ID && !folders[currentFolderId]) {
+      setCurrentFolderId(null);
+    }
   }, [folders, currentFolderId]);
 
   const childIds = filtering ? [] : childFolderIds(folders, currentFolderId);
+  const showDocumentsTile =
+    documentsFolderEnabled && documents.length > 0 && !filtering && currentFolderId === null;
 
   const commitNewFolder = () => {
     const name = newFolderName.trim();
     if (name && onCreateFolder) {
-      onCreateFolder(name, currentFolderId);
-      if (currentFolderId) expand(currentFolderId);
+      onCreateFolder(name, writeFolderId);
+      if (writeFolderId) expand(writeFolderId);
     }
     setNewFolderOpen(false);
     setNewFolderName("");
@@ -289,7 +402,7 @@ export function MediaLibraryModal({
 
   const handleUpload = useCallback((files: File[]) => {
     if (!maxFileSize) {
-      onUpload(files, currentFolderId);
+      onUpload(files, writeFolderId);
       return;
     }
     const valid: File[] = [];
@@ -297,19 +410,23 @@ export function MediaLibraryModal({
     for (const file of files) {
       // MP4/WebM videos over the git-path cap route through the pipeline's
       // direct-to-bucket upload instead of being rejected here — it applies
-      // its own (much larger) asset cap and reports its own errors.
+      // its own (much larger) asset cap and reports its own errors. Documents
+      // do the same through the document pipeline (git ≤2.5MiB, bucket above),
+      // so this image-shaped cap must not pre-reject them.
       const isBucketEligibleVideo = file.type === "video/mp4" || file.type === "video/webm";
-      if (file.size > maxFileSize && !isBucketEligibleVideo) {
+      const isDocument = file.type in DOCUMENT_MIME_TO_EXT;
+      if (file.size > maxFileSize && !isBucketEligibleVideo && !isDocument) {
         rejected.push(file.name);
       } else {
         valid.push(file);
       }
     }
     if (rejected.length > 0) setRejectedFiles(rejected);
-    if (valid.length > 0) onUpload(valid, currentFolderId);
-  }, [maxFileSize, onUpload, currentFolderId]);
+    if (valid.length > 0) onUpload(valid, writeFolderId);
+  }, [maxFileSize, onUpload, writeFolderId]);
 
   const filtered = items.filter((item) => {
+    if (!visibleKinds.includes(item.kind)) return false;
     const matchesSearch = displayName(item).toLowerCase().includes(search.toLowerCase());
     const matchesKind = kindFilter === "all" || item.kind === kindFilter;
     if (!matchesSearch || !matchesKind) return false;
@@ -317,6 +434,18 @@ export function MediaLibraryModal({
     return true;
   });
 
+  // Documents carry no folderId: they live in the Documents pseudo-folder (or,
+  // when it isn't offered, at the root) and in any search/filter result.
+  const documentsHome = documentsFolderEnabled ? DOCUMENTS_FOLDER_ID : null;
+  const filteredDocuments = showDocuments
+    ? documents.filter((doc) => {
+        if (!doc.filename.toLowerCase().includes(search.toLowerCase())) return false;
+        if (kindFilter !== "all" && kindFilter !== "document") return false;
+        if (!filtering && currentFolderId !== documentsHome) return false;
+        return true;
+      })
+    : [];
+
   function toggleSelect(id: string) {
     setSelected((prev) => {
       const next = new Set(prev);
@@ -331,31 +460,47 @@ export function MediaLibraryModal({
 
   const [confirmDelete, setConfirmDelete] = useState(false);
 
+  // One selection, two kinds. Everything downstream — delete dispatch, usage
+  // totals, the move dialog — splits on this: documents have no folder and
+  // their delete goes to a different handler.
+  const documentIdSet = useMemo(() => new Set(documents.map((d) => d.id)), [documents]);
   const selectedIds = Array.from(selected);
-  const totalUsage = selectedIds.reduce((sum, id) => sum + (referenceCountMap[id] ?? 0), 0);
+  const selectedDocumentIds = selectedIds.filter((id) => documentIdSet.has(id));
+  const selectedImageIds = selectedIds.filter((id) => !documentIdSet.has(id));
+  const totalUsage =
+    selectedImageIds.reduce((sum, id) => sum + (referenceCountMap[id] ?? 0), 0) +
+    selectedDocumentIds.reduce((sum, id) => sum + (documentReferenceCountMap[id] ?? 0), 0);
+  const usedNoun =
+    selectedDocumentIds.length === 0 ? "images"
+      : selectedImageIds.length === 0 ? "documents"
+        : "files";
 
   // The move dialog's no-op target is the selection's folder — not the folder
   // being viewed (selection survives navigation). Heterogeneous selections have
   // no single no-op target, so nothing is disabled.
   const selectionFolderIds = new Set(
-    Array.from(selected).map((id) => (itemsById[id] ? itemFolderId(folders, itemsById[id]) : null)),
+    selectedImageIds.map((id) => (itemsById[id] ? itemFolderId(folders, itemsById[id]) : null)),
   );
   const moveDialogCurrentTarget =
     selectionFolderIds.size === 1 ? Array.from(selectionFolderIds)[0] : undefined;
 
+  function dispatchDelete() {
+    if (selectedImageIds.length > 0) onDelete(selectedImageIds);
+    if (selectedDocumentIds.length > 0) onDeleteDocuments(selectedDocumentIds);
+    setSelected(new Set());
+  }
+
   function handleBatchDelete() {
     if (totalUsage > 0) {
       setConfirmDelete(true);
       setFolderToDelete(null); // the two delete confirmations are mutually exclusive
       return;
     }
-    onDelete(selectedIds);
-    setSelected(new Set());
+    dispatchDelete();
   }
 
   function handleConfirmDelete() {
-    onDelete(selectedIds);
-    setSelected(new Set());
+    dispatchDelete();
     setConfirmDelete(false);
   }
 
@@ -369,6 +514,7 @@ export function MediaLibraryModal({
     onExpand: expand,
     onToggleExpand: toggleExpand,
     dnd,
+    documentCount: documentsFolderEnabled ? documents.length : 0,
   };
 
   return (
@@ -408,11 +554,12 @@ export function MediaLibraryModal({
               ? (dropped) => {
                   const valid = dropped.filter(({ file }) => {
                     const isBucketEligibleVideo = file.type === "video/mp4" || file.type === "video/webm";
-                    return !maxFileSize || file.size <= maxFileSize || isBucketEligibleVideo;
+                    const isDocument = file.type in DOCUMENT_MIME_TO_EXT;
+                    return !maxFileSize || file.size <= maxFileSize || isBucketEligibleVideo || isDocument;
                   });
                   const rejected = dropped.length - valid.length;
                   if (rejected > 0) setRejectedFiles(dropped.filter((d) => !valid.includes(d)).map((d) => d.file.name));
-                  if (valid.length > 0) onFolderUpload(valid, currentFolderId);
+                  if (valid.length > 0) onFolderUpload(valid, writeFolderId);
                 }
               : undefined
           }
@@ -468,24 +615,27 @@ export function MediaLibraryModal({
               onChange={(v) => setKindFilter(v as KindFilter)}
               options={[
                 { value: "all", label: "All types" },
-                { value: "image", label: "Images" },
-                { value: "animated", label: "Animated" },
-                { value: "video", label: "Video" },
+                ...(visibleKinds.includes("image") ? [{ value: "image", label: "Images" }] : []),
+                ...(visibleKinds.includes("animated") ? [{ value: "animated", label: "Animated" }] : []),
+                ...(visibleKinds.includes("video") ? [{ value: "video", label: "Video" }] : []),
+                ...(showDocuments ? [{ value: "document", label: "Documents" }] : []),
               ]}
               selectClassName="py-1.5 pr-7 pl-2.5"
             />
 
-            {manage && onCreateFolder && !filtering && (
+            {manage && onCreateFolder && !filtering && !inDocuments && (
               <Button variant="secondary" size="sm" onClick={() => setNewFolderOpen(true)} className="flex items-center gap-1.5">
                 <FolderPlus size={13} />
                 New folder
               </Button>
             )}
 
-            {mode === "manage" && selected.size > 0 && onMoveMedia && (
+            {/* Documents have no folder, so they are not movable — a mixed
+                selection offers to move only its images. */}
+            {mode === "manage" && selectedImageIds.length > 0 && onMoveMedia && (
               <Button variant="secondary" size="sm" onClick={() => setMoveDialogOpen(true)} className="flex items-center gap-1.5">
                 <FolderInput size={13} />
-                Move {selected.size}
+                Move {selectedImageIds.length}
               </Button>
             )}
 
@@ -504,11 +654,11 @@ export function MediaLibraryModal({
 
           {moveDialogOpen && onMoveMedia && (
             <div>
-              <p className="mb-2 text-sm font-medium text-base-contrast">Move {selected.size} item{selected.size === 1 ? "" : "s"} to…</p>
+              <p className="mb-2 text-sm font-medium text-base-contrast">Move {selectedImageIds.length} item{selectedImageIds.length === 1 ? "" : "s"} to…</p>
               <MoveToFolderDialog
                 folders={folders}
                 currentTarget={moveDialogCurrentTarget}
-                onMove={(target) => { onMoveMedia(Array.from(selected), target); setSelected(new Set()); }}
+                onMove={(target) => { onMoveMedia(selectedImageIds, target); setSelected(new Set()); }}
                 onClose={() => setMoveDialogOpen(false)}
               />
             </div>
@@ -536,7 +686,7 @@ export function MediaLibraryModal({
           {confirmDelete && (
             <div className="flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30">
               <p className="mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200">
-                Some of these images are being used. Deleting these will remove them from these references.
+                Some of these {usedNoun} are being used. Deleting them will remove them from the sections that use them.
               </p>
               <div className="flex shrink-0 items-center gap-2">
                 <Button variant="secondary" size="sm" onClick={() => setConfirmDelete(false)}>
@@ -606,8 +756,21 @@ export function MediaLibraryModal({
           <MediaBreadcrumb folders={folders} currentFolderId={currentFolderId} onNavigate={navigate} dnd={dnd} />
         )}
 
-        {childIds.length > 0 && (
+        {(childIds.length > 0 || showDocumentsTile) && (
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            {showDocumentsTile && (
+              // No dnd bindings and manage={false}: the pseudo-folder can be
+              // neither renamed, deleted, dragged, nor dropped into.
+              <MediaFolderTile
+                id={DOCUMENTS_FOLDER_ID}
+                name="Documents"
+                count={documents.length}
+                onOpen={navigate}
+                manage={false}
+                icon={<FileText size={16} className="shrink-0 text-base-contrast-light" />}
+                ariaLabel="Open Documents folder"
+              />
+            )}
             {childIds.map((fid) => (
               <MediaFolderTile
                 key={fid}
@@ -641,32 +804,47 @@ export function MediaLibraryModal({
         )}
 
         {/* Grid */}
-        {filtered.length === 0 ? (
-          childIds.length === 0 && (
+        {filtered.length === 0 && filteredDocuments.length === 0 ? (
+          childIds.length === 0 && !showDocumentsTile && (
             <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
               <p className="text-sm font-medium text-base-contrast">
-                {!filtering && currentFolderId !== null
-                  ? "This folder is empty"
-                  : items.length === 0
-                    ? "No media uploaded yet"
-                    : "No results found"}
+                {!filtering && inDocuments
+                  ? "No documents yet"
+                  : !filtering && currentFolderId !== null
+                    ? "This folder is empty"
+                    : items.length === 0 && documents.length === 0
+                      ? "No media uploaded yet"
+                      : "No results found"}
               </p>
               <p className="text-xs text-base-contrast-light">
-                {!filtering && currentFolderId !== null
-                  ? "Drag media here or upload into this folder."
-                  : items.length === 0
-                    ? "Upload files using the drop zone above."
-                    : "Try a different search or filter."}
+                {!filtering && inDocuments
+                  ? "Upload a PDF or HTML file using the drop zone above."
+                  : !filtering && currentFolderId !== null
+                    ? "Drag media here or upload into this folder."
+                    : items.length === 0 && documents.length === 0
+                      ? "Upload files using the drop zone above."
+                      : "Try a different search or filter."}
               </p>
             </div>
           )
         ) : (
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            {filteredDocuments.map((doc) => (
+              <DocumentTile
+                key={doc.id}
+                doc={doc}
+                manage={manage}
+                isSelected={selected.has(doc.id)}
+                refCount={documentReferenceCountMap[doc.id] ?? 0}
+                showFolderChip={filtering && documentsFolderEnabled}
+                onClick={() => (manage ? toggleSelect(doc.id) : onSelect(doc.id))}
+              />
+            ))}
             {filtered.map((item) => {
               const isSelected = selected.has(item.id);
               const refCount = referenceCountMap[item.id] ?? 0;
               const usageLabel = refCount === 0 ? "Not used" : `Used ${refCount}x`;
-              const dragIds = selected.has(item.id) && selected.size > 0 ? Array.from(selected) : [item.id];
+              const dragIds = selected.has(item.id) ? selectedImageIds : [item.id];
 
               return (
                 <MediaCard