@tellegen/svelte 0.1.0 → 0.1.2

package/dist/TellegenMap.svelte

@@ -2,7 +2,7 @@
 	import 'maplibre-gl/dist/maplibre-gl.css';
 	import { tick } from 'svelte';
 	import type { Layer, PickingInfo } from '@deck.gl/core';
-	import type { PathLayer, ScatterplotLayer } from '@deck.gl/layers';
+	import type { IconLayer, PathLayer, ScatterplotLayer } from '@deck.gl/layers';
 	import type { MapboxOverlay } from '@deck.gl/mapbox';
 	import type { LngLatBoundsLike, Map as MapLibreMap } from 'maplibre-gl';
 	import type { NetworkBranch, NetworkBus } from './api.js';
@@ -26,9 +26,12 @@
 		edgeWidth,
 		isPhaseTerminal,
 		phaseColor,
+		transformerMarks,
 		type PlacedMultiBus,
-		type PlacedMultiEdge
+		type PlacedMultiEdge,
+		type TransformerMark
 	} from './multiconductor.js';
+	import { transformerIcon } from './transformer-icon.js';
 	import { getAppState, getController } from './context.svelte.js';
 	import { displayFmt, fmt, rgbaCss } from './format.js';
 	import type { RGBA } from './colors.js';
@@ -39,6 +42,7 @@
 		onbranchclick,
 		onlocalbranchclick,
 		onmultibusclick,
+		onmultiedgeclick,
 		onplacecase,
 		onmapclick
 	}: {
@@ -47,6 +51,7 @@
 		onbranchclick?: (caseId: string, branchId: number) => void;
 		onlocalbranchclick?: (caseId: string, branchId: number) => void;
 		onmultibusclick: (caseId: string, busId: string) => void;
+		onmultiedgeclick?: (caseId: string, edgeId: string) => void;
 		onplacecase: (lon: number, lat: number) => void;
 		onmapclick: () => void;
 	} = $props();
@@ -70,6 +75,7 @@
 	type LayerCtors = {
 		PathLayer: typeof PathLayer;
 		ScatterplotLayer: typeof ScatterplotLayer;
+		IconLayer: typeof IconLayer;
 	};
 	type CursorState = {
 		isDragging: boolean;
@@ -489,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 }
@@ -546,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;
@@ -679,7 +703,8 @@
 			maplibregl: maplibre.default,
 			MapboxOverlay: mapbox.MapboxOverlay,
 			PathLayer: layers.PathLayer,
-			ScatterplotLayer: layers.ScatterplotLayer
+			ScatterplotLayer: layers.ScatterplotLayer,
+			IconLayer: layers.IconLayer
 		};
 	}
 
@@ -692,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: [],
@@ -699,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'
 		});
@@ -712,9 +741,9 @@
 		let cleanup = () => {};
 		let cancelled = false;
 		void loadMapModules()
-			.then(({ maplibregl, MapboxOverlay, PathLayer, ScatterplotLayer }) => {
+			.then(({ maplibregl, MapboxOverlay, PathLayer, ScatterplotLayer, IconLayer }) => {
 				if (cancelled) return;
-				layerCtors = { PathLayer, ScatterplotLayer };
+				layerCtors = { PathLayer, ScatterplotLayer, IconLayer };
 				const m = new maplibregl.Map({
 					container,
 					style: STYLE,
@@ -841,7 +870,7 @@
 	// updateTriggers tell deck.gl when accessor outputs changed.
 	$effect(() => {
 		if (!overlay || !layerCtors) return;
-		const { PathLayer, ScatterplotLayer } = layerCtors;
+		const { PathLayer, ScatterplotLayer, IconLayer } = layerCtors;
 		const layers: Layer[] = [];
 		for (const c of app.cases) {
 			if (!c.network) continue;
@@ -1014,13 +1043,17 @@
 		for (const c of app.multiCases) {
 			if (!c.view) continue;
 			const selectedId = c.id === app.activeMultiId ? c.selectedBusId : null;
+			const selectedEdgeId = c.id === app.activeMultiId ? c.selectedEdgeId : null;
 			layers.push(
 				new PathLayer<PlacedMultiEdge>({
 					id: `multi-edges-${c.id}`,
 					data: c.view.edges,
 					getPath: (e) => e.path,
-					getColor: (e) => edgeColor(e.kind, e.closed),
-					getWidth: (e) => edgeWidth(e.kind, e.n_phases),
+					// The selected edge draws in the selection blue of the branch cue,
+					// wider, so its panel detail has an obvious source on the map.
+					getColor: (e) =>
+						e.id === selectedEdgeId ? [47, 111, 187, 255] : edgeColor(e.kind, e.closed),
+					getWidth: (e) => edgeWidth(e.kind, e.n_phases) + (e.id === selectedEdgeId ? 2 : 0),
 					widthUnits: 'pixels',
 					widthMinPixels: 1.2,
 					capRounded: true,
@@ -1028,7 +1061,36 @@
 					miterLimit: 2,
 					pickable: true,
 					autoHighlight: true,
-					highlightColor: [32, 36, 43, 90]
+					highlightColor: [32, 36, 43, 90],
+					onClick: (info: PickingInfo) => {
+						const e = info.object as PlacedMultiEdge | undefined;
+						if (!e || !onmultiedgeclick) return false;
+						onmultiedgeclick(c.id, e.id);
+						return true;
+					},
+					updateTriggers: {
+						getColor: [selectedEdgeId],
+						getWidth: [selectedEdgeId]
+					}
+				}),
+				// The IEC two-circle symbol at each transformer midpoint, rotated into
+				// the edge bearing. Not pickable: hover and click fall through to the
+				// transformer edge beneath it.
+				new IconLayer<TransformerMark>({
+					id: `multi-xfmr-${c.id}`,
+					data: transformerMarks(c.view.edges),
+					getIcon: () => transformerIcon(),
+					getPosition: (m) => m.position,
+					getAngle: (m) => m.angle,
+					billboard: false,
+					getSize: 16,
+					sizeUnits: 'pixels',
+					getColor: (m) =>
+						m.id === selectedEdgeId ? [47, 111, 187, 255] : edgeColor('transformer', true),
+					pickable: false,
+					updateTriggers: {
+						getColor: [selectedEdgeId]
+					}
 				}),
 				new ScatterplotLayer<PlacedMultiBus>({
 					id: `multi-buses-${c.id}`,
@@ -1081,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 }[]) => {
@@ -1136,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}
@@ -1163,6 +1248,7 @@
 	<button
 		type="button"
 		class="place-at-center mono"
+		style="--chrome-inset: {chromeInset}px"
 		onclick={() => {
 			if (!map) return;
 			const center = map.getCenter();
@@ -1346,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;
@@ -1361,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) {
@@ -1399,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);
@@ -1413,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

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     onbranchclick?: (caseId: string, branchId: number) => void;
     onlocalbranchclick?: (caseId: string, branchId: number) => void;
     onmultibusclick: (caseId: string, busId: string) => void;
+    onmultiedgeclick?: (caseId: string, edgeId: string) => void;
     onplacecase: (lon: number, lat: number) => void;
     onmapclick: () => void;
 };

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;AAgEzC,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,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAkmCH,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 {
@@ -101,6 +123,7 @@
 		onbranchclick={ctrl.selectBranch}
 		onlocalbranchclick={ctrl.selectLocalBranch}
 		onmultibusclick={ctrl.selectMultiBus}
+		onmultiedgeclick={ctrl.selectMultiEdge}
 		onplacecase={ctrl.placeCase}
 		onmapclick={ctrl.clearSelection}
 	/>
@@ -108,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"}