vanilla-intlayer 8.5.0

package/dist/esm/getIntlayer.mjs

@@ -0,0 +1,6 @@
+import { getPlugins as e } from "./plugins.mjs";
+import { getIntlayer as t } from "@intlayer/core/interpreter";
+//#region src/getIntlayer.ts
+var n = (n, r) => t(n, r, e(r));
+//#endregion
+export { n as getIntlayer };

package/dist/esm/html/HTMLRenderer.mjs

@@ -0,0 +1,8 @@
+import { useHTML as e } from "./installIntlayerHTML.mjs";
+//#region src/html/HTMLRenderer.ts
+var t = (e, t = {}) => e, n = ({ components: t } = {}) => {
+	let n = e();
+	return (e) => n.renderHTML(e, { components: t });
+};
+//#endregion
+export { t as renderHTML, n as useHTMLRenderer };

package/dist/esm/html/index.mjs

@@ -0,0 +1,3 @@
+import { installIntlayerHTML as e, installIntlayerHTMLDynamic as t, useHTML as n } from "./installIntlayerHTML.mjs";
+import { renderHTML as r, useHTMLRenderer as i } from "./HTMLRenderer.mjs";
+export { e as installIntlayerHTML, t as installIntlayerHTMLDynamic, r as renderHTML, n as useHTML, i as useHTMLRenderer };

package/dist/esm/html/installIntlayerHTML.mjs

@@ -0,0 +1,18 @@
+//#region src/html/installIntlayerHTML.ts
+var e = null, t = (t) => e || (e = { renderHTML: t }, e), n = (e) => {
+	let n;
+	if (typeof e == "function") n = e;
+	else {
+		let { components: t, renderHTML: r } = e ?? {};
+		n = r || ((e, n) => {
+			let r = n && typeof n == "object" && "components" in n ? n.components : n, i = {
+				...t ?? {},
+				...r ?? {}
+			};
+			return Object.keys(i).length, e;
+		});
+	}
+	return t(n);
+}, r = () => e || { renderHTML: (e) => e }, i = async (t) => e || n(await t());
+//#endregion
+export { t as createIntlayerHTMLClient, n as installIntlayerHTML, i as installIntlayerHTMLDynamic, r as useHTML };

package/dist/esm/index.mjs

@@ -0,0 +1,13 @@
+import { getPlugins as e, htmlPlugin as t, insertionPlugin as n, intlayerNodePlugins as r, markdownPlugin as i, markdownStringPlugin as a } from "./plugins.mjs";
+import { getDictionary as o } from "./getDictionary.mjs";
+import { getIntlayer as s } from "./getIntlayer.mjs";
+import { a as c, i as l, n as u, r as d, t as f } from "../installIntlayer-BRDzSdO3.mjs";
+import { useDictionary as p } from "./client/useDictionary.mjs";
+import { useDictionaryDynamic as m } from "./client/useDictionaryDynamic.mjs";
+import { useIntlayer as h } from "./client/useIntlayer.mjs";
+import { localeCookie as g, localeInStorage as _, setLocaleCookie as v, setLocaleInStorage as y, useLocaleCookie as b, useLocaleStorage as x } from "./client/useLocaleStorage.mjs";
+import { useLocale as S } from "./client/useLocale.mjs";
+import { useRewriteURL as C } from "./client/useRewriteURL.mjs";
+import "./client/index.mjs";
+import { useIntl as w } from "./format/useIntl.mjs";
+export { f as IntlayerClient, u as createIntlayerClient, o as getDictionary, s as getIntlayer, d as getIntlayerClient, e as getPlugins, t as htmlPlugin, n as insertionPlugin, l as installIntlayer, r as intlayerNodePlugins, g as localeCookie, _ as localeInStorage, i as markdownPlugin, a as markdownStringPlugin, v as setLocaleCookie, y as setLocaleInStorage, p as useDictionary, m as useDictionaryDynamic, c as useEditor, w as useIntl, h as useIntlayer, S as useLocale, b as useLocaleCookie, x as useLocaleStorage, C as useRewriteURL };

package/dist/esm/markdown/MarkdownRenderer.mjs

@@ -0,0 +1,19 @@
+import { compileMarkdown as e } from "./compiler.mjs";
+import { useMarkdown as t } from "./installIntlayerMarkdown.mjs";
+//#region src/markdown/MarkdownRenderer.ts
+var n = (t, { forceBlock: n, forceInline: r, preserveFrontmatter: i, tagfilter: a } = {}) => e(t, {
+	forceBlock: n,
+	forceInline: r,
+	preserveFrontmatter: i,
+	tagfilter: a
+}), r = (e = {}) => {
+	let n = t();
+	return (t) => n.renderMarkdown(t, {
+		forceBlock: e.forceBlock,
+		forceInline: e.forceInline,
+		preserveFrontmatter: e.preserveFrontmatter,
+		tagfilter: e.tagfilter
+	}, e.components, e.wrapper);
+};
+//#endregion
+export { n as renderMarkdown, r as useMarkdownRenderer };

package/dist/esm/markdown/compiler.mjs

@@ -0,0 +1,6 @@
+import e from "./runtime.mjs";
+import { RuleType as t, compileWithOptions as n, sanitizer as r, slugify as i } from "@intlayer/core/markdown";
+//#region src/markdown/compiler.ts
+var a = (t = "", r = {}) => n(t, e, r), o = a, s = a;
+//#endregion
+export { t as RuleType, s as compile, a as compileMarkdown, o as compiler, r as sanitizer, i as slugify };

package/dist/esm/markdown/index.mjs

@@ -0,0 +1,4 @@
+import { compileMarkdown as e } from "./compiler.mjs";
+import { installIntlayerMarkdown as t, installIntlayerMarkdownDynamic as n, useMarkdown as r } from "./installIntlayerMarkdown.mjs";
+import { renderMarkdown as i, useMarkdownRenderer as a } from "./MarkdownRenderer.mjs";
+export { e as compileMarkdown, t as installIntlayerMarkdown, n as installIntlayerMarkdownDynamic, i as renderMarkdown, r as useMarkdown, a as useMarkdownRenderer };

package/dist/esm/markdown/installIntlayerMarkdown.mjs

@@ -0,0 +1,31 @@
+import { compileMarkdown as e } from "./compiler.mjs";
+//#region src/markdown/installIntlayerMarkdown.ts
+var t = null, n = (e, n) => t || (t = {
+	components: n,
+	renderMarkdown: e
+}, t), r = (t) => {
+	let r, i;
+	if (typeof t == "function") r = t;
+	else {
+		let { components: n, wrapper: a, forceBlock: o, forceInline: s, preserveFrontmatter: c, tagfilter: l, renderMarkdown: u } = t ?? {};
+		if (i = n, u) r = u;
+		else {
+			let t = {
+				forceBlock: o,
+				forceInline: s,
+				preserveFrontmatter: c,
+				tagfilter: l
+			};
+			r = (n, r, i, a) => e(n, {
+				...t,
+				forceBlock: r?.forceBlock ?? t.forceBlock,
+				forceInline: r?.forceInline ?? t.forceInline,
+				preserveFrontmatter: r?.preserveFrontmatter ?? t.preserveFrontmatter,
+				tagfilter: r?.tagfilter ?? t.tagfilter
+			});
+		}
+	}
+	return n(r, i);
+}, i = () => t || { renderMarkdown: (t) => e(t) }, a = async (e) => t || r(await e());
+//#endregion
+export { n as createIntlayerMarkdownClient, r as installIntlayerMarkdown, a as installIntlayerMarkdownDynamic, i as useMarkdown };

package/dist/esm/markdown/runtime.mjs

@@ -0,0 +1,51 @@
+//#region src/markdown/runtime.ts
+var e = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]), t = (e) => e ? Object.entries(e).filter(([, e]) => e != null).map(([e, t]) => typeof t == "boolean" ? t ? e : "" : e === "_innerHTML" ? "" : `${e}="${String(t).replace(/&/g, "&").replace(/"/g, """)}"`).filter(Boolean).join(" ") : "", n = "__vanilla_fragment__", r = {
+	createElement: (r, i, ...a) => {
+		let o = a.flat(Infinity).join("");
+		if (r === n) return o;
+		if (typeof r == "string") {
+			let n = t(i), a = n ? ` ${n}` : "", s = i?._innerHTML;
+			return e.has(r) ? `<${r}${a}>` : s === void 0 ? `<${r}${a}>${o}</${r}>` : `<${r}${a}>${s}</${r}>`;
+		}
+		if (typeof r == "function") try {
+			let e = r({
+				...i,
+				children: o
+			});
+			return typeof e == "string" ? e : o;
+		} catch {
+			return o;
+		}
+		return o;
+	},
+	cloneElement: (e, t, ...n) => typeof e == "string" ? e : String(e ?? ""),
+	Fragment: n,
+	normalizeProps: (e, t) => {
+		let n = {};
+		for (let [e, r] of Object.entries(t)) e === "className" ? n.class = r : e === "htmlFor" ? n.for = r : e === "dangerouslySetInnerHTML" && r?.__html ? n._innerHTML = r.__html : n[e] = r;
+		return n;
+	}
+}, i = (e = {}) => {
+	let { onCreateElement: t } = e;
+	return t ? {
+		...r,
+		createElement: (e, n, ...r) => t(e, n, r)
+	} : r;
+};
+//#endregion
+export { i as createVanillaRuntime, r as default, r as vanillaRuntime };

package/dist/esm/plugins.mjs

@@ -0,0 +1,135 @@
+import { renderIntlayerNode as e } from "./renderIntlayerNode.mjs";
+import { conditionPlugin as t, enumerationPlugin as n, filePlugin as r, genderPlugin as i, nestedPlugin as a, splitInsertionTemplate as o, translationPlugin as s } from "@intlayer/core/interpreter";
+import c from "@intlayer/config/built";
+import { getMarkdownMetadata as l } from "@intlayer/core/markdown";
+import { isEnabled as u } from "@intlayer/editor/isEnabled";
+import * as d from "@intlayer/types/nodeType";
+//#region src/plugins.ts
+var f = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;"), p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), m = {
+	id: "intlayer-node-plugin",
+	canHandle: (e) => typeof e == "bigint" || typeof e == "string" || typeof e == "number",
+	transform: (t, { children: n, keyPath: r, dictionaryKey: i, ...a }) => {
+		if (u && typeof document < "u") {
+			let e = String(n ?? ""), t = JSON.stringify(r ?? []), a = String(i ?? ""), o = `<intlayer-content-selector-wrapper key-path="${f(t)}" dictionary-key="${f(a)}">${p(e)}</intlayer-content-selector-wrapper>`, s = {
+				toString: () => o,
+				valueOf: () => e,
+				[Symbol.toPrimitive]: (e) => o,
+				toJSON: () => e,
+				get raw() {
+					return e;
+				},
+				get value() {
+					return e;
+				},
+				__update(e) {},
+				toElement: () => {
+					let n = document.createElement("intlayer-content-selector-wrapper");
+					return n.setAttribute("key-path", t), n.setAttribute("dictionary-key", a), n.textContent = e, n;
+				}
+			};
+			return Object.setPrototypeOf(s, String.prototype), s;
+		}
+		return e({
+			...a,
+			value: n,
+			children: n
+		});
+	}
+}, h = {
+	id: "insertion-plugin",
+	canHandle: (e) => typeof e == "object" && e?.nodeType === d.INSERTION,
+	transform: (e, t, n) => {
+		let r = [...t.keyPath, { type: d.INSERTION }], i = e[d.INSERTION], a = {
+			id: "insertion-string-plugin",
+			canHandle: (e) => typeof e == "string",
+			transform: (e, n, r) => {
+				let i = r(e, {
+					...n,
+					children: e,
+					plugins: (t.plugins ?? []).filter((e) => e.id !== "intlayer-node-plugin")
+				});
+				return (e) => {
+					let a = o(i, e), s = a.isSimple ? a.parts : a.parts.join("");
+					return r(s, {
+						...n,
+						plugins: t.plugins,
+						children: s
+					});
+				};
+			}
+		}, s = n(i, {
+			...t,
+			children: i,
+			keyPath: r,
+			plugins: [a, ...t.plugins ?? []]
+		});
+		return typeof i == "object" && i && "nodeType" in i && [d.ENUMERATION, d.CONDITION].includes(i.nodeType) ? (e) => (t) => {
+			let n = s(t);
+			return typeof n == "function" ? n(e) : n;
+		} : s;
+	}
+}, g = {
+	id: "markdown-string-plugin",
+	canHandle: (e) => typeof e == "string",
+	transform: (t, n, r) => {
+		let { plugins: i, ...a } = n, o = r(l(t) ?? {}, {
+			plugins: [{
+				id: "markdown-metadata-plugin",
+				canHandle: (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean" || !e,
+				transform: (n, r) => e({
+					...r,
+					value: n,
+					children: t
+				})
+			}],
+			dictionaryKey: a.dictionaryKey,
+			keyPath: []
+		});
+		return e({
+			...n,
+			value: t,
+			children: t,
+			additionalProps: {
+				metadata: o,
+				use: (e) => t
+			}
+		});
+	}
+}, _ = {
+	id: "markdown-plugin",
+	canHandle: (e) => typeof e == "object" && e?.nodeType === d.MARKDOWN,
+	transform: (e, t, n) => {
+		let r = [...t.keyPath, { type: d.MARKDOWN }], i = e[d.MARKDOWN];
+		return n(i, {
+			...t,
+			children: i,
+			keyPath: r,
+			plugins: [g, ...t.plugins ?? []]
+		});
+	}
+}, v = {
+	id: "html-plugin",
+	canHandle: (e) => typeof e == "object" && e?.nodeType === d.HTML,
+	transform: (t, n) => {
+		let r = t[d.HTML];
+		return e({
+			...n,
+			value: r,
+			children: r,
+			additionalProps: { use: (e) => r }
+		});
+	}
+}, y = (e, o = !0) => [
+	s(e ?? c.internationalization.defaultLocale, o ? c.internationalization.defaultLocale : void 0),
+	n,
+	t,
+	a(e ?? c.internationalization.defaultLocale),
+	r,
+	i,
+	m,
+	h,
+	_,
+	v
+];
+//#endregion
+export { y as getPlugins, v as htmlPlugin, h as insertionPlugin, m as intlayerNodePlugins, _ as markdownPlugin, g as markdownStringPlugin };

package/dist/esm/renderIntlayerNode.mjs

@@ -0,0 +1,25 @@
+//#region src/renderIntlayerNode.ts
+var e = ({ value: e, additionalProps: t = {} }) => {
+	let n = e, r = {
+		toString: () => String(n ?? ""),
+		valueOf: () => n,
+		[Symbol.toPrimitive]: () => n,
+		toJSON: () => n,
+		get raw() {
+			return n;
+		},
+		set raw(e) {
+			n = e;
+		},
+		get value() {
+			return n;
+		},
+		__update(e) {
+			n = e?.raw ?? e?.value ?? e;
+		},
+		...t
+	};
+	return Object.setPrototypeOf(r, String.prototype), r;
+};
+//#endregion
+export { e as renderIntlayerNode };

package/dist/installIntlayer-BRDzSdO3.mjs

@@ -0,0 +1,46 @@
+import e from "@intlayer/config/built";
+import { isEnabled as t } from "@intlayer/editor/isEnabled";
+//#region src/editor/useEditor.ts
+var n = () => {
+	if (!t) return () => {};
+	let e = null, n = !1;
+	return import("@intlayer/editor").then(({ initEditorClient: t }) => {
+		if (n) return;
+		let r = t(), i = o();
+		r.currentLocale.set(i.locale), e = i.subscribe((e) => {
+			r.currentLocale.set(e);
+		});
+	}), () => {
+		n = !0, e?.(), import("@intlayer/editor").then(({ stopEditorClient: e }) => {
+			e();
+		});
+	};
+}, r = class {
+	_locale;
+	_listeners = /* @__PURE__ */ new Set();
+	isCookieEnabled;
+	constructor(t, n = !0) {
+		let { defaultLocale: r } = e.internationalization ?? {};
+		this._locale = t ?? r, this.isCookieEnabled = n;
+	}
+	get locale() {
+		return this._locale;
+	}
+	setLocale(e) {
+		this._locale = e;
+		for (let t of this._listeners) t(e);
+	}
+	subscribe(e) {
+		return this._listeners.add(e), () => {
+			this._listeners.delete(e);
+		};
+	}
+	notify() {
+		for (let e of this._listeners) e(this._locale);
+	}
+}, i = null, a = (e, t = !0) => i || (i = new r(e, t), i), o = () => (i ||= new r(), i), s = ({ locale: e, isCookieEnabled: t } = {}) => {
+	let r = a(e, t);
+	return n(), r;
+};
+//#endregion
+export { n as a, s as i, a as n, o as r, r as t };

package/dist/installIntlayer-CieE91lh.js

@@ -0,0 +1 @@
+const e=require(`./chunk-C91j1N6u.js`);let t=require(`@intlayer/config/built`);t=e.t(t);let n=require(`@intlayer/editor/isEnabled`);var r=()=>{if(!n.isEnabled)return()=>{};let e=null,t=!1;return import(`@intlayer/editor`).then(({initEditorClient:n})=>{if(t)return;let r=n(),i=s();r.currentLocale.set(i.locale),e=i.subscribe(e=>{r.currentLocale.set(e)})}),()=>{t=!0,e?.(),import(`@intlayer/editor`).then(({stopEditorClient:e})=>{e()})}},i=class{_locale;_listeners=new Set;isCookieEnabled;constructor(e,n=!0){let{defaultLocale:r}=t.default.internationalization??{};this._locale=e??r,this.isCookieEnabled=n}get locale(){return this._locale}setLocale(e){this._locale=e;for(let t of this._listeners)t(e)}subscribe(e){return this._listeners.add(e),()=>{this._listeners.delete(e)}}notify(){for(let e of this._listeners)e(this._locale)}},a=null,o=(e,t=!0)=>a||(a=new i(e,t),a),s=()=>(a||=new i,a),c=({locale:e,isCookieEnabled:t}={})=>{let n=o(e,t);return r(),n};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/dist/types/client/index.d.ts

@@ -0,0 +1,7 @@
+export * from './installIntlayer';
+export * from './useDictionary';
+export * from './useDictionaryDynamic';
+export * from './useIntlayer';
+export * from './useLocale';
+export * from './useLocaleStorage';
+export * from './useRewriteURL';

package/dist/types/client/installIntlayer.d.ts

@@ -0,0 +1,58 @@
+import { LocalesValues } from '@intlayer/types/module_augmentation';
+type LocaleListener = (locale: LocalesValues) => void;
+export declare class IntlayerClient {
+    private _locale;
+    private _listeners;
+    isCookieEnabled: boolean;
+    constructor(locale?: LocalesValues, isCookieEnabled?: boolean);
+    get locale(): LocalesValues;
+    setLocale(newLocale: LocalesValues): void;
+    subscribe(listener: LocaleListener): () => void;
+    /**
+     * Fire all listeners with the current locale without changing it.
+     * Used to trigger re-renders after async data loads.
+     */
+    notify(): void;
+}
+/**
+ * Create and return a single IntlayerClient instance.
+ */
+export declare const createIntlayerClient: (locale?: LocalesValues, isCookieEnabled?: boolean) => IntlayerClient;
+/**
+ * Get the current IntlayerClient instance, creating one with defaults if needed.
+ */
+export declare const getIntlayerClient: () => IntlayerClient;
+/**
+ * Install Intlayer into your vanilla JS application.
+ *
+ * Call this once at application startup, before any Intlayer APIs are used.
+ *
+ * When called with a `config` argument, `window.INTLAYER_CONFIG` is set so
+ * that `@intlayer/config/built` resolves the correct values in the browser
+ * without requiring module aliasing in the bundler configuration.
+ *
+ * @param locale - Initial locale (defaults to config defaultLocale).
+ * @param isCookieEnabled - Whether to persist locale in cookies/localStorage.
+ * @param config - Optional Intlayer configuration. When provided, sets
+ *   `window.INTLAYER_CONFIG` with the browser-safe subset of the config so
+ *   the application works without a Vite/webpack plugin alias.
+ * @returns The IntlayerClient singleton.
+ *
+ * @example
+ * ```ts
+ * import { installIntlayer } from 'vanilla-intlayer';
+ *
+ * // With explicit config (no build plugin alias needed):
+ * installIntlayer('en', true, {
+ *   internationalization: { locales: ['en', 'fr'], defaultLocale: 'en' },
+ * });
+ *
+ * // With build plugin (alias handles config automatically):
+ * installIntlayer('en');
+ * ```
+ */
+export declare const installIntlayer: ({ locale, isCookieEnabled, }?: {
+    locale?: LocalesValues;
+    isCookieEnabled?: boolean;
+}) => IntlayerClient;
+export {};

package/dist/types/client/useDictionary.d.ts

@@ -0,0 +1,57 @@
+import { Dictionary } from '@intlayer/types/dictionary';
+import { DeclaredLocales, LocalesValues } from '@intlayer/types/module_augmentation';
+import { DeepTransformContent } from '../plugins';
+export type WithOnChange<T> = T & {
+    /**
+     * Subscribe to locale changes. The callback receives the fresh content
+     * whenever the active locale changes. Returns the content object itself
+     * for convenient one-liner patterns:
+     *
+     * ```ts
+     * const content = useDictionary(myDict).onChange((c) => {
+     *   document.querySelector('p')!.textContent = String(c.greeting);
+     * });
+     * ```
+     */
+    onChange: (callback: <T extends Dictionary, L extends LocalesValues>(content: DeepTransformContent<T['content'], L>) => void) => WithOnChange<T>;
+};
+/**
+ * Get the translated content for a raw dictionary object and optionally
+ * subscribe to locale changes via the chainable `.onChange()` method —
+ * mirroring the API of `react-intlayer`.
+ *
+ * Unlike `useIntlayer` (which takes a registered key), this function accepts a
+ * dictionary object directly — useful for dictionaries loaded asynchronously
+ * or defined inline.
+ *
+ * The function returns the current content **directly** (same shape as
+ * `getDictionary(dict)`), plus the `.onChange()` helper:
+ *
+ * ```ts
+ * // React
+ * const content = useDictionary(myDict);
+ *
+ * // Vanilla — identical surface API, opt-in reactivity via .onChange()
+ * const content = useDictionary(myDict);
+ * const content = useDictionary(myDict).onChange((c) => render(c));
+ * ```
+ *
+ * @param dictionary - The raw dictionary object.
+ * @param locale     - Optional locale override.
+ * @returns The current translated content with an `.onChange()` method.
+ *
+ * @example
+ * ```ts
+ * import myDict from './myDictionary.content';
+ * import { installIntlayer, useDictionary } from 'vanilla-intlayer';
+ *
+ * installIntlayer();
+ *
+ * const content = useDictionary(myDict).onChange((c) => {
+ *   document.querySelector('p').textContent = String(c.greeting);
+ * });
+ *
+ * document.querySelector('p').textContent = String(content.greeting);
+ * ```
+ */
+export declare const useDictionary: <T extends Dictionary, L extends LocalesValues = DeclaredLocales>(dictionary: T, locale?: L) => WithOnChange<DeepTransformContent<T["content"], L>>;

package/dist/types/client/useDictionaryDynamic.d.ts

@@ -0,0 +1,35 @@
+import { Dictionary } from '@intlayer/types/dictionary';
+import { DictionaryKeys, LocalesValues, StrictModeLocaleMap } from '@intlayer/types/module_augmentation';
+import { DeepTransformContent } from '../plugins';
+import { WithOnChange } from './useDictionary';
+/**
+ * Dynamically load and transform a locale-keyed dictionary.
+ *
+ * Works like `useIntlayer` / `useDictionary` but accepts a locale-keyed map
+ * of lazy loaders instead of a pre-imported dictionary. Call it inside your
+ * render function — the first call triggers a background fetch and returns
+ * placeholder values; when the load completes the client notifies all
+ * subscribers (including your render loop) so the render runs again with real
+ * content. Subsequent calls for the same locale return immediately from cache.
+ *
+ * Locale switches follow the same two-phase pattern: placeholder on first
+ * render, real content after the locale bundle loads.
+ *
+ * @param dictionaryLoaders - Locale-keyed map of `() => Promise<Dictionary>`.
+ * @param key               - Dictionary key (used for cache namespacing).
+ * @param locale            - Optional locale override.
+ *
+ * @example
+ * ```ts
+ * import dynDic from '../.intlayer/dynamic_dictionary/app.mjs';
+ *
+ * const render = () => {
+ *   const content = useDictionaryDynamic(dynDic, 'app');
+ *   document.querySelector('h1')!.textContent = String(content.title);
+ * };
+ *
+ * render();
+ * getIntlayerClient().subscribe(() => render());
+ * ```
+ */
+export declare const useDictionaryDynamic: <T extends Dictionary, K extends DictionaryKeys, L extends LocalesValues = LocalesValues>(dictionaryLoaders: StrictModeLocaleMap<() => Promise<T>>, key: K, locale?: L) => WithOnChange<DeepTransformContent<T["content"], L>>;

package/dist/types/client/useIntlayer.d.ts

@@ -0,0 +1,49 @@
+import { DictionaryKeys, DictionaryRegistryContent, LocalesValues } from '@intlayer/types/module_augmentation';
+import { DeepTransformContent } from '../plugins';
+import { WithOnChange } from './useDictionary';
+/**
+ * Get the translated content for the given key and optionally subscribe to
+ * locale changes via the chainable `.onChange()` method — mirroring the API
+ * of `react-intlayer`'s `useIntlayer`.
+ *
+ * Unlike React (where the hook system automatically re-runs on re-render),
+ * vanilla JS has no component lifecycle. The `.onChange()` callback is the
+ * explicit equivalent: it is called with fresh content whenever the active
+ * locale changes. Use it to patch your DOM or trigger a full re-render.
+ *
+ * The function returns the current content **directly** (same shape as
+ * `getIntlayer(key)`), plus the `.onChange()` helper:
+ *
+ * ```ts
+ * // React
+ * const content = useIntlayer('app');
+ *
+ * // Vanilla — identical surface API, opt-in reactivity via .onChange()
+ * const content = useIntlayer('app');
+ * const content = useIntlayer('app').onChange((c) => render(c));
+ * ```
+ *
+ * For cleanup (e.g. Vite HMR), subscribe via `getIntlayerClient().subscribe()`
+ * and hold the returned unsubscribe function.
+ *
+ * @param key    - Dictionary key registered in your intlayer content files.
+ * @param locale - Optional locale override (defaults to the current app locale).
+ * @returns The current translated content with an `.onChange()` method.
+ *
+ * @example
+ * ```ts
+ * import { installIntlayer, useIntlayer } from 'vanilla-intlayer';
+ *
+ * installIntlayer();
+ *
+ * // Static read (no subscription)
+ * const content = useIntlayer('homepage');
+ * document.querySelector('h1').textContent = String(content.title);
+ *
+ * // Reactive read — onChange is called on every locale change
+ * useIntlayer('homepage').onChange((c) => {
+ *   document.querySelector('h1').textContent = String(c.title);
+ * });
+ * ```
+ */
+export declare const useIntlayer: <T extends DictionaryKeys>(key: T, locale?: LocalesValues) => WithOnChange<DeepTransformContent<DictionaryRegistryContent<T>>>;

package/dist/types/client/useLocale.d.ts

@@ -0,0 +1,40 @@
+import { DeclaredLocales, LocalesValues } from '@intlayer/types/module_augmentation';
+type UseLocaleProps = {
+    isCookieEnabled?: boolean;
+    onLocaleChange?: (locale: LocalesValues) => void;
+};
+/**
+ * Get the current locale state and locale management utilities.
+ *
+ * Returns a plain object with the current `locale`, `defaultLocale`,
+ * `availableLocales`, a `setLocale` function, and a `subscribe` function
+ * to react to locale changes.
+ *
+ * @param props - Optional configuration.
+ * @returns Locale state and management utilities.
+ *
+ * @example
+ * ```ts
+ * import { installIntlayer, useLocale } from 'vanilla-intlayer';
+ *
+ * installIntlayer('en');
+ *
+ * const { locale, availableLocales, setLocale, subscribe } = useLocale();
+ *
+ * const unsubscribe = subscribe((newLocale) => {
+ *   console.log('Locale changed to', newLocale);
+ * });
+ *
+ * document.querySelector('#lang-switcher').addEventListener('change', (e) => {
+ *   setLocale(e.target.value);
+ * });
+ * ```
+ */
+export declare const useLocale: (props?: UseLocaleProps) => {
+    locale: DeclaredLocales;
+    defaultLocale: DeclaredLocales;
+    availableLocales: DeclaredLocales[];
+    setLocale: (newLocale: LocalesValues) => void;
+    subscribe: (callback: (locale: LocalesValues) => void) => () => void;
+};
+export {};