fauna-api 0.0.0-stage → 1.0.679

package/dist/src/ui/drive.js

@@ -0,0 +1,1243 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, useRef, forwardRef } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { Fauna } from "fauna-api";
+import gsap from "gsap";
+import { createHoveringElement, createTooltip } from "./hover.js";
+import { sendProgressToast } from "./toast.js";
+// ═══════════════════════════════════════════════════════════════════════════
+// Drive — the file explorer + file card, ported from the original imperative
+// widget to React. The public surface is unchanged: `createFileElement` and
+// `createFileExplorer` are still imperative factories that return a mountable
+// element + control handle, so nothing at the call sites (apps/fauna Drive tab,
+// apps/fauna /view/) has to change. Internally, `createFileExplorer` mounts a
+// React `FileExplorer` component (via a flushSync createRoot) that owns an
+// `ExplorerEngine` instance holding the DOM-building logic lifted verbatim from
+// the original widget, exposed through useImperativeHandle — the same bridge
+// pattern used by chat.tsx.
+// ═══════════════════════════════════════════════════════════════════════════
+// ─── MIME maps ─────────────────────────────────────────────────────────────
+// Content-type → extension is sourced from Marmot's public `/media/types`
+// route (the canonical `PARSABLE_CONTENT_TYPES` map) rather than hardcoded, so
+// there's a single server-owned source of truth. `getTypes()` is cached, so
+// hydration is cheap and idempotent; we flatten it into a synchronous lookup so
+// `createFileElement` (which builds DOM synchronously) can read it inline.
+const EXTENSION_CACHE = {
+    // Folders are a Drive-only virtual type, not a Marmot-parsable media type,
+    // so the server list never carries it — keep it seeded locally.
+    'application/x-directory': 'dir',
+};
+// Guard so the network fetch happens at most once regardless of how many cards
+// or explorers trigger it. `getTypes()` is itself cached, but this also avoids
+// spawning redundant in-flight promises.
+let extensionsHydration = null;
+function hydrateExtensions() {
+    if (!extensionsHydration) {
+        extensionsHydration = Fauna.Marmot.Media.getTypes().then((grouped) => {
+            for (const infos of Object.values(grouped)) {
+                for (const info of infos) {
+                    if (info.extensions[0])
+                        EXTENSION_CACHE[info.contentType] = info.extensions[0];
+                }
+            }
+        }).catch(() => {
+            // Let a later call retry; the filename-extension fallback covers the gap.
+            extensionsHydration = null;
+        });
+    }
+    return extensionsHydration;
+}
+// Resolve a display extension for a file. Prefers the server-sourced map, then
+// falls back to the filename's own extension, then a generic 'file' — so an
+// unmapped content type degrades gracefully instead of throwing. Also warms the
+// cache on first use so consumers that build cards without an ExplorerEngine
+// (e.g. previews) still converge to the canonical extension on re-render.
+function extensionFor(contentType, name) {
+    void hydrateExtensions();
+    return EXTENSION_CACHE[contentType]
+        ?? (name.includes('.') ? name.split('.').pop() : 'file');
+}
+// Material-symbol fallback per content type, shown when no thumbnail has been
+// painted onto the preview canvas yet (or the type doesn't have a meaningful
+// visual preview, e.g. folders, audio, generic text).
+export const MIME_TO_ICON = {
+    'application/x-directory': 'folder',
+    'application/pdf': 'picture_as_pdf',
+    'text/plain': 'description',
+    'text/markdown': 'article',
+    'application/json': 'data_object',
+    'text/csv': 'table_chart',
+    'text/html': 'code',
+    'application/xml': 'code',
+    'audio/mpeg': 'graphic_eq',
+    'audio/wav': 'graphic_eq',
+    'image/jpeg': 'image',
+    'image/png': 'image',
+    'image/webp': 'image',
+    'image/heic': 'image',
+    'image/heif': 'image',
+};
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+export function normalizePath(p) {
+    return p.replace(/\\/g, "/").replace(/^\/+/, "").replace(/\/{2,}/g, "/").replace(/\/$/, "");
+}
+// ─── File card (imperative DOM factory, ported verbatim) ───────────────────────
+export function createFileElement(file, options = {}) {
+    function clone(element) {
+        const clone = element.cloneNode(true);
+        clone.addEventListener('click', () => {
+            element.click();
+        });
+        return clone;
+    }
+    const view = options.view || 'list';
+    var element = document.createElement('div');
+    element.className = `file-${view}`;
+    const preview = document.createElement('canvas');
+    preview.className = `file-${view}-preview`;
+    const dpr = window.devicePixelRatio || 1;
+    const width = element.offsetWidth * dpr;
+    const height = element.offsetHeight * dpr;
+    preview.width = width;
+    preview.height = height;
+    element.appendChild(preview);
+    // Centred material-symbol icon shown over the preview canvas while nothing
+    // has been painted into it. Subsequent thumbnail rendering can hide this by
+    // adding the `drawn` class to the file element.
+    const previewIcon = document.createElement('div');
+    previewIcon.className = 'file-preview-icon';
+    const previewIconGlyph = document.createElement('span');
+    previewIconGlyph.className = 'material-symbols-outlined';
+    previewIconGlyph.textContent = MIME_TO_ICON[file.contentType] ?? 'draft';
+    previewIcon.appendChild(previewIconGlyph);
+    element.appendChild(previewIcon);
+    // Lazily fetch a server-generated thumbnail and paint it into the preview
+    // canvas as a small, contained "sheet" — like a little file resting inside
+    // the card — rather than a full-bleed cover image. Once painted, the `drawn`
+    // class fades out the fallback icon. The bitmap is cached so the
+    // ResizeObserver can cheaply repaint after the canvas backing store resizes.
+    let previewBitmap = null;
+    let previewRequested = false;
+    function drawBoxyImage(ctx, bitmap, x, y, w, h, dpr) {
+        ctx.save();
+        // The server renders text sheets on white and images on their own bg;
+        // fill white behind so any letterboxing reads as paper, not a hole.
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x, y, w, h);
+        // contain-fit inside the box
+        ctx.beginPath();
+        ctx.rect(x, y, w, h);
+        ctx.clip();
+        const scale = Math.min(w / bitmap.width, h / bitmap.height);
+        const dw = bitmap.width * scale;
+        const dh = bitmap.height * scale;
+        ctx.drawImage(bitmap, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
+        ctx.restore();
+        // Crisp 1px border so the file reads as a boxy sheet against the card.
+        ctx.save();
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.28)';
+        ctx.lineWidth = Math.max(1, Math.round(dpr));
+        ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+        ctx.restore();
+    }
+    function paintPreview() {
+        if (!previewBitmap)
+            return;
+        const ctx = preview.getContext('2d');
+        if (!ctx || preview.width === 0 || preview.height === 0)
+            return;
+        const cw = preview.width;
+        const ch = preview.height;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.clearRect(0, 0, cw, ch);
+        // Layout the sheet in the region above the footer, with even padding so
+        // the file "floats" inside the card. Footer is ~44px tall in CSS px.
+        const padX = 26 * dpr;
+        const padTop = 26 * dpr;
+        const footer = 52 * dpr;
+        const boxW = cw - padX * 2;
+        const boxH = ch - padTop - footer;
+        if (boxW <= 0 || boxH <= 0)
+            return;
+        // Fit the sheet to the source aspect ratio within the available box so a
+        // portrait doc stays portrait and a wide image stays wide.
+        const iw = previewBitmap.width;
+        const ih = previewBitmap.height;
+        const fit = Math.min(boxW / iw, boxH / ih);
+        const sheetW = iw * fit;
+        const sheetH = ih * fit;
+        const x = (cw - sheetW) / 2;
+        const y = padTop + (boxH - sheetH) / 2;
+        // Boxy sheet with a crisp border — no rounding, no shadow.
+        drawBoxyImage(ctx, previewBitmap, x, y, sheetW, sheetH, dpr);
+        element.classList.add('drawn');
+    }
+    async function requestPreview() {
+        if (previewRequested)
+            return;
+        // A freshly-wrapped file uploads asynchronously; requesting a preview
+        // before the bytes land server-side just 404s and would burn the
+        // one-shot flag. Skip until it's online — the upload's completion
+        // handler re-invokes this once the file exists.
+        //
+        // Exception: when `upload: false`, paint a local image preview from
+        // cached bytes (design / offline canvas use) instead of hitting the server.
+        if (!file.online && options.upload !== false)
+            return;
+        previewRequested = true;
+        try {
+            // Browsers generally can't paint HEIC via createImageBitmap — wait for
+            // the server WebP preview once the file is online.
+            const localImage = !file.online
+                && file.contentType.startsWith('image/')
+                && file.contentType !== 'image/heic'
+                && file.contentType !== 'image/heif';
+            if (localImage) {
+                const bytes = await file.download();
+                previewBitmap = await createImageBitmap(new Blob([new Uint8Array(bytes)], { type: file.contentType }));
+                paintPreview();
+                return;
+            }
+            if (!file.online)
+                return;
+            const bytes = await file.preview();
+            if (!bytes)
+                return;
+            previewBitmap = await createImageBitmap(new Blob([new Uint8Array(bytes)], { type: 'image/webp' }));
+            paintPreview();
+        }
+        catch (err) {
+            // Leave the fallback icon in place on any failure.
+        }
+    }
+    const previewViewport = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                previewViewport.disconnect();
+                void requestPreview();
+            }
+        }
+    }, { rootMargin: '200px' });
+    previewViewport.observe(element);
+    const details = document.createElement('div');
+    details.className = `file-${view}-details`;
+    element.appendChild(details);
+    const label = document.createElement('div');
+    label.className = `file-${view}-label`;
+    details.appendChild(label);
+    const name = document.createElement('input');
+    name.type = 'text';
+    name.placeholder = 'Untitled';
+    name.value = file.name;
+    name.readOnly = true;
+    label.appendChild(name);
+    const type = document.createElement('span');
+    type.innerHTML = extensionFor(file.contentType, file.name).toUpperCase();
+    label.appendChild(type);
+    const opts = document.createElement('div');
+    opts.className = `file-${view}-options`;
+    details.appendChild(opts);
+    if (options.remove || options.remove === undefined) {
+        const remove = document.createElement('span');
+        remove.className = 'material-symbols-outlined';
+        remove.innerHTML = 'delete';
+        opts.appendChild(remove);
+        createTooltip(remove, file.contentType === 'application/x-directory' ? 'Delete folder' : 'Delete file');
+        remove.onclick = () => {
+            if (options.onRemove) {
+                options.onRemove();
+                return;
+            }
+            file.remove();
+            gsap.to(element, {
+                duration: 0.3,
+                opacity: 0,
+                display: 'none',
+                ease: 'power2.inOut',
+                onComplete: () => {
+                    element.remove();
+                }
+            });
+        };
+    }
+    if (options.rename || options.rename === undefined) {
+        const rename = document.createElement('span');
+        rename.className = 'material-symbols-outlined';
+        rename.innerHTML = 'edit';
+        opts.appendChild(rename);
+        createTooltip(rename, 'Rename');
+        rename.onclick = () => {
+            if (!('path' in file.authorization)) {
+                throw new Error('401: Unauthorized request.');
+            }
+            name.readOnly = false;
+            name.focus();
+            name.select();
+            const commit = async () => {
+                if (!('path' in file.authorization)) {
+                    throw new Error('401: Unauthorized request.');
+                }
+                name.readOnly = true;
+                const nextName = name.value.trim();
+                if (!nextName || nextName === file.name) {
+                    name.value = file.name;
+                    return;
+                }
+                const oldPath = normalizePath(file.authorization.path);
+                const split = oldPath.split('/');
+                split.pop();
+                const parent = split.join('/');
+                const newPath = (parent ? parent + '/' : '') + nextName + (file.contentType === 'application/x-directory' ? '/' : '');
+                try {
+                    const toast = sendProgressToast(`Renaming ${file.name}...`);
+                    toast.setProgress(0.1);
+                    element.style.pointerEvents = 'none';
+                    await file.copy(newPath);
+                    toast.setProgress(0.7);
+                    const newFile = await Fauna.Drive.pull({
+                        authorization: file.authorization.authorization,
+                        path: newPath,
+                        group: 'path' in file.authorization ? file.authorization.group : undefined
+                    });
+                    await file.remove();
+                    toast.setProgress(1);
+                    file = newFile;
+                    name.value = newFile.name;
+                    element.style.pointerEvents = 'auto';
+                }
+                catch (err) {
+                    name.value = file.name;
+                    throw err;
+                }
+            };
+            name.onblur = () => { void commit(); };
+            name.onkeydown = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    name.blur();
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    name.value = file.name;
+                    name.readOnly = true;
+                    name.blur();
+                }
+            };
+        };
+    }
+    if (options.download || options.download === undefined) {
+        const download = document.createElement('span');
+        download.className = 'material-symbols-outlined';
+        download.innerHTML = 'download';
+        opts.appendChild(download);
+        createTooltip(download, file.contentType === 'application/x-directory' ? 'Download as .zip' : 'Download');
+        download.onclick = async () => {
+            const toast = sendProgressToast(`Downloading ${file.name}...`);
+            const bytes = await file.download(true, (percent) => {
+                toast.setProgress(percent);
+            });
+            const blob = new Blob([new Uint8Array(bytes)], { type: file.contentType === 'application/x-directory' ? 'application/zip' : file.contentType });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = file.name + (file.contentType === 'application/x-directory' ? '.zip' : '');
+            a.click();
+            URL.revokeObjectURL(url);
+        };
+    }
+    if ((options.open || options.open === undefined) && (file.contentType !== 'application/x-directory' || options.onFolderOpen)) {
+        const open = document.createElement('span');
+        open.className = 'material-symbols-outlined';
+        open.innerHTML = 'open_in_new';
+        opts.appendChild(open);
+        createTooltip(open, file.contentType === 'application/x-directory' ? 'Open folder' : 'Open');
+        open.onclick = () => {
+            if (file.contentType === 'application/x-directory' && options.onFolderOpen) {
+                options.onFolderOpen();
+            }
+            else if (options.onOpen) {
+                options.onOpen();
+            }
+            else if (!('repository' in file.authorization)) {
+                if (!('path' in file.authorization)) {
+                    throw new Error('401: Unauthorized request.');
+                }
+                window.location.href = `/view/?path=${encodeURIComponent(file.authorization.path)}`;
+            }
+        };
+    }
+    if (options.share || options.share === undefined) {
+        const share = document.createElement('span');
+        share.className = 'material-symbols-outlined';
+        share.innerHTML = 'public';
+        opts.appendChild(share);
+        createTooltip(share, 'Share a public link');
+        share.onclick = async () => {
+            const accessCode = await file.generateAccessCode();
+            if (options.onShare) {
+                options.onShare(accessCode);
+            }
+            else {
+                window.location.href = `/view/?access-code=${accessCode}`;
+            }
+        };
+    }
+    if (options.remove || options.remove === undefined || options.rename || options.rename === undefined || options.download || options.download === undefined || options.open || options.open === undefined || options.share || options.share === undefined) {
+        const expand = document.createElement('span');
+        expand.className = 'material-symbols-outlined';
+        expand.dataset.role = 'expand';
+        expand.innerHTML = view === 'list' ? 'more_vert' : 'more_horiz';
+        opts.appendChild(expand);
+        createTooltip(expand, 'More actions');
+        createHoveringElement([...opts.children].filter((element) => element.dataset.role !== 'expand').map(clone), expand);
+    }
+    [...opts.children].forEach((element) => {
+        element.onmouseenter = () => {
+            gsap.to(element, {
+                duration: 0.3,
+                scale: 1.1,
+                rotate: -10,
+                ease: 'power2.inOut'
+            });
+        };
+        element.onmouseleave = () => {
+            gsap.to(element, {
+                duration: 0.3,
+                scale: 1,
+                rotate: 0,
+                ease: 'power2.inOut'
+            });
+        };
+    });
+    const isExpandGlyph = (el) => el.dataset.role === 'expand';
+    // Collapse the inline action rail behind a single "…" menu when the row is
+    // too narrow to comfortably fit the file name alongside every action. Cozy
+    // cards always collapse (their footer is tight); list rows collapse below a
+    // fixed width threshold. Keying purely off the row's own width (rather than
+    // the icons' measured widths) keeps this stable — hiding the icons doesn't
+    // change the row width, so the decision never oscillates.
+    const COLLAPSE_BELOW = 520;
+    let collapsed = null;
+    function resize() {
+        const rowWidth = element.getBoundingClientRect().width;
+        // A freshly-created, not-yet-laid-out row reports 0; don't commit a
+        // decision until we have a real measurement.
+        if (rowWidth === 0)
+            return;
+        const next = view === 'cozy' || rowWidth < COLLAPSE_BELOW;
+        if (next === collapsed)
+            return;
+        collapsed = next;
+        const actionIcons = [...opts.children].filter((el) => !isExpandGlyph(el));
+        const expandIcons = [...opts.children].filter(isExpandGlyph);
+        gsap.set(actionIcons, { display: next ? 'none' : 'flex' });
+        gsap.set(expandIcons, { display: next ? 'flex' : 'none' });
+    }
+    const observer = new ResizeObserver(() => {
+        const dpr = window.devicePixelRatio || 1;
+        preview.width = element.offsetWidth * dpr;
+        preview.height = element.offsetHeight * dpr;
+        resize();
+        paintPreview();
+    });
+    observer.observe(element);
+    requestAnimationFrame(resize);
+    const load = document.createElement('div');
+    load.className = 'file-load';
+    const progress = document.createElement('div');
+    progress.className = 'file-load-progress';
+    load.appendChild(progress);
+    details.appendChild(load);
+    const highlightTl = gsap.timeline({ paused: true });
+    highlightTl.to(element, {
+        duration: 0.3,
+        borderColor: getComputedStyle(document.body).getPropertyValue('--accent'),
+        ease: 'power2.inOut'
+    });
+    element.onmouseenter = () => {
+        highlightTl.play();
+    };
+    element.onmouseleave = () => {
+        highlightTl.reverse();
+    };
+    element.onclick = (ev) => {
+        const target = ev.target;
+        if (!target) {
+            return;
+        }
+        if (opts.contains(target)) {
+            return;
+        }
+        if (element.classList.contains('active')) {
+            element.classList.remove('active');
+        }
+        else {
+            element.classList.add('active');
+        }
+        if (options.onSelect) {
+            options.onSelect();
+        }
+    };
+    if (!file.online && options.upload !== false) {
+        file.upload((percent) => {
+            gsap.to(progress, {
+                duration: 0.1,
+                width: `${percent * 100}%`,
+                ease: 'linear'
+            });
+        }).then(() => {
+            gsap.to(load, {
+                duration: 0.5,
+                opacity: 0,
+                display: 'none',
+                ease: 'power2.inOut'
+            });
+            // Now that the bytes exist server-side, pull the generated preview.
+            void requestPreview();
+        });
+    }
+    else {
+        gsap.to(load, {
+            display: 'none'
+        });
+        // Offline + upload:false (or already online) — try preview immediately.
+        void requestPreview();
+    }
+    return {
+        getElement: () => element,
+        getFile: () => file,
+        isSelected: () => element.classList.contains('active')
+    };
+}
+// The imperative explorer logic, lifted verbatim from the original widget into
+// a class so the React `FileExplorer` component can own its lifecycle (build in
+// a layout effect, tear down on unmount) and expose it via useImperativeHandle.
+class ExplorerEngine {
+    constructor(authorization, options) {
+        Object.defineProperty(this, "authorization", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentPath", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentView", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "files", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "clipboard", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "loadGeneration", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "loading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "wantedPath", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "destroyed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "toolbar", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "breadcrumbs", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "viewListBtn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "viewCozyBtn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "copyBtn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pasteBtn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "body", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "loadingEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "emptyEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "listEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dropzone", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => { }
+        });
+        this.authorization = authorization;
+        this.options = authorization.repository
+            ? { ...options, rename: false, remove: false, copyPaste: false, onShare: undefined }
+            : options;
+        this.currentPath = authorization.path;
+        this.currentView = options.view ?? 'list';
+        // Warm the server-sourced content-type → extension map (cached, so this
+        // only hits the network once across the whole app). Fire-and-forget:
+        // cards rendered before it resolves fall back to the filename extension.
+        void hydrateExtensions();
+        // ── DOM ──
+        const root = document.createElement('div');
+        root.className = 'explorer-root';
+        this.root = root;
+        const toolbar = document.createElement('div');
+        toolbar.className = 'explorer-toolbar';
+        this.toolbar = toolbar;
+        const breadcrumbs = document.createElement('div');
+        breadcrumbs.className = 'explorer-breadcrumbs';
+        this.breadcrumbs = breadcrumbs;
+        if (options.navigate) {
+            toolbar.appendChild(breadcrumbs);
+        }
+        // Right column of the toolbar — stacks view switches above the file
+        // actions.
+        const actionsCol = document.createElement('div');
+        actionsCol.className = 'explorer-actions-col';
+        const viewSwitch = document.createElement('div');
+        viewSwitch.className = 'explorer-view-switch';
+        const viewListBtn = this.createActionIcon('view_list');
+        createTooltip(viewListBtn, 'List view');
+        if (this.currentView === 'list')
+            viewListBtn.classList.add('active');
+        viewSwitch.appendChild(viewListBtn);
+        this.viewListBtn = viewListBtn;
+        const viewCozyBtn = this.createActionIcon('grid_view');
+        createTooltip(viewCozyBtn, 'Grid view');
+        if (this.currentView === 'cozy')
+            viewCozyBtn.classList.add('active');
+        viewSwitch.appendChild(viewCozyBtn);
+        this.viewCozyBtn = viewCozyBtn;
+        viewListBtn.onclick = () => { this.switchView('list'); this.options.onView?.('list'); };
+        viewCozyBtn.onclick = () => { this.switchView('cozy'); this.options.onView?.('cozy'); };
+        actionsCol.appendChild(viewSwitch);
+        const actions = document.createElement('div');
+        actions.className = 'explorer-actions';
+        if (options.upload) {
+            const uploadBtn = this.createActionIcon('upload_file');
+            createTooltip(uploadBtn, 'Upload files');
+            uploadBtn.onclick = () => this.openFilePicker();
+            actions.appendChild(uploadBtn);
+        }
+        if (options.createFolder) {
+            const folderBtn = this.createActionIcon('create_new_folder');
+            createTooltip(folderBtn, 'New folder');
+            folderBtn.onclick = () => this.createNewFolder();
+            actions.appendChild(folderBtn);
+        }
+        if (options.copyPaste) {
+            const copyBtn = this.createActionIcon('content_copy');
+            createTooltip(copyBtn, 'Copy selected');
+            copyBtn.style.opacity = '0.3';
+            copyBtn.style.pointerEvents = 'none';
+            copyBtn.onclick = () => {
+                this.clipboard = this.files.filter(f => f.selected).map(f => ({ file: f.file, path: f.path }));
+                if (this.clipboard.length > 0 && this.pasteBtn) {
+                    gsap.to(this.pasteBtn, { duration: 0.3, opacity: 1, ease: 'power2.out' });
+                    this.pasteBtn.style.pointerEvents = 'auto';
+                }
+            };
+            actions.appendChild(copyBtn);
+            this.copyBtn = copyBtn;
+            const pasteBtn = this.createActionIcon('content_paste');
+            createTooltip(pasteBtn, 'Paste');
+            pasteBtn.style.opacity = '0.3';
+            pasteBtn.style.pointerEvents = 'none';
+            pasteBtn.onclick = () => this.pasteFiles();
+            actions.appendChild(pasteBtn);
+            this.pasteBtn = pasteBtn;
+        }
+        actionsCol.appendChild(actions);
+        toolbar.appendChild(actionsCol);
+        root.appendChild(toolbar);
+        // Body
+        const body = document.createElement('div');
+        body.className = 'explorer-body';
+        this.body = body;
+        const loadingEl = document.createElement('div');
+        loadingEl.className = 'explorer-loading';
+        for (let i = 0; i < 4; i++) {
+            const skeleton = document.createElement('div');
+            skeleton.className = 'explorer-loading-skeleton';
+            loadingEl.appendChild(skeleton);
+        }
+        body.appendChild(loadingEl);
+        this.loadingEl = loadingEl;
+        const emptyEl = document.createElement('div');
+        emptyEl.className = 'explorer-empty';
+        emptyEl.style.display = 'none';
+        const emptyIcon = document.createElement('span');
+        emptyIcon.className = 'material-symbols-outlined';
+        emptyIcon.textContent = 'folder_open';
+        emptyEl.appendChild(emptyIcon);
+        const emptyText = document.createElement('div');
+        emptyText.textContent = 'No files';
+        emptyEl.appendChild(emptyText);
+        if (options.upload) {
+            const emptyHint = document.createElement('div');
+            emptyHint.className = 'explorer-empty-hint';
+            emptyHint.textContent = 'Drop files here or click upload';
+            emptyEl.appendChild(emptyHint);
+        }
+        body.appendChild(emptyEl);
+        this.emptyEl = emptyEl;
+        const listEl = document.createElement('div');
+        listEl.className = `explorer-list ${this.currentView === 'cozy' ? 'cozy' : ''}`;
+        body.appendChild(listEl);
+        this.listEl = listEl;
+        const dropzone = document.createElement('div');
+        dropzone.className = 'explorer-dropzone';
+        const dropIcon = document.createElement('span');
+        dropIcon.className = 'material-symbols-outlined';
+        dropIcon.textContent = 'upload_file';
+        dropzone.appendChild(dropIcon);
+        const dropText = document.createElement('span');
+        dropText.textContent = 'Drop to upload';
+        dropzone.appendChild(dropText);
+        body.appendChild(dropzone);
+        this.dropzone = dropzone;
+        root.appendChild(body);
+        // ── Drag-drop upload ──
+        if (options.upload) {
+            let dragCounter = 0;
+            body.addEventListener('dragenter', (e) => {
+                e.preventDefault();
+                dragCounter++;
+                if (dragCounter === 1) {
+                    dropzone.style.display = 'flex';
+                    gsap.fromTo(dropzone, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: 'power2.out' });
+                }
+            });
+            body.addEventListener('dragover', (e) => {
+                e.preventDefault();
+            });
+            body.addEventListener('dragleave', () => {
+                dragCounter--;
+                if (dragCounter <= 0) {
+                    dragCounter = 0;
+                    gsap.to(dropzone, { duration: 0.2, opacity: 0, ease: 'power2.in', onComplete: () => { dropzone.style.display = 'none'; } });
+                }
+            });
+            body.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dragCounter = 0;
+                gsap.to(dropzone, { duration: 0.2, opacity: 0, ease: 'power2.in', onComplete: () => { dropzone.style.display = 'none'; } });
+                const droppedFiles = e.dataTransfer?.files;
+                if (droppedFiles && droppedFiles.length > 0) {
+                    this.uploadNativeFiles(Array.from(droppedFiles));
+                }
+            });
+        }
+        // ── Initial load ──
+        this.load(this.currentPath);
+    }
+    createActionIcon(icon) {
+        const span = document.createElement('span');
+        span.className = 'material-symbols-outlined';
+        span.textContent = icon;
+        span.onmouseenter = () => { gsap.to(span, { duration: 0.3, scale: 1.1, rotate: -10, ease: 'power2.inOut' }); };
+        span.onmouseleave = () => { gsap.to(span, { duration: 0.3, scale: 1, rotate: 0, ease: 'power2.inOut' }); };
+        return span;
+    }
+    switchView(view) {
+        this.currentView = view;
+        this.viewListBtn.classList.toggle('active', view === 'list');
+        this.viewCozyBtn.classList.toggle('active', view === 'cozy');
+        this.listEl.classList.toggle('cozy', view === 'cozy');
+        // Rebuild file elements with new view
+        this.load(this.currentPath);
+    }
+    updateBreadcrumbs() {
+        if (!this.options.navigate)
+            return;
+        this.breadcrumbs.innerHTML = '';
+        const homeIcon = document.createElement('span');
+        homeIcon.className = 'material-symbols-outlined explorer-breadcrumb-home';
+        homeIcon.textContent = 'home';
+        homeIcon.onclick = () => this.load('');
+        this.breadcrumbs.appendChild(homeIcon);
+        const normalized = normalizePath(this.currentPath);
+        if (!normalized)
+            return;
+        const parts = normalized.split('/');
+        let accumulated = '';
+        for (let i = 0; i < parts.length; i++) {
+            const sep = document.createElement('span');
+            sep.className = 'explorer-breadcrumb-sep';
+            sep.textContent = '/';
+            this.breadcrumbs.appendChild(sep);
+            accumulated += parts[i] + '/';
+            const crumb = document.createElement('span');
+            crumb.className = 'explorer-breadcrumb';
+            crumb.textContent = parts[i];
+            const target = accumulated;
+            if (i < parts.length - 1) {
+                crumb.onclick = () => this.load(target);
+            }
+            else {
+                crumb.classList.add('current');
+            }
+            this.breadcrumbs.appendChild(crumb);
+        }
+        // Scroll breadcrumbs to end
+        this.breadcrumbs.scrollLeft = this.breadcrumbs.scrollWidth;
+    }
+    updateSelectionState() {
+        const selected = this.files.filter(f => f.selected).map(f => f.file);
+        if (this.copyBtn) {
+            const hasSelection = selected.length > 0;
+            gsap.to(this.copyBtn, { duration: 0.2, opacity: hasSelection ? 1 : 0.3, ease: 'power2.out' });
+            this.copyBtn.style.pointerEvents = hasSelection ? 'auto' : 'none';
+        }
+        this.options.onSelect?.(selected);
+    }
+    async load(path) {
+        if (this.loading)
+            return;
+        this.loadGeneration++;
+        const gen = this.loadGeneration;
+        this.loading = true;
+        this.currentPath = path;
+        // Show loading
+        this.listEl.innerHTML = '';
+        this.emptyEl.style.display = 'none';
+        this.loadingEl.style.display = 'flex';
+        gsap.fromTo(this.loadingEl, { opacity: 0 }, { opacity: 1, duration: 0.3 });
+        this.files = [];
+        this.updateBreadcrumbs();
+        this.options.onNavigate?.(path);
+        try {
+            const repository = this.authorization.repository;
+            const pulled = repository
+                ? [await repository.open(path)].flat().map((file) => ({ file, path: 'path' in file.authorization ? file.authorization.path : path }))
+                : await Promise.all((await Fauna.Drive.list(this.authorization.authorization, path, this.authorization.group)).map(async (p) => {
+                    try {
+                        // list() returns full paths, not relative
+                        const file = await Fauna.Drive.pull({
+                            authorization: this.authorization.authorization,
+                            path: p,
+                            group: this.authorization.group
+                        });
+                        return { file, path: p };
+                    }
+                    catch {
+                        return null;
+                    }
+                }));
+            if (gen !== this.loadGeneration)
+                return;
+            // Hide loading
+            this.loadingEl.style.display = 'none';
+            this.listEl.innerHTML = '';
+            this.files = [];
+            const validFiles = pulled.filter(Boolean);
+            if (validFiles.length === 0) {
+                this.emptyEl.style.display = 'flex';
+                gsap.from(this.emptyEl, { duration: 0.3, opacity: 0, ease: 'power2.out' });
+            }
+            else {
+                this.emptyEl.style.display = 'none';
+                for (let i = 0; i < validFiles.length; i++) {
+                    const { file, path: filePath } = validFiles[i];
+                    const isFolder = file.contentType === 'application/x-directory';
+                    const fileEl = createFileElement(file, {
+                        view: this.currentView,
+                        remove: this.options.remove,
+                        rename: this.options.rename,
+                        download: this.options.download,
+                        open: isFolder ? !!this.options.navigate : !!this.options.onOpen,
+                        share: !!this.options.onShare,
+                        onShare: this.options.onShare ? (code) => this.options.onShare(fileEl.getFile(), code) : undefined,
+                        onFolderOpen: isFolder && this.options.navigate ? () => {
+                            const auth = fileEl.getFile().authorization;
+                            const livePath = 'path' in auth ? auth.path : filePath;
+                            this.load(livePath.endsWith('/') ? livePath : livePath + '/');
+                        } : undefined,
+                        onOpen: !isFolder && this.options.onOpen ? () => {
+                            const auth = fileEl.getFile().authorization;
+                            const livePath = 'path' in auth ? auth.path : filePath;
+                            this.options.onOpen(fileEl.getFile(), livePath);
+                        } : undefined,
+                        onSelect: () => {
+                            const entry = this.files.find(f => f.file === file);
+                            if (entry) {
+                                entry.selected = fileEl.isSelected();
+                                this.updateSelectionState();
+                            }
+                        }
+                    });
+                    const element = fileEl.getElement();
+                    // Double-click: folders navigate, files open
+                    if (isFolder && this.options.navigate) {
+                        element.addEventListener('dblclick', (e) => {
+                            e.stopPropagation();
+                            const auth = fileEl.getFile().authorization;
+                            const livePath = 'path' in auth ? auth.path : filePath;
+                            this.load(livePath.endsWith('/') ? livePath : livePath + '/');
+                        });
+                    }
+                    else if (!isFolder && this.options.onOpen) {
+                        element.addEventListener('dblclick', (e) => {
+                            e.stopPropagation();
+                            const auth = fileEl.getFile().authorization;
+                            const livePath = 'path' in auth ? auth.path : filePath;
+                            this.options.onOpen(fileEl.getFile(), livePath);
+                        });
+                    }
+                    this.files.push({ file, path: filePath, element, selected: false });
+                    this.listEl.appendChild(element);
+                    gsap.from(element, { duration: 0.3, opacity: 0, y: 10, ease: 'power2.out', delay: i * 0.04 });
+                }
+            }
+        }
+        catch (err) {
+            if (gen !== this.loadGeneration)
+                return;
+            this.loadingEl.style.display = 'none';
+            this.emptyEl.style.display = 'none';
+            const errorEl = document.createElement('div');
+            errorEl.className = 'explorer-empty';
+            errorEl.style.color = 'var(--error, #DC322F)';
+            const errorIcon = document.createElement('span');
+            errorIcon.className = 'material-symbols-outlined';
+            errorIcon.textContent = 'error';
+            errorEl.appendChild(errorIcon);
+            const errorText = document.createElement('div');
+            errorText.textContent = 'Failed to load files';
+            errorEl.appendChild(errorText);
+            const retryBtn = document.createElement('div');
+            retryBtn.className = 'explorer-retry';
+            retryBtn.textContent = 'Retry';
+            retryBtn.onclick = () => {
+                errorEl.remove();
+                this.load(this.currentPath);
+            };
+            errorEl.appendChild(retryBtn);
+            this.listEl.appendChild(errorEl);
+            this.options.onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            if (gen === this.loadGeneration) {
+                this.loading = false;
+                const wanted = this.wantedPath;
+                this.wantedPath = null;
+                if (wanted !== null && wanted !== this.currentPath)
+                    void this.load(wanted);
+            }
+        }
+    }
+    openFilePicker() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        input.style.display = 'none';
+        input.addEventListener('change', () => {
+            if (input.files && input.files.length > 0) {
+                this.uploadNativeFiles(Array.from(input.files));
+            }
+        });
+        document.body.appendChild(input);
+        input.click();
+        input.remove();
+    }
+    async uploadNativeFiles(nativeFiles) {
+        const repository = this.authorization.repository;
+        if (repository && !this.currentPath.startsWith('/repository/')) {
+            this.options.onError?.(new Error('Uploads only go into /repository.'));
+            return;
+        }
+        for (const nativeFile of nativeFiles) {
+            try {
+                const filePath = this.currentPath + nativeFile.name;
+                const wrapped = await Fauna.Drive.wrap(repository
+                    ? { authorization: this.authorization.authorization, repository: repository.id, path: filePath, group: this.authorization.group }
+                    : { authorization: this.authorization.authorization, path: filePath, group: this.authorization.group }, nativeFile);
+                const fileEl = createFileElement(wrapped, {
+                    view: this.currentView,
+                    remove: this.options.remove,
+                    rename: this.options.rename,
+                    download: this.options.download,
+                    open: !!this.options.onOpen,
+                    share: !!this.options.onShare,
+                    onOpen: this.options.onOpen ? () => this.options.onOpen(wrapped, filePath) : undefined,
+                    onShare: this.options.onShare ? (code) => this.options.onShare(wrapped, code) : undefined
+                });
+                const element = fileEl.getElement();
+                this.files.push({ file: wrapped, path: filePath, element, selected: false });
+                this.listEl.prepend(element);
+                gsap.from(element, { duration: 0.3, opacity: 0, y: -10, ease: 'power2.out' });
+                // Hide empty state if showing
+                this.emptyEl.style.display = 'none';
+            }
+            catch (err) {
+                this.options.onError?.(err instanceof Error ? err : new Error(String(err)));
+            }
+        }
+    }
+    async createNewFolder() {
+        // Find unique name
+        const existingNames = this.files.map(f => f.file.name);
+        let name = 'Untitled';
+        let counter = 0;
+        while (existingNames.includes(name)) {
+            counter++;
+            name = `Untitled-${counter}`;
+        }
+        const repository = this.authorization.repository;
+        if (repository && !this.currentPath.startsWith('/repository/')) {
+            this.options.onError?.(new Error('Folders can only be created in /repository.'));
+            return;
+        }
+        try {
+            const folderPath = this.currentPath + name + '/';
+            const folderFile = await Fauna.Drive.folder(repository
+                ? { authorization: this.authorization.authorization, repository: repository.id, path: folderPath, group: this.authorization.group }
+                : { authorization: this.authorization.authorization, path: folderPath, group: this.authorization.group });
+            const fileEl = createFileElement(folderFile, {
+                view: this.currentView,
+                remove: this.options.remove,
+                rename: this.options.rename,
+                download: this.options.download,
+                open: !!this.options.navigate,
+                share: !!this.options.onShare,
+                onShare: this.options.onShare ? (code) => this.options.onShare(folderFile, code) : undefined,
+                onFolderOpen: this.options.navigate ? () => {
+                    const auth = fileEl.getFile().authorization;
+                    const livePath = 'path' in auth ? auth.path : folderPath;
+                    this.load(livePath.endsWith('/') ? livePath : livePath + '/');
+                } : undefined
+            });
+            const element = fileEl.getElement();
+            this.files.push({ file: folderFile, path: folderPath, element, selected: false });
+            this.listEl.prepend(element);
+            gsap.from(element, { duration: 0.3, opacity: 0, y: -10, ease: 'power2.out' });
+            this.emptyEl.style.display = 'none';
+        }
+        catch (err) {
+            this.options.onError?.(err instanceof Error ? err : new Error(String(err)));
+        }
+    }
+    async pasteFiles() {
+        if (this.clipboard.length === 0)
+            return;
+        for (const item of this.clipboard) {
+            try {
+                const newPath = this.currentPath + item.file.name + (item.file.contentType === 'application/x-directory' ? '/' : '');
+                await item.file.copy(newPath);
+                const newFile = await Fauna.Drive.pull({
+                    authorization: this.authorization.authorization,
+                    path: newPath,
+                    group: this.authorization.group
+                });
+                const isFolder = newFile.contentType === 'application/x-directory';
+                const fileEl = createFileElement(newFile, {
+                    view: this.currentView,
+                    remove: this.options.remove,
+                    rename: this.options.rename,
+                    download: this.options.download,
+                    open: isFolder ? !!this.options.navigate : !!this.options.onOpen,
+                    share: !!this.options.onShare,
+                    onShare: this.options.onShare ? (code) => this.options.onShare(newFile, code) : undefined,
+                    onFolderOpen: isFolder && this.options.navigate
+                        ? () => {
+                            const auth = fileEl.getFile().authorization;
+                            const livePath = 'path' in auth ? auth.path : newPath;
+                            this.load(livePath.endsWith('/') ? livePath : livePath + '/');
+                        }
+                        : undefined,
+                    onOpen: !isFolder && this.options.onOpen ? () => this.options.onOpen(newFile, newPath) : undefined
+                });
+                const element = fileEl.getElement();
+                this.files.push({ file: newFile, path: newPath, element, selected: false });
+                this.listEl.prepend(element);
+                gsap.from(element, { duration: 0.3, opacity: 0, y: -10, ease: 'power2.out' });
+                this.emptyEl.style.display = 'none';
+            }
+            catch (err) {
+                this.options.onError?.(err instanceof Error ? err : new Error(String(err)));
+            }
+        }
+        this.clipboard = [];
+        if (this.pasteBtn) {
+            gsap.to(this.pasteBtn, { duration: 0.3, opacity: 0, ease: 'power2.in' });
+            this.pasteBtn.style.pointerEvents = 'none';
+        }
+    }
+    // ── Public API ──
+    getElement() {
+        return this.root;
+    }
+    getPath() {
+        return this.currentPath;
+    }
+    /** Go to a folder. One asked for while another loads goes next, instead of being dropped. */
+    async setPath(path) {
+        if (this.loading) {
+            this.wantedPath = path;
+            return;
+        }
+        await this.load(path);
+    }
+    async refresh() {
+        await this.load(this.currentPath);
+    }
+    getSelected() {
+        return this.files.filter(f => f.selected).map(f => f.file);
+    }
+    setView(view) {
+        this.switchView(view);
+    }
+    destroy() {
+        this.destroyed = true;
+        this.loadGeneration++;
+        this.root.remove();
+    }
+}
+// Owns an ExplorerEngine for its lifetime: builds it during the commit phase so
+// the engine's root exists synchronously by the time createFileExplorer()
+// returns (paired with the flushSync mount below), and tears it down on
+// unmount. The engine's root is appended into a host <div> ref.
+export const FileExplorer = forwardRef(function FileExplorer({ authorization, options }, ref) {
+    const hostRef = useRef(null);
+    const engineRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!hostRef.current)
+            return;
+        const engine = new ExplorerEngine(authorization, options);
+        engineRef.current = engine;
+        hostRef.current.appendChild(engine.getElement());
+        return () => {
+            engine.destroy();
+            engineRef.current = null;
+        };
+        // Authorization + options are read once at mount (matching the imperative
+        // widget's one-time configuration); consumers rebuild to change them.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useImperativeHandle(ref, () => ({
+        getElement: () => engineRef.current?.getElement() ?? hostRef.current,
+        getPath: () => engineRef.current?.getPath() ?? authorization.path,
+        setPath: (path) => engineRef.current?.setPath(path) ?? Promise.resolve(),
+        refresh: () => engineRef.current?.refresh() ?? Promise.resolve(),
+        getSelected: () => engineRef.current?.getSelected() ?? [],
+        setView: (view) => engineRef.current?.setView(view),
+        destroy: () => engineRef.current?.destroy(),
+    }), []);
+    return _jsx("div", { className: "explorer-mount", ref: hostRef, style: { display: 'contents' } });
+});
+export function createFileExplorer(authorization, options = {}) {
+    // Host element the React root mounts into. Because <FileExplorer> uses
+    // display:contents and appends the engine root as its own child, this host
+    // is effectively transparent — getElement() returns the engine root, so
+    // consumers that query `.explorer-toolbar` off the returned element (e.g.
+    // the Drive tab's scope-selector injection) work unchanged.
+    const container = document.createElement('div');
+    container.style.display = 'contents';
+    const root = createRoot(container);
+    let instance = null;
+    const ready = [];
+    const handleRef = (inst) => {
+        instance = inst;
+        if (inst)
+            ready.push(inst);
+    };
+    // React 19's createRoot().render() is asynchronous by default; flushSync
+    // forces a synchronous commit + layout effects so the engine (built in a
+    // useLayoutEffect) is live before this function returns.
+    flushSync(() => root.render(_jsx(FileExplorer, { ref: handleRef, authorization: authorization, options: options })));
+    const get = () => instance ?? ready[ready.length - 1] ?? null;
+    return {
+        getElement: () => get()?.getElement() ?? container,
+        getPath: () => get()?.getPath() ?? authorization.path,
+        setPath: (path) => get()?.setPath(path) ?? Promise.resolve(),
+        refresh: () => get()?.refresh() ?? Promise.resolve(),
+        getSelected: () => get()?.getSelected() ?? [],
+        setView: (view) => get()?.setView(view),
+    };
+}