@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/Drawer.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		position = 'right',
+		size = 'md',
+		children,
+		footer,
+		onclose
+	}: {
+		open?: boolean;
+		title: string;
+		position?: 'left' | 'right' | 'bottom';
+		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-drawer" data-pos={position} data-size={size} aria-labelledby="{uid}-t"
+	onclose={() => { open = false; onclose?.(); }}
+	onclick={(e) => e.target === el && (open = false)}
+>
+	<div class="frame">
+		<header>
+			<h2 id="{uid}-t">{title}</h2>
+			<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Close drawer" onclick={() => (open = false)} />
+		</header>
+		<div class="body">{@render children()}</div>
+		{#if footer}<footer>{@render footer()}</footer>{/if}
+	</div>
+</dialog>
+
+<style>
+	.tr-drawer { margin: 0; padding: 0; border: 1px solid var(--tr-outline-variant); background: var(--tr-surface-container-low); color: var(--tr-on-surface); box-shadow: var(--tr-elevation-4); overflow: hidden; max-width: 100vw; max-height: 100vh; }
+	.tr-drawer::backdrop { background: var(--tr-scrim); backdrop-filter: blur(3px); }
+	.tr-drawer[data-pos='right'], .tr-drawer[data-pos='left'] { top: 0; bottom: 0; height: 100vh; width: var(--w, 420px); border-radius: var(--tr-radius-lg) 0 0 var(--tr-radius-lg); }
+	.tr-drawer[data-pos='right'] { left: auto; right: 0; animation: in-r var(--tr-dur) var(--tr-ease); }
+	.tr-drawer[data-pos='left'] { left: 0; right: auto; border-radius: 0 var(--tr-radius-lg) var(--tr-radius-lg) 0; animation: in-l var(--tr-dur) var(--tr-ease); }
+	.tr-drawer[data-pos='bottom'] { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; height: var(--h, 320px); border-radius: var(--tr-radius-lg) var(--tr-radius-lg) 0 0; animation: in-b var(--tr-dur) var(--tr-ease); }
+	.tr-drawer[data-size='sm'] { --w: 320px; --h: 220px; }
+	.tr-drawer[data-size='lg'] { --w: 640px; --h: 480px; }
+	.frame { display: flex; flex-direction: column; height: 100%; }
+	header { display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; 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); }
+	.body { flex: 1; padding: 16px; overflow: auto; }
+	footer { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 10px 16px; background: var(--tr-surface-container); border-top: 1px solid var(--tr-outline-variant); }
+	@keyframes in-r { from { transform: translateX(24px); opacity: 0; } }
+	@keyframes in-l { from { transform: translateX(-24px); opacity: 0; } }
+	@keyframes in-b { from { transform: translateY(24px); opacity: 0; } }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    position?: 'left' | 'right' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DurationInput.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import NumberInput from './NumberInput.svelte';
+	import Popover from './Popover.svelte';
+	import { decompose, formatDuration, parseDuration, UNIT_NAMES, UNIT_SECONDS, type DurationUnit } from '../duration.js';
+
+	let {
+		value = $bindable(null),
+		label,
+		ariaLabel,
+		units = ['d', 'h', 'm'],
+		min = 0,
+		max,
+		presets = [900, 1800, 3600, 4 * 3600, 86400],
+		placeholder,
+		disabled = false,
+		error
+	}: {
+		/** Seconds. */
+		value?: number | null;
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		/** Enabled units, any of d/h/m/s. A bare number is read in the smallest one. */
+		units?: DurationUnit[];
+		min?: number;
+		max?: number;
+		presets?: number[];
+		placeholder?: string;
+		disabled?: boolean;
+		error?: string;
+	} = $props();
+
+	const id = $props.id();
+	const order: DurationUnit[] = ['d', 'h', 'm', 's'];
+	const active = $derived(order.filter((u) => units.includes(u)));
+	let open = $state(false);
+	let text = $state('');
+	let bad = $state(false);
+	let input: HTMLInputElement;
+
+	$effect(() => { text = value == null ? '' : formatDuration(value, active); bad = false; });
+
+	const clamp = (s: number) => Math.min(max ?? Infinity, Math.max(min, s));
+	function commit() {
+		const t = text.trim();
+		if (!t) { value = null; bad = false; return; }
+		const s = parseDuration(t, active);
+		bad = s == null;
+		if (s != null) { value = clamp(s); text = formatDuration(value, active); }
+	}
+	const parts = $derived(decompose(value ?? 0, active));
+	function setPart(u: DurationUnit, n: number | null) {
+		const next = { ...parts, [u]: Math.max(0, n ?? 0) };
+		value = clamp(active.reduce((a, k) => a + next[k] * UNIT_SECONDS[k], 0));
+	}
+	/** A unit's cap is the size of the next larger enabled unit (so 60 min rolls into hours). */
+	const cap = (u: DurationUnit) => {
+		const i = active.indexOf(u);
+		return i > 0 ? UNIT_SECONDS[active[i - 1]] / UNIT_SECONDS[u] - 1 : undefined;
+	};
+	const msg = $derived(error ?? (bad ? 'Try 1h 30m, 90m, 1:30 or PT1H30M' : 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={!!msg} data-disabled={disabled}>
+			<input
+				class="tr-bare" {id} aria-label={label ? undefined : ariaLabel} bind:this={input} bind:value={text} {disabled} autocomplete="off"
+				placeholder={placeholder ?? `e.g. ${formatDuration(5400, active)}`} aria-haspopup="dialog" aria-expanded={open}
+				aria-invalid={!!msg || undefined} onblur={commit}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') commit();
+					else if (e.key === 'ArrowDown' && e.altKey) open = true;
+					else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+						e.preventDefault();
+						const stepS = UNIT_SECONDS[active.at(-1)!] * (active.at(-1) === 'm' ? 5 : 1);
+						value = clamp((value ?? 0) + (e.key === 'ArrowUp' ? stepS : -stepS));
+					}
+				}}
+			/>
+			<Button variant="minimal" intent="neutral" size="sm" icon="clock" aria-label="Edit duration" {disabled} onclick={() => (open = !open)} />
+		</div>
+		<Popover bind:open onclose={(r) => r && input.focus()}>
+			<div class="panel">
+				<div class="fields">
+					{#each active as u (u)}
+						<NumberInput label={UNIT_NAMES[u]} min={0} max={cap(u)} bind:value={() => parts[u], (n) => setPart(u, n)} />
+					{/each}
+				</div>
+				{#if presets.length}
+					<div class="presets" role="group" aria-label="Presets">
+						{#each presets as p}<Button size="sm" variant={value === p ? 'tonal' : 'outlined'} intent="neutral" onclick={() => (value = clamp(p))}>{formatDuration(p, active)}</Button>{/each}
+					</div>
+				{/if}
+				<div class="foot">
+					<Button variant="minimal" size="sm" onclick={() => (value = null)}>Clear</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 { width: 320px; max-width: calc(100vw - 32px); padding: 10px; }
+	.fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
+	.presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
+	.foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--tr-outline-variant); }
+</style>

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

@@ -0,0 +1,19 @@
+import { type DurationUnit } from '../duration.js';
+type $$ComponentProps = {
+    /** Seconds. */
+    value?: number | null;
+    label?: string;
+    /** Accessible name when no visible `label` is shown. */
+    ariaLabel?: string;
+    /** Enabled units, any of d/h/m/s. A bare number is read in the smallest one. */
+    units?: DurationUnit[];
+    min?: number;
+    max?: number;
+    presets?: number[];
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+};
+declare const DurationInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DurationInput = ReturnType<typeof DurationInput>;
+export default DurationInput;

package/dist/components/EditableText.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Click to edit',
+		multiline = false,
+		selectAll = true,
+		disabled = false,
+		label = 'Edit text',
+		onconfirm
+	}: {
+		value?: string;
+		placeholder?: string;
+		/** Enter inserts a newline; Ctrl/⌘+Enter commits. */
+		multiline?: boolean;
+		selectAll?: boolean;
+		disabled?: boolean;
+		/** Accessible name of the edit control. */
+		label?: string;
+		onconfirm?: (value: string) => void;
+	} = $props();
+
+	let editing = $state(false);
+	let draft = $state('');
+	let field = $state<HTMLInputElement | HTMLTextAreaElement>();
+
+	async function start() {
+		if (disabled) return;
+		draft = value;
+		editing = true;
+		await tick();
+		field?.focus();
+		if (selectAll) field?.select();
+	}
+	function commit() {
+		if (!editing) return;
+		editing = false;
+		if (draft !== value) { value = draft; onconfirm?.(draft); }
+	}
+	const cancel = () => (editing = false);
+	function onKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+		else if (e.key === 'Enter' && (!multiline || e.ctrlKey || e.metaKey)) { e.preventDefault(); commit(); }
+	}
+</script>
+
+{#if editing}
+	{#if multiline}
+		<textarea class="ed" bind:this={field} bind:value={draft} rows="3" aria-label={label} onkeydown={onKey} onblur={commit}></textarea>
+	{:else}
+		<input class="ed" bind:this={field} bind:value={draft} aria-label={label} onkeydown={onKey} onblur={commit} />
+	{/if}
+{:else}
+	<button type="button" class="view" {disabled} aria-label="{label}: {value || placeholder}" onclick={start}>
+		<span class="tx" data-empty={!value}>{value || placeholder}</span>
+		{#if !disabled}<Icon name="edit" />{/if}
+	</button>
+{/if}
+
+<style>
+	.view { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: text; }
+	.view:disabled { cursor: default; }
+	.view:hover:not(:disabled) { background: var(--tr-surface-container-high); }
+	.view:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.view :global(svg) { opacity: 0; color: var(--tr-on-surface-variant); flex: none; transition: opacity var(--tr-dur) var(--tr-ease); }
+	.view:hover :global(svg), .view:focus-visible :global(svg) { opacity: 1; }
+	.tx { white-space: pre-wrap; overflow-wrap: break-word; }
+	.tx[data-empty='true'] { color: var(--tr-placeholder); font-style: italic; }
+	.ed { width: 100%; min-height: 28px; padding: 2px 6px; margin: 0 -6px; box-sizing: content-box; border: 1px solid var(--tr-primary); border-radius: var(--tr-radius-sm); background: var(--tr-surface-container); color: var(--tr-on-surface); font: inherit; outline: none; box-shadow: inset 0 -2px 0 var(--tr-primary), var(--tr-focus-ring); }
+	textarea.ed { resize: vertical; line-height: 1.4; }
+</style>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    /** Enter inserts a newline; Ctrl/⌘+Enter commits. */
+    multiline?: boolean;
+    selectAll?: boolean;
+    disabled?: boolean;
+    /** Accessible name of the edit control. */
+    label?: string;
+    onconfirm?: (value: string) => void;
+};
+declare const EditableText: import("svelte").Component<$$ComponentProps, {}, "value">;
+type EditableText = ReturnType<typeof EditableText>;
+export default EditableText;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	let {
+		title,
+		description,
+		icon = 'search',
+		intent = 'neutral',
+		actions
+	}: { title: string; description?: string; icon?: IconName; intent?: 'neutral' | 'danger'; actions?: Snippet } = $props();
+</script>
+
+<div class="es" data-intent={intent}>
+	<span class="ic"><Icon name={icon} /></span>
+	<div class="t">{title}</div>
+	{#if description}<p>{description}</p>{/if}
+	{#if actions}<div class="a">{@render actions()}</div>{/if}
+</div>
+
+<style>
+	.es { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--tr-on-surface-variant); }
+	.ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--tr-surface-container-high); }
+	.ic :global(svg) { width: 32px; height: 32px; stroke-width: 1; }
+	.es[data-intent='danger'] .ic { background: var(--tr-danger-container); color: var(--tr-on-danger-container); }
+	.t { font-size: var(--tr-text-lg); font-weight: 700; color: var(--tr-on-surface); }
+	p { margin: 0; max-width: 360px; line-height: 1.45; }
+	.a { display: flex; gap: 8px; margin-top: 10px; }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../icons/paths.js';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    icon?: IconName;
+    intent?: 'neutral' | 'danger';
+    actions?: Snippet;
+};
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/FileUpload.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Icon from '../icons/Icon.svelte';
+	import ProgressBar from './ProgressBar.svelte';
+	import type { UploadItem } from '../types.js';
+
+	let {
+		files = $bindable([]),
+		accept,
+		multiple = true,
+		maxSize,
+		maxFiles,
+		upload,
+		label = 'Upload files',
+		hint,
+		disabled = false
+	}: {
+		files?: UploadItem[];
+		/** e.g. ".csv,image/*,application/pdf" */
+		accept?: string;
+		multiple?: boolean;
+		/** Bytes. */
+		maxSize?: number;
+		maxFiles?: number;
+		/** Your uploader. Report progress 0–100; throw to mark the file failed. Omit to just collect files. */
+		upload?: (file: File, onProgress: (pct: number) => void, signal: AbortSignal) => Promise<void>;
+		label?: string;
+		hint?: string;
+		disabled?: boolean;
+	} = $props();
+
+	let input: HTMLInputElement;
+	let over = $state(false);
+	let depth = 0;
+	const ctrls = new Map<string, AbortController>();
+
+	const fmt = (n: number) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+	function accepted(f: File) {
+		if (!accept) return true;
+		return accept.split(',').map((a) => a.trim().toLowerCase()).filter(Boolean).some((a) =>
+			a.startsWith('.') ? f.name.toLowerCase().endsWith(a) : a.endsWith('/*') ? f.type.toLowerCase().startsWith(a.slice(0, -1)) : f.type.toLowerCase() === a);
+	}
+	const patch = (id: string, p: Partial<UploadItem>) => (files = files.map((x) => (x.id === id ? { ...x, ...p } : x)));
+
+	async function run(it: UploadItem) {
+		if (!upload) return;
+		const c = new AbortController();
+		ctrls.set(it.id, c);
+		patch(it.id, { status: 'uploading', progress: 0, error: undefined });
+		try {
+			await upload(it.file, (pct) => patch(it.id, { progress: Math.min(100, Math.max(0, pct)) }), c.signal);
+			patch(it.id, { status: 'done', progress: 100 });
+		} catch (e) {
+			if (!c.signal.aborted) patch(it.id, { status: 'error', error: e instanceof Error ? e.message : 'Upload failed' });
+		} finally { ctrls.delete(it.id); }
+	}
+	function add(list: FileList | File[]) {
+		let incoming = [...list];
+		if (!multiple) { files = []; incoming = incoming.slice(0, 1); }
+		const fresh: UploadItem[] = incoming.map((file) => {
+			const id = crypto.randomUUID();
+			let error: string | undefined;
+			if (!accepted(file)) error = 'File type not allowed';
+			else if (maxSize != null && file.size > maxSize) error = `Larger than ${fmt(maxSize)}`;
+			else if (maxFiles != null && files.filter((f) => f.status !== 'error').length + incoming.indexOf(file) >= maxFiles) error = `Limit of ${maxFiles} files`;
+			return { id, file, status: error ? 'error' : 'ready', progress: 0, error };
+		});
+		files = [...files, ...fresh];
+		fresh.filter((f) => f.status === 'ready').forEach(run);
+	}
+	function remove(it: UploadItem) {
+		ctrls.get(it.id)?.abort();
+		files = files.filter((f) => f.id !== it.id);
+	}
+	function drop(e: DragEvent) {
+		e.preventDefault();
+		over = false; depth = 0;
+		if (!disabled && e.dataTransfer?.files.length) add(e.dataTransfer.files);
+	}
+</script>
+
+<div class="fu">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="zone" role="button" tabindex={disabled ? -1 : 0} aria-label={label} aria-disabled={disabled} data-over={over}
+		onclick={() => !disabled && input.click()}
+		onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && !disabled && (e.preventDefault(), input.click())}
+		ondragenter={(e) => { e.preventDefault(); depth++; over = true; }}
+		ondragover={(e) => e.preventDefault()}
+		ondragleave={() => { if (--depth <= 0) { over = false; depth = 0; } }}
+		ondrop={drop}
+	>
+		<span class="ic"><Icon name="upload" size={20} /></span>
+		<div><strong>Drop files here</strong> or <span class="link">browse</span></div>
+		{#if hint || accept || maxSize}
+			<div class="hint">{hint ?? [accept && `Accepted: ${accept}`, maxSize != null && `Max ${fmt(maxSize)}`].filter(Boolean).join(' · ')}</div>
+		{/if}
+		<input bind:this={input} type="file" class="tr-visually-hidden" {accept} {multiple} {disabled} tabindex="-1" aria-hidden="true"
+			onchange={(e) => { if (e.currentTarget.files) add(e.currentTarget.files); e.currentTarget.value = ''; }} />
+	</div>
+
+	{#if files.length}
+		<ul class="list" aria-label="Files">
+			{#each files as it (it.id)}
+				<li data-status={it.status}>
+					<span class="fi"><Icon name={it.status === 'done' ? 'success' : it.status === 'error' ? 'error' : 'file'} /></span>
+					<div class="meta">
+						<div class="name"><span>{it.file.name}</span><span class="size">{fmt(it.file.size)}</span></div>
+						{#if it.status === 'uploading'}<ProgressBar value={it.progress} size="sm" />
+						{:else if it.status === 'error'}<div class="err">{it.error}</div>{/if}
+					</div>
+					{#if it.status === 'error' && upload && accepted(it.file) && !it.error?.startsWith('Larger') && !it.error?.startsWith('Limit')}
+						<Button size="sm" variant="minimal" icon="refresh" aria-label="Retry {it.file.name}" onclick={() => run(it)} />
+					{/if}
+					<Button size="sm" variant="minimal" intent="neutral" icon={it.status === 'uploading' ? 'cross' : 'trash'} aria-label="{it.status === 'uploading' ? 'Cancel' : 'Remove'} {it.file.name}" onclick={() => remove(it)} />
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px; text-align: center; color: var(--tr-on-surface-variant); background: var(--tr-surface-container-low); border: 1.5px dashed var(--tr-outline); border-radius: var(--tr-radius-md); cursor: pointer; transition: background-color var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease); }
+	.zone:hover:not([aria-disabled='true']) { background: var(--tr-surface-container); }
+	.zone[data-over='true'] { border-color: var(--tr-primary); background: color-mix(in srgb, var(--tr-primary-container) 55%, transparent); border-style: solid; }
+	.zone:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
+	.zone[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+	strong { color: var(--tr-on-surface); }
+	.link { color: var(--tr-primary); font-weight: 600; text-decoration: underline; }
+	.ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
+	.hint { font-size: var(--tr-text-sm); }
+	.list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
+	li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); }
+	li[data-status='error'] { border-color: var(--tr-danger); }
+	.fi { color: var(--tr-on-surface-variant); }
+	li[data-status='done'] .fi { color: var(--tr-success); }
+	li[data-status='error'] .fi { color: var(--tr-danger); }
+	.meta { flex: 1; min-width: 0; }
+	.name { display: flex; gap: 8px; justify-content: space-between; }
+	.name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+	.size { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-variant-numeric: tabular-nums; flex: none; }
+	.err { color: var(--tr-danger); font-size: var(--tr-text-sm); }
+</style>

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

@@ -0,0 +1,18 @@
+import type { UploadItem } from '../types.js';
+type $$ComponentProps = {
+    files?: UploadItem[];
+    /** e.g. ".csv,image/*,application/pdf" */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. */
+    maxSize?: number;
+    maxFiles?: number;
+    /** Your uploader. Report progress 0–100; throw to mark the file failed. Omit to just collect files. */
+    upload?: (file: File, onProgress: (pct: number) => void, signal: AbortSignal) => Promise<void>;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+};
+declare const FileUpload: import("svelte").Component<$$ComponentProps, {}, "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/components/FormGroup.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		labelFor,
+		helper,
+		error,
+		required = false,
+		inline = false,
+		children
+	}: { label: string; labelFor?: string; helper?: string; error?: string; required?: boolean; inline?: boolean; children: Snippet } = $props();
+</script>
+
+<div class="fg" data-inline={inline}>
+	<label class="tr-label" for={labelFor}>{label}{#if required}<span class="req" aria-hidden="true"> *</span>{/if}</label>
+	<div class="ctl">
+		{@render children()}
+		{#if error}<div class="tr-hint" data-error="true" role="alert">{error}</div>{:else if helper}<div class="tr-hint">{helper}</div>{/if}
+	</div>
+</div>
+
+<style>
+	.fg[data-inline='true'] { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; }
+	.fg[data-inline='true'] .tr-label { margin: 0; padding-top: 7px; }
+	.req { color: var(--tr-danger); }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    labelFor?: string;
+    helper?: string;
+    error?: string;
+    required?: boolean;
+    inline?: boolean;
+    children: Snippet;
+};
+declare const FormGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormGroup = ReturnType<typeof FormGroup>;
+export default FormGroup;

package/dist/components/Input.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	type Props = Omit<HTMLInputAttributes, 'size'> & {
+		value?: string | number | null;
+		label?: string;
+		hint?: string;
+		error?: string;
+		icon?: IconName;
+		right?: Snippet;
+		size?: 'sm' | 'md' | 'lg';
+	};
+
+	let { value = $bindable(), label, hint, error, icon, right, size = 'md', class: klass = '', ...rest }: Props = $props();
+	const uid = $props.id();
+	const id = $derived(rest.id ?? uid);
+</script>
+
+<div class="tr-field {klass}">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="control" data-size={size} data-invalid={!!error} data-disabled={rest.disabled}>
+		{#if icon}<span class="slot left"><Icon name={icon} /></span>{/if}
+		<input {...rest} {id} bind:value aria-invalid={!!error || undefined} aria-describedby={error || hint ? `${id}-msg` : undefined} />
+		{#if right}<span class="slot right">{@render right()}</span>{/if}
+	</div>
+	{#if error || hint}<div class="tr-hint" id="{id}-msg" data-error={!!error}>{error ?? hint}</div>{/if}
+</div>
+
+<style>
+	.control {
+		--ring: var(--tr-primary);
+		display: flex; align-items: center; gap: 6px;
+		height: var(--tr-control-h); padding: 0 10px;
+		background: var(--tr-surface-container-low);
+		border: 1px solid var(--tr-outline-variant);
+		border-radius: var(--tr-radius-sm);
+		color: var(--tr-on-surface-variant);
+		transition: background-color var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease);
+	}
+	.control[data-size='sm'] { height: var(--tr-control-h-sm); font-size: var(--tr-text-sm); }
+	.control[data-size='lg'] { height: var(--tr-control-h-lg); }
+	/* Material tonal fill on hover */
+	.control:hover:not([data-disabled='true']) { background: var(--tr-surface-container); border-color: var(--tr-outline); }
+	/* Focus: tonal fill + 2px bottom indicator + soft glow — border width never changes, so layout doesn't shift */
+	.control:focus-within {
+		background: var(--tr-surface-container);
+		border-color: var(--ring);
+		box-shadow: inset 0 -2px 0 var(--ring), var(--tr-focus-ring);
+	}
+	.control[data-invalid='true'] { --ring: var(--tr-danger); border-color: var(--tr-danger); }
+	.control[data-invalid='true']:focus-within { box-shadow: inset 0 -2px 0 var(--ring), 0 0 0 3px color-mix(in srgb, var(--tr-danger) 30%, transparent); }
+	.control[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+	input {
+		flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
+		color: var(--tr-on-surface); font: inherit;
+	}
+	input::placeholder { color: var(--tr-placeholder); opacity: 1; }
+	.slot { display: inline-flex; align-items: center; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { IconName } from '../icons/paths.js';
+type Props = Omit<HTMLInputAttributes, 'size'> & {
+    value?: string | number | null;
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: IconName;
+    right?: Snippet;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/InputAddon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../icons/Icon.svelte';
+	import type { IconName } from '../icons/paths.js';
+
+	/** Static text or an icon attached to an input inside an <InputGroup>, e.g. `https://`, `$`, `.com`, `USD`. */
+	let { icon, children }: { icon?: IconName; children?: Snippet } = $props();
+</script>
+
+<span class="addon">
+	{#if icon}<Icon name={icon} />{/if}{#if children}{@render children()}{/if}
+</span>
+
+<style>
+	.addon {
+		display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: var(--tr-control-h); padding: 0 10px;
+		background: var(--tr-surface-container-high); color: var(--tr-on-surface-variant);
+		border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm);
+		font: 600 var(--tr-text-md) / 1 var(--tr-font-sans); white-space: nowrap; user-select: none;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from '../icons/paths.js';
+type $$ComponentProps = {
+    icon?: IconName;
+    children?: Snippet;
+};
+declare const InputAddon: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputAddon = ReturnType<typeof InputAddon>;
+export default InputAddon;