@tellegen/svelte 0.2.0 → 0.4.0

package/dist/TellegenMap.svelte

@@ -1,25 +1,41 @@
 <script lang="ts">
 	import 'maplibre-gl/dist/maplibre-gl.css';
-	import { tick } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import type { Layer, PickingInfo } from '@deck.gl/core';
 	import type { IconLayer, PathLayer, ScatterplotLayer } from '@deck.gl/layers';
-	import type { MapboxOverlay } from '@deck.gl/mapbox';
+	import type { MapLibreOverlay } from '@deck.gl/maplibre';
 	import type { LngLatBoundsLike, Map as MapLibreMap } from 'maplibre-gl';
 	import type { NetworkBranch, NetworkBus } from './api.js';
 	import {
+		MAP_PALETTE,
 		branchColor,
 		branchWidth,
 		busNeutral,
 		busRadius,
-		lmpColor,
+		priceColor,
 		scalarDomain,
 		sensColor,
 		sensFlatColor,
 		sensitivityDomain,
 		type SensitivityDomain
 	} from './colors.js';
+	import {
+		attachBasemapFallback,
+		isOpenFreeMapStyle,
+		openFreeMapEdits,
+		resolveBasemap,
+		type BasemapFallbackReason,
+		type BasemapStyle,
+		type MapProjection,
+		type MapTheme
+	} from './basemap.js';
 	import { caseDeltas, caseRatings, displayMetaFor, displaySeriesFor } from './display.js';
-	import { CaseState, type DisplayMode, type LocalCase } from './state.svelte.js';
+	import {
+		CaseState,
+		type CameraSnapshot,
+		type DisplayMode,
+		type LocalCase
+	} from './state.svelte.js';
 	import {
 		attachmentColor,
 		edgeColor,
@@ -29,13 +45,18 @@
 		transformerMarks,
 		type PlacedMultiBus,
 		type PlacedMultiEdge,
-		type TransformerMark
+		type TransformerMark,
+		multiDiagramNetwork
 	} from './multiconductor.js';
 	import { transformerIcon } from './transformer-icon.js';
 	import { foldMapBounds } from './map-bounds.js';
 	import { getAppState, getController } from './context.svelte.js';
 	import { displayFmt, fmt, rgbaCss } from './format.js';
+	import { getPanelLayout } from './panels.svelte.js';
 	import type { RGBA } from './colors.js';
+	import DiagramCanvas from './components/DiagramCanvas.svelte';
+
+	const DEFAULT_CAMERA: CameraSnapshot = { center: [-85, 36], zoom: 4.5, bearing: 0, pitch: 0 };
 
 	let {
 		onbusclick,
@@ -45,7 +66,19 @@
 		onmultibusclick,
 		onmultiedgeclick,
 		onplacecase,
-		onmapclick
+		onmapclick,
+		mapStyle,
+		fallbackMapStyle,
+		theme = 'light',
+		projection = 'mercator',
+		initialCamera = DEFAULT_CAMERA,
+		hideBasemapLabels = true,
+		cartoApiKey,
+		extraLayers = [],
+		attribution = 'compact',
+		onMapReady,
+		onBasemapFallback,
+		onBasemapError
 	}: {
 		onbusclick: (caseId: string, busId: number) => void;
 		onlocalbusclick: (caseId: string, busId: number) => void;
@@ -55,18 +88,112 @@
 		onmultiedgeclick?: (caseId: string, edgeId: string) => void;
 		onplacecase: (lon: number, lat: number) => void;
 		onmapclick: () => void;
+		/** Primary basemap: a style URL or inline style. Default: the CARTO style
+		 * for `theme` when `cartoApiKey` is set, else the OpenFreeMap style.
+		 * Changing it (or `fallbackMapStyle`, `theme`, `hideBasemapLabels`,
+		 * `cartoApiKey`, `attribution`) rebuilds the map in place and keeps the
+		 * camera. */
+		mapStyle?: BasemapStyle;
+		/** Basemap used when the primary cannot be shown; `null` disables the
+		 * switch. Default: whichever of the CARTO and OpenFreeMap styles is not
+		 * the default primary. */
+		fallbackMapStyle?: BasemapStyle | null;
+		/** Picks the default basemaps and the overlay palette (bus outlines,
+		 * hover highlight, unsolved grey). */
+		theme?: MapTheme;
+		/** Re-applied after every `style.load`, so a basemap switch keeps it. */
+		projection?: MapProjection;
+		/** Camera for the first paint; read once per mount. */
+		initialCamera?: CameraSnapshot;
+		/** Hide the basemap's `symbol` layers after every `style.load`. */
+		hideBasemapLabels?: boolean;
+		/** CARTO basemap key (free for non-commercial use from
+		 * carto.com/basemaps/apikey; restrict it to your hosts). With one, the
+		 * CARTO style leads and OpenFreeMap is the fallback; without one, the
+		 * order flips. Trimmed; a blank key counts as none. */
+		cartoApiKey?: string;
+		/** deck.gl layers drawn after tellegen's own, in the same overlay. */
+		extraLayers?: Layer[];
+		/** Attribution control mode. There is no off switch: tile licences
+		 * require the credit on screen. */
+		attribution?: 'compact' | 'full';
+		/** Called once the map and overlay exist, with an optional cleanup. It
+		 * fires again after a context-loss or basemap remount, after the previous
+		 * cleanup ran. */
+		onMapReady?: (map: MapLibreMap, overlay: MapLibreOverlay) => void | (() => void);
+		/** The primary basemap failed and the fallback was requested. The
+		 * reason's `from` and `to` name the providers (`'carto'`,
+		 * `'openfreemap'` or `'custom'`). */
+		onBasemapFallback?: (reason: BasemapFallbackReason) => void;
+		/** No basemap can be shown; the network layers still draw. The reason's
+		 * `from` names the provider that failed last, and `to` is `null`. */
+		onBasemapError?: (reason: BasemapFallbackReason) => void;
 	} = $props();
 
 	const app = getAppState();
 	const ctrl = getController();
+	const panels = getPanelLayout();
+	const diagramCase = $derived(app.studyView ? null : (app.active ?? app.activeLocal));
+	const diagramMulti = $derived(
+		!app.studyView && app.activeMulti?.coordsKind !== 'geographic' ? app.activeMulti : null
+	);
+	const multiNetwork = $derived(
+		diagramMulti?.view
+			? multiDiagramNetwork(diagramMulti.id, diagramMulti.label, diagramMulti.view)
+			: null
+	);
+	const displayedNetwork = $derived(app.studyView?.network ?? diagramCase?.network);
+	const diagramNetwork = $derived(
+		multiNetwork ?? (displayedNetwork?.coordinate_space === 'diagram' ? displayedNetwork : null)
+	);
+	const diagramCaseId = $derived(
+		app.studyView?.caseId ?? diagramMulti?.id ?? diagramCase?.id ?? 'diagram'
+	);
+	function selectDiagramBus(busId: number) {
+		if (diagramMulti?.view) {
+			const bus = diagramMulti.view.buses[busId];
+			if (bus) onmultibusclick(diagramMulti.id, bus.id);
+			return;
+		}
+		if (app.studyView) {
+			app.selectedBranch = null;
+			app.selectedBus = busId;
+		} else if (app.activeLocal) onlocalbusclick(diagramCaseId, busId);
+		else onbusclick(diagramCaseId, busId);
+	}
+	function selectDiagramBranch(branchId: number) {
+		if (diagramMulti?.view) {
+			const edge = diagramMulti.view.edges[branchId];
+			if (edge) onmultiedgeclick?.(diagramMulti.id, edge.id);
+			return;
+		}
+		if (app.studyView) {
+			app.selectedBus = null;
+			app.selectedBranch = branchId;
+		} else if (app.activeLocal) onlocalbranchclick?.(diagramCaseId, branchId);
+		else onbranchclick?.(diagramCaseId, branchId);
+	}
 
-	const STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+	const basemap = $derived(
+		resolveBasemap({ mapStyle, fallbackMapStyle, theme, hideBasemapLabels, cartoApiKey })
+	);
+	// Read as separate values, not one object, so a theme change that resolves
+	// to the same styles does not rebuild the map.
+	const basemapPrimary = $derived(basemap.primary);
+	const basemapFallback = $derived(basemap.fallback);
+	const basemapHideLabels = $derived(basemap.hideLabels);
+	const basemapPrimaryProvider = $derived(basemap.primaryProvider);
+	const basemapFallbackProvider = $derived(basemap.fallbackProvider);
+	const palette = $derived(MAP_PALETTE[theme]);
+	// Set once a map has existed in this component instance: a rebuild (context
+	// loss or basemap change) restores the camera instead of reframing.
+	let hadMap = false;
 	const CUE_MARGIN_PX = 64;
 	const BRANCH_FOCUS_MS = 850;
 	const BRANCH_FOCUS_MAX_ZOOM = 9.5;
 
 	let map = $state.raw<MapLibreMap | null>(null);
-	let overlay = $state.raw<MapboxOverlay | null>(null);
+	let overlay = $state.raw<MapLibreOverlay | null>(null);
 	// Bumped to remount the map after a WebGL context is lost and cannot be
 	// repainted in place. See initMap's context-loss handling.
 	let mapGen = $state(0);
@@ -85,7 +212,7 @@
 	let layerCtors = $state.raw<LayerCtors | null>(null);
 
 	interface CaseDisplay {
-		lmp: Map<number, number>;
+		prices: Map<number, number>;
 		scalar: Map<number, number>;
 		scalarLo: number;
 		scalarHi: number;
@@ -93,7 +220,7 @@
 		scalarLabel: string;
 		scalarUnit: string;
 		loading: Map<number, number>;
-		mode: 'lmp' | 'sens' | 'preview';
+		mode: 'price' | 'sens' | 'preview';
 		sens: Map<number, number>;
 		sensDomain: SensitivityDomain | null;
 		preview: Map<number, number>;
@@ -106,7 +233,7 @@
 	type SolvableCase = CaseState | LocalCase;
 
 	// Everything the accessors need, rebuilt when any case's data moves. The
-	// LMP scale normalizes per network: each case is an islanded market, so
+	// The LMP scale normalizes per network: each case is an islanded network, so
 	// within network structure beats cross network color comparability (the
 	// panel legend and tooltips carry the actual numbers). Preview values
 	// shift individual buses without rescaling.
@@ -114,8 +241,8 @@
 		const active = app.active ?? app.activeLocal;
 		const selectedBus = app.selectedBus;
 		const selectedBranch = app.selectedBranch;
-		// The active case's column for the live selection: the ∂LMP/∂d column at the
-		// selected bus, or the ∂LMP/∂rating column at the selected branch. Both are
+		// The active case's column for the live selection: the price-demand column at the
+		// selected bus, or the price-rating column at the selected branch. Both are
 		// bus-keyed value maps, so the color pipeline below is target-agnostic.
 		const activeSensitivity =
 			active &&
@@ -125,18 +252,18 @@
 				: null;
 		const activeDeltas = active ? caseDeltas(active) : {};
 		const activeRatings = active ? caseRatings(active) : {};
-		// Engine first-order LMP preview (Study.preview): predicted per-bus ΔLMP for
+		// Engine first order preview (Study.preview): predicted per-bus LMP change for
 		// the live drag, scoped to this case + selection target. Preferred over the JS
 		// gradient shift when present; the gradient path stays for server and browser
 		// fallbacks.
 		const enginePreview =
 			active &&
-			app.previewLmp &&
-			app.previewLmp.caseId === active.id &&
-			('bus' in app.previewLmp.target
-				? app.previewLmp.target.bus === selectedBus
-				: app.previewLmp.target.branch === selectedBranch)
-				? app.previewLmp.delta
+			app.previewPrices &&
+			app.previewPrices.caseId === active.id &&
+			('bus' in app.previewPrices.target
+				? app.previewPrices.target.bus === selectedBus
+				: app.previewPrices.target.branch === selectedBranch)
+				? app.previewPrices.delta
 				: null;
 		const previewStep =
 			active && activeSensitivity
@@ -153,13 +280,13 @@
 		const perCase = new Map<string, CaseDisplay>();
 		const addCase = (c: CaseState | LocalCase) => {
 			if (!c.network || !c.solution) return;
-			const lmp = new Map<number, number>();
-			for (const e of c.solution.lmp) lmp.set(e.bus, e.usd_per_mwh);
+			const prices = new Map<number, number>();
+			for (const e of c.solution.prices) prices.set(e.bus, e.value);
 			// Resolve the active display mode against what this case can show, falling
-			// back to LMP when the chosen mode doesn't apply (e.g. |V| under DC OPF).
+			// back to LMPs when the chosen mode doesn't apply (e.g. |V| under DC OPF).
 			const meta = displayMetaFor(c);
 			const activeMeta = meta.find((o) => o.mode === app.displayMode) ?? meta[0] ?? null;
-			const scalarMode = activeMeta?.mode ?? 'lmp';
+			const scalarMode = activeMeta?.mode ?? 'price';
 			const seriesValues = displaySeriesFor(c, scalarMode);
 			const scalar = new Map<number, number>();
 			for (const e of seriesValues) scalar.set(e.bus, e.value);
@@ -175,10 +302,10 @@
 			let domain: SensitivityDomain | null = null;
 			const isActive = c === active;
 			if (isActive && enginePreview) {
-				// Engine preview owns the LMP shift: add the predicted ΔLMP per bus.
-				for (const [bus, dlmp] of enginePreview) {
-					preview.set(bus, dlmp);
-					lmp.set(bus, (lmp.get(bus) ?? 0) + dlmp);
+				// Engine preview owns the LMP shift.
+				for (const [bus, deltaPrice] of enginePreview) {
+					preview.set(bus, deltaPrice);
+					prices.set(bus, (prices.get(bus) ?? 0) + deltaPrice);
 				}
 			}
 			if (isActive && activeSensitivity) {
@@ -190,9 +317,9 @@
 				if (!enginePreview && previewStep !== 0) {
 					// Fallback first order preview: shift LMPs along the gradient.
 					for (const v of activeSensitivity.values) {
-						const dlmp = v.value * previewStep;
-						preview.set(v.bus, dlmp);
-						lmp.set(v.bus, (lmp.get(v.bus) ?? 0) + dlmp);
+						const deltaPrice = v.value * previewStep;
+						preview.set(v.bus, deltaPrice);
+						prices.set(v.bus, (prices.get(v.bus) ?? 0) + deltaPrice);
 					}
 				}
 			}
@@ -203,16 +330,15 @@
 				previewDomain &&
 				(app.previewActive || c.solving || enginePreview || Math.abs(previewStep) >= 0.25)
 			);
-			// The sensitivity and demand-preview overlays are price-space fields (∂LMP/∂d
-			// and the ΔLMP preview). They only paint the map under the LMP display mode;
+			// The sensitivity and demand preview overlays are LMP fields. They only paint the map under the price display mode;
 			// under angle or |V| the map stays on the chosen scalar and the sensitivity
 			// shows in the side panel, so selecting a bus never silently overrides the
 			// angle/|V| coloring with the price ramp.
-			const sensEligible = scalarMode === 'lmp';
+			const sensEligible = scalarMode === 'price';
 			// While a sensitivity is still loading for the selected bus, stay in sens
-			// mode (renders neutral, not the prior LMP palette) so the node colors
+			// mode (renders neutral, not the prior price palette) so the node colors
 			// don't flash orange->purple between the old and new selection.
-			const mode: 'lmp' | 'sens' | 'preview' =
+			const mode: 'price' | 'sens' | 'preview' =
 				sensEligible && showPreview
 					? 'preview'
 					: sensEligible &&
@@ -221,15 +347,15 @@
 						  (domain || app.sensitivityLoading) &&
 						  !previewing
 						? 'sens'
-						: 'lmp';
+						: 'price';
 			perCase.set(c.id, {
-				lmp,
+				prices,
 				scalar,
 				scalarLo,
 				scalarHi,
 				scalarMode,
 				scalarLabel: activeMeta?.label ?? 'LMP',
-				scalarUnit: activeMeta?.unit ?? '$/MWh',
+				scalarUnit: activeMeta?.unit ?? 'objective units/MW',
 				loading,
 				mode,
 				sens,
@@ -266,7 +392,7 @@
 				return sensColor((d.preview.get(bus.id) ?? 0) / d.previewDomain.scale);
 			}
 			const mid = (d.scalarLo + d.scalarHi) / 2;
-			return lmpColor(((d.scalar.get(bus.id) ?? mid) - d.scalarLo) / (d.scalarHi - d.scalarLo));
+			return priceColor(((d.scalar.get(bus.id) ?? mid) - d.scalarLo) / (d.scalarHi - d.scalarLo));
 		};
 	}
 
@@ -282,34 +408,38 @@
 	// click handler must not treat those clicks as "empty map" and clear the selection.
 	function isSelectableLayer(layerId: string | undefined): boolean {
 		return Boolean(
+			layerId?.startsWith('study-') ||
 			layerId?.startsWith('buses-') ||
-				layerId?.startsWith('local-buses-') ||
-				layerId?.startsWith('branches-') ||
-				layerId?.startsWith('local-branches-') ||
-				layerId?.startsWith('multi-buses-') ||
-				layerId?.startsWith('multi-edges-')
+			layerId?.startsWith('local-buses-') ||
+			layerId?.startsWith('branches-') ||
+			layerId?.startsWith('local-branches-') ||
+			layerId?.startsWith('multi-buses-') ||
+			layerId?.startsWith('multi-edges-')
 		);
 	}
 
+	function displayedGeometry(caseId: string) {
+		if (app.studyView) return app.studyView.caseId === caseId ? app.studyView.network : null;
+		const local = app.localCases.find((c) => c.id === caseId);
+		return app.byId(caseId)?.network ?? local?.view ?? local?.network ?? null;
+	}
 	const selectedBusCue = $derived.by(() => {
 		const busId = app.selectedBus;
-		const c = app.active ?? app.activeLocal;
-		if (!c || busId === null) return null;
-		const buses =
-			app.active?.network?.buses ?? app.activeLocal?.network?.buses ?? app.activeLocal?.view?.buses ?? [];
-		const bus = buses.find((b) => b.id === busId);
-		return bus ? { key: `${c.id}-${bus.id}`, id: bus.id, lon: bus.lon, lat: bus.lat } : null;
+		const caseId = app.studyView?.caseId ?? app.active?.id ?? app.activeLocal?.id;
+		if (!caseId || busId === null) return null;
+		const bus = displayedGeometry(caseId)?.buses.find((b) => b.id === busId);
+		return bus
+			? { key: `${app.studyView?.id ?? caseId}-${bus.id}`, id: bus.id, lon: bus.lon, lat: bus.lat }
+			: null;
 	});
 	const selectedBranchCue = $derived.by(() => {
 		const branchId = app.selectedBranch;
-		const c = app.active ?? app.activeLocal;
-		if (!c || branchId === null) return null;
-		const branches =
-			c instanceof CaseState ? c.network?.branches : (c.view?.branches ?? c.network?.branches);
-		const branch = branches?.find((b) => b.id === branchId);
+		const caseId = app.studyView?.caseId ?? app.active?.id ?? app.activeLocal?.id;
+		if (!caseId || branchId === null) return null;
+		const branch = displayedGeometry(caseId)?.branches.find((b) => b.id === branchId);
 		const path = branch?.path.filter(([lon, lat]) => Number.isFinite(lon) && Number.isFinite(lat));
 		return branch && path && path.length >= 2
-			? { key: `${c.id}-${branch.id}`, caseId: c.id, branchId: branch.id, path }
+			? { key: `${app.studyView?.id ?? caseId}-${branch.id}`, caseId, branchId: branch.id, path }
 			: null;
 	});
 	let selectedCueEl = $state.raw<HTMLDivElement | null>(null);
@@ -317,6 +447,7 @@
 	let selectedBranchHaloPath = $state.raw<SVGPathElement | null>(null);
 	let selectedBranchLinePath = $state.raw<SVGPathElement | null>(null);
 	let handledFrameSeq = 0;
+	let handledCameraSeq = 0;
 
 	// The selected multiconductor bus and its incident edges, whose per-conductor
 	// strands and terminal stack the detail overlay draws in screen space.
@@ -460,9 +591,9 @@
 		terminals.forEach((t, k) => {
 			const cy = top + k * STACK_DY;
 			const grounded = bus.grounded.includes(t);
-			const fill = isPhaseTerminal(t) ? col(phaseColor(t)) : col([120, 114, 102, 255]);
+			const fill = isPhaseTerminal(t) ? col(phaseColor(t)) : col(palette.neutral);
 			if (grounded) stack += groundGlyph(sx - 14, cy);
-			stack += `<circle cx="${sx.toFixed(1)}" cy="${cy.toFixed(1)}" r="6" fill="${fill}" stroke="#20242b" stroke-width="1.2"/>`;
+			stack += `<circle class="mc-terminal" cx="${sx.toFixed(1)}" cy="${cy.toFixed(1)}" r="6" fill="${fill}"/>`;
 			stack += `<text class="mc-term" x="${(sx + 11).toFixed(1)}" y="${(cy + 3.5).toFixed(1)}">${esc(t)}</text>`;
 			// Attachment squares for elements landing on this terminal.
 			const kinds = [...new Set((bus.terminalAttachments[t] ?? []).map((a) => a.kind))];
@@ -492,18 +623,23 @@
 		});
 	}
 
-	/** Camera padding that keeps the framed subject clear of the panel chrome.
-	 * The branch variant also clears the rating readout on the panel's lower edge. */
+	/** Camera framing reserves the dock columns and the active compact drawer. */
 	function framePadding(width: number, height: number, kind: 'case' | 'branch') {
-		if (width <= 760) {
-			// bottom follows the sheet; capped so a fully open sheet still leaves a band to fit into
-			const clearance = kind === 'branch' ? 16 : 28;
-			const bottom = Math.min(app.sheetInset + clearance, Math.round(height * 0.55));
-			return { top: app.headerInset + 8, left: 24, right: 24, bottom };
+		const clearance = kind === 'branch' ? 16 : 28;
+		if (panels.compact) {
+			return {
+				top: panels.top + 8,
+				left: 24,
+				right: 24,
+				bottom: Math.min(app.sheetInset + clearance, Math.round(height * 0.6))
+			};
 		}
-		return kind === 'branch'
-			? { top: 106, left: 388, right: 76, bottom: 80 }
-			: { top: 96, left: 380, right: 60, bottom: 64 };
+		return {
+			top: panels.top + 16,
+			left: Math.min(panels.dockWidth('left') + 44, width * 0.34),
+			right: Math.min(panels.dockWidth('right') + 44, width * 0.34),
+			bottom: 80
+		};
 	}
 
 	function branchBounds(path: [number, number][]): LngLatBoundsLike | null {
@@ -512,8 +648,7 @@
 
 	function prefersReducedMotion(): boolean {
 		return (
-			typeof window !== 'undefined' &&
-			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
 		);
 	}
 
@@ -521,25 +656,9 @@
 		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 	}
 
-	// Compact chrome anchoring. maplibre's bottom-right controls sit over the map,
-	// so the sheet would bury them; they ride above it instead. Under
-	// CHROME_MIN_BAND_PX of map left they drop out rather than climb into the
-	// header — at that point the sheet covers what they annotate.
-	const CHROME_MIN_BAND_PX = 132;
-
-	/** How far the sheet can push the chrome up before it would reach the header. */
-	const chromeLiftCap = $derived(
-		Math.max(0, app.viewportHeight - app.headerInset - CHROME_MIN_BAND_PX)
-	);
-	const chromeInset = $derived(
-		app.compactLayout ? Math.min(app.sheetInset, chromeLiftCap) : 0
-	);
-	const chromeVisible = $derived(!app.compactLayout || app.sheetInset <= chromeLiftCap);
-
-	/** Fly to the selected branch; true when a camera move started. */
-	function focusSelectedBranch(): boolean {
-		if (!map || !selectedBranchCue) return false;
-		const bounds = branchBounds(selectedBranchCue.path);
+	function focusGeometry(points: [number, number][], settle: () => void): boolean {
+		if (!map) return false;
+		const bounds = branchBounds(points);
 		if (!bounds) return false;
 		const { clientWidth, clientHeight } = map.getContainer();
 		const camera = map.cameraForBounds(bounds, {
@@ -547,6 +666,7 @@
 			maxZoom: Math.min(map.getZoom() + 2, BRANCH_FOCUS_MAX_ZOOM)
 		});
 		if (!camera?.center) return false;
+		map.once('moveend', settle);
 		map.easeTo({
 			center: camera.center,
 			zoom: camera.zoom ?? map.getZoom(),
@@ -580,6 +700,21 @@
 	function tooltip(info: PickingInfo): { html: string } | null {
 		const { object } = info;
 		if (!object) return null;
+		if (app.studyView && info.layer?.id.startsWith('study-')) {
+			const view = app.studyView.solution;
+			const id = Number((object as { id: number }).id);
+			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)}%` : ''}`
+				};
+			}
+			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` : ''}`
+			};
+		}
 		if (info.layer?.id.startsWith('local-subs-')) {
 			// PowerWorld .pwd substation: display data only, position inferred from the diagram.
 			// The name is free text from a dropped file, so escape it; the number
@@ -587,7 +722,7 @@
 			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 &#8901; approx. position</span></div>`
+				html: `<div class="tt"><b>substation ${Number(s.number)}</b>${named}<br><span style="opacity:0.6">.pwd diagram, approximate position</span></div>`
 			};
 		}
 		const layerId = info.layer?.id;
@@ -627,7 +762,7 @@
 					<span style="opacity:0.6">local file</span></div>`
 			};
 		}
-		const lmp = d?.lmp.get(bus.id);
+		const price = d?.prices.get(bus.id);
 		const scalar = d?.scalar.get(bus.id);
 		const sens = d?.mode === 'sens' ? d.sens.get(bus.id) : undefined;
 		const preview = d?.mode === 'preview' ? d.preview.get(bus.id) : undefined;
@@ -639,19 +774,19 @@
 		const sensRow =
 			sens === undefined
 				? ''
-				: `<br>&part;LMP/&part;d ${sens >= 0 ? '+' : ''}${sens.toExponential(2)}`;
+				: `<br>&part;price/&part;d ${sens >= 0 ? '+' : ''}${sens.toExponential(2)}`;
 		const previewRow =
 			preview === undefined
 				? ''
-				: `<br>&Delta;LMP ${preview >= 0 ? '+' : ''}${preview.toExponential(2)} $/MWh`;
+				: `<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>';
 		const scalarRow =
-			!d || d.scalarMode === 'lmp'
-				? `LMP ${lmp === undefined ? '&mdash;' : fmt.format(lmp)} $/MWh`
+			!d || d.scalarMode === 'price'
+				? `LMP ${price === undefined ? '&mdash;' : fmt.format(price)} objective units/MW`
 				: `${d.scalarLabel} ${
 						scalar === undefined ? '&mdash;' : displayFmt(d.scalarMode, scalar)
-					} ${d.scalarUnit}<br>LMP ${lmp === undefined ? '&mdash;' : fmt.format(lmp)} $/MWh`;
+					} ${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>
@@ -660,14 +795,20 @@
 	}
 
 	async function loadMapModules() {
-		const [maplibre, mapbox, layers] = await Promise.all([
+		const [maplibre, deckMap, layers, workerUrl] = await Promise.all([
 			import('maplibre-gl'),
-			import('@deck.gl/mapbox'),
-			import('@deck.gl/layers')
+			import('@deck.gl/maplibre'),
+			import('@deck.gl/layers'),
+			// A package export, not a relative import: its `development`
+			// condition keeps the worker's `?worker&url` import out of the dev
+			// server's pre-bundle (see maplibre-worker.dev.ts).
+			import('@tellegen/svelte/maplibre-worker').then((m) => m.maplibreWorkerUrl())
 		]);
+		// Bundle the worker with its shared imports and configure it before creating a map.
+		maplibre.setWorkerUrl(workerUrl);
 		return {
-			maplibregl: maplibre.default,
-			MapboxOverlay: mapbox.MapboxOverlay,
+			maplibregl: maplibre,
+			MapLibreOverlay: deckMap.MapLibreOverlay,
 			PathLayer: layers.PathLayer,
 			ScatterplotLayer: layers.ScatterplotLayer,
 			IconLayer: layers.IconLayer
@@ -682,9 +823,9 @@
 	// memory and tab pressure, and one context survives that far better; the
 	// deck layers also inherit maplibre's 4096 canvas clamp. The flat positron
 	// basemap writes no depth, so the overlay always draws on top.
-	function buildOverlay(MapboxOverlay: MapModules['MapboxOverlay']): MapboxOverlay {
+	function buildOverlay(MapLibreOverlay: MapModules['MapLibreOverlay']): MapLibreOverlay {
 		const touch = coarsePointer();
-		return new MapboxOverlay({
+		return new MapLibreOverlay({
 			interleaved: true,
 			layers: [],
 			parameters: {
@@ -704,21 +845,64 @@
 	}
 
 	function initMap(container: HTMLDivElement) {
+		// Attachments re-run when state they read changes, so reading the
+		// resolved basemap and attribution mode here is what rebuilds the map
+		// when those props change. The camera is read once: it is initial.
+		const spec = {
+			primary: basemapPrimary,
+			fallback: basemapFallback,
+			hideLabels: basemapHideLabels,
+			primaryProvider: basemapPrimaryProvider,
+			fallbackProvider: basemapFallbackProvider
+		};
+		const compactAttribution = attribution === 'compact';
+		const camera = untrack(() => initialCamera);
+		const restoreCamera = hadMap;
+		hadMap = true;
 		let cleanup = () => {};
 		let cancelled = false;
 		void loadMapModules()
-			.then(({ maplibregl, MapboxOverlay, PathLayer, ScatterplotLayer, IconLayer }) => {
+			.then(({ maplibregl, MapLibreOverlay, PathLayer, ScatterplotLayer, IconLayer }) => {
 				if (cancelled) return;
 				layerCtors = { PathLayer, ScatterplotLayer, IconLayer };
 				const m = new maplibregl.Map({
 					container,
-					style: STYLE,
-					center: [-85, 36],
-					zoom: 4.5,
+					style: spec.primary,
+					center: camera.center,
+					zoom: camera.zoom,
+					bearing: camera.bearing,
+					pitch: camera.pitch,
 					canvasContextAttributes: { antialias: true },
-					attributionControl: { compact: true }
+					attributionControl: { compact: compactAttribution }
+				});
+				// `setStyle` (the fallback path included) drops the projection and
+				// shows every layer again, so both are re-applied on each load.
+				const applyStyleExtras = () => {
+					m.setProjection({ type: untrack(() => projection) });
+					const style = m.getStyle();
+					if (spec.hideLabels) {
+						for (const layer of style.layers) {
+							if (layer.type === 'symbol') m.setLayoutProperty(layer.id, 'visibility', 'none');
+						}
+					}
+					// OpenFreeMap renders as the primary or as the fallback; either
+					// way it is tuned towards CARTO's quieter look.
+					if (!isOpenFreeMapStyle(style)) return;
+					const edits = openFreeMapEdits(
+						style,
+						untrack(() => theme)
+					);
+					for (const edit of edits) {
+						if (edit.kind === 'paint') m.setPaintProperty(edit.layer, edit.property, edit.value);
+						else m.setLayerZoomRange(edit.layer, edit.minzoom, edit.maxzoom);
+					}
+				};
+				m.on('style.load', applyStyleExtras);
+				const detachFallback = attachBasemapFallback(m, spec, {
+					onFallback: (reason) => onBasemapFallback?.(reason),
+					onFailure: (reason) => onBasemapError?.(reason)
 				});
-				const o = buildOverlay(MapboxOverlay);
+				const o = buildOverlay(MapLibreOverlay);
 				m.addControl(o);
 				m.on('click', (e) => {
 					if (app.placingId) onplacecase(e.lngLat.lng, e.lngLat.lat);
@@ -743,6 +927,16 @@
 					if (document.visibilityState === 'visible') repaint();
 				};
 				const syncCues = () => scheduleCueSync();
+				const saveCamera = () => {
+					const center = m.getCenter();
+					app.camera = {
+						center: [center.lng, center.lat],
+						zoom: m.getZoom(),
+						bearing: m.getBearing(),
+						pitch: m.getPitch()
+					};
+				};
+				m.on('moveend', saveCamera);
 				let rebuildTimer: ReturnType<typeof setTimeout> | null = null;
 				const clearRebuild = () => {
 					if (rebuildTimer !== null) {
@@ -793,11 +987,15 @@
 
 				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 remount opens at the default view too.
-				app.requestFrame(app.activeCaseId ?? app.activeLocalId ?? 'all');
+				// 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
@@ -817,6 +1015,9 @@
 					m.off('load', syncCues);
 					m.off('move', syncCues);
 					m.off('resize', syncCues);
+					m.off('style.load', applyStyleExtras);
+					detachFallback();
+					detachReady?.();
 					app.settleFrame();
 					m.remove();
 					map = null;
@@ -832,12 +1033,95 @@
 		};
 	}
 
+	// A projection change applies at once when the style is ready. While a
+	// style is still loading (the first paint, or just after a basemap switch)
+	// MapLibre throws, and the `style.load` handler above applies it instead.
+	$effect(() => {
+		const type = projection;
+		const m = map;
+		if (!m) return;
+		try {
+			m.setProjection({ type });
+		} catch {
+			// style not loaded yet; applyStyleExtras runs on style.load
+		}
+	});
+
 	// Sync deck.gl layers with app state. New layer instances diff cheaply;
-	// updateTriggers tell deck.gl when accessor outputs changed.
+	// updateTriggers tell deck.gl when accessor outputs changed. Host layers
+	// (`extraLayers`) draw after tellegen's own at both exits.
 	$effect(() => {
 		if (!overlay || !layerCtors) return;
 		const { PathLayer, ScatterplotLayer, IconLayer } = layerCtors;
 		const layers: Layer[] = [];
+		const study = app.studyView;
+		if (study) {
+			const s = study.solution;
+			const mode = app.displayMode;
+			const series =
+				mode === 'angle'
+					? (s?.va ?? [])
+					: mode === 'voltage'
+						? (s?.vm ??
+							(s?.w ?? []).map((v) => ({
+								...v,
+								value: Math.sqrt(Math.max(0, v.value))
+							})))
+						: (s?.lmp ?? []);
+			const values = new Map(series.map((v) => [v.bus, v.value]));
+			const domain = scalarDomain(
+				mode,
+				series.map((v) => v.value)
+			);
+			const flows = new Map((s?.flows ?? []).map((f) => [f.branch, f.loading]));
+			layers.push(
+				new PathLayer<NetworkBranch>({
+					id: 'study-branches',
+					data: study.network.branches,
+					getPath: (b) => b.path,
+					getColor: (b) => branchColor(flows.get(b.id) ?? 0, b.status === 1),
+					getWidth: (b) => branchWidth(flows.get(b.id) ?? 0),
+					widthUnits: 'pixels',
+					widthMinPixels: 1.5,
+					pickable: true,
+					onClick: (info: PickingInfo) => {
+						const branch = info.object as NetworkBranch | undefined;
+						if (!branch) return false;
+						app.selectedBus = null;
+						app.selectedBranch = branch.id;
+						return true;
+					},
+					updateTriggers: { getColor: [study], getWidth: [study] }
+				}),
+				new ScatterplotLayer<NetworkBus>({
+					id: 'study-buses',
+					data: study.network.buses,
+					getPosition: (b) => [b.lon, b.lat],
+					getRadius: (b) => busRadius(Math.max(b.demand_mw, b.gen_mw)),
+					radiusUnits: 'pixels',
+					getFillColor: (b) => {
+						const value = values.get(b.id);
+						return value === undefined
+							? palette.grey
+							: priceColor((value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12));
+					},
+					pickable: true,
+					stroked: true,
+					getLineColor: palette.outline,
+					lineWidthUnits: 'pixels',
+					onClick: (info: PickingInfo) => {
+						const bus = info.object as NetworkBus | undefined;
+						if (!bus) return false;
+						app.selectedBranch = null;
+						app.selectedBus = bus.id;
+						return true;
+					},
+					updateTriggers: { getFillColor: [study, mode, theme] }
+				})
+			);
+			overlay.setProps({ layers: [...layers, ...extraLayers] });
+			return;
+		}
 		for (const c of app.cases) {
 			if (!c.network) continue;
 			const d = display.get(c.id);
@@ -847,7 +1131,7 @@
 					data: c.network.branches,
 					getPath: (b) => b.path,
 					// The selected branch draws in the selection blue of the bus halo cue,
-					// wider, so the ∂LMP/∂rating source line reads at a glance.
+					// wider, so the price-rating source line reads at a glance.
 					getColor: (b) =>
 						c.id === app.activeCaseId && b.id === app.selectedBranch
 							? [47, 111, 187, 255]
@@ -863,7 +1147,7 @@
 					miterLimit: 2,
 					pickable: true,
 					autoHighlight: true,
-					highlightColor: [32, 36, 43, 90],
+					highlightColor: palette.highlight,
 					onClick: (info: PickingInfo) => {
 						const branch = info.object as NetworkBranch | undefined;
 						if (!branch || !onbranchclick) return false;
@@ -886,13 +1170,13 @@
 					billboard: true,
 					getLineColor: (b) =>
 						c.id === app.activeCaseId && b.id === app.selectedBus
-							? [32, 36, 43, 255]
-							: [46, 42, 34, 110],
+							? palette.selected
+							: palette.outline,
 					getLineWidth: (b) => (c.id === app.activeCaseId && b.id === app.selectedBus ? 2.5 : 1),
 					lineWidthUnits: 'pixels',
 					pickable: true,
 					autoHighlight: true,
-					highlightColor: [32, 36, 43, 70],
+					highlightColor: palette.highlightSoft,
 					onClick: (info: PickingInfo) => {
 						const bus = info.object as NetworkBus | undefined;
 						if (!bus) return false;
@@ -901,7 +1185,7 @@
 					},
 					updateTriggers: {
 						getFillColor: [display],
-						getLineColor: [app.selectedBus, app.activeCaseId],
+						getLineColor: [app.selectedBus, app.activeCaseId, theme],
 						getLineWidth: [app.selectedBus, app.activeCaseId]
 					}
 				})
@@ -923,7 +1207,7 @@
 								? [47, 111, 187, 255]
 								: d
 									? branchColor(d.loading.get(b.id) ?? 0, b.status === 1)
-									: [138, 131, 117, 150],
+									: palette.greyLine,
 						getWidth: (b) =>
 							c.id === app.activeLocalId && b.id === app.selectedBranch
 								? Math.max((d ? branchWidth(d.loading.get(b.id) ?? 0) : 1.5) + 2, 4.5)
@@ -937,7 +1221,7 @@
 						miterLimit: 2,
 						pickable: true,
 						autoHighlight: true,
-						highlightColor: [32, 36, 43, 90],
+						highlightColor: palette.highlight,
 						onClick: (info: PickingInfo) => {
 							const branch = info.object as NetworkBranch | undefined;
 							if (!branch || !onlocalbranchclick) return false;
@@ -945,7 +1229,7 @@
 							return true;
 						},
 						updateTriggers: {
-							getColor: [display, app.selectedBranch, app.activeLocalId],
+							getColor: [display, app.selectedBranch, app.activeLocalId, theme],
 							getWidth: [display, app.selectedBranch, app.activeLocalId]
 						}
 					}),
@@ -955,18 +1239,18 @@
 						getPosition: (b) => [b.lon, b.lat],
 						getRadius: (b) => busRadius(Math.max(b.demand_mw, b.gen_mw)),
 						radiusUnits: 'pixels',
-						getFillColor: d ? busFill(c.id) : [110, 115, 120, 200],
+						getFillColor: d ? busFill(c.id) : palette.grey,
 						stroked: true,
 						billboard: true,
 						getLineColor: (b) =>
 							c.id === app.activeLocalId && b.id === app.selectedBus
-								? [32, 36, 43, 255]
-								: [46, 42, 34, 110],
+								? palette.selected
+								: palette.outline,
 						getLineWidth: (b) => (c.id === app.activeLocalId && b.id === app.selectedBus ? 2.5 : 1),
 						lineWidthUnits: 'pixels',
 						pickable: true,
 						autoHighlight: true,
-						highlightColor: [32, 36, 43, 70],
+						highlightColor: palette.highlightSoft,
 						onClick: (info: PickingInfo) => {
 							const bus = info.object as NetworkBus | undefined;
 							if (!bus) return false;
@@ -975,7 +1259,7 @@
 						},
 						updateTriggers: {
 							getFillColor: [display],
-							getLineColor: [app.selectedBus, app.activeLocalId],
+							getLineColor: [app.selectedBus, app.activeLocalId, theme],
 							getLineWidth: [app.selectedBus, app.activeLocalId]
 						}
 					})
@@ -983,22 +1267,27 @@
 			}
 			if (c.substations) {
 				layers.push(
-					new ScatterplotLayer<{ number: number; name: string; lon: number; lat: number }>({
+					new ScatterplotLayer<{
+						number: number;
+						name: string;
+						lon: number;
+						lat: number;
+					}>({
 						id: `local-subs-${c.id}`,
 						data: c.substations.points,
 						getPosition: (s) => [s.lon, s.lat],
 						getRadius: 5,
 						radiusUnits: 'pixels',
 						radiusMinPixels: 3,
-						getFillColor: [70, 92, 124, 190],
+						getFillColor: palette.substation,
 						stroked: true,
 						billboard: true,
-						getLineColor: [38, 52, 78, 220],
+						getLineColor: palette.substationLine,
 						getLineWidth: 1,
 						lineWidthUnits: 'pixels',
 						pickable: true,
 						autoHighlight: true,
-						highlightColor: [32, 36, 43, 70]
+						highlightColor: palette.highlightSoft
 					})
 				);
 			}
@@ -1007,7 +1296,7 @@
 		// kind and buses badged by attachment role. Selecting a bus fans its
 		// incident conductors and expands its terminal stack in the SVG overlay.
 		for (const c of app.multiCases) {
-			if (!c.view) continue;
+			if (c.coordsKind !== 'geographic' || !c.view) continue;
 			const selectedId = c.id === app.activeMultiId ? c.selectedBusId : null;
 			const selectedEdgeId = c.id === app.activeMultiId ? c.selectedEdgeId : null;
 			layers.push(
@@ -1027,7 +1316,7 @@
 					miterLimit: 2,
 					pickable: true,
 					autoHighlight: true,
-					highlightColor: [32, 36, 43, 90],
+					highlightColor: palette.highlight,
 					onClick: (info: PickingInfo) => {
 						const e = info.object as PlacedMultiEdge | undefined;
 						if (!e || !onmultiedgeclick) return false;
@@ -1070,15 +1359,15 @@
 					billboard: true,
 					getLineColor: (b) =>
 						selectedId === b.id
-							? [32, 36, 43, 255]
+							? palette.selected
 							: b.has_source
 								? [63, 111, 187, 220]
-								: [46, 42, 34, 120],
+								: palette.outlineStrong,
 					getLineWidth: (b) => (selectedId === b.id ? 2.5 : b.has_source ? 2 : 1),
 					lineWidthUnits: 'pixels',
 					pickable: true,
 					autoHighlight: true,
-					highlightColor: [32, 36, 43, 70],
+					highlightColor: palette.highlightSoft,
 					onClick: (info: PickingInfo) => {
 						const bus = info.object as PlacedMultiBus | undefined;
 						if (!bus) return false;
@@ -1086,13 +1375,13 @@
 						return true;
 					},
 					updateTriggers: {
-						getLineColor: [selectedId],
+						getLineColor: [selectedId, theme],
 						getLineWidth: [selectedId]
 					}
 				})
 			);
 		}
-		overlay.setProps({ layers });
+		overlay.setProps({ layers: [...layers, ...extraLayers] });
 	});
 
 	$effect(() => {
@@ -1114,7 +1403,7 @@
 	// does not re-run (and re-pan) on every frame of a sheet drag.
 	$effect(() => {
 		const cue = selectedBusCue;
-		if (!map || !cue || !app.compactLayout) return;
+		if (!map || !cue || !app.compactLayout || app.studyView) return;
 		void cue.key;
 		const m = map;
 		const timer = setTimeout(() => {
@@ -1129,6 +1418,7 @@
 	});
 
 	function boundsFor(target: string): LngLatBoundsLike | null {
+		if (app.studyView) return foldMapBounds(app.studyView.network.buses.map((b) => [b.lon, b.lat]));
 		const points: [number, number][] = [];
 		const fold = (pts: { lon: number; lat: number }[]) => {
 			for (const b of pts) points.push([b.lon, b.lat]);
@@ -1143,28 +1433,41 @@
 			if (c.substations) fold(c.substations.points);
 		}
 		for (const c of app.multiCases) {
+			if (c.coordsKind !== 'geographic') continue;
 			if (target !== 'all' && c.id !== target) continue;
 			if (c.view) fold(c.view.buses);
 		}
 		return foldMapBounds(points);
 	}
 
+	$effect(() => {
+		const seq = app.cameraSeq;
+		const snapshot = app.cameraRequest;
+		if (diagramNetwork || !map || !snapshot || seq === handledCameraSeq) return;
+		handledCameraSeq = seq;
+		handledFrameSeq = app.frameSeq;
+		map.jumpTo(snapshot);
+	});
+
 	// Fly to whatever the header, the initial load, or a branch selection asked
 	// for, and settle the request's promise once the camera lands so callers can
 	// defer heavy work past the animation. A branch request waits (unhandled)
 	// until its cue exists; anything unframeable settles immediately.
 	$effect(() => {
 		const seq = app.frameSeq;
-		if (!map || seq === handledFrameSeq) return;
+		if (diagramNetwork || !map || seq === handledFrameSeq) return;
 		const m = map;
 		const target = app.frameTarget;
 		const settle = () => app.settleFrame();
 		if (typeof target === 'object') {
-			const cue = selectedBranchCue;
-			if (!cue || cue.caseId !== target.caseId || cue.branchId !== target.branchId) return;
+			const geometry = displayedGeometry(target.caseId);
+			const bus =
+				'busId' in target ? geometry?.buses.find((b) => b.id === target.busId) : undefined;
+			const branch =
+				'branchId' in target ? geometry?.branches.find((b) => b.id === target.branchId) : undefined;
 			handledFrameSeq = seq;
-			if (focusSelectedBranch()) m.once('moveend', settle);
-			else settle();
+			const points: [number, number][] = bus ? [[bus.lon, bus.lat]] : (branch?.path ?? []);
+			if (!focusGeometry(points, settle)) settle();
 			return;
 		}
 		handledFrameSeq = seq;
@@ -1174,47 +1477,53 @@
 			return;
 		}
 		const { clientWidth: w, clientHeight: h } = m.getContainer();
+		m.once('moveend', settle);
 		m.fitBounds(bounds, {
 			padding: framePadding(w, h, 'case'),
 			duration: prefersReducedMotion() ? 0 : 1400
 		});
-		m.once('moveend', settle);
 	});
 </script>
 
-{#key mapGen}
-	<div
-		class="map-stage"
-		class:chrome-clear={!chromeVisible}
-		style="--chrome-inset: {chromeInset}px"
-	>
-		<div class="map" {@attach initMap}></div>
-		{#if selectedBusCue}
-			{#key selectedBusCue.key}
-				<div class="selected-bus-cue" bind:this={selectedCueEl} aria-hidden="true"></div>
-			{/key}
-		{/if}
-		{#if selectedBranchCue}
-			{#key selectedBranchCue.key}
-				<svg class="selected-branch-cue" bind:this={selectedBranchCueEl} aria-hidden="true">
-					<path class="selected-branch-halo" bind:this={selectedBranchHaloPath}></path>
-					<path class="selected-branch-line" bind:this={selectedBranchLinePath}></path>
-				</svg>
-			{/key}
-		{/if}
-		{#if selectedMultiDetail}
-			<!-- Content is built imperatively in syncMultiDetail (screen-space
+{#if diagramNetwork}
+	<DiagramCanvas
+		network={diagramNetwork}
+		multiconductor={diagramMulti}
+		caseId={diagramCaseId}
+		onbusclick={selectDiagramBus}
+		onbranchclick={selectDiagramBranch}
+		onclear={onmapclick}
+	/>
+{:else}
+	{#key mapGen}
+		<div class="map-stage">
+			<div class="map" {@attach initMap}></div>
+			{#if selectedBusCue}
+				{#key selectedBusCue.key}
+					<div class="selected-bus-cue" bind:this={selectedCueEl} aria-hidden="true"></div>
+				{/key}
+			{/if}
+			{#if selectedBranchCue}
+				{#key selectedBranchCue.key}
+					<svg class="selected-branch-cue" bind:this={selectedBranchCueEl} aria-hidden="true">
+						<path class="selected-branch-halo" bind:this={selectedBranchHaloPath}></path>
+						<path class="selected-branch-line" bind:this={selectedBranchLinePath}></path>
+					</svg>
+				{/key}
+			{/if}
+			{#if selectedMultiDetail}
+				<!-- Content is built imperatively in syncMultiDetail (screen-space
 			     projection); file-derived text is escaped there. -->
-			<svg class="multi-detail" bind:this={multiDetailEl} aria-hidden="true"></svg>
-		{/if}
-	</div>
-{/key}
+				<svg class="multi-detail" bind:this={multiDetailEl} aria-hidden="true"></svg>
+			{/if}
+		</div>
+	{/key}
+{/if}
 
 {#if app.placingId && map}
 	<button
 		type="button"
 		class="place-at-center mono"
-		style="--chrome-inset: {chromeInset}px"
 		onclick={() => {
 			if (!map) return;
 			const center = map.getCenter();
@@ -1278,16 +1587,21 @@
 	}
 
 	.multi-detail :global(.mc-leader) {
-		stroke: rgba(32, 36, 43, 0.35);
+		stroke: rgb(var(--ink-rgb) / 0.35);
 		stroke-width: 1;
 		stroke-dasharray: 2 2;
 	}
 
 	.multi-detail :global(.mc-ground line) {
-		stroke: #3a3a3a;
+		stroke: var(--mc-ground-stroke);
 		stroke-width: 1.3;
 	}
 
+	.multi-detail :global(.mc-terminal) {
+		stroke: var(--ink);
+		stroke-width: 1.2;
+	}
+
 	.multi-detail :global(.mc-term) {
 		fill: var(--ink, #20242b);
 		font-family: var(--font-mono);
@@ -1398,7 +1712,7 @@
 	.place-at-center {
 		position: absolute;
 		left: 50%;
-		bottom: calc(92px + var(--chrome-inset, 0px));
+		bottom: 92px;
 		z-index: 15;
 		transform: translateX(-50%);
 		padding: 7px 14px;
@@ -1408,48 +1722,46 @@
 		color: var(--text-accent);
 		font-size: 11px;
 		cursor: pointer;
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-cue);
 	}
 
 	@media (max-width: 420px) {
 		.place-at-center {
-			bottom: calc(78px + var(--chrome-inset, 0px));
+			bottom: 78px;
 		}
 	}
 
 	.map :global(.maplibregl-ctrl-bottom-right) {
 		right: 20px;
-		/* rides above the bottom sheet so attribution stays legible */
-		bottom: calc(18px + var(--chrome-inset, 0px));
+		bottom: 12px;
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		align-items: flex-end;
-		gap: 6px;
+		gap: 16px;
 		transition:
 			bottom var(--dur-med) var(--ease-out),
 			opacity var(--dur-fast) var(--ease-out);
 	}
 
-	/* The sheet has taken the map; nothing left down there to attribute. */
-	.map-stage.chrome-clear :global(.maplibregl-ctrl-bottom-right) {
-		opacity: 0;
-		pointer-events: none;
-	}
-
 	.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl) {
 		float: none;
 		margin: 0;
 	}
 
+	.map :global(.maplibregl-ctrl-group) {
+		order: 2;
+	}
+
 	.map :global(.maplibregl-ctrl-attrib) {
-		order: -1;
+		order: 1;
 		position: relative;
-		right: 2px;
+		bottom: 0;
+		right: 0;
 		width: auto;
 		min-width: 0;
 		max-width: calc(100vw - 96px);
 		box-sizing: border-box;
-		background: rgba(252, 251, 247, 0.75);
+		background: rgb(var(--paper-rgb) / 0.75);
 		font-family: var(--font-mono);
 		font-size: 10px;
 		white-space: nowrap;
@@ -1490,35 +1802,39 @@
 		line-height: 1.5;
 		padding: 8px 10px !important;
 		border-radius: 2px;
-		box-shadow: 0 2px 10px rgba(32, 36, 43, 0.12);
+		box-shadow: var(--elev-tooltip);
 	}
 
 	@media (max-width: 760px) {
+		.map :global(.maplibregl-ctrl-bottom-right) {
+			bottom: 12px;
+			right: 12px;
+			gap: 12px;
+		}
 		.map :global(.maplibregl-ctrl-attrib) {
-			/* last in the column so it rests on the sheet's edge instead of
-			   floating over the network a zoom control's height above it */
-			order: 1;
+			position: relative;
+			bottom: auto;
 			width: auto;
 			min-width: 0;
 			right: 0;
 			white-space: normal;
 		}
 
-		/* The band of map a phone has left between the header and the sheet is
-		   about the height of the solve card, which covers the buttons wherever
-		   they land. Pinch and double tap zoom; the attribution stays. */
 		.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group) {
-			display: none;
+			display: flex;
+		}
+		.map :global(.maplibregl-ctrl-group button + button) {
+			border-top: 0;
+			border-left: 1px solid var(--line);
 		}
 	}
 
-	/* One line on a small phone: wrapped attribution turns into a wide block
-	   sitting over the network. */
+	/* Attribution shares the bottom row with touch-sized zoom buttons. */
 	@media (max-width: 460px) {
 		.map :global(.maplibregl-ctrl-attrib) {
-			max-width: calc(100vw - 20px);
+			max-width: calc(100vw - 140px);
 			font-size: 9px;
-			white-space: nowrap;
+			white-space: normal;
 		}
 	}