@tellegen/svelte 0.4.1 → 0.4.3

package/dist/components/DemandSlider.svelte

@@ -23,48 +23,43 @@
 	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"
 					{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"
 					{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 +73,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 +90,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 +109,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/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;

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;