pi-weave 0.2.4 → 0.3.1

package/src/web/client/shell/workspace.css.ts

@@ -0,0 +1,117 @@
+/** Tabbed workspace furniture; the graph keeps its existing palette and renderer. */
+export const WORKSPACE_CSS = `
+.weave-workbench{position:relative;display:flex;min-height:0;overflow:hidden;background:var(--weave-page)}
+.weave-workbench button{font:inherit;color:inherit;cursor:pointer}
+.weave-workbench button:focus-visible,.weave-workbench summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-2px}
+.weave-workbench button:disabled{opacity:.35;cursor:default}
+.weave-ribbon{width:44px;flex:none;display:flex;align-items:center;flex-direction:column;gap:8px;padding:12px 0;background:var(--weave-panel);border-right:1px solid var(--weave-line)}
+.weave-ribbon button{width:32px;height:32px;border:0;border-radius:var(--weave-radius);background:transparent;font-size:var(--weave-px-display);color:var(--weave-dim)}
+.weave-ribbon button:hover,.weave-ribbon button[aria-pressed=true]{color:var(--weave-accent);background:var(--weave-new)}
+.weave-ribbon-space{flex:1}
+.weave-sidebar{flex:none;min-width:0;display:flex;flex-direction:column;background:var(--weave-panel);overflow:hidden}
+.weave-sidebar-dock{display:flex;flex:none;min-width:0;width:calc(var(--weave-sidebar-width) + 4px);overflow:hidden;opacity:1;visibility:visible;transition:width 200ms ease,opacity 160ms ease,visibility 0s}
+.weave-sidebar-dock[data-open=false]{width:0;opacity:0;visibility:hidden;transition:width 200ms ease,opacity 160ms ease,visibility 0s 200ms}
+.weave-sidebar-dock>.weave-sidebar{width:var(--weave-sidebar-width);transition:transform 200ms ease}
+.weave-sidebar-dock[data-open=false]>.weave-sidebar{transform:translateX(-16px)}
+.weave-context-dock[data-open=false]>.weave-sidebar{transform:translateX(16px)}
+.weave-sidebar-heading{display:flex;align-items:center;gap:8px;height:46px;flex:none;padding:0 12px;color:var(--weave-dim);font-size:var(--weave-px-row)}
+.weave-sidebar-heading button{border:0;background:none;padding:7px 6px;border-radius:var(--weave-radius);color:var(--weave-dim)}
+.weave-sidebar-heading button[aria-pressed=true]{color:var(--weave-fg);background:var(--weave-raise)}
+.weave-sidebar-heading button:last-child{margin-left:auto}
+.weave-sidebar .weave-tree-controls{padding:4px 12px 10px;gap:5px;flex-wrap:wrap;border:0}
+.weave-sidebar .weave-filter{height:29px;flex-basis:100%;background:var(--weave-bg);border-radius:var(--weave-radius)}
+.weave-sidebar .weave-row{min-height:32px;border-radius:var(--weave-radius);font-size:var(--weave-px-base)}
+.weave-sidebar [role=tree]{padding:0 8px}
+.weave-sidebar .weave-meta{font-size:var(--weave-px-caption);opacity:.65}
+.weave-sidebar .weave-tree-count{border:0;padding:8px 14px}
+.weave-vault-label{margin-top:auto;padding:14px 16px;border-top:1px solid var(--weave-line);display:flex;flex-direction:column;gap:4px;overflow:hidden}
+.weave-vault-label span{font-size:var(--weave-px-caption);color:var(--weave-faint);text-transform:uppercase;letter-spacing:.08em}
+.weave-vault-label strong{font-size:var(--weave-px-row);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-recents{display:flex;flex-direction:column;gap:3px;padding:6px 10px;overflow:auto}
+.weave-recents button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:9px;border-radius:var(--weave-radius);overflow:hidden}
+.weave-recents button:hover{background:var(--weave-new)}
+.weave-recents button[aria-current=page]{background:var(--weave-raise);color:var(--weave-fg)}
+.weave-recents .weave-recent-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-workspace-divider{flex:none;width:4px;background:var(--weave-panel);cursor:col-resize;touch-action:none;z-index:3}
+.weave-workspace-divider:hover,.weave-workspace-divider:focus-visible{background:var(--weave-accent)}
+.weave-workspace-divider[aria-orientation=horizontal]{width:auto;height:4px;cursor:row-resize}
+.weave-panes{display:grid;flex:1;min-width:0;min-height:0;overflow:hidden}
+.weave-pane{min-width:0;min-height:0;display:grid;grid-template-rows:42px 36px minmax(0,1fr);overflow:hidden;background:var(--weave-page)}
+.weave-pane[hidden]{display:none}
+.weave-pane-drop{position:relative}
+.weave-pane-drop::after{content:attr(data-drop-label);position:absolute;inset:4px;z-index:20;display:grid;place-items:center;pointer-events:none;border:2px dashed var(--weave-accent);border-radius:var(--weave-radius);color:var(--weave-accent);background:var(--weave-new)}
+.weave-tabs{display:flex;align-items:stretch;min-width:0;overflow-x:auto;background:var(--weave-panel);gap:3px;padding:5px 6px 0;border-bottom:1px solid var(--weave-line);scrollbar-width:thin}
+.weave-tab{display:flex;align-items:center;min-width:90px;max-width:210px;border-radius:var(--weave-radius) var(--weave-radius) 0 0;color:var(--weave-dim);flex-shrink:0;border-bottom:2px solid transparent}
+.weave-tab-active{background:var(--weave-page);color:var(--weave-fg)}
+.weave-pane-active .weave-tab-active{border-bottom-color:var(--weave-accent)}
+.weave-tab button{border:0;background:none}
+.weave-tab [role=tab]{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 9px;min-width:0;height:100%;font-size:var(--weave-px-row)}
+.weave-tab [role=tab]>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-tab [role=tab]>span:first-child{color:var(--weave-faint)}
+.weave-tab .weave-tab-close{margin-right:4px;padding:2px 5px;font-size:var(--weave-px-subhead);color:var(--weave-faint)}
+.weave-tab-close:hover{color:var(--weave-fg);background:var(--weave-raise)}
+.weave-dirty{font-size:var(--weave-px-prov);color:var(--weave-accent)}
+.weave-new-tab{border:0;background:none;padding:4px 10px;font-size:var(--weave-px-display)!important;color:var(--weave-dim)!important}
+.weave-pane-toolbar{display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid var(--weave-line);color:var(--weave-dim);font-size:var(--weave-px-row)}
+.weave-pane-toolbar>button{width:26px;height:26px;border:0;background:none;border-radius:var(--weave-radius)}
+.weave-pane-toolbar>button:hover{background:var(--weave-new)}
+.weave-breadcrumb{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size:var(--weave-px-ui)}
+.weave-pane-menu{position:relative}
+.weave-pane-menu>summary{list-style:none;cursor:pointer;padding:5px 10px;font-size:var(--weave-px-subhead)}
+.weave-pane-menu>summary::-webkit-details-marker{display:none}
+.weave-pane-menu>div{position:absolute;right:0;top:100%;z-index:12;width:185px;padding:5px;display:flex;flex-direction:column;background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius)}
+.weave-pane-menu button{text-align:left;border:0;background:none;padding:9px 10px;font-size:var(--weave-px-row)}
+.weave-pane-menu button:hover{background:var(--weave-new)}
+.weave-pane-content{min-width:0;min-height:0;display:flex;overflow:hidden;position:relative}
+.weave-document{display:flex;min-width:0;min-height:0;flex:1}
+.weave-document .weave-note{width:100%;border-left:0}
+.weave-document .weave-note-head{position:static;padding:28px max(24px,calc((100% - 760px)/2)) 18px;border:0}
+.weave-document .weave-note-title{font-size:var(--weave-px-display);letter-spacing:-.03em;margin-bottom:12px}
+.weave-document .weave-note-body{padding:10px max(24px,calc((100% - 760px)/2)) 64px;font-size:var(--weave-px-subhead);line-height:1.8}
+.weave-document .weave-note-body h1{font-size:var(--weave-px-display);line-height:1.4;margin-bottom:18px}
+.weave-document .weave-note-body h2{font-size:var(--weave-px-title);margin-top:28px}
+.weave-document .weave-note-editor{padding:14px 28px;min-height:220px;flex:1}
+.weave-document .weave-note-tags{margin-top:12px}
+.weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius)}
+.weave-welcome{align-self:center;margin:auto;padding:35px;max-width:560px;color:var(--weave-dim);line-height:1.7}
+.weave-welcome-mark{font-size:var(--weave-px-display);color:var(--weave-accent)}
+.weave-welcome h1{font-size:var(--weave-px-display);line-height:1.4;letter-spacing:-.025em;color:var(--weave-fg);font-weight:550}
+.weave-welcome p{font-size:var(--weave-px-base);margin:14px 0 24px}
+.weave-welcome>div{display:flex;gap:12px;flex-wrap:wrap}
+.weave-welcome button{border:1px solid var(--weave-line-strong);background:var(--weave-panel);padding:9px 13px;border-radius:var(--weave-radius);font-size:var(--weave-px-row)}
+.weave-welcome button:hover{border-color:var(--weave-accent)}
+.weave-welcome kbd{color:var(--weave-faint);padding-left:16px}
+.weave-sidebar-context .weave-rail{flex:1;border:0;overflow:auto;padding:6px 12px}
+.weave-sidebar-context .weave-ctx-link{padding-top:7px;padding-bottom:7px}
+.weave-graph-host{position:absolute;z-index:2;display:flex;background:var(--weave-bg)}
+.weave-graph-host>.weave-graph{width:100%;height:100%;flex:1}
+.weave-graph-preview{pointer-events:none;position:absolute;z-index:2;right:8px;bottom:64px;width:min(280px,calc(100% - 16px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:10px 34px 10px 10px;background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);box-shadow:0 6px 22px #0003}
+.weave-graph-preview-info{display:flex;align-items:center;gap:8px;min-width:0}
+.weave-graph-preview-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
+.weave-graph-preview-kind{font-size:var(--weave-px-caption);color:var(--weave-faint);text-transform:capitalize}
+.weave-graph-preview-title{font-size:var(--weave-px-row);font-weight:550;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
+.weave-graph-preview-close{pointer-events:auto;position:absolute;right:5px;top:5px;width:24px;height:24px;border:0;border-radius:var(--weave-radius);background:transparent;font-size:18px;color:var(--weave-dim)}
+.weave-graph-preview-close:hover{background:var(--weave-new);color:var(--weave-fg)}
+.weave-graph-preview>.weave-chip{pointer-events:auto;align-self:flex-start;max-width:100%;white-space:normal;text-align:left}
+.weave-footer{display:flex;align-items:center;min-width:0;background:var(--weave-panel);border-top:1px solid var(--weave-line);font-size:var(--weave-px-ui);color:var(--weave-faint)}
+.weave-footer>.weave-status{flex:1;min-width:0;border:0}
+.weave-footer>span{padding:4px 10px;white-space:nowrap}
+.weave-footer>button{font:inherit;color:var(--weave-fg);background:none;border:0;padding:7px 12px;cursor:pointer}
+@media(max-width:1049px){
+  .weave-context-dock{position:absolute;right:0;top:0;bottom:0;z-index:10;width:var(--weave-sidebar-width)}
+  .weave-sidebar-context{border-left:1px solid var(--weave-line-strong)}
+  .weave-context-dock>.weave-workspace-divider{display:none}
+}
+@media(max-width:849px){
+  .weave-notes-dock{position:absolute;left:44px;top:0;bottom:0;z-index:10;width:var(--weave-sidebar-width);box-shadow:8px 0 24px #0002}
+  .weave-sidebar-notes{border-right:1px solid var(--weave-line-strong)}
+  .weave-notes-dock>.weave-workspace-divider{display:none}
+  .weave-workbench>.weave-workspace-divider{display:none}
+  .weave-panes{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
+  .weave-document .weave-note-head{padding:20px}
+  .weave-document .weave-note-body{padding:10px 20px 40px}
+}
+@media(prefers-reduced-motion:reduce){
+  .weave-sidebar-dock,.weave-sidebar-dock[data-open=false],.weave-sidebar-dock>.weave-sidebar{transition:none}
+}
+`;

package/src/web/client/tree/Tree.tsx

@@ -1,5 +1,6 @@
 /** The vault and repository tree column. */
 
+import { NOTE_DRAG_TYPE } from "../shell/shell.model";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { createFolder, deleteFolder, deleteNote, moveNote, renameFolder, renameNote } from "../api";
 import { fetchJson } from "../api.dom";
@@ -20,7 +21,6 @@ import {
   deleteNeedsConfirmation,
   depthVar,
   dropFolder,
-  expand,
   initialTreeView,
   newFolderParent,
   newFolderPath,
@@ -33,6 +33,8 @@ import {
   rowCountLabel,
   rowViews,
   rowsFor,
+  revealFolder,
+  affectedNoteSlugs,
   setQuery,
   toggleExpanded,
   toggleInternals,
@@ -44,12 +46,12 @@ export interface TreeProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   recentIds: ReadonlySet<string>;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, newTab?: boolean, keepSidebar?: boolean) => void;
   /**
    * Ask before a mutation that would invalidate an open draft. `false` means
    * keep editing: the mutation must not run.
    */
-  onMutate: () => boolean;
+  onMutate: (slugs: readonly string[]) => boolean;
   onRefresh: () => void;
   now: number;
 }
@@ -74,7 +76,7 @@ export function Icon({ name, class: className }: { name: IconName; class?: strin
   );
 }
 
-function Row({ view, recentIds, edit, onEdit, onRename, onSelect, onToggle, onMenu, onDrop }: { view: ReturnType<typeof rowViews>[number]; recentIds: ReadonlySet<string>; edit: string | null; onEdit: (value: string) => void; onRename: (value: string | null) => void; onSelect: () => void; onToggle: () => void; onMenu: (x: number, y: number) => void; onDrop: (id: string) => void }) {
+function Row({ view, recentIds, edit, onEdit, onRename, onSelect, onToggle, onMenu, onDrop }: { view: ReturnType<typeof rowViews>[number]; recentIds: ReadonlySet<string>; edit: string | null; onEdit: (value: string) => void; onRename: (value: string | null) => void; onSelect: (newTab: boolean) => void; onToggle: () => void; onMenu: (x: number, y: number) => void; onDrop: (id: string) => void }) {
   const folder = dropFolder(view.id);
   return (
     <li
@@ -88,10 +90,10 @@ function Row({ view, recentIds, edit, onEdit, onRename, onSelect, onToggle, onMe
       aria-selected={view.selected}
       aria-expanded={view.hasKids ? view.expanded : undefined}
       style={depthVar(view.depth)}
-      onClick={onSelect}
+      onClick={(event) => onSelect(event.metaKey || event.ctrlKey)}
       draggable={view.id.startsWith("note:")}
       aria-label={view.id === DRAFT_FOLDER_ID ? "New folder" : undefined}
-      onDragStart={(event) => event.dataTransfer?.setData("text/plain", view.id)}
+      onDragStart={(event) => { event.dataTransfer?.setData("text/plain", view.id); event.dataTransfer?.setData(NOTE_DRAG_TYPE, view.id); if (event.dataTransfer) event.dataTransfer.effectAllowed = "copyMove"; }}
       onDragOver={folder === undefined ? undefined : (event) => event.preventDefault()}
       onDrop={folder === undefined ? undefined : (event) => { event.preventDefault(); onDrop(event.dataTransfer?.getData("text/plain") ?? ""); }}
       onContextMenu={(event) => { event.preventDefault(); event.stopPropagation(); onMenu(event.clientX, event.clientY); }}
@@ -161,6 +163,14 @@ export function Tree(props: TreeProps) {
    * what makes a mis-click cheap.
    */
   const [menu, setMenu] = useState<{ id: string; label: string; x: number; y: number; armed?: boolean } | null>(null);
+  const root = useRef<HTMLDivElement | null>(null);
+  useLayoutEffect(() => {
+    if (menu !== null) root.current?.querySelector<HTMLButtonElement>(".weave-menu button")?.focus();
+  }, [menu?.id]);
+  const closeMenu = (): void => {
+    setMenu(null);
+    root.current?.querySelector<HTMLButtonElement>(".weave-tree-actions")?.focus();
+  };
   const [editing, setEditing] = useState<{ id: string; label: string; value: string } | null>(null);
   /**
    * The parent path a pending "New folder" will be created under, or `null`.
@@ -190,15 +200,16 @@ export function Tree(props: TreeProps) {
       // gesture `rename` already uses, and it shows *where* the folder will
       // land, which a prompt cannot.
       const parent = newFolderParent(target);
-      if (parent !== "") setState((current) => expand(current, `vfolder:${parent}`));
+      setState((current) => revealFolder(current, parent));
       setDraft(parent);
       setEditing({ id: DRAFT_FOLDER_ID, label: "", value: "" });
     } else if (action === "rename") {
+      setState((current) => revealFolder(current, target.path.split("/").slice(0, -1).join("/")));
       setEditing({ id: menu.id, label: menu.label, value: menu.label });
     } else if (target.type !== "vault") {
       // Before the request: asking after a delete is asking about a file that
       // is already gone, and "keep editing" would strand the draft on a 404.
-      if (deletesSelection(props.selectedId, target) && !props.onMutate()) return;
+      if (!props.onMutate(affectedNoteSlugs(props.graph, target))) return;
       await run(target.type === "note" ? deleteNote(fetchJson, target.path) : deleteFolder(fetchJson, target.path), deletesSelection(props.selectedId, target) ? "vault" : undefined);
     }
   };
@@ -247,24 +258,32 @@ export function Tree(props: TreeProps) {
     // is the least useful moment to ask. Renaming back is one more rename.
     // An open draft is a different question; `onMutate` asks that one.
     if (target !== null && name && name !== current.label) {
-      if (deletesSelection(props.selectedId, target) && !props.onMutate()) return;
+      if (!props.onMutate(affectedNoteSlugs(props.graph, target))) return;
       void run(target.type === "note" ? renameNote(fetchJson, target.path, name) : renameFolder(fetchJson, target.path, name));
     }
   };
 
   return (
-    <div class="weave-tree" onKeyDown={(event) => {
+    <div class="weave-tree" ref={root} onKeyDown={(event) => {
+      if (menu !== null && event.key === "Escape") {
+        event.preventDefault(); event.stopPropagation(); closeMenu(); return;
+      }
       const target = event.target as KeyTarget;
       const next = treeKey(rows, state, props.selectedId, event.key, isTextEntry(target?.tagName ?? null, target?.isContentEditable === true));
       if (!next.handled) return;
       event.preventDefault();
       setState(next.state);
-      if (next.selectedId !== null) props.onSelect(next.selectedId);
+      if (next.selectedId !== null) props.onSelect(next.selectedId, false, true);
     }}>
       <div class="weave-tree-controls">
         <input type="search" class="weave-filter" value={state.query} placeholder={FILTER_PLACEHOLDER} aria-label={FILTER_LABEL} title={FILTER_HINT} onInput={(event) => setState(setQuery(state, event.currentTarget.value))} />
         <button type="button" class="weave-chip" title={provenanceHint(state.provFilter)} onClick={() => setState(cycleProvenance(state))}>◧ {provenanceLabel(state.provFilter)}</button>
         <button type="button" class="weave-chip" title={internalsHint(state.showInternals)} onClick={() => setState(toggleInternals(state))}>◧ {internalsLabel(state.showInternals)}</button>
+        <button type="button" class="weave-chip weave-tree-actions" aria-label="File actions" title="File actions for the selected item" onClick={(event) => {
+          const id = props.selectedId !== null && mutableTreeRow(props.selectedId) !== null ? props.selectedId : "vault";
+          const at = event.currentTarget.getBoundingClientRect();
+          setMenu({ id, label: props.graph?.model.nodes.find((node) => node.id === id)?.label ?? "Vault", x: at.left, y: at.bottom });
+        }}>···</button>
       </div>
       {empty === null ? (
         <ul
@@ -278,7 +297,7 @@ export function Tree(props: TreeProps) {
             setMenu({ id: "vault", label: "Vault", x: event.clientX, y: event.clientY });
           }}
         >
-          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={() => { props.onSelect(view.id); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) { if (dragged === props.selectedId && !props.onMutate()) return; void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); } }} />)}
+          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={(newTab) => { props.onSelect(view.id, newTab); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) { const target = mutableTreeRow(dragged); if (target !== null && !props.onMutate(affectedNoteSlugs(props.graph, target))) return; void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); } }} />)}
         </ul>
       ) : <p class="weave-tree-empty">{empty}</p>}
       <p class="weave-tree-count">{rowCountLabel(rows)}</p>
@@ -286,8 +305,18 @@ export function Tree(props: TreeProps) {
         const target = mutableTreeRow(menu.id)!;
         return (
           <>
-            <button type="button" class="weave-menu-backdrop" aria-label="Close context menu" onClick={() => setMenu(null)} />
-            <div class="weave-menu" role="menu" style={{ left: `${menu.x}px`, top: `${menu.y}px` }}>
+            <button type="button" class="weave-menu-backdrop" aria-label="Close context menu" onClick={closeMenu} />
+            <div class="weave-menu" role="menu" style={{ left: `${menu.x}px`, top: `${menu.y}px` }} onKeyDown={(event) => {
+              if (event.key === "Escape") { event.preventDefault(); closeMenu(); }
+              else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                const items = [...event.currentTarget.querySelectorAll<HTMLButtonElement>("button")];
+                const index = items.indexOf(document.activeElement as HTMLButtonElement);
+                const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+                items[next]?.focus();
+              }
+              event.stopPropagation();
+            }}>
               <button type="button" role="menuitem" onClick={() => void act("newFolder")}>New folder…</button>
               {target.type !== "vault" ? (
                 <>

package/src/web/client/tree/tree.model.ts

@@ -74,6 +74,17 @@ export function initialTreeView(roots: readonly string[] = ["vault", "repository
   return { expanded: new Set(roots), showInternals: false, provFilter: null, query: "" };
 }
 
+/** Make an inline file operation visible even when its destination was filtered or collapsed. */
+export function revealFolder(state: TreeViewState, path: string): TreeViewState {
+  const expanded = new Set(state.expanded).add("vault");
+  let parent = "";
+  for (const part of path ? path.split("/") : []) {
+    parent = parent ? `${parent}/${part}` : part;
+    expanded.add(`vfolder:${parent}`);
+  }
+  return { ...state, expanded, query: "", provFilter: null };
+}
+
 // --- reassembling the wire payload -------------------------------------------------
 
 /**
@@ -224,6 +235,14 @@ export function mutableTreeRow(id: string): { type: "note" | "folder" | "vault";
   return null;
 }
 
+/** Note slugs a note or folder mutation can invalidate. */
+export function affectedNoteSlugs(graph: GraphPayload | null, target: { type: "note" | "folder" | "vault"; path: string }): string[] {
+  if (target.type === "note") return [target.path];
+  if (target.type !== "folder" || graph === null) return [];
+  const prefix = `note:${target.path}/`;
+  return graph.model.nodes.filter((node) => node.kind === "note" && node.id.startsWith(prefix)).map((node) => node.id.slice(5));
+}
+
 export function deletesSelection(selectedId: string | null, target: { type: "note" | "folder" | "vault"; path: string }): boolean {
   if (selectedId === null) return false;
   if (target.type === "note") return selectedId === `note:${target.path}`;

package/src/web/client/workspace.ts

@@ -1,6 +1,6 @@
 /** Fetching and polling for the browser workspace. */
 
-import type { GraphPayload } from "../shared/wire";
+import type { GraphPayload, NotePayload } from "../shared/wire";
 import type { ApiResult, FetchLike } from "./api";
 import { fetchGraph, fetchNote } from "./api";
 import type { WorkspaceState } from "./state";
@@ -115,3 +115,21 @@ export function startWorkspace(opts: WorkspaceOptions): WorkspaceHandle {
     },
   };
 }
+
+/** Per-document loading: retry failures, and drop completions after a tab leaves. */
+export function watchNote(fetch: FetchLike, slug: string, notify: (result: ApiResult<NotePayload>) => void,
+  defer: (fn: () => void, ms: number) => () => void = (fn, ms) => {
+    const timer = setTimeout(fn, ms); return () => clearTimeout(timer);
+  }): () => void {
+  let stopped = false;
+  let cancel: (() => void) | null = null;
+  const load = async (): Promise<void> => {
+    if (stopped) return;
+    const result = await fetchNote(fetch, slug);
+    if (stopped) return;
+    notify(result);
+    if (!result.ok) cancel = defer(() => void load(), POLL_MS);
+  };
+  void load();
+  return () => { stopped = true; cancel?.(); };
+}

package/src/web/server/controller.ts

@@ -0,0 +1,79 @@
+import { platform as osPlatform } from "node:os";
+import { resolveVaultRoot, WorkspaceCache } from "../../core";
+import {
+  startWorkspaceServer,
+  type StartWorkspaceServerOptions,
+  type WorkspaceServer,
+} from "./server";
+
+export type StartServerFn = (opts: StartWorkspaceServerOptions) => Promise<WorkspaceServer>;
+
+export interface WorkspaceServerSession {
+  server: WorkspaceServer;
+  cache: WorkspaceCache;
+  cwd: string;
+}
+
+export interface WorkspaceServerControllerDeps {
+  startServer?: StartServerFn;
+  vaultRoot?: () => string;
+  onStateChange?: () => void;
+}
+
+/** Owns one browser-workspace server for one plugin instance. */
+export class WorkspaceServerController {
+  private session: WorkspaceServerSession | null = null;
+  private pending: Promise<void> = Promise.resolve();
+
+  constructor(private readonly deps: WorkspaceServerControllerDeps = {}) {}
+
+  port(): number | null {
+    return this.session?.server.port ?? null;
+  }
+
+  run(cwd: string): Promise<{ session: WorkspaceServerSession; started: boolean }> {
+    return this.enqueue(async () => {
+      const existing = this.session;
+      if (existing?.cwd === cwd) return { session: existing, started: false };
+      if (existing) await this.stop();
+      const session = await this.bootOnce(cwd);
+      this.session = session;
+      this.deps.onStateChange?.();
+      return { session, started: true };
+    });
+  }
+
+  close(): Promise<void> {
+    return this.enqueue(() => this.stop());
+  }
+
+  private enqueue<T>(task: () => Promise<T>): Promise<T> {
+    const result = this.pending.then(task);
+    this.pending = result.then(() => undefined, () => undefined);
+    return result;
+  }
+
+  private async stop(): Promise<void> {
+    const session = this.session;
+    if (!session) return;
+    this.session = null;
+    await session.server.close();
+    this.deps.onStateChange?.();
+  }
+
+  private async bootOnce(cwd: string): Promise<WorkspaceServerSession> {
+    const vaultRoot = (this.deps.vaultRoot ?? resolveVaultRoot)();
+    const cache = new WorkspaceCache({ cwd, vaultRoot });
+    const server = await (this.deps.startServer ?? startWorkspaceServer)({ cwd, vaultRoot, cache });
+    return { server, cache, cwd };
+  }
+}
+
+export function browserOpenCommand(
+  url: string,
+  os: NodeJS.Platform = osPlatform(),
+): { command: string; args: string[] } {
+  if (os === "darwin") return { command: "open", args: [url] };
+  if (os === "win32") return { command: "cmd", args: ["/c", "start", "", url] };
+  return { command: "xdg-open", args: [url] };
+}

package/src/web/server/routes.ts

@@ -43,7 +43,7 @@
  * `resolveNotePath` (via `getNote`) rejects unsafe slugs.
  */
 
-import { createHash } from "node:crypto";
+import { createHash, randomUUID } from "node:crypto";
 import { readFile } from "node:fs/promises";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type { WorkspaceSnapshot } from "../../core/cache/workspace";
@@ -65,6 +65,8 @@ import type {
 } from "../shared/wire";
 import { WIRE_MODEL_OMITTED_KEYS } from "../shared/wire";
 import { renderPage } from "./page";
+import { isWorkspaceViewId, type WorkspaceStateStore } from "./workspace-state";
+import { parseWorkspaceLayout } from "../shared/workspace";
 import type { RequestFacts, SecurityPolicy } from "./security";
 import { requestFacts } from "./security";
 
@@ -78,6 +80,7 @@ export interface RouteDeps {
   bundlePath: string;
   /** Test seam for `POST /api/open`; defaults to the real editor shell-out. */
   openNote?: ((slug: string) => Promise<boolean>) | undefined;
+  workspaceState: WorkspaceStateStore;
 }
 
 const JSON_TYPE = "application/json; charset=utf-8";
@@ -160,8 +163,9 @@ export function parseTarget(url: string): Target {
  * the caller has exactly one failure branch.
  */
 export const MAX_BODY_BYTES = 64 * 1024;
+const MAX_WORKSPACE_STATE_BODY_BYTES = 256 * 1024;
 
-export async function readJsonBody(req: IncomingMessage): Promise<unknown | null> {
+export async function readJsonBody(req: IncomingMessage, maxBytes = MAX_BODY_BYTES): Promise<unknown | null> {
   const chunks: Buffer[] = [];
   let size = 0;
   // `IncomingMessage` yields Buffers unless `setEncoding` was called, and we
@@ -169,7 +173,7 @@ export async function readJsonBody(req: IncomingMessage): Promise<unknown | null
   // pretending to be defensive.
   for await (const chunk of req as AsyncIterable<Buffer>) {
     size += chunk.length;
-    if (size > MAX_BODY_BYTES) return null;
+    if (size > maxBytes) return null;
     chunks.push(chunk);
   }
   if (chunks.length === 0) return null;
@@ -375,6 +379,10 @@ async function route(
   if (method === "GET" && path === "/") return sendShell(deps, res);
   if (method === "GET" && path === "/app.js") return sendBundle(deps, res);
   if (method === "GET" && path === "/api/graph") return sendGraph(deps, req, res);
+  if (method === "GET" && path === "/api/workspace-state") {
+    return sendJson(res, 200, { viewId: randomUUID(), layout: await deps.workspaceState.readLatest() }, { "cache-control": "no-store" });
+  }
+  if (method === "POST" && path === "/api/workspace-state") return saveWorkspaceState(deps, req, res);
   if (path.startsWith("/api/folder/")) {
     const handled = await routeFolder(deps, method, path.slice("/api/folder/".length), req, res);
     if (handled) return;
@@ -396,6 +404,29 @@ async function route(
 
 // --- handlers ----------------------------------------------------------------
 
+async function saveWorkspaceState(deps: RouteDeps, req: IncomingMessage, res: ServerResponse): Promise<void> {
+  const body = await readJsonBody(req, MAX_WORKSPACE_STATE_BODY_BYTES);
+  if (!body || typeof body !== "object" || Array.isArray(body)) {
+    sendJson(res, 400, { error: "Expected a workspace state object" });
+    return;
+  }
+  const record = body as Record<string, unknown>;
+  if (
+    Object.keys(record).length !== 2 || !Object.hasOwn(record, "viewId") || !Object.hasOwn(record, "layout") ||
+    !isWorkspaceViewId(record.viewId)
+  ) {
+    sendJson(res, 400, { error: "Expected a UUID viewId and a valid layout" });
+    return;
+  }
+  const layout = parseWorkspaceLayout(record.layout);
+  if (layout === null) {
+    sendJson(res, 400, { error: "Invalid workspace layout" });
+    return;
+  }
+  await deps.workspaceState.write(record.viewId, layout);
+  sendJson(res, 200, { ok: true }, { "cache-control": "no-store" });
+}
+
 function sendShell(deps: RouteDeps, res: ServerResponse): void {
   const page = renderPage({
     bootstrap: { cwd: deps.cwd },

package/src/web/server/server.ts

@@ -19,6 +19,7 @@ import { WorkspaceCache } from "../../core/cache/workspace";
 import { resolveVaultRoot } from "../../core/paths";
 import { handleRequest, type RouteDeps } from "./routes";
 import { createSecurityPolicy, type SecurityPolicy } from "./security";
+import { createWorkspaceStateStore, defaultWorkspaceStateDir } from "./workspace-state";
 
 /**
  * The committed bundle, resolved relative to this module rather than to
@@ -41,6 +42,8 @@ export interface StartWorkspaceServerOptions {
   cookieName?: string | undefined;
   /** Absolute path to the client bundle. Defaults to the committed one. */
   bundlePath?: string | undefined;
+  /** Presentation snapshot directory. Defaults to the user's pi-weave config directory. */
+  presentationStateDir?: string | undefined;
   /** Test seam for `POST /api/open`. */
   openNote?: ((slug: string) => Promise<boolean>) | undefined;
 }
@@ -61,6 +64,7 @@ export interface WorkspaceServer {
 export async function startWorkspaceServer(opts: StartWorkspaceServerOptions): Promise<WorkspaceServer> {
   const vaultRoot = opts.vaultRoot ?? resolveVaultRoot();
   const cache = opts.cache ?? new WorkspaceCache({ cwd: opts.cwd, vaultRoot });
+  const workspaceState = await createWorkspaceStateStore(opts.cwd, vaultRoot, opts.presentationStateDir ?? defaultWorkspaceStateDir());
   // `deps` is assembled before `listen` because the request handler closes
   // over it, but the security policy needs the bound port — so the policy
   // slot is filled after binding and the handler reads it through the
@@ -104,6 +108,7 @@ export async function startWorkspaceServer(opts: StartWorkspaceServerOptions): P
     security,
     bundlePath: opts.bundlePath ?? defaultBundlePath(),
     ...(opts.openNote !== undefined ? { openNote: opts.openNote } : {}),
+    workspaceState,
   };
 
   return {