langsys-js-vue 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,338 @@
+import * as langsys_js_typescript from 'langsys-js-typescript';
+import { Signal, TFunction, iCategories, ParamPrimitive, iLangsysInitConfig as iLangsysInitConfig$1, iLangsysResponse, iCountryList, iCurrencyList, iCountryDialCode, iLocaleDefault, iLocaleFlat, iLocaleData } from 'langsys-js-typescript';
+export { ExtractParamKeys, LangsysAppAPI, ParamPrimitive, ParamsFor, Signal, TArgs, TFunction, TranslationParams, canonicalizeLocale, createSignal, currentlyLoadedLocale, iCategories, iContentBlock, iCountry, iCountryDialCode, iCountryList, iCurrency, iCurrencyList, iLangsysResponse, iLanguageName, iLocaleData, iLocaleDefault, iLocaleFlat, iProject, iTranslations, sTranslations, tSignal as t } from 'langsys-js-typescript';
+import * as vue from 'vue';
+import { Ref, ShallowRef, PropType } from 'vue';
+
+/**
+ * Subscribe the current effect scope to a base-SDK `Signal<T>` and return its
+ * value as a read-only shallow ref, updating whenever the signal changes.
+ *
+ * This is the Vue mirror of Svelte's `$store` auto-subscription and React's
+ * `useSignal` (`useSyncExternalStore`). The base SDK's `subscribe` fires
+ * synchronously with the current value and returns an unsubscribe function, so
+ * the ref is seeded immediately — server-side rendering sees the value the SDK
+ * seeded from `initialTranslations` with no flash of untranslated content.
+ *
+ * `shallowRef` is deliberate: signal payloads (`TFunction`, the catalog) must
+ * not be deeply proxied — the signal replaces the whole value on every change,
+ * which is exactly what a shallow ref tracks.
+ *
+ * When called inside a component `setup()` or an `effectScope`, the
+ * subscription is disposed with the scope. Outside any scope (module level),
+ * the subscription lives for the app's lifetime — fine for the SDK's global
+ * singletons, but prefer calling from `setup()`.
+ */
+declare function useSignal<T>(signal: Signal<T>): Readonly<ShallowRef<T>>;
+/**
+ * Create a reactive `Signal<string>` to hold the user's selected locale — the
+ * Vue analog of Svelte's `writable('en-US')`.
+ *
+ * Pass the result as `UserLocaleStore` to `LangsysApp.init`, read it reactively
+ * with `useSignal(store)` (or use the all-in-one `useLocaleStore` composable),
+ * and switch locale with `store.set('fr-FR')`. The base SDK only ever reads and
+ * subscribes to it — it never writes.
+ *
+ * Locale identifiers are canonicalized to BCP 47 by the base SDK (v0.3.0+), so
+ * `'en-us'` still works on input — but `currentlyLoadedLocale` always emits the
+ * canonical form (`'en-US'`), so prefer canonical casing to keep comparisons
+ * against it straightforward.
+ */
+declare function createLocaleStore(initial?: string): Signal<string>;
+/**
+ * Adapt an existing Vue `Ref<string>` into the SDK's `Signal<string>` contract
+ * — the Vue analog of the Svelte wrapper's `adaptStore(writable)`.
+ *
+ * Use this when your app already owns the locale in a ref (Pinia state, a
+ * composable, Nuxt's `useState`) and you want the SDK to react to it directly:
+ *
+ *   const locale = ref('en-US');
+ *   LangsysApp.init({ ..., UserLocaleStore: refToLocaleSource(locale) });
+ *   locale.value = 'fr-FR'; // SDK loads French
+ *
+ * The watcher uses `flush: 'sync'` to preserve the Signal contract the SDK
+ * relies on (synchronous notification, immediate first fire). The returned
+ * unsubscriber stops the watcher.
+ */
+declare function refToLocaleSource(localeRef: Ref<string>): Signal<string>;
+
+/**
+ * The current translation function as a reactive ref, updating whenever
+ * translations or the loaded locale change. This is the Vue analog of Svelte's
+ * `$t` store read and React's `useT()`.
+ *
+ *   const t = useT();
+ *   // template: <h1>{{ t('Welcome to my app', 'UI') }}</h1>   (auto-unwrapped)
+ *   // script:   t.value('Welcome to my app', 'UI')
+ *
+ * The phrase is both the lookup key and the base-language default. Signature:
+ * `t(phrase, category?, params?)`. Placeholder names in the phrase are
+ * type-checked against the params object at the call site.
+ */
+declare function useT(): Readonly<ShallowRef<TFunction>>;
+/**
+ * The locale whose translations are currently loaded. This lags the
+ * user-selected locale (`UserLocaleStore`) until the fetch for the new locale
+ * settles, which makes it the right value to gate "translations are ready" UI on.
+ */
+declare function useCurrentLocale(): Readonly<ShallowRef<string>>;
+/**
+ * The raw translation catalog. Rarely needed in app code — prefer `useT()`.
+ * Exposed for advanced cases (inspecting which categories/phrases are loaded).
+ */
+declare function useTranslations(): Readonly<ShallowRef<iCategories>>;
+/**
+ * All-in-one convenience for the user-locale store. Creates one
+ * `Signal<string>` (the Vue analog of Svelte's `writable`), subscribes the
+ * current scope to it, and returns `{ locale, setLocale, store }`.
+ *
+ *   const { locale, setLocale, store } = useLocaleStore('en-US');
+ *   onMounted(() => {
+ *     LangsysApp.init({ projectid, key, UserLocaleStore: store });
+ *   });
+ *
+ *   // template: <select :value="locale" @change="setLocale($event.target.value)">…
+ *
+ * `setup()` runs once per component instance, so the store is stable for the
+ * component's lifetime and safe to hand to `LangsysApp.init`.
+ */
+declare function useLocaleStore(initial?: string): {
+    locale: Readonly<ShallowRef<string>>;
+    setLocale: (locale: string) => void;
+    store: Signal<string>;
+};
+
+/**
+ * Props for the Vue `Translate` component. Mirrors the React/Svelte components
+ * 1:1 — Vue passes `class` through native attribute fallthrough, so no
+ * `class`/`className` prop is declared.
+ */
+interface TranslateProps {
+    /** Optional category under which tokens are registered. Helps translators disambiguate. */
+    category?: string;
+    /** Optional stable id for the content block. If omitted, the SDK hashes category + tokens. */
+    custom_id?: string;
+    /** Optional human-readable label shown in the Translation Manager. */
+    label?: string;
+    /** Host element tag. Defaults to a `<translate>` custom element. */
+    tag?: string;
+    /**
+     * Interpolation params for `{name}`-style placeholders in the content —
+     * same single-brace syntax as `t()`. In markup, author the placeholders as
+     * `%name%` (the base SDK normalizes `%name%` → `{name}` at capture); a bare
+     * `{name}` also works in Vue templates but collides with `{{ }}` and other
+     * frameworks, so `%name%` is the portable form.
+     */
+    params?: Record<string, ParamPrimitive>;
+}
+/**
+ * Vue wrapper around the vanilla `Translate` DOM class from
+ * `langsys-js-typescript`. It renders a host element, then on mount lets the
+ * vanilla class walk and tokenize the rendered children (text nodes plus
+ * translatable attributes), register the content block, and re-translate on
+ * locale change. On unmount it tears the instance down.
+ *
+ * This is the Vue analog of the React/Svelte `<Translate>` components — pure
+ * mount/destroy glue. The DOM walking, content-block registration, attribute
+ * harvesting, `%name%`→`{name}` normalization, and re-translation lifecycle all
+ * live in the base SDK.
+ *
+ * The SDK mutates the rendered DOM in place, so keep the children static:
+ * prose, marketing copy, CMS-rendered HTML — the content-block use case. For
+ * dynamic per-string values that Vue owns and re-renders, use `useT()` instead.
+ */
+declare const Translate: vue.DefineComponent<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    custom_id: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, ParamPrimitive>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    custom_id: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, ParamPrimitive>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    category: string;
+    custom_id: string;
+    label: string;
+    tag: string;
+    params: Record<string, ParamPrimitive>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props for the Vue `Phrase` component. Mirrors the React/Svelte components —
+ * `class` flows through native attribute fallthrough.
+ */
+interface PhraseProps {
+    /** Category the phrase registers under (disambiguation for translators). */
+    category?: string;
+    /** Interpolation params — `{n}` for pluralization, `{name}`, etc. */
+    params?: Record<string, unknown>;
+    /** Host element tag. Defaults to `<span>`. */
+    tag?: string;
+}
+/**
+ * Vue wrapper around the vanilla `Phrase` rich-text handler.
+ *
+ * Use it to keep a markup-bearing run as ONE translatable phrase — e.g. so a
+ * count variable stays next to the noun it pluralizes:
+ *
+ *   <Phrase category="ProductCard" :params="{ n: reviewCount }">
+ *     Based on {n} <strong>reviews</strong>
+ *   </Phrase>
+ *
+ * The inline markup never reaches the translator — it's replaced with neutral
+ * tokens and the real elements are reconstituted at render (see richtext.ts in
+ * the base SDK). The host carries `data-ls-phrase` so a wrapping `<Translate>`
+ * skips it and lets this handler own it.
+ *
+ * Keep children static (literal markup): the handler takes over the rendered
+ * subtree. For values Vue owns and re-renders, pass them through `params`.
+ */
+declare const Phrase: vue.DefineComponent<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    category: string;
+    tag: string;
+    params: Record<string, unknown>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props for the Vue `DontTranslate` component. Mirrors the React/Svelte
+ * components — `class` flows through native attribute fallthrough.
+ */
+interface DontTranslateProps {
+    /** Host element tag. Defaults to `<span>`. */
+    tag?: string;
+}
+/**
+ * Marks a region as never-translated, preserved verbatim:
+ *
+ *   Built with <DontTranslate>Kangen®</DontTranslate> on
+ *   <DontTranslate>langsys.dev</DontTranslate>
+ *
+ * The host carries the standard `translate="no"` attribute, which both the
+ * tokenizer and the renderer in the base SDK already honor — so its content is
+ * never tokenized, registered, or replaced. Pure presentational glue; no
+ * vanilla handler needed.
+ */
+declare const DontTranslate: vue.DefineComponent<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Vue-flavored init config. Identical to the base SDK's config except
+ * `UserLocaleStore` is typed as a `Signal<string>` — create one with
+ * `createLocaleStore()` (or get one from the `useLocaleStore` composable, or
+ * adapt an existing ref with `refToLocaleSource`). The base SDK only reads and
+ * subscribes to it.
+ */
+interface iLangsysInitConfig extends Omit<iLangsysInitConfig$1, 'UserLocaleStore'> {
+    UserLocaleStore: Signal<string>;
+}
+/**
+ * Vue SDK entry point. Delegates everything to the underlying
+ * `langsys-js-typescript` singleton. Because the Vue locale store is already a
+ * `Signal` (unlike Svelte's `Writable`, which needs adapting), `init` is a
+ * straight passthrough — the Vue-native concerns live in the composables and
+ * the `<Translate>` component, not here.
+ */
+declare class LangsysAppVue {
+    /** Initialize Langsys. Pass a `Signal<string>` (from `createLocaleStore`) as `UserLocaleStore`. */
+    init(config: iLangsysInitConfig): Promise<iLangsysResponse>;
+    get Translations(): langsys_js_typescript.Translations;
+    get translationsLoadingPromise(): Promise<unknown>;
+    /** Current translation function. Reads fresh state on every call (not reactive on its own — use `useT()` in components). */
+    get t(): TFunction;
+    get debug(): langsys_js_typescript.Logger;
+    refresh(): Promise<boolean>;
+    getCountries(inLocale?: string): Promise<iCountryList>;
+    getCountryName(forCountryCode: string, inLocale?: string): Promise<string>;
+    getCurrencies(inLocale?: string): Promise<iCurrencyList>;
+    getCurrencyName(forCurrencyCode: string, inLocale?: string): Promise<string>;
+    getDialCodes(inLocale?: string): Promise<iCountryDialCode[]>;
+    getLocales(inLocale?: string): Promise<iLocaleDefault>;
+    getLocalesFlat(inLocale?: string): Promise<iLocaleFlat[]>;
+    getLocalesData(inLocale?: string, forceRefresh?: boolean): Promise<iLocaleData[]>;
+    getLocalesFormat(format?: '' | 'flat' | 'data', inLocale?: string): Promise<iLocaleFlat[] | iLocaleDefault | iLocaleData[]>;
+    getLocaleName(forLocale: string, shortName?: boolean, inLocale?: string): string;
+    getLocaleNameWithLookup(forLocale: string, shortName?: boolean, inLocale?: string): Promise<string>;
+    /** @deprecated use `getLocaleNameWithLookup` or `getLocaleName` */
+    getLanguageName(forLocale: string, shortName?: boolean, inLocale?: string): Promise<string>;
+    detectPreferredLocale(acceptLanguageHeader?: string | null, supportedLocales?: string[]): string | false;
+}
+declare const LangsysApp: LangsysAppVue;
+
+export { DontTranslate, type DontTranslateProps, LangsysApp, Phrase, type PhraseProps, Translate, type TranslateProps, createLocaleStore, type iLangsysInitConfig, refToLocaleSource, useCurrentLocale, useLocaleStore, useSignal, useT, useTranslations };

package/dist/index.d.ts

@@ -0,0 +1,338 @@
+import * as langsys_js_typescript from 'langsys-js-typescript';
+import { Signal, TFunction, iCategories, ParamPrimitive, iLangsysInitConfig as iLangsysInitConfig$1, iLangsysResponse, iCountryList, iCurrencyList, iCountryDialCode, iLocaleDefault, iLocaleFlat, iLocaleData } from 'langsys-js-typescript';
+export { ExtractParamKeys, LangsysAppAPI, ParamPrimitive, ParamsFor, Signal, TArgs, TFunction, TranslationParams, canonicalizeLocale, createSignal, currentlyLoadedLocale, iCategories, iContentBlock, iCountry, iCountryDialCode, iCountryList, iCurrency, iCurrencyList, iLangsysResponse, iLanguageName, iLocaleData, iLocaleDefault, iLocaleFlat, iProject, iTranslations, sTranslations, tSignal as t } from 'langsys-js-typescript';
+import * as vue from 'vue';
+import { Ref, ShallowRef, PropType } from 'vue';
+
+/**
+ * Subscribe the current effect scope to a base-SDK `Signal<T>` and return its
+ * value as a read-only shallow ref, updating whenever the signal changes.
+ *
+ * This is the Vue mirror of Svelte's `$store` auto-subscription and React's
+ * `useSignal` (`useSyncExternalStore`). The base SDK's `subscribe` fires
+ * synchronously with the current value and returns an unsubscribe function, so
+ * the ref is seeded immediately — server-side rendering sees the value the SDK
+ * seeded from `initialTranslations` with no flash of untranslated content.
+ *
+ * `shallowRef` is deliberate: signal payloads (`TFunction`, the catalog) must
+ * not be deeply proxied — the signal replaces the whole value on every change,
+ * which is exactly what a shallow ref tracks.
+ *
+ * When called inside a component `setup()` or an `effectScope`, the
+ * subscription is disposed with the scope. Outside any scope (module level),
+ * the subscription lives for the app's lifetime — fine for the SDK's global
+ * singletons, but prefer calling from `setup()`.
+ */
+declare function useSignal<T>(signal: Signal<T>): Readonly<ShallowRef<T>>;
+/**
+ * Create a reactive `Signal<string>` to hold the user's selected locale — the
+ * Vue analog of Svelte's `writable('en-US')`.
+ *
+ * Pass the result as `UserLocaleStore` to `LangsysApp.init`, read it reactively
+ * with `useSignal(store)` (or use the all-in-one `useLocaleStore` composable),
+ * and switch locale with `store.set('fr-FR')`. The base SDK only ever reads and
+ * subscribes to it — it never writes.
+ *
+ * Locale identifiers are canonicalized to BCP 47 by the base SDK (v0.3.0+), so
+ * `'en-us'` still works on input — but `currentlyLoadedLocale` always emits the
+ * canonical form (`'en-US'`), so prefer canonical casing to keep comparisons
+ * against it straightforward.
+ */
+declare function createLocaleStore(initial?: string): Signal<string>;
+/**
+ * Adapt an existing Vue `Ref<string>` into the SDK's `Signal<string>` contract
+ * — the Vue analog of the Svelte wrapper's `adaptStore(writable)`.
+ *
+ * Use this when your app already owns the locale in a ref (Pinia state, a
+ * composable, Nuxt's `useState`) and you want the SDK to react to it directly:
+ *
+ *   const locale = ref('en-US');
+ *   LangsysApp.init({ ..., UserLocaleStore: refToLocaleSource(locale) });
+ *   locale.value = 'fr-FR'; // SDK loads French
+ *
+ * The watcher uses `flush: 'sync'` to preserve the Signal contract the SDK
+ * relies on (synchronous notification, immediate first fire). The returned
+ * unsubscriber stops the watcher.
+ */
+declare function refToLocaleSource(localeRef: Ref<string>): Signal<string>;
+
+/**
+ * The current translation function as a reactive ref, updating whenever
+ * translations or the loaded locale change. This is the Vue analog of Svelte's
+ * `$t` store read and React's `useT()`.
+ *
+ *   const t = useT();
+ *   // template: <h1>{{ t('Welcome to my app', 'UI') }}</h1>   (auto-unwrapped)
+ *   // script:   t.value('Welcome to my app', 'UI')
+ *
+ * The phrase is both the lookup key and the base-language default. Signature:
+ * `t(phrase, category?, params?)`. Placeholder names in the phrase are
+ * type-checked against the params object at the call site.
+ */
+declare function useT(): Readonly<ShallowRef<TFunction>>;
+/**
+ * The locale whose translations are currently loaded. This lags the
+ * user-selected locale (`UserLocaleStore`) until the fetch for the new locale
+ * settles, which makes it the right value to gate "translations are ready" UI on.
+ */
+declare function useCurrentLocale(): Readonly<ShallowRef<string>>;
+/**
+ * The raw translation catalog. Rarely needed in app code — prefer `useT()`.
+ * Exposed for advanced cases (inspecting which categories/phrases are loaded).
+ */
+declare function useTranslations(): Readonly<ShallowRef<iCategories>>;
+/**
+ * All-in-one convenience for the user-locale store. Creates one
+ * `Signal<string>` (the Vue analog of Svelte's `writable`), subscribes the
+ * current scope to it, and returns `{ locale, setLocale, store }`.
+ *
+ *   const { locale, setLocale, store } = useLocaleStore('en-US');
+ *   onMounted(() => {
+ *     LangsysApp.init({ projectid, key, UserLocaleStore: store });
+ *   });
+ *
+ *   // template: <select :value="locale" @change="setLocale($event.target.value)">…
+ *
+ * `setup()` runs once per component instance, so the store is stable for the
+ * component's lifetime and safe to hand to `LangsysApp.init`.
+ */
+declare function useLocaleStore(initial?: string): {
+    locale: Readonly<ShallowRef<string>>;
+    setLocale: (locale: string) => void;
+    store: Signal<string>;
+};
+
+/**
+ * Props for the Vue `Translate` component. Mirrors the React/Svelte components
+ * 1:1 — Vue passes `class` through native attribute fallthrough, so no
+ * `class`/`className` prop is declared.
+ */
+interface TranslateProps {
+    /** Optional category under which tokens are registered. Helps translators disambiguate. */
+    category?: string;
+    /** Optional stable id for the content block. If omitted, the SDK hashes category + tokens. */
+    custom_id?: string;
+    /** Optional human-readable label shown in the Translation Manager. */
+    label?: string;
+    /** Host element tag. Defaults to a `<translate>` custom element. */
+    tag?: string;
+    /**
+     * Interpolation params for `{name}`-style placeholders in the content —
+     * same single-brace syntax as `t()`. In markup, author the placeholders as
+     * `%name%` (the base SDK normalizes `%name%` → `{name}` at capture); a bare
+     * `{name}` also works in Vue templates but collides with `{{ }}` and other
+     * frameworks, so `%name%` is the portable form.
+     */
+    params?: Record<string, ParamPrimitive>;
+}
+/**
+ * Vue wrapper around the vanilla `Translate` DOM class from
+ * `langsys-js-typescript`. It renders a host element, then on mount lets the
+ * vanilla class walk and tokenize the rendered children (text nodes plus
+ * translatable attributes), register the content block, and re-translate on
+ * locale change. On unmount it tears the instance down.
+ *
+ * This is the Vue analog of the React/Svelte `<Translate>` components — pure
+ * mount/destroy glue. The DOM walking, content-block registration, attribute
+ * harvesting, `%name%`→`{name}` normalization, and re-translation lifecycle all
+ * live in the base SDK.
+ *
+ * The SDK mutates the rendered DOM in place, so keep the children static:
+ * prose, marketing copy, CMS-rendered HTML — the content-block use case. For
+ * dynamic per-string values that Vue owns and re-renders, use `useT()` instead.
+ */
+declare const Translate: vue.DefineComponent<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    custom_id: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, ParamPrimitive>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    custom_id: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, ParamPrimitive>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    category: string;
+    custom_id: string;
+    label: string;
+    tag: string;
+    params: Record<string, ParamPrimitive>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props for the Vue `Phrase` component. Mirrors the React/Svelte components —
+ * `class` flows through native attribute fallthrough.
+ */
+interface PhraseProps {
+    /** Category the phrase registers under (disambiguation for translators). */
+    category?: string;
+    /** Interpolation params — `{n}` for pluralization, `{name}`, etc. */
+    params?: Record<string, unknown>;
+    /** Host element tag. Defaults to `<span>`. */
+    tag?: string;
+}
+/**
+ * Vue wrapper around the vanilla `Phrase` rich-text handler.
+ *
+ * Use it to keep a markup-bearing run as ONE translatable phrase — e.g. so a
+ * count variable stays next to the noun it pluralizes:
+ *
+ *   <Phrase category="ProductCard" :params="{ n: reviewCount }">
+ *     Based on {n} <strong>reviews</strong>
+ *   </Phrase>
+ *
+ * The inline markup never reaches the translator — it's replaced with neutral
+ * tokens and the real elements are reconstituted at render (see richtext.ts in
+ * the base SDK). The host carries `data-ls-phrase` so a wrapping `<Translate>`
+ * skips it and lets this handler own it.
+ *
+ * Keep children static (literal markup): the handler takes over the rendered
+ * subtree. For values Vue owns and re-renders, pass them through `params`.
+ */
+declare const Phrase: vue.DefineComponent<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    params: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    category: string;
+    tag: string;
+    params: Record<string, unknown>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props for the Vue `DontTranslate` component. Mirrors the React/Svelte
+ * components — `class` flows through native attribute fallthrough.
+ */
+interface DontTranslateProps {
+    /** Host element tag. Defaults to `<span>`. */
+    tag?: string;
+}
+/**
+ * Marks a region as never-translated, preserved verbatim:
+ *
+ *   Built with <DontTranslate>Kangen®</DontTranslate> on
+ *   <DontTranslate>langsys.dev</DontTranslate>
+ *
+ * The host carries the standard `translate="no"` attribute, which both the
+ * tokenizer and the renderer in the base SDK already honor — so its content is
+ * never tokenized, registered, or replaced. Pure presentational glue; no
+ * vanilla handler needed.
+ */
+declare const DontTranslate: vue.DefineComponent<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Vue-flavored init config. Identical to the base SDK's config except
+ * `UserLocaleStore` is typed as a `Signal<string>` — create one with
+ * `createLocaleStore()` (or get one from the `useLocaleStore` composable, or
+ * adapt an existing ref with `refToLocaleSource`). The base SDK only reads and
+ * subscribes to it.
+ */
+interface iLangsysInitConfig extends Omit<iLangsysInitConfig$1, 'UserLocaleStore'> {
+    UserLocaleStore: Signal<string>;
+}
+/**
+ * Vue SDK entry point. Delegates everything to the underlying
+ * `langsys-js-typescript` singleton. Because the Vue locale store is already a
+ * `Signal` (unlike Svelte's `Writable`, which needs adapting), `init` is a
+ * straight passthrough — the Vue-native concerns live in the composables and
+ * the `<Translate>` component, not here.
+ */
+declare class LangsysAppVue {
+    /** Initialize Langsys. Pass a `Signal<string>` (from `createLocaleStore`) as `UserLocaleStore`. */
+    init(config: iLangsysInitConfig): Promise<iLangsysResponse>;
+    get Translations(): langsys_js_typescript.Translations;
+    get translationsLoadingPromise(): Promise<unknown>;
+    /** Current translation function. Reads fresh state on every call (not reactive on its own — use `useT()` in components). */
+    get t(): TFunction;
+    get debug(): langsys_js_typescript.Logger;
+    refresh(): Promise<boolean>;
+    getCountries(inLocale?: string): Promise<iCountryList>;
+    getCountryName(forCountryCode: string, inLocale?: string): Promise<string>;
+    getCurrencies(inLocale?: string): Promise<iCurrencyList>;
+    getCurrencyName(forCurrencyCode: string, inLocale?: string): Promise<string>;
+    getDialCodes(inLocale?: string): Promise<iCountryDialCode[]>;
+    getLocales(inLocale?: string): Promise<iLocaleDefault>;
+    getLocalesFlat(inLocale?: string): Promise<iLocaleFlat[]>;
+    getLocalesData(inLocale?: string, forceRefresh?: boolean): Promise<iLocaleData[]>;
+    getLocalesFormat(format?: '' | 'flat' | 'data', inLocale?: string): Promise<iLocaleFlat[] | iLocaleDefault | iLocaleData[]>;
+    getLocaleName(forLocale: string, shortName?: boolean, inLocale?: string): string;
+    getLocaleNameWithLookup(forLocale: string, shortName?: boolean, inLocale?: string): Promise<string>;
+    /** @deprecated use `getLocaleNameWithLookup` or `getLocaleName` */
+    getLanguageName(forLocale: string, shortName?: boolean, inLocale?: string): Promise<string>;
+    detectPreferredLocale(acceptLanguageHeader?: string | null, supportedLocales?: string[]): string | false;
+}
+declare const LangsysApp: LangsysAppVue;
+
+export { DontTranslate, type DontTranslateProps, LangsysApp, Phrase, type PhraseProps, Translate, type TranslateProps, createLocaleStore, type iLangsysInitConfig, refToLocaleSource, useCurrentLocale, useLocaleStore, useSignal, useT, useTranslations };