@mk-kit/ui 0.46.0 → 0.48.0

package/schematics/crud/index.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.crud = crud;
+/**
+ * `ng g @mk-kit/ui:crud <entity>`
+ *
+ * Generates a working CRUD slice for one entity: a model file (interface +
+ * table columns + dynamic-form schema as the single source of truth), a data
+ * service (in-memory, or HttpClient with `--api`), a list page (`mk-table` +
+ * `MkTableDataSource` + search + pagination + delete confirm), a form page
+ * (`mk-dynamic-form` for create and edit), lazy routes, and a harness-driven
+ * spec — then wires the routes into the application's route table.
+ */
+const schematics_1 = require("@angular-devkit/schematics");
+const utility_1 = require("@schematics/angular/utility");
+const files_1 = require("./files");
+const model_1 = require("./model");
+/** Entry point referenced from collection.json (`./crud/index#crud`). */
+function crud(options) {
+    return async (tree, context) => {
+        const entity = (0, model_1.buildEntity)(options.entity, options.fields ?? 'name!:string', options.plural);
+        const appDir = options.path?.replace(/\/+$/, '') ?? (await defaultAppDir(tree, options.project));
+        const targetDir = `${appDir}/${entity.pluralFile}`;
+        const files = (0, files_1.crudFiles)(entity, { api: options.api || undefined, spec: options.spec !== false });
+        for (const [name, content] of files) {
+            const filePath = `${targetDir}/${name}`;
+            if (tree.exists(filePath)) {
+                throw new schematics_1.SchematicsException(`${filePath} already exists — delete the previous slice or generate under a different --path.`);
+            }
+            tree.create(filePath, content);
+        }
+        if (options.route !== false) {
+            wireRoute(tree, context, appDir, targetDir, entity.pluralFile, (0, files_1.routesConstName)(entity));
+        }
+        logNextSteps(context, targetDir, entity.pluralFile, !!options.api);
+    };
+}
+/** `<sourceRoot>/app` of the target (or first application) project. */
+async function defaultAppDir(tree, requested) {
+    const workspace = await (0, utility_1.readWorkspace)(tree);
+    let project = requested ? workspace.projects.get(requested) : undefined;
+    if (requested && !project) {
+        throw new schematics_1.SchematicsException(`Project "${requested}" was not found in the workspace. ` +
+            `Available projects: ${[...workspace.projects.keys()].join(', ') || '(none)'}.`);
+    }
+    if (!project) {
+        for (const candidate of workspace.projects.values()) {
+            if (candidate.extensions['projectType'] === 'application') {
+                project = candidate;
+                break;
+            }
+        }
+    }
+    if (!project) {
+        throw new schematics_1.SchematicsException('No application project found in the workspace. Pass --project or --path explicitly.');
+    }
+    const sourceRoot = (project.sourceRoot ?? `${project.root}/src`).replace(/\/+$/, '');
+    return `${sourceRoot}/app`;
+}
+/**
+ * Inserts a lazy route into the app's route table. Looks for `app.routes.ts`
+ * beside the target directory (then anywhere under it) and prepends a
+ * `loadChildren` entry to the first `Routes = [` array. When the file or the
+ * array cannot be found, prints the entry to add manually instead of failing
+ * the whole generation.
+ */
+function wireRoute(tree, context, appDir, targetDir, routePath, constName) {
+    const entry = `{\n    path: '${routePath}',\n    loadChildren: () =>\n` +
+        `      import('./${routePath}/${routePath}.routes').then((m) => m.${constName}),\n  },`;
+    const routesFilePath = findRoutesFile(tree, appDir);
+    if (!routesFilePath) {
+        context.logger.warn(`Could not find an app.routes.ts under ${appDir} — add the route yourself:`);
+        context.logger.warn(`  ${entry}`);
+        return;
+    }
+    const source = tree.read(routesFilePath).toString('utf-8');
+    const match = /(:\s*Routes\s*=\s*\[)/.exec(source);
+    if (!match) {
+        context.logger.warn(`${routesFilePath} has no \`Routes = [\` array — add the route yourself:`);
+        context.logger.warn(`  ${entry}`);
+        return;
+    }
+    if (source.includes(`path: '${routePath}'`)) {
+        context.logger.warn(`${routesFilePath} already routes '${routePath}' — left untouched.`);
+        return;
+    }
+    const relative = relativeImportDir(routesFilePath, targetDir);
+    const adjusted = entry.replace(`./${routePath}/`, `${relative}/`);
+    const at = match.index + match[1].length;
+    tree.overwrite(routesFilePath, `${source.slice(0, at)}\n  ${adjusted}${source.slice(at)}`);
+    context.logger.info(`Routed '${routePath}' in ${routesFilePath}.`);
+}
+/**
+ * `app.routes.ts` in `appDir` or any of its ancestors (a `--path` deep in the
+ * app still wires the app-level table), else the first one anywhere below.
+ */
+function findRoutesFile(tree, appDir) {
+    const segments = appDir.split('/').filter(Boolean);
+    for (let i = segments.length; i >= 0; i--) {
+        const candidate = `${segments.slice(0, i).join('/')}/app.routes.ts`.replace(/^\//, '');
+        if (tree.exists(candidate))
+            return candidate;
+    }
+    let found = null;
+    tree.getDir(appDir).visit((filePath) => {
+        if (!found && filePath.endsWith('/app.routes.ts'))
+            found = filePath;
+    });
+    return found;
+}
+/** Relative import (no extension) from the routes file's directory to `dir`. */
+function relativeImportDir(fromFile, dir) {
+    const from = fromFile.split('/').filter(Boolean).slice(0, -1);
+    const to = dir.split('/').filter(Boolean);
+    let common = 0;
+    while (common < from.length && common < to.length && from[common] === to[common])
+        common++;
+    const up = from.length - common;
+    const down = to.slice(common).join('/');
+    if (up === 0)
+        return `./${down}`;
+    return `${'../'.repeat(up)}${down}`.replace(/\/$/, '');
+}
+function logNextSteps(context, targetDir, routePath, api) {
+    context.logger.info('');
+    context.logger.info(`CRUD slice generated in ${targetDir}/ — visit /${routePath} to use it.`);
+    if (api) {
+        context.logger.info('  - The service uses HttpClient: make sure provideHttpClient() is in your app config.');
+    }
+    else {
+        context.logger.info('  - The service is in-memory; swap its method bodies for API calls when ready.');
+    }
+    context.logger.info(`  - Columns and the form schema live in the model file — one place to grow the entity.`);
+}

package/schematics/crud/model.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CRUD_FIELD_TYPES = void 0;
+exports.classify = classify;
+exports.camelize = camelize;
+exports.dasherize = dasherize;
+exports.pluralize = pluralize;
+exports.humanize = humanize;
+exports.parseFields = parseFields;
+exports.buildEntity = buildEntity;
+exports.tsType = tsType;
+/**
+ * Entity model of the `crud` schematic: the parsed `--fields` grammar plus
+ * the naming derivations every generated file shares.
+ *
+ * Field grammar (comma-separated): `key:type`, `key!:type` (required),
+ * `key:select=a|b|c` (options). Example:
+ * `name!:string,price:currency,status:select=active|archived,createdAt:date`.
+ */
+const schematics_1 = require("@angular-devkit/schematics");
+/** Field kinds the generator understands (a practical subset of the dynamic-form types). */
+exports.CRUD_FIELD_TYPES = [
+    'string',
+    'textarea',
+    'email',
+    'url',
+    'number',
+    'currency',
+    'boolean',
+    'date',
+    'datetime',
+    'select',
+    'tags',
+];
+/** Split an identifier into lower-case words: camelCase, snake_case, dash-case, spaces. */
+function words(name) {
+    return name
+        .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+        .split(/[\s_-]+/)
+        .filter(Boolean)
+        .map((w) => w.toLowerCase());
+}
+function classify(name) {
+    return words(name)
+        .map((w) => w[0].toUpperCase() + w.slice(1))
+        .join('');
+}
+function camelize(name) {
+    const c = classify(name);
+    return c ? c[0].toLowerCase() + c.slice(1) : c;
+}
+function dasherize(name) {
+    return words(name).join('-');
+}
+/** Naive English pluralizer — `--plural` overrides it when it guesses wrong. */
+function pluralize(word) {
+    if (/(s|x|z|ch|sh)$/i.test(word))
+        return `${word}es`;
+    if (/[^aeiou]y$/i.test(word))
+        return `${word.slice(0, -1)}ies`;
+    return `${word}s`;
+}
+/** `createdAt` → `Created at`. */
+function humanize(key) {
+    const ws = words(key);
+    if (!ws.length)
+        return key;
+    return [ws[0][0].toUpperCase() + ws[0].slice(1), ...ws.slice(1)].join(' ');
+}
+/** Parse one `key[!]:type[=a|b|c]` segment. */
+function parseField(segment) {
+    const match = /^\s*([A-Za-z][A-Za-z\d_-]*)(!?)\s*(?::\s*([A-Za-z-]+)\s*(?:=\s*([^,]+))?)?\s*$/.exec(segment);
+    if (!match) {
+        throw new schematics_1.SchematicsException(`Cannot parse field "${segment.trim()}". Expected "key:type", "key!:type" or "key:select=a|b|c".`);
+    }
+    const [, rawKey, bang, rawType = 'string', rawOptions] = match;
+    const type = rawType.toLowerCase();
+    if (!exports.CRUD_FIELD_TYPES.includes(type)) {
+        throw new schematics_1.SchematicsException(`Unknown field type "${rawType}" in "${segment.trim()}". Valid types: ${exports.CRUD_FIELD_TYPES.join(', ')}.`);
+    }
+    const options = rawOptions
+        ? rawOptions
+            .split('|')
+            .map((o) => o.trim())
+            .filter(Boolean)
+        : [];
+    if (type === 'select' && !options.length) {
+        throw new schematics_1.SchematicsException(`Field "${rawKey}" is a select but lists no options. Write it as "${rawKey}:select=draft|published".`);
+    }
+    if (type !== 'select' && options.length) {
+        throw new schematics_1.SchematicsException(`Only select fields take "=a|b|c" options (field "${rawKey}").`);
+    }
+    const key = camelize(rawKey);
+    return { key, type, required: bang === '!', options, label: humanize(key) };
+}
+/** Parse the `--fields` option into an ordered, key-unique field list. */
+function parseFields(spec) {
+    const fields = spec
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+        .map(parseField);
+    if (!fields.length) {
+        throw new schematics_1.SchematicsException('At least one field is required, e.g. --fields "name!:string".');
+    }
+    const seen = new Set();
+    for (const f of fields) {
+        if (f.key === 'id') {
+            throw new schematics_1.SchematicsException('The "id" field is added automatically — remove it from --fields.');
+        }
+        if (seen.has(f.key))
+            throw new schematics_1.SchematicsException(`Duplicate field key "${f.key}".`);
+        seen.add(f.key);
+    }
+    return fields;
+}
+/** Derive every name the generated files need from the entity option. */
+function buildEntity(name, fieldsSpec, plural) {
+    if (!/^[A-Za-z][A-Za-z\d_-]*$/.test(name)) {
+        throw new schematics_1.SchematicsException(`"${name}" is not a valid entity name — use letters/digits like "product" or "OrderLine".`);
+    }
+    const propertyName = camelize(name);
+    const pluralProperty = plural ? camelize(plural) : pluralize(propertyName);
+    return {
+        className: classify(name),
+        propertyName,
+        fileName: dasherize(name),
+        pluralProperty,
+        pluralFile: dasherize(plural ?? pluralize(dasherize(name))),
+        constName: words(name).join('_').toUpperCase(),
+        human: words(name).join(' '),
+        humanPlural: words(plural ?? pluralize(propertyName)).join(' '),
+        fields: parseFields(fieldsSpec),
+    };
+}
+/** TypeScript type of one field on the entity interface. */
+function tsType(field) {
+    switch (field.type) {
+        case 'number':
+        case 'currency':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'select':
+            return field.options.map((o) => `'${o.replace(/'/g, "\\'")}'`).join(' | ');
+        case 'date':
+        case 'datetime':
+            // What mk-date-picker / mk-datetime-picker controls hold.
+            return 'Date | null';
+        case 'tags':
+            return 'string[]';
+        default:
+            // string, textarea, email, url.
+            return 'string';
+    }
+}

package/schematics/crud/schema.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "MkKitCrud",
+  "title": "@mk-kit/ui crud schematic",
+  "type": "object",
+  "properties": {
+    "entity": {
+      "type": "string",
+      "description": "Singular entity name, e.g. \"product\" or \"OrderLine\".",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "fields": {
+      "type": "string",
+      "default": "name!:string",
+      "description": "Comma-separated fields as key:type — \"!\" marks required, selects take options: \"name!:string,price:currency,status:select=draft|published,createdAt:date\". Types: string, textarea, email, url, number, currency, boolean, date, datetime, select, tags."
+    },
+    "plural": {
+      "type": "string",
+      "description": "Plural override when the naive pluralizer guesses wrong (e.g. --plural people)."
+    },
+    "api": {
+      "type": "string",
+      "description": "REST base URL (e.g. /api/products). Set: the service uses HttpClient; unset: an in-memory store that runs immediately."
+    },
+    "path": {
+      "type": "string",
+      "description": "Directory the entity folder is created in. Default: the application's src/app."
+    },
+    "project": {
+      "type": "string",
+      "description": "Workspace project to target. Default: the first application project."
+    },
+    "route": {
+      "type": "boolean",
+      "default": true,
+      "description": "Wire a lazy route into the application's app.routes.ts."
+    },
+    "spec": {
+      "type": "boolean",
+      "default": true,
+      "description": "Generate a harness-driven spec for the pages."
+    }
+  },
+  "required": ["entity"]
+}

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

@@ -271,6 +271,33 @@ declare class MkOverlayRef<TResult = unknown, TComponent = unknown> {
     close(result?: TResult): void;
 }
 
+/**
+ * Resolves the element overlay surfaces are appended to. A function (not an
+ * element) because the root may be created lazily, after DI is set up.
+ */
+type MkOverlayRootFn = () => HTMLElement;
+/**
+ * Where mk-kit mounts everything that leaves the component tree: overlay
+ * containers (dialogs), anchored panels (selects, menus, tooltips), toast /
+ * snackbar containers and the tour surfaces. Defaults to `document.body`.
+ *
+ * Override it to confine those surfaces to another element — `@mk-kit/ui/embed`
+ * points it at a themed shadow-DOM host so overlays opened by embedded custom
+ * elements stay isolated from the host page's stylesheet:
+ *
+ * ```ts
+ * { provide: MK_OVERLAY_ROOT, useValue: () => myOverlayHost }
+ * ```
+ */
+declare const MK_OVERLAY_ROOT: InjectionToken<MkOverlayRootFn>;
+/**
+ * The direct child of `document.body` an overlay-root descendant lives under,
+ * crossing shadow boundaries on the way up — `null` when the node is not under
+ * `body` at all. The overlay service uses it to keep the overlay's own host
+ * out of the elements it makes `inert` behind a modal.
+ */
+declare function mkBodyLevelAncestor(node: Node, body: HTMLElement): Element | null;
+
 interface MkOverlayConfig<TData = unknown> {
     /** Arbitrary data injected via `MK_OVERLAY_DATA`. */
     data?: TData;
@@ -308,6 +335,7 @@ declare class MkOverlayService implements OnDestroy {
     private readonly appRef;
     private readonly envInjector;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     /** Reference count for the body scroll lock (first open locks, last close unlocks). */
     private openOverlays;
@@ -417,6 +445,7 @@ declare function mkComputeAnchoredPosition(anchor: MkRectLike, panel: MkSize, vi
 declare class MkAnchoredPanel implements AfterViewInit, OnDestroy {
     private readonly host;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     /** The trigger element to position against. */
     readonly anchor: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | undefined>;
@@ -1489,5 +1518,5 @@ declare function mkQueryOperatorLabel(op: MkQueryOperator, i18n?: MkI18nStrings)
  */
 declare function mkQueryToText(group: MkQueryGroup, fields?: readonly MkQueryField[], i18n?: MkI18nStrings): string;
 
-export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkInjectFieldTouched, mkIsQueryGroup, mkIsResponsive, mkMergeI18n, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkSignalErrorMessage, mkSignalErrorsToValidationErrors, mkUniqueId, mkValidatorChange, provideMkI18n };
-export type { MkAnchoredPosition, MkAnchoredPositionOptions, MkAriaLivePoliteness, MkBlockEditorStrings, MkBreakpoint, MkBreakpoints, MkCodeLanguage, MkContrastPreference, MkDateNames, MkDensity, MkErrorMessages, MkI18nOverrides, MkI18nStrings, MkOverlayConfig, MkPlacement, MkQueryCombinator, MkQueryField, MkQueryFieldOption, MkQueryGroup, MkQueryNode, MkQueryOperator, MkQueryRule, MkQueryValueType, MkResolvedContrast, MkResolvedTheme, MkResponsive, MkSignalValidationError, MkSize$1 as MkSize, MkSortAnnounceDirection, MkThemePreference, MkTone, MkValidationStrings, MkValidatorChangeRef, MkVariant };
+export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_OVERLAY_ROOT, MK_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkBodyLevelAncestor, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkInjectFieldTouched, mkIsQueryGroup, mkIsResponsive, mkMergeI18n, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkSignalErrorMessage, mkSignalErrorsToValidationErrors, mkUniqueId, mkValidatorChange, provideMkI18n };
+export type { MkAnchoredPosition, MkAnchoredPositionOptions, MkAriaLivePoliteness, MkBlockEditorStrings, MkBreakpoint, MkBreakpoints, MkCodeLanguage, MkContrastPreference, MkDateNames, MkDensity, MkErrorMessages, MkI18nOverrides, MkI18nStrings, MkOverlayConfig, MkOverlayRootFn, MkPlacement, MkQueryCombinator, MkQueryField, MkQueryFieldOption, MkQueryGroup, MkQueryNode, MkQueryOperator, MkQueryRule, MkQueryValueType, MkResolvedContrast, MkResolvedTheme, MkResponsive, MkSignalValidationError, MkSize$1 as MkSize, MkSortAnnounceDirection, MkThemePreference, MkTone, MkValidationStrings, MkValidatorChangeRef, MkVariant };

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

@@ -0,0 +1,124 @@
+import { Provider, EnvironmentProviders, Type, ApplicationRef } from '@angular/core';
+
+/**
+ * Rewrites a document-level stylesheet for adoption into a shadow root:
+ * `:root` never matches inside one, so token blocks like mk-kit's
+ * `:root { --mk-primary: … }` are retargeted to `:host`. Theme opt-ins keep
+ * working — `:root:not([data-mk-theme='light'])` becomes
+ * `:host:not([data-mk-theme='light'])`, so `<my-widget data-mk-theme="dark">`
+ * switches one embedded element to the dark palette.
+ *
+ * ```ts
+ * import themeCss from '@mk-kit/ui/styles.css' with { type: 'text' };
+ * mkEmbed({ styles: mkShadowCss(themeCss) });
+ * ```
+ */
+declare function mkShadowCss(css: string): string;
+
+/** Options for {@link mkEmbed}. */
+interface MkEmbedInit {
+    /**
+     * CSS text adopted into every element's shadow root (and the overlay host).
+     * Pass the mk-kit theme through {@link mkShadowCss} so its `:root` token
+     * blocks target `:host`; append your own widget CSS after it. Shared as
+     * constructable stylesheets when the browser supports them (one parse for
+     * any number of instances), `<style>` elements otherwise.
+     */
+    styles?: string | readonly string[];
+    /**
+     * Extra providers for the shared application — `provideMkI18n(…)`,
+     * `provideMkExtendedIcons()`, `provideHttpClient()`, your services.
+     */
+    providers?: Array<Provider | EnvironmentProviders>;
+    /**
+     * Mount mk-kit overlays (dialogs, anchored panels, toasts, tours) inside a
+     * page-level shadow host that carries the same `styles`, instead of bare
+     * `document.body`. Default `true`; set `false` to keep the application
+     * default (overlays styled by the page's own stylesheets).
+     */
+    overlays?: boolean;
+}
+/**
+ * Creates an embed application: a factory for custom elements that render
+ * mk-kit-based Angular components behind shadow DOM.
+ *
+ * - **Lazy**: `element()` only defines the tag; the Angular application is
+ *   created on the first element actually connected to a document.
+ * - **Shared**: every element of one `mkEmbed()` call runs in one zoneless
+ *   `ApplicationRef` with one provider set.
+ * - **Isolated but themable**: the host page's CSS cannot reach the widget
+ *   internals, while `--mk-*` custom properties still inherit through the
+ *   shadow boundary — set them on the element (or any ancestor) to theme it.
+ * - **Styled**: Angular routes each component's own styles into the shadow
+ *   root it renders in; the `styles` option supplies the token/theme layer.
+ *
+ * ```ts
+ * import { mkEmbed, mkShadowCss } from '@mk-kit/ui/embed';
+ * import themeCss from '@mk-kit/ui/styles.css' with { type: 'text' };
+ *
+ * mkEmbed({ styles: mkShadowCss(themeCss) })
+ *   .element('acme-reviews', ReviewsWidget)
+ *   .element('acme-signup', SignupWidget);
+ * ```
+ *
+ * ```html
+ * <acme-reviews product-id="42" style="--mk-primary: #7c3aed"></acme-reviews>
+ * ```
+ *
+ * Inputs are exposed as dash-cased attributes (string values go through the
+ * input's `transform`, so `booleanAttribute` / `numberAttribute` inputs coerce
+ * as usual) and as camel-cased element properties (any value); outputs become
+ * bubbling, composed `CustomEvent`s named after the output, with the emitted
+ * value as `detail`.
+ */
+declare function mkEmbed(init?: MkEmbedInit): MkEmbedApp;
+/** One shared embed application. Create it with {@link mkEmbed}. */
+declare class MkEmbedApp {
+    /** @internal Adopted into every shadow root this app renders in. */
+    readonly _mkStyles: MkEmbedStyles;
+    private readonly init;
+    private appPromise;
+    private appRef;
+    private overlayHost;
+    private overlayInner;
+    private destroyed;
+    constructor(init?: MkEmbedInit);
+    /**
+     * Defines `tag` as a custom element rendering `component`. Chainable; a
+     * no-op when the tag is already defined (hot reload, duplicate script) or
+     * outside a browser.
+     */
+    element(tag: string, component: Type<unknown>): this;
+    /** Resolves when the shared application is running (created on demand). */
+    ready(): Promise<void>;
+    /** Resolves when the application has no pending change detection. */
+    whenStable(): Promise<void>;
+    /**
+     * Destroys the shared application, every mounted component and the overlay
+     * host. Defined tags remain registered (the platform cannot undefine them)
+     * but render nothing afterwards.
+     */
+    destroy(): void;
+    /** @internal */
+    _mkApplication(): Promise<ApplicationRef>;
+    /** @internal The running application — only valid once `ready()` resolved. */
+    get _mkAppRef(): ApplicationRef;
+    /**
+     * Lazily builds the page-level overlay host: a shadow root carrying the
+     * embed styles, with an inner container the overlay services append to.
+     */
+    private overlayRootElement;
+}
+/**
+ * The embed styles, parsed once and shared: constructable stylesheets where
+ * supported, cloned `<style>` elements otherwise.
+ */
+declare class MkEmbedStyles {
+    private readonly css;
+    private sheets;
+    constructor(css: readonly string[]);
+    adopt(root: ShadowRoot): void;
+}
+
+export { MkEmbedApp, mkEmbed, mkShadowCss };
+export type { MkEmbedInit };

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

@@ -78,6 +78,7 @@ declare class MkTooltip {
     private readonly appRef;
     private readonly envInjector;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     /** Set by pointerdown so the focusin it causes doesn't re-open the tip. */
     private suppressFocusShow;
@@ -780,6 +781,7 @@ declare class MkToastService {
     private readonly appRef;
     private readonly envInjector;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     private readonly _toasts;
     /** Reactive list of currently visible toasts. */
@@ -919,6 +921,7 @@ declare class MkSnackbarService {
     private readonly appRef;
     private readonly envInjector;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     private readonly _active;
     /** The currently visible snackbar, or `null`. */
@@ -1255,6 +1258,7 @@ declare class MkTourService {
     private readonly appRef;
     private readonly envInjector;
     private readonly document;
+    private readonly overlayRoot;
     private readonly isBrowser;
     private readonly _steps;
     private readonly _index;

package/types/mk-kit-ui-locales-de.d.ts

@@ -0,0 +1,40 @@
+import { Provider } from '@angular/core';
+import { MkBlockEditorStrings, MkDateNames, MkI18nStrings, MkValidationStrings, MkI18nOverrides } from '@mk-kit/ui/core';
+
+/**
+ * Picks the German plural form for a count — CLDR's `de` rules for integers:
+ * `one` for 1, `other` for everything else.
+ *
+ * ```ts
+ * mkPluralDe(1, 'Ergebnis', 'Ergebnisse'); // 'Ergebnis'
+ * mkPluralDe(3, 'Ergebnis', 'Ergebnisse'); // 'Ergebnisse'
+ * ```
+ */
+declare function mkPluralDe(count: number, one: string, other: string): string;
+/** German month and weekday names (Sunday-first, as in `Intl`). */
+declare const MK_DE_DATE_NAMES: MkDateNames;
+/** German validation messages rendered by `mk-form-field`. */
+declare const MK_DE_VALIDATION: MkValidationStrings;
+/** German strings of the block editor's chrome. */
+declare const MK_DE_BLOCK_EDITOR: MkBlockEditorStrings;
+/**
+ * The complete German string map — every key of {@link MkI18nStrings},
+ * `locale: 'de-DE'` and `currency: 'EUR'` for the formatting pipes.
+ * Provide it whole with {@link provideMkI18nDe}, or pass it as the base of
+ * `provideMkI18n(overrides, MK_DE_I18N)`.
+ */
+declare const MK_DE_I18N: MkI18nStrings;
+/**
+ * Provides the German strings — {@link MK_DE_I18N} with any `overrides`
+ * merged on top (deep for `dateNames`, `blockEditor` and `validation`, like
+ * `provideMkI18n`).
+ *
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideMkI18nDe({ noData: 'Nichts zu sehen' })],
+ * });
+ * ```
+ */
+declare function provideMkI18nDe(overrides?: MkI18nOverrides): Provider;
+
+export { MK_DE_BLOCK_EDITOR, MK_DE_DATE_NAMES, MK_DE_I18N, MK_DE_VALIDATION, mkPluralDe, provideMkI18nDe };

package/types/mk-kit-ui-locales-es.d.ts

@@ -0,0 +1,40 @@
+import { Provider } from '@angular/core';
+import { MkBlockEditorStrings, MkDateNames, MkI18nStrings, MkValidationStrings, MkI18nOverrides } from '@mk-kit/ui/core';
+
+/**
+ * Picks the Spanish plural form for a count — CLDR's `es` rules for integers:
+ * `one` for 1, `other` for everything else.
+ *
+ * ```ts
+ * mkPluralEs(1, 'resultado', 'resultados'); // 'resultado'
+ * mkPluralEs(3, 'resultado', 'resultados'); // 'resultados'
+ * ```
+ */
+declare function mkPluralEs(count: number, one: string, other: string): string;
+/** Spanish month and weekday names (Sunday-first, lowercase as in `Intl`). */
+declare const MK_ES_DATE_NAMES: MkDateNames;
+/** Spanish validation messages rendered by `mk-form-field`. */
+declare const MK_ES_VALIDATION: MkValidationStrings;
+/** Spanish strings of the block editor's chrome. */
+declare const MK_ES_BLOCK_EDITOR: MkBlockEditorStrings;
+/**
+ * The complete Spanish string map — every key of {@link MkI18nStrings},
+ * `locale: 'es-ES'` and `currency: 'EUR'` for the formatting pipes.
+ * Provide it whole with {@link provideMkI18nEs}, or pass it as the base of
+ * `provideMkI18n(overrides, MK_ES_I18N)`.
+ */
+declare const MK_ES_I18N: MkI18nStrings;
+/**
+ * Provides the Spanish strings — {@link MK_ES_I18N} with any `overrides`
+ * merged on top (deep for `dateNames`, `blockEditor` and `validation`, like
+ * `provideMkI18n`).
+ *
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideMkI18nEs({ noData: 'No hay nada aquí' })],
+ * });
+ * ```
+ */
+declare function provideMkI18nEs(overrides?: MkI18nOverrides): Provider;
+
+export { MK_ES_BLOCK_EDITOR, MK_ES_DATE_NAMES, MK_ES_I18N, MK_ES_VALIDATION, mkPluralEs, provideMkI18nEs };