@tellegen/svelte 0.2.0 → 0.4.0

package/dist/basemap.js

@@ -0,0 +1,259 @@
+export const OPENFREEMAP_STYLES = {
+    light: 'https://tiles.openfreemap.org/styles/positron',
+    dark: 'https://tiles.openfreemap.org/styles/dark'
+};
+export const CARTO_STYLES = {
+    light: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+    'light-nolabels': 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
+    dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+    'dark-nolabels': 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json'
+};
+/** A CARTO key with surrounding whitespace removed, or `undefined` when
+ * nothing is left. A variable saved with a stray newline or space must not
+ * count as a key. */
+export function normalizeCartoApiKey(apiKey) {
+    return apiKey?.trim() || undefined;
+}
+/** A CARTO style URL with the optional API key appended as `key=`. A blank
+ * key appends nothing. */
+export function cartoStyleUrl(style, apiKey) {
+    const key = normalizeCartoApiKey(apiKey);
+    if (!key)
+        return style;
+    const separator = style.includes('?') ? '&' : '?';
+    return `${style}${separator}key=${encodeURIComponent(key)}`;
+}
+/** The default primary and fallback for a theme, ordered by whether a CARTO
+ * key is at hand. */
+export function defaultBasemap(theme, options = {}) {
+    const hideLabels = options.hideLabels ?? true;
+    const variant = hideLabels ? `${theme}-nolabels` : theme;
+    const key = normalizeCartoApiKey(options.cartoApiKey);
+    const carto = cartoStyleUrl(CARTO_STYLES[variant], key);
+    const openFreeMap = OPENFREEMAP_STYLES[theme];
+    return key
+        ? {
+            primary: carto,
+            fallback: openFreeMap,
+            hideLabels,
+            primaryProvider: 'carto',
+            fallbackProvider: 'openfreemap'
+        }
+        : {
+            primary: openFreeMap,
+            fallback: carto,
+            hideLabels,
+            primaryProvider: 'openfreemap',
+            fallbackProvider: 'carto'
+        };
+}
+/** The spec `TellegenMap` renders from its props: explicit styles win, the
+ * theme fills in whatever is left, and `null` turns the fallback off. An
+ * explicit style is `'custom'`, whichever host serves it. */
+export function resolveBasemap(input) {
+    const defaults = defaultBasemap(input.theme, {
+        cartoApiKey: input.cartoApiKey,
+        hideLabels: input.hideBasemapLabels
+    });
+    const fallback = input.fallbackMapStyle;
+    return {
+        primary: input.mapStyle ?? defaults.primary,
+        fallback: fallback === undefined ? defaults.fallback : fallback,
+        hideLabels: input.hideBasemapLabels,
+        primaryProvider: input.mapStyle === undefined ? defaults.primaryProvider : 'custom',
+        fallbackProvider: fallback === undefined ? defaults.fallbackProvider : fallback === null ? null : 'custom'
+    };
+}
+const OPENFREEMAP_TILES = 'https://tiles.openfreemap.org/';
+/** Road lines start here on an OpenFreeMap style. Below it, the road web
+ * reads like grid lines under a network overlay. */
+const ROAD_MIN_ZOOM = 8;
+/** CARTO Dark Matter's water and waterway colours, which stand clear of
+ * near-black land. */
+const DARK_WATER = '#2c353c';
+const DARK_WATERWAY = '#3f5a6d';
+const LAND_SOURCE_LAYERS = new Set(['landuse', 'landcover', 'park']);
+/** Whether a style draws on OpenFreeMap's tiles, whichever URL loaded it. */
+export function isOpenFreeMapStyle(style) {
+    return Object.values(style.sources ?? {}).some((source) => {
+        const urls = [
+            'url' in source ? source.url : undefined,
+            ...('tiles' in source ? (source.tiles ?? []) : [])
+        ];
+        return urls.some((url) => typeof url === 'string' && url.startsWith(OPENFREEMAP_TILES));
+    });
+}
+/** Edits that let an OpenFreeMap style sit under a network overlay the way
+ * CARTO's styles do.
+ *
+ * - Road lines (`transportation`) start at z8.
+ * - In the dark theme, water and waterways take Dark Matter's colours, and
+ *   plain land fills (`landuse`, `landcover`, `park`) take the style's
+ *   background colour, so the water stands out against one tone of land.
+ *
+ * Layers are matched by `source-layer`, not by id, so the edits still apply
+ * when OpenFreeMap renames its layers. */
+export function openFreeMapEdits(style, theme) {
+    const paintOf = (layer) => (layer.paint ?? {});
+    const background = style.layers.find((layer) => layer.type === 'background');
+    const backgroundColor = background ? paintOf(background)['background-color'] : undefined;
+    // A plain colour only; an expression is left alone rather than guessed at.
+    const land = typeof backgroundColor === 'string' ? backgroundColor : undefined;
+    const edits = [];
+    for (const layer of style.layers) {
+        const sourceLayer = 'source-layer' in layer ? layer['source-layer'] : undefined;
+        if (sourceLayer === undefined)
+            continue;
+        if (sourceLayer === 'transportation' && layer.type === 'line') {
+            if ((layer.minzoom ?? 0) < ROAD_MIN_ZOOM) {
+                edits.push({
+                    kind: 'zoom-range',
+                    layer: layer.id,
+                    minzoom: ROAD_MIN_ZOOM,
+                    maxzoom: layer.maxzoom ?? 24
+                });
+            }
+        }
+        else if (theme === 'dark' && sourceLayer === 'water' && layer.type === 'fill') {
+            edits.push({ kind: 'paint', layer: layer.id, property: 'fill-color', value: DARK_WATER });
+        }
+        else if (theme === 'dark' && sourceLayer === 'waterway' && layer.type === 'line') {
+            edits.push({ kind: 'paint', layer: layer.id, property: 'line-color', value: DARK_WATERWAY });
+        }
+        else if (theme === 'dark' &&
+            land !== undefined &&
+            layer.type === 'fill' &&
+            LAND_SOURCE_LAYERS.has(sourceLayer) &&
+            paintOf(layer)['fill-pattern'] === undefined) {
+            edits.push({ kind: 'paint', layer: layer.id, property: 'fill-color', value: land });
+        }
+    }
+    return edits;
+}
+/** Tile fetch failures from one source, with no tile of any source arriving,
+ * that trip the fallback inside the window. */
+const TILE_FAILURE_LIMIT = 6;
+const TILE_FAILURE_WINDOW_MS = 10_000;
+const FORBIDDEN_STATUSES = new Set([401, 403, 429]);
+const FORBIDDEN_MESSAGE = /api key|forbidden|unauthorized/i;
+const NETWORK_MESSAGE = /failed to fetch|load failed|network ?error|network request failed/i;
+const WEBGL_MESSAGE = /webgl/i;
+function errorMessage(error) {
+    if (error instanceof Error)
+        return error.message;
+    if (typeof error === 'string')
+        return error;
+    if (error && typeof error === 'object' && 'message' in error)
+        return String(error.message);
+    return error === undefined || error === null ? '' : String(error);
+}
+function errorStatus(error) {
+    if (error && typeof error === 'object' && 'status' in error) {
+        const status = error.status;
+        if (typeof status === 'number')
+            return status;
+    }
+    return undefined;
+}
+/** Watch a map's `error` stream and switch to `spec.fallback` when the
+ * primary basemap cannot be shown. Rules, in order:
+ *
+ * 1. an error with no `sourceId` before the first `style.load` is a style
+ *    fetch failure: switch to the fallback once;
+ * 2. a source or tile error with status 401, 403 or 429, or a message naming
+ *    an API key, forbidden or unauthorized access: switch;
+ * 3. more than six tile fetch failures within ten seconds while no tile of
+ *    any source has arrived: switch. A failure is a network error with no
+ *    status, or an HTTP 5xx answer;
+ * 4. a WebGL error: report failure, no style can help;
+ * 5. everything else is logged the way MapLibre logs an unhandled error,
+ *    because registering this listener silences that default.
+ *
+ * After the switch the same rules report `onFailure` instead of switching
+ * again, as they do when `spec.fallback` is `null`. Returns a detach
+ * function. */
+export function attachBasemapFallback(map, spec, handlers = {}, options = {}) {
+    const now = options.now ?? (() => Date.now());
+    const primaryProvider = spec.primaryProvider ?? 'custom';
+    const fallbackProvider = spec.fallback === null ? null : (spec.fallbackProvider ?? 'custom');
+    let styleLoaded = map.isStyleLoaded() === true;
+    let fellBack = false;
+    let failed = false;
+    let tileFailures = 0;
+    let tileWindowStart = 0;
+    let tileArrived = false;
+    const fail = (reason) => {
+        if (failed)
+            return;
+        failed = true;
+        const from = fellBack && fallbackProvider !== null ? fallbackProvider : primaryProvider;
+        handlers.onFailure?.({ ...reason, from, to: null });
+    };
+    const fallBack = (reason) => {
+        if (fellBack || spec.fallback === null) {
+            fail(reason);
+            return;
+        }
+        fellBack = true;
+        styleLoaded = false;
+        tileFailures = 0;
+        tileArrived = false;
+        handlers.onFallback?.({ ...reason, from: primaryProvider, to: fallbackProvider });
+        map.setStyle(spec.fallback, { diff: false });
+    };
+    const passThrough = (event) => {
+        console.error(event?.error ?? event ?? 'Empty error event');
+    };
+    const onStyleLoad = () => {
+        styleLoaded = true;
+    };
+    const onSourceData = (event) => {
+        if (event?.tile || event?.isSourceLoaded === true)
+            tileArrived = true;
+    };
+    const onError = (event) => {
+        const message = errorMessage(event?.error);
+        const status = errorStatus(event?.error);
+        if (WEBGL_MESSAGE.test(message)) {
+            fail({ kind: 'webgl', message });
+            return;
+        }
+        const sourceId = typeof event?.sourceId === 'string' ? event.sourceId : undefined;
+        if (sourceId === undefined) {
+            if (!styleLoaded) {
+                fallBack({ kind: 'style-load', message, status });
+                return;
+            }
+            passThrough(event);
+            return;
+        }
+        if ((status !== undefined && FORBIDDEN_STATUSES.has(status)) ||
+            FORBIDDEN_MESSAGE.test(message)) {
+            fallBack({ kind: 'source-forbidden', message, status: status ?? 0, sourceId });
+            return;
+        }
+        const transient = status === undefined || status === 0 ? NETWORK_MESSAGE.test(message) : status >= 500;
+        if (event.tile && transient) {
+            const t = now();
+            if (tileFailures === 0 || t - tileWindowStart > TILE_FAILURE_WINDOW_MS) {
+                tileWindowStart = t;
+                tileFailures = 0;
+                tileArrived = false;
+            }
+            tileFailures++;
+            if (tileFailures > TILE_FAILURE_LIMIT && !tileArrived) {
+                fallBack({ kind: 'tiles-unavailable', message, sourceId });
+                return;
+            }
+        }
+        passThrough(event);
+    };
+    map.on('style.load', onStyleLoad);
+    map.on('sourcedata', onSourceData);
+    map.on('error', onError);
+    return () => {
+        map.off('style.load', onStyleLoad);
+        map.off('sourcedata', onSourceData);
+        map.off('error', onError);
+    };
+}

package/dist/colors.d.ts

@@ -8,20 +8,20 @@ export interface SensitivityDomain {
     scale: number;
     flat: boolean;
 }
-export declare const lmpColor: (t: number) => RGBA;
-export declare const lmpGradient: string;
-/** Trimmed LMP color domain: 5th to 95th percentile, with a $1/MWh
- * minimum span. LMP distributions are heavy tailed (one binding line pins a
+export declare const priceColor: (t: number) => RGBA;
+export declare const priceGradient: string;
+/** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
+ * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
  * into a single hue, and a congestion-free case is one price plus solver
  * noise that an exact scale would stretch into fake structure. Values beyond
  * the domain clamp to the ramp ends. */
-export declare function lmpDomain(values: number[]): {
+export declare function priceDomain(values: number[]): {
     lo: number;
     hi: number;
 };
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
- * with a per-mode minimum span; LMP keeps its own robust quantile domain. Shared by
+ * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
 export declare function scalarDomain(mode: DisplayMode, values: number[]): {
     lo: number;
@@ -32,8 +32,26 @@ export declare const sensColor: (t: number) => RGBA;
 export declare const sensGradient: string;
 export declare const sensNeutral: RGBA;
 export declare const busNeutral: RGBA;
+/** Overlay colours that depend on the basemap's lightness: bus outlines,
+ * hover highlights, the selected outline, the "not yet solved" grey, and
+ * the `.pwd` substation marker. The selection blue is the same in both. */
+export interface MapPalette {
+    outline: RGBA;
+    /** The multiconductor view's bus outline, a shade stronger. */
+    outlineStrong: RGBA;
+    highlight: RGBA;
+    highlightSoft: RGBA;
+    selected: RGBA;
+    grey: RGBA;
+    greyLine: RGBA;
+    substation: RGBA;
+    substationLine: RGBA;
+    /** Fill of a neutral (non-phase) terminal in the multiconductor detail. */
+    neutral: RGBA;
+}
+export declare const MAP_PALETTE: Record<'light' | 'dark', MapPalette>;
 export declare function sensFlatColor(domain: Pick<SensitivityDomain, 'mean'>): RGBA;
-/** The fixed normalization for a slider drag: predicted ΔLMP divides by
+/** The fixed normalization for a slider drag: predicted nodal value change divides by
  * scale × maxAbsStep, so color intensity is linear in the step and saturates at
  * full deflection for the column's robust-max buses. A per-frame domain over
  * column × step would cancel the step exactly (sensitivityDomain is degree-1

package/dist/colors.js

@@ -19,25 +19,25 @@ function cssGradient(stops) {
     const parts = stops.map((s) => `rgb(${s[0]} ${s[1]} ${s[2]})`);
     return `linear-gradient(90deg, ${parts.join(', ')})`;
 }
-/** Sequential LMP ramp, cheap to expensive: pale straw darkening through
+/** Sequential nodal value ramp: pale straw darkening through
  * amber and rust to near-black maroon. Lightness falls monotonically, so the
  * ordering survives every kind of color vision deficiency. */
-const LMP_STOPS = [
+const PRICE_STOPS = [
     [246, 227, 180, 235],
     [236, 178, 66, 235],
     [212, 116, 34, 240],
     [160, 56, 21, 245],
     [84, 18, 7, 250]
 ];
-export const lmpColor = (t) => ramp(LMP_STOPS, t);
-export const lmpGradient = cssGradient(LMP_STOPS);
-/** Trimmed LMP color domain: 5th to 95th percentile, with a $1/MWh
- * minimum span. LMP distributions are heavy tailed (one binding line pins a
+export const priceColor = (t) => ramp(PRICE_STOPS, t);
+export const priceGradient = cssGradient(PRICE_STOPS);
+/** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
+ * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
  * into a single hue, and a congestion-free case is one price plus solver
  * noise that an exact scale would stretch into fake structure. Values beyond
  * the domain clamp to the ramp ends. */
-export function lmpDomain(values) {
+export function priceDomain(values) {
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const sorted = [...values].sort((a, b) => a - b);
@@ -49,11 +49,11 @@ export function lmpDomain(values) {
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
- * with a per-mode minimum span; LMP keeps its own robust quantile domain. Shared by
+ * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
 export function scalarDomain(mode, values) {
-    if (mode === 'lmp')
-        return lmpDomain(values);
+    if (mode === 'price')
+        return priceDomain(values);
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const { min: rawLo, max: rawHi } = extent(values);
@@ -62,9 +62,9 @@ export function scalarDomain(mode, values) {
     const mid = (rawLo + rawHi) / 2;
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
-/** Diverging sensitivity ramp: green (price falls per MW of demand) through
+/** Diverging sensitivity ramp: green (nodal value falls per MW of demand) through
  * a paper-toned neutral to purple (price rises). The green/purple pair stays
- * legible under CVD and shares no hue with the warm LMP ramp, so the two
+ * legible under CVD and shares no hue with the warm nodal value ramp, so the two
  * modes cannot be confused. */
 const SENS_STOPS = [
     [27, 120, 55, 240],
@@ -78,13 +78,39 @@ export const sensColor = (t) => ramp(SENS_STOPS, (t + 1) / 2);
 export const sensGradient = cssGradient(SENS_STOPS);
 export const sensNeutral = SENS_STOPS[2];
 export const busNeutral = [180, 175, 165, 200];
+export const MAP_PALETTE = {
+    light: {
+        outline: [46, 42, 34, 110],
+        outlineStrong: [46, 42, 34, 120],
+        highlight: [32, 36, 43, 90],
+        highlightSoft: [32, 36, 43, 70],
+        selected: [32, 36, 43, 255],
+        grey: [110, 115, 120, 200],
+        greyLine: [138, 131, 117, 150],
+        substation: [70, 92, 124, 190],
+        substationLine: [38, 52, 78, 220],
+        neutral: [120, 114, 102, 255]
+    },
+    dark: {
+        outline: [232, 238, 244, 120],
+        outlineStrong: [232, 238, 244, 130],
+        highlight: [232, 238, 244, 90],
+        highlightSoft: [232, 238, 244, 70],
+        selected: [255, 255, 255, 255],
+        grey: [150, 160, 170, 200],
+        greyLine: [150, 160, 170, 150],
+        substation: [120, 150, 200, 190],
+        substationLine: [180, 205, 235, 220],
+        neutral: [150, 160, 170, 255]
+    }
+};
 const FLAT_SENSITIVITY_TINT = 0.55;
 export function sensFlatColor(domain) {
     if (domain.mean === 0)
         return sensNeutral;
     return sensColor(domain.mean > 0 ? FLAT_SENSITIVITY_TINT : -FLAT_SENSITIVITY_TINT);
 }
-/** The fixed normalization for a slider drag: predicted ΔLMP divides by
+/** The fixed normalization for a slider drag: predicted nodal value change divides by
  * scale × maxAbsStep, so color intensity is linear in the step and saturates at
  * full deflection for the column's robust-max buses. A per-frame domain over
  * column × step would cancel the step exactly (sensitivityDomain is degree-1

package/dist/components/AppFooter.svelte

@@ -31,7 +31,7 @@
 		padding: 8px 20px;
 		font-size: 10.5px;
 		color: var(--text-secondary);
-		background: linear-gradient(rgba(236, 233, 226, 0), rgba(236, 233, 226, 0.9));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb) / 0.9));
 		animation: rise 0.5s 0.24s ease-out both;
 		pointer-events: none;
 	}
@@ -53,10 +53,12 @@
 		color: var(--text-accent);
 	}
 
+	/* Inside the Network panel on narrow screens, panel text size applies. */
 	footer.inline {
 		position: static;
 		margin-top: 14px;
 		padding: 0;
+		font-size: 12px;
 		background: none;
 		animation: none;
 		pointer-events: auto;
@@ -71,7 +73,6 @@
 
 		footer.inline {
 			margin-top: 4px;
-			font-size: 11px;
 		}
 	}
 

package/dist/components/AppHeader.svelte

@@ -26,10 +26,10 @@
 <header bind:this={headerEl}>
 	<div class="brand">
 		<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
-			<path d="M4 18 L12 6 L20 18" stroke="#b25e00" stroke-width="1.6" fill="none" />
-			<circle cx="4" cy="18" r="2.4" fill="#b25e00" />
-			<circle cx="12" cy="6" r="2.4" fill="#20242b" />
-			<circle cx="20" cy="18" r="2.4" fill="#b25e00" />
+			<path class="brand-accent-stroke" d="M4 18 L12 6 L20 18" stroke-width="1.6" fill="none" />
+			<circle class="brand-accent" cx="4" cy="18" r="2.4" />
+			<circle class="brand-ink" cx="12" cy="6" r="2.4" />
+			<circle class="brand-accent" cx="20" cy="18" r="2.4" />
 		</svg>
 		<h1>tellegen</h1>
 	</div>
@@ -37,11 +37,16 @@
 		{#each app.cases as c (c.id)}
 			{@const [cname, cregion] = splitName(c.name)}
 			<div class="case-chip" class:active={app.activeCaseId === c.id}>
-				<button class="case-activate" onclick={() => ctrl.activateCase(c.id)}>
+				<button
+					class="case-activate"
+					disabled={!!c.unavailableReason}
+					title={c.unavailableReason ?? undefined}
+					onclick={() => ctrl.activateCase(c.id)}
+				>
 					<span class="cname"
 						>{cname}{#if c.perturbed}<i class="mark" title="demand perturbed"></i>{/if}</span
 					>
-					<span class="cregion mono">{cregion}</span>
+					<span class="cregion mono">{c.unavailableReason ? 'Unavailable' : cregion}</span>
 				</button>
 				<button
 					class="case-remove mono"
@@ -79,16 +84,18 @@
 				>
 			</div>
 		{/each}
-		{#if ctrl.showFileDropUi}
-			<button
-				class="ghost filedrop-ui"
-				title="parsed in your browser; the file never uploads"
-				onclick={() => fileInput?.click()}
+		<button
+			class="ghost filedrop-ui"
+			title="parsed in your browser; the file never uploads"
+			onclick={() => fileInput?.click()}
+		>
+			<span class="cname"
+				><span class="arrow">&#8675;</span>{ctrl.showFileDropUi
+					? 'drop a case file'
+					: 'open a case file'}</span
 			>
-				<span class="cname"><span class="arrow">&#8675;</span>drop a case file</span>
-				<span class="cregion mono">case + geo files</span>
-			</button>
-		{/if}
+			<span class="cregion mono">case + geo files</span>
+		</button>
 	</nav>
 	<span class="kicker mono">
 		<a href={config.orgHref} target="_blank" rel="noreferrer">{config.orgLabel}</a>
@@ -123,7 +130,7 @@
 		justify-content: space-between;
 		gap: 16px;
 		padding: 10px 20px;
-		background: linear-gradient(rgba(236, 233, 226, 0.95), rgba(236, 233, 226, 0));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0.95), rgb(var(--bg-rgb) / 0));
 		animation: drop 0.5s ease-out both;
 	}
 
@@ -134,6 +141,19 @@
 		gap: 10px;
 	}
 
+	/* The brand mark follows the theme: accent legs, ink apex. */
+	.brand-accent {
+		fill: var(--accent);
+	}
+
+	.brand-accent-stroke {
+		stroke: var(--accent);
+	}
+
+	.brand-ink {
+		fill: var(--ink);
+	}
+
 	h1 {
 		margin: 0;
 		font-size: 22px;
@@ -203,6 +223,11 @@
 		border: 0;
 	}
 
+	.case-activate:disabled {
+		color: var(--text-secondary);
+		cursor: not-allowed;
+	}
+
 	.case-remove {
 		position: absolute;
 		top: 1px;
@@ -293,8 +318,8 @@
 
 	/* Ghost chip: standing invitation to drop or pick a case file. */
 	.cases > button.ghost {
-		background: rgba(252, 251, 247, 0.36);
-		border: 1px dashed rgba(178, 94, 0, 0.55);
+		background: rgb(var(--paper-rgb) / 0.36);
+		border: 1px dashed rgb(var(--accent-rgb) / 0.55);
 		color: var(--text-secondary);
 		box-shadow: inset 0 0 0 1px rgba(212, 116, 34, 0.08);
 	}
@@ -339,7 +364,7 @@
 			flex-wrap: wrap;
 			gap: 8px;
 			padding: 8px 10px 12px;
-			background: linear-gradient(rgba(236, 233, 226, 0.97), rgba(236, 233, 226, 0.72));
+			background: linear-gradient(rgb(var(--bg-rgb) / 0.97), rgb(var(--bg-rgb) / 0.72));
 		}
 
 		.brand {

package/dist/components/BindingLines.svelte

@@ -32,7 +32,7 @@
 	<div class="binding-lines">
 		<p
 			class="mono dim head"
-			title="lines loaded to their thermal rating; select one to see &part;LMP/&part;rating"
+			title="lines loaded to their thermal rating; select one to see LMP sensitivity to the rating"
 		>
 			binding lines
 		</p>
@@ -45,9 +45,7 @@
 						aria-pressed={app.selectedBranch === branch.id}
 						onclick={() => select(branch.id)}
 					>
-						line {branch.from}&#8201;&ndash;&#8201;{branch.to} &middot; {Math.round(
-							loading * 100
-						)}%
+						line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {Math.round(loading * 100)}%
 					</button>
 				</li>
 			{/each}
@@ -61,7 +59,7 @@
 	}
 
 	.head {
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 0 0 4px;
 	}
 
@@ -93,8 +91,7 @@
 	li button.selected {
 		color: var(--text-accent);
 		background:
-			linear-gradient(90deg, rgba(177, 104, 27, 0.16), rgba(177, 104, 27, 0.05)),
-			var(--accent-soft);
+			linear-gradient(90deg, rgba(177, 104, 27, 0.16), rgba(177, 104, 27, 0.05)), var(--accent-soft);
 		box-shadow: inset 3px 0 0 var(--accent);
 		font-weight: 600;
 	}

package/dist/components/BusPicker.svelte

@@ -8,7 +8,9 @@
 	/** Render in the parent's flow instead of as a card floating over the map. */
 	let { inline = false }: { inline?: boolean } = $props();
 
-	const buses = $derived(app.active?.network?.buses ?? app.activeLocal?.view?.buses ?? []);
+	const buses = $derived(
+		app.studyView?.network.buses ?? app.active?.network?.buses ?? app.activeLocal?.view?.buses ?? []
+	);
 
 	let query = $state('');
 	let open = $state(false);
@@ -25,7 +27,11 @@
 	function commit(id: number) {
 		const caseId = app.activeCaseId;
 		const localId = app.activeLocalId;
-		if (caseId && app.active) ctrl.selectBus(caseId, id);
+		if (app.studyView) {
+			app.selectedBranch = null;
+			app.selectedBus = id;
+			void app.requestFrame({ caseId: app.studyView.caseId, busId: id });
+		} else if (caseId && app.active) ctrl.selectBus(caseId, id);
 		else if (localId && app.activeLocal) ctrl.selectLocalBus(localId, id);
 		query = '';
 		open = false;
@@ -149,7 +155,7 @@
 
 	label {
 		display: block;
-		font-size: 10px;
+		font-size: 12px;
 		text-transform: uppercase;
 		margin-bottom: 3px;
 	}
@@ -214,7 +220,7 @@
 		background: var(--panel);
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.14);
+		box-shadow: var(--elev-menu);
 	}
 
 	li {
@@ -238,7 +244,7 @@
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
 		box-shadow: var(--elev-1);
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 4px 0 0;
 	}