@rokkit/graph 1.6.0 → 1.8.0

package/dist/controls/DepthControl.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How many levels of a containment tree to materialise.
+ *
+ * The control that makes a large tree readable at all. A radial dendrogram over a whole
+ * codebase renders every leaf on one rim, where each is a fraction of a degree wide and
+ * nothing is legible — show the crates first, then drill. Depth and drilling are the same
+ * idea from two directions: this caps how far DOWN, `focusPath` moves where you start.
+ */
+type Props = {
+    levels?: number;
+    /** Deepest level offered. Beyond the tree's own depth the extra buttons do nothing. */
+    max?: number;
+    onchange?: (value: number) => void;
+};
+declare const DepthControl: import("svelte").Component<Props, {}, "">;
+type DepthControl = ReturnType<typeof DepthControl>;
+export default DepthControl;

package/dist/controls/EdgeStyleControl.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	/**
+	 * Curved or orthogonal connectors.
+	 *
+	 * A toggle rather than a picker: there are exactly two, and a two-option `<select>` costs a
+	 * reader more interaction than the thing it is choosing between is worth.
+	 */
+	import type { EdgeStyle } from '../layout/types.js'
+
+	type Props = {
+		edgeStyle?: EdgeStyle
+		onchange?: (value: EdgeStyle) => void
+	}
+
+	let { edgeStyle = 'curved', onchange }: Props = $props()
+
+	// `curved` is the default, so `orthogonal` is the pressed state — a toggle reads as "the
+	// non-default is on", not as "one of two things is selected".
+	const orthogonal = $derived(edgeStyle === 'orthogonal')
+</script>
+
+<button
+	type="button"
+	data-graph-edge-style={edgeStyle}
+	aria-pressed={orthogonal}
+	title={orthogonal ? 'Right-angle connectors' : 'Curved connectors'}
+	onclick={() => onchange?.(orthogonal ? 'curved' : 'orthogonal')}
+>
+	<span data-graph-edge-style-glyph aria-hidden="true">{orthogonal ? '⌐' : '︵'}</span>
+	<span data-graph-control-label>{orthogonal ? 'Angled' : 'Curved'}</span>
+</button>

package/dist/controls/EdgeStyleControl.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+     * Curved or orthogonal connectors.
+     *
+     * A toggle rather than a picker: there are exactly two, and a two-option `<select>` costs a
+     * reader more interaction than the thing it is choosing between is worth.
+     */
+import type { EdgeStyle } from '../layout/types.js';
+type Props = {
+    edgeStyle?: EdgeStyle;
+    onchange?: (value: EdgeStyle) => void;
+};
+declare const EdgeStyleControl: import("svelte").Component<Props, {}, "">;
+type EdgeStyleControl = ReturnType<typeof EdgeStyleControl>;
+export default EdgeStyleControl;

package/dist/controls/ZoomControl.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	/**
+	 * Zoom in, out, and back to fit.
+	 *
+	 * Buttons rather than a slider: each is one tab stop and one keypress, so the diagram is
+	 * navigable without a trackpad. The canvas handles ctrl+wheel and pinch itself — this is
+	 * the discoverable path to the same value, not the only one.
+	 */
+	import { ZOOM_MAX, ZOOM_MIN, ZOOM_STEP, clampZoom } from './zoom.js'
+
+	type Props = {
+		zoom?: number
+		onchange?: (value: number) => void
+	}
+
+	let { zoom = 1, onchange }: Props = $props()
+
+	const percent = $derived(Math.round(zoom * 100))
+
+	// Clamped here as well as in the canvas: the buttons disable at the ends, but a caller can
+	// hand this control a value from anywhere, and reporting one outside the range would push
+	// the canvas past a limit it has already agreed to.
+	const step = (factor: number) => onchange?.(clampZoom(zoom * factor))
+</script>
+
+<div data-graph-zoom-controls role="group" aria-label="Zoom">
+	<button
+		type="button"
+		data-graph-zoom="out"
+		aria-label="Zoom out"
+		disabled={zoom <= ZOOM_MIN}
+		onclick={() => step(1 / ZOOM_STEP)}>−</button
+	>
+	<button
+		type="button"
+		data-graph-zoom="reset"
+		aria-label="Reset zoom to fit"
+		onclick={() => onchange?.(1)}>{percent}%</button
+	>
+	<button
+		type="button"
+		data-graph-zoom="in"
+		aria-label="Zoom in"
+		disabled={zoom >= ZOOM_MAX}
+		onclick={() => step(ZOOM_STEP)}>+</button
+	>
+</div>

package/dist/controls/ZoomControl.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    zoom?: number;
+    onchange?: (value: number) => void;
+};
+declare const ZoomControl: import("svelte").Component<Props, {}, "">;
+type ZoomControl = ReturnType<typeof ZoomControl>;
+export default ZoomControl;

package/dist/controls/zoom.d.ts

@@ -0,0 +1,6 @@
+export declare const ZOOM_MIN = 0.25;
+export declare const ZOOM_MAX = 4;
+/** One step of the +/- buttons, and of one wheel notch. */
+export declare const ZOOM_STEP = 1.25;
+/** `value` brought inside the range. */
+export declare const clampZoom: (value: number) => number;

package/dist/controls/zoom.js

@@ -0,0 +1,12 @@
+/* Zoom bounds, shared by the canvas and the zoom control.
+ *
+ * Both have to agree: the canvas clamps a ctrl+wheel gesture and the control disables its
+ * buttons at the ends, and if those two numbers drift the control goes dead a step before the
+ * gesture does — which reads as a broken button.
+ */
+export const ZOOM_MIN = 0.25;
+export const ZOOM_MAX = 4;
+/** One step of the +/- buttons, and of one wheel notch. */
+export const ZOOM_STEP = 1.25;
+/** `value` brought inside the range. */
+export const clampZoom = (value) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));

package/dist/diagrams/CallTree.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	/**
+	 * A call graph as a tidy tree or dendrogram around a circle.
+	 *
+	 * Angle separates the subtrees, radius carries the depth — which is the question a call
+	 * graph asks. Packing it into boxes instead answers "how much is there" and, at any real
+	 * size, reads as a stack of colliding labels.
+	 *
+	 * `levels` is the control that makes it legible over a codebase: a dendrogram of a whole
+	 * repo puts every leaf on one rim, each a fraction of a degree wide. Show the crates, then
+	 * set `root` to drill into one — a dendrogram of dendrograms.
+	 */
+	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
+		/** `tree` reads radius as depth; `dendrogram` pins every leaf to the rim. */
+		radialMode?: 'tree' | 'dendrogram'
+		/** How many levels out from the root to draw. Unset draws the whole tree. */
+		levels?: number
+		/** The node to centre on — drilling. Unset roots at whatever nothing calls. */
+		root?: string | null
+		/** What a node's area encodes. `degree` counts edges. */
+		sizeBy?: string
+		sizeScale?: 'linear' | 'log'
+		controls?: boolean
+		/** Deepest level the depth control offers. */
+		maxLevels?: number
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		arrows?: boolean
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		radialMode = 'tree',
+		levels = $bindable(undefined),
+		root = $bindable(null),
+		sizeBy = 'degree',
+		sizeScale = 'linear',
+		controls = false,
+		maxLevels = 4,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		arrows = true,
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'radial',
+		radialMode,
+		levels,
+		root,
+		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={levels ?? maxLevels} max={maxLevels} onchange={(v) => (levels = v)} />
+	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} kinds />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom {arrows} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,37 @@
+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;
+    /** `tree` reads radius as depth; `dendrogram` pins every leaf to the rim. */
+    radialMode?: 'tree' | 'dendrogram';
+    /** How many levels out from the root to draw. Unset draws the whole tree. */
+    levels?: number;
+    /** The node to centre on — drilling. Unset roots at whatever nothing calls. */
+    root?: string | null;
+    /** What a node's area encodes. `degree` counts edges. */
+    sizeBy?: string;
+    sizeScale?: 'linear' | 'log';
+    controls?: boolean;
+    /** Deepest level the depth control offers. */
+    maxLevels?: number;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    arrows?: boolean;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const CallTree: import("svelte").Component<Props, {}, "value" | "levels" | "root">;
+type CallTree = ReturnType<typeof CallTree>;
+export default CallTree;

package/dist/diagrams/DependencyDiagram.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	/**
+	 * What reads, writes, calls and contains what — the other half of a schema.
+	 *
+	 * dbd's v2 model splits `tables`/`refs` from `entities`/`deps` because an ER renderer
+	 * wants one and a call-graph renderer wants the other. Pass
+	 * `toGraphInput(model, 'dependencies')` and this draws the second.
+	 *
+	 * Keyed by RELATION rather than by kind: on this canvas the verb is the information, and
+	 * `reads` versus `writes` is the distinction a reader is here for.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DensityControl from '../controls/DensityControl.svelte'
+	import EdgeStyleControl from '../controls/EdgeStyleControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { Density, 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
+		density?: Density
+		edgeStyle?: EdgeStyle
+		groupTint?: boolean
+		controls?: boolean
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		arrows?: boolean
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		density = $bindable('names'),
+		edgeStyle = $bindable('curved'),
+		groupTint = true,
+		controls = false,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		arrows = true,
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'flow',
+		density,
+		edgeStyle,
+		groupTint,
+		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()}
+	<DensityControl {density} onchange={(v) => (density = v)} />
+	<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
+	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} relations kinds />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom {arrows} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,30 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { Density, 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;
+    density?: Density;
+    edgeStyle?: EdgeStyle;
+    groupTint?: boolean;
+    controls?: boolean;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    arrows?: boolean;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const DependencyDiagram: import("svelte").Component<Props, {}, "value" | "density" | "edgeStyle">;
+type DependencyDiagram = ReturnType<typeof DependencyDiagram>;
+export default DependencyDiagram;

package/dist/diagrams/DependencyMatrix.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	/**
+	 * The dependency structure matrix: every node a row and a column, a cell where the row
+	 * depends on the column.
+	 *
+	 * Providers come first, so a layered codebase is lower-triangular and a mark ABOVE the
+	 * diagonal is a dependency against the grain — a cycle, or a layer reaching up. Groups sit
+	 * on the diagonal as outlined blocks, so a cross-module violation is a mark outside its
+	 * block. It stays readable at sizes where a node-link drawing is a hairball, which is the
+	 * reason to reach for it.
+	 *
+	 * Share a `state` with a `DependencyDiagram` beside it and a row click selects the same
+	 * node in both.
+	 */
+	import { GraphState } from '../GraphState.svelte.js'
+	import { buildMatrix } from '../layout/matrix.js'
+	import type { NodeAxis } from '../layout/types.js'
+	import type { GraphFields } from '../types.js'
+
+	type Props = {
+		/** Share one state with another view. The caller owns it; this component never updates it. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** Keep each group contiguous and outline it on the diagonal. `null` for one flat order. */
+		groupBy?: NodeAxis | null
+		/** Cell size in pixels. */
+		cell?: number
+		value?: string | null
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		groupBy = 'group',
+		cell = 16,
+		value = $bindable(undefined),
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		value,
+		onselect: (id: string | null) => {
+			value = id
+			onselect?.(id)
+		}
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) graph.update(config())
+	})
+
+	const matrix = $derived(buildMatrix(graph.model, { groupBy: groupBy ?? undefined }))
+
+	// Labels are measured by length, not by the DOM — deterministic, like every layout here.
+	const labelW = $derived(
+		Math.min(220, Math.max(48, Math.max(0, ...matrix.labels.map((l) => l.length)) * 6.5 + 14))
+	)
+	const n = $derived(matrix.order.length)
+	const width = $derived(labelW + n * cell + 8)
+	const height = $derived(labelW + n * cell + 8)
+	const selected = $derived(graph.value)
+
+	const name = $derived(
+		label ??
+			`Dependency matrix: ${n} nodes, ${matrix.cells.length} dependencies, ${matrix.above} above the diagonal`
+	)
+
+	function toggle(id: string) {
+		if (selected === id) graph.clear()
+		else graph.select(id)
+	}
+
+	function onKey(event: KeyboardEvent, id: string) {
+		if (event.key !== 'Enter' && event.key !== ' ') return
+		event.preventDefault()
+		toggle(id)
+	}
+
+	const cellState = (source: string, target: string) =>
+		selected && (source === selected || target === selected) ? 'highlight' : undefined
+</script>
+
+<div data-graph-matrix class={className} role="group" aria-label={name}>
+	<svg {width} {height} viewBox="0 0 {width} {height}">
+		<!-- Column headings, rotated so a long name costs height rather than width. -->
+		{#each matrix.labels as text, i (matrix.order[i])}
+			<text
+				data-matrix-col={matrix.order[i]}
+				data-matrix-state={selected === matrix.order[i] ? 'selected' : undefined}
+				transform="translate({labelW + i * cell + cell / 2 + 4}, {labelW - 6}) rotate(-90)"
+				>{text}</text
+			>
+		{/each}
+
+		{#each matrix.labels as text, i (matrix.order[i])}
+			{@const id = matrix.order[i]}
+			<g
+				data-matrix-row={id}
+				data-matrix-state={selected === id ? 'selected' : undefined}
+				role="button"
+				tabindex="0"
+				aria-pressed={selected === id}
+				aria-label={text}
+				onclick={() => toggle(id)}
+				onkeydown={(event) => onKey(event, id)}
+			>
+				<rect
+					x="0"
+					y={labelW + i * cell}
+					width={labelW + n * cell}
+					height={cell}
+					data-matrix-band
+				/>
+				<text
+					x={labelW - 6}
+					y={labelW + i * cell + cell / 2}
+					text-anchor="end"
+					dominant-baseline="middle">{text}</text
+				>
+			</g>
+		{/each}
+
+		{#each matrix.order as id, i (id)}
+			<rect
+				data-matrix-diagonal
+				x={labelW + i * cell}
+				y={labelW + i * cell}
+				width={cell}
+				height={cell}
+			/>
+		{/each}
+
+		{#each matrix.cells as c (`${c.row}:${c.col}`)}
+			<g
+				data-matrix-cell
+				data-matrix-from={c.source}
+				data-matrix-to={c.target}
+				data-matrix-above={c.above ? '' : undefined}
+				data-matrix-state={cellState(c.source, c.target)}
+				style:--cell-weight={c.count / matrix.maxCount}
+			>
+				<rect
+					x={labelW + c.col * cell + 1}
+					y={labelW + c.row * cell + 1}
+					width={cell}
+					height={cell}
+				/>
+				<title>{c.source} → {c.target} ({c.count})</title>
+			</g>
+		{/each}
+
+		{#each matrix.blocks as b (b.name + b.start)}
+			<rect
+				data-matrix-block={b.name}
+				x={labelW + b.start * cell}
+				y={labelW + b.start * cell}
+				width={(b.end - b.start + 1) * cell}
+				height={(b.end - b.start + 1) * cell}
+			/>
+		{/each}
+	</svg>
+</div>

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

@@ -0,0 +1,34 @@
+/**
+     * The dependency structure matrix: every node a row and a column, a cell where the row
+     * depends on the column.
+     *
+     * Providers come first, so a layered codebase is lower-triangular and a mark ABOVE the
+     * diagonal is a dependency against the grain — a cycle, or a layer reaching up. Groups sit
+     * on the diagonal as outlined blocks, so a cross-module violation is a mark outside its
+     * block. It stays readable at sizes where a node-link drawing is a hairball, which is the
+     * reason to reach for it.
+     *
+     * Share a `state` with a `DependencyDiagram` beside it and a row click selects the same
+     * node in both.
+     */
+import { GraphState } from '../GraphState.svelte.js';
+import type { NodeAxis } from '../layout/types.js';
+import type { GraphFields } from '../types.js';
+type Props = {
+    /** Share one state with another view. The caller owns it; this component never updates it. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** Keep each group contiguous and outline it on the diagonal. `null` for one flat order. */
+    groupBy?: NodeAxis | null;
+    /** Cell size in pixels. */
+    cell?: number;
+    value?: string | null;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const DependencyMatrix: import("svelte").Component<Props, {}, "value">;
+type DependencyMatrix = ReturnType<typeof DependencyMatrix>;
+export default DependencyMatrix;