@tellegen/svelte 0.1.1 → 0.1.2

package/dist/TellegenMap.svelte

@@ -495,11 +495,10 @@
 	 * The branch variant also clears the rating readout on the panel's lower edge. */
 	function framePadding(width: number, height: number, kind: 'case' | 'branch') {
 		if (width <= 760) {
-			const bottom =
-				kind === 'branch'
-					? Math.min(Math.round(height * 0.42), 300)
-					: Math.min(Math.round(height * 0.5), 330);
-			return { top: 130, left: 24, right: 24, bottom };
+			// bottom follows the sheet; capped so a fully open sheet still leaves a band to fit into
+			const clearance = kind === 'branch' ? 16 : 28;
+			const bottom = Math.min(app.sheetInset + clearance, Math.round(height * 0.55));
+			return { top: app.headerInset + 8, left: 24, right: 24, bottom };
 		}
 		return kind === 'branch'
 			? { top: 106, left: 388, right: 76, bottom: 80 }
@@ -552,6 +551,25 @@
 		);
 	}
 
+	function coarsePointer(): boolean {
+		return typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+	}
+
+	// Compact chrome anchoring. maplibre's bottom-right controls sit over the map,
+	// so the sheet would bury them; they ride above it instead. Under
+	// CHROME_MIN_BAND_PX of map left they drop out rather than climb into the
+	// header — at that point the sheet covers what they annotate.
+	const CHROME_MIN_BAND_PX = 132;
+
+	/** How far the sheet can push the chrome up before it would reach the header. */
+	const chromeLiftCap = $derived(
+		Math.max(0, app.viewportHeight - app.headerInset - CHROME_MIN_BAND_PX)
+	);
+	const chromeInset = $derived(
+		app.compactLayout ? Math.min(app.sheetInset, chromeLiftCap) : 0
+	);
+	const chromeVisible = $derived(!app.compactLayout || app.sheetInset <= chromeLiftCap);
+
 	/** Fly to the selected branch; true when a camera move started. */
 	function focusSelectedBranch(): boolean {
 		if (!map || !selectedBranchCue) return false;
@@ -699,6 +717,7 @@
 	// deck layers also inherit maplibre's 4096 canvas clamp. The flat positron
 	// basemap writes no depth, so the overlay always draws on top.
 	function buildOverlay(MapboxOverlay: MapModules['MapboxOverlay']): MapboxOverlay {
+		const touch = coarsePointer();
 		return new MapboxOverlay({
 			interleaved: true,
 			layers: [],
@@ -706,10 +725,13 @@
 				depthWriteEnabled: false,
 				depthCompare: 'always'
 			},
+			// a small bus draws ~9px across, well under a fingertip
+			pickingRadius: touch ? 12 : 0,
 			onClick: (info: PickingInfo) => {
 				if (!app.placingId && !isSelectableLayer(info.layer?.id)) onmapclick();
 			},
-			getTooltip: tooltip,
+			// a touch tooltip opens under the finger and stays until the next tap
+			getTooltip: touch ? undefined : tooltip,
 			getCursor: ({ isHovering, isDragging }: CursorState) =>
 				app.placingId ? 'crosshair' : isDragging ? 'grabbing' : isHovering ? 'pointer' : 'grab'
 		});
@@ -1121,6 +1143,25 @@
 		void tick().then(scheduleCueSync);
 	});
 
+	// Pan the selected bus into the band the sheet leaves. The delay outlasts the
+	// sheet's snap transition; sheetInset is read inside the timeout so the effect
+	// does not re-run (and re-pan) on every frame of a sheet drag.
+	$effect(() => {
+		const cue = selectedBusCue;
+		if (!map || !cue || !app.compactLayout) return;
+		void cue.key;
+		const m = map;
+		const timer = setTimeout(() => {
+			const { clientHeight } = m.getContainer();
+			const y = m.project([cue.lon, cue.lat]).y;
+			const floor = clientHeight - app.sheetInset - CUE_MARGIN_PX;
+			const ceiling = 104;
+			const dy = y > floor ? y - floor : y < ceiling ? y - ceiling : 0;
+			if (dy !== 0) m.panBy([0, dy], { duration: prefersReducedMotion() ? 0 : 320 });
+		}, 340);
+		return () => clearTimeout(timer);
+	});
+
 	function boundsFor(target: string): LngLatBoundsLike | null {
 		const points: [number, number][] = [];
 		const fold = (pts: { lon: number; lat: number }[]) => {
@@ -1176,7 +1217,11 @@
 </script>
 
 {#key mapGen}
-	<div class="map-stage">
+	<div
+		class="map-stage"
+		class:chrome-clear={!chromeVisible}
+		style="--chrome-inset: {chromeInset}px"
+	>
 		<div class="map" {@attach initMap}></div>
 		{#if selectedBusCue}
 			{#key selectedBusCue.key}
@@ -1203,6 +1248,7 @@
 	<button
 		type="button"
 		class="place-at-center mono"
+		style="--chrome-inset: {chromeInset}px"
 		onclick={() => {
 			if (!map) return;
 			const center = map.getCenter();
@@ -1386,7 +1432,7 @@
 	.place-at-center {
 		position: absolute;
 		left: 50%;
-		bottom: 92px;
+		bottom: calc(92px + var(--chrome-inset, 0px));
 		z-index: 15;
 		transform: translateX(-50%);
 		padding: 7px 14px;
@@ -1401,17 +1447,27 @@
 
 	@media (max-width: 420px) {
 		.place-at-center {
-			bottom: 78px;
+			bottom: calc(78px + var(--chrome-inset, 0px));
 		}
 	}
 
 	.map :global(.maplibregl-ctrl-bottom-right) {
 		right: 20px;
-		bottom: 18px;
+		/* rides above the bottom sheet so attribution stays legible */
+		bottom: calc(18px + var(--chrome-inset, 0px));
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
 		gap: 6px;
+		transition:
+			bottom var(--dur-med) var(--ease-out),
+			opacity var(--dur-fast) var(--ease-out);
+	}
+
+	/* The sheet has taken the map; nothing left down there to attribute. */
+	.map-stage.chrome-clear :global(.maplibregl-ctrl-bottom-right) {
+		opacity: 0;
+		pointer-events: none;
 	}
 
 	.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl) {
@@ -1439,6 +1495,26 @@
 		color: var(--text-secondary);
 	}
 
+	@media (hover: none), (pointer: coarse) {
+		/* A long press on the canvas must not raise the iOS callout or magnifier.
+		   Scoped to touch so a mouse can still select the attribution text. */
+		.map {
+			-webkit-touch-callout: none;
+			-webkit-tap-highlight-color: transparent;
+			user-select: none;
+		}
+
+		/* maplibre ships 29px zoom buttons; a fingertip wants 44. */
+		.map :global(.maplibregl-ctrl-group button) {
+			width: 44px;
+			height: 44px;
+		}
+
+		.map :global(.maplibregl-ctrl-group button .maplibregl-ctrl-icon) {
+			background-size: 22px 22px;
+		}
+	}
+
 	.map :global(.deck-tooltip) {
 		background: var(--panel) !important;
 		border: 1px solid var(--line);
@@ -1453,11 +1529,31 @@
 
 	@media (max-width: 760px) {
 		.map :global(.maplibregl-ctrl-attrib) {
+			/* last in the column so it rests on the sheet's edge instead of
+			   floating over the network a zoom control's height above it */
+			order: 1;
 			width: auto;
 			min-width: 0;
 			right: 0;
 			white-space: normal;
 		}
+
+		/* The band of map a phone has left between the header and the sheet is
+		   about the height of the solve card, which covers the buttons wherever
+		   they land. Pinch and double tap zoom; the attribution stays. */
+		.map :global(.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group) {
+			display: none;
+		}
+	}
+
+	/* One line on a small phone: wrapped attribution turns into a wide block
+	   sitting over the network. */
+	@media (max-width: 460px) {
+		.map :global(.maplibregl-ctrl-attrib) {
+			max-width: calc(100vw - 20px);
+			font-size: 9px;
+			white-space: nowrap;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/TellegenMap.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TellegenMap.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TellegenMap.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC;AAoEzC,KAAK,gBAAgB,GAAI;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAsoCH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TellegenMap.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TellegenMap.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC;AAoEzC,KAAK,gBAAgB,GAAI;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA+qCH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/TellegenShell.svelte

@@ -12,6 +12,7 @@
 	import TellegenMap from './TellegenMap.svelte';
 
 	const FILE_DROP_QUERY = '(hover: hover) and (pointer: fine) and (min-width: 761px)';
+	const COMPACT_QUERY = '(max-width: 760px)';
 
 	const app = getAppState();
 	const ctrl = getController();
@@ -50,7 +51,28 @@
 		};
 		syncFileDropUi();
 		query.addEventListener('change', syncFileDropUi);
-		return () => query.removeEventListener('change', syncFileDropUi);
+
+		const compact = window.matchMedia(COMPACT_QUERY);
+		const syncCompact = () => {
+			app.compactLayout = compact.matches;
+			if (!compact.matches) app.sheetInset = 0;
+		};
+		syncCompact();
+		compact.addEventListener('change', syncCompact);
+
+		// The sheet sizes its snaps against the viewport and the map caps how far
+		// it lifts the basemap chrome, so both read one measurement taken here.
+		const syncViewport = () => (app.viewportHeight = window.innerHeight);
+		syncViewport();
+		window.addEventListener('resize', syncViewport);
+		window.addEventListener('orientationchange', syncViewport);
+
+		return () => {
+			query.removeEventListener('change', syncFileDropUi);
+			compact.removeEventListener('change', syncCompact);
+			window.removeEventListener('resize', syncViewport);
+			window.removeEventListener('orientationchange', syncViewport);
+		};
 	});
 
 	function dragHasFiles(e: DragEvent): boolean {
@@ -109,11 +131,14 @@
 	<AppHeader />
 	<ControlPanel />
 	<SolveCard />
-	<BusPicker />
+	<!-- ControlPanel mounts the lookup and the footer inline when compact. -->
+	{#if !app.compactLayout}
+		<BusPicker />
+	{/if}
 	<DropZone />
 	<PlacementCue />
 	<RestoreDefaultsButton />
-	{#if config.showFooter}
+	{#if config.showFooter && !app.compactLayout}
 		<AppFooter />
 	{/if}
 </main>

package/dist/TellegenShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TellegenShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TellegenShell.svelte.ts"],"names":[],"mappings":"AA4HA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TellegenShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TellegenShell.svelte.ts"],"names":[],"mappings":"AAqJA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/AppFooter.svelte

@@ -2,9 +2,12 @@
 	import { getController } from '../context.svelte.js';
 
 	const ctrl = getController();
+
+	/** Render in the parent's flow instead of pinned to the bottom of the map. */
+	let { inline = false }: { inline?: boolean } = $props();
 </script>
 
-<footer class="mono">
+<footer class="mono" class:inline>
 	<a href="/credits/">credits</a>
 	<i class="sep"></i>
 	<a href="/privacy/">privacy</a>
@@ -50,6 +53,28 @@
 		color: var(--text-accent);
 	}
 
+	footer.inline {
+		position: static;
+		margin-top: 14px;
+		padding: 0;
+		background: none;
+		animation: none;
+		pointer-events: auto;
+	}
+
+	@media (hover: none), (pointer: coarse) {
+		footer a {
+			display: inline-flex;
+			align-items: center;
+			min-height: 44px;
+		}
+
+		footer.inline {
+			margin-top: 4px;
+			font-size: 11px;
+		}
+	}
+
 	@media (max-width: 760px) {
 		footer {
 			padding: 7px 10px;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AppFooter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AppFooter.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,SAAS;;kBAA+E,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppFooter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AppFooter.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAwB/C,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/AppHeader.svelte

@@ -7,9 +7,23 @@
 	const config = getUiConfig();
 
 	let fileInput = $state.raw<HTMLInputElement | undefined>(undefined);
+	let headerEl = $state.raw<HTMLElement | undefined>(undefined);
+
+	// The case tabs wrap onto their own row on a narrow viewport and unwrap on a
+	// short one, so the height moves with both the breakpoint and the case list.
+	// Publish it for the map chrome and the sheet, which both anchor below it.
+	$effect(() => {
+		const el = headerEl;
+		if (!el) return;
+		const measure = () => (app.headerInset = Math.round(el.getBoundingClientRect().height));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
 </script>
 
-<header>
+<header bind:this={headerEl}>
 	<div class="brand">
 		<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
 			<path d="M4 18 L12 6 L20 18" stroke="#b25e00" stroke-width="1.6" fill="none" />
@@ -397,6 +411,50 @@
 		}
 	}
 
+	/* Landscape phone: height is the scarce axis. Keep the case tabs on the
+	   brand's row instead of giving them one of their own, which halves the
+	   header and leaves the map a band worth looking at. */
+	@media (max-width: 760px) and (max-height: 520px) {
+		header {
+			flex-wrap: nowrap;
+			align-items: center;
+			padding: 6px 10px;
+		}
+
+		h1 {
+			font-size: 17px;
+		}
+
+		.cases {
+			order: 0;
+			width: auto;
+			justify-content: flex-start;
+		}
+
+		.kicker {
+			display: none;
+		}
+	}
+
+	/* Touch sizing keys off the pointer, not the breakpoint: a tablet gets the
+	   wide layout and still needs a fingertip's worth of chip. */
+	@media (hover: none), (pointer: coarse) {
+		.cases > button,
+		.case-chip {
+			min-height: 44px;
+		}
+
+		.case-activate {
+			min-height: 44px;
+		}
+
+		.kicker a {
+			display: inline-flex;
+			align-items: center;
+			min-height: 44px;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		header {
 			animation: none;

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

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

package/dist/components/BindingLines.svelte

@@ -98,4 +98,17 @@
 		box-shadow: inset 3px 0 0 var(--accent);
 		font-weight: 600;
 	}
+
+	/* Each row is a tap target that reframes the map, so give it a finger's worth
+	   of height and show a couple more rows before the list scrolls. */
+	@media (hover: none), (pointer: coarse) {
+		ul {
+			max-height: 176px;
+		}
+
+		li button {
+			min-height: 44px;
+			padding-block: 6px;
+		}
+	}
 </style>

package/dist/components/BusPicker.svelte

@@ -5,6 +5,9 @@
 	const app = getAppState();
 	const ctrl = getController();
 
+	/** Render in the parent's flow instead of as a card floating over the map. */
+	let { inline = false }: { inline?: boolean } = $props();
+
 	const buses = $derived(app.active?.network?.buses ?? app.activeLocal?.view?.buses ?? []);
 
 	let query = $state('');
@@ -27,6 +30,11 @@
 		query = '';
 		open = false;
 		highlighted = 0;
+		// Drop the on-screen keyboard, which otherwise covers the readout the
+		// selection just produced. A keyboard user keeps focus for the next lookup.
+		if (typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches) {
+			inputEl?.blur();
+		}
 	}
 
 	function onKeydown(e: KeyboardEvent) {
@@ -69,6 +77,7 @@
 {#if buses.length > 0}
 	<div
 		class="bus-lookup"
+		class:inline
 		title="Press / to focus bus lookup"
 		onfocusout={(e) => {
 			if (!e.currentTarget.contains(e.relatedTarget as Node | null)) open = false;
@@ -160,6 +169,37 @@
 		outline-offset: 1px;
 	}
 
+	/* Safari zooms the layout viewport when a focused input is under 16px. */
+	@media (hover: none), (pointer: coarse) {
+		input {
+			min-height: 44px;
+			font-size: 16px;
+			padding: 7px 10px;
+		}
+
+		li {
+			display: flex;
+			align-items: center;
+			min-height: 44px;
+			font-size: 14px;
+		}
+	}
+
+	.bus-lookup.inline {
+		/* relative, not static: the results list is absolute against this block */
+		position: relative;
+		inset: auto;
+		width: auto;
+		margin-top: 12px;
+		padding: 0;
+		background: none;
+		border: 0;
+		border-radius: 0;
+		backdrop-filter: none;
+		box-shadow: none;
+		animation: none;
+	}
+
 	ul {
 		position: absolute;
 		z-index: 20;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BusPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/BusPicker.svelte.ts"],"names":[],"mappings":"AA0GA,QAAA,MAAM,SAAS,2DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BusPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/BusPicker.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6G/C,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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/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));

package/dist/state.svelte.d.ts

@@ -234,6 +234,19 @@ export declare class AppState {
     placingMultiId: string | null;
     dragOver: boolean;
     parsingFile: boolean;
+    /** True under `(max-width: 760px)`; the panel renders as a bottom sheet. Set by
+     * the shell from one media query so panel and map read the same value. */
+    compactLayout: boolean;
+    /** Height in px the bottom sheet covers; 0 when `compactLayout` is false.
+     * Read by the map's camera padding and by chrome anchored above the sheet. */
+    sheetInset: number;
+    /** Height in px the header covers at the top of the map, measured by
+     * `AppHeader`. Wrapping the case tabs onto their own row roughly doubles it,
+     * so callers that need to clear the header read this rather than a constant. */
+    headerInset: number;
+    /** `window.innerHeight`, tracked by the shell. The sheet's snaps and the map's
+     * chrome lift are both fractions of it; the fallback is a desktop window. */
+    viewportHeight: number;
     /** Map framing request: bump seq so repeat targets still fly. `requestFrame`
      * returns a promise the map resolves when the camera lands (or immediately
      * when it cannot fly), so a caller can defer heavy work until the animation

package/dist/state.svelte.d.ts.map

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

package/dist/state.svelte.js

@@ -200,6 +200,19 @@ export class AppState {
     placingMultiId = $state(null);
     dragOver = $state(false);
     parsingFile = $state(false);
+    /** True under `(max-width: 760px)`; the panel renders as a bottom sheet. Set by
+     * the shell from one media query so panel and map read the same value. */
+    compactLayout = $state(false);
+    /** Height in px the bottom sheet covers; 0 when `compactLayout` is false.
+     * Read by the map's camera padding and by chrome anchored above the sheet. */
+    sheetInset = $state(0);
+    /** Height in px the header covers at the top of the map, measured by
+     * `AppHeader`. Wrapping the case tabs onto their own row roughly doubles it,
+     * so callers that need to clear the header read this rather than a constant. */
+    headerInset = $state(64);
+    /** `window.innerHeight`, tracked by the shell. The sheet's snaps and the map's
+     * chrome lift are both fractions of it; the fallback is a desktop window. */
+    viewportHeight = $state(800);
     /** Map framing request: bump seq so repeat targets still fly. `requestFrame`
      * returns a promise the map resolves when the camera lands (or immediately
      * when it cannot fly), so a caller can defer heavy work until the animation

package/dist/styles.css

@@ -372,11 +372,25 @@ a {
 /* Coarse pointers: comfortable hit targets for the toggle and reset controls. */
 @media (hover: none), (pointer: coarse) {
 	.segment button {
-		min-height: 36px;
+		min-height: 44px;
 	}
 
 	.reset {
-		min-height: 36px;
+		min-height: 44px;
+	}
+
+	/* Keep the chip visually small next to its short siblings; the ::before pads
+	   the tap target out to 44px, as .case-remove does in AppHeader. */
+	.mode > button {
+		position: relative;
+		min-height: 28px;
+		padding-inline: 10px;
+	}
+
+	.mode > button::before {
+		content: '';
+		position: absolute;
+		inset: -8px -4px;
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellegen/svelte",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Svelte components for tellegen power system maps, local case files, and browser solves.",
   "license": "MIT",
   "type": "module",