@putkoff/abstract-securefiles 0.0.45 → 0.0.48

package/dist/FileHandlers/FileTable/imports.d.ts

@@ -1,4 +1,4 @@
 export { FileRow } from './../FileRow';
 export { ShareModal } from './../ShareModal';
 export type { FileItem, FileTableProps } from './../imports';
-export { useState, useFiles, downloadFile, Spinner, fetchSharePatch, Input, currentUsername, Button } from './../imports';
+export { useState, useFiles, downloadFile, Spinner, Input, currentUsername, Button } from './../imports';

package/dist/FileHandlers/imports.d.ts

@@ -1,4 +1,4 @@
 export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps } from './../imports';
-export { CloudArrowUpIcon, currentUsername, Button, Checkbox, Input, Spinner, useEffect, useRef, useState, useCallback, ClipboardIcon, createPortal, fetchSharePatch } from './../imports';
+export { CloudArrowUpIcon, currentUsername, Button, Checkbox, Input, Spinner, useEffect, useRef, useState, useCallback, ClipboardIcon, createPortal, } from './../imports';
 export { useFiles } from './../hooks';
 export { downloadFile, uploadFiles } from './../file_utils';

package/dist/file_utils/imports.d.ts

@@ -1,2 +1,2 @@
-export { fetchSharePatch, requireToken, alertit, fetchIt, stripPrefixes, make_path, secureFetchIt } from "./../imports";
+export { requireToken, alertit, fetchIt, stripPrefixes, make_path } from "./../imports";
 export type { FileItem, ApiRow } from "./../types";

package/dist/file_utils/src/delete_utils/imports.d.ts

@@ -1 +1 @@
-export { secureFetchIt, requireToken, alertit } from "./../imports";
+export { requireToken, alertit } from "./../imports";

package/dist/file_utils/src/download_utils/imports.d.ts

@@ -1,2 +1,2 @@
-export { secureFetchIt, requireToken } from './../imports';
+export { requireToken } from './../imports';
 export type { FileItem } from './../imports';

package/dist/file_utils/src/download_utils/src/download_select.d.ts

@@ -1,2 +1,2 @@
-import { FileItem } from './../imports';
+import type { FileItem } from './../imports';
 export declare function downloadSelect(item: FileItem): Promise<void>;

package/dist/file_utils/src/imports.d.ts

@@ -1,2 +1,2 @@
 export type { FileItem, ApiRow } from './../../types/src/types';
-export { alertit, requireToken, secureFetchIt, fetchSharePatch } from './../imports';
+export { alertit, requireToken } from './../imports';

package/dist/file_utils/src/list_utils/imports.d.ts

@@ -1,2 +1 @@
-export { secureFetchIt, fetchSharePatch } from './../imports';
 export type { FileItem, ApiRow } from './../imports';

package/dist/file_utils/src/share_utils/imports.d.ts

@@ -1,2 +1 @@
 export type { FileItem } from './../../../types/src/types';
-export { fetchSharePatch } from './../imports';

package/dist/hooks/imports.d.ts

@@ -1,3 +1,3 @@
 export type { FileItem, ApiRow } from './../imports';
-export { secureFetchIt, fetchSharePatch, alertit, useCallback, isLoggedIn } from './../imports';
+export { alertit, useCallback, isLoggedIn } from './../imports';
 export { toggleShare, removeFile, listFiles, downloadFile } from './../file_utils';

package/dist/hooks/useFiles/imports.d.ts

@@ -1,2 +1,2 @@
 export type { FileItem, ApiRow } from './../imports';
-export { secureFetchIt, fetchSharePatch, alertit, toggleShare, removeFile, listFiles, useCallback, downloadFile, isLoggedIn } from './../imports';
+export { alertit, toggleShare, removeFile, listFiles, useCallback, downloadFile, isLoggedIn } from './../imports';

package/dist/imports.d.ts

@@ -4,4 +4,3 @@ export { useEffect, useRef, useState, useCallback } from 'react';
 export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps, ApiRow, EnhancedInputProps } from './types';
 export { currentUsername, alertit, requireToken, isLoggedIn, fetchIt, stripPrefixes, make_path } from "@putkoff/abstract-utilities";
 export { Button, Checkbox, Input, Spinner } from './UI';
-export { secureFetchIt, fetchSharePatch } from "@putkoff/abstract-apis";

package/dist/index.cjs

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var React = require('react');
 var abstractUtilities = require('@putkoff/abstract-utilities');
-var abstractApis = require('@putkoff/abstract-apis');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -184,110 +183,6 @@ async function downloadFile(item) {
     triggerDownload(blob, item.filename || "download");
 }
 
-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();
-}
-
-const API_BASE$1 = '/api/secure-files';
-/** Generic PATCH helper for file-level admin settings. */
-async function patchFileSetting(fileId, field, value) {
-    const res = await fetch(`${API_BASE$1}/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());
-}
-
 /**
  * Cookie-authenticated API helpers.
  * All requests include credentials: 'include' so the browser sends the
@@ -324,10 +219,10 @@ function resolveApiBase() {
     // 4. Same-origin default
     return "/api/secure-files";
 }
-const API_BASE = resolveApiBase();
+const API_BASE$1 = resolveApiBase();
 function apiUrl(path) {
     const p = path.startsWith("/") ? path : `/${path}`;
-    return `${API_BASE}${p}`;
+    return `${API_BASE$1}${p}`;
 }
 /**
  * Generic JSON fetch with session-cookie auth.
@@ -388,6 +283,118 @@ async function cookieUpload(file, relPath = "") {
         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",
+        },
+        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;
+}
+
+/** 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();
+}
+
+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());
+}
 
 /** File-upload helper (used by non-React fallback pages). */
 async function uploadFile(file, subdir) {
@@ -857,12 +864,45 @@ function FileTable({ files, loading, error, onToggleShare, onPatchShare, onDelet
                 } })] }));
 }
 
+// ── 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] = 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);
+    // Two refs: one for plain file picking, one for folder picking.
+    const fileInputRef = React.useRef(null);
+    const dirInputRef = React.useRef(null);
+    const [pickMode, setPickMode] = React.useState('files');
     const [dirs, setDirs] = React.useState([]);
     // — existing files → directory list —
     const { files, load } = useFiles();
@@ -882,56 +922,76 @@ function Upload({ onUploaded }) {
     const [creatingNew, setCreatingNew] = React.useState(false);
     const [newDirName, setNewDirName] = React.useState('');
     // — queue logic —
-    const enqueue = React.useCallback((files) => {
+    const enqueue = React.useCallback((incoming) => {
         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));
+            incoming.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
             return Array.from(map.values());
         });
     }, []);
     const extractFromDataTransfer = React.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,
+            }));
+        }
         const out = [];
-        const walk = async (entry, path = "") => {
+        const walk = async (entry, path = '') => {
             if (!entry)
                 return;
             if (entry.isFile) {
-                const file = await new Promise(res => entry.file(res));
+                const file = await new Promise((res, rej) => entry.file(res, rej));
                 out.push({ file, relPath: path, progress: 0 });
+                return;
             }
-            else if (entry.isDirectory) {
+            if (entry.isDirectory) {
                 const reader = entry.createReader();
-                const entries = await new Promise(r => reader.readEntries(r));
+                const entries = await readAllEntries(reader);
                 await Promise.all(entries.map(e => walk(e, `${path}${entry.name}/`)));
             }
         };
-        await Promise.all(Array.from(dt.items).map(i => walk(i.webkitGetAsEntry())));
+        await Promise.all(items.map(i => walk(i.webkitGetAsEntry?.())));
         return out;
     }, []);
     const handleSelect = (e) => {
-        const files = Array.from(e.target.files || []);
-        const queued = files.map(f => ({
+        const picked = Array.from(e.target.files ?? []);
+        const queued = picked.map(f => ({
             file: f,
-            relPath: f.webkitRelativePath.replace(/[^/]*$/, ""),
+            relPath: deriveRelPath(f),
             progress: 0,
         }));
         enqueue(queued);
-        e.target.value = "";
+        e.target.value = '';
     };
     const handleDrop = async (e) => {
         e.preventDefault();
-        const files = await extractFromDataTransfer(e.dataTransfer);
-        enqueue(files.length ? files : []);
+        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.");
+            setMessage('No files queued.');
             return;
         }
         setBusy(true);
         setMessage(null);
         const targetDir = creatingNew
-            ? (newDirName.trim().replace(/^\/+|\/+$/g, "") + "/")
+            ? (newDirName.trim().replace(/^\/+|\/+$/g, '') + '/')
             : uploadDir;
         try {
             for (const { file, relPath } of queue) {
@@ -939,12 +999,12 @@ function Upload({ onUploaded }) {
                 setQueue(cur => cur.map(item => item.file === file ? { ...item, progress: 100 } : item));
             }
             setQueue([]);
-            await onUploaded();
-            setMessage("Upload complete");
-            load();
+            await onUploaded(); // SecureFiles passes filesHook.load here
+            setMessage('Upload complete');
+            // (removed the duplicate load() — onUploaded already does it)
         }
         catch {
-            setMessage("Upload failed");
+            setMessage('Upload failed');
         }
         finally {
             setBusy(false);
@@ -953,9 +1013,9 @@ function Upload({ onUploaded }) {
     // — directory selector handlers —
     const handleDirChange = (e) => {
         const v = e.target.value;
-        if (v === "__new__") {
+        if (v === '__new__') {
             setCreatingNew(true);
-            setNewDirName("");
+            setNewDirName('');
         }
         else {
             setCreatingNew(false);
@@ -963,22 +1023,19 @@ function Upload({ onUploaded }) {
         }
     };
     const acceptNewDir = () => {
-        // normalize like before
         const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
+        if (!cleanName) {
+            setCreatingNew(false);
+            return;
+        }
         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>
+        setDirs(prev => prev.includes(normalized) ? prev : [...prev, normalized].sort());
         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(Button, { onClick: acceptNewDir, className: "ml-2", children: "OK" })] })) }), jsxRuntime.jsx(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}`))) })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: "form-container max-w-2xl mx-auto", children: [jsxRuntime.jsxs("div", { className: "flex gap-4 text-xs text-gray-700 mb-1", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "radio", name: "pick-mode", checked: pickMode === 'files', onChange: () => setPickMode('files') }), "Files"] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "radio", name: "pick-mode", checked: pickMode === 'folder', onChange: () => setPickMode('folder') }), "Folder"] }), jsxRuntime.jsx("span", { className: "text-gray-400", children: "(drag-and-drop accepts either)" })] }), 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: 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: [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" }), jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: ["Click to ", pickMode === 'folder' ? 'choose a folder' : 'choose files'] }), 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: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleSelect }), jsxRuntime.jsx("input", { ref: dirInputRef, type: "file", multiple: true, className: "hidden", ...{ webkitdirectory: '', 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(Button, { onClick: acceptNewDir, className: "ml-2", children: "OK" })] })) }), jsxRuntime.jsx(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}`))) })] }))] }));
 }
 
 const SecureFiles = () => {