@multiplatform.one/node-graph 7.7.2

package/src/nodes/lod.spec.tsx

@@ -0,0 +1,300 @@
+/**
+ * Task 3.8. The level-of-detail crossing, and the invariant that makes it safe.
+ *
+ * Two claims, and the second is the one that bites.
+ *
+ * `lodForZoom` crosses at `overviewZoom` and nowhere else — swept over a grid
+ * rather than sampled at three points, because "nowhere else" is a statement
+ * about every zoom, and a three-point test would pass on a function with a
+ * second threshold hidden at 1.5.
+ *
+ * The rendered height in `detail` equals the rendered height in `overview` for
+ * the same node and the same knobs. React Flow 12 installs a per-node
+ * `ResizeObserver`; a height-changing LOD would re-measure every node on every
+ * zoom tick and move every attached edge endpoint with it (design §5).
+ *
+ * HOW that height is asserted, honestly: happy-dom lays nothing out, so
+ * `getBoundingClientRect()` is zeros here and a spec written against it would
+ * pass whatever the component did — the same limit `NodeGraphWeb.spec.tsx`
+ * states about culling. What IS observable is the CAUSE. A box changes height
+ * because something unmounted or because a declared height changed, so this
+ * asserts the element tree is identical across modes and that the declared
+ * width and min-height are the same numbers. The rendered pixels are the
+ * story's arm, on `NodeGraph/Overview` in Chrome, with edge endpoints read
+ * before and after the crossover.
+ */
+
+import { Preset, Surface } from "@multiplatform.one/theme";
+import type { Knobs } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ReactFlowProvider } from "../react-flow/xy";
+import { GraphNode } from "./GraphNode";
+import { GraphPort } from "./GraphPort";
+import { defaultOverviewZoom, detailOpacity, isOverview, lodForZoom } from "./lod";
+import type { GraphRenderMode } from "./lod";
+import type { GraphNodePort, GraphNodeSizeKnob } from "./nodeMeasure";
+import { graphNodeMinHeight, graphNodeWidth, portSpacing } from "./nodeMeasure";
+import { OverviewNode } from "./overviewNode";
+import { declarationFor } from "../../tests/styles";
+
+afterEach(cleanup);
+
+const ports: GraphNodePort[] = [
+  { id: "in", side: "left", direction: "in", label: "rows" },
+  { id: "ok", side: "right", direction: "out", label: "ok" },
+  { id: "err", side: "right", direction: "out", label: "error" },
+];
+
+const sizes = ["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[];
+
+// ── lodForZoom ───────────────────────────────────────────────────────────────
+
+describe("lodForZoom crosses at overviewZoom and nowhere else", () => {
+  /** Every transition in a fine sweep, as the zoom where the mode flipped. */
+  function transitions(overviewZoom: number, step = 0.001): number[] {
+    const found: number[] = [];
+    let previous = lodForZoom(0.001, overviewZoom);
+    for (let zoom = 0.001; zoom <= 4; zoom += step) {
+      const mode = lodForZoom(zoom, overviewZoom);
+      if (mode !== previous) found.push(zoom);
+      previous = mode;
+    }
+    return found;
+  }
+
+  it("has exactly one transition across a sweep from 0.001 to 4", () => {
+    const found = transitions(defaultOverviewZoom);
+    expect(found).toHaveLength(1);
+    expect(found[0]).toBeGreaterThanOrEqual(defaultOverviewZoom);
+    expect(found[0]).toBeLessThan(defaultOverviewZoom + 0.002);
+  });
+
+  it("moves that single transition when overviewZoom moves", () => {
+    for (const overviewZoom of [0.1, 0.25, 0.35, 0.8, 1.5]) {
+      const found = transitions(overviewZoom);
+      expect(found, `overviewZoom ${overviewZoom}`).toHaveLength(1);
+      expect(found[0]).toBeGreaterThanOrEqual(overviewZoom);
+      expect(found[0]).toBeLessThan(overviewZoom + 0.002);
+    }
+  });
+
+  it("puts the threshold itself in detail, and everything under it in overview", () => {
+    expect(lodForZoom(defaultOverviewZoom)).toBe("detail");
+    expect(lodForZoom(defaultOverviewZoom - 0.0001)).toBe("overview");
+    expect(lodForZoom(defaultOverviewZoom + 0.0001)).toBe("detail");
+  });
+
+  it("is monotone: once detail, always detail as zoom rises", () => {
+    let seenDetail = false;
+    for (let zoom = 0.01; zoom <= 4; zoom += 0.01) {
+      const mode = lodForZoom(zoom);
+      if (mode === "detail") seenDetail = true;
+      else expect(seenDetail, `overview reappeared at zoom ${zoom}`).toBe(false);
+    }
+  });
+
+  it("renders the full body rather than a grey box when the zoom is not a number", () => {
+    // Reachable from a store mid-initialisation. A screen of grey rectangles
+    // at unknown zoom gives the user no way back; a full body always does.
+    expect(lodForZoom(Number.NaN)).toBe("detail");
+    expect(lodForZoom(Number.POSITIVE_INFINITY)).toBe("detail");
+  });
+
+  it("agrees with the canvas default, which is the same constant and not a copy", async () => {
+    const { graphCanvasDefaults } = await import("../react-flow/NodeGraphWeb");
+    expect(graphCanvasDefaults.overviewZoom).toBe(defaultOverviewZoom);
+  });
+
+  it("sits above the canvas's minZoom, or the crossing is unreachable", async () => {
+    // React Flow's OWN default minZoom is 0.5 — above overviewZoom. Measured in
+    // Chrome on NodeGraph/Overview at 500 nodes before this was set: the
+    // zoom-out control bottomed out at 0.5, fitView clamped there and showed 50
+    // of 500 nodes, and overview mode never fired once. Every spec in this file
+    // was green throughout. A threshold under a floor the user cannot cross is
+    // dead code that tests clean, so the relationship is pinned here.
+    const { graphCanvasDefaults } = await import("../react-flow/NodeGraphWeb");
+    expect(graphCanvasDefaults.minZoom).toBeLessThan(graphCanvasDefaults.overviewZoom);
+    expect(graphCanvasDefaults.minZoom).toBeLessThan(0.5);
+    expect(lodForZoom(graphCanvasDefaults.minZoom, graphCanvasDefaults.overviewZoom)).toBe(
+      "overview",
+    );
+  });
+});
+
+describe("the fade helpers say the same thing the mode does", () => {
+  it("is zero in overview and one in detail — never display:none, never an unmount", () => {
+    expect(detailOpacity("overview")).toBe(0);
+    expect(detailOpacity("detail")).toBe(1);
+    expect(isOverview("overview")).toBe(true);
+    expect(isOverview("detail")).toBe(false);
+  });
+});
+
+// ── the height invariant ─────────────────────────────────────────────────────
+
+function renderNode(
+  renderMode: GraphRenderMode,
+  overrides?: Partial<Knobs>,
+  size: GraphNodeSizeKnob = "medium",
+) {
+  return renderWithProviders(
+    <Preset cascade={false} overrides={overrides}>
+      <Surface size={size} density="comfortable">
+        <ReactFlowProvider>
+          <GraphNode
+            id="n1"
+            title="Validate"
+            subtitle="Three in, three out"
+            ports={ports}
+            renderMode={renderMode}
+            renderPort={(port) => (
+              <GraphPort id={port.id} side={port.side} direction={port.direction} />
+            )}
+          >
+            <div data-graph-node-body-extra="">extra body content</div>
+          </GraphNode>
+        </ReactFlowProvider>
+      </Surface>
+    </Preset>,
+  );
+}
+
+function frameOf(container: HTMLElement): HTMLElement {
+  const el = container.querySelector("[data-graph-node]");
+  if (!el) throw new Error("GraphNode did not render a frame");
+  return el as HTMLElement;
+}
+
+/** Every element in the subtree, as `tag + the data-* attributes it carries`. */
+function shapeOf(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll("*")).map((el) => {
+    const data = Array.from(el.attributes)
+      .filter((attr) => attr.name.startsWith("data-"))
+      .map((attr) => `${attr.name}=${attr.value}`)
+      .sort()
+      .join(",");
+    return `${el.tagName.toLowerCase()}[${data}]`;
+  });
+}
+
+describe("the box is the same box in both modes", () => {
+  it("declares the same width and min-height at every size stop", () => {
+    for (const size of sizes) {
+      const detail = renderNode("detail", undefined, size);
+      const detailBox = {
+        width: declarationFor(frameOf(detail.container), "width"),
+        minHeight: declarationFor(frameOf(detail.container), "min-height"),
+      };
+      cleanup();
+      const overview = renderNode("overview", undefined, size);
+      const overviewBox = {
+        width: declarationFor(frameOf(overview.container), "width"),
+        minHeight: declarationFor(frameOf(overview.container), "min-height"),
+      };
+      cleanup();
+      expect(overviewBox, `size ${size}`).toEqual(detailBox);
+      // …and the numbers are the recipe's, not both-empty-so-equal.
+      expect(detailBox.width).toBe(`${graphNodeWidth({ size })}px`);
+      expect(detailBox.minHeight).toBe(
+        `${graphNodeMinHeight({ size, ports, portSpacingPx: portSpacing({ coarsePointer: false }) })}px`,
+      );
+    }
+  });
+
+  it("renders the IDENTICAL element tree — nothing unmounts on the way to overview", () => {
+    const detail = renderNode("detail");
+    const detailShape = shapeOf(detail.container);
+    cleanup();
+    const overview = renderNode("overview");
+    const overviewShape = shapeOf(overview.container);
+    cleanup();
+    // The render-mode attribute is the one legitimate difference.
+    expect(overviewShape.map((entry) => entry.replace("overview", "MODE"))).toEqual(
+      detailShape.map((entry) => entry.replace("detail", "MODE")),
+    );
+    expect(detailShape.length).toBeGreaterThan(5);
+  });
+
+  it("keeps the subtitle, the ports and the children mounted in overview", () => {
+    const { container } = renderNode("overview");
+    expect(container.querySelector("[data-graph-node-ports]")).not.toBeNull();
+    expect(container.querySelector("[data-graph-node-children]")).not.toBeNull();
+    expect(container.querySelector("[data-graph-node-body-extra]")).not.toBeNull();
+    expect(container.textContent).toContain("Three in, three out");
+    // Three real ports, still measurable, still holding the height floor open.
+    expect(container.querySelectorAll(".mp-graph-port")).toHaveLength(ports.length);
+  });
+
+  it("fades them with opacity rather than hiding them", () => {
+    const { container } = renderNode("overview");
+    const portsStack = container.querySelector("[data-graph-node-ports]") as HTMLElement;
+    const childrenStack = container.querySelector("[data-graph-node-children]") as HTMLElement;
+    for (const el of [portsStack, childrenStack]) {
+      expect(declarationFor(el, "opacity")).toBe("0");
+      // `display: none` would collapse the box, which is the whole failure.
+      expect(declarationFor(el, "display")).not.toBe("none");
+    }
+  });
+
+  it("holds the same box across a knob flip, in both modes", () => {
+    for (const borderWidth of ["small", "large"] as const) {
+      const detail = renderNode("detail", { borderWidth });
+      const detailBox = declarationFor(frameOf(detail.container), "min-height");
+      cleanup();
+      const overview = renderNode("overview", { borderWidth });
+      const overviewBox = declarationFor(frameOf(overview.container), "min-height");
+      cleanup();
+      expect(overviewBox, `borderWidth ${borderWidth}`).toBe(detailBox);
+    }
+  });
+});
+
+describe("OverviewNode measures from the same recipe the detail body does", () => {
+  function renderOverviewNode(size: GraphNodeSizeKnob) {
+    return renderWithProviders(
+      <Preset cascade={false}>
+        <Surface size={size} density="comfortable">
+          <ReactFlowProvider>
+            <OverviewNode id="n1" ports={ports} />
+          </ReactFlowProvider>
+        </Surface>
+      </Preset>,
+    );
+  }
+
+  it("declares the same width and min-height GraphNode would, at every size stop", () => {
+    for (const size of sizes) {
+      const detail = renderNode("detail", undefined, size);
+      const expected = {
+        width: declarationFor(frameOf(detail.container), "width"),
+        minHeight: declarationFor(frameOf(detail.container), "min-height"),
+      };
+      cleanup();
+      const plain = renderOverviewNode(size);
+      const actual = {
+        width: declarationFor(frameOf(plain.container), "width"),
+        minHeight: declarationFor(frameOf(plain.container), "min-height"),
+      };
+      cleanup();
+      // Swapping the body cannot move the node's box, so it cannot move an
+      // edge endpoint either. A "small grey rectangle" here would move every
+      // endpoint on the canvas the moment a user zoomed out.
+      expect(actual, `size ${size}`).toEqual(expected);
+    }
+  });
+
+  it("is one box, not a body — that is the cost it saves at 500 nodes", () => {
+    const { container } = renderOverviewNode("medium");
+    expect(container.querySelector("[data-graph-node-overview]")).not.toBeNull();
+    expect(container.querySelector("[data-graph-node-title]")).toBeNull();
+    expect(container.querySelector("[data-graph-node-ports]")).toBeNull();
+  });
+
+  it("does not clip, because the ports still overhang the frame (§7.1 H6)", () => {
+    const { container } = renderOverviewNode("medium");
+    expect(declarationFor(frameOf(container), "overflow-x")).not.toBe("hidden");
+    expect(declarationFor(frameOf(container), "overflow-y")).not.toBe("hidden");
+  });
+});

package/src/nodes/lod.ts

@@ -0,0 +1,69 @@
+/**
+ * Level of detail, and the one invariant that makes it safe (design §5).
+ *
+ * Pure. No React, no DOM, no `@xyflow` — the whole decision is one comparison,
+ * and putting it here rather than inline in `GraphNodeHost` is what lets the
+ * crossing be swept over a grid in vitest instead of eyeballed in a browser.
+ *
+ * The invariant this module exists to protect is NOT about paint. React Flow 12
+ * installs a per-node `ResizeObserver`, so a height-changing LOD would
+ * re-measure every node on every zoom tick and move every attached edge
+ * endpoint with it. That is why `renderMode` fades children and never unmounts
+ * them, and why `overviewNode.tsx` is measured from the same recipe the detail
+ * body uses rather than being "a small box".
+ */
+
+/**
+ * On `GraphNodeRenderProps` from v1 (design §5). Naming it here rather than
+ * inline in the schema is what lets a consumer's own node body take the union
+ * without importing the whole model.
+ */
+export type GraphRenderMode = "detail" | "overview";
+
+/**
+ * The default crossing. 0.35 is design §5's number, and it lives here so
+ * `graphCanvasDefaults`, `GraphHostValue` and every spec read ONE constant
+ * instead of three copies that can drift apart by a decimal.
+ */
+export const defaultOverviewZoom = 0.35;
+
+/**
+ * Which mode a node draws in at this zoom.
+ *
+ * The comparison is `zoom < overviewZoom`, so the threshold itself is DETAIL.
+ * That is a real choice and not an off-by-one: `overviewZoom` is the zoom at
+ * which detail is still legible, and a canvas parked exactly on its own
+ * default should show the graph, not the summary.
+ *
+ * Monotone by construction, which is the whole of "crosses at `overviewZoom`
+ * and nowhere else": one comparison cannot produce two transitions.
+ *
+ * A non-finite zoom resolves to `detail`. It only reaches here from a store
+ * mid-initialisation or a consumer's own transform, and a graph that renders
+ * its full body is a graph a user can still work with — where an overview of
+ * unknown zoom is a screen of grey rectangles with no way back.
+ */
+export function lodForZoom(
+  zoom: number,
+  overviewZoom: number = defaultOverviewZoom,
+): GraphRenderMode {
+  if (!Number.isFinite(zoom)) return "detail";
+  return zoom < overviewZoom ? "overview" : "detail";
+}
+
+/** True when children should be faded out. Spelled once so no caller re-derives it. */
+export function isOverview(mode: GraphRenderMode): boolean {
+  return mode === "overview";
+}
+
+/**
+ * The opacity a node's non-essential children carry in each mode.
+ *
+ * A NUMBER, not a boolean the caller turns into a number, because zero is the
+ * load-bearing value: children at `opacity: 0` are still laid out, still
+ * measured, and still hold the box open. `display: none` or an unmount would
+ * collapse the box and hand React Flow's observer a new height to chase.
+ */
+export function detailOpacity(mode: GraphRenderMode): number {
+  return isOverview(mode) ? 0 : 1;
+}

package/src/nodes/nodeMeasure.spec.ts

@@ -0,0 +1,245 @@
+/**
+ * Task 1.8, the pure half. Runs in Node with no renderer.
+ *
+ * Three laws, each from design §11 / §7.1:
+ *  - the width ladder remaps to `NodeKindSpec.measure.width` and never touches
+ *    the control-height recipe;
+ *  - `capContainerRadius` behaviour at all five radius stops;
+ *  - `portSpacing` floors `minHeight` at ports × portSpacing.
+ */
+
+import {
+  capContainerRadius,
+  defaultKnobs,
+  type Knobs,
+  MIN_PRESS_TARGET,
+  resolveKnobs,
+  resolveRadiusForPart,
+} from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import {
+  defaultNodeMeasure,
+  FINE_PORT_PITCH,
+  type GraphNodePort,
+  graphNodeMeasure,
+  graphNodeMinHeight,
+  graphNodeRadius,
+  graphNodeRadiusPx,
+  graphNodeWidth,
+  nodePanelPaddingPx,
+  portSpacing,
+  verticalPortCrowd,
+} from "./nodeMeasure";
+
+const sizes = ["small", "medium", "large"] as const satisfies readonly Knobs["size"][];
+const spaces = ["small", "medium", "large"] as const satisfies readonly Knobs["space"][];
+const radiusStops = [
+  "none",
+  "small",
+  "medium",
+  "large",
+  "full",
+] as const satisfies readonly Knobs["borderRadius"][];
+
+function port(id: string, side: GraphNodePort["side"]): GraphNodePort {
+  return { id, side, direction: side === "left" ? "in" : "out" };
+}
+
+describe("width: remapped to the per-kind table, never the control ladder", () => {
+  it("returns the declared measure width unchanged at every size stop", () => {
+    for (const size of sizes) {
+      expect(graphNodeWidth({ size, measure: { width: 240 } })).toBe(240);
+    }
+  });
+
+  it("falls back to the 172 / 190 / 216 table when a kind declares no width", () => {
+    expect(graphNodeWidth({ size: "small" })).toBe(172);
+    expect(graphNodeWidth({ size: "medium" })).toBe(190);
+    expect(graphNodeWidth({ size: "large" })).toBe(216);
+  });
+
+  it("never lands on a control height — the ladder a container must not ride", () => {
+    const controlHeights = new Set(
+      sizes.map((size) => resolveKnobs({ ...defaultKnobs, size }).knobProps.control.height),
+    );
+    expect(controlHeights.size).toBeGreaterThan(0);
+    for (const size of sizes) {
+      expect(controlHeights.has(graphNodeWidth({ size }))).toBe(false);
+    }
+  });
+
+  it("steps monotonically, so the size knob still means something", () => {
+    expect(graphNodeWidth({ size: "small" })).toBeLessThan(graphNodeWidth({ size: "medium" }));
+    expect(graphNodeWidth({ size: "medium" })).toBeLessThan(graphNodeWidth({ size: "large" }));
+  });
+});
+
+describe("radius: CONTAINER-CAP at all five stops", () => {
+  it("mirrors the resolver's panel padding — the drift guard on this module's copy", () => {
+    // `capContainerRadius` at `full` returns the container's own padding px,
+    // so this equality pins our mirror to `panelPaddingPxMap` in resolveKnobs.
+    for (const space of spaces) {
+      expect(capContainerRadius("full", space)).toBe(nodePanelPaddingPx[space]);
+    }
+  });
+
+  it("paints exactly what capContainerRadius resolves, at every stop and space", () => {
+    for (const borderRadius of radiusStops) {
+      for (const space of spaces) {
+        expect(graphNodeRadius({ borderRadius, space })).toBe(
+          capContainerRadius(borderRadius, space),
+        );
+      }
+    }
+  });
+
+  it("agrees with the DG-RAD doctrine table at every stop and space", () => {
+    for (const borderRadius of radiusStops) {
+      for (const space of spaces) {
+        expect(graphNodeRadiusPx({ borderRadius, space })).toBe(
+          resolveRadiusForPart({
+            radiusClass: "CONTAINER-CAP",
+            stop: borderRadius,
+            paddingPx: nodePanelPaddingPx[space],
+          }).px,
+        );
+      }
+    }
+  });
+
+  it("never exceeds the node's own padding — the cap is what stops a child clip", () => {
+    for (const borderRadius of radiusStops) {
+      for (const space of spaces) {
+        expect(graphNodeRadiusPx({ borderRadius, space })).toBeLessThanOrEqual(
+          nodePanelPaddingPx[space],
+        );
+      }
+    }
+  });
+
+  it("caps rather than passes through where the token would overflow the padding", () => {
+    // `full` (50px) exceeds every padding stop, so every space caps.
+    for (const space of spaces) {
+      expect(graphNodeRadius({ borderRadius: "full", space })).toBe(nodePanelPaddingPx[space]);
+    }
+    // `large` (16px) fits inside `large` padding (32px) and keeps its token.
+    expect(typeof graphNodeRadius({ borderRadius: "large", space: "large" })).toBe("string");
+    // ...and does not fit inside `small` padding (13px), so it caps.
+    expect(graphNodeRadius({ borderRadius: "large", space: "small" })).toBe(13);
+  });
+
+  it("is 0 at `none` in every space", () => {
+    for (const space of spaces) {
+      expect(graphNodeRadiusPx({ borderRadius: "none", space })).toBe(0);
+    }
+  });
+});
+
+describe("portSpacing floors minHeight at ports × portSpacing", () => {
+  it("is the press floor on coarse pointers and the fine hit diameter otherwise", () => {
+    expect(portSpacing({ coarsePointer: true })).toBe(MIN_PRESS_TARGET);
+    expect(portSpacing({ coarsePointer: false })).toBe(FINE_PORT_PITCH);
+    expect(FINE_PORT_PITCH).toBeLessThan(MIN_PRESS_TARGET);
+  });
+
+  it("floors a single-edge node at ports × portSpacing", () => {
+    const ports = [
+      port("a", "left"),
+      port("b", "left"),
+      port("c", "left"),
+      port("d", "left"),
+    ] satisfies GraphNodePort[];
+    const portSpacingPx = portSpacing({ coarsePointer: true });
+    expect(graphNodeMinHeight({ size: "medium", ports, portSpacingPx })).toBe(
+      ports.length * portSpacingPx,
+    );
+  });
+
+  it("counts the busiest EDGE, not the node — opposite sides never collide", () => {
+    const split = [
+      port("in1", "left"),
+      port("in2", "left"),
+      port("out1", "right"),
+      port("out2", "right"),
+    ] satisfies GraphNodePort[];
+    expect(verticalPortCrowd(split)).toBe(2);
+    const portSpacingPx = portSpacing({ coarsePointer: true });
+    expect(graphNodeMinHeight({ size: "medium", ports: split, portSpacingPx })).toBe(
+      2 * portSpacingPx,
+    );
+  });
+
+  it("ignores top and bottom ports, which stack across the width", () => {
+    const horizontal = [
+      port("t1", "top"),
+      port("t2", "top"),
+      port("b1", "bottom"),
+    ] satisfies GraphNodePort[];
+    expect(verticalPortCrowd(horizontal)).toBe(0);
+    expect(
+      graphNodeMinHeight({ size: "medium", ports: horizontal, portSpacingPx: MIN_PRESS_TARGET }),
+    ).toBe(defaultNodeMeasure.medium.minHeight);
+  });
+
+  it("keeps the declared minHeight when the ports fit inside it", () => {
+    const ports = [port("only", "left")] satisfies GraphNodePort[];
+    expect(
+      graphNodeMinHeight({
+        size: "medium",
+        ports,
+        portSpacingPx: MIN_PRESS_TARGET,
+        measure: { minHeight: 120 },
+      }),
+    ).toBe(120);
+  });
+
+  it("raises a declared minHeight that is too short for its own ports", () => {
+    const ports = [port("a", "left"), port("b", "left"), port("c", "left")];
+    expect(
+      graphNodeMinHeight({
+        size: "medium",
+        ports,
+        portSpacingPx: MIN_PRESS_TARGET,
+        measure: { minHeight: 40 },
+      }),
+    ).toBe(3 * MIN_PRESS_TARGET);
+  });
+
+  it("is taller on a coarse pointer than on a fine one for the same ports", () => {
+    const ports = [port("a", "left"), port("b", "left"), port("c", "left")];
+    const coarse = graphNodeMinHeight({
+      size: "medium",
+      ports,
+      portSpacingPx: portSpacing({ coarsePointer: true }),
+    });
+    const fine = graphNodeMinHeight({
+      size: "medium",
+      ports,
+      portSpacingPx: portSpacing({ coarsePointer: false }),
+    });
+    expect(coarse).toBeGreaterThan(fine);
+  });
+});
+
+describe("graphNodeMeasure seeds both axes before first paint", () => {
+  it("carries the width from the table and the height from the port floor", () => {
+    const ports = [port("a", "left"), port("b", "left")];
+    expect(
+      graphNodeMeasure({ size: "large", ports, portSpacingPx: MIN_PRESS_TARGET }),
+    ).toStrictEqual({
+      width: 216,
+      minHeight: 2 * MIN_PRESS_TARGET,
+    });
+  });
+
+  it("lets a declared kind measure win on both axes when it is large enough", () => {
+    expect(
+      graphNodeMeasure({
+        size: "small",
+        ports: [],
+        portSpacingPx: MIN_PRESS_TARGET,
+        measure: { width: 300, minHeight: 200 },
+      }),
+    ).toStrictEqual({ width: 300, minHeight: 200 });
+  });
+});