@putkoff/abstract-securefiles 0.0.48 → 0.0.50

package/dist/index.js

@@ -1,1040 +1,611 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
-import * as React from 'react';
-import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
-import { alertit, currentUsername } from '@putkoff/abstract-utilities';
-
-function ClipboardIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-  }));
-}
-const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(ClipboardIcon);
-
-function CloudArrowUpIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
-  }));
-}
-const ForwardRef = /*#__PURE__*/ React.forwardRef(CloudArrowUpIcon);
-
-// Utility to convert input to array
-function ensure_list(obj) {
-    if (Array.isArray(obj))
-        return obj.filter(Boolean);
-    if (typeof obj === 'string')
-        return obj.split(' ').filter(Boolean);
-    return [];
-}
-// Get list and length safely
-function getListAndLen(obj) {
-    const return_obj = ensure_list(obj);
-    const ob_len = return_obj.length;
-    return { return_obj, ob_len };
-}
-// Combine class names with defaults
-function combineClassNames(classNames = [], defaultClasses = ['form-group', 'form-label', 'flex', 'gap-2']) {
-    const { return_obj: inputClasses } = getListAndLen(classNames);
-    const { return_obj: defaultClassList } = getListAndLen(defaultClasses);
-    // Combine and remove duplicates
-    const combined = [...new Set([...defaultClassList, ...inputClasses])];
-    console.log(`Combined classes (length: ${combined.length}): ${combined.join(' ')}`);
-    return combined;
-}
-function Button({ children, color = 'gray', variant = 'default', className = '', ...rest }) {
-    const variantClasses = {
-        default: 'btn',
-        icon: 'btn-icon',
-        primary: 'btn-primary',
-        secondary: 'btn-secondary',
-    };
-    const colorClasses = {
-        gray: '',
-        green: variant === 'primary' ? 'btn-success' : 'btn-secondary',
-        blue: variant === 'primary' ? 'btn-primary' : 'btn-secondary',
-    };
-    const classes = combineClassNames([variantClasses[variant], colorClasses[color], className]);
-    return (jsx("button", { className: classes.join(' '), ...rest, children: children }));
-}
-function Checkbox({ label, className = '', classNames = [], ...rest }) {
-    const classes = combineClassNames(classNames, ['checkbox', 'wm-checkbox']);
-    return (jsxs("label", { className: classes.join(' '), children: [jsx("input", { type: "checkbox", className: "wm-checkbox", ...rest }), label && jsx("span", { children: label })] }));
-}
-function Input({ label, trailing, className = '', classNames = [], ...rest }) {
-    const classes = combineClassNames(classNames, ['form-group', 'flex', 'gap-2']);
-    const inputClasses = combineClassNames(className, ['form-input']);
-    return (jsxs("label", { className: classes.join(' '), children: [label && jsx("span", { className: "form-label", children: label }), jsxs("div", { className: "flex gap-2", children: [jsx("input", { className: inputClasses.join(' '), ...rest }), trailing] })] }));
-}
-function Spinner() {
-    const classes = combineClassNames('animate-pulse');
-    return jsx("p", { className: classes.join(' '), children: "Loading\u2026" });
-}
-
-/** Helper function to trigger file download */
-function triggerDownload(blob, filename) {
-    const url = URL.createObjectURL(blob);
-    const a = Object.assign(document.createElement("a"), {
-        href: url,
-        download: filename,
-    });
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-    console.log(`✅ Successfully downloaded: ${filename}`);
-}
-
-/** Non-React “direct download” used by some old links (kept for parity) */
-async function directDownload(item) {
-    const token = localStorage.getItem("token");
-    if (!token)
-        throw new Error("No auth token found");
-    const res = await fetch("https://abstractendeavors.com/api/secure-files/secure-download/", {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
-            Accept: "application/octet-stream",
-        },
-        body: JSON.stringify(item),
-    });
-    if (!res.ok)
-        throw new Error(`Download failed: ${res.status}`);
-    const blob = await res.blob();
-    triggerDownload(blob, item.filename);
-}
-
-/**
- * Download a file using the current session cookie.
- * No JWT / localStorage token required.
- */
-async function downloadFile(item) {
-    const res = await fetch("/api/secure-files/download", {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            id: item.id,
-            filepath: item.filepath,
-            filename: item.filename,
-        }),
-    });
-    if (res.status === 401)
-        throw new Error("Not authenticated – please log in.");
-    if (!res.ok)
-        throw new Error(`Download failed: HTTP ${res.status}`);
-    const blob = await res.blob();
-    triggerDownload(blob, item.filename || "download");
-}
-
-/**
- * Cookie-authenticated API helpers.
- * All requests include credentials: 'include' so the browser sends the
- * session cookie (auth_session) automatically. No JWT tokens are used.
- *
- * API base URL resolution order (first truthy value wins):
- *   1. window.__SECURE_FILES_API_BASE__   – runtime override (any bundler)
- *   2. VITE_SECURE_FILES_API_BASE         – Vite env var
- *   3. REACT_APP_SECURE_FILES_API_BASE    – Create React App env var
- *   4. /api/secure-files                  – same-origin default
- *
- * Subdomain API example (set one of the above to the full origin + path):
- *   VITE_SECURE_FILES_API_BASE=https://api.example.com/secure-files
- */
-function resolveApiBase() {
-    // 1. Runtime window config — works regardless of bundler
-    if (typeof window !== "undefined" && window.__SECURE_FILES_API_BASE__) {
-        return String(window.__SECURE_FILES_API_BASE__).replace(/\/+$/, "");
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+const DEFAULT_API_BASE = "https://api.abstractendeavors.com";
+class ApiError extends Error {
+    constructor(message, status) {
+        super(message);
+        this.status = status;
     }
-    // 2. Vite (import.meta.env is replaced at build time; guard with try for non-Vite builds)
-    try {
-        const v = import.meta.env?.VITE_SECURE_FILES_API_BASE;
-        if (v)
-            return String(v).replace(/\/+$/, "");
-    }
-    catch { /* not a Vite build */ }
-    // 3. Create React App / plain Node
+}
+async function errorFrom(res) {
+    let message = `${res.status} ${res.statusText}`;
     try {
-        const v = process.env?.REACT_APP_SECURE_FILES_API_BASE;
-        if (v)
-            return String(v).replace(/\/+$/, "");
+        const body = await res.json();
+        message = body?.message || body?.error || message;
     }
-    catch { /* process not defined */ }
-    // 4. Same-origin default
-    return "/api/secure-files";
-}
-const API_BASE$1 = resolveApiBase();
-function apiUrl(path) {
-    const p = path.startsWith("/") ? path : `/${path}`;
-    return `${API_BASE$1}${p}`;
-}
-/**
- * Generic JSON fetch with session-cookie auth.
- * Throws Error("UNAUTHENTICATED") on 401 so callers can redirect to login.
- */
-async function cookieFetch(path, body, method) {
-    const m = method ?? (body !== undefined ? "POST" : "GET");
-    const init = { method: m, credentials: "include" };
-    if (body !== undefined && body !== null) {
-        init.headers = { "Content-Type": "application/json" };
-        init.body = JSON.stringify(body);
+    catch {
+        /* non-JSON error body */
     }
-    const res = await fetch(apiUrl(path), init);
     if (res.status === 401)
-        throw new Error("UNAUTHENTICATED");
-    if (!res.ok) {
-        const msg = await res.text().catch(() => res.statusText);
-        throw new Error(`HTTP ${res.status}: ${msg}`);
-    }
-    const ct = res.headers.get("Content-Type") ?? "";
-    return (ct.includes("application/json") ? res.json() : res.text());
+        message = "Please log in to use Secure Files.";
+    return new ApiError(message, res.status);
 }
-/**
- * Check whether the current session is valid.
- * Calls /userInfo which requires authentication; returns true if the user
- * is logged in, false otherwise (no exception thrown).
- */
-async function checkAuth() {
-    try {
-        const res = await fetch(apiUrl("/userInfo"), {
-            method: "GET",
+function createApi(apiBase = DEFAULT_API_BASE) {
+    const root = `${apiBase.replace(/\/+$/, "")}/secure-files`;
+    async function json(path, init = {}) {
+        const res = await fetch(`${root}${path}`, {
             credentials: "include",
+            ...init,
+            headers: { Accept: "application/json", ...(init.body ? { "Content-Type": "application/json" } : {}) },
         });
-        return res.ok;
+        if (!res.ok)
+            throw await errorFrom(res);
+        return res.json();
     }
-    catch {
-        return false;
-    }
-}
-/**
- * Upload a single file using multipart/form-data with session-cookie auth.
- * @param file     The File object to upload.
- * @param relPath  Optional relative path within the user's directory.
- */
-async function cookieUpload(file, relPath = "") {
-    const form = new FormData();
-    form.append("file", file);
-    if (relPath)
-        form.append("rel_path", relPath);
-    const res = await fetch(apiUrl("/upload"), {
-        method: "POST",
-        credentials: "include",
-        body: form,
-    });
-    if (res.status === 401)
-        throw new Error("UNAUTHENTICATED");
-    if (!res.ok)
-        throw new Error(`Upload failed: HTTP ${res.status}`);
-    return res.json();
-}
-/** The resolved API base URL, exported for debugging / display purposes. */
-const SECURE_FILES_API_BASE = API_BASE$1;
-
-async function downloadSelect(item) {
-    const res = await fetch(`${SECURE_FILES_API_BASE}/download`, {
-        method: "POST",
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/octet-stream",
+    return {
+        list: () => json("/userInfo"),
+        roots: () => json("/admin/roots"),
+        requestRoot: (path) => json("/admin/roots", { method: "POST", body: JSON.stringify({ path }) }),
+        confirmRoot: (nonce, signature, label) => json("/admin/roots/confirm", {
+            method: "POST",
+            body: JSON.stringify({ nonce, signature, label }),
+        }),
+        removeRoot: (id) => json(`/admin/roots/${id}`, { method: "DELETE" }),
+        browse: (path) => json(`/admin/browse?path=${encodeURIComponent(path)}`),
+        link: (paths, folder) => json("/admin/link", {
+            method: "POST",
+            body: JSON.stringify({ paths, folder }),
+        }),
+        updateShare: (update) => json("/files/share", { method: "PATCH", body: JSON.stringify(update) }),
+        remove: (ids) => json("/remove", {
+            method: "POST",
+            body: JSON.stringify({ ids }),
+        }),
+        /** Hand the download to the browser so it streams to disk (native progress + resume, no memory limit). */
+        download(ids) {
+            const a = document.createElement("a");
+            a.href = `${root}/download?ids=${ids.join(",")}`;
+            a.rel = "noopener";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
         },
-        body: JSON.stringify(item),
-    });
-    if (res.status === 401)
-        throw new Error("Not authenticated – please log in.");
-    if (!res.ok)
-        throw new Error(`Download failed: HTTP ${res.status}`);
-    const blob = await res.blob();
-    if (!blob || blob.size === 0) {
-        throw new Error(`Received empty file data for "${item.filename}"`);
-    }
-    triggerDownload(blob, item.filename);
-}
-
-/** Given a checkbox inside a table-row → download that row’s file. */
-async function downloadRow(cb) {
-    const row = cb.closest("tr");
-    const filepath = cb.value;
-    const filename = row?.children[1]?.textContent?.trim() || "downloaded_file";
-    if (filepath)
-        await downloadSelect({ filepath, filename });
-}
-/** Bulk download: pass a NodeList or array of checkboxes. */
-async function downloadSelected(checkboxes) {
-    const list = Array.from(checkboxes);
-    if (!list.length) {
-        alert("No files selected.");
-        return;
-    }
-    for (const cb of list) {
-        await downloadRow(cb);
-    }
-}
-
-/**
- * Classic “select all rows” logic (still handy in non-React views
- * such as the admin dashboard).
- */
-function syncHeaderCheckbox() {
-    const all = document.querySelectorAll(".file-checkbox");
-    const checked = document.querySelectorAll(".file-checkbox:checked");
-    const header = document.getElementById("select-all-checkbox");
-    header.indeterminate =
-        checked.length > 0 && checked.length < all.length;
-    header.checked = checked.length === all.length;
+        upload(file, relPath, onProgress) {
+            return new Promise((resolve, reject) => {
+                const form = new FormData();
+                form.append("file", file);
+                form.append("rel_path", relPath);
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", `${root}/upload`);
+                xhr.withCredentials = true;
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable)
+                        onProgress?.(e.loaded / e.total);
+                };
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300)
+                        return resolve();
+                    let message = `Upload failed (${xhr.status})`;
+                    try {
+                        message = JSON.parse(xhr.responseText)?.message || message;
+                    }
+                    catch {
+                        /* non-JSON */
+                    }
+                    if (xhr.status === 401)
+                        message = "Please log in to use Secure Files.";
+                    reject(new ApiError(message, xhr.status));
+                };
+                xhr.onerror = () => reject(new ApiError("Network error during upload", 0));
+                xhr.send(form);
+            });
+        },
+    };
 }
 
-/** Wire up header + row checkboxes once the table is in the DOM. */
-function initSelectAll() {
-    const header = document.getElementById("select-all-checkbox");
-    const btn = document.getElementById("select-all");
-    // 1) header → toggle all
-    header.addEventListener("change", (e) => {
-        const on = e.target.checked;
-        document
-            .querySelectorAll(".file-checkbox")
-            .forEach((cb) => (cb.checked = on));
-    });
-    // 2) button → toggle all
-    btn.addEventListener("click", () => {
-        const cbs = Array.from(document.querySelectorAll(".file-checkbox"));
-        if (!cbs.length) {
-            alert("No files to select.");
-            return;
+const NEW_FOLDER = "__new__";
+function FolderSelect({ label, folders, value, onChange, }) {
+    const [creating, setCreating] = useState(false);
+    const [draft, setDraft] = useState("");
+    const [extra, setExtra] = useState([]);
+    const options = [...new Set([...folders, ...extra, ...(value ? [value] : [])])].sort();
+    const accept = () => {
+        const clean = draft.trim().replace(/^\/+|\/+$/g, "");
+        if (clean) {
+            setExtra((e) => (e.includes(clean) ? e : [...e, clean]));
+            onChange(clean);
         }
-        const anyUnchecked = cbs.some((cb) => !cb.checked);
-        cbs.forEach((cb) => (cb.checked = anyUnchecked));
-        syncHeaderCheckbox();
-    });
-    // 3) row boxes → keep header state
-    document
-        .querySelectorAll(".file-checkbox")
-        .forEach((cb) => cb.addEventListener("change", syncHeaderCheckbox));
-    syncHeaderCheckbox();
-}
-
-/** Utility for other screens: toggle a list of checkboxes on/off. */
-function toggleCheckboxes(cbs) {
-    if (!cbs.length) {
-        alert("No files to select.");
-        return;
-    }
-    const anyUnchecked = cbs.some((cb) => !cb.checked);
-    cbs.forEach((cb) => (cb.checked = anyUnchecked));
-    syncHeaderCheckbox();
+        setCreating(false);
+        setDraft("");
+    };
+    return (jsxs("div", { className: "sf-field", children: [jsx("span", { children: label }), creating ? (jsxs("div", { className: "sf-row", children: [jsx("input", { className: "sf-input", autoFocus: true, value: draft, placeholder: "new-folder-name (use / for subfolders)", onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                accept();
+                            if (e.key === "Escape")
+                                setCreating(false);
+                        } }), jsx("button", { type: "button", className: "sf-btn", onClick: accept, children: "OK" })] })) : (jsxs("select", { className: "sf-input", value: value, onChange: (e) => (e.target.value === NEW_FOLDER ? setCreating(true) : onChange(e.target.value)), children: [jsx("option", { value: "", children: "/ (top level)" }), options.map((d) => (jsxs("option", { value: d, children: [d, "/"] }, d))), jsx("option", { value: NEW_FOLDER, children: "+ Create new directory\u2026" })] }))] }));
 }
 
-const API_BASE = '/api/secure-files';
-/** Generic PATCH helper for file-level admin settings. */
-async function patchFileSetting(fileId, field, value) {
-    const res = await fetch(`${API_BASE}/files/${fileId}/settings/${field}`, {
-        method: 'PATCH',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ value }),
-    });
-    if (!res.ok) {
-        const err = await res.json().catch(() => ({}));
-        throw new Error(err.error || res.statusText);
-    }
-    return (await res.json());
+function readEntries(reader) {
+    return new Promise((resolve, reject) => reader.readEntries(resolve, reject));
 }
-
-/** File-upload helper (used by non-React fallback pages). */
-async function uploadFile(file, subdir) {
-    const fileInput = file || document.getElementById('file-browser');
-    const subdirInput = subdir || document.getElementById('subdir');
-    const banner = document.getElementById('banner');
-    if (!fileInput.files?.length) {
-        alert('No file selected.');
-        return;
-    }
-    const f = fileInput.files[0];
-    const dir = (subdirInput?.value ?? '').trim();
-    const relPath = dir ? `${dir}/${f.name}` : f.name;
-    try {
-        const json = await cookieUpload(f, relPath);
-        if (banner)
-            banner.textContent = `Uploaded: ${json.filepath}`;
-        fileInput.value = '';
-        if (subdirInput)
-            subdirInput.value = '';
-        window.location.reload();
-    }
-    catch (err) {
-        console.error('Upload failed', err);
+async function walkEntry(entry, prefix, out) {
+    if (entry.isFile) {
+        const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
+        out.push({ file, relPath: prefix + file.name });
     }
-}
-
-async function uploadFiles(file, subdir = '') {
-    if (!(file instanceof File))
-        throw new Error('Invalid file: must be a File object.');
-    if (typeof subdir !== 'string')
-        throw new Error('Invalid subdir: must be a string.');
-    const relPath = subdir.trim() ? `${subdir.trim()}/${file.name}` : file.name;
-    const json = await cookieUpload(file, relPath);
-    if (!json?.filepath)
-        throw new Error('Server response missing filepath.');
-    return { filepath: json.filepath };
-}
-
-async function removeFile(item) {
-    const resp = await cookieFetch("remove", { id: item.id }, "POST");
-    if (!resp || resp === false || resp?.result === false) {
-        throw new Error(`Could not delete "${item.filename ?? item.id}"`);
+    else if (entry.isDirectory) {
+        const reader = entry.createReader();
+        let batch;
+        do {
+            batch = await readEntries(reader);
+            for (const child of batch)
+                await walkEntry(child, `${prefix}${entry.name}/`, out);
+        } while (batch.length > 0);
     }
 }
-
-/** Bulk download: pass a NodeList or array of checkboxes. */
-async function removeSelected(checkboxes) {
-    const list = Array.from(checkboxes);
-    if (!list.length) {
-        alert("No files selected.");
-        return;
+async function filesFromDrop(dt) {
+    const out = [];
+    const entries = Array.from(dt.items || [])
+        .map((item) => item.webkitGetAsEntry?.())
+        .filter(Boolean);
+    if (entries.length) {
+        for (const entry of entries)
+            await walkEntry(entry, "", out);
     }
-    for (const cb of list) {
-        alert(cb);
-        await removeFile(cb);
+    else {
+        for (const file of Array.from(dt.files))
+            out.push({ file, relPath: file.name });
     }
+    return out;
 }
-
-/** Given a checkbox inside a table-row → download that row’s file. */
-async function removeRow(cb) {
-    const row = cb.closest("tr");
-    alertit(row);
-    if (row && row?.id)
-        await removeFile(row);
+function joinTarget(target, relPath) {
+    const clean = target.trim().replace(/^\/+|\/+$/g, "");
+    return clean ? `${clean}/${relPath}` : relPath;
 }
-
-async function listFiles(setFiles = null) {
-    const result = await cookieFetch("list", undefined, "GET");
-    const apiRows = Array.isArray(result)
-        ? result
-        : (result?.result ?? []);
-    const rows = apiRows.map((r) => ({
-        id: r.id,
-        filename: r.filename,
-        uploader_id: r.uploader_id,
-        filepath: r.filepath,
-        created_at: r.created_at,
-        download_count: r.download_count,
-        download_limit: r.download_limit,
-        shareable: Boolean(r.shareable),
-        needsPassword: !!r.share_password,
-        share_password: r.share_password,
-        password_str: r.password_str,
-    }));
-    if (setFiles)
-        setFiles(rows);
-    return rows;
-}
-
-/**
- * Toggle sharing on a file.
- * Sends the updated settings to /api/secure-files/files/share.
- * Does NOT update local state – the caller is responsible for that.
- */
-async function toggleShare(file) {
-    const updated = { ...file, shareable: !file.shareable };
-    if (!updated.shareable)
-        updated.needsPassword = false;
-    await cookieFetch("files/share", {
-        id: updated.id,
-        shareable: updated.shareable,
-        share_password: updated.share_password ?? null,
-        password_str: updated.password_str ?? null,
-        download_limit: updated.download_limit ?? null,
-    }, "POST");
+function CloudIcon() {
+    return (jsx("svg", { className: "sf-drop__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" }) }));
 }
-
-const useLoadFiles = (setLoading, setError, setFiles) => {
-    return useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const result = await cookieFetch("list", undefined, "GET");
-            const apiRows = Array.isArray(result)
-                ? result
-                : (result?.result ?? []);
-            setFiles(apiRows.map((r) => ({
-                id: r.id,
-                filename: r.filename,
-                uploader_id: r.uploader_id,
-                filepath: r.filepath,
-                created_at: r.created_at,
-                download_count: r.download_count,
-                download_limit: r.download_limit,
-                shareable: Boolean(r.shareable),
-                needsPassword: !!r.share_password,
-                share_password: r.share_password,
-                password_str: r.password_str,
-            })));
-        }
-        catch (err) {
-            setError(err instanceof Error ? err : new Error('Failed to load files'));
-        }
-        finally {
-            setLoading(false);
+function UploadPanel({ api, folders, onUploaded, }) {
+    const [queue, setQueue] = useState([]);
+    const [mode, setMode] = useState("files");
+    const [target, setTarget] = useState("");
+    const [dragging, setDragging] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [message, setMessage] = useState(null);
+    const fileInput = useRef(null);
+    const folderInput = useRef(null);
+    const enqueue = (items) => {
+        setMessage(null);
+        setQueue((q) => {
+            const kept = q.filter((x) => !x.done);
+            const seen = new Set(kept.map((x) => x.relPath));
+            return [...kept, ...items.filter((i) => !seen.has(i.relPath)).map((i) => ({ ...i, progress: 0 }))];
+        });
+    };
+    const openPicker = () => (mode === "folder" ? folderInput : fileInput).current?.click();
+    const fromInput = (e) => {
+        const files = Array.from(e.target.files || []);
+        enqueue(files.map((file) => ({ file, relPath: file.webkitRelativePath || file.name })));
+        e.target.value = "";
+    };
+    const uploadAll = async () => {
+        setBusy(true);
+        setMessage(null);
+        let failed = 0;
+        for (let i = 0; i < queue.length; i++) {
+            const item = queue[i];
+            if (item.done)
+                continue;
+            const set = (patch) => setQueue((q) => q.map((x, idx) => (idx === i ? { ...x, ...patch } : x)));
+            try {
+                await api.upload(item.file, joinTarget(target, item.relPath), (p) => set({ progress: p }));
+                set({ progress: 1, done: true, error: undefined });
+            }
+            catch (err) {
+                failed++;
+                set({ error: err instanceof Error ? err.message : String(err) });
+            }
         }
-    }, [setLoading, setError, setFiles]);
-};
-
-const useToggleShare = (setFiles) => {
-    return useCallback(async (file) => {
-        const updated = { ...file, shareable: !file.shareable };
-        if (!updated.shareable)
-            updated.needsPassword = false;
+        setBusy(false);
+        setMessage(failed ? `${failed} upload(s) failed` : "Upload complete");
+        if (!failed)
+            setQueue([]);
+        onUploaded();
+    };
+    const pending = queue.filter((q) => !q.done);
+    return (jsxs("section", { className: "sf-upload", children: [jsxs("div", { className: "sf-row sf-mode", role: "radiogroup", "aria-label": "Choose what clicking the upload area picks", children: [jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "radio", checked: mode === "files", onChange: () => setMode("files") }), " Files"] }), jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "radio", checked: mode === "folder", onChange: () => setMode("folder") }), " Folder"] }), jsx("span", { className: "sf-muted", children: "(drag-and-drop accepts either)" })] }), jsxs("div", { className: `sf-drop${dragging ? " sf-drop--active" : ""}`, role: "button", tabIndex: 0, "aria-label": `Upload area: click to choose ${mode === "folder" ? "a folder" : "files"}, or drop files or folders`, onClick: openPicker, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        openPicker();
+                    }
+                }, onDragEnter: (e) => {
+                    e.preventDefault();
+                    setDragging(true);
+                }, onDragOver: (e) => e.preventDefault(), onDragLeave: (e) => {
+                    if (!e.currentTarget.contains(e.relatedTarget))
+                        setDragging(false);
+                }, onDrop: async (e) => {
+                    e.preventDefault();
+                    setDragging(false);
+                    enqueue(await filesFromDrop(e.dataTransfer));
+                }, children: [jsx(CloudIcon, {}), jsxs("div", { children: [jsx("p", { className: "sf-drop__title", children: "Drag & drop files or folders here" }), jsxs("p", { className: "sf-muted", children: ["Click anywhere to choose ", mode === "folder" ? "a folder" : "files"] }), pending.length > 0 && (jsxs("p", { className: "sf-drop__count", children: [pending.length, " item", pending.length === 1 ? "" : "s", " queued"] }))] })] }), jsx("input", { ref: fileInput, type: "file", multiple: true, hidden: true, onChange: fromInput }), jsx("input", { ref: folderInput, type: "file", multiple: true, hidden: true, onChange: fromInput, ...{ webkitdirectory: "", directory: "" } }), jsxs("div", { className: "sf-row", children: [jsx(FolderSelect, { label: "Upload into", folders: folders, value: target, onChange: setTarget }), jsx("button", { type: "button", className: "sf-btn sf-btn--primary", disabled: busy || !pending.length, onClick: uploadAll, children: busy ? "Uploading…" : `Upload ${pending.length}` }), queue.length > 0 && !busy && (jsx("button", { type: "button", className: "sf-btn", onClick: () => setQueue([]), children: "Clear" }))] }), message && (jsx("p", { className: message.includes("failed") ? "sf-error" : "sf-muted", role: "status", children: message })), queue.length > 0 && (jsx("ul", { className: "sf-queue", children: queue.map((q, i) => (jsxs("li", { children: [jsx("span", { className: "sf-queue__name", children: joinTarget(target, q.relPath) }), q.error ? (jsx("span", { className: "sf-error", children: q.error })) : (jsxs("span", { className: "sf-row", children: [jsx("progress", { max: 1, value: q.progress }), jsxs("span", { className: "sf-muted", children: [Math.round(q.progress * 100), "%"] })] }))] }, `${q.relPath}-${i}`))) }))] }));
+}
+
+function CopyButton({ text, label = "Copy link" }) {
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
         try {
-            await cookieFetch("files/share", {
-                id: updated.id,
-                shareable: updated.shareable,
-                share_password: updated.share_password ?? null,
-                password_str: updated.password_str ?? null,
-                download_limit: updated.download_limit ?? null,
-            }, "POST");
-            setFiles(curr => curr.map(f => f.id === file.id ? updated : f));
+            await navigator.clipboard.writeText(text);
         }
-        catch (err) {
-            console.error('Failed to toggle share:', err);
+        catch {
+            const ta = document.createElement("textarea");
+            ta.value = text;
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand("copy");
+            ta.remove();
         }
-    }, [setFiles]);
-};
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    return (jsx("button", { type: "button", className: "sf-btn", onClick: copy, children: copied ? "Copied" : label }));
+}
 
-const usePatchShareSettings = (setFiles) => {
-    return useCallback(async (file) => {
-        const body = {
-            id: file.id,
-            shareable: file.shareable,
-            share_password: file.share_password ?? null,
-            password_str: file.password_str ?? null,
-            download_limit: file.download_limit ?? null,
-        };
+function ShareDialog({ file, onClose, onSave, }) {
+    const [shareable, setShareable] = useState(file.shareable);
+    const [limit, setLimit] = useState(file.download_limit ? String(file.download_limit) : "");
+    const [pwMode, setPwMode] = useState(file.has_password ? "keep" : "remove");
+    const [password, setPassword] = useState("");
+    const [resetCount, setResetCount] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const onKey = (e) => e.key === "Escape" && onClose();
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onClose]);
+    const limitValid = limit === "" || /^\d+$/.test(limit);
+    const passwordValid = pwMode !== "set" || password.length > 0;
+    const save = async () => {
+        setSaving(true);
+        setError(null);
         try {
-            await cookieFetch("files/share", body, "POST");
-            setFiles(curr => curr.map(f => f.id === body.id ? { ...f, ...body } : f));
+            const update = { id: file.id, shareable };
+            if (shareable) {
+                update.download_limit = limit === "" ? null : Number(limit);
+                if (pwMode === "set")
+                    update.password = password;
+                else if (pwMode === "remove" && file.has_password)
+                    update.password = "";
+                if (resetCount)
+                    update.reset_count = true;
+            }
+            await onSave(update);
+            onClose();
         }
         catch (err) {
-            console.error('Failed to update share settings:', err);
+            setError(err instanceof Error ? err.message : String(err));
         }
-    }, [setFiles]);
-};
-
-/**
- * Hook alias used by useFiles.ts. Patches share settings via the session-cookie
- * authenticated /files/share endpoint.
- */
-const useSaveShareSettings = (setFiles) => {
-    return useCallback(async (file) => {
-        const body = {
-            id: file.id,
-            shareable: file.shareable,
-            share_password: file.share_password ?? null,
-            password_str: file.password_str ?? null,
-            download_limit: file.download_limit ?? null,
-        };
-        try {
-            await cookieFetch("files/share", body, "POST");
-            setFiles(curr => curr.map(f => f.id === body.id ? { ...f, ...body } : f));
-        }
-        catch (err) {
-            console.error('Failed to save share settings:', err);
+        finally {
+            setSaving(false);
         }
-    }, [setFiles]);
-};
+    };
+    return (jsx("div", { className: "sf-overlay", onMouseDown: (e) => e.target === e.currentTarget && onClose(), children: jsxs("div", { className: "sf-dialog", role: "dialog", "aria-modal": "true", "aria-label": `Share settings for ${file.filename}`, children: [jsxs("header", { className: "sf-dialog__head", children: [jsx("h3", { children: "Share settings" }), jsx("button", { type: "button", className: "sf-icon-btn", "aria-label": "Close", onClick: onClose, children: "\u2715" })] }), jsx("p", { className: "sf-muted", children: file.filepath }), jsxs("label", { className: "sf-check", children: [jsx("input", { type: "checkbox", checked: shareable, onChange: (e) => setShareable(e.target.checked) }), "Anyone with the link can download"] }), jsxs("fieldset", { disabled: !shareable, className: "sf-fieldset", children: [jsxs("label", { className: "sf-field", children: [jsx("span", { children: "Download limit (blank = unlimited)" }), jsx("input", { className: "sf-input", inputMode: "numeric", value: limit, onChange: (e) => setLimit(e.target.value.trim()), placeholder: "unlimited" }), !limitValid && jsx("span", { className: "sf-error", children: "Enter a whole number" })] }), jsxs("p", { className: "sf-muted", children: ["Downloaded ", file.download_count, " time", file.download_count === 1 ? "" : "s", file.download_limit ? ` of ${file.download_limit}` : "", ".", " ", jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "checkbox", checked: resetCount, onChange: (e) => setResetCount(e.target.checked) }), "reset count"] })] }), jsxs("div", { className: "sf-field", children: [jsx("span", { children: "Password" }), jsxs("div", { className: "sf-row", children: [file.has_password && (jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "radio", checked: pwMode === "keep", onChange: () => setPwMode("keep") }), "keep current"] })), jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "radio", checked: pwMode === "set", onChange: () => setPwMode("set") }), file.has_password ? "change" : "require password"] }), jsxs("label", { className: "sf-check sf-check--inline", children: [jsx("input", { type: "radio", checked: pwMode === "remove", onChange: () => setPwMode("remove") }), file.has_password ? "remove" : "none"] })] }), pwMode === "set" && (jsx("input", { className: "sf-input", type: "password", autoComplete: "new-password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "New password" }))] }), jsxs("div", { className: "sf-field", children: [jsx("span", { children: "Share link" }), jsxs("div", { className: "sf-row", children: [jsx("input", { className: "sf-input", readOnly: true, value: file.share_url, onFocus: (e) => e.target.select() }), jsx(CopyButton, { text: file.share_url })] }), !file.shareable && jsx("span", { className: "sf-muted", children: "The link works once you save with sharing on." })] })] }), error && jsx("p", { className: "sf-error", children: error }), jsxs("footer", { className: "sf-row sf-dialog__foot", children: [jsx("button", { type: "button", className: "sf-btn", onClick: onClose, children: "Cancel" }), jsx("button", { type: "button", className: "sf-btn sf-btn--primary", disabled: saving || !limitValid || !passwordValid, onClick: save, children: saving ? "Saving…" : "Save" })] })] }) }));
+}
 
-const useDeleteFile = (setFiles) => {
-    return useCallback(async (file) => {
-        const targets = Array.isArray(file) ? file : [file];
-        for (const f of targets) {
-            try {
-                await cookieFetch("remove", { id: f.id }, "POST");
-                setFiles(curr => curr.filter(item => item.id !== f.id));
+function ConfirmButton({ label, onConfirm, disabled, }) {
+    const [armed, setArmed] = useState(false);
+    useEffect(() => {
+        if (!armed)
+            return;
+        const t = setTimeout(() => setArmed(false), 3000);
+        return () => clearTimeout(t);
+    }, [armed]);
+    return (jsx("button", { type: "button", className: `sf-btn sf-btn--danger${armed ? " sf-btn--armed" : ""}`, disabled: disabled, onClick: () => {
+            if (armed) {
+                setArmed(false);
+                onConfirm();
             }
-            catch (err) {
-                console.error(`Failed to delete "${f.filename}":`, err);
+            else {
+                setArmed(true);
             }
-        }
-    }, [setFiles]);
-};
-
-function useFiles() {
-    const [files, setFiles] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const loadCallback = useLoadFiles(setLoading, setError, setFiles);
-    const toggleShareCallback = useToggleShare(setFiles);
-    const patchShareSettingsCallback = useSaveShareSettings(setFiles);
-    const deleteFileCallback = useDeleteFile(setFiles);
-    useEffect(() => {
-        loadCallback();
-    }, [loadCallback]);
-    return {
-        files,
-        loading,
-        error,
-        load: loadCallback,
-        toggleShare: toggleShareCallback,
-        patchShareSettings: patchShareSettingsCallback,
-        deleteFile: deleteFileCallback,
-        setFiles,
-        setLoading,
-        setError,
-    };
+        }, children: armed ? "Confirm" : label }));
 }
 
-function FileRow({ file, onDownload, onSettings, onToggleShare, onDelete, }) {
-    const isOwner = file.uploader_id?.toLowerCase() === (currentUsername() ?? '').toLowerCase();
-    const downloadAllowed = isOwner || file.shareable;
-    const [isDownloading, setIsDownloading] = useState(false);
-    const [isTogglingShare, setIsTogglingShare] = useState(false);
-    const [isDeleting, setIsDeleting] = useState(false);
-    // Mimic WindowManagerApp's unsaved heuristic
-    const looksUnsaved = file.filename.toLowerCase().startsWith('untitled') ||
-        file.filename.includes('*');
-    const handleDownload = async () => {
-        setIsDownloading(true);
+function formatSize(bytes) {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let n = bytes;
+    let i = 0;
+    while (n >= 1024 && i < units.length - 1) {
+        n /= 1024;
+        i++;
+    }
+    return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
+}
+const errText = (err) => (err instanceof Error ? err.message : String(err));
+function AddRoot({ api, onAdded }) {
+    const [path, setPath] = useState("");
+    const [label, setLabel] = useState("");
+    const [challenge, setChallenge] = useState(null);
+    const [signature, setSignature] = useState("");
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const request = async () => {
+        setBusy(true);
+        setError(null);
         try {
-            await onDownload();
+            setChallenge((await api.requestRoot(path.trim())).challenge);
+            setSignature("");
         }
-        finally {
-            setIsDownloading(false);
-        }
-    };
-    const handleToggleShare = async () => {
-        setIsTogglingShare(true);
-        try {
-            await onToggleShare();
+        catch (err) {
+            setError(errText(err));
         }
         finally {
-            setIsTogglingShare(false);
+            setBusy(false);
         }
     };
-    const handleDeleteFile = async () => {
-        setIsDeleting(true);
+    const confirm = async () => {
+        if (!challenge)
+            return;
+        setBusy(true);
+        setError(null);
         try {
-            await onDelete();
+            onAdded((await api.confirmRoot(challenge.nonce, signature, label)).roots);
+            setChallenge(null);
+            setPath("");
+            setLabel("");
+            setSignature("");
+        }
+        catch (err) {
+            setError(errText(err));
         }
         finally {
-            setIsDeleting(false);
+            setBusy(false);
         }
     };
-    return (jsxs("tr", { className: "wm-row transition-colors duration-75", children: [jsx("td", { className: "wm-cell w-12 align-middle", children: jsx("input", { type: "checkbox", className: "wm-checkbox", "aria-label": `Select ${file.filename}` }) }), jsx("td", { className: `wm-cell ${looksUnsaved ? 'unsaved' : ''}`, children: file.filename }), jsx("td", { className: "wm-cell w-12 align-middle", children: downloadAllowed ? (jsx(Button, { color: "blue", variant: "secondary", onClick: handleDownload, disabled: isDownloading, "aria-label": `Download ${file.filename}`, className: "wm-btn-link", children: isDownloading ? 'Downloading...' : 'Download' })) : (jsx("span", { className: "text-gray-500 text-lg", "aria-label": "Download restricted", children: "\uD83D\uDD12" })) }), jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsx(Button, { color: "gray", variant: "icon", onClick: () => {
-                        console.log('⚙︎ clicked', file.id);
-                        onSettings();
-                    }, "aria-label": "Open share settings", className: "wm-btn-icon text-lg", children: "\u2699\uFE0F" })) }), jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsx(Button, { color: file.shareable ? 'blue' : 'gray', variant: file.shareable ? 'primary' : 'secondary', onClick: handleToggleShare, disabled: isTogglingShare, className: "btn", children: isTogglingShare
-                        ? 'Toggling...'
-                        : file.shareable
-                            ? 'Sharing'
-                            : 'Share' })) }), jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsx(Button, { color: "gray", variant: "icon", onClick: handleDeleteFile, disabled: isDeleting, className: "wm-btn-icon text-lg", children: "\uD83D\uDDD1" })) }), jsxs("td", { className: "wm-cell", children: [file.download_count, " / ", file.download_limit ?? "∞"] })] }));
+    const minutesLeft = challenge ? Math.max(0, Math.round((challenge.expires * 1000 - Date.now()) / 60000)) : 0;
+    return (jsxs("div", { className: "sf-card", children: [jsx("h4", { children: "Allow a directory" }), !challenge ? (jsxs("div", { className: "sf-row sf-row--bottom", children: [jsxs("label", { className: "sf-field", children: [jsx("span", { children: "Absolute path on the server" }), jsx("input", { className: "sf-input", value: path, onChange: (e) => setPath(e.target.value), placeholder: "/srv/shared/docs", onKeyDown: (e) => e.key === "Enter" && path.trim() && request() })] }), jsxs("label", { className: "sf-field sf-field--narrow", children: [jsx("span", { children: "Label (optional)" }), jsx("input", { className: "sf-input", value: label, onChange: (e) => setLabel(e.target.value) })] }), jsx("button", { type: "button", className: "sf-btn sf-btn--primary", disabled: busy || !path.trim(), onClick: request, children: "Request" })] })) : (jsxs("div", { className: "sf-stack", children: [jsxs("p", { children: ["Allowing ", jsx("code", { children: challenge.message.split("|")[3] }), " requires a signature from a trusted SSH key. Run this where that key lives (expires in about ", minutesLeft, " min):"] }), jsxs("div", { className: "sf-row", children: [jsx("textarea", { className: "sf-input sf-code", readOnly: true, rows: 3, value: challenge.command }), jsx(CopyButton, { text: challenge.command, label: "Copy command" })] }), jsxs("label", { className: "sf-field", children: [jsx("span", { children: "Paste the full output (BEGIN \u2026 END SSH SIGNATURE)" }), jsx("textarea", { className: "sf-input sf-code", rows: 6, value: signature, onChange: (e) => setSignature(e.target.value), placeholder: "-----BEGIN SSH SIGNATURE-----" })] }), jsxs("div", { className: "sf-row", children: [jsx("button", { type: "button", className: "sf-btn sf-btn--primary", disabled: busy || !signature.includes("END SSH SIGNATURE"), onClick: confirm, children: "Verify & allow" }), jsx("button", { type: "button", className: "sf-btn", onClick: () => setChallenge(null), children: "Cancel" })] })] })), error && jsx("p", { className: "sf-error", children: error })] }));
 }
-
-function ShareModal({ file, onClose, onSave }) {
-    const [fileId, setFileId] = useState("");
-    const [enabled, setEnabled] = useState(false);
-    const [password, setPassword] = useState(undefined);
-    const [strPassword, setStrPassword] = useState("");
-    const [download_limit, setDownloadLimit] = useState(0);
-    const [error, setError] = useState("");
+function Browser({ api, roots, folders, onLinked, }) {
+    const [listing, setListing] = useState(null);
+    const [picked, setPicked] = useState(new Set());
+    const [target, setTarget] = useState("");
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
     const [busy, setBusy] = useState(false);
-    const modalRef = useRef(null);
-    const shareLink = file && enabled
-        ? `/api/secure-files/secure-download/${file.id}`
-        : "";
-    useEffect(() => {
-        if (!file)
-            return;
-        setFileId(file.id);
-        setEnabled(file.shareable);
-        setPassword(file.share_password);
-        setStrPassword(file.password_str ?? "");
-        setDownloadLimit(file.download_limit ?? 0);
-        setError("");
-        modalRef.current?.focus();
-    }, [file]);
-    useEffect(() => {
-        const h = (e) => e.key === "Escape" && onClose();
-        window.addEventListener("keydown", h);
-        return () => window.removeEventListener("keydown", h);
-    }, [onClose]);
-    if (!file)
-        return null;
-    async function handleSave() {
-        if (strPassword && strPassword.length < 4) {
-            setError("Password must be at least 4 characters");
-            return;
+    const open = useCallback(async (path) => {
+        setError(null);
+        try {
+            setListing(await api.browse(path));
+            setPicked(new Set());
+        }
+        catch (err) {
+            setError(errText(err));
         }
+    }, [api]);
+    useEffect(() => {
+        if (!listing && roots.length)
+            open(roots[0].path);
+        if (listing && !roots.some((r) => listing.path.startsWith(r.path)))
+            setListing(null);
+    }, [roots, listing, open]);
+    const togglePick = (path, on) => setPicked((p) => {
+        const next = new Set(p);
+        on ? next.add(path) : next.delete(path);
+        return next;
+    });
+    const link = async () => {
         setBusy(true);
-        const save_dict = {
-            id: fileId,
-            shareable: enabled,
-            needsPassword: !!strPassword,
-            share_password: strPassword || null,
-            password_str: strPassword || null,
-            download_limit: download_limit === "" ? null : Number(download_limit),
-        };
+        setResult(null);
         try {
-            const resp = await onSave(save_dict);
-            onClose();
+            const res = await api.link([...picked], target);
+            const parts = [`Linked ${res.linked.length} file(s)`];
+            if (res.errors.length)
+                parts.push(`${res.errors.length} skipped: ${res.errors.map((e) => e.error).join("; ")}`);
+            setResult(parts.join(". "));
+            onLinked();
+            if (listing)
+                await open(listing.path);
         }
         catch (err) {
-            setError(`${err} Failed to save settings. Please try again.`);
+            setResult(errText(err));
         }
         finally {
             setBusy(false);
         }
+    };
+    if (!roots.length)
+        return jsx("p", { className: "sf-muted", children: "Allow a directory above to browse and link its files." });
+    const linkable = [
+        ...(listing?.dirs.filter((d) => !d.linked_id) ?? []),
+        ...(listing?.files.filter((f) => !f.linked_id) ?? []),
+    ];
+    const relative = listing ? listing.path.slice(listing.root.length) || "/" : "";
+    return (jsxs("div", { className: "sf-card", children: [jsx("h4", { children: "Link files or folders" }), jsxs("div", { className: "sf-row", children: [jsx("select", { className: "sf-input sf-root-select", value: listing?.root ?? "", onChange: (e) => open(e.target.value), children: roots.map((r) => (jsx("option", { value: r.path, children: r.label ? `${r.label} (${r.path})` : r.path }, r.id))) }), listing && jsx("code", { className: "sf-muted", children: relative })] }), error && jsx("p", { className: "sf-error", children: error }), listing && (jsxs("div", { className: "sf-browser", children: [listing.parent && (jsx("button", { type: "button", className: "sf-browser__dir", onClick: () => open(listing.parent), children: "\u21A9 .." })), listing.dirs.map((d) => (jsxs("div", { className: `sf-browser__row${d.linked_id ? " sf-muted" : ""}`, children: [jsx("input", { type: "checkbox", "aria-label": `Select folder ${d.name}`, disabled: !!d.linked_id, checked: picked.has(d.path), onChange: (e) => togglePick(d.path, e.target.checked) }), jsxs("button", { type: "button", className: "sf-browser__dir", onClick: () => open(d.path), title: "Open folder", children: ["\uD83D\uDCC1 ", d.name] }), jsx("span", { className: "sf-muted", children: d.linked_id ? "already linked" : "folder → .tar" })] }, d.path))), linkable.length > 0 && (jsxs("label", { className: "sf-check sf-browser__all", children: [jsx("input", { type: "checkbox", checked: linkable.length > 0 && linkable.every((f) => picked.has(f.path)), disabled: !linkable.length, onChange: (e) => setPicked(e.target.checked ? new Set(linkable.map((f) => f.path)) : new Set()) }), "Select everything here"] })), listing.files.map((f) => (jsxs("label", { className: `sf-check sf-browser__file${f.linked_id ? " sf-muted" : ""}`, children: [jsx("input", { type: "checkbox", disabled: !!f.linked_id, checked: picked.has(f.path), onChange: (e) => togglePick(f.path, e.target.checked) }), jsx("span", { className: "sf-browser__name", children: f.name }), jsx("span", { className: "sf-muted", children: f.linked_id ? "already linked" : formatSize(f.size) })] }, f.path))), !listing.dirs.length && !listing.files.length && jsx("p", { className: "sf-muted", children: "Empty directory" }), listing.truncated && jsx("p", { className: "sf-muted", children: "Showing the first 5000 entries." })] })), jsxs("div", { className: "sf-row sf-row--bottom", children: [jsx(FolderSelect, { label: "Show in Secure Files under", folders: folders, value: target, onChange: setTarget }), jsx("button", { type: "button", className: "sf-btn sf-btn--primary", disabled: busy || !picked.size, onClick: link, children: busy ? "Linking…" : `Link ${picked.size || ""}`.trim() })] }), result && jsx("p", { className: result.includes("skipped") ? "sf-error" : "sf-muted", children: result })] }));
+}
+function ServerFiles({ api, folders, onLinked, }) {
+    const [roots, setRoots] = useState(null);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        try {
+            setRoots((await api.roots()).roots);
+            setError(null);
+        }
+        catch (err) {
+            setError(errText(err));
+        }
+    }, [api]);
+    return (jsxs("details", { className: "sf-admin", onToggle: (e) => e.currentTarget.open && !roots && load(), children: [jsx("summary", { children: "Server files (admin)" }), jsxs("div", { className: "sf-stack", children: [jsx("p", { className: "sf-muted", children: "Link files or whole folders that already live on the server instead of uploading copies. A linked folder downloads as one uncompressed .tar with an exact size, and interrupted downloads can be resumed. Only items inside allowed directories can be linked; removing a directory immediately disables its links. Deleting a linked entry never touches the original. Available from the local network only." }), error && jsx("p", { className: "sf-error", children: error }), roots && (jsxs(Fragment, { children: [jsxs("div", { className: "sf-card", children: [jsx("h4", { children: "Allowed directories" }), roots.length === 0 ? (jsx("p", { className: "sf-muted", children: "None yet." })) : (jsx("ul", { className: "sf-roots", children: roots.map((r) => (jsxs("li", { children: [jsxs("span", { children: [jsx("code", { children: r.path }), " ", r.label && jsxs("span", { className: "sf-muted", children: ["\u2014 ", r.label] }), !r.exists && jsx("span", { className: "sf-error", children: " (missing)" })] }), jsx(ConfirmButton, { label: "Remove", onConfirm: async () => {
+                                                        try {
+                                                            setRoots((await api.removeRoot(r.id)).roots);
+                                                            onLinked();
+                                                        }
+                                                        catch (err) {
+                                                            setError(errText(err));
+                                                        }
+                                                    } })] }, r.id))) }))] }), jsx(AddRoot, { api: api, onAdded: setRoots }), jsx(Browser, { api: api, roots: roots, folders: folders, onLinked: onLinked })] }))] })] }));
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
-    return createPortal(jsxs(Fragment, { children: [jsx("div", { className: "modal-backdrop z-100", onClick: (e) => e.target === e.currentTarget && onClose() }), jsx("div", { className: "modal-wrapper z-110", children: jsxs("div", { ref: modalRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: "modal-panel", children: [jsxs("h3", { className: "form-title", children: ["Share settings for ", jsx("span", { className: "font-mono", children: file.filename })] }), error && jsx("p", { className: "form-error", children: error }), jsx(Checkbox, { label: "Enable sharing", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "checkbox" }), jsx(Input, { label: "Password (optional)", type: "text", value: strPassword, onChange: (e) => setStrPassword(e.target.value), disabled: !enabled, className: "form-input" }), jsx(Input, { label: "Download limit (0 = \u221E)", type: "number", min: 0, value: download_limit, onChange: (e) => setDownloadLimit(e.target.value === "" ? "" : Number(e.target.value)), disabled: !enabled, className: "form-input" }), enabled && shareLink && (jsx(Input, { label: "Share link", readOnly: true, value: shareLink, className: "form-input", trailing: jsx(Button, { variant: "icon", className: "btn-icon", onClick: () => navigator.clipboard.writeText(shareLink), children: jsx(ForwardRef$1, { className: "h-5 w-5" }) }) })), jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [jsx(Button, { color: "green", variant: "primary", onClick: handleSave, disabled: busy, className: "btn-primary", children: busy ? "Saving…" : "Save" }), jsx(Button, { variant: "secondary", onClick: onClose, disabled: busy, className: "btn-secondary", children: "Cancel" })] })] }) })] }), document.body);
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
 }
 
-// Build a directory tree from a flat file list
+var css_248z = ".sf-root{--sf-border:color-mix(in srgb,currentColor 22%,transparent);--sf-subtle:color-mix(in srgb,currentColor 6%,transparent);--sf-accent:#2563eb;--sf-danger:#dc2626;display:flex;flex-direction:column;font-size:14px;gap:16px;margin:0 auto;max-width:1100px;padding:16px;text-align:left}.sf-root *,.sf-root :after,.sf-root :before{box-sizing:border-box}.sf-head{align-items:baseline;display:flex;gap:12px;justify-content:space-between}.sf-head h2{font-size:1.4em;margin:0}.sf-muted{opacity:.7}.sf-error{color:var(--sf-danger)}.sf-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.sf-row--end{justify-content:flex-end}.sf-field{display:flex;flex:1;flex-direction:column;gap:4px;min-width:200px}.sf-input{background:var(--sf-subtle);border:1px solid var(--sf-border);border-radius:6px;color:inherit;font:inherit;min-width:0;padding:6px 10px;width:100%}.sf-row .sf-input{flex:1;width:auto}.sf-btn{background:var(--sf-subtle);border:1px solid var(--sf-border);border-radius:6px;color:inherit;cursor:pointer;font:inherit;padding:5px 12px;white-space:nowrap}.sf-btn:hover:not(:disabled){border-color:var(--sf-accent)}.sf-btn:disabled{cursor:default;opacity:.45}.sf-btn--primary{background:var(--sf-accent);border-color:var(--sf-accent);color:#fff}.sf-btn--armed,.sf-btn--danger:hover:not(:disabled){border-color:var(--sf-danger);color:var(--sf-danger)}.sf-btn--armed{background:color-mix(in srgb,var(--sf-danger) 12%,transparent)}.sf-icon-btn{background:none;border:1px solid transparent;border-radius:6px;color:inherit;cursor:pointer;font:inherit;padding:3px 6px}.sf-icon-btn:hover{border-color:var(--sf-border)}.sf-upload{display:flex;flex-direction:column;gap:10px}.sf-drop{align-items:center;border:2px dashed var(--sf-border);border-radius:12px;cursor:pointer;display:flex;gap:20px;padding:28px 24px;transition:border-color .15s,background .15s,box-shadow .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sf-drop:focus-visible,.sf-drop:hover{border-color:var(--sf-accent);box-shadow:0 4px 14px color-mix(in srgb,currentColor 10%,transparent);outline:none}.sf-drop p{margin:0}.sf-drop__icon{flex-shrink:0;height:72px;opacity:.6;width:72px}.sf-drop__title{font-size:1.1em;font-weight:600;margin-bottom:4px!important}.sf-drop__count{color:var(--sf-accent);font-weight:600;margin-top:6px!important}.sf-drop--active{background:color-mix(in srgb,var(--sf-accent) 8%,transparent);border-color:var(--sf-accent)}.sf-drop--active .sf-drop__icon{color:var(--sf-accent);opacity:1}.sf-mode{gap:14px}.sf-queue progress{width:120px}.sf-upload>.sf-row{align-items:flex-end}.sf-queue{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;max-height:200px;overflow:auto;padding:0}.sf-queue li{display:flex;gap:12px;justify-content:space-between}.sf-queue__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}.sf-search{max-width:320px}.sf-table-wrap{border:1px solid var(--sf-border);border-radius:8px;overflow-x:auto}.sf-table{border-collapse:collapse;width:100%}.sf-table td,.sf-table th{border-bottom:1px solid var(--sf-border);padding:8px 10px;text-align:left;vertical-align:middle}.sf-table tbody tr:last-child td{border-bottom:none}.sf-table th{background:var(--sf-subtle);font-weight:600}.sf-col-check{width:36px}.sf-col-actions{text-align:right!important}.sf-dir td{background:var(--sf-subtle)}.sf-dir__toggle{background:none;border:none;color:inherit;cursor:pointer;font:inherit;font-weight:600;padding:0}.sf-busy{opacity:.55}.sf-pill{background:var(--sf-subtle);border:1px solid var(--sf-border);border-radius:999px;color:inherit;cursor:pointer;font:inherit;font-size:12px;padding:2px 10px}.sf-pill--on{background:color-mix(in srgb,#16a34a 18%,transparent);border-color:#16a34a}.sf-overlay{align-items:center;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:1000}.sf-dialog{--sf-border:color-mix(in srgb,CanvasText 22%,transparent);--sf-subtle:color-mix(in srgb,CanvasText 6%,transparent);background:Canvas;border-radius:10px;color:CanvasText;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto;padding:18px 20px;text-align:left;width:min(520px,100%)}.sf-dialog__head{align-items:center;display:flex;justify-content:space-between}.sf-dialog__head h3{margin:0}.sf-dialog>.sf-muted{margin:0;word-break:break-all}.sf-dialog__foot{justify-content:flex-end}.sf-fieldset{border:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}.sf-fieldset:disabled{opacity:.5}.sf-fieldset p{margin:0}.sf-check{align-items:center;cursor:pointer;display:flex;gap:8px}.sf-check--inline{display:inline-flex}.sf-stack{display:flex;flex-direction:column;gap:12px}.sf-stack p{margin:0}.sf-row--bottom{align-items:flex-end}.sf-field--narrow{flex:0 1 200px;min-width:140px}.sf-admin{border:1px solid var(--sf-border);border-radius:10px;padding:10px 14px}.sf-admin>summary{cursor:pointer;font-weight:600}.sf-admin[open]>summary{margin-bottom:12px}.sf-card{border:1px solid var(--sf-border);border-radius:8px;display:flex;flex-direction:column;gap:10px;padding:12px}.sf-card h4,.sf-card p{margin:0}.sf-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;resize:vertical}.sf-roots{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.sf-roots li{align-items:center;display:flex;gap:12px;justify-content:space-between}.sf-root-select{max-width:420px}.sf-browser{border:1px solid var(--sf-border);border-radius:6px;display:flex;flex-direction:column;max-height:320px;overflow:auto}.sf-browser>*{border-bottom:1px solid var(--sf-border);padding:5px 10px}.sf-browser>:last-child{border-bottom:none}.sf-browser__dir{background:none;border:none;border-bottom:1px solid var(--sf-border);color:inherit;cursor:pointer;font:inherit;text-align:left}.sf-browser__all,.sf-browser__dir:hover{background:var(--sf-subtle)}.sf-browser__all{font-weight:600}.sf-browser__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-tag{border:1px solid var(--sf-border);border-radius:999px;display:inline-block;font-size:11px;margin-left:8px;padding:0 7px;vertical-align:middle}.sf-tag--warn{border-color:var(--sf-danger);color:var(--sf-danger)}.sf-strike{opacity:.7;text-decoration:line-through}.sf-browser__row{align-items:center;display:flex;gap:8px}.sf-browser__row .sf-browser__dir{border-bottom:none;flex:1;padding:0}";
+styleInject(css_248z);
+
 function buildTree(files) {
-    const root = { name: '', path: '', children: new Map(), files: [] };
-    files.forEach(file => {
-        const parts = file.filepath.split('/');
+    const root = { name: "", path: "", folders: new Map(), files: [] };
+    for (const f of files) {
+        const parts = f.filepath.split("/");
         let node = root;
-        parts.slice(0, -1).forEach((seg, idx) => {
-            const subPath = parts.slice(0, idx + 1).join('/');
-            if (!node.children.has(seg)) {
-                node.children.set(seg, { name: seg, path: subPath, children: new Map(), files: [] });
+        parts.slice(0, -1).forEach((part, i) => {
+            if (!node.folders.has(part)) {
+                node.folders.set(part, { name: part, path: parts.slice(0, i + 1).join("/"), folders: new Map(), files: [] });
             }
-            node = node.children.get(seg);
+            node = node.folders.get(part);
         });
-        node.files.push(file);
-    });
+        node.files.push(f);
+    }
     return root;
 }
-// Collect all file IDs under a node (recursive)
-function collectNodeIds(node) {
-    let ids = [];
-    node.files.forEach(f => ids.push(f.id));
-    node.children.forEach(child => {
-        ids = ids.concat(collectNodeIds(child));
-    });
-    return ids;
+function allFiles(node) {
+    return [...node.files, ...[...node.folders.values()].flatMap(allFiles)];
 }
-function FileTable({ files, loading, error, onToggleShare, onPatchShare, onDelete }) {
-    const { load } = useFiles();
-    const [search, setSearch] = useState('');
-    const [modalFile, setModalFile] = useState(null);
+function SecureFiles({ apiBase }) {
+    const api = useMemo(() => createApi(apiBase), [apiBase]);
+    const [files, setFiles] = useState([]);
+    const [user, setUser] = useState(null);
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [search, setSearch] = useState("");
     const [selected, setSelected] = useState(new Set());
-    const [expanded, setExpanded] = useState(new Set());
-    // Upload controls
-    const [uploadDir, setUploadDir] = useState('');
-    const [uploadFile, setUploadFile] = useState(null);
-    // Filter files by search term
-    const filtered = useMemo(() => files.filter(f => f.filename.toLowerCase().includes(search.trim().toLowerCase())), [files, search]);
-    // Build tree and directory paths list
-    const tree = useMemo(() => buildTree(filtered), [filtered]);
-    const allDirPaths = useMemo(() => {
-        const paths = [''];
-        function collect(node) {
-            node.children.forEach(child => {
-                paths.push(child.path);
-                collect(child);
-            });
+    const [collapsed, setCollapsed] = useState(new Set());
+    const [editing, setEditing] = useState(null);
+    const [busyIds, setBusyIds] = useState(new Set());
+    const load = useCallback(async () => {
+        setError(null);
+        try {
+            const data = await api.list();
+            setUser(data.user_name);
+            setIsAdmin(data.is_admin);
+            setFiles(data.files);
+            setSelected((prev) => new Set([...prev].filter((id) => data.files.some((f) => f.id === id))));
         }
-        collect(tree);
-        return paths;
-    }, [tree]);
-    // Selection & expand/collapse logic
-    const allIds = filtered.map(f => f.id);
-    const toggleAllSelection = () => selected.size < allIds.length ? setSelected(new Set(allIds)) : setSelected(new Set());
-    const toggleDirOpen = (path) => setExpanded(prev => {
-        const next = new Set(prev);
-        next.has(path) ? next.delete(path) : next.add(path);
-        return next;
-    });
-    const expandAll = () => setExpanded(new Set(allDirPaths));
-    const collapseAll = () => setExpanded(new Set());
-    // Recursive renderer: directory row with select-all checkbox, then its files, then subdirectories
-    const renderNode = (node, depth = 0) => {
-        const rows = [];
-        if (node.path) {
-            const isOpen = expanded.has(node.path);
-            const nodeIds = collectNodeIds(node);
-            const allSelected = nodeIds.every(id => selected.has(id));
-            const someSelected = nodeIds.some(id => selected.has(id));
-            rows.push(jsxs("tr", { children: [jsx("td", { className: "px-4 py-2 bg-gray-100", children: jsx("input", { type: "checkbox", checked: allSelected, ref: el => { if (el)
-                                el.indeterminate = !allSelected && someSelected; }, onChange: () => {
-                                setSelected(prev => {
-                                    const next = new Set(prev);
-                                    if (allSelected) {
-                                        nodeIds.forEach(id => next.delete(id));
-                                    }
-                                    else {
-                                        nodeIds.forEach(id => next.add(id));
-                                    }
-                                    return next;
-                                });
-                            } }) }), jsx("td", { className: "px-4 py-2 bg-gray-100 font-bold", colSpan: 5, style: { textAlign: 'left' }, children: node.path }), jsx("td", { className: "px-4 py-2 bg-gray-100 text-right", children: jsx("button", { onClick: () => toggleDirOpen(node.path), children: isOpen ? '▾' : '▸' }) })] }, node.path));
-            if (!isOpen)
-                return rows;
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
         }
-        // Render files in this directory
-        node.files.sort((a, b) => a.filename.localeCompare(b.filename)).forEach(f => {
-            const isOwner = f.uploader_id.toLowerCase() === (currentUsername() ?? '').toLowerCase();
-            const canDownload = isOwner || f.shareable;
-            rows.push(jsxs("tr", { children: [jsx("td", { className: "px-4 py-2", children: jsx("input", { type: "checkbox", checked: selected.has(f.id), onChange: () => setSelected(prev => {
-                                const next = new Set(prev);
-                                next.has(f.id) ? next.delete(f.id) : next.add(f.id);
-                                return next;
-                            }) }) }), jsx("td", { className: "px-4 py-2", style: { paddingLeft: (depth + 1) * 20 }, children: f.filename }), jsx("td", { className: "px-4 py-2", children: canDownload ? jsx(Button, { variant: "secondary", onClick: () => downloadFile(f), children: "Download" }) : jsx("span", { children: "\uD83D\uDD12" }) }), jsx("td", { className: "px-4 py-2", children: isOwner && jsx(Button, { variant: "icon", onClick: () => setModalFile(f), children: "\u2699\uFE0F" }) }), jsx("td", { className: "px-4 py-2", children: isOwner && jsx(Button, { variant: f.shareable ? 'primary' : 'secondary', onClick: () => onToggleShare(f), children: f.shareable ? 'Sharing' : 'Share' }) }), jsx("td", { className: "px-4 py-2", children: isOwner && jsx(Button, { variant: "icon", onClick: () => onDelete(f).then(load), children: "\uD83D\uDDD1" }) }), jsxs("td", { className: "px-4 py-2", children: [f.download_count, " / ", f.download_limit ?? '∞'] })] }, f.id));
-        });
-        // Render subdirectories
-        Array.from(node.children.values())
-            .sort((a, b) => a.name.localeCompare(b.name))
-            .forEach(child => rows.push(...renderNode(child, depth + 1)));
-        return rows;
-    };
-    // Batch actions
-    const handleDownloadAll = async () => {
-        const inputs = filtered.filter(f => selected.has(f.id)).map(f => document.createElement('input'));
-        inputs.forEach((cb, idx) => cb.value = filtered.filter(f => selected.has(f.id))[idx].filepath);
-        await downloadSelected(inputs);
-    };
-    const handleDeleteAll = async () => { await onDelete(filtered.filter(f => selected.has(f.id))); setSelected(new Set()); await load(); };
-    const handleShareAll = async () => { for (const f of filtered.filter(f => selected.has(f.id)))
-        await onToggleShare(f); };
-    if (loading)
-        return jsx(Spinner, {});
-    if (error)
-        return jsx("p", { className: "text-red-600", children: error.message });
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "mb-4 flex flex-col md:flex-row md:justify-between gap-4", children: [jsx(Input, { label: "Search files", type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Enter filename\u2026", className: "form-input flex-1" }), jsxs("div", { className: "flex gap-2", children: [jsx(Button, { onClick: expandAll, disabled: !allDirPaths.length, children: "Expand All" }), jsx(Button, { onClick: collapseAll, disabled: !allDirPaths.length, children: "Collapse All" }), jsx(Button, { onClick: handleDownloadAll, disabled: !selected.size, children: "Download Selected" }), jsx(Button, { color: "gray", onClick: handleDeleteAll, disabled: !selected.size, children: "Delete Selected" }), jsx(Button, { onClick: handleShareAll, disabled: !selected.size, children: "Share Selected" })] })] }), jsx("div", { className: "overflow-x-auto wm-container", children: jsxs("table", { className: "file-table w-full", children: [jsx("thead", { className: "wm-thead", children: jsxs("tr", { children: [jsx("th", { className: "px-4 py-2 w-12", children: jsx("input", { type: "checkbox", checked: selected.size === filtered.length && filtered.length > 0, onChange: toggleAllSelection }) }), jsx("th", { className: "px-4 py-2", children: "Filename" }), jsx("th", { className: "px-4 py-2", children: "Download" }), jsx("th", { className: "px-4 py-2", children: "Settings" }), jsx("th", { className: "px-4 py-2", children: "Share" }), jsx("th", { className: "px-4 py-2", children: "Delete" }), jsx("th", { className: "px-4 py-2", children: "Downloads" })] }) }), jsx("tbody", { children: renderNode(tree) })] }) }), jsx(ShareModal, { file: modalFile, onClose: () => setModalFile(null), onSave: async (patch) => {
-                    if (!modalFile)
-                        return;
-                    const updated = { ...modalFile, ...patch };
-                    await onPatchShare(updated);
-                    setModalFile(null);
-                } })] }));
-}
-
-// ── helpers ─────────────────────────────────────────────────────────────────
-/** Strip filename from a webkitRelativePath, keep the trailing slash. */
-function deriveRelPath(f) {
-    const wrp = f.webkitRelativePath;
-    if (!wrp)
-        return '';
-    const idx = wrp.lastIndexOf('/');
-    return idx >= 0 ? wrp.slice(0, idx + 1) : '';
-}
-/**
- * Drain a DirectoryReader completely. The browser only returns ~100 entries
- * per readEntries() call; you must call it repeatedly until it returns [].
- */
-function readAllEntries(reader) {
-    return new Promise((resolve, reject) => {
-        const all = [];
-        const pump = () => {
-            reader.readEntries((batch) => {
-                if (batch.length === 0)
-                    resolve(all);
-                else {
-                    all.push(...batch);
-                    pump();
-                }
-            }, reject);
-        };
-        pump();
-    });
-}
-// ── component ───────────────────────────────────────────────────────────────
-function Upload({ onUploaded }) {
-    const [queue, setQueue] = useState([]);
-    const [busy, setBusy] = useState(false);
-    const [message, setMessage] = useState(null);
-    const [drag, setDrag] = useState(false);
-    // Two refs: one for plain file picking, one for folder picking.
-    const fileInputRef = useRef(null);
-    const dirInputRef = useRef(null);
-    const [pickMode, setPickMode] = useState('files');
-    const [dirs, setDirs] = useState([]);
-    // — existing files → directory list —
-    const { files, load } = useFiles();
-    useEffect(() => {
-        const dirSet = new Set();
-        files.forEach(f => {
-            const parts = f.filepath.split('/');
-            if (parts.length > 1) {
-                parts.pop();
-                dirSet.add(parts.join('/') + '/');
-            }
-        });
-        setDirs(Array.from(dirSet).sort());
-    }, [files]);
-    // — directory selection state —
-    const [uploadDir, setUploadDir] = useState('');
-    const [creatingNew, setCreatingNew] = useState(false);
-    const [newDirName, setNewDirName] = useState('');
-    // — queue logic —
-    const enqueue = useCallback((incoming) => {
-        setQueue(prev => {
-            const map = new Map(prev.map(q => [`${q.file.name}-${q.file.size}`, q]));
-            incoming.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
-            return Array.from(map.values());
-        });
-    }, []);
-    const extractFromDataTransfer = useCallback(async (dt) => {
-        const items = Array.from(dt.items ?? []);
-        const hasEntryApi = items.length > 0 &&
-            typeof items[0].webkitGetAsEntry === 'function';
-        // Fallback: no entry API → flat files only, no folder traversal.
-        if (!hasEntryApi) {
-            return Array.from(dt.files ?? []).map(file => ({
-                file,
-                relPath: '',
-                progress: 0,
-            }));
+        finally {
+            setLoading(false);
         }
-        const out = [];
-        const walk = async (entry, path = '') => {
-            if (!entry)
-                return;
-            if (entry.isFile) {
-                const file = await new Promise((res, rej) => entry.file(res, rej));
-                out.push({ file, relPath: path, progress: 0 });
-                return;
-            }
-            if (entry.isDirectory) {
-                const reader = entry.createReader();
-                const entries = await readAllEntries(reader);
-                await Promise.all(entries.map(e => walk(e, `${path}${entry.name}/`)));
-            }
+    }, [api]);
+    useEffect(() => {
+        load();
+        const onVisible = () => document.visibilityState === "visible" && load();
+        document.addEventListener("visibilitychange", onVisible);
+        window.addEventListener("focus", onVisible);
+        return () => {
+            document.removeEventListener("visibilitychange", onVisible);
+            window.removeEventListener("focus", onVisible);
         };
-        await Promise.all(items.map(i => walk(i.webkitGetAsEntry?.())));
-        return out;
-    }, []);
-    const handleSelect = (e) => {
-        const picked = Array.from(e.target.files ?? []);
-        const queued = picked.map(f => ({
-            file: f,
-            relPath: deriveRelPath(f),
-            progress: 0,
-        }));
-        enqueue(queued);
-        e.target.value = '';
-    };
-    const handleDrop = async (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const dropped = await extractFromDataTransfer(e.dataTransfer);
-        if (dropped.length)
-            enqueue(dropped);
-        setDrag(false);
-    };
-    const openPicker = (e) => {
-        // Only fire when the dropzone background itself is clicked, not children.
-        if (e.target !== e.currentTarget && !e.target.closest('[data-dz-passthrough]')) ;
-        const ref = pickMode === 'folder' ? dirInputRef : fileInputRef;
-        ref.current?.click();
-    };
-    const handleUploadAll = async () => {
-        if (!queue.length) {
-            setMessage('No files queued.');
-            return;
-        }
-        setBusy(true);
-        setMessage(null);
-        const targetDir = creatingNew
-            ? (newDirName.trim().replace(/^\/+|\/+$/g, '') + '/')
-            : uploadDir;
+    }, [load]);
+    const run = async (ids, action) => {
+        setBusyIds((s) => new Set([...s, ...ids]));
+        setNotice(null);
         try {
-            for (const { file, relPath } of queue) {
-                await uploadFiles(file, targetDir + relPath);
-                setQueue(cur => cur.map(item => item.file === file ? { ...item, progress: 100 } : item));
-            }
-            setQueue([]);
-            await onUploaded(); // SecureFiles passes filesHook.load here
-            setMessage('Upload complete');
-            // (removed the duplicate load() — onUploaded already does it)
+            await action();
         }
-        catch {
-            setMessage('Upload failed');
+        catch (err) {
+            setNotice(err instanceof Error ? err.message : String(err));
         }
         finally {
-            setBusy(false);
+            setBusyIds((s) => new Set([...s].filter((id) => !ids.includes(id))));
         }
     };
-    // — directory selector handlers —
-    const handleDirChange = (e) => {
-        const v = e.target.value;
-        if (v === '__new__') {
-            setCreatingNew(true);
-            setNewDirName('');
-        }
-        else {
-            setCreatingNew(false);
-            setUploadDir(v);
-        }
+    const replaceFile = (file) => setFiles((fs) => fs.map((f) => (f.id === file.id ? file : f)));
+    const saveShare = async (update) => {
+        const { file } = await api.updateShare(update);
+        replaceFile(file);
     };
-    const acceptNewDir = () => {
-        const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
-        if (!cleanName) {
-            setCreatingNew(false);
+    const download = (items) => {
+        const ready = items.filter((f) => f.available);
+        if (!ready.length)
             return;
+        api.download(ready.map((f) => f.id));
+    };
+    const setShared = (items, shareable) => run(items.map((f) => f.id), async () => {
+        for (const f of items)
+            await saveShare({ id: f.id, shareable });
+    });
+    const remove = (items) => run(items.map((f) => f.id), async () => {
+        const res = await api.remove(items.map((f) => f.id));
+        if (res.errors.length)
+            setNotice(`${res.errors.length} file(s) could not be deleted`);
+        await load();
+    });
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return q ? files.filter((f) => f.filepath.toLowerCase().includes(q)) : files;
+    }, [files, search]);
+    const tree = useMemo(() => buildTree(filtered), [filtered]);
+    const folders = useMemo(() => {
+        const set = new Set();
+        for (const f of files) {
+            const parts = f.filepath.split("/").slice(0, -1);
+            parts.forEach((_, i) => set.add(parts.slice(0, i + 1).join("/")));
         }
-        const normalized = `${uploadDir}${cleanName}/`;
-        setDirs(prev => prev.includes(normalized) ? prev : [...prev, normalized].sort());
-        setUploadDir(normalized);
-        setCreatingNew(false);
-        setNewDirName('');
+        return [...set];
+    }, [files]);
+    const selectedFiles = files.filter((f) => selected.has(f.id));
+    const toggle = (ids, on) => setSelected((prev) => {
+        const next = new Set(prev);
+        ids.forEach((id) => (on ? next.add(id) : next.delete(id)));
+        return next;
+    });
+    const toggleFolder = (path) => setCollapsed((c) => {
+        const next = new Set(c);
+        next.has(path) ? next.delete(path) : next.add(path);
+        return next;
+    });
+    const allVisibleSelected = filtered.length > 0 && filtered.every((f) => selected.has(f.id));
+    const searching = search.trim().length > 0;
+    const renderFile = (f, depth) => {
+        const busy = busyIds.has(f.id);
+        return (jsxs("tr", { className: busy ? "sf-busy" : undefined, children: [jsx("td", { className: "sf-col-check", children: jsx("input", { type: "checkbox", "aria-label": `Select ${f.filename}`, checked: selected.has(f.id), onChange: (e) => toggle([f.id], e.target.checked) }) }), jsxs("td", { style: { paddingLeft: 10 + depth * 20 }, children: [jsx("span", { className: f.available ? undefined : "sf-strike", children: f.filename }), f.kind === "folder" && (jsx("span", { className: "sf-tag", title: "Downloads as one uncompressed, resumable .tar of the whole folder", children: "folder \u00B7 .tar" })), f.linked && (jsx("span", { className: "sf-tag", title: f.source_path ?? undefined, children: "linked" })), !f.available && (jsx("span", { className: "sf-tag sf-tag--warn", title: f.linked ? "Source file is gone or its directory is no longer allowed" : "File is missing on disk", children: "missing" }))] }), jsxs("td", { children: [jsx("button", { type: "button", className: `sf-pill${f.shareable ? " sf-pill--on" : ""}`, disabled: busy || !f.available, onClick: () => setShared([f], !f.shareable), title: f.shareable ? "Click to stop sharing" : "Click to share", children: f.shareable ? "Shared" : "Private" }), f.shareable && f.has_password && jsx("span", { title: "Password protected", children: " \uD83D\uDD12" })] }), jsxs("td", { children: [f.download_count, " / ", f.download_limit ?? "∞"] }), jsx("td", { className: "sf-col-actions", children: jsxs("div", { className: "sf-row sf-row--end", children: [jsx("button", { type: "button", className: "sf-btn", disabled: busy || !f.available, onClick: () => download([f]), children: "Download" }), f.shareable && f.available && jsx(CopyButton, { text: f.share_url }), jsx("button", { type: "button", className: "sf-icon-btn", "aria-label": `Share settings for ${f.filename}`, title: "Share settings", onClick: () => setEditing(f), children: "\u2699\uFE0F" }), jsx(ConfirmButton, { label: f.linked ? "Unlink" : "Delete", disabled: busy, onConfirm: () => remove([f]) })] }) })] }, f.id));
     };
-    return (jsxs("div", { className: "form-container max-w-2xl mx-auto", children: [jsxs("div", { className: "flex gap-4 text-xs text-gray-700 mb-1", children: [jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "radio", name: "pick-mode", checked: pickMode === 'files', onChange: () => setPickMode('files') }), "Files"] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "radio", name: "pick-mode", checked: pickMode === 'folder', onChange: () => setPickMode('folder') }), "Folder"] }), jsx("span", { className: "text-gray-400", children: "(drag-and-drop accepts either)" })] }), jsxs("div", { className: `flex items-center border-2 border-dashed rounded-lg p-6 bg-white shadow-md space-x-4 transition-shadow duration-150
-          ${drag ? 'border-indigo-500 bg-indigo-50 shadow-lg' : 'border-gray-300 hover:shadow-lg'}`, onClick: openPicker, onDragEnter: e => { e.preventDefault(); e.stopPropagation(); setDrag(true); }, onDragOver: e => { e.preventDefault(); e.stopPropagation(); }, onDragLeave: e => { e.preventDefault(); e.stopPropagation(); setDrag(false); }, onDrop: handleDrop, role: "region", "aria-label": "File upload area", children: [jsx(ForwardRef, { style: { width: 300, height: 300 }, className: "text-gray-500 mb-3", "aria-hidden": "true" }), jsxs("div", { className: "flex-1", children: [jsx("p", { className: "text-base font-semibold text-gray-700", children: "Drag & drop files or folders here" }), jsxs("p", { className: "text-xs text-gray-500 mt-1", children: ["Click to ", pickMode === 'folder' ? 'choose a folder' : 'choose files'] }), queue.length > 0 && (jsxs("p", { className: "mt-1 text-sm text-gray-600", children: [queue.length, " item", queue.length > 1 && 's', " queued"] }))] })] }), jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleSelect }), jsx("input", { ref: dirInputRef, type: "file", multiple: true, className: "hidden", ...{ webkitdirectory: '', directory: '' }, onChange: handleSelect }), jsxs("div", { className: "flex items-center justify-between mt-4", children: [jsx("div", { className: "flex-1 mr-4", children: !creatingNew ? (jsxs("select", { value: uploadDir, onChange: handleDirChange, className: "form-select w-full", children: [dirs.map(d => (jsx("option", { value: d, children: d }, d))), jsx("option", { value: "__new__", children: "+ Create new directory\u2026" })] })) : (jsxs("div", { className: "flex", children: [jsx("input", { type: "text", value: newDirName, placeholder: "new-folder-name", onChange: e => setNewDirName(e.target.value), onBlur: acceptNewDir, onKeyDown: e => e.key === 'Enter' && acceptNewDir(), className: "form-input flex-1" }), jsx(Button, { onClick: acceptNewDir, className: "ml-2", children: "OK" })] })) }), jsx(Button, { color: "blue", variant: "primary", onClick: handleUploadAll, disabled: busy || !queue.length, children: busy ? 'Uploading…' : `Upload ${queue.length}` })] }), message && (jsx("p", { className: `text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'}`, role: "alert", children: message })), queue.length > 0 && (jsxs("div", { className: "wm-container mt-4", children: [jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-700", children: "Queued Files" }), jsx("ul", { className: "max-h-64 space-y-4 overflow-y-auto", children: queue.map(({ file, relPath, progress }) => (jsxs("li", { className: "space-y-1", children: [jsxs("div", { className: "flex justify-between items-center", children: [jsxs("span", { className: "truncate text-sm text-gray-800", children: [relPath, file.name] }), jsxs("span", { className: "text-xs text-gray-500", children: [progress, "%"] })] }), jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 overflow-hidden", children: jsx("div", { className: "bg-indigo-600 h-2", style: { width: `${progress}%` } }) })] }, `${file.name}-${file.size}`))) })] }))] }));
+    const renderFolder = (node, depth) => {
+        const rows = [];
+        const subFolders = [...node.folders.values()].sort((a, b) => a.name.localeCompare(b.name));
+        const ownFiles = [...node.files].sort((a, b) => a.filename.localeCompare(b.filename));
+        for (const folder of subFolders) {
+            const contents = allFiles(folder);
+            const ids = contents.map((f) => f.id);
+            const open = searching || !collapsed.has(folder.path);
+            rows.push(jsxs("tr", { className: "sf-dir", children: [jsx("td", { className: "sf-col-check", children: jsx("input", { type: "checkbox", "aria-label": `Select folder ${folder.path}`, checked: ids.length > 0 && ids.every((id) => selected.has(id)), onChange: (e) => toggle(ids, e.target.checked) }) }), jsx("td", { colSpan: 4, style: { paddingLeft: 10 + depth * 20 }, children: jsxs("button", { type: "button", className: "sf-dir__toggle", onClick: () => toggleFolder(folder.path), children: [open ? "▾" : "▸", " \uD83D\uDCC1 ", folder.name, " ", jsxs("span", { className: "sf-muted", children: ["(", contents.length, ")"] })] }) })] }, `dir:${folder.path}`));
+            if (open)
+                rows.push(...renderFolder(folder, depth + 1));
+        }
+        rows.push(...ownFiles.map((f) => renderFile(f, depth)));
+        return rows;
+    };
+    return (jsxs("div", { className: "sf-root", children: [jsxs("header", { className: "sf-head", children: [jsx("h2", { children: "Secure Files" }), user && jsxs("span", { className: "sf-muted", children: ["Signed in as ", user] })] }), jsx(UploadPanel, { api: api, folders: folders, onUploaded: load }), isAdmin && jsx(ServerFiles, { api: api, folders: folders, onLinked: load }), jsxs("section", { className: "sf-toolbar", children: [jsx("input", { className: "sf-input sf-search", type: "search", placeholder: "Search files\u2026", value: search, onChange: (e) => setSearch(e.target.value) }), jsxs("div", { className: "sf-row", children: [jsxs("span", { className: "sf-muted", children: [selected.size, " selected"] }), folders.length > 0 && (jsxs(Fragment, { children: [jsx("button", { type: "button", className: "sf-btn", onClick: () => setCollapsed(new Set()), children: "Expand all" }), jsx("button", { type: "button", className: "sf-btn", onClick: () => setCollapsed(new Set(folders)), children: "Collapse all" })] })), jsx("button", { type: "button", className: "sf-btn", disabled: !selected.size, onClick: () => download(selectedFiles), children: "Download" }), jsx("button", { type: "button", className: "sf-btn", disabled: !selected.size, onClick: () => setShared(selectedFiles, true), children: "Share" }), jsx("button", { type: "button", className: "sf-btn", disabled: !selected.size, onClick: () => setShared(selectedFiles, false), children: "Unshare" }), jsx(ConfirmButton, { label: "Delete", disabled: !selected.size, onConfirm: () => remove(selectedFiles) })] })] }), notice && (jsx("p", { className: "sf-error", role: "alert", children: notice })), loading ? (jsx("p", { className: "sf-muted", children: "Loading\u2026" })) : error ? (jsx("p", { className: "sf-error", role: "alert", children: error })) : files.length === 0 ? (jsx("p", { className: "sf-muted", children: "No files yet \u2014 upload something above." })) : (jsx("div", { className: "sf-table-wrap", children: jsxs("table", { className: "sf-table", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "sf-col-check", children: jsx("input", { type: "checkbox", "aria-label": "Select all", checked: allVisibleSelected, onChange: (e) => toggle(filtered.map((f) => f.id), e.target.checked) }) }), jsx("th", { children: "Name" }), jsx("th", { children: "Sharing" }), jsx("th", { children: "Downloads" }), jsx("th", { className: "sf-col-actions", children: "Actions" })] }) }), jsx("tbody", { children: renderFolder(tree, 0) })] }) })), editing && (jsx(ShareDialog, { file: files.find((f) => f.id === editing.id) ?? editing, onClose: () => setEditing(null), onSave: saveShare }, editing.id))] }));
 }
 
-const SecureFiles = () => {
-    const [authChecked, setAuthChecked] = useState(false);
-    const [loggedIn, setLoggedIn] = useState(false);
-    const filesHook = useFiles();
-    useEffect(() => {
-        checkAuth().then(ok => {
-            setLoggedIn(ok);
-            setAuthChecked(true);
-        });
-    }, []);
-    if (!authChecked)
-        return null;
-    if (!loggedIn) {
-        return (jsx("p", { style: { textAlign: 'center', marginTop: '2rem', color: '#6b7280' }, children: "Please log in to access your files." }));
-    }
-    return (jsxs(Fragment, { children: [jsx(Upload, { onUploaded: filesHook.load }), jsx(FileTable, { files: filesHook.files, loading: filesHook.loading, error: filesHook.error, onDownload: filesHook.toggleShare, onToggleShare: filesHook.toggleShare, onPatchShare: filesHook.patchShareSettings, onDelete: filesHook.deleteFile })] }));
-};
-
-export { Button, Checkbox, FileRow, FileTable, Input, SecureFiles, ShareModal, Spinner, Upload, directDownload, downloadFile, downloadRow, downloadSelect, downloadSelected, initSelectAll, listFiles, patchFileSetting, removeFile, removeRow, removeSelected, syncHeaderCheckbox, toggleCheckboxes, toggleShare, triggerDownload, uploadFile, uploadFiles, useDeleteFile, useFiles, useLoadFiles, usePatchShareSettings, useSaveShareSettings, useToggleShare };
+export { ApiError, DEFAULT_API_BASE, SecureFiles, createApi };
 //# sourceMappingURL=index.js.map