@tellegen/svelte 0.4.1 → 0.4.3

package/README.md

@@ -3,9 +3,13 @@
 Svelte components for tellegen maps, case panels, local case files, and browser solves.
 
 ```sh
-npm install @tellegen/svelte
+npm install @tellegen/svelte maplibre-gl @deck.gl/core @deck.gl/layers @deck.gl/maplibre
 ```
 
+`maplibre-gl` and the three `@deck.gl` packages are peer dependencies: the map
+shares their instances with the host through `extraLayers` and `onMapReady`, so
+the app installs them and resolves one copy of each.
+
 Import the component and stylesheet in your app:
 
 ```svelte
@@ -41,6 +45,10 @@ remain in the browser on this path.
 - `orgLabel`
 - `showFooter`, default `true`
 - `theme`, `light` (default) or `dark`
+- `cartoApiKey`, the basemap key (see [Basemap](#basemap))
+
+`theme` and `cartoApiKey` follow their props. The others are read once, when
+the viewer mounts; remount it to change them.
 
 Use `TellegenProvider` and `TellegenShell` when state should survive route changes:
 
@@ -55,6 +63,11 @@ Use `TellegenProvider` and `TellegenShell` when state should survive route chang
 </TellegenProvider>
 ```
 
+The provider owns the controller and its cases. Unmounting it disposes the
+controller, which frees every case's browser Study and multiconductor session
+in the engine worker, so a provider that should keep its cases across pages
+belongs in a layout that stays mounted.
+
 ## Panel layout
 
 The shell docks Network and Studies on the left, and Solver and Agent on the
@@ -123,6 +136,19 @@ inside `TellegenProvider`:
 <PanelFrame id="region" title="Region" side="left">...</PanelFrame>
 ```
 
+The components show data, labels and controls, not host copy. A host that
+wants a note under a local case's stats passes `ControlPanel` a `caseNote`
+snippet, which receives the case; `DropZone` renders its children under the
+drop prompt:
+
+```svelte
+<ControlPanel>
+  {#snippet caseNote(lc)}
+    <p>{lc.label} is a synthetic grid.</p>
+  {/snippet}
+</ControlPanel>
+```
+
 `ShellEnvironment` is renderless and keeps the compact-layout, pointer and
 viewport state in step, as the default shell does. `PanelHost` reads
 `--tellegen-dock-left`, `--tellegen-dock-right` and `--tellegen-dock-bottom`
@@ -193,7 +219,8 @@ besides its click callbacks:
 - `attribution`: `'compact'` (default) or `'full'`. There is no off switch.
 - `onMapReady(map, overlay)`: called with the MapLibre map and the deck
   overlay once they exist. It may return a cleanup, and it fires again after
-  a context-loss or basemap rebuild.
+  a context-loss or basemap rebuild. If it throws, the map and its window
+  and document listeners are still released when the map is torn down.
 - `onBasemapFallback(reason)`: the switch to the fallback happened.
   `reason.from` and `reason.to` name the two providers.
 - `onBasemapError(reason)`: no basemap can be shown. The network layers
@@ -201,7 +228,8 @@ besides its click callbacks:
   `reason.to` is `null`.
 
 `TellegenProvider` and `TellegenViewer` also take `cartoApiKey`, and pass it,
-together with `theme`, to the default shell's map. A SvelteKit 3 host can
+together with `theme`, to the default shell's map. Both follow their props:
+changing either rebuilds that map in place. A SvelteKit 3 host can
 declare the key as an optional public build-time variable:
 
 ```ts
@@ -251,13 +279,13 @@ tiles, fonts and sprites are all fetched. The engine underneath also needs
 `script-src 'wasm-unsafe-eval'` (never `'unsafe-eval'`) and `worker-src
 'self'`, since its workers are same-origin.
 
-A host that passes its own deck.gl layers in `extraLayers`, or works with the
-MapLibre map from `onMapReady`, must resolve one copy each of
-`@deck.gl/core`, `@deck.gl/layers`, `@deck.gl/maplibre` and `maplibre-gl`.
-When two deck.gl versions load, deck.gl throws "multiple versions detected".
-If the host's ranges differ from this package's (`^9.4.0` for deck.gl,
-`^6.15.0` for maplibre-gl), point both at one version with npm `overrides`
-(or `resolutions` in pnpm and Yarn).
+`@deck.gl/core`, `@deck.gl/layers`, `@deck.gl/maplibre` and `maplibre-gl`
+are peer dependencies (`^9.4.0` for deck.gl, `^6.15.0` for maplibre-gl), so
+the host's copies are the ones the map uses, including the deck.gl layers it
+passes in `extraLayers` and the MapLibre map it gets from `onMapReady`. When
+two deck.gl versions load, deck.gl throws "multiple versions detected"; if
+another dependency pulls in a second copy, point both at one version with npm
+`overrides` (or `resolutions` in pnpm and Yarn).
 
 The map needs no Vite settings, in a build or in the dev server. MapLibre's
 worker comes from a `?worker&url` import, which a production build bundles

package/dist/Sparkline.svelte

@@ -35,7 +35,7 @@
 		viewBox="0 0 {W} {H}"
 		preserveAspectRatio="none"
 		role="img"
-		aria-label="residual by solver iteration"
+		aria-label="Residual by solver iteration"
 	>
 		<line class="axis" x1={L} y1={T} x2={L} y2={H - B} />
 		<line class="axis" x1={L} y1={H - B} x2={W - R} y2={H - B} />
@@ -46,9 +46,9 @@
 			text-anchor="middle"
 			transform="rotate(-90)"
 		>
-			residual
+			Residual
 		</text>
-		<text class="axis-label x-label" x={W - R} y={H - 4} text-anchor="end">iterations</text>
+		<text class="axis-label x-label" x={W - R} y={H - 4} text-anchor="end">Iterations</text>
 		<polyline {points} pathLength="1" />
 	</svg>
 {/if}
@@ -69,7 +69,7 @@
 
 	.axis-label {
 		fill: var(--text-tertiary);
-		font-family: var(--font-mono);
+		font-family: var(--font-display);
 		font-size: 12px;
 		letter-spacing: 0;
 	}

package/dist/TellegenMap.svelte

@@ -33,7 +33,7 @@
 	} from './basemap.js';
 	import { caseDeltas, caseRatings, displayMetaFor, displaySeriesFor } from './display.js';
 	import {
-		CaseState,
+		type CaseState,
 		type CameraSnapshot,
 		type DisplayMode,
 		type LocalCase
@@ -710,13 +710,13 @@
 			if (info.layer.id === 'study-branches') {
 				const flow = view?.flows?.find((f) => f.branch === id);
 				return {
-					html: `<b>branch ${id}</b><br>saved state: ${esc(app.studyView.label)}${flow ? `<br>P from ${flow.pf.toFixed(3)} MW, loading ${(100 * flow.loading).toFixed(1)}%` : ''}`
+					html: `<b>Branch ${id}</b><br>Saved state: ${esc(app.studyView.label)}${flow ? `<br>P from ${flow.pf.toFixed(3)} MW<br>Loading ${(100 * flow.loading).toFixed(1)}%` : ''}`
 				};
 			}
 			const p = view?.lmp?.find((v) => v.bus === id),
 				v = view?.vm?.find((v) => v.bus === id);
 			return {
-				html: `<b>bus ${id}</b><br>saved state: ${esc(app.studyView.label)}${p ? `<br>LMP ${p.value.toFixed(4)}` : ''}${v ? `<br>voltage ${v.value.toFixed(5)} pu` : ''}`
+				html: `<b>Bus ${id}</b><br>Saved state: ${esc(app.studyView.label)}${p ? `<br>LMP ${p.value.toFixed(4)}` : ''}${v ? `<br>Voltage ${v.value.toFixed(5)} pu` : ''}`
 			};
 		}
 		if (info.layer?.id.startsWith('local-subs-')) {
@@ -726,25 +726,22 @@
 			const s = object as { number: number; name: string };
 			const named = s.name ? ` ${esc(s.name)}` : '';
 			return {
-				html: `<div class="tt"><b>substation ${Number(s.number)}</b>${named}<br><span style="opacity:0.6">.pwd diagram, approximate position</span></div>`
+				html: `<div class="tt"><b>Substation ${Number(s.number)}</b>${named}<br>Approximate position</div>`
 			};
 		}
 		const layerId = info.layer?.id;
 		if (layerId?.startsWith('multi-edges-')) {
 			const e = object as PlacedMultiEdge;
-			const state = e.kind === 'switch' ? (e.closed ? ' &#8901; closed' : ' &#8901; open') : '';
+			const state = e.kind === 'switch' ? (e.closed ? '<br>Closed' : '<br>Open') : '';
 			return {
-				html: `<div class="tt"><b>${esc(e.kind)} ${esc(e.from)}&#8201;&ndash;&#8201;${esc(e.to)}</b> ${e.n_phases}&#8202;&phi;${state}</div>`
+				html: `<div class="tt"><b>${esc(e.kind)} ${esc(e.from)}&#8201;&ndash;&#8201;${esc(e.to)}</b><br>${e.n_phases}&#8202;&phi;${state}</div>`
 			};
 		}
 		if (layerId?.startsWith('multi-buses-')) {
 			const b = object as PlacedMultiBus;
-			const roles = b.attachmentKinds.length ? b.attachmentKinds.join(', ') : 'none';
+			const roles = b.attachmentKinds.length ? b.attachmentKinds.join(', ') : 'None';
 			return {
-				html: `<div class="tt"><b>bus ${esc(b.id)}</b>
-					${b.terminals.length} terminals${b.grounded.length ? ` &#8901; ${b.grounded.length} grounded` : ''}<br>
-					load ${b.load_kw.toFixed(0)} kW &#8901; gen ${b.gen_kw.toFixed(0)} kW<br>
-					<span style="opacity:0.6">${esc(roles)}</span></div>`
+				html: `<div class="tt"><b>Bus ${esc(b.id)}</b><br>${b.terminals.length} terminals${b.grounded.length ? `, ${b.grounded.length} grounded` : ''}<br>Load ${b.load_kw.toFixed(0)} kW<br>Generation ${b.gen_kw.toFixed(0)} kW<br>Attachments: ${esc(roles)}</div>`
 			};
 		}
 		const c = caseOf(info);
@@ -753,17 +750,15 @@
 			const b = object as NetworkBranch;
 			const flow = d
 				? `${((d.loading.get(b.id) ?? 0) * 100).toFixed(0)}% of ${b.rate_mw.toFixed(0)} MW`
-				: `rate ${b.rate_mw.toFixed(0)} MW`;
+				: `Rating ${b.rate_mw.toFixed(0)} MW`;
 			return {
-				html: `<div class="tt"><b>line ${b.from}&#8201;&ndash;&#8201;${b.to}</b> ${flow}</div>`
+				html: `<div class="tt"><b>Line ${b.from}&#8201;&ndash;&#8201;${b.to}</b><br>${flow}</div>`
 			};
 		}
 		const bus = object as NetworkBus;
 		if (!c) {
 			return {
-				html: `<div class="tt"><b>bus ${bus.id}</b>
-					load ${bus.demand_mw.toFixed(0)} MW &#8901; gen ${bus.gen_mw.toFixed(0)} MW<br>
-					<span style="opacity:0.6">local file</span></div>`
+				html: `<div class="tt"><b>Bus ${bus.id}</b><br>Load ${bus.demand_mw.toFixed(0)} MW<br>Generation ${bus.gen_mw.toFixed(0)} MW</div>`
 			};
 		}
 		const price = d?.prices.get(bus.id);
@@ -773,8 +768,8 @@
 		const delta = caseDeltas(c)[bus.id] ?? 0;
 		const loadRow =
 			delta === 0
-				? `load ${bus.demand_mw.toFixed(0)} MW`
-				: `load ${(bus.demand_mw + delta).toFixed(0)} MW (${delta > 0 ? '+' : ''}${delta.toFixed(0)})`;
+				? `Load ${bus.demand_mw.toFixed(0)} MW`
+				: `Load ${(bus.demand_mw + delta).toFixed(0)} MW (${delta > 0 ? '+' : ''}${delta.toFixed(0)})`;
 		const sensRow =
 			sens === undefined
 				? ''
@@ -783,8 +778,6 @@
 			preview === undefined
 				? ''
 				: `<br>&Delta; LMP ${preview >= 0 ? '+' : ''}${preview.toExponential(2)} objective units/MW`;
-		const localRow =
-			c instanceof CaseState ? '' : '<br><span style="opacity:0.6">local file</span>';
 		// Demand already has its own row below, so the demand colouring shows LMP here alone.
 		const scalarRow =
 			!d || d.scalarMode === 'price' || d.scalarMode === 'demand'
@@ -793,9 +786,7 @@
 						scalar === undefined ? '&mdash;' : displayFmt(d.scalarMode, scalar)
 					} ${d.scalarUnit}<br>LMP ${price === undefined ? '&mdash;' : fmt.format(price)} objective units/MW`;
 		return {
-			html: `<div class="tt"><b>bus ${bus.id}</b>
-				${scalarRow}<br>
-				${loadRow} &#8901; gen ${bus.gen_mw.toFixed(0)} MW${sensRow}${previewRow}${localRow}</div>`
+			html: `<div class="tt"><b>Bus ${bus.id}</b><br>${scalarRow}<br>${loadRow}<br>Generation ${bus.gen_mw.toFixed(0)} MW${sensRow}${previewRow}</div>`
 		};
 	}
 
@@ -992,25 +983,9 @@
 
 				map = m;
 				overlay = o;
-				const detachReady = onMapReady?.(m, o);
-				// Frame the active grid once the map is ready. The initial frame request
-				// (from the case load) can fire before the async map import finishes and
-				// be lost; re-issuing it here ensures the first view is the active case,
-				// not the default world view. A rebuilt map opens at the default view
-				// too, so it restores the camera the last map saved.
-				if (restoreCamera && app.camera) m.jumpTo(app.camera);
-				else if (app.cameraSeq === handledCameraSeq)
-					app.requestFrame(app.activeCaseId ?? app.activeLocalId ?? 'all');
-				if (mapGen > 0) {
-					// This is a rebuilt map. Once it has held a live context without
-					// another loss, zero the budget so the cap only ever catches a tight
-					// loss loop, not recoveries spread across a long session.
-					stabilizeTimer = setTimeout(() => {
-						glRebuilds = 0;
-						stabilizeTimer = null;
-					}, 10000);
-				}
-
+				// Assign the teardown before host code runs: if onMapReady throws,
+				// the map and its window and document listeners are still released.
+				let detachReady: void | (() => void);
 				cleanup = () => {
 					clearRebuild();
 					clearStabilize();
@@ -1028,6 +1003,24 @@
 					map = null;
 					overlay = null;
 				};
+				detachReady = onMapReady?.(m, o);
+				// Frame the active grid once the map is ready. The initial frame request
+				// (from the case load) can fire before the async map import finishes and
+				// be lost; re-issuing it here ensures the first view is the active case,
+				// not the default world view. A rebuilt map opens at the default view
+				// too, so it restores the camera the last map saved.
+				if (restoreCamera && app.camera) m.jumpTo(app.camera);
+				else if (app.cameraSeq === handledCameraSeq)
+					app.requestFrame(app.activeCaseId ?? app.activeLocalId ?? 'all');
+				if (mapGen > 0) {
+					// This is a rebuilt map. Once it has held a live context without
+					// another loss, zero the budget so the cap only ever catches a tight
+					// loss loop, not recoveries spread across a long session.
+					stabilizeTimer = setTimeout(() => {
+						glRebuilds = 0;
+						stabilizeTimer = null;
+					}, 10000);
+				}
 			})
 			.catch((e) => {
 				if (!cancelled) app.error = `map failed to load: ${e instanceof Error ? e.message : e}`;
@@ -1542,14 +1535,14 @@
 {#if app.placingId && map}
 	<button
 		type="button"
-		class="place-at-center mono"
+		class="place-at-center"
 		onclick={() => {
 			if (!map) return;
 			const center = map.getCenter();
 			onplacecase(center.lng, center.lat);
 		}}
 	>
-		place at map center
+		Place at map center
 	</button>
 {/if}
 
@@ -1739,6 +1732,7 @@
 		border: 1px solid var(--accent);
 		border-radius: 3px;
 		color: var(--text-accent);
+		font-family: inherit;
 		font-size: 11px;
 		cursor: pointer;
 		box-shadow: var(--elev-cue);
@@ -1816,8 +1810,9 @@
 		background: var(--panel) !important;
 		border: 1px solid var(--line);
 		color: var(--ink) !important;
-		font-family: var(--font-mono);
-		font-size: 11px;
+		font-family: var(--font-display);
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
 		line-height: 1.5;
 		padding: 8px 10px !important;
 		border-radius: 2px;

package/dist/TellegenProvider.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { untrack, type Snippet } from 'svelte';
+	import { onDestroy, untrack, type Snippet } from 'svelte';
 	import {
+		resolveCartoApiKey,
 		resolveTellegenUiConfig,
+		resolveTheme,
 		setAppState,
 		setController,
 		setUiConfig,
+		type TellegenUiConfig,
 		type TellegenUiOptions
 	} from './context.svelte.js';
 	import { createController } from './controller.svelte.js';
@@ -28,18 +31,28 @@
 		children
 	}: Props = $props();
 
-	const config = untrack(() =>
-		resolveTellegenUiConfig({
-			apiBase,
-			loadDefaultCases,
-			docsHref,
-			orgHref,
-			orgLabel,
-			showFooter,
-			theme,
-			cartoApiKey
-		})
-	);
+	// Read once, at mount: `apiBase` and `loadDefaultCases` configure the
+	// controller this provider owns, and the links and footer are fixed copy.
+	// `theme` and `cartoApiKey` stay live, so a host can switch them and the
+	// root attribute and the default shell's map follow.
+	const config: TellegenUiConfig = {
+		...untrack(() =>
+			resolveTellegenUiConfig({
+				apiBase,
+				loadDefaultCases,
+				docsHref,
+				orgHref,
+				orgLabel,
+				showFooter
+			})
+		),
+		get theme() {
+			return resolveTheme(theme);
+		},
+		get cartoApiKey() {
+			return resolveCartoApiKey(cartoApiKey);
+		}
+	};
 	const app = createAppState();
 	const ctrl = createController(app, {
 		apiBase: config.apiBase,
@@ -54,6 +67,9 @@
 	setUiConfig(config);
 	setAppState(app);
 	setController(ctrl);
+	// The controller's Studies and multiconductor sessions live in the engine
+	// worker; release them with the provider.
+	onDestroy(() => ctrl.dispose());
 
 	// The dark tokens in styles.css hang off `:root[data-theme='dark']`. Set it
 	// only for dark, and only while mounted, so a light host is untouched. A

package/dist/components/AppFooter.svelte

@@ -7,14 +7,14 @@
 	let { inline = false }: { inline?: boolean } = $props();
 </script>
 
-<footer class="mono" class:inline>
-	<a href="/credits/">credits</a>
+<footer class:inline>
+	<a href="/credits/">Credits</a>
 	<i class="sep"></i>
-	<a href="/privacy/">privacy</a>
+	<a href="/privacy/">Privacy</a>
 	{#if ctrl.showFileDropUi}
 		<i class="sep filedrop-ui"></i>
 		<span class="drophint filedrop-ui"
-			><span class="arrow">&#8675;</span> drop a case or geographic file anywhere</span
+			><span class="arrow">&#8675;</span> Drop a case or geographic file anywhere</span
 		>
 	{/if}
 </footer>

package/dist/components/AppHeader.svelte

@@ -33,7 +33,7 @@
 		</svg>
 		<h1>tellegen</h1>
 	</div>
-	<nav class="cases" aria-label="networks">
+	<nav class="cases" aria-label="Networks">
 		{#each app.cases as c (c.id)}
 			{@const [cname, cregion] = splitName(c.name)}
 			<div class="case-chip" class:active={app.activeCaseId === c.id}>
@@ -44,14 +44,14 @@
 					onclick={() => ctrl.activateCase(c.id)}
 				>
 					<span class="cname"
-						>{cname}{#if c.perturbed}<i class="mark" title="demand perturbed"></i>{/if}</span
+						>{cname}{#if c.perturbed}<i class="mark" title="Demand changed"></i>{/if}</span
 					>
 					<span class="cregion mono">{c.unavailableReason ? 'Unavailable' : cregion}</span>
 				</button>
 				<button
 					class="case-remove mono"
-					aria-label="remove {c.name} from this browser"
-					title="remove {c.name} from this browser"
+					aria-label="Remove {c.name}"
+					title="Remove {c.name}"
 					onclick={(e) => ctrl.removeBackendCase(c, e)}>&#10005;</button
 				>
 			</div>
@@ -60,12 +60,12 @@
 			<div class="case-chip local" class:active={app.activeLocalId === c.id}>
 				<button class="case-activate" onclick={() => ctrl.activateLocal(c)}>
 					<span class="cname">{c.label}</span>
-					<span class="cregion mono">local</span>
+					<span class="cregion mono">Local</span>
 				</button>
 				<button
 					class="case-remove mono"
-					aria-label="remove {c.label}"
-					title="remove {c.label}"
+					aria-label="Remove {c.label}"
+					title="Remove {c.label}"
 					onclick={(e) => ctrl.removeLocalCase(c, e)}>&#10005;</button
 				>
 			</div>
@@ -74,33 +74,29 @@
 			<div class="case-chip local" class:active={app.activeMultiId === c.id}>
 				<button class="case-activate" onclick={() => ctrl.activateMulti(c)}>
 					<span class="cname">{c.label}</span>
-					<span class="cregion mono">multiconductor</span>
+					<span class="cregion mono">Multiconductor</span>
 				</button>
 				<button
 					class="case-remove mono"
-					aria-label="remove {c.label}"
-					title="remove {c.label}"
+					aria-label="Remove {c.label}"
+					title="Remove {c.label}"
 					onclick={(e) => ctrl.removeMultiCase(c, e)}>&#10005;</button
 				>
 			</div>
 		{/each}
-		<button
-			class="ghost filedrop-ui"
-			title="parsed in your browser; the file never uploads"
-			onclick={() => fileInput?.click()}
-		>
+		<button class="ghost filedrop-ui" onclick={() => fileInput?.click()}>
 			<span class="cname"
 				><span class="arrow">&#8675;</span>{ctrl.showFileDropUi
-					? 'drop a case file'
-					: 'open a case file'}</span
+					? 'Drop a case file'
+					: 'Open a case file'}</span
 			>
-			<span class="cregion mono">case + geo files</span>
+			<span class="cregion mono">Case or geo files</span>
 		</button>
 	</nav>
 	<span class="kicker mono">
 		<a href={config.orgHref} target="_blank" rel="noreferrer">{config.orgLabel}</a>
 		<i class="sep"></i>
-		<a href={config.docsHref} target="_blank" rel="noreferrer">docs</a>
+		<a href={config.docsHref} target="_blank" rel="noreferrer">Docs</a>
 	</span>
 	<input
 		type="file"

package/dist/components/BindingLines.svelte

@@ -30,22 +30,17 @@
 
 {#if bindingLines.length > 0}
 	<div class="binding-lines">
-		<p
-			class="mono dim head"
-			title="lines loaded to their thermal rating; select one to see LMP sensitivity to the rating"
-		>
-			binding lines
-		</p>
-		<ul class="mono">
+		<p class="dim head" title="Lines loaded to their thermal rating">Binding lines</p>
+		<ul>
 			{#each bindingLines as { branch, loading } (branch.id)}
 				<li>
 					<button
-						class="mono"
 						class:selected={app.selectedBranch === branch.id}
 						aria-pressed={app.selectedBranch === branch.id}
 						onclick={() => select(branch.id)}
 					>
-						line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {Math.round(loading * 100)}%
+						Line <span class="mono">{branch.from}&#8201;&ndash;&#8201;{branch.to}</span>
+						<span class="mono load">{Math.round(loading * 100)}%</span>
 					</button>
 				</li>
 			{/each}
@@ -72,6 +67,8 @@
 	}
 
 	li button {
+		display: flex;
+		gap: 4px;
 		width: 100%;
 		padding: 3px 6px 3px 8px;
 		text-align: left;
@@ -84,6 +81,10 @@
 		cursor: pointer;
 	}
 
+	.load {
+		margin-left: auto;
+	}
+
 	li button:hover {
 		background: var(--accent-soft);
 	}

package/dist/components/BusPicker.svelte

@@ -89,14 +89,14 @@
 			if (!e.currentTarget.contains(e.relatedTarget as Node | null)) open = false;
 		}}
 	>
-		<label class="mono dim" for="bus-lookup-input">bus lookup</label>
+		<label class="dim" for="bus-lookup-input">Bus lookup</label>
 		<input
 			id="bus-lookup-input"
 			class="mono"
 			type="text"
 			inputmode="numeric"
 			autocomplete="off"
-			placeholder="bus id"
+			placeholder="Bus ID"
 			role="combobox"
 			aria-keyshortcuts="/"
 			aria-expanded={open}
@@ -114,7 +114,7 @@
 			onkeydown={onKeydown}
 		/>
 		{#if open && results.length > 0}
-			<ul class="mono" id="bus-lookup-listbox" role="listbox" aria-label="matching buses">
+			<ul id="bus-lookup-listbox" role="listbox" aria-label="Matching buses">
 				{#each results as bus, i (bus.id)}
 					<li
 						id="bus-lookup-opt-{bus.id}"
@@ -126,12 +126,12 @@
 							commit(bus.id);
 						}}
 					>
-						bus {bus.id}
+						Bus <span class="mono">{bus.id}</span>
 					</li>
 				{/each}
 			</ul>
 		{:else if open && query.trim() !== ''}
-			<p class="mono dim empty">no bus matches "{query.trim()}"</p>
+			<p class="dim empty">No matching bus</p>
 		{/if}
 	</div>
 {/if}
@@ -156,7 +156,6 @@
 	label {
 		display: block;
 		font-size: 12px;
-		text-transform: uppercase;
 		margin-bottom: 3px;
 	}
 

package/dist/components/ControlPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { tick, untrack } from 'svelte';
+	import { tick, untrack, type Snippet } from 'svelte';
 	import { getAppState, getController, getUiConfig } from '../context.svelte.js';
+	import type { LocalCase } from '../state.svelte.js';
 	import PanelFrame from './PanelFrame.svelte';
 	import SavedNetworkDetails from './SavedNetworkDetails.svelte';
 	import ModelDetails from './ModelDetails.svelte';
@@ -20,6 +21,9 @@
 	import SizeLegend from './SizeLegend.svelte';
 	import TopMovers from './TopMovers.svelte';
 
+	/** Optional host content rendered under a local case's stats. */
+	let { caseNote }: { caseNote?: Snippet<[LocalCase]> } = $props();
+
 	const app = getAppState();
 	const ctrl = getController();
 	const config = getUiConfig();
@@ -90,7 +94,7 @@
 			<SavedNetworkDetails />
 		{:else}
 			{#if app.parsingFile}
-				<p class="dim mono blink">parsing&hellip;</p>
+				<p class="dim blink">Parsing&hellip;</p>
 			{/if}
 
 			<!-- Selected equipment leads on narrow screens. -->
@@ -113,7 +117,7 @@
 						>
 					</div>
 				{/if}
-				<LocalCaseDetails />
+				<LocalCaseDetails note={caseNote} />
 			{/if}
 			{#if app.activeMulti}
 				<MulticonductorDetails />
@@ -121,18 +125,17 @@
 			{#if !ctrl.networkStats}
 				{#if !app.activeLocal && !app.activeMulti}
 					{#if ctrl.casesLoaded && app.cases.length === 0}
-						<p class="dim mono">
-							{config.loadDefaultCases ? 'no default cases loaded' : 'drop a case file to begin'}
+						<p class="dim">
+							{config.loadDefaultCases ? 'No default cases loaded' : 'Drop a case file to begin'}
 						</p>
 						{#if config.loadDefaultCases}
-							<button class="reset mono" onclick={ctrl.restoreDefaultCases}
-								>restore default cases</button
+							<button class="reset" onclick={ctrl.restoreDefaultCases}>Restore default cases</button
 							>
 						{/if}
 					{:else if ctrl.loadingBackendCase}
-						<p class="dim mono blink">loading selected case&hellip;</p>
+						<p class="dim blink">Loading case&hellip;</p>
 					{:else}
-						<p class="dim mono blink">loading cases&hellip;</p>
+						<p class="dim blink">Loading cases&hellip;</p>
 					{/if}
 				{/if}
 			{:else}

package/dist/components/ControlPanel.svelte.d.ts

@@ -1,3 +1,8 @@
-declare const ControlPanel: import("svelte").Component<Record<string, never>, {}, "">;
+import { type Snippet } from 'svelte';
+import type { LocalCase } from '../state.svelte.js';
+type $$ComponentProps = {
+    caseNote?: Snippet<[LocalCase]>;
+};
+declare const ControlPanel: import("svelte").Component<$$ComponentProps, {}, "">;
 type ControlPanel = ReturnType<typeof ControlPanel>;
 export default ControlPanel;