@tellegen/svelte 0.4.0 → 0.4.2

package/dist/components/FormulationSelector.svelte

@@ -9,15 +9,10 @@
 {#if ctrl.activeSolvable}
 	{@const c = ctrl.activeSolvable}
 	<div class="formulation">
-		<label
-			class="formulation-row mono"
-			for="formulation-select"
-			title={formulationHint(c.formulation)}
-		>
+		<label class="formulation-row" for="formulation-select" title={formulationHint(c.formulation)}>
 			<span>Calculation</span>
 			<select
 				id="formulation-select"
-				class="mono"
 				disabled={c.solving}
 				value={c.formulation}
 				onchange={(e) => ctrl.changeFormulation(c, e.currentTarget.value as Formulation)}
@@ -52,7 +47,7 @@
 	}
 
 	.formulation-row select {
-		font-family: var(--font-mono);
+		font-family: inherit;
 		font-size: 13px;
 		padding: 3px 22px 3px 8px;
 		border: 1px solid var(--line);

package/dist/components/LocalCaseDetails.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { getAppState, getController } from '../context.svelte.js';
 	import { fmt } from '../format.js';
 	import type { LocalCase } from '../state.svelte.js';
 	import { formatPowerIoDiagnostic, type PowerIoDiagnostic } from '@tellegen/engine';
 
+	/** Optional host content rendered under the case stats. */
+	let { note }: { note?: Snippet<[LocalCase]> } = $props();
+
 	const app = getAppState();
 	const ctrl = getController();
 
@@ -22,6 +26,23 @@
 	let exportOpen = $state(false);
 	let exportDiagnostics = $state<PowerIoDiagnostic[]>([]);
 
+	/** Where the map coordinates came from. */
+	function coordinateSource(lc: LocalCase): string {
+		if (!lc.view) return 'None';
+		switch (lc.coordsKind) {
+			case 'file':
+				return 'From file';
+			case 'geofile':
+				return lc.geoSource ? `From ${lc.geoSource}` : 'From geographic file';
+			case 'manual':
+				return 'Manual layout';
+			case 'synthetic':
+				return lc.summary?.coords_method === 'generated' ? 'Generated' : 'Synthetic layout';
+			default:
+				return 'None';
+		}
+	}
+
 	async function saveCase(lc: LocalCase) {
 		busy = true;
 		exportDiagnostics = [];
@@ -64,137 +85,128 @@
 
 {#if app.activeLocal}
 	{@const lc = app.activeLocal}
-	<h2>{lc.label} <span class="region mono">via {lc.fileName}</span></h2>
+	<h2>{lc.label}</h2>
 	{#if lc.substations}
-		<dl class="mono">
+		<dl>
+			<div>
+				<dt>Substations</dt>
+				<dd class="mono">{lc.substations.points.length}</dd>
+			</div>
+			<div>
+				<dt>Positions</dt>
+				<dd>Inferred from diagram</dd>
+			</div>
 			<div>
-				<dt>substations</dt>
-				<dd>{lc.substations.points.length}</dd>
+				<dt>File</dt>
+				<dd class="mono">{lc.fileName}</dd>
 			</div>
 		</dl>
-		<p class="footnote mono">
-			display only: positions inferred from the PowerWorld diagram, not surveyed latitude and
-			longitude
-		</p>
-		<p class="footnote mono">decoded in your browser by powerio (wasm); never uploaded</p>
 	{:else if lc.summary}
-		<dl class="mono">
+		<dl>
 			<div>
-				<dt>buses</dt>
-				<dd>{lc.summary.n_bus}</dd>
+				<dt>Buses</dt>
+				<dd class="mono">{lc.summary.n_bus}</dd>
 			</div>
 			<div>
-				<dt>branches</dt>
-				<dd>{lc.summary.n_branch}</dd>
+				<dt>Branches</dt>
+				<dd class="mono">{lc.summary.n_branch}</dd>
 			</div>
 			<div>
-				<dt>generators</dt>
-				<dd>{lc.summary.n_gen}</dd>
+				<dt>Generators</dt>
+				<dd class="mono">{lc.summary.n_gen}</dd>
 			</div>
 			<div>
-				<dt>load</dt>
-				<dd>{fmt.format(lc.summary.load_mw)} MW</dd>
+				<dt>Load</dt>
+				<dd class="mono">{fmt.format(lc.summary.load_mw)} MW</dd>
 			</div>
 			<div>
-				<dt>gen capacity</dt>
-				<dd>{fmt.format(lc.summary.gen_mw)} MW</dd>
+				<dt>Generation capacity</dt>
+				<dd class="mono">{fmt.format(lc.summary.gen_mw)} MW</dd>
 			</div>
 			<div>
-				<dt>base MVA</dt>
-				<dd>{fmt.format(lc.summary.base_mva)}</dd>
+				<dt>Base MVA</dt>
+				<dd class="mono">{fmt.format(lc.summary.base_mva)}</dd>
 			</div>
-		</dl>
-		{#if lc.displayMode === 'diagram' && lc.diagram}
-			<p class="footnote mono">Drawing: {lc.diagram.name}</p>
-			{#if lc.diagram.warnings.length}
-				<details>
-					<summary>Drawing details</summary>
-					<ul class="warnings mono">
-						{#each lc.diagram.warnings as warning, i (i)}<li>{warning}</li>{/each}
-					</ul>
-				</details>
-			{/if}
-		{:else if !lc.view}
-			<p class="footnote mono">
-				no coordinates in this file: click the map or drop a geographic file
-			</p>
-		{:else if lc.coordsKind === 'synthetic' && lc.summary.coords_method === 'generated'}
-			<p class="footnote mono">coordinates: synthetic grid sited on real geography</p>
-		{:else if lc.coordsKind === 'synthetic' || lc.coordsKind === 'manual'}
-			<p class="footnote mono">
-				coordinates: {lc.coordsKind} topology layout centered where it was placed
-			</p>
-		{:else if lc.coordsKind === 'geofile'}
-			<p class="footnote mono">
-				coordinates: geographic file data from {lc.geoSource}
-			</p>
-		{/if}
-		<p class="footnote mono">parsed in your browser by powerio (wasm); never uploaded</p>
-		{#if lc.studyInputJson}
-			<div class="case-actions">
-				<button class="reset mono" disabled={busy} onclick={() => saveCase(lc)}>
-					save PowerIO module (.json)
-				</button>
-				{#if lc.formulation === 'dcopf' && lc.solution}
-					<button class="reset mono" disabled={busy} onclick={() => saveSolution(lc)}>
-						save exact solution (.json)
-					</button>
-				{/if}
-				<div class="export">
-					<button
-						class="reset mono"
-						disabled={busy}
-						aria-expanded={exportOpen}
-						onclick={() => (exportOpen = !exportOpen)}
-					>
-						export committed state…
-					</button>
-					{#if exportOpen}
-						<ul class="export-menu mono">
-							{#each EXPORT_FORMATS as f (f.token)}
-								<li>
-									<button
-										class="reset mono"
-										disabled={busy}
-										onclick={() => exportCase(lc, f.token)}
-									>
-										{f.label}
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{/if}
+			{#if lc.displayMode === 'diagram' && lc.diagram}
+				<div>
+					<dt>Drawing</dt>
+					<dd>{lc.diagram.name}</dd>
 				</div>
-				{#if lc.view || lc.diagram}
-					<button class="reset mono" disabled={busy} onclick={() => downloadLayout(lc)}>
-						{lc.displayMode === 'diagram'
-							? 'Download drawing (.geo.json)'
-							: 'Download geography (.geo.json)'}
-					</button>
-				{/if}
+			{:else}
+				<div>
+					<dt>Coordinates</dt>
+					<dd>{coordinateSource(lc)}</dd>
+				</div>
+			{/if}
+			<div>
+				<dt>File</dt>
+				<dd class="mono">{lc.fileName}</dd>
 			</div>
-			{#if exportDiagnostics.length > 0}
-				<ul class="warnings mono">
-					{#each exportDiagnostics.slice(0, 4) as diagnostic, i (i)}
-						<li>{formatPowerIoDiagnostic(diagnostic)}</li>
-					{/each}
-					{#if exportDiagnostics.length > 4}
-						<li>+{exportDiagnostics.length - 4} more</li>
-					{/if}
+		</dl>
+		{#if lc.displayMode === 'diagram' && lc.diagram?.warnings.length}
+			<details>
+				<summary>Drawing details</summary>
+				<ul class="warnings">
+					{#each lc.diagram.warnings as warning, i (i)}<li>{warning}</li>{/each}
 				</ul>
+			</details>
+		{/if}
+	{/if}
+	{@render note?.(lc)}
+	{#if lc.summary && lc.studyInputJson}
+		<div class="case-actions">
+			<button class="reset" disabled={busy} onclick={() => saveCase(lc)}>Save case</button>
+			{#if lc.formulation === 'dcopf' && lc.solution}
+				<button class="reset" disabled={busy} onclick={() => saveSolution(lc)}>Save solution</button
+				>
+			{/if}
+			<button
+				class="reset"
+				disabled={busy}
+				aria-expanded={exportOpen}
+				aria-controls="case-export-formats"
+				onclick={() => (exportOpen = !exportOpen)}
+			>
+				Export as
+			</button>
+			{#if lc.view || lc.diagram}
+				<button class="reset" disabled={busy} onclick={() => downloadLayout(lc)}>
+					{lc.displayMode === 'diagram' ? 'Save drawing' : 'Save geography'}
+				</button>
 			{/if}
+		</div>
+		{#if exportOpen}
+			<ul class="case-actions" id="case-export-formats" aria-label="Export formats">
+				{#each EXPORT_FORMATS as f (f.token)}
+					<li>
+						<button class="reset" disabled={busy} onclick={() => exportCase(lc, f.token)}>
+							{f.label}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+		{#if exportDiagnostics.length > 0}
+			<ul class="warnings">
+				{#each exportDiagnostics.slice(0, 4) as diagnostic, i (i)}
+					<li>{formatPowerIoDiagnostic(diagnostic)}</li>
+				{/each}
+				{#if exportDiagnostics.length > 4}
+					<li>+{exportDiagnostics.length - 4} more</li>
+				{/if}
+			</ul>
 		{/if}
 	{/if}
 	{#if lc.displayMode !== 'diagram' && lc.topology && lc.coordsKind !== 'file'}
-		<button class="reset mono" onclick={() => ctrl.moveLocalCase(lc)}>
+		<button class="reset" onclick={() => ctrl.moveLocalCase(lc)}>
 			{lc.coordsKind === 'synthetic_pending'
-				? 'place on map'
+				? 'Place on map'
 				: lc.coordsKind === 'geofile'
-					? 'place manually'
-					: 'move layout'}
+					? 'Place manually'
+					: 'Move layout'}
 		</button>
 	{/if}
-	<button class="reset mono" onclick={() => ctrl.removeLocalCase(lc)}>remove</button>
+	<button class="reset" onclick={() => ctrl.removeLocalCase(lc)}>Remove</button>
 {/if}
 
 <style>
@@ -212,22 +224,25 @@
 	dl div {
 		display: flex;
 		justify-content: space-between;
+		gap: 12px;
 		padding: 3px 0;
 	}
 
 	dt {
+		flex: none;
 		color: var(--text-secondary);
 	}
 
 	dd {
+		min-width: 0;
 		margin: 0;
+		text-align: right;
+		overflow-wrap: anywhere;
 	}
 
-	.footnote {
-		margin: 8px 0 0;
+	details {
+		margin-top: 8px;
 		font-size: 12px;
-		color: var(--text-tertiary);
-		letter-spacing: 0;
 	}
 
 	.warnings {
@@ -243,27 +258,12 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: 8px;
-		margin-top: 10px;
-	}
-
-	.export {
-		position: relative;
-	}
-
-	.export-menu {
-		position: absolute;
-		z-index: 1;
-		margin: 4px 0 0;
-		padding: 4px;
+		margin: 10px 0 0;
+		padding: 0;
 		list-style: none;
-		min-width: 100%;
-		background: var(--surface, var(--surface-menu));
-		border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
-		border-radius: 6px;
-		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
 	}
 
-	.export-menu li {
-		white-space: nowrap;
+	.case-actions .reset {
+		margin-top: 0;
 	}
 </style>

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

@@ -1,3 +1,8 @@
-declare const LocalCaseDetails: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Snippet } from 'svelte';
+import type { LocalCase } from '../state.svelte.js';
+type $$ComponentProps = {
+    note?: Snippet<[LocalCase]>;
+};
+declare const LocalCaseDetails: import("svelte").Component<$$ComponentProps, {}, "">;
 type LocalCaseDetails = ReturnType<typeof LocalCaseDetails>;
 export default LocalCaseDetails;

package/dist/components/MulticonductorDetails.svelte

@@ -46,51 +46,60 @@
 {#if app.activeMulti}
 	{@const mc = app.activeMulti}
 	{@const s = mc.summary}
-	<h2>{mc.label} <span class="region mono">via {mc.fileName}</span></h2>
+	<h2>{mc.label}</h2>
 	{#if s}
-		<p class="tag mono">Multiconductor</p>
+		<p class="tag">Multiconductor</p>
 		<details class="case-details">
 			<summary>{s.n_bus} buses, {s.n_edge} {s.n_edge === 1 ? 'branch' : 'branches'}</summary>
-			<dl class="mono">
+			<dl>
 				<div>
-					<dt>buses</dt>
-					<dd>{s.n_bus}</dd>
+					<dt>Buses</dt>
+					<dd class="mono">{s.n_bus}</dd>
 				</div>
 				<div>
 					<dt>Lines / switches / transformers</dt>
-					<dd>{s.n_line} / {s.n_switch} / {s.n_transformer}</dd>
+					<dd class="mono">{s.n_line} / {s.n_switch} / {s.n_transformer}</dd>
 				</div>
 				<div>
-					<dt>load</dt>
-					<dd>{fmt.format(s.load_kw)} kW</dd>
+					<dt>Load</dt>
+					<dd class="mono">{fmt.format(s.load_kw)} kW</dd>
 				</div>
 				<div>
 					<dt>Generation capacity</dt>
-					<dd>{fmt.format(s.gen_kw)} kW</dd>
+					<dd class="mono">{fmt.format(s.gen_kw)} kW</dd>
 				</div>
 				<div>
-					<dt>sources / loads / gens</dt>
-					<dd>{s.n_source} / {s.n_load} / {s.n_generator}</dd>
+					<dt>Sources / loads / generators</dt>
+					<dd class="mono">{s.n_source} / {s.n_load} / {s.n_generator}</dd>
 				</div>
 				{#if s.n_ibr > 0 || s.n_shunt > 0 || (s.n_capacitor ?? 0) > 0}
 					<div>
-						<dt>IBRs / shunts / caps</dt>
-						<dd>{s.n_ibr} / {s.n_shunt} / {s.n_capacitor ?? 0}</dd>
+						<dt>IBRs / shunts / capacitors</dt>
+						<dd class="mono">{s.n_ibr} / {s.n_shunt} / {s.n_capacitor ?? 0}</dd>
 					</div>
 				{/if}
+				<div>
+					<dt>File</dt>
+					<dd class="mono">{mc.fileName}</dd>
+				</div>
 			</dl>
 		</details>
 
-		<p class="footnote mono">
-			{mc.coordsKind === 'geographic'
-				? 'Geographic coordinates'
-				: mc.coordsKind === 'planar'
-					? 'Drawing coordinates'
-					: 'Generated diagram'}
-		</p>
+		<dl>
+			<div>
+				<dt>Coordinates</dt>
+				<dd>
+					{mc.coordsKind === 'geographic'
+						? 'Geographic'
+						: mc.coordsKind === 'planar'
+							? 'Drawing'
+							: 'Generated diagram'}
+				</dd>
+			</div>
+		</dl>
 		<div class="calculation-actions">
 			{#if mc.solving}
-				<span role="status">Calculating...</span>{#if mc.solveAbort}<button
+				<span role="status">Calculating&hellip;</span>{#if mc.solveAbort}<button
 						onclick={() => mc.solveAbort?.abort()}>Cancel</button
 					>{/if}
 			{:else}
@@ -110,27 +119,27 @@
 							notices.push({
 								kind: 'warning',
 								title: 'AC power flow unavailable',
-								details: mc.mcPfReason ?? 'This case cannot run AC power flow in this browser'
+								details: mc.mcPfReason ?? 'AC power flow does not support this case'
 							})}>Why unavailable</button
 					>
 				{/if}
 			{/if}
 		</div>
 		{#if mc.result}<p class="footnote">Converged, {mc.result.iterations} iterations</p>
-			<button class="reset mono" onclick={openResults}>View results in Studies</button>{/if}
+			<button class="reset" onclick={openResults}>View results in Studies</button>{/if}
 	{/if}
 
 	{#if mc.selectedBus}
 		{@const b = mc.selectedBus}
 		<hr />
-		<h3 class="mono">bus {b.id}</h3>
+		<h3>Bus <span class="mono">{b.id}</span></h3>
 		<div class="terminals">
 			{#each b.terminals as t (t)}
 				<span
 					class="term"
 					class:grounded={b.grounded.includes(t)}
 					style={`--tc:${terminalColor(t)}`}
-					title={b.grounded.includes(t) ? `terminal ${t} (grounded)` : `terminal ${t}`}
+					title={b.grounded.includes(t) ? `Terminal ${t}, grounded` : `Terminal ${t}`}
 				>
 					{t}{#if b.grounded.includes(t)}<span class="gnd" aria-hidden="true">&#9178;</span>{/if}
 				</span>
@@ -145,7 +154,7 @@
 				{/each}
 			</div>
 		{:else}
-			<p class="footnote mono">no attachments on this bus</p>
+			<p class="footnote">No attachments</p>
 		{/if}
 		{@const loadBranches = mc.mcLoadBranches.filter((load) => load.bus === b.id)}
 		{#if loadBranches.length > 0}
@@ -154,7 +163,7 @@
 				{#each loadBranches as load (`${load.load}:${load.branch}`)}
 					<div class="load-row">
 						<span class="mono"
-							>{load.load}{loadBranches.length > 1 ? ` · ${load.branch + 1}` : ''}</span
+							>{load.load}{loadBranches.length > 1 ? ` (${load.branch + 1})` : ''}</span
 						>
 						<label
 							>P kW<input
@@ -200,7 +209,7 @@
 						>
 					</div>
 				{/each}
-				<p class="footnote">Changes re-solve automatically using the retained factorization.</p>
+				<p class="footnote">Changes solve automatically.</p>
 			</div>
 		{/if}
 	{:else if mc.selectedEdge}
@@ -211,15 +220,19 @@
 			{e.kind}
 			{e.from}&#8201;&ndash;&#8201;{e.to}
 		</h3>
-		<dl class="mono">
+		<dl>
+			<div>
+				<dt>Phases</dt>
+				<dd class="mono">{e.n_phases}</dd>
+			</div>
 			<div>
-				<dt>phases</dt>
-				<dd>{e.n_phases}&#966; , {e.conductors.length} conductors</dd>
+				<dt>Conductors</dt>
+				<dd class="mono">{e.conductors.length}</dd>
 			</div>
 			{#if e.kind === 'switch'}
 				<div>
-					<dt>state</dt>
-					<dd>{e.closed ? 'closed' : 'open'}</dd>
+					<dt>State</dt>
+					<dd>{e.closed ? 'Closed' : 'Open'}</dd>
 				</div>
 			{/if}
 		</dl>
@@ -232,8 +245,6 @@
 				</span>
 			{/each}
 		</div>
-	{:else if mc.placed}
-		<p class="footnote mono">select a bus or a line to expand its detail</p>
 	{/if}
 
 	<div class="mc-legend mono">
@@ -251,8 +262,8 @@
 		</span>
 	</div>
 
-	<button class="reset mono" onclick={() => app.requestFrame(mc.id)}>Fit case</button>
-	<button class="reset mono" onclick={() => ctrl.removeMultiCase(mc)}>remove</button>
+	<button class="reset" onclick={() => app.requestFrame(mc.id)}>Fit case</button>
+	<button class="reset" onclick={() => ctrl.removeMultiCase(mc)}>Remove</button>
 {/if}
 
 <style>
@@ -309,7 +320,6 @@
 		font-size: 12px;
 		color: var(--text-secondary);
 		letter-spacing: 0;
-		text-transform: uppercase;
 	}
 
 	dl {

package/dist/components/NetworkStats.svelte

@@ -11,34 +11,32 @@
 	{@const [cname, cregion] = splitName(app.active?.name ?? '')}
 	{@const deltaObjective = stats.deltaObjective}
 	<h2>{cname} <span class="region mono">{cregion}</span></h2>
-	<dl class="mono">
+	<dl>
 		<div>
-			<dt>buses</dt>
-			<dd>{stats.buses}</dd>
+			<dt>Buses</dt>
+			<dd class="mono">{stats.buses}</dd>
 		</div>
 		<div>
-			<dt>lines</dt>
-			<dd>{stats.branches}</dd>
+			<dt>Lines</dt>
+			<dd class="mono">{stats.branches}</dd>
 		</div>
 		{#if ctrl.activeFormulation !== 'acpf'}
 			<div>
-				<dt>binding lines</dt>
-				<dd>{stats.binding ?? '...'}</dd>
+				<dt>Binding lines</dt>
+				<dd class="mono">{stats.binding ?? '…'}</dd>
 			</div>
 			<div>
 				<dt>OPF objective</dt>
-				<dd>
-					{#if stats.objective === null}
-						<span class="blink">solving...</span>
-					{:else}
-						{fmt.format(stats.objective)}
-					{/if}
-				</dd>
+				{#if stats.objective === null}
+					<dd class="blink">Solving&hellip;</dd>
+				{:else}
+					<dd class="mono">{fmt.format(stats.objective)}</dd>
+				{/if}
 			</div>
 			{#if ctrl.isPerturbed(ctrl.activeSolvable) && deltaObjective !== null}
 				<div class="delta">
-					<dt>vs base</dt>
-					<dd>{signed(deltaObjective)}</dd>
+					<dt>Change from base</dt>
+					<dd class="mono">{signed(deltaObjective)}</dd>
 				</div>
 			{/if}
 		{/if}

package/dist/components/PanelCard.svelte

@@ -158,7 +158,7 @@
 			<button
 				class="title"
 				aria-label={`Move ${panel.title} panel`}
-				title="Click to expand. Drag or use arrow keys to move. Open panel options to dock."
+				title="Drag or use arrow keys to move"
 				onpointerdown={(event) => start(event, 'move')}
 				onkeydown={key}
 				onclick={() => layout.activate(panel)}>{panel.title}</button

package/dist/components/PlacementCue.svelte

@@ -5,7 +5,7 @@
 </script>
 
 {#if app.placingId}
-	<div class="placement-cue mono">click the map to place the topology layout</div>
+	<div class="placement-cue">Click the map to place the topology layout</div>
 {/if}
 
 <style>