@rokkit/graph 1.7.0 → 1.8.1

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;

package/dist/diagrams/ErDiagram.svelte

@@ -14,11 +14,12 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DensityControl from '../controls/DensityControl.svelte'
+	import DrillBar from '../controls/DrillBar.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 { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -45,6 +46,10 @@
 		arrows?: boolean
 		label?: string
 		onselect?: (id: string | null) => void
+		/** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+		onexpand?: (id: string, node: GraphNode) => void
+		/** The reader collapsed a group back into one node. */
+		oncollapse?: (id: string, node: GraphNode) => void
 		class?: string
 	}
 
@@ -64,6 +69,8 @@
 		arrows = true,
 		label = undefined,
 		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -81,7 +88,9 @@
 			preset,
 			mode,
 			label,
-			onselect
+			onselect,
+			onexpand,
+			oncollapse
 		})
 
 	// svelte-ignore state_referenced_locally
@@ -108,9 +117,12 @@
      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)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DensityControl {density} onchange={(v) => (density = v)} />
+		<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -119,7 +131,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

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

@@ -1,6 +1,6 @@
 import { GraphState } from '../GraphState.svelte.js';
 import type { Density, EdgeStyle } from '../layout/types.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /**
@@ -26,6 +26,10 @@ type Props = {
     arrows?: boolean;
     label?: string;
     onselect?: (id: string | null) => void;
+    /** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+    onexpand?: (id: string, node: GraphNode) => void;
+    /** The reader collapsed a group back into one node. */
+    oncollapse?: (id: string, node: GraphNode) => void;
     class?: string;
 };
 declare const ErDiagram: import("svelte").Component<Props, {}, "value" | "density" | "edgeStyle">;

package/dist/diagrams/LayersDiagram.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	/**
+	 * The intended layers, top to bottom, with every dependency between them (#167).
+	 *
+	 * Arrows should only point DOWN. The ones that climb are layer violations and are the output
+	 * of the view — `ViolationsControl` shows only those. The host assigns each node its `layer`
+	 * (it knows the architecture it intends); rokkit computes no depth, and marks each edge
+	 * `down` / `skip` / `up` / `level` from those layers unless the host already said.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DensityControl from '../controls/DensityControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import ViolationsControl from '../controls/ViolationsControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { Density } from '../layout/types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/** Share one state with another view — see `DependencyDiagram`. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		density?: Density
+		/** Every edge, or only the ones that climb. Bindable — the control moves it. */
+		showEdges?: 'all' | 'violations'
+		/** Band names by layer index; an unnamed layer reads "Layer N". */
+		layerLabels?: string[]
+		controls?: boolean
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		arrows?: boolean
+		label?: string
+		onselect?: (id: string | null) => void
+		onexpand?: (id: string, node: GraphNode) => void
+		oncollapse?: (id: string, node: GraphNode) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		density = $bindable('names'),
+		showEdges = $bindable('all'),
+		layerLabels = undefined,
+		controls = false,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		arrows = true,
+		label = undefined,
+		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'layers',
+		density,
+		showEdges,
+		layerLabels,
+		value,
+		preset,
+		mode,
+		label,
+		onselect,
+		onexpand,
+		oncollapse
+	})
+
+	// 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 — see DependencyDiagram. Only this component's own
+		// options are merged in.
+		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 — see DependencyDiagram. -->
+{#snippet controlBar()}
+	<DrillBar state={graph} />
+	{#if controls}
+		<ViolationsControl {showEdges} onchange={(v) => (showEdges = v)} />
+		<DensityControl {density} onchange={(v) => (density = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} relations />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom {arrows} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,30 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { Density } from '../layout/types.js';
+import type { GraphFields, GraphNode } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /** Share one state with another view — see `DependencyDiagram`. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    density?: Density;
+    /** Every edge, or only the ones that climb. Bindable — the control moves it. */
+    showEdges?: 'all' | 'violations';
+    /** Band names by layer index; an unnamed layer reads "Layer N". */
+    layerLabels?: string[];
+    controls?: boolean;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    arrows?: boolean;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    onexpand?: (id: string, node: GraphNode) => void;
+    oncollapse?: (id: string, node: GraphNode) => void;
+    class?: string;
+};
+declare const LayersDiagram: import("svelte").Component<Props, {}, "value" | "density" | "showEdges">;
+type LayersDiagram = ReturnType<typeof LayersDiagram>;
+export default LayersDiagram;

package/dist/diagrams/Neighborhood.svelte

@@ -12,11 +12,12 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
 	import EdgeStyleControl from '../controls/EdgeStyleControl.svelte'
 	import ZoomControl from '../controls/ZoomControl.svelte'
 	import { GraphState } from '../GraphState.svelte.js'
 	import type { EdgeStyle } from '../layout/types.js'
-	import type { GraphFields } from '../types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -34,6 +35,12 @@
 		/** How many hops out. One answers "what touches this"; two, "what does this reach". */
 		depth?: number
 		edgeStyle?: EdgeStyle
+		/**
+		 * Mark each card with its group's colour (#172). On by default, as in `ErDiagram`: a
+		 * neighbourhood has no group boxes either, so without it a table's schema is visible at
+		 * the root and invisible one click later.
+		 */
+		groupTint?: boolean
 		controls?: boolean
 		maxDepth?: number
 		legend?: boolean
@@ -43,6 +50,10 @@
 		arrows?: boolean
 		label?: string
 		onselect?: (id: string | null) => void
+		/** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+		onexpand?: (id: string, node: GraphNode) => void
+		/** The reader collapsed a group back into one node. */
+		oncollapse?: (id: string, node: GraphNode) => void
 		class?: string
 	}
 
@@ -54,6 +65,7 @@
 		focus = $bindable(null),
 		depth = $bindable(1),
 		edgeStyle = $bindable('curved'),
+		groupTint = true,
 		controls = false,
 		maxDepth = 3,
 		legend = false,
@@ -63,6 +75,8 @@
 		arrows = true,
 		label = undefined,
 		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -76,11 +90,14 @@
 		focus,
 		depth,
 		edgeStyle,
+		groupTint,
 		value,
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		onexpand,
+		oncollapse
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -107,9 +124,12 @@
      inside is always defined, so the frame would render an empty control bar over
      every diagram that asked for none. -->
 {#snippet controlBar()}
-	<DepthControl levels={depth} max={maxDepth} onchange={(v) => (depth = v)} />
-	<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
-	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl levels={depth} max={maxDepth} onchange={(v) => (depth = v)} />
+		<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -118,7 +138,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

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

@@ -1,6 +1,6 @@
 import { GraphState } from '../GraphState.svelte.js';
 import type { EdgeStyle } from '../layout/types.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /**
@@ -17,6 +17,12 @@ type Props = {
     /** How many hops out. One answers "what touches this"; two, "what does this reach". */
     depth?: number;
     edgeStyle?: EdgeStyle;
+    /**
+     * Mark each card with its group's colour (#172). On by default, as in `ErDiagram`: a
+     * neighbourhood has no group boxes either, so without it a table's schema is visible at
+     * the root and invisible one click later.
+     */
+    groupTint?: boolean;
     controls?: boolean;
     maxDepth?: number;
     legend?: boolean;
@@ -26,6 +32,10 @@ type Props = {
     arrows?: boolean;
     label?: string;
     onselect?: (id: string | null) => void;
+    /** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+    onexpand?: (id: string, node: GraphNode) => void;
+    /** The reader collapsed a group back into one node. */
+    oncollapse?: (id: string, node: GraphNode) => void;
     class?: string;
 };
 declare const Neighborhood: import("svelte").Component<Props, {}, "focus" | "value" | "edgeStyle" | "depth">;

package/dist/diagrams/PolymetricTree.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/**
+	 * Lanza & Marinescu's System Complexity view (#168): the containment tree, each file a box
+	 * whose width, height and shade show three measures at once.
+	 *
+	 * `Treemap` encodes ONE measure as area; this encodes three, and the three-at-once is the
+	 * point — a narrow, tall, dark box reads differently from a wide, short, pale one. Each
+	 * channel is a prop and a picker, and the legend names them by default, because three
+	 * encodings are unreadable without a key.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.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 { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/** Share one state with another view — see `DependencyDiagram`. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** What box WIDTH encodes: a `measures` key, `weight`, or `degree`. Bindable. */
+		widthBy?: string
+		/** What box HEIGHT encodes. Bindable. */
+		heightBy?: string
+		/** What box SHADE encodes; omit for no colour channel. Bindable. */
+		colorBy?: string
+		controls?: boolean
+		/** On by default: three encodings are unreadable without a key. */
+		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 = {},
+		widthBy = $bindable('weight'),
+		heightBy = $bindable('weight'),
+		colorBy = $bindable(undefined),
+		controls = false,
+		legend = true,
+		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: 'polymetric',
+		widthBy,
+		heightBy,
+		colorBy,
+		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 — see DependencyDiagram.
+		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
+			config()
+		graph.apply(mine)
+	})
+</script>
+
+{#snippet controlBar()}
+	<DrillBar state={graph} />
+	{#if controls}
+		<MeasureControl channel="width" value={widthBy} options={graph.measureKeys} onchange={(v) => (widthBy = v ?? 'weight')} />
+		<MeasureControl channel="height" value={heightBy} options={graph.measureKeys} onchange={(v) => (heightBy = v ?? 'weight')} />
+		<MeasureControl channel="color" value={colorBy} options={graph.measureKeys} allowNone onchange={(v) => (colorBy = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} channels />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom arrows={false} />
+	{/snippet}
+</DiagramFrame>

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

@@ -0,0 +1,28 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /** Share one state with another view — see `DependencyDiagram`. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** What box WIDTH encodes: a `measures` key, `weight`, or `degree`. Bindable. */
+    widthBy?: string;
+    /** What box HEIGHT encodes. Bindable. */
+    heightBy?: string;
+    /** What box SHADE encodes; omit for no colour channel. Bindable. */
+    colorBy?: string;
+    controls?: boolean;
+    /** On by default: three encodings are unreadable without a key. */
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const PolymetricTree: import("svelte").Component<Props, {}, "value" | "widthBy" | "heightBy" | "colorBy">;
+type PolymetricTree = ReturnType<typeof PolymetricTree>;
+export default PolymetricTree;

package/dist/diagrams/StructureDiagram.svelte

@@ -15,10 +15,11 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.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 { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -44,6 +45,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
 	}
 
@@ -65,6 +74,8 @@
 		mode = 'light',
 		label = undefined,
 		onselect = undefined,
+		ondrill = undefined,
+		ondrillup = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -84,7 +95,12 @@
 		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
@@ -101,8 +117,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>
@@ -111,9 +138,12 @@
      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)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
+		<BundleControl {bundleTension} onchange={(v) => (bundleTension = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -122,7 +152,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

package/dist/diagrams/StructureDiagram.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 = {
     /** Share one state with views beside this one. See `ErDiagram` for the contract. */
@@ -24,6 +24,14 @@ 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 StructureDiagram: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels" | "bundleTension">;