@tellegen/svelte 0.1.0 → 0.1.2

package/dist/components/ControlPanel.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getAppState, getController, getUiConfig } from '../context.svelte.js';
+	import { splitName } from '../format.js';
+	import AppFooter from './AppFooter.svelte';
 	import BindingLines from './BindingLines.svelte';
+	import BusPicker from './BusPicker.svelte';
 	import DemandSlider from './DemandSlider.svelte';
 	import DisplayControls from './DisplayControls.svelte';
 	import FormulationSelector from './FormulationSelector.svelte';
@@ -15,81 +19,297 @@
 	const app = getAppState();
 	const ctrl = getController();
 	const config = getUiConfig();
+
+	// Bottom sheet heights, compact layout only. peek is measured from the grab
+	// bar; half and full are fractions of the viewport.
+	type Snap = 'peek' | 'half' | 'full';
+	const SNAPS: Snap[] = ['peek', 'half', 'full'];
+	const SNAP_FRACTION: Record<Snap, number> = { peek: 0, half: 0.46, full: 0.92 };
+	/** Below this the viewport is a landscape phone and half has to give up room. */
+	const SHORT_VIEWPORT_PX = 560;
+	/** px/ms above which a release snaps in the drag direction instead of to the nearest. */
+	const FLICK_SPEED = 0.35;
+	/** Map left visible above a full sheet, on top of the header it also clears. */
+	const FULL_SNAP_MAP_BAND = 14;
+
+	let snap = $state<Snap>('half');
+	let headEl = $state.raw<HTMLElement | undefined>(undefined);
+	let bodyEl = $state.raw<HTMLElement | undefined>(undefined);
+	let headHeight = $state(52);
+	/** Height under an active drag; null when resting on a snap. */
+	let dragHeight = $state<number | null>(null);
+
+	const fractionFor = (s: Snap) =>
+		s === 'half' && app.viewportHeight < SHORT_VIEWPORT_PX ? 0.38 : SNAP_FRACTION[s];
+
+	const snapHeight = (s: Snap) =>
+		s === 'peek'
+			? headHeight
+			: Math.min(
+					Math.round(app.viewportHeight * fractionFor(s)),
+					app.viewportHeight - app.headerInset - FULL_SNAP_MAP_BAND
+				);
+	const sheetHeight = $derived(dragHeight ?? snapHeight(snap));
+
+	const caseLabel = $derived(
+		app.active
+			? splitName(app.active.name)[0]
+			: (app.activeLocal?.label ?? app.activeMulti?.label ?? '')
+	);
+
+	/** Single line shown on the grab bar while collapsed. */
+	const summary = $derived.by(() => {
+		if (app.error) return 'error — open for details';
+		if (app.selectedBus !== null) return `bus ${app.selectedBus} · ∂LMP/∂d`;
+		if (app.selectedBranch !== null) return `line ${app.selectedBranch} · ∂LMP/∂rating`;
+		const stats = ctrl.networkStats;
+		if (!stats) return app.parsingFile ? 'parsing…' : 'loading…';
+		return `${caseLabel} · ${stats.buses} buses · ${stats.branches} lines`;
+	});
+
+	const expandLabel = $derived(
+		snap === 'full' ? 'collapse the control panel' : 'expand the control panel'
+	);
+
+	/** A selection whose readout has resolved (or is resolving). */
+	const busReadout = $derived(
+		app.selectedBus !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)
+	);
+	const branchReadout = $derived(
+		app.selectedBranch !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)
+	);
+	/** Compact only: a resolved selection outranks the case stats it was read
+	 * against. Gated on networkStats because that is what renders the readout. */
+	const selectionLeads = $derived(
+		app.compactLayout && !!ctrl.networkStats && (busReadout || branchReadout)
+	);
+
+	$effect(() => {
+		app.sheetInset = app.compactLayout ? sheetHeight : 0;
+	});
+
+	// peek height tracks the grab bar, which resizes when the summary line changes.
+	$effect(() => {
+		const el = headEl;
+		if (!el) return;
+		const measure = () => (headHeight = Math.round(el.getBoundingClientRect().height));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
+	// A map selection renders the sensitivity readout and the demand control, both
+	// of which are below the fold at peek. The body also has to go back to the top:
+	// reaching the bus lookup scrolls it down, and the readout that replaces it as
+	// the first block would otherwise open out of view.
+	$effect(() => {
+		const selected = app.selectedBus ?? app.selectedBranch;
+		if (selected === null) return;
+		untrack(() => {
+			if (!app.compactLayout) return;
+			if (snap === 'peek') snap = 'half';
+			if (bodyEl) bodyEl.scrollTop = 0;
+		});
+	});
+
+	function cycle() {
+		snap = snap === 'peek' ? 'half' : snap === 'half' ? 'full' : 'peek';
+	}
+
+	function nearestSnap(height: number): Snap {
+		return SNAPS.reduce((best, s) =>
+			Math.abs(snapHeight(s) - height) < Math.abs(snapHeight(best) - height) ? s : best
+		);
+	}
+
+	let dragStartY = 0;
+	let dragStartHeight = 0;
+	let dragMoved = false;
+	let lastY = 0;
+	let lastT = 0;
+	let speed = 0;
+
+	function onPointerDown(e: PointerEvent) {
+		if (!app.compactLayout || !e.isPrimary) return;
+		if (e.currentTarget instanceof HTMLElement) e.currentTarget.setPointerCapture(e.pointerId);
+		dragStartY = e.clientY;
+		dragStartHeight = sheetHeight;
+		dragHeight = dragStartHeight;
+		dragMoved = false;
+		speed = 0;
+		lastY = e.clientY;
+		lastT = e.timeStamp;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (dragHeight === null) return;
+		const dy = dragStartY - e.clientY;
+		if (Math.abs(dy) > 4) dragMoved = true;
+		const dt = e.timeStamp - lastT;
+		if (dt > 0) speed = (lastY - e.clientY) / dt;
+		lastY = e.clientY;
+		lastT = e.timeStamp;
+		dragHeight = Math.max(
+			snapHeight('peek'),
+			Math.min(snapHeight('full'), dragStartHeight + dy)
+		);
+	}
+
+	function onPointerUp() {
+		if (dragHeight === null) return;
+		const height = dragHeight;
+		dragHeight = null;
+		if (!dragMoved) return; // a tap; the click handler cycles
+		const landed = nearestSnap(height);
+		if (Math.abs(speed) > FLICK_SPEED) {
+			const next = SNAPS.indexOf(landed) + (speed > 0 ? 1 : -1);
+			snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
+		} else {
+			snap = landed;
+		}
+	}
+
+	function onHeadKeydown(e: KeyboardEvent) {
+		const step = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
+		if (step === 0) return;
+		e.preventDefault();
+		const next = SNAPS.indexOf(snap) + step;
+		snap = SNAPS[Math.max(0, Math.min(SNAPS.length - 1, next))];
+	}
 </script>
 
-<aside class="panel">
-	{#if app.error}
-		<p class="error mono">{app.error}</p>
-		<div class="error-actions">
-			<button class="reset mono" onclick={ctrl.retryError}>retry</button>
-			<button class="reset mono" onclick={() => (app.error = null)}>dismiss</button>
-		</div>
-	{/if}
-	{#if app.parsingFile}
-		<p class="dim mono blink">parsing&hellip;</p>
-	{/if}
-	{#if app.activeLocal}
-		<LocalCaseDetails />
-	{/if}
-	{#if app.activeMulti}
-		<MulticonductorDetails />
+<aside
+	class="panel"
+	class:sheet={app.compactLayout}
+	class:dragging={dragHeight !== null}
+	style:height={app.compactLayout ? `${sheetHeight}px` : null}
+>
+	{#if app.compactLayout}
+		<button
+			type="button"
+			class="sheet-head"
+			bind:this={headEl}
+			aria-expanded={snap !== 'peek'}
+			aria-controls="control-panel-body"
+			aria-label={expandLabel}
+			onpointerdown={onPointerDown}
+			onpointermove={onPointerMove}
+			onpointerup={onPointerUp}
+			onpointercancel={onPointerUp}
+			onkeydown={onHeadKeydown}
+			onclick={() => {
+				// click fires after pointerup; a keyboard activation leaves dragMoved
+				// unset, so clear it here rather than in the pointer handlers
+				const moved = dragMoved;
+				dragMoved = false;
+				if (!moved) cycle();
+			}}
+		>
+			<span class="grabber" aria-hidden="true"></span>
+			{#if snap === 'peek'}
+				<span class="sheet-summary mono">{summary}</span>
+			{/if}
+		</button>
 	{/if}
-	{#if !ctrl.networkStats}
-		{#if !app.error && !app.activeLocal && !app.activeMulti}
-			{#if ctrl.casesLoaded && app.cases.length === 0}
-				<p class="dim mono">
-					{config.loadDefaultCases ? 'no default cases loaded' : 'drop a case file to begin'}
-				</p>
-				{#if config.loadDefaultCases}
-					<button class="reset mono" onclick={ctrl.restoreDefaultCases}
-						>restore default cases</button
-					>
+
+	<div class="panel-body" id="control-panel-body" bind:this={bodyEl}>
+		{#snippet selectionBlock()}
+			{#if busReadout}
+				<SensitivityReadout />
+
+				<DemandSlider />
+
+				{#if ctrl.showMoverSlot}
+					<TopMovers />
+				{/if}
+			{:else if branchReadout}
+				<SensitivityReadout />
+
+				<RatingSlider />
+
+				{#if ctrl.showMoverSlot}
+					<TopMovers />
 				{/if}
-			{:else if ctrl.loadingBackendCase}
-				<p class="dim mono blink">loading selected case&hellip;</p>
 			{:else}
-				<p class="dim mono blink">loading cases&hellip;</p>
+				<DisplayControls />
 			{/if}
+		{/snippet}
+
+		{#if app.error}
+			<p class="error mono">{app.error}</p>
+			<div class="error-actions">
+				<button class="reset mono" onclick={ctrl.retryError}>retry</button>
+				<button class="reset mono" onclick={() => (app.error = null)}>dismiss</button>
+			</div>
 		{/if}
-	{:else}
-		{#if !app.activeLocal}
-			<NetworkStats />
+		{#if app.parsingFile}
+			<p class="dim mono blink">parsing&hellip;</p>
 		{/if}
 
-		{#if ctrl.activeSolvable}
-			<FormulationSelector />
-		{/if}
+		<!-- The sheet shows a few hundred px at most, so what the last tap produced
+		     leads; the case provenance and stats it was read against follow. -->
+		{#if selectionLeads}
+			{@render selectionBlock()}
 
-		{#if !app.placingLocalId}
-			<BindingLines />
+			<hr />
 		{/if}
 
-		<hr />
+		{#if app.activeLocal}
+			<LocalCaseDetails />
+		{/if}
+		{#if app.activeMulti}
+			<MulticonductorDetails />
+		{/if}
+		{#if !ctrl.networkStats}
+			{#if !app.error && !app.activeLocal && !app.activeMulti}
+				{#if ctrl.casesLoaded && app.cases.length === 0}
+					<p class="dim mono">
+						{config.loadDefaultCases ? 'no default cases loaded' : 'drop a case file to begin'}
+					</p>
+					{#if config.loadDefaultCases}
+						<button class="reset mono" onclick={ctrl.restoreDefaultCases}
+							>restore default cases</button
+						>
+					{/if}
+				{:else if ctrl.loadingBackendCase}
+					<p class="dim mono blink">loading selected case&hellip;</p>
+				{:else}
+					<p class="dim mono blink">loading cases&hellip;</p>
+				{/if}
+			{/if}
+		{:else}
+			{#if !app.activeLocal}
+				<NetworkStats />
+			{/if}
 
-		{#if app.selectedBus !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)}
-			<SensitivityReadout />
+			{#if ctrl.activeSolvable}
+				<FormulationSelector />
+			{/if}
 
-			<DemandSlider />
+			{#if app.compactLayout}
+				<BusPicker inline />
+			{/if}
 
-			{#if ctrl.showMoverSlot}
-				<TopMovers />
+			{#if !app.placingLocalId}
+				<BindingLines />
 			{/if}
-		{:else if app.selectedBranch !== null && (ctrl.selectedSensitivity || app.sensitivityLoading)}
-			<SensitivityReadout />
 
-			<RatingSlider />
+			{#if !selectionLeads}
+				<hr />
 
-			{#if ctrl.showMoverSlot}
-				<TopMovers />
+				{@render selectionBlock()}
 			{/if}
-		{:else}
-			<DisplayControls />
-		{/if}
 
-		<hr />
+			<hr />
 
-		<SizeLegend />
-	{/if}
+			<SizeLegend />
+		{/if}
+
+		{#if app.compactLayout && config.showFooter}
+			<AppFooter inline />
+		{/if}
+	</div>
 </aside>
 
 <style>
@@ -98,10 +318,11 @@
 		top: 76px;
 		left: 20px;
 		z-index: 10;
+		display: flex;
+		flex-direction: column;
 		width: 312px;
 		max-height: calc(100% - 122px);
-		overflow-y: auto;
-		padding: 16px 18px;
+		overflow: hidden;
 		background: var(--panel);
 		border: 1px solid var(--line);
 		border-radius: 3px;
@@ -110,6 +331,16 @@
 		animation: rise 0.5s 0.12s ease-out both;
 	}
 
+	.panel-body {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow-y: auto;
+		/* A flick that runs past the end of the panel must not scroll the page or
+		   pan the map underneath. */
+		overscroll-behavior: contain;
+		padding: 16px 18px;
+	}
+
 	hr {
 		border: 0;
 		border-top: 1px solid var(--line);
@@ -126,24 +357,80 @@
 		gap: 6px;
 	}
 
-	@media (max-width: 760px) {
-		.panel {
-			top: auto;
-			left: 10px;
-			right: 10px;
-			bottom: 40px;
-			width: auto;
-			max-height: 44dvh;
-			padding: 14px 16px;
-			background: var(--paper);
-		}
+	/* The grab bar: a 44px strip that drags the sheet and cycles it on tap. */
+	.sheet-head {
+		flex: 0 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 7px;
+		width: 100%;
+		min-height: 44px;
+		padding: 9px 16px 11px;
+		background: none;
+		border: 0;
+		border-bottom: 1px solid transparent;
+		color: inherit;
+		font: inherit;
+		cursor: grab;
+		/* the browser must not claim the vertical gesture */
+		touch-action: none;
 	}
 
-	@media (max-width: 420px) {
-		.panel {
-			bottom: 34px;
-			max-height: 46dvh;
-		}
+	.sheet-head:active {
+		cursor: grabbing;
+	}
+
+	.grabber {
+		width: 40px;
+		height: 4px;
+		border-radius: 2px;
+		background: var(--line);
+	}
+
+	.sheet-head:hover .grabber,
+	.sheet-head:focus-visible .grabber {
+		background: var(--accent);
+	}
+
+	.sheet-summary {
+		max-width: 100%;
+		overflow: hidden;
+		font-size: 11.5px;
+		color: var(--text-secondary);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sheet {
+		top: auto;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: auto;
+		max-height: none;
+		background: var(--paper);
+		border-width: 1px 0 0;
+		border-radius: 12px 12px 0 0;
+		box-shadow: 0 -6px 28px rgba(32, 36, 43, 0.14);
+		transition: height var(--dur-med) var(--ease-out);
+	}
+
+	.sheet .panel-body {
+		padding: 0 16px 14px;
+		/* clear the home indicator on a phone with no bezel */
+		padding-bottom: max(14px, env(safe-area-inset-bottom));
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.sheet .sheet-head {
+		border-bottom-color: var(--line);
+	}
+
+	/* A dragged sheet tracks the finger; the snap animation is for releases. */
+	.sheet.dragging {
+		transition: none;
 	}
 
 	@media (prefers-reduced-motion: reduce) {

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

@@ -1,19 +1,4 @@
-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 ControlPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ControlPanel = InstanceType<typeof ControlPanel>;
+declare const ControlPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ControlPanel = ReturnType<typeof ControlPanel>;
 export default ControlPanel;
 //# sourceMappingURL=ControlPanel.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ControlPanel.svelte.ts"],"names":[],"mappings":"AAgHA,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,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ControlPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ControlPanel.svelte.ts"],"names":[],"mappings":"AA6TA,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/FormulationSelector.svelte

@@ -79,4 +79,21 @@
 		opacity: 0.55;
 		cursor: progress;
 	}
+
+	@media (hover: none), (pointer: coarse) {
+		/* The select is sized to its longest option, which runs off a 320px screen.
+		   Let it shrink around the current value rather than truncate the label.
+		   16px also keeps Safari from zooming the layout viewport on focus. */
+		.formulation-row select {
+			flex: 0 1 auto;
+			min-width: 0;
+			min-height: 44px;
+			font-size: 16px;
+			padding-block: 6px;
+		}
+
+		.formulation-row > span {
+			flex: 0 0 auto;
+		}
+	}
 </style>

package/dist/components/MulticonductorDetails.svelte

@@ -4,6 +4,7 @@
 	import {
 		attachmentColor,
 		attachmentGlyph,
+		edgeColor,
 		isPhaseTerminal,
 		phaseColor
 	} from '../multiconductor.js';
@@ -114,11 +115,39 @@
 		{:else}
 			<p class="footnote mono">no attachments on this bus</p>
 		{/if}
+	{:else if mc.selectedEdge}
+		{@const e = mc.selectedEdge}
+		<hr />
+		<h3 class="mono">
+			<i class="swatch" style={`--sc:${rgbaCss([...edgeColor(e.kind, e.closed)])}`}></i>
+			{e.kind} {e.from}&#8201;&ndash;&#8201;{e.to}
+		</h3>
+		<dl class="mono">
+			<div>
+				<dt>phases</dt>
+				<dd>{e.n_phases}&#966; &#8901; {e.conductors.length} conductors</dd>
+			</div>
+			{#if e.kind === 'switch'}
+				<div>
+					<dt>state</dt>
+					<dd>{e.closed ? 'closed' : 'open'}</dd>
+				</div>
+			{/if}
+		</dl>
+		<div class="pairs">
+			{#each e.conductors as [ft, tt], i (i)}
+				<span class="pair">
+					<span class="term" style={`--tc:${terminalColor(ft)}`}>{ft}</span>
+					<span class="pair-dash mono">&ndash;</span>
+					<span class="term" style={`--tc:${terminalColor(tt)}`}>{tt}</span>
+				</span>
+			{/each}
+		</div>
 	{:else if mc.placed}
-		<p class="footnote mono">select a bus to expand its terminals and conductors</p>
+		<p class="footnote mono">select a bus or a line to expand its detail</p>
 	{/if}
 
-	<div class="legend mono">
+	<div class="mc-legend mono">
 		<span class="legend-row">
 			<i class="swatch" style={`--sc:${rgbaCss([...phaseColor('1')])}`}></i>a
 			<i class="swatch" style={`--sc:${rgbaCss([...phaseColor('2')])}`}></i>b
@@ -134,8 +163,6 @@
 		</span>
 	</div>
 
-	<p class="footnote mono">parsed in your browser by powerio (wasm); never uploaded</p>
-
 	{#if !mc.placed}
 		<button class="reset mono" onclick={() => ctrl.moveMultiCase(mc)}>place on map</button>
 	{:else}
@@ -184,6 +211,8 @@
 	dd {
 		margin: 0;
 		text-align: right;
+		/* Wrap the label instead of splitting a value sequence like 126 / 0 / 9. */
+		white-space: nowrap;
 	}
 
 	.terminals {
@@ -232,7 +261,9 @@
 		letter-spacing: 0;
 	}
 
-	.legend {
+	/* The global stylesheet's .legend is the 6px color-ramp strip; its height
+	 * leaks into a scoped .legend, so this container carries its own name. */
+	.mc-legend {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
@@ -241,6 +272,28 @@
 		color: var(--text-secondary);
 	}
 
+	.pairs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-top: 8px;
+	}
+
+	.pair {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+	}
+
+	.pair-dash {
+		color: var(--text-secondary);
+	}
+
+	h3 .swatch {
+		margin-right: 4px;
+		vertical-align: -1px;
+	}
+
 	.legend-row {
 		display: flex;
 		align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"MulticonductorDetails.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MulticonductorDetails.svelte.ts"],"names":[],"mappings":"AAyJA,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"}
+{"version":3,"file":"MulticonductorDetails.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MulticonductorDetails.svelte.ts"],"names":[],"mappings":"AAoLA,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

@@ -40,7 +40,9 @@
 	<span class="mono dim">
 		{#if branchMode}line {branchLabel}{:else}bus {app.selectedBus}{/if}
 	</span>
-	<button class="mono" onclick={ctrl.clearSelection}>esc&nbsp;clear</button>
+	<button class="mono" onclick={ctrl.clearSelection}
+		><span class="key-hint">esc&nbsp;</span>clear</button
+	>
 </div>
 <div class="sensitivity-readout" aria-live="polite">
 	{#if ctrl.previewing}
@@ -123,4 +125,11 @@
 		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

@@ -75,7 +75,8 @@
 
 	@media (max-width: 760px) {
 		.solvecard {
-			top: 184px;
+			/* just clear of the header's case tabs */
+			top: 108px;
 			left: auto;
 			right: 10px;
 			width: min(300px, calc(100% - 20px));