@dorsk/tsumikit 0.45.0 → 0.47.0

package/README.md

@@ -64,6 +64,18 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 - `<ThemePicker />` and `<FontScalePicker />` wire the stores to the UI. Theme
   is persisted to `localStorage` and applied with no flash (head snippet in
   `app.html`) and updates the mobile `<meta name="theme-color">`.
+- The store keeps a **preference**, not just an id: one remembered light theme,
+  one remembered dark theme, and which of the two is pinned — or `auto`, which
+  follows `prefers-color-scheme` and repaints when the system flips.
+  `theme.choose(id | 'auto')`, `theme.mode`, `theme.pref`, `theme.resolved`,
+  `theme.hydrate(pref)` (replay a server-side preference) and
+  `theme.onchange = (pref) => …` (mirror it back). `theme.set(id)` and
+  `theme.current` are unchanged. `<ThemePicker auto />` adds the "Auto" row;
+  its labels (`autoLabel`, `autoHelp`, `lightLabel`, `darkLabel`) are props.
+- **Storage format (0.47):** `localStorage['tsumikit-theme']` now holds
+  `{"mode","light","dark"}` instead of a bare theme id. A bare id left by an
+  older version still loads — it pins its own slot — but a downgrade will not
+  read the new blob and falls back to the default theme.
 
 ### Stylesheets
 
@@ -164,7 +176,8 @@ Tabs, RadioGroup (`variant="rows"`: bordered rows, per-option `note`/`descriptio
 `action(option)` trailing control that never toggles, `below(option)` inline panel),
 Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
-ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
+ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme),
+EmojiPicker (popover with a searchable EN+FR glyph catalogue, grouped tabs, roving-tabindex grid; pass `groups` to swap the catalogue), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
 CapBar (consumption track with a draggable, keyboard-steppable cap handle that

package/dist/components/molecules/EmojiPicker.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	// Emoji chooser: a Popover holding a search box, a tab strip of catalogue
+	// groups and a grid of glyphs. Desktop browsers have no emoji keyboard, so
+	// this is the click-only path next to a plain text field.
+	import Input from '../atoms/Input.svelte';
+	import Popover from './Popover.svelte';
+	import { type EmojiGroup, EMOJI_GROUPS, searchEmoji } from '../../emoji';
+
+	let {
+		value = '',
+		onselect,
+		groups = EMOJI_GROUPS,
+		columns = 8,
+		label = 'Choose an emoji',
+		searchLabel = 'Search an emoji…',
+		emptyLabel = 'No emoji matches.',
+		placement = 'bottom-start',
+		triggerClass = '',
+		disabled = false,
+		class: klass = '',
+		style: styleProp = '',
+	}: {
+		/** The current glyph, highlighted in the grid. */
+		value?: string;
+		onselect: (emoji: string) => void;
+		/** Catalogue to browse; defaults to the kit's EN+FR keyword set. */
+		groups?: readonly EmojiGroup[];
+		columns?: number;
+		/** Accessible name of the trigger and of the glyph grid. */
+		label?: string;
+		searchLabel?: string;
+		emptyLabel?: string;
+		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+		triggerClass?: string;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const uid = `emoji-${Math.random().toString(36).slice(2, 8)}`;
+	const tabId = (id: string) => `${uid}-tab-${id}`;
+	const panelId = `${uid}-panel`;
+
+	let query = $state('');
+	let groupId = $state<string | null>(null);
+	let cursor = $state(0);
+	let gridEl = $state<HTMLDivElement | null>(null);
+
+	const current = $derived(groups.find((g) => g.id === groupId) ?? groups[0]);
+	const searching = $derived(query.trim().length > 0);
+	const shown = $derived(searching ? searchEmoji(query, groups) : (current?.entries ?? []));
+	const active = $derived(Math.min(cursor, Math.max(shown.length - 1, 0)));
+	const picked = $derived(value.trim());
+
+	function focusCell(i: number) {
+		const cells = gridEl?.querySelectorAll<HTMLElement>('[role="option"]');
+		if (!cells?.length) return;
+		cursor = Math.max(0, Math.min(i, cells.length - 1));
+		cells[cursor].focus();
+	}
+
+	function pick(emoji: string, close: () => void) {
+		onselect(emoji);
+		query = '';
+		close();
+	}
+
+	function onGridClick(e: MouseEvent, close: () => void) {
+		const cell = (e.target as HTMLElement | null)?.closest<HTMLElement>('[role="option"]');
+		if (cell?.dataset.emoji) pick(cell.dataset.emoji, close);
+	}
+
+	function onGridKeydown(e: KeyboardEvent, close: () => void) {
+		const keys: Record<string, number> = {
+			ArrowRight: active + 1,
+			ArrowLeft: active - 1,
+			ArrowDown: active + columns,
+			ArrowUp: active - columns,
+			Home: 0,
+			End: shown.length - 1,
+		};
+		if (e.key in keys) {
+			e.preventDefault();
+			focusCell(keys[e.key]);
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			const emoji = shown[active]?.emoji;
+			if (emoji) pick(emoji, close);
+		}
+	}
+
+	function onTabsKeydown(e: KeyboardEvent) {
+		const i = groups.findIndex((g) => g.id === current?.id);
+		const next = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : null;
+		if (next === null) return;
+		e.preventDefault();
+		const g = groups[(next + groups.length) % groups.length];
+		groupId = g.id;
+		cursor = 0;
+		document.getElementById(tabId(g.id))?.focus();
+	}
+</script>
+
+<Popover
+	{label}
+	{placement}
+	{triggerClass}
+	{disabled}
+	class={klass}
+	style={styleProp}
+	control
+	role="dialog"
+	onopen={() => {
+		query = '';
+		cursor = 0;
+	}}
+>
+	{#snippet trigger()}
+		<span class="emoji-trigger" aria-hidden="true">{picked || '🙂'}</span>
+	{/snippet}
+
+	{#snippet children({ close }: { close: () => void })}
+		<div class="picker">
+			<Input
+				bind:value={query}
+				placeholder={searchLabel}
+				aria-label={searchLabel}
+				size="sm"
+				clearable
+				onclear={() => (query = '')}
+				style="width:100%"
+			/>
+
+			{#if !searching}
+				<div class="tabs" role="tablist" tabindex={-1} aria-label={label} onkeydown={onTabsKeydown}>
+					{#each groups as g (g.id)}
+						<button
+							type="button"
+							role="tab"
+							id={tabId(g.id)}
+							class="tab"
+							class:on={g.id === current?.id}
+							aria-selected={g.id === current?.id}
+							aria-controls={panelId}
+							aria-label={g.label}
+							tabindex={g.id === current?.id ? 0 : -1}
+							onclick={() => {
+								groupId = g.id;
+								cursor = 0;
+							}}
+						>
+							<span aria-hidden="true">{g.icon}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<div
+				id={panelId}
+				role={searching ? undefined : 'tabpanel'}
+				aria-labelledby={searching || !current ? undefined : tabId(current.id)}
+			>
+				{#if shown.length}
+					<!-- Options are not buttons: `option` is only valid as a listbox child,
+					     and a roving tabindex keeps the grid to one tab stop. -->
+					<div
+						bind:this={gridEl}
+						class="grid"
+						role="listbox"
+						tabindex={-1}
+						aria-label={label}
+						style:--emoji-columns={columns}
+						onclick={(e) => onGridClick(e, close)}
+						onkeydown={(e) => onGridKeydown(e, close)}
+					>
+						{#each shown as x, i (x.emoji)}
+							<div
+								role="option"
+								class="cell"
+								class:on={x.emoji === picked}
+								aria-selected={x.emoji === picked}
+								data-emoji={x.emoji}
+								title={x.keys}
+								tabindex={i === active ? 0 : -1}
+							>
+								{x.emoji}
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<p class="empty">{emptyLabel}</p>
+				{/if}
+			</div>
+		</div>
+	{/snippet}
+</Popover>
+
+<style>
+	.emoji-trigger {
+		font-size: var(--fs-md);
+		line-height: 1;
+	}
+	.picker {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		width: min(20rem, calc(100vw - var(--sp-6)));
+	}
+	.tabs {
+		display: flex;
+		gap: var(--sp-1);
+	}
+	.tab,
+	.cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--sp-1);
+		border: 1px solid transparent;
+		border-radius: var(--r-sm);
+		background: none;
+		color: inherit;
+		font-size: var(--fs-lg);
+		line-height: 1;
+		cursor: pointer;
+	}
+	.tab.on,
+	.cell.on {
+		border-color: var(--accent);
+		background: var(--bg-elevated-2);
+	}
+	.tab:hover,
+	.cell:hover,
+	.tab:focus-visible,
+	.cell:focus-visible {
+		background: var(--bg-elevated-2);
+	}
+	.tab:focus-visible,
+	.cell:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(var(--emoji-columns), 1fr);
+		gap: var(--sp-1);
+		max-height: 14rem;
+		overflow-y: auto;
+	}
+	.empty {
+		margin: var(--sp-2) 0;
+		color: var(--text-muted);
+		font-size: var(--fs-xs);
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import { type EmojiGroup } from '../../emoji';
+type $$ComponentProps = {
+    /** The current glyph, highlighted in the grid. */
+    value?: string;
+    onselect: (emoji: string) => void;
+    /** Catalogue to browse; defaults to the kit's EN+FR keyword set. */
+    groups?: readonly EmojiGroup[];
+    columns?: number;
+    /** Accessible name of the trigger and of the glyph grid. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    triggerClass?: string;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+};
+declare const EmojiPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;

package/dist/components/molecules/ThemePicker.svelte

@@ -7,17 +7,45 @@
 	// has no [data-theme] block, so its swatch carries the :root values.
 	import Popover from './Popover.svelte';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
+	import { AUTO_THEME } from '../../theme-mode';
 
-	let { class: klass = '' }: { class?: string } = $props();
+	let {
+		auto = false,
+		autoLabel = 'Auto',
+		autoHelp = 'Follow the system light/dark setting',
+		lightLabel = 'Light',
+		darkLabel = 'Dark',
+		class: klass = '',
+	}: {
+		/** Offer an "auto" row that follows `prefers-color-scheme`, remembering
+		 *  one light and one dark theme. */
+		auto?: boolean;
+		autoLabel?: string;
+		autoHelp?: string;
+		lightLabel?: string;
+		darkLabel?: string;
+		class?: string;
+	} = $props();
 
 	let hovered = $state<ThemeDef | null>(null);
+	let hoveredAuto = $state(false);
+	const isAuto = $derived(auto && theme.mode === AUTO_THEME);
 	const shown = $derived(hovered ?? theme.option);
 	const groups = $derived(
 		(['light', 'dark'] as const).map((mode) => ({
 			mode,
-			themes: theme.all.filter((t) => t.mode === mode)
+			label: mode === 'light' ? lightLabel : darkLabel,
+			themes: theme.all.filter((t) => t.mode === mode),
 		}))
 	);
+	const named = (id: string) => theme.all.find((t) => t.id === id)?.label ?? id;
+	const autoCaption = $derived(`${autoLabel} · ${named(theme.pref.light)} / ${named(theme.pref.dark)}`);
+	const title = $derived(isAuto ? `${autoLabel} · ${theme.label}` : `Theme: ${theme.label}`);
+	const caption = $derived(
+		hoveredAuto || (isAuto && !hovered)
+			? autoCaption
+			: `${shown.icon ?? theme.fallbackIcon} ${shown.label}`
+	);
 </script>
 
 {#snippet swatch(id: string)}
@@ -26,18 +54,19 @@
 	</span>
 {/snippet}
 
-<Popover label="Theme: {theme.label}" placement="bottom-end" triggerClass={klass} box="md">
-	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" title="Theme: {theme.label}">{@render swatch(theme.current)}</span>{/snippet}
+<Popover label={title} placement="bottom-end" triggerClass={klass} box="md">
+	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(theme.current)}{#if isAuto}<span class="auto-dot" aria-hidden="true">◐</span>{/if}</span>{/snippet}
 	<div class="panel">
 		{#each groups as g (g.mode)}
-			<div class="group-label">{g.mode}</div>
-			<div class="grid" role="group" aria-label="{g.mode} themes">
+			<div class="group-label">{g.label}</div>
+			<div class="grid" role="group" aria-label="{g.label} themes">
 				{#each g.themes as t (t.id)}
 					<button
 						type="button"
 						class="cell"
-						class:current={t.id === theme.current}
-						aria-pressed={t.id === theme.current}
+						class:current={!isAuto && t.id === theme.current}
+						class:remembered={isAuto && t.id === theme.pref[g.mode]}
+						aria-pressed={!isAuto && t.id === theme.current}
 						aria-label={t.label}
 						title="{t.icon ?? theme.fallbackIcon} {t.label}"
 						onclick={() => theme.set(t.id)}
@@ -51,14 +80,50 @@
 				{/each}
 			</div>
 		{/each}
-		<div class="caption" aria-live="polite">{shown.icon ?? theme.fallbackIcon} {shown.label}</div>
+		{#if auto}
+			<button
+				type="button"
+				class="auto"
+				class:current={isAuto}
+				aria-pressed={isAuto}
+				title={autoCaption}
+				onclick={() => theme.choose(AUTO_THEME)}
+				onpointerenter={() => (hoveredAuto = true)}
+				onpointerleave={() => (hoveredAuto = false)}
+				onfocus={() => (hoveredAuto = true)}
+				onblur={() => (hoveredAuto = false)}
+			>
+				<span class="auto-glyph" aria-hidden="true">◐</span>
+				<span class="auto-text">
+					<span class="auto-name">{autoLabel}</span>
+					<span class="auto-help">{autoHelp}</span>
+				</span>
+				<span class="auto-pair" aria-hidden="true">
+					{@render swatch(theme.pref.light)}
+					<span class="slash">/</span>
+					{@render swatch(theme.pref.dark)}
+				</span>
+			</button>
+		{/if}
+		<div class="caption" aria-live="polite">{caption}</div>
 	</div>
 </Popover>
 
 <style>
 	.trigger {
+		position: relative;
 		display: inline-flex;
 	}
+	.auto-dot {
+		position: absolute;
+		right: -0.35rem;
+		bottom: -0.35rem;
+		border-radius: 50%;
+		background: var(--bg);
+		color: var(--text-muted);
+		font-size: var(--fs-xs);
+		line-height: 1;
+	}
 	.swatch {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
@@ -123,14 +188,68 @@
 	.cell.current {
 		border-color: var(--accent);
 	}
-	.cell:focus-visible {
+	.cell.remembered {
+		border-color: var(--accent);
+		border-style: dashed;
+	}
+	.cell:focus-visible,
+	.auto:focus-visible {
 		outline: 2px solid var(--accent);
 		outline-offset: 1px;
 	}
+	.auto {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+		margin-top: var(--sp-2);
+		padding: var(--sp-1) var(--sp-2);
+		border: 2px solid transparent;
+		border-top: 1px solid var(--border);
+		border-radius: var(--r-md);
+		background: none;
+		color: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	.auto:hover {
+		background: var(--bg-elevated-2);
+	}
+	.auto.current {
+		border-color: var(--accent);
+	}
+	.auto-glyph {
+		font-size: var(--fs-md);
+		line-height: 1;
+	}
+	.auto-text {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.auto-name {
+		font-size: var(--fs-sm);
+	}
+	.auto-help {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+		white-space: normal;
+	}
+	.auto-pair {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+	}
+	.slash {
+		color: var(--text-faint);
+		font-size: var(--fs-xs);
+	}
 	.caption {
 		margin-top: var(--sp-2);
 		text-align: center;
 		font-size: var(--fs-sm);
 		color: var(--text-muted);
+		white-space: normal;
 	}
 </style>

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

@@ -1,4 +1,11 @@
 type $$ComponentProps = {
+    /** Offer an "auto" row that follows `prefers-color-scheme`, remembering
+     *  one light and one dark theme. */
+    auto?: boolean;
+    autoLabel?: string;
+    autoHelp?: string;
+    lightLabel?: string;
+    darkLabel?: string;
     class?: string;
 };
 declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/emoji.d.ts

@@ -0,0 +1,18 @@
+export interface EmojiEntry {
+    emoji: string;
+    /** Search keywords, lower-case, both languages. */
+    keys: string;
+}
+export interface EmojiGroup {
+    id: string;
+    /** Group glyph shown in the tab strip. */
+    icon: string;
+    /** Accessible name of the tab. Translate it by supplying your own `groups`. */
+    label: string;
+    entries: EmojiEntry[];
+}
+export declare const EMOJI_GROUPS: readonly EmojiGroup[];
+/** Entries matching a free-text query across every group; an empty query
+ *  returns nothing (the caller shows the grouped grid instead). Accent-
+ *  insensitive so « éléphant » and « elephant » both find the elephant. */
+export declare function searchEmoji(query: string, groups?: readonly EmojiGroup[]): EmojiEntry[];

package/dist/emoji.js

@@ -0,0 +1,286 @@
+const e = (emoji, keys) => ({ emoji, keys });
+export const EMOJI_GROUPS = [
+    {
+        id: 'smileys',
+        label: 'Smileys',
+        icon: '😀',
+        entries: [
+            e('😀', 'grin smile sourire content happy'),
+            e('😄', 'smile laugh rire joie'),
+            e('😂', 'joy tears laugh rire larmes'),
+            e('🙂', 'slight smile sourire'),
+            e('😉', 'wink clin oeil'),
+            e('😍', 'heart eyes love amour'),
+            e('😎', 'cool sunglasses lunettes'),
+            e('🤓', 'nerd glasses lunettes geek'),
+            e('🧐', 'monocle inspect examiner'),
+            e('🤔', 'think réfléchir penser'),
+            e('🤖', 'robot bot machine'),
+            e('👻', 'ghost fantôme'),
+            e('💀', 'skull crâne tête de mort'),
+            e('👽', 'alien extraterrestre'),
+            e('🤡', 'clown'),
+            e('😈', 'devil diable démon'),
+            e('🥳', 'party fête célébration'),
+            e('😴', 'sleep dormir zzz'),
+            e('🤯', 'mind blown explosion tête'),
+            e('🫠', 'melt fondre'),
+            e('🙃', 'upside down envers'),
+            e('😇', 'angel ange halo'),
+            e('🤠', 'cowboy'),
+            e('🥸', 'disguise déguisement moustache'),
+            e('😶‍🌫️', 'fog brouillard nuage'),
+        ],
+    },
+    {
+        id: 'people',
+        label: 'People',
+        icon: '🧑‍💻',
+        entries: [
+            e('🧑‍💻', 'technologist developer dev code ordinateur'),
+            e('👩‍💻', 'woman technologist développeuse'),
+            e('👨‍💻', 'man technologist développeur'),
+            e('🧑‍🔬', 'scientist science labo'),
+            e('🧑‍🚀', 'astronaut astronaute espace'),
+            e('🧑‍🎨', 'artist artiste peinture'),
+            e('🧑‍🍳', 'cook chef cuisine'),
+            e('🧑‍🏫', 'teacher prof enseignant'),
+            e('🧑‍⚕️', 'doctor médecin santé'),
+            e('🧑‍🚒', 'firefighter pompier'),
+            e('🕵️', 'detective détective enquête'),
+            e('🧙', 'wizard mage magicien sorcier'),
+            e('🧛', 'vampire'),
+            e('🧟', 'zombie'),
+            e('🦸', 'superhero héros super'),
+            e('🦹', 'villain méchant'),
+            e('🧞', 'genie génie'),
+            e('👑', 'crown couronne roi reine king queen'),
+            e('🎩', 'top hat chapeau haut de forme'),
+            e('🧢', 'cap casquette'),
+            e('👀', 'eyes yeux regarder'),
+            e('🧠', 'brain cerveau'),
+            e('💪', 'muscle biceps force'),
+            e('👋', 'wave hello bonjour salut'),
+            e('👍', 'thumbs up pouce ok'),
+            e('🙏', 'pray please merci thanks'),
+        ],
+    },
+    {
+        id: 'animals',
+        label: 'Animals',
+        icon: '🐙',
+        entries: [
+            e('🐙', 'octopus pieuvre poulpe'),
+            e('🦀', 'crab crabe rust'),
+            e('🐍', 'snake serpent python'),
+            e('🐧', 'penguin pingouin manchot linux'),
+            e('🐳', 'whale baleine docker'),
+            e('🦊', 'fox renard'),
+            e('🐺', 'wolf loup'),
+            e('🦁', 'lion'),
+            e('🐯', 'tiger tigre'),
+            e('🐻', 'bear ours'),
+            e('🐼', 'panda'),
+            e('🐨', 'koala'),
+            e('🐸', 'frog grenouille'),
+            e('🦉', 'owl hibou chouette'),
+            e('🦅', 'eagle aigle'),
+            e('🦜', 'parrot perroquet'),
+            e('🐝', 'bee abeille'),
+            e('🦋', 'butterfly papillon'),
+            e('🐢', 'turtle tortue'),
+            e('🦈', 'shark requin'),
+            e('🐬', 'dolphin dauphin'),
+            e('🦄', 'unicorn licorne'),
+            e('🐉', 'dragon'),
+            e('🦖', 'dinosaur dinosaure t-rex'),
+            e('🐱', 'cat chat'),
+            e('🐶', 'dog chien'),
+            e('🐭', 'mouse souris'),
+            e('🐹', 'hamster'),
+            e('🐰', 'rabbit lapin'),
+            e('🦔', 'hedgehog hérisson'),
+            e('🐘', 'elephant éléphant postgres'),
+            e('🦒', 'giraffe girafe'),
+            e('🐎', 'horse cheval'),
+            e('🐐', 'goat chèvre'),
+            e('🐔', 'chicken poule'),
+            e('🦆', 'duck canard'),
+            e('🐌', 'snail escargot lent'),
+            e('🕷️', 'spider araignée'),
+        ],
+    },
+    {
+        id: 'nature',
+        label: 'Nature',
+        icon: '🌿',
+        entries: [
+            e('🌿', 'herb plante feuille vert'),
+            e('🍀', 'clover trèfle chance luck'),
+            e('🌲', 'tree arbre sapin forêt'),
+            e('🌵', 'cactus'),
+            e('🌸', 'blossom fleur cerisier'),
+            e('🌻', 'sunflower tournesol'),
+            e('🌹', 'rose'),
+            e('🍄', 'mushroom champignon'),
+            e('🌍', 'earth terre monde globe'),
+            e('🌙', 'moon lune nuit'),
+            e('☀️', 'sun soleil jour'),
+            e('⭐', 'star étoile'),
+            e('🌟', 'glowing star étoile brillante'),
+            e('✨', 'sparkles étincelles magie'),
+            e('⚡', 'lightning éclair zap énergie'),
+            e('🔥', 'fire feu flamme hot'),
+            e('🌈', 'rainbow arc-en-ciel'),
+            e('☁️', 'cloud nuage'),
+            e('❄️', 'snowflake flocon neige froid'),
+            e('🌊', 'wave vague mer océan'),
+            e('🌋', 'volcano volcan'),
+            e('🪐', 'planet planète saturne'),
+            e('🚀', 'rocket fusée launch'),
+            e('🛸', 'ufo soucoupe ovni'),
+            e('☄️', 'comet comète'),
+        ],
+    },
+    {
+        id: 'objects',
+        label: 'Objects',
+        icon: '🔧',
+        entries: [
+            e('🔧', 'wrench clé outil tool'),
+            e('🔨', 'hammer marteau build'),
+            e('🛠️', 'tools outils'),
+            e('⚙️', 'gear engrenage réglages settings'),
+            e('🔑', 'key clé password'),
+            e('🔒', 'lock cadenas verrou sécurité'),
+            e('🛡️', 'shield bouclier protection'),
+            e('⚔️', 'swords épées'),
+            e('🧰', 'toolbox boîte à outils'),
+            e('🧪', 'test tube éprouvette labo'),
+            e('🔬', 'microscope'),
+            e('🔭', 'telescope télescope'),
+            e('💻', 'laptop ordinateur portable'),
+            e('🖥️', 'desktop écran ordinateur'),
+            e('⌨️', 'keyboard clavier'),
+            e('🖱️', 'mouse souris'),
+            e('📱', 'phone téléphone mobile'),
+            e('💾', 'floppy disquette save'),
+            e('🗄️', 'cabinet classeur base données database'),
+            e('📦', 'package paquet box colis'),
+            e('📚', 'books livres docs'),
+            e('📝', 'memo note écrire'),
+            e('📌', 'pin punaise épingle'),
+            e('🔖', 'bookmark marque-page'),
+            e('💡', 'bulb idée ampoule'),
+            e('🔦', 'flashlight lampe torche'),
+            e('🧭', 'compass boussole'),
+            e('⏰', 'alarm réveil horloge'),
+            e('⏱️', 'stopwatch chrono'),
+            e('🎯', 'target cible dart'),
+            e('🎲', 'dice dé hasard'),
+            e('🎮', 'game manette jeu'),
+            e('🎸', 'guitar guitare musique'),
+            e('🎵', 'music note musique'),
+            e('🎧', 'headphones casque'),
+            e('📷', 'camera appareil photo'),
+            e('🎬', 'clapper cinéma film'),
+            e('🧩', 'puzzle pièce'),
+            e('🪄', 'magic wand baguette magique'),
+            e('🧲', 'magnet aimant'),
+            e('💎', 'gem diamant'),
+            e('💰', 'money bag argent sac'),
+            e('🪙', 'coin pièce'),
+            e('🏆', 'trophy trophée coupe'),
+            e('🥇', 'medal médaille or'),
+            e('🎁', 'gift cadeau'),
+            e('🎈', 'balloon ballon'),
+            e('☕', 'coffee café'),
+            e('🍕', 'pizza'),
+            e('🍔', 'burger'),
+            e('🍩', 'donut beignet'),
+            e('🍪', 'cookie biscuit'),
+            e('🍺', 'beer bière'),
+            e('🍷', 'wine vin'),
+            e('🚑', 'ambulance secours urgence rescue'),
+            e('🚒', 'fire engine pompiers'),
+            e('🚗', 'car voiture'),
+            e('🚲', 'bike vélo'),
+            e('✈️', 'plane avion'),
+            e('🚂', 'train locomotive'),
+            e('⛵', 'sailboat voilier bateau'),
+            e('🏠', 'house maison home'),
+            e('🏭', 'factory usine'),
+            e('🏰', 'castle château'),
+            e('🗼', 'tower tour'),
+        ],
+    },
+    {
+        id: 'symbols',
+        label: 'Symbols',
+        icon: '❤️',
+        entries: [
+            e('❤️', 'heart coeur rouge love'),
+            e('🧡', 'orange heart coeur'),
+            e('💛', 'yellow heart coeur jaune'),
+            e('💚', 'green heart coeur vert'),
+            e('💙', 'blue heart coeur bleu'),
+            e('💜', 'purple heart coeur violet'),
+            e('🖤', 'black heart coeur noir'),
+            e('🤍', 'white heart coeur blanc'),
+            e('💯', 'hundred cent points'),
+            e('✅', 'check coche ok validé'),
+            e('❌', 'cross croix non erreur'),
+            e('⚠️', 'warning attention'),
+            e('🚫', 'forbidden interdit'),
+            e('♻️', 'recycle recyclage'),
+            e('🔴', 'red circle rond rouge'),
+            e('🟠', 'orange circle rond'),
+            e('🟡', 'yellow circle rond jaune'),
+            e('🟢', 'green circle rond vert'),
+            e('🔵', 'blue circle rond bleu'),
+            e('🟣', 'purple circle rond violet'),
+            e('⚫', 'black circle rond noir'),
+            e('⚪', 'white circle rond blanc'),
+            e('🟥', 'red square carré rouge'),
+            e('🟧', 'orange square carré'),
+            e('🟨', 'yellow square carré jaune'),
+            e('🟩', 'green square carré vert'),
+            e('🟦', 'blue square carré bleu'),
+            e('🟪', 'purple square carré violet'),
+            e('⬛', 'black square carré noir'),
+            e('⬜', 'white square carré blanc'),
+            e('🔶', 'orange diamond losange'),
+            e('🔷', 'blue diamond losange bleu'),
+            e('🔺', 'red triangle'),
+            e('♠️', 'spade pique'),
+            e('♣️', 'club trèfle'),
+            e('♥️', 'heart coeur cartes'),
+            e('♦️', 'diamond carreau'),
+            e('☮️', 'peace paix'),
+            e('☯️', 'yin yang'),
+            e('♾️', 'infinity infini'),
+            e('🔱', 'trident'),
+            e('⚓', 'anchor ancre'),
+            e('🏁', 'checkered flag drapeau arrivée'),
+            e('🚩', 'red flag drapeau rouge'),
+            e('🏴‍☠️', 'pirate flag drapeau pirate'),
+            e('🇫🇷', 'france drapeau flag'),
+            e('🇪🇺', 'europe eu drapeau flag'),
+            e('🇺🇸', 'usa états-unis flag drapeau'),
+            e('🇬🇧', 'uk royaume-uni flag drapeau'),
+            e('🇩🇪', 'germany allemagne flag drapeau'),
+            e('🇯🇵', 'japan japon flag drapeau'),
+        ],
+    },
+];
+const fold = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/** Entries matching a free-text query across every group; an empty query
+ *  returns nothing (the caller shows the grouped grid instead). Accent-
+ *  insensitive so « éléphant » and « elephant » both find the elephant. */
+export function searchEmoji(query, groups = EMOJI_GROUPS) {
+    const q = fold(query.trim());
+    if (!q)
+        return [];
+    const words = q.split(/\s+/);
+    return groups.flatMap((g) => g.entries.filter((x) => words.every((w) => fold(x.keys).includes(w))));
+}

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { default as ConfirmModal } from './components/molecules/ConfirmModal.sve
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 export { default as Field } from './components/molecules/Field.svelte';
 export { default as Fieldset } from './components/molecules/Fieldset.svelte';
@@ -80,6 +81,7 @@ export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
@@ -88,6 +90,7 @@ export type { ControlSize } from './size';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
+export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, type SlotOf, type ThemeChoice, type ThemePreference, type ThemeSlot, } from './theme-mode';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { canonicalTone, type Tone } from './tone';
 export { pathCandidates, type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -54,6 +54,7 @@ export { default as ConfirmModal } from './components/molecules/ConfirmModal.sve
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 // ---- molecules ----
 export { default as Field } from './components/molecules/Field.svelte';
@@ -90,6 +91,7 @@ export { default as WorkingDir } from './components/molecules/WorkingDir.svelte'
 // ---- organisms ----
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
@@ -99,6 +101,7 @@ export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts, } from './stores/toast.svelte';
+export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, } from './theme-mode';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { canonicalTone } from './tone';
 export { pathCandidates, truncate } from './truncate';

package/dist/stores/theme.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type SlotOf, type ThemeChoice, type ThemePreference } from '../theme-mode';
 export declare const THEMES: readonly [{
     readonly id: "light";
     readonly label: "Light";
@@ -155,16 +156,32 @@ export interface ThemeDef {
 }
 declare class Theme {
     current: ThemeId;
+    /** True while the system asks for a dark scheme; only read in `auto`. */
+    systemDark: boolean;
+    pref: ThemePreference;
+    /** Called with the new preference whenever the user changes it, so an app
+     *  can mirror it into its own (server-side) settings. */
+    onchange?: (pref: ThemePreference) => void;
     readonly fallbackIcon = "\u25C8";
     private registered;
     private fallback;
     private saved;
     constructor();
+    get slotOf(): SlotOf;
+    /** `auto`, or the pinned slot. */
+    get mode(): ThemeChoice;
+    /** The theme id painted for the current preference. */
+    get resolved(): ThemeId;
+    /** What a picker shows as selected: `auto`, or the pinned slot's theme id. */
+    get choice(): string;
     get all(): readonly ThemeDef[];
     has(id: string | null | undefined): id is ThemeId;
     register(defs: ThemeDef | ThemeDef[]): void;
     setDefault(id: ThemeId): void;
     private resolve;
+    private read;
+    private paint;
+    private persist;
     private apply;
     get option(): ThemeDef;
     get label(): string;
@@ -172,6 +189,12 @@ declare class Theme {
     get next(): ThemeDef;
     toggle(): void;
     set(mode: ThemeId): void;
+    /** A picker choice: `auto`, or a theme id, which also becomes its slot's
+     *  remembered theme. An unregistered id is ignored. */
+    choose(choice: string): ThemePreference;
+    /** Replay a preference an app persisted itself, without echoing it back
+     *  through `onchange`. */
+    hydrate(pref: ThemePreference): void;
 }
 export declare const theme: Theme;
 export {};

package/dist/stores/theme.svelte.js

@@ -1,10 +1,15 @@
 import { browser } from '../env';
+import { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, preferenceFrom, resolveTheme, } from '../theme-mode';
 // Theme registry. Built-ins live in THEMES (+ one [data-theme="id"] block in
 // styles/themes.css); consumers append their own with theme.register() and ship
 // the matching block in their own stylesheet. `themeColor` drives the mobile
 // browser-chrome <meta theme-color>; `mode` groups the theme into the picker's
 // light/dark sections.
+//
+// `tsumikit-theme` holds a {mode,light,dark} blob; a bare theme id there is a
+// legacy value and migrates through `preferenceFrom`.
 const KEY = 'tsumikit-theme';
+const SCHEME_QUERY = '(prefers-color-scheme: dark)';
 export const THEMES = [
     // ── Light ── bright, paper-white surfaces
     { id: 'light', label: 'Light', icon: '☀', themeColor: '#f6f7f9', mode: 'light' },
@@ -55,16 +60,43 @@ export const THEMES = [
 const FALLBACK_ICON = '◈';
 class Theme {
     current = $state('dark');
+    /** True while the system asks for a dark scheme; only read in `auto`. */
+    systemDark = $state(false);
+    pref = $state(DEFAULT_THEME_PREFERENCE);
+    /** Called with the new preference whenever the user changes it, so an app
+     *  can mirror it into its own (server-side) settings. */
+    onchange;
     fallbackIcon = FALLBACK_ICON;
     registered = $state([]);
     fallback = 'dark';
     saved = null;
     constructor() {
         if (browser) {
+            const mq = typeof matchMedia === 'function' ? matchMedia(SCHEME_QUERY) : null;
+            this.systemDark = mq?.matches ?? false;
+            mq?.addEventListener?.('change', (e) => {
+                this.systemDark = e.matches;
+                this.paint();
+            });
             this.saved = localStorage.getItem(KEY);
             this.resolve();
         }
     }
+    get slotOf() {
+        return (id) => this.all.find((t) => t.id === id)?.mode ?? null;
+    }
+    /** `auto`, or the pinned slot. */
+    get mode() {
+        return this.pref.mode;
+    }
+    /** The theme id painted for the current preference. */
+    get resolved() {
+        return resolveTheme(this.pref, this.systemDark);
+    }
+    /** What a picker shows as selected: `auto`, or the pinned slot's theme id. */
+    get choice() {
+        return this.pref.mode === AUTO_THEME ? AUTO_THEME : this.resolved;
+    }
     get all() {
         const byId = new Map();
         for (const t of THEMES)
@@ -86,9 +118,38 @@ class Theme {
         this.resolve();
     }
     resolve() {
-        this.current = this.has(this.saved) ? this.saved : this.fallback;
+        this.pref = this.read();
+        this.paint();
+    }
+    read() {
+        const seed = chooseTheme(DEFAULT_THEME_PREFERENCE, this.fallback, this.slotOf);
+        if (!this.saved)
+            return seed;
+        let blob = null;
+        try {
+            const parsed = JSON.parse(this.saved);
+            if (parsed && typeof parsed === 'object')
+                blob = parsed;
+        }
+        catch { }
+        return preferenceFrom(blob
+            ? { themeMode: blob.mode, lightTheme: blob.light, darkTheme: blob.dark }
+            : { theme: this.saved }, this.slotOf, seed);
+    }
+    paint() {
+        this.current = this.resolved;
         this.apply();
     }
+    persist() {
+        this.saved = JSON.stringify(this.pref);
+        if (browser) {
+            try {
+                localStorage.setItem(KEY, this.saved);
+            }
+            catch { }
+        }
+        this.onchange?.(this.pref);
+    }
     apply() {
         if (!browser)
             return;
@@ -117,11 +178,22 @@ class Theme {
         this.set(this.next.id);
     }
     set(mode) {
-        this.saved = mode;
-        this.current = mode;
-        if (browser)
-            localStorage.setItem(KEY, mode);
-        this.apply();
+        this.choose(mode);
+    }
+    /** A picker choice: `auto`, or a theme id, which also becomes its slot's
+     *  remembered theme. An unregistered id is ignored. */
+    choose(choice) {
+        this.pref = chooseTheme(this.pref, choice, this.slotOf);
+        this.paint();
+        this.persist();
+        return this.pref;
+    }
+    /** Replay a preference an app persisted itself, without echoing it back
+     *  through `onchange`. */
+    hydrate(pref) {
+        this.pref = pref;
+        this.saved = JSON.stringify(pref);
+        this.paint();
     }
 }
 export const theme = new Theme();

package/dist/theme-mode.d.ts

@@ -0,0 +1,33 @@
+export type ThemeSlot = 'light' | 'dark';
+export type ThemeChoice = ThemeSlot | 'auto';
+export interface ThemePreference {
+    /** `auto` follows the system; `light` / `dark` pin the matching slot. */
+    mode: ThemeChoice;
+    /** Last light theme the user picked. */
+    light: string;
+    /** Last dark theme the user picked. */
+    dark: string;
+}
+/** The picker value that means "follow the system". Never a theme id. */
+export declare const AUTO_THEME = "auto";
+export declare const DEFAULT_THEME_PREFERENCE: ThemePreference;
+/** Which slot a theme id belongs to; `null` when the id is unknown. */
+export type SlotOf = (id: string) => ThemeSlot | null;
+/** The theme id to paint for a preference, given the system's current scheme. */
+export declare function resolveTheme(pref: ThemePreference, systemDark: boolean): string;
+/** Apply a picker choice: `auto` switches mode only; a theme id pins its slot
+ *  AND becomes that slot's remembered theme. Unknown ids leave the preference
+ *  untouched so a stale blob can never paint an unregistered theme. */
+export declare function chooseTheme(pref: ThemePreference, choice: string, slotOf: SlotOf): ThemePreference;
+/** Rebuild a preference from persisted fields. Older blobs only carried a
+ *  single `theme`: it seeds whichever slot it belongs to and pins that mode, so
+ *  nothing changes for a user who never touched the new picker. Unknown ids
+ *  fall back to `defaults` rather than being trusted. */
+export declare function preferenceFrom(raw: {
+    theme?: string | null;
+    themeMode?: string | null;
+    lightTheme?: string | null;
+    darkTheme?: string | null;
+}, slotOf: SlotOf, defaults?: ThemePreference): ThemePreference;
+/** The picker's current value: `auto`, or the pinned slot's theme id. */
+export declare function pickerValue(pref: ThemePreference): string;

package/dist/theme-mode.js

@@ -0,0 +1,45 @@
+// Pure logic behind the light/dark/auto theme preference: the last light and
+// the last dark theme the user picked, plus an `auto` mode that follows the
+// system's `prefers-color-scheme`. Rune-free so it unit-tests in isolation.
+/** The picker value that means "follow the system". Never a theme id. */
+export const AUTO_THEME = 'auto';
+export const DEFAULT_THEME_PREFERENCE = {
+    mode: 'dark',
+    light: 'light',
+    dark: 'dark',
+};
+/** The theme id to paint for a preference, given the system's current scheme. */
+export function resolveTheme(pref, systemDark) {
+    const slot = pref.mode === 'auto' ? (systemDark ? 'dark' : 'light') : pref.mode;
+    return slot === 'dark' ? pref.dark : pref.light;
+}
+/** Apply a picker choice: `auto` switches mode only; a theme id pins its slot
+ *  AND becomes that slot's remembered theme. Unknown ids leave the preference
+ *  untouched so a stale blob can never paint an unregistered theme. */
+export function chooseTheme(pref, choice, slotOf) {
+    if (choice === AUTO_THEME)
+        return { ...pref, mode: 'auto' };
+    const slot = slotOf(choice);
+    if (!slot)
+        return pref;
+    return { ...pref, mode: slot, [slot]: choice };
+}
+/** Rebuild a preference from persisted fields. Older blobs only carried a
+ *  single `theme`: it seeds whichever slot it belongs to and pins that mode, so
+ *  nothing changes for a user who never touched the new picker. Unknown ids
+ *  fall back to `defaults` rather than being trusted. */
+export function preferenceFrom(raw, slotOf, defaults = DEFAULT_THEME_PREFERENCE) {
+    const light = raw.lightTheme && slotOf(raw.lightTheme) === 'light' ? raw.lightTheme : defaults.light;
+    const dark = raw.darkTheme && slotOf(raw.darkTheme) === 'dark' ? raw.darkTheme : defaults.dark;
+    const pref = { mode: defaults.mode, light, dark };
+    if (raw.themeMode === 'auto' || raw.themeMode === 'light' || raw.themeMode === 'dark') {
+        return { ...pref, mode: raw.themeMode };
+    }
+    if (raw.theme)
+        return chooseTheme(pref, raw.theme, slotOf);
+    return pref;
+}
+/** The picker's current value: `auto`, or the pinned slot's theme id. */
+export function pickerValue(pref) {
+    return pref.mode === 'auto' ? AUTO_THEME : pref.mode === 'dark' ? pref.dark : pref.light;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "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",