@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

package/dist/src/frontend/file-directory.js

@@ -0,0 +1,744 @@
+// Reusable file-directory explorer component (browser client).
+//
+// One framework-free component that browses the unified virtual directory —
+// /files, /temp, /raws — as a real folder tree, with a per-row "…" menu
+// (Copy Path / Attach / View / Preview), default-click = Copy Path, folder
+// Open, multi-file + folder select, and unified search (semantic + substring +
+// absolute-path). It talks to the /me/directory[/search] endpoints and returns
+// the one canonical DirectoryItem shape from every backend.
+//
+// It's a COMPONENT, not a one-off: mount it anywhere with
+// `window.__vidfarmDirectory.mount(el, opts)`, or drop a `<div data-rk-directory>`
+// and it auto-mounts. The chat dock hosts it in "attach" mode; /library/raws
+// hosts the same code in "standalone" mode scoped to /raws — no duplication.
+//
+// Host coupling (chat dock chips / preview modal) is passed IN via opts
+// callbacks, or, for the auto-mounted dock instance, read from a
+// `window.__rkDirectoryHost` hook the dock's inline script sets synchronously
+// before this deferred module runs.
+import { buildDirectoryPath, DIRECTORY_ROOTS, normalizeFolderPath, parseDirectoryPath } from "../services/file-directory.js";
+const DEFAULT_API_BASE = "/api/v1/user/me";
+// ── small DOM helpers ────────────────────────────────────────────────────────
+function el(tag, cls, text) {
+    const node = document.createElement(tag);
+    if (cls)
+        node.className = cls;
+    if (text != null)
+        node.textContent = text;
+    return node;
+}
+function fmtBytes(b) {
+    if (!b || b <= 0)
+        return "";
+    const u = ["B", "KB", "MB", "GB"];
+    let v = b, i = 0;
+    while (v >= 1024 && i < u.length - 1) {
+        v /= 1024;
+        i++;
+    }
+    return (v >= 10 || i === 0 ? Math.round(v) : v.toFixed(1)) + " " + u[i];
+}
+function fmtDur(s) {
+    if (typeof s !== "number" || !(s > 0))
+        return "";
+    s = Math.round(s);
+    const m = Math.floor(s / 60), r = s % 60;
+    return m + ":" + (r < 10 ? "0" + r : r);
+}
+function iconFor(it) {
+    const ic = el("span", "rk-aichat-fic " + (it.kind === "folder" ? "rk-aichat-fic-folder" : "rk-aichat-fic-file"));
+    if (it.kind === "folder") {
+        ic.textContent = "/";
+        return ic;
+    }
+    if (it.thumbUrl) {
+        const t = el("img");
+        t.src = it.thumbUrl;
+        t.alt = "";
+        t.loading = "lazy";
+        ic.appendChild(t);
+        return ic;
+    }
+    const ct = it.contentType || "";
+    if (it.viewUrl && ct.indexOf("image/") === 0) {
+        const im = el("img");
+        im.src = it.viewUrl;
+        im.alt = "";
+        im.loading = "lazy";
+        ic.appendChild(im);
+        return ic;
+    }
+    if (it.viewUrl && ct.indexOf("video/") === 0) {
+        const v = el("video");
+        v.src = it.viewUrl;
+        v.muted = true;
+        v.playsInline = true;
+        ic.appendChild(v);
+        return ic;
+    }
+    ic.textContent = ((it.name.split(".").pop() || it.name.slice(0, 1)) || "?").slice(0, 3).toUpperCase();
+    return ic;
+}
+// ── shared floating layers (toast + open kebab menu) ─────────────────────────
+let toastTimer;
+function showToast(msg) {
+    let t = document.getElementById("rk-dir-toast");
+    if (!t) {
+        t = el("div");
+        t.id = "rk-dir-toast";
+        t.className = "rk-dir-toast";
+        document.body.appendChild(t);
+    }
+    t.textContent = msg;
+    t.classList.add("is-on");
+    if (toastTimer)
+        window.clearTimeout(toastTimer);
+    toastTimer = window.setTimeout(() => t && t.classList.remove("is-on"), 1800);
+}
+function copyToClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText)
+        return navigator.clipboard.writeText(text);
+    return new Promise((resolve, reject) => {
+        try {
+            const ta = el("textarea");
+            ta.value = text;
+            ta.style.position = "fixed";
+            ta.style.opacity = "0";
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand("copy");
+            document.body.removeChild(ta);
+            resolve();
+        }
+        catch (e) {
+            reject(e);
+        }
+    });
+}
+let closeOpenMenu = null;
+function openMenuAt(anchor, actions) {
+    if (closeOpenMenu)
+        closeOpenMenu();
+    const menu = el("div", "rk-dir-menu");
+    actions.forEach((a) => {
+        const b = el("button", "rk-dir-menuitem" + (a.danger ? " is-danger" : ""), a.label);
+        b.type = "button";
+        b.addEventListener("click", (e) => { e.stopPropagation(); close(); a.run(); });
+        menu.appendChild(b);
+    });
+    document.body.appendChild(menu);
+    const r = anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
+    // Prefer below-right of the anchor; flip up/left if it would overflow.
+    const mw = menu.offsetWidth, mh = menu.offsetHeight;
+    let top = r.bottom + 4, left = r.right - mw;
+    if (left < 8)
+        left = r.left;
+    if (top + mh > window.innerHeight - 8)
+        top = Math.max(8, r.top - mh - 4);
+    menu.style.top = top + "px";
+    menu.style.left = Math.max(8, left) + "px";
+    function close() {
+        menu.remove();
+        document.removeEventListener("click", onDoc, true);
+        document.removeEventListener("keydown", onKey, true);
+        window.removeEventListener("scroll", close, true);
+        if (closeOpenMenu === close)
+            closeOpenMenu = null;
+    }
+    function onDoc(e) { if (!menu.contains(e.target))
+        close(); }
+    function onKey(e) { if (e.key === "Escape")
+        close(); }
+    setTimeout(() => {
+        document.addEventListener("click", onDoc, true);
+        document.addEventListener("keydown", onKey, true);
+        window.addEventListener("scroll", close, true);
+    }, 0);
+    closeOpenMenu = close;
+}
+// ── the explorer ─────────────────────────────────────────────────────────────
+export function createDirectoryExplorer(mount, opts = {}) {
+    const apiBase = opts.apiBase || DEFAULT_API_BASE;
+    const roots = (opts.roots && opts.roots.length ? opts.roots : ["files", "temp", "raws"]);
+    const singleRoot = roots.length === 1 ? roots[0] : null;
+    const mode = opts.mode || "attach";
+    const showSearch = opts.showSearch !== false;
+    const showMultiSelect = opts.showMultiSelect !== false;
+    const showUpload = opts.showUpload != null ? opts.showUpload : mode === "attach";
+    const primaryClick = opts.primaryClick || "copyPath";
+    const host = window.__rkDirectoryHost || {};
+    const emitAttach = (items) => (opts.onAttach || host.onAttach || (() => showToast("Attached " + items.length + " item(s)")))(items);
+    const emitPreview = (items, i) => {
+        const cb = opts.onPreview || host.onPreview;
+        if (cb)
+            cb(items, i);
+        else if (items[i] && items[i].viewUrl)
+            window.open(items[i].viewUrl, "_blank", "noopener");
+    };
+    const toast = (msg) => (opts.onToast || host.onToast || showToast)(msg);
+    const copyPath = (p) => copyToClipboard(p).then(() => toast("Copied " + p)).catch(() => toast("Couldn't copy path"));
+    // ── state ──
+    let currentPath = normalizeInitial(opts.initialPath, singleRoot);
+    let status = "idle";
+    let folders = [];
+    let files = [];
+    let nextOffset = null;
+    let loadingMore = false;
+    const selection = new Map();
+    let searchMode = false;
+    let searchResults = [];
+    let searchStatus = "idle";
+    let destroyed = false;
+    function normalizeInitial(p, single) {
+        const parsed = parseDirectoryPath(p || "");
+        if (parsed.root)
+            return buildDirectoryPath(parsed.root, parsed.folderPath);
+        return single ? "/" + single : "/";
+    }
+    // ── scaffold ──
+    mount.classList.add("rk-dir");
+    mount.innerHTML = "";
+    const searchWrap = el("div", "rk-dir-search");
+    const searchInput = el("input", "rk-dir-search-input");
+    searchInput.type = "search";
+    searchInput.placeholder = "Search files — meaning, name, or path…";
+    searchWrap.appendChild(searchInput);
+    const crumbsEl = el("div", "rk-aichat-crumbs rk-dir-crumbs");
+    const selbar = el("div", "rk-dir-selbar");
+    selbar.hidden = true;
+    const bodyEl = el("div", "rk-aichat-files-body rk-dir-body");
+    const dropEl = el("label", "rk-aichat-drop rk-dir-drop");
+    dropEl.hidden = true;
+    const dropText = el("span", "rk-aichat-drop-text", "Drop files here");
+    const dropInput = el("input");
+    dropInput.type = "file";
+    dropInput.multiple = true;
+    dropInput.hidden = true;
+    dropEl.appendChild(dropText);
+    dropEl.appendChild(dropInput);
+    if (showSearch)
+        mount.appendChild(searchWrap);
+    mount.appendChild(crumbsEl);
+    if (showMultiSelect)
+        mount.appendChild(selbar);
+    mount.appendChild(bodyEl);
+    if (showUpload)
+        mount.appendChild(dropEl);
+    // ── fetch ──
+    function dirUrl(path, offset) {
+        const u = new URL(apiBase + "/directory", window.location.href);
+        u.searchParams.set("path", path);
+        if (offset)
+            u.searchParams.set("offset", String(offset));
+        return u.toString();
+    }
+    function load(force) {
+        if (destroyed)
+            return;
+        if (!force && status === "ready") {
+            render();
+            return;
+        }
+        status = "loading";
+        render();
+        fetch(dirUrl(currentPath), { credentials: "same-origin", headers: { accept: "application/json" } })
+            .then((r) => {
+            if (r.status === 401 || r.status === 403) {
+                status = "auth";
+                return null;
+            }
+            if (!r.ok)
+                throw new Error("http " + r.status);
+            return r.json();
+        })
+            .then((j) => {
+            if (destroyed)
+                return;
+            if (!j) {
+                render();
+                return;
+            }
+            folders = filterRoots(j.folders || []);
+            files = j.files || [];
+            nextOffset = typeof j.next_offset === "number" ? j.next_offset : null;
+            status = "ready";
+            render();
+        })
+            .catch(() => { if (!destroyed) {
+            status = "error";
+            render();
+        } });
+    }
+    // At the virtual root with a roots subset, hide roots we weren't asked to show.
+    function filterRoots(list) {
+        if (currentPath !== "/")
+            return list;
+        return list.filter((f) => roots.indexOf(f.root) !== -1);
+    }
+    function loadMore() {
+        if (nextOffset == null || loadingMore)
+            return;
+        loadingMore = true;
+        render();
+        fetch(dirUrl(currentPath, nextOffset), { credentials: "same-origin", headers: { accept: "application/json" } })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((j) => {
+            loadingMore = false;
+            if (destroyed || !j) {
+                render();
+                return;
+            }
+            files = files.concat(j.files || []);
+            nextOffset = typeof j.next_offset === "number" ? j.next_offset : null;
+            render();
+        })
+            .catch(() => { loadingMore = false; render(); });
+    }
+    // ── search ──
+    let searchDebounce;
+    function onSearchInput() {
+        const q = searchInput.value.trim();
+        if (searchDebounce)
+            window.clearTimeout(searchDebounce);
+        if (!q) {
+            searchMode = false;
+            searchResults = [];
+            render();
+            return;
+        }
+        searchDebounce = window.setTimeout(() => runSearch(q), 260);
+    }
+    function runSearch(q) {
+        searchMode = true;
+        searchStatus = "loading";
+        render();
+        const scope = singleRoot ? "/" + singleRoot : (currentPath !== "/" ? currentPath : "");
+        fetch(apiBase + "/directory/search", {
+            method: "POST",
+            credentials: "same-origin",
+            headers: { "content-type": "application/json", accept: "application/json" },
+            body: JSON.stringify({ query: q, path: scope, mode: "auto", limit: 40 })
+        })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((j) => {
+            if (destroyed)
+                return;
+            searchResults = (j && j.results) || [];
+            searchStatus = "ready";
+            render();
+        })
+            .catch(() => { if (!destroyed) {
+            searchStatus = "error";
+            render();
+        } });
+    }
+    // ── navigation ──
+    function navigate(path) {
+        const parsed = parseDirectoryPath(path);
+        currentPath = parsed.root ? buildDirectoryPath(parsed.root, parsed.folderPath) : "/";
+        status = "idle";
+        searchMode = false;
+        searchInput.value = "";
+        load(true);
+    }
+    function currentRoot() { return parseDirectoryPath(currentPath).root; }
+    function currentFolder() { return parseDirectoryPath(currentPath).folderPath; }
+    // Create an empty folder under `parentFolder` (defaults to the current folder).
+    // Only valid inside a root — at the virtual root there's nowhere to put it.
+    function createFolder(parentFolder) {
+        const root = currentRoot();
+        if (!root) {
+            toast("Open a root (/files, /temp, /raws) first");
+            return;
+        }
+        const name = (window.prompt("New folder name") || "").trim();
+        if (!name)
+            return;
+        const parent = normalizeFolderPath(parentFolder != null ? parentFolder : currentFolder());
+        const target = buildDirectoryPath(root, parent ? parent + "/" + name : name);
+        fetch(apiBase + "/directory/folders", {
+            method: "POST",
+            credentials: "same-origin",
+            headers: { "content-type": "application/json", accept: "application/json" },
+            body: JSON.stringify({ path: target })
+        })
+            .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(new Error(j.error || "http " + r.status)))))
+            .then((res) => { navigate(res.path || (root === currentRoot() ? currentPath : "/" + root)); toast("Created " + (res.path || name)); })
+            .catch((e) => toast(e.message || "Couldn't create folder"));
+    }
+    // ── selection ──
+    function toggleSelect(it, on) {
+        if (on)
+            selection.set(it.path, it);
+        else
+            selection.delete(it.path);
+        (opts.onSelectionChange || (() => { }))(Array.from(selection.values()));
+        renderSelbar();
+        // reflect checkbox state without full re-render churn
+        const row = bodyEl.querySelector('[data-path="' + cssEscape(it.path) + '"]');
+        if (row)
+            row.classList.toggle("is-selected", on);
+    }
+    function clearSelection() {
+        selection.clear();
+        (opts.onSelectionChange || (() => { }))([]);
+        render();
+    }
+    // ── rendering ──
+    function crumb(label, current, onClick) {
+        const b = el("button", "rk-aichat-crumb" + (current ? " is-current" : ""), label);
+        b.type = "button";
+        b.addEventListener("click", onClick);
+        return b;
+    }
+    function renderCrumbs() {
+        crumbsEl.innerHTML = "";
+        const root = currentRoot();
+        const folder = currentFolder();
+        if (!singleRoot) {
+            crumbsEl.appendChild(crumb("Files", currentPath === "/", () => navigate("/")));
+        }
+        if (!root)
+            return;
+        const rootLabel = (DIRECTORY_ROOTS.find((r) => r.key === root) || { label: root }).label;
+        if (!singleRoot)
+            crumbsEl.appendChild(sep());
+        crumbsEl.appendChild(crumb(rootLabel, !folder, () => navigate("/" + root)));
+        let acc = "";
+        folder.split("/").filter(Boolean).forEach((part, idx, arr) => {
+            crumbsEl.appendChild(sep());
+            acc = acc ? acc + "/" + part : part;
+            const target = "/" + root + "/" + acc;
+            crumbsEl.appendChild(crumb(part, idx === arr.length - 1, () => navigate(target)));
+        });
+        // Discoverable "New folder" affordance (right-click also works anywhere).
+        const nf = el("button", "rk-dir-newfolder", "+ Folder");
+        nf.type = "button";
+        nf.title = "New folder here (or right-click)";
+        nf.addEventListener("click", () => createFolder());
+        crumbsEl.appendChild(nf);
+    }
+    function sep() { return el("span", "rk-aichat-crumb-sep", "/"); }
+    function renderSelbar() {
+        if (!showMultiSelect)
+            return;
+        const n = selection.size;
+        selbar.hidden = n === 0;
+        if (n === 0)
+            return;
+        selbar.innerHTML = "";
+        selbar.appendChild(el("span", "rk-dir-selcount", n + " selected"));
+        if (mode === "attach") {
+            const att = el("button", "rk-dir-selbtn", "Attach");
+            att.type = "button";
+            att.addEventListener("click", () => { emitAttach(Array.from(selection.values())); clearSelection(); });
+            selbar.appendChild(att);
+        }
+        const cp = el("button", "rk-dir-selbtn", "Copy paths");
+        cp.type = "button";
+        cp.addEventListener("click", () => copyPath(Array.from(selection.values()).map((s) => s.path).join("\n")));
+        const clr = el("button", "rk-dir-selbtn is-ghost", "Clear");
+        clr.type = "button";
+        clr.addEventListener("click", clearSelection);
+        selbar.appendChild(cp);
+        selbar.appendChild(clr);
+    }
+    function checkbox(it) {
+        const box = el("input", "rk-dir-check");
+        box.type = "checkbox";
+        box.checked = selection.has(it.path);
+        box.setAttribute("aria-label", "Select " + it.name);
+        box.addEventListener("click", (e) => e.stopPropagation());
+        box.addEventListener("change", () => toggleSelect(it, box.checked));
+        return box;
+    }
+    function folderRowEl(it) {
+        const row = el("div", "rk-aichat-frow rk-dir-row" + (selection.has(it.path) ? " is-selected" : ""));
+        row.setAttribute("data-path", it.path);
+        if (showMultiSelect)
+            row.appendChild(checkbox(it));
+        // Name button: default click COPIES the (relative) folder path.
+        const b = el("button", "rk-aichat-fmainbtn");
+        b.type = "button";
+        b.title = "Copy path " + it.path;
+        b.appendChild(iconFor(it));
+        const main = el("span", "rk-aichat-fmain");
+        main.appendChild(el("span", "rk-aichat-fname", it.name));
+        const desc = it.meta && typeof it.meta.description === "string" ? it.meta.description : "";
+        main.appendChild(el("span", "rk-aichat-fmeta", desc || "folder"));
+        b.appendChild(main);
+        b.addEventListener("click", () => copyPath(it.path));
+        row.appendChild(b);
+        // Open button (the primary navigation affordance).
+        const open = el("button", "rk-aichat-fadd rk-dir-open", "Open ›");
+        open.type = "button";
+        open.title = "Open folder";
+        open.addEventListener("click", (e) => { e.stopPropagation(); navigate(it.path); });
+        row.appendChild(open);
+        // Kebab.
+        row.appendChild(kebab(it, [
+            { label: "Open folder", run: () => navigate(it.path) },
+            { label: "New subfolder", run: () => createFolder(it.folderPath) },
+            { label: "Copy path", run: () => copyPath(it.path) }
+        ]));
+        return row;
+    }
+    function fileRowEl(it, siblings, index, showPath) {
+        const row = el("div", "rk-aichat-frow rk-dir-row" + (selection.has(it.path) ? " is-selected" : ""));
+        row.setAttribute("data-path", it.path);
+        if (showMultiSelect)
+            row.appendChild(checkbox(it));
+        const b = el("button", "rk-aichat-fmainbtn");
+        b.type = "button";
+        const primaryLabel = primaryClick === "copyPath" ? "Copy path " : primaryClick === "attach" ? "Attach " : "Preview ";
+        b.title = primaryLabel + it.name;
+        b.appendChild(iconFor(it));
+        const main = el("span", "rk-aichat-fmain");
+        main.appendChild(el("span", "rk-aichat-fname", it.name));
+        const metaText = showPath ? it.path : (fmtDur(it.durationSec) || fmtBytes(it.sizeBytes) || it.contentType || "file");
+        main.appendChild(el("span", "rk-aichat-fmeta", metaText));
+        b.appendChild(main);
+        b.addEventListener("click", () => {
+            if (primaryClick === "attach")
+                emitAttach([it]);
+            else if (primaryClick === "preview")
+                emitPreview(siblings, index);
+            else
+                copyPath(it.path);
+        });
+        row.appendChild(b);
+        // Kebab: Attach / View / Preview / Copy path.
+        const actions = [];
+        if (mode === "attach")
+            actions.push({ label: "Attach", run: () => emitAttach([it]) });
+        if (it.viewUrl)
+            actions.push({ label: "View", run: () => window.open(it.viewUrl, "_blank", "noopener") });
+        if (it.viewUrl)
+            actions.push({ label: "Preview", run: () => emitPreview(siblings, index) });
+        actions.push({ label: "Copy path", run: () => copyPath(it.path) });
+        row.appendChild(kebab(it, actions));
+        return row;
+    }
+    function kebab(it, actions) {
+        void it;
+        const k = el("button", "rk-dir-kebab", "⋯");
+        k.type = "button";
+        k.setAttribute("aria-label", "More actions");
+        k.addEventListener("click", (e) => { e.stopPropagation(); openMenuAt(k, actions); });
+        return k;
+    }
+    function note(text, link, retry) {
+        const wrap = el("div", "rk-aichat-fstate");
+        wrap.appendChild(el("div", undefined, text));
+        if (link) {
+            const a = el("a");
+            a.href = link.href;
+            a.textContent = link.label;
+            wrap.appendChild(a);
+        }
+        if (retry) {
+            const btn = el("button", undefined, "Try again");
+            btn.type = "button";
+            btn.addEventListener("click", () => load(true));
+            wrap.appendChild(btn);
+        }
+        return wrap;
+    }
+    function render() {
+        if (destroyed)
+            return;
+        renderCrumbs();
+        renderSelbar();
+        updateDrop();
+        bodyEl.innerHTML = "";
+        if (searchMode) {
+            renderSearch();
+            return;
+        }
+        if (status === "loading" && !files.length && !folders.length) {
+            bodyEl.appendChild(note("Loading your files…"));
+            return;
+        }
+        if (status === "auth") {
+            bodyEl.appendChild(note("Sign in to browse your files.", { href: "/login", label: "Sign in" }));
+            return;
+        }
+        if (status === "error") {
+            bodyEl.appendChild(note("Couldn't reach your files.", undefined, true));
+            return;
+        }
+        if (!folders.length && !files.length) {
+            bodyEl.appendChild(note(currentPath === "/" ? "No files yet." : "This folder is empty."));
+            return;
+        }
+        folders.forEach((f) => bodyEl.appendChild(folderRowEl(f)));
+        files.forEach((f, i) => bodyEl.appendChild(fileRowEl(f, files, i)));
+        if (nextOffset != null) {
+            const more = el("button", "rk-aichat-loadmore", loadingMore ? "Loading…" : "Load more");
+            more.type = "button";
+            more.disabled = loadingMore;
+            more.addEventListener("click", loadMore);
+            bodyEl.appendChild(more);
+        }
+    }
+    function renderSearch() {
+        if (searchStatus === "loading" && !searchResults.length) {
+            bodyEl.appendChild(note("Searching…"));
+            return;
+        }
+        if (searchStatus === "error") {
+            bodyEl.appendChild(note("Search failed."));
+            return;
+        }
+        if (!searchResults.length) {
+            bodyEl.appendChild(note("No matches."));
+            return;
+        }
+        const fileHits = searchResults.filter((r) => r.kind !== "folder");
+        searchResults.forEach((r, i) => {
+            if (r.kind === "folder")
+                bodyEl.appendChild(folderRowEl(r));
+            else
+                bodyEl.appendChild(fileRowEl(r, fileHits, fileHits.indexOf(r), true));
+        });
+    }
+    // ── upload (attach hosts only; not for raws) ──
+    let uploading = false;
+    function uploadEndpoint() {
+        const root = currentRoot();
+        if (root === "files")
+            return apiBase + "/attachments/upload";
+        if (root === "temp")
+            return apiBase + "/temporary-files/upload";
+        return null; // raws are scanned/imported, not plain-uploaded
+    }
+    function updateDrop() {
+        if (!showUpload)
+            return;
+        const endpoint = uploadEndpoint();
+        dropEl.hidden = !endpoint || status === "auth";
+        if (!dropEl.hidden && !uploading) {
+            const folder = currentFolder();
+            const rootLabel = currentRoot() ? (DIRECTORY_ROOTS.find((r) => r.key === currentRoot()) || { label: "" }).label : "";
+            dropText.textContent = "Drop files into " + rootLabel + (folder ? " / " + folder : "");
+        }
+    }
+    function uploadFiles(list) {
+        const endpoint = uploadEndpoint();
+        if (!endpoint || uploading || !list || !list.length)
+            return;
+        uploading = true;
+        const folder = currentFolder();
+        const arr = Array.from(list);
+        let done = 0, failed = 0;
+        dropText.textContent = "Uploading " + arr.length + " file(s)…";
+        const next = (i) => {
+            if (i >= arr.length) {
+                uploading = false;
+                if (failed)
+                    toast(failed + " of " + arr.length + " failed");
+                load(true);
+                return;
+            }
+            const fd = new FormData();
+            fd.append("file", arr[i]);
+            fd.append("folder_path", folder);
+            fetch(endpoint, { method: "POST", credentials: "same-origin", body: fd })
+                .then((r) => { if (!r.ok)
+                throw new Error("http " + r.status); done++; })
+                .catch(() => { failed++; })
+                .then(() => next(i + 1));
+        };
+        next(0);
+    }
+    // ── right-click context menu: New folder anywhere, plus row actions ──
+    function findItem(path) {
+        return folders.concat(files, searchResults).find((it) => it.path === path);
+    }
+    bodyEl.addEventListener("contextmenu", (e) => {
+        const rootSet = !!currentRoot();
+        const rowEl = e.target.closest(".rk-dir-row");
+        const at = { top: e.clientY, bottom: e.clientY, left: e.clientX, right: e.clientX };
+        const actions = [];
+        const it = rowEl ? findItem(rowEl.getAttribute("data-path") || "") : undefined;
+        if (it && it.kind === "folder") {
+            actions.push({ label: "Open folder", run: () => navigate(it.path) });
+            if (rootSet)
+                actions.push({ label: "New subfolder", run: () => createFolder(it.folderPath) });
+            actions.push({ label: "Copy path", run: () => copyPath(it.path) });
+        }
+        else if (it) {
+            if (mode === "attach")
+                actions.push({ label: "Attach", run: () => emitAttach([it]) });
+            if (it.viewUrl)
+                actions.push({ label: "View", run: () => window.open(it.viewUrl, "_blank", "noopener") });
+            if (it.viewUrl)
+                actions.push({ label: "Preview", run: () => emitPreview(files, files.indexOf(it)) });
+            actions.push({ label: "Copy path", run: () => copyPath(it.path) });
+        }
+        // Always offer "New folder" in the current folder when inside a root.
+        if (rootSet)
+            actions.push({ label: "New folder here", run: () => createFolder() });
+        if (!actions.length)
+            return; // virtual root, empty space → let the browser menu show
+        e.preventDefault();
+        openMenuAt(at, actions);
+    });
+    // ── wire events ──
+    searchInput.addEventListener("input", onSearchInput);
+    dropEl.addEventListener("click", (e) => { if (e.target === dropEl || e.target === dropText)
+        dropInput.click(); });
+    dropInput.addEventListener("change", () => { uploadFiles(dropInput.files); dropInput.value = ""; });
+    dropEl.addEventListener("dragover", (e) => { e.preventDefault(); dropEl.classList.add("is-drag"); });
+    dropEl.addEventListener("dragleave", (e) => { if (e.target === dropEl)
+        dropEl.classList.remove("is-drag"); });
+    dropEl.addEventListener("drop", (e) => {
+        e.preventDefault();
+        dropEl.classList.remove("is-drag");
+        if (e.dataTransfer && e.dataTransfer.files)
+            uploadFiles(e.dataTransfer.files);
+    });
+    load(true);
+    return {
+        refresh: () => load(true),
+        navigate,
+        getSelection: () => Array.from(selection.values()),
+        destroy: () => { destroyed = true; if (closeOpenMenu)
+            closeOpenMenu(); mount.innerHTML = ""; }
+    };
+}
+function cssEscape(s) {
+    if (window.CSS && window.CSS.escape)
+        return window.CSS.escape(s);
+    return s.replace(/["\\]/g, "\\$&");
+}
+// ── auto-mount + global bridge ───────────────────────────────────────────────
+function readDataOpts(node) {
+    const d = node.dataset;
+    const rootsAttr = (d.roots || "").split(",").map((s) => s.trim()).filter(Boolean);
+    return {
+        roots: rootsAttr.length ? rootsAttr : undefined,
+        initialPath: d.initialPath || undefined,
+        mode: d.mode === "standalone" ? "standalone" : "attach",
+        showSearch: d.showSearch !== "false",
+        showMultiSelect: d.showMultiselect !== "false",
+        showUpload: d.showUpload != null ? d.showUpload === "true" : undefined,
+        primaryClick: d.primaryClick || "copyPath"
+    };
+}
+function autoMount() {
+    const nodes = Array.prototype.slice.call(document.querySelectorAll("[data-rk-directory]"));
+    nodes.forEach((node) => {
+        if (node.getAttribute("data-rk-dir-mounted") === "1")
+            return;
+        node.setAttribute("data-rk-dir-mounted", "1");
+        window.__rkDirectoryInstance = createDirectoryExplorer(node, readDataOpts(node));
+    });
+}
+window.__vidfarmDirectory = { mount: createDirectoryExplorer };
+if (document.readyState === "loading")
+    document.addEventListener("DOMContentLoaded", autoMount);
+else
+    autoMount();
+window.dispatchEvent(new CustomEvent("vidfarm:directory-ready"));
+//# sourceMappingURL=file-directory.js.map