@tellegen/svelte 0.2.0 → 0.4.0

package/dist/components/NotificationCenter.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import { formatPowerIoDiagnostic } from '@tellegen/engine';
+	import { getAppState, getController } from '../context.svelte.js';
+	import { getNoticeCenter, errorNoticeTitle } from '../notices.svelte.js';
+	const app = getAppState();
+	const ctrl = getController();
+	const notices = getNoticeCenter();
+	let root = $state.raw<HTMLElement>();
+	let focused = $state(false);
+	let hovered = $state(false);
+	const observed = new WeakSet<object>();
+	$effect(() => {
+		const message = app.error;
+		const detail = app.errorDetail;
+		const revision = app.errorRevision;
+		const retry = app.errorRetry;
+		if (message)
+			untrack(() =>
+				notices.push({
+					kind: 'error',
+					// A message with its own detail is already written for people.
+					title: detail ? message : errorNoticeTitle(message),
+					details: detail ?? message,
+					retry: () => ctrl.retryError(),
+					canRetry: () =>
+						app.errorRevision === revision && app.error === message && app.errorRetry === retry
+				})
+			);
+	});
+	$effect(() => {
+		const local = app.activeLocal;
+		const multi = app.activeMulti;
+		const summary = local?.summary ?? multi?.summary;
+		const geo = local?.geoWarnings ?? multi?.geoWarnings;
+		for (const [identity, title, details] of [
+			[
+				summary,
+				'Case import notes',
+				summary
+					? [
+							...summary.diagnostics.map(formatPowerIoDiagnostic),
+							...('warnings' in summary ? summary.warnings : [])
+						].join('\n\n')
+					: ''
+			],
+			[geo, 'Coordinate import notes', geo?.join('\n\n') ?? '']
+		] as Array<[object | undefined, string, string]>) {
+			if (identity && !observed.has(identity)) {
+				observed.add(identity);
+				if (details) untrack(() => notices.push({ kind: 'warning', title, details }));
+			}
+		}
+	});
+	$effect(() => {
+		notices.pause(focused || hovered || notices.expanded);
+	});
+	onDestroy(() => notices.dispose());
+</script>
+
+<div class="announcement" role="status" aria-live="polite" aria-atomic="true">
+	{notices.announcement}
+</div>
+{#if notices.entries.length}
+	<section
+		class="notifications"
+		aria-label="Notifications"
+		bind:this={root}
+		onfocusin={() => (focused = true)}
+		onfocusout={(event) => {
+			focused = root?.contains(event.relatedTarget as Node | null) ?? false;
+		}}
+		onpointerenter={() => (hovered = true)}
+		onpointerleave={() => (hovered = false)}
+	>
+		{#if notices.expanded}
+			<div class="recent" id="recent-notifications">
+				<header>
+					<strong>Recent messages</strong><button
+						onclick={() => {
+							focused = false;
+							hovered = false;
+							notices.clear();
+						}}>Clear</button
+					>
+				</header>
+				<ol>
+					{#each notices.entries as entry (entry.id)}
+						<li>
+							<details>
+								<summary
+									>{entry.title}{#if entry.count > 1}<span class="count">{entry.count}</span
+										>{/if}</summary
+								>
+								<pre data-testid="notification-details">{entry.details}</pre>
+							</details>
+							{#if entry.retry && entry.canRetry?.()}<button onclick={entry.retry}>Retry</button
+								>{/if}
+						</li>
+					{/each}
+				</ol>
+			</div>
+		{/if}
+		<div
+			class="notice"
+			data-testid="notification-toast"
+			data-kind={notices.active?.kind}
+			class:quiet={!notices.active}
+		>
+			{#if notices.active}
+				<span class="message">{notices.active.title}</span>
+				{#if notices.active.count > 1}<span
+						class="count"
+						aria-label={`${notices.active.count} occurrences`}>{notices.active.count}</span
+					>{/if}
+				{#if notices.active.retry && notices.active.canRetry?.()}<button
+						onclick={notices.active.retry}>Retry</button
+					>{/if}
+			{/if}
+			<button
+				class="history"
+				aria-expanded={notices.expanded}
+				aria-controls="recent-notifications"
+				onclick={() => (notices.expanded = !notices.expanded)}
+				>{notices.active ? 'Details' : 'Messages'}{#if !notices.active}<span class="count"
+						>{notices.entries.length}</span
+					>{/if}</button
+			>
+			{#if notices.active}<button
+					aria-label="Dismiss notification"
+					onclick={() => notices.dismiss()}>Close</button
+				>{/if}
+		</div>
+	</section>
+{/if}
+
+<style>
+	.announcement {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+	}
+	.notifications {
+		position: fixed;
+		z-index: 65;
+		bottom: 40px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: min(540px, calc(100vw - 200px));
+		font: 12px/1.4 var(--font-display);
+		pointer-events: none;
+	}
+	.notice,
+	.recent {
+		pointer-events: auto;
+		background: var(--panel);
+		border: 1px solid var(--line);
+		border-radius: 5px;
+		box-shadow: var(--elev-2);
+	}
+	.notice {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-height: 38px;
+		padding: 3px 8px 3px 12px;
+		box-sizing: border-box;
+	}
+	.message {
+		min-width: 0;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.quiet {
+		width: fit-content;
+		margin: auto;
+		padding-left: 5px;
+		background: var(--paper);
+	}
+	button {
+		font: inherit;
+		color: var(--ink);
+		border: 0;
+		background: transparent;
+		padding: 6px;
+		border-radius: 3px;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	button:hover {
+		background: var(--accent-soft);
+	}
+	button:focus-visible,
+	summary:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+	.count {
+		margin-left: 5px;
+		font: 10px var(--font-mono);
+		color: var(--text-secondary);
+	}
+	.recent {
+		margin-bottom: 6px;
+		max-height: min(320px, 40dvh);
+		overflow-y: auto;
+	}
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 8px 12px;
+	}
+	ol {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	li {
+		padding: 10px 12px;
+		border-top: 1px solid var(--line);
+	}
+	summary {
+		cursor: pointer;
+	}
+	pre {
+		font: 11px/1.5 var(--font-mono);
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		margin: 10px 0 0;
+	}
+	@media (max-width: 960px) {
+		.notifications {
+			width: calc(100vw - 24px);
+			bottom: 60px;
+		}
+		button {
+			min-height: 36px;
+		}
+	}
+</style>

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

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

package/dist/components/PanelCard.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import {
+		focusFirst,
+		getPanelLayout,
+		type PanelRegistration,
+		type PanelSide
+	} from '../panels.svelte.js';
+	let {
+		panel,
+		floating = false,
+		mobile = false
+	}: {
+		panel: PanelRegistration;
+		floating?: boolean;
+		mobile?: boolean;
+	} = $props();
+	const layout = getPanelLayout();
+	let menu = $state(false);
+	let menuAnchor: HTMLDivElement | undefined = $state();
+	let card: HTMLElement;
+	const bounds = $derived(layout.bounds(panel));
+	const preferred = $derived(!floating && !mobile && layout.preferred(panel));
+	const dockReserve = $derived.by(() => {
+		const side = layout.position(panel);
+		return side === 'floating'
+			? 0
+			: Math.max(0, layout.ordered(side).filter((candidate) => candidate.open).length - 1) * 142;
+	});
+	function start(event: PointerEvent, kind: 'move' | 'resize') {
+		if (mobile || !event.isPrimary || event.button !== 0) return;
+		const rect = card.getBoundingClientRect();
+		layout.beginGesture(panel, kind, event.clientX, event.clientY, {
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height
+		});
+		(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+		event.preventDefault();
+	}
+	async function key(event: KeyboardEvent) {
+		if (mobile) return;
+		const panelId = panel.id;
+		const step = event.shiftKey ? 40 : 10;
+		const directions: Record<string, [number, number]> = {
+			ArrowLeft: [-step, 0],
+			ArrowRight: [step, 0],
+			ArrowUp: [0, -step],
+			ArrowDown: [0, step]
+		};
+		if (directions[event.key]) {
+			event.preventDefault();
+			const [x, y] = directions[event.key];
+			const rect = card.getBoundingClientRect();
+			layout.float(panel, {
+				x: rect.x + x,
+				y: rect.y + y,
+				width: rect.width,
+				height: rect.height
+			});
+			layout.save();
+			await tick();
+			document.querySelector<HTMLElement>(`[data-panel="${CSS.escape(panelId)}"] .title`)?.focus();
+		} else if (event.key === 'Escape') {
+			menu = false;
+		}
+	}
+	function resizeKey(event: KeyboardEvent) {
+		const step = event.shiftKey ? 40 : 10;
+		if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+		event.preventDefault();
+		layout.float(panel, {
+			...bounds,
+			width:
+				bounds.width + (event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0),
+			height:
+				bounds.height + (event.key === 'ArrowDown' ? step : event.key === 'ArrowUp' ? -step : 0)
+		});
+		layout.save();
+	}
+	async function position(side?: PanelSide) {
+		const panelId = panel.id;
+		menu = false;
+		if (side) layout.dock(panel, side);
+		else {
+			layout.float(panel);
+			layout.save();
+		}
+		await tick();
+		document.querySelector<HTMLElement>(`[data-panel="${CSS.escape(panelId)}"] .title`)?.focus();
+	}
+	async function close() {
+		const title = panel.title;
+		const position = layout.position(panel);
+		const dock = position === 'floating' ? panel.side : position;
+		const opener = layout.opener(panel);
+		layout.close(panel);
+		await tick();
+		// The toolbar button for the panel; a host without the toolbar gets the
+		// control that opened it, else the panel's dock (the drawer when narrow).
+		focusFirst([
+			document.querySelector<HTMLElement>(
+				`.panel-toolbar button[aria-label="${CSS.escape(title)}"]`
+			),
+			opener,
+			document.querySelector<HTMLElement>(`[data-panel-dock="${dock}"], [data-panel-drawer]`)
+		]);
+	}
+	// Keyboard users can scroll an overflowing panel only through focus, so the
+	// content becomes a labelled, focusable region exactly while it overflows.
+	let overflowing = $state(false);
+	function trackOverflow(content: HTMLElement) {
+		const sync = () => (overflowing = content.scrollHeight > content.clientHeight + 1);
+		const resize = new ResizeObserver(sync);
+		const observe = () => {
+			resize.disconnect();
+			resize.observe(content);
+			for (const child of content.children) resize.observe(child);
+			sync();
+		};
+		const children = new MutationObserver(observe);
+		children.observe(content, { childList: true });
+		observe();
+		return () => {
+			resize.disconnect();
+			children.disconnect();
+		};
+	}
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.key === 'Escape') menu = false;
+	}}
+	onpointerdown={(event) => {
+		if (menu && !menuAnchor?.contains(event.target as Node)) menu = false;
+	}}
+/>
+<aside
+	bind:this={card}
+	class="panel-frame"
+	class:floating
+	class:mobile
+	class:preferred
+	data-panel={panel.id}
+	aria-label={panel.title}
+	style:left={floating ? `${bounds.x}px` : undefined}
+	style:top={floating ? `${bounds.y}px` : undefined}
+	style:width={floating ? `${bounds.width}px` : undefined}
+	style:height={floating ? `${bounds.height}px` : undefined}
+	style:max-height={preferred ? `calc(100% - ${dockReserve}px)` : undefined}
+>
+	<header>
+		{#if mobile}
+			<h2 class="title">{panel.title}</h2>
+		{:else}
+			<button
+				class="title"
+				aria-label={`Move ${panel.title} panel`}
+				title="Click to expand. Drag or use arrow keys to move. Open panel options to dock."
+				onpointerdown={(event) => start(event, 'move')}
+				onkeydown={key}
+				onclick={() => layout.activate(panel)}>{panel.title}</button
+			>
+		{/if}
+		<div class="header-actions">{@render panel.headerActions?.()}</div>
+		{#if !mobile}<div class="menu-anchor" bind:this={menuAnchor}>
+				<button
+					class="icon"
+					aria-label={`${panel.title} panel options`}
+					aria-expanded={menu}
+					onclick={() => (menu = !menu)}
+					title="Panel options"
+				>
+					<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"
+						><circle cx="3" cy="8" r="1" /><circle cx="8" cy="8" r="1" /><circle
+							cx="13"
+							cy="8"
+							r="1"
+						/></svg
+					>
+				</button>
+				{#if menu}<div class="panel-menu">
+						<button onclick={() => position('left')}>Dock left</button>
+						<button onclick={() => position('right')}>Dock right</button>
+						<button onclick={() => position()}>Detach</button>
+					</div>{/if}
+			</div>{/if}
+		<button
+			class="icon close"
+			aria-label={`Close ${panel.title.toLowerCase()} panel`}
+			title="Close panel"
+			onclick={close}
+		>
+			<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"
+				><path d="m4 4 8 8m0-8-8 8" stroke="currentColor" stroke-width="1.5" fill="none" /></svg
+			>
+		</button>
+	</header>
+	<!-- A scroll container must take focus for keyboard scrolling, and this one
+		 takes it only while it overflows. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="panel-content"
+		{@attach trackOverflow}
+		tabindex={overflowing ? 0 : undefined}
+		role={overflowing ? 'region' : undefined}
+		aria-label={overflowing ? `${panel.title} panel content` : undefined}
+	>
+		{@render panel.children()}
+	</div>
+	{#if floating}<button
+			class="resize"
+			aria-label={`Resize ${panel.title} panel`}
+			title="Drag to resize, or use arrow keys"
+			onpointerdown={(event) => start(event, 'resize')}
+			onkeydown={resizeKey}
+		>
+			<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"
+				><path d="m3 10 7-7m-3 7 3-3" stroke="currentColor" /></svg
+			>
+		</button>{/if}
+</aside>
+
+<style>
+	.panel-frame {
+		display: flex;
+		flex-direction: column;
+		min-height: 130px;
+		max-height: 100%;
+		flex: 0 1 auto;
+		pointer-events: auto;
+		background: var(--paper);
+		color: var(--ink);
+		border: 1px solid var(--line);
+		border-radius: 5px;
+		box-shadow: var(--elev-1);
+		font: 13px/1.5 var(--font-display);
+		position: relative;
+	}
+	header {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		padding: 8px 10px 8px 14px;
+		flex: none;
+		border-bottom: 1px solid var(--line);
+	}
+	button {
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		border: 0;
+		background: transparent;
+		border-radius: 3px;
+	}
+	button:hover {
+		background: var(--accent-soft);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+	.title {
+		flex: 1;
+		min-width: 0;
+		text-align: left;
+		font-size: inherit;
+		font-weight: 600;
+		margin: 0;
+		padding: 3px 0;
+		cursor: grab;
+		touch-action: none;
+	}
+	.title:active {
+		cursor: grabbing;
+	}
+	.icon {
+		display: grid;
+		place-items: center;
+		width: 26px;
+		height: 28px;
+		padding: 0;
+		flex: none;
+	}
+	.icon svg {
+		fill: currentColor;
+	}
+	/* Coarse pointers: a 44px hit area around the 26x28 close button. The
+	   pseudo-element reaches into the header padding and the gap, so nothing
+	   moves. */
+	@media (pointer: coarse) {
+		.close {
+			position: relative;
+		}
+		.close::after {
+			content: '';
+			position: absolute;
+			inset: -8px -10px -8px -8px;
+		}
+	}
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.header-actions :global(button) {
+		font: 11px/1.3 var(--font-display);
+		padding: 4px;
+		border: 0;
+		background: none;
+		color: var(--text-secondary);
+	}
+	.panel-content {
+		min-height: 0;
+		overflow: auto;
+		overscroll-behavior: contain;
+		display: flex;
+		flex-direction: column;
+		border-radius: 0 0 5px 5px;
+	}
+	.panel-content:focus-visible {
+		outline-offset: -2px;
+	}
+	.menu-anchor {
+		position: relative;
+	}
+	.panel-menu {
+		position: absolute;
+		z-index: 3;
+		top: 100%;
+		right: 0;
+		min-width: 130px;
+		padding: 5px;
+		background: var(--paper);
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		box-shadow: var(--elev-2);
+	}
+	.panel-menu button {
+		display: block;
+		padding: 7px 10px;
+		width: 100%;
+		text-align: left;
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.preferred {
+		flex-shrink: 0;
+	}
+	.floating {
+		position: fixed;
+		min-height: 0;
+		z-index: 40;
+		max-height: none;
+		box-shadow: var(--elev-2);
+	}
+	.floating .panel-content {
+		flex: 1;
+		padding-bottom: 12px;
+	}
+	.resize {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 20px;
+		height: 20px;
+		cursor: nwse-resize;
+		touch-action: none;
+		color: var(--text-secondary);
+	}
+	.mobile {
+		min-height: 0;
+		height: 100%;
+		border-radius: 10px 10px 0 0;
+	}
+	.mobile .panel-content {
+		flex: 1;
+	}
+	.mobile .title {
+		cursor: default;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import { type PanelRegistration } from '../panels.svelte.js';
+type $$ComponentProps = {
+    panel: PanelRegistration;
+    floating?: boolean;
+    mobile?: boolean;
+};
+declare const PanelCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelCard = ReturnType<typeof PanelCard>;
+export default PanelCard;

package/dist/components/PanelFrame.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import { getPanelLayout, type PanelSide } from '../panels.svelte.js';
+	let {
+		id,
+		title,
+		side,
+		order = 0,
+		width = 340,
+		open = $bindable(false),
+		children,
+		headerActions,
+		onopen
+	}: {
+		id: string;
+		title: string;
+		side: PanelSide;
+		order?: number;
+		width?: number;
+		open?: boolean;
+		children: Snippet;
+		headerActions?: Snippet;
+		onopen?: () => void;
+	} = $props();
+	const layout = getPanelLayout();
+	onMount(() =>
+		layout.register({
+			id,
+			title,
+			side,
+			order,
+			width,
+			open,
+			children,
+			headerActions,
+			onopen,
+			setOpen: (value) => {
+				open = value;
+			}
+		})
+	);
+	$effect(() => {
+		const values = { id, open, title, width };
+		untrack(() => layout.update(values.id, values.open, values.title, values.width));
+	});
+</script>

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

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+import { type PanelSide } from '../panels.svelte.js';
+type $$ComponentProps = {
+    id: string;
+    title: string;
+    side: PanelSide;
+    order?: number;
+    width?: number;
+    open?: boolean;
+    children: Snippet;
+    headerActions?: Snippet;
+    onopen?: () => void;
+};
+declare const PanelFrame: import("svelte").Component<$$ComponentProps, {}, "open">;
+type PanelFrame = ReturnType<typeof PanelFrame>;
+export default PanelFrame;