@rokkit/graph 1.7.0 → 1.8.1

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

@@ -0,0 +1,12 @@
+type Props = {
+    channel: 'width' | 'height' | 'color';
+    value?: string;
+    /** The measures to offer — `GraphState.measureKeys`, what the data has. */
+    options: string[];
+    /** Offer "none" — a host with two metrics yet can leave shade off. */
+    allowNone?: boolean;
+    onchange?: (value: string | undefined) => void;
+};
+declare const MeasureControl: import("svelte").Component<Props, {}, "">;
+type MeasureControl = ReturnType<typeof MeasureControl>;
+export default MeasureControl;

package/dist/controls/ToggleControl.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	/**
+	 * An on/off control — the shape of every graph toggle (violations, hidden pairs, bundling,
+	 * edge style). It reports the state the reader asked for; each public control maps that
+	 * back to its own value and keeps its own `data-*` hook. Internal: not exported.
+	 */
+	import { choices } from '../actions/choices.js'
+
+	type Props = {
+		pressed: boolean
+		label: string
+		title: string
+		/** A glyph beside the label, decorative. */
+		glyph?: string
+		/** The control's own style hooks, e.g. `{ 'data-graph-bundle': 'bundled' }`. */
+		hooks?: Record<string, string>
+		onchange?: (pressed: boolean) => void
+	}
+
+	let { pressed, label, title, glyph = undefined, hooks = {}, onchange }: Props = $props()
+</script>
+
+<button
+	type="button"
+	{...hooks}
+	aria-pressed={pressed}
+	{title}
+	data-graph-choice={pressed ? 'off' : 'on'}
+	use:choices={{ onchoose: (next) => onchange?.(next === 'on') }}
+>
+	{#if glyph}<span data-graph-control-glyph aria-hidden="true">{glyph}</span>{/if}
+	<span data-graph-control-label>{label}</span>
+</button>

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

@@ -0,0 +1,13 @@
+type Props = {
+    pressed: boolean;
+    label: string;
+    title: string;
+    /** A glyph beside the label, decorative. */
+    glyph?: string;
+    /** The control's own style hooks, e.g. `{ 'data-graph-bundle': 'bundled' }`. */
+    hooks?: Record<string, string>;
+    onchange?: (pressed: boolean) => void;
+};
+declare const ToggleControl: import("svelte").Component<Props, {}, "">;
+type ToggleControl = ReturnType<typeof ToggleControl>;
+export default ToggleControl;

package/dist/controls/ViolationsControl.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	/**
+	 * Every edge, or only the ones that climb (#167).
+	 *
+	 * A toggle: on a real codebase the conformant edges are the vast majority and drown the
+	 * signal, so "only violations" is the view a reviewer actually reads.
+	 */
+	import ToggleControl from './ToggleControl.svelte'
+	import { say } from '../messages.js'
+
+	type Props = {
+		showEdges?: 'all' | 'violations'
+		onchange?: (value: 'all' | 'violations') => void
+	}
+
+	let { showEdges = 'all', onchange }: Props = $props()
+
+	const only = $derived(showEdges === 'violations')
+</script>
+
+<ToggleControl
+	pressed={only}
+	hooks={{ 'data-graph-violations': showEdges }}
+	label={say(only ? 'violationsOnly' : 'allEdges')}
+	title={say(only ? 'violationsOnlyTitle' : 'allEdgesTitle')}
+	onchange={(on) => onchange?.(on ? 'violations' : 'all')}
+/>

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

@@ -0,0 +1,7 @@
+type Props = {
+    showEdges?: 'all' | 'violations';
+    onchange?: (value: 'all' | 'violations') => void;
+};
+declare const ViolationsControl: import("svelte").Component<Props, {}, "">;
+type ViolationsControl = ReturnType<typeof ViolationsControl>;
+export default ViolationsControl;

package/dist/controls/ZoomControl.svelte

@@ -6,7 +6,10 @@
 	 * 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'
+	import { choices } from '../actions/choices.js'
+	import { say } from '../messages.js'
+	import { ZOOM_MAX, ZOOM_MIN, nextZoom } from './zoom.js'
+	import type { ZoomMove } from './zoom.js'
 
 	type Props = {
 		zoom?: number
@@ -16,32 +19,32 @@
 	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">
+<!-- Clamped by `nextZoom` 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. -->
+<div
+	data-graph-zoom-controls
+	role="group"
+	aria-label={say('zoom')}
+	use:choices={{ onchoose: (move) => onchange?.(nextZoom(zoom, move as ZoomMove)) }}
+>
 	<button
 		type="button"
 		data-graph-zoom="out"
-		aria-label="Zoom out"
-		disabled={zoom <= ZOOM_MIN}
-		onclick={() => step(1 / ZOOM_STEP)}>−</button
+		data-graph-choice="out"
+		aria-label={say('zoomOut')}
+		disabled={zoom <= ZOOM_MIN}>−</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="reset" data-graph-choice="reset" aria-label={say('zoomReset')}
+		>{percent}%</button
 	>
 	<button
 		type="button"
 		data-graph-zoom="in"
-		aria-label="Zoom in"
-		disabled={zoom >= ZOOM_MAX}
-		onclick={() => step(ZOOM_STEP)}>+</button
+		data-graph-choice="in"
+		aria-label={say('zoomIn')}
+		disabled={zoom >= ZOOM_MAX}>+</button
 	>
 </div>

package/dist/controls/zoom.d.ts

@@ -4,3 +4,6 @@ export declare const ZOOM_MAX = 4;
 export declare const ZOOM_STEP = 1.25;
 /** `value` brought inside the range. */
 export declare const clampZoom: (value: number) => number;
+export type ZoomMove = 'in' | 'out' | 'reset';
+/** The zoom after one move: a notch in or out, kept inside the range, or back to fit. */
+export declare function nextZoom(zoom: number, move: ZoomMove): number;

package/dist/controls/zoom.js

@@ -10,3 +10,9 @@ export const ZOOM_MAX = 4;
 export const ZOOM_STEP = 1.25;
 /** `value` brought inside the range. */
 export const clampZoom = (value) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
+/** The zoom after one move: a notch in or out, kept inside the range, or back to fit. */
+export function nextZoom(zoom, move) {
+    if (move === 'reset')
+        return 1;
+    return clampZoom(zoom * (move === 'in' ? ZOOM_STEP : 1 / ZOOM_STEP));
+}

package/dist/diagrams/ArcDiagram.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/**
+	 * Two relations over one shared, ordered axis (#169): the coupling the code declares on the
+	 * left, the coupling the history reveals on the right.
+	 *
+	 * The finding is a pair with an arc on one side and none on the other — files that change
+	 * together with nothing in the code tying them. The host flags those `hidden` (rokkit
+	 * computes no history); `HiddenControl` shows only them. The legend is on by default: which
+	 * side is which cannot be read off the arcs.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import HiddenControl from '../controls/HiddenControl.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
+		/** The relation drawn on the right. Omitted, overlays go right and the rest left. */
+		above?: string
+		/** Every pair, or only the hidden ones. Bindable — the control moves it. */
+		showEdges?: 'all' | 'hidden'
+		/**
+		 * The two sides' names in the legend, left then right. Omitted, they come from the data:
+		 * the relations drawn on each side, else Declared / Observed from the locale.
+		 */
+		sideLabels?: [string, string]
+		controls?: boolean
+		/** On by default: the two sides 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 = {},
+		above = undefined,
+		showEdges = $bindable('all'),
+		sideLabels = 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: 'arcs',
+		above,
+		showEdges,
+		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}
+		<HiddenControl {showEdges} onchange={(v) => (showEdges = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} sides={sideLabels ?? true} hidden />
+{/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/ArcDiagram.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 another view — see `DependencyDiagram`. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** The relation drawn on the right. Omitted, overlays go right and the rest left. */
+    above?: string;
+    /** Every pair, or only the hidden ones. Bindable — the control moves it. */
+    showEdges?: 'all' | 'hidden';
+    /**
+     * The two sides' names in the legend, left then right. Omitted, they come from the data:
+     * the relations drawn on each side, else Declared / Observed from the locale.
+     */
+    sideLabels?: [string, string];
+    controls?: boolean;
+    /** On by default: the two sides 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 ArcDiagram: import("svelte").Component<Props, {}, "value" | "showEdges">;
+type ArcDiagram = ReturnType<typeof ArcDiagram>;
+export default ArcDiagram;

package/dist/diagrams/CallTree.svelte

@@ -14,9 +14,10 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.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 = {
@@ -48,6 +49,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
 	}
 
@@ -70,6 +75,8 @@
 		arrows = true,
 		label = undefined,
 		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -89,7 +96,9 @@
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		onexpand,
+		oncollapse
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -116,8 +125,11 @@
      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)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl levels={levels ?? maxLevels} max={maxLevels} onchange={(v) => (levels = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -126,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/CallTree.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 = {
     /**
@@ -30,6 +30,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 CallTree: import("svelte").Component<Props, {}, "value" | "levels" | "root">;

package/dist/diagrams/DependencyDiagram.svelte

@@ -13,11 +13,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 = {
@@ -41,6 +42,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
 	}
 
@@ -60,6 +65,8 @@
 		arrows = true,
 		label = undefined,
 		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -77,7 +84,9 @@
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		onexpand,
+		oncollapse
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -104,9 +113,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()}
@@ -115,7 +127,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

package/dist/diagrams/DependencyDiagram.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 = {
     /**
@@ -23,6 +23,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 DependencyDiagram: import("svelte").Component<Props, {}, "value" | "density" | "edgeStyle">;

package/dist/diagrams/DependencyMatrix.svelte

@@ -0,0 +1,156 @@
+<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, cellState, matrixFrame, matrixLabel } from '../layout/matrix.js'
+	import { interactions } from '../actions/interactions.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 }))
+
+	const frame = $derived(matrixFrame(matrix, cell))
+	const labelW = $derived(frame.labelW)
+	const n = $derived(frame.n)
+	const selected = $derived(graph.value)
+	const name = $derived(label ?? matrixLabel(n, matrix.cells.length, matrix.above))
+</script>
+
+<div data-graph-matrix class={className} role="group" aria-label={name} use:interactions={{ state: graph }}>
+	<svg width={frame.width} height={frame.height} viewBox="0 0 {frame.width} {frame.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}
+				data-graph-press="toggle"
+				data-graph-key={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(selected, 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>