@ternkit/tern 1.3.0 → 1.4.0

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

@@ -0,0 +1,18 @@
+type Props = {
+    /** What it counts, in sentence case, such as "Unique visitors". */
+    label: string;
+    value: number;
+    /** The change, in percent, against the period named in period. */
+    delta?: number;
+    /** Such as "vs last week". */
+    period?: string;
+    /** Whether up is good (visits) or bad (errors), which picks the delta's color. */
+    upIsGood?: boolean;
+    /** Recent values, drawn as a sparkline. */
+    trend?: number[];
+    format?: (v: number) => string;
+    class?: string;
+};
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/ui/Table.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" generics="Row">
+	import type { Snippet } from 'svelte';
+	import type { Column } from './table.js';
+
+
+	type Props = {
+		columns: Column<Row>[];
+		rows: Row[];
+		/** A caption for the table; say what it lists. Hidden visually with hideCaption. */
+		caption: string;
+		hideCaption?: boolean;
+		/** A stable key for each row. */
+		key?: (row: Row) => string | number;
+		/** Shown in place of rows when there are none. */
+		empty?: string;
+		class?: string;
+	};
+	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty = 'Nothing to show', class: klass = '' }: Props = $props();
+</script>
+
+<!-- A semantic table, with a caption, column headers and numeric alignment. -->
+<div class="tern-table-wrap {klass}">
+	<table class="tern-table">
+		<caption class:tern-sr-only={hideCaption}>{caption}</caption>
+		<thead>
+			<tr>
+				{#each columns as col (col.key)}<th scope="col" style:text-align={col.align} style:width={col.width}>{col.header}</th>{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as row (key(row))}
+				<tr>
+					{#each columns as col (col.key)}
+						<td style:text-align={col.align}>
+							{#if col.cell}{@render col.cell(row)}{:else}{row[col.key] ?? ''}{/if}
+						</td>
+					{/each}
+				</tr>
+			{:else}
+				<tr><td colspan={columns.length} class="empty">{empty}</td></tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.tern-table-wrap {
+		overflow-x: auto;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	caption {
+		padding: 0.75rem;
+		text-align: start;
+		font-weight: 600;
+		color: var(--tern-fg);
+	}
+	td {
+		font-variant-numeric: tabular-nums;
+	}
+	.tern-table-wrap :global(tbody tr:last-child td) {
+		border-bottom: 0;
+	}
+	.empty {
+		padding: 2rem;
+		text-align: center;
+		color: var(--tern-muted);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Column } from './table.js';
+declare function $$render<Row>(): {
+    props: {
+        columns: Column<Row>[];
+        rows: Row[];
+        /** A caption for the table; say what it lists. Hidden visually with hideCaption. */
+        caption: string;
+        hideCaption?: boolean;
+        /** A stable key for each row. */
+        key?: (row: Row) => string | number;
+        /** Shown in place of rows when there are none. */
+        empty?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(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>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<Row> = InstanceType<typeof Table<Row>>;
+export default Table;

package/dist/ui/Textarea.svelte

@@ -3,8 +3,8 @@
 	import { getField } from './field.js';
 
 	type Props = HTMLTextareaAttributes & { value?: unknown };
-	let { value = $bindable(), class: klass = '', rows = 4, ...rest }: Props = $props();
 	const field = getField();
+	let { value = $bindable(field?.value), class: klass = '', rows = 4, ...rest }: Props = $props();
 </script>
 
 <textarea
@@ -15,6 +15,7 @@
 	required={field?.required}
 	disabled={field?.disabled}
 	{rows}
+	name={field?.name}
 	{...rest}
 	bind:value
 ></textarea>

package/dist/ui/Toggle.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLButtonAttributes, 'value'> & {
+		/** Whether it's on; bind it. */
+		pressed?: boolean;
+		variant?: 'secondary' | 'ghost';
+		size?: 'sm' | 'md';
+		/** Posts value (or "on") under this name while pressed. */
+		name?: string;
+		value?: string;
+		/** The label. For an icon alone, set aria-label. */
+		children: Snippet;
+		onchange?: (pressed: boolean) => void;
+	};
+	let { pressed = $bindable(false), variant = 'secondary', size = 'md', name, value = 'on', class: klass = '', children, onchange, ...rest }: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="tern-toggle {variant} {size} {klass}"
+	aria-pressed={pressed}
+	{...rest}
+	onclick={() => {
+		pressed = !pressed;
+		onchange?.(pressed);
+	}}
+>
+	{@render children()}
+</button>
+{#if name && pressed}<input type="hidden" {name} {value} />{/if}
+
+<style>
+	.tern-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		height: var(--tern-control-height);
+		min-width: var(--tern-control-height);
+		padding: 0 0.7rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+		border: 1px solid transparent;
+		border-radius: var(--tern-radius-sm);
+		background: transparent;
+		cursor: pointer;
+		transition:
+			background-color var(--tern-duration),
+			color var(--tern-duration);
+	}
+	.secondary {
+		border-color: var(--tern-border-strong);
+		background: var(--tern-surface);
+	}
+	.sm {
+		height: calc(var(--tern-control-height) - 0.5rem);
+		min-width: calc(var(--tern-control-height) - 0.5rem);
+		padding: 0 0.5rem;
+		font-size: 0.8125rem;
+	}
+	.tern-toggle:hover:not(:disabled) {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.tern-toggle[aria-pressed='true'] {
+		color: var(--tern-fg);
+		background: var(--tern-accent-soft);
+		border-color: color-mix(in oklch, var(--tern-accent) 45%, transparent);
+	}
+	.tern-toggle:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.tern-toggle:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = Omit<HTMLButtonAttributes, 'value'> & {
+    /** Whether it's on; bind it. */
+    pressed?: boolean;
+    variant?: 'secondary' | 'ghost';
+    size?: 'sm' | 'md';
+    /** Posts value (or "on") under this name while pressed. */
+    name?: string;
+    value?: string;
+    /** The label. For an icon alone, set aria-label. */
+    children: Snippet;
+    onchange?: (pressed: boolean) => void;
+};
+declare const Toggle: import("svelte").Component<Props, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/ui/ToggleGroup.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getField } from './field.js';
+
+	type Option = { value: string; label: string; disabled?: boolean; icon?: Snippet };
+	type Props = {
+		options: Option[];
+		/** single: one at a time, like radio buttons; multiple: any number, like checkboxes. */
+		type?: 'single' | 'multiple';
+		/** The chosen value (single) or values (multiple); bind it. */
+		value?: string | string[] | null;
+		/** Labels the group when it isn't in a Field. */
+		label?: string;
+		/** Show only the icons; the labels stay for screen readers. */
+		iconsOnly?: boolean;
+		/** Posts the chosen values under this name. */
+		name?: string;
+		size?: 'sm' | 'md';
+		disabled?: boolean;
+		class?: string;
+		onchange?: (value: string | string[] | null) => void;
+	};
+	const field = getField();
+	let { options, type = 'single', value = $bindable(type === 'multiple' ? [] : null), label, iconsOnly = false, name: nameProp, size = 'md', disabled = false, class: klass = '', onchange }: Props = $props();
+	const name = $derived(nameProp ?? field?.name);
+
+	field?.custom();
+	const buttons: HTMLButtonElement[] = [];
+	const chosen = (v: string) => (Array.isArray(value) ? value.includes(v) : value === v);
+	const enabled = $derived(options.map((o, i) => ({ o, i })).filter(({ o }) => !o.disabled && !disabled));
+	// Roving tabindex: the chosen item, else the first enabled one.
+	const tabStop = $derived(enabled.find(({ o }) => chosen(o.value))?.i ?? enabled[0]?.i ?? -1);
+
+	function pick(v: string) {
+		if (type === 'multiple') {
+			const list = Array.isArray(value) ? value : [];
+			value = list.includes(v) ? list.filter((x) => x !== v) : [...list, v];
+		} else value = value === v ? null : v;
+		onchange?.(value);
+	}
+
+	function onkeydown(e: KeyboardEvent, i: number) {
+		const pos = enabled.findIndex((x) => x.i === i);
+		let next: number | undefined;
+		if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = enabled[(pos + 1) % enabled.length]?.i;
+		else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = enabled[(pos - 1 + enabled.length) % enabled.length]?.i;
+		else if (e.key === 'Home') next = enabled[0]?.i;
+		else if (e.key === 'End') next = enabled[enabled.length - 1]?.i;
+		if (next === undefined) return;
+		e.preventDefault();
+		buttons[next]?.focus();
+		// Like radio buttons, moving selects in single mode.
+		if (type === 'single') {
+			value = options[next]!.value;
+			onchange?.(value);
+		}
+	}
+</script>
+
+<div
+	class="tern-toggle-group {size} {klass}"
+	role={type === 'single' ? 'radiogroup' : 'group'}
+	aria-label={field ? undefined : label}
+	aria-labelledby={field?.labelId}
+	aria-describedby={field?.describedBy}
+>
+	{#each options as option, i (option.value)}
+		<button
+			bind:this={buttons[i]}
+			id={i === tabStop ? field?.id : undefined}
+			type="button"
+			role={type === 'single' ? 'radio' : undefined}
+			aria-checked={type === 'single' ? chosen(option.value) : undefined}
+			aria-pressed={type === 'multiple' ? chosen(option.value) : undefined}
+			aria-label={iconsOnly ? option.label : undefined}
+			title={iconsOnly ? option.label : undefined}
+			tabindex={i === tabStop ? 0 : -1}
+			disabled={option.disabled || disabled || field?.disabled}
+			onclick={() => pick(option.value)}
+			onkeydown={(e) => onkeydown(e, i)}
+		>
+			{#if option.icon}{@render option.icon()}{/if}
+			{#if !iconsOnly}{option.label}{/if}
+		</button>
+	{/each}
+</div>
+{#if name}
+	{#each options.filter((o) => chosen(o.value)) as o (o.value)}<input type="hidden" {name} value={o.value} />{/each}
+{/if}
+
+<style>
+	.tern-toggle-group {
+		display: inline-flex;
+		gap: 0.125rem;
+		padding: 0.2rem;
+		background: var(--tern-surface-2);
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		width: fit-content;
+	}
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		height: calc(var(--tern-control-height) - 0.4rem);
+		min-width: calc(var(--tern-control-height) - 0.4rem);
+		padding: 0 0.7rem;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+		transition:
+			background-color var(--tern-duration),
+			color var(--tern-duration);
+	}
+	.sm button {
+		height: calc(var(--tern-control-height) - 0.8rem);
+		padding: 0 0.5rem;
+		font-size: 0.8125rem;
+	}
+	button:hover:not(:disabled) {
+		color: var(--tern-fg);
+	}
+	button[aria-checked='true'],
+	button[aria-pressed='true'] {
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		box-shadow: var(--tern-shadow);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	button:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type Option = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: Snippet;
+};
+type Props = {
+    options: Option[];
+    /** single: one at a time, like radio buttons; multiple: any number, like checkboxes. */
+    type?: 'single' | 'multiple';
+    /** The chosen value (single) or values (multiple); bind it. */
+    value?: string | string[] | null;
+    /** Labels the group when it isn't in a Field. */
+    label?: string;
+    /** Show only the icons; the labels stay for screen readers. */
+    iconsOnly?: boolean;
+    /** Posts the chosen values under this name. */
+    name?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string | string[] | null) => void;
+};
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/ui/Tooltip.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { float, type Side } from './floating.js';
 
 	type Props = {
 		/** The tooltip's text. It describes the trigger; don't put anything interactive in it. */
 		text: string;
-		side?: 'top' | 'bottom';
+		side?: Side;
 		/** How long to wait before showing, in milliseconds. */
 		delay?: number;
 		/** The trigger, which must be focusable, such as a Button. It receives aria-describedby through the snippet's props. */
@@ -13,6 +14,8 @@
 	let { text, side = 'top', delay = 300, children }: Props = $props();
 	const uid = $props.id();
 	let open = $state(false);
+	let wrap = $state<HTMLSpanElement>();
+	let tip = $state<HTMLSpanElement>();
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
 	const show = (now = false) => {
@@ -24,10 +27,21 @@
 		clearTimeout(timer);
 		open = false;
 	};
+
+	$effect(() => {
+		if (!open || !tip || !wrap) return;
+		tip.showPopover?.();
+		const stop = float(tip, wrap.firstElementChild ?? wrap, { side, align: 'center', offset: 6 });
+		return () => {
+			stop();
+			tip?.hidePopover?.();
+		};
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
+	bind:this={wrap}
 	class="tern-tooltip"
 	onpointerenter={() => show()}
 	onpointerleave={hide}
@@ -36,42 +50,36 @@
 	onkeydown={(e) => e.key === 'Escape' && hide()}
 >
 	{@render children({ 'aria-describedby': `tern-tooltip-${uid}` })}
-	<span role="tooltip" id="tern-tooltip-{uid}" class="tip {side}" class:open>{text}</span>
+	<span bind:this={tip} role="tooltip" id="tern-tooltip-{uid}" class="tip" class:open popover="manual">{text}</span>
 </span>
 
 <style>
 	.tern-tooltip {
-		position: relative;
 		display: inline-flex;
 	}
 	.tip {
-		position: absolute;
-		left: 50%;
-		z-index: 60;
 		width: max-content;
 		max-width: 16rem;
 		padding: 0.35rem 0.55rem;
+		border: 0;
 		border-radius: var(--tern-radius-sm);
 		background: var(--tern-fg);
 		color: var(--tern-bg);
 		font-size: 0.75rem;
 		line-height: 1.35;
 		pointer-events: none;
-		opacity: 0;
-		visibility: hidden;
-		translate: -50% 0;
-		transition:
-			opacity var(--tern-duration),
-			visibility var(--tern-duration);
 	}
-	.top {
-		bottom: calc(100% + 0.4rem);
+	.tip.open {
+		animation: tern-tip-in var(--tern-duration) ease-out;
 	}
-	.bottom {
-		top: calc(100% + 0.4rem);
+	@keyframes tern-tip-in {
+		from {
+			opacity: 0;
+		}
 	}
-	.open {
-		opacity: 1;
-		visibility: visible;
+	@media (prefers-reduced-motion: reduce) {
+		.tip.open {
+			animation: none;
+		}
 	}
 </style>

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
+import { type Side } from './floating.js';
 type Props = {
     /** The tooltip's text. It describes the trigger; don't put anything interactive in it. */
     text: string;
-    side?: 'top' | 'bottom';
+    side?: Side;
     /** How long to wait before showing, in milliseconds. */
     delay?: number;
     /** The trigger, which must be focusable, such as a Button. It receives aria-describedby through the snippet's props. */

package/dist/ui/chart.d.ts

@@ -0,0 +1,26 @@
+export type XValue = number | string | Date;
+export type Series<Row> = {
+    /** The field holding this series' numbers. */
+    key: keyof Row & string;
+    label: string;
+};
+/** The series colors, in their fixed order. A ninth series folds into "Other". */
+export declare const seriesColor: (i: number) => string;
+/** Turns x values into numbers for time and number axes, or null for categories. */
+export declare function numericX(values: XValue[]): number[] | null;
+export declare const isTime: (values: XValue[]) => boolean;
+/** Round ticks covering [min, max], about count of them. */
+export declare function niceTicks(min: number, max: number, count?: number): number[];
+/** 1,284 in full under 10,000; 12K, 4.2M above. */
+export declare function formatNumber(n: number, compact?: boolean): string;
+/** Evenly spaced time ticks with a format that fits their spacing. */
+export declare function timeTicks(min: number, max: number, count?: number): {
+    ticks: number[];
+    format: (t: number) => string;
+};
+/** A readable label for an x value in tooltips and tables. */
+export declare function formatX(v: XValue, time: boolean): string;
+/** An estimate of how wide a label is, for margins; the charts' text is 12px. */
+export declare const textWidth: (s: string) => number;
+/** Array.prototype.findLastIndex, for older targets. */
+export declare function lastIndex<T>(a: T[], ok: (v: T) => boolean): number;

package/dist/ui/chart.js

@@ -0,0 +1,89 @@
+// Scales, ticks and formatting shared by the charts.
+/** The series colors, in their fixed order. A ninth series folds into "Other". */
+export const seriesColor = (i) => `var(--tern-chart-${(i % 8) + 1})`;
+const isoDate = /^\d{4}-\d{2}-\d{2}([T ][\d:.]+(Z|[+-]\d{2}:?\d{2})?)?$/;
+/** Turns x values into numbers for time and number axes, or null for categories. */
+export function numericX(values) {
+    if (values.every((v) => typeof v === 'number'))
+        return values;
+    if (values.every((v) => v instanceof Date))
+        return values.map((d) => d.getTime());
+    if (values.every((v) => typeof v === 'string' && isoDate.test(v)))
+        return values.map((s) => Date.parse(s.length === 10 ? s + 'T00:00:00Z' : s));
+    return null;
+}
+export const isTime = (values) => values.length > 0 && !values.every((v) => typeof v === 'number') && numericX(values) !== null;
+/** Round ticks covering [min, max], about count of them. */
+export function niceTicks(min, max, count = 5) {
+    if (min === max) {
+        if (min === 0)
+            return [0, 1];
+        [min, max] = min > 0 ? [0, min] : [min, 0];
+    }
+    const span = max - min;
+    const raw = span / Math.max(1, count);
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => span / s <= count) ?? 10 * mag;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const out = [];
+    for (let v = start; v <= end + step / 2; v += step)
+        out.push(Number(v.toFixed(10)));
+    return out;
+}
+/** 1,284 in full under 10,000; 12K, 4.2M above. */
+export function formatNumber(n, compact = Math.abs(n) >= 10_000) {
+    return new Intl.NumberFormat(undefined, compact ? { notation: 'compact', maximumFractionDigits: 1 } : { maximumFractionDigits: 2 }).format(n);
+}
+const DAY = 86_400_000;
+/** Evenly spaced time ticks with a format that fits their spacing. */
+export function timeTicks(min, max, count = 6) {
+    const span = max - min;
+    const fmt = (o) => {
+        const f = new Intl.DateTimeFormat(undefined, { timeZone: 'UTC', ...o });
+        return (t) => f.format(new Date(t));
+    };
+    if (span <= 2 * DAY) {
+        const step = [1, 2, 3, 6, 12].map((h) => h * 3_600_000).find((s) => span / s <= count) ?? 24 * 3_600_000;
+        return { ticks: stepTicks(min, max, step), format: fmt({ hour: '2-digit', minute: '2-digit' }) };
+    }
+    if (span <= 120 * DAY) {
+        const step = [1, 2, 7, 14].map((d) => d * DAY).find((s) => span / s <= count) ?? 28 * DAY;
+        return { ticks: stepTicks(min, max, step), format: fmt({ month: 'short', day: 'numeric' }) };
+    }
+    const months = [];
+    const d = new Date(min);
+    d.setUTCDate(1);
+    d.setUTCHours(0, 0, 0, 0);
+    const every = Math.max(1, Math.ceil(span / (30 * DAY) / count));
+    while (d.getTime() <= max) {
+        if (d.getTime() >= min)
+            months.push(d.getTime());
+        d.setUTCMonth(d.getUTCMonth() + every);
+    }
+    return { ticks: months, format: fmt(span > 400 * DAY ? { month: 'short', year: 'numeric' } : { month: 'short' }) };
+}
+function stepTicks(min, max, step) {
+    const out = [];
+    for (let t = Math.ceil(min / step) * step; t <= max; t += step)
+        out.push(t);
+    return out;
+}
+/** A readable label for an x value in tooltips and tables. */
+export function formatX(v, time) {
+    if (!time)
+        return v instanceof Date ? v.toISOString() : String(v);
+    const t = v instanceof Date ? v.getTime() : typeof v === 'number' ? v : Date.parse(v.length === 10 ? v + 'T00:00:00Z' : v);
+    const d = new Date(t);
+    const hasTime = d.getUTCHours() || d.getUTCMinutes();
+    return new Intl.DateTimeFormat(undefined, { timeZone: 'UTC', dateStyle: 'medium', ...(hasTime ? { timeStyle: 'short' } : {}) }).format(d);
+}
+/** An estimate of how wide a label is, for margins; the charts' text is 12px. */
+export const textWidth = (s) => s.length * 6.6;
+/** Array.prototype.findLastIndex, for older targets. */
+export function lastIndex(a, ok) {
+    for (let i = a.length - 1; i >= 0; i--)
+        if (ok(a[i]))
+            return i;
+    return -1;
+}

package/dist/ui/dates.d.ts

@@ -0,0 +1,13 @@
+export type ISODate = string;
+export declare function parse(iso: ISODate): Date;
+export declare function iso(d: Date): ISODate;
+export declare function today(): ISODate;
+export declare function addDays(date: ISODate, n: number): ISODate;
+/** Adds months, keeping the day where the month has it, else its last day. */
+export declare function addMonths(date: ISODate, n: number): ISODate;
+export declare function startOfMonth(date: ISODate): ISODate;
+/** The weeks shown for date's month, each 7 ISO dates, starting on weekStart (0 = Sunday). */
+export declare function monthGrid(date: ISODate, weekStart: number): ISODate[][];
+/** The first day of the week for a locale, from Intl where the browser knows it. */
+export declare function localeWeekStart(locale?: string): number;
+export declare function format(date: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;