4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Ta75,"use client"; import { forwardRef } from "react"; import type { MediaLibraryHandle, MediaLibraryProps } from "./types"; import { MediaLibraryRoot } from "./parts/media-library-root"; import { MediaLibraryToolbar } from "./parts/library-toolbar"; import { MediaLibraryQuotaBar } from "./parts/quota-bar"; import { MediaLibraryTypeFilters } from "./parts/type-filters"; import { MediaLibraryBreadcrumbs } from "./parts/breadcrumbs"; import { MediaLibrarySidebar } from "./parts/sidebar"; import { MediaLibraryFolderRow } from "./parts/folder-row"; import { MediaLibraryFileGrid } from "./parts/file-grid"; import { MediaLibraryDetailsPane } from "./parts/details-pane"; import { MediaLibraryLightbox } from "./parts/preview-lightbox"; /** * Tier A — the batteries-included Google-Drive-style media library. A thin * assembly of `` + the canonical parts, gated by the * `show*` / `preview` toggles. For a lighter, hand-composed version, drop down * to `` + the individual parts (all exported). */ export const MediaLibrary = forwardRef( function MediaLibrary(props, ref) { const { showQuota = true, showTypeFilters = true, showSidebar = true, preview = "both", className, ...rootProps } = props; const showPane = preview === "pane" || preview === "both"; const showLightbox = preview === "lightbox" || preview === "both"; return ( {showQuota ? : null} {showTypeFilters ? : null}

{showSidebar ? : null}

{showPane ? : null}

{showLightbox ? : null} ); }, ); // --- Tail re-export band (F-01): a future cross-procomp consumer imports public // types from this `.tsx` entry, never a `/types` subpath. --- export type { FsNode, FsNodeType, MediaNode, MediaPreviewKind, MediaFilterCategory, MediaLibraryStorage, MediaUploadItem, MediaUploadStatus, MediaUploadProgressFn, MediaLibraryLabels, MediaLibraryPreviewMode, MediaLibraryRootProps, MediaLibraryProps, MediaLibraryHandle, } from "./types"; 52:T978,// Tier A — batteries-included assembly export { MediaLibrary } from "./media-library"; // Tier B — headless provider + context-connected parts (compose your own) export { MediaLibraryRoot } from "./parts/media-library-root"; export { MediaLibraryToolbar } from "./parts/library-toolbar"; export { MediaLibraryQuotaBar } from "./parts/quota-bar"; export { MediaLibraryTypeFilters } from "./parts/type-filters"; export { MediaLibraryBreadcrumbs } from "./parts/breadcrumbs"; export { MediaLibrarySidebar } from "./parts/sidebar"; export { MediaLibraryFolderRow } from "./parts/folder-row"; export { MediaLibraryFileGrid } from "./parts/file-grid"; export { MediaLibraryDetailsPane } from "./parts/details-pane"; export { MediaLibraryLightbox } from "./parts/preview-lightbox"; export { MediaLibraryUploadOverlay } from "./parts/upload-overlay"; // Tier C — standalone primitives (no context) export { FilePreview } from "./parts/file-preview"; export { FilePreviewLightbox } from "./parts/preview-lightbox"; export { FileCard } from "./parts/file-card"; export { FolderCard } from "./parts/folder-card"; export { QuotaBar } from "./parts/quota-bar"; export { UploadOverlay } from "./parts/upload-overlay"; export { FileKindBadge, PreviewKindIcon } from "./parts/file-visuals"; // Hook + helpers export { useMediaLibrary } from "./hooks/use-media-library"; export type { MediaLibraryContextValue } from "./hooks/use-media-library"; export { resolvePreviewKind, isTextKind, extOf } from "./lib/preview-kind"; export { filterCategoryForNode, filterCategoryForKind, computeFilterCounts, } from "./lib/filter-category"; export { formatBytes, formatRelativeTime } from "./lib/format"; // Defaults export { DEFAULT_MEDIA_LIBRARY_LABELS } from "./types"; // Part prop types export type { QuotaBarProps } from "./parts/quota-bar"; export type { FileCardProps } from "./parts/file-card"; export type { FolderCardProps } from "./parts/folder-card"; export type { FilePreviewProps } from "./parts/file-preview"; export type { FilePreviewLightboxProps } from "./parts/preview-lightbox"; // Public types export type { FsNode, FsNodeType, MediaNode, MediaPreviewKind, MediaFilterCategory, MediaLibraryStorage, MediaUploadItem, MediaUploadStatus, MediaUploadProgressFn, MediaLibraryLabels, MediaLibraryPreviewMode, MediaLibraryRootProps, MediaLibraryProps, MediaLibraryHandle, } from "./types"; 53:T1e2f,import type { ReactNode, Ref } from "react"; /** * FsNode is DECLARED LOCALLY (not imported from file-tree). * * VERIFIED 2026-06-09: `file-tree.tsx` only *imports* `FsNode` (no tail * re-export band), so a `.tsx`-entry type import would fail; a `/types` * subpath import trips the F-S1 slug-rewriter; and adding a tail band to * `file-tree.tsx` would modify a shipped component (forbidden). Re-declaring * the (tiny, stable) interface keeps file-tree UNTOUCHED and zeroes the * cross-procomp *type* surface — structural typing bridges at the composed * `` boundary (the carousel-composer * "define your own type locally" precedent). */ export type FsNodeType = "file" | "folder"; export interface FsNode { id: string; name: string; type: FsNodeType; parentId?: string | null; /** `undefined` ⇒ lazy-load trigger; `[]` ⇒ known-empty; `FsNode[]` ⇒ loaded. */ children?: FsNode[]; ext?: string; /** Bytes. */ size?: number; /** ISO 8601. */ modifiedAt?: string; icon?: ReactNode; meta?: Record; } /** Which viewer a file maps to in the preview dispatcher. */ export type MediaPreviewKind = | "image" | "video" | "pdf" | "code" | "json" | "text" | "markdown" | "unknown"; /** Type-filter chip identity. */ export type MediaFilterCategory = "all" | "images" | "video" | "pdfs" | "docs"; /** * A media-library node. Strict superset of {@link FsNode} — every added field * is optional, so any `FsNode[]` is assignable to `MediaNode[]` (interop with * file-tree / file-manager preserved). */ export interface MediaNode extends FsNode { /** Canonical asset URL — the preview source. */ url?: string; /** Poster / thumbnail for the grid (images fall back to `url`). */ thumbnailUrl?: string; /** Authoritative MIME type; `ext` is the fallback for kind resolution. */ mimeType?: string; width?: number; height?: number; owner?: string; children?: MediaNode[]; } export interface MediaLibraryStorage { /** Bytes used. */ used: number; /** Bytes total. */ total: number; } /** * Fires repeatedly during a single file's upload (0–100); consumer-driven. * `onUpload` is invoked once per file, so the progress fn is pre-bound to that * file's optimistic item — the consumer just reports its percent. */ export type MediaUploadProgressFn = (pct: number) => void; /** Internal status of an optimistic upload placeholder. */ export type MediaUploadStatus = "uploading" | "error"; /** An in-flight optimistic upload item shown in the grid before it resolves. */ export interface MediaUploadItem { tempId: string; name: string; kind: MediaPreviewKind; pct: number; status: MediaUploadStatus; /** Object URL for a local preview while uploading (owned + revoked by the lib). */ previewUrl?: string; error?: string; /** The folder the upload targets. */ targetFolderId: string | null; } export interface MediaLibraryLabels { title?: string; searchPlaceholder?: string; uploadButton?: string; newFolderButton?: string; foldersHeading?: string; filesHeading?: string; libraryHeading?: string; /** Template with `{used}` and `{total}`, e.g. "{used} of {total} used". */ quotaUsed?: string; filterAll?: string; filterImages?: string; filterVideo?: string; filterPdfs?: string; filterDocs?: string; emptyFolder?: string; emptyLibrary?: string; dropToUpload?: string; previewLoading?: string; previewError?: string; noPreview?: string; download?: string; retry?: string; // context-menu verbs open?: string; preview?: string; rename?: string; move?: string; cut?: string; copy?: string; paste?: string; delete?: string; // a11y /** Template with `{name}` and `{kind}`. */ itemAria?: string; /** Template with `{name}`. */ uploadingAria?: string; /** Template with `{count}`. */ selectedAria?: string; prev?: string; next?: string; close?: string; } export type MediaLibraryPreviewMode = "pane" | "lightbox" | "both" | false; /** * Shared data + handler surface. {@link MediaLibraryProps} adds the chrome * toggles on top of this; {@link MediaLibraryRootProps} is this verbatim * (composition replaces the toggles). */ export interface MediaLibraryRootProps { nodes: MediaNode[]; currentFolderId?: string | null; defaultCurrentFolderId?: string | null; onCurrentFolderChange?: (folderId: string | null) => void; onLoadChildren?: (folderId: string) => Promise; storage?: MediaLibraryStorage; selectedIds?: Set; defaultSelectedIds?: Set; onSelectedChange?: (ids: Set) => void; // mutation operations (omit to hide the affordance). // `onUpload` is called once per file; `progress` reports that file's percent. onUpload?: ( files: File[], targetFolderId: string | null, progress: MediaUploadProgressFn, ) => Promise; onMove?: (ids: string[], targetFolderId: string | null) => void; onRename?: (id: string, name: string) => void; onDelete?: (ids: string[]) => void; onCreateFolder?: (parentId: string | null, name: string) => void; onDownload?: (ids: string[]) => void; validateRename?: (id: string, name: string) => string | null; // preview content sourcing (URL-based; text kinds fetched by the lib) resolveTextContent?: (node: MediaNode) => Promise; /** * Override the pdf.js worker URL used by the composed pdf-viewer. The viewer * defaults to a unpkg CDN worker; pass a self-hosted path * (e.g. "/pdf.worker.min.mjs") for offline / locked-down environments. */ pdfWorkerSrc?: string; onPreviewOpen?: (id: string) => void; onPreviewClose?: () => void; // behaviour enableUploadDrop?: boolean; enableInternalDrag?: boolean; enableContextMenu?: boolean; /** Whether opening a file shows a preview at all (default "both"). */ preview?: MediaLibraryPreviewMode; virtualizeThreshold?: number; labels?: Partial; children?: ReactNode; className?: string; ref?: Ref; } /** The batteries-included assembly: root surface + chrome toggles. */ export interface MediaLibraryProps extends Omit { showQuota?: boolean; showTypeFilters?: boolean; showSidebar?: boolean; } export interface MediaLibraryHandle { navigateTo: (folderId: string | null) => void; refresh: (folderId?: string | null) => void; openPreview: (id: string) => void; closePreview: () => void; /** Opens the OS file picker for the current folder. */ triggerUpload: () => void; getSelectedIds: () => string[]; clearSelection: () => void; } export const DEFAULT_MEDIA_LIBRARY_LABELS: Required = { title: "Media library", searchPlaceholder: "Search this folder", uploadButton: "Upload", newFolderButton: "New folder", foldersHeading: "Folders", filesHeading: "Files", libraryHeading: "Library", quotaUsed: "{used} of {total} used", filterAll: "All", filterImages: "Images", filterVideo: "Video", filterPdfs: "PDFs", filterDocs: "Docs", emptyFolder: "This folder is empty", emptyLibrary: "No media yet — upload to get started", dropToUpload: "Drop files to upload", previewLoading: "Loading preview…", previewError: "Couldn't load this file", noPreview: "No preview available", download: "Download", retry: "Retry", open: "Open", preview: "Preview", rename: "Rename", move: "Move", cut: "Cut", copy: "Copy", paste: "Paste", delete: "Delete", itemAria: "{name}, {kind}", uploadingAria: "Uploading {name}", selectedAria: "{count} selected", prev: "Previous", next: "Next", close: "Close", }; 54:T839,import { useCallback, useEffect, useRef, useState } from "react"; interface UseControllableStateOpts { /** Controlled value. When provided, state is fully controlled by parent. */ value?: T; /** Initial value for uncontrolled mode. */ defaultValue: T; /** Fires on every state change (both modes). */ onChange?: (next: T) => void; /** Component name used in dev warnings. */ componentName: string; /** Prop name used in dev warnings (e.g., `"selectedIds"`). */ valuePropName: string; } /** * Controlled+uncontrolled state helper. Sealed copy of the proven generic used * across the library (account-switcher, code-block, carousel-composer) * — registry portability bans a shared cross-component module, so each procomp * vendors its own. Locks the mode at first render and dev-warns on mode-flip or * controlled-without-onChange. */ export function useControllableState({ value, defaultValue, onChange, componentName, valuePropName, }: UseControllableStateOpts): readonly [T, (next: T) => void] { const [internal, setInternal] = useState(defaultValue); const isControlled = value !== undefined; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const wasControlledRef = useRef(isControlled); useEffect(() => { if (process.env.NODE_ENV === "production") return; if (wasControlledRef.current !== isControlled) { console.warn( `[${componentName}] \`${valuePropName}\` switched from ${ wasControlledRef.current ? "controlled" : "uncontrolled" } to ${ isControlled ? "controlled" : "uncontrolled" } mode. Components should not switch modes mid-life; pick one at mount.`, ); wasControlledRef.current = isControlled; } }, [isControlled, componentName, valuePropName]); const current = isControlled ? (value as T) : internal; const set = useCallback( (next: T) => { if (!isControlled) setInternal(next); onChangeRef.current?.(next); }, [isControlled], ); return [current, set] as const; } 55:Tc73,import { useCallback, useMemo, useRef, useState } from "react"; import type { MediaNode } from "../types"; /** Recursively replace a folder's `children` with cache-loaded children. */ function mergeCache( nodes: MediaNode[], cache: Record, ): MediaNode[] { return nodes.map((node) => { if (node.type !== "folder") return node; const loaded = cache[node.id]; const children = loaded ?? node.children; return { ...node, children: children ? mergeCache(children, cache) : children, }; }); } export interface LazyChildrenApi { /** Root nodes with lazily-loaded children merged in. */ nodes: MediaNode[]; /** Trigger a load for a folder if not cached / in flight. */ ensureLoaded: (folderId: string) => void; /** Drop a folder's cache (or all) so the next visit re-loads. */ invalidate: (folderId?: string | null) => void; loadingIds: ReadonlySet; errorIds: Record; } /** * Lazy-children manager: caches `onLoadChildren` results, merges them into the * tree, tracks per-folder loading + error. No-op when `onLoadChildren` is * absent (the consumer supplies the full tree inline). */ export function useLazyChildren( rootNodes: MediaNode[], onLoadChildren?: (folderId: string) => Promise, ): LazyChildrenApi { const [cache, setCache] = useState>({}); const [loadingIds, setLoadingIds] = useState>(() => new Set()); const [errorIds, setErrorIds] = useState>({}); const inflight = useRef>(new Set()); const ensureLoaded = useCallback( (folderId: string) => { if (!onLoadChildren) return; if (cache[folderId] || inflight.current.has(folderId)) return; inflight.current.add(folderId); setLoadingIds((prev) => new Set(prev).add(folderId)); setErrorIds((prev) => { if (!(folderId in prev)) return prev; const next = { ...prev }; delete next[folderId]; return next; }); onLoadChildren(folderId) .then((children) => { setCache((prev) => ({ ...prev, [folderId]: children })); }) .catch((err: unknown) => { setErrorIds((prev) => ({ ...prev, [folderId]: (err as Error)?.message || "Failed to load", })); }) .finally(() => { inflight.current.delete(folderId); setLoadingIds((prev) => { const next = new Set(prev); next.delete(folderId); return next; }); }); }, [onLoadChildren, cache], ); const invalidate = useCallback((folderId?: string | null) => { if (folderId == null) { setCache({}); setErrorIds({}); return; } setCache((prev) => { const next = { ...prev }; delete next[folderId]; return next; }); setErrorIds((prev) => { const next = { ...prev }; delete next[folderId]; return next; }); }, []); const nodes = useMemo(() => mergeCache(rootNodes, cache), [rootNodes, cache]); return { nodes, ensureLoaded, invalidate, loadingIds, errorIds }; } 56:T409a,"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type RefObject, } from "react"; import { DEFAULT_MEDIA_LIBRARY_LABELS, type MediaFilterCategory, type MediaLibraryLabels, type MediaLibraryStorage, type MediaLibraryPreviewMode, type MediaLibraryRootProps, type MediaNode, type MediaUploadItem, } from "../types"; import { computeFilterCounts, nodeMatchesFilter, type MediaFilterCounts, } from "../lib/filter-category"; import { buildParentMap, canDropInto, findNode } from "../lib/drag"; import { useControllableState } from "./use-controllable-state"; import { useLazyChildren } from "./use-lazy-children"; import { useSelection, type SelectionApi } from "./use-selection"; import { useUpload } from "./use-upload"; export interface MediaClipboard { kind: "cut" | null; ids: string[]; } export interface MediaLibraryContextValue { labels: Required; // current-folder view nodes: MediaNode[]; currentFolderId: string | null; currentFolder: MediaNode | null; path: MediaNode[]; folders: MediaNode[]; files: MediaNode[]; filterCounts: MediaFilterCounts; uploads: MediaUploadItem[]; loadingChildren: boolean; loadError: string | null; // ui state filter: MediaFilterCategory; setFilter: (f: MediaFilterCategory) => void; searchQuery: string; setSearchQuery: (q: string) => void; storage?: MediaLibraryStorage; // selection selectedIds: Set; selection: SelectionApi; visibleIds: string[]; // clipboard (cut → move on paste; copy/duplicate is not implemented) clipboard: MediaClipboard; cut: (ids: string[]) => void; paste: () => void; // navigation navigateTo: (folderId: string | null) => void; navigateUp: () => void; refresh: (folderId?: string | null) => void; // preview previewId: string | null; previewNode: MediaNode | null; openPreview: (id: string) => void; closePreview: () => void; previewNext: () => void; previewPrev: () => void; previewHasNext: boolean; previewHasPrev: boolean; previewMode: MediaLibraryPreviewMode; canPreview: boolean; resolveTextContent?: (node: MediaNode) => Promise; pdfWorkerSrc?: string; // mutations triggerUpload: () => void; uploadFiles: (files: File[], targetFolderId?: string | null) => void; retryUpload: (tempId: string) => void; dismissUpload: (tempId: string) => void; moveTo: (ids: string[], targetFolderId: string | null) => void; download: (ids: string[]) => void; requestDelete: (ids: string[]) => void; canDrop: (draggedIds: string[], targetFolderId: string | null) => boolean; // inline rename renamingId: string | null; renameError: string | null; startRename: (id: string) => void; submitRename: (id: string, name: string) => void; cancelRename: () => void; // inline create-folder creatingFolder: boolean; startCreateFolder: () => void; submitCreateFolder: (name: string) => void; cancelCreateFolder: () => void; // capability flags can: { upload: boolean; move: boolean; rename: boolean; delete: boolean; createFolder: boolean; download: boolean; }; // behaviour enableInternalDrag: boolean; enableUploadDrop: boolean; enableContextMenu: boolean; virtualizeThreshold: number; // dnd transient activeDragIds: string[] | null; setActiveDragIds: (ids: string[] | null) => void; /** True while OS files are dragged over the surface (drives the upload overlay). */ isDraggingFiles: boolean; setDraggingFiles: (v: boolean) => void; fileInputRef: RefObject; } const MediaLibraryContext = createContext(null); export function useMediaLibrary(): MediaLibraryContextValue { const ctx = useContext(MediaLibraryContext); if (!ctx) { throw new Error( "useMediaLibrary must be used within (or ).", ); } return ctx; } export { MediaLibraryContext }; function sortByName(a: MediaNode, b: MediaNode): number { return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }); } /** Builds the full context value from the root props. */ export function useMediaLibraryStore( props: MediaLibraryRootProps, ): MediaLibraryContextValue { const { nodes: rootNodes, onLoadChildren, storage, onUpload, onMove, onRename, onDelete, onCreateFolder, onDownload, validateRename, resolveTextContent, pdfWorkerSrc, onPreviewOpen, onPreviewClose, enableUploadDrop = true, enableInternalDrag = true, enableContextMenu = true, preview: previewMode = "both", virtualizeThreshold = 120, labels: labelOverrides, } = props; const canPreview = previewMode !== false; const labels = useMemo( () => ({ ...DEFAULT_MEDIA_LIBRARY_LABELS, ...labelOverrides }), [labelOverrides], ); // lazy-merged tree const { nodes, ensureLoaded, invalidate, loadingIds, errorIds } = useLazyChildren( rootNodes, onLoadChildren, ); // current folder (controllable) const [currentFolderId, setCurrentFolderId] = useControllableState({ value: props.currentFolderId, defaultValue: props.defaultCurrentFolderId ?? null, onChange: props.onCurrentFolderChange, componentName: "MediaLibrary", valuePropName: "currentFolderId", }); // selection (controllable) const [selectedIds, setSelectedIds] = useControllableState>({ value: props.selectedIds, defaultValue: props.defaultSelectedIds ?? new Set(), onChange: props.onSelectedChange, componentName: "MediaLibrary", valuePropName: "selectedIds", }); const selection = useSelection(selectedIds, setSelectedIds); // ui state const [filter, setFilter] = useState("all"); const [searchQuery, setSearchQuery] = useState(""); const [previewId, setPreviewId] = useState(null); const [clipboard, setClipboard] = useState({ kind: null, ids: [] }); const [renamingId, setRenamingId] = useState(null); const [renameError, setRenameError] = useState(null); const [creatingFolder, setCreatingFolder] = useState(false); const [activeDragIds, setActiveDragIds] = useState(null); const [isDraggingFiles, setDraggingFiles] = useState(false); const fileInputRef = useRef(null); const parentMap = useMemo(() => buildParentMap(nodes), [nodes]); // derive current folder + path const currentFolder = useMemo( () => (currentFolderId == null ? null : findNode(nodes, currentFolderId) ?? null), [nodes, currentFolderId], ); const path = useMemo(() => { if (currentFolderId == null) return [] as MediaNode[]; const chain: MediaNode[] = []; let cur: string | null | undefined = currentFolderId; const seen = new Set(); while (cur != null && !seen.has(cur)) { seen.add(cur); const node = findNode(nodes, cur); if (!node) break; chain.unshift(node); cur = node.parentId ?? parentMap.get(cur) ?? null; } return chain; }, [nodes, currentFolderId, parentMap]); // children of the current folder const currentChildren = useMemo(() => { if (currentFolderId == null) return nodes; return currentFolder?.children ?? []; }, [nodes, currentFolderId, currentFolder]); const allFolders = useMemo( () => currentChildren.filter((n) => n.type === "folder").sort(sortByName), [currentChildren], ); const allFiles = useMemo( () => currentChildren.filter((n) => n.type === "file"), [currentChildren], ); const filterCounts = useMemo(() => computeFilterCounts(allFiles), [allFiles]); const files = useMemo(() => { const q = searchQuery.trim().toLowerCase(); return allFiles .filter((n) => nodeMatchesFilter(n, filter)) .filter((n) => (q ? n.name.toLowerCase().includes(q) : true)) .sort(sortByName); }, [allFiles, filter, searchQuery]); const folders = useMemo(() => { const q = searchQuery.trim().toLowerCase(); return q ? allFolders.filter((n) => n.name.toLowerCase().includes(q)) : allFolders; }, [allFolders, searchQuery]); const visibleIds = useMemo( () => [...folders.map((n) => n.id), ...files.map((n) => n.id)], [folders, files], ); const loadingChildren = currentFolderId != null && loadingIds.has(currentFolderId); const loadError = currentFolderId != null ? (errorIds[currentFolderId] ?? null) : null; // ensure current folder children are loaded useEffect(() => { if (currentFolderId != null) ensureLoaded(currentFolderId); }, [currentFolderId, ensureLoaded]); // upload const onUploadResolved = useCallback( (_nodes: MediaNode[], targetFolderId: string | null) => { if (targetFolderId != null) invalidate(targetFolderId); }, [invalidate], ); const upload = useUpload(onUpload, onUploadResolved); const uploads = useMemo( () => upload.uploads.filter((u) => u.targetFolderId === currentFolderId), [upload.uploads, currentFolderId], ); // navigation const navigateTo = useCallback( (folderId: string | null) => { setCurrentFolderId(folderId); setSearchQuery(""); setFilter("all"); selection.clear(); if (folderId != null) ensureLoaded(folderId); }, [setCurrentFolderId, ensureLoaded, selection], ); const navigateUp = useCallback(() => { if (currentFolderId == null) return; const parent = currentFolder?.parentId ?? parentMap.get(currentFolderId) ?? null; navigateTo(parent); }, [currentFolderId, currentFolder, parentMap, navigateTo]); const refresh = useCallback( (folderId?: string | null) => { const target = folderId === undefined ? currentFolderId : folderId; invalidate(target); if (target != null) ensureLoaded(target); }, [currentFolderId, invalidate, ensureLoaded], ); // preview const previewNode = useMemo( () => (previewId == null ? null : findNode(nodes, previewId) ?? null), [nodes, previewId], ); const previewIndex = previewId == null ? -1 : files.findIndex((f) => f.id === previewId); const previewHasNext = previewIndex !== -1 && previewIndex < files.length - 1; const previewHasPrev = previewIndex > 0; const openPreview = useCallback( (id: string) => { setPreviewId(id); onPreviewOpen?.(id); }, [onPreviewOpen], ); const closePreview = useCallback(() => { setPreviewId(null); onPreviewClose?.(); }, [onPreviewClose]); const previewNext = useCallback(() => { if (previewHasNext) openPreview(files[previewIndex + 1].id); }, [previewHasNext, files, previewIndex, openPreview]); const previewPrev = useCallback(() => { if (previewHasPrev) openPreview(files[previewIndex - 1].id); }, [previewHasPrev, files, previewIndex, openPreview]); // mutations const triggerUpload = useCallback(() => fileInputRef.current?.click(), []); const uploadFiles = useCallback( (files_: File[], targetFolderId?: string | null) => upload.start(files_, targetFolderId === undefined ? currentFolderId : targetFolderId), [upload, currentFolderId], ); const moveTo = useCallback( (ids: string[], targetFolderId: string | null) => { if (!onMove || ids.length === 0) return; if (!canDropInto(ids, targetFolderId, nodes, parentMap)) return; onMove(ids, targetFolderId); selection.clear(); if (targetFolderId != null) invalidate(targetFolderId); if (currentFolderId != null) invalidate(currentFolderId); }, [onMove, nodes, parentMap, selection, invalidate, currentFolderId], ); const download = useCallback( (ids: string[]) => onDownload?.(ids), [onDownload], ); const requestDelete = useCallback( (ids: string[]) => { if (!onDelete || ids.length === 0) return; onDelete(ids); selection.clear(); if (currentFolderId != null) invalidate(currentFolderId); }, [onDelete, selection, currentFolderId, invalidate], ); const canDrop = useCallback( (draggedIds: string[], targetFolderId: string | null) => canDropInto(draggedIds, targetFolderId, nodes, parentMap), [nodes, parentMap], ); // clipboard const cut = useCallback((ids: string[]) => { if (ids.length > 0) setClipboard({ kind: "cut", ids }); }, []); const paste = useCallback(() => { if (clipboard.kind === "cut" && clipboard.ids.length > 0) { moveTo(clipboard.ids, currentFolderId); setClipboard({ kind: null, ids: [] }); } }, [clipboard, moveTo, currentFolderId]); // inline rename const startRename = useCallback((id: string) => { setRenameError(null); setRenamingId(id); }, []); const cancelRename = useCallback(() => { setRenamingId(null); setRenameError(null); }, []); const submitRename = useCallback( (id: string, name: string) => { const trimmed = name.trim(); if (!trimmed) { cancelRename(); return; } const err = validateRename?.(id, trimmed) ?? null; if (err) { setRenameError(err); return; } onRename?.(id, trimmed); setRenamingId(null); setRenameError(null); if (currentFolderId != null) invalidate(currentFolderId); }, [validateRename, onRename, cancelRename, currentFolderId, invalidate], ); // inline create-folder const startCreateFolder = useCallback(() => setCreatingFolder(true), []); const cancelCreateFolder = useCallback(() => setCreatingFolder(false), []); const submitCreateFolder = useCallback( (name: string) => { const trimmed = name.trim(); if (trimmed) onCreateFolder?.(currentFolderId, trimmed); setCreatingFolder(false); if (currentFolderId != null) invalidate(currentFolderId); }, [onCreateFolder, currentFolderId, invalidate], ); const can = useMemo( () => ({ upload: Boolean(onUpload), move: Boolean(onMove), rename: Boolean(onRename), delete: Boolean(onDelete), createFolder: Boolean(onCreateFolder), download: Boolean(onDownload), }), [onUpload, onMove, onRename, onDelete, onCreateFolder, onDownload], ); return useMemo( () => ({ labels, nodes, currentFolderId, currentFolder, path, folders, files, filterCounts, uploads, loadingChildren, loadError, filter, setFilter, searchQuery, setSearchQuery, storage, selectedIds, selection, visibleIds, clipboard, cut, paste, navigateTo, navigateUp, refresh, previewId, previewNode, openPreview, closePreview, previewNext, previewPrev, previewHasNext, previewHasPrev, previewMode, canPreview, resolveTextContent, pdfWorkerSrc, triggerUpload, uploadFiles, retryUpload: upload.retry, dismissUpload: upload.dismiss, moveTo, download, requestDelete, canDrop, renamingId, renameError, startRename, submitRename, cancelRename, creatingFolder, startCreateFolder, submitCreateFolder, cancelCreateFolder, can, enableInternalDrag, enableUploadDrop, enableContextMenu, virtualizeThreshold, activeDragIds, setActiveDragIds, isDraggingFiles, setDraggingFiles, fileInputRef, }), [ labels, nodes, currentFolderId, currentFolder, path, folders, files, filterCounts, uploads, loadingChildren, loadError, filter, searchQuery, storage, selectedIds, selection, visibleIds, clipboard, cut, paste, navigateTo, navigateUp, refresh, previewId, previewNode, openPreview, closePreview, previewNext, previewPrev, previewHasNext, previewHasPrev, previewMode, canPreview, resolveTextContent, pdfWorkerSrc, triggerUpload, uploadFiles, upload.retry, upload.dismiss, moveTo, download, requestDelete, canDrop, renamingId, renameError, startRename, submitRename, cancelRename, creatingFolder, startCreateFolder, submitCreateFolder, cancelCreateFolder, can, enableInternalDrag, enableUploadDrop, enableContextMenu, virtualizeThreshold, activeDragIds, isDraggingFiles, ], ); } 57:T8f3,import { useCallback, useRef } from "react"; export interface ClickModifiers { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean; } export interface SelectionApi { isSelected: (id: string) => boolean; /** Modifier-aware click: plain = replace, ⌘/Ctrl = toggle, Shift = range. */ handleItemClick: (id: string, mods: ClickModifiers, orderedIds: string[]) => void; selectOne: (id: string) => void; toggle: (id: string) => void; selectAll: (ids: string[]) => void; clear: () => void; } /** * Selection logic over a controllable `Set`. Owns the shift-range * anchor. (file-manager's `use-selection` is private — this is a focused, * self-contained re-implementation per the GATE-2 Q5 decision.) */ export function useSelection( selected: Set, setSelected: (ids: Set) => void, ): SelectionApi { const anchorRef = useRef(null); const isSelected = useCallback((id: string) => selected.has(id), [selected]); const selectOne = useCallback( (id: string) => { anchorRef.current = id; setSelected(new Set([id])); }, [setSelected], ); const toggle = useCallback( (id: string) => { const next = new Set(selected); if (next.has(id)) next.delete(id); else next.add(id); anchorRef.current = id; setSelected(next); }, [selected, setSelected], ); const handleItemClick = useCallback( (id: string, mods: ClickModifiers, orderedIds: string[]) => { if (mods.shiftKey && anchorRef.current) { const a = orderedIds.indexOf(anchorRef.current); const b = orderedIds.indexOf(id); if (a !== -1 && b !== -1) { const [lo, hi] = a < b ? [a, b] : [b, a]; setSelected(new Set(orderedIds.slice(lo, hi + 1))); return; } } if (mods.metaKey || mods.ctrlKey) { toggle(id); return; } selectOne(id); }, [selectOne, toggle, setSelected], ); const selectAll = useCallback( (ids: string[]) => setSelected(new Set(ids)), [setSelected], ); const clear = useCallback(() => { anchorRef.current = null; setSelected(new Set()); }, [setSelected]); return { isSelected, handleItemClick, selectOne, toggle, selectAll, clear }; } 58:T8d0,import { useEffect, useState } from "react"; import type { MediaNode } from "../types"; export interface TextContentState { text: string | null; loading: boolean; error: string | null; } /** * Fetches text for a text-based file (code/json/txt/markdown). Default path is * `fetch(node.url).text()`; a `resolve` override handles auth / signed URLs / * transforms. Aborts on node change or unmount. */ export function useTextContent( node: MediaNode | null, enabled: boolean, resolve?: (node: MediaNode) => Promise, ): TextContentState { const [state, setState] = useState({ text: null, loading: false, error: null, }); // Identity-stable cache keys so an unchanged node doesn't refetch on re-render. const nodeId = node?.id ?? null; const url = node?.url ?? null; useEffect(() => { let cancelled = false; const controller = new AbortController(); // All setState calls happen after this microtask yield, so none run // synchronously within the effect (avoids cascading-render lint + flashes). const run = async () => { await Promise.resolve(); if (cancelled) return; if (!enabled || !node) { setState({ text: null, loading: false, error: null }); return; } setState({ text: null, loading: true, error: null }); try { let text: string; if (resolve) { text = await resolve(node); } else { if (!node.url) throw new Error("No URL to fetch"); const res = await fetch(node.url, { signal: controller.signal }); if (!res.ok) throw new Error(`HTTP ${res.status}`); text = await res.text(); } if (!cancelled) setState({ text, loading: false, error: null }); } catch (err) { if (cancelled) return; if ((err as Error).name === "AbortError") return; setState({ text: null, loading: false, error: (err as Error).message || "Failed to load", }); } }; void run(); return () => { cancelled = true; controller.abort(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [nodeId, url, enabled, resolve]); return state; } 59:T12e2,import { useCallback, useEffect, useRef, useState } from "react"; import { resolvePreviewKind } from "../lib/preview-kind"; import type { MediaNode, MediaUploadItem, MediaLibraryRootProps } from "../types"; let uploadSeq = 0; function nextTempId(): string { uploadSeq += 1; const rand = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : String(uploadSeq); return `upl-${uploadSeq}-${rand}`; } export interface UploadApi { uploads: MediaUploadItem[]; start: (files: File[], targetFolderId: string | null) => void; retry: (tempId: string) => void; dismiss: (tempId: string) => void; } /** * Optimistic upload orchestration. Invokes `onUpload` once per file, shows a * placeholder item with a live progress ring, and on resolve hands the real * `MediaNode[]` to the store (which is the source of truth) while removing the * placeholder. Owns + revokes the object URLs it mints for local previews. */ export function useUpload( onUpload: MediaLibraryRootProps["onUpload"], onResolved: (nodes: MediaNode[], targetFolderId: string | null) => void, ): UploadApi { const [uploads, setUploads] = useState([]); const ownedUrls = useRef>(new Set()); const fileMap = useRef>( new Map(), ); const onResolvedRef = useRef(onResolved); useEffect(() => { onResolvedRef.current = onResolved; }); const revoke = useCallback((url?: string) => { if (url && ownedUrls.current.has(url)) { URL.revokeObjectURL(url); ownedUrls.current.delete(url); } }, []); const runOne = useCallback( (tempId: string, file: File, targetFolderId: string | null) => { if (!onUpload) return; const progress = (pct: number) => setUploads((prev) => prev.map((u) => u.tempId === tempId ? { ...u, pct: Math.max(0, Math.min(100, Math.round(pct))) } : u, ), ); onUpload([file], targetFolderId, progress) .then((nodes) => { setUploads((prev) => { const item = prev.find((u) => u.tempId === tempId); revoke(item?.previewUrl); return prev.filter((u) => u.tempId !== tempId); }); fileMap.current.delete(tempId); onResolvedRef.current(nodes, targetFolderId); }) .catch((err: unknown) => { setUploads((prev) => prev.map((u) => u.tempId === tempId ? { ...u, status: "error", error: (err as Error)?.message || "Upload failed", } : u, ), ); }); }, [onUpload, revoke], ); const start = useCallback( (files: File[], targetFolderId: string | null) => { if (!onUpload || files.length === 0) return; const items: MediaUploadItem[] = files.map((file) => { const tempId = nextTempId(); const kind = resolvePreviewKind({ id: tempId, name: file.name, type: "file", mimeType: file.type, } as MediaNode); let previewUrl: string | undefined; if (file.type.startsWith("image/")) { previewUrl = URL.createObjectURL(file); ownedUrls.current.add(previewUrl); } fileMap.current.set(tempId, { file, targetFolderId }); return { tempId, name: file.name, kind, pct: 0, status: "uploading" as const, previewUrl, targetFolderId, }; }); setUploads((prev) => [...prev, ...items]); items.forEach((item) => runOne(item.tempId, fileMap.current.get(item.tempId)!.file, item.targetFolderId)); }, [onUpload, runOne], ); const retry = useCallback( (tempId: string) => { const entry = fileMap.current.get(tempId); if (!entry) return; setUploads((prev) => prev.map((u) => u.tempId === tempId ? { ...u, status: "uploading", pct: 0, error: undefined } : u, ), ); runOne(tempId, entry.file, entry.targetFolderId); }, [runOne], ); const dismiss = useCallback( (tempId: string) => { setUploads((prev) => { const item = prev.find((u) => u.tempId === tempId); revoke(item?.previewUrl); return prev.filter((u) => u.tempId !== tempId); }); fileMap.current.delete(tempId); }, [revoke], ); // Revoke any outstanding owned URLs on unmount. useEffect(() => { const owned = ownedUrls.current; return () => { owned.forEach((url) => URL.revokeObjectURL(url)); owned.clear(); }; }, []); return { uploads, start, retry, dismiss }; } 5a:T9bc,import type { MediaNode } from "../types"; /** Payload carried by a card drag (one or more selected node ids). */ export interface MediaDragData { type: "media-node"; ids: string[]; } /** Build a `parentId` lookup by walking the (possibly partial) tree. */ export function buildParentMap(nodes: MediaNode[]): Map { const map = new Map(); const walk = (list: MediaNode[], parentId: string | null) => { for (const n of list) { map.set(n.id, n.parentId ?? parentId); if (n.children) walk(n.children, n.id); } }; walk(nodes, null); return map; } /** Is `maybeAncestorId` an ancestor of (or equal to) `nodeId`, per the parent map? */ export function isAncestor( parentMap: Map, maybeAncestorId: string, nodeId: string, ): boolean { let cur: string | null | undefined = nodeId; const seen = new Set(); while (cur != null) { if (cur === maybeAncestorId) return true; if (seen.has(cur)) break; // cycle guard seen.add(cur); cur = parentMap.get(cur); } return false; } /** * Can `draggedIds` drop into `targetFolderId` (null = root)? * Rejects: target not a folder; dropping a node onto itself; dropping a folder * into its own subtree; a pure no-op (already the current parent of all). */ export function canDropInto( draggedIds: string[], targetFolderId: string | null, nodes: MediaNode[], parentMap: Map = buildParentMap(nodes), ): boolean { if (draggedIds.length === 0) return false; if (targetFolderId !== null) { const target = findNode(nodes, targetFolderId); if (!target || target.type !== "folder") return false; // can't drop a node onto itself, or a folder into its own descendant for (const id of draggedIds) { if (id === targetFolderId) return false; if (isAncestor(parentMap, id, targetFolderId)) return false; } } // reject a pure no-op (every dragged node already lives in the target) const allAlreadyHere = draggedIds.every((id) => (parentMap.get(id) ?? null) === targetFolderId); if (allAlreadyHere) return false; return true; } /** Depth-first find by id across the (partial) tree. */ export function findNode(nodes: MediaNode[], id: string): MediaNode | undefined { for (const n of nodes) { if (n.id === id) return n; if (n.children) { const hit = findNode(n.children, id); if (hit) return hit; } } return undefined; } 5b:T69d,import type { MediaFilterCategory, MediaNode, MediaPreviewKind } from "../types"; import { resolvePreviewKind } from "./preview-kind"; /** * Map a preview kind to its type-filter chip (Q4 taxonomy): * images / video / pdfs / docs (= code, json, text, markdown + unknown/office). */ export function filterCategoryForKind(kind: MediaPreviewKind): Exclude { switch (kind) { case "image": return "images"; case "video": return "video"; case "pdf": return "pdfs"; default: // code | json | text | markdown | unknown (office docs, archives, …) return "docs"; } } export function filterCategoryForNode(node: MediaNode): Exclude { return filterCategoryForKind(resolvePreviewKind(node)); } /** Does a file node match the active chip? Folders are never filtered. */ export function nodeMatchesFilter(node: MediaNode, filter: MediaFilterCategory): boolean { if (node.type === "folder") return true; if (filter === "all") return true; return filterCategoryForNode(node) === filter; } export type MediaFilterCounts = Record; /** Count files per chip for the given (current-folder) file list. */ export function computeFilterCounts(files: MediaNode[]): MediaFilterCounts { const counts: MediaFilterCounts = { all: 0, images: 0, video: 0, pdfs: 0, docs: 0, }; for (const node of files) { if (node.type === "folder") continue; counts.all += 1; counts[filterCategoryForNode(node)] += 1; } return counts; } export const FILTER_ORDER: MediaFilterCategory[] = [ "all", "images", "video", "pdfs", "docs", ]; 5c:T6b1,import { format } from "date-fns"; /** Humanize a byte count → "12.8 GB", "512 KB", "0 B". */ export function formatBytes(bytes: number, decimals = 1): string { if (!Number.isFinite(bytes) || bytes <= 0) return "0 B"; const units = ["B", "KB", "MB", "GB", "TB", "PB"]; const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1); const value = bytes / Math.pow(1024, i); // whole bytes need no decimals; larger units get up to `decimals` const str = i === 0 ? String(Math.round(value)) : value.toFixed(decimals).replace(/\.0+$/, ""); return `${str} ${units[i]}`; } /** * Compact relative time → "2h ago", "3d ago", "1w ago"; older than ~5 weeks * falls back to an absolute "Mar 24" (date-fns). Returns "" for missing input. */ export function formatRelativeTime(iso?: string): string { if (!iso) return ""; const then = new Date(iso); const ms = then.getTime(); if (Number.isNaN(ms)) return ""; const diff = Date.now() - ms; if (diff < 0) return "just now"; const sec = diff / 1000; const min = sec / 60; const hr = min / 60; const day = hr / 24; const week = day / 7; if (min < 1) return "just now"; if (min < 60) return `${Math.floor(min)}m ago`; if (hr < 24) return `${Math.floor(hr)}h ago`; if (day < 7) return `${Math.floor(day)}d ago`; if (week < 5) return `${Math.floor(week)}w ago`; return format(then, "MMM d"); } /** Fill a `{token}` template, e.g. tmpl("{used} of {total}", {used:"a",total:"b"}). */ export function fillTemplate(template: string, values: Record): string { return template.replace(/\{(\w+)\}/g, (_, key: string) => key in values ? String(values[key]) : `{${key}}`, ); } 5d:Tb53,import type { MediaNode, MediaPreviewKind } from "../types"; /** Extension → preview kind. Lower-case, no leading dot. */ const EXT_TO_KIND: Record = { // image jpg: "image", jpeg: "image", png: "image", gif: "image", webp: "image", avif: "image", svg: "image", bmp: "image", ico: "image", heic: "image", // video mp4: "video", webm: "video", ogv: "video", mov: "video", m4v: "video", mkv: "video", avi: "video", // pdf pdf: "pdf", // json json: "json", jsonc: "json", geojson: "json", // markdown md: "markdown", markdown: "markdown", mdx: "markdown", // code ts: "code", tsx: "code", js: "code", jsx: "code", mjs: "code", cjs: "code", html: "code", htm: "code", css: "code", scss: "code", less: "code", py: "code", rb: "code", go: "code", rs: "code", java: "code", php: "code", swift: "code", kt: "code", c: "code", h: "code", cpp: "code", cc: "code", cs: "code", sh: "code", bash: "code", zsh: "code", yaml: "code", yml: "code", toml: "code", ini: "code", sql: "code", xml: "code", graphql: "code", vue: "code", svelte: "code", dockerfile: "code", // plain text txt: "text", log: "text", csv: "text", tsv: "text", env: "text", }; /** Extract the lower-cased extension from `node.ext` or the file name. */ export function extOf(node: { name: string; ext?: string }): string { if (node.ext) return node.ext.replace(/^\./, "").toLowerCase(); const dot = node.name.lastIndexOf("."); return dot > 0 ? node.name.slice(dot + 1).toLowerCase() : ""; } /** * Resolve which viewer a file maps to: `mimeType` is authoritative for the * broad buckets, `ext` refines/falls back, else `"unknown"` (download-only). */ export function resolvePreviewKind(node: MediaNode): MediaPreviewKind { if (node.type === "folder") return "unknown"; const mime = node.mimeType?.toLowerCase(); const ext = extOf(node); if (mime) { if (mime.startsWith("image/")) return "image"; if (mime.startsWith("video/")) return "video"; if (mime === "application/pdf") return "pdf"; if (mime === "application/json") return "json"; if (mime === "text/markdown" || mime === "text/x-markdown") return "markdown"; if ( mime === "text/html" || mime === "text/css" || mime === "text/javascript" || mime === "application/javascript" || mime === "application/typescript" || mime === "application/xml" || mime === "text/xml" ) { return "code"; } if (mime === "text/plain" || mime === "text/csv") { // refine with ext when present (e.g. a `.ts` served as text/plain) return EXT_TO_KIND[ext] ?? "text"; } } return EXT_TO_KIND[ext] ?? "unknown"; } /** Text-based kinds the lib fetches content for. */ export function isTextKind(kind: MediaPreviewKind): boolean { return kind === "code" || kind === "json" || kind === "text" || kind === "markdown"; } 5e:T717,"use client"; import { ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; import { useMediaLibrary } from "../hooks/use-media-library"; /** Tier B — breadcrumb path bar. Walks the current folder's `parentId` chain. */ export function MediaLibraryBreadcrumbs({ className }: { className?: string }) { const { path, navigateTo, labels } = useMediaLibrary(); return (

{path.map((node, i) => { const isLast = i === path.length - 1; return ( ); })}

); } 5f:Tb89,"use client"; import type { ReactNode } from "react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from "@/components/ui/context-menu"; import { useMediaLibrary } from "../hooks/use-media-library"; import type { MediaNode } from "../types"; /** * Wraps a card with a selection-aware right-click menu. When the node is part * of a multi-selection the verbs act on the whole selection; otherwise on the * node alone. Returns children untouched when `enableContextMenu` is false. */ export function MediaItemContextMenu({ node, children, }: { node: MediaNode; children: ReactNode; }) { const ctx = useMediaLibrary(); if (!ctx.enableContextMenu) return <>{children}; const { labels, can, clipboard } = ctx; const ids = ctx.selectedIds.has(node.id) && ctx.selectedIds.size > 1 ? Array.from(ctx.selectedIds) : [node.id]; const isFile = node.type === "file"; const isFolder = node.type === "folder"; const canPasteHere = can.move && isFolder && clipboard.kind === "cut" && clipboard.ids.length > 0; return ( {/* F-cross-13: no `asChild` — trigger is a display:contents wrapper; right-click bubbles up from the card in both backends. */} {children} {isFolder ? ( ctx.navigateTo(node.id)}> {labels.open} ) : ( ctx.openPreview(node.id)}> {labels.preview} )} {can.rename ? ( ctx.startRename(node.id)}> {labels.rename} ) : null} {can.move ? ( ctx.cut(ids)}> {labels.cut} ) : null} {canPasteHere ? ( ctx.moveTo(clipboard.ids, node.id)}> {labels.paste} ) : null} {can.download && isFile ? ( ctx.download(ids)}> {labels.download} ) : null} {can.delete ? ( <> {/* F-cross-13: style destructive via className, not a `variant` prop — consumer primitives (base-nova / Base UI) may lack it. */} ctx.requestDelete(ids)} > {labels.delete} ) : null} ); } 60:Tcae,"use client"; import { useMemo } from "react"; import { Download, Maximize2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { formatBytes, formatRelativeTime } from "../lib/format"; import { useMediaLibrary } from "../hooks/use-media-library"; import { FilePreview } from "./file-preview"; /** Tier B — right-side details pane showing the single selected file. */ export function MediaLibraryDetailsPane({ className }: { className?: string }) { const ctx = useMediaLibrary(); const { selectedIds, files, labels, resolveTextContent, can } = ctx; const node = useMemo(() => { if (selectedIds.size !== 1) return null; const [id] = Array.from(selectedIds); return files.find((f) => f.id === id) ?? null; }, [selectedIds, files]); if (!node) { return ( ); } const meta: Array<[string, string]> = []; if (node.width && node.height) meta.push(["Dimensions", `${node.width} × ${node.height}`]); if (typeof node.size === "number") meta.push(["Size", formatBytes(node.size)]); if (node.modifiedAt) meta.push(["Modified", formatRelativeTime(node.modifiedAt)]); if (node.owner) meta.push(["Owner", node.owner]); return ( ); } 61:Tb38,"use client"; import { forwardRef, type HTMLAttributes, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import { resolvePreviewKind } from "../lib/preview-kind"; import { extOf } from "../lib/preview-kind"; import type { MediaNode, MediaPreviewKind } from "../types"; import { FileKindBadge, PreviewKindIcon, STRIPE_STYLE } from "./file-visuals"; export interface FileCardProps extends HTMLAttributes { node: MediaNode; /** Pre-resolved kind; computed from the node when omitted. */ kind?: MediaPreviewKind; selected?: boolean; renaming?: ReactNode; dragHandle?: ReactNode; /** Extra overlay (e.g. an upload progress ring). */ overlay?: ReactNode; } /** Tier C — presentational file thumbnail tile. */ export const FileCard = forwardRef(function FileCard( { node, kind: kindProp, selected, renaming, dragHandle, overlay, className, ...rest }, ref, ) { const kind = kindProp ?? resolvePreviewKind(node); const ext = extOf(node); const thumb = node.thumbnailUrl ?? (kind === "image" ? node.url : undefined); const dims = node.width && node.height ? `${node.width} × ${node.height}` : null; return (

{thumb ? (

) : ( )} {dims ? ( {dims} ) : null} {overlay}

{renaming ?? (

{node.name}

)}

{dragHandle}

); }); 62:T1889,"use client"; import { GripVertical, ImageOff, UploadCloud } from "lucide-react"; import type { KeyboardEvent, MouseEvent, PointerEventHandler } from "react"; import { useDraggable } from "@dnd-kit/core"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { resolvePreviewKind } from "../lib/preview-kind"; import { useMediaLibrary } from "../hooks/use-media-library"; import { MediaItemContextMenu } from "./context-menu"; import { FileCard } from "./file-card"; import { RenameInput } from "./rename-input"; import { UploadProgressCard } from "./upload-progress"; import type { MediaNode } from "../types"; const GRID_CLASS = "grid grid-cols-[repeat(auto-fill,minmax(9.5rem,1fr))] gap-3"; function ConnectedFileCard({ node }: { node: MediaNode }) { const ctx = useMediaLibrary(); const selected = ctx.selection.isSelected(node.id); const kind = resolvePreviewKind(node); const ids = ctx.selectedIds.has(node.id) && ctx.selectedIds.size > 1 ? Array.from(ctx.selectedIds) : [node.id]; const { setNodeRef, listeners, attributes, isDragging } = useDraggable({ id: node.id, data: { type: "media-node", ids }, disabled: !ctx.enableInternalDrag || !ctx.can.move, }); const onClick = (e: MouseEvent) => ctx.selection.handleItemClick( node.id, { metaKey: e.metaKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, ctx.visibleIds, ); const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); if (ctx.canPreview) ctx.openPreview(node.id); } else if (e.key === " ") { e.preventDefault(); ctx.selection.toggle(node.id); } }; return ( ctx.canPreview && ctx.openPreview(node.id)} onKeyDown={onKeyDown} onPointerDown={ listeners?.onPointerDown as PointerEventHandler | undefined } style={isDragging ? { opacity: 0.4 } : undefined} renaming={ ctx.renamingId === node.id ? ( ctx.submitRename(node.id, v)} onCancel={ctx.cancelRename} /> ) : undefined } dragHandle={ ctx.enableInternalDrag && ctx.can.move ? ( ) : undefined } /> ); } /** Tier B — FILES section: heading + thumbnail grid + uploads + empty/loading states. */ export function MediaLibraryFileGrid({ className }: { className?: string }) { const { files, folders, uploads, labels, loadingChildren, loadError, currentFolderId, refresh, can, triggerUpload, creatingFolder, } = useMediaLibrary(); if (loadingChildren) { return (

{labels.filesHeading}

{Array.from({ length: 5 }).map((_, i) => ( ))}

); } if (loadError) { return (

{loadError}

); } const totallyEmpty = folders.length === 0 && files.length === 0 && uploads.length === 0 && !creatingFolder; if (totallyEmpty) { const isRoot = currentFolderId == null; return (

{isRoot ? (

{isRoot ? labels.emptyLibrary : labels.emptyFolder}

{can.upload ? ( ) : null}

); } if (files.length === 0 && uploads.length === 0) return null; return (

{labels.filesHeading}

{uploads.map((item) => ( ))} {files.map((node) => ( ))}

); } 63:T2568,"use client"; import { Component, lazy, Suspense, useState, type ReactNode } from "react"; import { Download, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { isTextKind, resolvePreviewKind } from "../lib/preview-kind"; import { useTextContent } from "../hooks/use-text-content"; import { DEFAULT_MEDIA_LIBRARY_LABELS, type MediaLibraryLabels, type MediaNode, type MediaPreviewKind, } from "../types"; import { PreviewKindIcon } from "./file-visuals"; // Lazy viewers — code-split so a consumer who never previews a PDF/code/markdown // file never ships pdf.js / CodeMirror / shiki / marked. Import convention // (VERIFIED by consumer smoke): // • SAME-category procomps (media→media) → dynamic-import a RELATIVE path. The // `media/` segment is implied by `../../`, so it survives the consumer's // flat layout; relative also dodges the F-S1 same-category slug bug. // • CROSS-category procomps → dynamic-import a LOCAL re-export wrapper // (`./lazy-*`). shadcn's rewriter strips the category for STATIC // `@/registry/...` imports (inside the wrapper) but NOT for dynamic // import() calls — so a direct dynamic cross-category import keeps a dead // `code/`/`forms/` segment and breaks the install. The local indirection // fixes it while preserving the code-split. const LazyPdf = lazy(() => import("../../pdf-viewer/pdf-viewer").then((m) => ({ default: m.PdfViewer })), ); const LazyVideo = lazy(() => import("../../video-player/video-player").then((m) => ({ default: m.default })), ); const LazyCode = lazy(() => import("./lazy-code-block")); const LazyMarkdown = lazy(() => import("./lazy-markdown-editor")); const NOOP = () => {}; /** * Catches a viewer that throws (network failure, corrupt file, pdf.js worker * error) so one bad file degrades to a graceful fallback instead of taking * down the whole library. Resets when the previewed node changes. */ class PreviewErrorBoundary extends Component< { resetKey: string; fallback: ReactNode; children: ReactNode }, { hasError: boolean } > { override state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } override componentDidUpdate(prev: { resetKey: string }) { if (prev.resetKey !== this.props.resetKey && this.state.hasError) { this.setState({ hasError: false }); } } override render() { return this.state.hasError ? this.props.fallback : this.props.children; } } export interface FilePreviewProps { node: MediaNode; /** "pane" = constrained side panel; "full" = fills its container (lightbox). */ variant?: "pane" | "full"; resolveTextContent?: (node: MediaNode) => Promise; /** Override the pdf.js worker URL (forwarded to the composed pdf-viewer). */ pdfWorkerSrc?: string; labels?: Partial; onDownload?: (node: MediaNode) => void; className?: string; } function PreviewFallback({ label }: { label: string }) { return (

); } function PreviewMessage({ kind, message, node, onDownload, downloadLabel, tone = "muted", }: { kind: MediaPreviewKind; message: string; node: MediaNode; onDownload?: (node: MediaNode) => void; downloadLabel: string; tone?: "muted" | "error"; }) { return (

{message}

{onDownload && node.url ? ( ) : null}

); } function TextPreview({ node, kind, resolveTextContent, labels, }: { node: MediaNode; kind: MediaPreviewKind; resolveTextContent?: (node: MediaNode) => Promise; labels: Required; }) { const { text, loading, error } = useTextContent(node, true, resolveTextContent); if (loading) return ; if (error != null || text == null) { return ( ); } if (kind === "markdown") { return ( }>

); } return ( }>

); } /** * PDF preview that turns react-pdf's async `onError` (failed document / worker * fetch) into the graceful fallback — an error boundary can't catch the async * failure, so we surface it explicitly. Reset by keying on `node.id`. */ function PdfPreview({ node, labels, workerSrc, onDownload, }: { node: MediaNode; labels: Required; workerSrc?: string; onDownload?: (node: MediaNode) => void; }) { const [failed, setFailed] = useState(false); if (failed) { return (

); } return ( }> setFailed(true)} /> ); } /** Tier C — the multi-type preview dispatcher. Usable standalone (no context). */ export function FilePreview({ node, variant = "full", resolveTextContent, pdfWorkerSrc, labels: labelOverrides, onDownload, className, }: FilePreviewProps) { const labels = { ...DEFAULT_MEDIA_LIBRARY_LABELS, ...labelOverrides }; const kind = resolvePreviewKind(node); const wrap = (children: React.ReactNode) => (

{children}

); if (!node.url && !isTextKind(kind)) { return wrap( , ); } let content: ReactNode; switch (kind) { case "image": content = wrap( {node.name}

, ); break; case "video": content = wrap( }>

, ); break; case "pdf": content = (

); break; case "code": case "json": case "text": case "markdown": content = (

); break; default: return wrap( , ); } // A viewer that throws (network / worker / corrupt file) degrades gracefully // instead of crashing the library; resets when the previewed node changes. return ( , )} > {content} ); } 64:T895,"use client"; import { File, FileCode, FileJson, FileText, FileType2, Film, Image as ImageIcon, } from "lucide-react"; import type { ComponentType } from "react"; import { cn } from "@/lib/utils"; import type { MediaPreviewKind } from "../types"; const KIND_ICON: Record> = { image: ImageIcon, video: Film, pdf: FileType2, code: FileCode, json: FileJson, text: FileText, markdown: FileText, unknown: File, }; export function PreviewKindIcon({ kind, className, }: { kind: MediaPreviewKind; className?: string; }) { const Icon = KIND_ICON[kind] ?? File; return ; } const KIND_BADGE: Record = { image: "bg-violet-500/15 text-violet-700 ring-violet-500/25 dark:text-violet-300", video: "bg-orange-500/15 text-orange-700 ring-orange-500/25 dark:text-orange-300", pdf: "bg-red-500/15 text-red-700 ring-red-500/25 dark:text-red-300", code: "bg-sky-500/15 text-sky-700 ring-sky-500/25 dark:text-sky-300", json: "bg-sky-500/15 text-sky-700 ring-sky-500/25 dark:text-sky-300", markdown: "bg-sky-500/15 text-sky-700 ring-sky-500/25 dark:text-sky-300", text: "bg-slate-500/15 text-slate-700 ring-slate-500/25 dark:text-slate-300", unknown: "bg-muted text-muted-foreground ring-border", }; /** Small monospace extension pill ("JPG", "PDF", "MD"). */ export function FileKindBadge({ kind, ext, className, }: { kind: MediaPreviewKind; ext?: string; className?: string; }) { const label = (ext || kind).replace(/^\./, "").toUpperCase().slice(0, 4); return ( {label} ); } /** Subtle diagonal-stripe backdrop for visual files lacking a thumbnail. */ export const STRIPE_STYLE: React.CSSProperties = { backgroundImage: "repeating-linear-gradient(-45deg, color-mix(in oklch, var(--muted-foreground) 8%, transparent) 0 10px, transparent 10px 20px)", }; 65:T9ab,"use client"; import { forwardRef, type HTMLAttributes, type ReactNode } from "react"; import { ChevronRight, Folder } from "lucide-react"; import { cn } from "@/lib/utils"; import { formatRelativeTime } from "../lib/format"; import type { MediaNode } from "../types"; export interface FolderCardProps extends HTMLAttributes { node: MediaNode; selected?: boolean; /** Number of items inside, when known. */ itemCount?: number; /** Highlight while a drag hovers over it. */ isDropTarget?: boolean; /** Replaces the name with an inline editor when renaming. */ renaming?: ReactNode; /** Optional drag-handle node (keyboard-accessible move). */ dragHandle?: ReactNode; } /** Tier C — presentational folder tile. dnd / selection wiring lives in the connected row. */ export const FolderCard = forwardRef( function FolderCard( { node, selected, itemCount, isDropTarget, renaming, dragHandle, className, ...rest }, ref, ) { const meta = [ typeof itemCount === "number" ? `${itemCount} item${itemCount === 1 ? "" : "s"}` : null, node.modifiedAt ? formatRelativeTime(node.modifiedAt) : null, ] .filter(Boolean) .join(" · "); return (

{renaming ?? (

{node.name}

)} {meta ?

{meta}

: null}

{dragHandle}

); }, ); 66:T1398,"use client"; import { GripVertical } from "lucide-react"; import type { KeyboardEvent, MouseEvent, PointerEventHandler, Ref } from "react"; import { useDraggable, useDroppable } from "@dnd-kit/core"; import { cn } from "@/lib/utils"; import { useMediaLibrary } from "../hooks/use-media-library"; import { DROP_PREFIX } from "./media-library-root"; import { MediaItemContextMenu } from "./context-menu"; import { FolderCard } from "./folder-card"; import { RenameInput } from "./rename-input"; import type { MediaNode } from "../types"; function composeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref && "current" in ref) (ref as { current: T | null }).current = node; } }; } function ConnectedFolderCard({ node }: { node: MediaNode }) { const ctx = useMediaLibrary(); const selected = ctx.selection.isSelected(node.id); const ids = ctx.selectedIds.has(node.id) && ctx.selectedIds.size > 1 ? Array.from(ctx.selectedIds) : [node.id]; const { setNodeRef: setDragRef, listeners, attributes, isDragging } = useDraggable({ id: node.id, data: { type: "media-node", ids }, disabled: !ctx.enableInternalDrag || !ctx.can.move, }); const { setNodeRef: setDropRef, isOver } = useDroppable({ id: `${DROP_PREFIX}${node.id}`, }); const isDropTarget = isOver && ctx.activeDragIds != null && ctx.canDrop(ctx.activeDragIds, node.id); const onClick = (e: MouseEvent) => ctx.selection.handleItemClick( node.id, { metaKey: e.metaKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, ctx.visibleIds, ); const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); ctx.navigateTo(node.id); } else if (e.key === " ") { e.preventDefault(); ctx.selection.toggle(node.id); } }; return ( ctx.navigateTo(node.id)} onKeyDown={onKeyDown} onPointerDown={ listeners?.onPointerDown as PointerEventHandler | undefined } style={isDragging ? { opacity: 0.4 } : undefined} renaming={ ctx.renamingId === node.id ? ( ctx.submitRename(node.id, v)} onCancel={ctx.cancelRename} /> ) : undefined } dragHandle={ ctx.enableInternalDrag && ctx.can.move ? ( ) : undefined } /> ); } /** Tier B — FOLDERS section: heading + folder-card grid + inline new-folder editor. */ export function MediaLibraryFolderRow({ className }: { className?: string }) { const { folders, labels, creatingFolder, submitCreateFolder, cancelCreateFolder } = useMediaLibrary(); if (folders.length === 0 && !creatingFolder) return null; return (

{labels.foldersHeading}

{creatingFolder ? (

) : null} {folders.map((node) => ( ))}

); } 67:T781,"use client"; import { FolderPlus, Search, Upload } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; import { useMediaLibrary } from "../hooks/use-media-library"; /** Tier B — title + search + New folder + Upload. */ export function MediaLibraryToolbar({ className }: { className?: string }) { const { labels, can, triggerUpload, startCreateFolder, searchQuery, setSearchQuery, } = useMediaLibrary(); return (

{labels.title}

{can.createFolder ? ( ) : null} {can.upload ? ( ) : null}

); } 68:T18fb,"use client"; import { forwardRef, useCallback, useId, useImperativeHandle, useRef, type DragEvent as ReactDragEvent, } from "react"; import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors, type DragEndEvent, type DragStartEvent, } from "@dnd-kit/core"; import { Files } from "lucide-react"; import { cn } from "@/lib/utils"; import { MediaLibraryContext, useMediaLibraryStore, } from "../hooks/use-media-library"; import type { MediaDragData } from "../lib/drag"; import type { MediaLibraryHandle, MediaLibraryRootProps } from "../types"; import { MediaLibraryUploadOverlay } from "./upload-overlay"; export const DROP_PREFIX = "drop:"; /** * Headless provider (Tier B). Owns the store/context, the single `DndContext` * for internal move, OS file-drop wiring, the hidden upload input, and the * imperative handle. Renders `children` so consumers compose freely. */ export const MediaLibraryRoot = forwardRef< MediaLibraryHandle, MediaLibraryRootProps >(function MediaLibraryRoot(props, ref) { const store = useMediaLibraryStore(props); const { children, className } = props; const dragDepth = useRef(0); // Stable, SSR-safe id for DndContext — without it, @dnd-kit derives its // `aria-describedby` ("DndDescribedBy-N") from a module-level counter that // increments in a different order on the server vs the client → hydration // mismatch. useId is identical across SSR/CSR and unique per Root instance. const dndId = useId(); useImperativeHandle( ref, () => ({ navigateTo: store.navigateTo, refresh: store.refresh, openPreview: store.openPreview, closePreview: store.closePreview, triggerUpload: store.triggerUpload, getSelectedIds: () => Array.from(store.selectedIds), clearSelection: store.selection.clear, }), [store], ); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor), ); const handleDragStart = useCallback( (event: DragStartEvent) => { if (!store.enableInternalDrag) return; const id = String(event.active.id); const data = event.active.data.current as MediaDragData | undefined; const ids = data?.ids?.length ? data.ids : [id]; store.setActiveDragIds(ids); }, [store], ); const handleDragEnd = useCallback( (event: DragEndEvent) => { store.setActiveDragIds(null); const overId = event.over ? String(event.over.id) : null; if (!overId || !overId.startsWith(DROP_PREFIX)) return; // Read the dragged ids straight off the event (set at drag-start) rather // than from React state, which can lag behind the drop. const data = event.active.data.current as MediaDragData | undefined; const ids = data?.ids?.length ? data.ids : [String(event.active.id)]; const rawTarget = overId.slice(DROP_PREFIX.length); const target = rawTarget === "root" ? null : rawTarget; store.moveTo(ids, target); }, [store], ); // ---- OS file drop (native HTML5 drag of files from the desktop) ---- const isFileDrag = (e: ReactDragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files"); const onDragEnter = useCallback( (e: ReactDragEvent) => { if (!store.enableUploadDrop || !store.can.upload || !isFileDrag(e)) return; e.preventDefault(); dragDepth.current += 1; store.setDraggingFiles(true); }, [store], ); const onDragOver = useCallback( (e: ReactDragEvent) => { if (!store.enableUploadDrop || !store.can.upload || !isFileDrag(e)) return; e.preventDefault(); e.dataTransfer.dropEffect = "copy"; }, [store], ); const onDragLeave = useCallback( (e: ReactDragEvent) => { if (!store.enableUploadDrop || !store.can.upload || !isFileDrag(e)) return; dragDepth.current = Math.max(0, dragDepth.current - 1); if (dragDepth.current === 0) store.setDraggingFiles(false); }, [store], ); const onDrop = useCallback( (e: ReactDragEvent) => { if (!store.enableUploadDrop || !store.can.upload || !isFileDrag(e)) return; e.preventDefault(); dragDepth.current = 0; store.setDraggingFiles(false); const files = Array.from(e.dataTransfer.files ?? []); if (files.length) store.uploadFiles(files); }, [store], ); const onFileInputChange = useCallback( (e: React.ChangeEvent) => { // Snapshot BEFORE resetting value (the browse-FileList lesson, v0.1.2). const files = Array.from(e.target.files ?? []); e.target.value = ""; if (files.length) store.uploadFiles(files); }, [store], ); return ( store.setActiveDragIds(null)} >

{children} {store.enableUploadDrop && store.can.upload ? ( ) : null} {store.activeDragIds ? (

) : null}

); }); 69:T11e8,"use client"; import { useCallback } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { DEFAULT_MEDIA_LIBRARY_LABELS, type MediaLibraryLabels, type MediaNode, } from "../types"; import { FilePreview } from "./file-preview"; import { useMediaLibrary } from "../hooks/use-media-library"; export interface FilePreviewLightboxProps { nodes: MediaNode[]; activeId: string | null; onClose: () => void; onNavigate: (id: string) => void; resolveTextContent?: (node: MediaNode) => Promise; pdfWorkerSrc?: string; onDownload?: (node: MediaNode) => void; labels?: Partial; } /** Tier C — controlled full-screen lightbox stepping through `nodes`. */ export function FilePreviewLightbox({ nodes, activeId, onClose, onNavigate, resolveTextContent, pdfWorkerSrc, onDownload, labels: labelOverrides, }: FilePreviewLightboxProps) { const labels = { ...DEFAULT_MEDIA_LIBRARY_LABELS, ...labelOverrides }; const index = activeId == null ? -1 : nodes.findIndex((n) => n.id === activeId); const node = index >= 0 ? nodes[index] : null; const hasPrev = index > 0; const hasNext = index >= 0 && index < nodes.length - 1; const goPrev = useCallback(() => { if (hasPrev) onNavigate(nodes[index - 1].id); }, [hasPrev, nodes, index, onNavigate]); const goNext = useCallback(() => { if (hasNext) onNavigate(nodes[index + 1].id); }, [hasNext, nodes, index, onNavigate]); return ( ); } /** Tier B — context-connected lightbox (steps through the current folder's files). */ export function MediaLibraryLightbox() { const ctx = useMediaLibrary(); return ( ctx.download([n.id]) : undefined} labels={ctx.labels} /> ); } 6a:T871,"use client"; import { HardDrive } from "lucide-react"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; import { DEFAULT_MEDIA_LIBRARY_LABELS } from "../types"; import { fillTemplate, formatBytes } from "../lib/format"; import { useMediaLibrary } from "../hooks/use-media-library"; export interface QuotaBarProps { used: number; total: number; /** Full caption override; defaults to the filled `quotaUsed` template. */ label?: string; className?: string; } /** Tier C — standalone storage-quota bar (no context). */ export function QuotaBar({ used, total, label, className }: QuotaBarProps) { const pct = total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0; const caption = label ?? fillTemplate(DEFAULT_MEDIA_LIBRARY_LABELS.quotaUsed, { used: formatBytes(used), total: formatBytes(total), }); return (

{caption} {pct}%

); } /** Tier B — context-connected quota bar. Renders nothing if `storage` is unset. */ export function MediaLibraryQuotaBar({ className }: { className?: string }) { const { storage, labels } = useMediaLibrary(); if (!storage) return null; const caption = fillTemplate(labels.quotaUsed, { used: formatBytes(storage.used), total: formatBytes(storage.total), }); return ( ); } 6b:T561,"use client"; import { useEffect, useRef, useState } from "react"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; /** Inline rename / new-folder editor. Enter commits, Escape cancels, blur commits. */ export function RenameInput({ initial, error, placeholder, onSubmit, onCancel, className, }: { initial: string; error?: string | null; placeholder?: string; onSubmit: (value: string) => void; onCancel: () => void; className?: string; }) { const [value, setValue] = useState(initial); const ref = useRef(null); useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []); return ( e.stopPropagation()} onDoubleClick={(e) => e.stopPropagation()} onChange={(e) => setValue(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); onSubmit(value); } else if (e.key === "Escape") { e.preventDefault(); onCancel(); } e.stopPropagation(); }} onBlur={() => onSubmit(value)} className={cn("h-7 px-2 text-sm", error && "border-destructive", className)} /> ); } 6c:Tbc0,"use client"; import { useMemo } from "react"; import { cn } from "@/lib/utils"; // VALUE import from file-tree's .tsx entry. CROSS-category (media→navigation) → // `@/registry/...` ALIAS so shadcn's rewriter strips the category in the consumer // (`@/components/file-tree/file-tree`); a relative `../../../navigation/...` would // keep the dead `navigation/` segment and break the install (consumer-smoke proven). // Structural typing bridges MediaNode[] → FsNode[] (no cross-procomp type import). import { FileTree } from "@/registry/components/navigation/file-tree/file-tree"; import { findNode } from "../lib/drag"; import { useMediaLibrary } from "../hooks/use-media-library"; import type { MediaNode } from "../types"; /** Synthetic root row so the tree shows (and can navigate back to) the library root. */ const ROOT_ID = "__media_library_root__"; /** Tier B — navigation + move sidebar (composes the shipped `file-tree`). */ export function MediaLibrarySidebar({ className }: { className?: string }) { const ctx = useMediaLibrary(); // A "Library" root node whose children are the whole tree, so the root is // visible/selectable and folders show their real contents (no false "empty"). const tree = useMemo( () => [ { id: ROOT_ID, name: ctx.labels.libraryHeading, type: "folder", children: ctx.nodes, }, ], [ctx.nodes, ctx.labels.libraryHeading], ); const selectedIds = useMemo( () => new Set([ctx.currentFolderId ?? ROOT_ID]), [ctx.currentFolderId], ); const defaultExpandedIds = useMemo(() => new Set([ROOT_ID]), []); // Folder → navigate (ROOT → root); file → preview. const activate = (id: string) => { if (id === ROOT_ID) { ctx.navigateTo(null); return; } const node = findNode(ctx.nodes, id); if (!node) return; if (node.type === "folder") ctx.navigateTo(id); else if (ctx.canPreview) ctx.openPreview(id); }; return ( ); } 6d:T88d,"use client"; import { cn } from "@/lib/utils"; import { FILTER_ORDER } from "../lib/filter-category"; import { useMediaLibrary } from "../hooks/use-media-library"; import type { MediaFilterCategory } from "../types"; /** Small category dots mirroring the reference design (semantic, not the brand accent). */ const DOT: Record = { all: "bg-muted-foreground/50", images: "bg-violet-500", video: "bg-orange-500", pdfs: "bg-red-500", docs: "bg-sky-500", }; /** Tier B — type-filter chips with live counts. */ export function MediaLibraryTypeFilters({ className }: { className?: string }) { const { filter, setFilter, filterCounts, labels } = useMediaLibrary(); const labelFor: Record = { all: labels.filterAll, images: labels.filterImages, video: labels.filterVideo, pdfs: labels.filterPdfs, docs: labels.filterDocs, }; return (

{FILTER_ORDER.map((cat) => { const active = filter === cat; return ( ); })}

); } 6e:T551,"use client"; import { UploadCloud } from "lucide-react"; import { cn } from "@/lib/utils"; import { useMediaLibrary } from "../hooks/use-media-library"; /** Tier C — dumb drop scrim. */ export function UploadOverlay({ visible, label, className, }: { visible: boolean; label: string; className?: string; }) { if (!visible) return null; return (

{label}

); } /** Tier B — context-connected drop scrim (driven by the root's drag handlers). */ export function MediaLibraryUploadOverlay({ className }: { className?: string }) { const { isDraggingFiles, labels } = useMediaLibrary(); return ( ); } 6f:Tb62,"use client"; import { AlertCircle, Loader2, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; import { fillTemplate } from "../lib/format"; import { useMediaLibrary } from "../hooks/use-media-library"; import type { MediaUploadItem } from "../types"; import { FileKindBadge } from "./file-visuals"; /** A tile for an in-flight optimistic upload (progress ring + error/retry). */ export function UploadProgressCard({ item }: { item: MediaUploadItem }) { const { labels, retryUpload, dismissUpload } = useMediaLibrary(); const isError = item.status === "error"; return (

{item.previewUrl ? (

) : null}

{isError ? (

{item.name}

{isError ? (

{item.error}

) : ( )}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ilinxa","registryDependencies":["@ilinxa/file-tree","@ilinxa/pdf-viewer","@ilinxa/code-block","@ilinxa/markdown-editor","@ilinxa/video-player","button","context-menu","dialog","input","progress","skeleton"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/media/media-library/media-library.tsx","content":"$51","type":"registry:component","target":"components/media-library/media-library.tsx"},{"path":"src/registry/components/media/media-library/index.ts","content":"$52","type":"registry:component","target":"components/media-library/index.ts"},{"path":"src/registry/components/media/media-library/types.ts","content":"$53","type":"registry:component","target":"components/media-library/types.ts"},{"path":"src/registry/components/media/media-library/hooks/use-controllable-state.ts","content":"$54","type":"registry:component","target":"components/media-library/hooks/use-controllable-state.ts"},{"path":"src/registry/components/media/media-library/hooks/use-lazy-children.ts","content":"$55","type":"registry:component","target":"components/media-library/hooks/use-lazy-children.ts"},{"path":"src/registry/components/media/media-library/hooks/use-media-library.ts","content":"$56","type":"registry:component","target":"components/media-library/hooks/use-media-library.ts"},{"path":"src/registry/components/media/media-library/hooks/use-selection.ts","content":"$57","type":"registry:component","target":"components/media-library/hooks/use-selection.ts"},{"path":"src/registry/components/media/media-library/hooks/use-text-content.ts","content":"$58","type":"registry:component","target":"components/media-library/hooks/use-text-content.ts"},{"path":"src/registry/components/media/media-library/hooks/use-upload.ts","content":"$59","type":"registry:component","target":"components/media-library/hooks/use-upload.ts"},{"path":"src/registry/components/media/media-library/lib/drag.ts","content":"$5a","type":"registry:component","target":"components/media-library/lib/drag.ts"},{"path":"src/registry/components/media/media-library/lib/filter-category.ts","content":"$5b","type":"registry:component","target":"components/media-library/lib/filter-category.ts"},{"path":"src/registry/components/media/media-library/lib/format.ts","content":"$5c","type":"registry:component","target":"components/media-library/lib/format.ts"},{"path":"src/registry/components/media/media-library/lib/preview-kind.ts","content":"$5d","type":"registry:component","target":"components/media-library/lib/preview-kind.ts"},{"path":"src/registry/components/media/media-library/parts/breadcrumbs.tsx","content":"$5e","type":"registry:component","target":"components/media-library/parts/breadcrumbs.tsx"},{"path":"src/registry/components/media/media-library/parts/context-menu.tsx","content":"$5f","type":"registry:component","target":"components/media-library/parts/context-menu.tsx"},{"path":"src/registry/components/media/media-library/parts/details-pane.tsx","content":"$60","type":"registry:component","target":"components/media-library/parts/details-pane.tsx"},{"path":"src/registry/components/media/media-library/parts/file-card.tsx","content":"$61","type":"registry:component","target":"components/media-library/parts/file-card.tsx"},{"path":"src/registry/components/media/media-library/parts/file-grid.tsx","content":"$62","type":"registry:component","target":"components/media-library/parts/file-grid.tsx"},{"path":"src/registry/components/media/media-library/parts/file-preview.tsx","content":"$63","type":"registry:component","target":"components/media-library/parts/file-preview.tsx"},{"path":"src/registry/components/media/media-library/parts/file-visuals.tsx","content":"$64","type":"registry:component","target":"components/media-library/parts/file-visuals.tsx"},{"path":"src/registry/components/media/media-library/parts/folder-card.tsx","content":"$65","type":"registry:component","target":"components/media-library/parts/folder-card.tsx"},{"path":"src/registry/components/media/media-library/parts/folder-row.tsx","content":"$66","type":"registry:component","target":"components/media-library/parts/folder-row.tsx"},{"path":"src/registry/components/media/media-library/parts/library-toolbar.tsx","content":"$67","type":"registry:component","target":"components/media-library/parts/library-toolbar.tsx"},{"path":"src/registry/components/media/media-library/parts/media-library-root.tsx","content":"$68","type":"registry:component","target":"components/media-library/parts/media-library-root.tsx"},{"path":"src/registry/components/media/media-library/parts/preview-lightbox.tsx","content":"$69","type":"registry:component","target":"components/media-library/parts/preview-lightbox.tsx"},{"path":"src/registry/components/media/media-library/parts/quota-bar.tsx","content":"$6a","type":"registry:component","target":"components/media-library/parts/quota-bar.tsx"},{"path":"src/registry/components/media/media-library/parts/rename-input.tsx","content":"$6b","type":"registry:component","target":"components/media-library/parts/rename-input.tsx"},{"path":"src/registry/components/media/media-library/parts/sidebar.tsx","content":"$6c","type":"registry:component","target":"components/media-library/parts/sidebar.tsx"},{"path":"src/registry/components/media/media-library/parts/type-filters.tsx","content":"$6d","type":"registry:component","target":"components/media-library/parts/type-filters.tsx"},{"path":"src/registry/components/media/media-library/parts/upload-overlay.tsx","content":"$6e","type":"registry:component","target":"components/media-library/parts/upload-overlay.tsx"},{"path":"src/registry/components/media/media-library/parts/upload-progress.tsx","content":"$6f","type":"registry:component","target":"components/media-library/parts/upload-progress.tsx"},{"path":"src/registry/components/media/media-library/parts/lazy-code-block.tsx","content":"// Local lazy-boundary wrapper for the CROSS-category code-block viewer.\n//\n// React.lazy can't reliably dynamic-import a cross-category procomp directly:\n// shadcn's path rewriter strips the category for STATIC `import` declarations\n// but NOT for (a) dynamic `import()` calls, nor (b) `export ... from` re-exports\n// (both consumer-smoke proven). So this file uses a plain `import` (which the\n// rewriter strips: `@/registry/components/code/...` → `@/components/code-block/...`)\n// plus a separate `export default`, and file-preview dynamic-imports THIS local\n// relative path (left untouched by the rewriter). Code-split preserved —\n// CodeMirror/shiki stay in this lazily-loaded chunk.\nimport { CodeBlock } from \"@/registry/components/code/code-block/code-block\";\n\nexport default CodeBlock;\n","type":"registry:component","target":"components/media-library/parts/lazy-code-block.tsx"},{"path":"src/registry/components/media/media-library/parts/lazy-markdown-editor.tsx","content":"// Local lazy-boundary wrapper for the CROSS-category markdown-editor viewer.\n// See lazy-code-block.tsx for why this indirection + the `import` (not\n// `export ... from`) form is required. `marked` + CodeMirror stay in this\n// lazily-loaded chunk.\nimport { MarkdownEditor } from \"@/registry/components/forms/markdown-editor/markdown-editor\";\n\nexport default MarkdownEditor;\n","type":"registry:component","target":"components/media-library/parts/lazy-markdown-editor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]