pi-weave 0.1.19 → 0.1.21

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

@@ -0,0 +1,99 @@
+/**
+ * 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>
+  );
+}

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

@@ -35,15 +35,13 @@ import type { GraphViewState } from "./column.model";
 import {
   FIT_HINT,
   FIT_LABEL,
+  FORCES_HINT,
+  FORCES_LABEL,
   LEGEND,
-  allExpanded,
   effectiveView,
-  expandHint,
-  expandLabel,
   graphClick,
   graphColumnModel,
   graphCountLabel,
-  toggleExpandAll,
 } from "./column.model";
 import type { PositionStorage } from "./positions";
 import type { GraphRenderer, RendererFactory } from "./renderer";
@@ -52,6 +50,9 @@ import type { SchemeHost } from "./scheme";
 import type { ColorScheme } from "./graph.model";
 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";
 
 export interface GraphProps {
   graph: GraphPayload | null;
@@ -88,6 +89,14 @@ 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) {
@@ -120,6 +129,30 @@ 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);
 
   // The shell's decision wins; `schemeOf` stays for a host-driven default.
   const scheme = props.scheme ?? schemeOf(props.host);
@@ -133,14 +166,13 @@ export function Graph(props: GraphProps) {
   // graph. Identity is the whole contract; do not switch the effect to
   // comparing set contents, the memo makes comparison unnecessary.
   const model = useMemo(
-    () => graphColumnModel(props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed),
-    [props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed],
+    () => graphColumnModel(props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, groupColors),
+    [props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, forceRev, groupColors],
   );
-  const everything = allExpanded(view, model.clusters);
 
   // Read by the mount-time `onSelect`, which outlives this render.
-  const live = useRef({ view, model, onSelect: props.onSelect });
-  live.current = { view, model, onSelect: props.onSelect };
+  const live = useRef({ view, model, onSelect: props.onSelect, selectedId: props.selectedId });
+  live.current = { view, model, onSelect: props.onSelect, selectedId: props.selectedId };
 
   useEffect(() => {
     const instance = props.renderer(scheme);
@@ -173,7 +205,7 @@ export function Graph(props: GraphProps) {
     // the render this effect was created in), so a remount carries whatever
     // the column is already showing.
     instance.setGraph(live.current.model.graph);
-    instance.setHighlight(live.current.model.highlight);
+    instance.setHighlight(live.current.model.highlight, live.current.selectedId);
     props.fit.current = () => instance.fit();
     return () => {
       instance.destroy();
@@ -186,7 +218,7 @@ export function Graph(props: GraphProps) {
 
   useEffect(() => {
     renderer.current?.setGraph(model.graph);
-  }, [model.key]);
+  }, [model.key, forceRev, groupColors]);
 
   // Live layout, in two effects so pause/resume and re-layout are independent.
   //
@@ -202,7 +234,7 @@ export function Graph(props: GraphProps) {
     return () => {
       dynamics.current = null;
     };
-  }, [model.key, armClock]);
+  }, [model.key, armClock, forceRev]);
 
   // 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
@@ -218,8 +250,8 @@ export function Graph(props: GraphProps) {
   );
 
   useEffect(() => {
-    renderer.current?.setHighlight(model.highlight);
-  }, [model.highlight]);
+    renderer.current?.setHighlight(model.highlight, props.selectedId);
+  }, [model.highlight, props.selectedId]);
 
   return (
     <div class="weave-graph">
@@ -229,12 +261,41 @@ 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}
       <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="weave-chip" title={expandHint(everything)} onClick={() => setState(toggleExpandAll(view, model.clusters))}>
-          {expandLabel(everything)}
+        <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>

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

@@ -46,6 +46,7 @@ import type { GraphPayload, WireGraphEdge, WireGraphNode } from "../../shared/wi
 import { viewModel } from "../tree/tree.model";
 import type { ColorScheme, RenderGraph } from "./graph.model";
 import { EMPTY_RENDER_GRAPH, renderGraph } from "./graph.model";
+import { groupNodeColors } from "./groups";
 import type { PositionStorage } from "./positions";
 import { resolveLayout } from "./positions";
 
@@ -108,31 +109,21 @@ export function effectiveView(payload: GraphPayload | null, state: GraphViewStat
   return initialGraphView(viewModel(payload));
 }
 
-/** Open or close one cluster. Returns a new state; see {@link expandAll}. */
+/**
+ * Open or close one cluster. Returns a new state.
+ *
+ * The `[expand]` / `[collapse]` control that used to pair with this is gone
+ * (§15.10): the graph opens fully expanded, so "expand" was a no-op on arrival
+ * and "collapse" threw the whole picture away to show two root nodes. Clicking
+ * a collapsed cluster still opens it — that is `graphClick` — and per-level
+ * walking is what the tree column is for.
+ */
 export function toggleCluster(state: GraphViewState, id: string): GraphViewState {
   const expanded = new Set(state.expanded);
   if (!expanded.delete(id)) expanded.add(id);
   return { ...state, expanded };
 }
 
-/**
- * Open every cluster. The `[expand]` control from the §1.2 mock.
- *
- * `clusters` is `ClusterAggregate.clusters`, which holds **every** node with a
- * containment child whether or not it is currently visible — so one press
- * opens the whole tree rather than one level of it. That is deliberate: the
- * per-level walk is what the tree column is for, and a graph control that
- * needed six presses to show the graph would be a worse version of it.
- */
-export function expandAll(state: GraphViewState, clusters: ReadonlyMap<string, ClusterInfo>): GraphViewState {
-  return { ...state, expanded: new Set(clusters.keys()) };
-}
-
-/** Close every cluster, back to the roots. The other half of `[expand]`. */
-export function collapseAll(state: GraphViewState): GraphViewState {
-  return { ...state, expanded: new Set() };
-}
-
 // --- the highlight (§1.3, §7.4) ---------------------------------------------------------
 
 /**
@@ -162,39 +153,20 @@ export function highlightFor(edges: readonly WireGraphEdge[], selectedId: string
 
 // --- the control strip (§1.2) ---------------------------------------------------------------
 
-/** The `[expand]` control's label, which is really a toggle. */
-export function expandLabel(allExpanded: boolean): string {
-  return allExpanded ? "collapse" : "expand";
-}
-
-/** Its tooltip. */
-export function expandHint(allExpanded: boolean): string {
-  return allExpanded ? "collapse every cluster back to the roots" : "expand every cluster";
-}
-
-/** Whether every cluster in the graph is currently open. */
-export function allExpanded(state: GraphViewState, clusters: ReadonlyMap<string, ClusterInfo>): boolean {
-  if (clusters.size === 0) return false;
-  for (const id of clusters.keys()) if (!state.expanded.has(id)) return false;
-  return true;
-}
+/** The `[fit]` control. Constant, but named here so the component holds no copy. */
+export const FIT_LABEL = "fit";
+export const FIT_HINT = "frame the whole graph";
 
 /**
- * What the `[expand]` control does when pressed.
+ * The `[sliders]` control, which shows and hides the tuner panel (§15.7).
  *
- * One function rather than a ternary in the component, for §10's reason: the
- * choice between expanding and collapsing is a branch, and a branch in a
- * `.tsx` is a branch no test can reach. It is also the *only* place the
- * toggle's two halves are paired, so its label and its effect cannot disagree
- * — {@link expandLabel} reads the same predicate.
+ * 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 function toggleExpandAll(state: GraphViewState, clusters: ReadonlyMap<string, ClusterInfo>): GraphViewState {
-  return allExpanded(state, clusters) ? collapseAll(state) : expandAll(state, clusters);
-}
-
-/** The `[fit]` control. Constant, but named here so the component holds no copy. */
-export const FIT_LABEL = "fit";
-export const FIT_HINT = "frame the whole graph";
+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:
@@ -300,6 +272,16 @@ export function graphColumnModel(
   // 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,
+  /**
+   * Colour nodes by their group's hue rather than by kind (§15.8).
+   *
+   * A parameter rather than a constant because it is a taste decision the
+   * user owns — the kind palette is three greys and an accent, which is calm
+   * but says nothing about which blob is which. Defaults to `true`: the
+   * grouping is what the forces went to the trouble of separating, so leaving
+   * it uncoloured by default would waste the layout.
+   */
+  groupColors = true,
 ): GraphColumnModel {
   if (payload === null)
     // Identity preserved on the ordinary path (`EMPTY_COLUMN` is compared by
@@ -311,9 +293,13 @@ export function graphColumnModel(
   const vaultOpen = state.expanded.has("vault");
   const edges = vaultOpen ? reduced.edges.filter((edge) => edge.source !== "vault" && edge.target !== "vault") : reduced.edges;
   const layout = resolveLayout(storage, reduced.nodes, edges);
+  // Over the *reduced* nodes and the same edges the layout used, so a
+  // collapsed cluster is coloured by the group it stands in for rather than
+  // by a branch that is not on screen.
+  const fills = groupColors ? groupNodeColors(reduced.nodes, edges, scheme) : undefined;
 
   return {
-    graph: renderGraph(reduced.nodes, edges, layout.positions, scheme),
+    graph: renderGraph(reduced.nodes, edges, layout.positions, scheme, fills),
     highlight: highlightFor(edges, selectedId),
     key: layout.key,
     cached: layout.cached,

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

@@ -39,6 +39,16 @@ const DRAG_ALPHA_TARGET = 0.2;
 /** d3-force's alpha floor. */
 const ALPHA_MIN = 0.001;
 
+/**
+ * How far the pin must travel, in layout units, to count as a drag rather
+ * than a held press.
+ *
+ * Half a layout unit is well under one screen pixel at any zoom a person
+ * uses, so this cannot swallow a real drag — but it does swallow the
+ * identical-coordinate repeats a stationary press produces. See `pin`.
+ */
+const PIN_STILL = 0.5;
+
 /**
  * Build a live simulation over a {@link RenderGraph}.
  *
@@ -111,9 +121,20 @@ export function createGraphSimulation(graph: RenderGraph, initial?: ReadonlyMap<
       // make room, then cool on release. A pinned node is immune to every
       // force — the drag must not fight the sim, or the node would shudder
       // under its own neighbours.
+      const still = node.fx != null && node.fy != null && Math.abs(node.fx - at.x) < PIN_STILL && Math.abs(node.fy - at.y) < PIN_STILL;
       node.fx = at.x;
       node.fy = at.y;
-      sim.alphaTarget(DRAG_ALPHA_TARGET);
+      // Heat only while the pointer is actually *travelling*. `alphaTarget` is
+      // a floor, not a decay: held above the alpha floor it feeds the system
+      // energy forever, so a long press with a still cursor kept every other
+      // node swimming (measured: 93 of 94 nodes moving, mean 70 units, never
+      // settling) and — once the forces got strong enough to separate groups
+      // — orbiting each other. d3's example gets away with the unconditional
+      // hold because its `drag` subject only fires on real movement; sigma's
+      // `downNode` + `moveBody` pair does not, so the distinction is made
+      // here. Releasing the target to 0 while the node stays pinned lets the
+      // graph cool *under* the held node, which is what a press should do.
+      sim.alphaTarget(still ? 0 : DRAG_ALPHA_TARGET);
     },
 
     release(id) {

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

@@ -521,6 +521,15 @@ export function renderGraph(
   edges: readonly WireGraphEdge[],
   positions: ReadonlyMap<string, Point>,
   scheme: ColorScheme,
+  /**
+   * Per-node fills that override the kind palette — `groups.ts`'s
+   * group-hue assignment, or absent for the kind-only colouring.
+   *
+   * Injected rather than computed here because it is a *policy* (§15.8's
+   * `colors` setting) and this function is the mechanism. An id the map does
+   * not name falls back to {@link kindColor}, so a partial map is safe.
+   */
+  groupFills?: ReadonlyMap<string, string>,
 ): RenderGraph {
   const placed = new Map<string, WireGraphNode>();
   for (const node of nodes) {
@@ -543,7 +552,7 @@ export function renderGraph(
       y: at.y,
       size,
       label: nodeLabel(node),
-      color: kindColor(node.kind, scheme),
+      color: groupFills?.get(id) ?? kindColor(node.kind, scheme),
       kind: node.kind,
       provenance: node.provenance,
       zIndex: Math.round(size),
@@ -614,14 +623,50 @@ export interface EdgeDisplayOverride {
  */
 export function nodeReducer(
   highlight: ReadonlySet<string> | null,
+  /**
+   * The selected node itself, distinguished from its neighbours.
+   *
+   * `highlight` is `focusNeighborhood`'s answer — the selection *plus* its
+   * direct neighbours — and painting the two identically loses the one fact
+   * the gesture was about: which node was clicked. Optional, so a caller with
+   * only a neighbourhood keeps the previous two-tier behaviour.
+   */
+  selectedId?: string | null,
 ): (id: string, data: RenderNode, scheme: ColorScheme) => NodeDisplayOverride {
   return (id, data, scheme) => {
     if (highlight === null) return {};
-    if (highlight.has(id)) return { zIndex: data.zIndex + HIGHLIGHT_Z_LIFT };
+    if (id === selectedId && highlight.has(id)) {
+      // The subject of the gesture: lifted clear of its own neighbourhood and
+      // grown by a ratio rather than to a fixed radius, so a hub still reads
+      // as bigger than the leaf beside it while both read as "this one".
+      return { zIndex: data.zIndex + HIGHLIGHT_Z_LIFT * 2, size: data.size * SELECTED_GROWTH };
+    }
+    // A connected node: its own group colour at full strength, lifted above
+    // the cloud, and grown a little. The step between "connected" and
+    // "unrelated" used to be carried entirely by the *recession of everything
+    // else*, which reads as the graph dimming rather than as a neighbourhood
+    // being named — the difference matters most on a big canvas, where the
+    // receded cloud is far off-screen and the only thing visible is a
+    // neighbourhood that looks exactly like it did before the click.
+    if (highlight.has(id)) return { zIndex: data.zIndex + HIGHLIGHT_Z_LIFT, size: data.size * NEIGHBOUR_GROWTH };
     return { color: recessColor(data.color, scheme), label: null, zIndex: 0 };
   };
 }
 
+/**
+ * How much the selected node grows, as a size multiplier.
+ *
+ * A ratio, not a fixed radius: the degree ramp's whole job is that a hub is
+ * visibly bigger than a leaf, and selecting a leaf must not make it the
+ * largest thing on the stage. 1.45× is a clear step at every zoom — sizes are
+ * in layout units (`itemSizesReference: "positions"`), so it survives zooming
+ * out, unlike a pixel bump.
+ */
+export const SELECTED_GROWTH = 1.45;
+
+/** The same idea, one step down, for a directly connected node. */
+export const NEIGHBOUR_GROWTH = 1.15;
+
 /**
  * How far a highlighted node is lifted above the rest.
  *
@@ -651,12 +696,25 @@ export const HIGHLIGHT_Z_LIFT = MAX_NODE_SIZE + 1;
  */
 export function edgeReducer(
   highlight: ReadonlySet<string> | null,
+  /** The selection, so an edge *touching* it outranks one merely near it. */
+  selectedId?: string | null,
 ): (key: string, data: RenderEdge, scheme: ColorScheme) => EdgeDisplayOverride {
   return (_key, data, scheme) => {
     if (highlight === null) return {};
-    return highlight.has(data.source) && highlight.has(data.target)
-      ? { zIndex: 1, size: data.size * EDGE_PRESENCE }
-      : { color: recessColor(data.color, scheme) };
+    if (!highlight.has(data.source) || !highlight.has(data.target)) {
+      return { color: recessColor(data.color, scheme) };
+    }
+    // Incident on the selection itself — these are the node's actual links,
+    // and they are what "connected" means drawn. Painted in the accent so a
+    // containment hairline joining the selection stops reading as scaffolding
+    // for as long as the selection stands, and thickened a step beyond the
+    // neighbourhood's own edges.
+    if (selectedId != null && (data.source === selectedId || data.target === selectedId)) {
+      return { zIndex: 2, size: data.size * EDGE_PRESENCE * 1.35, color: GRAPH_PALETTE[scheme].accent };
+    }
+    // Between two neighbours, but not touching the selection: real context,
+    // one step quieter.
+    return { zIndex: 1, size: data.size * EDGE_PRESENCE };
   };
 }