@dorsk/tsumikit 0.2.3 → 0.2.5

package/dist/components/atoms/Icon.svelte

@@ -1,40 +1,91 @@
 <script lang="ts" module>
-	// Open icon system. A curated, dependency-free set ships as named glyphs, but
-	// the atom is NOT closed: pass a `children` snippet of raw <path>/<circle>/…
-	// (24×24 viewBox) to render any icon without adding it to the registry, or
-	// register project icons by extending PATHS in your own wrapper. Sized at 1em
-	// so it tracks the surrounding text (and the --fs-scale font control).
-	export type IconName =
-		| 'archive'
-		| 'back'
-		| 'check'
-		| 'chevron-down'
-		| 'copy'
-		| 'download'
-		| 'edit'
-		| 'external'
-		| 'filter'
-		| 'folder'
-		| 'fork'
-		| 'image'
-		| 'info'
-		| 'link'
-		| 'live'
-		| 'markdown'
-		| 'menu'
-		| 'more'
-		| 'plus'
-		| 'retry'
-		| 'search'
-		| 'send'
-		| 'settings'
-		| 'star'
-		| 'stop'
-		| 'tag'
-		| 'trash'
-		| 'upload'
-		| 'warning'
-		| 'x';
+	// Open icon system. A curated, dependency-free set ships as named glyphs
+	// (lucide path data, 24×24 viewBox, 2px stroke), but the atom is NOT closed:
+	// pass a `children` snippet of raw <path>/<circle>/… to render any icon —
+	// e.g. a lucide-svelte component's contents — without adding it to the
+	// registry. Sized at 1em so it tracks the surrounding text (and the
+	// --fs-scale font control).
+	const ICONS = {
+		// — navigation / chevrons —
+		back: '<path d="m12 19-7-7 7-7" /><path d="M19 12H5" />',
+		'arrow-right': '<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />',
+		'arrow-up': '<path d="m5 12 7-7 7 7" /><path d="M12 19V5" />',
+		'arrow-down': '<path d="M12 5v14" /><path d="m19 12-7 7-7-7" />',
+		'chevron-up': '<path d="m18 15-6-6-6 6" />',
+		'chevron-down': '<path d="m6 9 6 6 6-6" />',
+		'chevron-left': '<path d="m15 18-6-6 6-6" />',
+		'chevron-right': '<path d="m9 18 6-6-6-6" />',
+		menu: '<path d="M4 5h16" /><path d="M4 12h16" /><path d="M4 19h16" />',
+		more: '<circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />',
+		'external': '<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />',
+		'log-out': '<path d="m16 17 5-5-5-5" /><path d="M21 12H9" /><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />',
+
+		// — actions —
+		plus: '<path d="M5 12h14" /><path d="M12 5v14" />',
+		minus: '<path d="M5 12h14" />',
+		check: '<path d="M20 6 9 17l-5-5" />',
+		x: '<path d="M18 6 6 18" /><path d="m6 6 12 12" />',
+		search: '<path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" />',
+		filter: '<path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" />',
+		copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />',
+		edit: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /><path d="m15 5 4 4" />',
+		trash: '<path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />',
+		save: '<path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" /><path d="M7 3v4a1 1 0 0 0 1 1h7" />',
+		download: '<path d="M12 15V3" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m7 10 5 5 5-5" />',
+		upload: '<path d="M12 3v12" /><path d="m17 8-5-5-5 5" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />',
+		send: '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" /><path d="m21.854 2.147-10.94 10.939" />',
+		share: '<circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" /><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />',
+		retry: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" />',
+		settings: '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />',
+
+		// — media playback —
+		play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />',
+		pause: '<rect x="14" y="3" width="5" height="18" rx="1" /><rect x="5" y="3" width="5" height="18" rx="1" />',
+		stop: '<rect width="18" height="18" x="3" y="3" rx="2" />',
+
+		// — files / content —
+		file: '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" />',
+		'file-text': '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" />',
+		folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />',
+		archive: '<rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />',
+		image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />',
+		markdown: '<rect x="3" y="5" width="18" height="14" rx="2" /><path d="M7 15V9l3 3 3-3v6" /><path d="m15 11 2 2 2-2" />',
+		list: '<path d="M3 5h.01" /><path d="M3 12h.01" /><path d="M3 19h.01" /><path d="M8 5h13" /><path d="M8 12h13" /><path d="M8 19h13" />',
+		grid: '<rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" />',
+
+		// — objects / status —
+		link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />',
+		tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />',
+		bookmark: '<path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />',
+		star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />',
+		heart: '<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />',
+		fork: '<circle cx="12" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><circle cx="18" cy="6" r="3" /><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" /><path d="M12 12v3" />',
+		live: '<circle cx="12" cy="12" r="5" />',
+		eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" />',
+		'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" /><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" /><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" /><path d="m2 2 20 20" />',
+		lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />',
+		unlock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 9.9-1" />',
+		bell: '<path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />',
+		mail: '<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /><rect x="2" y="4" width="20" height="16" rx="2" />',
+		calendar: '<path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />',
+		clock: '<circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />',
+		home: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />',
+		user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />',
+		users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" />',
+		sun: '<circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />',
+		moon: '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />',
+		loader: '<path d="M21 12a9 9 0 1 1-6.219-8.56" />',
+
+		// — circled status —
+		info: '<circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />',
+		warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />',
+		help: '<circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" />',
+		'check-circle': '<circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />',
+		'x-circle': '<circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />',
+		'alert-circle': '<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />',
+	} as const;
+
+	export type IconName = keyof typeof ICONS;
 
 	// Glyphs that read better filled than stroked.
 	const FILLED = new Set<IconName>(['stop', 'star', 'live']);
@@ -58,7 +109,8 @@
 		/** When set, the icon is exposed to AT with this label; otherwise it is
 		 *  decorative (aria-hidden) and the parent control carries the label. */
 		label?: string;
-		/** Raw SVG markup (24×24 viewBox) — overrides `name`. */
+		/** Raw SVG markup (24×24 viewBox) — overrides `name`. Pass a lucide-svelte
+		 *  component's contents here to render any icon not in the registry. */
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
@@ -82,66 +134,9 @@
 >
 	{#if children}
 		{@render children()}
-	{:else if name === 'search'}
-		<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
-	{:else if name === 'back'}
-		<path d="m15 18-6-6 6-6" />
-	{:else if name === 'check'}
-		<path d="M20 6 9 17l-5-5" />
-	{:else if name === 'x'}
-		<path d="M18 6 6 18" /><path d="m6 6 12 12" />
-	{:else if name === 'plus'}
-		<path d="M12 5v14" /><path d="M5 12h14" />
-	{:else if name === 'chevron-down'}
-		<path d="m6 9 6 6 6-6" />
-	{:else if name === 'menu'}
-		<path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" />
-	{:else if name === 'archive'}
-		<rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><path d="M9 12h6" />
-	{:else if name === 'trash'}
-		<path d="M3 6h18" /><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" /><path d="M6 6v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6" /><path d="M10 11v6" /><path d="M14 11v6" />
-	{:else if name === 'download'}
-		<path d="M12 3v12" /><path d="m7 10 5 5 5-5" /><path d="M4 19h16" />
-	{:else if name === 'upload'}
-		<path d="M12 15V3" /><path d="m7 8 5-5 5 5" /><path d="M4 19h16" />
-	{:else if name === 'copy'}
-		<rect x="9" y="9" width="12" height="12" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-	{:else if name === 'edit'}
-		<path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
-	{:else if name === 'folder'}
-		<path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
-	{:else if name === 'link'}
-		<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-	{:else if name === 'external'}
-		<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
-	{:else if name === 'markdown'}
-		<rect x="3" y="5" width="18" height="14" rx="2" /><path d="M7 15V9l3 3 3-3v6" /><path d="m15 11 2 2 2-2" />
-	{:else if name === 'image'}
-		<rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.8" /><path d="m21 15-4.5-4.5L7 21" />
-	{:else if name === 'fork'}
-		<circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="12" cy="19" r="2.5" /><path d="M6 8.5v2a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-2" /><path d="M12 13.5v3" />
-	{:else if name === 'more'}
-		<circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
-	{:else if name === 'settings'}
-		<circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
-	{:else if name === 'retry'}
-		<path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 3v6h-6" />
-	{:else if name === 'stop'}
-		<rect x="6" y="6" width="12" height="12" rx="1.5" />
-	{:else if name === 'tag'}
-		<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><path d="M7.5 7.5h.01" />
-	{:else if name === 'star'}
-		<path d="M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.9l-5.8 3.05 1.1-6.47-4.7-4.58 6.5-.95z" />
-	{:else if name === 'live'}
-		<circle cx="12" cy="12" r="5" />
-	{:else if name === 'send'}
-		<path d="M22 2 11 13" /><path d="M22 2 15 22l-4-9-9-4z" />
-	{:else if name === 'filter'}
-		<path d="M3 4h18l-7 8v6l-4 2v-10z" />
-	{:else if name === 'info'}
-		<circle cx="12" cy="12" r="9" /><path d="M12 11v5" /><path d="M12 8h.01" />
-	{:else if name === 'warning'}
-		<path d="M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4" /><path d="M12 17h.01" />
+	{:else if name}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, static path data -->
+		{@html ICONS[name]}
 	{/if}
 </svg>
 

package/dist/components/atoms/Icon.svelte.d.ts

@@ -1,4 +1,72 @@
-export type IconName = 'archive' | 'back' | 'check' | 'chevron-down' | 'copy' | 'download' | 'edit' | 'external' | 'filter' | 'folder' | 'fork' | 'image' | 'info' | 'link' | 'live' | 'markdown' | 'menu' | 'more' | 'plus' | 'retry' | 'search' | 'send' | 'settings' | 'star' | 'stop' | 'tag' | 'trash' | 'upload' | 'warning' | 'x';
+declare const ICONS: {
+    readonly back: "<path d=\"m12 19-7-7 7-7\" /><path d=\"M19 12H5\" />";
+    readonly 'arrow-right': "<path d=\"M5 12h14\" /><path d=\"m12 5 7 7-7 7\" />";
+    readonly 'arrow-up': "<path d=\"m5 12 7-7 7 7\" /><path d=\"M12 19V5\" />";
+    readonly 'arrow-down': "<path d=\"M12 5v14\" /><path d=\"m19 12-7 7-7-7\" />";
+    readonly 'chevron-up': "<path d=\"m18 15-6-6-6 6\" />";
+    readonly 'chevron-down': "<path d=\"m6 9 6 6 6-6\" />";
+    readonly 'chevron-left': "<path d=\"m15 18-6-6 6-6\" />";
+    readonly 'chevron-right': "<path d=\"m9 18 6-6-6-6\" />";
+    readonly menu: "<path d=\"M4 5h16\" /><path d=\"M4 12h16\" /><path d=\"M4 19h16\" />";
+    readonly more: "<circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"19\" cy=\"12\" r=\"1\" /><circle cx=\"5\" cy=\"12\" r=\"1\" />";
+    readonly external: "<path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />";
+    readonly 'log-out': "<path d=\"m16 17 5-5-5-5\" /><path d=\"M21 12H9\" /><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />";
+    readonly plus: "<path d=\"M5 12h14\" /><path d=\"M12 5v14\" />";
+    readonly minus: "<path d=\"M5 12h14\" />";
+    readonly check: "<path d=\"M20 6 9 17l-5-5\" />";
+    readonly x: "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />";
+    readonly search: "<path d=\"m21 21-4.34-4.34\" /><circle cx=\"11\" cy=\"11\" r=\"8\" />";
+    readonly filter: "<path d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\" />";
+    readonly copy: "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" /><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />";
+    readonly edit: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /><path d=\"m15 5 4 4\" />";
+    readonly trash: "<path d=\"M10 11v6\" /><path d=\"M14 11v6\" /><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\" /><path d=\"M3 6h18\" /><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />";
+    readonly save: "<path d=\"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\" /><path d=\"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7\" /><path d=\"M7 3v4a1 1 0 0 0 1 1h7\" />";
+    readonly download: "<path d=\"M12 15V3\" /><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" /><path d=\"m7 10 5 5 5-5\" />";
+    readonly upload: "<path d=\"M12 3v12\" /><path d=\"m17 8-5-5-5 5\" /><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />";
+    readonly send: "<path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\" /><path d=\"m21.854 2.147-10.94 10.939\" />";
+    readonly share: "<circle cx=\"18\" cy=\"5\" r=\"3\" /><circle cx=\"6\" cy=\"12\" r=\"3\" /><circle cx=\"18\" cy=\"19\" r=\"3\" /><line x1=\"8.59\" x2=\"15.42\" y1=\"13.51\" y2=\"17.49\" /><line x1=\"15.41\" x2=\"8.59\" y1=\"6.51\" y2=\"10.49\" />";
+    readonly retry: "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" />";
+    readonly settings: "<path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />";
+    readonly play: "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />";
+    readonly pause: "<rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" /><rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />";
+    readonly stop: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />";
+    readonly file: "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />";
+    readonly 'file-text': "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" /><path d=\"M10 9H8\" /><path d=\"M16 13H8\" /><path d=\"M16 17H8\" />";
+    readonly folder: "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />";
+    readonly archive: "<rect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\" /><path d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8\" /><path d=\"M10 12h4\" />";
+    readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /><circle cx=\"9\" cy=\"9\" r=\"2\" /><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" />";
+    readonly markdown: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><path d=\"M7 15V9l3 3 3-3v6\" /><path d=\"m15 11 2 2 2-2\" />";
+    readonly list: "<path d=\"M3 5h.01\" /><path d=\"M3 12h.01\" /><path d=\"M3 19h.01\" /><path d=\"M8 5h13\" /><path d=\"M8 12h13\" /><path d=\"M8 19h13\" />";
+    readonly grid: "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\" />";
+    readonly link: "<path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />";
+    readonly tag: "<path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
+    readonly bookmark: "<path d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\" />";
+    readonly star: "<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" />";
+    readonly heart: "<path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />";
+    readonly fork: "<circle cx=\"12\" cy=\"18\" r=\"3\" /><circle cx=\"6\" cy=\"6\" r=\"3\" /><circle cx=\"18\" cy=\"6\" r=\"3\" /><path d=\"M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9\" /><path d=\"M12 12v3\" />";
+    readonly live: "<circle cx=\"12\" cy=\"12\" r=\"5\" />";
+    readonly eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />";
+    readonly 'eye-off': "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" /><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" /><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" /><path d=\"m2 2 20 20\" />";
+    readonly lock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\" /><path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />";
+    readonly unlock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\" /><path d=\"M7 11V7a5 5 0 0 1 9.9-1\" />";
+    readonly bell: "<path d=\"M10.268 21a2 2 0 0 0 3.464 0\" /><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\" />";
+    readonly mail: "<path d=\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\" /><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" />";
+    readonly calendar: "<path d=\"M8 2v4\" /><path d=\"M16 2v4\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" /><path d=\"M3 10h18\" />";
+    readonly clock: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 6v6l4 2\" />";
+    readonly home: "<path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" /><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />";
+    readonly user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" /><circle cx=\"12\" cy=\"7\" r=\"4\" />";
+    readonly users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /><path d=\"M16 3.128a4 4 0 0 1 0 7.744\" /><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" /><circle cx=\"9\" cy=\"7\" r=\"4\" />";
+    readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\" /><path d=\"M12 2v2\" /><path d=\"M12 20v2\" /><path d=\"m4.93 4.93 1.41 1.41\" /><path d=\"m17.66 17.66 1.41 1.41\" /><path d=\"M2 12h2\" /><path d=\"M20 12h2\" /><path d=\"m6.34 17.66-1.41 1.41\" /><path d=\"m19.07 4.93-1.41 1.41\" />";
+    readonly moon: "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />";
+    readonly loader: "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />";
+    readonly info: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />";
+    readonly warning: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />";
+    readonly help: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" /><path d=\"M12 17h.01\" />";
+    readonly 'check-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m9 12 2 2 4-4\" />";
+    readonly 'x-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" />";
+    readonly 'alert-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />";
+};
+export type IconName = keyof typeof ICONS;
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Named glyph from the registry. Omit when supplying `children`. */
@@ -9,7 +77,8 @@ type $$ComponentProps = {
     /** When set, the icon is exposed to AT with this label; otherwise it is
      *  decorative (aria-hidden) and the parent control carries the label. */
     label?: string;
-    /** Raw SVG markup (24×24 viewBox) — overrides `name`. */
+    /** Raw SVG markup (24×24 viewBox) — overrides `name`. Pass a lucide-svelte
+     *  component's contents here to render any icon not in the registry. */
     children?: Snippet;
     [key: string]: unknown;
 };

package/dist/components/molecules/IconButton.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Button from '../atoms/Button.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	type IconButtonProps = HTMLButtonAttributes & {
-		icon: IconName;
+		/** Named glyph from the registry. Omit when supplying `children`. */
+		icon?: IconName;
+		/** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
+		 *  lucide-svelte component's contents to render any off-registry icon. */
+		children?: Snippet;
 		label: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		size?: number;
@@ -23,6 +28,7 @@
 
 	let {
 		icon,
+		children,
 		label,
 		title = label,
 		variant = 'ghost',
@@ -52,5 +58,9 @@
 	class={klass}
 	aria-label={label}
 >
-	<Icon name={icon} {size} />
+	{#if children}
+		<Icon {size}>{@render children()}</Icon>
+	{:else}
+		<Icon name={icon} {size} />
+	{/if}
 </Button>

package/dist/components/molecules/IconButton.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconName } from '../atoms/Icon.svelte';
 type IconButtonProps = HTMLButtonAttributes & {
-    icon: IconName;
+    /** Named glyph from the registry. Omit when supplying `children`. */
+    icon?: IconName;
+    /** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
+     *  lucide-svelte component's contents to render any off-registry icon. */
+    children?: Snippet;
     label: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
     size?: number;

package/dist/components/molecules/Timestamp.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	// A timestamp you can read four ways and inspect in one place. Inline it
+	// renders in the chosen `mode` (ISO / local / clock / relative); by default
+	// clicking it opens a popover that lays out the same instant as ISO-UTC,
+	// local, relative, the IANA zone and the unix epoch — so the one value
+	// answers "when, exactly?" without leaving the row. The popover is read-only
+	// unless you opt into `selectable`, which adds buttons to switch the inline
+	// display mode (handy in a demo / settings surface, rarely in a data row).
+	//
+	// All formatting is delegated to the pure helpers in `$lib/timestamp`; this
+	// component owns only the mode state, the live tick for relative mode, and
+	// the popover chrome. The trigger is a real <time datetime> element for
+	// machine-readability and a11y.
+	import Popover from './Popover.svelte';
+	import {
+		formatTimestamp,
+		localTimeZone,
+		relativeTime,
+		toDate,
+		toEpochSeconds,
+		toISO,
+		toLocal,
+		type TimeInput,
+		type TimestampMode
+	} from '../../timestamp';
+
+	type Tone = 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
+
+	let {
+		value,
+		mode = 'iso',
+		details = true,
+		selectable = false,
+		mono = false,
+		tone = 'muted',
+		tickMs = 30_000
+	}: {
+		/** The instant: a Date, epoch milliseconds, or an ISO/parseable string. */
+		value: TimeInput;
+		/** Inline display mode. Default 'iso'. */
+		mode?: TimestampMode;
+		/** Click to open the details popover (UTC / local / relative / zone /
+		 *  epoch). Default true. When false, renders as a bare inline <time>. */
+		details?: boolean;
+		/** Add mode-switch buttons inside the popover so the viewer can change the
+		 *  inline display mode. Default false. Implies `details`. */
+		selectable?: boolean;
+		/** Render in the monospace font (tabular figures stay on regardless). */
+		mono?: boolean;
+		/** Text colour, mirroring <Text> tones. Default 'muted' — timestamps read
+		 *  as subdued metadata; pass 'inherit' to blend with surrounding copy. */
+		tone?: Tone;
+		/** How often relative mode re-renders so "3m ago" stays fresh. */
+		tickMs?: number;
+	} = $props();
+
+	// User's in-popover choice overrides the `mode` prop; until they pick, we
+	// follow the prop (so a parent can still drive it reactively). Deriving —
+	// rather than seeding $state from a prop — keeps both behaviours and avoids
+	// capturing only the prop's initial value.
+	let override = $state<TimestampMode | null>(null);
+	const current = $derived(override ?? mode);
+	// Live clock for relative mode only — a single timer that exists solely while
+	// relative is on screen, so static modes cost nothing.
+	let now = $state(Date.now());
+	$effect(() => {
+		if (current !== 'relative') return;
+		const t = setInterval(() => (now = Date.now()), tickMs);
+		return () => clearInterval(t);
+	});
+
+	const date = $derived(toDate(value));
+	const label = $derived(formatTimestamp(value, current, now));
+	// datetime= wants a valid ISO string; omit it entirely on bad input.
+	const machine = $derived(date ? toISO(date) : undefined);
+	const showPopover = $derived(details || selectable);
+	const cls = $derived(`ts tone-${tone}${mono ? ' mono' : ''}`);
+
+	const MODES: { id: TimestampMode; name: string }[] = [
+		{ id: 'iso', name: 'ISO' },
+		{ id: 'local', name: 'Local' },
+		{ id: 'time', name: 'Time' },
+		{ id: 'relative', name: 'Relative' }
+	];
+
+	const rows = $derived(
+		date
+			? [
+					{ k: 'UTC', v: toISO(date) },
+					{ k: 'Local', v: toLocal(date) },
+					{ k: 'Relative', v: relativeTime(date, now) },
+					{ k: 'Time zone', v: localTimeZone() },
+					{ k: 'Unix', v: String(toEpochSeconds(date)) }
+				]
+			: []
+	);
+</script>
+
+{#if !date}
+	<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
+	<time class="{cls} ts-invalid">—</time>
+{:else if showPopover}
+	<Popover label="Timestamp details" placement="bottom-start" bare>
+		{#snippet trigger()}
+			<time class="{cls} ts-trigger" datetime={machine}>{label}</time>
+		{/snippet}
+		<div class="ts-panel">
+			{#if selectable}
+				<div class="ts-modes" role="group" aria-label="Display mode">
+					{#each MODES as m (m.id)}
+						<button
+							type="button"
+							class="ts-mode"
+							class:active={current === m.id}
+							aria-pressed={current === m.id}
+							onclick={() => (override = m.id)}
+						>
+							{m.name}
+						</button>
+					{/each}
+				</div>
+			{/if}
+			<dl class="ts-details">
+				{#each rows as row (row.k)}
+					<dt>{row.k}</dt>
+					<dd>{row.v}</dd>
+				{/each}
+			</dl>
+		</div>
+	</Popover>
+{:else}
+	<time class={cls} datetime={machine}>{label}</time>
+{/if}
+
+<style>
+	.ts {
+		font-variant-numeric: tabular-nums;
+	}
+	.mono {
+		font-family: var(--font-mono);
+	}
+	/* Tones mirror <Text>; 'inherit' deliberately sets no colour so the timestamp
+	   blends into surrounding copy. */
+	.tone-default {
+		color: var(--text);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-faint {
+		color: var(--text-faint);
+	}
+	.tone-danger {
+		color: var(--danger);
+	}
+	.tone-accent {
+		color: var(--accent);
+	}
+	.ts-invalid {
+		color: var(--text-muted);
+	}
+	/* The popover trigger is a plain inline run of text that hints it's clickable
+	   — no button chrome (we pass `bare`), just an underline on hover/focus. */
+	.ts-trigger {
+		cursor: pointer;
+		border-radius: var(--r-sm);
+		text-decoration-line: underline;
+		text-decoration-style: dotted;
+		text-underline-offset: 2px;
+		text-decoration-color: var(--border-strong);
+	}
+	.ts-trigger:hover,
+	.ts-trigger:focus-visible {
+		text-decoration-color: currentColor;
+	}
+
+	.ts-panel {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		padding: var(--sp-1);
+	}
+	.ts-modes {
+		display: flex;
+		gap: var(--sp-1);
+	}
+	.ts-mode {
+		flex: 1;
+		padding: var(--sp-1) var(--sp-2);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-sm);
+		background: transparent;
+		color: var(--text-muted);
+		font-size: var(--fs-xs);
+		cursor: pointer;
+		transition:
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.ts-mode:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+	}
+	.ts-mode.active {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+		border-color: var(--text);
+	}
+	.ts-details {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--sp-1) var(--sp-2);
+		margin: 0;
+		font-size: var(--fs-xs);
+	}
+	.ts-details dt {
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.ts-details dd {
+		margin: 0;
+		color: var(--text);
+		font-variant-numeric: tabular-nums;
+		overflow-wrap: anywhere;
+	}
+</style>

package/dist/components/molecules/Timestamp.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type TimeInput, type TimestampMode } from '../../timestamp';
+type Tone = 'inherit' | 'default' | 'muted' | 'faint' | 'danger' | 'accent';
+type $$ComponentProps = {
+    /** The instant: a Date, epoch milliseconds, or an ISO/parseable string. */
+    value: TimeInput;
+    /** Inline display mode. Default 'iso'. */
+    mode?: TimestampMode;
+    /** Click to open the details popover (UTC / local / relative / zone /
+     *  epoch). Default true. When false, renders as a bare inline <time>. */
+    details?: boolean;
+    /** Add mode-switch buttons inside the popover so the viewer can change the
+     *  inline display mode. Default false. Implies `details`. */
+    selectable?: boolean;
+    /** Render in the monospace font (tabular figures stay on regardless). */
+    mono?: boolean;
+    /** Text colour, mirroring <Text> tones. Default 'muted' — timestamps read
+     *  as subdued metadata; pass 'inherit' to blend with surrounding copy. */
+    tone?: Tone;
+    /** How often relative mode re-renders so "3m ago" stays fresh. */
+    tickMs?: number;
+};
+declare const Timestamp: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timestamp = ReturnType<typeof Timestamp>;
+export default Timestamp;

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { default as RadioGroup, type RadioOption, } from './components/molecules
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
+export { default as Timestamp } from './components/molecules/Timestamp.svelte';
 export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
@@ -46,4 +47,5 @@ export { type Column, default as DataTable } from './components/organisms/DataTa
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
+export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -46,6 +46,7 @@ export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
+export { default as Timestamp } from './components/molecules/Timestamp.svelte';
 export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
@@ -56,4 +57,5 @@ export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts } from './stores/toast.svelte';
+export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { truncate } from './truncate';

package/dist/timestamp.d.ts

@@ -0,0 +1,23 @@
+export type TimeInput = Date | number | string;
+/** How the timestamp text renders inline. */
+export type TimestampMode = 'iso' | 'local' | 'time' | 'relative';
+/** Coerce a loose input to a Date, or null when it can't be parsed. */
+export declare function toDate(value: TimeInput): Date | null;
+/** Full ISO 8601, UTC — `2026-06-14T07:30:00.000Z`. */
+export declare function toISO(d: Date): string;
+/** Locale date+time in the viewer's zone — `6/14/2026, 4:30:00 PM`. */
+export declare function toLocal(d: Date): string;
+/** Clock only, zero-padded `HH:MM:SS`, in the viewer's local zone. */
+export declare function toClock(d: Date): string;
+/** Unix epoch in whole seconds. */
+export declare function toEpochSeconds(d: Date): number;
+/** The viewer's IANA time zone — `Asia/Tokyo`, `UTC`, … */
+export declare function localTimeZone(): string;
+/**
+ * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
+ * falling back to a locale date once past ~30 days. Future instants read
+ * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ */
+export declare function relativeTime(value: TimeInput, now?: number): string;
+/** Render a date in the chosen inline mode. Returns '' for unparseable input. */
+export declare function formatTimestamp(value: TimeInput, mode: TimestampMode, now?: number): string;

package/dist/timestamp.js

@@ -0,0 +1,74 @@
+// Pure date-formatting helpers behind <Timestamp> — the logic lives here (and
+// stays unit-testable / framework-free) while the component owns only the
+// display-mode switching and the popover. Everything accepts the same loose
+// `TimeInput` (Date | epoch ms | ISO string) and tolerates bad input by
+// returning '' rather than throwing, so a single malformed value never takes
+// down a table row.
+/** Coerce a loose input to a Date, or null when it can't be parsed. */
+export function toDate(value) {
+    const d = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+/** Full ISO 8601, UTC — `2026-06-14T07:30:00.000Z`. */
+export function toISO(d) {
+    return d.toISOString();
+}
+/** Locale date+time in the viewer's zone — `6/14/2026, 4:30:00 PM`. */
+export function toLocal(d) {
+    return d.toLocaleString();
+}
+/** Clock only, zero-padded `HH:MM:SS`, in the viewer's local zone. */
+export function toClock(d) {
+    const p = (n) => String(n).padStart(2, '0');
+    return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+/** Unix epoch in whole seconds. */
+export function toEpochSeconds(d) {
+    return Math.floor(d.getTime() / 1000);
+}
+/** The viewer's IANA time zone — `Asia/Tokyo`, `UTC`, … */
+export function localTimeZone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/**
+ * "3m ago", "2h ago", "5d ago" — past-relative, coarsening as it ages and
+ * falling back to a locale date once past ~30 days. Future instants read
+ * "in 3m" etc. `now` is injectable so callers (and tests) control the clock.
+ */
+export function relativeTime(value, now = Date.now()) {
+    const d = toDate(value);
+    if (!d)
+        return '';
+    const deltaMs = now - d.getTime();
+    const future = deltaMs < 0;
+    const secs = Math.floor(Math.abs(deltaMs) / 1000);
+    const suffix = (s) => (future ? `in ${s}` : `${s} ago`);
+    if (secs < 60)
+        return suffix(`${secs}s`);
+    const mins = Math.floor(secs / 60);
+    if (mins < 60)
+        return suffix(`${mins}m`);
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24)
+        return suffix(`${hrs}h`);
+    const days = Math.floor(hrs / 24);
+    if (days < 30)
+        return suffix(`${days}d`);
+    return d.toLocaleDateString();
+}
+/** Render a date in the chosen inline mode. Returns '' for unparseable input. */
+export function formatTimestamp(value, mode, now) {
+    const d = toDate(value);
+    if (!d)
+        return '';
+    switch (mode) {
+        case 'iso':
+            return toISO(d);
+        case 'local':
+            return toLocal(d);
+        case 'time':
+            return toClock(d);
+        case 'relative':
+            return relativeTime(d, now);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",