@ternkit/tern 1.3.0 → 1.4.0

package/dist/ui/Item.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		/** Makes the whole item a link; actions stay separate buttons. */
+		href?: string;
+		/** An avatar, icon or thumbnail at the start. */
+		media?: Snippet;
+		/** Buttons or a badge at the end. */
+		actions?: Snippet;
+		/** li inside a ul or ol, div elsewhere. */
+		as?: 'div' | 'li';
+		class?: string;
+	};
+	let { title, description, href, media, actions, as = 'div', class: klass = '' }: Props = $props();
+</script>
+
+<!-- A row with media, a title, a description and actions, for lists of people, files or settings. -->
+<svelte:element this={as} class="tern-item {klass}" class:link={!!href}>
+	{#if media}<div class="media">{@render media()}</div>{/if}
+	<div class="text">
+		{#if href}<a {href} class="title">{title}</a>{:else}<span class="title">{title}</span>{/if}
+		{#if description}<span class="description">{description}</span>{/if}
+	</div>
+	{#if actions}<div class="actions">{@render actions()}</div>{/if}
+</svelte:element>
+
+<style>
+	.tern-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		border-radius: var(--tern-radius-sm);
+		list-style: none;
+	}
+	.link:hover {
+		background: var(--tern-surface-2);
+	}
+	.text {
+		display: grid;
+		flex: 1;
+		min-width: 0;
+	}
+	.title {
+		font-weight: 550;
+		color: var(--tern-fg);
+		text-decoration: none;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	/* The link covers the item, so it's one big target. */
+	a.title::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+	}
+	a.title:focus-visible::after {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+	}
+	a.title:focus-visible {
+		outline: none;
+	}
+	.description {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.actions {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		gap: 0.375rem;
+	}
+	.media {
+		flex: none;
+	}
+</style>

package/dist/ui/Item.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    description?: string;
+    /** Makes the whole item a link; actions stay separate buttons. */
+    href?: string;
+    /** An avatar, icon or thumbnail at the start. */
+    media?: Snippet;
+    /** Buttons or a badge at the end. */
+    actions?: Snippet;
+    /** li inside a ul or ol, div elsewhere. */
+    as?: 'div' | 'li';
+    class?: string;
+};
+declare const Item: import("svelte").Component<Props, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/ui/Label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	type Props = HTMLLabelAttributes & {
+		/** Marks the control as required, with an asterisk screen readers skip (the control says it's required). */
+		required?: boolean;
+		children: Snippet;
+	};
+	let { required = false, class: klass = '', children, ...rest }: Props = $props();
+</script>
+
+<!-- A label on its own, for layouts Field doesn't fit. Point it at the control with for. -->
+<label class="tern-label {klass}" {...rest}>
+	{@render children()}
+	{#if required}<span class="required" aria-hidden="true">*</span>{/if}
+</label>
+
+<style>
+	.tern-label {
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-fg);
+	}
+	.required {
+		color: var(--tern-danger);
+		margin-inline-start: 0.125rem;
+	}
+</style>

package/dist/ui/Label.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = HTMLLabelAttributes & {
+    /** Marks the control as required, with an asterisk screen readers skip (the control says it's required). */
+    required?: boolean;
+    children: Snippet;
+};
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/ui/LineChart.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" generics="Row extends object">
+	import ChartFrame from './ChartFrame.svelte';
+	import { lastIndex, formatNumber, formatX, isTime, niceTicks, numericX, seriesColor, textWidth, timeTicks, type Series, type XValue } from './chart.js';
+
+	type Props = {
+		data: Row[];
+		/** The field on the x axis: dates (Date or ISO strings), numbers or categories. */
+		x: keyof Row & string;
+		/** Up to eight series; each is a field of numbers. */
+		series: Series<Row>[];
+		title: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** Fill under the lines. */
+		area?: boolean;
+		/** Start the y axis at zero. Turn it off for values far from zero, such as a temperature. */
+		zero?: boolean;
+		height?: number;
+		/** Formats y values on the axis, in tooltips and in the table. */
+		format?: (v: number) => string;
+		class?: string;
+	};
+	let { data, x, series, title, description, level, area = false, zero = true, height = 240, format = (v) => formatNumber(v), class: klass = '' }: Props = $props();
+
+	let width = $state(640);
+	let active = $state<number | null>(null);
+
+	const field = (r: Row, k: string) => (r as Record<string, unknown>)[k];
+	const xs = $derived(data.map((r) => field(r, x) as XValue));
+	const time = $derived(isTime(xs));
+	const nx = $derived(numericX(xs));
+	const values = $derived(
+		series.map((s) =>
+			data.map((r) => {
+				const v = field(r, s.key);
+				return typeof v === 'number' && Number.isFinite(v) ? v : null;
+			})
+		)
+	);
+	const all = $derived(values.flat().filter((v): v is number => v !== null));
+	const yTicks = $derived(niceTicks(zero || area ? Math.min(0, ...all) : Math.min(...all), Math.max(zero || area ? 0 : -Infinity, ...all), Math.max(3, Math.round(height / 60))));
+	const yMin = $derived(yTicks[0]!);
+	const yMax = $derived(yTicks[yTicks.length - 1]!);
+
+	// Direct labels at the line ends for up to four series, unless they'd collide.
+	const top = 10;
+	const bottom = 24;
+	const left = $derived(Math.max(...yTicks.map((t) => textWidth(format(t)))) + 10);
+	const ends = $derived(values.map((v) => [...v].reverse().find((n) => n !== null) ?? null));
+	const endY = (v: number) => top + (1 - (v - yMin) / (yMax - yMin || 1)) * (height - top - bottom);
+	const direct = $derived.by(() => {
+		if (series.length > 4) return false;
+		const ys = ends.filter((e): e is number => e !== null).map(endY).sort((a, b) => a - b);
+		return ys.every((y, i) => i === 0 || y - ys[i - 1]! >= 14);
+	});
+	const endLabels = $derived(series.map((s, i) => (series.length === 1 ? (ends[i] === null ? '' : format(ends[i]!)) : s.label)));
+	const right = $derived(direct ? Math.max(...endLabels.map(textWidth)) + 14 : 8);
+
+	const plotW = $derived(Math.max(10, width - left - right));
+	const plotH = $derived(height - top - bottom);
+	const xMin = $derived(nx ? Math.min(...nx) : 0);
+	const xMax = $derived(nx ? Math.max(...nx) : Math.max(1, data.length - 1));
+	const px = (i: number) => left + (((nx ? nx[i]! : i) - xMin) / (xMax - xMin || 1)) * plotW;
+	const py = (v: number) => top + (1 - (v - yMin) / (yMax - yMin || 1)) * plotH;
+
+	const xTicks = $derived.by(() => {
+		if (time && nx) {
+			const t = timeTicks(xMin, xMax, Math.max(2, Math.floor(plotW / 90)));
+			return t.ticks.map((v) => ({ at: left + ((v - xMin) / (xMax - xMin || 1)) * plotW, label: t.format(v) }));
+		}
+		if (nx) return niceTicks(xMin, xMax, Math.max(2, Math.floor(plotW / 80))).filter((v) => v >= xMin && v <= xMax).map((v) => ({ at: left + ((v - xMin) / (xMax - xMin || 1)) * plotW, label: formatNumber(v) }));
+		const every = Math.max(1, Math.ceil(data.length / Math.max(2, Math.floor(plotW / 70))));
+		return xs.map((v, i) => ({ at: px(i), label: String(v), i })).filter((t) => t.i % every === 0);
+	});
+
+	function path(v: (number | null)[]) {
+		let d = '';
+		let pen = false;
+		v.forEach((n, i) => {
+			if (n === null) return void (pen = false);
+			d += `${pen ? 'L' : 'M'}${px(i).toFixed(1)},${py(n).toFixed(1)}`;
+			pen = true;
+		});
+		return d;
+	}
+	function areaPath(v: (number | null)[]) {
+		const base = py(Math.max(yMin, Math.min(0, yMax)));
+		const runs: string[] = [];
+		let run: number[] = [];
+		const flush = () => {
+			if (run.length) runs.push(`M${px(run[0]!)},${base}` + run.map((i) => `L${px(i).toFixed(1)},${py(v[i]!).toFixed(1)}`).join('') + `L${px(run[run.length - 1]!)},${base}Z`);
+			run = [];
+		};
+		v.forEach((n, i) => (n === null ? flush() : run.push(i)));
+		flush();
+		return runs.join('');
+	}
+
+	function nearest(clientX: number, el: Element) {
+		const r = el.getBoundingClientRect();
+		const at = ((clientX - r.left) / r.width) * width;
+		let best = 0;
+		for (let i = 1; i < data.length; i++) if (Math.abs(px(i) - at) < Math.abs(px(best) - at)) best = i;
+		return best;
+	}
+	function onkeydown(e: KeyboardEvent) {
+		const last = data.length - 1;
+		const moves: Record<string, number> = { ArrowRight: Math.min(last, (active ?? -1) + 1), ArrowLeft: Math.max(0, (active ?? last + 1) - 1), Home: 0, End: last };
+		if (e.key in moves) {
+			e.preventDefault();
+			active = moves[e.key]!;
+		} else if (e.key === 'Escape') active = null;
+	}
+
+	const describe = (i: number) => `${formatX(xs[i]!, time)}: ` + series.map((s, k) => `${s.label} ${values[k]![i] === null ? 'no data' : format(values[k]![i]!)}`).join(', ');
+	const table = $derived({
+		headers: [x, ...series.map((s) => s.label)],
+		rows: data.map((_, i) => [formatX(xs[i]!, time), ...values.map((v) => (v[i] === null ? '–' : format(v[i]!)))])
+	});
+</script>
+
+<ChartFrame {title} {description} {level} class={klass} legend={series.map((s, i) => ({ label: s.label, color: seriesColor(i), kind: area ? 'rect' : 'line' }))} {table} readout={active === null ? '' : describe(active)}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		class="tern-plot"
+		bind:clientWidth={width}
+		role="group"
+		aria-roledescription="chart"
+		aria-label="{title}. Use the arrow keys to read values."
+		tabindex="0"
+		onpointermove={(e) => (active = nearest(e.clientX, e.currentTarget))}
+		onpointerleave={() => (active = null)}
+		onfocus={() => active === null && (active = data.length - 1)}
+		onblur={() => (active = null)}
+		{onkeydown}
+	>
+		<svg {width} {height} viewBox="0 0 {width} {height}" aria-hidden="true">
+			{#each yTicks as t (t)}
+				<line class="grid" x1={left} x2={left + plotW} y1={py(t)} y2={py(t)} />
+				<text class="tick" x={left - 8} y={py(t)} dy="0.32em" text-anchor="end">{format(t)}</text>
+			{/each}
+			{#each xTicks as t, i (i)}
+				<text class="tick" x={t.at} y={height - 6} text-anchor={i === 0 && t.at - left < 20 ? 'start' : 'middle'}>{t.label}</text>
+			{/each}
+			{#each values as v, k (series[k]!.key)}
+				{#if area}<path d={areaPath(v)} fill={seriesColor(k)} fill-opacity="0.1" />{/if}
+				<path d={path(v)} fill="none" stroke={seriesColor(k)} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+			{/each}
+			{#if active !== null}
+				<line class="grid" x1={px(active)} x2={px(active)} y1={top} y2={top + plotH} style="stroke: var(--tern-border-strong)" />
+			{/if}
+			{#each values as v, k (series[k]!.key)}
+				{@const i = active ?? lastIndex(v, (n) => n !== null)}
+				{#if i >= 0 && v[i] !== null}
+					<circle cx={px(i)} cy={py(v[i]!)} r="4" fill={seriesColor(k)} stroke="var(--tern-surface)" stroke-width="2" />
+				{/if}
+				{#if direct && ends[k] !== null}
+					<text class="direct" x={left + plotW + 10} y={py(ends[k]!)} dy="0.32em">{endLabels[k]}</text>
+				{/if}
+			{/each}
+		</svg>
+		{#if active !== null}
+			<div class="tooltip" style:left="{Math.min(px(active) + 12, width - 170)}px" style:top="{top}px">
+				<div class="head">{formatX(xs[active]!, time)}</div>
+				{#each series as s, k (s.key)}
+					<div class="row"><span class="swatch" style:background={seriesColor(k)}></span><strong>{values[k]![active] === null ? '–' : format(values[k]![active]!)}</strong><span>{s.label}</span></div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</ChartFrame>

package/dist/ui/LineChart.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type Series } from './chart.js';
+declare function $$render<Row extends object>(): {
+    props: {
+        data: Row[];
+        /** The field on the x axis: dates (Date or ISO strings), numbers or categories. */
+        x: keyof Row & string;
+        /** Up to eight series; each is a field of numbers. */
+        series: Series<Row>[];
+        title: string;
+        description?: string;
+        level?: 2 | 3 | 4;
+        /** Fill under the lines. */
+        area?: boolean;
+        /** Start the y axis at zero. Turn it off for values far from zero, such as a temperature. */
+        zero?: boolean;
+        height?: number;
+        /** Formats y values on the axis, in tooltips and in the table. */
+        format?: (v: number) => string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LineChart: $$IsomorphicComponent;
+type LineChart<Row extends object> = InstanceType<typeof LineChart<Row>>;
+export default LineChart;

package/dist/ui/Menu.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import MenuList from './MenuList.svelte';
+	import type { MenuItem } from './menu.js';
 
-	type Item = { label: string; onselect?: () => void; href?: string; danger?: boolean; disabled?: boolean; separator?: boolean };
 	type Props = {
-		/** The items; an item with separator: true draws a line. */
-		items: Item[];
+		/** The items. Items can have submenus, checkboxes, shortcuts and group headings. */
+		items: MenuItem[];
 		/** The button's content. */
 		children: Snippet;
 		/** Opens to the start or end edge of the button. */
@@ -16,75 +17,13 @@
 
 	const uid = $props.id();
 	let open = $state(false);
+	let focus = $state<'first' | 'last'>('first');
 	let button = $state<HTMLButtonElement>();
-	let menu = $state<HTMLDivElement>();
-	let typed = '';
-	let typedTimer: ReturnType<typeof setTimeout> | undefined;
 
-	const entries = () => Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])') ?? []);
-
-	async function show(focus: 'first' | 'last') {
+	function show(where: 'first' | 'last') {
+		focus = where;
 		open = true;
-		await Promise.resolve();
-		requestAnimationFrame(() => {
-			const list = entries();
-			(focus === 'first' ? list[0] : list[list.length - 1])?.focus();
-		});
-	}
-
-	function hide(returnFocus = true) {
-		open = false;
-		if (returnFocus) button?.focus();
-	}
-
-	function select(item: Item) {
-		if (item.disabled) return;
-		hide();
-		item.onselect?.();
-	}
-
-	// The ARIA menu button pattern.
-	function onmenukey(e: KeyboardEvent) {
-		const list = entries();
-		const i = list.indexOf(document.activeElement as HTMLElement);
-		const move = (j: number) => {
-			e.preventDefault();
-			list[(j + list.length) % list.length]?.focus();
-		};
-		switch (e.key) {
-			case 'ArrowDown':
-				return move(i + 1);
-			case 'ArrowUp':
-				return move(i - 1);
-			case 'Home':
-				return move(0);
-			case 'End':
-				return move(list.length - 1);
-			case 'Escape':
-				e.preventDefault();
-				return hide();
-			case 'Tab':
-				return hide(false);
-		}
-		if (e.key.length === 1 && /\S/.test(e.key)) {
-			// Type to jump to an item.
-			typed += e.key.toLowerCase();
-			clearTimeout(typedTimer);
-			typedTimer = setTimeout(() => (typed = ''), 500);
-			const start = typed.length === 1 ? i + 1 : i;
-			const order = [...list.slice(start), ...list.slice(0, start)];
-			order.find((el) => el.textContent?.trim().toLowerCase().startsWith(typed))?.focus();
-		}
 	}
-
-	$effect(() => {
-		if (!open) return;
-		const away = (e: PointerEvent) => {
-			if (!menu?.contains(e.target as Node) && !button?.contains(e.target as Node)) hide(false);
-		};
-		document.addEventListener('pointerdown', away);
-		return () => document.removeEventListener('pointerdown', away);
-	});
 </script>
 
 <div class="tern-menu {klass}">
@@ -96,7 +35,7 @@
 		aria-haspopup="menu"
 		aria-expanded={open}
 		aria-controls={open ? `tern-menu-${uid}` : undefined}
-		onclick={() => (open ? hide() : show('first'))}
+		onclick={() => (open ? (open = false) : show('first'))}
 		onkeydown={(e) => {
 			if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
 				e.preventDefault();
@@ -110,38 +49,25 @@
 		{@render children()}
 		<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
 	</button>
-	{#if open}
-		<div bind:this={menu} class="menu {align}" role="menu" id="tern-menu-{uid}" aria-labelledby="tern-menu-{uid}-button" tabindex="-1" onkeydown={onmenukey}>
-			{#each items as item, i (i)}
-				{#if item.separator}
-					<div class="separator" role="separator"></div>
-				{:else if item.href && !item.disabled}
-					<a role="menuitem" tabindex="-1" class:danger={item.danger} href={item.href} onclick={() => hide(false)}>{item.label}</a>
-				{:else}
-					<div
-						role="menuitem"
-						tabindex="-1"
-						class:danger={item.danger}
-						aria-disabled={item.disabled || undefined}
-						onclick={() => select(item)}
-						onkeydown={(e) => {
-							if (e.key === 'Enter' || e.key === ' ') {
-								e.preventDefault();
-								select(item);
-							}
-						}}
-					>
-						{item.label}
-					</div>
-				{/if}
-			{/each}
-		</div>
+	{#if open && button}
+		<MenuList
+			{items}
+			id="tern-menu-{uid}"
+			labelledby="tern-menu-{uid}-button"
+			anchor={button}
+			{align}
+			{focus}
+			inside={() => [button]}
+			onclose={(how) => {
+				open = false;
+				if (how.returnFocus) button?.focus();
+			}}
+		/>
 	{/if}
 </div>
 
 <style>
 	.tern-menu {
-		position: relative;
 		display: inline-block;
 	}
 	.trigger {
@@ -174,59 +100,4 @@
 		outline: 2px solid var(--tern-ring);
 		outline-offset: 2px;
 	}
-	.menu {
-		position: absolute;
-		top: calc(100% + 0.375rem);
-		z-index: 50;
-		min-width: 11rem;
-		padding: 0.3rem;
-		background: var(--tern-surface);
-		border: 1px solid var(--tern-border);
-		border-radius: var(--tern-radius);
-		box-shadow: var(--tern-shadow-lg);
-		animation: pop var(--tern-duration) ease-out;
-	}
-	.start {
-		left: 0;
-	}
-	.end {
-		right: 0;
-	}
-	[role='menuitem'] {
-		display: block;
-		padding: 0.45rem 0.65rem;
-		border-radius: calc(var(--tern-radius-sm) - 2px);
-		font-size: 0.875rem;
-		color: var(--tern-fg);
-		text-decoration: none;
-		cursor: pointer;
-		outline: none;
-	}
-	[role='menuitem']:hover,
-	[role='menuitem']:focus {
-		background: var(--tern-accent-soft);
-	}
-	[role='menuitem'].danger {
-		color: var(--tern-danger);
-	}
-	[role='menuitem'].danger:hover,
-	[role='menuitem'].danger:focus {
-		background: var(--tern-danger-soft);
-	}
-	[role='menuitem'][aria-disabled='true'] {
-		opacity: 0.45;
-		cursor: not-allowed;
-		background: none;
-	}
-	.separator {
-		height: 1px;
-		margin: 0.3rem 0.2rem;
-		background: var(--tern-border);
-	}
-	@keyframes pop {
-		from {
-			opacity: 0;
-			transform: translateY(-4px);
-		}
-	}
 </style>

package/dist/ui/Menu.svelte.d.ts

@@ -1,15 +1,8 @@
 import type { Snippet } from 'svelte';
-type Item = {
-    label: string;
-    onselect?: () => void;
-    href?: string;
-    danger?: boolean;
-    disabled?: boolean;
-    separator?: boolean;
-};
+import type { MenuItem } from './menu.js';
 type Props = {
-    /** The items; an item with separator: true draws a line. */
-    items: Item[];
+    /** The items. Items can have submenus, checkboxes, shortcuts and group headings. */
+    items: MenuItem[];
     /** The button's content. */
     children: Snippet;
     /** Opens to the start or end edge of the button. */