@dokebi/template-inertia 0.4.1 → 0.4.4

package/dist/i18n.js

@@ -0,0 +1,901 @@
+import { computed, inject, shallowRef, toRaw, } from 'vue';
+import { BundleStore } from './i18n-store.js';
+/** A coded error of the browser runtime; the codes are the server translator's. */
+export class PageI18nError extends Error {
+    code;
+    plugin = 'dokebi-template-inertia';
+    fix;
+    constructor(code, message, fix, cause) {
+        super(message, cause === undefined ? undefined : { cause });
+        this.name = 'PageI18nError';
+        this.code = code;
+        this.fix =
+            fix ??
+                (code === 'UNAVAILABLE'
+                    ? 'Install @dokebi/i18n and set options.dokebi-i18n.http.enabled: true; views/app.js installs pageI18n(props.initialPage, { router }).'
+                    : code === 'RECOVERY_FAILED'
+                        ? 'The page asked the server for the messages the browser lacked and got no Inertia answer; the document is loaded again without the cookie claim.'
+                        : 'Check the key, the catalogs under src/shared/locales, the message parameters and the named formats.');
+    }
+}
+/** Request header naming what this browser holds: `v=<version>; h=<token><token>…`. */
+export const PAGE_I18N_HEADER = 'X-Dokebi-I18n';
+/** Where SSR finds the bundles a full load left out (filled by dokebi-i18n in the same process). */
+const BUNDLES = Symbol.for('dokebi.i18n.page-bundles');
+const TOKEN = 8;
+const RELOADED = 'dokebi-i18n:reloaded';
+const NAME = /^[a-zA-Z_][a-zA-Z0-9_]{0,63}$/;
+const CATEGORIES = new Set(['zero', 'one', 'two', 'few', 'many', 'other']);
+const MAX_DATE = 8640000000000000;
+/**
+ * The defaults of dokebi-i18n's maxKeyLength and maxBranchLength, for a server that does not send
+ * them (an older @dokebi/i18n) and for createI18n without them; the page's settings carry the values
+ * the server uses, so a catalog the server takes is taken here too.
+ */
+const MAX_KEY_LENGTH = 256;
+const MAX_BRANCH_LENGTH = 16384;
+/** The server's message syntax (dokebi-i18n message.ts), parsed once per message. */
+function parse(text, maxLength) {
+    if (typeof text !== 'string' || text.length > maxLength)
+        throw new PageI18nError('INVALID_CATALOG', `Message branches must be strings of at most ${maxLength} characters (maxBranchLength)`);
+    const parts = [];
+    let literal = '';
+    for (let index = 0; index < text.length;) {
+        const char = text[index];
+        if ((char === '{' || char === '}') && text[index + 1] === char) {
+            literal += char;
+            index += 2;
+            continue;
+        }
+        if (char === '{') {
+            const end = text.indexOf('}', index + 1);
+            const name = text.slice(index + 1, end);
+            if (end < 0 || !NAME.test(name))
+                throw new PageI18nError('INVALID_CATALOG', 'Invalid named placeholder');
+            if (literal) {
+                parts.push(literal);
+                literal = '';
+            }
+            parts.push({ name });
+            index = end + 1;
+        }
+        else {
+            if (char === '}')
+                throw new PageI18nError('INVALID_CATALOG', 'Unescaped closing brace');
+            literal += char;
+            index++;
+        }
+    }
+    if (literal)
+        parts.push(literal);
+    return parts;
+}
+function compile(input, maxLength) {
+    if (typeof input === 'string')
+        return { plural: false, branches: new Map([['other', parse(input, maxLength)]]) };
+    if (!input ||
+        typeof input !== 'object' ||
+        Array.isArray(input) ||
+        typeof input.other !== 'string' ||
+        Object.keys(input).some((key) => !CATEGORIES.has(key)))
+        throw new PageI18nError('INVALID_CATALOG', 'Plural messages require other and only cardinal categories');
+    return {
+        plural: true,
+        branches: new Map(Object.entries(input).map(([key, value]) => [key, parse(value, maxLength)])),
+    };
+}
+function parameter(parameters, name) {
+    if (!parameters || typeof parameters !== 'object')
+        throw new PageI18nError('INVALID_PARAMETER', 'Missing or invalid message parameters');
+    // Own data properties only (a Vue reactive object answers through its proxy, as data).
+    const descriptor = Object.getOwnPropertyDescriptor(parameters, name);
+    const value = descriptor && 'value' in descriptor ? descriptor.value : undefined;
+    if (typeof value !== 'string' && (typeof value !== 'number' || !Number.isFinite(value)))
+        throw new PageI18nError('INVALID_PARAMETER', 'Message parameters must be own strings or finite numbers');
+    return value;
+}
+/** Flat keys from nested namespace objects: { auth: { password: { minimum } } } → auth.password.minimum. */
+function flatten(tree, prefix, target, depth) {
+    if (depth > 16 || !tree || typeof tree !== 'object' || Array.isArray(tree))
+        throw new PageI18nError('INVALID_CATALOG', 'Messages must be objects of at most 16 levels');
+    for (const [key, value] of Object.entries(tree)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === 'string' ||
+            (value !== null && typeof value === 'object' && Object.hasOwn(value, 'other')))
+            target.set(path, value);
+        else
+            flatten(value, path, target, depth + 1);
+    }
+}
+function canonical(locale) {
+    if (typeof locale !== 'string' || locale.length < 2 || locale.length > 128)
+        throw new PageI18nError('INVALID_LOCALE', 'Expected a BCP 47 locale');
+    try {
+        return new Intl.Locale(locale).baseName;
+    }
+    catch (cause) {
+        throw new PageI18nError('INVALID_LOCALE', 'Invalid BCP 47 locale', undefined, cause);
+    }
+}
+function chainOf(locale, known, defaultLocale) {
+    const chain = [locale];
+    let parent = locale;
+    while (parent.includes('-')) {
+        parent = parent.slice(0, parent.lastIndexOf('-'));
+        if (known(parent))
+            chain.push(parent);
+    }
+    if (!chain.includes(defaultLocale))
+        chain.push(defaultLocale);
+    return chain;
+}
+function namespaceOf(key) {
+    const dot = key.indexOf('.');
+    return dot < 0 ? key : key.slice(0, dot);
+}
+function describe(error) {
+    return error instanceof Error
+        ? {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+            ...(error.code ? { code: error.code } : {}),
+        }
+        : { message: String(error) };
+}
+function bundleOf(token, messages) {
+    const entries = new Map();
+    for (const [source, byKey] of Object.entries(messages))
+        for (const [key, raw] of Object.entries(byKey))
+            entries.set(key, { source, raw: raw });
+    return { token, entries };
+}
+/**
+ * One app's translations: `t`, `n`, `d` and `has` are bound (destructure them from useI18n()),
+ * `locale` and `locales` are read-only refs, so templates re-render when the language changes.
+ */
+export class I18n {
+    locale;
+    locales;
+    /** The language of an I18n made by createI18n (a page's comes from its payload). */
+    #locale = shallowRef('');
+    #locales;
+    /** page locale → namespace → bundle: what this document holds. */
+    #bundles = new Map();
+    /** createI18n: the given messages per source locale, joined into bundles per locale on use. */
+    #sources = new Map();
+    #fallback;
+    #formats = new Map();
+    #defaults = new Map();
+    #defaultCharacters = 0;
+    #settings;
+    #logger;
+    #feed;
+    /** The last page payload taken in and the catalog version this document holds. */
+    #absorbed;
+    #version;
+    /** The shown page lacks messages; they are being fetched. */
+    #pending = false;
+    /** Set by pageI18n: how a language switch reaches the server. */
+    #switcher;
+    /** D-0126: the kept bundles (a browser page whose server allows it). */
+    #storeHost;
+    #store;
+    /** The locale whose tokens the header names first (a language switch in progress). */
+    #preferred;
+    constructor(options) {
+        this.#logger = options.logger;
+        const locale = canonical(options.locale);
+        this.#settings = {
+            defaultLocale: canonical(options.defaultLocale ?? locale),
+            missing: options.missing ?? 'error',
+            timeZone: options.timeZone ?? 'UTC',
+            maxOutputLength: options.maxOutputLength ?? 65536,
+            ...(options.maxKeyLength === undefined ? {} : { maxKeyLength: options.maxKeyLength }),
+            ...(options.maxBranchLength === undefined
+                ? {}
+                : { maxBranchLength: options.maxBranchLength }),
+            numberFormats: options.numberFormats ?? {},
+            dateFormats: options.dateFormats ?? {},
+        };
+        for (const [name, tree] of Object.entries(options.messages ?? {})) {
+            const raw = new Map();
+            flatten(tree, '', raw, 0);
+            const source = canonical(name);
+            const merged = new Map(this.#sources.get(source) ?? []);
+            for (const [key, message] of raw)
+                merged.set(key, message);
+            this.#sources.set(source, merged);
+        }
+        this.#fallback = options.fallback
+            ? { locale, chain: Object.freeze(options.fallback.map(canonical)) }
+            : undefined;
+        this.#locales = Object.freeze([...this.#sources.keys()]);
+        this.#locale.value = locale;
+        this.locale = computed(() => this.#now());
+        this.locales = computed(() => {
+            this.#now();
+            return this.#locales;
+        });
+    }
+    /** Translates `key` with the lookup chain; with `defaultValue`, only the locale's own message wins. */
+    t = (key, value, parameters) => {
+        const locale = this.#now();
+        if (typeof key !== 'string' ||
+            key.length === 0 ||
+            key.length > (this.#settings.maxKeyLength ?? MAX_KEY_LENGTH))
+            throw new PageI18nError('MISSING_MESSAGE', 'Invalid message key');
+        const explicitDefault = typeof value === 'string';
+        let entry = this.#entry(locale, key);
+        // An explicit default wins over every locale but this one.
+        if (explicitDefault && entry && entry.source !== locale)
+            entry = undefined;
+        if (!entry && explicitDefault) {
+            let compiled = this.#defaults.get(value);
+            if (!compiled) {
+                compiled = compile(value, this.#settings.maxBranchLength ?? MAX_BRANCH_LENGTH);
+                // Defaults are application literals; bounded like the server's (64 templates, 64 Ki).
+                if (this.#defaults.size < 64 && this.#defaultCharacters + value.length <= 65536) {
+                    this.#defaults.set(value, compiled);
+                    this.#defaultCharacters += value.length;
+                }
+            }
+            return this.#render(compiled, this.#rules(locale), parameters);
+        }
+        if (!entry) {
+            if (this.#pending) {
+                // The page's messages are on their way (pageI18n fetches them): the key until then.
+                this.#debug('Translation pending, key shown', { code: 'I18N_PAGE_PENDING', locale });
+                return key;
+            }
+            if (this.#settings.missing === 'error')
+                throw new PageI18nError('MISSING_MESSAGE', `No message ${JSON.stringify(key)} in the locale fallback chain of ${locale}`, `Add the key to src/shared/locales/<locale>/${key.split('.', 1)[0]}.json, or send that namespace to the page (options.dokebi-i18n.http.pageMessages, or pageMessages(request, '${key.split('.', 1)[0]}') in the route).`);
+            if (key.length > this.#settings.maxOutputLength)
+                throw new PageI18nError('OUTPUT_LIMIT', 'Missing key exceeds maxOutputLength');
+            this.#debug('Missing translation returned as key', { code: 'I18N_MISSING_KEY', locale });
+            return key;
+        }
+        return this.#render(this.#compiled(entry, key), this.#rules(entry.source), explicitDefault ? parameters : value);
+    };
+    /** True when the lookup chain of the current locale has `key`. */
+    has = (key) => this.#entry(this.#now(), key) !== undefined;
+    /** A finite number with a named format of the dokebi-i18n entry (`default`: Intl's). */
+    n = (value, format = 'default') => {
+        if (typeof value !== 'number' || !Number.isFinite(value))
+            throw new PageI18nError('INVALID_PARAMETER', 'Expected a finite number');
+        const locale = this.#now();
+        const formats = this.#formatsOf(locale);
+        let formatter = formats.numbers.get(format);
+        if (!formatter) {
+            const preset = format === 'default' ? {} : this.#settings.numberFormats[format];
+            if (!preset)
+                throw new PageI18nError('INVALID_FORMAT', 'Unknown number format');
+            try {
+                formatter = new Intl.NumberFormat(locale, preset);
+            }
+            catch (cause) {
+                throw new PageI18nError('INVALID_FORMAT', 'Invalid Intl number format', undefined, cause);
+            }
+            formats.numbers.set(format, formatter);
+        }
+        return formatter.format(value);
+    };
+    /**
+     * The application's time zone of this page's settings (D-0178: it follows i18n setTimeZone on
+     * the server): pass it to the @dokebi/i18n/calendar helpers so pages count days as the server does.
+     */
+    timeZone = () => this.#settings.timeZone;
+    /** A Date or epoch milliseconds with a named format, in the configured time zone. */
+    d = (value, format = 'default') => {
+        const time = value instanceof Date ? value.getTime() : value;
+        if (typeof time !== 'number' || !Number.isFinite(time) || Math.abs(time) > MAX_DATE)
+            throw new PageI18nError('INVALID_PARAMETER', 'Expected a valid Date or epoch milliseconds');
+        const locale = this.#now();
+        const formats = this.#formatsOf(locale);
+        let formatter = formats.dates.get(format);
+        if (!formatter) {
+            const preset = format === 'default' ? {} : this.#settings.dateFormats[format];
+            if (!preset)
+                throw new PageI18nError('INVALID_FORMAT', 'Unknown date format');
+            try {
+                formatter = new Intl.DateTimeFormat(locale, {
+                    timeZone: this.#settings.timeZone,
+                    ...preset,
+                });
+            }
+            catch (cause) {
+                throw new PageI18nError('INVALID_FORMAT', 'Invalid Intl date format', undefined, cause);
+            }
+            formats.dates.set(format, formatter);
+        }
+        return formatter.format(time);
+    };
+    /** The language's own name (`English`, `Français`) for a language switch. */
+    localeName = (locale) => new Intl.DisplayNames([locale], { type: 'language' }).of(locale) ?? locale;
+    /**
+     * Shows another language. On an Inertia page (pageI18n) it writes the preference cookie and
+     * reloads the page's props from the server (no document reload); otherwise the messages of
+     * `locale` must be loaded already.
+     */
+    switchLocale = async (locale) => {
+        const target = canonical(locale);
+        if (this.#switcher) {
+            // The bundles this browser kept for that language are named in the reload's header.
+            this.#preload(target);
+            this.#preferred = target;
+            return this.#switcher(target);
+        }
+        if (!this.#sources.has(target))
+            throw new PageI18nError('INVALID_LOCALE', `No messages for ${target}`);
+        this.#locale.value = target;
+    };
+    /** Vue plugin: provides this instance to useI18n() and `$t`, `$n`, `$d` to templates. */
+    install(app) {
+        app.provide(KEY, this);
+        const globals = app.config.globalProperties;
+        globals.$t = this.t;
+        globals.$n = this.n;
+        globals.$d = this.d;
+        globals.$i18n = this;
+        this.#feed?.attach(app);
+    }
+    /** @internal pageI18n's connection: the page payloads, the language switch and the store. */
+    connect(feed, switcher, store) {
+        this.#feed = feed;
+        this.#switcher = switcher;
+        this.#storeHost = store;
+        this.#now();
+    }
+    /**
+     * @internal The value of X-Dokebi-I18n: the catalog version and the tokens of the bundles this
+     * document holds (the shown locale's first), within the server's header limit.
+     */
+    heldHeader() {
+        const shown = this.#now();
+        const head = `v=${this.#version ?? ''}; h=`;
+        const room = Math.floor(((this.#settings.maxHeaderBytes ?? 4096) - head.length) / TOKEN);
+        const first = this.#preferred ?? shown;
+        const tokens = [];
+        const add = (locale) => {
+            for (const bundle of this.#bundles.get(locale)?.values() ?? [])
+                if (bundle.token !== undefined && tokens.length < room)
+                    tokens.push(bundle.token);
+        };
+        add(first);
+        for (const locale of this.#bundles.keys())
+            if (locale !== first)
+                add(locale);
+        return head + tokens.join('');
+    }
+    /** @internal */
+    get cookie() {
+        return this.#settings.cookie;
+    }
+    /** @internal The claim cookie of the store (settings.cache.cookie), if bundles are kept. */
+    get claimCookie() {
+        return this.#store ? this.#settings.cache?.cookie : undefined;
+    }
+    /** @internal The store, for pageI18n and tests (undefined when nothing is kept). */
+    get store() {
+        return this.#store;
+    }
+    /**
+     * @internal Takes in the `i18n` of a recovery answer (pageI18n's fetch) and checks the shown
+     * page again; true when nothing is missing now.
+     */
+    recovered(payload) {
+        const shown = this.#absorbed;
+        this.#absorb(payload, false);
+        if (!shown)
+            return !this.#pending;
+        return this.#absorb(shown, true);
+    }
+    /** The current language; takes in the shown page's payload first (pageI18n). */
+    #now() {
+        const payload = this.#feed?.current();
+        if (!payload)
+            return this.#locale.value;
+        // Vue hands the page through a reactive proxy: read the plain data, track only the page.
+        const raw = toRaw(payload);
+        if (raw !== this.#absorbed)
+            this.#absorb(raw, true);
+        return raw.locale;
+    }
+    /**
+     * The messages of one page payload: the bundles it carries replace those of the same locale and
+     * namespace (and are kept), and every namespace it needs must then be held: by token for the
+     * bundles the server left out because of the cookie (`held`: memory, SSR registry, store), as
+     * held for the others (left out because this document named them, or a page from history whose
+     * bundles a reload of the document lost: memory, then the newest kept one). When some are not
+     * there, pageI18n fetches them and keys show until they arrive (it does not mount before).
+     */
+    #absorb(payload, shown) {
+        shapeOf(payload);
+        if (shown) {
+            this.#absorbed = payload;
+            // A switch's preference lasts until a page is shown (its answer, or any later page): from
+            // then on the shown locale's tokens come first again in a header that may be too short.
+            this.#preferred = undefined;
+        }
+        if (payload.settings && (payload.settings !== this.#appliedSettings || !this.#version))
+            this.#apply(payload.settings);
+        if (payload.version && payload.settings)
+            this.#version = payload.version;
+        const locale = payload.locale;
+        let held = this.#bundles.get(locale);
+        if (!held) {
+            held = new Map();
+            this.#bundles.set(locale, held);
+        }
+        // The carried bundles, grouped by namespace (each key's namespace is its first part).
+        const carried = new Map();
+        for (const namespace of Object.keys(payload.bundles ?? {}))
+            carried.set(namespace, {});
+        for (const [source, messages] of Object.entries(payload.messages ?? {}))
+            for (const [key, message] of Object.entries(messages)) {
+                const namespace = namespaceOf(key);
+                let fragment = carried.get(namespace);
+                if (!fragment) {
+                    fragment = {};
+                    carried.set(namespace, fragment);
+                }
+                let byKey = fragment[source];
+                if (!byKey) {
+                    byKey = {};
+                    fragment[source] = byKey;
+                }
+                byKey[key] = message;
+            }
+        for (const [namespace, fragment] of carried) {
+            const token = payload.bundles?.[namespace];
+            held.set(namespace, bundleOf(token, fragment));
+            if (token !== undefined)
+                this.#store?.keep(locale, namespace, token, fragment);
+        }
+        this.#store?.show(locale);
+        let index;
+        const missing = [];
+        for (const namespace of payload.namespaces) {
+            if (carried.has(namespace))
+                continue;
+            const wanted = payload.held?.[namespace];
+            const have = held.get(namespace);
+            if (have && (wanted === undefined || have.token === wanted))
+                continue;
+            const fromServer = wanted === undefined ? undefined : this.#registered(locale, namespace, wanted);
+            if (fromServer) {
+                held.set(namespace, fromServer);
+                continue;
+            }
+            if (this.#store) {
+                index ??= this.#store.index();
+                const kept = this.#store.read(locale, namespace, wanted, index);
+                if (kept) {
+                    held.set(namespace, bundleOf(kept.token, kept.messages));
+                    continue;
+                }
+            }
+            missing.push(namespace);
+        }
+        const complete = missing.length === 0;
+        if (!complete)
+            this.#debug('Page messages missing from this browser', {
+                code: 'I18N_PAGE_INCOMPLETE',
+                locale,
+                missing: missing.length,
+                claimed: Object.keys(payload.held ?? {}).length,
+            });
+        const fetching = this.#feed?.absorbed(payload, complete) ?? false;
+        this.#pending = !complete && fetching;
+        return complete;
+    }
+    #appliedSettings;
+    #apply(settings) {
+        this.#appliedSettings = settings;
+        this.#settings = {
+            defaultLocale: settings.defaultLocale,
+            missing: settings.missing,
+            timeZone: settings.timeZone,
+            maxOutputLength: settings.maxOutputLength,
+            ...(settings.maxKeyLength === undefined ? {} : { maxKeyLength: settings.maxKeyLength }),
+            ...(settings.maxBranchLength === undefined
+                ? {}
+                : { maxBranchLength: settings.maxBranchLength }),
+            cookie: settings.cookie,
+            numberFormats: settings.numberFormats,
+            dateFormats: settings.dateFormats,
+            ...(settings.maxHeaderBytes === undefined ? {} : { maxHeaderBytes: settings.maxHeaderBytes }),
+            ...(settings.cache ? { cache: settings.cache } : {}),
+        };
+        this.#locales = Object.freeze([...settings.locales]);
+        // Formats and the time zone may have changed with the version.
+        this.#formats.clear();
+        const cache = settings.cache;
+        if (cache && this.#storeHost) {
+            if (this.#store)
+                this.#store.limits = cache;
+            else {
+                this.#store = new BundleStore(this.#storeHost, cache, this.#logger);
+                // After the first page is drawn: what this browser kept for the shown locale, so visits
+                // name it too.
+                this.#store.whenIdle(() => {
+                    const shown = this.#absorbed?.locale;
+                    if (shown)
+                        this.#preload(shown);
+                });
+            }
+        }
+        else if (this.#store) {
+            this.#debug('The server no longer lets this browser keep page bundles', {
+                code: 'I18N_STORE_OFF',
+            });
+            this.#store = undefined;
+        }
+    }
+    /** SSR: the bundle the server left out, from dokebi-i18n in this process. */
+    #registered(locale, namespace, token) {
+        const registry = globalThis[BUNDLES];
+        const slot = registry?.get(`${token}:${locale}:${namespace}`);
+        return slot ? bundleOf(token, slot.messages) : undefined;
+    }
+    /** The kept bundles of `locale` this document does not hold yet, into memory (no network). */
+    #preload(locale) {
+        const store = this.#store;
+        if (!store)
+            return;
+        let held = this.#bundles.get(locale);
+        const index = store.index();
+        let loaded = 0;
+        for (const kept of index) {
+            if (kept.locale !== locale || held?.has(kept.namespace))
+                continue;
+            const found = store.read(locale, kept.namespace, kept.token, index);
+            if (!found)
+                continue;
+            if (!held) {
+                held = new Map();
+                this.#bundles.set(locale, held);
+            }
+            held.set(kept.namespace, bundleOf(found.token, found.messages));
+            loaded++;
+        }
+        if (loaded)
+            this.#debug('Kept page bundles loaded', { code: 'I18N_STORE_LOADED', locale, loaded });
+    }
+    #entry(locale, key) {
+        let byNamespace = this.#bundles.get(locale);
+        if (!byNamespace && this.#sources.size)
+            byNamespace = this.#plain(locale);
+        return byNamespace?.get(namespaceOf(key))?.entries.get(key);
+    }
+    /** createI18n: the bundles of `locale` from the given messages, joined as the server does. */
+    #plain(locale) {
+        const chain = this.#fallback?.locale === locale
+            ? this.#fallback.chain
+            : chainOf(locale, (name) => this.#sources.has(name), this.#settings.defaultLocale);
+        const fragments = new Map();
+        const seen = new Set();
+        for (const source of chain)
+            for (const [key, raw] of this.#sources.get(source) ?? []) {
+                if (seen.has(key))
+                    continue;
+                seen.add(key);
+                const namespace = namespaceOf(key);
+                let entries = fragments.get(namespace);
+                if (!entries) {
+                    entries = new Map();
+                    fragments.set(namespace, entries);
+                }
+                entries.set(key, { source, raw });
+            }
+        const bundles = new Map();
+        for (const [namespace, entries] of fragments)
+            bundles.set(namespace, { token: undefined, entries });
+        this.#bundles.set(locale, bundles);
+        return bundles;
+    }
+    #compiled(entry, key) {
+        if (entry.compiled)
+            return entry.compiled;
+        try {
+            entry.compiled = compile(entry.raw, this.#settings.maxBranchLength ?? MAX_BRANCH_LENGTH);
+        }
+        catch (cause) {
+            // Name the message: a syntax error is otherwise hard to find among thousands.
+            throw new PageI18nError('INVALID_CATALOG', `Invalid message ${JSON.stringify(key)} in locale ${entry.source}`, undefined, cause);
+        }
+        return entry.compiled;
+    }
+    #formatsOf(locale) {
+        let formats = this.#formats.get(locale);
+        if (!formats) {
+            formats = { numbers: new Map(), dates: new Map() };
+            this.#formats.set(locale, formats);
+        }
+        return formats;
+    }
+    #rules(locale) {
+        const formats = this.#formatsOf(locale);
+        formats.rules ??= new Intl.PluralRules(locale);
+        return formats.rules;
+    }
+    #render(message, rules, parameters) {
+        let category = 'other';
+        if (message.plural) {
+            const count = parameter(parameters, 'count');
+            if (typeof count !== 'number')
+                throw new PageI18nError('INVALID_PARAMETER', 'Plural count must be a finite number');
+            category = rules.select(count);
+        }
+        const parts = message.branches.get(category) ?? message.branches.get('other');
+        const limit = this.#settings.maxOutputLength;
+        let output = '';
+        for (const part of parts ?? []) {
+            const value = typeof part === 'string' ? part : String(parameter(parameters, part.name));
+            if (output.length + value.length > limit)
+                throw new PageI18nError('OUTPUT_LIMIT', 'Rendered message exceeds maxOutputLength');
+            output += value;
+        }
+        return output;
+    }
+    #debug(message, fields) {
+        debug(this.#logger, message, fields);
+    }
+}
+function debug(logger, message, fields) {
+    if (logger && (logger.isEnabled?.('debug') ?? true))
+        logger.log('debug', message, fields);
+}
+const KEY = Symbol.for('dokebi.template-inertia.i18n');
+/** An I18n for plain Vue apps and tests: the messages are given, nothing is fetched. */
+export function createI18n(options) {
+    return new I18n(options);
+}
+export function useI18n(options) {
+    const i18n = inject(KEY, undefined);
+    if (!i18n && !options?.optional)
+        throw new PageI18nError('UNAVAILABLE', 'This page has no translations (the i18n prop is missing)');
+    return i18n;
+}
+/** The `i18n` prop of a page, or undefined; a value of another shape is INVALID_CATALOG. */
+function payloadOf(page) {
+    const value = page?.props?.i18n;
+    if (value === undefined || value === null)
+        return undefined;
+    return value;
+}
+function tokens(value) {
+    if (value === undefined)
+        return true;
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return false;
+    for (const token of Object.values(value))
+        if (typeof token !== 'string')
+            return false;
+    return true;
+}
+function shapeOf(payload) {
+    if (typeof payload !== 'object' ||
+        typeof payload.locale !== 'string' ||
+        typeof payload.version !== 'string' ||
+        !Array.isArray(payload.fallback) ||
+        !Array.isArray(payload.namespaces) ||
+        !tokens(payload.bundles) ||
+        !tokens(payload.held))
+        throw new PageI18nError('INVALID_CATALOG', 'The i18n page prop does not have the expected shape');
+}
+/** The browser's localStorage, or undefined where there is none or it is refused. */
+function localStore(browser, logger) {
+    try {
+        return browser.localStorage ?? undefined;
+    }
+    catch (error) {
+        // Reading the property throws where the user blocks site data: nothing is kept.
+        debug(logger, 'localStorage refused; page bundles are not kept', {
+            code: 'I18N_STORE_UNAVAILABLE',
+            error: describe(error),
+        });
+        return undefined;
+    }
+}
+/**
+ * The Vue plugin of an Inertia app (views/app.js and views/ssr.js install it): translations from
+ * the `i18n` prop of the page being shown (Inertia's `$page`, from `page` until Inertia's plugin
+ * is installed). A new page's messages are taken in where the page first translates, before it
+ * is drawn. With `router` (the browser), every visit names what this document holds (header
+ * X-Dokebi-I18n) so the server sends only what is new, a page whose messages this document never
+ * received is completed with `router.reload({ only: ['i18n'] })`, and switchLocale writes the
+ * preference cookie and reloads the props. In a browser it keeps the bundles it received
+ * (D-0126) when the server allows it, and when a first page lacks some (the server trusted a
+ * cookie the store does not match) it fetches them before `app.mount` mounts the app. Without
+ * the prop it installs nothing, so the same entry works before @dokebi/i18n is added.
+ */
+export function pageI18n(page, options = {}) {
+    const first = payloadOf(page);
+    const logger = options.logger;
+    if (!first) {
+        debug(logger, 'Page translations are off', { code: 'I18N_PAGE_OFF' });
+        // Nothing to provide: useI18n() explains what is missing (UNAVAILABLE).
+        return { install(_app) { } };
+    }
+    shapeOf(first);
+    const i18n = new I18n({ locale: first.locale, messages: {}, ...(logger ? { logger } : {}) });
+    const browser = globalThis;
+    const router = options.router;
+    const inBrowser = browser.document !== undefined && browser.location !== undefined;
+    const storage = options.storage === false
+        ? undefined
+        : (options.storage ?? (inBrowser ? localStore(browser, logger) : undefined));
+    const store = storage
+        ? {
+            storage,
+            ...(browser.document ? { document: browser.document } : {}),
+            secure: browser.location?.protocol === 'https:',
+            later: (work) => browser.requestIdleCallback
+                ? browser.requestIdleCallback(work, { timeout: 2000 })
+                : setTimeout(work, 0),
+        }
+        : undefined;
+    let globals;
+    let reloading;
+    let mounted = false;
+    /** The fetch of a first page's missing messages; the app mounts when it settles. */
+    let recovery;
+    const feed = {
+        attach(app) {
+            globals = app.config.globalProperties;
+            const mount = app.mount.bind(app);
+            app.mount = ((...args) => {
+                if (!recovery) {
+                    mounted = true;
+                    return mount(...args);
+                }
+                // Mounted (or hydrated) once the messages are there; the server's HTML stays meanwhile.
+                recovery.then((ready) => {
+                    if (!ready)
+                        return;
+                    mounted = true;
+                    mount(...args);
+                }, (error) => {
+                    // recover() handles its own failures; anything here is a bug worth seeing.
+                    debug(logger, 'Page mount after recovery failed', {
+                        code: 'I18N_PAGE_RECOVERY_FAILED',
+                        error: describe(error),
+                    });
+                    throw error;
+                });
+                return undefined;
+            });
+        },
+        // `$page` is Inertia's reactive page (its plugin defines the getter): reading it here makes
+        // every template that translates follow page changes, reloads included.
+        current: () => (globals ? payloadOf(globals.$page) : undefined) ?? first,
+        absorbed(payload, complete) {
+            const root = browser.document?.documentElement;
+            if (root && root.lang !== payload.locale)
+                root.lang = payload.locale;
+            if (complete)
+                return false;
+            if (!mounted && inBrowser && browser.fetch && payload === first) {
+                recovery ??= recover();
+                return true;
+            }
+            if (!router)
+                return false;
+            if (reloading === payload)
+                return true;
+            reloading = payload;
+            debug(logger, 'Page translations reloaded', {
+                code: 'I18N_PAGE_RELOAD',
+                locale: payload.locale,
+            });
+            // Not from inside the render that found the gap: the router starts a visit.
+            queueMicrotask(() => router.reload({ only: ['i18n'] }));
+            return true;
+        },
+    };
+    /**
+     * D-0126: the first page lacks bundles the cookie claimed. The cookie is rewritten from what is
+     * really kept, then the missing messages come as an Inertia partial answer of just `i18n`.
+     * Resolves true to mount; false when the document is being loaded again instead.
+     */
+    async function recover() {
+        await Promise.resolve();
+        debug(logger, 'Page messages fetched before mounting', {
+            code: 'I18N_PAGE_RECOVER',
+            locale: first?.locale,
+        });
+        // What is really kept; without a store (storage refused here) the claim goes away entirely.
+        if (i18n.store)
+            i18n.store.writeCookie();
+        else
+            dropClaim();
+        const url = page?.url ?? browser.location.href;
+        try {
+            const response = await browser.fetch(url, {
+                credentials: 'same-origin',
+                headers: {
+                    Accept: 'text/html, application/xhtml+xml',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-Inertia': 'true',
+                    ...(page?.version ? { 'X-Inertia-Version': page.version } : {}),
+                    ...(page?.component
+                        ? { 'X-Inertia-Partial-Component': page.component, 'X-Inertia-Partial-Data': 'i18n' }
+                        : {}),
+                    [PAGE_I18N_HEADER]: i18n.heldHeader(),
+                },
+            });
+            if (!response.ok || response.headers.get('x-inertia') !== 'true')
+                throw new PageI18nError('RECOVERY_FAILED', `The page's messages could not be fetched (status ${response.status})`);
+            const body = (await response.json());
+            const payload = payloadOf(body);
+            if (!payload)
+                throw new PageI18nError('RECOVERY_FAILED', 'The recovery answer has no i18n prop');
+            if (!i18n.recovered(payload))
+                throw new PageI18nError('RECOVERY_FAILED', 'The recovery answer lacks messages too');
+            debug(logger, 'Page messages recovered', { code: 'I18N_PAGE_RECOVERED' });
+            return true;
+        }
+        catch (error) {
+            return reloadWithoutClaim(error);
+        }
+    }
+    /**
+     * The last resort: the cookie is deleted, so the server sends every message with the HTML. Once
+     * per minute and tab at most; a second failure mounts the page and logs the error.
+     */
+    function dropClaim() {
+        const name = i18n.claimCookie ?? first?.settings?.cache?.cookie;
+        if (name && browser.document)
+            browser.document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax${browser.location?.protocol === 'https:' ? '; Secure' : ''}`;
+    }
+    function reloadWithoutClaim(error) {
+        dropClaim();
+        let recent = false;
+        try {
+            const at = Number(browser.sessionStorage?.getItem(RELOADED) ?? 0);
+            recent = Date.now() - at < 60_000;
+            if (!recent)
+                browser.sessionStorage?.setItem(RELOADED, String(Date.now()));
+        }
+        catch (storageError) {
+            // Without sessionStorage there is no loop guard: mount instead of reloading.
+            debug(logger, 'sessionStorage refused; the page is mounted without reloading', {
+                code: 'I18N_STORE_UNAVAILABLE',
+                error: describe(storageError),
+            });
+            recent = true;
+        }
+        if (!recent) {
+            debug(logger, 'Page loaded again without the bundle cookie', {
+                code: 'I18N_PAGE_RECOVERY_RELOAD',
+                error: describe(error),
+            });
+            browser.location?.reload();
+            return false;
+        }
+        const failure = { code: 'I18N_PAGE_RECOVERY_FAILED', error: describe(error) };
+        if (logger)
+            logger.log('error', 'Page messages could not be recovered', failure);
+        // dokebi-check: allow console-output browser code without a logger: the console is the page's log
+        else
+            console.error('Page messages could not be recovered', failure);
+        return true;
+    }
+    i18n.connect(feed, router
+        ? (locale) => new Promise((resolve) => {
+            const document = browser.document;
+            const cookie = i18n.cookie;
+            if (document && cookie)
+                document.cookie = `${cookie}=${encodeURIComponent(locale)}; Path=/; Max-Age=31536000; SameSite=Lax${browser.location?.protocol === 'https:' ? '; Secure' : ''}`;
+            debug(logger, 'Page language switch', { code: 'I18N_PAGE_SWITCH', locale });
+            // Every prop again, translated by the server in the new language; the page stays.
+            router.reload({ onFinish: () => resolve() });
+        })
+        : undefined, store);
+    router?.on('before', (event) => {
+        const visit = event.detail.visit;
+        visit.headers = { ...visit.headers, [PAGE_I18N_HEADER]: i18n.heldHeader() };
+    });
+    return i18n;
+}