@putkoff/abstract-securefiles 0.0.47 → 0.0.49

package/src/api.ts

@@ -0,0 +1,119 @@
+import type { BrowseResult, LinkRoot, RootChallenge, SecureFile, ShareUpdate } from "./types";
+
+export const DEFAULT_API_BASE = "https://api.abstractendeavors.com";
+
+export class ApiError extends Error {
+  constructor(message: string, public status: number) {
+    super(message);
+  }
+}
+
+async function errorFrom(res: Response): Promise<ApiError> {
+  let message = `${res.status} ${res.statusText}`;
+  try {
+    const body = await res.json();
+    message = body?.message || body?.error || message;
+  } catch {
+    /* non-JSON error body */
+  }
+  if (res.status === 401) message = "Please log in to use Secure Files.";
+  return new ApiError(message, res.status);
+}
+
+export function createApi(apiBase: string = DEFAULT_API_BASE) {
+  const root = `${apiBase.replace(/\/+$/, "")}/secure-files`;
+
+  async function json<T>(path: string, init: RequestInit = {}): Promise<T> {
+    const res = await fetch(`${root}${path}`, {
+      credentials: "include",
+      ...init,
+      headers: { Accept: "application/json", ...(init.body ? { "Content-Type": "application/json" } : {}) },
+    });
+    if (!res.ok) throw await errorFrom(res);
+    return res.json();
+  }
+
+  return {
+    list: () => json<{ user_name: string; is_admin: boolean; files: SecureFile[] }>("/userInfo"),
+
+    roots: () => json<{ roots: LinkRoot[] }>("/admin/roots"),
+
+    requestRoot: (path: string) =>
+      json<{ challenge: RootChallenge }>("/admin/roots", { method: "POST", body: JSON.stringify({ path }) }),
+
+    confirmRoot: (nonce: string, signature: string, label?: string) =>
+      json<{ roots: LinkRoot[] }>("/admin/roots/confirm", {
+        method: "POST",
+        body: JSON.stringify({ nonce, signature, label }),
+      }),
+
+    removeRoot: (id: number) => json<{ roots: LinkRoot[] }>(`/admin/roots/${id}`, { method: "DELETE" }),
+
+    browse: (path: string) => json<BrowseResult>(`/admin/browse?path=${encodeURIComponent(path)}`),
+
+    link: (paths: string[], folder: string) =>
+      json<{ linked: string[]; errors: { path: string; error: string }[] }>("/admin/link", {
+        method: "POST",
+        body: JSON.stringify({ paths, folder }),
+      }),
+
+    updateShare: (update: ShareUpdate) =>
+      json<{ file: SecureFile }>("/files/share", { method: "PATCH", body: JSON.stringify(update) }),
+
+    remove: (ids: number[]) =>
+      json<{ removed: number[]; errors: { id: number; error: string }[] }>("/remove", {
+        method: "POST",
+        body: JSON.stringify({ ids }),
+      }),
+
+    async download(ids: number[], fallbackName: string): Promise<void> {
+      const res = await fetch(`${root}/download`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids }),
+      });
+      if (!res.ok) throw await errorFrom(res);
+      const disposition = res.headers.get("Content-Disposition") || "";
+      const match = /filename\*?=(?:UTF-8'')?"?([^";]+)"?/i.exec(disposition);
+      const name = match ? decodeURIComponent(match[1]) : fallbackName;
+      const url = URL.createObjectURL(await res.blob());
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    },
+
+    upload(file: File, relPath: string, onProgress?: (fraction: number) => void): Promise<void> {
+      return new Promise((resolve, reject) => {
+        const form = new FormData();
+        form.append("file", file);
+        form.append("rel_path", relPath);
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", `${root}/upload`);
+        xhr.withCredentials = true;
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) onProgress?.(e.loaded / e.total);
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) return resolve();
+          let message = `Upload failed (${xhr.status})`;
+          try {
+            message = JSON.parse(xhr.responseText)?.message || message;
+          } catch {
+            /* non-JSON */
+          }
+          if (xhr.status === 401) message = "Please log in to use Secure Files.";
+          reject(new ApiError(message, xhr.status));
+        };
+        xhr.onerror = () => reject(new ApiError("Network error during upload", 0));
+        xhr.send(form);
+      });
+    },
+  };
+}
+
+export type SecureFilesApi = ReturnType<typeof createApi>;

package/src/index.ts

@@ -1,8 +1,4 @@
-export { FileRow, ShareModal, FileTable, Upload } from './FileHandlers';
-export { useFiles } from './hooks';
-export * from './file_utils';
-export * from './hooks';
-export * from './UI';
-export * from './types';
-export * from './styles';
-export { SecureFiles } from './App'
+export { default as SecureFiles } from "./SecureFiles";
+export { createApi, DEFAULT_API_BASE, ApiError } from "./api";
+export type { SecureFilesApi } from "./api";
+export type { SecureFile, ShareUpdate, SecureFilesProps, LinkRoot, RootChallenge, BrowseResult } from "./types";

package/src/styles.css

@@ -0,0 +1,432 @@
+.sf-root {
+  --sf-border: color-mix(in srgb, currentColor 22%, transparent);
+  --sf-subtle: color-mix(in srgb, currentColor 6%, transparent);
+  --sf-accent: #2563eb;
+  --sf-danger: #dc2626;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-size: 14px;
+  text-align: left;
+}
+.sf-root *,
+.sf-root *::before,
+.sf-root *::after {
+  box-sizing: border-box;
+}
+.sf-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.sf-head h2 {
+  margin: 0;
+  font-size: 1.4em;
+}
+.sf-muted {
+  opacity: 0.7;
+}
+.sf-error {
+  color: var(--sf-danger);
+}
+.sf-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.sf-row--end {
+  justify-content: flex-end;
+}
+.sf-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 200px;
+}
+.sf-input {
+  font: inherit;
+  color: inherit;
+  background: var(--sf-subtle);
+  border: 1px solid var(--sf-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  width: 100%;
+  min-width: 0;
+}
+.sf-row .sf-input {
+  flex: 1;
+  width: auto;
+}
+.sf-btn {
+  font: inherit;
+  color: inherit;
+  background: var(--sf-subtle);
+  border: 1px solid var(--sf-border);
+  border-radius: 6px;
+  padding: 5px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sf-btn:hover:not(:disabled) {
+  border-color: var(--sf-accent);
+}
+.sf-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.sf-btn--primary {
+  background: var(--sf-accent);
+  border-color: var(--sf-accent);
+  color: #fff;
+}
+.sf-btn--danger:hover:not(:disabled),
+.sf-btn--armed {
+  border-color: var(--sf-danger);
+  color: var(--sf-danger);
+}
+.sf-btn--armed {
+  background: color-mix(in srgb, var(--sf-danger) 12%, transparent);
+}
+.sf-icon-btn {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 3px 6px;
+  cursor: pointer;
+}
+.sf-icon-btn:hover {
+  border-color: var(--sf-border);
+}
+.sf-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sf-drop {
+  border: 2px dashed var(--sf-border);
+  border-radius: 12px;
+  padding: 28px 24px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+.sf-drop:hover,
+.sf-drop:focus-visible {
+  border-color: var(--sf-accent);
+  box-shadow: 0 4px 14px color-mix(in srgb, currentColor 10%, transparent);
+  outline: none;
+}
+.sf-drop p {
+  margin: 0;
+}
+.sf-drop__icon {
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+.sf-drop__title {
+  font-size: 1.1em;
+  font-weight: 600;
+  margin-bottom: 4px !important;
+}
+.sf-drop__count {
+  margin-top: 6px !important;
+  font-weight: 600;
+  color: var(--sf-accent);
+}
+.sf-drop--active {
+  border-color: var(--sf-accent);
+  background: color-mix(in srgb, var(--sf-accent) 8%, transparent);
+}
+.sf-drop--active .sf-drop__icon {
+  opacity: 1;
+  color: var(--sf-accent);
+}
+.sf-mode {
+  gap: 14px;
+}
+.sf-queue progress {
+  width: 120px;
+}
+.sf-upload > .sf-row {
+  align-items: flex-end;
+}
+.sf-queue {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 200px;
+  overflow: auto;
+}
+.sf-queue li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.sf-queue__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sf-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.sf-search {
+  max-width: 320px;
+}
+.sf-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--sf-border);
+  border-radius: 8px;
+}
+.sf-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.sf-table th,
+.sf-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--sf-border);
+  text-align: left;
+  vertical-align: middle;
+}
+.sf-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.sf-table th {
+  font-weight: 600;
+  background: var(--sf-subtle);
+}
+.sf-col-check {
+  width: 36px;
+}
+.sf-col-actions {
+  text-align: right !important;
+}
+.sf-dir td {
+  background: var(--sf-subtle);
+}
+.sf-dir__toggle {
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.sf-busy {
+  opacity: 0.55;
+}
+.sf-pill {
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  background: var(--sf-subtle);
+  border: 1px solid var(--sf-border);
+  border-radius: 999px;
+  padding: 2px 10px;
+  cursor: pointer;
+}
+.sf-pill--on {
+  background: color-mix(in srgb, #16a34a 18%, transparent);
+  border-color: #16a34a;
+}
+.sf-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+.sf-dialog {
+  background: Canvas;
+  color: CanvasText;
+  border-radius: 10px;
+  padding: 18px 20px;
+  width: min(520px, 100%);
+  max-height: 90vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: left;
+  --sf-border: color-mix(in srgb, CanvasText 22%, transparent);
+  --sf-subtle: color-mix(in srgb, CanvasText 6%, transparent);
+}
+.sf-dialog__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sf-dialog__head h3 {
+  margin: 0;
+}
+.sf-dialog > .sf-muted {
+  margin: 0;
+  word-break: break-all;
+}
+.sf-dialog__foot {
+  justify-content: flex-end;
+}
+.sf-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sf-fieldset:disabled {
+  opacity: 0.5;
+}
+.sf-fieldset p {
+  margin: 0;
+}
+.sf-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.sf-check--inline {
+  display: inline-flex;
+}
+.sf-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sf-stack p {
+  margin: 0;
+}
+.sf-row--bottom {
+  align-items: flex-end;
+}
+.sf-field--narrow {
+  flex: 0 1 200px;
+  min-width: 140px;
+}
+.sf-admin {
+  border: 1px solid var(--sf-border);
+  border-radius: 10px;
+  padding: 10px 14px;
+}
+.sf-admin > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.sf-admin[open] > summary {
+  margin-bottom: 12px;
+}
+.sf-card {
+  border: 1px solid var(--sf-border);
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sf-card h4 {
+  margin: 0;
+}
+.sf-card p {
+  margin: 0;
+}
+.sf-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  resize: vertical;
+}
+.sf-roots {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sf-roots li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.sf-root-select {
+  max-width: 420px;
+}
+.sf-browser {
+  border: 1px solid var(--sf-border);
+  border-radius: 6px;
+  max-height: 320px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.sf-browser > * {
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--sf-border);
+}
+.sf-browser > *:last-child {
+  border-bottom: none;
+}
+.sf-browser__dir {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--sf-border);
+  text-align: left;
+  cursor: pointer;
+}
+.sf-browser__dir:hover {
+  background: var(--sf-subtle);
+}
+.sf-browser__all {
+  background: var(--sf-subtle);
+  font-weight: 600;
+}
+.sf-browser__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sf-tag {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 0 7px;
+  font-size: 11px;
+  border-radius: 999px;
+  border: 1px solid var(--sf-border);
+  vertical-align: middle;
+}
+.sf-tag--warn {
+  border-color: var(--sf-danger);
+  color: var(--sf-danger);
+}
+.sf-strike {
+  text-decoration: line-through;
+  opacity: 0.7;
+}

package/src/types.ts

@@ -0,0 +1,54 @@
+export interface SecureFile {
+  id: number;
+  filename: string;
+  filepath: string;
+  uploader_id: string;
+  shareable: boolean;
+  has_password: boolean;
+  download_count: number;
+  download_limit: number | null;
+  created_at: string | null;
+  share_url: string;
+  /** true when the entry points at a file elsewhere on the server instead of an upload */
+  linked: boolean;
+  source_path: string | null;
+  /** false when the file is missing on disk (or its allowed directory was removed) */
+  available: boolean;
+}
+
+export interface LinkRoot {
+  id: number;
+  path: string;
+  label: string | null;
+  exists: boolean;
+}
+
+export interface RootChallenge {
+  nonce: string;
+  message: string;
+  command: string;
+  expires: number;
+}
+
+export interface BrowseResult {
+  path: string;
+  root: string;
+  parent: string | null;
+  dirs: string[];
+  files: { name: string; path: string; size: number; linked_id: number | null }[];
+  truncated: boolean;
+}
+
+export interface ShareUpdate {
+  id: number;
+  shareable?: boolean;
+  download_limit?: number | null;
+  /** null/undefined = leave unchanged, "" = remove, otherwise the new password */
+  password?: string | null;
+  reset_count?: boolean;
+}
+
+export interface SecureFilesProps {
+  /** API origin; defaults to https://api.abstractendeavors.com */
+  apiBase?: string;
+}

package/css.d.ts

@@ -1,2 +0,0 @@
-declare module '*.css';
-declare module '*.module.css';

package/dist/App/SecureFiles.d.ts

@@ -1,4 +0,0 @@
-import './../styles/SecureFiles/index.css';
-import React from 'react';
-declare const SecureFiles: React.FC;
-export default SecureFiles;

package/dist/App/index.d.ts

@@ -1 +0,0 @@
-export { default as SecureFiles } from './SecureFiles';

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

@@ -1,2 +0,0 @@
-export type { FileRowProps } from './../imports';
-export { useState, Button, currentUsername } from './../imports';

package/dist/FileHandlers/FileRow/index.d.ts

@@ -1 +0,0 @@
-export { FileRow } from './src';

package/dist/FileHandlers/FileRow/src/index.d.ts

@@ -1 +0,0 @@
-export { default as FileRow } from './row_utils';

package/dist/FileHandlers/FileRow/src/row_utils.d.ts

@@ -1,2 +0,0 @@
-import type { FileRowProps } from './../imports';
-export default function FileRow({ file, onDownload, onSettings, onToggleShare, onDelete, }: FileRowProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1 +0,0 @@
-export { FileTable } from './src';

package/dist/FileHandlers/FileTable/src/index.d.ts

@@ -1 +0,0 @@
-export { default as FileTable } from './table_utils';

package/dist/FileHandlers/FileTable/src/table_utils.d.ts

@@ -1,2 +0,0 @@
-import type { FileTableProps } from './../imports';
-export default function FileTable({ files, loading, error, onToggleShare, onPatchShare, onDelete }: FileTableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-export { Button, Checkbox, Input, ClipboardIcon, createPortal, useEffect, useRef, useState } from './../imports';
-export type { ShareModalProps } from './../imports';

package/dist/FileHandlers/ShareModal/index.d.ts

@@ -1 +0,0 @@
-export { ShareModal } from './src';

package/dist/FileHandlers/ShareModal/src/index.d.ts

@@ -1 +0,0 @@
-export { default as ShareModal } from './share_utils';

package/dist/FileHandlers/ShareModal/src/share_utils.d.ts

@@ -1,2 +0,0 @@
-import type { ShareModalProps } from './../../imports';
-export default function ShareModal({ file, onClose, onSave }: ShareModalProps): import("react").ReactPortal | null;

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

@@ -1,2 +0,0 @@
-export { Input, useFiles, Button, uploadFiles, useState, useRef, useCallback, CloudArrowUpIcon, currentUsername } from './../imports';
-export type { UploadProps, FileItem, QueuedFile } from './../imports';

package/dist/FileHandlers/Upload/index.d.ts

@@ -1 +0,0 @@
-export { Upload } from './src';

package/dist/FileHandlers/Upload/src/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Upload } from './upload_utils';
-export type { QueuedFile, UploadProps } from './../../../types';

package/dist/FileHandlers/Upload/src/upload_utils.d.ts

@@ -1,2 +0,0 @@
-import type { UploadProps } from './../imports';
-export default function Upload({ onUploaded }: UploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/FileHandlers/imports.d.ts

@@ -1,4 +0,0 @@
-export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps } 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';