@tellegen/svelte 0.2.0 → 0.4.0

package/dist/notices.svelte.js

@@ -0,0 +1,86 @@
+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';
+    // 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|power flow/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,71 @@
+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;
+    /** 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;
+    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;
+}
+/** 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

@@ -0,0 +1,245 @@
+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;
+    #openers = new Map();
+    #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.#rememberOpener(id);
+            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.#rememberOpener(panel.id);
+                this.activate(panel);
+                panel.setOpen(true);
+                panel.onopen?.();
+            }
+        }
+        else {
+            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)
+            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.';
+        }
+    }
+}
+/** 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);
+    if (!layout)
+        throw new Error('PanelFrame requires a TellegenProvider');
+    return layout;
+};

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)));
+}