@tellegen/svelte 0.4.3 → 0.4.4

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

@@ -0,0 +1,38 @@
+import type { DistGraph } from '@tellegen/engine';
+import { type GraphInputs, type ResultSnapshot, type SearchIndex } from '../diagram/index.js';
+type $$ComponentProps = {
+    /** The operating point projected onto `inputs` (`snapshotFromMcPf`); `null` while it is being
+     * fetched. `MulticonductorCase.overviewSnapshot` holds a case's, shared with the diagram. */
+    snapshot: ResultSnapshot | null;
+    graph: DistGraph;
+    /** `graphInputs(graph)`; `MulticonductorCase.overviewInputs` holds a case's. */
+    inputs: GraphInputs;
+    /** `buildSearchIndex(inputs.entities)`; `MulticonductorCase.overviewSearch` holds a case's. */
+    search: SearchIndex;
+    loading?: boolean;
+    selectedBus: string | null;
+    selectedEdge: string | null;
+    onselectbus: (id: string) => void;
+    onselectedge: (id: string) => void;
+    /** Case name, used in exported file names and provenance. */
+    label?: string;
+    /** When set, the overview is computed on request rather than after every solve. */
+    onanalyse?: () => void;
+    /** Whether the case is shown as a schematic, and how to toggle it. */
+    schematic?: boolean;
+    onschematic?: (show: boolean) => void;
+    /** Bus or branch under the pointer in any linked view. */
+    hovered?: {
+        kind: 'bus' | 'branch';
+        id: string;
+    } | null;
+    onhover?: (h: {
+        kind: 'bus' | 'branch';
+        id: string;
+    } | null) => void;
+    /** Bring the current selection into view again, for an issue clicked while selected. */
+    onreveal?: () => void;
+};
+declare const McWorkbench: import("svelte").Component<$$ComponentProps, {}, "">;
+type McWorkbench = ReturnType<typeof McWorkbench>;
+export default McWorkbench;

package/dist/components/MultiWire.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { rgbaCss } from '../format.js';
+	import { isPhaseTerminal, phaseColor } from '../multiconductor.js';
+	import type { MultiWireView } from '../diagram/index.js';
+
+	let { view }: { view: MultiWireView } = $props();
+
+	const colour = (terminal: string) =>
+		isPhaseTerminal(terminal) ? rgbaCss(phaseColor(terminal)) : 'var(--text-secondary)';
+	const amps = (a: number | null) => (a === null ? '' : `${a.toFixed(a >= 100 ? 0 : 1)} A`);
+</script>
+
+<figure class="multi-wire">
+	<svg
+		viewBox="0 0 {view.width} {view.height}"
+		role="img"
+		aria-label="Multi-wire view of {view.kind} {view.id}: {view.wires
+			.length} conductor segments between {view.buses[0].id} and {view.buses[1].id}"
+	>
+		{#each view.buses as bus, side (side)}
+			<text class="bus" x={bus.x} y="12" text-anchor="middle">{bus.id}</text>
+			{#each bus.terminals as t, r (r)}
+				<g>
+					{#if t.attachments.length}<title>{t.name}: {t.attachments.join(', ')}</title>{/if}
+					<line
+						class="rail"
+						x1={bus.x - 8}
+						x2={bus.x + 8}
+						y1={t.y}
+						y2={t.y}
+						stroke={colour(t.name)}
+					/>
+					<text
+						class="terminal"
+						x={bus.x + (bus.x < view.width / 2 ? -12 : 12)}
+						y={t.y + 3}
+						text-anchor={bus.x < view.width / 2 ? 'end' : 'start'}>{t.name}</text
+					>
+					{#if t.grounded}
+						<!-- Earth symbol: three shrinking bars below the rail end. -->
+						<g
+							class="earth"
+							transform="translate({bus.x + (bus.x < view.width / 2 ? -26 : 26)} {t.y})"
+						>
+							<line x1="-4" x2="4" y1="4" y2="4" /><line
+								x1="-2.6"
+								x2="2.6"
+								y1="6.5"
+								y2="6.5"
+							/><line x1="-1.2" x2="1.2" y1="9" y2="9" />
+						</g>
+					{/if}
+				</g>
+			{/each}
+		{/each}
+		{#if view.winding}
+			<rect
+				class="winding"
+				x={view.winding.x}
+				y={view.winding.y}
+				width={view.winding.width}
+				height={view.winding.height}
+				rx="4"
+			/>
+			<text
+				class="terminal"
+				x={view.width / 2}
+				y={view.winding.y + view.winding.height + 12}
+				text-anchor="middle">windings</text
+			>
+		{/if}
+		{#each view.wires as w, i (i)}
+			<line
+				class="wire"
+				class:open={!view.closed}
+				x1={w.x1}
+				y1={w.y1}
+				x2={w.x2}
+				y2={w.y2}
+				stroke={colour(w.terminal)}
+			/>
+			{#if w.amps !== null}
+				<text class="amps" x={(w.x1 + w.x2) / 2} y={(w.y1 + w.y2) / 2 - 3} text-anchor="middle"
+					>{amps(w.amps)}</text
+				>
+			{/if}
+		{/each}
+	</svg>
+	<figcaption>
+		Every conductor between the two terminal sets{view.winding
+			? '; transformer windings couple magnetically, with no conductor continuity across them'
+			: ''}{view.closed ? '' : '; open'}. Currents are magnitudes at the from end{view.winding
+			? ' and the to end'
+			: ''}. Hover a terminal for its attachments.
+	</figcaption>
+</figure>
+
+<style>
+	.multi-wire {
+		margin: 8px 0 0;
+	}
+	svg {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+	svg text {
+		font: 9px var(--font-mono);
+		fill: var(--text-secondary);
+	}
+	svg text.bus {
+		fill: var(--ink);
+	}
+	.rail {
+		stroke-width: 3;
+	}
+	.wire {
+		stroke-width: 1.6;
+	}
+	.wire.open {
+		stroke-dasharray: 4 3;
+	}
+	.winding {
+		fill: var(--paper);
+		stroke: var(--ink);
+		stroke-width: 1;
+	}
+	.earth line {
+		stroke: var(--text-secondary);
+		stroke-width: 1;
+	}
+	figcaption {
+		color: var(--text-secondary);
+		font-size: 11px;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { MultiWireView } from '../diagram/index.js';
+type $$ComponentProps = {
+    view: MultiWireView;
+};
+declare const MultiWire: import("svelte").Component<$$ComponentProps, {}, "">;
+type MultiWire = ReturnType<typeof MultiWire>;
+export default MultiWire;

package/dist/components/MulticonductorDetails.svelte

@@ -262,6 +262,13 @@
 		</span>
 	</div>
 
+	{#if mc.graph}<button
+			class="reset"
+			aria-pressed={mc.schematic}
+			title="Symbols and the engine's schematic; results once solved"
+			onclick={() => (mc.schematic = !mc.schematic)}
+			>{mc.schematic ? 'Show map' : 'Show diagram'}</button
+		>{/if}
 	<button class="reset" onclick={() => app.requestFrame(mc.id)}>Fit case</button>
 	<button class="reset" onclick={() => ctrl.removeMultiCase(mc)}>Remove</button>
 {/if}

package/dist/components/OmniSearch.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { search, type SearchIndex, type SearchMatch } from '../diagram/index.js';
+
+	let {
+		index,
+		onselect,
+		hint = () => null,
+		placeholder = 'Find a bus or branch'
+	}: {
+		index: SearchIndex;
+		onselect: (match: SearchMatch) => void;
+		/** A short result value shown beside each match, such as a voltage or loading. */
+		hint?: (match: SearchMatch) => { text: string; state?: string } | null;
+		placeholder?: string;
+	} = $props();
+
+	const id = $props.id();
+	let query = $state('');
+	let active = $state(0);
+	let open = $state(false);
+	const found = $derived(search(index, query, { limit: 10 }));
+
+	function choose(match: SearchMatch | undefined) {
+		if (!match) return;
+		onselect(match);
+		query = '';
+		open = false;
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const n = found.matches.length;
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			e.preventDefault();
+			if (n) active = (active + (e.key === 'ArrowDown' ? 1 : -1) + n) % n;
+			open = true;
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			choose(found.matches[active]);
+		} else if (e.key === 'Escape') {
+			if (query) query = '';
+			else open = false;
+		}
+	}
+</script>
+
+<div class="omni">
+	<input
+		type="search"
+		role="combobox"
+		aria-label={placeholder}
+		aria-expanded={open && !!query.trim()}
+		aria-controls="{id}-results"
+		aria-activedescendant={open && found.matches.length ? `${id}-${active}` : undefined}
+		autocomplete="off"
+		spellcheck="false"
+		{placeholder}
+		bind:value={query}
+		oninput={() => {
+			active = 0;
+			open = true;
+		}}
+		onfocus={() => (open = true)}
+		onblur={() => setTimeout(() => (open = false), 120)}
+		{onkeydown}
+	/>
+	{#if open && query.trim()}
+		<ul id="{id}-results" role="listbox" aria-label="Search results">
+			{#each found.matches as match, i (`${match.kind}:${match.index}`)}
+				{@const h = hint(match)}
+				<li
+					id="{id}-{i}"
+					role="option"
+					aria-selected={i === active}
+					onpointerdown={(e) => {
+						e.preventDefault();
+						choose(match);
+					}}
+				>
+					<span class="kind">{match.kind === 'bus' ? 'bus' : match.family}</span>
+					<span class="id">{match.id}</span>
+					{#if h}<span class="hint {h.state ?? ''}">{h.text}</span>{/if}
+				</li>
+			{:else}
+				<li class="empty" role="presentation">No bus or branch ID contains that text.</li>
+			{/each}
+			{#if found.total > found.matches.length}<li class="more" role="presentation">
+					{found.total.toLocaleString()} matches · keep typing to narrow
+				</li>{/if}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.omni {
+		position: relative;
+	}
+	input {
+		width: 100%;
+		box-sizing: border-box;
+		font: 11px var(--font-mono);
+		color: var(--ink);
+		background: var(--paper);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		padding: 6px 8px;
+	}
+	ul {
+		position: absolute;
+		z-index: 5;
+		left: 0;
+		right: 0;
+		top: calc(100% + 2px);
+		margin: 0;
+		padding: 3px;
+		list-style: none;
+		max-height: 260px;
+		overflow: auto;
+		background: var(--paper);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
+	}
+	li {
+		display: grid;
+		grid-template-columns: 70px 1fr auto;
+		gap: 6px;
+		align-items: baseline;
+		padding: 5px 6px;
+		border-radius: 2px;
+		cursor: pointer;
+	}
+	li[aria-selected='true'] {
+		background: var(--accent-soft);
+	}
+	.kind,
+	.empty,
+	.more {
+		color: var(--text-secondary);
+	}
+	.kind {
+		font: 9px var(--font-mono);
+		text-transform: uppercase;
+	}
+	.id,
+	.hint {
+		font-family: var(--font-mono);
+		white-space: nowrap;
+	}
+	.id {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.hint.violation {
+		color: var(--text-danger);
+	}
+	.hint.warning {
+		color: var(--text-accent);
+	}
+	.empty,
+	.more {
+		display: block;
+		cursor: default;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import { type SearchIndex, type SearchMatch } from '../diagram/index.js';
+type $$ComponentProps = {
+    index: SearchIndex;
+    onselect: (match: SearchMatch) => void;
+    /** A short result value shown beside each match, such as a voltage or loading. */
+    hint?: (match: SearchMatch) => {
+        text: string;
+        state?: string;
+    } | null;
+    placeholder?: string;
+};
+declare const OmniSearch: import("svelte").Component<$$ComponentProps, {}, "">;
+type OmniSearch = ReturnType<typeof OmniSearch>;
+export default OmniSearch;

package/dist/components/ResultsTable.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { queryTable, type TableModel } from '../diagram/index.js';
+
+	let {
+		model,
+		selected,
+		onselect,
+		hovered = -1,
+		onhover
+	}: {
+		model: TableModel;
+		/** Row index (network order) of the current selection, or −1. */
+		selected: number;
+		onselect: (index: number) => void;
+		/** Row under the pointer here or in a linked view (−1 for none). */
+		hovered?: number;
+		onhover?: (index: number) => void;
+	} = $props();
+
+	const ROW = 22;
+	const HEIGHT = 240;
+	const OVERSCAN = 6;
+	let text = $state('');
+	let issuesOnly = $state(false);
+	let sortKey = $state<string | null>(null);
+	let descending = $state(false);
+	let scrollTop = $state(0);
+	let scroller = $state<HTMLDivElement>();
+
+	const rows = $derived(queryTable(model, { text, issuesOnly, sortKey, descending }));
+	const first = $derived(Math.max(0, Math.floor(scrollTop / ROW) - OVERSCAN));
+	const last = $derived(Math.min(rows.length, first + Math.ceil(HEIGHT / ROW) + 2 * OVERSCAN));
+	const visible = $derived(Array.from(rows.subarray(first, last)));
+	const template = $derived(
+		model.columns
+			.map((c) =>
+				c.numeric
+					? 'minmax(64px, 0.8fr)'
+					: c.key === 'id'
+						? 'minmax(110px, 1.5fr)'
+						: 'minmax(70px, 1fr)'
+			)
+			.join(' ')
+	);
+	const format = (v: unknown, digits = 2) =>
+		v === null || v === undefined
+			? '—'
+			: typeof v === 'number'
+				? v.toLocaleString(undefined, {
+						minimumFractionDigits: digits,
+						maximumFractionDigits: digits
+					})
+				: String(v);
+
+	function sort(key: string, numeric?: boolean) {
+		// Numbers start largest-first, text A–Z; a second click reverses.
+		descending = sortKey === key ? !descending : !!numeric;
+		sortKey = key;
+	}
+	// Bring the selection into view when it changes elsewhere (map, issues, search).
+	$effect(() => {
+		const k = rows.indexOf(selected);
+		if (k < 0 || !scroller) return;
+		const y = k * ROW;
+		if (y < scroller.scrollTop || y + ROW > scroller.scrollTop + HEIGHT)
+			scroller.scrollTop = y - HEIGHT / 2;
+	});
+	function onkeydown(e: KeyboardEvent) {
+		if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key) || !rows.length) return;
+		e.preventDefault();
+		const k = rows.indexOf(selected);
+		const next =
+			e.key === 'Home'
+				? 0
+				: e.key === 'End'
+					? rows.length - 1
+					: Math.max(
+							0,
+							Math.min(rows.length - 1, (k < 0 ? -1 : k) + (e.key === 'ArrowDown' ? 1 : -1))
+						);
+		onselect(rows[next]);
+	}
+</script>
+
+<div class="table">
+	<div class="toolbar">
+		<input
+			type="search"
+			placeholder="Filter by ID or endpoint"
+			aria-label="Filter rows"
+			bind:value={text}
+		/>
+		<label><input type="checkbox" bind:checked={issuesOnly} /> Issues only</label>
+	</div>
+	<!-- The grid is a keyboard target: arrow keys move the shared selection. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="scroll"
+		role="grid"
+		aria-label="Results by {model.kind === 'bus' ? 'bus' : 'branch'}"
+		aria-rowcount={rows.length}
+		tabindex="0"
+		style:height="{HEIGHT}px"
+		bind:this={scroller}
+		onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
+		{onkeydown}
+	>
+		<div class="head" role="row" style:grid-template-columns={template}>
+			{#each model.columns as c (c.key)}
+				<div
+					role="columnheader"
+					class:num={c.numeric}
+					aria-sort={sortKey === c.key ? (descending ? 'descending' : 'ascending') : 'none'}
+				>
+					<button title={c.title ?? `Sort by ${c.label}`} onclick={() => sort(c.key, c.numeric)}
+						>{c.label}{#if c.unit}<small>{c.unit}</small>{/if}</button
+					>
+				</div>
+			{/each}
+		</div>
+		<div class="body" style:height="{rows.length * ROW}px">
+			{#each visible as i, n (i)}
+				{@const row = model.row(i)}
+				<!-- Arrow keys on the grid move the selection; a click is the pointer equivalent. -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					class="row {row.state}"
+					role="row"
+					tabindex="-1"
+					aria-selected={i === selected}
+					class:hovered={i === hovered}
+					style:top="{(first + n) * ROW}px"
+					style:grid-template-columns={template}
+					onclick={() => onselect(i)}
+					onpointerenter={() => onhover?.(i)}
+					onpointerleave={() => onhover?.(-1)}
+				>
+					{#each model.columns as c (c.key)}
+						<span role="gridcell" class:num={c.numeric}>{format(row[c.key], c.digits)}</span>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+	<p class="count">{rows.length.toLocaleString()} of {model.count.toLocaleString()} rows</p>
+</div>
+
+<style>
+	.table {
+		font-size: 11px;
+	}
+	.toolbar {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		margin-bottom: 4px;
+	}
+	.toolbar input[type='search'] {
+		flex: 1;
+		min-width: 0;
+		font: 11px var(--font-mono);
+		color: var(--ink);
+		background: var(--paper);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		padding: 5px 7px;
+	}
+	.toolbar label,
+	.count,
+	small {
+		color: var(--text-secondary);
+	}
+	.scroll {
+		position: relative;
+		overflow: auto;
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		font: 10px var(--font-mono);
+	}
+	.scroll:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.head {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		display: grid;
+		min-width: max-content;
+		background: var(--surface-control);
+		border-bottom: 1px solid var(--line);
+	}
+	.head button {
+		width: 100%;
+		padding: 4px 6px;
+		text-align: left;
+		font: inherit;
+		color: var(--text-secondary);
+		background: transparent;
+		border: 0;
+		cursor: pointer;
+		white-space: nowrap;
+	}
+	.head .num button {
+		text-align: right;
+	}
+	.head [aria-sort='ascending'] button,
+	.head [aria-sort='descending'] button {
+		color: var(--ink);
+	}
+	small {
+		display: block;
+		font-size: 9px;
+	}
+	.body {
+		position: relative;
+		min-width: max-content;
+	}
+	.row {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 22px;
+		display: grid;
+		align-items: center;
+		cursor: pointer;
+		border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
+	}
+	.row span {
+		padding: 0 6px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.num {
+		text-align: right;
+	}
+	.row.hovered {
+		box-shadow: inset 3px 0 var(--line-strong, var(--text-secondary));
+	}
+	.row[aria-selected='true'] {
+		background: var(--accent-soft);
+		box-shadow: inset 3px 0 var(--accent);
+	}
+	.violation span:last-child {
+		color: var(--text-danger);
+	}
+	.warning span:last-child {
+		color: var(--text-accent);
+	}
+	.inactive,
+	.missing,
+	.unbounded {
+		color: var(--text-secondary);
+	}
+	.count {
+		margin: 4px 0 0;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import { type TableModel } from '../diagram/index.js';
+type $$ComponentProps = {
+    model: TableModel;
+    /** Row index (network order) of the current selection, or −1. */
+    selected: number;
+    onselect: (index: number) => void;
+    /** Row under the pointer here or in a linked view (−1 for none). */
+    hovered?: number;
+    onhover?: (index: number) => void;
+};
+declare const ResultsTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResultsTable = ReturnType<typeof ResultsTable>;
+export default ResultsTable;