@tellegen/svelte 0.4.3 → 0.4.5

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/NotificationCenter.svelte

@@ -2,7 +2,9 @@
 	import { onDestroy, untrack } from 'svelte';
 	import { formatPowerIoDiagnostic } from '@tellegen/engine';
 	import { getAppState, getController } from '../context.svelte.js';
+	import { powerIoEntry, type LogEntryInput } from '../log.svelte.js';
 	import { getNoticeCenter, errorNoticeTitle } from '../notices.svelte.js';
+	import LogEntryView from './LogEntryView.svelte';
 	const app = getAppState();
 	const ctrl = getController();
 	const notices = getNoticeCenter();
@@ -33,7 +35,20 @@
 		const multi = app.activeMulti;
 		const summary = local?.summary ?? multi?.summary;
 		const geo = local?.geoWarnings ?? multi?.geoWarnings;
-		for (const [identity, title, details] of [
+		const subject = local?.fileName ?? multi?.fileName;
+		const entries: LogEntryInput[] = summary
+			? [
+					...summary.diagnostics.map((d) => powerIoEntry(d, { stage: 'Open', subject })),
+					...('warnings' in summary ? summary.warnings : []).map((message) => ({
+						severity: 'note' as const,
+						stage: 'Open',
+						source: 'tellegen',
+						subject,
+						message
+					}))
+				]
+			: [];
+		for (const [identity, title, details, items] of [
 			[
 				summary,
 				'Case import notes',
@@ -42,13 +57,15 @@
 							...summary.diagnostics.map(formatPowerIoDiagnostic),
 							...('warnings' in summary ? summary.warnings : [])
 						].join('\n\n')
-					: ''
+					: '',
+				entries
 			],
-			[geo, 'Coordinate import notes', geo?.join('\n\n') ?? '']
-		] as Array<[object | undefined, string, string]>) {
+			[geo, 'Coordinate import notes', geo?.join('\n\n') ?? '', undefined]
+		] as Array<[object | undefined, string, string, LogEntryInput[] | undefined]>) {
 			if (identity && !observed.has(identity)) {
 				observed.add(identity);
-				if (details) untrack(() => notices.push({ kind: 'warning', title, details }));
+				if (details)
+					untrack(() => notices.push({ kind: 'warning', title, details, entries: items }));
 			}
 		}
 	});
@@ -92,7 +109,15 @@
 									>{entry.title}{#if entry.count > 1}<span class="count">{entry.count}</span
 										>{/if}</summary
 								>
-								<pre data-testid="notification-details">{entry.details}</pre>
+								{#if entry.entries?.length}
+									<ol class="entries" data-testid="notification-details">
+										{#each entry.entries as item, i (i)}
+											<li><LogEntryView entry={item} showSubject={false} /></li>
+										{/each}
+									</ol>
+								{:else}
+									<pre data-testid="notification-details">{entry.details}</pre>
+								{/if}
 							</details>
 							{#if entry.retry && entry.canRetry?.()}<button onclick={entry.retry}>Retry</button
 								>{/if}
@@ -227,6 +252,12 @@
 	summary {
 		cursor: pointer;
 	}
+	.entries {
+		margin-top: 8px;
+	}
+	.entries li {
+		padding: 6px 0;
+	}
 	pre {
 		font: 11px/1.5 var(--font-mono);
 		white-space: pre-wrap;

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;