@tellegen/svelte 0.4.0 → 0.4.2

package/dist/colors.js

@@ -31,6 +31,24 @@ const PRICE_STOPS = [
 ];
 export const priceColor = (t) => ramp(PRICE_STOPS, t);
 export const priceGradient = cssGradient(PRICE_STOPS);
+/** Sequential demand ramp: the upper three quarters of viridis, slate blue
+ * through teal and green to yellow. Lightness rises monotonically, the dimmest
+ * stop still reads on a dark basemap, and the cool hues cannot be mistaken for
+ * the warm nodal value ramp. */
+const DEMAND_STOPS = [
+    [59, 82, 139, 235],
+    [44, 114, 142, 235],
+    [33, 145, 140, 240],
+    [94, 201, 98, 245],
+    [253, 231, 37, 250]
+];
+/** Demand colour for a fraction `t` of the demand domain, on a square-root
+ * scale: bus demand is heavy tailed (a few large cities, many small towns),
+ * and a linear scale would paint everything but the largest buses one hue. */
+export const demandColor = (t) => ramp(DEMAND_STOPS, Math.sqrt(Math.max(0, t)));
+/** The demand ramp as a CSS gradient whose stops sit where the square-root
+ * scale puts them, so a legend bar reads linearly from its low to high label. */
+export const demandGradient = `linear-gradient(90deg, ${DEMAND_STOPS.map((s, i) => `rgb(${s[0]} ${s[1]} ${s[2]}) ${((i / (DEMAND_STOPS.length - 1)) ** 2 * 100).toFixed(2)}%`).join(', ')})`;
 /** 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
@@ -48,12 +66,25 @@ export function priceDomain(values) {
     const span = Math.max(hi - lo, 1);
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
+/** Demand colour domain: zero to the 98th percentile, at least 1 MW. Zero
+ * anchors the scale so a bus without load reads as none; the percentile keeps
+ * one metropolis from washing out every other bus, and the few above it clamp
+ * to the top of the ramp. */
+export function demandDomain(values) {
+    if (values.length === 0)
+        return { lo: 0, hi: 1 };
+    const sorted = [...values].sort((a, b) => a - b);
+    const hi = sorted[Math.min(sorted.length - 1, Math.floor(0.98 * sorted.length))];
+    return { lo: 0, hi: Math.max(hi, 1) };
+}
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
  * 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 === 'price')
         return priceDomain(values);
+    if (mode === 'demand')
+        return demandDomain(values);
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const { min: rawLo, max: rawHi } = extent(values);
@@ -164,3 +195,35 @@ export function branchWidth(loading) {
 export function busRadius(maxMw) {
     return 3.2 + 0.45 * Math.sqrt(Math.max(maxMw, 1));
 }
+/** Radius in px of every bus marker under `uniform` sizing, and the most a
+ * uniform marker grows to on the map. */
+export const UNIFORM_BUS_RADIUS = 4.5;
+/** The least a uniform marker shrinks to on the map, in px. */
+export const UNIFORM_BUS_MIN_RADIUS = 2;
+/** The ground radius of a uniform marker on the map, in metres. */
+export const UNIFORM_BUS_GROUND_RADIUS = 9000;
+/** Bus radius in px under a sizing choice: `power` scales with max(load, gen)
+ * through `busRadius`, `uniform` draws every bus alike. */
+export function busRadiusFor(sizing, maxMw) {
+    return sizing === 'uniform' ? UNIFORM_BUS_RADIUS : busRadius(maxMw);
+}
+/** Radius settings for the map's bus markers under a sizing choice. `power`
+ * sizes in pixels through `busRadius`. `uniform` gives every bus one ground
+ * radius, drawn between `UNIFORM_BUS_MIN_RADIUS` and `UNIFORM_BUS_RADIUS`
+ * pixels, so a whole country reads as a mesh of dots with its lines showing
+ * and a closer view as distinct buses. */
+export function busMarkerRadius(sizing) {
+    return sizing === 'uniform'
+        ? {
+            radius: () => UNIFORM_BUS_GROUND_RADIUS,
+            radiusUnits: 'meters',
+            radiusMinPixels: UNIFORM_BUS_MIN_RADIUS,
+            radiusMaxPixels: UNIFORM_BUS_RADIUS
+        }
+        : {
+            radius: busRadius,
+            radiusUnits: 'pixels',
+            radiusMinPixels: 0,
+            radiusMaxPixels: Number.MAX_SAFE_INTEGER
+        };
+}

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}
@@ -157,9 +160,11 @@
 					{@render selectionBlock()}
 				{/if}
 
-				<hr />
+				{#if app.busSizing === 'power'}
+					<hr />
 
-				<SizeLegend />
+					<SizeLegend />
+				{/if}
 			{/if}
 		{/if}
 		{#if app.compactLayout && config.showFooter}

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;

package/dist/components/DemandSlider.svelte

@@ -23,48 +23,45 @@
 	const neutralPos = $derived(thumbAlignedPos(neutralFrac));
 	const fillLo = $derived(valFrac < neutralFrac ? valPos : neutralPos);
 	const fillHi = $derived(valFrac < neutralFrac ? neutralPos : valPos);
-	const sliderTip =
-		'The black tick marks the last committed demand. Drag the knob to preview a new demand; release to solve and move the tick to that point.';
-	const disabledTip = 'this analysis bus is display-only; demand is not adjustable';
-	const scoreTip =
-		'Gradient estimates the declared objective change before the solve finishes. It uses the selected bus LMP times the demand step, plus local curvature when the preview engine is unavailable. Exact is the resolved OPF objective change.';
+	const sliderTip = 'Drag to preview, release to solve. The tick marks the committed demand.';
+	const disabledTip = 'Display-only bus; demand is fixed';
+	const scoreTip = 'Gradient: first-order estimate from the LMP. Exact: solved objective change.';
 </script>
 
 {#if ctrl.activeSolvable}
 	{@const c = ctrl.activeSolvable}
 	<div class="slider-block">
-		<div class="slider-head mono">
-			<span>&Delta; demand</span>
-			<span class="val">{signed(ctrl.sliderValue)} MW</span>
+		<div class="slider-head">
+			<span>Demand change</span>
+			<span class="val mono">{signed(ctrl.sliderValue)} MW</span>
 		</div>
 		<div class="range-mode">
-			<div class="segment mono" role="group" aria-label="demand range">
+			<div class="segment" role="group" aria-label="Demand range">
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'local'}
 					aria-pressed={app.demandRangeMode === 'local'}
-					aria-label="nearby demand range"
+					aria-label="Nearby demand range"
 					{disabled}
-					title="range near the selected demand setting"
-					onclick={() => ctrl.setDemandRangeMode('local')}>nearby</button
+					title="Range near the committed demand"
+					onclick={() => ctrl.setDemandRangeMode('local')}>Nearby</button
 				>
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'full'}
 					aria-pressed={app.demandRangeMode === 'full'}
-					aria-label="full range of demand"
+					aria-label="Full demand range"
 					{disabled}
-					title="range from zero load to the local physical limit"
-					onclick={() => ctrl.setDemandRangeMode('full')}>full range</button
+					title="Zero load to the local physical limit"
+					onclick={() => ctrl.setDemandRangeMode('full')}>Full range</button
 				>
 			</div>
-			<span class="mono dim">
-				{#if disabled}
-					not adjustable
-				{:else}
-					{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW
-				{/if}
-			</span>
+			{#if disabled}
+				<span class="dim">Not adjustable</span>
+			{:else}
+				<span class="mono dim">{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW</span
+				>
+			{/if}
 		</div>
 		<div
 			class="slider-track"
@@ -78,7 +75,7 @@
 				step="any"
 				{disabled}
 				bind:value={ctrl.sliderCurrent, ctrl.setSliderPreview}
-				aria-label="demand delta at selected bus"
+				aria-label="Demand delta at selected bus"
 				onpointerdown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
 				onkeydown={(e) => {
 					const next = sliderKeyValue(e.key, ctrl.sliderValue, ctrl.sliderMin, ctrl.sliderMax);
@@ -95,18 +92,18 @@
 			/>
 		</div>
 		<div class="demand-feedback" class:idle={!ctrl.previewing && !ctrl.isPerturbed(c)}>
-			<p class="pred mono dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
+			<p class="pred dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
 				{#if ctrl.predictedDeltaObj !== null && ctrl.previewing}
-					predicted &Delta;objective {signed(ctrl.predictedDeltaObj)}
+					Predicted objective change <span class="mono">{signed(ctrl.predictedDeltaObj)}</span>
 				{:else}
 					&nbsp;
 				{/if}
 			</p>
-			<p class="score mono" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
+			<p class="score" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
 				{#if ctrl.gradientScore && ctrl.isPerturbed(c)}
 					<span title={scoreTip}>
-						gradient {signed(ctrl.gradientScore.pred)}, exact {signed(ctrl.gradientScore.exact)} objective
-						units
+						Gradient <span class="mono">{signed(ctrl.gradientScore.pred)}</span>, exact
+						<span class="mono">{signed(ctrl.gradientScore.exact)}</span> objective units
 					</span>
 				{:else}
 					&nbsp;
@@ -114,7 +111,7 @@
 			</p>
 			<div class="reset-row">
 				{#if ctrl.isPerturbed(c)}
-					<button class="reset mono" onclick={() => ctrl.resetCase(c)}>reset demand</button>
+					<button class="reset" onclick={() => ctrl.resetCase(c)}>Reset demand</button>
 				{/if}
 			</div>
 		</div>

package/dist/components/DiagramCanvas.svelte

@@ -4,7 +4,14 @@
 	import type { Network, NetworkBus } from '../api.js';
 	import { getAppState, getController } from '../context.svelte.js';
 	import { getPanelLayout } from '../panels.svelte.js';
-	import { branchColor, busNeutral, busRadius, priceColor, scalarDomain } from '../colors.js';
+	import {
+		branchColor,
+		busNeutral,
+		busRadiusFor,
+		demandColor,
+		priceColor,
+		scalarDomain
+	} from '../colors.js';
 	import { rgbaCss } from '../format.js';
 	import type { MulticonductorCase } from '../state.svelte.js';
 	import { edgeColor, attachmentColor } from '../multiconductor.js';
@@ -66,6 +73,8 @@
 		if (multiconductor) return [];
 		if (!app.studyView) return ctrl.activeDisplay?.values ?? [];
 		const solution = app.studyView.solution;
+		if (app.displayMode === 'demand')
+			return app.studyView.network.buses.map((bus) => ({ bus: bus.id, value: bus.demand_mw }));
 		if (app.displayMode === 'angle') return solution?.va ?? [];
 		if (app.displayMode === 'voltage')
 			return (
@@ -107,7 +116,9 @@
 		return rgbaCss(
 			value === undefined
 				? busNeutral
-				: priceColor((value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12))
+				: (displayMode === 'demand' ? demandColor : priceColor)(
+						(value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12)
+					)
 		);
 	}
 	function branchLabel(id: number) {
@@ -348,7 +359,8 @@
 						<circle
 							cx={bus.lon}
 							cy={bus.lat}
-							r={Math.max(5, busRadius(Math.max(bus.demand_mw, bus.gen_mw))) / scale}
+							r={Math.max(5, busRadiusFor(app.busSizing, Math.max(bus.demand_mw, bus.gen_mw))) /
+								scale}
 							fill={color(bus)}
 							style:stroke={selectedBus === bus.id ? '#2f6fbb' : 'var(--diagram-bus-stroke)'}
 							stroke-width={selectedBus === bus.id ? 3 : 1}
@@ -364,7 +376,7 @@
 							>Bus {multiconductor ? bus.uid : bus.id}{!multiconductor && bus.name
 								? `, ${bus.name}`
 								: ''}, {(bus.demand_mw * (multiconductor ? 1000 : 1)).toFixed(1)}
-							{multiconductor ? 'kW' : 'MW'} demand{values.has(bus.id)
+							{multiconductor ? 'kW' : 'MW'} demand{displayMode !== 'demand' && values.has(bus.id)
 								? `, ${values.get(bus.id)!.toFixed(4)} ${displayMode === 'price' ? 'objective units/MW LMP' : displayMode === 'voltage' ? 'pu voltage' : 'rad voltage angle'}`
 								: ''}</title
 						>

package/dist/components/DisplayControls.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="mode display-mode">
-	<div class="segment mono" aria-label="bus color variable">
+	<div class="segment" aria-label="Bus color variable">
 		{#each ctrl.displayOptions as option (option.mode)}
 			<button
 				type="button"
@@ -19,27 +19,16 @@
 	</div>
 	<span class="mono dim">{ctrl.activeDisplay?.unit ?? ''}</span>
 	{#if app.sensitivityLoading}
-		<span class="mono dim blink">&part; loading&hellip;</span>
+		<span class="dim blink">Loading&hellip;</span>
 	{/if}
 </div>
 {#if ctrl.activeDisplay && ctrl.displayStats}
-	{#if ctrl.activeDisplay.mode === 'price'}
-		<div class="legend-heading">
-			<span class="legend-title">Locational marginal price</span>
-			<span
-				class="hint-dot mono"
-				title={ctrl.activeDisplay.copy}
-				aria-label={ctrl.activeDisplay.copy}>i</span
-			>
-		</div>
-	{:else}
-		<p class="dim small">{ctrl.activeDisplay.copy}</p>
-	{/if}
+	<p class="legend-title">{ctrl.activeDisplay.copy}</p>
 	<div class="legend" style:background={ctrl.activeDisplay.gradient}></div>
 	<div class="legend-labels mono">
 		{#if ctrl.displayStats.uniform !== null}
 			<span>
-				uniform {displayFmt(ctrl.activeDisplay.mode, ctrl.displayStats.uniform)}
+				Uniform {displayFmt(ctrl.activeDisplay.mode, ctrl.displayStats.uniform)}
 				{ctrl.activeDisplay.unit}
 			</span>
 		{:else}
@@ -70,18 +59,10 @@
 {/if}
 
 <style>
-	.legend-heading {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		margin-top: 10px;
-	}
-
 	.legend-title {
+		margin: 10px 0 0;
 		font-size: 12px;
 		font-weight: 600;
 		color: var(--ink);
 	}
-
-	/* .hint-dot lives in the shared stylesheet; SensitivityReadout uses it too. */
 </style>

package/dist/components/DropZone.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { getAppState } from '../context.svelte.js';
 
+	/** Optional host content rendered under the drop prompt. */
+	let { children }: { children?: Snippet } = $props();
+
 	const app = getAppState();
 </script>
 
 {#if app.dragOver}
 	<div class="dropzone" aria-hidden="true">
 		<div class="dropframe">
-			<p class="mono">drop to parse: case files or geographic files</p>
-			<p class="mono hint">parsed in your browser; the file never uploads</p>
+			<p>Drop case or geographic files</p>
+			{#if children}<div class="note">{@render children()}</div>{/if}
 		</div>
 	</div>
 {/if}
@@ -39,7 +43,7 @@
 		font-size: 13px;
 	}
 
-	.dropframe .hint {
+	.note {
 		font-size: 11px;
 		color: var(--text-secondary);
 	}

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

@@ -1,18 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DropZone: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DropZone = InstanceType<typeof DropZone>;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const DropZone: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropZone = ReturnType<typeof DropZone>;
 export default DropZone;