@tellegen/svelte 0.4.3 → 0.4.5

package/dist/components/LocalCaseDetails.svelte

@@ -154,15 +154,22 @@
 	{/if}
 	{@render note?.(lc)}
 	{#if lc.summary && lc.studyInputJson}
+		{@const exportUnavailable = ctrl.caseExportUnavailableReason(lc)}
 		<div class="case-actions">
-			<button class="reset" disabled={busy} onclick={() => saveCase(lc)}>Save case</button>
+			<button
+				class="reset"
+				disabled={busy || !!exportUnavailable}
+				title={exportUnavailable ?? undefined}
+				onclick={() => saveCase(lc)}>Save case</button
+			>
 			{#if lc.formulation === 'dcopf' && lc.solution}
 				<button class="reset" disabled={busy} onclick={() => saveSolution(lc)}>Save solution</button
 				>
 			{/if}
 			<button
 				class="reset"
-				disabled={busy}
+				disabled={busy || !!exportUnavailable}
+				title={exportUnavailable ?? undefined}
 				aria-expanded={exportOpen}
 				aria-controls="case-export-formats"
 				onclick={() => (exportOpen = !exportOpen)}
@@ -175,7 +182,9 @@
 				</button>
 			{/if}
 		</div>
-		{#if exportOpen}
+		{#if exportUnavailable}
+			<p class="unavailable">{exportUnavailable}</p>
+		{:else if exportOpen}
 			<ul class="case-actions" id="case-export-formats" aria-label="Export formats">
 				{#each EXPORT_FORMATS as f (f.token)}
 					<li>
@@ -266,4 +275,10 @@
 	.case-actions .reset {
 		margin-top: 0;
 	}
+
+	.unavailable {
+		margin: 8px 0 0;
+		font-size: 12px;
+		color: var(--text-secondary);
+	}
 </style>

package/dist/components/LogEntryView.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { LogEntry, LogEntryInput } from '../log.svelte.js';
+	let {
+		entry,
+		showSubject = true,
+		onbus
+	}: {
+		entry: LogEntryInput | LogEntry;
+		/** Off inside a group that already names the subject. */
+		showSubject?: boolean;
+		/** Makes each named bus a button, for a host that can select it. */
+		onbus?: (bus: number, entry: LogEntryInput) => void;
+	} = $props();
+	const LABEL = { error: 'Error', warning: 'Warning', note: 'Note' } as const;
+	const MAX_BUSES = 12;
+	const count = $derived('count' in entry ? entry.count : 1);
+	const buses = $derived(entry.buses ?? []);
+	const details = $derived(
+		Object.entries(entry.details ?? {}).map(
+			([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)] as const
+		)
+	);
+</script>
+
+<div class="entry" data-severity={entry.severity} data-testid="log-entry">
+	<span class="severity">{LABEL[entry.severity]}</span>
+	<div class="body">
+		<p class="message">
+			{entry.message}{#if count > 1}<span class="count" aria-label={`reported ${count} times`}
+					>{count}×</span
+				>{/if}
+		</p>
+		<dl class="meta">
+			<div>
+				<dt>From</dt>
+				<dd>{entry.source}</dd>
+			</div>
+			{#if entry.code}<div>
+					<dt>Code</dt>
+					<dd class="mono">{entry.code}</dd>
+				</div>{/if}
+			{#if showSubject && entry.subject}<div>
+					<dt>In</dt>
+					<dd>{entry.subject}</dd>
+				</div>{/if}
+			{#if entry.target}<div>
+					<dt>Element</dt>
+					<dd class="mono">{entry.target}</dd>
+				</div>{/if}
+		</dl>
+		{#if buses.length}
+			<p class="buses">
+				<span class="label">{buses.length === 1 ? 'Bus' : 'Buses'}</span>
+				{#each buses.slice(0, MAX_BUSES) as bus (bus)}
+					{#if onbus}<button type="button" onclick={() => onbus(bus, entry)}>{bus}</button
+						>{:else}<span class="bus">{bus}</span>{/if}
+				{/each}
+				{#if buses.length > MAX_BUSES}<span class="more">and {buses.length - MAX_BUSES} more</span
+					>{/if}
+			</p>
+		{/if}
+		{#if entry.hint}<p class="hint">{entry.hint}</p>{/if}
+		{#if details.length}
+			<details>
+				<summary>Details</summary>
+				<dl class="details">
+					{#each details as [key, value] (key)}
+						<div>
+							<dt class="mono">{key}</dt>
+							<dd class="mono">{value}</dd>
+						</div>
+					{/each}
+				</dl>
+			</details>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.entry {
+		--log-warning: #8a5300;
+		display: grid;
+		grid-template-columns: 62px minmax(0, 1fr);
+		gap: 8px;
+		font: var(--fs-meta, 12px) / 1.45 var(--font-display);
+		color: var(--text-primary, var(--ink));
+	}
+	:global(:root[data-theme='dark']) .entry {
+		--log-warning: #f0c36d;
+	}
+	.severity {
+		font: 600 10px/1.9 var(--font-mono);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--text-secondary);
+	}
+	[data-severity='error'] .severity {
+		color: var(--text-danger, var(--red));
+	}
+	[data-severity='warning'] .severity {
+		color: var(--log-warning);
+	}
+	.body {
+		min-width: 0;
+	}
+	p {
+		margin: 0;
+	}
+	.message {
+		overflow-wrap: anywhere;
+	}
+	.count {
+		margin-left: 6px;
+		font: 10px var(--font-mono);
+		color: var(--text-secondary);
+	}
+	.meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 2px 12px;
+		margin: 3px 0 0;
+		color: var(--text-secondary);
+	}
+	.meta div,
+	.details div {
+		display: flex;
+		gap: 4px;
+		min-width: 0;
+	}
+	dt {
+		color: var(--text-tertiary, var(--text-secondary));
+	}
+	dd {
+		margin: 0;
+		overflow-wrap: anywhere;
+	}
+	.mono {
+		font-family: var(--font-mono);
+		font-size: 11px;
+	}
+	.buses {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px;
+		margin-top: 4px;
+	}
+	.label,
+	.more {
+		color: var(--text-secondary);
+	}
+	.bus,
+	.buses button {
+		font: 11px var(--font-mono);
+		padding: 1px 6px;
+		border-radius: 3px;
+		background: var(--surface-chip, var(--accent-soft));
+		color: inherit;
+		border: 0;
+	}
+	.buses button {
+		cursor: pointer;
+	}
+	.buses button:hover {
+		background: var(--accent-soft);
+	}
+	.buses button:focus-visible,
+	summary:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+	.hint {
+		margin-top: 4px;
+		color: var(--text-secondary);
+	}
+	details {
+		margin-top: 4px;
+	}
+	summary {
+		cursor: pointer;
+		color: var(--text-secondary);
+	}
+	.details {
+		display: grid;
+		gap: 2px;
+		margin: 4px 0 0;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { LogEntry, LogEntryInput } from '../log.svelte.js';
+type $$ComponentProps = {
+    entry: LogEntryInput | LogEntry;
+    /** Off inside a group that already names the subject. */
+    showSubject?: boolean;
+    /** Makes each named bus a button, for a host that can select it. */
+    onbus?: (bus: number, entry: LogEntryInput) => void;
+};
+declare const LogEntryView: import("svelte").Component<$$ComponentProps, {}, "">;
+type LogEntryView = ReturnType<typeof LogEntryView>;
+export default LogEntryView;

package/dist/components/LogPanel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getAppState, getController } from '../context.svelte.js';
+	import DiagnosticLogView from './DiagnosticLogView.svelte';
+	import PanelFrame from './PanelFrame.svelte';
+	const app = getAppState();
+	const ctrl = getController();
+	let open = $state(false);
+	// A bus named in a finding selects that bus on the case on screen.
+	function selectBus(bus: number) {
+		if (app.activeLocal) void ctrl.selectLocalBus(app.activeLocal.id, bus);
+		else if (app.activeCaseId) ctrl.selectBus(app.activeCaseId, bus);
+	}
+</script>
+
+<PanelFrame id="log" title="Log" side="right" order={40} width={360} bind:open>
+	<div class="log-body">
+		<DiagnosticLogView onbus={selectBus} />
+	</div>
+</PanelFrame>
+
+<style>
+	.log-body {
+		padding: 12px 14px;
+	}
+</style>

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

@@ -0,0 +1,3 @@
+declare const LogPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type LogPanel = ReturnType<typeof LogPanel>;
+export default LogPanel;

package/dist/components/McResults.svelte

@@ -40,6 +40,17 @@
 	});
 	let busChoice = $state('');
 	let edgeChoice = $state('');
+	/** One entry per equipment id. A multi-winding transformer projects to several graph edges
+	 * that share its id (one per winding pair), so the edges are grouped by id. */
+	const equipmentOptions = $derived.by(() => {
+		const byId = new Map<string, string[]>();
+		for (const edge of graph?.edges ?? []) {
+			const ends = byId.get(edge.id) ?? [];
+			ends.push(`${edge.from} - ${edge.to}`);
+			byId.set(edge.id, ends);
+		}
+		return [...byId].map(([id, ends]) => ({ id, label: `${ends.join(', ')}, ${id}` }));
+	});
 	const busId = $derived(
 		selectedBus ??
 			(graph?.buses.some((b) => b.id === busChoice) ? busChoice : graph?.buses[0]?.id) ??
@@ -127,7 +138,11 @@
 		</div>
 		<div>
 			<dt>Load voltage range</dt>
-			<dd>{summary.min_voltage_pu == null || summary.max_voltage_pu == null ? 'n/a' : `${fixed(summary.min_voltage_pu)}–${fixed(summary.max_voltage_pu)} pu`}</dd>
+			<dd>
+				{summary.min_voltage_pu == null || summary.max_voltage_pu == null
+					? 'n/a'
+					: `${fixed(summary.min_voltage_pu)}–${fixed(summary.max_voltage_pu)} pu`}
+			</dd>
 		</div>
 		<div>
 			<dt>Source P / Q</dt>
@@ -228,8 +243,8 @@
 					selectedEdge = null;
 					portPage = 0;
 				}}
-				><option value="">All equipment</option>{#each graph?.edges ?? [] as edge (edge.id)}<option
-						value={edge.id}>{edge.from} - {edge.to}, {edge.id}</option
+				><option value="">All equipment</option>{#each equipmentOptions as option, i (i)}<option
+						value={option.id}>{option.label}</option
 					>{/each}</select
 			></label
 		>