react-os-shell 0.14.0 → 1.1.0

package/dist/chunk-UXEG2NRI.js

@@ -0,0 +1,682 @@
+import { Breadcrumbs, openPreviewFile } from './chunk-4R4SXMDV.js';
+import { SidebarLayout } from './chunk-VGTEM5RZ.js';
+import { toast_default } from './chunk-WIJ45SYD.js';
+import { useWindowManager, WindowTitle } from './chunk-4RXDOSKZ.js';
+import { confirm, prompt } from './chunk-UBN4IUDE.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var filesDemoTree = null;
+function setFilesDemoTree(tree) {
+  filesDemoTree = tree;
+}
+var DEFAULT_SERVER = typeof window !== "undefined" && window.__REACT_OS_SHELL_FILE_SERVER__ || "http://localhost:4000";
+var FILES_VIEW_EVENT = "react-os-shell:files-show-trash";
+function openFilesInTrashMode() {
+  if (typeof window === "undefined") return;
+  window.__REACT_OS_SHELL_FILES_VIEW__ = "trash";
+  window.dispatchEvent(new CustomEvent(FILES_VIEW_EVENT));
+}
+var PREVIEW_EXTS = {
+  pdf: "pdf",
+  dxf: "dxf",
+  csv: "csv",
+  jpg: "image",
+  jpeg: "image",
+  png: "image",
+  gif: "image",
+  webp: "image",
+  svg: "image",
+  avif: "image",
+  bmp: "image",
+  stp: "3d",
+  step: "3d",
+  stl: "3d",
+  obj: "3d",
+  gltf: "3d",
+  glb: "3d",
+  "3mf": "3d",
+  iges: "3d",
+  igs: "3d",
+  ply: "3d",
+  fbx: "3d"
+};
+function joinPath(parent, name) {
+  if (parent === "/" || parent === "") return "/" + name;
+  return parent.replace(/\/$/, "") + "/" + name;
+}
+function parentOf(p) {
+  if (p === "/" || p === "") return "/";
+  const trimmed = p.replace(/\/$/, "");
+  const idx = trimmed.lastIndexOf("/");
+  return idx <= 0 ? "/" : trimmed.slice(0, idx);
+}
+function formatSize(bytes) {
+  if (!bytes) return "\u2014";
+  const units = ["B", "KB", "MB", "GB"];
+  let v = bytes, i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
+}
+function formatTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return "\u2014";
+    return d.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
+  } catch {
+    return iso;
+  }
+}
+function demoEntriesAt(dir) {
+  if (!filesDemoTree) return [];
+  let level = filesDemoTree;
+  for (const part of dir.split("/").filter(Boolean)) {
+    const node = level.find((n) => n.kind === "folder" && n.name === part);
+    if (!node || !node.children) return [];
+    level = node.children;
+  }
+  return level.map((n) => ({
+    name: n.name,
+    kind: n.kind,
+    size: n.size ?? 0,
+    modifiedAt: n.modifiedAt ?? ""
+  }));
+}
+function Files() {
+  const server = DEFAULT_SERVER.replace(/\/$/, "");
+  const demoMode = filesDemoTree !== null;
+  const [path, setPath] = useState("/");
+  const [entries, setEntries] = useState([]);
+  const [rootFolders, setRootFolders] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [unreachable, setUnreachable] = useState(false);
+  const [quota, setQuota] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [view, setView] = useState(() => {
+    if (typeof window === "undefined") return "files";
+    const w = window;
+    if (w.__REACT_OS_SHELL_FILES_VIEW__ === "trash") {
+      w.__REACT_OS_SHELL_FILES_VIEW__ = null;
+      return "trash";
+    }
+    return "files";
+  });
+  const [trash, setTrash] = useState([]);
+  useEffect(() => {
+    const handler = () => setView("trash");
+    window.addEventListener(FILES_VIEW_EVENT, handler);
+    return () => window.removeEventListener(FILES_VIEW_EVENT, handler);
+  }, []);
+  const dragDepthRef = useRef(0);
+  const fileRef = useRef(null);
+  const { openPage } = useWindowManager();
+  const authedFetch = useCallback(
+    (url, init = {}) => (
+      // `credentials: 'include'` makes the browser send the identity
+      // cookie with every cross-origin request, and accept any
+      // Set-Cookie response (e.g. the first-visit assignment).
+      fetch(url, { ...init, credentials: "include" })
+    ),
+    []
+  );
+  const refreshQuota = useCallback(async () => {
+    try {
+      const res = await authedFetch(`${server}/api/quota`);
+      if (res.ok) {
+        const q = await res.json();
+        setQuota({ used: q.used, limit: q.limit });
+      }
+    } catch {
+    }
+  }, [authedFetch, server]);
+  const loadDir = useCallback(async (dir) => {
+    setSelected(null);
+    if (demoMode) {
+      const list = demoEntriesAt(dir);
+      setEntries(list);
+      setPath(dir);
+      setUnreachable(false);
+      setLoading(false);
+      if (dir === "/") setRootFolders(list.filter((e) => e.kind === "folder").map((e) => e.name));
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await authedFetch(
+        `${server}/api/files?path=${encodeURIComponent(dir)}`
+      );
+      if (!res.ok) {
+        const msg = await res.json().catch(() => ({}));
+        toast_default.error(msg.error || `Failed to list (${res.status})`);
+        return;
+      }
+      const data = await res.json();
+      const list = data.entries || [];
+      setEntries(list);
+      setPath(data.path || dir);
+      setUnreachable(false);
+      if ((data.path || dir) === "/") setRootFolders(list.filter((e) => e.kind === "folder").map((e) => e.name));
+    } catch (e) {
+      setUnreachable(true);
+    } finally {
+      setLoading(false);
+    }
+    refreshQuota();
+  }, [authedFetch, server, refreshQuota, demoMode]);
+  const loadTrash = useCallback(async () => {
+    if (demoMode) {
+      setTrash([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setSelected(null);
+    try {
+      const res = await authedFetch(`${server}/api/trash`);
+      if (!res.ok) {
+        const msg = await res.json().catch(() => ({}));
+        toast_default.error(msg.error || `Failed to list trash (${res.status})`);
+        return;
+      }
+      const data = await res.json();
+      setTrash(data.entries || []);
+      setUnreachable(false);
+    } catch {
+      setUnreachable(true);
+    } finally {
+      setLoading(false);
+    }
+    refreshQuota();
+  }, [authedFetch, server, refreshQuota, demoMode]);
+  useEffect(() => {
+    if (view === "files") loadDir(path);
+    else loadTrash();
+  }, [path, view]);
+  const handleRestore = async (entry) => {
+    const res = await authedFetch(`${server}/api/trash/restore`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id: entry.id })
+    });
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Restore failed (${res.status})`);
+      return;
+    }
+    toast_default.success(`Restored "${entry.name}"`);
+    loadTrash();
+  };
+  const handleTrashPermanentDelete = async (entry) => {
+    const ok = await confirm({
+      title: "Permanently delete",
+      message: `"${entry.name}" will be permanently removed. This can't be undone.`,
+      confirmLabel: "Delete forever",
+      variant: "danger"
+    });
+    if (!ok) return;
+    const res = await authedFetch(`${server}/api/trash/${encodeURIComponent(entry.id)}`, {
+      method: "DELETE"
+    });
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Delete failed (${res.status})`);
+      return;
+    }
+    loadTrash();
+  };
+  const handleEmptyTrash = async () => {
+    if (trash.length === 0) return;
+    const ok = await confirm({
+      title: "Empty trash",
+      message: `${trash.length} item${trash.length === 1 ? "" : "s"} will be permanently removed. This can't be undone.`,
+      confirmLabel: "Empty trash",
+      variant: "danger"
+    });
+    if (!ok) return;
+    const res = await authedFetch(`${server}/api/trash`, { method: "DELETE" });
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Empty trash failed (${res.status})`);
+      return;
+    }
+    loadTrash();
+  };
+  const openFile = async (entry) => {
+    if (demoMode) return;
+    const fullPath = joinPath(path, entry.name);
+    const ext = (entry.name.split(".").pop() || "").toLowerCase();
+    const kind = PREVIEW_EXTS[ext];
+    if (!kind) {
+      downloadFile(entry);
+      return;
+    }
+    await openPreviewFile({
+      filePath: fullPath,
+      filename: entry.name,
+      kind,
+      onStaged: (route) => openPage(route)
+    });
+  };
+  const downloadFile = async (entry) => {
+    const fullPath = joinPath(path, entry.name);
+    try {
+      const res = await authedFetch(
+        `${server}/api/file?path=${encodeURIComponent(fullPath)}`
+      );
+      if (!res.ok) {
+        toast_default.error(`Download failed (${res.status})`);
+        return;
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = entry.name;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1e3);
+    } catch (e) {
+      toast_default.error(e?.message || "Download failed");
+    }
+  };
+  const handlePick = () => fileRef.current?.click();
+  const uploadFiles = async (files) => {
+    const arr = Array.from(files);
+    for (const file of arr) {
+      const form = new FormData();
+      form.append("file", file);
+      try {
+        const res = await authedFetch(
+          `${server}/api/upload?path=${encodeURIComponent(path)}`,
+          { method: "POST", body: form }
+        );
+        if (!res.ok) {
+          const msg = await res.json().catch(() => ({}));
+          if (res.status === 413) {
+            const remaining = Math.max(0, (msg.limit || 0) - (msg.used || 0));
+            toast_default.error(
+              `Quota exceeded \u2014 ${formatSize(remaining)} free, ${file.name} is ${formatSize(msg.attempted || file.size)}`
+            );
+          } else {
+            toast_default.error(`Upload ${file.name}: ${msg.error || res.status}`);
+          }
+        }
+      } catch (e) {
+        toast_default.error(`Upload ${file.name}: ${e?.message || "failed"}`);
+      }
+    }
+    loadDir(path);
+  };
+  const handleNewFolder = async () => {
+    const name = await prompt({
+      title: "New folder",
+      placeholder: "Folder name",
+      confirmLabel: "Create"
+    });
+    if (!name) return;
+    if (/[\\/]/.test(name)) {
+      toast_default.error("Folder names cannot contain slashes");
+      return;
+    }
+    const target = joinPath(path, name);
+    const res = await authedFetch(`${server}/api/folder`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: target })
+    });
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Create folder failed (${res.status})`);
+      return;
+    }
+    loadDir(path);
+  };
+  const handleRename = async (entry) => {
+    const next = await prompt({
+      title: `Rename ${entry.kind}`,
+      defaultValue: entry.name,
+      confirmLabel: "Rename"
+    });
+    if (!next || next === entry.name) return;
+    if (/[\\/]/.test(next)) {
+      toast_default.error("Names cannot contain slashes");
+      return;
+    }
+    const from = joinPath(path, entry.name);
+    const to = joinPath(path, next);
+    const res = await authedFetch(`${server}/api/rename`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ from, to })
+    });
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Rename failed (${res.status})`);
+      return;
+    }
+    loadDir(path);
+  };
+  const handleDelete = async (entry) => {
+    const ok = await confirm({
+      title: `Delete ${entry.kind}`,
+      message: `"${entry.name}"${entry.kind === "folder" ? " and everything inside" : ""} will be permanently removed.`,
+      confirmLabel: "Delete",
+      variant: "danger"
+    });
+    if (!ok) return;
+    const target = joinPath(path, entry.name);
+    const res = await authedFetch(
+      `${server}/api/files?path=${encodeURIComponent(target)}`,
+      { method: "DELETE" }
+    );
+    if (!res.ok) {
+      const msg = await res.json().catch(() => ({}));
+      toast_default.error(msg.error || `Delete failed (${res.status})`);
+      return;
+    }
+    loadDir(path);
+  };
+  const resetDrag = () => {
+    dragDepthRef.current = 0;
+    setIsDragging(false);
+  };
+  useEffect(() => {
+    const reset = () => resetDrag();
+    window.addEventListener("dragend", reset);
+    window.addEventListener("drop", reset);
+    return () => {
+      window.removeEventListener("dragend", reset);
+      window.removeEventListener("drop", reset);
+    };
+  }, []);
+  if (unreachable) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-white", children: [
+      /* @__PURE__ */ jsx(WindowTitle, { title: "Files - offline" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-8 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 mx-auto text-gray-300 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.4, children: [
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18.364 5.636l-12.728 12.728M5.636 5.636l12.728 12.728" }),
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 21a9 9 0 100-18 9 9 0 000 18z" })
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-800 mb-1", children: "Can't reach the file server" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mb-3", children: [
+          "No response from ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: server }),
+          ". Make sure the server is running \u2014 see ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: "examples/file-server/README.md" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => loadDir(path), className: "px-3 py-1.5 text-sm bg-blue-500 text-white rounded hover:bg-blue-600", children: "Retry" })
+      ] }) })
+    ] });
+  }
+  const segments = path === "/" ? [] : path.split("/").filter(Boolean);
+  const usagePct = quota && quota.limit > 0 ? Math.min(100, Math.round(quota.used / quota.limit * 100)) : 0;
+  const usageColor = usagePct > 90 ? "bg-red-500" : usagePct > 75 ? "bg-amber-500" : "bg-blue-500";
+  const crumbs = [
+    { label: "My files", onClick: () => setPath("/") },
+    ...segments.map((seg, i) => ({
+      label: seg,
+      onClick: () => setPath("/" + segments.slice(0, i + 1).join("/"))
+    }))
+  ];
+  const navBtn = (active) => `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors ${active ? "bg-blue-50 font-medium text-blue-700" : "text-gray-700 hover:bg-gray-100"}`;
+  const navSvg = (d) => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.6, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d }) });
+  const folderNav = /* @__PURE__ */ jsxs("nav", { className: "p-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-400", children: "Locations" }),
+    /* @__PURE__ */ jsxs("button", { onClick: () => {
+      setView("files");
+      setPath("/");
+    }, className: navBtn(view === "files" && path === "/"), children: [
+      navSvg("M2.25 12l8.954-8.955a1.5 1.5 0 012.122 0L21.75 12M4.5 9.75v9.75a.75.75 0 00.75.75H9V15a.75.75 0 01.75-.75h4.5A.75.75 0 0115 15v5.25h3.75a.75.75 0 00.75-.75V9.75"),
+      "My files"
+    ] }),
+    rootFolders.map((name) => /* @__PURE__ */ jsxs("button", { onClick: () => {
+      setView("files");
+      setPath("/" + name);
+    }, className: navBtn(view === "files" && path === "/" + name), children: [
+      navSvg("M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+    ] }, name)),
+    !demoMode && /* @__PURE__ */ jsxs("button", { onClick: () => setView("trash"), className: navBtn(view === "trash"), children: [
+      navSvg("M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79"),
+      "Trash"
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex flex-col h-full bg-white",
+      onDragEnter: (e) => {
+        if (demoMode) return;
+        if (!e.dataTransfer?.types?.includes?.("Files")) return;
+        e.preventDefault();
+        dragDepthRef.current++;
+        if (!isDragging) setIsDragging(true);
+      },
+      onDragOver: (e) => {
+        if (!e.dataTransfer?.types?.includes?.("Files")) return;
+        e.preventDefault();
+      },
+      onDragLeave: () => {
+        if (dragDepthRef.current > 0) dragDepthRef.current--;
+        if (dragDepthRef.current === 0) setIsDragging(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        resetDrag();
+        if (demoMode) return;
+        if (e.dataTransfer.files?.length) uploadFiles(e.dataTransfer.files);
+      },
+      children: [
+        /* @__PURE__ */ jsx(WindowTitle, { title: `Files${path === "/" ? "" : " - " + path}` }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            multiple: true,
+            className: "hidden",
+            onChange: (e) => {
+              if (e.target.files?.length) uploadFiles(e.target.files);
+              if (fileRef.current) fileRef.current.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+          SidebarLayout,
+          {
+            sidebar: folderNav,
+            storageKey: "files.sidebarWidth",
+            defaultWidth: 200,
+            minWidth: 150,
+            maxWidth: 320,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 border-b border-gray-200 bg-gray-50 shrink-0 text-xs", children: [
+                view === "files" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setPath(parentOf(path)),
+                      disabled: path === "/",
+                      className: "px-2 py-1 rounded hover:bg-gray-200 disabled:opacity-30 text-gray-600",
+                      title: "Parent folder",
+                      children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(Breadcrumbs, { items: crumbs, maxItems: 5 }) }),
+                  /* @__PURE__ */ jsx("button", { onClick: () => loadDir(path), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-600", title: "Refresh", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.023 9.348h4.992V4.356M2.985 19.644v-4.992h4.992M3.05 9.348a9 9 0 0114.85-3.36L21.015 9.348m0 5.304a9 9 0 01-14.85 3.36l-3.115-3.36" }) }) }),
+                  !demoMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("button", { onClick: () => setView("trash"), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-600 flex items-center gap-1", title: "Open trash", children: [
+                      /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }),
+                      "Trash"
+                    ] }),
+                    /* @__PURE__ */ jsxs("button", { onClick: handleNewFolder, className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-600 flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" }) }),
+                      "New Folder"
+                    ] }),
+                    /* @__PURE__ */ jsxs("button", { onClick: handlePick, className: "px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 7.5L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
+                      "Upload"
+                    ] })
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setView("files"),
+                      className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-600",
+                      title: "Back to files",
+                      children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-gray-700 font-medium px-2", children: "Trash" }),
+                  /* @__PURE__ */ jsx("button", { onClick: loadTrash, className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-600", title: "Refresh", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.023 9.348h4.992V4.356M2.985 19.644v-4.992h4.992M3.05 9.348a9 9 0 0114.85-3.36L21.015 9.348m0 5.304a9 9 0 01-14.85 3.36l-3.115-3.36" }) }) }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleEmptyTrash,
+                      disabled: trash.length === 0,
+                      className: "px-2 py-1 rounded text-red-600 hover:bg-red-50 disabled:opacity-30 flex items-center gap-1",
+                      children: "Empty trash"
+                    }
+                  )
+                ] }),
+                quota && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", title: `${formatSize(quota.used)} of ${formatSize(quota.limit)} used`, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-20 h-1.5 rounded-full bg-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `h-full ${usageColor} transition-all`,
+                        style: { width: `${usagePct}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500 tabular-nums whitespace-nowrap", children: [
+                      formatSize(quota.used),
+                      " / ",
+                      formatSize(quota.limit)
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: view === "trash" ? loading && trash.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-gray-400", children: "Loading\u2026" }) : trash.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-10 text-center text-sm text-gray-400", children: "Trash is empty." }) : /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+                /* @__PURE__ */ jsx("thead", { className: "bg-gray-50 text-[11px] uppercase tracking-wide text-gray-500", children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { className: "text-left font-medium px-3 py-1.5", children: "Name" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-left font-medium px-3 py-1.5", children: "Original location" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right font-medium px-3 py-1.5 w-24", children: "Size" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right font-medium px-3 py-1.5 w-40", children: "Deleted" }),
+                  /* @__PURE__ */ jsx("th", { className: "w-44" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: trash.map((e) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-100 hover:bg-gray-50", children: [
+                  /* @__PURE__ */ jsxs("td", { className: "px-3 py-1.5 flex items-center gap-2", children: [
+                    e.kind === "folder" ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-amber-500 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M2.25 7.125A2.25 2.25 0 014.5 4.875h4.504c.61 0 1.193.243 1.624.673l1.494 1.494a.75.75 0 00.53.22h7.098A2.25 2.25 0 0122 9.51v8.366A2.25 2.25 0 0119.75 20.125H4.25A2.25 2.25 0 012 17.875V7.125z" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", title: e.name, children: e.name })
+                  ] }),
+                  /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-gray-500 text-xs font-mono truncate", title: e.originalPath, children: e.originalPath || "\u2014" }),
+                  /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right tabular-nums text-gray-500", children: formatSize(e.size) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-gray-500 tabular-nums", children: e.deletedAt ? formatTime(e.deletedAt) : "\u2014" }),
+                  /* @__PURE__ */ jsxs("td", { className: "px-3 py-1.5 text-right whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => handleRestore(e),
+                        className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-blue-600 text-[11px]",
+                        children: "Restore"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => handleTrashPermanentDelete(e),
+                        className: "px-1.5 py-0.5 rounded hover:bg-red-100 text-red-600 text-[11px] ml-1",
+                        children: "Delete forever"
+                      }
+                    )
+                  ] })
+                ] }, e.id)) })
+              ] }) : loading && entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-gray-400", children: "Loading\u2026" }) : entries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "p-10 text-center text-sm text-gray-400", children: [
+                "Empty folder.",
+                !demoMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " Drop files here or click ",
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Upload" }),
+                  "."
+                ] })
+              ] }) : /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+                /* @__PURE__ */ jsx("thead", { className: "bg-gray-50 text-[11px] uppercase tracking-wide text-gray-500", children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { className: "text-left font-medium px-3 py-1.5", children: "Name" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right font-medium px-3 py-1.5 w-24", children: "Size" }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right font-medium px-3 py-1.5 w-40", children: "Modified" }),
+                  /* @__PURE__ */ jsx("th", { className: "w-32" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: entries.map((e) => /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    onClick: () => setSelected(e.name),
+                    onDoubleClick: () => {
+                      if (e.kind === "folder") setPath(joinPath(path, e.name));
+                      else openFile(e);
+                    },
+                    className: `cursor-default border-b border-gray-100 ${selected === e.name ? "bg-blue-50" : "hover:bg-gray-50"}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("td", { className: "px-3 py-1.5 flex items-center gap-2", children: [
+                        e.kind === "folder" ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-amber-500 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M2.25 7.125A2.25 2.25 0 014.5 4.875h4.504c.61 0 1.193.243 1.624.673l1.494 1.494a.75.75 0 00.53.22h7.098A2.25 2.25 0 0122 9.51v8.366A2.25 2.25 0 0119.75 20.125H4.25A2.25 2.25 0 012 17.875V7.125z" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-gray-400 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate", title: e.name, children: e.name })
+                      ] }),
+                      /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right tabular-nums text-gray-500", children: e.kind === "folder" ? "\u2014" : formatSize(e.size) }),
+                      /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-gray-500 tabular-nums", children: formatTime(e.modifiedAt) }),
+                      /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right whitespace-nowrap", children: !demoMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        e.kind === "file" && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (ev) => {
+                              ev.stopPropagation();
+                              downloadFile(e);
+                            },
+                            className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-500 text-[11px]",
+                            children: "Download"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (ev) => {
+                              ev.stopPropagation();
+                              handleRename(e);
+                            },
+                            className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-500 text-[11px] ml-1",
+                            children: "Rename"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (ev) => {
+                              ev.stopPropagation();
+                              handleDelete(e);
+                            },
+                            className: "px-1.5 py-0.5 rounded hover:bg-red-100 text-red-600 text-[11px] ml-1",
+                            children: "Delete"
+                          }
+                        )
+                      ] }) })
+                    ]
+                  },
+                  e.name
+                )) })
+              ] }) })
+            ] })
+          }
+        ) }),
+        isDragging && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-blue-500/15 border-4 border-dashed border-blue-500 pointer-events-none flex items-center justify-center z-20", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium shadow-lg", children: "Drop to upload" }) })
+      ]
+    }
+  );
+}
+
+export { Files, openFilesInTrashMode, setFilesDemoTree };
+//# sourceMappingURL=chunk-UXEG2NRI.js.map
+//# sourceMappingURL=chunk-UXEG2NRI.js.map