@putkoff/abstract-securefiles 0.0.19 → 0.0.23

package/dist/index.cjs

@@ -1,8 +1,905 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var abstractFiles = require('@putkoff/abstract-files');
+var reactDom = require('react-dom');
 var abstractUtilities = require('@putkoff/abstract-utilities');
+var abstractApis = require('@putkoff/abstract-apis');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function ClipboardIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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__namespace.forwardRef(ClipboardIcon);
+
+function CloudArrowUpIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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__namespace.forwardRef(CloudArrowUpIcon);
+
+/** 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);
+}
+
+async function downloadFile(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",
+            // Don’t over-constrain Accept; let server pick proper content-type
+            // Accept: "application/octet-stream",
+        },
+        body: JSON.stringify(item),
+    });
+    if (!res.ok)
+        throw new Error(`Download failed: ${res.status}`);
+    // Stream-friendly: if your triggerDownload revokes URL immediately, wait a tick
+    const blob = await res.blob();
+    const name = item.filename || "download";
+    triggerDownload(blob, name); // ensure this waits ~0-100ms before URL.revokeObjectURL
+}
+
+async function downloadSelect(item) {
+    const token = abstractUtilities.requireToken();
+    const body = item;
+    const headers = {
+        Authorization: `Bearer ${token}`,
+        Accept: "application/octet-stream",
+        "Content-Type": "application/json"
+    };
+    const blob = await abstractApis.secureFetchIt("download", body, "POST", headers, true, true);
+    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;
+}
+
+/** 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 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();
+}
+
+/** Generic PATCH helper kept for other admin forms */
+async function patchFileSetting(fileId, field, value) {
+    const res = await fetch(`/files/${fileId}/settings/${field}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ value }),
+    });
+    if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || res.statusText);
+    }
+    return (await res.json());
+}
+
+/** Classic file-upload for the fallback HTML page. */
+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 formData = new FormData();
+    formData.append("file", fileInput.files[0]);
+    formData.append("subdir", subdirInput.value.trim());
+    try {
+        const json = await abstractApis.secureFetchIt("upload", formData, "POST", null, false, false);
+        banner.textContent = `Uploaded: ${json.filepath}`;
+        fileInput.value = "";
+        subdirInput.value = "";
+        window.location.reload(); // no-op in React view
+    }
+    catch (err) {
+        console.error("Upload failed", err);
+    }
+}
+
+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 formData = new FormData();
+    formData.append('file', file);
+    formData.append('subdir', subdir.trim());
+    try {
+        const json = await abstractApis.secureFetchIt('upload', formData, 'POST', null, false, false);
+        if (!json || typeof json !== 'object') {
+            throw new Error('Invalid response from server.');
+        }
+        if (!('filepath' in json) || typeof json.filepath !== 'string' || !json.filepath) {
+            throw new Error('Server response missing or invalid filepath.');
+        }
+        return { filepath: json.filepath };
+    }
+    catch (err) {
+        throw new Error(`Upload failed: ${err?.message ?? 'Unknown error'}`);
+    }
+}
+
+async function removeFile(item) {
+    const resp = await abstractApis.secureFetchIt("remove", item, "POST", null, false, false, true);
+    if (!resp || resp === false || resp?.result === false) {
+        throw new Error(`could not delete data: “${item.filename}”`);
+    }
+}
+
+/** 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;
+    }
+    for (const cb of list) {
+        alert(cb);
+        await removeFile(cb);
+    }
+}
+
+/** Given a checkbox inside a table-row → download that row’s file. */
+async function removeRow(cb) {
+    const row = cb.closest("tr");
+    abstractUtilities.alertit(row);
+    if (row && row?.id)
+        await removeFile(row);
+}
+
+/** GET /secure-list */
+async function listFiles(setFiles = null) {
+    /** ← your request already returns the raw array */
+    const apiRows = await abstractApis.secureFetchIt("/list", null, "GET", null, false, true);
+    /** map API → UI ------------------------------------------------ */
+    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,
+    }));
+    setFiles(rows);
+}
+
+function getToggleShare(file) {
+    if (file == true || file?.shareable == true) {
+        return false;
+    }
+    return false;
+}
+function updateFileShare(file) {
+    let updated = file;
+    const boolIt = getToggleShare(updated);
+    updated = { ...file, shareable: boolIt };
+    return updated;
+}
+/**
+ * Custom hook to toggle share settings on a file item
+ */
+async function toggleShare(file) {
+    const updated = updateFileShare(file);
+    try {
+        const resp = await abstractApis.fetchSharePatch(updated);
+    }
+    catch (err) {
+        console.error('Failed to toggle share settings', err);
+        // Optionally revert UI state or show an error message
+    }
+}
+
+/**
+ * Custom hook that returns a memoized loadFiles callback
+ */
+const useLoadFiles = (setLoading, setError, setFiles) => {
+    return abstractUtilities.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            /** ← your request already returns the raw array */
+            let apiRows = await abstractApis.secureFetchIt("list", null, "GET");
+            console.log(`all apiRows == ${JSON.stringify(apiRows)}`);
+            if (apiRows?.result) {
+                apiRows = apiRows.result;
+            }
+            apiRows = apiRows;
+            /** map API → UI ------------------------------------------------ */
+            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,
+            }));
+            setFiles(rows);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err
+                : new Error("Unknown error loading files"));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [setLoading, setError, setFiles]);
+};
+
+/**
+ * Custom hook to toggle share settings on a file item
+ */
+const useToggleShare = (setFiles) => {
+    return abstractUtilities.useCallback(async (file) => {
+        const updated = { ...file, shareable: !file.shareable };
+        if (!updated.shareable) {
+            updated.needsPassword = false;
+        }
+        try {
+            await abstractApis.fetchSharePatch(updated);
+            setFiles((curr) => curr.map((f) => (f.id === file.id ? updated : f)));
+        }
+        catch (err) {
+            console.error('Failed to toggle share settings', err);
+            // Optionally revert UI state or show an error message
+        }
+    }, [setFiles]);
+};
+
+/**
+ * Custom hook to toggle share settings on a file item
+ */
+const usePatchShareSettings = (setFiles) => {
+    return abstractUtilities.useCallback(async (file) => {
+        const body = {
+            id: file.id, // ← always send id
+        };
+        // now send whichever settings changed
+        body.shareable = file.shareable;
+        body.share_password = file.share_password ?? null;
+        body.password_str = file.password_str ?? null;
+        body.download_limit = file.download_limit ?? null;
+        console.log(`file contents == ${JSON.stringify(body)}`);
+        try {
+            await abstractApis.fetchSharePatch(body);
+            setFiles((curr) => curr.map((f) => (f.id === body.id ? body : f)));
+        }
+        catch (err) {
+            console.error('Failed to toggle share settings', err);
+            // Optionally revert UI state or show an error message
+        }
+    }, [setFiles]);
+};
+
+const useSaveShareSettings = (setFiles) => {
+    return abstractUtilities.useCallback(async (updated) => {
+        await abstractApis.fetchSharePatch({
+            id: updated.id,
+            shareable: updated.shareable,
+            share_password: updated.share_password,
+            password_str: updated.password_str,
+            download_limit: updated.download_limit,
+        });
+        // optimistic UI update – identical to toggleShare
+        setFiles(curr => curr.map(f => (f.id === updated.id ? updated : f)));
+    }, [setFiles]);
+};
+
+/**
+ * Custom hook to toggle share settings on a file item
+ */
+const useDeleteFile = (setFiles) => {
+    return abstractUtilities.useCallback(async (file) => {
+        try {
+            await removeFile(file);
+            window.location.reload();
+        }
+        catch (err) {
+            console.error('Failed to toggle share settings', err);
+            // Optionally revert UI state or show an error message
+        }
+    }, [setFiles]);
+};
+
+function useFiles() {
+    const [files, setFiles] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const loadCallback = useLoadFiles(setLoading, setError, setFiles);
+    const toggleShareCallback = useToggleShare(setFiles);
+    const patchShareSettingsCallback = useSaveShareSettings(setFiles);
+    const deleteFileCallback = useDeleteFile(setFiles);
+    React.useEffect(() => {
+        loadCallback();
+    }, [loadCallback]);
+    return {
+        files,
+        loading,
+        error,
+        load: loadCallback,
+        toggleShare: toggleShareCallback,
+        patchShareSettings: patchShareSettingsCallback,
+        deleteFile: deleteFileCallback,
+        setFiles,
+        setLoading,
+        setError,
+    };
+}
+
+function FileRow({ file, onDownload, onSettings, onToggleShare, onDelete, }) {
+    const isOwner = file.uploader_id?.toLowerCase() === (abstractUtilities.currentUsername() ?? '').toLowerCase();
+    const downloadAllowed = isOwner || file.shareable;
+    const [isDownloading, setIsDownloading] = abstractUtilities.useState(false);
+    const [isTogglingShare, setIsTogglingShare] = abstractUtilities.useState(false);
+    const [isDeleting, setIsDeleting] = abstractUtilities.useState(false);
+    // Mimic WindowManagerApp's unsaved heuristic
+    const looksUnsaved = file.filename.toLowerCase().startsWith('untitled') ||
+        file.filename.includes('*');
+    const handleDownload = async () => {
+        setIsDownloading(true);
+        try {
+            await onDownload();
+        }
+        finally {
+            setIsDownloading(false);
+        }
+    };
+    const handleToggleShare = async () => {
+        setIsTogglingShare(true);
+        try {
+            await onToggleShare();
+        }
+        finally {
+            setIsTogglingShare(false);
+        }
+    };
+    const handleDeleteFile = async () => {
+        setIsDeleting(true);
+        try {
+            await onDelete();
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    return (jsxRuntime.jsxs("tr", { className: "wm-row transition-colors duration-75", children: [jsxRuntime.jsx("td", { className: "wm-cell w-12 align-middle", children: jsxRuntime.jsx("input", { type: "checkbox", className: "wm-checkbox", "aria-label": `Select ${file.filename}` }) }), jsxRuntime.jsx("td", { className: `wm-cell ${looksUnsaved ? 'unsaved' : ''}`, children: file.filename }), jsxRuntime.jsx("td", { className: "wm-cell w-12 align-middle", children: downloadAllowed ? (jsxRuntime.jsx(abstractUtilities.Button, { color: "blue", variant: "secondary", onClick: handleDownload, disabled: isDownloading, "aria-label": `Download ${file.filename}`, className: "wm-btn-link", children: isDownloading ? 'Downloading...' : 'Download' })) : (jsxRuntime.jsx("span", { className: "text-gray-500 text-lg", "aria-label": "Download restricted", children: "\uD83D\uDD12" })) }), jsxRuntime.jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsxRuntime.jsx(abstractUtilities.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" })) }), jsxRuntime.jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsxRuntime.jsx(abstractUtilities.Button, { color: file.shareable ? 'blue' : 'gray', variant: file.shareable ? 'primary' : 'secondary', onClick: handleToggleShare, disabled: isTogglingShare, className: "btn", children: isTogglingShare
+                        ? 'Toggling...'
+                        : file.shareable
+                            ? 'Sharing'
+                            : 'Share' })) }), jsxRuntime.jsx("td", { className: "wm-cell w-12 align-middle", children: isOwner && (jsxRuntime.jsx(abstractUtilities.Button, { color: "gray", variant: "icon", onClick: handleDeleteFile, disabled: isDeleting, className: "wm-btn-icon text-lg", children: "\uD83D\uDDD1" })) }), jsxRuntime.jsxs("td", { className: "wm-cell", children: [file.download_count, " / ", file.download_limit ?? "∞"] })] }));
+}
+
+function ShareModal({ file, onClose, onSave }) {
+    const [fileId, setFileId] = abstractUtilities.useState("");
+    const [enabled, setEnabled] = abstractUtilities.useState(false);
+    const [password, setPassword] = abstractUtilities.useState(undefined);
+    const [strPassword, setStrPassword] = abstractUtilities.useState("");
+    const [download_limit, setDownloadLimit] = abstractUtilities.useState(0);
+    const [error, setError] = abstractUtilities.useState("");
+    const [busy, setBusy] = abstractUtilities.useState(false);
+    const modalRef = abstractUtilities.useRef(null);
+    const shareLink = file && enabled
+        ? `https://abstractendeavors.com/api/secure-files/secure-download/${file.id}`
+        : "";
+    abstractUtilities.useEffect(() => {
+        if (!file)
+            return;
+        setFileId(file.id);
+        setEnabled(file.shareable);
+        // load both values from the `file` prop
+        setPassword(file.share_password);
+        setStrPassword(file.password_str ?? "");
+        setDownloadLimit(file.download_limit ?? 0);
+        setError("");
+        modalRef.current?.focus();
+    }, [file]);
+    abstractUtilities.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;
+        }
+        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),
+        };
+        try {
+            const resp = await onSave(save_dict);
+            onClose();
+        }
+        catch (err) {
+            setError(`${err} Failed to save settings. Please try again.`);
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-backdrop z-100", onClick: (e) => e.target === e.currentTarget && onClose() }), jsxRuntime.jsx("div", { className: "modal-wrapper z-110", children: jsxRuntime.jsxs("div", { ref: modalRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: "modal-panel", children: [jsxRuntime.jsxs("h3", { className: "form-title", children: ["Share settings for ", jsxRuntime.jsx("span", { className: "font-mono", children: file.filename })] }), error && jsxRuntime.jsx("p", { className: "form-error", children: error }), jsxRuntime.jsx(abstractUtilities.Checkbox, { label: "Enable sharing", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "checkbox" }), jsxRuntime.jsx(abstractUtilities.Input, { label: "Password (optional)", type: "text", value: strPassword, onChange: (e) => setStrPassword(e.target.value), disabled: !enabled, className: "form-input" }), jsxRuntime.jsx(abstractUtilities.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 && (jsxRuntime.jsx(abstractUtilities.Input, { label: "Share link", readOnly: true, value: shareLink, className: "form-input", trailing: jsxRuntime.jsx(abstractUtilities.Button, { variant: "icon", className: "btn-icon", onClick: () => navigator.clipboard.writeText(shareLink), children: jsxRuntime.jsx(ForwardRef$1, { className: "h-5 w-5" }) }) })), jsxRuntime.jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [jsxRuntime.jsx(abstractUtilities.Button, { color: "green", variant: "primary", onClick: handleSave, disabled: busy, className: "btn-primary", children: busy ? "Saving…" : "Save" }), jsxRuntime.jsx(abstractUtilities.Button, { variant: "secondary", onClick: onClose, disabled: busy, className: "btn-secondary", children: "Cancel" })] })] }) })] }), document.body);
+}
+
+// Build a directory tree from a flat file list
+function buildTree(files) {
+    const root = { name: '', path: '', children: new Map(), files: [] };
+    files.forEach(file => {
+        const parts = file.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: [] });
+            }
+            node = node.children.get(seg);
+        });
+        node.files.push(file);
+    });
+    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 FileTable({ files, loading, error, onToggleShare, onPatchShare, onDelete }) {
+    const { load } = useFiles();
+    const [search, setSearch] = React.useState('');
+    const [modalFile, setModalFile] = React.useState(null);
+    const [selected, setSelected] = React.useState(new Set());
+    const [expanded, setExpanded] = React.useState(new Set());
+    // Upload controls
+    const [uploadDir, setUploadDir] = React.useState('');
+    const [uploadFile, setUploadFile] = React.useState(null);
+    // Filter files by search term
+    const filtered = React.useMemo(() => files.filter(f => f.filename.toLowerCase().includes(search.trim().toLowerCase())), [files, search]);
+    // Build tree and directory paths list
+    const tree = React.useMemo(() => buildTree(filtered), [filtered]);
+    const allDirPaths = React.useMemo(() => {
+        const paths = [''];
+        function collect(node) {
+            node.children.forEach(child => {
+                paths.push(child.path);
+                collect(child);
+            });
+        }
+        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(jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { className: "px-4 py-2 bg-gray-100", children: jsxRuntime.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;
+                                });
+                            } }) }), jsxRuntime.jsx("td", { className: "px-4 py-2 bg-gray-100 font-bold", colSpan: 5, style: { textAlign: 'left' }, children: node.path }), jsxRuntime.jsx("td", { className: "px-4 py-2 bg-gray-100 text-right", children: jsxRuntime.jsx("button", { onClick: () => toggleDirOpen(node.path), children: isOpen ? '▾' : '▸' }) })] }, node.path));
+            if (!isOpen)
+                return rows;
+        }
+        // Render files in this directory
+        node.files.sort((a, b) => a.filename.localeCompare(b.filename)).forEach(f => {
+            const isOwner = f.uploader_id.toLowerCase() === (abstractUtilities.currentUsername() ?? '').toLowerCase();
+            const canDownload = isOwner || f.shareable;
+            rows.push(jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { className: "px-4 py-2", children: jsxRuntime.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;
+                            }) }) }), jsxRuntime.jsx("td", { className: "px-4 py-2", style: { paddingLeft: (depth + 1) * 20 }, children: f.filename }), jsxRuntime.jsx("td", { className: "px-4 py-2", children: canDownload ? jsxRuntime.jsx(abstractUtilities.Button, { variant: "secondary", onClick: () => downloadFile(f), children: "Download" }) : jsxRuntime.jsx("span", { children: "\uD83D\uDD12" }) }), jsxRuntime.jsx("td", { className: "px-4 py-2", children: isOwner && jsxRuntime.jsx(abstractUtilities.Button, { variant: "icon", onClick: () => setModalFile(f), children: "\u2699\uFE0F" }) }), jsxRuntime.jsx("td", { className: "px-4 py-2", children: isOwner && jsxRuntime.jsx(abstractUtilities.Button, { variant: f.shareable ? 'primary' : 'secondary', onClick: () => onToggleShare(f), children: f.shareable ? 'Sharing' : 'Share' }) }), jsxRuntime.jsx("td", { className: "px-4 py-2", children: isOwner && jsxRuntime.jsx(abstractUtilities.Button, { variant: "icon", onClick: () => onDelete(f).then(load), children: "\uD83D\uDDD1" }) }), jsxRuntime.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 jsxRuntime.jsx(abstractUtilities.Spinner, {});
+    if (error)
+        return jsxRuntime.jsx("p", { className: "text-red-600", children: error.message });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "mb-4 flex flex-col md:flex-row md:justify-between gap-4", children: [jsxRuntime.jsx(abstractUtilities.Input, { label: "Search files", type: "text", value: search, onChange: e => setSearch(e.target.value), placeholder: "Enter filename\u2026", className: "form-input flex-1" }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(abstractUtilities.Button, { onClick: expandAll, disabled: !allDirPaths.length, children: "Expand All" }), jsxRuntime.jsx(abstractUtilities.Button, { onClick: collapseAll, disabled: !allDirPaths.length, children: "Collapse All" }), jsxRuntime.jsx(abstractUtilities.Button, { onClick: handleDownloadAll, disabled: !selected.size, children: "Download Selected" }), jsxRuntime.jsx(abstractUtilities.Button, { color: "gray", onClick: handleDeleteAll, disabled: !selected.size, children: "Delete Selected" }), jsxRuntime.jsx(abstractUtilities.Button, { onClick: handleShareAll, disabled: !selected.size, children: "Share Selected" })] })] }), jsxRuntime.jsx("div", { className: "overflow-x-auto wm-container", children: jsxRuntime.jsxs("table", { className: "file-table w-full", children: [jsxRuntime.jsx("thead", { className: "wm-thead", children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { className: "px-4 py-2 w-12", children: jsxRuntime.jsx("input", { type: "checkbox", checked: selected.size === filtered.length && filtered.length > 0, onChange: toggleAllSelection }) }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Filename" }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Download" }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Settings" }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Share" }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Delete" }), jsxRuntime.jsx("th", { className: "px-4 py-2", children: "Downloads" })] }) }), jsxRuntime.jsx("tbody", { children: renderNode(tree) })] }) }), jsxRuntime.jsx(ShareModal, { file: modalFile, onClose: () => setModalFile(null), onSave: async (patch) => {
+                    if (!modalFile)
+                        return;
+                    const updated = { ...modalFile, ...patch };
+                    await onPatchShare(updated);
+                    setModalFile(null);
+                } })] }));
+}
+
+function Upload({ onUploaded }) {
+    const [queue, setQueue] = React.useState([]);
+    const [busy, setBusy] = React.useState(false);
+    const [message, setMessage] = React.useState(null);
+    const [drag, setDrag] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const [dirs, setDirs] = React.useState([]);
+    // — existing files → directory list —
+    const { files, load } = useFiles();
+    React.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] = React.useState('');
+    const [creatingNew, setCreatingNew] = React.useState(false);
+    const [newDirName, setNewDirName] = React.useState('');
+    // — queue logic —
+    const enqueue = React.useCallback((files) => {
+        setQueue(prev => {
+            const map = new Map(prev.map(q => [`${q.file.name}-${q.file.size}`, q]));
+            files.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
+            return Array.from(map.values());
+        });
+    }, []);
+    const extractFromDataTransfer = React.useCallback(async (dt) => {
+        const out = [];
+        const walk = async (entry, path = "") => {
+            if (!entry)
+                return;
+            if (entry.isFile) {
+                const file = await new Promise(res => entry.file(res));
+                out.push({ file, relPath: path, progress: 0 });
+            }
+            else if (entry.isDirectory) {
+                const reader = entry.createReader();
+                const entries = await new Promise(r => reader.readEntries(r));
+                await Promise.all(entries.map(e => walk(e, `${path}${entry.name}/`)));
+            }
+        };
+        await Promise.all(Array.from(dt.items).map(i => walk(i.webkitGetAsEntry())));
+        return out;
+    }, []);
+    const handleSelect = (e) => {
+        const files = Array.from(e.target.files || []);
+        const queued = files.map(f => ({
+            file: f,
+            relPath: f.webkitRelativePath.replace(/[^/]*$/, ""),
+            progress: 0,
+        }));
+        enqueue(queued);
+        e.target.value = "";
+    };
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        const files = await extractFromDataTransfer(e.dataTransfer);
+        enqueue(files.length ? files : []);
+        setDrag(false);
+    };
+    const handleUploadAll = async () => {
+        if (!queue.length) {
+            setMessage("No files queued.");
+            return;
+        }
+        setBusy(true);
+        setMessage(null);
+        const targetDir = creatingNew
+            ? (newDirName.trim().replace(/^\/+|\/+$/g, "") + "/")
+            : uploadDir;
+        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();
+            setMessage("Upload complete");
+            load();
+        }
+        catch {
+            setMessage("Upload failed");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    // — directory selector handlers —
+    const handleDirChange = (e) => {
+        const v = e.target.value;
+        if (v === "__new__") {
+            setCreatingNew(true);
+            setNewDirName("");
+        }
+        else {
+            setCreatingNew(false);
+            setUploadDir(v);
+        }
+    };
+    const acceptNewDir = () => {
+        // normalize like before
+        const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
+        const normalized = `${uploadDir}${cleanName}/`;
+        // ① add it to our dirs list if it isn't there already
+        setDirs(prev => {
+            if (prev.includes(normalized))
+                return prev;
+            return [...prev, normalized].sort();
+        });
+        // ② select it & flip back to the <select>
+        setUploadDir(normalized);
+        setCreatingNew(false);
+        setNewDirName('');
+    };
+    return (jsxRuntime.jsxs("div", { className: "form-container max-w-2xl mx-auto", children: [jsxRuntime.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: () => inputRef.current?.click(), onDragEnter: e => { e.preventDefault(); setDrag(true); }, onDragOver: e => e.preventDefault(), onDragLeave: () => setDrag(false), onDrop: handleDrop, role: "region", "aria-label": "File upload area", children: [jsxRuntime.jsx(ForwardRef, { style: { width: 300, height: 300 }, className: "text-gray-500 mb-3", "aria-hidden": "true" }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("p", { className: "text-base font-semibold text-gray-700", children: "Drag & drop files or folders here" }), queue.length > 0 && (jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-gray-600", children: [queue.length, " item", queue.length > 1 && 's', " queued"] }))] })] }), jsxRuntime.jsx("input", { ref: inputRef, type: "file", multiple: true, className: "hidden", ...{ webkitdirectory: true, directory: '' }, onChange: handleSelect }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-4", children: [jsxRuntime.jsx("div", { className: "flex-1 mr-4", children: !creatingNew ? (jsxRuntime.jsxs("select", { value: uploadDir, onChange: handleDirChange, className: "form-select w-full", children: [dirs.map(d => (jsxRuntime.jsx("option", { value: d, children: d }, d))), jsxRuntime.jsx("option", { value: "__new__", children: "+ Create new directory\u2026" })] })) : (jsxRuntime.jsxs("div", { className: "flex", children: [jsxRuntime.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" }), jsxRuntime.jsx(abstractUtilities.Button, { onClick: acceptNewDir, className: "ml-2", children: "OK" })] })) }), jsxRuntime.jsx(abstractUtilities.Button, { color: "blue", variant: "primary", onClick: handleUploadAll, disabled: busy || !queue.length, children: busy ? 'Uploading…' : `Upload ${queue.length}` })] }), message && (jsxRuntime.jsx("p", { className: `text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'}`, role: "alert", children: message })), queue.length > 0 && (jsxRuntime.jsxs("div", { className: "wm-container mt-4", children: [jsxRuntime.jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-700", children: "Queued Files" }), jsxRuntime.jsx("ul", { className: "max-h-64 space-y-4 overflow-y-auto", children: queue.map(({ file, relPath, progress }) => (jsxRuntime.jsxs("li", { className: "space-y-1", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("span", { className: "truncate text-sm text-gray-800", children: [relPath, file.name] }), jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [progress, "%"] })] }), jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 overflow-hidden", children: jsxRuntime.jsx("div", { className: "bg-indigo-600 h-2", style: { width: `${progress}%` } }) })] }, `${file.name}-${file.size}`))) })] }))] }));
+}
+
+// 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 (jsxRuntime.jsx("button", { className: classes.join(' '), ...rest, children: children }));
+}
+function Checkbox({ label, className = '', classNames = [], ...rest }) {
+    const classes = combineClassNames(classNames, ['checkbox', 'wm-checkbox']);
+    return (jsxRuntime.jsxs("label", { className: classes.join(' '), children: [jsxRuntime.jsx("input", { type: "checkbox", className: "wm-checkbox", ...rest }), label && jsxRuntime.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 (jsxRuntime.jsxs("label", { className: classes.join(' '), children: [label && jsxRuntime.jsx("span", { className: "form-label", children: label }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("input", { className: inputClasses.join(' '), ...rest }), trailing] })] }));
+}
+function Spinner() {
+    const classes = combineClassNames('animate-pulse');
+    return jsxRuntime.jsx("p", { className: classes.join(' '), children: "Loading\u2026" });
+}
 
 function checkTokenValid() {
     const tok = abstractUtilities.getToken();
@@ -10,9 +907,42 @@ function checkTokenValid() {
 }
 const SecureFiles = () => {
     const [loggedIn, setLoggedIn] = abstractUtilities.useState(checkTokenValid());
-    const filesHook = abstractFiles.useFiles(); // ← one single hook instance
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(abstractFiles.Upload, { onUploaded: filesHook.load }), jsxRuntime.jsx(abstractFiles.FileTable, { files: filesHook.files, loading: filesHook.loading, error: filesHook.error, onDownload: filesHook.toggleShare, onToggleShare: filesHook.toggleShare, onPatchShare: filesHook.patchShareSettings, onDelete: filesHook.deleteFile })] }));
+    const filesHook = useFiles(); // ← one single hook instance
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Upload, { onUploaded: filesHook.load }), jsxRuntime.jsx(FileTable, { files: filesHook.files, loading: filesHook.loading, error: filesHook.error, onDownload: filesHook.toggleShare, onToggleShare: filesHook.toggleShare, onPatchShare: filesHook.patchShareSettings, onDelete: filesHook.deleteFile })] }));
 };
 
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.FileRow = FileRow;
+exports.FileTable = FileTable;
+exports.Input = Input;
 exports.SecureFiles = SecureFiles;
+exports.ShareModal = ShareModal;
+exports.Spinner = Spinner;
+exports.Upload = Upload;
+exports.directDownload = directDownload;
+exports.downloadFile = downloadFile;
+exports.downloadRow = downloadRow;
+exports.downloadSelect = downloadSelect;
+exports.downloadSelected = downloadSelected;
+exports.getToggleShare = getToggleShare;
+exports.initSelectAll = initSelectAll;
+exports.listFiles = listFiles;
+exports.patchFileSetting = patchFileSetting;
+exports.removeFile = removeFile;
+exports.removeRow = removeRow;
+exports.removeSelected = removeSelected;
+exports.syncHeaderCheckbox = syncHeaderCheckbox;
+exports.toggleCheckboxes = toggleCheckboxes;
+exports.toggleShare = toggleShare;
+exports.triggerDownload = triggerDownload;
+exports.updateFileShare = updateFileShare;
+exports.uploadFile = uploadFile;
+exports.uploadFiles = uploadFiles;
+exports.useDeleteFile = useDeleteFile;
+exports.useFiles = useFiles;
+exports.useLoadFiles = useLoadFiles;
+exports.usePatchShareSettings = usePatchShareSettings;
+exports.useSaveShareSettings = useSaveShareSettings;
+exports.useToggleShare = useToggleShare;
 //# sourceMappingURL=index.cjs.map