@tellegen/svelte 0.1.0

package/dist/components/DisplayControls.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { getAppState, getController } from '../context.svelte.js';
+	import { displayFmt, formulationLabel } from '../format.js';
+
+	const app = getAppState();
+	const ctrl = getController();
+</script>
+
+<div class="mode display-mode">
+	<div class="segment mono" aria-label="bus color variable">
+		{#each ctrl.displayOptions as option (option.mode)}
+			<button
+				type="button"
+				class:active={app.displayMode === option.mode}
+				aria-pressed={app.displayMode === option.mode}
+				onclick={() => (app.displayMode = option.mode)}>{option.label}</button
+			>
+		{/each}
+	</div>
+	<span class="mono dim">{ctrl.activeDisplay?.unit ?? ''}</span>
+	{#if app.sensitivityLoading}
+		<span class="mono dim blink">&part; loading&hellip;</span>
+	{/if}
+</div>
+{#if ctrl.activeDisplay && ctrl.displayStats}
+	{#if ctrl.activeDisplay.mode === 'lmp'}
+		<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}
+	<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)}
+				{ctrl.activeDisplay.unit}
+			</span>
+		{:else}
+			<span>
+				{ctrl.displayStats.lo.clamped ? '≤' : ''}{displayFmt(
+					ctrl.activeDisplay.mode,
+					ctrl.displayStats.lo.value
+				)}
+				{ctrl.activeDisplay.unit}
+			</span>
+			<span>
+				{ctrl.displayStats.hi.clamped ? '≥' : ''}{displayFmt(
+					ctrl.activeDisplay.mode,
+					ctrl.displayStats.hi.value
+				)}
+				{ctrl.activeDisplay.unit}
+			</span>
+		{/if}
+	</div>
+{:else}
+	<p class="dim small blink">Solving {formulationLabel(ctrl.activeFormulation)}&hellip;</p>
+{/if}
+
+<style>
+	.legend-heading {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-top: 10px;
+	}
+
+	.legend-title {
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--ink);
+	}
+
+	/* .hint-dot lives in the shared stylesheet; SensitivityReadout uses it too. */
+</style>

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

@@ -0,0 +1,19 @@
+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 DisplayControls: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DisplayControls = InstanceType<typeof DisplayControls>;
+export default DisplayControls;
+//# sourceMappingURL=DisplayControls.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayControls.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DisplayControls.svelte.ts"],"names":[],"mappings":"AAkEA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;;kBAA+E,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/components/DropZone.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { getAppState } from '../context.svelte.js';
+
+	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>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.dropzone {
+		position: fixed;
+		inset: 0;
+		z-index: 20;
+		pointer-events: none;
+		background: rgba(236, 233, 226, 0.75);
+	}
+
+	.dropframe {
+		position: absolute;
+		inset: 14px;
+		border: 1.5px dashed var(--accent);
+		border-radius: 3px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+	}
+
+	.dropframe p {
+		margin: 0;
+		font-size: 13px;
+	}
+
+	.dropframe .hint {
+		font-size: 11px;
+		color: var(--text-secondary);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+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>;
+export default DropZone;
+//# sourceMappingURL=DropZone.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DropZone.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;;kBAA+E,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/components/FormulationSelector.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { getController } from '../context.svelte.js';
+	import { formulationHint } from '../format.js';
+	import { FORMULATIONS, type Formulation } from '@tellegen/engine';
+
+	const ctrl = getController();
+</script>
+
+{#if ctrl.activeSolvable}
+	{@const c = ctrl.activeSolvable}
+	<div class="formulation">
+		<label
+			class="formulation-row mono"
+			for="formulation-select"
+			title={formulationHint(c.formulation)}
+		>
+			<span>formulation</span>
+			<select
+				id="formulation-select"
+				class="mono"
+				disabled={c.solving}
+				value={c.formulation}
+				onchange={(e) => ctrl.changeFormulation(c, e.currentTarget.value as Formulation)}
+			>
+				{#each FORMULATIONS as f (f.id)}
+					<option value={f.id} disabled={f.disabled}>
+						{f.label}{f.disabled ? ' (coming soon)' : ''}
+					</option>
+				{/each}
+			</select>
+		</label>
+	</div>
+{/if}
+
+<style>
+	.formulation {
+		margin-top: 10px;
+	}
+
+	.formulation-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+		font-size: 12px;
+		color: var(--ink);
+	}
+
+	.formulation-row select {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		padding: 3px 22px 3px 8px;
+		border: 1px solid var(--line);
+		border-radius: 2px;
+		background: var(--surface-control);
+		color: var(--ink);
+		cursor: pointer;
+		/* Native arrow on the right, drawn so the control reads as a control in the panel. */
+		appearance: none;
+		-webkit-appearance: none;
+		background-image:
+			linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
+			linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
+		background-position:
+			right 10px center,
+			right 6px center;
+		background-size:
+			4px 4px,
+			4px 4px;
+		background-repeat: no-repeat;
+	}
+
+	.formulation-row select:hover:not(:disabled) {
+		border-color: var(--accent);
+		color: var(--text-accent);
+	}
+
+	.formulation-row select:disabled {
+		opacity: 0.55;
+		cursor: progress;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+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 FormulationSelector: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FormulationSelector = InstanceType<typeof FormulationSelector>;
+export default FormulationSelector;
+//# sourceMappingURL=FormulationSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormulationSelector.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormulationSelector.svelte.ts"],"names":[],"mappings":"AAmCA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,mBAAmB;;kBAA+E,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}

package/dist/components/LocalCaseDetails.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import { getAppState, getController } from '../context.svelte.js';
+	import { fmt } from '../format.js';
+	import type { LocalCase } from '../state.svelte.js';
+
+	const app = getAppState();
+	const ctrl = getController();
+
+	// Powerio writer tokens the committed state exports to; label carries the extension.
+	const EXPORT_FORMATS = [
+		{ token: 'matpower', label: 'MATPOWER (.m)' },
+		{ token: 'psse', label: 'PSS/E (.raw)' },
+		{ token: 'powermodels-json', label: 'PowerModels (.json)' },
+		{ token: 'pandapower-json', label: 'pandapower (.json)' },
+		{ token: 'powerio-json', label: 'PowerIO (.json)' }
+	];
+
+	let busy = $state(false);
+	let exportOpen = $state(false);
+	let exportWarnings = $state<string[]>([]);
+
+	async function saveStudy(lc: LocalCase) {
+		busy = true;
+		exportWarnings = [];
+		try {
+			await ctrl.saveStudyPackage(lc);
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function exportStudy(lc: LocalCase, token: string) {
+		busy = true;
+		try {
+			exportWarnings = await ctrl.exportStudyAs(lc, token);
+			exportOpen = false;
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function downloadLayout(lc: LocalCase) {
+		busy = true;
+		try {
+			await ctrl.downloadGeoLayer(lc);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+{#if app.activeLocal}
+	{@const lc = app.activeLocal}
+	<h2>{lc.label} <span class="region mono">via {lc.fileName}</span></h2>
+	{#if lc.substations}
+		<dl class="mono">
+			<div>
+				<dt>substations</dt>
+				<dd>{lc.substations.points.length}</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">
+			<div>
+				<dt>buses</dt>
+				<dd>{lc.summary.n_bus}</dd>
+			</div>
+			<div>
+				<dt>branches</dt>
+				<dd>{lc.summary.n_branch}</dd>
+			</div>
+			<div>
+				<dt>generators</dt>
+				<dd>{lc.summary.n_gen}</dd>
+			</div>
+			<div>
+				<dt>load</dt>
+				<dd>{fmt.format(lc.summary.load_mw)} MW</dd>
+			</div>
+			<div>
+				<dt>gen capacity</dt>
+				<dd>{fmt.format(lc.summary.gen_mw)} MW</dd>
+			</div>
+			<div>
+				<dt>base MVA</dt>
+				<dd>{fmt.format(lc.summary.base_mva)}</dd>
+			</div>
+		</dl>
+		{#if lc.summary.warnings.length > 0}
+			<ul class="warnings mono">
+				{#each lc.summary.warnings.slice(0, 4) as w, i (i)}
+					<li>{w}</li>
+				{/each}
+				{#if lc.summary.warnings.length > 4}
+					<li>+{lc.summary.warnings.length - 4} more</li>
+				{/if}
+			</ul>
+		{/if}
+		{#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.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}
+		{#if lc.geoWarnings && lc.geoWarnings.length > 0}
+			<ul class="warnings mono">
+				{#each lc.geoWarnings.slice(0, 4) as w, i (i)}
+					<li>{w}</li>
+				{/each}
+				{#if lc.geoWarnings.length > 4}
+					<li>+{lc.geoWarnings.length - 4} more</li>
+				{/if}
+			</ul>
+		{/if}
+		<p class="footnote mono">parsed in your browser by powerio (wasm); never uploaded</p>
+		{#if lc.networkJson}
+			<div class="study">
+				<button class="reset mono" disabled={busy} onclick={() => saveStudy(lc)}>
+					save study (.pio.json)
+				</button>
+				<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={() => exportStudy(lc, f.token)}>
+										{f.label}
+									</button>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+				{#if lc.view}
+					<button class="reset mono" disabled={busy} onclick={() => downloadLayout(lc)}>
+						download layout (.geo.json)
+					</button>
+				{/if}
+			</div>
+			{#if exportWarnings.length > 0}
+				<ul class="warnings mono">
+					{#each exportWarnings.slice(0, 4) as w, i (i)}
+						<li>{w}</li>
+					{/each}
+					{#if exportWarnings.length > 4}
+						<li>+{exportWarnings.length - 4} more</li>
+					{/if}
+				</ul>
+			{/if}
+		{/if}
+	{/if}
+	{#if lc.topology && lc.coordsKind !== 'file'}
+		<button class="reset mono" onclick={() => ctrl.moveLocalCase(lc)}>
+			{lc.coordsKind === 'synthetic_pending'
+				? 'place on map'
+				: lc.coordsKind === 'geofile'
+					? 'place manually'
+					: 'move layout'}
+		</button>
+	{/if}
+	<button class="reset mono" onclick={() => ctrl.removeLocalCase(lc)}>remove</button>
+{/if}
+
+<style>
+	h2 {
+		margin: 0 0 12px;
+		font-size: 16px;
+		font-weight: 600;
+	}
+
+	dl {
+		margin: 0;
+		font-size: 12.5px;
+	}
+
+	dl div {
+		display: flex;
+		justify-content: space-between;
+		padding: 3px 0;
+	}
+
+	dt {
+		color: var(--text-secondary);
+	}
+
+	dd {
+		margin: 0;
+	}
+
+	.footnote {
+		margin: 8px 0 0;
+		font-size: 10px;
+		color: var(--text-tertiary);
+		letter-spacing: 0;
+	}
+
+	.warnings {
+		margin: 8px 0 0;
+		padding: 0;
+		list-style: none;
+		font-size: 10.5px;
+		line-height: 1.5;
+		color: var(--text-accent);
+	}
+
+	.study {
+		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;
+		list-style: none;
+		min-width: 100%;
+		background: var(--surface, #fff);
+		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;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+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/LocalCaseDetails.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalCaseDetails.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/LocalCaseDetails.svelte.ts"],"names":[],"mappings":"AA6LA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}