pi-weave 0.3.11 → 0.3.13

package/src/web/client/graph/Graph.tsx

@@ -154,6 +154,18 @@ export function Graph(props: GraphProps) {
   // mount frames the *starting* positions, which a settling simulation then
   // pushes past the edges — a two-note vault opened with clipped circles.
   const fitted = useRef(false);
+  // A re-frame asked for while the layout was still moving, done when it rests.
+  const reframe = useRef(false);
+  /**
+   * Frame the graph for where it is shown: the full view fits everything, and
+   * the Context card's note graph opens on the open note and its neighbours,
+   * since you read it while on that note (`renderer.ts`'s `focus`).
+   */
+  const frame = useCallback(() => {
+    const { full: whole, model: shown } = live.current;
+    if (whole) renderer.current?.fit();
+    else renderer.current?.focus(shown.highlight);
+  }, []);
   /**
    * Arm the simulation clock — idempotent.
    *
@@ -171,9 +183,10 @@ export function Graph(props: GraphProps) {
       engine.tick();
       // Asleep: let the clock die. The next pin re-arms it.
       if (!engine.awake()) {
-        if (!fitted.current) {
+        if (!fitted.current || reframe.current) {
           fitted.current = true;
-          renderer.current?.fit();
+          reframe.current = false;
+          frame();
         }
         return;
       }
@@ -220,8 +233,8 @@ export function Graph(props: GraphProps) {
   // Read by the mount-time `onSelect`, which outlives this render.
   const trailRef = useRef<ReadonlyMap<string, TrailGlow>>(NO_GLOWS);
   trailRef.current = props.trail ?? NO_GLOWS;
-  const live = useRef({ view, model, picture, onSelect: props.onSelect, selectedId: props.selectedId });
-  live.current = { view, model, picture, onSelect: props.onSelect, selectedId: props.selectedId };
+  const live = useRef({ view, model, picture, full, onSelect: props.onSelect, selectedId: props.selectedId });
+  live.current = { view, model, picture, full, onSelect: props.onSelect, selectedId: props.selectedId };
 
   useEffect(() => {
     const instance = props.renderer(scheme);
@@ -320,6 +333,16 @@ export function Graph(props: GraphProps) {
     renderer.current?.setHighlight(picture.highlight, picture.selectedId, picture.style);
   }, [picture]);
 
+  // Re-frame when another note opens under the Context card's graph, or the
+  // graph moves between the card and the full view. A click in the full view
+  // leaves the camera where it is. Before the first layout rests, the settle
+  // frames it; while the layout is still moving, the frame waits for it.
+  useEffect(() => {
+    if (!fitted.current) return;
+    if (clock.current !== null) reframe.current = true;
+    else frame();
+  }, [full, full ? null : props.selectedId]);
+
   useEffect(() => {
     renderer.current?.setTrail(trailRef.current);
   }, [props.trail]);

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

@@ -545,6 +545,47 @@ export function frameBox(points: readonly Point[]): ViewBox | null {
   return { x: [minX - padding, maxX + padding], y: [minY - padding, maxY + padding] };
 }
 
+/** Where sigma's camera looks, in the unit square a {@link ViewBox} is normalized onto. */
+export interface CameraTarget {
+  readonly x: number;
+  readonly y: number;
+  /** Sigma's zoom: 1 shows the whole box, smaller is closer. */
+  readonly ratio: number;
+}
+
+/** Room a focus leaves around what it frames, as a multiple of its span. */
+export const FOCUS_MARGIN = 1.2;
+
+/** The smallest span a focus frames, so a note with no links is not blown up to fill the card. */
+export const FOCUS_MIN_SPAN = COLLIDE_RADIUS * 10;
+
+/**
+ * The camera that frames `points` in a view frozen on `box`.
+ *
+ * The Context card's note graph is read while you are on a note, so it opens
+ * on that note and its neighbours instead of the whole vault. This is the
+ * arithmetic. Sigma normalizes the box onto a unit square centred on 0.5 (its
+ * longer side becomes 1), and a camera ratio of 1 shows that whole square. So
+ * the camera's centre is the points' centre in that square, and its ratio is
+ * their padded span as a share of the box. Never above 1: a focus does not
+ * zoom out past the fit.
+ *
+ * `null` when there is nothing to frame: no box, or no finite point.
+ */
+export function focusCamera(box: ViewBox | null, points: readonly Point[]): CameraTarget | null {
+  const around = frameBox(points);
+  if (box === null || around === null) return null;
+  const extent = Math.max(box.x[1] - box.x[0], box.y[1] - box.y[0]);
+  const scale = extent > 0 && Number.isFinite(extent) ? extent : 1;
+  const span = Math.max(around.x[1] - around.x[0], around.y[1] - around.y[0], FOCUS_MIN_SPAN);
+  const centre = (range: readonly [number, number]): number => (range[0] + range[1]) / 2;
+  return {
+    x: 0.5 + (centre(around.x) - centre(box.x)) / scale,
+    y: 0.5 + (centre(around.y) - centre(box.y)) / scale,
+    ratio: Math.min(1, (span * FOCUS_MARGIN) / scale),
+  };
+}
+
 /** The empty graph. What the column renders before the first payload lands. */
 export const EMPTY_RENDER_GRAPH: RenderGraph = { nodes: [], edges: [] };
 

package/src/web/client/graph/renderer.ts

@@ -1,7 +1,7 @@
 import type { GraphTheme } from "../../shared/themes";
 import type { Point } from "../../shared/layout";
-import type { EdgeDisplayOverride, GraphSettings, HighlightStyle, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, TrailGlow, ViewBox } from "./graph.model";
-import { edgeReducer, fadeStep, frameBox, graphSettings, labelThreshold, nodeReducer, trailOverride } from "./graph.model";
+import type { CameraTarget, EdgeDisplayOverride, GraphSettings, HighlightStyle, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, TrailGlow, ViewBox } from "./graph.model";
+import { edgeReducer, fadeStep, focusCamera, frameBox, graphSettings, labelThreshold, nodeReducer, trailOverride } from "./graph.model";
 import type { ProjectedGraph } from "./project";
 import { positionsOf, project, syncPositions } from "./project";
 
@@ -68,7 +68,7 @@ export interface SigmaLike {
    */
   setCustomBBox(box: ViewBox | null): unknown;
   refresh(): unknown;
-  getCamera(): { animatedReset(): Promise<void> };
+  getCamera(): { animatedReset(): Promise<void>; animate(state: CameraTarget): Promise<void> };
   kill(): void;
 }
 
@@ -169,6 +169,20 @@ export function sigmaRenderer(
   /** The box to freeze the view on, from the graph's *current* positions. */
   const boxOf = (): ViewBox | null => frameBox([...positionsOf(graph).values()]);
 
+  /**
+   * Repaint once a camera move lands. Sigma leaves edges out of frames drawn
+   * while the camera moves (`hideEdgesOnMove`) and repaints when the camera
+   * changes; a move onto where the camera already is changes nothing, so the
+   * frame drawn during it, without edges, stayed on screen until something
+   * else repainted. A renderer destroyed mid-move paints nothing, and a
+   * rejection from a camera killed mid-flight is noise.
+   */
+  const settle = (instance: SigmaLike, move: Promise<void>): void => {
+    move.then(() => {
+      if (sigma === instance) instance.refresh();
+    }, () => {});
+  };
+
   /**
    * Push the current highlight into sigma's reducers (§7.4).
    *
@@ -346,14 +360,24 @@ export function sigmaRenderer(
       const instance = sigma;
       if (instance === null) return;
       instance.setCustomBBox(boxOf());
-      // Sigma leaves edges out of frames drawn while the camera moves
-      // (`hideEdgesOnMove`) and repaints when the camera changes. A reset onto
-      // where the camera already is changes nothing, so the frame drawn during
-      // it, without edges, stayed on screen until something else repainted.
-      // One refresh once it settles draws them back.
-      instance.getCamera().animatedReset().then(() => {
-        if (sigma === instance) instance.refresh();
-      }, () => {});
+      settle(instance, instance.getCamera().animatedReset());
+    },
+
+    /**
+     * Frame these nodes instead of the whole graph — the Context card's note
+     * graph opening on the note you are reading (`focusCamera`). Re-frames on
+     * the current positions first, like `fit`, so the camera and the box
+     * agree. Nothing to frame (`null`, or no drawn node among `ids`) is a fit.
+     */
+    focus(ids: ReadonlySet<string> | null) {
+      const instance = sigma;
+      if (instance === null) return;
+      const box = boxOf();
+      const at = positionsOf(graph);
+      const points = [...(ids ?? [])].flatMap((id) => at.get(id) ?? []);
+      const target = focusCamera(box, points);
+      instance.setCustomBBox(box);
+      settle(instance, target === null ? instance.getCamera().animatedReset() : instance.getCamera().animate(target));
     },
 
     positions() {

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

@@ -21,9 +21,10 @@ import { kindIcon } from "../tree/tree.model";
 import type { IconName } from "./icons.model";
 export const NOTE_DRAG_TYPE = "application/x-weave-note";
 
-/** Pane drops open only note IDs that still exist in this workspace. */
+/** Pane drops open only note and HTML artifact IDs that still exist in this workspace. */
 export function noteDropId(graph: GraphPayload | null, id: string): string | null {
-  return id.startsWith("note:") && graph?.model.nodes.some((node) => node.id === id && node.kind === "note") ? id : null;
+  const kind = id.startsWith("note:") ? "note" : id.startsWith("artifact:") ? "file" : null;
+  return kind !== null && graph?.model.nodes.some((node) => node.id === id && node.kind === kind) ? id : null;
 }
 
 export type ColumnId = "tree" | "note" | "graph";

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

@@ -2,7 +2,7 @@
 
 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 { createFolder, deleteArtifact, deleteFolder, deleteNote, moveArtifact, moveNote, renameArtifact, renameFolder, renameNote } from "../api";
 import { fetchJson } from "../api.dom";
 import { isTextEntry, type KeyTarget } from "../shell/keys.model";
 import { ICON_BOX, ICON_STROKE, ICONS } from "../shell/icons.model";
@@ -21,6 +21,7 @@ import {
   deleteNeedsConfirmation,
   depthVar,
   dropFolder,
+  movableTreeRow,
   initialTreeView,
   newFolderParent,
   newFolderPath,
@@ -41,6 +42,7 @@ import {
   treeEmptyMessage,
   treeKey,
 } from "./tree.model";
+import type { TreeTarget } from "./tree.model";
 
 export interface TreeProps {
   graph: GraphPayload | null;
@@ -91,7 +93,7 @@ function Row({ view, recentIds, edit, onEdit, onRename, onSelect, onToggle, onMe
       aria-expanded={view.hasKids ? view.expanded : undefined}
       style={depthVar(view.depth)}
       onClick={(event) => onSelect(event.metaKey || event.ctrlKey)}
-      draggable={view.id.startsWith("note:")}
+      draggable={movableTreeRow(view.id) !== null}
       aria-label={view.id === DRAFT_FOLDER_ID ? "New folder" : undefined}
       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()}
@@ -210,7 +212,7 @@ export function Tree(props: TreeProps) {
       // 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 (!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);
+      await run(target.type === "note" ? deleteNote(fetchJson, target.path) : target.type === "artifact" ? deleteArtifact(fetchJson, target.path) : deleteFolder(fetchJson, target.path), deletesSelection(props.selectedId, target) ? "vault" : undefined);
     }
   };
 
@@ -222,7 +224,7 @@ export function Tree(props: TreeProps) {
    * the row shows no count for, so it takes two — and the second click's label
    * names the folder, which is the chance to notice the wrong row was hit.
    */
-  const clickDelete = (target: { type: "note" | "folder" | "vault" }): void => {
+  const clickDelete = (target: Pick<TreeTarget, "type">): void => {
     if (menu === null) return;
     if (deleteNeedsConfirmation(target) && menu.armed !== true) {
       setMenu({ ...menu, armed: true });
@@ -259,7 +261,7 @@ export function Tree(props: TreeProps) {
     // An open draft is a different question; `onMutate` asks that one.
     if (target !== null && name && name !== current.label) {
       if (!props.onMutate(affectedNoteSlugs(props.graph, target))) return;
-      void run(target.type === "note" ? renameNote(fetchJson, target.path, name) : renameFolder(fetchJson, target.path, name));
+      void run(target.type === "note" ? renameNote(fetchJson, target.path, name) : target.type === "artifact" ? renameArtifact(fetchJson, target.path, name) : renameFolder(fetchJson, target.path, name));
     }
   };
 
@@ -297,7 +299,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={(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)); } }} />)}
+          {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); const moving = movableTreeRow(dragged); if (moving === null || folder === undefined) return; if (moving.type === "artifact") { void run(moveArtifact(fetchJson, moving.slug, folder)); return; } const target = mutableTreeRow(dragged); if (target !== null && !props.onMutate(affectedNoteSlugs(props.graph, target))) return; void run(moveNote(fetchJson, moving.slug, folder)); }} />)}
         </ul>
       ) : <p class="weave-tree-empty">{empty}</p>}
       <p class="weave-tree-count">{rowCountLabel(rows)}</p>

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

@@ -131,7 +131,7 @@ export const DRAFT_FOLDER_ID = "vfolder:\u0000draft";
  * it; on a *note*, a sibling of that note — which is what "new folder here"
  * means when "here" is a file. Returns the parent path, `""` for the root.
  */
-export function newFolderParent(target: { type: "note" | "folder" | "vault"; path: string }): string {
+export function newFolderParent(target: TreeTarget): string {
   if (target.type === "vault") return "";
   if (target.type === "folder") return target.path;
   return target.path.split("/").slice(0, -1).join("/");
@@ -225,25 +225,40 @@ export function dropFolder(id: string): string | null | undefined {
   return id.startsWith("vfolder:") ? id.slice("vfolder:".length) : undefined;
 }
 
-export function mutableTreeRow(id: string): { type: "note" | "folder" | "vault"; path: string } | null {
+/** A row the tree can drag into a folder: a vault note or a vault HTML artifact. */
+export function movableTreeRow(id: string): { type: "note" | "artifact"; slug: string } | null {
+  if (id.startsWith("note:")) return { type: "note", slug: id.slice("note:".length) };
+  if (id.startsWith("artifact:")) return { type: "artifact", slug: id.slice("artifact:".length) };
+  return null;
+}
+
+/** A tree row the file actions (rename, delete, new folder) can act on. */
+export interface TreeTarget {
+  type: "note" | "artifact" | "folder" | "vault";
+  path: string;
+}
+
+export function mutableTreeRow(id: string): TreeTarget | null {
   if (id === "vault") return { type: "vault", path: "" };
   if (id.startsWith("note:")) return { type: "note", path: id.slice("note:".length) };
+  if (id.startsWith("artifact:")) return { type: "artifact", path: id.slice("artifact:".length) };
   if (id.startsWith("vfolder:")) return { type: "folder", path: id.slice("vfolder:".length) };
   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[] {
+export function affectedNoteSlugs(graph: GraphPayload | null, target: TreeTarget): 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 {
+export function deletesSelection(selectedId: string | null, target: TreeTarget): boolean {
   if (selectedId === null) return false;
   if (target.type === "note") return selectedId === `note:${target.path}`;
-  if (target.type === "folder") return selectedId === `vfolder:${target.path}` || selectedId.startsWith(`vfolder:${target.path}/`) || selectedId.startsWith(`note:${target.path}/`);
+  if (target.type === "artifact") return selectedId === `artifact:${target.path}`;
+  if (target.type === "folder") return selectedId === `vfolder:${target.path}` || ["vfolder:", "note:", "artifact:"].some((kind) => selectedId.startsWith(`${kind}${target.path}/`));
   return false;
 }
 
@@ -260,7 +275,7 @@ export function deletesSelection(selectedId: string | null, target: { type: "not
  * The confirmation is {@link deleteItemLabel}: the same menu item, clicked
  * twice, with the second click's label saying exactly what it will destroy.
  */
-export function deleteNeedsConfirmation(target: { type: "note" | "folder" | "vault" }): boolean {
+export function deleteNeedsConfirmation(target: Pick<TreeTarget, "type">): boolean {
   return target.type === "folder";
 }
 
@@ -274,7 +289,7 @@ export function deleteNeedsConfirmation(target: { type: "note" | "folder" | "vau
  * safety mechanism — it is the user's chance to notice they right-clicked the
  * wrong row.
  */
-export function deleteItemLabel(target: { type: "note" | "folder" | "vault" }, label: string, armed: boolean): string {
+export function deleteItemLabel(target: Pick<TreeTarget, "type">, label: string, armed: boolean): string {
   if (!deleteNeedsConfirmation(target)) return "Delete";
   return armed ? `Delete “${label}” and everything in it` : "Delete…";
 }

package/src/web/server/routes.ts

@@ -21,6 +21,9 @@
  * | POST   | `/api/history-settings`  | turn note history on or off                  |
  * | GET    | `/api/okf/:rel`          | {@link OkfFilePayload}                       |
  * | GET    | `/api/artifact/:rel`     | sandboxed HTML artifact                     |
+ * | POST   | `/api/artifact/:rel/move` | move a vault HTML artifact                 |
+ * | POST   | `/api/artifact/:rel/rename` | rename a vault HTML artifact             |
+ * | DELETE | `/api/artifact/:rel`     | delete a vault HTML artifact                |
  * | GET    | `/api/search?q=`         | {@link SearchPayload}                        |
  * | POST   | `/api/open`              | {@link OpenResult} — hand the note to `$EDITOR` |
  *
@@ -64,7 +67,7 @@ import { openNoteInEditor } from "../../core/openInEditor";
 import { recallTrail, type RecallTrail } from "../../core/trail";
 import type { Note } from "../../core/types";
 import type { VaultMutationResult } from "../../core/vault";
-import { addNote, createFolder, deleteFolder, deleteNote, getNote, moveNote, renameFolder, readNoteHistory, renameNote, resolveHtmlPath, searchNotes, setNoteBody } from "../../core/vault";
+import { addNote, createFolder, deleteFolder, deleteNote, deleteHtmlArtifact, getNote, moveHtmlArtifact, moveNote, renameHtmlArtifact, renameFolder, readNoteHistory, renameNote, resolveHtmlPath, searchNotes, setNoteBody } from "../../core/vault";
 import { deriveTagIndex, type TaggedNote } from "../../core/view/links";
 import type {
   GraphPayload,
@@ -434,6 +437,12 @@ async function route(
   if (method === "GET" && path.startsWith("/api/artifact/")) {
     return sendArtifact(deps, path.slice("/api/artifact/".length), res);
   }
+  if (method === "POST" && path.startsWith("/api/artifact/") && /\/(move|rename)$/.test(path)) {
+    return changeArtifact(deps, path.slice("/api/artifact/".length), req, res);
+  }
+  if (method === "DELETE" && path.startsWith("/api/artifact/")) {
+    return sendMutation(res, await deleteHtmlArtifact(deps.vaultRoot, path.slice("/api/artifact/".length)), "artifact");
+  }
   if (method === "GET" && path === "/api/search") return sendSearch(deps, query, res);
   if (method === "POST" && path === "/api/open") return openNote(deps, req, res);
   sendText(res, 404, "not found\n");
@@ -705,9 +714,22 @@ async function routeFolder(deps: RouteDeps, method: string, target: string, req:
   return false;
 }
 
-function sendMutation(res: ServerResponse, result: VaultMutationResult): void {
+/** `POST /api/artifact/:rel/move` and `/rename`; `rel` still carries the suffix. */
+async function changeArtifact(deps: RouteDeps, target: string, req: IncomingMessage, res: ServerResponse): Promise<void> {
+  const rename = target.endsWith("/rename");
+  const rel = target.slice(0, target.lastIndexOf("/"));
+  const body = await readJsonBody(req);
+  const fields = typeof body === "object" && body !== null ? body as { folder?: unknown; name?: unknown } : {};
+  if (rename) {
+    if (typeof fields.name !== "string") sendJson(res, 400, { error: "expected { name: string }" });
+    else sendMutation(res, await renameHtmlArtifact(deps.vaultRoot, rel, fields.name), "artifact");
+  } else if (fields.folder !== null && typeof fields.folder !== "string") sendJson(res, 400, { error: "expected { folder: string | null }" });
+  else sendMutation(res, await moveHtmlArtifact(deps.vaultRoot, rel, fields.folder), "artifact");
+}
+
+function sendMutation(res: ServerResponse, result: VaultMutationResult, kind: "note" | "artifact" = "note"): void {
   if (result.ok) {
-    const id = result.slug === undefined ? result.path === undefined ? undefined : `vfolder:${result.path}` : `note:${result.slug}`;
+    const id = result.slug === undefined ? result.path === undefined ? undefined : `vfolder:${result.path}` : `${kind}:${result.slug}`;
     sendJson(res, 200, { ok: true, ...(id === undefined ? {} : { id }) });
     return;
   }