@ruckc/truss-ui 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,76 @@
+import { type Snippet } from 'svelte';
+import type { Column, ColumnFilters, SortState } from '../types.js';
+declare function $$render<T extends Record<string, any>>(): {
+    props: {
+        columns: Column<T>[];
+        rows: T[];
+        rowKey: (row: T) => string;
+        /** Provide to render a tree-grid; first column gets indentation + expander. */
+        getChildren?: (row: T) => T[] | undefined;
+        /** Custom cell renderer, e.g. status badges. Fall back to the raw value. */
+        cell?: Snippet<[row: T, column: Column<T>]>;
+        /** Active (highlighted) row id. */
+        selected?: string;
+        /** Show checkbox column; `checked` holds the checked row ids. */
+        selectable?: boolean;
+        checked?: string[];
+        /** Show a column visibility menu. */
+        columnMenu?: boolean;
+        toolbar?: Snippet;
+        caption: string;
+        maxHeight?: string;
+        /** Page the rows with a floating pager. Turn off for one continuous (optionally virtual) list. */
+        pagination?: boolean;
+        pageSize?: number;
+        /** Render only the rows in view (fixed `rowHeight`). Needs a bounded `maxHeight`. Use with `pagination={false}`. */
+        virtual?: boolean;
+        /** px; every row is exactly this tall when `virtual`. */
+        rowHeight?: number;
+        /** Extra rows rendered above/below the viewport. */
+        overscan?: number;
+        /** Infinite scroll: more rows exist beyond `rows`. */
+        hasMore?: boolean;
+        /** Infinite scroll: a fetch is in flight (shows a spinner row). */
+        loading?: boolean;
+        /** Request more when within this many rows of the bottom. */
+        loadThreshold?: number;
+        /** Called near the end of the list. Append to `rows` (or flip `hasMore` off); it is not called again until `rows.length` changes. */
+        onloadmore?: () => void | Promise<void>;
+        /** Show a filter row; columns opt in with `filter`. */
+        /**
+         * Column filtering UI (columns opt in with `filter`): `'row'` (or `true`) adds a filter row under the header;
+         * `'menu'` has no row — filters live in each column heading's menu (funnel button, right-click, or Shift+F10);
+         * `'both'` offers both. `false` turns filtering off.
+         */
+        filterable?: boolean | "row" | "menu" | "both";
+        /** Active filters by column key: text → string, select → string[], number → { min, max }. */
+        filters?: ColumnFilters;
+        sort?: SortState;
+        /** Your data source filters and sorts: the table only reports `filters`/`sort` (bind them) and shows `rows` as-is. */
+        remote?: boolean;
+        /** ms to debounce typed filters (default 120 client, 300 remote). */
+        filterDelay?: number;
+        empty?: string;
+    };
+    exports: {};
+    bindings: "checked" | "sort" | "selected" | "filters";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "checked" | "sort" | "selected" | "filters";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T extends Record<string, any>> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Calendar from './Calendar.svelte';
+	import Popover from './Popover.svelte';
+	import { parseDateInput } from '../date.js';
+
+	let {
+		value = $bindable(),
+		label,
+		ariaLabel,
+		min,
+		max,
+		placeholder = 'YYYY-MM-DD',
+		disabled = false,
+		error,
+		weekStart = 0,
+		locale = 'en-US'
+	}: {
+		value?: string;
+		label?: string;
+		ariaLabel?: string;
+		min?: string;
+		max?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		error?: string;
+		weekStart?: number;
+		locale?: string;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let text = $state('');
+	let bad = $state(false);
+	let input: HTMLInputElement;
+
+	$effect(() => { text = value ?? ''; bad = false; });
+
+	function commit() {
+		const t = text.trim();
+		if (!t) { value = undefined; bad = false; return; }
+		const iso = parseDateInput(t);
+		if (!iso || (min && iso < min) || (max && iso > max)) { bad = true; return; }
+		bad = false;
+		value = iso;
+		text = iso;
+	}
+	const invalid = $derived(!!error || bad);
+	const msg = $derived(error?.trim() || (bad ? `Enter a date as YYYY-MM-DD${min && max ? `, ${min} to ${max}` : min ? `, on or after ${min}` : max ? `, on or before ${max}` : ''}` : undefined));
+</script>
+
+<div class="tr-field">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="tr-anchor">
+		<div class="tr-control" data-trail="true" data-invalid={invalid} data-disabled={disabled}>
+			<input
+				class="tr-bare" {id} bind:this={input} bind:value={text} {placeholder} {disabled}
+				autocomplete="off" inputmode="numeric" aria-haspopup="dialog" aria-expanded={open}
+				aria-label={label ? undefined : ariaLabel} aria-invalid={invalid || undefined} aria-describedby={msg ? `${id}-msg` : undefined}
+				onblur={commit}
+				onkeydown={(e) => { if (e.key === 'Enter') commit(); else if (e.key === 'ArrowDown' && e.altKey) open = true; }}
+			/>
+			<Button variant="minimal" intent="neutral" size="sm" icon="calendar" aria-label="Choose date" {disabled} onclick={() => (open = !open)} />
+		</div>
+		<Popover bind:open onclose={(r) => r && input.focus()}>
+			<Calendar bind:value {min} {max} {weekStart} {locale} onpick={() => { open = false; input.focus(); }} />
+		</Popover>
+	</div>
+	{#if msg}<div class="tr-hint" id="{id}-msg" data-error="true">{msg}</div>{/if}
+</div>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    value?: string;
+    label?: string;
+    ariaLabel?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    weekStart?: number;
+    locale?: string;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DateRangePicker.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Calendar from './Calendar.svelte';
+	import Popover from './Popover.svelte';
+	import Icon from '../icons/Icon.svelte';
+	import { addDays, parseDateInput, parseISO, toISO } from '../date.js';
+	import type { DateRange } from '../types.js';
+
+	let {
+		value = $bindable({}),
+		label,
+		min,
+		max,
+		presets = true,
+		disabled = false,
+		error,
+		weekStart = 0,
+		locale = 'en-US'
+	}: {
+		value?: DateRange;
+		label?: string;
+		min?: string;
+		max?: string;
+		presets?: boolean;
+		disabled?: boolean;
+		error?: string;
+		weekStart?: number;
+		locale?: string;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let a = $state('');
+	let b = $state('');
+	let bad = $state(false);
+	let startInput: HTMLInputElement;
+
+	$effect(() => { a = value.start ?? ''; b = value.end ?? ''; bad = false; });
+
+	function commit() {
+		const s = a.trim() ? parseDateInput(a) : undefined;
+		const e = b.trim() ? parseDateInput(b) : undefined;
+		const invalid = (a.trim() && !s) || (b.trim() && !e) || (s && e && s > e) || [s, e].some((x) => x && ((min && x < min) || (max && x > max)));
+		bad = !!invalid;
+		if (!invalid) value = { start: s ?? undefined, end: e ?? undefined };
+	}
+
+	const now = new Date();
+	const iso = (d: Date) => toISO(d);
+	const list = [
+		{ label: 'Today', r: () => ({ start: iso(now), end: iso(now) }) },
+		{ label: 'Last 7 days', r: () => ({ start: iso(addDays(now, -6)), end: iso(now) }) },
+		{ label: 'Last 30 days', r: () => ({ start: iso(addDays(now, -29)), end: iso(now) }) },
+		{ label: 'This month', r: () => ({ start: iso(new Date(now.getFullYear(), now.getMonth(), 1)), end: iso(new Date(now.getFullYear(), now.getMonth() + 1, 0)) }) },
+		{ label: 'Last month', r: () => ({ start: iso(new Date(now.getFullYear(), now.getMonth() - 1, 1)), end: iso(new Date(now.getFullYear(), now.getMonth(), 0)) }) }
+	];
+	const msg = $derived(error ?? (bad ? 'Enter a valid range (start ≤ end) as YYYY-MM-DD' : undefined));
+	void parseISO;
+</script>
+
+<div class="tr-field">
+	{#if label}<span class="tr-label" id="{id}-label">{label}</span>{/if}
+	<div class="tr-anchor">
+		<div class="tr-control" data-trail="true" data-invalid={!!msg} data-disabled={disabled} role="group" aria-labelledby={label ? `${id}-label` : undefined}>
+			<input class="tr-bare" bind:this={startInput} bind:value={a} placeholder="Start" aria-label="Start date" {disabled} autocomplete="off" onblur={commit} onkeydown={(e) => e.key === 'Enter' && commit()} />
+			<Icon name="chevron-right" />
+			<input class="tr-bare" bind:value={b} placeholder="End" aria-label="End date" {disabled} autocomplete="off" onblur={commit} onkeydown={(e) => e.key === 'Enter' && commit()} />
+			<Button variant="minimal" intent="neutral" size="sm" icon="calendar" aria-label="Choose date range" {disabled} onclick={() => (open = !open)} />
+		</div>
+		<Popover bind:open onclose={(r) => r && startInput.focus()}>
+			<div class="panel">
+				{#if presets}
+					<ul class="presets" aria-label="Presets">
+						{#each list as p}
+							<li><button type="button" onclick={() => { value = p.r(); open = false; }}>{p.label}</button></li>
+						{/each}
+					</ul>
+				{/if}
+				<Calendar mode="range" bind:range={value} {min} {max} {weekStart} {locale} onpick={() => (open = false)} />
+			</div>
+		</Popover>
+	</div>
+	{#if msg}<div class="tr-hint" data-error="true">{msg}</div>{/if}
+</div>
+
+<style>
+	.panel { display: flex; }
+	.presets { list-style: none; margin: 0; padding: 8px 4px 8px 8px; border-right: 1px solid var(--tr-outline-variant); }
+	.presets button { display: block; width: 100%; height: var(--tr-control-h); padding: 0 10px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
+	.presets button:hover { background: var(--tr-surface-container-highest); }
+	.presets button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+</style>

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

@@ -0,0 +1,15 @@
+import type { DateRange } from '../types.js';
+type $$ComponentProps = {
+    value?: DateRange;
+    label?: string;
+    min?: string;
+    max?: string;
+    presets?: boolean;
+    disabled?: boolean;
+    error?: string;
+    weekStart?: number;
+    locale?: string;
+};
+declare const DateRangePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/DateTimePicker.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import DatePicker from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+
+	let {
+		value = $bindable(),
+		label,
+		ariaLabelPrefix,
+		min,
+		max,
+		hour12 = false,
+		step = 5,
+		disabled = false,
+		error,
+		weekStart = 0,
+		locale = 'en-US'
+	}: {
+		/** Local date-time "YYYY-MM-DDTHH:MM". */
+		value?: string;
+		label?: string;
+		/** Accessible name prefix for the inner date/time fields (defaults to `label`). */
+		ariaLabelPrefix?: string;
+		/** Date bounds "YYYY-MM-DD". */
+		min?: string;
+		max?: string;
+		hour12?: boolean;
+		step?: number;
+		disabled?: boolean;
+		error?: string;
+		weekStart?: number;
+		locale?: string;
+	} = $props();
+
+	const id = $props.id();
+	const prefix = $derived(ariaLabelPrefix ?? label ?? 'Date and time');
+	const date = $derived(value?.slice(0, 10));
+	const time = $derived(value?.slice(11, 16) || undefined);
+	let pendingTime = $state<string>();
+
+	function setDate(d?: string) {
+		if (!d) { value = undefined; return; }
+		value = `${d}T${time ?? pendingTime ?? '00:00'}`;
+		pendingTime = undefined;
+	}
+	function setTime(t?: string) {
+		if (date) value = `${date}T${t ?? '00:00'}`;
+		else pendingTime = t;
+	}
+</script>
+
+<div class="tr-field">
+	{#if label}<span class="tr-label" id="{id}-label">{label}</span>{/if}
+	<div class="dt" role="group" aria-labelledby={label ? `${id}-label` : undefined}>
+		<DatePicker ariaLabel="{prefix}: date" {min} {max} {disabled} {weekStart} {locale} error={error ? ' ' : undefined} bind:value={() => date, setDate} />
+		<TimePicker ariaLabel="{prefix}: time" {hour12} {step} {disabled} error={error ? ' ' : undefined} bind:value={() => time ?? pendingTime, setTime} />
+	</div>
+	{#if error}<div class="tr-hint" data-error="true">{error}</div>{/if}
+</div>
+
+<style>
+	.dt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; align-items: start; }
+</style>

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

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    /** Local date-time "YYYY-MM-DDTHH:MM". */
+    value?: string;
+    label?: string;
+    /** Accessible name prefix for the inner date/time fields (defaults to `label`). */
+    ariaLabelPrefix?: string;
+    /** Date bounds "YYYY-MM-DD". */
+    min?: string;
+    max?: string;
+    hour12?: boolean;
+    step?: number;
+    disabled?: boolean;
+    error?: string;
+    weekStart?: number;
+    locale?: string;
+};
+declare const DateTimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/components/DateTimeRangePicker.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Calendar from './Calendar.svelte';
+	import Popover from './Popover.svelte';
+	import TimeList from './TimeList.svelte';
+	import Icon from '../icons/Icon.svelte';
+	import { addDays, joinDateTime, pad, parseDateInput, splitDateTime, toISO } from '../date.js';
+	import { formatTime, parseTime } from '../time.js';
+	import type { DateRange } from '../types.js';
+
+	let {
+		value = $bindable({}),
+		label,
+		min,
+		max,
+		presets = true,
+		hour12 = false,
+		step = 5,
+		disabled = false,
+		error,
+		weekStart = 0,
+		locale = 'en-US'
+	}: {
+		/** Local date-times "YYYY-MM-DDTHH:MM". */
+		value?: { start?: string; end?: string };
+		label?: string;
+		/** Date bounds "YYYY-MM-DD". */
+		min?: string;
+		max?: string;
+		/** Quick ranges (last hour, today, last 7 days…) in the popover. */
+		presets?: boolean;
+		hour12?: boolean;
+		step?: number;
+		disabled?: boolean;
+		error?: string;
+		weekStart?: number;
+		locale?: string;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let a = $state('');
+	let b = $state('');
+	let bad = $state(false);
+	let startInput: HTMLInputElement;
+
+	// staged edits inside the popover; committed with Apply
+	let ds = $state<string>(), de = $state<string>(), ts = $state<string>(), te = $state<string>();
+
+	const fmt = (v?: string) => {
+		if (!v) return '';
+		const { date, time } = splitDateTime(v);
+		return time ? `${date} ${formatTime(time, hour12)}` : (date ?? '');
+	};
+	$effect(() => { a = fmt(value.start); b = fmt(value.end); bad = false; });
+
+	/** "2026-03-01 14:30", "2026-03-01T14:30", "2026-03-01 2:30 pm", or a bare date. */
+	function parseDT(text: string, fallbackTime: string): string | null {
+		const t = text.trim();
+		if (!t) return null;
+		const m = /^(\S+?)(?:[ T]+(.+))?$/.exec(t);
+		if (!m) return null;
+		const d = parseDateInput(m[1]);
+		const tm = m[2] ? parseTime(m[2]) : fallbackTime;
+		return d && tm ? joinDateTime(d, tm) : null;
+	}
+	const outOfBounds = (v: string) => (!!min && v.slice(0, 10) < min) || (!!max && v.slice(0, 10) > max);
+
+	function commitText() {
+		const s = a.trim() ? parseDT(a, '00:00') : undefined;
+		const e = b.trim() ? parseDT(b, '23:59') : undefined;
+		const invalid = (a.trim() && !s) || (b.trim() && !e) || (s && e && e <= s) || [s, e].some((x) => x && outOfBounds(x));
+		bad = !!invalid;
+		if (!invalid) value = { start: s ?? undefined, end: e ?? undefined };
+	}
+
+	function openPopover() {
+		({ date: ds, time: ts } = splitDateTime(value.start));
+		({ date: de, time: te } = splitDateTime(value.end));
+		open = true;
+	}
+	const toggle = () => (open ? (open = false) : openPopover());
+
+	const draftStart = $derived(ds && ts ? joinDateTime(ds, ts) : undefined);
+	const draftEnd = $derived(de && te ? joinDateTime(de, te) : undefined);
+	const draftBad = $derived(!!draftStart && !!draftEnd && draftEnd <= draftStart);
+	const canApply = $derived(!!draftStart && !!draftEnd && !draftBad);
+
+	function onRange(r: DateRange) {
+		ds = r.start; de = r.end;
+		if (r.start && !ts) ts = '00:00';
+		if (r.end && !te) te = '23:59';
+	}
+	function apply() {
+		if (!canApply) return;
+		value = { start: draftStart, end: draftEnd };
+		open = false;
+		startInput?.focus();
+	}
+
+	const now = () => new Date();
+	const dt = (d: Date) => `${toISO(d)}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	const list = [
+		{ label: 'Last hour', r: () => { const n = now(); return { start: dt(new Date(n.getTime() - 3600e3)), end: dt(n) }; } },
+		{ label: 'Last 24 hours', r: () => { const n = now(); return { start: dt(new Date(n.getTime() - 86400e3)), end: dt(n) }; } },
+		{ label: 'Today', r: () => ({ start: `${toISO(now())}T00:00`, end: `${toISO(now())}T23:59` }) },
+		{ label: 'Yesterday', r: () => { const y = toISO(addDays(now(), -1)); return { start: `${y}T00:00`, end: `${y}T23:59` }; } },
+		{ label: 'Last 7 days', r: () => ({ start: `${toISO(addDays(now(), -6))}T00:00`, end: `${toISO(now())}T23:59` }) },
+		{ label: 'Last 30 days', r: () => ({ start: `${toISO(addDays(now(), -29))}T00:00`, end: `${toISO(now())}T23:59` }) }
+	];
+	const msg = $derived(error?.trim() || (bad ? 'Enter a valid range (end after start), e.g. 2026-03-01 09:00' : undefined));
+	const invalid = $derived(!!error || bad);
+</script>
+
+<div class="tr-field">
+	{#if label}<span class="tr-label" id="{id}-label">{label}</span>{/if}
+	<div class="tr-anchor">
+		<div class="tr-control" data-trail="true" data-invalid={invalid} data-disabled={disabled} role="group" aria-labelledby={label ? `${id}-label` : undefined}>
+			<input class="tr-bare" bind:this={startInput} bind:value={a} placeholder={hour12 ? 'Start  YYYY-MM-DD h:mm AM' : 'Start  YYYY-MM-DD HH:MM'} aria-label="Start date and time" {disabled} autocomplete="off" aria-invalid={invalid || undefined}
+				onblur={commitText} onkeydown={(e) => e.key === 'Enter' && commitText()} />
+			<Icon name="chevron-right" />
+			<input class="tr-bare" bind:value={b} placeholder={hour12 ? 'End  YYYY-MM-DD h:mm AM' : 'End  YYYY-MM-DD HH:MM'} aria-label="End date and time" {disabled} autocomplete="off" aria-invalid={invalid || undefined}
+				onblur={commitText} onkeydown={(e) => e.key === 'Enter' && commitText()} />
+			<Button variant="minimal" intent="neutral" size="sm" icon="calendar" aria-label="Choose date and time range" aria-haspopup="dialog" aria-expanded={open} {disabled} onclick={toggle} />
+		</div>
+		<Popover bind:open onclose={(r) => r && startInput.focus()}>
+			<div class="panel" role="dialog" aria-label="Choose date and time range">
+				<div class="main">
+					{#if presets}
+						<ul class="presets" aria-label="Presets">
+							{#each list as p}
+								<li><button type="button" onclick={() => { value = p.r(); open = false; }}>{p.label}</button></li>
+							{/each}
+						</ul>
+					{/if}
+					<Calendar mode="range" range={{ start: ds, end: de }} onrange={onRange} {min} {max} {weekStart} {locale} />
+					<div class="times">
+						<div class="tcol"><div class="th">Start time</div><TimeList bind:value={ts} {hour12} {step} label="Start time" /></div>
+						<div class="tcol"><div class="th">End time</div><TimeList bind:value={te} {hour12} {step} label="End time" /></div>
+					</div>
+				</div>
+				<div class="foot">
+					<span class="sum" data-bad={draftBad}>
+						{#if draftBad}End must be after start{:else if draftStart || draftEnd}{fmt(draftStart) || '…'} → {fmt(draftEnd) || '…'}{:else}Pick a start and end date{/if}
+					</span>
+					<Button variant="minimal" intent="neutral" size="sm" onclick={() => (open = false)}>Cancel</Button>
+					<Button size="sm" disabled={!canApply} onclick={apply}>Apply</Button>
+				</div>
+			</div>
+		</Popover>
+	</div>
+	{#if msg}<div class="tr-hint" data-error="true">{msg}</div>{/if}
+</div>
+
+<style>
+	.panel { display: flex; flex-direction: column; }
+	.main { display: flex; }
+	.presets { list-style: none; margin: 0; padding: 8px 4px 8px 8px; border-right: 1px solid var(--tr-outline-variant); }
+	.presets button { display: block; width: 100%; height: var(--tr-control-h); padding: 0 10px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
+	.presets button:hover { background: var(--tr-surface-container-highest); }
+	.presets button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.times { display: flex; gap: 10px; padding: 8px 10px 8px 4px; border-left: 1px solid var(--tr-outline-variant); }
+	.th { margin-bottom: 4px; font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
+	.foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--tr-outline-variant); }
+	.sum { flex: 1; font: var(--tr-text-sm) var(--tr-font-mono); color: var(--tr-on-surface-variant); }
+	.sum[data-bad='true'] { color: var(--tr-danger); font-family: var(--tr-font-sans); font-weight: 600; }
+</style>

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

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    /** Local date-times "YYYY-MM-DDTHH:MM". */
+    value?: {
+        start?: string;
+        end?: string;
+    };
+    label?: string;
+    /** Date bounds "YYYY-MM-DD". */
+    min?: string;
+    max?: string;
+    /** Quick ranges (last hour, today, last 7 days…) in the popover. */
+    presets?: boolean;
+    hour12?: boolean;
+    step?: number;
+    disabled?: boolean;
+    error?: string;
+    weekStart?: number;
+    locale?: string;
+};
+declare const DateTimeRangePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimeRangePicker = ReturnType<typeof DateTimeRangePicker>;
+export default DateTimeRangePicker;

package/dist/components/Dialog.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		alert = false,
+		size = 'md',
+		children,
+		footer,
+		onclose
+	}: {
+		open?: boolean;
+		title: string;
+		/** Use role=alertdialog (confirmations that need a response). */
+		alert?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+		footer?: Snippet;
+		onclose?: () => void;
+	} = $props();
+
+	let el: HTMLDialogElement;
+	const uid = $props.id();
+
+	$effect(() => {
+		if (open && !el.open) el.showModal();
+		else if (!open && el.open) el.close();
+	});
+</script>
+
+<dialog
+	bind:this={el}
+	class="tr-dialog"
+	role={alert ? 'alertdialog' : undefined}
+	data-size={size}
+	aria-labelledby="{uid}-title"
+	onclose={() => { open = false; onclose?.(); }}
+	onclick={(e) => e.target === el && (open = false)}
+>
+	<div class="frame">
+		<header>
+			<h2 id="{uid}-title">{title}</h2>
+			<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Close dialog" onclick={() => (open = false)} />
+		</header>
+		<div class="body">{@render children()}</div>
+		{#if footer}<footer>{@render footer()}</footer>{/if}
+	</div>
+</dialog>
+
+<style>
+	.tr-dialog {
+		width: min(var(--w, 480px), calc(100vw - 32px)); max-height: calc(100vh - 64px);
+		padding: 0; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-lg);
+		background: var(--tr-surface-container-low); color: var(--tr-on-surface);
+		box-shadow: var(--tr-elevation-4); overflow: hidden;
+	}
+	.tr-dialog[data-size='sm'] { --w: 360px; }
+	.tr-dialog[data-size='lg'] { --w: 720px; }
+	.tr-dialog[open] { animation: pop var(--tr-dur) var(--tr-ease); }
+	.tr-dialog::backdrop { background: var(--tr-scrim); backdrop-filter: blur(4px); }
+	.frame { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
+	/* Blueprint-style hard divisions between header / body / footer */
+	header { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 8px 0 16px; background: var(--tr-surface-container); border-bottom: 1px solid var(--tr-outline-variant); }
+	h2 { margin: 0; font-size: var(--tr-text-lg); font-weight: 600; }
+	.body { padding: 16px; overflow: auto; }
+	footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: var(--tr-surface-container); border-top: 1px solid var(--tr-outline-variant); }
+	@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    /** Use role=alertdialog (confirmations that need a response). */
+    alert?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Divider.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { vertical = false, children }: { vertical?: boolean; children?: Snippet } = $props();
+</script>
+
+<div class="dv" role="separator" aria-orientation={vertical ? 'vertical' : 'horizontal'} data-vertical={vertical} data-label={!!children}>
+	{#if children}<span>{@render children()}</span>{/if}
+</div>
+
+<style>
+	.dv { display: flex; align-items: center; gap: 10px; color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
+	.dv::before, .dv::after { content: ''; flex: 1; height: 1px; background: var(--tr-outline-variant); }
+	.dv:not([data-label='true'])::after { display: none; }
+	.dv[data-vertical='true'] { display: inline-block; align-self: stretch; width: 1px; min-height: 1em; margin: 0 6px; background: var(--tr-outline-variant); }
+	.dv[data-vertical='true']::before, .dv[data-vertical='true']::after { display: none; }
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    vertical?: boolean;
+    children?: Snippet;
+};
+declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;