@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/TimePicker.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Popover from './Popover.svelte';
+	import TimeList from './TimeList.svelte';
+	import { pad } from '../date.js';
+	import { formatTime, parseTime } from '../time.js';
+
+	let {
+		value = $bindable(),
+		label,
+		ariaLabel,
+		hour12 = false,
+		step = 5,
+		disabled = false,
+		error,
+		placeholder
+	}: {
+		/** 24h "HH:MM" */
+		value?: string;
+		label?: string;
+		ariaLabel?: string;
+		hour12?: boolean;
+		/** Minute increment shown in the list (typed entry accepts any minute). */
+		step?: number;
+		disabled?: boolean;
+		error?: string;
+		placeholder?: string;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let text = $state('');
+	let bad = $state(false);
+	let input: HTMLInputElement;
+
+	$effect(() => { text = value ? formatTime(value, hour12) : ''; bad = false; });
+
+	function commit() {
+		const t = text.trim();
+		if (!t) { value = undefined; bad = false; return; }
+		const v = parseTime(t);
+		bad = !v;
+		if (v) { value = v; text = formatTime(v, hour12); }
+	}
+
+	function nowTime() { const d = new Date(); value = `${pad(d.getHours())}:${pad(d.getMinutes())}`; }
+	const invalid = $derived(!!error || bad);
+	const msg = $derived(error?.trim() || (bad ? 'Enter a time like 14:30 or 2:30 pm' : 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} {disabled} autocomplete="off"
+				placeholder={placeholder ?? (hour12 ? 'h:mm AM' : 'HH:MM')} aria-haspopup="dialog" aria-expanded={open}
+				aria-label={label ? undefined : ariaLabel} aria-invalid={invalid || 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="clock" aria-label="Choose time" {disabled} onclick={() => (open = !open)} />
+		</div>
+		<Popover bind:open onclose={(r) => r && input.focus()}>
+			<div class="panel">
+				<TimeList bind:value {hour12} {step} label={ariaLabel ?? label ?? 'Time'} />
+				<div class="foot">
+					<Button variant="minimal" size="sm" onclick={nowTime}>Now</Button>
+					<Button variant="tonal" size="sm" onclick={() => { open = false; input.focus(); }}>Done</Button>
+				</div>
+			</div>
+		</Popover>
+	</div>
+	{#if msg}<div class="tr-hint" data-error="true">{msg}</div>{/if}
+</div>
+
+<style>
+	.panel { padding: 8px; }
+	.foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--tr-outline-variant); }
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    /** 24h "HH:MM" */
+    value?: string;
+    label?: string;
+    ariaLabel?: string;
+    hour12?: boolean;
+    /** Minute increment shown in the list (typed entry accepts any minute). */
+    step?: number;
+    disabled?: boolean;
+    error?: string;
+    placeholder?: string;
+};
+declare const TimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/TimeRangePicker.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import TimePicker from './TimePicker.svelte';
+	import Icon from '../icons/Icon.svelte';
+
+	let {
+		value = $bindable({}),
+		label,
+		hour12 = false,
+		step = 5,
+		disabled = false,
+		error,
+		allowOvernight = false
+	}: {
+		/** 24h "HH:MM" strings. */
+		value?: { start?: string; end?: string };
+		label?: string;
+		hour12?: boolean;
+		step?: number;
+		disabled?: boolean;
+		error?: string;
+		/** Permit end earlier than start (spans midnight). */
+		allowOvernight?: boolean;
+	} = $props();
+
+	const id = $props.id();
+	const overnight = $derived(!!value.start && !!value.end && value.end < value.start);
+	const msg = $derived(error ?? (overnight && !allowOvernight ? 'End time must be after start time' : undefined));
+</script>
+
+<div class="tr-field">
+	{#if label}<span class="tr-label" id="{id}-label">{label}</span>{/if}
+	<div class="pair" role="group" aria-labelledby={label ? `${id}-label` : undefined}>
+		<TimePicker ariaLabel="Start time" {hour12} {step} {disabled} error={msg ? ' ' : undefined} bind:value={() => value.start, (v) => (value = { ...value, start: v })} />
+		<Icon name="chevron-right" />
+		<TimePicker ariaLabel="End time" {hour12} {step} {disabled} error={msg ? ' ' : undefined} bind:value={() => value.end, (v) => (value = { ...value, end: v })} />
+	</div>
+	{#if msg}<div class="tr-hint" data-error="true">{msg}</div>
+	{:else if overnight}<div class="tr-hint">Ends the next day</div>{/if}
+</div>
+
+<style>
+	.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
+	.pair :global(svg) { margin-top: 8px; color: var(--tr-on-surface-variant); }
+</style>

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

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    /** 24h "HH:MM" strings. */
+    value?: {
+        start?: string;
+        end?: string;
+    };
+    label?: string;
+    hour12?: boolean;
+    step?: number;
+    disabled?: boolean;
+    error?: string;
+    /** Permit end earlier than start (spans midnight). */
+    allowOvernight?: boolean;
+};
+declare const TimeRangePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimeRangePicker = ReturnType<typeof TimeRangePicker>;
+export default TimeRangePicker;

package/dist/components/Timeline.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	type Item = { id: string; time: string; title: string; description?: string; kind?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger'; icon?: IconName };
+	let { items, body }: { items: Item[]; /** Custom body under each title. */ body?: Snippet<[item: Item]> } = $props();
+</script>
+
+<ol class="tl" aria-label="Timeline">
+	{#each items as it (it.id)}
+		<li data-kind={it.kind ?? 'neutral'}>
+			<time class="when">{it.time}</time>
+			<span class="mk">{#if it.icon}<Icon name={it.icon} />{/if}</span>
+			<div class="what">
+				<div class="t">{it.title}</div>
+				{#if it.description}<div class="d">{it.description}</div>{/if}
+				{#if body}{@render body(it)}{/if}
+			</div>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.tl { margin: 0; padding: 0; list-style: none; }
+	li { --c: var(--tr-outline); position: relative; display: grid; grid-template-columns: 96px 20px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
+	li[data-kind='primary'] { --c: var(--tr-primary); }
+	li[data-kind='success'] { --c: var(--tr-success); }
+	li[data-kind='warning'] { --c: var(--tr-warning); }
+	li[data-kind='danger'] { --c: var(--tr-danger); }
+	li:not(:last-child)::before { content: ''; position: absolute; left: calc(96px + 12px + 9px); top: 20px; bottom: 0; width: 2px; background: var(--tr-outline-variant); }
+	.when { text-align: right; padding-top: 1px; font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); font-variant-numeric: tabular-nums; }
+	.mk { z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 3px solid var(--tr-surface); box-shadow: 0 0 0 1px var(--c); color: var(--tr-surface); }
+	.mk :global(svg) { width: 12px; height: 12px; stroke-width: 2; }
+	.t { font-weight: 600; }
+	.d { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); margin-top: 2px; }
+	@media (max-width: 520px) { li { grid-template-columns: 20px minmax(0, 1fr); } .when { grid-column: 2; text-align: left; order: 3; } li:not(:last-child)::before { left: 9px; } }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../icons/paths.js';
+type Item = {
+    id: string;
+    time: string;
+    title: string;
+    description?: string;
+    kind?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+    icon?: IconName;
+};
+type $$ComponentProps = {
+    items: Item[]; /** Custom body under each title. */
+    body?: Snippet<[item: Item]>;
+};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/Toaster.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { toasts } from '../toast.svelte.js';
+	import Icon from '../icons/Icon.svelte';
+	import Button from './Button.svelte';
+
+	const glyph = { primary: 'info', success: 'success', warning: 'warning', danger: 'error' } as const;
+</script>
+
+<div class="tr-toaster" role="region" aria-label="Notifications">
+	{#each toasts.items as t (t.id)}
+		<div class="toast" data-intent={t.intent} role={t.intent === 'danger' ? 'alert' : 'status'} transition:fly={{ y: 16, duration: 160 }}>
+			<span class="glyph"><Icon name={glyph[t.intent]} size={20} /></span>
+			<span class="msg">{t.message}</span>
+			<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Dismiss" onclick={() => toasts.dismiss(t.id)} />
+		</div>
+	{/each}
+</div>
+
+<style>
+	.tr-toaster { position: fixed; z-index: 100; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
+	.toast {
+		--c: var(--tr-primary);
+		pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 4px 4px 6px;
+		background: var(--tr-surface-container-highest); color: var(--tr-on-surface);
+		border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-pill);
+		box-shadow: var(--tr-elevation-3);
+	}
+	.toast[data-intent='success'] { --c: var(--tr-success); }
+	.toast[data-intent='warning'] { --c: var(--tr-warning); }
+	.toast[data-intent='danger'] { --c: var(--tr-danger); }
+	/* Bold intent indicator: solid intent disc inside the pill */
+	.glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--tr-surface); }
+	.msg { padding-right: 4px; font-weight: 500; }
+</style>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		text,
+		placement = 'top',
+		delay = 350,
+		children
+	}: {
+		text: string;
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+		/** ms before showing on hover (focus shows immediately). */
+		delay?: number;
+		children: Snippet;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let ready = $state(false);
+	let x = $state(0);
+	let y = $state(0);
+	let host: HTMLSpanElement;
+	let tip = $state<HTMLDivElement>();
+	let timer: ReturnType<typeof setTimeout>;
+
+	const show = (now = false) => { clearTimeout(timer); timer = setTimeout(() => (open = true), now ? 0 : delay); };
+	const hide = () => { clearTimeout(timer); open = false; ready = false; };
+	$effect(() => () => clearTimeout(timer));
+
+	$effect(() => {
+		if (!open || !tip) return;
+		const r = host.getBoundingClientRect();
+		const t = tip.getBoundingClientRect();
+		let p = placement;
+		if (p === 'top' && r.top < t.height + 10) p = 'bottom';
+		else if (p === 'bottom' && r.bottom + t.height + 10 > innerHeight) p = 'top';
+		else if (p === 'left' && r.left < t.width + 10) p = 'right';
+		else if (p === 'right' && r.right + t.width + 10 > innerWidth) p = 'left';
+		const cx = r.left + r.width / 2 - t.width / 2, cy = r.top + r.height / 2 - t.height / 2;
+		const pos = { top: [cx, r.top - t.height - 6], bottom: [cx, r.bottom + 6], left: [r.left - t.width - 6, cy], right: [r.right + 6, cy] }[p];
+		x = Math.min(Math.max(4, pos[0]), innerWidth - t.width - 4);
+		y = Math.max(4, pos[1]);
+		ready = true;
+	});
+</script>
+
+<svelte:window onkeydown={(e) => e.key === 'Escape' && open && hide()} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span class="host" bind:this={host} onpointerenter={() => show()} onpointerleave={hide} onfocusin={() => show(true)} onfocusout={hide} onpointerdown={hide} aria-describedby={open ? id : undefined}>
+	{@render children()}
+</span>
+{#if open}
+	<div class="tip" role="tooltip" {id} bind:this={tip} style:left="{x}px" style:top="{y}px" data-ready={ready}>{text}</div>
+{/if}
+
+<style>
+	.host { display: inline-flex; }
+	.tip {
+		position: fixed; z-index: 200; max-width: 260px; padding: 4px 8px; pointer-events: none; visibility: hidden;
+		background: var(--tr-on-surface); color: var(--tr-surface); border-radius: var(--tr-radius-sm);
+		font: 500 var(--tr-text-sm) / 1.35 var(--tr-font-sans); box-shadow: var(--tr-elevation-2);
+	}
+	.tip[data-ready='true'] { visibility: visible; animation: fade var(--tr-dur-fast) var(--tr-ease); }
+	@keyframes fade { from { opacity: 0; } }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    text: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** ms before showing on hover (focus shows immediately). */
+    delay?: number;
+    children: Snippet;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/Tree.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import Icon from '../icons/Icon.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Spinner from './Spinner.svelte';
+	import type { TreeNode } from '../types.js';
+
+	let {
+		nodes,
+		expanded = $bindable([]),
+		selected = $bindable(),
+		checkable = false,
+		checked = $bindable([]),
+		loadChildren,
+		label = 'Tree',
+		onselect
+	}: {
+		nodes: TreeNode[];
+		expanded?: string[];
+		selected?: string;
+		/** Tri-state checkboxes. `checked` holds leaf ids. */
+		checkable?: boolean;
+		checked?: string[];
+		/** Lazy children for nodes with `hasChildren`. */
+		loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+		label?: string;
+		onselect?: (node: TreeNode) => void;
+	} = $props();
+
+	const loaded = new SvelteMap<string, TreeNode[]>();
+	let loading = $state<string[]>([]);
+	let focusId = $state<string>();
+	let root: HTMLUListElement;
+
+	const kids = (n: TreeNode) => n.children ?? loaded.get(n.id);
+	const expandable = (n: TreeNode) => !!kids(n)?.length || (!!n.hasChildren && !kids(n));
+
+	type Row = { node: TreeNode; depth: number; parent?: TreeNode; pos: number; size: number };
+	const rows = $derived.by(() => {
+		const out: Row[] = [];
+		const walk = (list: TreeNode[], depth: number, parent?: TreeNode) =>
+			list.forEach((node, i) => {
+				out.push({ node, depth, parent, pos: i + 1, size: list.length });
+				if (expanded.includes(node.id) && kids(node)) walk(kids(node)!, depth + 1, node);
+			});
+		walk(nodes, 0);
+		return out;
+	});
+	const tabbable = $derived(rows.some((r) => r.node.id === focusId) ? focusId : rows[0]?.node.id);
+
+	async function expand(n: TreeNode) {
+		if (!expanded.includes(n.id)) expanded = [...expanded, n.id];
+		if (loadChildren && n.hasChildren && !kids(n) && !loading.includes(n.id)) {
+			loading = [...loading, n.id];
+			try { loaded.set(n.id, await loadChildren(n)); }
+			catch { expanded = expanded.filter((x) => x !== n.id); }
+			finally { loading = loading.filter((x) => x !== n.id); }
+		}
+	}
+	const collapse = (n: TreeNode) => (expanded = expanded.filter((x) => x !== n.id));
+	const toggle = (n: TreeNode) => (expanded.includes(n.id) ? collapse(n) : expand(n));
+
+	function leaves(n: TreeNode): string[] {
+		const k = kids(n);
+		return k?.length ? k.flatMap(leaves) : [n.id];
+	}
+	function checkState(n: TreeNode): 'all' | 'some' | 'none' {
+		const l = leaves(n);
+		const c = l.filter((id) => checked.includes(id)).length;
+		return c === 0 ? 'none' : c === l.length ? 'all' : 'some';
+	}
+	function toggleCheck(n: TreeNode) {
+		const l = leaves(n);
+		checked = checkState(n) === 'all' ? checked.filter((id) => !l.includes(id)) : [...new Set([...checked, ...l])];
+	}
+
+	async function focusRow(id: string) {
+		focusId = id;
+		await tick();
+		root.querySelector<HTMLElement>(`[data-id="${CSS.escape(id)}"]`)?.focus();
+	}
+	function pick(n: TreeNode) {
+		if (n.disabled) return;
+		selected = n.id;
+		onselect?.(n);
+	}
+	function onKey(e: KeyboardEvent, i: number) {
+		const r = rows[i], n = r.node;
+		if (e.target !== e.currentTarget) return;
+		if (e.key === 'ArrowDown') rows[i + 1] && focusRow(rows[i + 1].node.id);
+		else if (e.key === 'ArrowUp') rows[i - 1] && focusRow(rows[i - 1].node.id);
+		else if (e.key === 'Home') focusRow(rows[0].node.id);
+		else if (e.key === 'End') focusRow(rows.at(-1)!.node.id);
+		else if (e.key === 'ArrowRight') {
+			if (expandable(n) && !expanded.includes(n.id)) expand(n);
+			else if (expanded.includes(n.id) && rows[i + 1]?.parent === n) focusRow(rows[i + 1].node.id);
+		} else if (e.key === 'ArrowLeft') {
+			if (expanded.includes(n.id)) collapse(n);
+			else if (r.parent) focusRow(r.parent.id);
+		} else if (e.key === 'Enter') pick(n);
+		else if (e.key === ' ') { checkable ? toggleCheck(n) : pick(n); }
+		else return;
+		e.preventDefault();
+	}
+</script>
+
+<ul class="tree" role="tree" aria-label={label} aria-multiselectable={checkable || undefined} bind:this={root}>
+	{#each rows as r, i (r.node.id)}
+		{@const n = r.node}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<li
+			role="treeitem" data-id={n.id} aria-level={r.depth + 1} aria-setsize={r.size} aria-posinset={r.pos}
+			aria-expanded={expandable(n) ? expanded.includes(n.id) : undefined} aria-selected={selected === n.id}
+			aria-disabled={n.disabled} tabindex={n.id === tabbable ? 0 : -1} data-selected={selected === n.id}
+			style:padding-inline-start="{r.depth * 18 + 4}px"
+			onkeydown={(e) => onKey(e, i)} onfocus={() => (focusId = n.id)} onclick={() => { focusId = n.id; pick(n); }} ondblclick={() => expandable(n) && toggle(n)}
+		>
+			{#if expandable(n)}
+				<button type="button" class="tw" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); toggle(n); }}>
+					{#if loading.includes(n.id)}<Spinner size={14} />{:else}<Icon name={expanded.includes(n.id) ? 'chevron-down' : 'chevron-right'} />{/if}
+				</button>
+			{:else}<span class="tw"></span>{/if}
+			{#if checkable}
+				<span class="ck" onclick={(e) => e.stopPropagation()} role="presentation">
+					<Checkbox tabindex={-1} aria-label="Select {n.label}" disabled={n.disabled} checked={checkState(n) === 'all'} indeterminate={checkState(n) === 'some'} onchange={() => toggleCheck(n)} />
+				</span>
+			{/if}
+			{#if n.icon}<Icon name={n.icon} />{:else if expandable(n) || kids(n)}<Icon name="folder" />{:else}<Icon name="file" />{/if}
+			<span class="lbl">{n.label}</span>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.tree { margin: 0; padding: 4px; list-style: none; }
+	li { display: flex; align-items: center; gap: 6px; height: 28px; padding-inline-end: 8px; border-radius: var(--tr-radius-sm); color: var(--tr-on-surface); cursor: default; outline: none; }
+	li:hover { background: var(--tr-surface-container-high); }
+	li[data-selected='true'] { background: color-mix(in srgb, var(--tr-primary-container) 60%, transparent); box-shadow: inset 3px 0 0 var(--tr-primary); }
+	li:focus-visible { box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	li[aria-disabled='true'] { opacity: 0.45; }
+	.tw { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); cursor: pointer; }
+	button.tw:hover { background: var(--tr-surface-container-highest); }
+	.ck { display: inline-flex; }
+	li > :global(svg) { color: var(--tr-on-surface-variant); }
+	.lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+</style>

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

@@ -0,0 +1,16 @@
+import type { TreeNode } from '../types.js';
+type $$ComponentProps = {
+    nodes: TreeNode[];
+    expanded?: string[];
+    selected?: string;
+    /** Tri-state checkboxes. `checked` holds leaf ids. */
+    checkable?: boolean;
+    checked?: string[];
+    /** Lazy children for nodes with `hasChildren`. */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
+    label?: string;
+    onselect?: (node: TreeNode) => void;
+};
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "checked" | "expanded" | "selected">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/date.d.ts

@@ -0,0 +1,19 @@
+/** Dependency-free local-date helpers. Dates travel as ISO strings (YYYY-MM-DD) so they sort lexicographically. */
+export declare const pad: (n: number) => string;
+export declare const toISO: (d: Date) => string;
+export declare function parseISO(s: string): Date | null;
+export declare const today: () => string;
+export declare const addDays: (d: Date, n: number) => Date;
+export declare const startOfMonth: (d: Date) => Date;
+/** Month arithmetic that clamps the day (Jan 31 + 1 month = Feb 28/29). */
+export declare function addMonths(d: Date, n: number): Date;
+/** Six weeks of ISO dates covering the month, starting on `weekStart` (0 = Sunday). */
+export declare function monthGrid(year: number, month: number, weekStart?: number): string[][];
+/** Accepts YYYY-MM-DD, YYYY/MM/DD and M/D/YYYY. Returns ISO or null. */
+export declare function parseDateInput(text: string): string | null;
+/** "YYYY-MM-DDTHH:MM" helpers (local, no timezone). */
+export declare const joinDateTime: (date: string, time: string) => string;
+export declare const splitDateTime: (v?: string) => {
+    date: string | undefined;
+    time: string | undefined;
+};

package/dist/date.js

@@ -0,0 +1,43 @@
+/** Dependency-free local-date helpers. Dates travel as ISO strings (YYYY-MM-DD) so they sort lexicographically. */
+export const pad = (n) => String(n).padStart(2, '0');
+export const toISO = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+export function parseISO(s) {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+    if (!m)
+        return null;
+    const d = new Date(+m[1], +m[2] - 1, +m[3]);
+    return toISO(d) === s ? d : null;
+}
+export const today = () => toISO(new Date());
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+export const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+/** Month arithmetic that clamps the day (Jan 31 + 1 month = Feb 28/29). */
+export function addMonths(d, n) {
+    const t = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const last = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+    t.setDate(Math.min(d.getDate(), last));
+    return t;
+}
+/** Six weeks of ISO dates covering the month, starting on `weekStart` (0 = Sunday). */
+export function monthGrid(year, month, weekStart = 0) {
+    const first = new Date(year, month, 1);
+    const start = addDays(first, -((first.getDay() - weekStart + 7) % 7));
+    return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => toISO(addDays(start, w * 7 + d))));
+}
+/** Accepts YYYY-MM-DD, YYYY/MM/DD and M/D/YYYY. Returns ISO or null. */
+export function parseDateInput(text) {
+    const t = text.trim();
+    let m = /^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/.exec(t);
+    let y, mo, d;
+    if (m)
+        [y, mo, d] = [+m[1], +m[2], +m[3]];
+    else if ((m = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(t)))
+        [y, mo, d] = [+m[3], +m[1], +m[2]];
+    else
+        return null;
+    const iso = `${String(y).padStart(4, '0')}-${pad(mo)}-${pad(d)}`;
+    return parseISO(iso) ? iso : null;
+}
+/** "YYYY-MM-DDTHH:MM" helpers (local, no timezone). */
+export const joinDateTime = (date, time) => `${date}T${time}`;
+export const splitDateTime = (v) => ({ date: v?.slice(0, 10), time: v && v.length >= 16 ? v.slice(11, 16) : undefined });

package/dist/duration.d.ts

@@ -0,0 +1,11 @@
+export type DurationUnit = 'd' | 'h' | 'm' | 's';
+export declare const UNIT_SECONDS: Record<DurationUnit, number>;
+export declare const UNIT_NAMES: Record<DurationUnit, string>;
+/**
+ * Parses "1h 30m", "2d 3h", "90m", "1:30" (h:mm), "1:30:15" (h:mm:ss), ISO "PT1H30M".
+ * A bare number counts in the smallest enabled unit. Returns seconds or null.
+ */
+export declare function parseDuration(text: string, units?: DurationUnit[]): number | null;
+/** Splits seconds across the enabled units (largest first); remainder below the smallest unit is dropped. */
+export declare function decompose(seconds: number, units: DurationUnit[]): Record<DurationUnit, number>;
+export declare function formatDuration(seconds: number, units?: DurationUnit[]): string;

package/dist/duration.js

@@ -0,0 +1,44 @@
+export const UNIT_SECONDS = { d: 86400, h: 3600, m: 60, s: 1 };
+export const UNIT_NAMES = { d: 'days', h: 'hours', m: 'minutes', s: 'seconds' };
+const ORDER = ['d', 'h', 'm', 's'];
+const sorted = (units) => ORDER.filter((u) => units.includes(u));
+/**
+ * Parses "1h 30m", "2d 3h", "90m", "1:30" (h:mm), "1:30:15" (h:mm:ss), ISO "PT1H30M".
+ * A bare number counts in the smallest enabled unit. Returns seconds or null.
+ */
+export function parseDuration(text, units = ['d', 'h', 'm']) {
+    const t = text.trim().toLowerCase();
+    if (!t)
+        return null;
+    const iso = /^p(?:(\d+)d)?(?:t(?:(\d+)h)?(?:(\d+)m)?(?:(\d+(?:\.\d+)?)s)?)?$/.exec(t);
+    if (iso && t.length > 1)
+        return (+(iso[1] ?? 0)) * 86400 + (+(iso[2] ?? 0)) * 3600 + (+(iso[3] ?? 0)) * 60 + Math.round(+(iso[4] ?? 0));
+    if (/^\d+(:\d{1,2}){1,2}$/.test(t)) {
+        const p = t.split(':').map(Number);
+        return p.length === 2 ? p[0] * 3600 + p[1] * 60 : p[0] * 3600 + p[1] * 60 + p[2];
+    }
+    if (/^\d+(\.\d+)?$/.test(t))
+        return Math.round(+t * UNIT_SECONDS[sorted(units).at(-1) ?? 'm']);
+    if (!/^(?:\s*\d+(?:\.\d+)?\s*[dhms]\s*,?)+\s*$/.test(t))
+        return null;
+    let total = 0;
+    for (const m of t.matchAll(/(\d+(?:\.\d+)?)\s*([dhms])/g))
+        total += +m[1] * UNIT_SECONDS[m[2]];
+    return Math.round(total);
+}
+/** Splits seconds across the enabled units (largest first); remainder below the smallest unit is dropped. */
+export function decompose(seconds, units) {
+    const out = { d: 0, h: 0, m: 0, s: 0 };
+    let rest = Math.max(0, Math.round(seconds));
+    for (const u of sorted(units)) {
+        out[u] = Math.floor(rest / UNIT_SECONDS[u]);
+        rest -= out[u] * UNIT_SECONDS[u];
+    }
+    return out;
+}
+export function formatDuration(seconds, units = ['d', 'h', 'm']) {
+    const us = sorted(units);
+    const parts = decompose(seconds, us);
+    const s = us.filter((u) => parts[u]).map((u) => `${parts[u]}${u}`).join(' ');
+    return s || `0${us.at(-1) ?? 'm'}`;
+}