@frame-kit/ui-ng 0.2.9 → 0.2.10

package/COMPONENTS.md

@@ -83,6 +83,7 @@ Organized by **purpose** (not Atomic Design) into six layers with strict depende
 ### Services — runtime services with no UI
 
 - [OverlayOrchestrator](#overlayorchestrator)
+- [ReactiveI18nService](#reactivei18nservice)
 - [SpotlightService](#spotlightservice)
 - [ToastService](#toastservice)
 
@@ -631,6 +632,13 @@ Centralized priority stack for dialogs, drawers, popovers, and navigation panels
 
 ---
 
+### ReactiveI18nService
+
+Message lookup by dot-path key with `{{var}}` interpolation and a minimal ICU plural subset, backed by signals so a locale switch re-renders every template reading it. Provided with `provideI18n`, injected via `I18N_SERVICE`; the framework-free core lives in `@frame-kit/utils` so a server can render the same copy.
+[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/services/i18n/README.md)
+
+---
+
 ### SpotlightService
 
 Coordinates a single global "active key" with reference-counted holders, so unrelated parts of the DOM can pulse together when the same key is activated. The `fkSpotlightTrigger` / `fkSpotlightTarget` directives are the typical consumers.

package/fesm2022/frame-kit-ui-ng-services-i18n.mjs

@@ -0,0 +1,97 @@
+import { I18nService, detectLocale, saveLocale } from '@frame-kit/utils';
+import { signal, InjectionToken } from '@angular/core';
+
+/**
+ * The Angular face of `I18nService` from `@frame-kit/utils`.
+ *
+ * Adds three things the framework-agnostic base deliberately leaves out:
+ * signal-backed messages, so a template reading `get()` re-renders when the
+ * locale changes; browser locale detection at construction; and persistence of
+ * the visitor's choice. Everything else — lookup, interpolation, plurals,
+ * merging — comes from the base, which the backend can use unchanged.
+ *
+ * Provided through {@link provideI18n} and injected via {@link I18N_SERVICE},
+ * one instance per application injector.
+ */
+class ReactiveI18nService extends I18nService {
+    localeSignal;
+    messagesSignal;
+    storageKey;
+    /** The active locale, as a signal. Read it in templates to react to changes. */
+    locale;
+    constructor(config = {}) {
+        const supportedLocales = config.supportedLocales ?? ['en'];
+        super({
+            ...config,
+            supportedLocales,
+            locale: config.locale ??
+                detectLocale({ supportedLocales, storageKey: config.storageKey }),
+        });
+        this.storageKey = config.storageKey;
+        this.localeSignal = signal(this.getLocale(), ...(ngDevMode ? [{ debugName: "localeSignal" }] : /* istanbul ignore next */ []));
+        this.locale = this.localeSignal.asReadonly();
+        this.messagesSignal = signal(this.messages, ...(ngDevMode ? [{ debugName: "messagesSignal" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Switch locale and remember the choice. Ignores an unsupported locale, so
+     * the current one survives.
+     */
+    setLocale(locale) {
+        // The base rebuilds `messages` and calls onLocaleChanged(), which syncs
+        // the signals below.
+        super.setLocale(locale);
+        if (this.storageKey) {
+            saveLocale(this.storageKey, this.getLocale());
+        }
+    }
+    /** Reads from the signal, which is what makes `get()` reactive. */
+    currentMessages() {
+        return this.messagesSignal();
+    }
+    onLocaleChanged() {
+        // The base constructor builds messages before our fields are initialized,
+        // and it calls this hook on the way. Nothing to sync yet at that point.
+        if (!this.localeSignal) {
+            return;
+        }
+        this.localeSignal.set(this.getLocale());
+        this.messagesSignal.set(this.messages);
+    }
+}
+/**
+ * Inject the app's i18n service.
+ *
+ * Typed as the reactive subclass: `get()` is signal-backed, and `locale` is
+ * readable in templates.
+ */
+const I18N_SERVICE = new InjectionToken('FK_I18N_SERVICE');
+/**
+ * Provide i18n for the application.
+ *
+ * Single locale:
+ * ```ts
+ * provideI18n({ sources: [appMessages] })
+ * ```
+ *
+ * Several, with the choice remembered:
+ * ```ts
+ * provideI18n({
+ *   supportedLocales: ['en', 'es'],
+ *   localeMaps: [{ en: enMessages, es: esMessages }],
+ *   storageKey: 'acme-locale',
+ * })
+ * ```
+ */
+function provideI18n(config = {}) {
+    return {
+        provide: I18N_SERVICE,
+        useFactory: () => new ReactiveI18nService(config),
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { I18N_SERVICE, ReactiveI18nService, provideI18n };
+//# sourceMappingURL=frame-kit-ui-ng-services-i18n.mjs.map

package/fesm2022/frame-kit-ui-ng-services-i18n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-services-i18n.mjs","sources":["../../../../packages/ui-ng/services/i18n/i18n.service.ts","../../../../packages/ui-ng/services/i18n/frame-kit-ui-ng-services-i18n.ts"],"sourcesContent":["import type { LocaleMap, Messages } from '@frame-kit/utils';\nimport { detectLocale, I18nService, saveLocale } from '@frame-kit/utils';\nimport type { Provider, Signal, WritableSignal } from '@angular/core';\nimport { InjectionToken, signal } from '@angular/core';\n\n/** Everything `provideI18n` needs to build the service. */\nexport interface I18nConfig {\n  /**\n   * Force a locale. Omit to detect one from storage, then the browser\n   * language, then `supportedLocales[0]`.\n   */\n  locale?: string;\n\n  /** Locale codes the app ships messages for. Defaults to `['en']`. */\n  supportedLocales?: string[];\n\n  /** Message bundles keyed by locale — merged in order, later wins. */\n  localeMaps?: LocaleMap[];\n\n  /** Locale-independent bundles, merged after `localeMaps`. */\n  sources?: Messages[];\n\n  /**\n   * `localStorage` key for the visitor's chosen locale. Omit and the choice\n   * lasts for the session only.\n   *\n   * Name it per product (`'acme-locale'`): two apps on one origin sharing a\n   * key overwrite each other's preference.\n   */\n  storageKey?: string;\n}\n\n/**\n * The Angular face of `I18nService` from `@frame-kit/utils`.\n *\n * Adds three things the framework-agnostic base deliberately leaves out:\n * signal-backed messages, so a template reading `get()` re-renders when the\n * locale changes; browser locale detection at construction; and persistence of\n * the visitor's choice. Everything else — lookup, interpolation, plurals,\n * merging — comes from the base, which the backend can use unchanged.\n *\n * Provided through {@link provideI18n} and injected via {@link I18N_SERVICE},\n * one instance per application injector.\n */\nexport class ReactiveI18nService extends I18nService {\n  private readonly localeSignal: WritableSignal<string>;\n  private readonly messagesSignal: WritableSignal<Messages>;\n  private readonly storageKey?: string;\n\n  /** The active locale, as a signal. Read it in templates to react to changes. */\n  readonly locale: Signal<string>;\n\n  constructor(config: I18nConfig = {}) {\n    const supportedLocales = config.supportedLocales ?? ['en'];\n\n    super({\n      ...config,\n      supportedLocales,\n      locale:\n        config.locale ??\n        detectLocale({ supportedLocales, storageKey: config.storageKey }),\n    });\n\n    this.storageKey = config.storageKey;\n    this.localeSignal = signal(this.getLocale());\n    this.locale = this.localeSignal.asReadonly();\n    this.messagesSignal = signal(this.messages);\n  }\n\n  /**\n   * Switch locale and remember the choice. Ignores an unsupported locale, so\n   * the current one survives.\n   */\n  override setLocale(locale: string): void {\n    // The base rebuilds `messages` and calls onLocaleChanged(), which syncs\n    // the signals below.\n    super.setLocale(locale);\n\n    if (this.storageKey) {\n      saveLocale(this.storageKey, this.getLocale());\n    }\n  }\n\n  /** Reads from the signal, which is what makes `get()` reactive. */\n  protected override currentMessages(): Messages {\n    return this.messagesSignal();\n  }\n\n  protected override onLocaleChanged(): void {\n    // The base constructor builds messages before our fields are initialized,\n    // and it calls this hook on the way. Nothing to sync yet at that point.\n    if (!this.localeSignal) {\n      return;\n    }\n\n    this.localeSignal.set(this.getLocale());\n    this.messagesSignal.set(this.messages);\n  }\n}\n\n/**\n * Inject the app's i18n service.\n *\n * Typed as the reactive subclass: `get()` is signal-backed, and `locale` is\n * readable in templates.\n */\nexport const I18N_SERVICE = new InjectionToken<ReactiveI18nService>(\n  'FK_I18N_SERVICE',\n);\n\n/**\n * Provide i18n for the application.\n *\n * Single locale:\n * ```ts\n * provideI18n({ sources: [appMessages] })\n * ```\n *\n * Several, with the choice remembered:\n * ```ts\n * provideI18n({\n *   supportedLocales: ['en', 'es'],\n *   localeMaps: [{ en: enMessages, es: esMessages }],\n *   storageKey: 'acme-locale',\n * })\n * ```\n */\nexport function provideI18n(config: I18nConfig = {}): Provider {\n  return {\n    provide: I18N_SERVICE,\n    useFactory: () => new ReactiveI18nService(config),\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAgCA;;;;;;;;;;;AAWG;AACG,MAAO,mBAAoB,SAAQ,WAAW,CAAA;AACjC,IAAA,YAAY;AACZ,IAAA,cAAc;AACd,IAAA,UAAU;;AAGlB,IAAA,MAAM;AAEf,IAAA,WAAA,CAAY,SAAqB,EAAE,EAAA;QACjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC;AAE1D,QAAA,KAAK,CAAC;AACJ,YAAA,GAAG,MAAM;YACT,gBAAgB;YAChB,MAAM,EACJ,MAAM,CAAC,MAAM;gBACb,YAAY,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;AACpE,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU;QACnC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;QAC5C,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC7C;AAEA;;;AAGG;AACM,IAAA,SAAS,CAAC,MAAc,EAAA;;;AAG/B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;AAEvB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/C;IACF;;IAGmB,eAAe,GAAA;AAChC,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;IAC9B;IAEmB,eAAe,GAAA;;;AAGhC,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB;QACF;QAEA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxC;AACD;AAED;;;;;AAKG;MACU,YAAY,GAAG,IAAI,cAAc,CAC5C,iBAAiB;AAGnB;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,WAAW,CAAC,MAAA,GAAqB,EAAE,EAAA;IACjD,OAAO;AACL,QAAA,OAAO,EAAE,YAAY;QACrB,UAAU,EAAE,MAAM,IAAI,mBAAmB,CAAC,MAAM,CAAC;KAClD;AACH;;ACpIA;;AAEG;;;;"}

package/fesm2022/frame-kit-ui-ng.mjs

@@ -10,6 +10,7 @@ export * from '@frame-kit/ui-ng/directives/tooltip';
 export * from '@frame-kit/ui-ng/forms';
 export * from '@frame-kit/ui-ng/layouts/app-shell';
 export * from '@frame-kit/ui-ng/layouts/content-split';
+export * from '@frame-kit/ui-ng/services/i18n';
 export * from '@frame-kit/ui-ng/services/spotlight';
 export * from '@frame-kit/ui-ng/services/toast';
 export * from '@frame-kit/ui-ng/ui/accordion';

package/fesm2022/frame-kit-ui-ng.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}
+{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Style-agnostic, token-driven Angular UI component library for FrameKit.",
   "license": "MIT",
   "repository": {
@@ -17,6 +17,7 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "@frame-kit/utils": "0.2.10",
     "rxjs": "^7.0.0"
   },
   "sideEffects": false,
@@ -81,6 +82,10 @@
       "types": "./types/frame-kit-ui-ng-layouts-content-split.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-layouts-content-split.mjs"
     },
+    "./services/i18n": {
+      "types": "./types/frame-kit-ui-ng-services-i18n.d.ts",
+      "default": "./fesm2022/frame-kit-ui-ng-services-i18n.mjs"
+    },
     "./services/spotlight": {
       "types": "./types/frame-kit-ui-ng-services-spotlight.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-services-spotlight.mjs"

package/services/i18n/README.md

@@ -0,0 +1,102 @@
+# I18n
+
+Message lookup for Angular applications: dot-path keys, `{{var}}` interpolation, plurals, and locale switching that re-renders templates.
+
+`ReactiveI18nService` is the Angular face of `I18nService` from `@frame-kit/utils`. The base does the work — resolution, interpolation, merging bundles — and stays framework-free so a server can render the same copy. This subclass adds the three things only a browser app needs: signal-backed messages, locale detection at construction, and persistence of the visitor's choice.
+
+## Initialization
+
+Provided **per application injector** through `provideI18n`, and injected via the `I18N_SERVICE` token. Construction reads `localStorage` and `navigator.language` once; there are no subscriptions or listeners to clean up.
+
+```ts
+// app.config.ts
+import { provideI18n } from '@frame-kit/ui-ng/services/i18n';
+
+import enMessages from './locales/en.json';
+import esMessages from './locales/es.json';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideI18n({
+      supportedLocales: ['en', 'es'],
+      localeMaps: [{ en: enMessages, es: esMessages }],
+      storageKey: 'acme-locale',
+    }),
+  ],
+};
+```
+
+A single-locale app needs only its bundles:
+
+```ts
+provideI18n({ sources: [appMessages] });
+```
+
+### Config
+
+| Option             | Type          | Purpose                                                                             |
+| ------------------ | ------------- | ----------------------------------------------------------------------------------- |
+| `locale`           | `string`      | Force a locale and skip detection.                                                  |
+| `supportedLocales` | `string[]`    | Locale codes the app ships messages for. Defaults to `['en']`.                      |
+| `localeMaps`       | `LocaleMap[]` | Bundles keyed by locale, merged in order — later sources win.                       |
+| `sources`          | `Messages[]`  | Locale-independent bundles, merged after `localeMaps`.                              |
+| `storageKey`       | `string`      | `localStorage` key for the visitor's choice. Omit and the choice lasts the session. |
+
+Name `storageKey` per product (`'acme-locale'`). Two apps on one origin sharing a key would overwrite each other's preference.
+
+## API
+
+| Member                | Signature                                                          | Behavior                                                                                                                                                         |
+| --------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `locale`              | `Signal<string>`                                                   | The active locale code. Read it in a template to react to changes.                                                                                               |
+| `get`                 | `(key: string, vars?: Record<string, string \| number>) => string` | Resolves a dot-path key and interpolates. Returns the **key itself** when the message is missing, so the gap is visible in review rather than blank on the page. |
+| `getRaw`              | `<T>(path: string, vars?) => T \| undefined`                       | Returns a non-string value — an array of steps, a table of rows — interpolating every string inside it while preserving shape.                                   |
+| `setLocale`           | `(locale: string) => void`                                         | Switches locale and persists it when `storageKey` is set. Ignores an unsupported locale, leaving the current one active.                                         |
+| `getLocale`           | `() => string`                                                     | The active locale as a plain string, for non-reactive callers.                                                                                                   |
+| `getSupportedLocales` | `() => string[]`                                                   | The configured locale codes.                                                                                                                                     |
+| `registerLocaleMap`   | `(map: LocaleMap) => void`                                         | Merges a bundle in at runtime and re-renders. For lazy routes that load their own copy on activation rather than at boot.                                        |
+
+## Usage
+
+```ts
+@Component({
+  selector: 'app-sign-in',
+  template: `
+    <h1>{{ i18n.get('auth.signIn.title') }}</h1>
+    <p>{{ i18n.get('auth.signIn.greeting', { name: user().firstName }) }}</p>
+    <p>{{ i18n.get('auth.mfa.codesLeft', { n: remaining() }) }}</p>
+  `,
+})
+export class SignInComponent {
+  protected readonly i18n = inject(I18N_SERVICE);
+}
+```
+
+with a bundle shaped to match:
+
+```json
+{
+  "auth": {
+    "signIn": { "title": "Sign in", "greeting": "Welcome back, {{name}}" },
+    "mfa": {
+      "codesLeft": "{n, plural, =0 {No codes left} =1 {One code left} other {# codes left}}"
+    }
+  }
+}
+```
+
+## Behavior Notes
+
+**Reactivity.** `get()` reads messages from a signal, so any template calling it re-renders on `setLocale` or `registerLocaleMap` without the component subscribing to anything. Values captured into a plain field at construction will **not** update — call `get()` in the template, or wrap it in a `computed`.
+
+**Missing keys render as the key.** There is no fallback locale chain: a key absent from the active locale's bundle renders as `auth.signIn.title`. Loud on purpose.
+
+**Unpassed variables render as written.** `Hello {{name}}` with no `name` keeps the placeholder, naming the variable that was forgotten.
+
+**Plurals are a minimal ICU subset.** `{count, plural, =0 {…} =1 {…} other {…}}` — exact selectors plus `other`, with `#` substituted for the value. No `zero`/`few`/`many` CLDR categories and no nested braces in branch bodies. Enough for counts in UI copy; reach for a full ICU formatter if a locale needs the rest.
+
+**Merge order.** `localeMaps` merge in array order, then `sources`, each deep-merged over the last. A partial override replaces only the keys it names — siblings survive — which is how an app tailors a shared bundle without restating it.
+
+**Detection order.** Stored locale, then `navigator.language`, then `defaultLocale`, then `supportedLocales[0]`. Each candidate is normalized (`en-US` → `en`) and must be supported to win. Under SSR both browser sources are absent and detection falls through to the default, so the server renders the default locale and the client may switch on hydration.
+
+**Storage is best-effort.** Private-mode and blocked-cookie browsers throw on `localStorage` access; reads and writes swallow it. A remembered locale is a convenience, never a requirement.

package/types/frame-kit-ui-ng-services-i18n.d.ts

@@ -0,0 +1,81 @@
+import { I18nService, LocaleMap, Messages } from '@frame-kit/utils';
+import { InjectionToken, Signal, Provider } from '@angular/core';
+
+/** Everything `provideI18n` needs to build the service. */
+interface I18nConfig {
+    /**
+     * Force a locale. Omit to detect one from storage, then the browser
+     * language, then `supportedLocales[0]`.
+     */
+    locale?: string;
+    /** Locale codes the app ships messages for. Defaults to `['en']`. */
+    supportedLocales?: string[];
+    /** Message bundles keyed by locale — merged in order, later wins. */
+    localeMaps?: LocaleMap[];
+    /** Locale-independent bundles, merged after `localeMaps`. */
+    sources?: Messages[];
+    /**
+     * `localStorage` key for the visitor's chosen locale. Omit and the choice
+     * lasts for the session only.
+     *
+     * Name it per product (`'acme-locale'`): two apps on one origin sharing a
+     * key overwrite each other's preference.
+     */
+    storageKey?: string;
+}
+/**
+ * The Angular face of `I18nService` from `@frame-kit/utils`.
+ *
+ * Adds three things the framework-agnostic base deliberately leaves out:
+ * signal-backed messages, so a template reading `get()` re-renders when the
+ * locale changes; browser locale detection at construction; and persistence of
+ * the visitor's choice. Everything else — lookup, interpolation, plurals,
+ * merging — comes from the base, which the backend can use unchanged.
+ *
+ * Provided through {@link provideI18n} and injected via {@link I18N_SERVICE},
+ * one instance per application injector.
+ */
+declare class ReactiveI18nService extends I18nService {
+    private readonly localeSignal;
+    private readonly messagesSignal;
+    private readonly storageKey?;
+    /** The active locale, as a signal. Read it in templates to react to changes. */
+    readonly locale: Signal<string>;
+    constructor(config?: I18nConfig);
+    /**
+     * Switch locale and remember the choice. Ignores an unsupported locale, so
+     * the current one survives.
+     */
+    setLocale(locale: string): void;
+    /** Reads from the signal, which is what makes `get()` reactive. */
+    protected currentMessages(): Messages;
+    protected onLocaleChanged(): void;
+}
+/**
+ * Inject the app's i18n service.
+ *
+ * Typed as the reactive subclass: `get()` is signal-backed, and `locale` is
+ * readable in templates.
+ */
+declare const I18N_SERVICE: InjectionToken<ReactiveI18nService>;
+/**
+ * Provide i18n for the application.
+ *
+ * Single locale:
+ * ```ts
+ * provideI18n({ sources: [appMessages] })
+ * ```
+ *
+ * Several, with the choice remembered:
+ * ```ts
+ * provideI18n({
+ *   supportedLocales: ['en', 'es'],
+ *   localeMaps: [{ en: enMessages, es: esMessages }],
+ *   storageKey: 'acme-locale',
+ * })
+ * ```
+ */
+declare function provideI18n(config?: I18nConfig): Provider;
+
+export { I18N_SERVICE, ReactiveI18nService, provideI18n };
+export type { I18nConfig };

package/types/frame-kit-ui-ng.d.ts

@@ -10,6 +10,7 @@ export * from '@frame-kit/ui-ng/directives/tooltip';
 export * from '@frame-kit/ui-ng/forms';
 export * from '@frame-kit/ui-ng/layouts/app-shell';
 export * from '@frame-kit/ui-ng/layouts/content-split';
+export * from '@frame-kit/ui-ng/services/i18n';
 export * from '@frame-kit/ui-ng/services/spotlight';
 export * from '@frame-kit/ui-ng/services/toast';
 export * from '@frame-kit/ui-ng/ui/accordion';