@tellegen/svelte 0.3.0 → 0.4.0

package/dist/components/PanelCard.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import { getPanelLayout, type PanelRegistration, type PanelSide } from '../panels.svelte.js';
+	import {
+		focusFirst,
+		getPanelLayout,
+		type PanelRegistration,
+		type PanelSide
+	} from '../panels.svelte.js';
 	let {
 		panel,
 		floating = false,
@@ -12,6 +17,7 @@
 	} = $props();
 	const layout = getPanelLayout();
 	let menu = $state(false);
+	let menuAnchor: HTMLDivElement | undefined = $state();
 	let card: HTMLElement;
 	const bounds = $derived(layout.bounds(panel));
 	const preferred = $derived(!floating && !mobile && layout.preferred(panel));
@@ -86,11 +92,40 @@
 	}
 	async function close() {
 		const title = panel.title;
+		const position = layout.position(panel);
+		const dock = position === 'floating' ? panel.side : position;
+		const opener = layout.opener(panel);
 		layout.close(panel);
 		await tick();
-		document
-			.querySelector<HTMLElement>(`.panel-toolbar button[aria-label="${CSS.escape(title)}"]`)
-			?.focus();
+		// The toolbar button for the panel; a host without the toolbar gets the
+		// control that opened it, else the panel's dock (the drawer when narrow).
+		focusFirst([
+			document.querySelector<HTMLElement>(
+				`.panel-toolbar button[aria-label="${CSS.escape(title)}"]`
+			),
+			opener,
+			document.querySelector<HTMLElement>(`[data-panel-dock="${dock}"], [data-panel-drawer]`)
+		]);
+	}
+	// Keyboard users can scroll an overflowing panel only through focus, so the
+	// content becomes a labelled, focusable region exactly while it overflows.
+	let overflowing = $state(false);
+	function trackOverflow(content: HTMLElement) {
+		const sync = () => (overflowing = content.scrollHeight > content.clientHeight + 1);
+		const resize = new ResizeObserver(sync);
+		const observe = () => {
+			resize.disconnect();
+			resize.observe(content);
+			for (const child of content.children) resize.observe(child);
+			sync();
+		};
+		const children = new MutationObserver(observe);
+		children.observe(content, { childList: true });
+		observe();
+		return () => {
+			resize.disconnect();
+			children.disconnect();
+		};
 	}
 </script>
 
@@ -98,6 +133,9 @@
 	onkeydown={(event) => {
 		if (event.key === 'Escape') menu = false;
 	}}
+	onpointerdown={(event) => {
+		if (menu && !menuAnchor?.contains(event.target as Node)) menu = false;
+	}}
 />
 <aside
 	bind:this={card}
@@ -127,7 +165,7 @@
 			>
 		{/if}
 		<div class="header-actions">{@render panel.headerActions?.()}</div>
-		{#if !mobile}<div class="menu-anchor">
+		{#if !mobile}<div class="menu-anchor" bind:this={menuAnchor}>
 				<button
 					class="icon"
 					aria-label={`${panel.title} panel options`}
@@ -150,7 +188,7 @@
 					</div>{/if}
 			</div>{/if}
 		<button
-			class="icon"
+			class="icon close"
 			aria-label={`Close ${panel.title.toLowerCase()} panel`}
 			title="Close panel"
 			onclick={close}
@@ -160,7 +198,18 @@
 			>
 		</button>
 	</header>
-	<div class="panel-content">{@render panel.children()}</div>
+	<!-- A scroll container must take focus for keyboard scrolling, and this one
+		 takes it only while it overflows. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="panel-content"
+		{@attach trackOverflow}
+		tabindex={overflowing ? 0 : undefined}
+		role={overflowing ? 'region' : undefined}
+		aria-label={overflowing ? `${panel.title} panel content` : undefined}
+	>
+		{@render panel.children()}
+	</div>
 	{#if floating}<button
 			class="resize"
 			aria-label={`Resize ${panel.title} panel`}
@@ -238,6 +287,19 @@
 	.icon svg {
 		fill: currentColor;
 	}
+	/* Coarse pointers: a 44px hit area around the 26x28 close button. The
+	   pseudo-element reaches into the header padding and the gap, so nothing
+	   moves. */
+	@media (pointer: coarse) {
+		.close {
+			position: relative;
+		}
+		.close::after {
+			content: '';
+			position: absolute;
+			inset: -8px -10px -8px -8px;
+		}
+	}
 	.header-actions {
 		display: flex;
 		align-items: center;
@@ -258,6 +320,9 @@
 		flex-direction: column;
 		border-radius: 0 0 5px 5px;
 	}
+	.panel-content:focus-visible {
+		outline-offset: -2px;
+	}
 	.menu-anchor {
 		position: relative;
 	}

package/dist/components/PanelHost.svelte

@@ -4,6 +4,12 @@
 	import { getPanelLayout } from '../panels.svelte.js';
 	import { getNoticeCenter } from '../notices.svelte.js';
 	import PanelCard from './PanelCard.svelte';
+
+	// The dock insets come from `--tellegen-dock-left/right/bottom` on an
+	// ancestor (defaults 20px, 20px, 100px), so a custom shell with its own
+	// rail or status bar can move the docks without restyling them.
+	let { showToolbar = true }: { showToolbar?: boolean } = $props();
+
 	const app = getAppState();
 	const layout = getPanelLayout();
 	const notices = getNoticeCenter();
@@ -55,43 +61,59 @@
 	onpointerup={() => layout.finishGesture()}
 	onpointercancel={() => layout.finishGesture()}
 />
-<div class="panel-toolbar" style:top="{toolbarTop}px" aria-label="Panels">
-	<div class="panel-buttons">
-		{#each layout.ordered().filter((p) => p.side === 'left') as panel (panel.id)}
-			<button
-				aria-label={panel.title}
-				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
-				onclick={() => layout.toggle(panel)}>{panel.title}</button
-			>
-		{/each}
-	</div>
-	<div class="panel-buttons right">
-		{#each layout.ordered().filter((p) => p.side === 'right') as panel (panel.id)}
+{#if showToolbar}
+	<div class="panel-toolbar" style:top="{toolbarTop}px" aria-label="Panels">
+		<div class="panel-buttons">
+			{#each layout.ordered().filter((p) => p.side === 'left') as panel (panel.id)}
+				<button
+					aria-label={panel.title}
+					aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+					onclick={() => layout.toggle(panel)}>{panel.title}</button
+				>
+			{/each}
+		</div>
+		<div class="panel-buttons right">
+			{#each layout.ordered().filter((p) => p.side === 'right') as panel (panel.id)}
+				<button
+					aria-label={panel.title}
+					aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+					onclick={() => layout.toggle(panel)}>{panel.title}</button
+				>
+			{/each}
 			<button
-				aria-label={panel.title}
-				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
-				onclick={() => layout.toggle(panel)}>{panel.title}</button
+				class="reset-layout"
+				onclick={() => layout.reset()}
+				title="Restore the default panel positions">Reset layout</button
 			>
-		{/each}
-		<button
-			class="reset-layout"
-			onclick={() => layout.reset()}
-			title="Restore the default panel positions">Reset layout</button
-		>
+		</div>
 	</div>
-</div>
+{/if}
 {#if layout.storageError}<p class="layout-error" role="status" style:top="{panelTop}px">
 		{layout.storageError}
 	</p>{/if}
+<!-- The docks and the drawer take focus (tabindex -1) when a closed panel has
+	 no toolbar button or opener to hand it back to. The drawer stays rendered,
+	 at zero height, while no panel is open in it. -->
 {#if layout.compact}
-	{#if drawer}<div class="drawer" style:bottom="{bottomReserve}px" style:height="{drawerHeight}px">
-			<PanelCard panel={drawer} mobile />
-		</div>{/if}
+	<div
+		class="drawer"
+		data-panel-drawer
+		role="region"
+		aria-label="Panels"
+		tabindex="-1"
+		style:bottom="{bottomReserve}px"
+		style:height="{drawer ? drawerHeight : 0}px"
+	>
+		{#if drawer}<PanelCard panel={drawer} mobile />{/if}
+	</div>
 {:else}
 	<div
 		class="dock left"
-		style:bottom="{Math.max(100, bottomReserve)}px"
+		style:bottom="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
 		data-panel-dock="left"
+		role="region"
+		aria-label="Left panels"
+		tabindex="-1"
 		style:top="{panelTop}px"
 		style:width="{layout.dockWidth('left')}px"
 	>
@@ -99,8 +121,11 @@
 	</div>
 	<div
 		class="dock right"
-		style:bottom="{Math.max(100, bottomReserve)}px"
+		style:bottom="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
 		data-panel-dock="right"
+		role="region"
+		aria-label="Right panels"
+		tabindex="-1"
 		style:top="{panelTop}px"
 		style:width="{layout.dockWidth('right')}px"
 	>
@@ -113,8 +138,8 @@
 	.panel-toolbar {
 		position: fixed;
 		z-index: 30;
-		left: 20px;
-		right: 20px;
+		left: var(--tellegen-dock-left, 20px);
+		right: var(--tellegen-dock-right, 20px);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -159,7 +184,7 @@
 	.dock {
 		position: fixed;
 		z-index: 25;
-		bottom: 100px;
+		bottom: var(--tellegen-dock-bottom, 100px);
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;
@@ -167,10 +192,10 @@
 		pointer-events: none;
 	}
 	.dock.left {
-		left: 20px;
+		left: var(--tellegen-dock-left, 20px);
 	}
 	.dock.right {
-		right: 20px;
+		right: var(--tellegen-dock-right, 20px);
 	}
 	.drawer {
 		position: fixed;
@@ -194,8 +219,8 @@
 	}
 	@media (max-width: 960px) {
 		.panel-toolbar {
-			left: 12px;
-			right: 12px;
+			left: var(--tellegen-dock-left, 12px);
+			right: var(--tellegen-dock-right, 12px);
 			gap: 6px;
 		}
 		.panel-buttons {

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

@@ -1,3 +1,6 @@
-declare const PanelHost: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    showToolbar?: boolean;
+};
+declare const PanelHost: import("svelte").Component<$$ComponentProps, {}, "">;
 type PanelHost = ReturnType<typeof PanelHost>;
 export default PanelHost;

package/dist/components/PlacementCue.svelte

@@ -21,7 +21,7 @@
 		border-radius: 3px;
 		color: var(--text-accent);
 		font-size: 11px;
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-cue);
 		pointer-events: none;
 	}
 

package/dist/components/PowerFlowDetails.svelte

@@ -73,7 +73,7 @@
 	h3 span {
 		display: block;
 		margin-top: 3px;
-		font-size: 11px;
+		font-size: 13px;
 		font-weight: 400;
 		color: var(--text-secondary);
 	}

package/dist/components/RatingSlider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getController } from '../context.svelte.js';
 	import { fmt, signed } from '../format.js';
+	import { sliderKeyValue } from '../slider.js';
 
 	const ctrl = getController();
 
@@ -64,7 +65,15 @@
 				bind:value={ctrl.ratingSliderCurrent, ctrl.setRatingPreview}
 				aria-label="rating delta at selected line"
 				onpointerdown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
-				onkeydown={() => ctrl.setRatingPreview(ctrl.ratingSliderValue)}
+				onkeydown={(e) => {
+					const next = sliderKeyValue(e.key, ctrl.ratingSliderValue, bounds.min, bounds.max);
+					if (next === null) {
+						ctrl.setRatingPreview(ctrl.ratingSliderValue);
+						return;
+					}
+					e.preventDefault();
+					ctrl.setRatingPreview(next);
+				}}
 				onpointerup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
 				onkeyup={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
 				onchange={(e) => ctrl.finishRatingInput(Number(e.currentTarget.value))}
@@ -105,7 +114,7 @@
 	.slider-head {
 		display: flex;
 		justify-content: space-between;
-		font-size: 11.5px;
+		font-size: 13.5px;
 		color: var(--text-secondary);
 		margin-bottom: 4px;
 	}
@@ -120,7 +129,7 @@
 		justify-content: space-between;
 		gap: 8px;
 		margin: 6px 0 7px;
-		font-size: 10.5px;
+		font-size: 12.5px;
 	}
 
 	.slider-track {
@@ -236,13 +245,13 @@
 
 	.pred {
 		margin: 2px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		min-height: 16px;
 	}
 
 	.score {
 		margin: 8px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		color: var(--ink);
 		min-height: 16px;
 	}

package/dist/components/RestoreDefaultsButton.svelte

@@ -24,7 +24,7 @@
 		color: var(--text-secondary);
 		font-size: 11px;
 		cursor: pointer;
-		box-shadow: 0 2px 10px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-1);
 	}
 
 	.restore-defaults:hover {

package/dist/components/SavedNetworkDetails.svelte

@@ -140,7 +140,7 @@
 	.state-label span {
 		flex: none;
 		color: var(--text-secondary);
-		font-size: 11px;
+		font-size: 13px;
 	}
 	dl {
 		margin: 0;
@@ -163,7 +163,7 @@
 	}
 	small {
 		display: block;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 	.live {
@@ -208,7 +208,7 @@
 		display: block;
 		margin-top: 3px;
 		color: var(--text-secondary);
-		font-size: 11px;
+		font-size: 13px;
 		font-weight: 400;
 	}
 </style>

package/dist/components/SensitivityReadout.svelte

@@ -111,7 +111,7 @@
 <style>
 	.chip {
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 		padding: 2px 8px;
 		border: 1px solid var(--accent);
 		color: var(--text-accent);
@@ -129,7 +129,7 @@
 	}
 
 	.sensitivity-copy {
-		font-size: 11.5px;
+		font-size: 13.5px;
 		line-height: 1.35;
 		white-space: nowrap;
 	}

package/dist/components/ShellEnvironment.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { PANEL_COMPACT_QUERY } from '../panels.svelte.js';
+	import { getAppState, getController } from '../context.svelte.js';
+
+	// Renderless. Keeps the shared app state in step with the environment: the
+	// pointer that gates the file drop affordance, the compact-layout media
+	// query, and the viewport height panel and map framing both read. The
+	// default shell renders it; a custom shell on `PanelHost` must too.
+
+	// Gates the drag-and-drop affordance only. The upload button in the header
+	// is always rendered: a file picker works on every device, and the plain
+	// `hover`/`pointer` queries resolve false on a touchscreen laptop that also
+	// has a mouse, which hid the whole file flow there (#110). `any-*` match
+	// when at least one attached input can hover and point precisely.
+	const FILE_DROP_QUERY = '(any-hover: hover) and (any-pointer: fine)';
+
+	const app = getAppState();
+	const ctrl = getController();
+
+	onMount(() => {
+		const query = window.matchMedia(FILE_DROP_QUERY);
+		const syncFileDropUi = () => {
+			ctrl.showFileDropUi = query.matches;
+			if (!ctrl.showFileDropUi) app.dragOver = false;
+		};
+		syncFileDropUi();
+		query.addEventListener('change', syncFileDropUi);
+
+		const compact = window.matchMedia(PANEL_COMPACT_QUERY);
+		const syncCompact = () => {
+			app.compactLayout = compact.matches;
+			if (!compact.matches) app.sheetInset = 0;
+		};
+		syncCompact();
+		compact.addEventListener('change', syncCompact);
+
+		// Shared viewport measurements keep panel and map framing dimensions aligned.
+		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);
+		};
+	});
+</script>

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

@@ -0,0 +1,18 @@
+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 ShellEnvironment: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ShellEnvironment = InstanceType<typeof ShellEnvironment>;
+export default ShellEnvironment;

package/dist/components/SizeLegend.svelte

@@ -19,7 +19,7 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -38,7 +38,7 @@
 
 	.caption {
 		margin-left: auto;
-		font-size: 9.5px;
+		font-size: 12px;
 	}
 
 	@media (max-width: 760px) {

package/dist/components/SolveCard.svelte

@@ -53,7 +53,7 @@
 
 <style>
 	.solve-label {
-		font-size: 11px;
+		font-size: 13px;
 		margin-bottom: 8px;
 	}
 	.solvecard {
@@ -65,7 +65,7 @@
 		align-items: center;
 		flex-wrap: wrap;
 		gap: 10px 14px;
-		font-size: 10px;
+		font-size: 12px;
 		margin-top: 6px;
 	}
 
@@ -75,7 +75,7 @@
 
 	.fallback-reason {
 		margin: 6px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		line-height: 1.35;
 		overflow-wrap: anywhere;
 	}

package/dist/components/TopMovers.svelte

@@ -46,7 +46,7 @@
 
 	caption {
 		text-align: left;
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin-bottom: 4px;
 	}
 

package/dist/components.d.ts

@@ -1,5 +1,8 @@
 export { default as ModelDetails } from './components/ModelDetails.svelte';
 export { default as AppFooter } from './components/AppFooter.svelte';
+export { default as NotificationCenter } from './components/NotificationCenter.svelte';
+export { default as PanelHost } from './components/PanelHost.svelte';
+export { default as ShellEnvironment } from './components/ShellEnvironment.svelte';
 export { default as AppHeader } from './components/AppHeader.svelte';
 export { default as BusPicker } from './components/BusPicker.svelte';
 export { default as ControlPanel } from './components/ControlPanel.svelte';

package/dist/components.js

@@ -1,5 +1,8 @@
 export { default as ModelDetails } from './components/ModelDetails.svelte';
 export { default as AppFooter } from './components/AppFooter.svelte';
+export { default as NotificationCenter } from './components/NotificationCenter.svelte';
+export { default as PanelHost } from './components/PanelHost.svelte';
+export { default as ShellEnvironment } from './components/ShellEnvironment.svelte';
 export { default as AppHeader } from './components/AppHeader.svelte';
 export { default as BusPicker } from './components/BusPicker.svelte';
 export { default as ControlPanel } from './components/ControlPanel.svelte';

package/dist/context.svelte.d.ts

@@ -1,12 +1,19 @@
 import type { AppState } from './state.svelte.js';
 import type { Controller } from './controller.svelte.js';
 export interface TellegenUiConfig {
-    apiBase: string;
+    /** Backend base path; `null` for a host with no backend at all. */
+    apiBase: string | null;
     loadDefaultCases: boolean;
     docsHref: string;
     orgHref: string;
     orgLabel: string;
     showFooter: boolean;
+    /** `'dark'` sets `data-theme="dark"` on the document root while the
+     * provider is mounted, which switches the `styles.css` tokens. */
+    theme: 'light' | 'dark';
+    /** CARTO basemap key for the default shell's map, trimmed; empty for
+     * none. See `TellegenMap`'s `cartoApiKey`. */
+    cartoApiKey: string;
 }
 export type TellegenUiOptions = Partial<TellegenUiConfig>;
 export declare const DEFAULT_TELLEGEN_UI_CONFIG: TellegenUiConfig;

package/dist/context.svelte.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { normalizeCartoApiKey } from './basemap.js';
 const APP = Symbol('tellegen.app');
 const CTRL = Symbol('tellegen.controller');
 const CONFIG = Symbol('tellegen.config');
@@ -8,16 +9,20 @@ export const DEFAULT_TELLEGEN_UI_CONFIG = {
     docsHref: 'https://eigenergy.github.io/tellegen/',
     orgHref: 'https://github.com/eigenergy',
     orgLabel: 'eigenergy group @ michigan ece',
-    showFooter: true
+    showFooter: true,
+    theme: 'light',
+    cartoApiKey: ''
 };
 export function resolveTellegenUiConfig(options = {}) {
     return {
-        apiBase: options.apiBase ?? DEFAULT_TELLEGEN_UI_CONFIG.apiBase,
+        apiBase: options.apiBase === undefined ? DEFAULT_TELLEGEN_UI_CONFIG.apiBase : options.apiBase,
         loadDefaultCases: options.loadDefaultCases ?? DEFAULT_TELLEGEN_UI_CONFIG.loadDefaultCases,
         docsHref: options.docsHref ?? DEFAULT_TELLEGEN_UI_CONFIG.docsHref,
         orgHref: options.orgHref ?? DEFAULT_TELLEGEN_UI_CONFIG.orgHref,
         orgLabel: options.orgLabel ?? DEFAULT_TELLEGEN_UI_CONFIG.orgLabel,
-        showFooter: options.showFooter ?? DEFAULT_TELLEGEN_UI_CONFIG.showFooter
+        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
     };
 }
 export const setAppState = (a) => setContext(APP, a);