@rokkit/graph 1.7.0 → 1.8.1

package/dist/actions/canvas.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Moving around the canvas: drag the background to pan, ctrl/⌘ + wheel to zoom.
+ *
+ * Ctrl/⌘ + wheel is what a trackpad pinch reports as; without preventDefault the browser
+ * zooms the whole PAGE instead of the diagram. A plain wheel is left alone — the canvas
+ * scrolls, which is how panning works here, and the drag is the direct-manipulation path on
+ * top of it. The paper carries `data-graph-panning` while a drag lasts.
+ */
+import type { ActionReturn } from 'svelte/action';
+export type CanvasParams = {
+    zoomable?: boolean;
+    /** A pinch: which way, and where — relative to the paper — so the zoom can keep that point still. */
+    onzoom?: (direction: 'in' | 'out', at: {
+        x: number;
+        y: number;
+    }) => void;
+};
+export declare function canvasNavigation(paper: HTMLElement, initial: CanvasParams): ActionReturn<CanvasParams>;

package/dist/actions/canvas.js

@@ -0,0 +1,59 @@
+import { listen } from './listen.js';
+/**
+ * What a press can start on without being a pan: a node card, and anything interactive. A pan
+ * captures the pointer, and the browser then delivers the CLICK to the canvas instead of the
+ * box — so a treemap box could be neither opened nor selected by mouse.
+ */
+const OWNS_ITS_PRESS = '[data-graph-node], button, [role="button"], a[href], input, select, textarea';
+/** Drag-to-pan on the background: scroll the paper against the pointer while it is held. */
+function panHandlers(paper) {
+    let from = null;
+    const end = () => {
+        from = null;
+        paper.removeAttribute('data-graph-panning');
+    };
+    return {
+        pointerdown(event) {
+            if (event.target.closest(OWNS_ITS_PRESS))
+                return;
+            from = { x: event.clientX, y: event.clientY, left: paper.scrollLeft, top: paper.scrollTop };
+            paper.setAttribute('data-graph-panning', '');
+            paper.setPointerCapture(event.pointerId);
+        },
+        pointermove(event) {
+            if (!from)
+                return;
+            paper.scrollLeft = from.left - (event.clientX - from.x);
+            paper.scrollTop = from.top - (event.clientY - from.y);
+        },
+        pointerup: end,
+        pointercancel: end
+    };
+}
+/** A pinch (ctrl/⌘ + wheel) zooms; a plain wheel is left to scroll. */
+function zoomHandler(params) {
+    return (event) => {
+        if (!params().zoomable || !(event.ctrlKey || event.metaKey))
+            return;
+        event.preventDefault();
+        const box = event.currentTarget.getBoundingClientRect();
+        params().onzoom?.(event.deltaY < 0 ? 'in' : 'out', { x: event.clientX - box.left, y: event.clientY - box.top });
+    };
+}
+export function canvasNavigation(paper, initial) {
+    let params = initial;
+    const pan = panHandlers(paper);
+    const stopPan = listen(paper, pan);
+    // Not passive: preventing the page zoom is the point of the wheel listener.
+    const stopZoom = listen(paper, { wheel: zoomHandler(() => params) }, { passive: false });
+    return {
+        update(next) {
+            params = next;
+        },
+        destroy() {
+            stopPan();
+            stopZoom();
+            pan.pointercancel();
+        }
+    };
+}

package/dist/actions/choices.d.ts

@@ -0,0 +1,12 @@
+/**
+ * What a control reports: the value of the choice the reader made, and nothing else.
+ *
+ * A button names its choice in `data-graph-choice`; a `<select>` reports its value on change.
+ * The control maps the string back to its own type and calls its `onchange` — so no button
+ * carries a handler, and a disabled choice never fires.
+ */
+import type { ActionReturn } from 'svelte/action';
+export type ChoicesParams = {
+    onchoose: (value: string) => void;
+};
+export declare function choices(root: HTMLElement, initial: ChoicesParams): ActionReturn<ChoicesParams>;

package/dist/actions/choices.js

@@ -0,0 +1,23 @@
+import { listen } from './listen.js';
+export function choices(root, initial) {
+    let params = initial;
+    const stop = listen(root, {
+        click(event) {
+            const chosen = event.target.closest('[data-graph-choice]');
+            if (!chosen || !root.contains(chosen) || chosen.disabled)
+                return;
+            params.onchoose(chosen.getAttribute('data-graph-choice') ?? '');
+        },
+        change(event) {
+            const target = event.target;
+            if (target.tagName === 'SELECT')
+                params.onchoose(target.value);
+        }
+    });
+    return {
+        update(next) {
+            params = next;
+        },
+        destroy: stop
+    };
+}

package/dist/actions/interactions.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Every press on the graph, through one delegated listener.
+ *
+ * The state writes what a press MEANS onto the element — `data-graph-press` for a click (and
+ * Enter / Space), `data-graph-open` for a double-click, `data-graph-key` for what it is about —
+ * and this reads it back and calls `state.act`. No element carries a handler of its own, so a
+ * new interactive element is an attribute, and the whole mapping is testable on bare DOM.
+ *
+ * The innermost intent wins: an "Expand" control inside a card is its own press, not the card's.
+ */
+import type { ActionReturn } from 'svelte/action';
+import type { Intent } from '../state/intents.js';
+export type InteractionsParams = {
+    state: {
+        act(intent: Intent, key: string | null): void;
+    };
+    /** A click on nothing interactive, or Escape, clears the selection — the canvas does this. */
+    clearOnBackground?: boolean;
+};
+export declare function interactions(root: HTMLElement, initial: InteractionsParams): ActionReturn<InteractionsParams>;

package/dist/actions/interactions.js

@@ -0,0 +1,57 @@
+import { isIntent } from '../state/intents.js';
+import { listen } from './listen.js';
+const PRESS = '[data-graph-press]';
+const OPEN = '[data-graph-open]';
+/** The innermost element inside `root` that carries `selector`, from the event's target. */
+function carrier(root, event, selector) {
+    const found = event.target?.closest(selector) ?? null;
+    return found && root.contains(found) ? found : null;
+}
+/** Act on the intent `element` declares under `attribute`, if it is one the state knows. */
+function perform(params, element, attribute) {
+    const intent = element.getAttribute(attribute);
+    if (isIntent(intent))
+        params.state.act(intent, element.getAttribute('data-graph-key'));
+}
+const isActivation = (event) => event.key === 'Enter' || event.key === ' ';
+/** The three delegated listeners, reading the latest params on every event. */
+function handlers(root, params) {
+    return {
+        click(event) {
+            const pressed = carrier(root, event, PRESS);
+            if (pressed)
+                perform(params(), pressed, 'data-graph-press');
+            else if (params().clearOnBackground)
+                params().state.act('clear', null);
+        },
+        dblclick(event) {
+            const opened = carrier(root, event, OPEN);
+            if (opened)
+                perform(params(), opened, 'data-graph-open');
+        },
+        keydown(event) {
+            if (event.key === 'Escape') {
+                if (params().clearOnBackground)
+                    params().state.act('clear', null);
+                return;
+            }
+            const pressed = carrier(root, event, PRESS);
+            // A real <button> turns Enter and Space into a click by itself; acting here too would
+            // press it twice.
+            if (!pressed || pressed.tagName === 'BUTTON' || !isActivation(event))
+                return;
+            event.preventDefault();
+            perform(params(), pressed, 'data-graph-press');
+        }
+    };
+}
+export function interactions(root, initial) {
+    let params = initial;
+    const stop = listen(root, handlers(root, () => params));
+    return {
+        update(next) {
+            params = next;
+        },
+        destroy: stop
+    };
+}

package/dist/actions/listen.d.ts

@@ -0,0 +1,2 @@
+/** Attach every listener in `listeners` to `target`; the returned function detaches them all. */
+export declare function listen(target: EventTarget, listeners: Record<string, (event: never) => void>, options?: AddEventListenerOptions): () => void;

package/dist/actions/listen.js

@@ -0,0 +1,10 @@
+/** Attach every listener in `listeners` to `target`; the returned function detaches them all. */
+export function listen(target, listeners, options) {
+    const entries = Object.entries(listeners);
+    for (const [type, listener] of entries)
+        target.addEventListener(type, listener, options);
+    return () => {
+        for (const [type, listener] of entries)
+            target.removeEventListener(type, listener, options);
+    };
+}

package/dist/canvas/frame.d.ts

@@ -0,0 +1,41 @@
+import type { Size } from '../layout/types.js';
+export type Frame = {
+    /** The scale that fits the content in the viewport, before the reader's zoom. */
+    fit: number;
+    /** fit × zoom — what the world is drawn at. */
+    scale: number;
+    /** Where the scaled world's top-left sits inside the scrollable extent. */
+    tx: number;
+    ty: number;
+    /** The scrollable extent: the scaled drawing plus `pad` all round, never less than the viewport. */
+    extent: Size;
+};
+type FrameInput = {
+    vw: number;
+    vh: number;
+    content: Size;
+    zoom: number;
+    pad: number;
+};
+export declare function frameOf({ vw, vh, content, zoom, pad }: FrameInput): Frame;
+type Scroll = {
+    left: number;
+    top: number;
+};
+/**
+ * The scroll that keeps the content point under `anchor` (viewport coordinates) where it was,
+ * across a change of frame. A pinch anchors at the pointer; a zoom button at the viewport centre.
+ *
+ * It holds on an axis that scrolls. On an axis where the drawing still fits, the drawing stays
+ * centred instead (`offset`), and no scroll can move it — fitting wins over anchoring there.
+ */
+export declare function anchoredScroll(input: {
+    before: Frame;
+    after: Frame;
+    scroll: Scroll;
+    anchor: {
+        x: number;
+        y: number;
+    };
+}): Scroll;
+export {};

package/dist/canvas/frame.js

@@ -0,0 +1,34 @@
+/** The smallest scale fit will choose: below it a drawing is noise, however large it is. */
+const MIN_SCALE = 0.08;
+/** Centred while the drawing is smaller than the viewport; `pad` in from the edge once it is not. */
+const offset = (viewport, drawn, pad) => Math.max(pad, (viewport - drawn) / 2);
+export function frameOf({ vw, vh, content, zoom, pad }) {
+    const fit = Math.max(MIN_SCALE, Math.min((vw - pad * 2) / content.w, (vh - pad * 2) / content.h, 1)) || 0.5;
+    const scale = fit * zoom;
+    const drawn = { w: content.w * scale, h: content.h * scale };
+    return {
+        fit,
+        scale,
+        tx: offset(vw, drawn.w, pad),
+        ty: offset(vh, drawn.h, pad),
+        // The same pad on the trailing edge as the leading one, so the far side is reachable
+        // with room to spare — and exactly the viewport when the drawing fits, so nothing scrolls.
+        extent: { w: Math.max(vw, drawn.w + pad * 2), h: Math.max(vh, drawn.h + pad * 2) }
+    };
+}
+/**
+ * The scroll that keeps the content point under `anchor` (viewport coordinates) where it was,
+ * across a change of frame. A pinch anchors at the pointer; a zoom button at the viewport centre.
+ *
+ * It holds on an axis that scrolls. On an axis where the drawing still fits, the drawing stays
+ * centred instead (`offset`), and no scroll can move it — fitting wins over anchoring there.
+ */
+export function anchoredScroll(input) {
+    const { before, after, scroll, anchor } = input;
+    const x = (scroll.left + anchor.x - before.tx) / before.scale;
+    const y = (scroll.top + anchor.y - before.ty) / before.scale;
+    return {
+        left: Math.max(0, x * after.scale + after.tx - anchor.x),
+        top: Math.max(0, y * after.scale + after.ty - anchor.y)
+    };
+}

package/dist/controls/BundleControl.svelte

@@ -6,6 +6,9 @@
 	 * the view is readable at all — a few hundred straight chords across a rim are a solid disc
 	 * of ink — and straight is what you switch to when you want to see one edge exactly.
 	 */
+	import ToggleControl from './ToggleControl.svelte'
+	import { say } from '../messages.js'
+
 	type Props = {
 		bundleTension?: number
 		/** Tension used for the bundled state. Holten's 0.85 by default. */
@@ -18,13 +21,11 @@
 	const on = $derived(bundleTension > 0)
 </script>
 
-<button
-	type="button"
-	data-graph-bundle={on ? 'bundled' : 'straight'}
-	aria-pressed={on}
-	title={on ? 'Edges follow the hierarchy' : 'Edges run straight across'}
-	onclick={() => onchange?.(on ? 0 : bundled)}
->
-	<span data-graph-bundle-glyph aria-hidden="true">{on ? '❨' : '／'}</span>
-	<span data-graph-control-label>{on ? 'Bundled' : 'Straight'}</span>
-</button>
+<ToggleControl
+	pressed={on}
+	hooks={{ 'data-graph-bundle': on ? 'bundled' : 'straight' }}
+	glyph={on ? '❨' : '／'}
+	label={say(on ? 'bundled' : 'straight')}
+	title={say(on ? 'bundledTitle' : 'straightTitle')}
+	onchange={(next) => onchange?.(next ? bundled : 0)}
+/>

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

@@ -1,10 +1,3 @@
-/**
- * Straight chords or bundled ones.
- *
- * A toggle rather than a slider: the useful values are the two ends. Bundled is the reason
- * the view is readable at all — a few hundred straight chords across a rim are a solid disc
- * of ink — and straight is what you switch to when you want to see one edge exactly.
- */
 type Props = {
     bundleTension?: number;
     /** Tension used for the bundled state. Holten's 0.85 by default. */

package/dist/controls/DensityControl.svelte

@@ -6,34 +6,42 @@
 	 * control that moves while the picture does not reads as a broken view. The diagram that
 	 * wants it places it; the rest never render it.
 	 */
+	import { choices } from '../actions/choices.js'
+	import { say } from '../messages.js'
+	import type { GraphMessageKey } from '../messages.js'
 	import type { Density } from '../layout/types.js'
 
 	type Props = {
 		density?: Density
-		/** Fires with the chosen value. The caller owns the value — this control stores none. */
 		onchange?: (value: Density) => void
 	}
 
 	let { density = 'keys', onchange }: Props = $props()
 
-	const options: [Density, string, string][] = [
-		['names', 'Names', 'Titles only'],
-		['keys', 'Keys', 'Key rows only'],
-		['full', 'All', 'All rows']
+	/** Each level, and the words for it. */
+	const LEVELS: [Density, GraphMessageKey, GraphMessageKey][] = [
+		['names', 'densityNames', 'densityNamesTitle'],
+		['keys', 'densityKeys', 'densityKeysTitle'],
+		['full', 'densityFull', 'densityFullTitle']
 	]
 </script>
 
 <!-- Named, because three unlabelled buttons announce as "Names Keys All" and say nothing
      about what they control. -->
-<div data-graph-density-controls role="group" aria-label="Detail level">
-	{#each options as [value, short, title] (value)}
+<div
+	data-graph-density-controls
+	role="group"
+	aria-label={say('detailLevel')}
+	use:choices={{ onchoose: (value) => onchange?.(value as Density) }}
+>
+	{#each LEVELS as [value, short, title] (value)}
 		<button
 			type="button"
 			data-graph-density={value}
+			data-graph-choice={value}
 			data-selected={density === value ? '' : undefined}
 			aria-pressed={density === value}
-			{title}
-			onclick={() => onchange?.(value)}>{short}</button
+			title={say(title)}>{say(short)}</button
 		>
 	{/each}
 </div>

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

@@ -1,14 +1,6 @@
-/**
-     * How much of each node's row list a card shows.
-     *
-     * A component rather than canvas chrome: only some diagrams have rows to thin, and a
-     * control that moves while the picture does not reads as a broken view. The diagram that
-     * wants it places it; the rest never render it.
-     */
 import type { Density } from '../layout/types.js';
 type Props = {
     density?: Density;
-    /** Fires with the chosen value. The caller owns the value — this control stores none. */
     onchange?: (value: Density) => void;
 };
 declare const DensityControl: import("svelte").Component<Props, {}, "">;

package/dist/controls/DepthControl.svelte

@@ -7,9 +7,11 @@
 	 * 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.
 	 */
+	import { choices } from '../actions/choices.js'
+	import { counted, say } from '../messages.js'
+
 	type Props = {
 		levels?: number
-		/** Deepest level offered. Beyond the tree's own depth the extra buttons do nothing. */
 		max?: number
 		onchange?: (value: number) => void
 	}
@@ -20,15 +22,20 @@
 	const steps = $derived(Array.from({ length: Math.max(1, max) }, (_, i) => i + 1))
 </script>
 
-<div data-graph-depth-controls role="group" aria-label="Levels shown">
+<div
+	data-graph-depth-controls
+	role="group"
+	aria-label={say('levelsShown')}
+	use:choices={{ onchoose: (value) => onchange?.(Number(value)) }}
+>
 	{#each steps as level (level)}
 		<button
 			type="button"
 			data-graph-depth={level}
+			data-graph-choice={level}
 			data-selected={levels === level ? '' : undefined}
 			aria-pressed={levels === level}
-			title="{level} level{level === 1 ? '' : 's'}"
-			onclick={() => onchange?.(level)}>{level}</button
+			title={counted(level, 'levelOne', 'levelMany')}>{level}</button
 		>
 	{/each}
 </div>

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

@@ -1,14 +1,5 @@
-/**
- * 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;
 };

package/dist/controls/DrillBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	/**
+	 * Where the reader has drilled to, and the way back (#165).
+	 *
+	 * Breadcrumbs from the root to the current level (each an ancestor to climb to), a status
+	 * while the host loads a level, the error when a load fails, "Open" for the selected box
+	 * when it can be drilled — the keyboard route into a leaf, since Enter on a leaf selects it —
+	 * and Expand / Collapse for the selected group or group member (#166).
+	 * Renders nothing when there is nothing to show. Each control declares its intent; the
+	 * `interactions` action performs it, so this reads the state and computes nothing.
+	 */
+	import { interactions } from '../actions/interactions.js'
+	import { say } from '../messages.js'
+	import type { GraphState } from '../GraphState.svelte.js'
+
+	type Props = {
+		state: GraphState
+		/** What the root crumb says. Defaults to the locale's (`All`). */
+		rootLabel?: string
+	}
+
+	let { state: graph, rootLabel = undefined }: Props = $props()
+</script>
+
+{#if graph.showsDrillBar}
+	<nav data-graph-drill aria-label={say('drillPath')} use:interactions={{ state: graph }}>
+		<ol data-graph-drill-trail>
+			{#each graph.breadcrumbs as crumb, i (crumb.path.join('/'))}
+				<li>
+					{#if crumb.current}
+						<span data-graph-drill-crumb aria-current="location"
+							>{crumb.label ?? rootLabel ?? say('drillRoot')}</span
+						>
+					{:else}
+						<button type="button" data-graph-drill-crumb data-graph-press="crumb" data-graph-key={String(i)}
+							>{crumb.label ?? rootLabel ?? say('drillRoot')}</button
+						>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+		{#if graph.groupAction}
+			<!-- The keyboard route through a group: Enter selects a node, then this opens or folds it. -->
+			<button
+				type="button"
+				data-graph-group-action={graph.groupAction.kind}
+				data-graph-press="group-selected"
+				>{say(graph.groupAction.kind, { name: graph.groupAction.label })}</button
+			>
+		{/if}
+		{#if graph.drillTarget}
+			<button type="button" data-graph-drill-open data-graph-press="open-selected"
+				>{say('open', { name: graph.drillTarget.name })}</button
+			>
+		{/if}
+		{#if graph.pending}
+			<span data-graph-drill-status role="status">{say('drillLoading')}</span>
+		{/if}
+		{#if graph.drillErrorText}
+			<span data-graph-drill-error role="alert">{graph.drillErrorText}</span>
+		{/if}
+	</nav>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { GraphState } from '../GraphState.svelte.js';
+type Props = {
+    state: GraphState;
+    /** What the root crumb says. Defaults to the locale's (`All`). */
+    rootLabel?: string;
+};
+declare const DrillBar: import("svelte").Component<Props, {}, "">;
+type DrillBar = ReturnType<typeof DrillBar>;
+export default DrillBar;

package/dist/controls/EdgeStyleControl.svelte

@@ -5,6 +5,8 @@
 	 * 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 ToggleControl from './ToggleControl.svelte'
+	import { say } from '../messages.js'
 	import type { EdgeStyle } from '../layout/types.js'
 
 	type Props = {
@@ -19,13 +21,11 @@
 	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>
+<ToggleControl
+	pressed={orthogonal}
+	hooks={{ 'data-graph-edge-style': edgeStyle }}
+	glyph={orthogonal ? '⌐' : '︵'}
+	label={say(orthogonal ? 'angled' : 'curved')}
+	title={say(orthogonal ? 'angledTitle' : 'curvedTitle')}
+	onchange={(next) => onchange?.(next ? 'orthogonal' : 'curved')}
+/>

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

@@ -1,9 +1,3 @@
-/**
-     * 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;

package/dist/controls/HiddenControl.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	/**
+	 * Every pair, or only the hidden coupling (#169).
+	 *
+	 * A toggle: on a real repo the ordinary pairs vastly outnumber the ones nothing in the code
+	 * explains, and those are the only rows anyone acts on.
+	 */
+	import ToggleControl from './ToggleControl.svelte'
+	import { say } from '../messages.js'
+
+	type Props = {
+		showEdges?: 'all' | 'hidden'
+		onchange?: (value: 'all' | 'hidden') => void
+	}
+
+	let { showEdges = 'all', onchange }: Props = $props()
+
+	const only = $derived(showEdges === 'hidden')
+</script>
+
+<ToggleControl
+	pressed={only}
+	hooks={{ 'data-graph-hidden-only': showEdges }}
+	label={say(only ? 'hiddenOnly' : 'allPairs')}
+	title={say(only ? 'hiddenOnlyTitle' : 'allPairsTitle')}
+	onchange={(on) => onchange?.(on ? 'hidden' : 'all')}
+/>

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

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

package/dist/controls/MeasureControl.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	/**
+	 * Which measure a channel encodes (#168) — one picker per channel of a polymetric view.
+	 *
+	 * The measures offered are the ones the data has (`GraphState.measureKeys`): a picker that
+	 * lists a metric no node carries offers a box of minimum size everywhere.
+	 */
+	import { choices } from '../actions/choices.js'
+	import { say } from '../messages.js'
+
+	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
+	}
+
+	let { channel, value = undefined, options, allowNone = false, onchange }: Props = $props()
+
+	const LABEL = { width: 'width', height: 'height', color: 'shade' } as const
+</script>
+
+<label
+	data-graph-measure-control
+	use:choices={{ onchoose: (picked) => onchange?.(picked === '' ? undefined : picked) }}
+>
+	<span data-graph-control-label>{say(LABEL[channel])}</span>
+	<select data-graph-measure={channel} value={value ?? ''}>
+		{#if allowNone}
+			<option value="">{say('measureNone')}</option>
+		{/if}
+		{#each options as option (option)}
+			<option value={option}>{option}</option>
+		{/each}
+	</select>
+</label>