@tellegen/svelte 0.1.0

package/dist/components/RatingSlider.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import { getController } from '../context.svelte.js';
+	import { fmt, signed } from '../format.js';
+
+	const ctrl = getController();
+
+	// Fill from the committed rating to the live thumb. The number line stays
+	// stable after release; only the committed tick moves.
+	const thumbSizePx = 14;
+	const bounds = $derived(ctrl.ratingBounds);
+	const sliderSpan = $derived(Math.max(bounds.max - bounds.min, 1e-9));
+	const valFrac = $derived(
+		Math.max(0, Math.min(1, (ctrl.ratingSliderValue - bounds.min) / sliderSpan))
+	);
+	const neutralFrac = $derived(
+		Math.max(0, Math.min(1, (ctrl.committedRating - bounds.min) / sliderSpan))
+	);
+	const thumbAlignedPos = (frac: number) =>
+		`calc(${frac * 100}% + ${(0.5 - frac) * thumbSizePx}px)`;
+	const valPos = $derived(thumbAlignedPos(valFrac));
+	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 rating change. Drag the knob to preview a new thermal rating; release to solve and move the tick to that point.';
+	const disabledTip = "this line's rating is synthesized; not adjustable";
+	const scoreTip =
+		'Gradient is the estimate of total cost change versus base before the solve finishes, from the engine preview at the committed point. Exact is the resolved OPF objective change.';
+</script>
+
+{#if ctrl.activeSolvable}
+	{@const c = ctrl.activeSolvable}
+	{@const branch = ctrl.selectedBranchData}
+	<div class="slider-block">
+		<div class="slider-head mono">
+			<span>&Delta; rating</span>
+			<span class="val">{signed(ctrl.ratingSliderValue)} MW</span>
+		</div>
+		<div class="line-row mono">
+			{#if branch}
+				<span class="dim"
+					>line {branch.from}&#8201;&ndash;&#8201;{branch.to} &middot; {fmt.format(
+						branch.rate_mw
+					)} MW</span
+				>
+			{/if}
+			<span class="dim">
+				{#if bounds.disabled}
+					not adjustable
+				{:else}
+					{fmt.format(bounds.min)} to +{fmt.format(bounds.max)} MW
+				{/if}
+			</span>
+		</div>
+		<div
+			class="slider-track"
+			style="--fill-lo:{fillLo}; --fill-hi:{fillHi}; --neutral-pos:{neutralPos}"
+			title={bounds.disabled ? disabledTip : sliderTip}
+		>
+			<input
+				type="range"
+				min={bounds.min}
+				max={bounds.max}
+				step="any"
+				disabled={bounds.disabled}
+				bind:value={ctrl.ratingSliderCurrent, ctrl.setRatingPreview}
+				aria-label="rating delta at selected line"
+				onpointerdown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
+				onkeydown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
+				onpointerup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
+				onkeyup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
+				onchange={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
+			/>
+		</div>
+		<div class="rating-feedback" class:idle={!ctrl.previewing && !ctrl.isPerturbed(c)}>
+			<p class="pred mono dim" aria-hidden={!(ctrl.predictedDeltaObj !== null && ctrl.previewing)}>
+				{#if ctrl.predictedDeltaObj !== null && ctrl.previewing}
+					predicted &Delta;cost {signed(ctrl.predictedDeltaObj)} $/h
+				{:else}
+					&nbsp;
+				{/if}
+			</p>
+			<p class="score mono" aria-hidden={!(ctrl.gradientScore && ctrl.isPerturbed(c))}>
+				{#if ctrl.gradientScore && ctrl.isPerturbed(c)}
+					<span title={scoreTip}>
+						gradient {signed(ctrl.gradientScore.pred)} &middot; exact {signed(
+							ctrl.gradientScore.exact
+						)}
+						$/h
+					</span>
+				{:else}
+					&nbsp;
+				{/if}
+			</p>
+			<div class="reset-row">
+				{#if ctrl.isPerturbed(c)}
+					<button class="reset mono" onclick={() => ctrl.resetCase(c)}>reset rating</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.slider-block {
+		margin-top: 14px;
+	}
+
+	.slider-head {
+		display: flex;
+		justify-content: space-between;
+		font-size: 11.5px;
+		color: var(--text-secondary);
+		margin-bottom: 4px;
+	}
+
+	.slider-head .val {
+		color: var(--ink);
+	}
+
+	.line-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		margin: 6px 0 7px;
+		font-size: 10.5px;
+	}
+
+	.slider-track {
+		position: relative;
+		margin: 6px 0;
+		isolation: isolate;
+	}
+
+	.slider-track::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: var(--neutral-pos, 50%);
+		z-index: 0;
+		width: 2px;
+		height: 16px;
+		background: var(--ink);
+		border-radius: 1px;
+		box-shadow: 0 0 0 1px rgb(var(--paper-rgb) / 0.72);
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
+	input[type='range'] {
+		-webkit-appearance: none;
+		appearance: none;
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		height: 4px;
+		padding: 7px 0;
+		box-sizing: content-box;
+		background:
+			linear-gradient(
+				90deg,
+				transparent 0 var(--fill-lo, 0%),
+				rgb(var(--accent-rgb) / 0.32) var(--fill-lo, 0%) var(--fill-hi, 0%),
+				transparent var(--fill-hi, 0%) 100%
+			),
+			var(--line);
+		background-clip: content-box;
+		border-radius: var(--radius-xs);
+		outline-offset: 4px;
+		margin: 0;
+	}
+
+	input[type='range']:disabled {
+		opacity: 0.45;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--accent);
+		border: 2px solid var(--paper);
+		box-shadow: var(--shadow-thumb);
+		cursor: ew-resize;
+		transition:
+			transform var(--dur-fast) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease-out);
+	}
+
+	input[type='range']::-moz-range-thumb {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--accent);
+		border: 2px solid var(--paper);
+		box-shadow: var(--shadow-thumb);
+		cursor: ew-resize;
+		transition:
+			transform var(--dur-fast) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease-out);
+	}
+
+	input[type='range']:active::-webkit-slider-thumb,
+	input[type='range']:focus-visible::-webkit-slider-thumb {
+		transform: scale(1.15);
+		box-shadow: 0 2px 7px rgb(var(--ink-rgb) / 0.35);
+	}
+
+	input[type='range']:active::-moz-range-thumb,
+	input[type='range']:focus-visible::-moz-range-thumb {
+		transform: scale(1.15);
+		box-shadow: 0 2px 7px rgb(var(--ink-rgb) / 0.35);
+	}
+
+	/* Coarse pointers: a larger track and thumb for a comfortable touch target.
+	   The input's own border box grows to a 44px tap target (padding is symmetric,
+	   so the thumb -- centered on the input's box by default -- stays centered on
+	   the thinner painted line); background-clip keeps the visible line itself thin. */
+	@media (hover: none), (pointer: coarse) {
+		input[type='range'] {
+			height: 6px;
+			padding: 19px 0;
+			box-sizing: content-box;
+			background-clip: content-box;
+		}
+
+		input[type='range']::-webkit-slider-thumb {
+			width: 20px;
+			height: 20px;
+		}
+
+		input[type='range']::-moz-range-thumb {
+			width: 20px;
+			height: 20px;
+		}
+	}
+
+	.pred {
+		margin: 2px 0 0;
+		font-size: 11px;
+		min-height: 16px;
+	}
+
+	.score {
+		margin: 8px 0 0;
+		font-size: 11px;
+		color: var(--ink);
+		min-height: 16px;
+	}
+
+	.rating-feedback {
+		min-height: 78px;
+	}
+
+	/* On a fresh selection (no preview, no perturbation) the predicted/gradient/
+	   reset rows are empty; collapse the reserved block so the panel isn't padded
+	   with whitespace. The reservation returns during interaction to avoid jumps. */
+	.rating-feedback.idle {
+		min-height: 0;
+	}
+
+	.rating-feedback.idle .pred,
+	.rating-feedback.idle .score {
+		display: none;
+	}
+
+	.reset-row {
+		min-height: 28px;
+	}
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatingSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/RatingSlider.svelte.ts"],"names":[],"mappings":"AAqFA,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/RestoreDefaultsButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getController, getUiConfig } from '../context.svelte.js';
+
+	const ctrl = getController();
+	const config = getUiConfig();
+</script>
+
+{#if config.loadDefaultCases && ctrl.casesLoaded && ctrl.hiddenDefaults.size > 0}
+	<button class="restore-defaults mono" onclick={ctrl.restoreDefaultCases}>
+		&#8634; restore default cases
+	</button>
+{/if}
+
+<style>
+	.restore-defaults {
+		position: absolute;
+		bottom: 34px;
+		left: 20px;
+		z-index: 10;
+		padding: 6px 11px;
+		background: var(--panel);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		color: var(--text-secondary);
+		font-size: 11px;
+		cursor: pointer;
+		box-shadow: 0 2px 10px rgba(32, 36, 43, 0.1);
+	}
+
+	.restore-defaults:hover {
+		border-color: var(--accent);
+		color: var(--text-accent);
+	}
+</style>

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RestoreDefaultsButton.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/RestoreDefaultsButton.svelte.ts"],"names":[],"mappings":"AAsBA,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,qBAAqB;;kBAA+E,CAAC;AACzF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,eAAe,qBAAqB,CAAC"}

package/dist/components/SensitivityReadout.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { sensGradient } from '../colors.js';
+	import { getAppState, getController } from '../context.svelte.js';
+	import { signedExp } from '../format.js';
+
+	const app = getAppState();
+	const ctrl = getController();
+	const busUnitTitle =
+		'LMP is measured in $/MWh and demand is perturbed in MW, so dLMP/dd has units ($/MWh)/MW. ' +
+		'DC LMPs move only when a binding constraint changes, so most nudges in this slider range ' +
+		'shift prices very little unless the active set changes.';
+	const branchUnitTitle =
+		'LMP is measured in $/MWh and the rating is perturbed in MVA, so dLMP/dfmax has units ' +
+		"($/MWh)/MVA. The column is zero unless the line's limit is binding.";
+
+	// Branch mode: the selection is a line and the column is ∂LMP/∂rating; the
+	// legend and preview pipeline are identical (both columns are bus-keyed).
+	const branchMode = $derived(app.selectedBranch !== null);
+	const unitTitle = $derived(branchMode ? branchUnitTitle : busUnitTitle);
+	const units = $derived(branchMode ? '($/MWh)/MVA' : '($/MWh)/MW');
+
+	const previewStep = $derived(
+		branchMode
+			? ctrl.ratingSliderValue - ctrl.committedRating
+			: ctrl.sliderValue - ctrl.committedDelta
+	);
+
+	// Label the selected line by its bus pair, matching BindingLines and
+	// RatingSlider; fall back to the raw branch id while the network loads.
+	const branchLabel = $derived.by(() => {
+		const b = ctrl.selectedBranchData;
+		return b ? `${b.from} – ${b.to}` : String(app.selectedBranch);
+	});
+</script>
+
+<div class="mode">
+	<span class="chip">
+		{ctrl.previewing ? 'LMP preview' : branchMode ? '∂LMP/∂rating' : '∂LMP/∂d'}
+	</span>
+	<span class="mono dim">
+		{#if branchMode}line {branchLabel}{:else}bus {app.selectedBus}{/if}
+	</span>
+	<button class="mono" onclick={ctrl.clearSelection}>esc&nbsp;clear</button>
+</div>
+<div class="sensitivity-readout" aria-live="polite">
+	{#if ctrl.previewing}
+		<p class="dim small">
+			{ctrl.activeSolvable?.solving
+				? 'Exact solve running; the map keeps the LMP preview.'
+				: 'First order LMP preview. Release for the exact solve.'}
+		</p>
+		{#if ctrl.sensSummary?.flat}
+			<div class="legend flat" style:background={ctrl.flatSensBackground}></div>
+			<div class="legend-labels mono single">
+				<span>uniform {signedExp(ctrl.sensSummary.mean * previewStep)} $/MWh</span>
+			</div>
+		{:else if ctrl.previewScale}
+			<!-- The bounds are fixed for the whole drag (column scale × full slider
+			     deflection), so the ramp ends label the colors: full green/purple is
+			     the predicted ΔLMP at full deflection, and intensity grows with the
+			     step instead of renormalizing every frame. -->
+			<div class="legend" style:background={sensGradient}></div>
+			<div class="legend-labels mono">
+				<span>&minus;{ctrl.previewScale.toExponential(1)}</span>
+				<span>&Delta;LMP $/MWh</span>
+				<span>+{ctrl.previewScale.toExponential(1)}</span>
+			</div>
+		{/if}
+	{:else}
+		<p class="dim small sensitivity-copy" title={unitTitle}>
+			{#if branchMode}
+				LMP response per MVA of rating on line {branchLabel}.
+			{:else}
+				LMP response per MW of demand at bus {app.selectedBus}.
+			{/if}
+			<span class="hint-dot mono" title={unitTitle} aria-label={unitTitle}>i</span>
+		</p>
+		{#if ctrl.sensSummary?.flat}
+			<div class="legend flat" style:background={ctrl.flatSensBackground}></div>
+			<div class="legend-labels mono single">
+				<span>uniform {signedExp(ctrl.sensSummary.mean)} {units}</span>
+			</div>
+		{:else if ctrl.sensSummary}
+			<div class="legend" style:background={sensGradient}></div>
+			<div class="legend-labels mono">
+				<span>&minus;{ctrl.sensSummary.scale.toExponential(1)}</span>
+				<span>0</span>
+				<span>+{ctrl.sensSummary.scale.toExponential(1)}</span>
+			</div>
+		{:else if app.sensitivityLoading}
+			<div class="legend" style:background="var(--line)" style:opacity="0.4"></div>
+			<div class="legend-labels mono single">
+				<span class="blink">
+					computing {#if branchMode}&part;LMP/&part;fmax{:else}&part;LMP/&part;d{/if}&hellip;
+				</span>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.chip {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		padding: 2px 8px;
+		border: 1px solid var(--accent);
+		color: var(--text-accent);
+		background: var(--accent-soft);
+		border-radius: 2px;
+		white-space: nowrap;
+	}
+
+	/* .mode > button lives in the global .mode block in app.css, not here: scoping
+	   it would raise its specificity above the global @media (max-width: 760px)
+	   override and break the mobile layout. See the note by .mode in app.css. */
+
+	.sensitivity-readout {
+		min-height: 58px;
+	}
+
+	.sensitivity-copy {
+		font-size: 11.5px;
+		line-height: 1.35;
+		white-space: nowrap;
+	}
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SensitivityReadout.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SensitivityReadout.svelte.ts"],"names":[],"mappings":"AAwGA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/SizeLegend.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { busRadius } from '../colors.js';
+
+	const SIZE_SAMPLES = [10, 100, 500];
+</script>
+
+<div class="sizes">
+	{#each SIZE_SAMPLES as mw (mw)}
+		<span class="size mono">
+			<i style:width="{2 * busRadius(mw)}px" style:height="{2 * busRadius(mw)}px"></i>
+			{mw}
+		</span>
+	{/each}
+	<span class="mono dim caption">MW, max(load,&#8201;gen)</span>
+</div>
+
+<style>
+	.sizes {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		font-size: 10px;
+		color: var(--text-secondary);
+	}
+
+	.size {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+	}
+
+	.size i {
+		display: inline-block;
+		border-radius: 50%;
+		background: rgba(212, 116, 34, 0.55);
+		border: 1px solid rgba(46, 42, 34, 0.45);
+	}
+
+	.caption {
+		margin-left: auto;
+		font-size: 9.5px;
+	}
+
+	@media (max-width: 760px) {
+		.sizes {
+			flex-wrap: wrap;
+			gap: 8px 12px;
+		}
+
+		.caption {
+			margin-left: 0;
+			flex-basis: 100%;
+		}
+	}
+</style>

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SizeLegend.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SizeLegend.svelte.ts"],"names":[],"mappings":"AAyBA,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,UAAU;;kBAA+E,CAAC;AAC9E,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/SolveCard.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { getController } from '../context.svelte.js';
+	import { formulationLabel, solveMetaLabel } from '../format.js';
+	import Sparkline from '../Sparkline.svelte';
+
+	const ctrl = getController();
+	const active = $derived(ctrl.activeSolvable);
+	const iterations = $derived(active?.iterations ?? []);
+</script>
+
+{#if active && (active.solving || active.solveMs != null)}
+	<div class="solvecard">
+		<div class="solvecard-head mono">
+			<span><b>OPF solve</b></span>
+		</div>
+		{#if iterations.length > 1}
+			{#key iterations}
+				<Sparkline {iterations} />
+			{/key}
+		{/if}
+		<div class="solve-meta mono dim">
+			<span class="solve-formulation">{formulationLabel(active.formulation)}</span>
+			<span>{solveMetaLabel(active)}</span>
+			{#if active.solveMs != null}<span>{active.solveMs} ms</span>{/if}
+		</div>
+		{#if active.solveBackend === 'rust-server' && active.solveFallbackReason}
+			<p class="fallback-reason mono dim" title={active.solveFallbackReason}>
+				fallback: {active.solveFallbackReason}
+			</p>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.solvecard {
+		position: absolute;
+		top: 76px;
+		right: 20px;
+		z-index: 10;
+		width: 300px;
+		padding: 13px 15px 11px;
+		background: var(--panel);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		backdrop-filter: blur(6px);
+		box-shadow: 0 4px 24px rgba(32, 36, 43, 0.08);
+		animation: rise 0.3s ease-out both;
+	}
+
+	.solvecard-head {
+		font-size: 10.5px;
+		margin-bottom: 6px;
+		white-space: nowrap;
+	}
+
+	.solve-meta {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 10px 14px;
+		font-size: 10px;
+		margin-top: 6px;
+	}
+
+	.solve-formulation {
+		color: var(--text-accent);
+	}
+
+	.fallback-reason {
+		margin: 6px 0 0;
+		font-size: 10px;
+		line-height: 1.35;
+		overflow-wrap: anywhere;
+	}
+
+	@media (max-width: 760px) {
+		.solvecard {
+			top: 184px;
+			left: auto;
+			right: 10px;
+			width: min(300px, calc(100% - 20px));
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolveCard.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SolveCard.svelte.ts"],"names":[],"mappings":"AA4CA,QAAA,MAAM,SAAS,2DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}