@dorsk/tsumikit 0.79.0 → 0.80.1

package/dist/components/molecules/Tabs.svelte

@@ -123,7 +123,9 @@
 		indLeft = left;
 		indWidth = width;
 		ind.style.width = `${width}px`;
-		if (!animate || !placed || width === 0) {
+		const fx = getComputedStyle(ind).getPropertyValue('--tabs-fx').trim();
+		const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+		if (!animate || !placed || width === 0 || still) {
 			ind.style.transition = 'none';
 			ind.style.translate = `${left}px 0`;
 			ind.style.scale = '1 1';
@@ -132,6 +134,22 @@
 			placed = true;
 			return;
 		}
+		if (fx === 'stretch' && typeof ind.animate === 'function') {
+			const lo = Math.min(prevLeft, left);
+			const hi = Math.max(prevLeft + prevWidth, left + width);
+			const ease = (name: string) => getComputedStyle(ind).getPropertyValue(name).trim() || 'ease-out';
+			ind.style.translate = `${left}px 0`;
+			ind.style.scale = '1 1';
+			ind.animate(
+				[
+					{ translate: `${prevLeft}px 0`, scale: `${prevWidth / width} 1`, easing: ease('--ease-out') },
+					{ translate: `${lo}px 0`, scale: `${(hi - lo) / width} 1`, offset: 0.4, easing: ease('--ease-spring') },
+					{ translate: `${left}px 0`, scale: '1 1' }
+				],
+				{ duration: 280 }
+			);
+			return;
+		}
 		ind.style.transition = 'none';
 		ind.style.translate = `${prevLeft}px 0`;
 		ind.style.scale = `${prevWidth / width} 1`;
@@ -152,6 +170,14 @@
 		return () => ro.disconnect();
 	});
 
+	function inkFrom(e: MouseEvent) {
+		const el = e.currentTarget as HTMLElement;
+		const r = el.getBoundingClientRect();
+		const pointer = e.detail > 0;
+		el.style.setProperty('--ink-x', pointer ? `${e.clientX - r.left}px` : '50%');
+		el.style.setProperty('--ink-y', pointer ? `${e.clientY - r.top}px` : '50%');
+	}
+
 	function select(id: string, focus = false) {
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		if (value !== id) playSound('click', sound);
@@ -161,7 +187,11 @@
 			// The list scrolls when it is too narrow, so keyboard selection has to
 			// bring the tab back into view or it moves somewhere unseen.
 			el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-			if (focus) el?.focus();
+			if (focus) {
+				el?.style.removeProperty('--ink-x');
+				el?.style.removeProperty('--ink-y');
+				el?.focus();
+			}
 		});
 	}
 	// Step to the next non-disabled tab in a direction, wrapping around.
@@ -236,7 +266,10 @@
 						class="tab closable"
 						class:selected={value === t.id}
 						class:disabled={t.disabled}
-						onclick={() => select(t.id)}
+						onclick={(e) => {
+							inkFrom(e);
+							select(t.id);
+						}}
 						onauxclick={(e) => onauxclick(e, t.id)}
 					>
 						{@render body(t)}
@@ -268,7 +301,10 @@
 						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab"
 						class:selected={value === t.id}
-						onclick={() => select(t.id)}
+						onclick={(e) => {
+							inkFrom(e);
+							select(t.id);
+						}}
 					>
 						{@render body(t)}
 					</button>
@@ -389,4 +425,121 @@
 		outline-offset: var(--focus-ring-offset);
 		border-radius: var(--r-sm);
 	}
+
+	/* Sliding pill: a raised pill glides behind the selected tab with a slight overshoot. */
+	.tabs:not(:global([data-fx-tabs]:not([data-fx-tabs='pill'])) *),
+	:global([data-fx-tabs='pill']) .tabs:not(:global([data-fx-tabs='pill'] [data-fx-tabs]:not([data-fx-tabs='pill'])) *) {
+		--tabs-fx: pill;
+		& .tablist {
+			isolation: isolate;
+			flex: 0 1 auto;
+			padding: 3px;
+			border-bottom: 0;
+			border-radius: var(--r-pill);
+			background: var(--surface-fill-2);
+			box-shadow: inset 0 0 0 var(--edge-width) var(--surface-edge);
+		}
+		& .actions {
+			border-bottom: 0;
+		}
+		& .tab {
+			min-height: calc(var(--control-md) - 6px);
+			margin-bottom: 0;
+			border-bottom: 0;
+			border-radius: var(--r-pill);
+		}
+		& .tab.selected {
+			color: var(--text);
+		}
+		& .tablist:not(.placed) .tab.selected {
+			background: var(--surface);
+		}
+		& .tab.selected:focus-visible {
+			outline: none;
+		}
+		& .indicator {
+			top: 3px;
+			bottom: 3px;
+			z-index: -1;
+			height: auto;
+			border-radius: var(--r-pill);
+			background: var(--surface);
+			box-shadow:
+				0 0 0 var(--edge-width) color-mix(in srgb, var(--accent) 35%, var(--surface-edge)),
+				0 1px 3px color-mix(in srgb, var(--text) 14%, transparent);
+			transition-timing-function: var(--ease-spring-bounce);
+		}
+		& .tablist:has(.tab.selected:focus-visible) .indicator {
+			box-shadow:
+				0 0 0 2px var(--accent),
+				0 1px 3px color-mix(in srgb, var(--text) 14%, transparent);
+		}
+	}
+	/* Stretch line: the script stretches the line across both tabs, then lets the tail catch up. */
+	:global([data-fx-tabs='stretch']) .tabs:not(:global([data-fx-tabs='stretch'] [data-fx-tabs]:not([data-fx-tabs='stretch'])) *) {
+		--tabs-fx: stretch;
+	}
+	/* Ink blot: a tint spreads from the click point and a short mark springs in under the label. */
+	:global([data-fx-tabs='ink']) .tabs:not(:global([data-fx-tabs='ink'] [data-fx-tabs]:not([data-fx-tabs='ink'])) *) {
+		--tabs-fx: ink;
+		& .indicator {
+			display: none;
+		}
+		& .tab {
+			position: relative;
+			isolation: isolate;
+			overflow: hidden;
+			border-radius: var(--r-md) var(--r-md) 0 0;
+		}
+		& .tab::before,
+		& .tab::after {
+			content: '';
+			position: absolute;
+			pointer-events: none;
+		}
+		& .tab::before {
+			left: var(--ink-x, 50%);
+			top: var(--ink-y, 50%);
+			z-index: -1;
+			width: 260%;
+			aspect-ratio: 1;
+			translate: -50% -50%;
+			border-radius: var(--r-pill);
+			background: radial-gradient(
+				circle closest-side,
+				color-mix(in srgb, var(--accent) 22%, transparent) 0 55%,
+				color-mix(in srgb, var(--accent) 14%, transparent) 80%,
+				transparent
+			);
+			scale: 0;
+			opacity: 0;
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-exit), var(--dur-instant);
+			transition-delay: var(--dur-instant), var(--dur-exit);
+			transition-timing-function: ease;
+		}
+		& .tab.selected::before {
+			scale: 1;
+			opacity: 1;
+			transition-duration: var(--dur-fast), var(--dur-slow);
+			transition-delay: var(--dur-instant);
+			transition-timing-function: ease, var(--ease-out);
+		}
+		& .tab::after {
+			inset: auto 30% 4px;
+			height: 2px;
+			border-radius: var(--r-xs);
+			background: var(--accent);
+			opacity: 0;
+			scale: 0.2 1;
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-exit-fast);
+		}
+		& .tab.selected::after {
+			opacity: 1;
+			scale: 1 1;
+			transition-duration: var(--dur-fast), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring-bounce);
+		}
+	}
 </style>

package/dist/components/molecules/ThemePicker.svelte

@@ -5,9 +5,12 @@
 	// (--c-bg, --c-surface, --c-text, --c-accent; the derived --bg etc. are
 	// resolved once at :root and would not re-scope). The root default theme
 	// has no [data-theme] block, so its swatch carries the :root values.
+	// Prerendered, the trigger swatch is unscoped: it shows the theme prepainted
+	// on <html> until hydration.
 	import type { ComponentProps } from 'svelte';
 	import type { AnchorAttributes } from '../../anchor';
 	import Popover from './Popover.svelte';
+	import { browser } from '../../env';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 	import { AUTO_THEME } from '../../theme-mode';
 
@@ -63,7 +66,9 @@
 	);
 	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 title = $derived(
+		!browser ? 'Theme' : isAuto ? `${autoLabel} · ${theme.label}` : `Theme: ${theme.label}`
+	);
 	const caption = $derived(
 		hoveredAuto || (isAuto && !hovered)
 			? autoCaption
@@ -71,7 +76,7 @@
 	);
 </script>
 
-{#snippet swatch(id: string)}
+{#snippet swatch(id: string | undefined)}
 	<span class="swatch" data-theme={id} aria-hidden="true">
 		<i class="q bg"></i><i class="q surface"></i><i class="q text"></i><i class="q accent"></i>
 	</span>
@@ -94,7 +99,7 @@
 	triggerClass={klass}
 	style={styleProp}
 >
-	{#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}
+	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(browser ? theme.current : undefined)}{#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.label}</div>

package/dist/fx.d.ts

@@ -0,0 +1,149 @@
+export declare const FX: {
+    readonly hover: {
+        readonly label: "Button hover";
+        readonly variants: readonly [{
+            readonly id: "smoke";
+            readonly label: "Smoke";
+        }, {
+            readonly id: "ember";
+            readonly label: "Ember";
+        }, {
+            readonly id: "aurora";
+            readonly label: "Aurora";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly check: {
+        readonly label: "Checkbox";
+        readonly variants: readonly [{
+            readonly id: "draw";
+            readonly label: "Draw";
+        }, {
+            readonly id: "pop";
+            readonly label: "Pop";
+        }, {
+            readonly id: "confetti";
+            readonly label: "Confetti";
+        }, {
+            readonly id: "morph";
+            readonly label: "Morph";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly radio: {
+        readonly label: "Radio";
+        readonly variants: readonly [{
+            readonly id: "spring";
+            readonly label: "Spring";
+        }, {
+            readonly id: "liquid";
+            readonly label: "Liquid";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly switch: {
+        readonly label: "Switch";
+        readonly variants: readonly [{
+            readonly id: "squash";
+            readonly label: "Squash";
+        }, {
+            readonly id: "glow";
+            readonly label: "Glow";
+        }, {
+            readonly id: "calm";
+            readonly label: "Calm";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly focus: {
+        readonly label: "Input focus";
+        readonly variants: readonly [{
+            readonly id: "bloom";
+            readonly label: "Bloom";
+        }, {
+            readonly id: "label";
+            readonly label: "Spring label";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly tabs: {
+        readonly label: "Tabs";
+        readonly variants: readonly [{
+            readonly id: "pill";
+            readonly label: "Pill";
+        }, {
+            readonly id: "stretch";
+            readonly label: "Stretch";
+        }, {
+            readonly id: "ink";
+            readonly label: "Ink";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly copy: {
+        readonly label: "Copy";
+        readonly variants: readonly [{
+            readonly id: "burst";
+            readonly label: "Burst";
+        }, {
+            readonly id: "tick";
+            readonly label: "Tick";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly link: {
+        readonly label: "Link hover";
+        readonly variants: readonly [{
+            readonly id: "sweep";
+            readonly label: "Sweep";
+        }, {
+            readonly id: "highlight";
+            readonly label: "Highlight";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly card: {
+        readonly label: "Card hover";
+        readonly variants: readonly [{
+            readonly id: "spotlight";
+            readonly label: "Spotlight";
+        }, {
+            readonly id: "orbit";
+            readonly label: "Orbit";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+};
+export type FxFamily = keyof typeof FX;
+export type FxVariant<F extends FxFamily = FxFamily> = (typeof FX)[F]['variants'][number]['id'];
+export type FxSettings = {
+    [F in FxFamily]: FxVariant<F>;
+};
+export declare const FX_FAMILIES: FxFamily[];
+export declare const DEFAULT_FX: FxSettings;
+export declare function fxAttr(family: FxFamily): `data-fx-${FxFamily}`;
+export declare function isFxVariant<F extends FxFamily>(family: F, v: unknown): v is FxVariant<F>;
+/** Settings from an untrusted blob: unknown families are dropped, unknown
+ *  variants fall back to `defaults`. */
+export declare function parseFx(raw: unknown, defaults?: FxSettings): FxSettings;
+export declare function fxDiff(settings: FxSettings): Partial<FxSettings>;
+/** Inline <head> script painting the persisted `data-fx-*` before first paint. */
+export declare function fxPrepaint(key: string): string;

package/dist/fx.js

@@ -0,0 +1,111 @@
+// `data-fx-<family>="<variant>"` on <html> or any ancestor picks a family's
+// effect; without the attribute the first variant applies.
+export const FX = {
+    hover: {
+        label: 'Button hover',
+        variants: [
+            { id: 'smoke', label: 'Smoke' },
+            { id: 'ember', label: 'Ember' },
+            { id: 'aurora', label: 'Aurora' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    check: {
+        label: 'Checkbox',
+        variants: [
+            { id: 'draw', label: 'Draw' },
+            { id: 'pop', label: 'Pop' },
+            { id: 'confetti', label: 'Confetti' },
+            { id: 'morph', label: 'Morph' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    radio: {
+        label: 'Radio',
+        variants: [
+            { id: 'spring', label: 'Spring' },
+            { id: 'liquid', label: 'Liquid' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    switch: {
+        label: 'Switch',
+        variants: [
+            { id: 'squash', label: 'Squash' },
+            { id: 'glow', label: 'Glow' },
+            { id: 'calm', label: 'Calm' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    focus: {
+        label: 'Input focus',
+        variants: [
+            { id: 'bloom', label: 'Bloom' },
+            { id: 'label', label: 'Spring label' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    tabs: {
+        label: 'Tabs',
+        variants: [
+            { id: 'pill', label: 'Pill' },
+            { id: 'stretch', label: 'Stretch' },
+            { id: 'ink', label: 'Ink' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    copy: {
+        label: 'Copy',
+        variants: [
+            { id: 'burst', label: 'Burst' },
+            { id: 'tick', label: 'Tick' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    link: {
+        label: 'Link hover',
+        variants: [
+            { id: 'sweep', label: 'Sweep' },
+            { id: 'highlight', label: 'Highlight' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+    card: {
+        label: 'Card hover',
+        variants: [
+            { id: 'spotlight', label: 'Spotlight' },
+            { id: 'orbit', label: 'Orbit' },
+            { id: 'none', label: 'Off' },
+        ],
+    },
+};
+export const FX_FAMILIES = Object.keys(FX);
+export const DEFAULT_FX = Object.fromEntries(FX_FAMILIES.map((f) => [f, FX[f].variants[0].id]));
+export function fxAttr(family) {
+    return `data-fx-${family}`;
+}
+export function isFxVariant(family, v) {
+    return FX[family].variants.some((x) => x.id === v);
+}
+/** Settings from an untrusted blob: unknown families are dropped, unknown
+ *  variants fall back to `defaults`. */
+export function parseFx(raw, defaults = DEFAULT_FX) {
+    const blob = raw && typeof raw === 'object' ? raw : {};
+    const out = { ...defaults };
+    for (const f of FX_FAMILIES)
+        if (isFxVariant(f, blob[f]))
+            out[f] = blob[f];
+    return out;
+}
+export function fxDiff(settings) {
+    const out = {};
+    for (const f of FX_FAMILIES)
+        if (settings[f] !== DEFAULT_FX[f])
+            out[f] = settings[f];
+    return out;
+}
+/** Inline <head> script painting the persisted `data-fx-*` before first paint. */
+export function fxPrepaint(key) {
+    const valid = Object.fromEntries(FX_FAMILIES.map((f) => [f, FX[f].variants.slice(1).map((v) => v.id)]));
+    return `(function(){try{var s=localStorage.getItem(${JSON.stringify(key)});if(!s)return;var b=JSON.parse(s),v=${JSON.stringify(valid)},d=document.documentElement;if(!b||typeof b!=='object')return;for(var f in v)if(v[f].indexOf(b[f])>=0)d.setAttribute('data-fx-'+f,b[f])}catch(e){}})();`;
+}

package/dist/fx.md

@@ -0,0 +1,58 @@
+# Micro-interactions
+
+Each component family has a set of effects. One attribute on `<html>`, or on any ancestor, picks the
+effect for that family:
+
+```html
+<html data-fx-hover="ember" data-fx-check="pop"></html>
+```
+
+With no attribute the first variant applies. `none` turns the family's effect off.
+
+| Family   | Attribute        | Variants (first = default)              |
+| -------- | ---------------- | --------------------------------------- |
+| `hover`  | `data-fx-hover`  | `smoke` `ember` `aurora` `none`         |
+| `check`  | `data-fx-check`  | `draw` `pop` `confetti` `morph` `none`  |
+| `radio`  | `data-fx-radio`  | `spring` `liquid` `none`                |
+| `switch` | `data-fx-switch` | `squash` `glow` `calm` `none`           |
+| `focus`  | `data-fx-focus`  | `bloom` `label` `none`                  |
+| `tabs`   | `data-fx-tabs`   | `pill` `stretch` `ink` `none`           |
+| `copy`   | `data-fx-copy`   | `burst` `tick` `none`                   |
+| `link`   | `data-fx-link`   | `sweep` `highlight` `none`              |
+| `card`   | `data-fx-card`   | `spotlight` `orbit` `none`              |
+
+Loaders aren't a page setting. They're component props: Spinner, Progress, Skeleton and Button
+`loadingStyle`.
+
+All effects take their colours from the theme, fall back to a static state change under
+`prefers-reduced-motion: reduce`, only animate hover on fine pointers, and never shift layout.
+
+## Persisted settings
+
+```svelte
+<script>
+	import { FX_PREPAINT, MotionSettings, fx } from '@dorsk/tsumikit';
+</script>
+
+<svelte:head>{@html `<script>${FX_PREPAINT}</` + `script>`}</svelte:head>
+
+<MotionSettings size="sm" />
+```
+
+- `fx` holds the settings (`fx.settings`, `fx.get(family)`, `fx.set(family, variant)`, `fx.reset()`), stores
+  the non-default families in localStorage under `tsumikit-fx` and writes `data-fx-*` on `<html>`. Defaults
+  leave the attribute absent.
+- `FX_PREPAINT` paints the saved attributes before first paint. Inline it in `<head>` next to
+  `THEME_PREPAINT`.
+- `fx.onchange` and `fx.hydrate(settings)` let an app keep the settings in its own (server-side) store.
+- `FX`, `FX_FAMILIES`, `DEFAULT_FX` and `parseFx` expose the registry for custom controls.
+
+## Writing an effect
+
+Scope every variant with `:where()` so the selector keeps zero specificity. Give the first variant the
+`:not([…])` default:
+
+```css
+:where(:root:not([data-fx-hover]), [data-fx-hover='smoke']) .btn-primary::before { … }
+:where([data-fx-hover='ember']) .btn-primary::before { … }
+```

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 export { default as Text } from './components/atoms/Text.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
+export { default as Thinking } from './components/atoms/Thinking.svelte';
 export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';
 export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
@@ -74,10 +75,12 @@ export { default as IconButton } from './components/molecules/IconButton.svelte'
 export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
+export { default as LookPicker } from './components/molecules/LookPicker.svelte';
 export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
 export { default as Meter } from './components/molecules/Meter.svelte';
 export { default as Metric, default as StatTile, type MetricSegment, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
+export { default as MotionSettings } from './components/molecules/MotionSettings.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
@@ -111,18 +114,21 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
+export { DEFAULT_FX, FX, FX_FAMILIES, type FxFamily, type FxSettings, type FxVariant, fxAttr, fxDiff, fxPrepaint, isFxVariant, parseFx, } from './fx';
 export { escapeHtml, type Highlight, type RenderMarkdownOptions, renderMarkdown, stripAnsi, } from './markdown';
 export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
+export { trackPointer } from './pointer';
 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, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
 export { playSound, type SoundMuted, type SoundName } from './sound';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
+export { FX_PREPAINT, fx } from './stores/fx.svelte';
 export { sound } from './stores/sound.svelte';
-export { type Mode, THEMES, theme } from './stores/theme.svelte';
+export { type Mode, THEME_PREPAINT, 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 { AUTO_THEME, chooseTheme, DEFAULT_LOOK, DEFAULT_THEME_PREFERENCE, LOOKS, type LookId, type LookStatus, parseLook, pickerValue, preferenceFrom, resolveTheme, type SlotOf, type ThemeChoice, type ThemePreference, type ThemeSlot, themePrepaint, } 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

@@ -34,6 +34,7 @@ export { default as Switch } from './components/atoms/Switch.svelte';
 // ---- atoms ----
 export { default as Text } from './components/atoms/Text.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
+export { default as Thinking } from './components/atoms/Thinking.svelte';
 export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';
 // ---- layouts ----
 export { default as AppShell } from './components/layouts/AppShell.svelte';
@@ -79,12 +80,14 @@ export { default as IconButton } from './components/molecules/IconButton.svelte'
 export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
+export { default as LookPicker } from './components/molecules/LookPicker.svelte';
 export { default as Menu } from './components/molecules/Menu.svelte';
 export { default as Meter } from './components/molecules/Meter.svelte';
 export { default as Metric, 
 // StatTile is an alias for Metric — same component, dashboard-friendly name.
 default as StatTile, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
+export { default as MotionSettings } from './components/molecules/MotionSettings.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
@@ -119,19 +122,22 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
+export { DEFAULT_FX, FX, FX_FAMILIES, fxAttr, fxDiff, fxPrepaint, isFxVariant, parseFx, } from './fx';
 export { escapeHtml, renderMarkdown, stripAnsi, } from './markdown';
 export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
+export { trackPointer } from './pointer';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';
 export { sectionOptions } from './select-options';
 export { playSound } from './sound';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
+export { FX_PREPAINT, fx } from './stores/fx.svelte';
 // ---- stores / actions ----
 export { sound } from './stores/sound.svelte';
-export { THEMES, theme } from './stores/theme.svelte';
+export { THEME_PREPAINT, 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 { AUTO_THEME, chooseTheme, DEFAULT_LOOK, DEFAULT_THEME_PREFERENCE, LOOKS, parseLook, pickerValue, preferenceFrom, resolveTheme, themePrepaint, } from './theme-mode';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { canonicalTone } from './tone';
 export { pathCandidates, truncate } from './truncate';