@tellegen/svelte 0.1.2 → 0.3.0

package/dist/multiconductor.js

@@ -4,13 +4,7 @@
  * `MulticonductorCase` state and the map own those. */
 import { placeSyntheticTopology } from './synthetic-layout.js';
 import { extent } from './format.js';
-const ATTACHMENT_ORDER = [
-    'source',
-    'generator',
-    'ibr',
-    'load',
-    'shunt'
-];
+const ATTACHMENT_ORDER = ['source', 'generator', 'ibr', 'load', 'shunt'];
 /** Flatten a bus's per-terminal attachments to the distinct kinds present, in a
  * stable render order. */
 function attachmentKindsOf(bus) {
@@ -28,6 +22,7 @@ function placedBus(bus, lon, lat) {
         lat,
         terminals: bus.terminals,
         grounded: bus.grounded,
+        neutral_terminal: bus.neutral_terminal,
         load_kw: bus.load_kw,
         gen_kw: bus.gen_kw,
         has_source: bus.has_source,
@@ -75,13 +70,105 @@ function viewFrom(graph, coords) {
 }
 /** Place a geographic graph: each bus's `xy` is `[longitude, latitude]` and
  * drops straight onto the map. */
-export function buildGeographicView(graph) {
+export function buildGeographicView(graph, layer) {
     const coords = new Map();
     for (const bus of graph.buses) {
         if (bus.xy)
             coords.set(bus.id, bus.xy);
     }
-    return viewFrom(graph, coords);
+    return withRoutes(viewFrom(graph, coords), layer);
+}
+/** Retain native drawing positions; unpositioned buses receive a separate generated layout. */
+export function buildDiagramView(graph, layer) {
+    const generated = layoutSynthetic(graph, { lon: 0, lat: 0 });
+    const coords = new Map();
+    const positioned = graph.buses.filter((bus) => bus.xy?.every(Number.isFinite));
+    const offset = positioned.length ? Math.max(...positioned.map((bus) => bus.xy[0])) + 100 : 0;
+    for (const bus of graph.buses) {
+        if (bus.xy?.every(Number.isFinite))
+            coords.set(bus.id, bus.xy);
+        else {
+            const xy = generated.get(bus.id);
+            if (xy)
+                coords.set(bus.id, [offset + xy[0] * 100, xy[1] * 100]);
+        }
+    }
+    return withRoutes(viewFrom(graph, coords), layer);
+}
+/** Match canonical GeoLayer paths by equipment identity or an unambiguous endpoint pair. */
+function withRoutes(view, layer) {
+    if (!layer)
+        return view;
+    let features;
+    try {
+        features = JSON.parse(layer).features;
+    }
+    catch {
+        return view;
+    }
+    if (!Array.isArray(features))
+        return view;
+    const routes = new Map();
+    const same = (a, b) => typeof a === 'string' && a.toLowerCase() === b.toLowerCase();
+    for (const feature of features) {
+        const props = feature?.properties;
+        const geometry = feature?.geometry;
+        if (!props || geometry?.type !== 'LineString' || !Array.isArray(geometry.coordinates))
+            continue;
+        const points = geometry.coordinates
+            .filter((point) => Array.isArray(point) &&
+            point.length >= 2 &&
+            Number.isFinite(point[0]) &&
+            Number.isFinite(point[1]))
+            .map((point) => [point[0], point[1]]);
+        if (points.length < 2)
+            continue;
+        const from = props.from ?? props.bus_from;
+        const to = props.to ?? props.bus_to;
+        const id = props.id ?? props.uid;
+        const matches = view.edges.filter((edge) => id !== undefined
+            ? same(id, edge.id)
+            : (same(from, edge.from) && same(to, edge.to)) ||
+                (same(from, edge.to) && same(to, edge.from)));
+        if (matches.length !== 1)
+            continue;
+        const edge = matches[0];
+        const reverse = same(from, edge.to) && same(to, edge.from);
+        routes.set(edge.id, reverse ? points.reverse() : points);
+    }
+    return {
+        ...view,
+        edges: view.edges.map((edge) => ({ ...edge, path: routes.get(edge.id) ?? edge.path }))
+    };
+}
+/** Numeric indices address drawing objects only; source identities remain on each object. */
+export function multiDiagramNetwork(id, name, view) {
+    const indexes = new Map(view.buses.map((bus, index) => [bus.id.toLowerCase(), index]));
+    return {
+        id,
+        name,
+        base_mva: 1,
+        coordinate_space: 'diagram',
+        synthetic_coords: false,
+        buses: view.buses.map((bus, index) => ({
+            id: index,
+            uid: bus.id,
+            name: bus.id,
+            lon: bus.lon,
+            lat: bus.lat,
+            demand_mw: bus.load_kw / 1000,
+            gen_mw: bus.gen_kw / 1000
+        })),
+        branches: view.edges.map((edge, index) => ({
+            id: index,
+            uid: edge.id,
+            from: indexes.get(edge.from.toLowerCase()),
+            to: indexes.get(edge.to.toLowerCase()),
+            path: edge.path,
+            rate_mw: 0,
+            status: edge.closed ? 1 : 0
+        }))
+    };
 }
 /** Whether at least two buses carry a planar `xy`, enough to fit a layout to. */
 function hasPlanarCoords(graph) {
@@ -116,10 +203,7 @@ function projectPlanar(graph, center) {
         // reads as further north.
         const nx = 0.5 + (bus.xy[0] - cx) * s;
         const ny = 0.5 + (bus.xy[1] - cy) * s;
-        coords.set(bus.id, [
-            center.lon + (nx - 0.5) * lonSpan,
-            center.lat + (ny - 0.5) * latSpan
-        ]);
+        coords.set(bus.id, [center.lon + (nx - 0.5) * lonSpan, center.lat + (ny - 0.5) * latSpan]);
     }
     return coords;
 }
@@ -188,7 +272,7 @@ export function placeMultiView(graph, center) {
 // ---------------------------------------------------------------------------
 /** Rust, green, and steel-blue for the three phases; a warm gray for the
  * neutral/ground return. Distinct in hue and lightness so they survive color
- * vision deficiency and never read as the LMP ramp. */
+ * vision deficiency and never read as the nodal value ramp. */
 const PHASE_A = [194, 86, 75, 255];
 const PHASE_B = [74, 143, 95, 255];
 const PHASE_C = [63, 111, 187, 255];
@@ -215,6 +299,15 @@ export function phaseColor(terminal) {
 export function isPhaseTerminal(terminal) {
     return ['1', '2', '3', 'a', 'b', 'c'].includes(terminal.trim().toLowerCase());
 }
+/** Return the explicit neutral conductor in a terminal map. Other non-phase
+ * labels are left alone: an arbitrary terminal name is not evidence that the
+ * network has a usable neutral reference. */
+export function neutralTerminal(terminals, declared) {
+    if (declared !== undefined)
+        return declared && terminals.includes(declared) ? declared : null;
+    return (terminals.find((terminal) => ['n', '4', 'neutral'].includes(terminal.trim().toLowerCase())) ??
+        null);
+}
 /** Base color for an edge by kind and state. Lines are the warm gray of the
  * single-phase branches; transformers are steel; a switch is amber when closed
  * and a faded red when open. */

package/dist/notices.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface NoticeInput {
+    title: string;
+    details: string;
+    kind?: 'error' | 'warning';
+    retry?: () => void;
+    canRetry?: () => boolean;
+}
+export interface Notice extends NoticeInput {
+    id: number;
+    count: number;
+    updatedAt: number;
+}
+/** Recent messages stay in memory; dismissal hides the temporary notice only. */
+export declare class NoticeCenter {
+    #private;
+    entries: Notice[];
+    activeId: number | null;
+    expanded: boolean;
+    announcement: string;
+    get active(): Notice | null;
+    push(input: NoticeInput): void;
+    pause(value: boolean): void;
+    dismiss(): void;
+    clear(): void;
+    dispose(): void;
+}
+export declare const setNoticeCenter: (value: NoticeCenter) => NoticeCenter;
+export declare function getNoticeCenter(): NoticeCenter;
+export declare function errorNoticeTitle(details: string): string;

package/dist/notices.svelte.js

@@ -0,0 +1,82 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('tellegen.notices');
+const LIFETIME_MS = 6500;
+const MAX_NOTICES = 30;
+/** Recent messages stay in memory; dismissal hides the temporary notice only. */
+export class NoticeCenter {
+    entries = $state.raw([]);
+    activeId = $state(null);
+    expanded = $state(false);
+    announcement = $state('');
+    #nextId = 0;
+    #timer;
+    #deadline = 0;
+    #remaining = LIFETIME_MS;
+    #paused = false;
+    get active() {
+        return this.entries.find((entry) => entry.id === this.activeId) ?? null;
+    }
+    push(input) {
+        if (!input.details)
+            return;
+        const previous = this.entries.find((entry) => entry.details === input.details && entry.kind === input.kind);
+        const entry = {
+            ...input,
+            id: previous?.id ?? ++this.#nextId,
+            count: (previous?.count ?? 0) + 1,
+            updatedAt: Date.now()
+        };
+        this.entries = [entry, ...this.entries.filter((item) => item.id !== entry.id)].slice(0, MAX_NOTICES);
+        this.activeId = entry.id;
+        this.announcement = `${entry.title}${entry.count > 1 ? `, repeated ${entry.count} times` : ''}`;
+        this.#remaining = LIFETIME_MS;
+        this.#schedule();
+    }
+    #schedule() {
+        clearTimeout(this.#timer);
+        if (this.#paused || this.activeId === null)
+            return;
+        this.#deadline = Date.now() + this.#remaining;
+        this.#timer = setTimeout(() => this.dismiss(), this.#remaining);
+    }
+    pause(value) {
+        if (value === this.#paused)
+            return;
+        if (value)
+            this.#remaining = Math.max(0, this.#deadline - Date.now());
+        this.#paused = value;
+        this.#schedule();
+    }
+    dismiss() {
+        clearTimeout(this.#timer);
+        this.activeId = null;
+    }
+    clear() {
+        this.dismiss();
+        this.entries = [];
+        this.expanded = false;
+    }
+    dispose() {
+        clearTimeout(this.#timer);
+    }
+}
+export const setNoticeCenter = (value) => setContext(KEY, value);
+export function getNoticeCenter() {
+    const value = getContext(KEY);
+    if (!value)
+        throw new Error('NoticeCenter requires a Tellegen provider');
+    return value;
+}
+export function errorNoticeTitle(details) {
+    if (/rate limit/i.test(details))
+        return 'Too many requests';
+    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))
+        return 'Calculation did not complete';
+    if (/parse|read|file|format/i.test(details))
+        return 'Could not read this file';
+    return 'Operation did not complete';
+}

package/dist/panels.svelte.d.ts

@@ -0,0 +1,65 @@
+import { type Snippet } from 'svelte';
+export type PanelSide = 'left' | 'right';
+export type PanelPosition = PanelSide | 'floating';
+export interface PanelBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PanelRegistration {
+    id: string;
+    title: string;
+    side: PanelSide;
+    order: number;
+    width: number;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    children: Snippet;
+    headerActions?: Snippet;
+    onopen?: () => void;
+}
+interface SavedPanel extends PanelBounds {
+    position: PanelPosition;
+}
+export declare const PANEL_BREAKPOINT = 960;
+export declare const PANEL_MIN_DOCK_HEIGHT = 500;
+export declare const PANEL_COMPACT_QUERY = "(max-width: 960px), (max-height: 499px)";
+/** Layout belongs to one provider and stores presentation preferences only. */
+export declare class PanelLayout {
+    #private;
+    panels: PanelRegistration[];
+    placements: Record<string, SavedPanel>;
+    compact: boolean;
+    drawer: string | null;
+    lastActive: string;
+    dockActive: Record<PanelSide, string>;
+    viewportWidth: number;
+    viewportHeight: number;
+    top: number;
+    bottom: number;
+    storageError: string | null;
+    beginGesture(panel: PanelRegistration, kind: 'move' | 'resize', x: number, y: number, bounds: PanelBounds): void;
+    moveGesture(x: number, y: number): void;
+    finishGesture(): void;
+    register(panel: PanelRegistration): () => void;
+    update(id: string, open: boolean, title: string, width: number): void;
+    activate(panel: PanelRegistration): void;
+    preferred(panel: PanelRegistration): boolean;
+    position(panel: PanelRegistration): PanelPosition;
+    ordered(side?: PanelSide): PanelRegistration[];
+    toggle(panel: PanelRegistration): void;
+    close(panel: PanelRegistration): void;
+    dock(panel: PanelRegistration, side?: PanelSide): void;
+    float(panel: PanelRegistration, bounds?: PanelBounds): void;
+    bounds(panel: PanelRegistration): PanelBounds;
+    clamp(bounds: PanelBounds): PanelBounds;
+    resizeViewport(width: number, height: number, top: number): void;
+    dockWidth(side: PanelSide): number;
+    reset(): void;
+    initialize(storage?: Storage): void;
+    save(): void;
+}
+export declare const setPanelLayout: (layout: PanelLayout) => PanelLayout;
+export declare const getPanelLayout: () => PanelLayout;
+export {};

package/dist/panels.svelte.js

@@ -0,0 +1,215 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('tellegen.panel-layout');
+const STORAGE_KEY = 'tellegen.panel-layout.v1';
+export const PANEL_BREAKPOINT = 960;
+export const PANEL_MIN_DOCK_HEIGHT = 500;
+export const PANEL_COMPACT_QUERY = `(max-width: ${PANEL_BREAKPOINT}px), (max-height: ${PANEL_MIN_DOCK_HEIGHT - 1}px)`;
+/** Layout belongs to one provider and stores presentation preferences only. */
+export class PanelLayout {
+    panels = $state.raw([]);
+    placements = $state({});
+    compact = $state(false);
+    drawer = $state('network');
+    lastActive = $state('network');
+    dockActive = $state({ left: 'network', right: 'solver' });
+    viewportWidth = $state(1280);
+    viewportHeight = $state(800);
+    top = $state(100);
+    bottom = $state(88);
+    storageError = $state(null);
+    #storage;
+    #gesture = null;
+    beginGesture(panel, kind, x, y, bounds) {
+        this.#gesture = { panel, kind, x, y, bounds, moved: false };
+    }
+    moveGesture(x, y) {
+        const gesture = this.#gesture;
+        if (!gesture)
+            return;
+        const dx = x - gesture.x, dy = y - gesture.y;
+        if (!gesture.moved && Math.hypot(dx, dy) < 4)
+            return;
+        gesture.moved = true;
+        this.float(gesture.panel, gesture.kind === 'move'
+            ? {
+                ...gesture.bounds,
+                x: gesture.bounds.x + dx,
+                y: gesture.bounds.y + dy
+            }
+            : {
+                ...gesture.bounds,
+                width: gesture.bounds.width + dx,
+                height: gesture.bounds.height + dy
+            });
+    }
+    finishGesture() {
+        if (this.#gesture?.moved)
+            this.save();
+        this.#gesture = null;
+    }
+    register(panel) {
+        this.panels = [...this.panels.filter((p) => p.id !== panel.id), panel];
+        return () => {
+            this.panels = this.panels.filter((p) => p.id !== panel.id);
+        };
+    }
+    update(id, open, title, width) {
+        const previous = this.panels.find((p) => p.id === id);
+        if (!previous ||
+            (previous.open === open && previous.title === title && previous.width === width))
+            return;
+        this.panels = this.panels.map((p) => (p.id === id ? { ...p, open, title, width } : p));
+        if (open && !previous.open) {
+            this.activate(previous);
+            if (this.compact)
+                this.drawer = id;
+        }
+    }
+    activate(panel) {
+        this.lastActive = panel.id;
+        const side = this.position(panel);
+        if (side !== 'floating')
+            this.dockActive[side] = panel.id;
+    }
+    preferred(panel) {
+        const side = this.position(panel);
+        if (side === 'floating')
+            return false;
+        const open = this.ordered(side).filter((candidate) => candidate.open);
+        const selected = open.find((candidate) => candidate.id === this.dockActive[side]) ?? open[0];
+        return selected?.id === panel.id;
+    }
+    position(panel) {
+        return this.placements[panel.id]?.position ?? panel.side;
+    }
+    ordered(side) {
+        return this.panels
+            .filter((p) => side === undefined || this.position(p) === side)
+            .sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));
+    }
+    toggle(panel) {
+        if (this.compact) {
+            this.drawer = this.drawer === panel.id ? null : panel.id;
+            if (this.drawer === panel.id) {
+                this.activate(panel);
+                panel.setOpen(true);
+                panel.onopen?.();
+            }
+        }
+        else {
+            if (!panel.open)
+                this.activate(panel);
+            panel.setOpen(!panel.open);
+            if (!panel.open)
+                panel.onopen?.();
+        }
+    }
+    close(panel) {
+        panel.setOpen(false);
+        if (this.drawer === panel.id)
+            this.drawer = null;
+    }
+    dock(panel, side = panel.side) {
+        this.placements[panel.id] = { ...this.bounds(panel), position: side };
+        this.activate(panel);
+        this.save();
+    }
+    float(panel, bounds) {
+        this.placements[panel.id] = {
+            ...this.clamp(bounds ?? this.bounds(panel)),
+            position: 'floating'
+        };
+    }
+    bounds(panel) {
+        return this.clamp(this.placements[panel.id] ?? {
+            x: panel.side === 'left' ? 24 : this.viewportWidth - panel.width - 24,
+            y: this.top + 16,
+            width: panel.width,
+            height: Math.min(520, this.viewportHeight - this.top - this.bottom - 22)
+        });
+    }
+    clamp(bounds) {
+        const availableWidth = Math.max(1, this.viewportWidth - 32);
+        const availableHeight = Math.max(1, this.viewportHeight - this.top - this.bottom - 12);
+        const width = Math.min(availableWidth, Math.max(240, bounds.width));
+        const height = Math.min(availableHeight, Math.max(120, bounds.height));
+        return {
+            width,
+            height,
+            x: Math.max(16, Math.min(bounds.x, this.viewportWidth - width - 16)),
+            y: Math.max(this.top, Math.min(bounds.y, this.viewportHeight - height - this.bottom))
+        };
+    }
+    resizeViewport(width, height, top) {
+        this.viewportWidth = width;
+        this.viewportHeight = height;
+        this.top = top;
+        const wasCompact = this.compact;
+        this.compact = width <= PANEL_BREAKPOINT || height < PANEL_MIN_DOCK_HEIGHT;
+        if (this.compact && !wasCompact && this.panels.length > 0) {
+            const latest = this.panels.find((panel) => panel.id === this.lastActive && panel.open);
+            this.drawer = latest?.id ?? this.panels.find((panel) => panel.open)?.id ?? null;
+        }
+        for (const [id, panel] of Object.entries(this.placements)) {
+            if (panel.position === 'floating')
+                this.placements[id] = { ...this.clamp(panel), position: 'floating' };
+        }
+    }
+    dockWidth(side) {
+        const panels = this.ordered(side).filter((p) => p.open);
+        return panels.length
+            ? Math.min(Math.max(...panels.map((p) => p.width)), this.viewportWidth * 0.29)
+            : 0;
+    }
+    reset() {
+        this.placements = {};
+        this.save();
+    }
+    initialize(storage) {
+        this.#storage = storage;
+        if (!storage)
+            return;
+        try {
+            const text = storage.getItem(STORAGE_KEY);
+            if (!text)
+                return;
+            const value = JSON.parse(text);
+            if (value.version !== 1 || !value.panels || typeof value.panels !== 'object')
+                return;
+            for (const [id, panel] of Object.entries(value.panels)) {
+                if (!panel ||
+                    !['left', 'right', 'floating'].includes(panel.position) ||
+                    !['x', 'y', 'width', 'height'].every((key) => Number.isFinite(panel[key])))
+                    continue;
+                this.placements[id] = {
+                    ...this.clamp(panel),
+                    position: panel.position
+                };
+            }
+        }
+        catch {
+            this.storageError = 'Panel layout could not be restored. Reset layout to use the defaults.';
+        }
+    }
+    save() {
+        if (!this.#storage)
+            return;
+        try {
+            this.#storage.setItem(STORAGE_KEY, JSON.stringify({
+                version: 1,
+                panels: this.placements
+            }));
+            this.storageError = null;
+        }
+        catch {
+            this.storageError = 'Panel layout could not be saved. Changes last for this visit.';
+        }
+    }
+}
+export const setPanelLayout = (layout) => setContext(KEY, layout);
+export const getPanelLayout = () => {
+    const layout = getContext(KEY);
+    if (!layout)
+        throw new Error('PanelFrame requires a TellegenProvider');
+    return layout;
+};