@w100n/documents 0.3.0 → 0.4.0

package/dist/index.js

@@ -6,8 +6,29 @@ import {
 } from "./chunk-KEV4R7W5.js";
 
 // src/DocumentsWorkspace.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState4 } from "react";
-import { ChevronDown, FileSpreadsheet, FileText, FileType, Files, History, Info, ListTree, PanelLeftClose, PanelLeftOpen, Presentation, RotateCcw, Search } from "lucide-react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState5 } from "react";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  FileSpreadsheet,
+  FileText,
+  FileType,
+  Files,
+  History,
+  Info,
+  LayoutGrid,
+  ListTree,
+  Maximize2,
+  Minus,
+  PanelLeftOpen,
+  PanelRightOpen,
+  Plus,
+  Presentation,
+  RotateCcw,
+  Search,
+  X
+} from "lucide-react";
 
 // src/text.ts
 var en = {
@@ -41,6 +62,12 @@ var en = {
   unsupported: "This file cannot be shown yet",
   restore: "Restore this version",
   restoreFailed: "Could not restore",
+  allProjects: "All projects",
+  closePanel: "Hide the panel",
+  openPanel: "Show the panel",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Actual size",
   kinds: { docx: "DOCX", markdown: "Markdown", pdf: "PDF", sheet: "Sheets", slides: "Slides" }
 };
 var pl = {
@@ -74,6 +101,12 @@ var pl = {
   unsupported: "Tego pliku nie da si\u0119 jeszcze pokaza\u0107",
   restore: "Przywr\xF3\u0107 t\u0119 wersj\u0119",
   restoreFailed: "Nie uda\u0142o si\u0119 przywr\xF3ci\u0107",
+  allProjects: "Wszystkie projekty",
+  closePanel: "Ukryj panel",
+  openPanel: "Poka\u017C panel",
+  zoomIn: "Powi\u0119ksz",
+  zoomOut: "Pomniejsz",
+  fit: "Rzeczywisty rozmiar",
   kinds: { docx: "DOCX", markdown: "Markdown", pdf: "PDF", sheet: "Arkusze", slides: "Slajdy" }
 };
 var uk = {
@@ -107,16 +140,117 @@ var uk = {
   unsupported: "\u0426\u0435\u0439 \u0444\u0430\u0439\u043B \u043F\u043E\u043A\u0438 \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0443\u0454\u0442\u044C\u0441\u044F",
   restore: "\u0412\u0456\u0434\u043D\u043E\u0432\u0438\u0442\u0438 \u0446\u044E \u0432\u0435\u0440\u0441\u0456\u044E",
   restoreFailed: "\u041D\u0435 \u0432\u0434\u0430\u043B\u043E\u0441\u044F \u0432\u0456\u0434\u043D\u043E\u0432\u0438\u0442\u0438",
+  allProjects: "\u0423\u0441\u0456 \u043F\u0440\u043E\u0454\u043A\u0442\u0438",
+  closePanel: "\u0421\u0445\u043E\u0432\u0430\u0442\u0438 \u043F\u0430\u043D\u0435\u043B\u044C",
+  openPanel: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u0438 \u043F\u0430\u043D\u0435\u043B\u044C",
+  zoomIn: "\u0417\u0431\u0456\u043B\u044C\u0448\u0438\u0442\u0438",
+  zoomOut: "\u0417\u043C\u0435\u043D\u0448\u0438\u0442\u0438",
+  fit: "\u0421\u043F\u0440\u0430\u0432\u0436\u043D\u0456\u0439 \u0440\u043E\u0437\u043C\u0456\u0440",
   kinds: { docx: "DOCX", markdown: "Markdown", pdf: "PDF", sheet: "\u0422\u0430\u0431\u043B\u0438\u0446\u0456", slides: "\u0421\u043B\u0430\u0439\u0434\u0438" }
 };
 var texts = { en, pl, uk };
 
+// src/Thumb.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/preview.ts
+var cache = /* @__PURE__ */ new Map();
+var waiting = [];
+var running = 0;
+async function turn(work) {
+  if (running >= 2) await new Promise((go) => waiting.push(go));
+  running++;
+  try {
+    return await work();
+  } finally {
+    running--;
+    waiting.shift()?.();
+  }
+}
+async function make(host, doc) {
+  if (doc.size > 3e6 || !["markdown", "docx", "pdf"].includes(doc.kind)) return null;
+  return turn(async () => {
+    var _a;
+    const bytes = await host.content(doc.id, null);
+    if (doc.kind === "markdown") return { text: new TextDecoder().decode(bytes.slice(0, 2400)) };
+    if (doc.kind === "docx") {
+      const { renderAsync } = await import("docx-preview");
+      const box = document.createElement("div");
+      await renderAsync(bytes, box, void 0, { inWrapper: false, ignoreLastRenderedPageBreak: true });
+      return { text: [...box.querySelectorAll("p, h1, h2, h3, li")].map((node) => node.textContent?.trim()).filter(Boolean).join("\n").slice(0, 800) };
+    }
+    const pdfjs = await import("pdfjs-dist");
+    if (host.pdfWorker) (_a = pdfjs.GlobalWorkerOptions).workerPort ?? (_a.workerPort = host.pdfWorker());
+    const task = pdfjs.getDocument({ data: new Uint8Array(bytes.slice(0)) });
+    const pdf = await task.promise;
+    const page = await pdf.getPage(1);
+    const viewport = page.getViewport({ scale: 320 / page.getViewport({ scale: 1 }).width });
+    const canvas = document.createElement("canvas");
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    await page.render({ canvas, canvasContext: canvas.getContext("2d"), viewport }).promise;
+    void task.destroy();
+    return { image: canvas.toDataURL("image/png") };
+  });
+}
+function preview(host, doc) {
+  const key = `${doc.id}:${doc.updatedAt}`;
+  let found = cache.get(key);
+  if (!found) {
+    found = make(host, doc).catch(() => null);
+    cache.set(key, found);
+  }
+  return found;
+}
+
+// src/Thumb.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Thumb({ host, item, label }) {
+  const box = useRef(null);
+  const [seen, setSeen] = useState(false);
+  const [shot, setShot] = useState(null);
+  useEffect(() => {
+    if (item.thumbnailUrl || item.excerpt || typeof IntersectionObserver === "undefined") return;
+    const watch = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) setSeen(true);
+    }, { rootMargin: "200px" });
+    watch.observe(box.current);
+    return () => watch.disconnect();
+  }, [item.thumbnailUrl, item.excerpt]);
+  useEffect(() => {
+    if (!seen) return;
+    let live = true;
+    void preview(host, item).then((found) => {
+      if (live) setShot(found);
+    });
+    return () => {
+      live = false;
+    };
+  }, [seen, host, item.id, item.updatedAt]);
+  const text = item.excerpt ?? shot?.text ?? "";
+  const lines = text.split("\n").filter((line) => !line.trim().startsWith("```")).map((line) => line.replace(/^#+\s*/, "").replace(/[*_`>|]/g, "").trim()).filter(Boolean);
+  const image = item.thumbnailUrl ?? shot?.image;
+  return /* @__PURE__ */ jsxs("span", { ref: box, className: "w100n-docs-thumb", "data-kind": item.kind, children: [
+    image ? /* @__PURE__ */ jsx("img", { src: image, alt: "" }) : /* @__PURE__ */ jsx("span", { className: "w100n-docs-paper", "aria-hidden": true, children: lines.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("b", { children: lines[0] }),
+      lines.slice(1, 14).join(" ")
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {})
+    ] }) }),
+    /* @__PURE__ */ jsx("span", { className: "w100n-docs-kind", "data-kind": item.kind, children: label })
+  ] });
+}
+
 // src/useLoad.ts
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 function useLoad(load, key) {
-  const [state, setState] = useState({ data: null, error: null, loading: true });
-  const [attempt, setAttempt] = useState(0);
-  useEffect(() => {
+  const [state, setState] = useState2({ data: null, error: null, loading: true });
+  const [attempt, setAttempt] = useState2(0);
+  useEffect2(() => {
     const controller = new AbortController();
     setState((current) => ({ ...current, loading: true, error: null }));
     load(controller.signal).then(
@@ -133,7 +267,7 @@ function useLoad(load, key) {
 }
 
 // src/viewers/DocxView.tsx
-import { useLayoutEffect, useRef, useState as useState2 } from "react";
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
 
 // src/viewers/headings.ts
 var last = 0;
@@ -147,10 +281,10 @@ function collect(root, selector, level = (el) => Number(el.tagName.slice(1))) {
 }
 
 // src/viewers/DocxView.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function DocxView({ bytes, onOutline, failed }) {
-  const box = useRef(null);
-  const [error, setError] = useState2(false);
+  const box = useRef2(null);
+  const [error, setError] = useState3(false);
   useLayoutEffect(() => {
     let live = true;
     let width = 0;
@@ -176,35 +310,35 @@ function DocxView({ bytes, onOutline, failed }) {
       watch.disconnect();
     };
   }, [bytes, onOutline]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    error && /* @__PURE__ */ jsx("p", { className: "w100n-docs-note", children: failed }),
-    /* @__PURE__ */ jsx("div", { ref: box, className: "w100n-docs-docx" })
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    error && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-note", children: failed }),
+    /* @__PURE__ */ jsx2("div", { ref: box, className: "w100n-docs-docx" })
   ] });
 }
 
 // src/viewers/MarkdownView.tsx
 import DOMPurify from "dompurify";
 import { marked } from "marked";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function MarkdownView({ bytes, onOutline }) {
-  const box = useRef2(null);
+  const box = useRef3(null);
   useLayoutEffect2(() => {
     const root = box.current;
     root.innerHTML = DOMPurify.sanitize(marked.parse(new TextDecoder().decode(bytes), { async: false }));
     onOutline(collect(root, "h1, h2, h3"));
   }, [bytes, onOutline]);
-  return /* @__PURE__ */ jsx2("article", { ref: box, className: "w100n-docs-page w100n-docs-prose" });
+  return /* @__PURE__ */ jsx3("article", { ref: box, className: "w100n-docs-page w100n-docs-prose" });
 }
 
 // src/viewers/PdfView.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var last2 = 0;
 function PdfView({ bytes, worker, onOutline, failed }) {
-  const box = useRef3(null);
-  const [error, setError] = useState3(false);
-  useEffect2(() => {
+  const box = useRef4(null);
+  const [error, setError] = useState4(false);
+  useEffect3(() => {
     const root = box.current;
     const prefix = `w100n-docs-p${++last2}`;
     let stop = false;
@@ -251,64 +385,90 @@ function PdfView({ bytes, worker, onOutline, failed }) {
       close();
     };
   }, [bytes, worker, onOutline]);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    error && /* @__PURE__ */ jsx3("p", { className: "w100n-docs-note", children: failed }),
-    /* @__PURE__ */ jsx3("div", { ref: box, className: "w100n-docs-pdf" })
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    error && /* @__PURE__ */ jsx4("p", { className: "w100n-docs-note", children: failed }),
+    /* @__PURE__ */ jsx4("div", { ref: box, className: "w100n-docs-pdf" })
   ] });
 }
 
 // src/viewers/SlidesView.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function SlidesView({ bytes, title }) {
-  return /* @__PURE__ */ jsx4("iframe", { className: "w100n-docs-slides", sandbox: "allow-scripts", title, srcDoc: new TextDecoder().decode(bytes) });
+  return /* @__PURE__ */ jsx5("iframe", { className: "w100n-docs-slides", sandbox: "allow-scripts", title, srcDoc: new TextDecoder().decode(bytes) });
 }
 
 // src/DocumentsWorkspace.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var icons = { docx: FileText, markdown: FileType, pdf: Files, sheet: FileSpreadsheet, slides: Presentation };
-function DocumentsWorkspace({ host, language = "en", theme = "light", place, onPlace, start, end, aside }) {
+function DocumentsWorkspace({ host, language = "en", theme = "light", place, onPlace, start, end, aside, actions }) {
   const t = texts[language];
-  const [own, setOwn] = useState4({ spaceId: null, documentId: null });
+  const [own, setOwn] = useState5({ spaceId: null, documentId: null });
   const here = place ?? own;
   const go = (next) => {
     setOwn(next);
     onPlace?.(next);
   };
-  const [query, setQuery] = useState4("");
-  const [kind, setKind] = useState4("all");
-  const [listOpen, setListOpen] = useState4(true);
-  const listRef = useRef4(null);
-  const overlays = () => listRef.current !== null && getComputedStyle(listRef.current).position === "absolute";
+  const [query, setQuery] = useState5("");
+  const [kind, setKind] = useState5("all");
+  const [listOpen, setListOpen] = useState5(true);
+  const [panelOpen, setPanelOpen] = useState5(true);
+  const root = useRef5(null);
+  const narrow = () => root.current !== null && getComputedStyle(root.current).getPropertyValue("--docs-narrow").trim() === "1";
   useLayoutEffect3(() => {
-    if (here.documentId && overlays()) setListOpen(false);
+    if (here.documentId && narrow()) setListOpen(false);
   }, []);
-  const [picking, setPicking] = useState4(false);
-  const [tab, setTab] = useState4("outline");
-  const [outline, setOutline] = useState4([]);
-  const [version, setVersion] = useState4({ documentId: null, id: null });
+  const [picking, setPicking] = useState5(false);
+  const [tab, setTab] = useState5("outline");
+  const [zoom, setZoom] = useState5(100);
+  const [outline, setOutline] = useState5([]);
+  const [version, setVersion] = useState5({ documentId: null, id: null });
   const versionId = version.documentId === here.documentId ? version.id : null;
-  const [restoring, setRestoring] = useState4("idle");
+  const [restoring, setRestoring] = useState5("idle");
   const spaces = useLoad((signal) => host.spaces({ signal }), [host]);
-  const spaceId = here.spaceId ?? spaces.data?.[0]?.id ?? null;
+  const single = spaces.data?.length === 1 ? spaces.data[0].id : null;
+  const spaceId = here.spaceId ?? single;
   const space = spaces.data?.find((item) => item.id === spaceId);
-  const list = useLoad((signal) => spaceId ? host.documents(spaceId, { signal }) : Promise.resolve([]), [host, spaceId]);
+  const list = useLoad(async (signal) => {
+    if (spaceId) return host.documents(spaceId, { signal });
+    if (host.everything) return host.everything({ signal });
+    const all2 = await host.spaces({ signal });
+    return (await Promise.all(all2.map((item) => host.documents(item.id, { signal })))).flat();
+  }, [host, spaceId]);
   const doc = useLoad((signal) => here.documentId ? host.document(here.documentId, { signal }) : Promise.resolve(null), [host, here.documentId]);
   const versions = useLoad((signal) => here.documentId ? host.versions(here.documentId, { signal }) : Promise.resolve([]), [host, here.documentId]);
   const content = useLoad((signal) => here.documentId ? host.content(here.documentId, versionId, { signal }) : Promise.resolve(null), [host, here.documentId, versionId]);
-  const shown = (list.data ?? []).filter((item) => matches(item, query, kind));
-  const present = kinds.filter((item) => list.data?.some((doc2) => doc2.kind === item));
-  const folders = [.../* @__PURE__ */ new Set(["", ...shown.map((item) => item.folder ?? "")])].filter((folder) => shown.some((item) => (item.folder ?? "") === folder));
+  const all = list.data ?? [];
+  const shown = all.filter((item) => matches(item, query, kind));
+  const present = kinds.filter((item) => all.some((doc2) => doc2.kind === item));
+  const folders = spaceId ? [.../* @__PURE__ */ new Set(["", ...shown.map((item) => item.folder ?? "")])].filter((folder) => shown.some((item) => (item.folder ?? "") === folder)) : [""];
+  const names = new Map((spaces.data ?? []).map((item) => [item.id, item.name]));
+  const counts = /* @__PURE__ */ new Map();
+  for (const item of all) counts.set(item.spaceId, (counts.get(item.spaceId) ?? 0) + 1);
+  const groups = [...new Set((spaces.data ?? []).map((item) => item.group ?? ""))];
   const date = (iso) => new Intl.DateTimeFormat(language, { day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" }).format(new Date(iso));
+  const ago = (iso) => {
+    const minutes = Math.round((Date.parse(iso) - Date.now()) / 6e4);
+    const rtf = new Intl.RelativeTimeFormat(language, { numeric: "auto", style: "short" });
+    if (Math.abs(minutes) < 60) return rtf.format(minutes, "minute");
+    if (Math.abs(minutes) < 1440) return rtf.format(Math.round(minutes / 60), "hour");
+    if (Math.abs(minutes) < 43200) return rtf.format(Math.round(minutes / 1440), "day");
+    return new Intl.DateTimeFormat(language, { day: "numeric", month: "short", year: "numeric" }).format(new Date(iso));
+  };
   const size = (bytes) => bytes < 1024 ? `${bytes} B` : bytes < 1048576 ? `${(bytes / 1024).toFixed(0)} KB` : `${(bytes / 1048576).toFixed(1)} MB`;
-  const failed = (retry) => /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-note", children: [
+  const failed = (retry) => /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-note", children: [
     t.failed,
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: retry, children: t.retry })
+    /* @__PURE__ */ jsx6("button", { type: "button", onClick: retry, children: t.retry })
   ] });
-  const open = (documentId) => {
+  const open = (item) => {
     setOutline([]);
     setTab("outline");
-    go({ spaceId, documentId });
-    if (overlays()) setListOpen(false);
+    go({ spaceId: here.spaceId, documentId: item.id });
+    if (narrow()) setListOpen(false);
+  };
+  const pick = (next) => {
+    setPicking(false);
+    setKind("all");
+    go({ spaceId: next, documentId: null });
   };
   const restore = async (documentId, versionId2) => {
     setRestoring("busy");
@@ -324,8 +484,8 @@ function DocumentsWorkspace({ host, language = "en", theme = "light", place, onP
     doc.retry();
     list.retry();
   };
-  let stage = /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-empty", children: [
-    /* @__PURE__ */ jsx5(FileText, { "aria-hidden": true }),
+  let stage = /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-empty", children: [
+    /* @__PURE__ */ jsx6(FileText, { "aria-hidden": true }),
     t.pick
   ] });
   if (here.documentId) {
@@ -333,116 +493,158 @@ function DocumentsWorkspace({ host, language = "en", theme = "light", place, onP
       doc.retry();
       content.retry();
     });
-    else if (!doc.data || !content.data) stage = /* @__PURE__ */ jsx5("div", { className: "w100n-docs-empty", children: t.loading });
-    else if (doc.data.kind === "markdown") stage = /* @__PURE__ */ jsx5(MarkdownView, { bytes: content.data, onOutline: setOutline });
-    else if (doc.data.kind === "docx") stage = /* @__PURE__ */ jsx5(DocxView, { bytes: content.data, onOutline: setOutline, failed: t.failed });
-    else if (doc.data.kind === "pdf") stage = /* @__PURE__ */ jsx5(PdfView, { bytes: content.data, worker: host.pdfWorker, onOutline: setOutline, failed: t.failed });
-    else if (doc.data.kind === "slides") stage = /* @__PURE__ */ jsx5(SlidesView, { bytes: content.data, title: doc.data.name });
-    else stage = /* @__PURE__ */ jsx5("div", { className: "w100n-docs-empty", children: t.unsupported });
+    else if (!doc.data || !content.data) stage = /* @__PURE__ */ jsx6("div", { className: "w100n-docs-empty", children: t.loading });
+    else if (doc.data.kind === "markdown") stage = /* @__PURE__ */ jsx6(MarkdownView, { bytes: content.data, onOutline: setOutline });
+    else if (doc.data.kind === "docx") stage = /* @__PURE__ */ jsx6(DocxView, { bytes: content.data, onOutline: setOutline, failed: t.failed });
+    else if (doc.data.kind === "pdf") stage = /* @__PURE__ */ jsx6(PdfView, { bytes: content.data, worker: host.pdfWorker, onOutline: setOutline, failed: t.failed });
+    else if (doc.data.kind === "slides") stage = /* @__PURE__ */ jsx6(SlidesView, { bytes: content.data, title: doc.data.name });
+    else stage = /* @__PURE__ */ jsx6("div", { className: "w100n-docs-empty", children: t.unsupported });
   }
+  const Kind = doc.data ? icons[doc.data.kind] : FileText;
+  const crumbs = doc.data ? [names.get(doc.data.spaceId), doc.data.folder].filter(Boolean) : space ? [space.name] : [];
   const panelTabs = [["outline", ListTree, t.outline], ["versions", History, t.versions], ["details", Info, t.details]];
-  return /* @__PURE__ */ jsxs3("div", { className: "w100n-docs", "data-theme": theme, children: [
-    /* @__PURE__ */ jsxs3("header", { className: "w100n-docs-bar w100n-docs-island", children: [
+  return /* @__PURE__ */ jsxs4("div", { ref: root, className: "w100n-docs", "data-theme": theme, children: [
+    /* @__PURE__ */ jsxs4("header", { className: "w100n-docs-bar", children: [
       start,
-      /* @__PURE__ */ jsx5("button", { type: "button", className: "w100n-docs-icon", onClick: () => setListOpen(!listOpen), "aria-label": listOpen ? t.closeList : t.openList, title: listOpen ? t.closeList : t.openList, children: listOpen ? /* @__PURE__ */ jsx5(PanelLeftClose, {}) : /* @__PURE__ */ jsx5(PanelLeftOpen, {}) }),
-      /* @__PURE__ */ jsx5("strong", { className: "w100n-docs-title", children: doc.data?.name ?? t.documents }),
-      doc.data && /* @__PURE__ */ jsx5("span", { className: "w100n-docs-badge", "data-kind": doc.data.kind, children: t.kinds[doc.data.kind] }),
-      versionId && /* @__PURE__ */ jsx5("span", { className: "w100n-docs-badge", children: versions.data?.find((v) => v.id === versionId) && date(versions.data.find((v) => v.id === versionId).createdAt) }),
-      versionId && here.documentId && host.restore && doc.data?.rights.edit && /* @__PURE__ */ jsxs3("button", { type: "button", className: "w100n-docs-action", disabled: restoring === "busy", onClick: () => void restore(here.documentId, versionId), children: [
-        /* @__PURE__ */ jsx5(RotateCcw, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx6("span", { className: "w100n-docs-tile", "data-kind": doc.data?.kind, children: /* @__PURE__ */ jsx6(Kind, { "aria-hidden": true }) }),
+      /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-heading", children: [
+        /* @__PURE__ */ jsx6("strong", { className: "w100n-docs-title", children: doc.data?.name ?? t.documents }),
+        crumbs.length > 0 && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-crumbs", children: crumbs.map((item, i) => /* @__PURE__ */ jsxs4("span", { children: [
+          i > 0 && /* @__PURE__ */ jsx6(ChevronRight, { "aria-hidden": true }),
+          item
+        ] }, i)) })
+      ] }),
+      doc.data && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-badge", "data-kind": doc.data.kind, children: t.kinds[doc.data.kind] }),
+      versionId && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-badge", children: versions.data?.find((v) => v.id === versionId) && date(versions.data.find((v) => v.id === versionId).createdAt) }),
+      versionId && here.documentId && host.restore && doc.data?.rights.edit && /* @__PURE__ */ jsxs4("button", { type: "button", className: "w100n-docs-action", disabled: restoring === "busy", onClick: () => void restore(here.documentId, versionId), children: [
+        /* @__PURE__ */ jsx6(RotateCcw, { "aria-hidden": true }),
         t.restore
       ] }),
-      restoring === "failed" && /* @__PURE__ */ jsx5("span", { className: "w100n-docs-muted", children: t.restoreFailed }),
-      end && /* @__PURE__ */ jsx5("div", { className: "w100n-docs-end", children: end })
+      restoring === "failed" && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-muted", children: t.restoreFailed }),
+      doc.data && !versionId && actions?.(doc.data),
+      end && /* @__PURE__ */ jsx6("div", { className: "w100n-docs-end", children: end })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-body", children: [
-      listOpen && /* @__PURE__ */ jsxs3("aside", { ref: listRef, className: "w100n-docs-list w100n-docs-island", "aria-label": t.documents, children: [
-        (spaces.data?.length ?? 0) > 1 && /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-picker", children: [
-          /* @__PURE__ */ jsxs3("button", { type: "button", className: "w100n-docs-field", "aria-haspopup": "listbox", "aria-expanded": picking, onClick: () => setPicking(!picking), children: [
-            /* @__PURE__ */ jsx5("span", { className: "w100n-docs-dot", style: { background: space?.color ?? void 0 } }),
-            space?.name ?? t.space,
-            /* @__PURE__ */ jsx5(ChevronDown, { "aria-hidden": true })
+    /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-body", children: [
+      listOpen ? /* @__PURE__ */ jsxs4("aside", { className: "w100n-docs-side w100n-docs-list", "aria-label": t.documents, children: [
+        /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-head", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-row", children: [
+            /* @__PURE__ */ jsxs4("p", { className: "w100n-docs-caption", children: [
+              /* @__PURE__ */ jsx6(Files, { "aria-hidden": true }),
+              t.documents,
+              /* @__PURE__ */ jsx6("span", { children: all.length })
+            ] }),
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "w100n-docs-close", onClick: () => setListOpen(false), "aria-label": t.closeList, title: t.closeList, children: /* @__PURE__ */ jsx6(X, { "aria-hidden": true }) })
           ] }),
-          picking && /* @__PURE__ */ jsx5("ul", { role: "listbox", className: "w100n-docs-menu", children: (spaces.data ?? []).map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs3("button", { type: "button", role: "option", "aria-selected": item.id === spaceId, onClick: () => {
-            setPicking(false);
-            go({ spaceId: item.id, documentId: null });
-          }, children: [
-            /* @__PURE__ */ jsx5("span", { className: "w100n-docs-dot", style: { background: item.color ?? void 0 } }),
-            item.name
-          ] }) }, item.id)) })
-        ] }),
-        /* @__PURE__ */ jsxs3("label", { className: "w100n-docs-field w100n-docs-search", children: [
-          /* @__PURE__ */ jsx5(Search, { "aria-hidden": true }),
-          /* @__PURE__ */ jsx5("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: t.search, "aria-label": t.search })
+          (spaces.data?.length ?? 0) > 1 && /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-picker", children: [
+            /* @__PURE__ */ jsxs4("button", { type: "button", className: "w100n-docs-field", "aria-haspopup": "listbox", "aria-expanded": picking, onClick: () => setPicking(!picking), children: [
+              space ? /* @__PURE__ */ jsx6("span", { className: "w100n-docs-dot", style: { background: space.color ?? void 0 } }) : /* @__PURE__ */ jsx6("span", { className: "w100n-docs-all", children: /* @__PURE__ */ jsx6(LayoutGrid, { "aria-hidden": true }) }),
+              /* @__PURE__ */ jsx6("b", { children: space?.name ?? t.allProjects }),
+              !space && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-count", children: all.length }),
+              /* @__PURE__ */ jsx6(ChevronDown, { "aria-hidden": true })
+            ] }),
+            picking && /* @__PURE__ */ jsxs4("div", { role: "listbox", className: "w100n-docs-menu", children: [
+              /* @__PURE__ */ jsxs4("button", { type: "button", role: "option", "aria-selected": !spaceId, onClick: () => pick(null), children: [
+                /* @__PURE__ */ jsx6("span", { className: "w100n-docs-all", children: /* @__PURE__ */ jsx6(LayoutGrid, { "aria-hidden": true }) }),
+                /* @__PURE__ */ jsx6("b", { children: t.allProjects }),
+                !spaceId && /* @__PURE__ */ jsx6(Check, { "aria-hidden": true })
+              ] }),
+              groups.map((group) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": group || void 0, children: [
+                group && /* @__PURE__ */ jsx6("p", { className: "w100n-docs-menu-caption", children: group }),
+                (spaces.data ?? []).filter((item) => (item.group ?? "") === group).map((item) => /* @__PURE__ */ jsxs4("button", { type: "button", role: "option", "aria-selected": item.id === spaceId, onClick: () => pick(item.id), children: [
+                  /* @__PURE__ */ jsx6("span", { className: "w100n-docs-dot", style: { background: item.color ?? void 0 } }),
+                  /* @__PURE__ */ jsx6("b", { children: item.name }),
+                  !spaceId && counts.get(item.id) ? /* @__PURE__ */ jsx6("span", { className: "w100n-docs-count", children: counts.get(item.id) }) : null,
+                  item.id === spaceId && /* @__PURE__ */ jsx6(Check, { "aria-hidden": true })
+                ] }, item.id))
+              ] }, group))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "w100n-docs-field w100n-docs-search", children: [
+            /* @__PURE__ */ jsx6(Search, { "aria-hidden": true }),
+            /* @__PURE__ */ jsx6("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: t.search, "aria-label": t.search })
+          ] }),
+          present.length > 1 && /* @__PURE__ */ jsx6("div", { className: "w100n-docs-chips", role: "group", children: ["all", ...present].map((item) => /* @__PURE__ */ jsxs4("button", { type: "button", "aria-pressed": kind === item, onClick: () => setKind(item), children: [
+            item === "all" ? t.all : t.kinds[item],
+            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: item === "all" ? all.length : all.filter((doc2) => doc2.kind === item).length })
+          ] }, item)) })
         ] }),
-        present.length > 1 && /* @__PURE__ */ jsx5("div", { className: "w100n-docs-chips", role: "group", children: ["all", ...present].map((item) => /* @__PURE__ */ jsx5("button", { type: "button", "aria-pressed": kind === item, onClick: () => setKind(item), children: item === "all" ? t.all : t.kinds[item] }, item)) }),
-        /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-cards", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-cards", children: [
           list.error && failed(list.retry),
-          list.loading && !list.data && /* @__PURE__ */ jsx5("p", { className: "w100n-docs-muted", children: t.loading }),
-          list.data && !shown.length && /* @__PURE__ */ jsx5("p", { className: "w100n-docs-muted", children: list.data.length ? t.nothing : t.empty }),
-          folders.map((folder) => /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-folder", role: "group", "aria-label": folder || t.loose, children: [
-            folders.length > 1 && /* @__PURE__ */ jsx5("p", { className: "w100n-docs-group", children: folder || t.loose }),
-            shown.filter((item) => (item.folder ?? "") === folder).map((item) => {
-              const Icon = icons[item.kind];
-              return /* @__PURE__ */ jsxs3("button", { type: "button", className: "w100n-docs-card", "aria-current": item.id === here.documentId, onClick: () => open(item.id), children: [
-                item.thumbnailUrl ? /* @__PURE__ */ jsx5("img", { src: item.thumbnailUrl, alt: "", className: "w100n-docs-thumb" }) : /* @__PURE__ */ jsx5("span", { className: "w100n-docs-thumb", "data-kind": item.kind, children: /* @__PURE__ */ jsx5(Icon, { "aria-hidden": true }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "w100n-docs-card-text", children: [
-                  /* @__PURE__ */ jsx5("b", { children: item.name }),
-                  /* @__PURE__ */ jsxs3("small", { children: [
-                    t.kinds[item.kind],
-                    " \xB7 ",
-                    date(item.updatedAt)
-                  ] })
-                ] })
-              ] }, item.id);
-            })
+          list.loading && !list.data && /* @__PURE__ */ jsx6("p", { className: "w100n-docs-muted", children: t.loading }),
+          list.data && !shown.length && /* @__PURE__ */ jsx6("p", { className: "w100n-docs-muted", children: all.length ? t.nothing : t.empty }),
+          folders.map((folder) => /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-folder", role: "group", "aria-label": folder || t.loose, children: [
+            folders.length > 1 && /* @__PURE__ */ jsx6("p", { className: "w100n-docs-group", children: folder || t.loose }),
+            /* @__PURE__ */ jsx6("div", { className: "w100n-docs-grid", children: shown.filter((item) => !spaceId || (item.folder ?? "") === folder).map((item) => /* @__PURE__ */ jsxs4("button", { type: "button", className: "w100n-docs-card", "aria-current": item.id === here.documentId, onClick: () => open(item), title: item.name, children: [
+              /* @__PURE__ */ jsx6(Thumb, { host, item, label: t.kinds[item.kind] }),
+              /* @__PURE__ */ jsxs4("span", { className: "w100n-docs-card-text", children: [
+                /* @__PURE__ */ jsx6("b", { children: item.name }),
+                /* @__PURE__ */ jsx6("small", { children: [!spaceId && names.get(item.spaceId), ago(item.updatedAt)].filter(Boolean).join(" \xB7 ") })
+              ] })
+            ] }, item.id)) })
           ] }, folder))
         ] })
+      ] }) : /* @__PURE__ */ jsx6("button", { type: "button", className: "w100n-docs-reopen", onClick: () => setListOpen(true), "aria-label": t.openList, title: t.openList, children: /* @__PURE__ */ jsx6(PanelLeftOpen, { "aria-hidden": true }) }),
+      /* @__PURE__ */ jsxs4("main", { className: "w100n-docs-stage", children: [
+        doc.data && /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-zoom", role: "group", children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setZoom(Math.max(50, zoom - 10)), "aria-label": t.zoomOut, title: t.zoomOut, children: /* @__PURE__ */ jsx6(Minus, { "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs4("span", { children: [
+            zoom,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setZoom(Math.min(200, zoom + 10)), "aria-label": t.zoomIn, title: t.zoomIn, children: /* @__PURE__ */ jsx6(Plus, { "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setZoom(100), "aria-label": t.fit, title: t.fit, children: /* @__PURE__ */ jsx6(Maximize2, { "aria-hidden": true }) })
+        ] }),
+        doc.data && !panelOpen && /* @__PURE__ */ jsx6("button", { type: "button", className: "w100n-docs-reopen w100n-docs-reopen-right", onClick: () => setPanelOpen(true), "aria-label": t.openPanel, title: t.openPanel, children: /* @__PURE__ */ jsx6(PanelRightOpen, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx6("div", { className: "w100n-docs-scroll", children: /* @__PURE__ */ jsx6("div", { className: "w100n-docs-zoomed", style: { zoom: zoom / 100 }, children: stage }) })
       ] }),
-      /* @__PURE__ */ jsx5("main", { className: "w100n-docs-stage", children: stage }),
-      doc.data && /* @__PURE__ */ jsxs3("aside", { className: "w100n-docs-panel w100n-docs-island", children: [
-        /* @__PURE__ */ jsx5("div", { className: "w100n-docs-tabs", role: "tablist", children: panelTabs.map(([key, Icon, label]) => /* @__PURE__ */ jsxs3("button", { type: "button", role: "tab", "aria-selected": tab === key, onClick: () => setTab(key), children: [
-          /* @__PURE__ */ jsx5(Icon, { "aria-hidden": true }),
-          label
-        ] }, key)) }),
-        tab === "outline" && (outline.length ? /* @__PURE__ */ jsx5("nav", { className: "w100n-docs-outline", children: outline.map((item) => /* @__PURE__ */ jsx5("button", { type: "button", "data-level": item.level, onClick: () => document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth", block: "start" }), children: item.text }, item.id)) }) : /* @__PURE__ */ jsx5("p", { className: "w100n-docs-muted", children: t.noOutline })),
-        tab === "versions" && /* @__PURE__ */ jsxs3("div", { className: "w100n-docs-versions", children: [
-          versions.error && failed(versions.retry),
-          (versions.data ?? []).map((item) => /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              "aria-pressed": (versionId ?? "current") === item.id || !versionId && item.current,
-              onClick: () => {
-                setRestoring("idle");
-                setVersion({ documentId: here.documentId, id: item.current ? null : item.id });
+      doc.data && panelOpen && /* @__PURE__ */ jsxs4("aside", { className: "w100n-docs-side w100n-docs-panel", "aria-label": t.details, children: [
+        /* @__PURE__ */ jsx6("div", { className: "w100n-docs-head", children: /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-row", children: [
+          /* @__PURE__ */ jsx6("div", { className: "w100n-docs-tabs", role: "tablist", children: panelTabs.map(([key, Icon, label]) => /* @__PURE__ */ jsxs4("button", { type: "button", role: "tab", "aria-selected": tab === key, onClick: () => setTab(key), children: [
+            /* @__PURE__ */ jsx6(Icon, { "aria-hidden": true }),
+            label
+          ] }, key)) }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "w100n-docs-close", onClick: () => setPanelOpen(false), "aria-label": t.closePanel, title: t.closePanel, children: /* @__PURE__ */ jsx6(X, { "aria-hidden": true }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-panel-body", children: [
+          tab === "outline" && (outline.length ? /* @__PURE__ */ jsx6("nav", { className: "w100n-docs-outline", children: outline.map((item) => /* @__PURE__ */ jsx6("button", { type: "button", "data-level": item.level, onClick: () => document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth", block: "start" }), children: item.text }, item.id)) }) : /* @__PURE__ */ jsx6("p", { className: "w100n-docs-muted", children: t.noOutline })),
+          tab === "versions" && /* @__PURE__ */ jsxs4("div", { className: "w100n-docs-versions", children: [
+            versions.error && failed(versions.retry),
+            (versions.data ?? []).map((item) => /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": (versionId ?? "current") === item.id || !versionId && item.current,
+                onClick: () => {
+                  setRestoring("idle");
+                  setVersion({ documentId: here.documentId, id: item.current ? null : item.id });
+                },
+                children: [
+                  /* @__PURE__ */ jsxs4("b", { children: [
+                    date(item.createdAt),
+                    item.current && /* @__PURE__ */ jsx6("span", { className: "w100n-docs-badge", children: t.current })
+                  ] }),
+                  /* @__PURE__ */ jsx6("small", { children: [item.author?.name, size(item.size), item.note].filter(Boolean).join(" \xB7 ") })
+                ]
               },
-              children: [
-                /* @__PURE__ */ jsxs3("b", { children: [
-                  date(item.createdAt),
-                  item.current && /* @__PURE__ */ jsx5("span", { className: "w100n-docs-badge", children: t.current })
-                ] }),
-                /* @__PURE__ */ jsx5("small", { children: [item.author?.name, size(item.size), item.note].filter(Boolean).join(" \xB7 ") })
-              ]
-            },
-            item.id
-          ))
-        ] }),
-        tab === "details" && /* @__PURE__ */ jsxs3("dl", { className: "w100n-docs-details", children: [
-          /* @__PURE__ */ jsx5("dt", { children: t.kind }),
-          /* @__PURE__ */ jsx5("dd", { children: t.kinds[doc.data.kind] }),
-          /* @__PURE__ */ jsx5("dt", { children: t.size }),
-          /* @__PURE__ */ jsx5("dd", { children: size(doc.data.size) }),
-          /* @__PURE__ */ jsx5("dt", { children: t.updated }),
-          /* @__PURE__ */ jsx5("dd", { children: date(doc.data.updatedAt) }),
-          doc.data.updatedBy && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-            /* @__PURE__ */ jsx5("dt", { children: t.by }),
-            /* @__PURE__ */ jsx5("dd", { children: doc.data.updatedBy.name })
+              item.id
+            ))
           ] }),
-          /* @__PURE__ */ jsx5("dt", { children: t.rights }),
-          /* @__PURE__ */ jsx5("dd", { children: [doc.data.rights.view && t.view, doc.data.rights.comment && t.comment, doc.data.rights.edit && t.edit].filter(Boolean).join(", ") })
-        ] }),
-        aside?.(doc.data)
+          tab === "details" && /* @__PURE__ */ jsxs4("dl", { className: "w100n-docs-details", children: [
+            /* @__PURE__ */ jsx6("dt", { children: t.kind }),
+            /* @__PURE__ */ jsx6("dd", { children: t.kinds[doc.data.kind] }),
+            /* @__PURE__ */ jsx6("dt", { children: t.size }),
+            /* @__PURE__ */ jsx6("dd", { children: size(doc.data.size) }),
+            /* @__PURE__ */ jsx6("dt", { children: t.updated }),
+            /* @__PURE__ */ jsx6("dd", { children: date(doc.data.updatedAt) }),
+            doc.data.updatedBy && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              /* @__PURE__ */ jsx6("dt", { children: t.by }),
+              /* @__PURE__ */ jsx6("dd", { children: doc.data.updatedBy.name })
+            ] }),
+            /* @__PURE__ */ jsx6("dt", { children: t.rights }),
+            /* @__PURE__ */ jsx6("dd", { children: [doc.data.rights.view && t.view, doc.data.rights.comment && t.comment, doc.data.rights.edit && t.edit].filter(Boolean).join(", ") })
+          ] }),
+          aside?.(doc.data)
+        ] })
       ] })
     ] })
   ] });