pi-weave 0.1.11 → 0.1.13

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

@@ -1,19 +1,10 @@
-/**
- * The tree column (weave-workspace §1.2, P2.3).
- *
- * Props in, JSX out. Every string, glyph, branch and key binding comes from
- * `tree.model.ts`; what is left here is a `useState`, a `map` and four
- * handlers that forward into it. §10's rule, and the reason the 95 % gate
- * survives a UI phase with no DOM test environment.
- */
+/** The read-only tree column. */
 
 import { useState } from "preact/hooks";
-import { recentIds } from "../state";
 import { isTextEntry, type KeyTarget } from "../shell/keys.model";
 import { ICON_BOX, ICON_STROKE, ICONS } from "../shell/icons.model";
 import type { IconName } from "../shell/icons.model";
 import type { GraphPayload } from "../../shared/wire";
-import type { TreeRowView, TreeViewState } from "./tree.model";
 import {
   FILTER_HINT,
   FILTER_LABEL,
@@ -40,22 +31,11 @@ import {
 export interface TreeProps {
   graph: GraphPayload | null;
   selectedId: string | null;
+  recentIds: ReadonlySet<string>;
   onSelect: (id: string) => void;
-  /** Epoch ms for relative times. Injected so the render is deterministic. */
   now: number;
 }
 
-/**
- * One sprite glyph, as a real `<svg>`.
- *
- * The element is built from {@link ICONS}' path data rather than injected as
- * an HTML string — CSP-identical (neither path touches a `script-src` hook),
- * but the string form would carry a whole `<svg>` per row and Preact can
- * branch the two paint modes with a spread and no `if`. Every attribute here
- * is a presentation *attribute*, not a `style` one: `style-src` never sees it.
- * Sizing rides the width/height attributes rather than CSS for the same
- * reason — the box is part of the icon, not of its context.
- */
 export function Icon({ name, class: className }: { name: IconName; class?: string }) {
   const def = ICONS[name];
   return (
@@ -71,20 +51,17 @@ export function Icon({ name, class: className }: { name: IconName; class?: strin
       stroke-linejoin="round"
       aria-hidden="true"
     >
-      {def.d.map((d) => (
-        <path d={d} />
-      ))}
+      {def.d.map((d) => <path d={d} />)}
     </svg>
   );
 }
 
-function Row({ view, onSelect, onToggle }: { view: TreeRowView; onSelect: () => void; onToggle: () => void }) {
+function Row({ view, recentIds, onSelect, onToggle }: { view: ReturnType<typeof rowViews>[number]; recentIds: ReadonlySet<string>; onSelect: () => void; onToggle: () => void }) {
   return (
     <li
       id={view.domId}
-      class={`weave-row weave-row-${view.kind}${view.selected ? " weave-row-on" : ""}${view.muted ? " weave-row-muted" : ""}${
-        recentIds.value.has(view.id) ? " weave-row-new" : ""
-      }`}
+      data-row-id={view.id}
+      class={`weave-row weave-row-${view.kind}${view.selected ? " weave-row-on" : ""}${recentIds.has(view.id) ? " weave-row-new" : ""}`}
       role="treeitem"
       aria-level={view.level}
       aria-posinset={view.posinset}
@@ -94,27 +71,11 @@ function Row({ view, onSelect, onToggle }: { view: TreeRowView; onSelect: () =>
       style={depthVar(view.depth)}
       onClick={onSelect}
     >
-      {/* The glyphs are decoration: the twisty duplicates `aria-expanded`,
-          the kind glyph duplicates nothing a screen reader needs, and the
-          provenance shape is announced through its `title` instead. The
-          chevron rotates through CSS, so "open" is a class, not a different
-          sprite. */}
-      <span
-        class="weave-twisty"
-        aria-hidden="true"
-        onClick={(event) => {
-          event.stopPropagation();
-          onToggle();
-        }}
-      >
+      <span class="weave-twisty" aria-hidden="true" onClick={(event) => { event.stopPropagation(); onToggle(); }}>
         {view.hasKids ? <Icon name="chevron" class={view.expanded ? "weave-icon weave-icon-open" : "weave-icon"} /> : null}
       </span>
-      <span class="weave-kind" aria-hidden="true">
-        <Icon name={view.kindIcon} class="weave-icon" />
-      </span>
-      <span class={`weave-prov weave-prov-${view.provenance ?? "none"}`} title={view.provenanceTitle}>
-        {view.provenanceGlyph}
-      </span>
+      <span class="weave-kind" aria-hidden="true"><Icon name={view.kindIcon} class="weave-icon" /></span>
+      <span class={`weave-prov weave-prov-${view.provenance ?? "none"}`} title={view.provenanceTitle}>{view.provenanceGlyph}</span>
       <span class="weave-label">{view.label}</span>
       <span class="weave-meta">{view.meta}</span>
     </li>
@@ -122,62 +83,28 @@ function Row({ view, onSelect, onToggle }: { view: TreeRowView; onSelect: () =>
 }
 
 export function Tree(props: TreeProps) {
-  const [state, setState] = useState<TreeViewState>(initialTreeView);
+  const [state, setState] = useState(initialTreeView);
   const rows = rowsFor(props.graph, state);
   const empty = treeEmptyMessage(props.graph, rows, state);
-
   return (
-    <div
-      class="weave-tree"
-      onKeyDown={(event) => {
-        // The filter box sits inside this listener, so its keystrokes arrive
-        // here too: a `j` meant for the query must stay a character, not an
-        // alias the tree consumes. The model refuses when `typing` is true.
-        const target = event.target as KeyTarget;
-        const typing = isTextEntry(target?.tagName ?? null, target?.isContentEditable === true);
-        const next = treeKey(rows, state, props.selectedId, event.key, typing);
-        if (!next.handled) return;
-        event.preventDefault();
-        setState(next.state);
-        if (next.selectedId !== null) props.onSelect(next.selectedId);
-      }}
-    >
+    <div class="weave-tree" onKeyDown={(event) => {
+      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);
+    }}>
       <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>
+        <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>
       </div>
       {empty === null ? (
-        <ul
-          class="weave-rows"
-          role="tree"
-          tabIndex={0}
-          aria-label={TREE_LABEL}
-          // Focus stays on the `<ul>` and the *active* row is named by
-          // reference — the alternative, a roving `tabindex`, would put every
-          // row in the Tab order and make Tab a fourth way to walk the tree.
-          // `null` when the selection is not visible; see the model.
-          aria-activedescendant={treeActiveDescendant(rows, props.selectedId) ?? undefined}
-        >
-          {rowViews(rows, props.selectedId, props.now).map((view) => (
-            <Row key={view.id} view={view} onSelect={() => props.onSelect(view.id)} onToggle={() => setState(toggleExpanded(state, view.id))} />
-          ))}
+        <ul class="weave-rows" role="tree" tabIndex={0} aria-label={TREE_LABEL} aria-activedescendant={treeActiveDescendant(rows, props.selectedId) ?? undefined}>
+          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} onSelect={() => { props.onSelect(view.id); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} />)}
         </ul>
-      ) : (
-        <p class="weave-tree-empty">{empty}</p>
-      )}
+      ) : <p class="weave-tree-empty">{empty}</p>}
       <p class="weave-tree-count">{rowCountLabel(rows)}</p>
     </div>
   );

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

@@ -1,5 +1,5 @@
 /**
- * Everything the tree column *decides* (weave-workspace §1.2, §3, §10).
+ * Everything the tree column *decides*.
  *
  * The column itself is `treeRows` with a different renderer — that is §3's
  * whole claim, and this module is what makes it true in the browser: it holds
@@ -40,7 +40,7 @@ import type { IconName } from "../shell/icons.model";
  * It is **not** `src/web/client/state.ts`'s `TreeState`. That one is a P1
  * placeholder carrying only an expanded-id list, and it stays where it is:
  * this state is owned by the tree column, lives in the component that renders
- * it, and never crosses the context bus. §1.3's bus is `selectedId` — which
+ * it, and never crosses the context bus. 's bus is `selectedId` — which
  * rows happen to be open is not something the note column or the graph has any
  * business reacting to.
  */
@@ -81,7 +81,7 @@ export function initialTreeView(roots: readonly string[] = ["vault", "repository
  *
  * `WireGraphModel` is `Omit<GraphModel, "danglingLinks">` — the payload hoists
  * that map to its own top-level `dangling` rather than shipping it twice
- * (§4.2) — so exactly one field has to be put back before `treeRows` or
+ * (§3) — so exactly one field has to be put back before `treeRows` or
  * `detailModel` will accept it. The door (`shared/view.ts`) deliberately does
  * not do this: it is a wire concern, and a door that carried a transformation
  * would be a second implementation rather than a re-export.
@@ -248,7 +248,7 @@ export function parentOf(rows: readonly TreeRow[], id: string): string | null {
 }
 
 /**
- * Vim-ish aliases: `j` is `ArrowDown`, `k` is `ArrowUp` (§11 P4).
+ * Vim-ish aliases: `j` is `ArrowDown`, `k` is `ArrowUp` ( P4).
  *
  * A *normalizer* rather than two more branches in {@link treeKey}, because
  * the aliasing and the navigation are separate concerns and folding them
@@ -257,7 +257,7 @@ export function parentOf(rows: readonly TreeRow[], id: string): string | null {
  *
  * ## Why the aliases are tree-scoped and not global
  *
- * §11 says "vim-ish `j/k` **in the tree**", and the qualifier is load-bearing
+ *  says "vim-ish `j/k` **in the tree**", and the qualifier is load-bearing
  * on both sides. A global `j` would move the tree's cursor while the user is
  * reading the note column — an invisible change to a surface they are not
  * looking at — and it would make `j` untypeable in the graph's depth control.
@@ -368,45 +368,6 @@ export function kindIcon(kind: WireNodeKind): IconName {
   return KIND_ICONS[kind];
 }
 
-// --- the session fold -----------------------------------------------------------------
-
-/**
- * The synthesized folder session memory lives under.
- *
- * Core's graph builder (`src/core/graph/build.ts`) nests notes whose slug has
- * a directory under a synthesized `vfolder:<dir>` node — kind `module`,
- * because reusing the tree's containment chain needs no client change. That
- * reuse is why there is no `session` node *kind*: a session note is an
- * ordinary `note` that happens to be filed there, and this client recognises
- * it by path, not by kind.
- */
-export const SESSION_DIR = "sessions";
-
-/** True when a node id names a note under the {@link SESSION_DIR} fold. */
-export function isSessionNote(id: string): boolean {
-  return id.startsWith(`note:${SESSION_DIR}/`);
-}
-
-/**
- * Whether a row renders a notch quieter.
- *
- * `sessions/<n>.md` notes are machine-written memory that accrues by the
- * dozens with near-duplicate titles, so at any real vault size they are most
- * of the tree's rows — and rows that all look alike at full weight make the
- * six notes a human actually wrote harder to find. So session rows sit in
- * `--weave-dim` until hovered or selected, which is how Obsidian treats its
- * own long tails.
- *
- * The *never* half is the load-bearing part: `selectedId` is the §1.3 bus, so
- * the selection is decided somewhere the tree does not own, and a rule that
- * could dim the selected row would be a rule the graph's click could silently
- * break. The class-coverage gate does not see this — it is asserted here,
- * which is where §10 says it belongs.
- */
-export function isMuted(row: TreeRow, selectedId: string | null): boolean {
-  return row.id !== selectedId && isSessionNote(row.id);
-}
-
 /**
  * Provenance → glyph.
  *
@@ -557,14 +518,6 @@ export interface TreeRowView {
   readonly hasKids: boolean;
   readonly expanded: boolean;
   readonly selected: boolean;
-  /**
-   * Render a notch quieter — the session rows of {@link isMuted}.
-   *
-   * A view-model flag rather than a `.tsx` branch for the same reason every
-   * other branch is here, and the stylesheet keys off it with
-   * `.weave-row-muted`.
-   */
-  readonly muted: boolean;
   /** The trailing annotation, already formatted against `now`. */
   readonly meta: string;
   /** ARIA `aria-level`, which is 1-based where `depth` is 0-based. */
@@ -600,7 +553,6 @@ export function rowView(row: TreeRow, selectedId: string | null, now: number, po
     hasKids: row.hasKids,
     expanded: row.expanded,
     selected: row.id === selectedId,
-    muted: isMuted(row, selectedId),
     meta: formatTreeMeta(row.meta, now),
     level: row.depth + 1,
   };
@@ -675,7 +627,7 @@ export const FILTER_PLACEHOLDER = "filter…";
  * Names *what is in it* rather than what it is: "Tree" is already the
  * column's heading and the role announces the widget type, so a second
  * "tree" would be read three times. "Vault and repository" is the sentence
- * §1.1 uses for the same thing.
+ *  uses for the same thing.
  */
 export const TREE_LABEL = "Vault and repository";
 
@@ -699,7 +651,7 @@ export const FILTER_HINT = "Filter the tree (/)";
  * The obvious order — "no rows? then work out why" — is wrong here, and it is
  * wrong in the case that matters most. A brand-new vault is not a graph with
  * no rows: `treeRows` still emits the `vault` root, so the column renders one
- * word and nothing else, and a user's first ever session says nothing about
+ * word and nothing else, and a user's first ever use says nothing about
  * how to add a note. `treeEmptyHint` is core's answer to exactly that
  * question, and it is deliberately narrow — it returns a string only for a
  * vault with no notes *and* no repository — so consulting it first cannot
@@ -708,7 +660,7 @@ export const FILTER_HINT = "Filter the tree (/)";
  * It also outranks the filter message, for the same reason: when the vault is
  * genuinely empty, "nothing matches this filter" is true and useless.
  *
- * Using core's sentence rather than writing one here is §3: the TUI's empty
+ * Using core's sentence rather than writing one here is : the TUI's empty
  * tree and the browser's say the same thing about the same vault, because
  * there is one sentence.
  */