@rokkit/graph 1.8.0 → 1.8.2

package/dist/diagrams/Sunburst.svelte.d.ts

@@ -1,5 +1,5 @@
 import { GraphState } from '../GraphState.svelte.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /**
@@ -13,6 +13,8 @@ type Props = {
     fields?: GraphFields;
     /** What area encodes. A `measures` key, or `weight`, or `degree`. */
     sizeBy?: string;
+    /** The measure — a 0..1 share — each box is shaded by (#164). Bindable; the picker moves it. */
+    shadeBy?: string;
     /** How many levels below the focus to materialise. */
     levels?: number;
     /** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
@@ -25,8 +27,16 @@ type Props = {
     mode?: 'light' | 'dark';
     label?: string;
     onselect?: (id: string | null) => void;
+    /**
+     * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+     * (null for a synthesised container). Return a promise while you load that level; the
+     * canvas shows it pending, and a rejection returns to the previous level.
+     */
+    ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>;
+    /** The reader climbed out; `path` is the new, shorter `focusPath`. */
+    ondrillup?: (path: string[]) => void | Promise<void>;
     class?: string;
 };
-declare const Sunburst: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels">;
+declare const Sunburst: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels" | "shadeBy">;
 type Sunburst = ReturnType<typeof Sunburst>;
 export default Sunburst;

package/dist/diagrams/Treemap.svelte

@@ -13,9 +13,11 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import MeasureControl from '../controls/MeasureControl.svelte'
 	import ZoomControl from '../controls/ZoomControl.svelte'
 	import { GraphState } from '../GraphState.svelte.js'
-	import type { GraphFields } from '../types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -30,6 +32,8 @@
 		fields?: GraphFields
 		/** What area encodes. A `measures` key, or `weight`, or `degree`. */
 		sizeBy?: string
+		/** The measure — a 0..1 share — each box is shaded by (#164). Bindable; the picker moves it. */
+		shadeBy?: string
 		/** How many levels below the focus to materialise. */
 		levels?: number
 		/** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
@@ -42,6 +46,14 @@
 		mode?: 'light' | 'dark'
 		label?: string
 		onselect?: (id: string | null) => void
+		/**
+		 * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+		 * (null for a synthesised container). Return a promise while you load that level; the
+		 * canvas shows it pending, and a rejection returns to the previous level.
+		 */
+		ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>
+		/** The reader climbed out; `path` is the new, shorter `focusPath`. */
+		ondrillup?: (path: string[]) => void | Promise<void>
 		class?: string
 	}
 
@@ -51,6 +63,7 @@
 		edges = [],
 		fields = {},
 		sizeBy = 'weight',
+		shadeBy = $bindable(undefined),
 		levels = $bindable(2),
 		focusPath = $bindable([]),
 		controls = false,
@@ -61,6 +74,8 @@
 		mode = 'light',
 		label = undefined,
 		onselect = undefined,
+		ondrill = undefined,
+		ondrillup = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -72,13 +87,19 @@
 		fields,
 		layout: 'world',
 		sizeBy,
+		shadeBy,
 		levels,
 		focusPath,
 		value,
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		ondrill,
+		ondrillup,
+		// Drilling moves focusPath inside the state; keep the bindable prop in step, or the next
+		// update() would put the old value back.
+		onfocuspath: (path: string[]) => (focusPath = path)
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -95,8 +116,19 @@
 		// and are never reset here. What this component DOES own is the options its own
 		// controls drive — the layout above all, since choosing this component is choosing it.
 		// `apply` merges; `update` would revert everything it does not name.
-		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
-			config()
+		// The drill path too: a caller's state holds where the reader drilled, and pushing this
+		// component's own focusPath prop back over it undid the drill on any prop change.
+		const {
+			nodes: _n,
+			edges: _e,
+			fields: _f,
+			preset: _p,
+			mode: _m,
+			value: _v,
+			focusPath: _fp,
+			onfocuspath: _sync,
+			...mine
+		} = config()
 		graph.apply(mine)
 	})
 </script>
@@ -105,17 +137,21 @@
      inside is always defined, so the frame would render an empty control bar over
      every diagram that asked for none. -->
 {#snippet controlBar()}
-	<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
-	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
+		<MeasureControl channel="color" value={shadeBy} options={graph.measureKeys} allowNone onchange={(v) => (shadeBy = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
-	<GraphLegend state={graph} groups />
+	<GraphLegend state={graph} groups shade />
 {/snippet}
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

package/dist/diagrams/Treemap.svelte.d.ts

@@ -1,5 +1,5 @@
 import { GraphState } from '../GraphState.svelte.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /**
@@ -13,6 +13,8 @@ type Props = {
     fields?: GraphFields;
     /** What area encodes. A `measures` key, or `weight`, or `degree`. */
     sizeBy?: string;
+    /** The measure — a 0..1 share — each box is shaded by (#164). Bindable; the picker moves it. */
+    shadeBy?: string;
     /** How many levels below the focus to materialise. */
     levels?: number;
     /** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
@@ -25,8 +27,16 @@ type Props = {
     mode?: 'light' | 'dark';
     label?: string;
     onselect?: (id: string | null) => void;
+    /**
+     * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+     * (null for a synthesised container). Return a promise while you load that level; the
+     * canvas shows it pending, and a rejection returns to the previous level.
+     */
+    ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>;
+    /** The reader climbed out; `path` is the new, shorter `focusPath`. */
+    ondrillup?: (path: string[]) => void | Promise<void>;
     class?: string;
 };
-declare const Treemap: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels">;
+declare const Treemap: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels" | "shadeBy">;
 type Treemap = ReturnType<typeof Treemap>;
 export default Treemap;

package/dist/index.d.ts

@@ -8,24 +8,31 @@ export { default as Sunburst } from './diagrams/Sunburst.svelte';
 export { default as StructureDiagram } from './diagrams/StructureDiagram.svelte';
 export { default as Neighborhood } from './diagrams/Neighborhood.svelte';
 export { default as DependencyMatrix } from './diagrams/DependencyMatrix.svelte';
+export { default as LayersDiagram } from './diagrams/LayersDiagram.svelte';
+export { default as PolymetricTree } from './diagrams/PolymetricTree.svelte';
+export { default as ArcDiagram } from './diagrams/ArcDiagram.svelte';
 export { default as DensityControl } from './controls/DensityControl.svelte';
 export { default as EdgeStyleControl } from './controls/EdgeStyleControl.svelte';
 export { default as ZoomControl } from './controls/ZoomControl.svelte';
 export { default as DepthControl } from './controls/DepthControl.svelte';
 export { default as BundleControl } from './controls/BundleControl.svelte';
+export { default as ViolationsControl } from './controls/ViolationsControl.svelte';
+export { default as MeasureControl } from './controls/MeasureControl.svelte';
+export { default as HiddenControl } from './controls/HiddenControl.svelte';
+export { default as DrillBar } from './controls/DrillBar.svelte';
 export { ZOOM_MIN, ZOOM_MAX, ZOOM_STEP, clampZoom } from './controls/zoom.js';
 export { GraphState } from './GraphState.svelte.js';
 export { normalizeGraph } from './model/normalize.js';
 export { buildTree, findNode } from './model/tree.js';
 export type { TreeNode } from './model/tree.js';
 export { readPath } from './model/path.js';
-export { createGraphPreset, defaultGraphPreset, resolveGroupStyles } from './preset.js';
+export { createGraphPreset, defaultGraphPreset, resolveGroupStyles, resolveShade } from './preset.js';
 export { DEFAULT_ICONS } from './icons.js';
-export { cluster, flow, neighborhood, points, radial, structure, sunburst, world, layouts } from './layout/index.js';
+export { cluster, flow, layers, neighborhood, points, polymetric, arcs, radial, structure, sunburst, world, layouts } from './layout/index.js';
 export { LAYOUT_OPTIONS, appliesTo } from './layout/options.js';
 export { buildMatrix } from './layout/matrix.js';
 export type { Matrix, MatrixCell, MatrixBlock, MatrixOptions } from './layout/matrix.js';
 export type { EntityRow, GraphStateConfig, Relationship } from './GraphState.svelte.js';
-export type { GraphChannel, GraphPreset, GraphShades } from './preset.js';
+export type { GraphChannel, GraphPreset, GraphShadeRamp, GraphShades } from './preset.js';
 export type * from './types.js';
 export type * from './layout/types.js';

package/dist/index.js

@@ -14,19 +14,26 @@ export { default as Sunburst } from './diagrams/Sunburst.svelte';
 export { default as StructureDiagram } from './diagrams/StructureDiagram.svelte';
 export { default as Neighborhood } from './diagrams/Neighborhood.svelte';
 export { default as DependencyMatrix } from './diagrams/DependencyMatrix.svelte';
+export { default as LayersDiagram } from './diagrams/LayersDiagram.svelte';
+export { default as PolymetricTree } from './diagrams/PolymetricTree.svelte';
+export { default as ArcDiagram } from './diagrams/ArcDiagram.svelte';
 // Controls, for composing your own arrangement over the bare canvas.
 export { default as DensityControl } from './controls/DensityControl.svelte';
 export { default as EdgeStyleControl } from './controls/EdgeStyleControl.svelte';
 export { default as ZoomControl } from './controls/ZoomControl.svelte';
 export { default as DepthControl } from './controls/DepthControl.svelte';
 export { default as BundleControl } from './controls/BundleControl.svelte';
+export { default as ViolationsControl } from './controls/ViolationsControl.svelte';
+export { default as MeasureControl } from './controls/MeasureControl.svelte';
+export { default as HiddenControl } from './controls/HiddenControl.svelte';
+export { default as DrillBar } from './controls/DrillBar.svelte';
 export { ZOOM_MIN, ZOOM_MAX, ZOOM_STEP, clampZoom } from './controls/zoom.js';
 export { GraphState } from './GraphState.svelte.js';
 export { normalizeGraph } from './model/normalize.js';
 export { buildTree, findNode } from './model/tree.js';
 export { readPath } from './model/path.js';
-export { createGraphPreset, defaultGraphPreset, resolveGroupStyles } from './preset.js';
+export { createGraphPreset, defaultGraphPreset, resolveGroupStyles, resolveShade } from './preset.js';
 export { DEFAULT_ICONS } from './icons.js';
-export { cluster, flow, neighborhood, points, radial, structure, sunburst, world, layouts } from './layout/index.js';
+export { cluster, flow, layers, neighborhood, points, polymetric, arcs, radial, structure, sunburst, world, layouts } from './layout/index.js';
 export { LAYOUT_OPTIONS, appliesTo } from './layout/options.js';
 export { buildMatrix } from './layout/matrix.js';

package/dist/layout/arcs.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutFn } from './types.js';
+import type { GraphEdge } from '../types.js';
+/** Which side an edge belongs on: the named relation's when `above` is given, else overlays. */
+export declare const sideOf: (edge: GraphEdge, above: string | undefined) => "above" | "below";
+/** The items on one axis, imports arcing left and shared commits right. */
+export declare const arcs: LayoutFn;

package/dist/layout/arcs.js

@@ -0,0 +1,141 @@
+/* The dual arc diagram (#169): two relations over one shared, ordered axis.
+ *
+ * Items stand in one column, each a labelled box. The coupling the code declares (imports) arcs
+ * out of the boxes' left edges, and the coupling the history reveals (shared commits) out of
+ * their right edges. The finding is a pair with an arc on one side and none on the other — the
+ * host flags a co-change pair with no import `hidden`, and `showEdges: 'hidden'` keeps only those.
+ *
+ * Vertical, so ~50 item labels read horizontally, one per row. Each side normalises its weights
+ * on its own — an import count and a commit count are different units, and one shared maximum
+ * would draw a whole side hairline — and to its 95th percentile, not its maximum, so one
+ * outlying pair does not flatten the rest.
+ */
+import { carried, keepsEdge } from './edges.js';
+import { warnUnknownOptions } from './options.js';
+import { capOf } from './percentile.js';
+const BOX_W = 168;
+const BOX_H = 16;
+const ROW = 20;
+const PAD = 16;
+/** An arc's horizontal reach as a share of half its span: flatter than a semicircle, so the
+ *  longest arcs do not push the canvas twice as wide as it is tall. */
+const BULGE = 0.5;
+/** By group, in the order groups first appear; within a group, as given. */
+function axisOrder(nodes) {
+    const rank = new Map();
+    for (const n of nodes)
+        if (!rank.has(n.group ?? ''))
+            rank.set(n.group ?? '', rank.size);
+    return nodes
+        .map((node, i) => ({ node, i }))
+        .sort((a, b) => rank.get(a.node.group ?? '') - rank.get(b.node.group ?? '') || a.i - b.i)
+        .map(({ node }) => node);
+}
+/** Which side an edge belongs on: the named relation's when `above` is given, else overlays. */
+export const sideOf = (edge, above) => (above === undefined ? edge.overlay : edge.relation === above) ? 'above' : 'below';
+/** An arc between two rows, out of the left edge (below) or the right edge (above). */
+function arc(edge, i, side, { x, y1, y2 }) {
+    const [top, bottom] = y1 < y2 ? [y1, y2] : [y2, y1];
+    const ry = (bottom - top) / 2;
+    // Drawn top to bottom: sweep 0 bends it left, 1 right.
+    const sweep = side === 'below' ? 0 : 1;
+    const s = side === 'below' ? -1 : 1;
+    return {
+        i,
+        id: edge.id,
+        fromKey: edge.source,
+        toKey: edge.target,
+        kind: edge.kind,
+        ...(edge.relation ? { relation: edge.relation } : {}),
+        ...carried(edge),
+        side,
+        self: false,
+        x1: x,
+        y1,
+        x2: x,
+        y2,
+        s1: s,
+        s2: s,
+        path: `M ${x} ${top} A ${ry * BULGE} ${ry} 0 0 ${sweep} ${x} ${bottom}`
+    };
+}
+/** Each side's weights as 0..1 of that side's 95th percentile, clamped past it. */
+function strengthen(edges) {
+    for (const side of ['above', 'below']) {
+        const mine = edges.filter((e) => e.side === side && e.weight !== undefined);
+        const cap = capOf(mine.map((e) => e.weight));
+        for (const e of mine)
+            e.strength = Math.min(1, Math.max(0, e.weight / cap));
+    }
+}
+function route(model, placed, x0, options) {
+    const routed = [];
+    for (const edge of [...model.edges, ...model.overlays]) {
+        const from = placed.get(edge.source);
+        const to = placed.get(edge.target);
+        if (!from || !to || from === to)
+            continue;
+        const side = sideOf(edge, options.above);
+        const x = side === 'below' ? x0 : x0 + BOX_W;
+        routed.push(arc(edge, routed.length, side, { x, y1: from.y + BOX_H / 2, y2: to.y + BOX_H / 2 }));
+    }
+    // Strength first, so filtering to the hidden pairs does not re-scale what is left.
+    strengthen(routed);
+    return routed.filter((e) => keepsEdge(options.showEdges ?? 'all', e));
+}
+/** How far the widest arc on each side reaches past the box column. */
+function reach(model, placed, above) {
+    const out = { above: 0, below: 0 };
+    for (const edge of [...model.edges, ...model.overlays]) {
+        const from = placed.get(edge.source);
+        const to = placed.get(edge.target);
+        if (!from || !to)
+            continue;
+        const side = sideOf(edge, above);
+        out[side] = Math.max(out[side], (Math.abs(to.y - from.y) / 2) * BULGE);
+    }
+    return out;
+}
+function degrees(model) {
+    const count = new Map();
+    for (const e of [...model.edges, ...model.overlays]) {
+        if (e.source === e.target)
+            continue;
+        count.set(e.source, (count.get(e.source) ?? 0) + 1);
+        count.set(e.target, (count.get(e.target) ?? 0) + 1);
+    }
+    return count;
+}
+/** The items on one axis, imports arcing left and shared commits right. */
+export const arcs = (model, options) => {
+    warnUnknownOptions(options, 'arcs');
+    if (model.nodes.length === 0)
+        return { clusters: [], cards: {}, edges: [], size: { w: 0, h: 0 } };
+    const order = axisOrder(model.nodes);
+    const placed = new Map(order.map((node, row) => [node.id, { node, y: PAD + row * ROW }]));
+    // The axis is fixed by the items alone, so filtering edges never moves a box.
+    const { above, below } = reach(model, placed, options.above);
+    const x0 = PAD + below;
+    const degree = degrees(model);
+    const clusters = order.map((node) => ({
+        name: node.label,
+        list: [],
+        count: degree.get(node.id) ?? 0,
+        groupIndex: 0,
+        x: x0,
+        y: placed.get(node.id).y,
+        w: BOX_W,
+        h: BOX_H,
+        depth: 0,
+        nodeId: node.id,
+        kind: node.kind,
+        declared: node.id,
+        ...(node.group ? { ramp: node.group } : {})
+    }));
+    return {
+        clusters,
+        cards: {},
+        edges: route(model, placed, x0, options),
+        size: { w: x0 + BOX_W + above + PAD, h: PAD * 2 + (order.length - 1) * ROW + BOX_H }
+    };
+};

package/dist/layout/cards.js

@@ -18,14 +18,21 @@ function selectedRows(node, density, select) {
     }
     return node.rows;
 }
+/**
+ * Head, the shown rows, and a control row when there is something to control: hidden rows
+ * ("+3 more"), or a group's "Expand" (#166). Bottom padding only under content.
+ */
+function heightOf(node, shown, more) {
+    const controlRow = more > 0 || (node.members?.length ?? 0) > 0;
+    return HEAD_H + shown * ROW_H + (controlRow ? MORE_H : 0) + (shown || controlRow ? PAD_B : 0);
+}
 /** Build a card per node. Height is derived from row count — nothing is measured. */
 export function buildCards(nodes, density, options = {}) {
     const cards = {};
     for (const node of nodes) {
         const vis = visibleRows(node, density, options);
         const more = node.rows.length - vis.length;
-        const h = HEAD_H + vis.length * ROW_H + (more > 0 ? MORE_H : 0) + (vis.length || more > 0 ? PAD_B : 0);
-        cards[node.id] = { node, vis, more, w: CARD_W, h, x: 0, y: 0 };
+        cards[node.id] = { node, vis, more, w: CARD_W, h: heightOf(node, vis.length, more), x: 0, y: 0 };
     }
     return cards;
 }

package/dist/layout/edges.d.ts

@@ -1,5 +1,17 @@
-import type { Cards, EdgeStyle, RoutedEdge } from './types.js';
+import type { Cards, EdgeStyle, RoutedEdge, ShowEdges } from './types.js';
 import type { GraphEdge } from '../types.js';
+/**
+ * Whether a `showEdges` filter keeps this edge: `violations` keeps the edges that climb a layer
+ * (#167), `hidden` the coupling no import explains (#169), `all` everything.
+ */
+export declare function keepsEdge(showEdges: ShowEdges, edge: Pick<RoutedEdge, 'conformance' | 'hidden'>): boolean;
+/**
+ * What an edge carries onto the canvas whatever routes it — overlay flag, weight, the weakest
+ * and hidden flags and a condensed edge's count — copied only when set, so existing routed edges stay
+ * key-identical. Every layout that builds routed edges spreads this; one that built its own
+ * identity half without it silently drew weighted edges at the normal width.
+ */
+export declare function carried(edge: GraphEdge): Pick<RoutedEdge, 'overlay' | 'weight' | 'weakest' | 'hidden' | 'count' | 'conformance'>;
 /** Build all edge geometry, skipping edges whose endpoints aren't laid out. */
 export declare function buildEdges(edges: GraphEdge[], cards: Cards): RoutedEdge[];
 export declare function edgePath(e: RoutedEdge, style: EdgeStyle): string;

package/dist/layout/edges.js

@@ -36,13 +36,37 @@ function selfLoop(edge, i, card, { y1, y2 }) {
         s2: 1
     };
 }
-/** Overlay flag and weight, copied only when set so existing routed edges stay key-identical. */
-function carried(edge) {
+/**
+ * Whether a `showEdges` filter keeps this edge: `violations` keeps the edges that climb a layer
+ * (#167), `hidden` the coupling no import explains (#169), `all` everything.
+ */
+export function keepsEdge(showEdges, edge) {
+    if (showEdges === 'violations')
+        return edge.conformance === 'up';
+    if (showEdges === 'hidden')
+        return edge.hidden === true;
+    return true;
+}
+/**
+ * What an edge carries onto the canvas whatever routes it — overlay flag, weight, the weakest
+ * and hidden flags and a condensed edge's count — copied only when set, so existing routed edges stay
+ * key-identical. Every layout that builds routed edges spreads this; one that built its own
+ * identity half without it silently drew weighted edges at the normal width.
+ */
+export function carried(edge) {
     const out = {};
+    if (edge.conformance)
+        out.conformance = edge.conformance;
     if (edge.overlay)
         out.overlay = true;
     if (edge.weight !== undefined)
         out.weight = edge.weight;
+    if (edge.weakest)
+        out.weakest = true;
+    if (edge.hidden)
+        out.hidden = true;
+    if (edge.count !== undefined)
+        out.count = edge.count;
     return out;
 }
 /** Which side of each card the connector leaves from. 1 = right, -1 = left. */

package/dist/layout/extent.d.ts

@@ -0,0 +1,17 @@
+import type { Size } from './types.js';
+type Box = {
+    x: number;
+    y: number;
+    w?: number;
+    h?: number;
+};
+/**
+ * The true content extent of a layout, as distinct from its `size`.
+ *
+ * `LayoutResult.size` adds a +60 margin on the right and bottom only, so fitting to it hugs the
+ * left/top edge and floats away from the right/bottom. Centring needs the real bounds: the
+ * clusters', or — for an ungrouped layout (neighborhood), which reports none — the cards', and
+ * the layout size only when both are empty.
+ */
+export declare function contentExtent(clusters: Box[], cards: Record<string, Box>, size: Size): Size;
+export {};

package/dist/layout/extent.js

@@ -0,0 +1,27 @@
+/** Bottom-right extent of a set of boxes (a box with no size is a point), or {0,0}. */
+function extentOf(boxes) {
+    let w = 0;
+    let h = 0;
+    for (const box of boxes) {
+        w = Math.max(w, box.x + (box.w ?? 0));
+        h = Math.max(h, box.y + (box.h ?? 0));
+    }
+    return { w, h };
+}
+/**
+ * The true content extent of a layout, as distinct from its `size`.
+ *
+ * `LayoutResult.size` adds a +60 margin on the right and bottom only, so fitting to it hugs the
+ * left/top edge and floats away from the right/bottom. Centring needs the real bounds: the
+ * clusters', or — for an ungrouped layout (neighborhood), which reports none — the cards', and
+ * the layout size only when both are empty.
+ */
+export function contentExtent(clusters, cards, size) {
+    let { w, h } = extentOf(clusters);
+    if (!w || !h) {
+        const fromCards = extentOf(Object.values(cards));
+        w = Math.max(w, fromCards.w);
+        h = Math.max(h, fromCards.h);
+    }
+    return { w: w || size.w, h: h || size.h };
+}

package/dist/layout/flow.js

@@ -13,6 +13,7 @@
  * edge is still drawn straight over any box between its endpoints, because routing it around
  * needs dummy nodes on the intervening ranks and that is its own slice.
  */
+import { carried } from './edges.js';
 import { buildCards } from './cards.js';
 import { rank } from './rank.js';
 import { order } from './order.js';
@@ -65,7 +66,8 @@ function identity(edge, i) {
         fromKey: edge.source,
         toKey: edge.target,
         kind: edge.kind,
-        relation: edge.relation
+        relation: edge.relation,
+        ...carried(edge)
     };
 }
 /**

package/dist/layout/index.d.ts

@@ -1,8 +1,11 @@
+import { arcs } from './arcs.js';
 import { cluster } from './cluster.js';
 import { flow } from './flow.js';
+import { layers } from './layers.js';
 import { neighborhood } from './neighborhood.js';
 import { world } from './world.js';
 import { points } from './points.js';
+import { polymetric } from './polymetric.js';
 import { radial } from './radial.js';
 import { structure } from './structure.js';
 import { sunburst } from './sunburst.js';
@@ -10,6 +13,6 @@ import type { LayoutFn } from './types.js';
 /** Built-in layouts, addressable by name from `Graph`'s `layout` prop. */
 export declare const layouts: Record<string, LayoutFn>;
 export type LayoutName = keyof typeof layouts;
-export { cluster, flow, neighborhood, points, radial, structure, sunburst, world };
+export { arcs, cluster, flow, layers, neighborhood, points, polymetric, radial, structure, sunburst, world };
 export { LAYOUT_OPTIONS, appliesTo } from './options.js';
 export * from './types.js';

package/dist/layout/index.js

@@ -1,13 +1,28 @@
+import { arcs } from './arcs.js';
 import { cluster } from './cluster.js';
 import { flow } from './flow.js';
+import { layers } from './layers.js';
 import { neighborhood } from './neighborhood.js';
 import { world } from './world.js';
 import { points } from './points.js';
+import { polymetric } from './polymetric.js';
 import { radial } from './radial.js';
 import { structure } from './structure.js';
 import { sunburst } from './sunburst.js';
 /** Built-in layouts, addressable by name from `Graph`'s `layout` prop. */
-export const layouts = { cluster, flow, neighborhood, points, radial, structure, sunburst, world };
-export { cluster, flow, neighborhood, points, radial, structure, sunburst, world };
+export const layouts = {
+    arcs,
+    cluster,
+    flow,
+    layers,
+    neighborhood,
+    points,
+    polymetric,
+    radial,
+    structure,
+    sunburst,
+    world
+};
+export { arcs, cluster, flow, layers, neighborhood, points, polymetric, radial, structure, sunburst, world };
 export { LAYOUT_OPTIONS, appliesTo } from './options.js';
 export * from './types.js';

package/dist/layout/layers.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutFn } from './types.js';
+import type { Conformance } from '../types.js';
+/** How an edge sits against the layering, from the two layers the host gave. */
+export declare function deriveConformance(from?: number, to?: number): Conformance | undefined;
+/** Host-assigned layers as horizontal bands, layer 0 at the top. */
+export declare const layers: LayoutFn;