@putkoff/abstract-securefiles 0.0.48 → 0.0.50

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@putkoff/abstract-securefiles",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "A reusable Secure file system",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@putkoff/shared-scripts": "file:../../shared-scripts",
@@ -30,19 +31,14 @@
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
-    "undici-types": "^7.11.0"
-  },
-  "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "@putkoff/abstract-apis": "0.0.472",
-    "@putkoff/abstract-files": "0.0.316",
-    "@putkoff/abstract-utilities": "1.0.158",
+    "undici-types": "^7.11.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@tailwindcss/postcss": "^4.1.11",
     "rollup-plugin-dts": "^6.2.1",
     "tslib": "^2.8.1"
   },
+  "dependencies": {},
   "scripts": {
     "build": "tsc --emitDeclarationOnly && rollup -c",
     "test": "jest",
@@ -50,5 +46,13 @@
   },
   "type": "module",
   "author": "putkoff",
-  "license": "MIT"
+  "license": "MIT",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ]
 }

package/src/ConfirmButton.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+
+export function ConfirmButton({
+  label,
+  onConfirm,
+  disabled,
+}: {
+  label: string;
+  onConfirm: () => void;
+  disabled?: boolean;
+}) {
+  const [armed, setArmed] = useState(false);
+  useEffect(() => {
+    if (!armed) return;
+    const t = setTimeout(() => setArmed(false), 3000);
+    return () => clearTimeout(t);
+  }, [armed]);
+  return (
+    <button
+      type="button"
+      className={`sf-btn sf-btn--danger${armed ? " sf-btn--armed" : ""}`}
+      disabled={disabled}
+      onClick={() => {
+        if (armed) {
+          setArmed(false);
+          onConfirm();
+        } else {
+          setArmed(true);
+        }
+      }}
+    >
+      {armed ? "Confirm" : label}
+    </button>
+  );
+}

package/src/CopyButton.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export function CopyButton({ text, label = "Copy link" }: { text: string; label?: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return (
+    <button type="button" className="sf-btn" onClick={copy}>
+      {copied ? "Copied" : label}
+    </button>
+  );
+}

package/src/FolderSelect.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+
+const NEW_FOLDER = "__new__";
+
+export function FolderSelect({
+  label,
+  folders,
+  value,
+  onChange,
+}: {
+  label: string;
+  folders: string[];
+  value: string;
+  onChange: (folder: string) => void;
+}) {
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [extra, setExtra] = useState<string[]>([]);
+  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);
+    }
+    setCreating(false);
+    setDraft("");
+  };
+
+  return (
+    <div className="sf-field">
+      <span>{label}</span>
+      {creating ? (
+        <div className="sf-row">
+          <input
+            className="sf-input"
+            autoFocus
+            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);
+            }}
+          />
+          <button type="button" className="sf-btn" onClick={accept}>
+            OK
+          </button>
+        </div>
+      ) : (
+        <select
+          className="sf-input"
+          value={value}
+          onChange={(e) => (e.target.value === NEW_FOLDER ? setCreating(true) : onChange(e.target.value))}
+        >
+          <option value="">/ (top level)</option>
+          {options.map((d) => (
+            <option key={d} value={d}>
+              {d}/
+            </option>
+          ))}
+          <option value={NEW_FOLDER}>+ Create new directory…</option>
+        </select>
+      )}
+    </div>
+  );
+}

package/src/SecureFiles.tsx

@@ -0,0 +1,346 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createApi } from "./api";
+import type { SecureFile, SecureFilesProps, ShareUpdate } from "./types";
+import { UploadPanel } from "./UploadPanel";
+import { ShareDialog } from "./ShareDialog";
+import { CopyButton } from "./CopyButton";
+import { ConfirmButton } from "./ConfirmButton";
+import { ServerFiles } from "./ServerFiles";
+import "./styles.css";
+
+interface FolderNode {
+  name: string;
+  path: string;
+  folders: Map<string, FolderNode>;
+  files: SecureFile[];
+}
+
+function buildTree(files: SecureFile[]): FolderNode {
+  const root: FolderNode = { name: "", path: "", folders: new Map(), files: [] };
+  for (const f of files) {
+    const parts = f.filepath.split("/");
+    let node = root;
+    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.folders.get(part)!;
+    });
+    node.files.push(f);
+  }
+  return root;
+}
+
+function allFiles(node: FolderNode): SecureFile[] {
+  return [...node.files, ...[...node.folders.values()].flatMap(allFiles)];
+}
+
+export default function SecureFiles({ apiBase }: SecureFilesProps) {
+  const api = useMemo(() => createApi(apiBase), [apiBase]);
+  const [files, setFiles] = useState<SecureFile[]>([]);
+  const [user, setUser] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [editing, setEditing] = useState<SecureFile | null>(null);
+  const [busyIds, setBusyIds] = useState<Set<number>>(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))));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [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);
+    };
+  }, [load]);
+
+  const run = async (ids: number[], action: () => Promise<unknown>) => {
+    setBusyIds((s) => new Set([...s, ...ids]));
+    setNotice(null);
+    try {
+      await action();
+    } catch (err) {
+      setNotice(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusyIds((s) => new Set([...s].filter((id) => !ids.includes(id))));
+    }
+  };
+
+  const replaceFile = (file: SecureFile) => setFiles((fs) => fs.map((f) => (f.id === file.id ? file : f)));
+
+  const saveShare = async (update: ShareUpdate) => {
+    const { file } = await api.updateShare(update);
+    replaceFile(file);
+  };
+
+  const download = (items: SecureFile[]) => {
+    const ready = items.filter((f) => f.available);
+    if (!ready.length) return;
+    api.download(ready.map((f) => f.id));
+  };
+
+  const setShared = (items: SecureFile[], shareable: boolean) =>
+    run(
+      items.map((f) => f.id),
+      async () => {
+        for (const f of items) await saveShare({ id: f.id, shareable });
+      }
+    );
+
+  const remove = (items: SecureFile[]) =>
+    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<string>();
+    for (const f of files) {
+      const parts = f.filepath.split("/").slice(0, -1);
+      parts.forEach((_, i) => set.add(parts.slice(0, i + 1).join("/")));
+    }
+    return [...set];
+  }, [files]);
+
+  const selectedFiles = files.filter((f) => selected.has(f.id));
+  const toggle = (ids: number[], on: boolean) =>
+    setSelected((prev) => {
+      const next = new Set(prev);
+      ids.forEach((id) => (on ? next.add(id) : next.delete(id)));
+      return next;
+    });
+  const toggleFolder = (path: string) =>
+    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: SecureFile, depth: number) => {
+    const busy = busyIds.has(f.id);
+    return (
+      <tr key={f.id} className={busy ? "sf-busy" : undefined}>
+        <td className="sf-col-check">
+          <input
+            type="checkbox"
+            aria-label={`Select ${f.filename}`}
+            checked={selected.has(f.id)}
+            onChange={(e) => toggle([f.id], e.target.checked)}
+          />
+        </td>
+        <td style={{ paddingLeft: 10 + depth * 20 }}>
+          <span className={f.available ? undefined : "sf-strike"}>{f.filename}</span>
+          {f.kind === "folder" && (
+            <span className="sf-tag" title="Downloads as one uncompressed, resumable .tar of the whole folder">
+              folder · .tar
+            </span>
+          )}
+          {f.linked && (
+            <span className="sf-tag" title={f.source_path ?? undefined}>
+              linked
+            </span>
+          )}
+          {!f.available && (
+            <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"}
+            >
+              missing
+            </span>
+          )}
+        </td>
+        <td>
+          <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"}
+          >
+            {f.shareable ? "Shared" : "Private"}
+          </button>
+          {f.shareable && f.has_password && <span title="Password protected"> 🔒</span>}
+        </td>
+        <td>
+          {f.download_count} / {f.download_limit ?? "∞"}
+        </td>
+        <td className="sf-col-actions">
+          <div className="sf-row sf-row--end">
+            <button type="button" className="sf-btn" disabled={busy || !f.available} onClick={() => download([f])}>
+              Download
+            </button>
+            {f.shareable && f.available && <CopyButton text={f.share_url} />}
+            <button
+              type="button"
+              className="sf-icon-btn"
+              aria-label={`Share settings for ${f.filename}`}
+              title="Share settings"
+              onClick={() => setEditing(f)}
+            >
+              ⚙️
+            </button>
+            <ConfirmButton label={f.linked ? "Unlink" : "Delete"} disabled={busy} onConfirm={() => remove([f])} />
+          </div>
+        </td>
+      </tr>
+    );
+  };
+
+  const renderFolder = (node: FolderNode, depth: number): React.ReactNode[] => {
+    const rows: React.ReactNode[] = [];
+    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(
+        <tr key={`dir:${folder.path}`} className="sf-dir">
+          <td className="sf-col-check">
+            <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)}
+            />
+          </td>
+          <td colSpan={4} style={{ paddingLeft: 10 + depth * 20 }}>
+            <button type="button" className="sf-dir__toggle" onClick={() => toggleFolder(folder.path)}>
+              {open ? "▾" : "▸"} 📁 {folder.name} <span className="sf-muted">({contents.length})</span>
+            </button>
+          </td>
+        </tr>
+      );
+      if (open) rows.push(...renderFolder(folder, depth + 1));
+    }
+    rows.push(...ownFiles.map((f) => renderFile(f, depth)));
+    return rows;
+  };
+
+  return (
+    <div className="sf-root">
+      <header className="sf-head">
+        <h2>Secure Files</h2>
+        {user && <span className="sf-muted">Signed in as {user}</span>}
+      </header>
+
+      <UploadPanel api={api} folders={folders} onUploaded={load} />
+
+      {isAdmin && <ServerFiles api={api} folders={folders} onLinked={load} />}
+
+      <section className="sf-toolbar">
+        <input
+          className="sf-input sf-search"
+          type="search"
+          placeholder="Search files…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <div className="sf-row">
+          <span className="sf-muted">{selected.size} selected</span>
+          {folders.length > 0 && (
+            <>
+              <button type="button" className="sf-btn" onClick={() => setCollapsed(new Set())}>
+                Expand all
+              </button>
+              <button type="button" className="sf-btn" onClick={() => setCollapsed(new Set(folders))}>
+                Collapse all
+              </button>
+            </>
+          )}
+          <button type="button" className="sf-btn" disabled={!selected.size} onClick={() => download(selectedFiles)}>
+            Download
+          </button>
+          <button type="button" className="sf-btn" disabled={!selected.size} onClick={() => setShared(selectedFiles, true)}>
+            Share
+          </button>
+          <button type="button" className="sf-btn" disabled={!selected.size} onClick={() => setShared(selectedFiles, false)}>
+            Unshare
+          </button>
+          <ConfirmButton label="Delete" disabled={!selected.size} onConfirm={() => remove(selectedFiles)} />
+        </div>
+      </section>
+
+      {notice && (
+        <p className="sf-error" role="alert">
+          {notice}
+        </p>
+      )}
+
+      {loading ? (
+        <p className="sf-muted">Loading…</p>
+      ) : error ? (
+        <p className="sf-error" role="alert">
+          {error}
+        </p>
+      ) : files.length === 0 ? (
+        <p className="sf-muted">No files yet — upload something above.</p>
+      ) : (
+        <div className="sf-table-wrap">
+          <table className="sf-table">
+            <thead>
+              <tr>
+                <th className="sf-col-check">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all"
+                    checked={allVisibleSelected}
+                    onChange={(e) => toggle(filtered.map((f) => f.id), e.target.checked)}
+                  />
+                </th>
+                <th>Name</th>
+                <th>Sharing</th>
+                <th>Downloads</th>
+                <th className="sf-col-actions">Actions</th>
+              </tr>
+            </thead>
+            <tbody>{renderFolder(tree, 0)}</tbody>
+          </table>
+        </div>
+      )}
+
+      {editing && (
+        <ShareDialog
+          key={editing.id}
+          file={files.find((f) => f.id === editing.id) ?? editing}
+          onClose={() => setEditing(null)}
+          onSave={saveShare}
+        />
+      )}
+    </div>
+  );
+}