@mk-kit/ui 0.55.1 → 0.57.0

package/fesm2022/mk-kit-ui-translate-editor.mjs

@@ -0,0 +1,157 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MK_I18N } from '@mk-kit/ui/core';
+import { MkButton } from '@mk-kit/ui/button';
+import { MkIcon } from '@mk-kit/ui/icon';
+import { MkInlineEdit } from '@mk-kit/ui/data';
+import { MkInput } from '@mk-kit/ui/forms';
+import { mkExportCsv, MkTable, MkTableCell } from '@mk-kit/ui/table';
+
+/**
+ * Translation editor — keys as rows, locales as columns, click a cell to
+ * edit. The base strings are your bundled files; edits are **overrides**
+ * kept apart from them, so a rebuild never loses them and a cell can be
+ * restored to the file text. Search by key or text, filter to the keys a
+ * locale is missing or the ones already edited, export the grid as CSV.
+ * Persistence is yours: every edit is emitted as `changed`, feed the result
+ * back through `overrides`.
+ *
+ * ```html
+ * <mk-translation-editor
+ *   [locales]="['pl', 'en', 'ru']"
+ *   [base]="base()"
+ *   [overrides]="overrides()"
+ *   (changed)="save($event)" />
+ * ```
+ */
+class MkTranslationEditor {
+    i18n = inject(MK_I18N);
+    /** Locale codes, in column order. The first one is the reference language. */
+    locales = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locales" }] : /* istanbul ignore next */ []));
+    /** Bundled strings per locale, flat (`'a.b.c': 'text'`) or nested. */
+    base = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []));
+    /** Edits per locale, flat. Missing locales are fine. */
+    overrides = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
+    /** Show but do not edit. */
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** File name of the CSV export. */
+    exportFilename = input('translations.csv', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
+    /** An edit or a restore; persist it and update `overrides`. */
+    changed = output();
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    filter = signal('all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** Every key any locale knows, sorted. */
+    keys = computed(() => {
+        const set = new Set();
+        for (const locale of this.locales()) {
+            for (const k of Object.keys(this.base()[locale] ?? {}))
+                set.add(k);
+            for (const k of Object.keys(this.overrides()[locale] ?? {}))
+                set.add(k);
+        }
+        return [...set].sort();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+    /** Per-locale counts shown as filter chips. */
+    stats = computed(() => this.locales().map((locale) => {
+        const b = this.base()[locale] ?? {};
+        const o = this.overrides()[locale] ?? {};
+        let missing = 0;
+        for (const k of this.keys())
+            if (!(k in b) && !(k in o))
+                missing++;
+        return { locale, missing, overridden: Object.keys(o).length };
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stats" }] : /* istanbul ignore next */ []));
+    overriddenTotal = computed(() => this.stats().reduce((n, s) => n + s.overridden, 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overriddenTotal" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        const filter = this.filter();
+        const locales = this.locales();
+        const out = [];
+        for (const key of this.keys()) {
+            if (filter === 'overridden' && !locales.some((l) => this.hasOverride(l, key)))
+                continue;
+            if (filter.startsWith('missing:')) {
+                const l = filter.slice('missing:'.length);
+                if (this.effective(l, key) !== null)
+                    continue;
+            }
+            const row = { key };
+            for (const l of locales)
+                row[l] = this.effective(l, key) ?? '';
+            if (q && !key.toLowerCase().includes(q) && !locales.some((l) => row[l].toLowerCase().includes(q)))
+                continue;
+            out.push(row);
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = computed(() => [
+        { key: 'key', header: this.i18n.translationEditorKey, width: '32%', pinned: 'left' },
+        ...this.locales().map((locale) => ({ key: locale, header: locale.toUpperCase() })),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    effective(locale, key) {
+        const o = this.overrides()[locale]?.[key];
+        if (o !== undefined)
+            return o;
+        const b = this.base()[locale]?.[key];
+        return b === undefined ? null : b;
+    }
+    hasOverride(locale, key) {
+        return this.overrides()[locale]?.[key] !== undefined;
+    }
+    isMissing(locale, key) {
+        return this.effective(locale, key) === null;
+    }
+    onSaved(locale, key, value) {
+        if (this.readonly())
+            return;
+        const previous = this.effective(locale, key);
+        const next = value.trim();
+        // Typing the file text back is a restore, not an override.
+        if (next === (this.base()[locale]?.[key] ?? '')) {
+            if (this.hasOverride(locale, key))
+                this.changed.emit({ locale, key, value: null, previous });
+            return;
+        }
+        if (next === previous)
+            return;
+        this.changed.emit({ locale, key, value: next, previous });
+    }
+    reset(locale, key) {
+        if (this.readonly() || !this.hasOverride(locale, key))
+            return;
+        this.changed.emit({ locale, key, value: null, previous: this.effective(locale, key) });
+    }
+    setFilter(next) {
+        const filter = next;
+        this.filter.set(this.filter() === filter && filter !== 'all' ? 'all' : filter);
+    }
+    exportCsv() {
+        const locales = this.locales();
+        mkExportCsv(this.rows(), [{ key: 'key', header: 'key' }, ...locales.map((l) => ({ key: l, header: l }))], { filename: this.exportFilename() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTranslationEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTranslationEditor, isStandalone: true, selector: "mk-translation-editor", inputs: { locales: { classPropertyName: "locales", publicName: "locales", isSignal: true, isRequired: true, transformFunction: null }, base: { classPropertyName: "base", publicName: "base", isSignal: true, isRequired: true, transformFunction: null }, overrides: { classPropertyName: "overrides", publicName: "overrides", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "mk-translation-editor" }, ngImport: i0, template: "<div class=\"mk-translation-editor__toolbar\">\n  <input\n    mkInput\n    type=\"search\"\n    class=\"mk-translation-editor__search\"\n    [value]=\"query()\"\n    (input)=\"query.set($any($event.target).value)\"\n    [placeholder]=\"i18n.translationEditorSearch\"\n    [attr.aria-label]=\"i18n.translationEditorSearch\"\n  />\n  <div class=\"mk-translation-editor__filters\" role=\"group\">\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'all' ? 'solid' : 'outline'\"\n      (click)=\"setFilter('all')\"\n    >\n      {{ i18n.translationEditorAll }} \u00B7 {{ keys().length }}\n    </button>\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'overridden' ? 'solid' : 'outline'\"\n      [attr.aria-pressed]=\"filter() === 'overridden'\"\n      (click)=\"setFilter('overridden')\"\n    >\n      {{ i18n.translationEditorOverridden }} \u00B7 {{ overriddenTotal() }}\n    </button>\n    @for (s of stats(); track s.locale) {\n      @if (s.missing > 0) {\n        <button\n          mkButton\n          size=\"sm\"\n          tone=\"warning\"\n          [variant]=\"filter() === 'missing:' + s.locale ? 'solid' : 'outline'\"\n          [attr.aria-pressed]=\"filter() === 'missing:' + s.locale\"\n          (click)=\"setFilter('missing:' + s.locale)\"\n        >\n          {{ i18n.translationEditorMissing }} {{ s.locale.toUpperCase() }} \u00B7 {{ s.missing }}\n        </button>\n      }\n    }\n  </div>\n  <span class=\"mk-translation-editor__count\">{{ rows().length }} {{ i18n.translationEditorKeys }}</span>\n  <button mkButton size=\"sm\" variant=\"ghost\" (click)=\"exportCsv()\">\n    <mk-icon name=\"download\" [size]=\"16\" />\n    {{ i18n.translationEditorExport }}\n  </button>\n</div>\n\n<mk-table\n  [columns]=\"columns()\"\n  [data]=\"rows()\"\n  density=\"compact\"\n  stickyHeader\n  virtual\n  [rowHeight]=\"44\"\n  class=\"mk-translation-editor__table\"\n>\n  <ng-template mkTableCell=\"key\" let-row=\"row\">\n    <code class=\"mk-translation-editor__key\">{{ row.key }}</code>\n  </ng-template>\n  @for (locale of locales(); track locale) {\n    <ng-template [mkTableCell]=\"locale\" let-row=\"row\">\n      <div\n        class=\"mk-translation-editor__cell\"\n        [class.mk-translation-editor__cell--overridden]=\"hasOverride(locale, row.key)\"\n        [class.mk-translation-editor__cell--missing]=\"isMissing(locale, row.key)\"\n      >\n        <mk-inline-edit\n          size=\"sm\"\n          [value]=\"row[locale]\"\n          [disabled]=\"readonly()\"\n          [placeholder]=\"isMissing(locale, row.key) ? i18n.translationEditorMissing : i18n.empty\"\n          [ariaLabel]=\"row.key + ' \u00B7 ' + locale\"\n          (saved)=\"onSaved(locale, row.key, $event)\"\n        />\n        @if (hasOverride(locale, row.key) && !readonly()) {\n          <button\n            mkButton\n            variant=\"ghost\"\n            size=\"sm\"\n            iconOnly\n            class=\"mk-translation-editor__reset\"\n            [attr.aria-label]=\"i18n.translationEditorReset\"\n            [attr.title]=\"i18n.translationEditorReset\"\n            (click)=\"reset(locale, row.key)\"\n          >\n            <mk-icon name=\"undo\" [size]=\"16\" />\n          </button>\n        }\n      </div>\n    </ng-template>\n  }\n</mk-table>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-3);min-height:0}.mk-translation-editor__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-2)}.mk-translation-editor__search{flex:1 1 16rem;min-width:12rem}.mk-translation-editor__filters{display:flex;flex-wrap:wrap;gap:var(--mk-space-1)}.mk-translation-editor__count{margin-inline-start:auto;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-translation-editor__table{flex:1 1 auto;min-height:0;max-height:70vh}.mk-translation-editor__key{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);word-break:break-all}.mk-translation-editor__cell{display:flex;align-items:center;gap:var(--mk-space-1);min-width:0}.mk-translation-editor__cell mk-inline-edit{flex:1 1 auto;min-width:0}.mk-translation-editor__cell--overridden{border-inline-start:2px solid var(--mk-primary);padding-inline-start:var(--mk-space-2)}.mk-translation-editor__cell--missing{border-inline-start:2px solid var(--mk-warning);padding-inline-start:var(--mk-space-2)}.mk-translation-editor__reset{flex:none;opacity:.6}.mk-translation-editor__reset:hover,.mk-translation-editor__reset:focus-visible{opacity:1}\n"], dependencies: [{ kind: "component", type: MkTable, selector: "mk-table", inputs: ["columns", "data", "stickyHeader", "zebra", "hover", "density", "stackAt", "clickableRows", "emptyMessage", "selectable", "selected", "trackKey", "rowClass", "expandable", "singleExpand", "resizableColumns", "reorderableColumns", "groupBy", "groupLabel", "virtual", "rowHeight", "overscan", "height", "maxHeight", "filterable", "filters", "clientFilter", "childrenKey"], outputs: ["selectedChange", "filtersChange", "sortChange", "rowClick", "selectionChange", "expandedChange", "columnResize", "columnReorder", "cellEdit", "groupToggle", "treeToggle"] }, { kind: "directive", type: MkTableCell, selector: "[mkTableCell]", inputs: ["mkTableCell"] }, { kind: "component", type: MkInlineEdit, selector: "mk-inline-edit", inputs: ["value", "placeholder", "multiline", "saveOnBlur", "ariaLabel", "disabled", "invalid", "size"], outputs: ["valueChange", "saved", "cancelled"] }, { kind: "component", type: MkInput, selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTranslationEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-translation-editor', imports: [MkTable, MkTableCell, MkInlineEdit, MkInput, MkButton, MkIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-translation-editor' }, template: "<div class=\"mk-translation-editor__toolbar\">\n  <input\n    mkInput\n    type=\"search\"\n    class=\"mk-translation-editor__search\"\n    [value]=\"query()\"\n    (input)=\"query.set($any($event.target).value)\"\n    [placeholder]=\"i18n.translationEditorSearch\"\n    [attr.aria-label]=\"i18n.translationEditorSearch\"\n  />\n  <div class=\"mk-translation-editor__filters\" role=\"group\">\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'all' ? 'solid' : 'outline'\"\n      (click)=\"setFilter('all')\"\n    >\n      {{ i18n.translationEditorAll }} \u00B7 {{ keys().length }}\n    </button>\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'overridden' ? 'solid' : 'outline'\"\n      [attr.aria-pressed]=\"filter() === 'overridden'\"\n      (click)=\"setFilter('overridden')\"\n    >\n      {{ i18n.translationEditorOverridden }} \u00B7 {{ overriddenTotal() }}\n    </button>\n    @for (s of stats(); track s.locale) {\n      @if (s.missing > 0) {\n        <button\n          mkButton\n          size=\"sm\"\n          tone=\"warning\"\n          [variant]=\"filter() === 'missing:' + s.locale ? 'solid' : 'outline'\"\n          [attr.aria-pressed]=\"filter() === 'missing:' + s.locale\"\n          (click)=\"setFilter('missing:' + s.locale)\"\n        >\n          {{ i18n.translationEditorMissing }} {{ s.locale.toUpperCase() }} \u00B7 {{ s.missing }}\n        </button>\n      }\n    }\n  </div>\n  <span class=\"mk-translation-editor__count\">{{ rows().length }} {{ i18n.translationEditorKeys }}</span>\n  <button mkButton size=\"sm\" variant=\"ghost\" (click)=\"exportCsv()\">\n    <mk-icon name=\"download\" [size]=\"16\" />\n    {{ i18n.translationEditorExport }}\n  </button>\n</div>\n\n<mk-table\n  [columns]=\"columns()\"\n  [data]=\"rows()\"\n  density=\"compact\"\n  stickyHeader\n  virtual\n  [rowHeight]=\"44\"\n  class=\"mk-translation-editor__table\"\n>\n  <ng-template mkTableCell=\"key\" let-row=\"row\">\n    <code class=\"mk-translation-editor__key\">{{ row.key }}</code>\n  </ng-template>\n  @for (locale of locales(); track locale) {\n    <ng-template [mkTableCell]=\"locale\" let-row=\"row\">\n      <div\n        class=\"mk-translation-editor__cell\"\n        [class.mk-translation-editor__cell--overridden]=\"hasOverride(locale, row.key)\"\n        [class.mk-translation-editor__cell--missing]=\"isMissing(locale, row.key)\"\n      >\n        <mk-inline-edit\n          size=\"sm\"\n          [value]=\"row[locale]\"\n          [disabled]=\"readonly()\"\n          [placeholder]=\"isMissing(locale, row.key) ? i18n.translationEditorMissing : i18n.empty\"\n          [ariaLabel]=\"row.key + ' \u00B7 ' + locale\"\n          (saved)=\"onSaved(locale, row.key, $event)\"\n        />\n        @if (hasOverride(locale, row.key) && !readonly()) {\n          <button\n            mkButton\n            variant=\"ghost\"\n            size=\"sm\"\n            iconOnly\n            class=\"mk-translation-editor__reset\"\n            [attr.aria-label]=\"i18n.translationEditorReset\"\n            [attr.title]=\"i18n.translationEditorReset\"\n            (click)=\"reset(locale, row.key)\"\n          >\n            <mk-icon name=\"undo\" [size]=\"16\" />\n          </button>\n        }\n      </div>\n    </ng-template>\n  }\n</mk-table>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-3);min-height:0}.mk-translation-editor__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-2)}.mk-translation-editor__search{flex:1 1 16rem;min-width:12rem}.mk-translation-editor__filters{display:flex;flex-wrap:wrap;gap:var(--mk-space-1)}.mk-translation-editor__count{margin-inline-start:auto;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-translation-editor__table{flex:1 1 auto;min-height:0;max-height:70vh}.mk-translation-editor__key{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);word-break:break-all}.mk-translation-editor__cell{display:flex;align-items:center;gap:var(--mk-space-1);min-width:0}.mk-translation-editor__cell mk-inline-edit{flex:1 1 auto;min-width:0}.mk-translation-editor__cell--overridden{border-inline-start:2px solid var(--mk-primary);padding-inline-start:var(--mk-space-2)}.mk-translation-editor__cell--missing{border-inline-start:2px solid var(--mk-warning);padding-inline-start:var(--mk-space-2)}.mk-translation-editor__reset{flex:none;opacity:.6}.mk-translation-editor__reset:hover,.mk-translation-editor__reset:focus-visible{opacity:1}\n"] }]
+        }], propDecorators: { locales: [{ type: i0.Input, args: [{ isSignal: true, alias: "locales", required: true }] }], base: [{ type: i0.Input, args: [{ isSignal: true, alias: "base", required: true }] }], overrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrides", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkTranslationEditor };
+//# sourceMappingURL=mk-kit-ui-translate-editor.mjs.map

package/fesm2022/mk-kit-ui-translate-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mk-kit-ui-translate-editor.mjs","sources":["../../../projects/mk-kit/translate/editor/translation-editor.ts","../../../projects/mk-kit/translate/editor/translation-editor.html","../../../projects/mk-kit/translate/editor/mk-kit-ui-translate-editor.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { MK_I18N } from '@mk-kit/ui/core';\nimport { MkButton } from '@mk-kit/ui/button';\nimport { MkIcon } from '@mk-kit/ui/icon';\nimport { MkInlineEdit } from '@mk-kit/ui/data';\nimport { MkInput } from '@mk-kit/ui/forms';\nimport { MkTable, MkTableCell, type MkTableColumn, mkExportCsv } from '@mk-kit/ui/table';\nimport type { MkFlatTranslations } from '@mk-kit/ui/translate';\n\n/** One edit made in the editor. `value: null` clears the override. */\nexport interface MkTranslationChange {\n  locale: string;\n  key: string;\n  value: string | null;\n  /** The text shown before the edit (override, or the base string). */\n  previous: string | null;\n}\n\n/** A row of the editor: the key plus the effective text per locale. */\nexport interface MkTranslationRow {\n  key: string;\n  [locale: string]: string;\n}\n\ntype Filter = 'all' | 'overridden' | `missing:${string}`;\n\n/**\n * Translation editor — keys as rows, locales as columns, click a cell to\n * edit. The base strings are your bundled files; edits are **overrides**\n * kept apart from them, so a rebuild never loses them and a cell can be\n * restored to the file text. Search by key or text, filter to the keys a\n * locale is missing or the ones already edited, export the grid as CSV.\n * Persistence is yours: every edit is emitted as `changed`, feed the result\n * back through `overrides`.\n *\n * ```html\n * <mk-translation-editor\n *   [locales]=\"['pl', 'en', 'ru']\"\n *   [base]=\"base()\"\n *   [overrides]=\"overrides()\"\n *   (changed)=\"save($event)\" />\n * ```\n */\n@Component({\n  selector: 'mk-translation-editor',\n  imports: [MkTable, MkTableCell, MkInlineEdit, MkInput, MkButton, MkIcon],\n  templateUrl: './translation-editor.html',\n  styleUrl: './translation-editor.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'mk-translation-editor' },\n})\nexport class MkTranslationEditor {\n  protected readonly i18n = inject(MK_I18N);\n\n  /** Locale codes, in column order. The first one is the reference language. */\n  readonly locales = input.required<string[]>();\n  /** Bundled strings per locale, flat (`'a.b.c': 'text'`) or nested. */\n  readonly base = input.required<Record<string, MkFlatTranslations>>();\n  /** Edits per locale, flat. Missing locales are fine. */\n  readonly overrides = input<Record<string, MkFlatTranslations>>({});\n  /** Show but do not edit. */\n  readonly readonly = input(false);\n  /** File name of the CSV export. */\n  readonly exportFilename = input('translations.csv');\n\n  /** An edit or a restore; persist it and update `overrides`. */\n  readonly changed = output<MkTranslationChange>();\n\n  protected readonly query = signal('');\n  protected readonly filter = signal<Filter>('all');\n\n  /** Every key any locale knows, sorted. */\n  protected readonly keys = computed(() => {\n    const set = new Set<string>();\n    for (const locale of this.locales()) {\n      for (const k of Object.keys(this.base()[locale] ?? {})) set.add(k);\n      for (const k of Object.keys(this.overrides()[locale] ?? {})) set.add(k);\n    }\n    return [...set].sort();\n  });\n\n  /** Per-locale counts shown as filter chips. */\n  protected readonly stats = computed(() =>\n    this.locales().map((locale) => {\n      const b = this.base()[locale] ?? {};\n      const o = this.overrides()[locale] ?? {};\n      let missing = 0;\n      for (const k of this.keys()) if (!(k in b) && !(k in o)) missing++;\n      return { locale, missing, overridden: Object.keys(o).length };\n    }),\n  );\n\n  protected readonly overriddenTotal = computed(() =>\n    this.stats().reduce((n, s) => n + s.overridden, 0),\n  );\n\n  protected readonly rows = computed<MkTranslationRow[]>(() => {\n    const q = this.query().trim().toLowerCase();\n    const filter = this.filter();\n    const locales = this.locales();\n    const out: MkTranslationRow[] = [];\n    for (const key of this.keys()) {\n      if (filter === 'overridden' && !locales.some((l) => this.hasOverride(l, key))) continue;\n      if (filter.startsWith('missing:')) {\n        const l = filter.slice('missing:'.length);\n        if (this.effective(l, key) !== null) continue;\n      }\n      const row: MkTranslationRow = { key };\n      for (const l of locales) row[l] = this.effective(l, key) ?? '';\n      if (q && !key.toLowerCase().includes(q) && !locales.some((l) => row[l].toLowerCase().includes(q))) continue;\n      out.push(row);\n    }\n    return out;\n  });\n\n  protected readonly columns = computed<MkTableColumn<MkTranslationRow>[]>(() => [\n    { key: 'key', header: this.i18n.translationEditorKey, width: '32%', pinned: 'left' },\n    ...this.locales().map((locale) => ({ key: locale, header: locale.toUpperCase() })),\n  ]);\n\n  protected effective(locale: string, key: string): string | null {\n    const o = this.overrides()[locale]?.[key];\n    if (o !== undefined) return o;\n    const b = this.base()[locale]?.[key];\n    return b === undefined ? null : b;\n  }\n\n  protected hasOverride(locale: string, key: string): boolean {\n    return this.overrides()[locale]?.[key] !== undefined;\n  }\n\n  protected isMissing(locale: string, key: string): boolean {\n    return this.effective(locale, key) === null;\n  }\n\n  protected onSaved(locale: string, key: string, value: string): void {\n    if (this.readonly()) return;\n    const previous = this.effective(locale, key);\n    const next = value.trim();\n    // Typing the file text back is a restore, not an override.\n    if (next === (this.base()[locale]?.[key] ?? '')) {\n      if (this.hasOverride(locale, key)) this.changed.emit({ locale, key, value: null, previous });\n      return;\n    }\n    if (next === previous) return;\n    this.changed.emit({ locale, key, value: next, previous });\n  }\n\n  protected reset(locale: string, key: string): void {\n    if (this.readonly() || !this.hasOverride(locale, key)) return;\n    this.changed.emit({ locale, key, value: null, previous: this.effective(locale, key) });\n  }\n\n  protected setFilter(next: string): void {\n    const filter = next as Filter;\n    this.filter.set(this.filter() === filter && filter !== 'all' ? 'all' : filter);\n  }\n\n  protected exportCsv(): void {\n    const locales = this.locales();\n    mkExportCsv(\n      this.rows(),\n      [{ key: 'key', header: 'key' }, ...locales.map((l) => ({ key: l, header: l }))],\n      { filename: this.exportFilename() },\n    );\n  }\n}\n","<div class=\"mk-translation-editor__toolbar\">\n  <input\n    mkInput\n    type=\"search\"\n    class=\"mk-translation-editor__search\"\n    [value]=\"query()\"\n    (input)=\"query.set($any($event.target).value)\"\n    [placeholder]=\"i18n.translationEditorSearch\"\n    [attr.aria-label]=\"i18n.translationEditorSearch\"\n  />\n  <div class=\"mk-translation-editor__filters\" role=\"group\">\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'all' ? 'solid' : 'outline'\"\n      (click)=\"setFilter('all')\"\n    >\n      {{ i18n.translationEditorAll }} · {{ keys().length }}\n    </button>\n    <button\n      mkButton\n      size=\"sm\"\n      [variant]=\"filter() === 'overridden' ? 'solid' : 'outline'\"\n      [attr.aria-pressed]=\"filter() === 'overridden'\"\n      (click)=\"setFilter('overridden')\"\n    >\n      {{ i18n.translationEditorOverridden }} · {{ overriddenTotal() }}\n    </button>\n    @for (s of stats(); track s.locale) {\n      @if (s.missing > 0) {\n        <button\n          mkButton\n          size=\"sm\"\n          tone=\"warning\"\n          [variant]=\"filter() === 'missing:' + s.locale ? 'solid' : 'outline'\"\n          [attr.aria-pressed]=\"filter() === 'missing:' + s.locale\"\n          (click)=\"setFilter('missing:' + s.locale)\"\n        >\n          {{ i18n.translationEditorMissing }} {{ s.locale.toUpperCase() }} · {{ s.missing }}\n        </button>\n      }\n    }\n  </div>\n  <span class=\"mk-translation-editor__count\">{{ rows().length }} {{ i18n.translationEditorKeys }}</span>\n  <button mkButton size=\"sm\" variant=\"ghost\" (click)=\"exportCsv()\">\n    <mk-icon name=\"download\" [size]=\"16\" />\n    {{ i18n.translationEditorExport }}\n  </button>\n</div>\n\n<mk-table\n  [columns]=\"columns()\"\n  [data]=\"rows()\"\n  density=\"compact\"\n  stickyHeader\n  virtual\n  [rowHeight]=\"44\"\n  class=\"mk-translation-editor__table\"\n>\n  <ng-template mkTableCell=\"key\" let-row=\"row\">\n    <code class=\"mk-translation-editor__key\">{{ row.key }}</code>\n  </ng-template>\n  @for (locale of locales(); track locale) {\n    <ng-template [mkTableCell]=\"locale\" let-row=\"row\">\n      <div\n        class=\"mk-translation-editor__cell\"\n        [class.mk-translation-editor__cell--overridden]=\"hasOverride(locale, row.key)\"\n        [class.mk-translation-editor__cell--missing]=\"isMissing(locale, row.key)\"\n      >\n        <mk-inline-edit\n          size=\"sm\"\n          [value]=\"row[locale]\"\n          [disabled]=\"readonly()\"\n          [placeholder]=\"isMissing(locale, row.key) ? i18n.translationEditorMissing : i18n.empty\"\n          [ariaLabel]=\"row.key + ' · ' + locale\"\n          (saved)=\"onSaved(locale, row.key, $event)\"\n        />\n        @if (hasOverride(locale, row.key) && !readonly()) {\n          <button\n            mkButton\n            variant=\"ghost\"\n            size=\"sm\"\n            iconOnly\n            class=\"mk-translation-editor__reset\"\n            [attr.aria-label]=\"i18n.translationEditorReset\"\n            [attr.title]=\"i18n.translationEditorReset\"\n            (click)=\"reset(locale, row.key)\"\n          >\n            <mk-icon name=\"undo\" [size]=\"16\" />\n          </button>\n        }\n      </div>\n    </ng-template>\n  }\n</mk-table>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mk-kit-ui.mjs

@@ -15,6 +15,7 @@ export * from '@mk-kit/ui/status';
 export * from '@mk-kit/ui/data';
 export * from '@mk-kit/ui/kanban';
 export * from '@mk-kit/ui/translate';
+export * from '@mk-kit/ui/attention';
 export * from '@mk-kit/ui/feedback';
 export * from '@mk-kit/ui/rich-text';
 export * from '@mk-kit/ui/block-editor';

package/fesm2022/mk-kit-ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/core/signal-forms';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/icon/extended';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/status';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/kanban';\nexport * from '@mk-kit/ui/translate';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/layout';\nexport * from '@mk-kit/ui/chat';\nexport * from '@mk-kit/ui/query-builder';\nexport * from '@mk-kit/ui/dynamic-form';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}
+{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/core/signal-forms';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/icon/extended';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/status';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/kanban';\nexport * from '@mk-kit/ui/translate';\nexport * from '@mk-kit/ui/attention';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/layout';\nexport * from '@mk-kit/ui/chat';\nexport * from '@mk-kit/ui/query-builder';\nexport * from '@mk-kit/ui/dynamic-form';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@mk-kit/ui",
-  "version": "0.55.1",
+  "version": "0.57.0",
+  "bin": {
+    "mk-translate": "./bin/mk-translate.mjs"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -36,7 +39,8 @@
     "@angular/core": "^22.0.0",
     "@angular/forms": "^22.0.0",
     "@angular/platform-browser": "^22.0.0",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "html5-qrcode": ">=2.3.0"
   },
   "dependencies": {
     "@mk-kit/core": "^0.1.0",
@@ -61,6 +65,10 @@
       "types": "./types/mk-kit-ui.d.ts",
       "default": "./fesm2022/mk-kit-ui.mjs"
     },
+    "./attention": {
+      "types": "./types/mk-kit-ui-attention.d.ts",
+      "default": "./fesm2022/mk-kit-ui-attention.mjs"
+    },
     "./block-editor": {
       "types": "./types/mk-kit-ui-block-editor.d.ts",
       "default": "./fesm2022/mk-kit-ui-block-editor.mjs"
@@ -165,6 +173,10 @@
       "types": "./types/mk-kit-ui-media.d.ts",
       "default": "./fesm2022/mk-kit-ui-media.mjs"
     },
+    "./media/scanner": {
+      "types": "./types/mk-kit-ui-media-scanner.d.ts",
+      "default": "./fesm2022/mk-kit-ui-media-scanner.mjs"
+    },
     "./navigation": {
       "types": "./types/mk-kit-ui-navigation.d.ts",
       "default": "./fesm2022/mk-kit-ui-navigation.mjs"
@@ -193,11 +205,20 @@
       "types": "./types/mk-kit-ui-translate.d.ts",
       "default": "./fesm2022/mk-kit-ui-translate.mjs"
     },
+    "./translate/editor": {
+      "types": "./types/mk-kit-ui-translate-editor.d.ts",
+      "default": "./fesm2022/mk-kit-ui-translate-editor.mjs"
+    },
     "./translate/server": {
       "types": "./types/mk-kit-ui-translate-server.d.ts",
       "default": "./fesm2022/mk-kit-ui-translate-server.mjs"
     }
   },
+  "peerDependenciesMeta": {
+    "html5-qrcode": {
+      "optional": true
+    }
+  },
   "module": "fesm2022/mk-kit-ui.mjs",
   "typings": "types/mk-kit-ui.d.ts",
   "type": "module"

package/types/mk-kit-ui-attention.d.ts

@@ -0,0 +1,223 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, OnDestroy, EnvironmentProviders } from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+
+/** Options for {@link MkTabAttention}, set with {@link provideMkTabAttention}. */
+interface MkTabAttentionConfig {
+    /** Badge fill colour (any CSS colour). Default `#e53935`. */
+    badgeColor?: string;
+    /** Title blink period in ms while the tab is hidden. Default `1200`. */
+    blinkMs?: number;
+}
+declare const MK_TAB_ATTENTION_CONFIG: InjectionToken<MkTabAttentionConfig>;
+/** Register options for {@link MkTabAttention}. Optional — the defaults work. */
+declare function provideMkTabAttention(config: MkTabAttentionConfig): {
+    provide: InjectionToken<MkTabAttentionConfig>;
+    useValue: MkTabAttentionConfig;
+};
+/**
+ * Messenger-style tab attention: while unhandled work exists the favicon
+ * carries a red counter badge, and — only while the tab is hidden — the
+ * title alternates with "(N) label" so a pinned tab flashes in the tab strip.
+ * Focusing the tab stops the blinking (someone is looking) but keeps the
+ * badge until the count reaches zero. SSR-safe: every entry point bails
+ * without a `document`; the blink timer runs outside the Angular zone.
+ *
+ * ```ts
+ * private attention = inject(MkTabAttention);
+ * effect(() => this.attention.set(this.pending().length, 'new orders'));
+ * ```
+ */
+declare class MkTabAttention {
+    private readonly zone;
+    private readonly config;
+    private label;
+    private originalTitle;
+    private originalFavicon;
+    private blinkTimer;
+    private showingAttention;
+    private listening;
+    private readonly visibilityHandler;
+    /** The count currently shown (0 = nothing pending). */
+    readonly count: i0.WritableSignal<number>;
+    /** Update the pending count and the label used in the blinking title. */
+    set(count: number, label?: string): void;
+    /** Drop the badge and the blinking entirely and stop listening. */
+    clear(): void;
+    private sync;
+    private startBlink;
+    private stopBlink;
+    private toggleTitle;
+    private restoreTitle;
+    private faviconLink;
+    private setFavicon;
+    private restoreFavicon;
+    /** Coloured circle + white count, as an inline SVG data URI. */
+    private badgeFavicon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MkTabAttention, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MkTabAttention>;
+}
+
+/** One selectable alert sound. `url: null` = the synthesised chime. */
+interface MkSoundPreset {
+    id: string;
+    label: string;
+    url: string | null;
+}
+/** Options for {@link MkNotificationSound}. */
+interface MkNotificationSoundConfig {
+    /** Selectable sounds; the ids `custom` and `none` are reserved. Default: the chime only. */
+    presets?: MkSoundPreset[];
+    /** localStorage key for the on/off preference — a function so it can vary per tenant / user. */
+    storageKey?: () => string;
+    /** Output gain for file presets (0–1). Default `0.8`. */
+    volume?: number;
+}
+declare const MK_NOTIFICATION_SOUND_CONFIG: InjectionToken<MkNotificationSoundConfig>;
+/** Register presets / storage key for {@link MkNotificationSound}. Optional. */
+declare function provideMkNotificationSound(config: MkNotificationSoundConfig): {
+    provide: InjectionToken<MkNotificationSoundConfig>;
+    useValue: MkNotificationSoundConfig;
+};
+/** The always-available synthesised sound. */
+declare const MK_CHIME_PRESET: MkSoundPreset;
+/**
+ * Alert sounds for incoming work (orders, messages, tickets) with the
+ * browser's autoplay rules handled: an `AudioContext` stays suspended until a
+ * user gesture, so a sound fired by a WebSocket message would be silent. The
+ * context is unlocked when the user enables sound (a click) and lazily on the
+ * first interaction anywhere in the app. The default sound is synthesised
+ * (a short C–E–G chime) — nothing to ship, no CORS, lowest latency; file
+ * presets are fetched and decoded once and fall back to the chime when they
+ * fail. The on/off preference lives in localStorage under a configurable key.
+ *
+ * ```ts
+ * provideMkNotificationSound({ presets: [MK_CHIME_PRESET, { id: 'ding', label: 'Ding', url: '/assets/ding.wav' }] })
+ * sound.primeOnFirstInteraction();          // at app start
+ * sound.play(settings.newOrderSound);       // on an event, honours the device mute
+ * sound.preview('ding');                    // settings page test button
+ * ```
+ */
+declare class MkNotificationSound {
+    private readonly config;
+    private ctx;
+    private gesturePrimed;
+    /** Decoded file presets by url; null = fetch/decode failed. */
+    private readonly buffers;
+    /** The selectable presets (always includes the chime). */
+    get presets(): MkSoundPreset[];
+    private storageKey;
+    /** Whether the device has sound on. */
+    isEnabled(): boolean;
+    /** Whether the user ever answered the "enable sound?" question on this device. */
+    hasBeenAsked(): boolean;
+    /** Persist the preference; call from a click so audio unlocks at once. */
+    setEnabled(enabled: boolean): void;
+    /** Arm a one-time listener so the first pointer/key interaction unlocks audio. */
+    primeOnFirstInteraction(): void;
+    /** The default chime, if the device has sound on. */
+    chime(): void;
+    /**
+     * Play the sound configured for an event: a preset id, `custom` (with
+     * `customUrl`) or `none` (silent). Unknown ids and failed loads fall back
+     * to the chime. Honours the device mute.
+     */
+    play(soundId: string, customUrl?: string | null): void;
+    /** Same as `play()` but ignores the device mute — for settings test buttons. */
+    preview(soundId: string, customUrl?: string | null): void;
+    private playById;
+    private playUrl;
+    /** Ascending C5–E5–G5 chime (~0.75 s) with a bell-like timbre. */
+    private playChime;
+    private scheduleNote;
+    private unlock;
+    private ensureCtx;
+    private read;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MkNotificationSound, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MkNotificationSound>;
+}
+
+/** Options for {@link provideMkSessionExpiry}. */
+interface MkSessionExpiryConfig {
+    /** Epoch ms when the session lapses, or `null` when there is none. Read reactively. */
+    expiresAt: () => number | null;
+    /** How long before the lapse the dialog appears. Default 2 minutes. */
+    warnBeforeMs?: number;
+    /** Extend the session (refresh the token). Resolve = extended, reject = nothing to extend. */
+    extend: () => Promise<unknown>;
+    /** End the session (sign out, navigate). */
+    onExpire: () => void;
+    /** Read reactively; `false` suspends the watcher (a kiosk / PIN mode, say). */
+    enabled?: () => boolean;
+}
+declare const MK_SESSION_EXPIRY_CONFIG: InjectionToken<MkSessionExpiryConfig>;
+/** Data handed to {@link MkSessionExpiryDialog}. */
+interface MkSessionExpiryDialogData {
+    expiresAt: number;
+    extend: () => Promise<unknown>;
+    onExpire: () => void;
+}
+/**
+ * Last call before a session ends: counts down and offers to extend.
+ * Reaching zero ends the session, so doing nothing still produces a definite,
+ * visible outcome. Opened by {@link MkSessionExpiry}; usable on its own.
+ */
+declare class MkSessionExpiryDialog implements OnDestroy {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly data;
+    private readonly ref;
+    private readonly zone;
+    protected readonly extending: i0.WritableSignal<boolean>;
+    private readonly remainingMs;
+    /** "1:04" — floored at zero. */
+    protected readonly countdown: i0.Signal<string>;
+    private readonly ticker;
+    ngOnDestroy(): void;
+    protected extend(): void;
+    protected signOut(): void;
+    private expire;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MkSessionExpiryDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MkSessionExpiryDialog, "mk-session-expiry-dialog", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Watches `expiresAt()` and warns BEFORE the session lapses, so a session
+ * never ends silently: the dialog offers to extend, or signs out at zero.
+ * Re-arms itself whenever `expiresAt()` changes (every token rotation),
+ * runs the timer outside the Angular zone and only in the browser. Started
+ * automatically by {@link provideMkSessionExpiry}.
+ */
+declare class MkSessionExpiry {
+    private readonly config;
+    private readonly dialog;
+    private readonly zone;
+    private readonly injector;
+    private readonly isBrowser;
+    private timer;
+    private started;
+    /** Whether the dialog is currently open. */
+    readonly open: i0.WritableSignal<boolean>;
+    constructor();
+    /** Begin watching. Idempotent; called by the provider's initializer. */
+    start(): void;
+    private clear;
+    private schedule;
+    private warn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MkSessionExpiry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MkSessionExpiry>;
+}
+/**
+ * Register the session-expiry watcher; it starts with the application.
+ *
+ * ```ts
+ * provideMkSessionExpiry({
+ *   expiresAt: () => auth.tokenExpiresAt(),
+ *   extend: () => firstValueFrom(auth.refresh()),
+ *   onExpire: () => auth.logout(),
+ *   warnBeforeMs: 2 * 60_000,
+ * })
+ * ```
+ */
+declare function provideMkSessionExpiry(config: MkSessionExpiryConfig): EnvironmentProviders;
+
+export { MK_CHIME_PRESET, MK_NOTIFICATION_SOUND_CONFIG, MK_SESSION_EXPIRY_CONFIG, MK_TAB_ATTENTION_CONFIG, MkNotificationSound, MkSessionExpiry, MkSessionExpiryDialog, MkTabAttention, provideMkNotificationSound, provideMkSessionExpiry, provideMkTabAttention };
+export type { MkNotificationSoundConfig, MkSessionExpiryConfig, MkSessionExpiryDialogData, MkSoundPreset, MkTabAttentionConfig };

package/types/mk-kit-ui-core.d.ts

@@ -771,6 +771,25 @@ interface MkI18nStrings {
     noResults: string;
     /** Empty data table / list. */
     noData: string;
+    /** Translation editor (`@mk-kit/ui/translate/editor`). */
+    translationEditorSearch: string;
+    translationEditorAll: string;
+    translationEditorOverridden: string;
+    translationEditorMissing: string;
+    translationEditorKey: string;
+    translationEditorReset: string;
+    translationEditorExport: string;
+    translationEditorKeys: string;
+    /** Session-expiry dialog (`@mk-kit/ui/attention`). */
+    sessionExpiryTitle: string;
+    sessionExpiryExtend: string;
+    sessionExpiryExtending: string;
+    sessionExpiryLogout: string;
+    sessionExpiryBody: (countdown: string) => string;
+    /** Barcode scanner (`@mk-kit/ui/media/scanner`). */
+    scannerTitle: string;
+    scannerHint: string;
+    scannerCameraError: string;
     /** Announced when a filterable list updates (autocomplete, multi-select, command palette). */
     resultsCount: (count: number) => string;
     /** Pagination: previous page control. */

package/types/mk-kit-ui-media-scanner.d.ts

@@ -0,0 +1,74 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkOverlayRef } from '@mk-kit/ui/core';
+
+/** Symbologies the scanner reads; names follow `Html5QrcodeSupportedFormats`. */
+type MkBarcodeFormat = 'QR_CODE' | 'EAN_13' | 'EAN_8' | 'CODE_128' | 'CODE_39' | 'UPC_A' | 'UPC_E' | 'DATA_MATRIX' | 'ITF' | 'CODABAR';
+declare const MK_BARCODE_DEFAULT_FORMATS: MkBarcodeFormat[];
+/**
+ * Camera barcode / QR reader. Starts the rear camera when it appears, emits
+ * `scanned` once with the first decoded text and stops. The decoder
+ * (`html5-qrcode`, an optional peer dependency) is loaded on demand, so pages
+ * that only *offer* scanning ship nothing extra until a scan starts. Use
+ * inline, or through {@link MkBarcodeScannerDialog}.
+ *
+ * ```html
+ * <mk-barcode-scanner (scanned)="onCode($event)" (failed)="show($event)" />
+ * ```
+ */
+declare class MkBarcodeScanner implements AfterViewInit, OnDestroy {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly readerEl;
+    /** Symbologies to decode. Default: QR + the retail 1-D codes. */
+    readonly formats: _angular_core.InputSignal<MkBarcodeFormat[]>;
+    /** Frames per second offered to the decoder. Default 10. */
+    readonly fps: _angular_core.InputSignal<number>;
+    /** Show the built-in hint line above the viewfinder. Default `true`. */
+    readonly hint: _angular_core.InputSignal<boolean>;
+    /** Keep scanning after a hit instead of stopping. Default `false`. */
+    readonly continuous: _angular_core.InputSignal<boolean>;
+    /** Decoded text. */
+    readonly scanned: _angular_core.OutputEmitterRef<string>;
+    /** The camera could not start (permission, no device, insecure context). */
+    readonly failed: _angular_core.OutputEmitterRef<string>;
+    protected readonly error: _angular_core.WritableSignal<string | null>;
+    protected readonly scanning: _angular_core.WritableSignal<boolean>;
+    private scanner;
+    private destroyed;
+    private lastHit;
+    ngAfterViewInit(): Promise<void>;
+    ngOnDestroy(): void;
+    /** Stop the camera and release it. Safe to call twice. */
+    stop(): Promise<void>;
+    private onHit;
+    private fail;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBarcodeScanner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBarcodeScanner, "mk-barcode-scanner", never, { "formats": { "alias": "formats"; "required": false; "isSignal": true; }; "fps": { "alias": "fps"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "continuous": { "alias": "continuous"; "required": false; "isSignal": true; }; }, { "scanned": "scanned"; "failed": "failed"; }, never, never, true, never>;
+}
+
+/** Optional data for {@link MkBarcodeScannerDialog}. */
+interface MkBarcodeScannerDialogData {
+    title?: string;
+    formats?: MkBarcodeFormat[];
+}
+/**
+ * The scanner in a dialog: resolves with the decoded text, or `null` when
+ * cancelled. Open it with `MkDialogService`:
+ *
+ * ```ts
+ * const code = await dialog.open<MkBarcodeScannerDialog, string | null>(MkBarcodeScannerDialog, { size: 'sm' }).afterClosed;
+ * if (code) this.search.setValue(code);
+ * ```
+ */
+declare class MkBarcodeScannerDialog {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    protected readonly data: MkBarcodeScannerDialogData | null;
+    protected readonly ref: MkOverlayRef<string | null, unknown>;
+    protected readonly defaultFormats: MkBarcodeFormat[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBarcodeScannerDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBarcodeScannerDialog, "mk-barcode-scanner-dialog", never, {}, {}, never, never, true, never>;
+}
+
+export { MK_BARCODE_DEFAULT_FORMATS, MkBarcodeScanner, MkBarcodeScannerDialog };
+export type { MkBarcodeFormat, MkBarcodeScannerDialogData };