@tellegen/svelte 0.4.0 → 0.4.1

package/dist/TellegenMap.svelte

@@ -10,8 +10,10 @@
 		MAP_PALETTE,
 		branchColor,
 		branchWidth,
+		busMarkerRadius,
 		busNeutral,
-		busRadius,
+		busRadiusFor,
+		demandColor,
 		priceColor,
 		scalarDomain,
 		sensColor,
@@ -391,6 +393,8 @@
 				if (d.previewDomain.flat) return sensFlatColor(d.previewDomain);
 				return sensColor((d.preview.get(bus.id) ?? 0) / d.previewDomain.scale);
 			}
+			if (d.scalarMode === 'demand')
+				return demandColor(((d.scalar.get(bus.id) ?? 0) - d.scalarLo) / (d.scalarHi - d.scalarLo));
 			const mid = (d.scalarLo + d.scalarHi) / 2;
 			return priceColor(((d.scalar.get(bus.id) ?? mid) - d.scalarLo) / (d.scalarHi - d.scalarLo));
 		};
@@ -781,8 +785,9 @@
 				: `<br>&Delta; LMP ${preview >= 0 ? '+' : ''}${preview.toExponential(2)} objective units/MW`;
 		const localRow =
 			c instanceof CaseState ? '' : '<br><span style="opacity:0.6">local file</span>';
+		// Demand already has its own row below, so the demand colouring shows LMP here alone.
 		const scalarRow =
-			!d || d.scalarMode === 'price'
+			!d || d.scalarMode === 'price' || d.scalarMode === 'demand'
 				? `LMP ${price === undefined ? '&mdash;' : fmt.format(price)} objective units/MW`
 				: `${d.scalarLabel} ${
 						scalar === undefined ? '&mdash;' : displayFmt(d.scalarMode, scalar)
@@ -1054,20 +1059,23 @@
 		if (!overlay || !layerCtors) return;
 		const { PathLayer, ScatterplotLayer, IconLayer } = layerCtors;
 		const layers: Layer[] = [];
+		const marker = busMarkerRadius(app.busSizing);
 		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 ?? []);
+				mode === 'demand'
+					? study.network.buses.map((b) => ({ bus: b.id, value: b.demand_mw }))
+					: 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,
@@ -1097,13 +1105,17 @@
 					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',
+					getRadius: (b) => marker.radius(Math.max(b.demand_mw, b.gen_mw)),
+					radiusUnits: marker.radiusUnits,
+					radiusMinPixels: marker.radiusMinPixels,
+					radiusMaxPixels: marker.radiusMaxPixels,
 					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));
+							: (mode === 'demand' ? demandColor : priceColor)(
+									(value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12)
+								);
 					},
 					pickable: true,
 					stroked: true,
@@ -1116,7 +1128,7 @@
 						app.selectedBus = bus.id;
 						return true;
 					},
-					updateTriggers: { getFillColor: [study, mode, theme] }
+					updateTriggers: { getFillColor: [study, mode, theme], getRadius: [app.busSizing] }
 				})
 			);
 			overlay.setProps({ layers: [...layers, ...extraLayers] });
@@ -1163,8 +1175,10 @@
 					id: `buses-${c.id}`,
 					data: c.network.buses,
 					getPosition: (b) => [b.lon, b.lat],
-					getRadius: (b) => busRadius(Math.max(b.demand_mw, b.gen_mw)),
-					radiusUnits: 'pixels',
+					getRadius: (b) => marker.radius(Math.max(b.demand_mw, b.gen_mw)),
+					radiusUnits: marker.radiusUnits,
+					radiusMinPixels: marker.radiusMinPixels,
+					radiusMaxPixels: marker.radiusMaxPixels,
 					getFillColor: busFill(c.id),
 					stroked: true,
 					billboard: true,
@@ -1184,6 +1198,7 @@
 						return true;
 					},
 					updateTriggers: {
+						getRadius: [app.busSizing],
 						getFillColor: [display],
 						getLineColor: [app.selectedBus, app.activeCaseId, theme],
 						getLineWidth: [app.selectedBus, app.activeCaseId]
@@ -1237,8 +1252,10 @@
 						id: `local-buses-${c.id}`,
 						data: c.view.buses,
 						getPosition: (b) => [b.lon, b.lat],
-						getRadius: (b) => busRadius(Math.max(b.demand_mw, b.gen_mw)),
-						radiusUnits: 'pixels',
+						getRadius: (b) => marker.radius(Math.max(b.demand_mw, b.gen_mw)),
+						radiusUnits: marker.radiusUnits,
+						radiusMinPixels: marker.radiusMinPixels,
+						radiusMaxPixels: marker.radiusMaxPixels,
 						getFillColor: d ? busFill(c.id) : palette.grey,
 						stroked: true,
 						billboard: true,
@@ -1258,6 +1275,7 @@
 							return true;
 						},
 						updateTriggers: {
+							getRadius: [app.busSizing],
 							getFillColor: [display],
 							getLineColor: [app.selectedBus, app.activeLocalId, theme],
 							getLineWidth: [app.selectedBus, app.activeLocalId]
@@ -1351,7 +1369,7 @@
 					id: `multi-buses-${c.id}`,
 					data: c.view.buses,
 					getPosition: (b) => [b.lon, b.lat],
-					getRadius: (b) => busRadius(Math.max(b.load_kw, b.gen_kw)),
+					getRadius: (b) => busRadiusFor(app.busSizing, Math.max(b.load_kw, b.gen_kw)),
 					radiusUnits: 'pixels',
 					radiusMinPixels: 3,
 					getFillColor: (b) => multiBusFill(b),
@@ -1375,6 +1393,7 @@
 						return true;
 					},
 					updateTriggers: {
+						getRadius: [app.busSizing],
 						getLineColor: [selectedId, theme],
 						getLineWidth: [selectedId]
 					}

package/dist/colors.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayMode } from './state.svelte.js';
+import type { BusSizing, DisplayMode } from './state.svelte.js';
 export type RGBA = [number, number, number, number];
 export interface SensitivityDomain {
     min: number;
@@ -10,6 +10,13 @@ export interface SensitivityDomain {
 }
 export declare const priceColor: (t: number) => RGBA;
 export declare const priceGradient: string;
+/** 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 declare const demandColor: (t: number) => RGBA;
+/** 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 declare const demandGradient: 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
@@ -20,6 +27,14 @@ export declare function priceDomain(values: number[]): {
     lo: number;
     hi: number;
 };
+/** 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 declare function demandDomain(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; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
@@ -66,3 +81,24 @@ export declare function branchWidth(loading: number): number;
 /** Bus radius in px; area tracks max(load, gen) so big plants and big loads
  * both read at a glance. Shared by the map layers and the size legend. */
 export declare function busRadius(maxMw: number): number;
+/** Radius in px of every bus marker under `uniform` sizing, and the most a
+ * uniform marker grows to on the map. */
+export declare const UNIFORM_BUS_RADIUS = 4.5;
+/** The least a uniform marker shrinks to on the map, in px. */
+export declare const UNIFORM_BUS_MIN_RADIUS = 2;
+/** The ground radius of a uniform marker on the map, in metres. */
+export declare 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 declare function busRadiusFor(sizing: BusSizing, maxMw: number): number;
+/** 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 declare function busMarkerRadius(sizing: BusSizing): {
+    radius: (maxMw: number) => number;
+    radiusUnits: 'meters' | 'pixels';
+    radiusMinPixels: number;
+    radiusMaxPixels: number;
+};

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/ControlPanel.svelte

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

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/controller.svelte.js

@@ -487,7 +487,7 @@ export class Controller {
             return null;
         const domain = scalarDomain(this.activeDisplay.mode, values);
         const { min, max } = extent(values);
-        const flatThreshold = this.activeDisplay.mode === 'price' ? 1 : 1e-5;
+        const flatThreshold = this.activeDisplay.mode === 'price' || this.activeDisplay.mode === 'demand' ? 1 : 1e-5;
         return {
             lo: { value: domain.lo, clamped: min < domain.lo - flatThreshold / 20 },
             hi: { value: domain.hi, clamped: max > domain.hi + flatThreshold / 20 },
@@ -1740,7 +1740,9 @@ export class Controller {
         if (FORMULATIONS.find((f) => f.id === next)?.disabled)
             return;
         c.formulation = next;
-        this.app.displayMode = next === 'acpf' ? 'voltage' : 'price';
+        // Demand does not depend on the calculation, so a demand colouring stays.
+        if (this.app.displayMode !== 'demand')
+            this.app.displayMode = next === 'acpf' ? 'voltage' : 'price';
         this.bumpRevision(c);
         // The committed point carries over (same demand), but the model and its solution do
         // not; drop the Study and the cached solutions so they rebuild under `next`.

package/dist/display.d.ts

@@ -12,8 +12,9 @@ export type DisplayOption = {
 };
 /** Variables present in the current result. Power flow has no LMP values. */
 export declare function displayMetaFor(c: SolvableCase | null): DisplayOption[];
-/** Bus LMPs, voltage angles in radians, or voltage magnitudes in per unit.
- * SOCWR supplies squared voltages, which are converted to magnitudes here. */
+/** Bus LMPs, voltage angles in radians, voltage magnitudes in per unit, or
+ * demand in MW with the case's committed changes. SOCWR supplies squared
+ * voltages, which are converted to magnitudes here. */
 export declare function displaySeriesFor(c: SolvableCase | null, mode: DisplayMode): {
     bus: number;
     value: number;

package/dist/display.js

@@ -1,4 +1,4 @@
-import { priceGradient } from './colors.js';
+import { demandGradient, priceGradient } from './colors.js';
 import { priceCopy } from './format.js';
 import { CaseState } from './state.svelte.js';
 /** Variables present in the current result. Power flow has no LMP values. */
@@ -35,14 +35,32 @@ export function displayMetaFor(c) {
             gradient: priceGradient
         });
     }
+    // Last, so a mode the result cannot show still falls back to a result variable.
+    if (c.network?.buses.length) {
+        options.push({
+            mode: 'demand',
+            label: 'demand',
+            unit: 'MW',
+            copy: 'Bus demand, including committed changes, on a square-root scale.',
+            gradient: demandGradient
+        });
+    }
     return options;
 }
-/** Bus LMPs, voltage angles in radians, or voltage magnitudes in per unit.
- * SOCWR supplies squared voltages, which are converted to magnitudes here. */
+/** Bus LMPs, voltage angles in radians, voltage magnitudes in per unit, or
+ * demand in MW with the case's committed changes. SOCWR supplies squared
+ * voltages, which are converted to magnitudes here. */
 export function displaySeriesFor(c, mode) {
     const sol = c?.solution;
-    if (!sol)
+    if (!c || !sol)
         return [];
+    if (mode === 'demand') {
+        const deltas = caseDeltas(c);
+        return (c.network?.buses ?? []).map((b) => ({
+            bus: b.id,
+            value: b.demand_mw + (deltas[b.id] ?? 0)
+        }));
+    }
     if (mode === 'angle')
         return sol.va;
     if (mode === 'voltage') {

package/dist/format.js

@@ -59,4 +59,4 @@ export function extent(values) {
 export const fmt = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
 export const signed = (v) => `${v < 0 ? '−' : '+'}${fmt.format(Math.abs(v))}`;
 export const signedExp = (v) => `${v < 0 ? '−' : '+'}${Math.abs(v).toExponential(2)}`;
-export const displayFmt = (mode, value) => mode === 'price' ? fmt.format(value) : value.toFixed(3);
+export const displayFmt = (mode, value) => mode === 'price' || mode === 'demand' ? fmt.format(value) : value.toFixed(3);

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export type { ControllerOptions, OpenBalancedModuleInput } from './controller.sv
 export type { BasemapFallbackReason, BasemapMapLike, BasemapProvider, BasemapSpec, BasemapStyle, BasemapSwitch, BasemapTheme, DefaultBasemap, MapProjection, MapTheme, ResolvedBasemap, StyleEdit } from './basemap.js';
 export type { MapPalette } from './colors.js';
 export type { DisplayOption } from './display.js';
-export type { CameraSnapshot, DiagramCameraSnapshot, DemandRangeMode, DisplayMode, FallbackTarget, LocalCaseInit, LocalSubstations, MultiCaseSummary, MultiCoordsKind, SolvableCase, StudyDisplaySnapshot, SolveBackend } from './state.svelte.js';
+export type { BusSizing, CameraSnapshot, DiagramCameraSnapshot, DemandRangeMode, DisplayMode, FallbackTarget, LocalCaseInit, LocalSubstations, MultiCaseSummary, MultiCoordsKind, SolvableCase, StudyDisplaySnapshot, SolveBackend } from './state.svelte.js';
 export type { MultiView, PlacedMultiBus, PlacedMultiEdge } from './multiconductor.js';
 export type { CaseFileSummary, DistAttachmentKind, DistEdgeKind, DistGraph, DistGraphAttachment, DistGraphBus, DistGraphEdge, DisplayPreview, Formulation, IngestedCase, IngestedDistCase, IngestedJsonDrop, JsonDropClassification, JsonDropKind, CapacityPlanBusWeightJson, CapacityPlanIterationJson, CapacityPlanOutcomeJson, CapacityPlanRatingChangeJson, CapacityPlanResultSummaryJson, CapacityPlanSpecJson, ImplicitObjectiveJson, SensTarget, Topology, TopologyBranch, TopologyBus } from '@tellegen/engine';
 export { default as McResults } from './components/McResults.svelte';

package/dist/map.d.ts

@@ -3,7 +3,7 @@ import TellegenMap from './TellegenMap.svelte';
 export { default as TellegenMap } from './TellegenMap.svelte';
 export { CARTO_STYLES, OPENFREEMAP_STYLES, attachBasemapFallback, cartoStyleUrl, defaultBasemap, isOpenFreeMapStyle, openFreeMapEdits, resolveBasemap } from './basemap.js';
 export type { BasemapFallbackReason, BasemapMapLike, BasemapProvider, BasemapSpec, BasemapStyle, BasemapSwitch, BasemapTheme, DefaultBasemap, MapProjection, MapTheme, ResolvedBasemap, StyleEdit } from './basemap.js';
-export { MAP_PALETTE, branchColor, branchWidth, busNeutral, busRadius, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain } from './colors.js';
+export { MAP_PALETTE, branchColor, branchWidth, busNeutral, busRadius, busMarkerRadius, busRadiusFor, demandColor, demandDomain, demandGradient, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain, UNIFORM_BUS_GROUND_RADIUS, UNIFORM_BUS_MIN_RADIUS, UNIFORM_BUS_RADIUS } from './colors.js';
 export { caseDeltas, displayMetaFor, displaySeriesFor } from './display.js';
 export type { MapPalette, RGBA, SensitivityDomain } from './colors.js';
 export type { DisplayOption } from './display.js';

package/dist/map.js

@@ -1,5 +1,5 @@
 import TellegenMap from './TellegenMap.svelte';
 export { default as TellegenMap } from './TellegenMap.svelte';
 export { CARTO_STYLES, OPENFREEMAP_STYLES, attachBasemapFallback, cartoStyleUrl, defaultBasemap, isOpenFreeMapStyle, openFreeMapEdits, resolveBasemap } from './basemap.js';
-export { MAP_PALETTE, branchColor, branchWidth, busNeutral, busRadius, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain } from './colors.js';
+export { MAP_PALETTE, branchColor, branchWidth, busNeutral, busRadius, busMarkerRadius, busRadiusFor, demandColor, demandDomain, demandGradient, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain, UNIFORM_BUS_GROUND_RADIUS, UNIFORM_BUS_MIN_RADIUS, UNIFORM_BUS_RADIUS } from './colors.js';
 export { caseDeltas, displayMetaFor, displaySeriesFor } from './display.js';

package/dist/state.svelte.d.ts

@@ -22,7 +22,11 @@ export interface DiagramCameraSnapshot {
     scale: number;
 }
 export type DemandRangeMode = 'local' | 'full';
-export type DisplayMode = 'price' | 'angle' | 'voltage';
+export type DisplayMode = 'price' | 'angle' | 'voltage' | 'demand';
+/** How bus markers are sized on the map: by the larger of demand and generation
+ * (`power`), or all at one size (`uniform`) so dense networks keep their lines
+ * readable and colour carries the variable. */
+export type BusSizing = 'power' | 'uniform';
 /** The case a removal promoted to active, so the caller can hydrate it: a backend
  * case needs its network/solution loaded, a local needs a browser solve, and
  * `none` means nothing remains (or the removal left the active case untouched). */
@@ -293,6 +297,7 @@ export declare class AppState {
     } | null;
     demandRangeMode: DemandRangeMode;
     displayMode: DisplayMode;
+    busSizing: BusSizing;
     sensitivityLoading: boolean;
     errorRevision: number;
     /** Re-runs the operation behind the current `error`, when one applies. Every

package/dist/state.svelte.js

@@ -252,6 +252,7 @@ export class AppState {
     previewPrices = $state.raw(null);
     demandRangeMode = $state('local');
     displayMode = $state('price');
+    busSizing = $state('power');
     sensitivityLoading = $state(false);
     #error = $state(null);
     errorRevision = $state(0);

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 export type { CaseSummary, DemandDeltas, Network, NetworkBranch, NetworkBus, SensitivityColumn, Solution, SolveIteration, SolveStreamHandlers } from './api.js';
 export type { DisplayOption } from './display.js';
 export type { PlacedNetwork, PlacementCenter } from './synthetic-layout.js';
-export type { DemandRangeMode, DisplayMode, FallbackTarget, LocalCaseInit, LocalSubstations, SolvableCase, SolveBackend } from './state.svelte.js';
+export type { BusSizing, DemandRangeMode, DisplayMode, FallbackTarget, LocalCaseInit, LocalSubstations, SolvableCase, SolveBackend } from './state.svelte.js';
 export type { AppliedGeoCase, CaseFileSummary, DisplayPreview, Formulation, GeoApplyReport, IngestedCase, ParsedGeoLayer, StampedLayoutCase, Topology, TopologyBranch, TopologyBus } from '@tellegen/engine';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellegen/svelte",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Svelte components for tellegen power system maps, local case files, and browser solves.",
   "keywords": [
     "svelte",