@happyvertical/smrt-ui 0.30.0

package/dist/components/ui/__tests__/Pagination.test.js

@@ -0,0 +1,99 @@
+/**
+ * Component test for Pagination (Sweep S11, #1416).
+ *
+ * Pagination has two modes: link mode (anchors, default) and callback mode
+ * (buttons + `onPageChange`). This suite exercises the callback mode for
+ * interaction (clicking pages/prev/next fires the callback; bounds disable the
+ * edge controls) and verifies the navigation landmark, current-page marking,
+ * and a11y. aria-labels resolve to their registered English defaults outside a
+ * Provider (e.g. "Previous page", "Go to page 2").
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Pagination from '../Pagination.svelte';
+describe('Pagination', () => {
+    it('renders nothing when there is a single page', () => {
+        const { container } = render(Pagination, {
+            props: { currentPage: 1, totalPages: 1 },
+        });
+        expect(container.querySelector('.pagination')).toBeNull();
+    });
+    it('renders a navigation landmark with the provided aria-label', () => {
+        render(Pagination, {
+            props: { currentPage: 1, totalPages: 5, 'aria-label': 'Article pages' },
+        });
+        expect(screen.getByRole('navigation', { name: 'Article pages' })).toBeInTheDocument();
+    });
+    it('marks the current page with aria-current and renders it as a non-link', () => {
+        render(Pagination, {
+            props: { currentPage: 3, totalPages: 5, onPageChange: vi.fn() },
+        });
+        const current = screen.getByText('3');
+        expect(current).toHaveAttribute('aria-current', 'page');
+        // current page is a span, not a button
+        expect(current.tagName).toBe('SPAN');
+    });
+    it('fires onPageChange with the clicked page number (callback mode)', async () => {
+        const onPageChange = vi.fn();
+        render(Pagination, {
+            props: { currentPage: 1, totalPages: 5, onPageChange },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Go to page 3' }));
+        expect(onPageChange).toHaveBeenCalledWith(3);
+    });
+    it('fires onPageChange for prev and next relative to the current page', async () => {
+        const onPageChange = vi.fn();
+        render(Pagination, {
+            props: { currentPage: 3, totalPages: 5, onPageChange },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Previous page' }));
+        expect(onPageChange).toHaveBeenLastCalledWith(2);
+        await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+        expect(onPageChange).toHaveBeenLastCalledWith(4);
+    });
+    it('disables prev/first on the first page and blocks their callback', async () => {
+        const onPageChange = vi.fn();
+        render(Pagination, {
+            props: { currentPage: 1, totalPages: 5, onPageChange },
+        });
+        const prev = screen.getByRole('button', { name: 'Previous page' });
+        const first = screen.getByRole('button', { name: 'First page' });
+        expect(prev).toBeDisabled();
+        expect(first).toBeDisabled();
+        await userEvent.click(prev);
+        expect(onPageChange).not.toHaveBeenCalled();
+    });
+    it('disables next/last on the last page and blocks their callback', async () => {
+        const onPageChange = vi.fn();
+        render(Pagination, {
+            props: { currentPage: 5, totalPages: 5, onPageChange },
+        });
+        const next = screen.getByRole('button', { name: 'Next page' });
+        const last = screen.getByRole('button', { name: /Last page/ });
+        expect(next).toBeDisabled();
+        expect(last).toBeDisabled();
+        await userEvent.click(next);
+        expect(onPageChange).not.toHaveBeenCalled();
+    });
+    it('renders numbered pages as links in link mode (no onPageChange)', () => {
+        render(Pagination, {
+            props: { currentPage: 1, totalPages: 3, baseUrl: '/articles' },
+        });
+        const page2 = screen.getByRole('link', { name: 'Go to page 2' });
+        expect(page2).toHaveAttribute('href', '/articles/page/2');
+    });
+    it('is axe-clean in callback mode on a middle page', async () => {
+        const { container } = render(Pagination, {
+            props: { currentPage: 3, totalPages: 10, onPageChange: vi.fn() },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in link mode at the first-page boundary', async () => {
+        const { container } = render(Pagination, {
+            props: { currentPage: 1, totalPages: 4, baseUrl: '/articles' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/gap-primitives-interactive.test.js

@@ -0,0 +1,112 @@
+/**
+ * Golden tests for the L3 gap primitives — batch 2 (Tooltip, Dropdown, Tree).
+ * Render + keyboard/pointer interaction + a11y, per the L4 harness (#1422).
+ */
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Dropdown from '../Dropdown.svelte';
+import Tooltip from '../Tooltip.svelte';
+import Tree from '../Tree.svelte';
+const triggerSnippet = (text) => createRawSnippet(() => ({ render: () => `<button>${text}</button>` }));
+describe('Tooltip', () => {
+    it('wires the trigger to the bubble via aria-describedby', () => {
+        render(Tooltip, {
+            props: { text: 'More info', children: triggerSnippet('Help') },
+        });
+        const tip = screen.getByRole('tooltip');
+        expect(tip).toHaveTextContent('More info');
+        // The trigger wrapper (direct parent of the snippet content) is described
+        // by the bubble.
+        const trigger = screen.getByRole('button', { name: 'Help' }).parentElement;
+        expect(trigger).toHaveAttribute('aria-describedby', tip.id);
+    });
+    it('reveals on hover', async () => {
+        render(Tooltip, {
+            props: { text: 'More info', delay: 0, children: triggerSnippet('Help') },
+        });
+        await userEvent.hover(screen.getByRole('button', { name: 'Help' }));
+        await waitFor(() => expect(screen.getByRole('tooltip')).toHaveClass('open'));
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Tooltip, {
+            props: { text: 'More info', children: triggerSnippet('Help') },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+const MENU = [
+    { id: 'edit', label: 'Edit' },
+    { id: 'dup', label: 'Duplicate' },
+    { id: 'del', label: 'Delete' },
+];
+describe('Dropdown', () => {
+    it('trigger advertises a collapsed menu', () => {
+        render(Dropdown, { props: { label: 'Actions', items: MENU } });
+        const trigger = screen.getByRole('button', { name: 'Actions' });
+        expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('opens a menu and reports selection', async () => {
+        const onselect = vi.fn();
+        render(Dropdown, { props: { label: 'Actions', items: MENU, onselect } });
+        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+        expect(screen.getByRole('menu')).toBeInTheDocument();
+        expect(screen.getAllByRole('menuitem')).toHaveLength(3);
+        await userEvent.click(screen.getByRole('menuitem', { name: 'Delete' }));
+        expect(onselect).toHaveBeenCalledWith('del');
+        expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    it('closes on Escape', async () => {
+        render(Dropdown, { props: { label: 'Actions', items: MENU } });
+        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+        await userEvent.keyboard('{Escape}');
+        expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    it('is axe-clean when open', async () => {
+        const { container } = render(Dropdown, {
+            props: { label: 'Actions', items: MENU },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+        await expectNoA11yViolations(container);
+    });
+});
+const NODES = [
+    {
+        id: 'src',
+        label: 'src',
+        children: [
+            { id: 'a', label: 'a.ts' },
+            { id: 'b', label: 'b.ts' },
+        ],
+    },
+    { id: 'readme', label: 'README.md' },
+];
+describe('Tree', () => {
+    it('is a labelled tree with levelled items', () => {
+        render(Tree, { props: { nodes: NODES, 'aria-label': 'Files' } });
+        expect(screen.getByRole('tree', { name: 'Files' })).toBeInTheDocument();
+        const folder = screen.getByRole('treeitem', { name: /src/ });
+        expect(folder).toHaveAttribute('aria-level', '1');
+        expect(folder).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('expands a node to reveal children', async () => {
+        render(Tree, { props: { nodes: NODES } });
+        await userEvent.click(screen.getByRole('treeitem', { name: /src/ }));
+        expect(screen.getByRole('treeitem', { name: 'a.ts' })).toHaveAttribute('aria-level', '2');
+    });
+    it('reports leaf selection', async () => {
+        const onselect = vi.fn();
+        render(Tree, { props: { nodes: NODES, onselect } });
+        await userEvent.click(screen.getByRole('treeitem', { name: 'README.md' }));
+        expect(onselect).toHaveBeenCalledWith('readme');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Tree, {
+            props: { nodes: NODES, expanded: ['src'], 'aria-label': 'Files' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/gap-primitives.test.js

@@ -0,0 +1,84 @@
+/**
+ * Golden tests for the L3 gap primitives — batch 1 (Avatar, Chip, Skeleton).
+ * Render + interaction + a11y, per the L4 harness pattern (#1422 / #1423).
+ */
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Avatar from '../Avatar.svelte';
+import Chip from '../Chip.svelte';
+import Skeleton from '../Skeleton.svelte';
+describe('Avatar', () => {
+    it('shows initials + accessible name when no src', () => {
+        render(Avatar, { props: { name: 'Ada Lovelace' } });
+        const img = screen.getByRole('img', { name: 'Ada Lovelace' });
+        expect(img).toHaveTextContent('AL');
+    });
+    it('renders an <img> with alt when src is set', () => {
+        render(Avatar, { props: { name: 'Ada', src: 'https://x/a.png' } });
+        expect(screen.getByRole('img', { name: 'Ada' }).tagName).toBe('IMG');
+    });
+    it('announces presence status', () => {
+        render(Avatar, { props: { name: 'Ada', status: 'online' } });
+        expect(screen.getByText('Online')).toBeInTheDocument();
+    });
+    it('falls back to initials when the image fails to load', async () => {
+        render(Avatar, {
+            props: { name: 'Ada Lovelace', src: 'https://x/broken.png' },
+        });
+        const img = screen.getByRole('img', { name: 'Ada Lovelace' });
+        expect(img.tagName).toBe('IMG');
+        await fireEvent.error(img);
+        expect(screen.getByRole('img', { name: 'Ada Lovelace' })).toHaveTextContent('AL');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Avatar, {
+            props: { name: 'Ada Lovelace', status: 'away' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('Chip', () => {
+    it('renders its label', () => {
+        render(Chip, { props: { label: 'TypeScript' } });
+        expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    });
+    it('selectable: toggle button exposes aria-pressed and fires onselect', async () => {
+        const onselect = vi.fn();
+        render(Chip, {
+            props: { label: 'Tag', selectable: true, selected: true, onselect },
+        });
+        const btn = screen.getByRole('button', { name: 'Tag', pressed: true });
+        await userEvent.click(btn);
+        expect(onselect).toHaveBeenCalledTimes(1);
+    });
+    it('closeable: labelled remove button fires onclose', async () => {
+        const onclose = vi.fn();
+        render(Chip, { props: { label: 'Tag', closeable: true, onclose } });
+        await userEvent.click(screen.getByRole('button', { name: 'Remove Tag' }));
+        expect(onclose).toHaveBeenCalledTimes(1);
+    });
+    it('is axe-clean (selectable + closeable)', async () => {
+        const { container } = render(Chip, {
+            props: { label: 'Tag', selectable: true, closeable: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('Skeleton', () => {
+    it('is a labelled status region', () => {
+        render(Skeleton, { props: { label: 'Loading profile' } });
+        expect(screen.getByRole('status', { name: 'Loading profile' })).toBeInTheDocument();
+    });
+    it('renders one placeholder per text line', () => {
+        const { container } = render(Skeleton, {
+            props: { variant: 'text', lines: 3 },
+        });
+        expect(container.querySelectorAll('.skeleton')).toHaveLength(3);
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Skeleton, { props: { variant: 'circle' } });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * UI components - Buttons, cards, badges, and other UI elements
+ */
+export { default as Avatar } from './Avatar.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Tree } from './Tree.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/ui/index.js

@@ -0,0 +1,18 @@
+/**
+ * UI components - Buttons, cards, badges, and other UI elements
+ */
+// Export components
+export { default as Avatar } from './Avatar.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Tree } from './Tree.svelte';
+// Note: Component prop types (BadgeProps, ButtonProps, etc.) are available
+// via svelte-package build output but cannot be re-exported here because
+// tsc --noEmit cannot resolve type exports from .svelte files.
+// Generic BadgeProps, ButtonProps, CardProps are re-exported from types-generic.ts.

package/dist/i18n/Trans.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+/**
+ * `<Trans>` — the component form of `$t` (S13 #1418), for translating strings in
+ * element bodies. Equal first-class partner to `useI18n().t` for attributes.
+ *
+ * @example
+ * ```svelte
+ * <p><Trans key="ui.pagination.range" vars={{ count, total }} /></p>
+ * ```
+ *
+ * Phase 1 renders plain interpolated text. Rich interpolation (links, nested
+ * components inside placeholders) is a planned extension via snippet values —
+ * see the i18n ADR.
+ */
+import type { LanguageVariables } from './render.js';
+import { useI18n } from './use-i18n.js';
+
+interface Props {
+  /** Message key, e.g. `ui.data_table.empty`. */
+  key: string;
+  /** Variables substituted into `{var}` placeholders. */
+  vars?: LanguageVariables;
+}
+
+const { key, vars }: Props = $props();
+const i18n = useI18n();
+</script>
+
+{i18n.t(key, vars)}

package/dist/i18n/Trans.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<Trans>` — the component form of `$t` (S13 #1418), for translating strings in
+ * element bodies. Equal first-class partner to `useI18n().t` for attributes.
+ *
+ * @example
+ * ```svelte
+ * <p><Trans key="ui.pagination.range" vars={{ count, total }} /></p>
+ * ```
+ *
+ * Phase 1 renders plain interpolated text. Rich interpolation (links, nested
+ * components inside placeholders) is a planned extension via snippet values —
+ * see the i18n ADR.
+ */
+import type { LanguageVariables } from './render.js';
+interface Props {
+    /** Message key, e.g. `ui.data_table.empty`. */
+    key: string;
+    /** Variables substituted into `{var}` placeholders. */
+    vars?: LanguageVariables;
+}
+declare const Trans: import("svelte").Component<Props, {}, "">;
+type Trans = ReturnType<typeof Trans>;
+export default Trans;
+//# sourceMappingURL=Trans.svelte.d.ts.map

package/dist/i18n/Trans.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trans.svelte.d.ts","sourceRoot":"","sources":["../../src/i18n/Trans.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIrD,UAAU,KAAK;IACb,+CAA+C;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAeD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/i18n/__tests__/i18n.test.js

@@ -0,0 +1,74 @@
+/**
+ * Unit coverage for the client i18n core (S13 #1418): the message-default
+ * registry, the reactive store's resolution order, and `{var}` interpolation.
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+import { clearRegisteredMessages, createI18nContext, defineMessages, getRegisteredDefault, } from '../index.js';
+afterEach(() => {
+    clearRegisteredMessages();
+});
+describe('defineMessages', () => {
+    it('registers English defaults and returns a typed key map', () => {
+        const M = defineMessages({
+            'ui.demo.hello': 'Hello',
+            'ui.demo.bye': 'Goodbye',
+        });
+        expect(M['ui.demo.hello']).toBe('ui.demo.hello');
+        expect(getRegisteredDefault('ui.demo.hello')).toBe('Hello');
+        expect(getRegisteredDefault('ui.demo.bye')).toBe('Goodbye');
+    });
+    it('is idempotent for an identical default', () => {
+        defineMessages({ 'ui.demo.hello': 'Hello' });
+        expect(() => defineMessages({ 'ui.demo.hello': 'Hello' })).not.toThrow();
+    });
+    it('throws when a key is redefined with a different default', () => {
+        defineMessages({ 'ui.demo.hello': 'Hello' });
+        expect(() => defineMessages({ 'ui.demo.hello': 'Hi' })).toThrow(/already registered/);
+    });
+});
+describe('I18nStore.t resolution order', () => {
+    it('falls back to the registered default when no snapshot has the key', () => {
+        defineMessages({ 'ui.demo.empty': 'No data available' });
+        const store = createI18nContext();
+        expect(store.t('ui.demo.empty')).toBe('No data available');
+        expect(store.locale).toBe('en');
+    });
+    it('prefers the snapshot template over the registered default', () => {
+        defineMessages({ 'ui.demo.empty': 'No data available' });
+        const store = createI18nContext({
+            locale: 'fr',
+            messages: { 'ui.demo.empty': 'Aucune donnée' },
+        });
+        expect(store.t('ui.demo.empty')).toBe('Aucune donnée');
+        expect(store.locale).toBe('fr');
+    });
+    it('falls back to the key itself for an unknown message (never blank)', () => {
+        const store = createI18nContext();
+        expect(store.t('ui.demo.unknown')).toBe('ui.demo.unknown');
+    });
+    it('reflects a snapshot reassignment (locale switch)', () => {
+        defineMessages({ 'ui.demo.empty': 'No data available' });
+        const store = createI18nContext();
+        expect(store.t('ui.demo.empty')).toBe('No data available');
+        store.snapshot = {
+            locale: 'es',
+            messages: { 'ui.demo.empty': 'Sin datos' },
+        };
+        expect(store.locale).toBe('es');
+        expect(store.t('ui.demo.empty')).toBe('Sin datos');
+    });
+});
+describe('interpolation', () => {
+    it('substitutes {var} placeholders from the snapshot template', () => {
+        const store = createI18nContext({
+            locale: 'en',
+            messages: { 'ui.demo.range': 'Showing {count} of {total}' },
+        });
+        expect(store.t('ui.demo.range', { count: 3, total: 9 })).toBe('Showing 3 of 9');
+    });
+    it('collapses missing variables to empty strings', () => {
+        defineMessages({ 'ui.demo.greet': 'Hi {name}{title}' });
+        const store = createI18nContext();
+        expect(store.t('ui.demo.greet', { name: 'Ada' })).toBe('Hi Ada');
+    });
+});

package/dist/i18n/__tests__/render-parity.spec.js

@@ -0,0 +1,37 @@
+/**
+ * Pins the client's inlined `renderTemplate` (src/i18n/render.ts) against the
+ * canonical `@happyvertical/smrt-languages` implementation so the two
+ * interpolation contracts never drift (S13 #1418). The client keeps its own
+ * copy to avoid bundling the heavy languages package; this test is the guard.
+ *
+ * Importing the languages root triggers its `__smrt-register__` manifest
+ * side-effect, which throws under vitest's source-alias (dev-server URL, not a
+ * file) — unrelated to the pure `renderTemplate`. Record-not-throw via
+ * SMRT_STRICT_REGISTRY=false set before a dynamic import.
+ */
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { renderTemplate as clientRender } from '../render.js';
+let languagesRender;
+beforeAll(async () => {
+    vi.stubEnv('SMRT_STRICT_REGISTRY', 'false');
+    ({ renderTemplate: languagesRender } = await import('@happyvertical/smrt-languages'));
+});
+const NOW = new Date('2026-06-17T12:00:00.000Z');
+const cases = [
+    ['No interpolation here', undefined],
+    ['No interpolation here', {}],
+    ['Showing {count} of {total}', { count: 3, total: 9 }],
+    ['Hi {name}{title}', { name: 'Ada' }], // missing → empty
+    ['Null is {x} here', { x: null }],
+    ['Date: {when}', { when: NOW }],
+    ['List: {items}', { items: [1, 2, 3] }],
+    ['Obj: {meta}', { meta: { a: 1 } }],
+    ['Trim {  spaced  } key', { spaced: 'ok' }],
+    ['Number {n}', { n: 0 }],
+    ['Bool {b}', { b: false }],
+];
+describe('renderTemplate parity with @happyvertical/smrt-languages', () => {
+    it.each(cases)('renders %j identically', (template, vars) => {
+        expect(clientRender(template, vars)).toBe(languagesRender(template, vars));
+    });
+});

package/dist/i18n/context.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+ * i18n context + reactive store (Sweep S13 #1418).
+ *
+ * The `Provider` builds an `I18nStore` from a server snapshot and puts it on a
+ * Svelte context; `useI18n()` / `$t` / `<Trans>` read it synchronously. Browser
+ * safe — interpolation uses the client's own dependency-free `renderTemplate`
+ * (see ./render.ts) so the heavy languages package is never bundled client-side.
+ */
+import { type LanguageVariables } from './render.js';
+/** A per-locale dictionary of message templates, as built on the server. */
+export interface I18nSnapshot {
+    /** The active locale (normalized BCP-47-ish tag). */
+    locale: string;
+    /** `key → template` for the active locale. Variables are applied client-side. */
+    messages: Record<string, string>;
+}
+/**
+ * Reactive holder for the active locale + message templates. Locale switching
+ * (assigning `snapshot`) re-renders every `$t` / `<Trans>` reading this store.
+ */
+export declare class I18nStore {
+    #private;
+    constructor(snapshot?: Partial<I18nSnapshot>);
+    get locale(): string;
+    /** Replace the active snapshot (e.g. on a locale switch). */
+    set snapshot(snapshot: I18nSnapshot);
+    /**
+     * Resolve and interpolate a message. Resolution order: server-snapshot
+     * template → registered English default → the key itself (a loud,
+     * never-blank fallback). Interpolation uses the same `renderTemplate` the
+     * server uses, so `{var}` placeholders render identically.
+     */
+    t: (key: string, vars?: LanguageVariables) => string;
+}
+/** Create a store from a snapshot (used by `Provider`). */
+export declare function createI18nContext(snapshot?: Partial<I18nSnapshot>): I18nStore;
+/** Put an i18n store on context (used by `Provider`). */
+export declare function setI18nContext(store: I18nStore): I18nStore;
+/** Read the i18n store, or `null` when there is no `Provider` above. */
+export declare function tryGetI18nContext(): I18nStore | null;
+/** Read the i18n store, creating a default fallback if there is no Provider. */
+export declare function getI18nContext(): I18nStore;
+//# sourceMappingURL=context.svelte.d.ts.map

package/dist/i18n/context.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../../src/i18n/context.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,KAAK,iBAAiB,EAAkB,MAAM,aAAa,CAAC;AAErE,4EAA4E;AAC5E,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED;;;GAGG;AACH,qBAAa,SAAS;;gBAIR,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;IAK5C,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,6DAA6D;IAC7D,IAAI,QAAQ,CAAC,QAAQ,EAAE,YAAY,EAGlC;IAED;;;;;OAKG;IACH,CAAC,GAAI,KAAK,MAAM,EAAE,OAAO,iBAAiB,KAAG,MAAM,CAGjD;CACH;AAID,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,SAAS,CAE7E;AAED,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAE1D;AAED,wEAAwE;AACxE,wBAAgB,iBAAiB,IAAI,SAAS,GAAG,IAAI,CAEpD;AAOD,gFAAgF;AAChF,wBAAgB,cAAc,IAAI,SAAS,CAK1C"}

package/dist/i18n/context.svelte.js

@@ -0,0 +1,69 @@
+/**
+ * i18n context + reactive store (Sweep S13 #1418).
+ *
+ * The `Provider` builds an `I18nStore` from a server snapshot and puts it on a
+ * Svelte context; `useI18n()` / `$t` / `<Trans>` read it synchronously. Browser
+ * safe — interpolation uses the client's own dependency-free `renderTemplate`
+ * (see ./render.ts) so the heavy languages package is never bundled client-side.
+ */
+import { getContext, setContext } from 'svelte';
+import { getRegisteredDefault } from './registry.js';
+import { renderTemplate } from './render.js';
+/**
+ * Reactive holder for the active locale + message templates. Locale switching
+ * (assigning `snapshot`) re-renders every `$t` / `<Trans>` reading this store.
+ */
+export class I18nStore {
+    #locale = $state('en');
+    #messages = $state({});
+    constructor(snapshot) {
+        if (snapshot?.locale)
+            this.#locale = snapshot.locale;
+        if (snapshot?.messages)
+            this.#messages = snapshot.messages;
+    }
+    get locale() {
+        return this.#locale;
+    }
+    /** Replace the active snapshot (e.g. on a locale switch). */
+    set snapshot(snapshot) {
+        this.#locale = snapshot.locale;
+        this.#messages = snapshot.messages;
+    }
+    /**
+     * Resolve and interpolate a message. Resolution order: server-snapshot
+     * template → registered English default → the key itself (a loud,
+     * never-blank fallback). Interpolation uses the same `renderTemplate` the
+     * server uses, so `{var}` placeholders render identically.
+     */
+    t = (key, vars) => {
+        const template = this.#messages[key] ?? getRegisteredDefault(key) ?? key;
+        return renderTemplate(template, vars);
+    };
+}
+const I18N_KEY = Symbol('smrt-i18n');
+/** Create a store from a snapshot (used by `Provider`). */
+export function createI18nContext(snapshot) {
+    return new I18nStore(snapshot);
+}
+/** Put an i18n store on context (used by `Provider`). */
+export function setI18nContext(store) {
+    return setContext(I18N_KEY, store);
+}
+/** Read the i18n store, or `null` when there is no `Provider` above. */
+export function tryGetI18nContext() {
+    return getContext(I18N_KEY) ?? null;
+}
+// A process-wide fallback store so `useI18n()` works outside a Provider
+// (standalone primitives, tests) without throwing — it resolves through
+// registered defaults. Created lazily to avoid running runes at module load.
+let fallbackStore = null;
+/** Read the i18n store, creating a default fallback if there is no Provider. */
+export function getI18nContext() {
+    const ctx = tryGetI18nContext();
+    if (ctx)
+        return ctx;
+    if (!fallbackStore)
+        fallbackStore = new I18nStore();
+    return fallbackStore;
+}

package/dist/i18n/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @happyvertical/smrt-ui/i18n — client i18n layer (Sweep S13 #1418).
+ *
+ * Browser-safe. Provides `defineMessages` (register a package's English code
+ * defaults), `useI18n()` / `<Trans>` (read + render translations), and the
+ * context plumbing the `Provider` uses. The server-side snapshot builder lives
+ * on the `./i18n/server` subpath (it pulls the full languages resolver).
+ *
+ * See `docs/content/architecture/i18n.md` for the design.
+ */
+export { createI18nContext, getI18nContext, type I18nSnapshot, I18nStore, setI18nContext, tryGetI18nContext, } from './context.svelte.js';
+export { clearRegisteredMessages, defineMessages, getRegisteredDefault, getRegisteredDefaults, type MessageCatalog, } from './registry.js';
+export { default as Trans } from './Trans.svelte';
+import './strings.js';
+export { M } from './strings.ui.js';
+export { useI18n } from './use-i18n.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,YAAY,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,cAAc,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAMlD,OAAO,cAAc,CAAC;AAKtB,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}