pi-weave 0.3.0 → 0.3.2

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

@@ -1,99 +1,15 @@
-/**
- * The hidden force tuner panel (docs/weave-workspace.md §15.7).
- *
- * Props in, JSX out. Every range, label, parse and clamp comes from
- * `tuner.model.ts`; what is left here is seven `<input type="range">` elements
- * and two buttons. Native range inputs rather than a slider component, for the
- * obvious reason: the platform has had this element since 2011.
- *
- * Rendered only when `Graph.tsx` was handed `tuner` — that is, only when
- * `?sliders=1` was on the URL. See `slidersFlag`.
- */
-
-import { useState } from "preact/hooks";
-import { FORCES, FORCE_DEFAULTS, setForces } from "../../shared/layout";
-import type { SliderSpec } from "./tuner.model";
-import { FORCE_SLIDERS, HAIRBALL, forcesSnippet, formatValue, isDefault, parseSlider, sliderValue } from "./tuner.model";
-
-export interface ForceTunerProps {
-  /**
-   * Called after every write to `FORCES`, so the column can drop its cached
-   * layout and re-run the simulation. The panel never lays out anything
-   * itself — it mutates the constants and says so.
-   */
-  onChange: () => void;
-  /** Whether nodes are coloured by group hue (§15.8). */
-  groupColors: boolean;
-  /** Toggle that. Owned by the column, which persists it. */
-  onGroupColors: (next: boolean) => void;
-}
-
-export function ForceTuner(props: ForceTunerProps) {
-  // The panel's own re-render trigger. `FORCES` is a plain mutable object, so
-  // preact cannot observe it; a counter is the whole subscription.
-  const [, bump] = useState(0);
-  const [copied, setCopied] = useState(false);
-
-  const apply = (spec: SliderSpec, raw: string): void => {
-    setForces({ [spec.key]: parseSlider(spec, raw) });
-    setCopied(false);
-    bump((n) => n + 1);
-    props.onChange();
-  };
-
-  const applyAll = (next: Partial<typeof FORCES>): void => {
-    setForces(next);
-    setCopied(false);
-    bump((n) => n + 1);
-    props.onChange();
-  };
-
-  return (
-    <div class="weave-tuner">
-      <p class="weave-tuner-title">graph forces · ?sliders=1</p>
-      <label class="weave-tuner-toggle" title="hue per containment group, shade per kind">
-        <input type="checkbox" checked={props.groupColors} onChange={(event) => props.onGroupColors((event.currentTarget as HTMLInputElement).checked)} />
-        <span>colour by group</span>
-      </label>
-      {FORCE_SLIDERS.map((spec) => (
-        <label class="weave-tuner-row" key={spec.key} title={spec.hint}>
-          <span class="weave-tuner-label">
-            {spec.label}
-            <b>{formatValue(FORCES[spec.key])}</b>
-          </span>
-          <input
-            type="range"
-            min={spec.min}
-            max={spec.max}
-            step={spec.step}
-            value={sliderValue(FORCES, spec)}
-            onInput={(event) => apply(spec, (event.currentTarget as HTMLInputElement).value)}
-          />
-        </label>
-      ))}
-      <div class="weave-tuner-actions">
-        <button type="button" class="weave-chip" disabled={isDefault(FORCES)} onClick={() => applyAll(FORCE_DEFAULTS)}>
-          reset
-        </button>
-        <button type="button" class="weave-chip" title="the pre-tuner constants, for comparison — see HAIRBALL" onClick={() => applyAll(HAIRBALL)}>
-          before
-        </button>
-        <button
-          type="button"
-          class="weave-chip"
-          onClick={() => {
-            // Best-effort: `navigator.clipboard` is absent over plain HTTP in
-            // some browsers, and the snippet is on screen in the panel anyway.
-            void navigator.clipboard?.writeText(forcesSnippet(FORCES)).then(
-              () => setCopied(true),
-              () => setCopied(false),
-            );
-          }}
-        >
-          {copied ? "copied ✓" : "copy values"}
-        </button>
-      </div>
-      <pre class="weave-tuner-snippet">{forcesSnippet(FORCES)}</pre>
-    </div>
-  );
+/** Native graph layout sliders, available under Settings → Interface. */
+import { FORCE_DEFAULTS, type ForceConstants } from "../../shared/layout";
+import { FORCE_SLIDERS, formatValue, isDefault, parseSlider, sliderValue } from "./tuner.model";
+
+export function ForceTuner(props: { forces: ForceConstants; onChange: (forces: ForceConstants) => void }) {
+  return <div class="weave-settings-forces">
+    {FORCE_SLIDERS.map((spec) => <label class="weave-setting-row" key={spec.key}>
+      <span><strong>{spec.label}</strong><small>{spec.hint}</small></span>
+      <span class="weave-setting-range"><input aria-label={spec.label} type="range" min={spec.min} max={spec.max} step={spec.step}
+        value={sliderValue(props.forces, spec)} onInput={(event) => props.onChange({ ...props.forces, [spec.key]: parseSlider(spec, event.currentTarget.value) })} />
+        <output>{formatValue(props.forces[spec.key])}</output></span>
+    </label>)}
+    <button type="button" disabled={isDefault(props.forces)} onClick={() => props.onChange({ ...FORCE_DEFAULTS })}>Reset graph layout</button>
+  </div>;
 }

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

@@ -35,30 +35,30 @@ import type { GraphViewState } from "./column.model";
 import {
   FIT_HINT,
   FIT_LABEL,
-  FORCES_HINT,
-  FORCES_LABEL,
   LEGEND,
   effectiveView,
   graphClick,
   graphColumnModel,
   graphCountLabel,
+  graphPreview,
   hoverHighlight,
 } from "./column.model";
 import type { PositionStorage } from "./positions";
 import type { GraphRenderer, RendererFactory } from "./renderer";
 import { schemeOf } from "./scheme";
 import type { SchemeHost } from "./scheme";
-import type { ColorScheme } from "./graph.model";
+import type { GraphTheme } from "../../shared/themes";
+import { setForces, type ForceConstants } from "../../shared/layout";
 import { createGraphSimulation } from "./dynamics";
 import type { GraphSimulation } from "./dynamics";
-import { ForceTuner } from "./ForceTuner";
-import { POSITIONS_STORAGE_KEY } from "./positions";
-import { loadGroupColors, saveGroupColors } from "./tuner.model";
+import { Icon } from "../tree/Tree";
 
 export interface GraphProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   onSelect: (id: string | null) => void;
+  previewId: string | null;
+  onOpen: (id: string) => void;
   /** Injected: `createSigmaRenderer` in the browser, a fake in a test. */
   renderer: RendererFactory;
   /** Injected: `localStorage`. See `positions.ts` for why it is a port. */
@@ -72,7 +72,9 @@ export interface GraphProps {
    * palette change `renderer.ts` calls honest — because a WebGL palette is
    * fixed at construction.
    */
-  scheme: ColorScheme | null;
+  scheme: GraphTheme | null;
+  forces: ForceConstants;
+  groupColors: boolean;
   /**
    * Whether the boot graph fetch failed (`state.ts`'s `graphFailed`). The
    * empty column's sentence switches from "Loading…" to a named recovery:
@@ -90,14 +92,7 @@ export interface GraphProps {
    * keeps the ownership where it is and costs one line at each end.
    */
   fit: { current: (() => void) | null };
-  /**
-   * Show the hidden force tuner (`?sliders=1`, docs/weave-workspace.md §15.7).
-   *
-   * A prop rather than a `location.search` read here, for the same reason
-   * `cwd` and `platform` are props: the decision is `slidersFlag`'s, and it is
-   * testable where a `location` read is not.
-   */
-  tuner?: boolean;
+
 }
 
 export function Graph(props: GraphProps) {
@@ -130,30 +125,8 @@ export function Graph(props: GraphProps) {
   // `null` means "the user has not touched the expansion" — not "nothing is
   // expanded". `effectiveView` resolves the difference; see its doc comment.
   const [state, setState] = useState<GraphViewState | null>(null);
-  /**
-   * Bumped by the tuner after each write to `FORCES`. It enters the model memo
-   * below purely as a cache-buster: the graph's *shape* has not changed, so
-   * nothing else would recompute, and the whole point is that the same shape
-   * now lays out differently.
-   */
-  const [forceRev, setForceRev] = useState(0);
-  /**
-   * Colour nodes by group hue (§15.8). Persisted, because it is a taste the
-   * user holds across sessions rather than a per-visit mode, and read through
-   * the same `PositionStorage` port the layout cache uses so the column still
-   * names no browser global.
-   */
-  const [groupColors, setGroupColors] = useState(() => loadGroupColors(props.storage));
-  /**
-   * Whether the tuner panel is open.
-   *
-   * Seeded from the `?sliders=1` flag, then owned by the `[sliders]` chip — so
-   * the URL is still the way to arrive with it open, and the button is the way
-   * to get at it once you are here. The chip is always present: the panel was
-   * unreachable without knowing a query string, which is the right gate for a
-   * half-built instrument and the wrong one for a finished control.
-   */
-  const [tunerOpen, setTunerOpen] = useState(props.tuner === true);
+  const forceKey = useMemo(() => { setForces(props.forces); return JSON.stringify(props.forces); }, [props.forces]);
+  const groupColors = props.groupColors;
 
   // The shell's decision wins; `schemeOf` stays for a host-driven default.
   const scheme = props.scheme ?? schemeOf(props.host);
@@ -168,8 +141,9 @@ export function Graph(props: GraphProps) {
   // comparing set contents, the memo makes comparison unnecessary.
   const model = useMemo(
     () => graphColumnModel(props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, groupColors),
-    [props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, forceRev, groupColors],
+    [props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, forceKey, groupColors],
   );
+  const preview = graphPreview(props.graph, props.previewId);
 
   // Read by the mount-time `onSelect`, which outlives this render.
   const live = useRef({ view, model, onSelect: props.onSelect, selectedId: props.selectedId });
@@ -233,7 +207,7 @@ export function Graph(props: GraphProps) {
 
   useEffect(() => {
     renderer.current?.setGraph(model.graph);
-  }, [model.key, forceRev, groupColors]);
+  }, [model.key, forceKey, groupColors]);
 
   // Live layout, in two effects so pause/resume and re-layout are independent.
   //
@@ -249,7 +223,7 @@ export function Graph(props: GraphProps) {
     return () => {
       dynamics.current = null;
     };
-  }, [model.key, armClock, forceRev]);
+  }, [model.key, armClock, forceKey]);
 
   // Effect 2 owns the clock's unmount cleanup: the engine's own lifecycle is
   // effect 1's, and the step self-terminates whenever the engine settles, so
@@ -276,42 +250,23 @@ export function Graph(props: GraphProps) {
       {/* `tabIndex={-1}` is the `⌘3` focus target — see `Note.tsx`'s matching
           comment. The tree's target is the rows `<ul>`, which has its own. */}
       <div class="weave-graph-canvas" ref={canvas} role="img" aria-label="Knowledge graph" tabIndex={-1} />
-      {tunerOpen ? (
-        <ForceTuner
-          groupColors={groupColors}
-          onGroupColors={(next) => {
-            saveGroupColors(props.storage, next);
-            setGroupColors(next);
-          }}
-          onChange={() => {
-            // Poison the stored layout rather than reading it: the cache is
-            // keyed by graph *shape*, which a force change does not touch, so
-            // a hit would hand back the arrangement of the previous constants
-            // and the sliders would appear to do nothing. An unparseable entry
-            // is a miss by `deserializePositions`' contract, and the two-method
-            // `PositionStorage` port has no `removeItem` to call instead.
-            try {
-              props.storage.setItem(POSITIONS_STORAGE_KEY, "");
-            } catch {
-              // A storage that refuses writes still lays out; see `savePositions`.
-            }
-            setForceRev((n) => n + 1);
-          }}
-        />
-      ) : null}
+      {preview === null ? null : (
+        <aside class="weave-graph-preview" aria-label="Selected graph node">
+          <div class="weave-graph-preview-info">
+            <span class="weave-kind" aria-hidden="true"><Icon name={preview.icon} class="weave-icon" /></span>
+            <div class="weave-graph-preview-copy">
+              <span class="weave-graph-preview-kind">{preview.kind}</span>
+              <strong class="weave-graph-preview-title" title={preview.title}>{preview.title}</strong>
+            </div>
+          </div>
+          <button type="button" class="weave-graph-preview-close" aria-label="Clear graph selection" onClick={() => props.onSelect(null)}>×</button>
+          <button type="button" class="weave-chip" onClick={() => props.onOpen(preview.id)}>Open in new tab</button>
+        </aside>
+      )}
       <div class="weave-graph-controls">
         <button type="button" class="weave-chip" title={FIT_HINT} onClick={() => renderer.current?.fit()}>
           {FIT_LABEL}
         </button>
-        <button
-          type="button"
-          class={tunerOpen ? "weave-chip weave-chip-on" : "weave-chip"}
-          title={FORCES_HINT}
-          aria-pressed={tunerOpen}
-          onClick={() => setTunerOpen(!tunerOpen)}
-        >
-          {FORCES_LABEL}
-        </button>
         <span class="weave-graph-legend">
           <span class="weave-legend-on">◉ {LEGEND.selected}</span>
           <span class="weave-legend-near">● {LEGEND.neighborhood}</span>

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

@@ -1,3 +1,4 @@
+import type { GraphTheme } from "../../shared/themes";
 /**
  * The graph column's own state: what is expanded, what is highlighted, and
  * what the control strip says (weave-workspace §1.2, §1.3, §7.4, §10, P3).
@@ -43,8 +44,9 @@ import type { Point } from "../../shared/layout";
 import type { ClusterAggregate, ClusterInfo, ViewGraphModel } from "../../shared/view";
 import { clusterAggregate, focusNeighborhood } from "../../shared/view";
 import type { GraphPayload, WireGraphEdge } from "../../shared/wire";
-import { viewModel } from "../tree/tree.model";
-import type { ColorScheme, RenderGraph } from "./graph.model";
+import { kindIcon, viewModel } from "../tree/tree.model";
+import type { IconName } from "../shell/icons.model";
+import type { RenderGraph } from "./graph.model";
 import { EMPTY_RENDER_GRAPH, renderGraph } from "./graph.model";
 import { groupNodeColors } from "./groups";
 import type { PositionStorage } from "./positions";
@@ -82,6 +84,22 @@ export interface GraphViewState {
   readonly expanded: ReadonlySet<string>;
 }
 
+export interface GraphPreview {
+  readonly id: string;
+  readonly title: string;
+  readonly kind: string;
+  readonly icon: IconName;
+}
+
+/** The original graph node selected for preview, including collapsed folders. */
+export function graphPreview(payload: GraphPayload | null, id: string | null): GraphPreview | null {
+  if (payload === null || id === null) return null;
+  const node = payload.model.nodes.find((candidate) => candidate.id === id);
+  if (node === undefined) return null;
+  const kind = id.startsWith("artifact:") ? "HTML artifact" : id.startsWith("vfolder:") ? "Folder" : node.kind;
+  return { id, title: node.label, kind, icon: kindIcon(node.kind) };
+}
+
 /**
  * The state a freshly loaded graph opens in: **fully expanded**.
  *
@@ -169,7 +187,7 @@ export function highlightFor(edges: readonly WireGraphEdge[], selectedId: string
  * The highlight while the pointer is over a node — **hover wins, selection is
  * what it falls back to**.
  *
- * Obsidian's gesture, and the reason it is the same function as
+ * The reference interaction, and the reason it is the same function as
  * {@link highlightFor} rather than a second visual language: hovering asks
  * exactly the question clicking asks ("what is one hop from here?"), so the
  * two must produce the same set and reach the same reducers. Anything else
@@ -196,17 +214,6 @@ export function hoverHighlight(
 export const FIT_LABEL = "fit";
 export const FIT_HINT = "frame the whole graph";
 
-/**
- * The `[sliders]` control, which shows and hides the tuner panel (§15.7).
- *
- * Labelled for what the button *opens* rather than for what the panel edits:
- * "forces" names the physics, which is the one thing a reader who has not read
- * `layout.ts` has no word for. The constants keep the `FORCES_` prefix because
- * the module they drive is still the force layout.
- */
-export const FORCES_LABEL = "sliders";
-export const FORCES_HINT = "tune the layout physics and colours";
-
 /**
  * The legend under the canvas, from the §1.2 mock:
  * `◉ selected  ● neighborhood`.
@@ -307,7 +314,7 @@ export function graphColumnModel(
   selectedId: string | null,
   state: GraphViewState,
   storage: PositionStorage,
-  scheme: ColorScheme,
+  scheme: GraphTheme,
   // Optional so every existing caller and test keeps its shape; only the
   // shell's boot-failure signal has a reason to pass it.
   bootFailed = false,

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

@@ -27,21 +27,12 @@
  * graphology — so it compiles under the root `tsconfig.json` (which has no
  * `DOM` lib) whenever a test imports it.
  *
- * ## Why the palette is duplicated from the stylesheet
- *
- * WebGL cannot read a CSS custom property. `sigma` needs a concrete `#rrggbb`
- * per node, and `getComputedStyle` is both a DOM global and an untestable
- * read. So {@link GRAPH_PALETTE} restates the six theme colours the graph
- * uses, and {@link KIND_SLOT} maps a node kind onto the *same slot vocabulary*
- * the TUI already uses (`src/pi/viewer/tui/theme.ts`'s `kindStyle`) rather
- * than inventing a second one.
- *
- * A copy drifts, so drift is a failing test: `tests/web/client-graph.test.ts`
- * asserts every hex in {@link GRAPH_PALETTE} literally appears in
- * `shell/theme.ts`'s `THEME_CSS`. Change a swatch in the stylesheet and the
- * graph's copy goes red on the same commit.
+ * CSS and WebGL use the shared theme table, so a candidate changes the
+ * canvas and workspace together without copying hex values.
  */
 
+import { THEMES, accentColor, themeId } from "../../shared/themes";
+import type { PaletteChoice, GraphTheme } from "../../shared/themes";
 import { COLLIDE_RADIUS, MAX_NODE_SIZE, MIN_NODE_SIZE, nodeSize } from "../../shared/layout";
 import type { Point } from "../../shared/layout";
 /* Re-exported for the renderer and the tests, under the render model's name.
@@ -65,40 +56,17 @@ export type ColorSlot = "accent" | "success" | "warning" | "dim" | "text" | "mut
 /** Dark or light. Chosen by the shell from `prefers-color-scheme`, never read here. */
 export type ColorScheme = "dark" | "light";
 
-/**
- * Slot → hex, per scheme.
- *
- * Every value is copied from `shell/theme.ts`'s `THEME_CSS`:
- * `accent`→`--weave-accent`, `success`→`--weave-ok`, `warning`→`--weave-warn`,
- * `dim`→`--weave-dim`, `text`→`--weave-fg`, `muted`→`--weave-faint`,
- * `line`→`--weave-line-strong`, `ground`→`--weave-bg` (the canvas the WebGL
- * floats on, which no slot previously named because nothing painted it — the
- * recession blend below needs it as a *value*, not as a contrast judgement).
- * The dark block is `:root`; the light block is the
- * `prefers-color-scheme: light` override.
- */
-export const GRAPH_PALETTE: Readonly<Record<ColorScheme, Readonly<Record<ColorSlot, string>>>> = {
-  dark: {
-    accent: "#c6a0f6",
-    success: "#a6da95",
-    warning: "#eed49f",
-    dim: "#a5adcb",
-    text: "#cad3f5",
-    muted: "#939ab7",
-    line: "#494d64",
-    ground: "#24273a",
-  },
-  light: {
-    accent: "#7113ec",
-    success: "#28641b",
-    warning: "#7c4f10",
-    dim: "#56586a",
-    text: "#4c4f69",
-    muted: "#606274",
-    line: "#bcc0cc",
-    ground: "#eff1f5",
-  },
-};
+/** Graph slots come from the same colors as the stylesheet. */
+export const GRAPH_PALETTE = Object.fromEntries(Object.entries(THEMES).map(([id, { colors }]) => [id, {
+  accent: colors.accent, success: colors.ok, warning: colors.warn, dim: colors.dim,
+  text: colors.fg, muted: colors.faint, line: colors["line-strong"], ground: colors.bg,
+}])) as Readonly<Record<PaletteChoice, Readonly<Record<ColorSlot, string>>>>;
+
+/** Resolve independent accents for every WebGL drawing path. */
+export function graphPalette(theme: GraphTheme): Readonly<Record<ColorSlot, string>> {
+  const palette = GRAPH_PALETTE[themeId(theme)];
+  return typeof theme === "string" ? palette : { ...palette, accent: accentColor(theme.theme, theme.accent) };
+}
 
 /**
  * Node kind → colour slot.
@@ -156,13 +124,13 @@ export const EDGE_SLOT: Readonly<Record<WireEdgeKind, ColorSlot>> = {
 };
 
 /** The colour a node kind is drawn in. */
-export function kindColor(kind: WireNodeKind, scheme: ColorScheme): string {
-  return GRAPH_PALETTE[scheme][KIND_SLOT[kind]];
+export function kindColor(kind: WireNodeKind, scheme: GraphTheme): string {
+  return graphPalette(scheme)[KIND_SLOT[kind]];
 }
 
 /** The colour an edge kind is drawn in. */
-export function edgeColor(kind: WireEdgeKind, scheme: ColorScheme): string {
-  return GRAPH_PALETTE[scheme][EDGE_SLOT[kind]];
+export function edgeColor(kind: WireEdgeKind, scheme: GraphTheme): string {
+  return graphPalette(scheme)[EDGE_SLOT[kind]];
 }
 
 /**
@@ -178,7 +146,7 @@ export function edgeColor(kind: WireEdgeKind, scheme: ColorScheme): string {
  * exact slot colour — the accent is the only chroma voice the sheet has, and
  * a wikilink is what the eye is here to find.
  */
-export function edgeDrawColor(kind: WireEdgeKind, scheme: ColorScheme): string {
+export function edgeDrawColor(kind: WireEdgeKind, scheme: GraphTheme): string {
   return isStructuralEdge(kind) ? recessColor(edgeColor(kind, scheme), scheme, EDGE_RECESS_STRENGTH) : edgeColor(kind, scheme);
 }
 
@@ -253,8 +221,8 @@ export function blendHex(color: string, toward: string, t: number): string {
  * *palette* fact, and the palette-mirror test already ties this module's hexes
  * to the stylesheet's.
  */
-export function recessColor(color: string, scheme: ColorScheme, t: number = RECESS_STRENGTH): string {
-  return blendHex(color, GRAPH_PALETTE[scheme].ground, t);
+export function recessColor(color: string, scheme: GraphTheme, t: number = RECESS_STRENGTH): string {
+  return blendHex(color, graphPalette(scheme).ground, t);
 }
 
 // --- sizes ------------------------------------------------------------------------
@@ -443,7 +411,7 @@ export const HOVER_LABEL_SHADOW = 6;
 /**
  * Sigma's `defaultDrawNodeHover`, as a scheme-bound pure function (§7.4).
  *
- * Obsidian's gesture, which is the reference: the hovered node's name floats
+ * The reference gesture: the hovered node's name floats
  * **centred underneath it**, in the theme's own text colour, with no
  * container. The alternative shipped by sigma is a white rounded box with the
  * text to the node's *right* — wrong colour in both schemes, and wrong place
@@ -460,13 +428,13 @@ export const HOVER_LABEL_SHADOW = 6;
  * re-align them all.
  */
 export function hoverLabelPainter(
-  scheme: ColorScheme,
+  scheme: GraphTheme,
 ): (context: HoverLabelContext, data: HoverLabelNode, settings: HoverLabelSettings) => void {
   return (context, data, settings) => {
     // `nodeReducer` blanks the label of everything outside the highlight, and
     // a node with no name has nothing to float.
     if (data.label === null || data.label === "") return;
-    const palette = GRAPH_PALETTE[scheme];
+    const palette = graphPalette(scheme);
     context.save();
     context.font = `${settings.labelSize}px ${settings.labelFont}`;
     context.textAlign = "center";
@@ -629,7 +597,7 @@ export function renderGraph(
   nodes: readonly WireGraphNode[],
   edges: readonly WireGraphEdge[],
   positions: ReadonlyMap<string, Point>,
-  scheme: ColorScheme,
+  scheme: GraphTheme,
   /**
    * Per-node fills that override the kind palette — `groups.ts`'s
    * group-hue assignment, or absent for the kind-only colouring.
@@ -747,7 +715,7 @@ export function nodeReducer(
    * about the clock.
    */
   progress: number = 1,
-): (id: string, data: RenderNode, scheme: ColorScheme) => NodeDisplayOverride {
+): (id: string, data: RenderNode, scheme: GraphTheme) => NodeDisplayOverride {
   return (id, data, scheme) => {
     // `progress` at zero is indistinguishable from no highlight, and saying so
     // here is what lets the fade end by *returning* to the unhighlighted graph
@@ -888,7 +856,7 @@ export function edgeReducer(
   selectedId?: string | null,
   /** The fade's progress — see {@link nodeReducer}'s. */
   progress: number = 1,
-): (key: string, data: RenderEdge, scheme: ColorScheme) => EdgeDisplayOverride {
+): (key: string, data: RenderEdge, scheme: GraphTheme) => EdgeDisplayOverride {
   return (_key, data, scheme) => {
     if (highlight === null || progress <= 0) return {};
     if (!highlight.has(data.source) || !highlight.has(data.target)) {
@@ -905,7 +873,7 @@ export function edgeReducer(
         size: data.size * growth(EDGE_PRESENCE * 1.35, progress),
         // Blended rather than switched, so the link arrives *as* the accent
         // instead of flicking to it a frame before the rest of the fade.
-        color: blendHex(data.color, GRAPH_PALETTE[scheme].accent, progress),
+        color: blendHex(data.color, graphPalette(scheme).accent, progress),
       };
     }
     // Between two neighbours, but not touching the selection: real context,
@@ -975,8 +943,8 @@ export const LABEL_GRID_CELL_SIZE = COLLIDE_RADIUS * 4;
 export const LABEL_DENSITY = 1;
 
 /** The settings for a scheme. */
-export function graphSettings(scheme: ColorScheme): GraphSettings {
-  const palette = GRAPH_PALETTE[scheme];
+export function graphSettings(scheme: GraphTheme): GraphSettings {
+  const palette = graphPalette(scheme);
   return {
     // §7.4. A pan over a few thousand edges is the one interaction that drops
     // frames, and the edges are the part nobody is reading mid-gesture.

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

@@ -56,8 +56,10 @@
  */
 
 import type { WireEdgeKind, WireGraphEdge, WireGraphNode } from "../../shared/wire";
+import type { GraphTheme } from "../../shared/themes";
+import { THEMES, themeId } from "../../shared/themes";
 import type { ColorScheme } from "./graph.model";
-import { GRAPH_PALETTE, blendHex } from "./graph.model";
+import { graphPalette, blendHex } from "./graph.model";
 
 function isContainment(kind: WireEdgeKind): boolean {
   return kind === "contains" || kind === "anchored-at";
@@ -219,8 +221,8 @@ export const HUE_STRIDE = 3;
  * is honest: at eleven simultaneous groups the colour channel is saturated and
  * position is doing the work anyway.
  */
-export function groupColors(keys: ReadonlyMap<string, string>, scheme: ColorScheme): Map<string, string> {
-  const ring = GROUP_HUES[scheme];
+export function groupColors(keys: ReadonlyMap<string, string>, scheme: GraphTheme): Map<string, string> {
+  const ring = GROUP_HUES[THEMES[themeId(scheme)].scheme];
   const sizes = groupSizes(keys);
   const ordered = [...sizes.entries()].sort((a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
   const out = new Map<string, string>();
@@ -249,9 +251,9 @@ export const DEPTH_SHADE = 0.11;
 export const MAX_SHADE = 0.34;
 
 /** A member's fill: its group's one hue, stepped back by its depth. */
-export function shadeFor(hue: string, depth: number, scheme: ColorScheme): string {
+export function shadeFor(hue: string, depth: number, scheme: GraphTheme): string {
   const steps = Number.isFinite(depth) && depth > 0 ? depth : 0;
-  return blendHex(hue, GRAPH_PALETTE[scheme].ground, Math.min(MAX_SHADE, steps * DEPTH_SHADE));
+  return blendHex(hue, graphPalette(scheme).ground, Math.min(MAX_SHADE, steps * DEPTH_SHADE));
 }
 
 // --- bridges between groups ----------------------------------------------------------
@@ -279,7 +281,7 @@ export const MAX_BRIDGE = 0.55;
  * promiscuously-linked hub does not end up painted entirely in other people's
  * colours.
  */
-export function bridgeBlend(own: string, foreign: readonly string[], scheme: ColorScheme): string {
+export function bridgeBlend(own: string, foreign: readonly string[], scheme: GraphTheme): string {
   if (foreign.length === 0) return own;
   let out = own;
   let spent = 0;
@@ -307,7 +309,7 @@ export function bridgeBlend(own: string, foreign: readonly string[], scheme: Col
 export function groupNodeColors(
   nodes: readonly WireGraphNode[],
   edges: readonly WireGraphEdge[],
-  scheme: ColorScheme,
+  scheme: GraphTheme,
 ): Map<string, string> {
   const places = groupPlaces(nodes, edges);
   const keys = new Map<string, string>();

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

@@ -34,7 +34,7 @@
  * the root `tsconfig.json` project compiles the tests.
  */
 
-import { computeLayout } from "../../shared/layout";
+import { computeLayout, FORCES } from "../../shared/layout";
 import type { LayoutOptions, Point } from "../../shared/layout";
 import type { WireGraphEdge, WireGraphNode } from "../../shared/wire";
 
@@ -164,7 +164,7 @@ export function graphShapeKey(nodes: readonly WireGraphNode[], edges: readonly W
     sum = (sum + h) >>> 0;
   }
   const parts = [nodes.length, edges.length, xor >>> 0, sum].map((n) => n.toString(16));
-  return parts.join("-");
+  return [...parts, hashId(JSON.stringify(FORCES)).toString(16)].join("-");
 }
 
 /**
@@ -175,7 +175,7 @@ export function graphShapeKey(nodes: readonly WireGraphNode[], edges: readonly W
  * watcher fires, the graph refetches, and a picture the user was reading
  * rearranges itself for no visible reason. Never re-running leaves new nodes
  * unplaced and therefore undrawn (`renderGraph` drops a node with no
- * position), so a note created in Obsidian would never appear.
+ * position), so a note created outside this application would never appear.
  *
  * The shape key is exactly the line between those: it changes iff a node or an
  * edge was added or removed, which is precisely when the existing positions

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

@@ -1,6 +1,6 @@
 /** Browser-only Sigma adapter; the lifecycle remains testable in renderer.ts. */
 import Sigma from "sigma";
-import type { ColorScheme } from "./graph.model";
+import type { GraphTheme } from "../../shared/themes";
 import type { GraphRenderer, RendererFactory, SigmaLike } from "./renderer";
 import { rafClock, sigmaRenderer } from "./renderer";
 
@@ -8,7 +8,7 @@ import { rafClock, sigmaRenderer } from "./renderer";
 type SigmaContainer = ConstructorParameters<typeof Sigma>[1];
 
 /** The browser's renderer factory. Passed to the graph column by the shell. */
-export const createSigmaRenderer: RendererFactory = (scheme: ColorScheme): GraphRenderer =>
+export const createSigmaRenderer: RendererFactory = (scheme: GraphTheme): GraphRenderer =>
   sigmaRenderer(
     (graph, container, settings) =>
       new Sigma(graph, container as unknown as SigmaContainer, settings) as unknown as SigmaLike,