@mevdragon/vidfarm-devcli 0.20.6 → 0.20.8

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

@@ -1,1018 +0,0 @@
-// 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_ROOT_KEYS, 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 : DIRECTORY_ROOT_KEYS.slice());
-    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 cloudAvailable = opts.cloudAvailable != null
-        ? opts.cloudAvailable
-        : typeof window !== "undefined" && window.__vidfarmCloudSpace === true;
-    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;
-    // Which backend the explorer reads: "local" (this box's disk backend) or
-    // "cloud" (vidfarm.cc via the serve-box passthrough). Only meaningful when
-    // cloudAvailable; the /cloud fetches hit /me/cloud/directory*.
-    let space = "local";
-    function spacePrefix() { return space === "cloud" ? "/cloud" : ""; }
-    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);
-    // Local ⇄ Cloud space switch (serve boxes with an upstream only).
-    const spaceBar = el("div", "rk-dir-space");
-    const localBtn = el("button", "rk-dir-space-btn is-on", "Local");
-    const cloudBtn = el("button", "rk-dir-space-btn", "Cloud");
-    localBtn.type = "button";
-    cloudBtn.type = "button";
-    spaceBar.appendChild(localBtn);
-    spaceBar.appendChild(cloudBtn);
-    function setSpace(next) {
-        if (space === next)
-            return;
-        space = next;
-        localBtn.classList.toggle("is-on", next === "local");
-        cloudBtn.classList.toggle("is-on", next === "cloud");
-        // Reset to the space's root view and clear any active search.
-        searchMode = false;
-        searchResults = [];
-        searchInput.value = "";
-        selection.clear();
-        currentPath = singleRoot ? "/" + singleRoot : "/";
-        status = "idle";
-        load(true);
-    }
-    localBtn.addEventListener("click", () => setSpace("local"));
-    cloudBtn.addEventListener("click", () => setSpace("cloud"));
-    if (cloudAvailable)
-        mount.appendChild(spaceBar);
-    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 + spacePrefix() + "/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 + spacePrefix() + "/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 = "";
-        (opts.onNavigate || (() => { }))(currentPath);
-        load(true);
-    }
-    function currentRoot() { return parseDirectoryPath(currentPath).root; }
-    function currentFolder() { return parseDirectoryPath(currentPath).folderPath; }
-    // /projects mirrors the user's composition forks — its folders and files are
-    // backed by fork storage, not user-managed, so no create/rename/upload there.
-    function canWriteRoot(r) { return !!r && r !== "projects"; }
-    // 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;
-        }
-        if (!canWriteRoot(root)) {
-            toast("/projects is read-only");
-            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"));
-    }
-    // Rename a file or folder in place via POST /me/directory/rename. Files carry
-    // their backend id (display-name-only rename); folders rename their trailing
-    // path segment (files + nested subfolders move with them server-side).
-    function renameItem(it) {
-        const isFolder = it.kind === "folder";
-        const next = (window.prompt(isFolder ? "Rename folder" : "Rename file", it.name) || "").trim();
-        if (!next || next === it.name)
-            return;
-        fetch(apiBase + "/directory/rename", {
-            method: "POST",
-            credentials: "same-origin",
-            headers: { "content-type": "application/json", accept: "application/json" },
-            body: JSON.stringify({ path: it.path, new_name: next, ...(isFolder ? {} : { file_id: it.id }) })
-        })
-            .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(new Error(j.error || "http " + r.status)))))
-            .then(() => {
-            // Renaming shifts the item's path, so drop any stale selection and
-            // reload the current folder (the renamed child re-renders in place).
-            if (selection.has(it.path)) {
-                selection.delete(it.path);
-                (opts.onSelectionChange || (() => { }))(Array.from(selection.values()));
-            }
-            load(true);
-            toast("Renamed to " + next);
-        })
-            .catch((e) => toast(e.message || "Couldn't rename"));
-    }
-    // ── 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).
-        // Read-only roots (/projects) don't get it.
-        if (canWriteRoot(root)) {
-            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"));
-        const picked = () => Array.from(selection.values());
-        // Primary action stays on the bar; everything else tucks into a "⋯" menu so
-        // the toolbar never overflows in the narrow editor dock.
-        const cp = el("button", "rk-dir-selbtn is-primary", "Copy paths");
-        cp.type = "button";
-        cp.addEventListener("click", () => copyPath(picked().map((s) => s.path).join("\n")));
-        selbar.appendChild(cp);
-        const more = [];
-        if (mode === "attach")
-            more.push({ label: "Attach", run: () => { emitAttach(picked()); clearSelection(); } });
-        more.push({ label: "Copy paths", run: () => copyPath(picked().map((s) => s.path).join("\n")) });
-        more.push({ label: "Clear selection", run: clearSelection });
-        const menuBtn = el("button", "rk-dir-selbtn is-ghost rk-dir-selmore", "⋯");
-        menuBtn.type = "button";
-        menuBtn.setAttribute("aria-label", "More actions");
-        menuBtn.addEventListener("click", (e) => { e.stopPropagation(); openMenuAt(menuBtn, more); });
-        selbar.appendChild(menuBtn);
-    }
-    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. Create/rename only for writable roots (not /projects forks).
-        const folderActions = [{ label: "Open folder", run: () => navigate(it.path) }];
-        if (canWriteRoot(it.root)) {
-            folderActions.push({ label: "New subfolder", run: () => createFolder(it.folderPath) });
-            folderActions.push({ label: "Rename", run: () => renameItem(it) });
-        }
-        folderActions.push({ label: "Copy path", run: () => copyPath(it.path) });
-        row.appendChild(kebab(it, folderActions));
-        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);
-        // When the row's primary click previews (chat dock), keep attaching one click
-        // away with a dedicated inline "+" button so files stay easy to add to the
-        // composer without going through the kebab.
-        if (mode === "attach" && primaryClick === "preview") {
-            const add = el("button", "rk-aichat-fadd rk-dir-attach", "+");
-            add.type = "button";
-            add.title = "Attach " + it.name;
-            add.setAttribute("aria-label", "Attach " + it.name);
-            add.addEventListener("click", (e) => { e.stopPropagation(); emitAttach([it]); });
-            row.appendChild(add);
-        }
-        // 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) });
-        // Raws (source-named) and approved posts (title-named) can't be file-renamed;
-        // only /files + /temp files rename in place. Folders rename in every root.
-        if ((it.root === "files" || it.root === "temp") && it.id)
-            actions.push({ label: "Rename", run: () => renameItem(it) });
-        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 root = currentRoot();
-        const arr = Array.from(list);
-        let done = 0, failed = 0;
-        // The server may re-home an upload (e.g. /temp files land in a dated
-        // subfolder). Track where the bytes actually landed so we can reveal them —
-        // otherwise the refresh shows the folder we uploaded FROM, which looks empty.
-        let landedFolder = null;
-        dropText.textContent = "Uploading " + arr.length + " file(s)…";
-        const finish = () => {
-            uploading = false;
-            if (failed)
-                toast(failed + " of " + arr.length + " failed");
-            const target = root && landedFolder != null ? buildDirectoryPath(root, landedFolder) : null;
-            if (target && target !== currentPath)
-                navigate(target); // reveal the uploads
-            else
-                load(true);
-        };
-        const next = (i) => {
-            if (i >= arr.length) {
-                finish();
-                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); return r.json().catch(() => null); })
-                .then((j) => {
-                done++;
-                const fp = j && ((j.file && j.file.folderPath) ?? (j.attachment && j.attachment.folderPath));
-                if (typeof fp === "string" && landedFolder == null)
-                    landedFolder = fp;
-            })
-                .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 (canWriteRoot(it.root))
-                actions.push({ label: "New subfolder", run: () => createFolder(it.folderPath) });
-            if (canWriteRoot(it.root))
-                actions.push({ label: "Rename", run: () => renameItem(it) });
-            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)) });
-            if (it.root !== "raws" && canWriteRoot(it.root) && it.id)
-                actions.push({ label: "Rename", run: () => renameItem(it) });
-            actions.push({ label: "Copy path", run: () => copyPath(it.path) });
-        }
-        // Always offer "New folder" in the current folder when inside a writable root.
-        if (rootSet && canWriteRoot(currentRoot()))
-            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);
-    });
-    (opts.onNavigate || (() => { }))(currentPath);
-    load(true);
-    return {
-        refresh: () => load(true),
-        navigate,
-        getSelection: () => Array.from(selection.values()),
-        getCurrentPath: () => currentPath,
-        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, "\\$&");
-}
-// ── pop-panel picker (modal) ──────────────────────────────────────────────────
-// A self-contained modal wrapper around createDirectoryExplorer so any surface
-// (editor "Replace media", inpaint "Save to Files", …) can pick a file or a
-// destination folder without reimplementing the overlay + CSS each time.
-const PICKER_STYLE_ID = "rk-dirpick-style";
-function ensurePickerStyle() {
-    if (document.getElementById(PICKER_STYLE_ID))
-        return;
-    const s = document.createElement("style");
-    s.id = PICKER_STYLE_ID;
-    // Uses reskin --rk-* tokens where present, with plain fallbacks so the modal
-    // is legible even on a page that hasn't loaded the design-system variables.
-    s.textContent = [
-        ".rk-dirpick{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;",
-        "background:rgba(28,25,23,.44);backdrop-filter:blur(2px);animation:rk-dirpick-fade .16s ease}",
-        "@keyframes rk-dirpick-fade{from{opacity:0}to{opacity:1}}",
-        ".rk-dirpick-panel{width:min(560px,100%);max-height:min(82vh,700px);display:flex;flex-direction:column;",
-        "background:var(--rk-surface,#fff);border:1px solid var(--rk-border,#e6e0d6);border-radius:var(--rk-r-3xl,20px);",
-        "box-shadow:var(--rk-shadow-lg,0 24px 60px rgba(28,25,23,.28));overflow:hidden}",
-        ".rk-dirpick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;",
-        "border-bottom:1px solid var(--rk-border,#e6e0d6)}",
-        ".rk-dirpick-title{font-family:var(--rk-font-display,inherit);font-weight:800;font-size:15px;color:var(--rk-ink,#1c1917)}",
-        ".rk-dirpick-close{border:0;background:transparent;font-size:22px;line-height:1;color:var(--rk-text-muted,#78716c);cursor:pointer;padding:0 4px}",
-        ".rk-dirpick-close:hover{color:var(--rk-ink,#1c1917)}",
-        ".rk-dirpick-hint{padding:10px 18px 0;font-size:12.5px;line-height:1.4;color:var(--rk-text-muted,#78716c)}",
-        ".rk-dirpick-mount{padding:12px 14px;overflow:auto;flex:1;min-height:0}",
-        ".rk-dirpick-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--rk-border,#e6e0d6)}",
-        ".rk-dirpick-dest{flex:1;min-width:0;font-size:12.5px;color:var(--rk-text-muted,#78716c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-        ".rk-dirpick-dest b{color:var(--rk-ink,#1c1917);font-weight:700}",
-        ".rk-dirpick-btn{flex:none;min-height:36px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;",
-        "font:inherit;font-size:13px;font-weight:800;background:var(--rk-gold-500,var(--rk-gold-600,#fcb900));color:var(--rk-ink,#1c1917)}",
-        ".rk-dirpick-btn:hover:not(:disabled){background:var(--rk-gold-600,#e0a500)}",
-        ".rk-dirpick-btn:disabled{opacity:.5;cursor:default}",
-        ".rk-dirpick-btn.is-ghost{background:transparent;border:1px solid var(--rk-border,#e6e0d6);color:var(--rk-ink,#1c1917)}"
-    ].join("");
-    document.head.appendChild(s);
-}
-export function openDirectoryPicker(opts = {}) {
-    ensurePickerStyle();
-    const select = opts.select === "folder" ? "folder" : "file";
-    let done = false;
-    let explorer = null;
-    const overlay = el("div", "rk-dirpick");
-    const panel = el("div", "rk-dirpick-panel");
-    const head = el("div", "rk-dirpick-head");
-    head.appendChild(el("span", "rk-dirpick-title", opts.title || (select === "folder" ? "Choose a folder" : "Choose a file")));
-    const closeBtn = el("button", "rk-dirpick-close");
-    closeBtn.type = "button";
-    closeBtn.setAttribute("aria-label", "Close");
-    closeBtn.innerHTML = "&times;";
-    head.appendChild(closeBtn);
-    panel.appendChild(head);
-    if (opts.hint)
-        panel.appendChild(el("div", "rk-dirpick-hint", opts.hint));
-    const mountEl = el("div", "rk-dirpick-mount");
-    panel.appendChild(mountEl);
-    // Folder mode gets a footer that commits the currently-open folder.
-    let destEl = null;
-    let confirmBtn = null;
-    function finish(result) {
-        if (done)
-            return;
-        done = true;
-        close();
-        if (result)
-            (opts.onPick || (() => { }))(result);
-        else
-            (opts.onCancel || (() => { }))();
-    }
-    function folderItemFor(path) {
-        const parsed = parseDirectoryPath(path);
-        if (!parsed.root)
-            return null; // the virtual root "/" isn't a real folder
-        const folder = parsed.folderPath || "";
-        const name = folder ? folder.split("/").filter(Boolean).pop() || folder : parsed.root;
-        return { path: buildDirectoryPath(parsed.root, folder), root: parsed.root, folderPath: folder, name, kind: "folder" };
-    }
-    function syncFooter(path) {
-        if (!destEl || !confirmBtn)
-            return;
-        const item = folderItemFor(path);
-        if (item) {
-            destEl.innerHTML = "";
-            destEl.appendChild(document.createTextNode("Save to "));
-            const b = el("b", undefined, item.path);
-            destEl.appendChild(b);
-            confirmBtn.disabled = false;
-        }
-        else {
-            destEl.textContent = "Open a folder (Files, Temp, …) to choose a destination.";
-            confirmBtn.disabled = true;
-        }
-    }
-    if (select === "folder") {
-        const foot = el("div", "rk-dirpick-foot");
-        destEl = el("div", "rk-dirpick-dest");
-        const cancel = el("button", "rk-dirpick-btn is-ghost", "Cancel");
-        cancel.type = "button";
-        cancel.addEventListener("click", () => finish(null));
-        confirmBtn = el("button", "rk-dirpick-btn", opts.confirmLabel || "Use this folder");
-        confirmBtn.type = "button";
-        confirmBtn.addEventListener("click", () => {
-            const item = explorer ? folderItemFor(explorer.getCurrentPath()) : null;
-            if (item)
-                finish(item);
-        });
-        foot.appendChild(destEl);
-        foot.appendChild(cancel);
-        foot.appendChild(confirmBtn);
-        panel.appendChild(foot);
-    }
-    overlay.appendChild(panel);
-    document.body.appendChild(overlay);
-    function onKey(e) { if (e.key === "Escape")
-        finish(null); }
-    function close() {
-        document.removeEventListener("keydown", onKey, true);
-        try {
-            explorer && explorer.destroy();
-        }
-        catch { /* noop */ }
-        overlay.remove();
-    }
-    closeBtn.addEventListener("click", () => finish(null));
-    overlay.addEventListener("click", (e) => { if (e.target === overlay)
-        finish(null); });
-    document.addEventListener("keydown", onKey, true);
-    explorer = createDirectoryExplorer(mountEl, {
-        roots: opts.roots,
-        initialPath: opts.initialPath,
-        apiBase: opts.apiBase,
-        // Standalone hides Attach chrome; picking is our own affordance.
-        mode: "standalone",
-        showSearch: true,
-        showMultiSelect: false,
-        // Opt-in upload: when allowed, the explorer shows its drop zone so users can
-        // add a file to the currently-open folder (Files/Temp), then click it to pick.
-        showUpload: opts.allowUpload === true,
-        // In file mode a name-click resolves the pick; folders still navigate.
-        primaryClick: select === "file" ? "attach" : "copyPath",
-        onNavigate: (p) => syncFooter(p),
-        onAttach: (items) => {
-            if (select !== "file")
-                return;
-            const it = items && items[0];
-            if (!it)
-                return;
-            if (opts.accept && !opts.accept(it)) {
-                showToast(opts.rejectMessage || "That file can't be used here.");
-                return;
-            }
-            finish(it);
-        }
-    });
-    return { close: () => finish(null) };
-}
-// ── 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",
-        cloudAvailable: d.cloudAvailable != null ? d.cloudAvailable === "true" : undefined
-    };
-}
-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, pick: openDirectoryPicker };
-if (document.readyState === "loading")
-    document.addEventListener("DOMContentLoaded", autoMount);
-else
-    autoMount();
-window.dispatchEvent(new CustomEvent("vidfarm:directory-ready"));
-//# sourceMappingURL=file-directory.js.map