@rokkit/graph 1.6.0 → 1.7.0

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

@@ -0,0 +1,33 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { EdgeStyle } from '../layout/types.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /**
+     * Share one state across this diagram and, say, an entity table beside it. Given one,
+     * the caller owns it: this component reads it and never calls `update`, exactly as
+     * `Graph` does — two owners writing one state fight on every render.
+     */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** The node to centre. Defaults to the selection. */
+    focus?: string | null;
+    /** How many hops out. One answers "what touches this"; two, "what does this reach". */
+    depth?: number;
+    edgeStyle?: EdgeStyle;
+    controls?: boolean;
+    maxDepth?: number;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    arrows?: boolean;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const Neighborhood: import("svelte").Component<Props, {}, "focus" | "value" | "edgeStyle" | "depth">;
+type Neighborhood = ReturnType<typeof Neighborhood>;
+export default Neighborhood;

package/dist/diagrams/StructureDiagram.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	/**
+	 * A codebase as a radial dendrogram, with its calls bundled through the structure.
+	 *
+	 * What `CallTree` cannot be over a real repo. A call graph's own spanning tree has hundreds
+	 * of roots, so capping its depth prunes almost nothing and the rim comes out a grey smear.
+	 * Containment — crate, module, file — is a real tree with one root, which is what makes
+	 * "show two levels, then drill" mean something.
+	 *
+	 * The calls are drawn ON that tree rather than defining it, bundled so edges travelling the
+	 * same way through the hierarchy pull together. `bundleTension` is the Straight/Bundled
+	 * toggle: 0 is a plain chord, 0.85 the full route.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DepthControl from '../controls/DepthControl.svelte'
+	import BundleControl from '../controls/BundleControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { GraphFields } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/** Share one state with views beside this one. See `ErDiagram` for the contract. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** How many ancestor bands to draw, counting from the focus. */
+		levels?: number
+		/** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
+		focusPath?: string[]
+		/** How hard edges are pulled onto the tree, 0..1. 0 is a straight chord. */
+		bundleTension?: number
+		/** What a leaf's dot is sized by. */
+		sizeBy?: string
+		sizeScale?: 'linear' | 'log'
+		controls?: boolean
+		maxLevels?: number
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		levels = $bindable(2),
+		focusPath = $bindable([]),
+		bundleTension = $bindable(0.85),
+		sizeBy = 'degree',
+		sizeScale = 'linear',
+		controls = false,
+		maxLevels = 4,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'structure',
+		levels,
+		focusPath,
+		bundleTension,
+		sizeBy,
+		sizeScale,
+		value,
+		preset,
+		mode,
+		label,
+		onselect
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) {
+			graph.update(config())
+
+			return
+		}
+
+		// A supplied state is the caller's: their data, preset, mode and selection stay theirs
+		// 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()
+		graph.apply(mine)
+	})
+</script>
+
+<!-- Snippets are declared OUTSIDE the frame and passed conditionally: one declared
+     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)} />
+	<BundleControl {bundleTension} onchange={(v) => (bundleTension = v)} />
+	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} relations groups />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom arrows={false} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,31 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /** Share one state with views beside this one. See `ErDiagram` for the contract. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** How many ancestor bands to draw, counting from the focus. */
+    levels?: number;
+    /** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
+    focusPath?: string[];
+    /** How hard edges are pulled onto the tree, 0..1. 0 is a straight chord. */
+    bundleTension?: number;
+    /** What a leaf's dot is sized by. */
+    sizeBy?: string;
+    sizeScale?: 'linear' | 'log';
+    controls?: boolean;
+    maxLevels?: number;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const StructureDiagram: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels" | "bundleTension">;
+type StructureDiagram = ReturnType<typeof StructureDiagram>;
+export default StructureDiagram;

package/dist/diagrams/Sunburst.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	/**
+	 * The same containment as a treemap, drawn as nested wedges.
+	 *
+	 * Angle carries the measure and RADIUS carries the depth, so how deep the tree goes is the
+	 * first thing you read — which is exactly what a treemap makes you hunt for. A treemap
+	 * spends its pixels better; neither is the right one, which is why both exist.
+	 *
+	 * Same tree, same measure, same captions as `Treemap`, so switching between them keeps
+	 * your place.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DepthControl from '../controls/DepthControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { GraphFields } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/**
+		 * Share one state across this diagram and, say, an entity table beside it. Given one,
+		 * the caller owns it: this component reads it and never calls `update`, exactly as
+		 * `Graph` does — two owners writing one state fight on every render.
+		 */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** What area encodes. A `measures` key, or `weight`, or `degree`. */
+		sizeBy?: 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. */
+		focusPath?: string[]
+		controls?: boolean
+		maxLevels?: number
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		sizeBy = 'weight',
+		levels = $bindable(2),
+		focusPath = $bindable([]),
+		controls = false,
+		maxLevels = 4,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'sunburst',
+		sizeBy,
+		levels,
+		focusPath,
+		value,
+		preset,
+		mode,
+		label,
+		onselect
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) {
+			graph.update(config())
+
+			return
+		}
+
+		// A supplied state is the caller's: their data, preset, mode and selection stay theirs
+		// 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()
+		graph.apply(mine)
+	})
+</script>
+
+<!-- Snippets are declared OUTSIDE the frame and passed conditionally: one declared
+     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)} />
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} groups />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom arrows={false} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,32 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /**
+     * Share one state across this diagram and, say, an entity table beside it. Given one,
+     * the caller owns it: this component reads it and never calls `update`, exactly as
+     * `Graph` does — two owners writing one state fight on every render.
+     */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** What area encodes. A `measures` key, or `weight`, or `degree`. */
+    sizeBy?: 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. */
+    focusPath?: string[];
+    controls?: boolean;
+    maxLevels?: number;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const Sunburst: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels">;
+type Sunburst = ReturnType<typeof Sunburst>;
+export default Sunburst;

package/dist/diagrams/Treemap.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	/**
+	 * Containment as nested rectangles, area proportional to a measure.
+	 *
+	 * Answers "where is the mass" — a box's area is what it CONTAINS, so the tree sums
+	 * subtrees rather than counting nodes. Every box is the same shape at every depth,
+	 * including a leaf: a treemap nests one thing.
+	 *
+	 * No edges. Containment IS the relationship here, and at this scale an adjacency graph
+	 * cannot be drawn.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DepthControl from '../controls/DepthControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { GraphFields } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/**
+		 * Share one state across this diagram and, say, an entity table beside it. Given one,
+		 * the caller owns it: this component reads it and never calls `update`, exactly as
+		 * `Graph` does — two owners writing one state fight on every render.
+		 */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** What area encodes. A `measures` key, or `weight`, or `degree`. */
+		sizeBy?: 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. */
+		focusPath?: string[]
+		controls?: boolean
+		maxLevels?: number
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		sizeBy = 'weight',
+		levels = $bindable(2),
+		focusPath = $bindable([]),
+		controls = false,
+		maxLevels = 4,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'world',
+		sizeBy,
+		levels,
+		focusPath,
+		value,
+		preset,
+		mode,
+		label,
+		onselect
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) {
+			graph.update(config())
+
+			return
+		}
+
+		// A supplied state is the caller's: their data, preset, mode and selection stay theirs
+		// 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()
+		graph.apply(mine)
+	})
+</script>
+
+<!-- Snippets are declared OUTSIDE the frame and passed conditionally: one declared
+     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)} />
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} groups />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom arrows={false} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,32 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /**
+     * Share one state across this diagram and, say, an entity table beside it. Given one,
+     * the caller owns it: this component reads it and never calls `update`, exactly as
+     * `Graph` does — two owners writing one state fight on every render.
+     */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** What area encodes. A `measures` key, or `weight`, or `degree`. */
+    sizeBy?: 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. */
+    focusPath?: string[];
+    controls?: boolean;
+    maxLevels?: number;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const Treemap: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels">;
+type Treemap = ReturnType<typeof Treemap>;
+export default Treemap;

package/dist/icons.d.ts

@@ -1,6 +1,11 @@
 /**
  * Default glyph per node kind and row badge.
  *
+ * Reachable as `@rokkit/graph/icons` — a subpath with NO Svelte imports, because the one
+ * place a consumer is REQUIRED to use it is a UnoCSS config, which Node loads directly and
+ * which therefore cannot import the main barrel (that re-exports `Graph.svelte`, and Node
+ * cannot parse `.svelte`). Found by dbd wiring its safelist.
+ *
  * `i-glyph:<name>` is the vocabulary this repo actually ships — `packages/icons/lib/glyph.json`,
  * 697 names, safelisted wholesale by the app's UnoCSS config. An earlier version of this map
  * used `i-graph-<kind>`, which is defined nowhere: UnoCSS emitted no rule, so every kind

package/dist/icons.js

@@ -1,6 +1,11 @@
 /**
  * Default glyph per node kind and row badge.
  *
+ * Reachable as `@rokkit/graph/icons` — a subpath with NO Svelte imports, because the one
+ * place a consumer is REQUIRED to use it is a UnoCSS config, which Node loads directly and
+ * which therefore cannot import the main barrel (that re-exports `Graph.svelte`, and Node
+ * cannot parse `.svelte`). Found by dbd wiring its safelist.
+ *
  * `i-glyph:<name>` is the vocabulary this repo actually ships — `packages/icons/lib/glyph.json`,
  * 697 names, safelisted wholesale by the app's UnoCSS config. An earlier version of this map
  * used `i-graph-<kind>`, which is defined nowhere: UnoCSS emitted no rule, so every kind

package/dist/index.d.ts

@@ -1,10 +1,27 @@
 export { default as Graph } from './Graph.svelte';
+export { default as GraphLegend } from './GraphLegend.svelte';
+export { default as ErDiagram } from './diagrams/ErDiagram.svelte';
+export { default as DependencyDiagram } from './diagrams/DependencyDiagram.svelte';
+export { default as CallTree } from './diagrams/CallTree.svelte';
+export { default as Treemap } from './diagrams/Treemap.svelte';
+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 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 { 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 { DEFAULT_ICONS } from './icons.js';
-export { cluster, neighborhood, points, layouts } from './layout/index.js';
+export { cluster, flow, neighborhood, points, radial, structure, sunburst, world, layouts } from './layout/index.js';
+export { LAYOUT_OPTIONS, appliesTo } from './layout/options.js';
 export type { EntityRow, GraphStateConfig, Relationship } from './GraphState.svelte.js';
 export type { GraphChannel, GraphPreset, GraphShades } from './preset.js';
 export type * from './types.js';

package/dist/index.js

@@ -1,8 +1,30 @@
 // Public surface for `@rokkit/graph`.
+// The canvas. It draws what a layout hands it and ships no chrome — pair it with the
+// controls below, or reach for a named diagram, which is the composition already made.
 export { default as Graph } from './Graph.svelte';
+export { default as GraphLegend } from './GraphLegend.svelte';
+// Named diagrams: one layout, the controls that mean something for that picture, an opt-in
+// legend. `@rokkit/chart` has `BarChart` and `LineChart` over one `Plot`; these are the same
+// idea over one `Graph`, and each is usable on its own.
+export { default as ErDiagram } from './diagrams/ErDiagram.svelte';
+export { default as DependencyDiagram } from './diagrams/DependencyDiagram.svelte';
+export { default as CallTree } from './diagrams/CallTree.svelte';
+export { default as Treemap } from './diagrams/Treemap.svelte';
+export { default as Sunburst } from './diagrams/Sunburst.svelte';
+export { default as StructureDiagram } from './diagrams/StructureDiagram.svelte';
+export { default as Neighborhood } from './diagrams/Neighborhood.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 { 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 { DEFAULT_ICONS } from './icons.js';
-export { cluster, neighborhood, points, layouts } from './layout/index.js';
+export { cluster, flow, neighborhood, points, radial, structure, sunburst, world, layouts } from './layout/index.js';
+export { LAYOUT_OPTIONS, appliesTo } from './layout/options.js';

package/dist/layout/arc.d.ts

@@ -0,0 +1,13 @@
+export type Wedge = {
+    r0: number;
+    r1: number;
+    a0: number;
+    a1: number;
+};
+/**
+ * The wedge as a path, centred on `(cx, cy)`.
+ *
+ * An innermost wedge has `r0 === 0`, where the two inner corners are the same point and an
+ * inner arc is undefined — that one is a pie slice, closing through the centre instead.
+ */
+export declare function arcPath(cx: number, cy: number, wedge: Wedge): string;

package/dist/layout/arc.js

@@ -0,0 +1,58 @@
+/* An annulus sector as an SVG path.
+ *
+ * Kept out of the component because it is arithmetic, not rendering: the layout reports a
+ * wedge as four numbers, and turning those into a path is a pure function that can be tested
+ * to exact coordinates. The same split `edgePath` already makes.
+ */
+const TAU = Math.PI * 2;
+/** Point on a circle of radius `r` at angle `a`, relative to a centre at the origin. */
+function at(cx, cy, r, a) {
+    return [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
+}
+const fmt = (n) => Number(n.toFixed(3));
+/**
+ * A full turn cannot be one arc.
+ *
+ * SVG's `A` command draws the arc BETWEEN two points, and for a complete circle those two
+ * points coincide — so the command is a no-op and the wedge vanishes. A single child covering
+ * its parent's whole span is the common case at the root, not an edge case, so the span is
+ * halved and drawn as two arcs.
+ */
+function isFullTurn(wedge) {
+    return wedge.a1 - wedge.a0 >= TAU - 1e-9;
+}
+/** Ring path for a span that covers the whole circle: two half-arcs, outer then inner. */
+function fullRing(cx, cy, wedge) {
+    const { r0, r1 } = wedge;
+    const ring = (r, sweep) => {
+        const [ax, ay] = at(cx, cy, r, 0);
+        const [bx, by] = at(cx, cy, r, Math.PI);
+        return (`M ${fmt(ax)} ${fmt(ay)} ` +
+            `A ${fmt(r)} ${fmt(r)} 0 0 ${sweep} ${fmt(bx)} ${fmt(by)} ` +
+            `A ${fmt(r)} ${fmt(r)} 0 0 ${sweep} ${fmt(ax)} ${fmt(ay)} Z`);
+    };
+    // The inner circle is drawn the opposite way round, so the even-odd/nonzero fill punches
+    // it out and the result is a ring rather than a disc.
+    return r0 > 0 ? `${ring(r1, 1)} ${ring(r0, 0)}` : ring(r1, 1);
+}
+/**
+ * The wedge as a path, centred on `(cx, cy)`.
+ *
+ * An innermost wedge has `r0 === 0`, where the two inner corners are the same point and an
+ * inner arc is undefined — that one is a pie slice, closing through the centre instead.
+ */
+export function arcPath(cx, cy, wedge) {
+    if (isFullTurn(wedge))
+        return fullRing(cx, cy, wedge);
+    const { r0, r1, a0, a1 } = wedge;
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    const [ox0, oy0] = at(cx, cy, r1, a0);
+    const [ox1, oy1] = at(cx, cy, r1, a1);
+    const outer = `M ${fmt(ox0)} ${fmt(oy0)} A ${fmt(r1)} ${fmt(r1)} 0 ${large} 1 ${fmt(ox1)} ${fmt(oy1)}`;
+    if (r0 <= 0)
+        return `${outer} L ${fmt(cx)} ${fmt(cy)} Z`;
+    const [ix1, iy1] = at(cx, cy, r0, a1);
+    const [ix0, iy0] = at(cx, cy, r0, a0);
+    return (`${outer} L ${fmt(ix1)} ${fmt(iy1)} ` +
+        `A ${fmt(r0)} ${fmt(r0)} 0 ${large} 0 ${fmt(ix0)} ${fmt(iy0)} Z`);
+}