@tellegen/svelte 0.3.0 → 0.4.0

package/dist/map.js

@@ -1,4 +1,5 @@
 import TellegenMap from './TellegenMap.svelte';
 export { default as TellegenMap } from './TellegenMap.svelte';
-export { branchColor, branchWidth, busNeutral, busRadius, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain } from './colors.js';
+export { CARTO_STYLES, OPENFREEMAP_STYLES, attachBasemapFallback, cartoStyleUrl, defaultBasemap, isOpenFreeMapStyle, openFreeMapEdits, resolveBasemap } from './basemap.js';
+export { MAP_PALETTE, branchColor, branchWidth, busNeutral, busRadius, priceColor, priceDomain, priceGradient, scalarDomain, sensColor, sensFlatColor, sensGradient, sensNeutral, sensitivityDomain } from './colors.js';
 export { caseDeltas, displayMetaFor, displaySeriesFor } from './display.js';

package/dist/maplibre-worker.d.ts

@@ -0,0 +1,5 @@
+/** The URL of MapLibre's worker, which the host's Vite build bundles with its
+ * shared chunk. `TellegenMap` hands it to `setWorkerUrl` before it creates a
+ * map. Reached through the `@tellegen/svelte/maplibre-worker` export; see
+ * `maplibre-worker.dev.ts` for the dev server. */
+export declare function maplibreWorkerUrl(): Promise<string>;

package/dist/maplibre-worker.dev.d.ts

@@ -0,0 +1,11 @@
+/** The dev server's `@tellegen/svelte/maplibre-worker`, chosen by the
+ * `development` export condition.
+ *
+ * Vite's dev server pre-bundles this package with Rolldown, which cannot load
+ * the `?worker&url` import in `maplibre-worker.ts`, so a static import of that
+ * module would stop the dev server at startup. Here it is imported at run time
+ * by URL instead, outside the pre-bundle, and the dev server resolves the
+ * query itself. Vite rewrites the `new URL` in a pre-bundled file to point at
+ * the original. A production build takes the default condition and imports
+ * `maplibre-worker.ts` directly. */
+export declare function maplibreWorkerUrl(): Promise<string>;

package/dist/maplibre-worker.dev.js

@@ -0,0 +1,15 @@
+/** The dev server's `@tellegen/svelte/maplibre-worker`, chosen by the
+ * `development` export condition.
+ *
+ * Vite's dev server pre-bundles this package with Rolldown, which cannot load
+ * the `?worker&url` import in `maplibre-worker.ts`, so a static import of that
+ * module would stop the dev server at startup. Here it is imported at run time
+ * by URL instead, outside the pre-bundle, and the dev server resolves the
+ * query itself. Vite rewrites the `new URL` in a pre-bundled file to point at
+ * the original. A production build takes the default condition and imports
+ * `maplibre-worker.ts` directly. */
+export async function maplibreWorkerUrl() {
+    const url = new URL('./maplibre-worker.js', import.meta.url).href;
+    const module = await import(/* @vite-ignore */ url);
+    return module.maplibreWorkerUrl();
+}

package/dist/maplibre-worker.js

@@ -0,0 +1,8 @@
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+/** The URL of MapLibre's worker, which the host's Vite build bundles with its
+ * shared chunk. `TellegenMap` hands it to `setWorkerUrl` before it creates a
+ * map. Reached through the `@tellegen/svelte/maplibre-worker` export; see
+ * `maplibre-worker.dev.ts` for the dev server. */
+export async function maplibreWorkerUrl() {
+    return workerUrl;
+}

package/dist/notices.svelte.js

@@ -70,11 +70,15 @@ export function getNoticeCenter() {
 export function errorNoticeTitle(details) {
     if (/rate limit/i.test(details))
         return 'Too many requests';
+    // MapLibre's WebGL failure includes "Read more"; classify our map errors
+    // before the generic file/read fallback so it does not blame a case file.
+    if (/^map failed to load:|^the map lost its graphics context/i.test(details))
+        return 'Map unavailable';
     if (/storage|quota|space|indexeddb/i.test(details))
         return 'Could not save locally';
     if (/sensitivity|derivative|singular/i.test(details))
         return 'Sensitivity unavailable';
-    if (/infeasib|converg|solver|solving|calculation|compute|webassembly/i.test(details))
+    if (/infeasib|converg|solver|solving|calculation|compute|webassembly|power flow/i.test(details))
         return 'Calculation did not complete';
     if (/parse|read|file|format/i.test(details))
         return 'Could not read this file';

package/dist/panels.svelte.d.ts

@@ -49,6 +49,9 @@ export declare class PanelLayout {
     position(panel: PanelRegistration): PanelPosition;
     ordered(side?: PanelSide): PanelRegistration[];
     toggle(panel: PanelRegistration): void;
+    /** The control that had focus when the panel last opened, while it is still
+     * in the document: where focus returns when the panel closes. */
+    opener(panel: PanelRegistration): HTMLElement | SVGElement | null;
     close(panel: PanelRegistration): void;
     dock(panel: PanelRegistration, side?: PanelSide): void;
     float(panel: PanelRegistration, bounds?: PanelBounds): void;
@@ -60,6 +63,9 @@ export declare class PanelLayout {
     initialize(storage?: Storage): void;
     save(): void;
 }
+/** Focus the first candidate that takes focus. A detached or hidden element
+ * does not, so the next one gets its turn. */
+export declare function focusFirst(candidates: Array<HTMLElement | SVGElement | null | undefined>): HTMLElement | SVGElement | null;
 export declare const setPanelLayout: (layout: PanelLayout) => PanelLayout;
 export declare const getPanelLayout: () => PanelLayout;
 export {};

package/dist/panels.svelte.js

@@ -18,6 +18,7 @@ export class PanelLayout {
     bottom = $state(88);
     storageError = $state(null);
     #storage;
+    #openers = new Map();
     #gesture = null;
     beginGesture(panel, kind, x, y, bounds) {
         this.#gesture = { panel, kind, x, y, bounds, moved: false };
@@ -60,6 +61,7 @@ export class PanelLayout {
             return;
         this.panels = this.panels.map((p) => (p.id === id ? { ...p, open, title, width } : p));
         if (open && !previous.open) {
+            this.#rememberOpener(id);
             this.activate(previous);
             if (this.compact)
                 this.drawer = id;
@@ -91,19 +93,35 @@ export class PanelLayout {
         if (this.compact) {
             this.drawer = this.drawer === panel.id ? null : panel.id;
             if (this.drawer === panel.id) {
+                this.#rememberOpener(panel.id);
                 this.activate(panel);
                 panel.setOpen(true);
                 panel.onopen?.();
             }
         }
         else {
-            if (!panel.open)
+            if (!panel.open) {
+                this.#rememberOpener(panel.id);
                 this.activate(panel);
+            }
             panel.setOpen(!panel.open);
             if (!panel.open)
                 panel.onopen?.();
         }
     }
+    /** The control that had focus when the panel last opened, while it is still
+     * in the document: where focus returns when the panel closes. */
+    opener(panel) {
+        const element = this.#openers.get(panel.id);
+        return element?.isConnected ? element : null;
+    }
+    #rememberOpener(id) {
+        const active = typeof document === 'undefined' ? null : document.activeElement;
+        if ((active instanceof HTMLElement || active instanceof SVGElement) && active !== document.body)
+            this.#openers.set(id, active);
+        else
+            this.#openers.delete(id);
+    }
     close(panel) {
         panel.setOpen(false);
         if (this.drawer === panel.id)
@@ -206,6 +224,18 @@ export class PanelLayout {
         }
     }
 }
+/** Focus the first candidate that takes focus. A detached or hidden element
+ * does not, so the next one gets its turn. */
+export function focusFirst(candidates) {
+    for (const candidate of candidates) {
+        if (!candidate?.isConnected)
+            continue;
+        candidate.focus();
+        if (candidate.ownerDocument.activeElement === candidate)
+            return candidate;
+    }
+    return null;
+}
 export const setPanelLayout = (layout) => setContext(KEY, layout);
 export const getPanelLayout = () => {
     const layout = getContext(KEY);

package/dist/slider.d.ts

@@ -0,0 +1,12 @@
+/** Smallest demand or rating edit that counts: a slider released closer than
+ * this to the committed value commits nothing and starts no solve. */
+export declare const DEAD_ZONE_MW = 0.25;
+/** Arrow-key step of a demand or rating slider spanning `span` MW: about 1%
+ * of the span, rounded up to 1, 2 or 5 times a power of ten. It is at least
+ * twice the dead zone, so one press always leaves it, rounding error
+ * included. The native step of a `step="any"` range is 1% of the span, which
+ * on a small bus never leaves the dead zone. */
+export declare function sliderKeyStep(span: number): number;
+/** The value an arrow key moves a slider to, kept within [min, max], or null
+ * for any other key. Right and up raise it. */
+export declare function sliderKeyValue(key: string, value: number, min: number, max: number): number | null;

package/dist/slider.js

@@ -0,0 +1,31 @@
+/** Smallest demand or rating edit that counts: a slider released closer than
+ * this to the committed value commits nothing and starts no solve. */
+export const DEAD_ZONE_MW = 0.25;
+const KEY_DIRECTIONS = {
+    ArrowRight: 1,
+    ArrowUp: 1,
+    ArrowLeft: -1,
+    ArrowDown: -1
+};
+/** Arrow-key step of a demand or rating slider spanning `span` MW: about 1%
+ * of the span, rounded up to 1, 2 or 5 times a power of ten. It is at least
+ * twice the dead zone, so one press always leaves it, rounding error
+ * included. The native step of a `step="any"` range is 1% of the span, which
+ * on a small bus never leaves the dead zone. */
+export function sliderKeyStep(span) {
+    const target = Math.max(span / 100, 2 * DEAD_ZONE_MW);
+    const power = 10 ** Math.floor(Math.log10(target));
+    for (const factor of [1, 2, 5]) {
+        if (factor * power >= target)
+            return factor * power;
+    }
+    return 10 * power;
+}
+/** The value an arrow key moves a slider to, kept within [min, max], or null
+ * for any other key. Right and up raise it. */
+export function sliderKeyValue(key, value, min, max) {
+    const direction = KEY_DIRECTIONS[key];
+    if (direction === undefined)
+        return null;
+    return Math.min(max, Math.max(min, value + direction * sliderKeyStep(max - min)));
+}

package/dist/state.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CaseSummary, DemandDeltas, Network, NetworkBranch, NetworkBus, SensitivityColumn, Solution, SolveIteration } from './api.js';
-import { type StudyView, type BranchRatingDeltas, type BrowserMcPfSession, type CaseFileSummary, type DistGraph, type Formulation, type IngestedDistCase, type McPfResult, type McLoadBranchState, type McLoadPowerEdit, type McStudySnapshot, type SensTarget, type Topology } from '@tellegen/engine';
+import { type StudyView, type BranchRatingDeltas, type BrowserMcPfSession, type CaseFileSummary, type DistGraph, type Formulation, type IngestedDistCase, type McPfCallTiming, type McPfResult, type McPfSummary, type McLoadBranchState, type McLoadPowerEdit, type McStudySnapshot, type SensTarget, type Topology } from '@tellegen/engine';
 import type { MultiView } from './multiconductor.js';
 export type SolveBackend = 'clarabel-wasm' | 'clarabel-wasm-server-sensitivity' | 'rust-server';
 /** A map framing request: a case id, 'all', or one branch to center. */
@@ -174,6 +174,12 @@ export type SolvableCase = CaseState | LocalCase;
 export type MultiCaseSummary = Omit<IngestedDistCase, 'graph'>;
 /** Geographic coordinates use the map; other positions use the diagram canvas. */
 export type MultiCoordsKind = 'geographic' | 'planar' | 'synthetic';
+/** Where one interactive load edit spent its time, in milliseconds: engine
+ * (solve and summary), transfer, and parsing as recorded by the session, and
+ * the total from the start of the solve until the result state is updated. */
+export interface McEditTiming extends McPfCallTiming {
+    total_ms: number;
+}
 /** A conductor-resolved case with retained electrical inputs and terminal results. */
 export declare class MulticonductorCase {
     readonly id: string;
@@ -182,7 +188,14 @@ export declare class MulticonductorCase {
     moduleJson: string | null;
     geoLayer: string | null;
     geoWarnings: string[];
-    result: McPfResult | null;
+    /** Summary of the displayed operating point: from the live session after
+     * each solve or load edit, or derived from a stored full result. */
+    result: McPfSummary | null;
+    /** The complete result when no live session holds the operating point: a
+     * saved Study, a solve without sessions, or after coordinates are attached. */
+    mcFullResult: McPfResult | null;
+    /** Latency breakdown of the latest load-edit solve. */
+    mcTiming: McEditTiming | null;
     mcSnapshot: McStudySnapshot | null;
     mcSession: BrowserMcPfSession | null;
     mcLoadBranches: McLoadBranchState[];
@@ -285,6 +298,10 @@ export declare class AppState {
     /** Re-runs the operation behind the current `error`, when one applies. Every
      * write to `error` clears it, so a retry op can never outlive its message. */
     errorRetry: (() => void) | null;
+    /** Technical detail behind the current `error`, when the message itself is
+     * written for people; notices keep it in their disclosure. Every write to
+     * `error` clears it, as it clears `errorRetry`. */
+    errorDetail: string | null;
     get error(): string | null;
     set error(message: string | null);
     /** Case files parsed in the browser via the powerio wasm module. */

package/dist/state.svelte.js

@@ -122,7 +122,14 @@ export class MulticonductorCase {
     moduleJson = $state.raw(null);
     geoLayer = $state.raw(null);
     geoWarnings = $state.raw([]);
+    /** Summary of the displayed operating point: from the live session after
+     * each solve or load edit, or derived from a stored full result. */
     result = $state.raw(null);
+    /** The complete result when no live session holds the operating point: a
+     * saved Study, a solve without sessions, or after coordinates are attached. */
+    mcFullResult = $state.raw(null);
+    /** Latency breakdown of the latest load-edit solve. */
+    mcTiming = $state.raw(null);
     mcSnapshot = $state.raw(null);
     mcSession = $state.raw(null);
     mcLoadBranches = $state.raw([]);
@@ -251,6 +258,10 @@ export class AppState {
     /** Re-runs the operation behind the current `error`, when one applies. Every
      * write to `error` clears it, so a retry op can never outlive its message. */
     errorRetry = $state.raw(null);
+    /** Technical detail behind the current `error`, when the message itself is
+     * written for people; notices keep it in their disclosure. Every write to
+     * `error` clears it, as it clears `errorRetry`. */
+    errorDetail = $state(null);
     get error() {
         return this.#error;
     }
@@ -259,6 +270,7 @@ export class AppState {
         if (message)
             this.errorRevision++;
         this.errorRetry = null;
+        this.errorDetail = null;
     }
     /** Case files parsed in the browser via the powerio wasm module. */
     localCases = $state.raw([]);

package/dist/styles.css

@@ -32,6 +32,7 @@
 	--surface-panel: var(--panel);
 	--surface-chip: rgb(var(--paper-rgb) / 0.65);
 	--surface-control: rgb(var(--paper-rgb) / 0.55);
+	--surface-menu: #fff;
 	--border-default: var(--line);
 	--border-strong: var(--accent);
 	--text-primary: var(--ink);
@@ -47,6 +48,10 @@
 	--data-pos: var(--pos);
 	--data-neg: var(--neg);
 	--focus-ring: var(--accent);
+	/* unselected bus outline in the plain diagram view */
+	--diagram-bus-stroke: #756a5b;
+	/* ground symbol in the multiconductor bus detail */
+	--mc-ground-stroke: #3a3a3a;
 
 	/* type scale, anchored at the 15px body */
 	--fs-display-lg: 33px;
@@ -81,6 +86,11 @@
 	--radius-full: 50%;
 	--elev-1: 0 2px 10px rgb(var(--ink-rgb) / 0.1);
 	--elev-2: 0 4px 24px rgb(var(--ink-rgb) / 0.08);
+	/* floating controls that keep their own light shadows; the dark theme maps
+	   them onto the two steps above */
+	--elev-cue: 0 4px 18px rgb(var(--ink-rgb) / 0.1);
+	--elev-menu: 0 4px 18px rgb(var(--ink-rgb) / 0.14);
+	--elev-tooltip: 0 2px 10px rgb(var(--ink-rgb) / 0.12);
 	--shadow-thumb: 0 1px 4px rgb(var(--ink-rgb) / 0.3);
 	--inset-active: inset 0 -2px 0 var(--accent);
 
@@ -103,6 +113,49 @@
 	--z-grain: 9999;
 }
 
+/* Dark theme: `TellegenProvider theme="dark"` sets the attribute (a host may
+   also put it in its template). Contrast ratios are measured against the panel
+   composited over #4a4a4a, the darkest grey a dark basemap paints under it:
+   every text token clears 7:1. --border-strong marks a panel's edge over the
+   map, so it clears the 3:1 non-text minimum against that panel and against
+   bare #4a4a4a. The same markup passes WCAG AA on either ground. */
+:root[data-theme='dark'] {
+	--bg: #0b1420;
+	--paper: #0f1a27;
+	--panel: rgba(10, 20, 31, 0.92);
+	--line: #34465a; /* decorative separators only */
+	--border-strong: #859cb4; /* 6.30:1 against the panel, 3.13:1 against bare #4a4a4a */
+	--ink: #e8eef4; /* 15.3:1 */
+	--ink-dim: #b4c1cd; /* 9.7:1 */
+	--ink-faint: #95a6b6; /* 7.14:1, and 7.02:1 on the opaque --paper of a panel card */
+	--accent: #ffb24d;
+	--accent-bright: #ffc46e; /* 11.4:1 */
+	--accent-soft: rgba(255, 178, 77, 0.14);
+	--red: #ff9f8b; /* 9.0:1 */
+	--pos: #c9a7e0;
+	--neg: #8fd0a4;
+	--bg-rgb: 11 20 32;
+	--ink-rgb: 232 238 244;
+	--accent-rgb: 255 178 77;
+	--paper-rgb: 15 26 39;
+	--text-primary: var(--ink);
+	--text-secondary: var(--ink-dim);
+	--text-tertiary: var(--ink-faint);
+	--text-accent: var(--accent-bright);
+	--text-danger: var(--red);
+	--focus-ring: #8de7f7; /* 12.7:1 */
+	--surface-menu: var(--paper);
+	--diagram-bus-stroke: var(--ink-faint);
+	--mc-ground-stroke: var(--ink-dim);
+	--elev-1: 0 2px 10px rgb(0 0 0 / 0.45);
+	--elev-2: 0 4px 24px rgb(0 0 0 / 0.4);
+	--elev-cue: var(--elev-2);
+	--elev-menu: var(--elev-2);
+	--elev-tooltip: var(--elev-1);
+	/* the light form derives from --ink-rgb, which would glow here */
+	--shadow-thumb: 0 1px 4px rgb(0 0 0 / 0.5);
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -225,7 +278,7 @@ a {
    ControlPanel.svelte; the .mode / .display-mode / @media source order is
    preserved so the cascade resolves exactly as before. */
 .region {
-	font-size: 10px;
+	font-size: 12px;
 	font-weight: 400;
 	color: var(--text-secondary);
 	text-transform: uppercase;
@@ -245,7 +298,7 @@ a {
    before the component split. Scoping this would raise its specificity past that rule. */
 .mode > button {
 	margin-left: auto;
-	font-size: 10.5px;
+	font-size: 12.5px;
 	padding: 2px 7px;
 	background: none;
 	border: 1px solid var(--line);
@@ -264,7 +317,7 @@ a {
 }
 
 .display-mode .segment button {
-	font-size: 11px;
+	font-size: 13px;
 	padding: 2px 9px;
 }
 
@@ -282,7 +335,7 @@ a {
 .legend-labels {
 	display: flex;
 	justify-content: space-between;
-	font-size: 10.5px;
+	font-size: 12.5px;
 	color: var(--text-tertiary);
 	margin-top: 4px;
 }
@@ -301,7 +354,7 @@ a {
 	border-radius: 999px;
 	color: var(--text-secondary);
 	background: var(--surface-control);
-	font-size: 10px;
+	font-size: 12px;
 	line-height: 1;
 	cursor: help;
 }
@@ -334,7 +387,7 @@ a {
 
 .reset {
 	margin-top: 10px;
-	font-size: 10.5px;
+	font-size: 12.5px;
 	padding: 3px 10px;
 	background: none;
 	border: 1px solid var(--line);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellegen/svelte",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Svelte components for tellegen power system maps, local case files, and browser solves.",
   "keywords": [
     "svelte",
@@ -53,6 +53,11 @@
       "svelte": "./dist/map.js",
       "default": "./dist/map.js"
     },
+    "./maplibre-worker": {
+      "types": "./dist/maplibre-worker.d.ts",
+      "development": "./dist/maplibre-worker.dev.js",
+      "default": "./dist/maplibre-worker.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "scripts": {
@@ -65,19 +70,19 @@
     "@deck.gl/core": "^9.4.0",
     "@deck.gl/layers": "^9.4.0",
     "@deck.gl/maplibre": "^9.4.0",
-    "@tellegen/engine": "^0.3.0",
-    "maplibre-gl": "^6.10.0"
+    "@tellegen/engine": "^0.4.0",
+    "maplibre-gl": "^6.15.0"
   },
   "peerDependencies": {
     "svelte": ">=5.30 <6"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "svelte": "^5.57.0",
-    "svelte-check": "^4.7.6",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
     "typescript": "^6.0.3",
-    "vite": "^8.2.2",
-    "vitest": "^5.0.0"
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2"
   }
 }