@tellegen/svelte 0.1.1 → 0.2.0

package/dist/components/ControlPanel.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getAppState, getController, getUiConfig } from '../context.svelte.js';
+	import { splitName } from '../format.js';
+	import AppFooter from './AppFooter.svelte';
 	import BindingLines from './BindingLines.svelte';
+	import BusPicker from './BusPicker.svelte';
 	import DemandSlider from './DemandSlider.svelte';
 	import DisplayControls from './DisplayControls.svelte';
 	import FormulationSelector from './FormulationSelector.svelte';
@@ -15,81 +19,297 @@
 	const app = getAppState();
 	const ctrl = getController();
 	const config = getUiConfig();
+
+	// Bottom sheet heights, compact layout only. peek is measured from the grab
+	// bar; half and full are fractions of the viewport.
+	type Snap = 'peek' | 'half' | 'full';
+	const SNAPS: Snap[] = ['peek', 'half', 'full'];
+	const SNAP_FRACTION: Record<Snap, number> = { peek: 0, half: 0.46, full: 0.92 };
+	/** Below this the viewport is a landscape phone and half has to give up room. */
+	const SHORT_VIEWPORT_PX = 560;
+	/** px/ms above which a release snaps in the drag direction instead of to the nearest. */
+	const FLICK_SPEED = 0.35;
+	/** Map left visible above a full sheet, on top of the header it also clears. */
+	const FULL_SNAP_MAP_BAND = 14;
+
+	let snap = $state<Snap>('half');
+	let headEl = $state.raw<HTMLElement | undefined>(undefined);
+	let bodyEl = $state.raw<HTMLElement | undefined>(undefined);
+	let headHeight = $state(52);
+	/** Height under an active drag; null when resting on a snap. */
+	let dragHeight = $state<number | null>(null);
+
+	const fractionFor = (s: Snap) =>
+		s === 'half' && app.viewportHeight < SHORT_VIEWPORT_PX ? 0.38 : SNAP_FRACTION[s];
+
+	const snapHeight = (s: Snap) =>
+		s === 'peek'
+			? headHeight
+			: Math.min(
+					Math.round(app.viewportHeight * fractionFor(s)),
+					app.viewportHeight - app.headerInset - FULL_SNAP_MAP_BAND
+				);
+	const sheetHeight = $derived(dragHeight ?? snapHeight(snap));
+
+	const caseLabel = $derived(
+		app.active
+			? splitName(app.active.name)[0]
+			: (app.activeLocal?.label ?? app.activeMulti?.label ?? '')
+	);
+
+	/** Single line shown on the grab bar while collapsed. */
+	const summary = $derived.by(() => {
+		if (app.error) return 'error — open for details';
+		if (app.selectedBus !== null) return `bus ${app.selectedBus} · ∂LMP/∂d`;
+		if (app.selectedBranch !== null) return `line ${app.selectedBranch} · ∂LMP/∂rating`;
+		const stats = ctrl.networkStats;
+		if (!stats) return app.parsingFile ? 'parsing…' : 'loading…';
+		return `${caseLabel} · ${stats.buses} buses · ${stats.branches} lines`;
+	});
+
+	const expandLabel = $derived(
+		snap === 'full' ? 'collapse the control panel' : 'expand the control panel'
+	);
+
+	/** A selection whose readout has resolved (or is resolving). */
+	const busReadout = $derived(
+		app.selectedBus !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)
+	);
+	const branchReadout = $derived(
+		app.selectedBranch !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)
+	);
+	/** Compact only: a resolved selection outranks the case stats it was read
+	 * against. Gated on networkStats because that is what renders the readout. */
+	const selectionLeads = $derived(
+		app.compactLayout && !!ctrl.networkStats && (busReadout || branchReadout)
+	);
+
+	$effect(() => {
+		app.sheetInset = app.compactLayout ? sheetHeight : 0;
+	});
+
+	// peek height tracks the grab bar, which resizes when the summary line changes.
+	$effect(() => {
+		const el = headEl;
+		if (!el) return;
+		const measure = () => (headHeight = Math.round(el.getBoundingClientRect().height));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
+	// A map selection renders the sensitivity readout and the demand control, both
+	// of which are below the fold at peek. The body also has to go back to the top:
+	// reaching the bus lookup scrolls it down, and the readout that replaces it as
+	// the first block would otherwise open out of view.
+	$effect(() => {
+		const selected = app.selectedBus ?? app.selectedBranch;
+		if (selected === null) return;
+		untrack(() => {
+			if (!app.compactLayout) return;
+			if (snap === 'peek') snap = 'half';
+			if (bodyEl) bodyEl.scrollTop = 0;
+		});
+	});
+
+	function cycle() {
+		snap = snap === 'peek' ? 'half' : snap === 'half' ? 'full' : 'peek';
+	}
+
+	function nearestSnap(height: number): Snap {
+		return SNAPS.reduce((best, s) =>
+			Math.abs(snapHeight(s) - height) < Math.abs(snapHeight(best) - height) ? s : best
+		);
+	}
+
+	let dragStartY = 0;
+	let dragStartHeight = 0;
+	let dragMoved = false;
+	let lastY = 0;
+	let lastT = 0;
+	let speed = 0;
+
+	function onPointerDown(e: PointerEvent) {
+		if (!app.compactLayout || !e.isPrimary) return;
+		if (e.currentTarget instanceof HTMLElement) e.currentTarget.setPointerCapture(e.pointerId);
+		dragStartY = e.clientY;
+		dragStartHeight = sheetHeight;
+		dragHeight = dragStartHeight;
+		dragMoved = false;
+		speed = 0;
+		lastY = e.clientY;
+		lastT = e.timeStamp;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (dragHeight === null) return;
+		const dy = dragStartY - e.clientY;
+		if (Math.abs(dy) > 4) dragMoved = true;
+		const dt = e.timeStamp - lastT;
+		if (dt > 0) speed = (lastY - e.clientY) / dt;
+		lastY = e.clientY;
+		lastT = e.timeStamp;
+		dragHeight = Math.max(
+			snapHeight('peek'),
+			Math.min(snapHeight('full'), dragStartHeight + dy)
+		);
+	}
+
+	function onPointerUp() {
+		if (dragHeight === null) return;
+		const height = dragHeight;
+		dragHeight = null;
+		if (!dragMoved) return; // a tap; the click handler cycles
+		const landed = nearestSnap(height);
+		if (Math.abs(speed) > FLICK_SPEED) {
+			const next = SNAPS.indexOf(landed) + (speed > 0 ? 1 : -1);
+			snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
+		} else {
+			snap = landed;
+		}
+	}
+
+	function onHeadKeydown(e: KeyboardEvent) {
+		const step = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
+		if (step === 0) return;
+		e.preventDefault();
+		const next = SNAPS.indexOf(snap) + step;
+		snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
+	}
 </script>
 
-<aside class="panel">
-	{#if app.error}
-		<p class="error mono">{app.error}</p>
-		<div class="error-actions">
-			<button class="reset mono" onclick={ctrl.retryError}>retry</button>
-			<button class="reset mono" onclick={() => (app.error = null)}>dismiss</button>
-		</div>
-	{/if}
-	{#if app.parsingFile}
-		<p class="dim mono blink">parsing&hellip;</p>
-	{/if}
-	{#if app.activeLocal}
-		<LocalCaseDetails />
-	{/if}
-	{#if app.activeMulti}
-		<MulticonductorDetails />
+<aside
+	class="panel"
+	class:sheet={app.compactLayout}
+	class:dragging={dragHeight !== null}
+	style:height={app.compactLayout ? `${sheetHeight}px` : null}
+>
+	{#if app.compactLayout}
+		<button
+			type="button"
+			class="sheet-head"
+			bind:this={headEl}
+			aria-expanded={snap !== 'peek'}
+			aria-controls="control-panel-body"
+			aria-label={expandLabel}
+			onpointerdown={onPointerDown}
+			onpointermove={onPointerMove}
+			onpointerup={onPointerUp}
+			onpointercancel={onPointerUp}
+			onkeydown={onHeadKeydown}
+			onclick={() => {
+				// click fires after pointerup; a keyboard activation leaves dragMoved
+				// unset, so clear it here rather than in the pointer handlers
+				const moved = dragMoved;
+				dragMoved = false;
+				if (!moved) cycle();
+			}}
+		>
+			<span class="grabber" aria-hidden="true"></span>
+			{#if snap === 'peek'}
+				<span class="sheet-summary mono">{summary}</span>
+			{/if}
+		</button>
 	{/if}
-	{#if !ctrl.networkStats}
-		{#if !app.error && !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>
-				{#if config.loadDefaultCases}
-					<button class="reset mono" onclick={ctrl.restoreDefaultCases}
-						>restore default cases</button
-					>
+
+	<div class="panel-body" id="control-panel-body" bind:this={bodyEl}>
+		{#snippet selectionBlock()}
+			{#if busReadout}
+				<SensitivityReadout />
+
+				<DemandSlider />
+
+				{#if ctrl.showMoverSlot}
+					<TopMovers />
+				{/if}
+			{:else if branchReadout}
+				<SensitivityReadout />
+
+				<RatingSlider />
+
+				{#if ctrl.showMoverSlot}
+					<TopMovers />
 				{/if}
-			{:else if ctrl.loadingBackendCase}
-				<p class="dim mono blink">loading selected case&hellip;</p>
 			{:else}
-				<p class="dim mono blink">loading cases&hellip;</p>
+				<DisplayControls />
 			{/if}
+		{/snippet}
+
+		{#if app.error}
+			<p class="error mono">{app.error}</p>
+			<div class="error-actions">
+				<button class="reset mono" onclick={ctrl.retryError}>retry</button>
+				<button class="reset mono" onclick={() => (app.error = null)}>dismiss</button>
+			</div>
 		{/if}
-	{:else}
-		{#if !app.activeLocal}
-			<NetworkStats />
+		{#if app.parsingFile}
+			<p class="dim mono blink">parsing&hellip;</p>
 		{/if}
 
-		{#if ctrl.activeSolvable}
-			<FormulationSelector />
-		{/if}
+		<!-- The sheet shows a few hundred px at most, so what the last tap produced
+		     leads; the case provenance and stats it was read against follow. -->
+		{#if selectionLeads}
+			{@render selectionBlock()}
 
-		{#if !app.placingLocalId}
-			<BindingLines />
+			<hr />
 		{/if}
 
-		<hr />
+		{#if app.activeLocal}
+			<LocalCaseDetails />
+		{/if}
+		{#if app.activeMulti}
+			<MulticonductorDetails />
+		{/if}
+		{#if !ctrl.networkStats}
+			{#if !app.error && !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>
+					{#if config.loadDefaultCases}
+						<button class="reset mono" onclick={ctrl.restoreDefaultCases}
+							>restore default cases</button
+						>
+					{/if}
+				{:else if ctrl.loadingBackendCase}
+					<p class="dim mono blink">loading selected case&hellip;</p>
+				{:else}
+					<p class="dim mono blink">loading cases&hellip;</p>
+				{/if}
+			{/if}
+		{:else}
+			{#if !app.activeLocal}
+				<NetworkStats />
+			{/if}
 
-		{#if app.selectedBus !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)}
-			<SensitivityReadout />
+			{#if ctrl.activeSolvable}
+				<FormulationSelector />
+			{/if}
 
-			<DemandSlider />
+			{#if app.compactLayout}
+				<BusPicker inline />
+			{/if}
 
-			{#if ctrl.showMoverSlot}
-				<TopMovers />
+			{#if !app.placingLocalId}
+				<BindingLines />
 			{/if}
-		{:else if app.selectedBranch !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)}
-			<SensitivityReadout />
 
-			<RatingSlider />
+			{#if !selectionLeads}
+				<hr />
 
-			{#if ctrl.showMoverSlot}
-				<TopMovers />
+				{@render selectionBlock()}
 			{/if}
-		{:else}
-			<DisplayControls />
-		{/if}
 
-		<hr />
+			<hr />
 
-		<SizeLegend />
-	{/if}
+			<SizeLegend />
+		{/if}
+
+		{#if app.compactLayout && config.showFooter}
+			<AppFooter inline />
+		{/if}
+	</div>
 </aside>
 
 <style>
@@ -98,10 +318,11 @@
 		top: 76px;
 		left: 20px;
 		z-index: 10;
+		display: flex;
+		flex-direction: column;
 		width: 312px;
 		max-height: calc(100% - 122px);
-		overflow-y: auto;
-		padding: 16px 18px;
+		overflow: hidden;
 		background: var(--panel);
 		border: 1px solid var(--line);
 		border-radius: 3px;
@@ -110,6 +331,16 @@
 		animation: rise 0.5s 0.12s ease-out both;
 	}
 
+	.panel-body {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow-y: auto;
+		/* A flick that runs past the end of the panel must not scroll the page or
+		   pan the map underneath. */
+		overscroll-behavior: contain;
+		padding: 16px 18px;
+	}
+
 	hr {
 		border: 0;
 		border-top: 1px solid var(--line);
@@ -126,24 +357,80 @@
 		gap: 6px;
 	}
 
-	@media (max-width: 760px) {
-		.panel {
-			top: auto;
-			left: 10px;
-			right: 10px;
-			bottom: 40px;
-			width: auto;
-			max-height: 44dvh;
-			padding: 14px 16px;
-			background: var(--paper);
-		}
+	/* The grab bar: a 44px strip that drags the sheet and cycles it on tap. */
+	.sheet-head {
+		flex: 0 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 7px;
+		width: 100%;
+		min-height: 44px;
+		padding: 9px 16px 11px;
+		background: none;
+		border: 0;
+		border-bottom: 1px solid transparent;
+		color: inherit;
+		font: inherit;
+		cursor: grab;
+		/* the browser must not claim the vertical gesture */
+		touch-action: none;
 	}
 
-	@media (max-width: 420px) {
-		.panel {
-			bottom: 34px;
-			max-height: 46dvh;
-		}
+	.sheet-head:active {
+		cursor: grabbing;
+	}
+
+	.grabber {
+		width: 40px;
+		height: 4px;
+		border-radius: 2px;
+		background: var(--line);
+	}
+
+	.sheet-head:hover .grabber,
+	.sheet-head:focus-visible .grabber {
+		background: var(--accent);
+	}
+
+	.sheet-summary {
+		max-width: 100%;
+		overflow: hidden;
+		font-size: 11.5px;
+		color: var(--text-secondary);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sheet {
+		top: auto;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: auto;
+		max-height: none;
+		background: var(--paper);
+		border-width: 1px 0 0;
+		border-radius: 12px 12px 0 0;
+		box-shadow: 0 -6px 28px rgba(32, 36, 43, 0.14);
+		transition: height var(--dur-med) var(--ease-out);
+	}
+
+	.sheet .panel-body {
+		padding: 0 16px 14px;
+		/* clear the home indicator on a phone with no bezel */
+		padding-bottom: max(14px, env(safe-area-inset-bottom));
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.sheet .sheet-head {
+		border-bottom-color: var(--line);
+	}
+
+	/* A dragged sheet tracks the finger; the snap animation is for releases. */
+	.sheet.dragging {
+		transition: none;
 	}
 
 	@media (prefers-reduced-motion: reduce) {

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

@@ -1,19 +1,3 @@
-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 ControlPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ControlPanel = InstanceType<typeof ControlPanel>;
+declare const ControlPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ControlPanel = ReturnType<typeof ControlPanel>;
 export default ControlPanel;
-//# sourceMappingURL=ControlPanel.svelte.d.ts.map

package/dist/components/DemandSlider.svelte

@@ -4,6 +4,7 @@
 
 	const app = getAppState();
 	const ctrl = getController();
+	const disabled = $derived(ctrl.sliderDisabled);
 
 	// Fill from the committed demand to the live thumb. The local number line stays
 	// stable after release; only the committed tick moves.
@@ -23,6 +24,7 @@
 	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 is the estimate of total cost change versus base 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.';
 </script>
@@ -39,32 +41,41 @@
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'local'}
-					aria-pressed={app.demandRangeMode === 'local'}
-					aria-label="nearby demand range"
+						aria-pressed={app.demandRangeMode === 'local'}
+						aria-label="nearby demand range"
+						disabled={disabled}
 					title="range near the selected demand setting"
 					onclick={() => ctrl.setDemandRangeMode('local')}>nearby</button
 				>
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'full'}
-					aria-pressed={app.demandRangeMode === 'full'}
-					aria-label="full demand range"
+						aria-pressed={app.demandRangeMode === 'full'}
+						aria-label="full demand range"
+						disabled={disabled}
 					title="range from zero load to the local physical limit"
 					onclick={() => ctrl.setDemandRangeMode('full')}>full range</button
 				>
 			</div>
-			<span class="mono dim">{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW</span>
+				<span class="mono dim">
+					{#if disabled}
+						not adjustable
+					{:else}
+						{fmt.format(ctrl.sliderMin)} to {fmt.format(ctrl.sliderMax)} MW
+					{/if}
+				</span>
 		</div>
 		<div
 			class="slider-track"
 			style="--fill-lo:{fillLo}; --fill-hi:{fillHi}; --neutral-pos:{neutralPos}"
-			title={sliderTip}
+				title={disabled ? disabledTip : sliderTip}
 		>
 			<input
 				type="range"
 				min={ctrl.sliderMin}
-				max={ctrl.sliderMax}
-				step="any"
+					max={ctrl.sliderMax}
+					step="any"
+					disabled={disabled}
 				bind:value={ctrl.sliderCurrent, ctrl.setSliderPreview}
 				aria-label="demand delta at selected bus"
 				onpointerdown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
@@ -173,6 +184,15 @@
 		margin: 0;
 	}
 
+	input[type='range']:disabled {
+		opacity: 0.45;
+	}
+
+	.range-mode button:disabled {
+		cursor: default;
+		opacity: 0.45;
+	}
+
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;

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

@@ -1,4 +1,3 @@
 declare const DemandSlider: import("svelte").Component<Record<string, never>, {}, "">;
 type DemandSlider = ReturnType<typeof DemandSlider>;
 export default DemandSlider;
-//# sourceMappingURL=DemandSlider.svelte.d.ts.map

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

@@ -16,4 +16,3 @@ declare const DisplayControls: $$__sveltets_2_IsomorphicComponent<Record<string,
 }, {}, {}, string>;
 type DisplayControls = InstanceType<typeof DisplayControls>;
 export default DisplayControls;
-//# sourceMappingURL=DisplayControls.svelte.d.ts.map

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

@@ -16,4 +16,3 @@ declare const DropZone: $$__sveltets_2_IsomorphicComponent<Record<string, never>
 }, {}, {}, string>;
 type DropZone = InstanceType<typeof DropZone>;
 export default DropZone;
-//# sourceMappingURL=DropZone.svelte.d.ts.map

package/dist/components/FormulationSelector.svelte

@@ -79,4 +79,21 @@
 		opacity: 0.55;
 		cursor: progress;
 	}
+
+	@media (hover: none), (pointer: coarse) {
+		/* The select is sized to its longest option, which runs off a 320px screen.
+		   Let it shrink around the current value rather than truncate the label.
+		   16px also keeps Safari from zooming the layout viewport on focus. */
+		.formulation-row select {
+			flex: 0 1 auto;
+			min-width: 0;
+			min-height: 44px;
+			font-size: 16px;
+			padding-block: 6px;
+		}
+
+		.formulation-row > span {
+			flex: 0 0 auto;
+		}
+	}
 </style>

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

@@ -16,4 +16,3 @@ declare const FormulationSelector: $$__sveltets_2_IsomorphicComponent<Record<str
 }, {}, {}, string>;
 type FormulationSelector = InstanceType<typeof FormulationSelector>;
 export default FormulationSelector;
-//# sourceMappingURL=FormulationSelector.svelte.d.ts.map

package/dist/components/LocalCaseDetails.svelte

@@ -6,13 +6,16 @@
 	const app = getAppState();
 	const ctrl = getController();
 
-	// Powerio writer tokens the committed state exports to; label carries the extension.
+	// Export tokens the committed state writes to; labels carry their extensions.
+	// `model-json` is powerio's own model document, not a case format.
 	const EXPORT_FORMATS = [
 		{ token: 'matpower', label: 'MATPOWER (.m)' },
 		{ token: 'psse', label: 'PSS/E (.raw)' },
+		{ token: 'powerworld', label: 'PowerWorld (.aux)' },
+		{ token: 'pslf', label: 'PSLF (.epc)' },
 		{ token: 'powermodels-json', label: 'PowerModels (.json)' },
 		{ token: 'pandapower-json', label: 'pandapower (.json)' },
-		{ token: 'powerio-json', label: 'PowerIO (.json)' }
+		{ token: 'model-json', label: 'PowerIO model (.json)' }
 	];
 
 	let busy = $state(false);

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

@@ -1,4 +1,3 @@
 declare const LocalCaseDetails: import("svelte").Component<Record<string, never>, {}, "">;
 type LocalCaseDetails = ReturnType<typeof LocalCaseDetails>;
 export default LocalCaseDetails;
-//# sourceMappingURL=LocalCaseDetails.svelte.d.ts.map

package/dist/components/MulticonductorDetails.svelte

@@ -54,10 +54,10 @@
 				<dt>sources / loads / gens</dt>
 				<dd>{s.n_source} / {s.n_load} / {s.n_generator}</dd>
 			</div>
-			{#if s.n_ibr > 0 || s.n_shunt > 0}
+			{#if s.n_ibr > 0 || s.n_shunt > 0 || (s.n_capacitor ?? 0) > 0}
 				<div>
-					<dt>IBRs / shunts</dt>
-					<dd>{s.n_ibr} / {s.n_shunt}</dd>
+					<dt>IBRs / shunts / caps</dt>
+					<dd>{s.n_ibr} / {s.n_shunt} / {s.n_capacitor ?? 0}</dd>
 				</div>
 			{/if}
 		</dl>