@tellegen/svelte 0.4.1 → 0.4.2

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>

package/dist/components/RatingSlider.svelte

@@ -22,34 +22,33 @@
 	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 sliderTip = 'Drag to preview, release to solve. The tick marks the committed rating.';
+	const disabledTip = 'Synthesized rating; not adjustable';
 	const scoreTip =
-		'Gradient estimates the declared objective change versus base before the solve finishes, from the engine preview at the committed point. Exact is the resolved OPF objective change.';
+		'Gradient: first-order estimate from the committed point. Exact: solved 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 class="slider-head">
+			<span>Rating change</span>
+			<span class="val mono">{signed(ctrl.ratingSliderValue)} MW</span>
 		</div>
-		<div class="line-row mono">
+		<div class="line-row">
 			{#if branch}
 				<span class="dim"
-					>line {branch.from}&#8201;&ndash;&#8201;{branch.to}, {fmt.format(branch.rate_mw)} MW</span
+					>Line <span class="mono"
+						>{branch.from}&#8201;&ndash;&#8201;{branch.to}, {fmt.format(branch.rate_mw)} MW</span
+					></span
 				>
 			{/if}
-			<span class="dim">
-				{#if bounds.disabled}
-					not adjustable
-				{:else}
-					{fmt.format(bounds.min)} to +{fmt.format(bounds.max)} MW
-				{/if}
-			</span>
+			{#if bounds.disabled}
+				<span class="dim">Not adjustable</span>
+			{:else}
+				<span class="mono dim">{fmt.format(bounds.min)} to +{fmt.format(bounds.max)} MW</span>
+			{/if}
 		</div>
 		<div
 			class="slider-track"
@@ -63,7 +62,7 @@
 				step="any"
 				disabled={bounds.disabled}
 				bind:value={ctrl.ratingSliderCurrent, ctrl.setRatingPreview}
-				aria-label="rating delta at selected line"
+				aria-label="Rating delta at selected line"
 				onpointerdown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
 				onkeydown={(e) => {
 					const next = sliderKeyValue(e.key, ctrl.ratingSliderValue, bounds.min, bounds.max);
@@ -80,18 +79,18 @@
 			/>
 		</div>
 		<div class="rating-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;
@@ -99,7 +98,7 @@
 			</p>
 			<div class="reset-row">
 				{#if ctrl.isPerturbed(c)}
-					<button class="reset mono" onclick={() => ctrl.resetCase(c)}>reset rating</button>
+					<button class="reset" onclick={() => ctrl.resetCase(c)}>Reset rating</button>
 				{/if}
 			</div>
 		</div>

package/dist/components/RestoreDefaultsButton.svelte

@@ -6,9 +6,7 @@
 </script>
 
 {#if config.loadDefaultCases && ctrl.casesLoaded && ctrl.hiddenDefaults.size > 0}
-	<button class="restore-defaults mono" onclick={ctrl.restoreDefaultCases}>
-		&#8634; restore default cases
-	</button>
+	<button class="restore-defaults" onclick={ctrl.restoreDefaultCases}>Restore default cases</button>
 {/if}
 
 <style>
@@ -22,6 +20,7 @@
 		border: 1px solid var(--line);
 		border-radius: 3px;
 		color: var(--text-secondary);
+		font-family: inherit;
 		font-size: 11px;
 		cursor: pointer;
 		box-shadow: var(--elev-1);

package/dist/components/SensitivityReadout.svelte

@@ -11,17 +11,11 @@
 			'objective units'
 		)
 	);
-	const busUnitTitle = $derived(
-		`LMP response to active demand, in ${reportedUnits}. The response is small while the active set stays unchanged.`
-	);
-	const branchUnitTitle = $derived(
-		`LMP response to the thermal rating, in ${reportedUnits}. The column is zero when the limit is inactive.`
-	);
+	const unitTitle = $derived(`Units: ${reportedUnits}`);
 
 	// Branch mode: the selection is a line and the column is price/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 previewUnits = $derived(app.previewPrices?.units ?? 'objective units/MW');
 
 	const previewStep = $derived(
@@ -42,25 +36,22 @@
 	<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 class="dim">
+		{#if branchMode}Line <span class="mono">{branchLabel}</span>{:else}Bus
+			<span class="mono">{app.selectedBus}</span>{/if}
 	</span>
-	<button class="mono" onclick={ctrl.clearSelection}
-		><span class="key-hint">esc&nbsp;</span>clear</button
-	>
+	<button onclick={ctrl.clearSelection} aria-keyshortcuts="Escape" title="Esc">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.'}
+			{ctrl.activeSolvable?.solving ? 'Solving…' : 'First-order preview. Release to 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)}
+					>Uniform {signedExp(ctrl.sensSummary.mean * previewStep)}
 					{previewUnits}</span
 				>
 			</div>
@@ -88,7 +79,7 @@
 		{#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)} {reportedUnits}</span>
+				<span>Uniform {signedExp(ctrl.sensSummary.mean)} {reportedUnits}</span>
 			</div>
 		{:else if ctrl.sensSummary}
 			<div class="legend" style:background={sensGradient}></div>
@@ -100,9 +91,7 @@
 		{: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;value/&part;fmax{:else}&part;value/&part;d{/if}&hellip;
-				</span>
+				<span class="blink">Computing&hellip;</span>
 			</div>
 		{/if}
 	{/if}
@@ -133,11 +122,4 @@
 		line-height: 1.35;
 		white-space: nowrap;
 	}
-
-	/* No Esc key to name on a touch device. */
-	@media (hover: none), (pointer: coarse) {
-		.key-hint {
-			display: none;
-		}
-	}
 </style>

package/dist/components/SolveCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getAppState, getController } from '../context.svelte.js';
-	import { formulationLabel, solveMetaLabel } from '../format.js';
+	import { formulationLabel } from '../format.js';
 	import Sparkline from '../Sparkline.svelte';
 	import PanelFrame from './PanelFrame.svelte';
 	let open = $state(true);
@@ -16,67 +16,101 @@
 				: []
 			: (active?.iterations ?? [])
 	);
+	/** Named only when a server took part; the browser engine is the default. */
+	const server = $derived(
+		active?.solveBackend === 'rust-server'
+			? 'Server'
+			: active?.solveBackend === 'clarabel-wasm-server-sensitivity'
+				? 'Server price sensitivity'
+				: null
+	);
 </script>
 
 {#if saved || (active && (active.solving || active.solveMs != null))}
 	<PanelFrame id="solver" title="Solver" side="right" order={10} width={320} bind:open>
 		<div class="solvecard">
-			<div class="solve-label mono">
-				{saved ? 'Saved result' : active?.formulation === 'acpf' ? 'Power flow' : 'OPF solve'}
-			</div>
 			{#if iterations.length > 1}
 				{#key iterations}
 					<Sparkline {iterations} />
 				{/key}
 			{/if}
 			{#if saved}
-				<div class="solve-meta mono dim">
-					<span class="solve-formulation">{formulationLabel(saved.formulation)}</span>
-					<span>{saved.solution?.status ?? 'Not solved'}</span>
-					<span>Saved state: {saved.label}</span>
-				</div>
+				<dl>
+					<div>
+						<dt>Calculation</dt>
+						<dd>{formulationLabel(saved.formulation)}</dd>
+					</div>
+					<div>
+						<dt>Result</dt>
+						<dd>{saved.solution?.status ?? 'Not solved'}</dd>
+					</div>
+					<div>
+						<dt>Saved state</dt>
+						<dd>{saved.label}</dd>
+					</div>
+				</dl>
 			{:else if active}
-				<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}
+				<dl>
+					<div>
+						<dt>Calculation</dt>
+						<dd>{formulationLabel(active.formulation)}</dd>
+					</div>
+					{#if iterations.length > 1}
+						<div>
+							<dt>Iterations</dt>
+							<dd class="mono">{iterations.length}</dd>
+						</div>
+					{/if}
+					{#if server}
+						<div>
+							<dt>Solver</dt>
+							<dd>{server}</dd>
+						</div>
+					{/if}
+					{#if active.solveMs != null}
+						<div>
+							<dt>Time</dt>
+							<dd class="mono">{active.solveMs} ms</dd>
+						</div>
+					{/if}
+					{#if active.solveBackend === 'rust-server' && active.solveFallbackReason}
+						<div>
+							<dt>Fallback</dt>
+							<dd title={active.solveFallbackReason}>{active.solveFallbackReason}</dd>
+						</div>
+					{/if}
+				</dl>
 			{/if}
 		</div>
 	</PanelFrame>
 {/if}
 
 <style>
-	.solve-label {
-		font-size: 13px;
-		margin-bottom: 8px;
-	}
 	.solvecard {
 		padding: 13px 15px 11px;
 	}
 
-	.solve-meta {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 10px 14px;
+	dl {
+		margin: 6px 0 0;
 		font-size: 12px;
-		margin-top: 6px;
 	}
 
-	.solve-formulation {
-		color: var(--text-accent);
+	dl div {
+		display: flex;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 2px 0;
 	}
 
-	.fallback-reason {
-		margin: 6px 0 0;
-		font-size: 12px;
-		line-height: 1.35;
+	dt {
+		flex: none;
+		color: var(--text-secondary);
+	}
+
+	dd {
+		min-width: 0;
+		margin: 0;
+		text-align: right;
 		overflow-wrap: anywhere;
 	}
 </style>

package/dist/components/TopMovers.svelte

@@ -14,15 +14,15 @@
 
 <div class="movers-block">
 	{#if !ctrl.previewing && ctrl.topMovers.length > 0}
-		<table class="mono">
-			<caption class="mono dim" title={unitTitle}>
-				largest LMP response <span class="unit">{units}</span>
+		<table>
+			<caption class="dim" title={unitTitle}>
+				Largest LMP response <span class="mono unit">{units}</span>
 			</caption>
 			<tbody>
 				{#each ctrl.topMovers as mover (mover.bus)}
 					<tr>
-						<td>bus {mover.bus}</td>
-						<td class:pos={mover.value > 0} class:neg={mover.value < 0}>
+						<td>Bus <span class="mono">{mover.bus}</span></td>
+						<td class="mono" class:pos={mover.value > 0} class:neg={mover.value < 0}>
 							{signedExp(mover.value)}
 						</td>
 					</tr>

package/dist/context.svelte.d.ts

@@ -9,15 +9,19 @@ export interface TellegenUiConfig {
     orgLabel: string;
     showFooter: boolean;
     /** `'dark'` sets `data-theme="dark"` on the document root while the
-     * provider is mounted, which switches the `styles.css` tokens. */
+     * provider is mounted, which switches the `styles.css` tokens. The
+     * provider keeps it in step with its prop. */
     theme: 'light' | 'dark';
     /** CARTO basemap key for the default shell's map, trimmed; empty for
-     * none. See `TellegenMap`'s `cartoApiKey`. */
+     * none. See `TellegenMap`'s `cartoApiKey`. The provider keeps it in step
+     * with its prop. */
     cartoApiKey: string;
 }
 export type TellegenUiOptions = Partial<TellegenUiConfig>;
 export declare const DEFAULT_TELLEGEN_UI_CONFIG: TellegenUiConfig;
 export declare function resolveTellegenUiConfig(options?: TellegenUiOptions): TellegenUiConfig;
+export declare const resolveTheme: (theme: TellegenUiOptions["theme"]) => TellegenUiConfig["theme"];
+export declare const resolveCartoApiKey: (key: TellegenUiOptions["cartoApiKey"]) => string;
 export declare const setAppState: (a: AppState) => AppState;
 export declare const setController: (c: Controller) => Controller;
 export declare const setUiConfig: (config: TellegenUiConfig) => TellegenUiConfig;

package/dist/context.svelte.js

@@ -21,10 +21,12 @@ export function resolveTellegenUiConfig(options = {}) {
         orgHref: options.orgHref ?? DEFAULT_TELLEGEN_UI_CONFIG.orgHref,
         orgLabel: options.orgLabel ?? DEFAULT_TELLEGEN_UI_CONFIG.orgLabel,
         showFooter: options.showFooter ?? DEFAULT_TELLEGEN_UI_CONFIG.showFooter,
-        theme: options.theme ?? DEFAULT_TELLEGEN_UI_CONFIG.theme,
-        cartoApiKey: normalizeCartoApiKey(options.cartoApiKey) ?? DEFAULT_TELLEGEN_UI_CONFIG.cartoApiKey
+        theme: resolveTheme(options.theme),
+        cartoApiKey: resolveCartoApiKey(options.cartoApiKey)
     };
 }
+export const resolveTheme = (theme) => theme ?? DEFAULT_TELLEGEN_UI_CONFIG.theme;
+export const resolveCartoApiKey = (key) => normalizeCartoApiKey(key) ?? DEFAULT_TELLEGEN_UI_CONFIG.cartoApiKey;
 export const setAppState = (a) => setContext(APP, a);
 export const setController = (c) => setContext(CTRL, c);
 export const setUiConfig = (config) => setContext(CONFIG, config);