@mk-kit/ui 0.34.0

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

@@ -0,0 +1,2158 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, computed, Injectable, input, booleanAttribute, output, ChangeDetectionStrategy, Component, viewChild, DOCUMENT, ElementRef, DestroyRef, model, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@mk-kit/ui/core';
+import { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { MkRichTextEngine, sanitizeInlineHtml } from '@mk-kit/ui/rich-text';
+export { sanitizeInlineHtml } from '@mk-kit/ui/rich-text';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Block document model for the mk-kit block editor.
+ *
+ * The model is deliberately small and 100% JSON-serialisable so a document can
+ * be persisted to a database, sent over the wire, and re-hydrated without any
+ * class instances or functions. All editor state lives in these plain objects.
+ */
+/** Current document schema version. */
+const MK_BLOCK_DOCUMENT_VERSION = 1;
+/** An empty, valid document. */
+function mkEmptyDocument() {
+    return { version: MK_BLOCK_DOCUMENT_VERSION, blocks: [] };
+}
+let blockCounter = 0;
+/**
+ * Generates a reasonably unique, JSON-safe block id. Combines a monotonic
+ * counter with a short random suffix so ids are unique even across documents
+ * merged at runtime.
+ */
+function mkBlockId(prefix = 'blk') {
+    const rand = Math.random().toString(36).slice(2, 8);
+    return `${prefix}-${++blockCounter}-${rand}`;
+}
+/** Deep-clones a block (and its subtree), assigning fresh ids. */
+function mkCloneBlock(block) {
+    return {
+        id: mkBlockId(block.type),
+        type: block.type,
+        data: structuredCloneSafe(block.data),
+        children: block.children?.map(mkCloneBlock),
+    };
+}
+/** Structured clone with a JSON fallback for older runtimes. */
+function structuredCloneSafe(value) {
+    try {
+        return structuredClone(value);
+    }
+    catch {
+        return JSON.parse(JSON.stringify(value ?? null));
+    }
+}
+
+/** Convenience factory: builds a `create()`-ready block with fresh id. */
+function block$1(type, data = {}, children) {
+    return { id: mkBlockId(type), type, data, ...(children ? { children } : {}) };
+}
+/**
+ * The default palette of built-in block definitions. Grouped for the inserter.
+ * Consumers can spread this and append custom definitions, or replace it.
+ *
+ * The English `label`/`group`/`description` text here is only a base: the
+ * editor resolves the built-in types' display text from the `blockEditor`
+ * i18n strings (see `provideMkI18n`) before merging custom definitions.
+ */
+const MK_DEFAULT_BLOCKS = [
+    {
+        type: 'paragraph',
+        label: 'Paragraph',
+        icon: '¶',
+        group: 'Text',
+        description: 'Rich text with inline formatting.',
+        keywords: ['text', 'body', 'p'],
+        transforms: ['heading', 'quote', 'code'],
+        create: () => block$1('paragraph', { html: '' }),
+    },
+    {
+        type: 'heading',
+        label: 'Heading',
+        icon: 'H',
+        group: 'Text',
+        description: 'A section title (H1–H4).',
+        keywords: ['title', 'h1', 'h2', 'h3'],
+        transforms: ['paragraph'],
+        create: () => block$1('heading', { html: '', level: 2 }),
+    },
+    {
+        type: 'list',
+        label: 'List',
+        icon: '•',
+        group: 'Text',
+        description: 'Bulleted or numbered list.',
+        keywords: ['ul', 'ol', 'bullet', 'numbered'],
+        create: () => block$1('list', { ordered: false, items: [''] }),
+    },
+    {
+        type: 'quote',
+        label: 'Quote',
+        icon: '“',
+        group: 'Text',
+        description: 'A blockquote with optional citation.',
+        keywords: ['blockquote', 'citation'],
+        transforms: ['paragraph'],
+        create: () => block$1('quote', { html: '', citation: '' }),
+    },
+    {
+        type: 'code',
+        label: 'Code',
+        icon: '</>',
+        group: 'Text',
+        description: 'Preformatted, monospace code.',
+        keywords: ['pre', 'snippet', 'monospace'],
+        create: () => block$1('code', { code: '', language: '' }),
+    },
+    {
+        type: 'image',
+        label: 'Image',
+        icon: '🖼',
+        group: 'Media',
+        description: 'Upload or link an image.',
+        keywords: ['photo', 'picture', 'img', 'upload'],
+        create: () => block$1('image', { src: '', alt: '', caption: '', align: 'center', width: 100 }),
+    },
+    {
+        type: 'embed',
+        label: 'Embed',
+        icon: '▶',
+        group: 'Media',
+        description: 'YouTube, Vimeo or any URL.',
+        keywords: ['youtube', 'vimeo', 'video', 'iframe', 'url'],
+        create: () => block$1('embed', { url: '' }),
+    },
+    {
+        type: 'button',
+        label: 'Button',
+        icon: '⬚',
+        group: 'Media',
+        description: 'A call-to-action link button.',
+        keywords: ['cta', 'link', 'action'],
+        create: () => block$1('button', { label: 'Click me', href: '', tone: 'primary', variant: 'solid', align: 'left' }),
+    },
+    {
+        type: 'divider',
+        label: 'Divider',
+        icon: '—',
+        group: 'Layout',
+        description: 'A horizontal separator.',
+        keywords: ['hr', 'separator', 'rule'],
+        create: () => block$1('divider', {}),
+    },
+    {
+        type: 'columns',
+        label: 'Columns',
+        icon: '▥',
+        group: 'Layout',
+        description: 'A responsive multi-column layout.',
+        keywords: ['grid', 'layout', 'row', 'column'],
+        allowedInColumns: false,
+        create: () => block$1('columns', { count: 2, ratio: '50-50', gap: 4, align: 'stretch', justify: 'start' }, [block$1('column', {}, []), block$1('column', {}, [])]),
+    },
+];
+/**
+ * Multi-provider injection token for adding block definitions app-wide. Each
+ * provided array is merged over {@link MK_DEFAULT_BLOCKS} (by `type`). The
+ * editor's `blocks` input takes final precedence.
+ *
+ * ```ts
+ * providers: [
+ *   { provide: MK_BLOCK_DEFINITIONS, multi: true, useValue: [myCalloutBlock] },
+ * ]
+ * ```
+ */
+const MK_BLOCK_DEFINITIONS = new InjectionToken('MK_BLOCK_DEFINITIONS');
+/** App-wide upload handler token (overridable by the editor's input). */
+const MK_BLOCK_UPLOAD_HANDLER = new InjectionToken('MK_BLOCK_UPLOAD_HANDLER');
+/** Default embed providers: YouTube + Vimeo. */
+const MK_DEFAULT_EMBED_PROVIDERS = [
+    {
+        name: 'YouTube',
+        test: /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/i,
+        aspectRatio: 16 / 9,
+        toEmbedUrl(url) {
+            const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/i);
+            return m ? `https://www.youtube-nocookie.com/embed/${m[1]}` : null;
+        },
+    },
+    {
+        name: 'Vimeo',
+        test: /vimeo\.com\/(?:video\/)?(\d+)/i,
+        aspectRatio: 16 / 9,
+        toEmbedUrl(url) {
+            const m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/i);
+            return m ? `https://player.vimeo.com/video/${m[1]}` : null;
+        },
+    },
+];
+/** App-wide embed providers token (merged with the editor's input). */
+const MK_BLOCK_EMBED_PROVIDERS = new InjectionToken('MK_BLOCK_EMBED_PROVIDERS');
+/**
+ * Merges default definitions with app-token definitions and per-editor input,
+ * de-duplicating by `type` (later sources win).
+ */
+function mkMergeBlockDefinitions(defaults, ...sources) {
+    const byType = new Map();
+    for (const def of defaults)
+        byType.set(def.type, def);
+    for (const source of sources) {
+        if (!source)
+            continue;
+        for (const def of source)
+            byType.set(def.type, def);
+    }
+    return [...byType.values()];
+}
+
+/**
+ * Shared, editor-scoped context threaded to every nested `mk-block-list` and
+ * block-editor component. Provided by {@link MkBlockEditor}, so deeply nested
+ * blocks (e.g. inside columns) read config and coordinate focus without every
+ * level re-declaring inputs.
+ *
+ * The config fields are plain `Signal` references that {@link MkBlockEditor}
+ * connects to its input-derived signals in its constructor — i.e. BEFORE any
+ * child component can inject this context — so consumers always track the live
+ * source with no mirroring effects. The initial values here only serve
+ * contexts created without an editor (e.g. component tests).
+ */
+class MkBlockEditorContext {
+    announcer;
+    i18n = inject(MK_I18N);
+    /** Active block palette (defaults merged with app/editor definitions). */
+    definitions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    /** Read-only mode: content visible, editing chrome hidden. */
+    readonly = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Disabled mode (form-level). */
+    disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Placeholder for empty text blocks. */
+    placeholder = signal(this.i18n.blockEditor.emptyBlockPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Effective upload handler (input beats token beats data-URL fallback). */
+    uploadHandler = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadHandler" }] : /* istanbul ignore next */ []));
+    /** Effective embed providers (defaults + token + input). */
+    embedProviders = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "embedProviders" }] : /* istanbul ignore next */ []));
+    /** Root editor host, used to locate editables for focus coordination. */
+    hostRef = null;
+    /**
+     * `type → definition` lookup, rebuilt only when the registry array changes.
+     * `definitionFor` is called several times per block per change-detection
+     * pass, so an `array.find` scan here was O(blocks × definitions) per CD.
+     */
+    definitionMap = computed(() => {
+        const map = new Map();
+        for (const def of this.definitions())
+            map.set(def.type, def);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "definitionMap" }] : /* istanbul ignore next */ []));
+    constructor(announcer) {
+        this.announcer = announcer;
+    }
+    /** Returns the definition for a block type, if registered. */
+    definitionFor(type) {
+        return this.definitionMap().get(type);
+    }
+    /** Human label for a block type (falls back to the raw type). */
+    labelFor(type) {
+        return this.definitionFor(type)?.label ?? type;
+    }
+    /** Announce a status change to assistive tech. */
+    announce(message) {
+        this.announcer.announce(message, 'polite');
+    }
+    /**
+     * Move focus to a block's primary editable after the next render. Queries the
+     * live DOM by `data-block-id` so it works regardless of nesting depth.
+     */
+    focusBlock(id, position = 'end') {
+        const root = this.hostRef?.nativeElement;
+        if (!root || typeof window === 'undefined')
+            return;
+        setTimeout(() => {
+            const wrapper = root.querySelector(`[data-block-id="${cssEscape(id)}"]`);
+            const editable = wrapper?.querySelector('[data-mk-editable]');
+            const target = editable ?? wrapper?.querySelector('[data-mk-focus]');
+            if (!target)
+                return;
+            target.focus();
+            if (editable)
+                placeCaret(editable, position);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockEditorContext, deps: [{ token: i1.MkLiveAnnouncer }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockEditorContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockEditorContext, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.MkLiveAnnouncer }] });
+/** Escapes an id for use in a CSS attribute selector. */
+function cssEscape(value) {
+    return value.replace(/["\\]/g, '\\$&');
+}
+/** Places the caret at the start or end of a contenteditable element. */
+function placeCaret(el, position) {
+    const win = el.ownerDocument.defaultView;
+    const selection = win?.getSelection();
+    if (!selection)
+        return;
+    const range = el.ownerDocument.createRange();
+    range.selectNodeContents(el);
+    range.collapse(position === 'start');
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+
+/**
+ * Paragraph block — rich text stored as sanitised HTML in `block.data.html`,
+ * with the floating inline toolbar provided by {@link MkRichTextEngine}.
+ */
+class MkParagraphBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(this.i18n.blockEditor.emptyBlockPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    blockChange = output();
+    splitAt = output();
+    removeEmpty = output();
+    arrowOut = output();
+    onContent(html) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, html } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkParagraphBlock, isStandalone: true, selector: "mk-paragraph-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", splitAt: "splitAt", removeEmpty: "removeEmpty", arrowOut: "arrowOut" }, ngImport: i0, template: `
+    <mk-rich-text-engine
+      [html]="block().data['html'] ?? ''"
+      [placeholder]="placeholder()"
+      [disabled]="readonly()"
+      [ariaLabel]="i18n.blockEditor.blockParagraph"
+      (contentChange)="onContent($event)"
+      (splitAt)="splitAt.emit($event)"
+      (removeEmpty)="removeEmpty.emit()"
+      (arrowOut)="arrowOut.emit($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: MkRichTextEngine, selector: "mk-rich-text-engine", inputs: ["html", "placeholder", "disabled", "multiline", "splitOnEnter", "minHeight", "ariaLabel", "labelledBy", "describedBy", "invalid"], outputs: ["contentChange", "splitAt", "removeEmpty", "arrowOut", "focusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkParagraphBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mk-paragraph-block',
+                    imports: [MkRichTextEngine],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <mk-rich-text-engine
+      [html]="block().data['html'] ?? ''"
+      [placeholder]="placeholder()"
+      [disabled]="readonly()"
+      [ariaLabel]="i18n.blockEditor.blockParagraph"
+      (contentChange)="onContent($event)"
+      (splitAt)="splitAt.emit($event)"
+      (removeEmpty)="removeEmpty.emit()"
+      (arrowOut)="arrowOut.emit($event)"
+    />
+  `,
+                }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }], splitAt: [{ type: i0.Output, args: ["splitAt"] }], removeEmpty: [{ type: i0.Output, args: ["removeEmpty"] }], arrowOut: [{ type: i0.Output, args: ["arrowOut"] }] } });
+
+const LEVELS = [1, 2, 3, 4];
+/**
+ * Heading block — the same rich text as a paragraph but rendered at a
+ * configurable level (H1–H4), chosen from an inline settings row.
+ */
+class MkHeadingBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    splitAt = output();
+    removeEmpty = output();
+    arrowOut = output();
+    levels = LEVELS;
+    level = computed(() => {
+        const l = this.block().data['level'];
+        return LEVELS.includes(l) ? l : 2;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    setLevel(level) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, level } });
+    }
+    onContent(html) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, html } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHeadingBlock, isStandalone: true, selector: "mk-heading-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", splitAt: "splitAt", removeEmpty: "removeEmpty", arrowOut: "arrowOut" }, ngImport: i0, template: `
+    @if (!readonly()) {
+      <div class="mk-heading-block__levels" role="group" [attr.aria-label]="i18n.blockEditor.headingLevelGroup">
+        @for (lvl of levels; track lvl) {
+          <button
+            type="button"
+            class="mk-heading-block__level"
+            [class.mk-heading-block__level--active]="level() === lvl"
+            [attr.aria-pressed]="level() === lvl"
+            (click)="setLevel(lvl)"
+          >
+            H{{ lvl }}
+          </button>
+        }
+      </div>
+    }
+    <mk-rich-text-engine
+      class="mk-heading-block__text"
+      [class]="'mk-heading-block__text--h' + level()"
+      [html]="block().data['html'] ?? ''"
+      [placeholder]="i18n.blockEditor.headingPlaceholder(level())"
+      [disabled]="readonly()"
+      [multiline]="false"
+      [ariaLabel]="i18n.blockEditor.headingLevel(level())"
+      (contentChange)="onContent($event)"
+      (splitAt)="splitAt.emit($event)"
+      (removeEmpty)="removeEmpty.emit()"
+      (arrowOut)="arrowOut.emit($event)"
+    />
+  `, isInline: true, styles: [":host{display:block}.mk-heading-block__levels{display:inline-flex;gap:2px;margin-bottom:var(--mk-space-1);padding:2px;border-radius:var(--mk-radius-sm);background:var(--mk-surface-2)}.mk-heading-block__level{min-width:30px;height:24px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-heading-block__level:hover{background:var(--mk-hover-overlay)}.mk-heading-block__level--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-heading-block__level:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-heading-block__text--h1{font-size:var(--mk-font-size-3xl);font-weight:var(--mk-font-weight-bold)}.mk-heading-block__text--h2{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold)}.mk-heading-block__text--h3{font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold)}.mk-heading-block__text--h4{font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold)}\n"], dependencies: [{ kind: "component", type: MkRichTextEngine, selector: "mk-rich-text-engine", inputs: ["html", "placeholder", "disabled", "multiline", "splitOnEnter", "minHeight", "ariaLabel", "labelledBy", "describedBy", "invalid"], outputs: ["contentChange", "splitAt", "removeEmpty", "arrowOut", "focusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHeadingBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-heading-block', imports: [MkRichTextEngine], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!readonly()) {
+      <div class="mk-heading-block__levels" role="group" [attr.aria-label]="i18n.blockEditor.headingLevelGroup">
+        @for (lvl of levels; track lvl) {
+          <button
+            type="button"
+            class="mk-heading-block__level"
+            [class.mk-heading-block__level--active]="level() === lvl"
+            [attr.aria-pressed]="level() === lvl"
+            (click)="setLevel(lvl)"
+          >
+            H{{ lvl }}
+          </button>
+        }
+      </div>
+    }
+    <mk-rich-text-engine
+      class="mk-heading-block__text"
+      [class]="'mk-heading-block__text--h' + level()"
+      [html]="block().data['html'] ?? ''"
+      [placeholder]="i18n.blockEditor.headingPlaceholder(level())"
+      [disabled]="readonly()"
+      [multiline]="false"
+      [ariaLabel]="i18n.blockEditor.headingLevel(level())"
+      (contentChange)="onContent($event)"
+      (splitAt)="splitAt.emit($event)"
+      (removeEmpty)="removeEmpty.emit()"
+      (arrowOut)="arrowOut.emit($event)"
+    />
+  `, styles: [":host{display:block}.mk-heading-block__levels{display:inline-flex;gap:2px;margin-bottom:var(--mk-space-1);padding:2px;border-radius:var(--mk-radius-sm);background:var(--mk-surface-2)}.mk-heading-block__level{min-width:30px;height:24px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);cursor:pointer}.mk-heading-block__level:hover{background:var(--mk-hover-overlay)}.mk-heading-block__level--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-heading-block__level:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-heading-block__text--h1{font-size:var(--mk-font-size-3xl);font-weight:var(--mk-font-weight-bold)}.mk-heading-block__text--h2{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold)}.mk-heading-block__text--h3{font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold)}.mk-heading-block__text--h4{font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold)}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }], splitAt: [{ type: i0.Output, args: ["splitAt"] }], removeEmpty: [{ type: i0.Output, args: ["removeEmpty"] }], arrowOut: [{ type: i0.Output, args: ["arrowOut"] }] } });
+
+/** Quote block — a blockquote with rich text and an optional citation line. */
+class MkQuoteBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    splitAt = output();
+    removeEmpty = output();
+    arrowOut = output();
+    onContent(html) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, html } });
+    }
+    onCite(event) {
+        const b = this.block();
+        const citation = event.target.value;
+        this.blockChange.emit({ ...b, data: { ...b.data, citation } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkQuoteBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkQuoteBlock, isStandalone: true, selector: "mk-quote-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", splitAt: "splitAt", removeEmpty: "removeEmpty", arrowOut: "arrowOut" }, ngImport: i0, template: `
+    <blockquote class="mk-quote-block__quote">
+      <mk-rich-text-engine
+        [html]="block().data['html'] ?? ''"
+        [placeholder]="i18n.blockEditor.blockQuote"
+        [disabled]="readonly()"
+        [ariaLabel]="i18n.blockEditor.quoteText"
+        (contentChange)="onContent($event)"
+        (splitAt)="splitAt.emit($event)"
+        (removeEmpty)="removeEmpty.emit()"
+        (arrowOut)="arrowOut.emit($event)"
+      />
+    </blockquote>
+    @if (!readonly() || block().data['citation']) {
+      <input
+        class="mk-quote-block__cite"
+        type="text"
+        [value]="block().data['citation'] ?? ''"
+        [disabled]="readonly()"
+        [placeholder]="i18n.blockEditor.addCitation"
+        [attr.aria-label]="i18n.blockEditor.citation"
+        (input)="onCite($event)"
+      />
+    }
+  `, isInline: true, styles: [":host{display:block}.mk-quote-block__quote{margin:0;padding-inline-start:var(--mk-space-4);border-inline-start:4px solid var(--mk-primary);font-size:var(--mk-font-size-lg);font-style:italic;color:var(--mk-text)}.mk-quote-block__cite{margin-top:var(--mk-space-2);margin-inline-start:var(--mk-space-4);width:calc(100% - var(--mk-space-4));border:none;background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-sm)}.mk-quote-block__cite:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-xs)}\n"], dependencies: [{ kind: "component", type: MkRichTextEngine, selector: "mk-rich-text-engine", inputs: ["html", "placeholder", "disabled", "multiline", "splitOnEnter", "minHeight", "ariaLabel", "labelledBy", "describedBy", "invalid"], outputs: ["contentChange", "splitAt", "removeEmpty", "arrowOut", "focusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkQuoteBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-quote-block', imports: [MkRichTextEngine], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <blockquote class="mk-quote-block__quote">
+      <mk-rich-text-engine
+        [html]="block().data['html'] ?? ''"
+        [placeholder]="i18n.blockEditor.blockQuote"
+        [disabled]="readonly()"
+        [ariaLabel]="i18n.blockEditor.quoteText"
+        (contentChange)="onContent($event)"
+        (splitAt)="splitAt.emit($event)"
+        (removeEmpty)="removeEmpty.emit()"
+        (arrowOut)="arrowOut.emit($event)"
+      />
+    </blockquote>
+    @if (!readonly() || block().data['citation']) {
+      <input
+        class="mk-quote-block__cite"
+        type="text"
+        [value]="block().data['citation'] ?? ''"
+        [disabled]="readonly()"
+        [placeholder]="i18n.blockEditor.addCitation"
+        [attr.aria-label]="i18n.blockEditor.citation"
+        (input)="onCite($event)"
+      />
+    }
+  `, styles: [":host{display:block}.mk-quote-block__quote{margin:0;padding-inline-start:var(--mk-space-4);border-inline-start:4px solid var(--mk-primary);font-size:var(--mk-font-size-lg);font-style:italic;color:var(--mk-text)}.mk-quote-block__cite{margin-top:var(--mk-space-2);margin-inline-start:var(--mk-space-4);width:calc(100% - var(--mk-space-4));border:none;background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-sm)}.mk-quote-block__cite:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-xs)}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }], splitAt: [{ type: i0.Output, args: ["splitAt"] }], removeEmpty: [{ type: i0.Output, args: ["removeEmpty"] }], arrowOut: [{ type: i0.Output, args: ["arrowOut"] }] } });
+
+/** List block — a bulleted or numbered list of rich-text items. */
+class MkListBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    ordered = computed(() => !!this.block().data['ordered'], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const items = this.block().data['items'];
+        return Array.isArray(items) && items.length ? items : [''];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    setOrdered(ordered) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, ordered } });
+    }
+    onItem(index, html) {
+        const items = [...this.items()];
+        items[index] = html;
+        this.emitItems(items);
+    }
+    onSplit(index, split) {
+        const items = [...this.items()];
+        items[index] = split.before;
+        items.splice(index + 1, 0, split.after);
+        this.emitItems(items);
+    }
+    onRemove(index) {
+        const items = [...this.items()];
+        if (items.length <= 1)
+            return;
+        items.splice(index, 1);
+        this.emitItems(items);
+    }
+    emitItems(items) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, items } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkListBlock, isStandalone: true, selector: "mk-list-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange" }, ngImport: i0, template: `
+    @if (!readonly()) {
+      <div class="mk-list-block__opts" role="group" [attr.aria-label]="i18n.blockEditor.listStyle">
+        <button
+          type="button"
+          class="mk-list-block__opt"
+          [class.mk-list-block__opt--active]="!ordered()"
+          [attr.aria-pressed]="!ordered()"
+          (click)="setOrdered(false)"
+        >
+          • {{ i18n.blockEditor.bulleted }}
+        </button>
+        <button
+          type="button"
+          class="mk-list-block__opt"
+          [class.mk-list-block__opt--active]="ordered()"
+          [attr.aria-pressed]="ordered()"
+          (click)="setOrdered(true)"
+        >
+          1. {{ i18n.blockEditor.numbered }}
+        </button>
+      </div>
+    }
+    @if (ordered()) {
+      <ol class="mk-list-block__list">
+        @for (item of items(); track $index) {
+          <li class="mk-list-block__item">
+            <mk-rich-text-engine
+              [html]="item"
+              [placeholder]="i18n.blockEditor.listItem"
+              [disabled]="readonly()"
+              [multiline]="false"
+              [ariaLabel]="i18n.blockEditor.listItem"
+              (contentChange)="onItem($index, $event)"
+              (splitAt)="onSplit($index, $event)"
+              (removeEmpty)="onRemove($index)"
+            />
+          </li>
+        }
+      </ol>
+    } @else {
+      <ul class="mk-list-block__list">
+        @for (item of items(); track $index) {
+          <li class="mk-list-block__item">
+            <mk-rich-text-engine
+              [html]="item"
+              [placeholder]="i18n.blockEditor.listItem"
+              [disabled]="readonly()"
+              [multiline]="false"
+              [ariaLabel]="i18n.blockEditor.listItem"
+              (contentChange)="onItem($index, $event)"
+              (splitAt)="onSplit($index, $event)"
+              (removeEmpty)="onRemove($index)"
+            />
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, styles: [":host{display:block}.mk-list-block__opts{display:inline-flex;gap:2px;margin-bottom:var(--mk-space-2);padding:2px;border-radius:var(--mk-radius-sm);background:var(--mk-surface-2)}.mk-list-block__opt{height:24px;padding:0 var(--mk-space-2);border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);cursor:pointer}.mk-list-block__opt:hover{background:var(--mk-hover-overlay)}.mk-list-block__opt--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-list-block__opt:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-list-block__list{margin:0;padding-inline-start:var(--mk-space-6);color:var(--mk-text)}.mk-list-block__item{margin:var(--mk-space-1) 0}\n"], dependencies: [{ kind: "component", type: MkRichTextEngine, selector: "mk-rich-text-engine", inputs: ["html", "placeholder", "disabled", "multiline", "splitOnEnter", "minHeight", "ariaLabel", "labelledBy", "describedBy", "invalid"], outputs: ["contentChange", "splitAt", "removeEmpty", "arrowOut", "focusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-list-block', imports: [MkRichTextEngine], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!readonly()) {
+      <div class="mk-list-block__opts" role="group" [attr.aria-label]="i18n.blockEditor.listStyle">
+        <button
+          type="button"
+          class="mk-list-block__opt"
+          [class.mk-list-block__opt--active]="!ordered()"
+          [attr.aria-pressed]="!ordered()"
+          (click)="setOrdered(false)"
+        >
+          • {{ i18n.blockEditor.bulleted }}
+        </button>
+        <button
+          type="button"
+          class="mk-list-block__opt"
+          [class.mk-list-block__opt--active]="ordered()"
+          [attr.aria-pressed]="ordered()"
+          (click)="setOrdered(true)"
+        >
+          1. {{ i18n.blockEditor.numbered }}
+        </button>
+      </div>
+    }
+    @if (ordered()) {
+      <ol class="mk-list-block__list">
+        @for (item of items(); track $index) {
+          <li class="mk-list-block__item">
+            <mk-rich-text-engine
+              [html]="item"
+              [placeholder]="i18n.blockEditor.listItem"
+              [disabled]="readonly()"
+              [multiline]="false"
+              [ariaLabel]="i18n.blockEditor.listItem"
+              (contentChange)="onItem($index, $event)"
+              (splitAt)="onSplit($index, $event)"
+              (removeEmpty)="onRemove($index)"
+            />
+          </li>
+        }
+      </ol>
+    } @else {
+      <ul class="mk-list-block__list">
+        @for (item of items(); track $index) {
+          <li class="mk-list-block__item">
+            <mk-rich-text-engine
+              [html]="item"
+              [placeholder]="i18n.blockEditor.listItem"
+              [disabled]="readonly()"
+              [multiline]="false"
+              [ariaLabel]="i18n.blockEditor.listItem"
+              (contentChange)="onItem($index, $event)"
+              (splitAt)="onSplit($index, $event)"
+              (removeEmpty)="onRemove($index)"
+            />
+          </li>
+        }
+      </ul>
+    }
+  `, styles: [":host{display:block}.mk-list-block__opts{display:inline-flex;gap:2px;margin-bottom:var(--mk-space-2);padding:2px;border-radius:var(--mk-radius-sm);background:var(--mk-surface-2)}.mk-list-block__opt{height:24px;padding:0 var(--mk-space-2);border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);cursor:pointer}.mk-list-block__opt:hover{background:var(--mk-hover-overlay)}.mk-list-block__opt--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-list-block__opt:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-list-block__list{margin:0;padding-inline-start:var(--mk-space-6);color:var(--mk-text)}.mk-list-block__item{margin:var(--mk-space-1) 0}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }] } });
+
+/**
+ * Code block — a plain, monospace, preformatted text area. Content is stored as
+ * raw text (never executed, never interpreted as HTML) in `block.data.code`.
+ */
+class MkCodeBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    rows() {
+        const lines = String(this.block().data['code'] ?? '').split('\n').length;
+        return Math.max(3, Math.min(30, lines + 1));
+    }
+    onCode(event) {
+        const b = this.block();
+        const code = event.target.value;
+        this.blockChange.emit({ ...b, data: { ...b.data, code } });
+    }
+    onLang(event) {
+        const b = this.block();
+        const language = event.target.value;
+        this.blockChange.emit({ ...b, data: { ...b.data, language } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCodeBlock, isStandalone: true, selector: "mk-code-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange" }, ngImport: i0, template: `
+    @if (!readonly()) {
+      <input
+        class="mk-code-block__lang"
+        type="text"
+        [value]="block().data['language'] ?? ''"
+        [placeholder]="i18n.blockEditor.codeLanguagePlaceholder"
+        [attr.aria-label]="i18n.blockEditor.codeLanguage"
+        (input)="onLang($event)"
+      />
+    }
+    <textarea
+      class="mk-code-block__area"
+      data-mk-focus
+      spellcheck="false"
+      autocapitalize="off"
+      autocomplete="off"
+      [value]="block().data['code'] ?? ''"
+      [readOnly]="readonly()"
+      [rows]="rows()"
+      [placeholder]="i18n.blockEditor.enterCode"
+      [attr.aria-label]="i18n.blockEditor.blockCode"
+      (input)="onCode($event)"
+    ></textarea>
+  `, isInline: true, styles: [":host{display:block}.mk-code-block__lang{display:block;margin-bottom:var(--mk-space-1);padding:var(--mk-space-1) var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs)}.mk-code-block__area{display:block;width:100%;min-height:4em;padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-code-bg);color:var(--mk-text);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);resize:vertical;tab-size:2}.mk-code-block__area:focus-visible,.mk-code-block__lang:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCodeBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-code-block', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!readonly()) {
+      <input
+        class="mk-code-block__lang"
+        type="text"
+        [value]="block().data['language'] ?? ''"
+        [placeholder]="i18n.blockEditor.codeLanguagePlaceholder"
+        [attr.aria-label]="i18n.blockEditor.codeLanguage"
+        (input)="onLang($event)"
+      />
+    }
+    <textarea
+      class="mk-code-block__area"
+      data-mk-focus
+      spellcheck="false"
+      autocapitalize="off"
+      autocomplete="off"
+      [value]="block().data['code'] ?? ''"
+      [readOnly]="readonly()"
+      [rows]="rows()"
+      [placeholder]="i18n.blockEditor.enterCode"
+      [attr.aria-label]="i18n.blockEditor.blockCode"
+      (input)="onCode($event)"
+    ></textarea>
+  `, styles: [":host{display:block}.mk-code-block__lang{display:block;margin-bottom:var(--mk-space-1);padding:var(--mk-space-1) var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs)}.mk-code-block__area{display:block;width:100%;min-height:4em;padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-code-bg);color:var(--mk-text);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);resize:vertical;tab-size:2}.mk-code-block__area:focus-visible,.mk-code-block__lang:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }] } });
+
+/**
+ * Image block — upload (file picker or drag-drop) or paste a URL. If an
+ * `uploadHandler` is configured (editor input or {@link MK_BLOCK_UPLOAD_HANDLER}
+ * token) it is used to persist the file and get back a URL; otherwise the file
+ * is read as an inline `data:` URL via `FileReader`. Supports alt text,
+ * caption, width and alignment.
+ */
+class MkImageBlock {
+    ctx = inject(MkBlockEditorContext);
+    fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    aligns = ['left', 'center', 'right'];
+    uploading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    dragActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
+    src() {
+        return this.block().data['src'] ?? '';
+    }
+    /** Localised caption for an alignment option. */
+    alignLabel(align) {
+        const s = this.i18n.blockEditor;
+        return { left: s.alignLeft, center: s.alignCenter, right: s.alignRight }[align];
+    }
+    openPicker() {
+        this.fileInput()?.nativeElement.click();
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (file)
+            this.handleFile(file);
+        input.value = '';
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragActive.set(false);
+        if (this.readonly())
+            return;
+        const file = event.dataTransfer?.files?.[0];
+        if (file)
+            this.handleFile(file);
+    }
+    onDragOver(event) {
+        if (this.readonly())
+            return;
+        event.preventDefault();
+        this.dragActive.set(true);
+    }
+    onDragLeave() {
+        this.dragActive.set(false);
+    }
+    onUrl(event) {
+        const value = event.target.value.trim();
+        this.patch({ src: value });
+    }
+    onAlt(event) {
+        this.patch({ alt: event.target.value });
+    }
+    onCaption(event) {
+        this.patch({ caption: event.target.value });
+    }
+    setAlign(align) {
+        this.patch({ align });
+    }
+    onWidth(event) {
+        this.patch({ width: Number(event.target.value) });
+    }
+    clear() {
+        this.patch({ src: '' });
+    }
+    async handleFile(file) {
+        if (!file.type.startsWith('image/')) {
+            this.error.set(this.i18n.blockEditor.notAnImage);
+            return;
+        }
+        this.error.set(null);
+        this.uploading.set(true);
+        try {
+            const handler = this.ctx.uploadHandler();
+            const url = handler ? await handler(file) : await this.readAsDataUrl(file);
+            this.patch({ src: url, alt: this.block().data['alt'] || file.name });
+            this.ctx.announce(this.i18n.blockEditor.imageAdded);
+        }
+        catch {
+            this.error.set(this.i18n.blockEditor.uploadFailed);
+        }
+        finally {
+            this.uploading.set(false);
+        }
+    }
+    readAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(String(reader.result));
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(file);
+        });
+    }
+    patch(data) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, ...data } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkImageBlock, isStandalone: true, selector: "mk-image-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  class=\"mk-image-block__file\"\n  hidden\n  (change)=\"onFileSelected($event)\"\n/>\n\n@if (src()) {\n  <figure\n    class=\"mk-image-block__figure\"\n    [class.mk-image-block__figure--left]=\"block().data['align'] === 'left'\"\n    [class.mk-image-block__figure--right]=\"block().data['align'] === 'right'\"\n  >\n    <img\n      class=\"mk-image-block__img\"\n      [src]=\"src()\"\n      [alt]=\"block().data['alt'] ?? ''\"\n      [style.width.%]=\"block().data['width'] || 100\"\n    />\n    @if (block().data['caption'] || !readonly()) {\n      <figcaption class=\"mk-image-block__caption\">{{ block().data['caption'] }}</figcaption>\n    }\n  </figure>\n\n  @if (!readonly()) {\n    <div class=\"mk-image-block__settings\">\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.altText }}</span>\n        <input type=\"text\" [value]=\"block().data['alt'] ?? ''\" (input)=\"onAlt($event)\" />\n      </label>\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.caption }}</span>\n        <input type=\"text\" [value]=\"block().data['caption'] ?? ''\" (input)=\"onCaption($event)\" />\n      </label>\n      <div class=\"mk-image-block__field\">\n        <span id=\"mk-img-align\">{{ i18n.blockEditor.alignment }}</span>\n        <div class=\"mk-image-block__aligns\" role=\"group\" aria-labelledby=\"mk-img-align\">\n          @for (a of aligns; track a) {\n            <button\n              type=\"button\"\n              class=\"mk-image-block__align\"\n              [class.mk-image-block__align--active]=\"(block().data['align'] ?? 'center') === a\"\n              [attr.aria-pressed]=\"(block().data['align'] ?? 'center') === a\"\n              (click)=\"setAlign(a)\"\n            >\n              {{ alignLabel(a) }}\n            </button>\n          }\n        </div>\n      </div>\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.imageWidth(block().data['width'] || 100) }}</span>\n        <input\n          type=\"range\"\n          min=\"20\"\n          max=\"100\"\n          step=\"5\"\n          [value]=\"block().data['width'] || 100\"\n          (input)=\"onWidth($event)\"\n        />\n      </label>\n      <button type=\"button\" class=\"mk-image-block__replace\" (click)=\"clear()\">\n        {{ i18n.blockEditor.replaceImage }}\n      </button>\n    </div>\n  }\n} @else {\n  <div\n    class=\"mk-image-block__drop\"\n    [class.mk-image-block__drop--active]=\"dragActive()\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave()\"\n  >\n    @if (uploading()) {\n      <p class=\"mk-image-block__hint\">{{ i18n.blockEditor.uploading }}</p>\n    } @else {\n      <p class=\"mk-image-block__icon\" aria-hidden=\"true\">\uD83D\uDDBC</p>\n      <p class=\"mk-image-block__hint\">{{ i18n.blockEditor.dropImagePrompt }}</p>\n      <button\n        type=\"button\"\n        class=\"mk-image-block__upload\"\n        data-mk-focus\n        [disabled]=\"readonly()\"\n        (click)=\"openPicker()\"\n      >\n        {{ i18n.blockEditor.chooseFile }}\n      </button>\n      <label class=\"mk-image-block__url\">\n        <span class=\"mk-visually-hidden\">{{ i18n.blockEditor.imageUrl }}</span>\n        <input\n          type=\"url\"\n          [placeholder]=\"i18n.blockEditor.pasteImageUrl\"\n          [disabled]=\"readonly()\"\n          (change)=\"onUrl($event)\"\n        />\n      </label>\n    }\n    @if (error()) {\n      <p class=\"mk-image-block__error\" role=\"alert\">{{ error() }}</p>\n    }\n  </div>\n}\n", styles: [":host{display:block}.mk-image-block__figure{margin:0;text-align:center}.mk-image-block__figure--left{text-align:left}.mk-image-block__figure--right{text-align:right}.mk-image-block__img{max-width:100%;height:auto;border-radius:var(--mk-radius-md);vertical-align:middle}.mk-image-block__caption{margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-image-block__drop{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-4);border:var(--mk-border-width-strong) dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);background:var(--mk-surface-2);text-align:center;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-block__drop--active{border-color:var(--mk-primary);background:var(--mk-primary-subtle)}.mk-image-block__icon{margin:0;font-size:var(--mk-font-size-3xl)}.mk-image-block__hint{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-image-block__upload{height:var(--mk-control-height-sm);padding:0 var(--mk-space-4);border:var(--mk-border-width) solid var(--mk-border-strong);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-medium);cursor:pointer}.mk-image-block__upload:hover{background:var(--mk-surface-3)}.mk-image-block__url input{width:min(320px,80vw);height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-image-block__error{margin:0;color:var(--mk-danger-text);font-size:var(--mk-font-size-sm)}.mk-image-block__settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--mk-space-3);margin-top:var(--mk-space-3);padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-image-block__field{display:flex;flex-direction:column;gap:var(--mk-space-1);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-image-block__field input[type=text],.mk-image-block__field input[type=url]{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-image-block__aligns{display:inline-flex;gap:2px}.mk-image-block__align{flex:1;height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);text-transform:capitalize;cursor:pointer}.mk-image-block__align--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-image-block__replace{align-self:end;height:var(--mk-control-height-sm);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-danger-text);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}button:focus-visible,input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-image-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  class=\"mk-image-block__file\"\n  hidden\n  (change)=\"onFileSelected($event)\"\n/>\n\n@if (src()) {\n  <figure\n    class=\"mk-image-block__figure\"\n    [class.mk-image-block__figure--left]=\"block().data['align'] === 'left'\"\n    [class.mk-image-block__figure--right]=\"block().data['align'] === 'right'\"\n  >\n    <img\n      class=\"mk-image-block__img\"\n      [src]=\"src()\"\n      [alt]=\"block().data['alt'] ?? ''\"\n      [style.width.%]=\"block().data['width'] || 100\"\n    />\n    @if (block().data['caption'] || !readonly()) {\n      <figcaption class=\"mk-image-block__caption\">{{ block().data['caption'] }}</figcaption>\n    }\n  </figure>\n\n  @if (!readonly()) {\n    <div class=\"mk-image-block__settings\">\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.altText }}</span>\n        <input type=\"text\" [value]=\"block().data['alt'] ?? ''\" (input)=\"onAlt($event)\" />\n      </label>\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.caption }}</span>\n        <input type=\"text\" [value]=\"block().data['caption'] ?? ''\" (input)=\"onCaption($event)\" />\n      </label>\n      <div class=\"mk-image-block__field\">\n        <span id=\"mk-img-align\">{{ i18n.blockEditor.alignment }}</span>\n        <div class=\"mk-image-block__aligns\" role=\"group\" aria-labelledby=\"mk-img-align\">\n          @for (a of aligns; track a) {\n            <button\n              type=\"button\"\n              class=\"mk-image-block__align\"\n              [class.mk-image-block__align--active]=\"(block().data['align'] ?? 'center') === a\"\n              [attr.aria-pressed]=\"(block().data['align'] ?? 'center') === a\"\n              (click)=\"setAlign(a)\"\n            >\n              {{ alignLabel(a) }}\n            </button>\n          }\n        </div>\n      </div>\n      <label class=\"mk-image-block__field\">\n        <span>{{ i18n.blockEditor.imageWidth(block().data['width'] || 100) }}</span>\n        <input\n          type=\"range\"\n          min=\"20\"\n          max=\"100\"\n          step=\"5\"\n          [value]=\"block().data['width'] || 100\"\n          (input)=\"onWidth($event)\"\n        />\n      </label>\n      <button type=\"button\" class=\"mk-image-block__replace\" (click)=\"clear()\">\n        {{ i18n.blockEditor.replaceImage }}\n      </button>\n    </div>\n  }\n} @else {\n  <div\n    class=\"mk-image-block__drop\"\n    [class.mk-image-block__drop--active]=\"dragActive()\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave()\"\n  >\n    @if (uploading()) {\n      <p class=\"mk-image-block__hint\">{{ i18n.blockEditor.uploading }}</p>\n    } @else {\n      <p class=\"mk-image-block__icon\" aria-hidden=\"true\">\uD83D\uDDBC</p>\n      <p class=\"mk-image-block__hint\">{{ i18n.blockEditor.dropImagePrompt }}</p>\n      <button\n        type=\"button\"\n        class=\"mk-image-block__upload\"\n        data-mk-focus\n        [disabled]=\"readonly()\"\n        (click)=\"openPicker()\"\n      >\n        {{ i18n.blockEditor.chooseFile }}\n      </button>\n      <label class=\"mk-image-block__url\">\n        <span class=\"mk-visually-hidden\">{{ i18n.blockEditor.imageUrl }}</span>\n        <input\n          type=\"url\"\n          [placeholder]=\"i18n.blockEditor.pasteImageUrl\"\n          [disabled]=\"readonly()\"\n          (change)=\"onUrl($event)\"\n        />\n      </label>\n    }\n    @if (error()) {\n      <p class=\"mk-image-block__error\" role=\"alert\">{{ error() }}</p>\n    }\n  </div>\n}\n", styles: [":host{display:block}.mk-image-block__figure{margin:0;text-align:center}.mk-image-block__figure--left{text-align:left}.mk-image-block__figure--right{text-align:right}.mk-image-block__img{max-width:100%;height:auto;border-radius:var(--mk-radius-md);vertical-align:middle}.mk-image-block__caption{margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-image-block__drop{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-4);border:var(--mk-border-width-strong) dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);background:var(--mk-surface-2);text-align:center;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-block__drop--active{border-color:var(--mk-primary);background:var(--mk-primary-subtle)}.mk-image-block__icon{margin:0;font-size:var(--mk-font-size-3xl)}.mk-image-block__hint{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-image-block__upload{height:var(--mk-control-height-sm);padding:0 var(--mk-space-4);border:var(--mk-border-width) solid var(--mk-border-strong);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-weight:var(--mk-font-weight-medium);cursor:pointer}.mk-image-block__upload:hover{background:var(--mk-surface-3)}.mk-image-block__url input{width:min(320px,80vw);height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-image-block__error{margin:0;color:var(--mk-danger-text);font-size:var(--mk-font-size-sm)}.mk-image-block__settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--mk-space-3);margin-top:var(--mk-space-3);padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-image-block__field{display:flex;flex-direction:column;gap:var(--mk-space-1);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-image-block__field input[type=text],.mk-image-block__field input[type=url]{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-image-block__aligns{display:inline-flex;gap:2px}.mk-image-block__align{flex:1;height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);text-transform:capitalize;cursor:pointer}.mk-image-block__align--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-image-block__replace{align-self:end;height:var(--mk-control-height-sm);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-danger-text);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}button:focus-visible,input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }] } });
+
+/** Escapes text for safe placement in element content. */
+function mkEscapeHtml(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/** Escapes a value for safe placement in a double-quoted attribute. */
+function mkEscapeAttr(value) {
+    return mkEscapeHtml(value).replace(/"/g, '&quot;');
+}
+/** True for URL schemes safe to place in `href`/`src`. */
+function mkIsSafeUrl(url) {
+    const trimmed = String(url ?? '').trim();
+    if (trimmed === '')
+        return false;
+    // Allow relative, http(s), mailto, tel and data:image.
+    if (/^(https?:|mailto:|tel:)/i.test(trimmed))
+        return true;
+    if (/^data:image\//i.test(trimmed))
+        return true;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed))
+        return false; // any other scheme
+    return true; // relative / anchor / protocol-relative-ish
+}
+/** Maps a ratio preset like `66-33` to a CSS `grid-template-columns` value. */
+function mkRatioToColumns(ratio, count) {
+    const parts = String(ratio ?? '')
+        .split('-')
+        .map((n) => parseFloat(n))
+        .filter((n) => !isNaN(n) && n > 0);
+    if (parts.length >= 2)
+        return parts.map((n) => `${n}fr`).join(' ');
+    return `repeat(${Math.max(1, count || 1)}, 1fr)`;
+}
+const HEADING_LEVELS = new Set([1, 2, 3, 4]);
+/** Serialises one block to a semantic HTML string. */
+function blockToHtml(b) {
+    switch (b.type) {
+        case 'paragraph':
+            return `<p>${sanitizeInlineHtml(b.data['html'] ?? '')}</p>`;
+        case 'heading': {
+            const level = HEADING_LEVELS.has(b.data['level']) ? b.data['level'] : 2;
+            return `<h${level}>${sanitizeInlineHtml(b.data['html'] ?? '')}</h${level}>`;
+        }
+        case 'list': {
+            const ordered = !!b.data['ordered'];
+            const tag = ordered ? 'ol' : 'ul';
+            const items = Array.isArray(b.data['items']) ? b.data['items'] : [];
+            const li = items.map((it) => `<li>${sanitizeInlineHtml(it ?? '')}</li>`).join('');
+            return `<${tag}>${li}</${tag}>`;
+        }
+        case 'quote': {
+            const cite = String(b.data['citation'] ?? '').trim();
+            const citeHtml = cite ? `<cite>${mkEscapeHtml(cite)}</cite>` : '';
+            return `<blockquote><p>${sanitizeInlineHtml(b.data['html'] ?? '')}</p>${citeHtml}</blockquote>`;
+        }
+        case 'code': {
+            const code = mkEscapeHtml(b.data['code'] ?? '');
+            const lang = String(b.data['language'] ?? '').trim();
+            const cls = lang ? ` class="language-${mkEscapeAttr(lang)}"` : '';
+            return `<pre><code${cls}>${code}</code></pre>`;
+        }
+        case 'image': {
+            const src = String(b.data['src'] ?? '');
+            if (!mkIsSafeUrl(src) || !src)
+                return '';
+            const align = String(b.data['align'] ?? 'center');
+            const width = Number(b.data['width']) || 100;
+            const alt = mkEscapeAttr(b.data['alt'] ?? '');
+            const caption = String(b.data['caption'] ?? '').trim();
+            const figStyle = `text-align:${align === 'left' ? 'left' : align === 'right' ? 'right' : 'center'};margin:1rem 0;`;
+            const img = `<img src="${mkEscapeAttr(src)}" alt="${alt}" style="max-width:${Math.min(100, Math.max(10, width))}%;height:auto;border-radius:.5rem;" loading="lazy">`;
+            const cap = caption ? `<figcaption style="font-size:.875rem;opacity:.75;margin-top:.5rem;">${mkEscapeHtml(caption)}</figcaption>` : '';
+            return `<figure style="${figStyle}">${img}${cap}</figure>`;
+        }
+        case 'button': {
+            const href = String(b.data['href'] ?? '');
+            const label = mkEscapeHtml(b.data['label'] ?? 'Button');
+            const align = String(b.data['align'] ?? 'left');
+            const safe = mkIsSafeUrl(href) && href ? mkEscapeAttr(href) : '#';
+            const wrapStyle = `text-align:${align};margin:1rem 0;`;
+            const btnStyle = 'display:inline-block;padding:.6rem 1.1rem;border-radius:.5rem;text-decoration:none;font-weight:600;';
+            return `<div style="${wrapStyle}"><a href="${safe}" class="mk-cta mk-cta--${mkEscapeAttr(b.data['tone'] ?? 'primary')}" style="${btnStyle}" rel="noopener noreferrer">${label}</a></div>`;
+        }
+        case 'divider':
+            return '<hr>';
+        case 'embed': {
+            const url = String(b.data['url'] ?? '');
+            const embedUrl = String(b.data['embedUrl'] ?? '');
+            const ratio = Number(b.data['aspectRatio']) || 16 / 9;
+            if (embedUrl && mkIsSafeUrl(embedUrl)) {
+                const pad = (100 / ratio).toFixed(3);
+                return (`<div class="mk-embed" style="position:relative;width:100%;padding-top:${pad}%;margin:1rem 0;">` +
+                    `<iframe src="${mkEscapeAttr(embedUrl)}" title="Embedded content" loading="lazy" ` +
+                    `sandbox="allow-scripts allow-same-origin allow-presentation allow-popups" ` +
+                    `referrerpolicy="strict-origin-when-cross-origin" allowfullscreen ` +
+                    `style="position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:.5rem;"></iframe></div>`);
+            }
+            if (mkIsSafeUrl(url) && url) {
+                return `<p class="mk-embed-fallback"><a href="${mkEscapeAttr(url)}" rel="noopener noreferrer" target="_blank">${mkEscapeHtml(url)}</a></p>`;
+            }
+            return '';
+        }
+        case 'columns': {
+            const count = Number(b.data['count']) || (b.children?.length ?? 2);
+            const cols = mkRatioToColumns(b.data['ratio'] ?? '', count);
+            const gap = (Number(b.data['gap']) || 4) * 0.25;
+            const align = String(b.data['align'] ?? 'stretch');
+            const justify = String(b.data['justify'] ?? 'start');
+            const justifyMap = {
+                start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between',
+            };
+            const style = `display:grid;grid-template-columns:${cols};gap:${gap}rem;align-items:${align};` +
+                `justify-content:${justifyMap[justify] ?? 'flex-start'};margin:1rem 0;`;
+            const columns = (b.children ?? [])
+                .map((col) => `<div class="mk-column">${(col.children ?? []).map(blockToHtml).join('')}</div>`)
+                .join('');
+            return `<div class="mk-columns" style="${style}">${columns}</div>`;
+        }
+        case 'column':
+            return (b.children ?? []).map(blockToHtml).join('');
+        default:
+            return '';
+    }
+}
+/**
+ * Serialises a document to clean, semantic, self-contained HTML — the "rich
+ * HTML content" you persist and publish for a blog post or content page.
+ * Layout blocks become responsive grid wrappers with inline styles.
+ */
+function mkBlocksToHtml(doc) {
+    if (!doc?.blocks?.length)
+        return '';
+    return doc.blocks.map(blockToHtml).join('\n');
+}
+/** Strips all tags, collapsing a block to its text content. */
+function stripTags(html) {
+    return String(html ?? '')
+        .replace(/<[^>]*>/g, ' ')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+/** Collects the plain-text content of a block subtree. */
+function blockToText(b) {
+    switch (b.type) {
+        case 'paragraph':
+        case 'heading':
+        case 'quote':
+            return stripTags(b.data['html'] ?? '');
+        case 'list':
+            return (Array.isArray(b.data['items']) ? b.data['items'] : [])
+                .map((i) => stripTags(i))
+                .filter(Boolean)
+                .join(' · ');
+        case 'code':
+            return String(b.data['code'] ?? '').trim();
+        case 'image':
+            return String(b.data['caption'] ?? b.data['alt'] ?? '').trim();
+        case 'button':
+            return String(b.data['label'] ?? '').trim();
+        case 'embed':
+            return String(b.data['url'] ?? '').trim();
+        case 'columns':
+        case 'column':
+            return (b.children ?? [])
+                .map((c) => (c.type === 'column' ? blockToText(c) : blockToText(c)))
+                .filter(Boolean)
+                .join(' ');
+        default:
+            return '';
+    }
+}
+/**
+ * Serialises a document to plain text — handy for previews, excerpts, search
+ * indexes and meta descriptions.
+ */
+function mkBlocksToText(doc) {
+    if (!doc?.blocks?.length)
+        return '';
+    return doc.blocks
+        .map(blockToText)
+        .filter((t) => t.length > 0)
+        .join('\n\n');
+}
+
+/**
+ * Embed block — paste a URL; matching allow-listed providers (YouTube, Vimeo,
+ * plus any supplied via `embedProviders`) render a SANDBOXED iframe. The only
+ * value passed to `DomSanitizer.bypassSecurityTrustResourceUrl` is the
+ * provider-transformed embed URL (never the raw pasted string). Non-matching
+ * URLs fall back to a safe link card — raw HTML is never injected.
+ */
+class MkEmbedBlock {
+    ctx = inject(MkBlockEditorContext);
+    sanitizer = inject(DomSanitizer);
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    embedUrl = computed(() => this.block().data['embedUrl'] ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "embedUrl" }] : /* istanbul ignore next */ []));
+    url = computed(() => this.block().data['url'] ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    aspectRatio = computed(() => Number(this.block().data['aspectRatio']) || 16 / 9, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    providerName = computed(() => this.block().data['provider'] ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "providerName" }] : /* istanbul ignore next */ []));
+    paddingTop = computed(() => `${100 / this.aspectRatio()}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddingTop" }] : /* istanbul ignore next */ []));
+    /** Only ever wraps a provider-transformed URL — see the class doc. */
+    safeSrc = computed(() => {
+        const src = this.embedUrl();
+        if (!src || !mkIsSafeUrl(src) || !/^https:\/\//i.test(src))
+            return null;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(src);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeSrc" }] : /* istanbul ignore next */ []));
+    hasFallback = computed(() => !this.embedUrl() && !!this.url() && mkIsSafeUrl(this.url()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFallback" }] : /* istanbul ignore next */ []));
+    onUrl(event) {
+        const raw = event.target.value.trim();
+        this.resolve(raw);
+    }
+    resolve(raw) {
+        const b = this.block();
+        if (!raw) {
+            this.blockChange.emit({ ...b, data: { ...b.data, url: '', embedUrl: '', provider: '' } });
+            return;
+        }
+        for (const provider of this.ctx.embedProviders()) {
+            if (provider.test.test(raw)) {
+                const embedUrl = provider.toEmbedUrl(raw);
+                if (embedUrl) {
+                    this.blockChange.emit({
+                        ...b,
+                        data: {
+                            ...b.data,
+                            url: raw,
+                            embedUrl,
+                            provider: provider.name,
+                            aspectRatio: provider.aspectRatio ?? 16 / 9,
+                        },
+                    });
+                    this.ctx.announce(this.i18n.blockEditor.embedAdded(provider.name));
+                    return;
+                }
+            }
+        }
+        // No provider matched — keep the URL for the safe link-card fallback.
+        this.blockChange.emit({ ...b, data: { ...b.data, url: raw, embedUrl: '', provider: '' } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEmbedBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkEmbedBlock, isStandalone: true, selector: "mk-embed-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange" }, ngImport: i0, template: "@if (safeSrc()) {\n  <div class=\"mk-embed-block__frame\" [style.padding-top]=\"paddingTop()\">\n    <iframe\n      class=\"mk-embed-block__iframe\"\n      [src]=\"safeSrc()\"\n      [title]=\"i18n.blockEditor.embedTitle(providerName())\"\n      loading=\"lazy\"\n      referrerpolicy=\"strict-origin-when-cross-origin\"\n      sandbox=\"allow-scripts allow-same-origin allow-presentation allow-popups\"\n      allowfullscreen\n    ></iframe>\n  </div>\n} @else if (hasFallback()) {\n  <a class=\"mk-embed-block__card\" [href]=\"url()\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <span class=\"mk-embed-block__card-icon\" aria-hidden=\"true\">\uD83D\uDD17</span>\n    <span class=\"mk-embed-block__card-body\">\n      <span class=\"mk-embed-block__card-title\">{{ i18n.blockEditor.externalContent }}</span>\n      <span class=\"mk-embed-block__card-url\">{{ url() }}</span>\n    </span>\n  </a>\n}\n\n@if (!readonly()) {\n  <label class=\"mk-embed-block__input\">\n    <span class=\"mk-visually-hidden\">{{ i18n.blockEditor.embedUrl }}</span>\n    <input\n      type=\"url\"\n      data-mk-focus\n      [value]=\"url()\"\n      [placeholder]=\"i18n.blockEditor.pasteEmbedUrl\"\n      (change)=\"onUrl($event)\"\n    />\n  </label>\n  @if (url() && !safeSrc() && !hasFallback()) {\n    <p class=\"mk-embed-block__note\">{{ i18n.blockEditor.embedFallbackNote }}</p>\n  }\n}\n", styles: [":host{display:block}.mk-embed-block__frame{position:relative;width:100%;overflow:hidden;border-radius:var(--mk-radius-md);background:var(--mk-surface-3)}.mk-embed-block__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.mk-embed-block__card{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface-2);color:var(--mk-text);text-decoration:none}.mk-embed-block__card:hover{border-color:var(--mk-border-strong);background:var(--mk-surface-3)}.mk-embed-block__card-icon{font-size:var(--mk-font-size-xl)}.mk-embed-block__card-body{display:flex;flex-direction:column;min-width:0}.mk-embed-block__card-title{font-weight:var(--mk-font-weight-medium)}.mk-embed-block__card-url{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-embed-block__input{display:block;margin-top:var(--mk-space-2)}.mk-embed-block__input input{width:100%;height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-embed-block__input input:focus-visible,.mk-embed-block__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-embed-block__note{margin:var(--mk-space-1) 0 0;color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs)}.mk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEmbedBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-embed-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (safeSrc()) {\n  <div class=\"mk-embed-block__frame\" [style.padding-top]=\"paddingTop()\">\n    <iframe\n      class=\"mk-embed-block__iframe\"\n      [src]=\"safeSrc()\"\n      [title]=\"i18n.blockEditor.embedTitle(providerName())\"\n      loading=\"lazy\"\n      referrerpolicy=\"strict-origin-when-cross-origin\"\n      sandbox=\"allow-scripts allow-same-origin allow-presentation allow-popups\"\n      allowfullscreen\n    ></iframe>\n  </div>\n} @else if (hasFallback()) {\n  <a class=\"mk-embed-block__card\" [href]=\"url()\" target=\"_blank\" rel=\"noopener noreferrer\">\n    <span class=\"mk-embed-block__card-icon\" aria-hidden=\"true\">\uD83D\uDD17</span>\n    <span class=\"mk-embed-block__card-body\">\n      <span class=\"mk-embed-block__card-title\">{{ i18n.blockEditor.externalContent }}</span>\n      <span class=\"mk-embed-block__card-url\">{{ url() }}</span>\n    </span>\n  </a>\n}\n\n@if (!readonly()) {\n  <label class=\"mk-embed-block__input\">\n    <span class=\"mk-visually-hidden\">{{ i18n.blockEditor.embedUrl }}</span>\n    <input\n      type=\"url\"\n      data-mk-focus\n      [value]=\"url()\"\n      [placeholder]=\"i18n.blockEditor.pasteEmbedUrl\"\n      (change)=\"onUrl($event)\"\n    />\n  </label>\n  @if (url() && !safeSrc() && !hasFallback()) {\n    <p class=\"mk-embed-block__note\">{{ i18n.blockEditor.embedFallbackNote }}</p>\n  }\n}\n", styles: [":host{display:block}.mk-embed-block__frame{position:relative;width:100%;overflow:hidden;border-radius:var(--mk-radius-md);background:var(--mk-surface-3)}.mk-embed-block__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.mk-embed-block__card{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface-2);color:var(--mk-text);text-decoration:none}.mk-embed-block__card:hover{border-color:var(--mk-border-strong);background:var(--mk-surface-3)}.mk-embed-block__card-icon{font-size:var(--mk-font-size-xl)}.mk-embed-block__card-body{display:flex;flex-direction:column;min-width:0}.mk-embed-block__card-title{font-weight:var(--mk-font-weight-medium)}.mk-embed-block__card-url{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-embed-block__input{display:block;margin-top:var(--mk-space-2)}.mk-embed-block__input input{width:100%;height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-embed-block__input input:focus-visible,.mk-embed-block__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-embed-block__note{margin:var(--mk-space-1) 0 0;color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs)}.mk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }] } });
+
+const TONES = ['primary', 'neutral', 'success', 'warning', 'danger', 'info'];
+/**
+ * Button/CTA block — a themed call-to-action link with configurable label,
+ * href, tone, variant and alignment. Styling mirrors the mk-kit button tokens.
+ */
+class MkButtonBlock {
+    i18n = inject(MK_I18N);
+    block = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    blockChange = output();
+    tones = TONES;
+    aligns = ['left', 'center', 'right'];
+    variants = ['solid', 'soft', 'outline'];
+    data(key) {
+        return this.block().data[key];
+    }
+    /** Localised captions for the tone / variant / alignment option buttons. */
+    toneLabel(tone) {
+        const s = this.i18n.blockEditor;
+        const map = {
+            primary: s.tonePrimary,
+            neutral: s.toneNeutral,
+            success: s.toneSuccess,
+            warning: s.toneWarning,
+            danger: s.toneDanger,
+            info: s.toneInfo,
+        };
+        return map[tone];
+    }
+    variantLabel(variant) {
+        const s = this.i18n.blockEditor;
+        const map = {
+            solid: s.variantSolid,
+            soft: s.variantSoft,
+            outline: s.variantOutline,
+        };
+        return map[variant] ?? variant;
+    }
+    alignLabel(align) {
+        const s = this.i18n.blockEditor;
+        return { left: s.alignLeft, center: s.alignCenter, right: s.alignRight }[align];
+    }
+    onLabel(event) {
+        this.patch({ label: event.target.value });
+    }
+    onHref(event) {
+        this.patch({ href: event.target.value.trim() });
+    }
+    setTone(tone) {
+        this.patch({ tone });
+    }
+    setVariant(variant) {
+        this.patch({ variant });
+    }
+    setAlign(align) {
+        this.patch({ align });
+    }
+    patch(data) {
+        const b = this.block();
+        this.blockChange.emit({ ...b, data: { ...b.data, ...data } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkButtonBlock, isStandalone: true, selector: "mk-button-block", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange" }, ngImport: i0, template: "<div\n  class=\"mk-button-block__preview\"\n  [class.mk-button-block__preview--center]=\"(data('align') ?? 'left') === 'center'\"\n  [class.mk-button-block__preview--right]=\"(data('align') ?? 'left') === 'right'\"\n>\n  <a\n    class=\"mk-cta\"\n    [class.mk-cta--soft]=\"data('variant') === 'soft'\"\n    [class.mk-cta--outline]=\"data('variant') === 'outline'\"\n    [attr.data-tone]=\"data('tone') ?? 'primary'\"\n    [attr.href]=\"readonly() ? (data('href') || null) : null\"\n    [attr.target]=\"readonly() ? '_blank' : null\"\n    rel=\"noopener noreferrer\"\n    data-mk-focus\n  >\n    {{ data('label') || i18n.blockEditor.blockButton }}\n  </a>\n</div>\n\n@if (!readonly()) {\n  <div class=\"mk-button-block__settings\">\n    <label class=\"mk-button-block__field\">\n      <span>{{ i18n.blockEditor.buttonLabel }}</span>\n      <input type=\"text\" [value]=\"data('label') ?? ''\" (input)=\"onLabel($event)\" />\n    </label>\n    <label class=\"mk-button-block__field\">\n      <span>{{ i18n.blockEditor.buttonLink }}</span>\n      <input type=\"url\" [value]=\"data('href') ?? ''\" placeholder=\"https://\u2026\" (input)=\"onHref($event)\" />\n    </label>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-tone\">{{ i18n.blockEditor.buttonTone }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-tone\">\n        @for (t of tones; track t) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__swatch\"\n            [attr.data-tone]=\"t\"\n            [class.mk-button-block__swatch--active]=\"(data('tone') ?? 'primary') === t\"\n            [attr.aria-pressed]=\"(data('tone') ?? 'primary') === t\"\n            [attr.aria-label]=\"toneLabel(t)\"\n            [title]=\"toneLabel(t)\"\n            (click)=\"setTone(t)\"\n          ></button>\n        }\n      </div>\n    </div>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-variant\">{{ i18n.blockEditor.buttonVariant }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-variant\">\n        @for (v of variants; track v) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__pill\"\n            [class.mk-button-block__pill--active]=\"(data('variant') ?? 'solid') === v\"\n            [attr.aria-pressed]=\"(data('variant') ?? 'solid') === v\"\n            (click)=\"setVariant(v)\"\n          >\n            {{ variantLabel(v) }}\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-align\">{{ i18n.blockEditor.alignment }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-align\">\n        @for (a of aligns; track a) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__pill\"\n            [class.mk-button-block__pill--active]=\"(data('align') ?? 'left') === a\"\n            [attr.aria-pressed]=\"(data('align') ?? 'left') === a\"\n            (click)=\"setAlign(a)\"\n          >\n            {{ alignLabel(a) }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-button-block__preview{text-align:start}.mk-button-block__preview--center{text-align:center}.mk-button-block__preview--right{text-align:right}.mk-cta{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;height:var(--mk-control-height-md);padding:0 var(--mk-space-5);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);background:var(--_main);color:var(--_contrast);font-weight:var(--mk-font-weight-medium);text-decoration:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-cta:hover{background:var(--_hover)}.mk-cta[data-tone=success]{--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}.mk-cta[data-tone=warning]{--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}.mk-cta[data-tone=danger]{--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}.mk-cta[data-tone=info]{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}.mk-cta[data-tone=neutral]{--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-cta--soft{background:var(--_subtle);color:var(--_subtle-text)}.mk-cta--soft:hover{background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-cta--outline{background:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}.mk-cta--outline:hover{background:var(--_subtle)}.mk-cta:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-button-block__settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--mk-space-3);margin-top:var(--mk-space-3);padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-button-block__field{display:flex;flex-direction:column;gap:var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs)}.mk-button-block__field input{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-button-block__row{display:flex;flex-wrap:wrap;gap:var(--mk-space-1)}.mk-button-block__swatch{width:24px;height:24px;border:2px solid transparent;border-radius:var(--mk-radius-circle);background:var(--mk-primary);cursor:pointer}.mk-button-block__swatch[data-tone=success]{background:var(--mk-success)}.mk-button-block__swatch[data-tone=warning]{background:var(--mk-warning)}.mk-button-block__swatch[data-tone=danger]{background:var(--mk-danger)}.mk-button-block__swatch[data-tone=info]{background:var(--mk-info)}.mk-button-block__swatch[data-tone=neutral]{background:var(--mk-surface-inverse)}.mk-button-block__swatch--active{border-color:var(--mk-text)}.mk-button-block__pill{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);text-transform:capitalize;cursor:pointer}.mk-button-block__pill--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-button-block__swatch:focus-visible,.mk-button-block__pill:focus-visible,.mk-button-block__field input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkButtonBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-button-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mk-button-block__preview\"\n  [class.mk-button-block__preview--center]=\"(data('align') ?? 'left') === 'center'\"\n  [class.mk-button-block__preview--right]=\"(data('align') ?? 'left') === 'right'\"\n>\n  <a\n    class=\"mk-cta\"\n    [class.mk-cta--soft]=\"data('variant') === 'soft'\"\n    [class.mk-cta--outline]=\"data('variant') === 'outline'\"\n    [attr.data-tone]=\"data('tone') ?? 'primary'\"\n    [attr.href]=\"readonly() ? (data('href') || null) : null\"\n    [attr.target]=\"readonly() ? '_blank' : null\"\n    rel=\"noopener noreferrer\"\n    data-mk-focus\n  >\n    {{ data('label') || i18n.blockEditor.blockButton }}\n  </a>\n</div>\n\n@if (!readonly()) {\n  <div class=\"mk-button-block__settings\">\n    <label class=\"mk-button-block__field\">\n      <span>{{ i18n.blockEditor.buttonLabel }}</span>\n      <input type=\"text\" [value]=\"data('label') ?? ''\" (input)=\"onLabel($event)\" />\n    </label>\n    <label class=\"mk-button-block__field\">\n      <span>{{ i18n.blockEditor.buttonLink }}</span>\n      <input type=\"url\" [value]=\"data('href') ?? ''\" placeholder=\"https://\u2026\" (input)=\"onHref($event)\" />\n    </label>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-tone\">{{ i18n.blockEditor.buttonTone }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-tone\">\n        @for (t of tones; track t) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__swatch\"\n            [attr.data-tone]=\"t\"\n            [class.mk-button-block__swatch--active]=\"(data('tone') ?? 'primary') === t\"\n            [attr.aria-pressed]=\"(data('tone') ?? 'primary') === t\"\n            [attr.aria-label]=\"toneLabel(t)\"\n            [title]=\"toneLabel(t)\"\n            (click)=\"setTone(t)\"\n          ></button>\n        }\n      </div>\n    </div>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-variant\">{{ i18n.blockEditor.buttonVariant }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-variant\">\n        @for (v of variants; track v) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__pill\"\n            [class.mk-button-block__pill--active]=\"(data('variant') ?? 'solid') === v\"\n            [attr.aria-pressed]=\"(data('variant') ?? 'solid') === v\"\n            (click)=\"setVariant(v)\"\n          >\n            {{ variantLabel(v) }}\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"mk-button-block__field\">\n      <span id=\"mk-cta-align\">{{ i18n.blockEditor.alignment }}</span>\n      <div class=\"mk-button-block__row\" role=\"group\" aria-labelledby=\"mk-cta-align\">\n        @for (a of aligns; track a) {\n          <button\n            type=\"button\"\n            class=\"mk-button-block__pill\"\n            [class.mk-button-block__pill--active]=\"(data('align') ?? 'left') === a\"\n            [attr.aria-pressed]=\"(data('align') ?? 'left') === a\"\n            (click)=\"setAlign(a)\"\n          >\n            {{ alignLabel(a) }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-button-block__preview{text-align:start}.mk-button-block__preview--center{text-align:center}.mk-button-block__preview--right{text-align:right}.mk-cta{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;height:var(--mk-control-height-md);padding:0 var(--mk-space-5);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);background:var(--_main);color:var(--_contrast);font-weight:var(--mk-font-weight-medium);text-decoration:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-cta:hover{background:var(--_hover)}.mk-cta[data-tone=success]{--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}.mk-cta[data-tone=warning]{--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}.mk-cta[data-tone=danger]{--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}.mk-cta[data-tone=info]{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}.mk-cta[data-tone=neutral]{--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-cta--soft{background:var(--_subtle);color:var(--_subtle-text)}.mk-cta--soft:hover{background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-cta--outline{background:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}.mk-cta--outline:hover{background:var(--_subtle)}.mk-cta:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-button-block__settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--mk-space-3);margin-top:var(--mk-space-3);padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-button-block__field{display:flex;flex-direction:column;gap:var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs)}.mk-button-block__field input{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit}.mk-button-block__row{display:flex;flex-wrap:wrap;gap:var(--mk-space-1)}.mk-button-block__swatch{width:24px;height:24px;border:2px solid transparent;border-radius:var(--mk-radius-circle);background:var(--mk-primary);cursor:pointer}.mk-button-block__swatch[data-tone=success]{background:var(--mk-success)}.mk-button-block__swatch[data-tone=warning]{background:var(--mk-warning)}.mk-button-block__swatch[data-tone=danger]{background:var(--mk-danger)}.mk-button-block__swatch[data-tone=info]{background:var(--mk-info)}.mk-button-block__swatch[data-tone=neutral]{background:var(--mk-surface-inverse)}.mk-button-block__swatch--active{border-color:var(--mk-text)}.mk-button-block__pill{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-size:var(--mk-font-size-xs);text-transform:capitalize;cursor:pointer}.mk-button-block__pill--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-button-block__swatch:focus-visible,.mk-button-block__pill:focus-visible,.mk-button-block__field input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
+        }], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blockChange: [{ type: i0.Output, args: ["blockChange"] }] } });
+
+/**
+ * Shares ONE capture-phase document `pointerdown` listener between every
+ * mounted {@link MkBlockInserter} (a block list renders an inserter per block,
+ * so per-instance listeners made document dispatch O(blocks)). The listener is
+ * attached lazily with the first registration and detached when the last
+ * callback unregisters. No-ops on the server (SSR).
+ */
+class MkDocumentPointerdownRegistry {
+    document = inject(DOCUMENT);
+    callbacks = new Set();
+    listener = (event) => {
+        // Copy so a callback closing (and unregistering) mid-dispatch is safe.
+        for (const callback of [...this.callbacks])
+            callback(event);
+    };
+    /** Registers a callback; returns an unregister function. */
+    register(callback) {
+        if (typeof window === 'undefined')
+            return () => { };
+        if (this.callbacks.size === 0) {
+            this.document.addEventListener('pointerdown', this.listener, true);
+        }
+        this.callbacks.add(callback);
+        return () => {
+            if (!this.callbacks.delete(callback))
+                return;
+            if (this.callbacks.size === 0) {
+                this.document.removeEventListener('pointerdown', this.listener, true);
+            }
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDocumentPointerdownRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDocumentPointerdownRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDocumentPointerdownRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Block inserter — a "＋ Add block" control that opens a filterable, keyboard
+ * accessible palette of the configured blocks, grouped by `group`. Renders
+ * either as a full button or a slim between-blocks divider trigger.
+ *
+ * Keyboard: type to filter, ArrowUp/Down to move, Enter to insert, Esc to
+ * close. Implements the combobox → listbox pattern.
+ */
+class MkBlockInserter {
+    host = inject(ElementRef);
+    searchRef = viewChild('search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchRef" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    focusTimer = null;
+    constructor() {
+        // One shared document listener for all inserters (instead of N host
+        // `(document:pointerdown)` bindings — one per rendered inserter).
+        const unregister = inject(MkDocumentPointerdownRegistry).register((event) => this.onDocumentPointerdown(event));
+        inject(DestroyRef).onDestroy(unregister);
+    }
+    ngOnDestroy() {
+        if (this.focusTimer !== null) {
+            clearTimeout(this.focusTimer);
+            this.focusTimer = null;
+        }
+    }
+    /** The blocks to offer. */
+    definitions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    /** Trigger presentation: `button` (default) or `slim` between-blocks rule. */
+    variant = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Trigger label. */
+    label = input(this.i18n.blockEditor.addBlock, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disable the trigger. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true, only blocks allowed inside columns are shown. */
+    columnsOnly = input(false, { ...(ngDevMode ? { debugName: "columnsOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted with the chosen definition. */
+    pick = output();
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    panelId = mkUniqueId('mk-inserter-panel');
+    listId = mkUniqueId('mk-inserter-list');
+    available = computed(() => this.definitions().filter((d) => (this.columnsOnly() ? d.allowedInColumns !== false : true)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
+    /** Flat, filtered list in display order (used for keyboard navigation). */
+    filtered = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        if (!q)
+            return this.available();
+        return this.available().filter((d) => {
+            const hay = [d.label, d.type, d.group ?? '', ...(d.keywords ?? [])].join(' ').toLowerCase();
+            return hay.includes(q);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /**
+     * Filtered list grouped by `group` for rendering, with each option carrying
+     * its flat index (single pass — the template previously resolved each
+     * option's index with three `indexOf` scans, O(n²) per render).
+     */
+    groups = computed(() => {
+        const map = new Map();
+        this.filtered().forEach((def, index) => {
+            const key = def.group ?? this.i18n.blockEditor.blocks;
+            (map.get(key) ?? map.set(key, []).get(key)).push({ def, index });
+        });
+        return [...map.entries()].map(([name, items]) => ({ name, items }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    optionId(index) {
+        return `${this.listId}-opt-${index}`;
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        this.open.set(true);
+        this.query.set('');
+        this.activeIndex.set(0);
+        if (this.focusTimer !== null)
+            clearTimeout(this.focusTimer);
+        this.focusTimer = setTimeout(() => {
+            this.focusTimer = null;
+            this.searchRef()?.nativeElement.focus();
+        });
+    }
+    close() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    onQuery(event) {
+        this.query.set(event.target.value);
+        this.activeIndex.set(0);
+    }
+    onKeydown(event) {
+        const list = this.filtered();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.activeIndex.update((i) => (list.length ? (i + 1) % list.length : 0));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update((i) => (list.length ? (i - 1 + list.length) % list.length : 0));
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (list[this.activeIndex()])
+                    this.choose(list[this.activeIndex()]);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    choose(def) {
+        this.pick.emit(def);
+        this.close();
+    }
+    onDocumentPointerdown(event) {
+        if (!this.open())
+            return;
+        if (!this.host.nativeElement.contains(event.target))
+            this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockInserter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBlockInserter, isStandalone: true, selector: "mk-block-inserter", inputs: { definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, columnsOnly: { classPropertyName: "columnsOnly", publicName: "columnsOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pick: "pick" }, host: { properties: { "class.mk-block-inserter--slim": "variant() === 'slim'" }, classAttribute: "mk-block-inserter" }, viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'slim') {\n  <button\n    type=\"button\"\n    class=\"mk-block-inserter__slim-trigger\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"i18n.blockEditor.insertBlockHere\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-block-inserter__plus\" aria-hidden=\"true\">\uFF0B</span>\n  </button>\n} @else {\n  <button\n    type=\"button\"\n    class=\"mk-block-inserter__trigger\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-block-inserter__plus\" aria-hidden=\"true\">\uFF0B</span>\n    {{ label() }}\n  </button>\n}\n\n@if (open()) {\n  <div class=\"mk-block-inserter__panel\" [id]=\"panelId\" role=\"dialog\" [attr.aria-label]=\"i18n.blockEditor.blockInserter\">\n    <input\n      #search\n      type=\"text\"\n      class=\"mk-block-inserter__search\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"true\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"filtered().length ? optionId(activeIndex()) : null\"\n      [placeholder]=\"i18n.blockEditor.searchBlocks\"\n      [value]=\"query()\"\n      (input)=\"onQuery($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    <div class=\"mk-block-inserter__list\" [id]=\"listId\" role=\"listbox\" [attr.aria-label]=\"i18n.blockEditor.blocks\">\n      @for (group of groups(); track group.name) {\n        <div class=\"mk-block-inserter__group\" role=\"group\" [attr.aria-label]=\"group.name\">\n          <div class=\"mk-block-inserter__group-label\">{{ group.name }}</div>\n          @for (item of group.items; track item.def.type) {\n            <button\n              type=\"button\"\n              class=\"mk-block-inserter__option\"\n              [class.mk-block-inserter__option--active]=\"item.index === activeIndex()\"\n              [id]=\"optionId(item.index)\"\n              role=\"option\"\n              [attr.aria-selected]=\"item.index === activeIndex()\"\n              (mouseenter)=\"activeIndex.set(item.index)\"\n              (click)=\"choose(item.def)\"\n            >\n              <span class=\"mk-block-inserter__icon\" aria-hidden=\"true\">{{ item.def.icon ?? '\u25A2' }}</span>\n              <span class=\"mk-block-inserter__text\">\n                <span class=\"mk-block-inserter__name\">{{ item.def.label }}</span>\n                @if (item.def.description) {\n                  <span class=\"mk-block-inserter__desc\">{{ item.def.description }}</span>\n                }\n              </span>\n            </button>\n          }\n        </div>\n      }\n      @if (!filtered().length) {\n        <p class=\"mk-block-inserter__empty\">{{ i18n.blockEditor.noBlocksMatch(query()) }}</p>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{position:relative;display:block}.mk-block-inserter__trigger{display:inline-flex;align-items:center;gap:var(--mk-space-2);height:var(--mk-control-height-md);padding:0 var(--mk-space-4);border:var(--mk-border-width) dashed var(--mk-border-strong);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-weight:var(--mk-font-weight-medium);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block-inserter__trigger:hover{color:var(--mk-primary);border-color:var(--mk-primary)}.mk-block-inserter--slim{height:0;overflow:visible}.mk-block-inserter__slim-trigger{display:flex;align-items:center;justify-content:center;width:100%;height:var(--mk-space-4);margin:calc(var(--mk-space-1) * -1) 0;border:none;background:transparent;color:var(--mk-primary);cursor:pointer;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block-inserter__slim-trigger:before{content:\"\";position:absolute;left:0;right:0;height:var(--mk-border-width-strong);background:var(--mk-primary);border-radius:var(--mk-radius-pill)}.mk-block-inserter--slim:hover .mk-block-inserter__slim-trigger,.mk-block-inserter__slim-trigger:focus-visible{opacity:1}.mk-block-inserter__slim-trigger .mk-block-inserter__plus{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--mk-radius-circle);background:var(--mk-primary);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xs)}.mk-block-inserter__trigger:focus-visible,.mk-block-inserter__slim-trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-block-inserter__panel{position:absolute;z-index:var(--mk-z-menu);top:calc(100% + var(--mk-space-2));inset-inline-start:0;width:min(320px,90vw);max-height:380px;display:flex;flex-direction:column;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);box-shadow:var(--mk-shadow-lg);overflow:hidden}.mk-block-inserter__search{margin:var(--mk-space-2);height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface-2);color:var(--mk-text);font:inherit}.mk-block-inserter__search:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-block-inserter__list{overflow-y:auto;padding:0 var(--mk-space-1) var(--mk-space-2)}.mk-block-inserter__group-label{padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-1);color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.mk-block-inserter__option{display:flex;align-items:center;gap:var(--mk-space-3);width:100%;padding:var(--mk-space-2);border:none;border-radius:var(--mk-radius-md);background:transparent;color:var(--mk-text);font:inherit;text-align:start;cursor:pointer}.mk-block-inserter__option--active{background:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-block-inserter__icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:var(--mk-radius-sm);background:var(--mk-surface-3);font-size:var(--mk-font-size-md)}.mk-block-inserter__text{display:flex;flex-direction:column;min-width:0}.mk-block-inserter__name{font-weight:var(--mk-font-weight-medium)}.mk-block-inserter__desc{color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs)}.mk-block-inserter__option--active .mk-block-inserter__desc{color:inherit}.mk-block-inserter__empty{padding:var(--mk-space-4);margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);text-align:center}@media(prefers-reduced-motion:reduce){.mk-block-inserter__slim-trigger{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockInserter, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-block-inserter', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-block-inserter',
+                        '[class.mk-block-inserter--slim]': "variant() === 'slim'",
+                    }, template: "@if (variant() === 'slim') {\n  <button\n    type=\"button\"\n    class=\"mk-block-inserter__slim-trigger\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"i18n.blockEditor.insertBlockHere\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-block-inserter__plus\" aria-hidden=\"true\">\uFF0B</span>\n  </button>\n} @else {\n  <button\n    type=\"button\"\n    class=\"mk-block-inserter__trigger\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-block-inserter__plus\" aria-hidden=\"true\">\uFF0B</span>\n    {{ label() }}\n  </button>\n}\n\n@if (open()) {\n  <div class=\"mk-block-inserter__panel\" [id]=\"panelId\" role=\"dialog\" [attr.aria-label]=\"i18n.blockEditor.blockInserter\">\n    <input\n      #search\n      type=\"text\"\n      class=\"mk-block-inserter__search\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"true\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"filtered().length ? optionId(activeIndex()) : null\"\n      [placeholder]=\"i18n.blockEditor.searchBlocks\"\n      [value]=\"query()\"\n      (input)=\"onQuery($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    <div class=\"mk-block-inserter__list\" [id]=\"listId\" role=\"listbox\" [attr.aria-label]=\"i18n.blockEditor.blocks\">\n      @for (group of groups(); track group.name) {\n        <div class=\"mk-block-inserter__group\" role=\"group\" [attr.aria-label]=\"group.name\">\n          <div class=\"mk-block-inserter__group-label\">{{ group.name }}</div>\n          @for (item of group.items; track item.def.type) {\n            <button\n              type=\"button\"\n              class=\"mk-block-inserter__option\"\n              [class.mk-block-inserter__option--active]=\"item.index === activeIndex()\"\n              [id]=\"optionId(item.index)\"\n              role=\"option\"\n              [attr.aria-selected]=\"item.index === activeIndex()\"\n              (mouseenter)=\"activeIndex.set(item.index)\"\n              (click)=\"choose(item.def)\"\n            >\n              <span class=\"mk-block-inserter__icon\" aria-hidden=\"true\">{{ item.def.icon ?? '\u25A2' }}</span>\n              <span class=\"mk-block-inserter__text\">\n                <span class=\"mk-block-inserter__name\">{{ item.def.label }}</span>\n                @if (item.def.description) {\n                  <span class=\"mk-block-inserter__desc\">{{ item.def.description }}</span>\n                }\n              </span>\n            </button>\n          }\n        </div>\n      }\n      @if (!filtered().length) {\n        <p class=\"mk-block-inserter__empty\">{{ i18n.blockEditor.noBlocksMatch(query()) }}</p>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{position:relative;display:block}.mk-block-inserter__trigger{display:inline-flex;align-items:center;gap:var(--mk-space-2);height:var(--mk-control-height-md);padding:0 var(--mk-space-4);border:var(--mk-border-width) dashed var(--mk-border-strong);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;font-weight:var(--mk-font-weight-medium);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block-inserter__trigger:hover{color:var(--mk-primary);border-color:var(--mk-primary)}.mk-block-inserter--slim{height:0;overflow:visible}.mk-block-inserter__slim-trigger{display:flex;align-items:center;justify-content:center;width:100%;height:var(--mk-space-4);margin:calc(var(--mk-space-1) * -1) 0;border:none;background:transparent;color:var(--mk-primary);cursor:pointer;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block-inserter__slim-trigger:before{content:\"\";position:absolute;left:0;right:0;height:var(--mk-border-width-strong);background:var(--mk-primary);border-radius:var(--mk-radius-pill)}.mk-block-inserter--slim:hover .mk-block-inserter__slim-trigger,.mk-block-inserter__slim-trigger:focus-visible{opacity:1}.mk-block-inserter__slim-trigger .mk-block-inserter__plus{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--mk-radius-circle);background:var(--mk-primary);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xs)}.mk-block-inserter__trigger:focus-visible,.mk-block-inserter__slim-trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-block-inserter__panel{position:absolute;z-index:var(--mk-z-menu);top:calc(100% + var(--mk-space-2));inset-inline-start:0;width:min(320px,90vw);max-height:380px;display:flex;flex-direction:column;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);box-shadow:var(--mk-shadow-lg);overflow:hidden}.mk-block-inserter__search{margin:var(--mk-space-2);height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface-2);color:var(--mk-text);font:inherit}.mk-block-inserter__search:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-block-inserter__list{overflow-y:auto;padding:0 var(--mk-space-1) var(--mk-space-2)}.mk-block-inserter__group-label{padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-1);color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.mk-block-inserter__option{display:flex;align-items:center;gap:var(--mk-space-3);width:100%;padding:var(--mk-space-2);border:none;border-radius:var(--mk-radius-md);background:transparent;color:var(--mk-text);font:inherit;text-align:start;cursor:pointer}.mk-block-inserter__option--active{background:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-block-inserter__icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:var(--mk-radius-sm);background:var(--mk-surface-3);font-size:var(--mk-font-size-md)}.mk-block-inserter__text{display:flex;flex-direction:column;min-width:0}.mk-block-inserter__name{font-weight:var(--mk-font-weight-medium)}.mk-block-inserter__desc{color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs)}.mk-block-inserter__option--active .mk-block-inserter__desc{color:inherit}.mk-block-inserter__empty{padding:var(--mk-space-4);margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);text-align:center}@media(prefers-reduced-motion:reduce){.mk-block-inserter__slim-trigger{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchRef: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], columnsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsOnly", required: false }] }], pick: [{ type: i0.Output, args: ["pick"] }] } });
+
+/**
+ * Column ratio presets offered per column count. An empty label means "equal
+ * widths" and is rendered with the localised `ratioEqual` caption.
+ */
+const RATIO_PRESETS = {
+    2: [
+        { value: '50-50', label: '50 / 50' },
+        { value: '66-33', label: '66 / 33' },
+        { value: '33-66', label: '33 / 66' },
+        { value: '75-25', label: '75 / 25' },
+        { value: '25-75', label: '25 / 75' },
+    ],
+    3: [
+        { value: '33-33-33', label: '' },
+        { value: '50-25-25', label: '50 / 25 / 25' },
+        { value: '25-50-25', label: '25 / 50 / 25' },
+    ],
+    4: [{ value: '25-25-25-25', label: '' }],
+};
+/**
+ * Recursive block list — renders an ordered array of blocks, each wrapped with
+ * move/duplicate/delete/transform chrome and the type-specific editor, with
+ * inserters between. Layout (columns) blocks recurse into nested
+ * `mk-block-list`s. Owns all structural operations for its own array and emits
+ * the new array via `blocksChange`; nested lists bubble their changes upward.
+ */
+class MkBlockList {
+    ctx = inject(MkBlockEditorContext);
+    i18n = inject(MK_I18N);
+    /** The blocks to render. */
+    blocks = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    /** Nesting depth (0 = top level). Used to forbid columns-in-columns. */
+    depth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    /** Restrict the inserter to column-safe blocks. */
+    inColumn = input(false, { ...(ngDevMode ? { debugName: "inColumn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted with the full, updated array on any structural or content change. */
+    blocksChange = output();
+    /** Which block's toolbar menu is open (by index), or -1. */
+    menuOpen = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    ratioPresets = RATIO_PRESETS;
+    definition(type) {
+        return this.ctx.definitionFor(type);
+    }
+    // --- content updates ------------------------------------------------------
+    update(index, block) {
+        const next = [...this.blocks()];
+        next[index] = block;
+        this.blocksChange.emit(next);
+    }
+    onColumnChange(blockIndex, colIndex, children) {
+        const block = this.blocks()[blockIndex];
+        const columns = [...(block.children ?? [])];
+        columns[colIndex] = { ...columns[colIndex], children };
+        this.update(blockIndex, { ...block, children: columns });
+    }
+    // --- structural ops -------------------------------------------------------
+    insertAt(index, def) {
+        const block = def.create();
+        const next = [...this.blocks()];
+        next.splice(index, 0, block);
+        this.blocksChange.emit(next);
+        this.ctx.announce(this.i18n.blockEditor.blockAdded(def.label));
+        this.ctx.focusBlock(block.id, 'start');
+    }
+    duplicate(index) {
+        const clone = mkCloneBlock(this.blocks()[index]);
+        const next = [...this.blocks()];
+        next.splice(index + 1, 0, clone);
+        this.blocksChange.emit(next);
+        this.menuOpen.set(-1);
+        this.ctx.announce(this.i18n.blockEditor.blockDuplicated);
+    }
+    remove(index) {
+        const removed = this.blocks()[index];
+        const next = this.blocks().filter((_, i) => i !== index);
+        this.blocksChange.emit(next);
+        this.menuOpen.set(-1);
+        this.ctx.announce(this.i18n.blockEditor.blockDeleted(this.ctx.labelFor(removed.type)));
+        const focusTarget = next[index - 1] ?? next[index];
+        if (focusTarget)
+            this.ctx.focusBlock(focusTarget.id, 'end');
+    }
+    move(index, delta) {
+        const target = index + delta;
+        if (target < 0 || target >= this.blocks().length)
+            return;
+        const next = [...this.blocks()];
+        [next[index], next[target]] = [next[target], next[index]];
+        this.blocksChange.emit(next);
+        this.ctx.announce(delta < 0 ? this.i18n.blockEditor.blockMovedUp : this.i18n.blockEditor.blockMovedDown);
+    }
+    transform(index, type) {
+        const def = this.definition(type);
+        if (!def)
+            return;
+        const source = this.blocks()[index];
+        const created = def.create();
+        // Carry rich-text HTML across text-type transforms where it makes sense.
+        const carriesHtml = 'html' in created.data && typeof source.data['html'] === 'string';
+        const data = carriesHtml ? { ...created.data, html: source.data['html'] } : created.data;
+        const next = [...this.blocks()];
+        next[index] = { ...created, id: source.id, data };
+        this.blocksChange.emit(next);
+        this.menuOpen.set(-1);
+        this.ctx.announce(this.i18n.blockEditor.turnedInto(def.label));
+    }
+    // --- text-block keyboard intents -----------------------------------------
+    onSplit(index, split) {
+        const current = this.blocks()[index];
+        const paragraphDef = this.definition('paragraph');
+        const created = paragraphDef ? paragraphDef.create() : this.fallbackParagraph();
+        const newBlock = { ...created, data: { ...created.data, html: split.after } };
+        const next = [...this.blocks()];
+        next[index] = { ...current, data: { ...current.data, html: split.before } };
+        next.splice(index + 1, 0, newBlock);
+        this.blocksChange.emit(next);
+        this.ctx.focusBlock(newBlock.id, 'start');
+    }
+    onMergeBack(index) {
+        if (index <= 0)
+            return;
+        const prev = this.blocks()[index - 1];
+        this.remove(index);
+        this.ctx.focusBlock(prev.id, 'end');
+    }
+    onArrowOut(index, dir) {
+        const target = dir === 'up' ? index - 1 : index + 1;
+        const block = this.blocks()[target];
+        if (block)
+            this.ctx.focusBlock(block.id, dir === 'up' ? 'end' : 'start');
+    }
+    // --- columns helpers ------------------------------------------------------
+    setColumnCount(index, count) {
+        const block = this.blocks()[index];
+        const current = [...(block.children ?? [])];
+        while (current.length < count)
+            current.push({ id: mkBlockId('column'), type: 'column', data: {}, children: [] });
+        current.length = count;
+        const presets = RATIO_PRESETS[count] ?? RATIO_PRESETS[2];
+        this.update(index, {
+            ...block,
+            data: { ...block.data, count, ratio: presets[0].value },
+            children: current,
+        });
+    }
+    setColumnData(index, patch) {
+        const block = this.blocks()[index];
+        this.update(index, { ...block, data: { ...block.data, ...patch } });
+    }
+    onRatioChange(index, event) {
+        this.setColumnData(index, { ratio: event.target.value });
+    }
+    onGapChange(index, event) {
+        this.setColumnData(index, { gap: Number(event.target.value) });
+    }
+    onAlignChange(index, event) {
+        this.setColumnData(index, { align: event.target.value });
+    }
+    onJustifyChange(index, event) {
+        this.setColumnData(index, { justify: event.target.value });
+    }
+    gridColumns(block) {
+        const ratio = String(block.data['ratio'] ?? '');
+        const parts = ratio.split('-').map((n) => parseFloat(n)).filter((n) => n > 0);
+        if (parts.length >= 2)
+            return parts.map((n) => `${n}fr`).join(' ');
+        return `repeat(${block.children?.length ?? 2}, 1fr)`;
+    }
+    gridGap(block) {
+        const g = Math.max(0, Math.min(8, Number(block.data['gap']) || 4));
+        return `var(--mk-space-${g})`;
+    }
+    justifyValue(block) {
+        const map = {
+            start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between',
+        };
+        return map[String(block.data['justify'] ?? 'start')] ?? 'flex-start';
+    }
+    // --- toolbar menu ---------------------------------------------------------
+    toggleMenu(index) {
+        this.menuOpen.update((i) => (i === index ? -1 : index));
+    }
+    /** Escape inside the options popup closes it and restores the toggle's focus. */
+    closeMenu(trigger, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.menuOpen.set(-1);
+        trigger.focus();
+    }
+    transformsFor(type) {
+        return this.definition(type)?.transforms ?? [];
+    }
+    fallbackParagraph() {
+        return { id: mkBlockId('paragraph'), type: 'paragraph', data: { html: '' } };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBlockList, isStandalone: true, selector: "mk-block-list", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, inColumn: { classPropertyName: "inColumn", publicName: "inColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blocksChange: "blocksChange" }, host: { classAttribute: "mk-block-list" }, ngImport: i0, template: "@let readonly = ctx.readonly() || ctx.disabled();\n\n@for (block of blocks(); track block.id; let i = $index; let last = $last) {\n  @if (!readonly) {\n    <mk-block-inserter\n      variant=\"slim\"\n      [definitions]=\"ctx.definitions()\"\n      [columnsOnly]=\"inColumn()\"\n      (pick)=\"insertAt(i, $event)\"\n    />\n  }\n\n  <div class=\"mk-block\" [attr.data-block-id]=\"block.id\" [class.mk-block--readonly]=\"readonly\">\n    @if (!readonly) {\n      <div class=\"mk-block__gutter\" aria-hidden=\"false\">\n        <button\n          type=\"button\"\n          class=\"mk-block__move\"\n          [disabled]=\"i === 0\"\n          [attr.aria-label]=\"i18n.blockEditor.moveBlockUp\"\n          (click)=\"move(i, -1)\"\n        >\n          \u25B2\n        </button>\n        <span class=\"mk-block__handle\" [title]=\"i18n.blockEditor.dragHandle\" aria-hidden=\"true\">\u283F</span>\n        <button\n          type=\"button\"\n          class=\"mk-block__move\"\n          [disabled]=\"last\"\n          [attr.aria-label]=\"i18n.blockEditor.moveBlockDown\"\n          (click)=\"move(i, 1)\"\n        >\n          \u25BC\n        </button>\n      </div>\n\n      <div class=\"mk-block__bar\">\n        <span class=\"mk-block__type\">\n          <span class=\"mk-block__type-icon\" aria-hidden=\"true\">{{ definition(block.type)?.icon }}</span>\n          {{ definition(block.type)?.label ?? block.type }}\n        </span>\n        <div class=\"mk-block__actions\">\n          <button\n            #menuTrigger\n            type=\"button\"\n            class=\"mk-block__action\"\n            [attr.aria-expanded]=\"menuOpen() === i\"\n            [attr.aria-controls]=\"'mk-block-menu-' + block.id\"\n            [attr.aria-label]=\"i18n.blockEditor.blockOptions\"\n            (click)=\"toggleMenu(i)\"\n          >\n            \u22EF\n          </button>\n          @if (menuOpen() === i) {\n            <div\n              class=\"mk-block__menu\"\n              [id]=\"'mk-block-menu-' + block.id\"\n              (keydown.escape)=\"closeMenu(menuTrigger, $event)\"\n            >\n              <button type=\"button\" (click)=\"duplicate(i)\">{{ i18n.blockEditor.duplicate }}</button>\n              @for (t of transformsFor(block.type); track t) {\n                <button type=\"button\" (click)=\"transform(i, t)\">\n                  {{ i18n.blockEditor.turnInto(definition(t)?.label ?? t) }}\n                </button>\n              }\n              <button type=\"button\" class=\"mk-block__menu-danger\" (click)=\"remove(i)\">\n                {{ i18n.blockEditor.remove }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div class=\"mk-block__body\">\n      @switch (block.type) {\n        @case ('paragraph') {\n          <mk-paragraph-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"ctx.placeholder()\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('heading') {\n          <mk-heading-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('quote') {\n          <mk-quote-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('list') {\n          <mk-list-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('code') {\n          <mk-code-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('image') {\n          <mk-image-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('embed') {\n          <mk-embed-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('button') {\n          <mk-button-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('divider') {\n          <hr class=\"mk-block__divider\" data-mk-focus tabindex=\"-1\" />\n        }\n        @case ('columns') {\n          @if (!readonly) {\n            <div class=\"mk-columns-settings\" role=\"group\" [attr.aria-label]=\"i18n.blockEditor.columnSettings\">\n              <label>\n                <span>{{ i18n.blockEditor.columns }}</span>\n                <span class=\"mk-columns-settings__counts\">\n                  @for (n of [2, 3, 4]; track n) {\n                    <button\n                      type=\"button\"\n                      [class.mk-columns-settings__count--active]=\"(block.data['count'] || 2) === n\"\n                      [attr.aria-pressed]=\"(block.data['count'] || 2) === n\"\n                      (click)=\"setColumnCount(i, n)\"\n                    >\n                      {{ n }}\n                    </button>\n                  }\n                </span>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.ratio }}</span>\n                <select [value]=\"block.data['ratio']\" (change)=\"onRatioChange(i, $event)\">\n                  @for (preset of ratioPresets[block.data['count'] || 2]; track preset.value) {\n                    <option [value]=\"preset.value\">{{ preset.label || i18n.blockEditor.ratioEqual }}</option>\n                  }\n                </select>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.gap }}</span>\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"8\"\n                  [value]=\"block.data['gap'] ?? 4\"\n                  (input)=\"onGapChange(i, $event)\"\n                />\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.align }}</span>\n                <select [value]=\"block.data['align'] ?? 'stretch'\" (change)=\"onAlignChange(i, $event)\">\n                  <option value=\"stretch\">{{ i18n.blockEditor.alignStretch }}</option>\n                  <option value=\"start\">{{ i18n.blockEditor.alignTop }}</option>\n                  <option value=\"center\">{{ i18n.blockEditor.alignMiddle }}</option>\n                  <option value=\"end\">{{ i18n.blockEditor.alignBottom }}</option>\n                </select>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.justify }}</span>\n                <select [value]=\"block.data['justify'] ?? 'start'\" (change)=\"onJustifyChange(i, $event)\">\n                  <option value=\"start\">{{ i18n.blockEditor.justifyStart }}</option>\n                  <option value=\"center\">{{ i18n.blockEditor.justifyCenter }}</option>\n                  <option value=\"end\">{{ i18n.blockEditor.justifyEnd }}</option>\n                  <option value=\"between\">{{ i18n.blockEditor.justifyBetween }}</option>\n                </select>\n              </label>\n            </div>\n          }\n          <div\n            class=\"mk-columns\"\n            [style.grid-template-columns]=\"gridColumns(block)\"\n            [style.gap]=\"gridGap(block)\"\n            [style.align-items]=\"block.data['align'] ?? 'stretch'\"\n            [style.justify-content]=\"justifyValue(block)\"\n          >\n            @for (col of block.children ?? []; track col.id; let c = $index) {\n              <div class=\"mk-column\">\n                <mk-block-list\n                  [blocks]=\"col.children ?? []\"\n                  [depth]=\"depth() + 1\"\n                  [inColumn]=\"true\"\n                  (blocksChange)=\"onColumnChange(i, c, $event)\"\n                />\n              </div>\n            }\n          </div>\n        }\n        @default {\n          <p class=\"mk-block__unknown\">{{ i18n.blockEditor.unknownBlock(block.type) }}</p>\n        }\n      }\n    </div>\n  </div>\n}\n\n@if (!readonly) {\n  <mk-block-inserter\n    class=\"mk-block-list__add\"\n    [definitions]=\"ctx.definitions()\"\n    [columnsOnly]=\"inColumn()\"\n    [label]=\"blocks().length ? i18n.blockEditor.addBlock : i18n.blockEditor.addFirstBlock\"\n    (pick)=\"insertAt(blocks().length, $event)\"\n  />\n}\n", styles: [":host{display:block}.mk-block{position:relative;padding:var(--mk-space-2);padding-inline-start:var(--mk-space-8);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block--readonly{padding-inline-start:var(--mk-space-2)}.mk-block:hover,.mk-block:focus-within{border-color:var(--mk-border-subtle);background:var(--mk-surface-2)}.mk-block__gutter{position:absolute;top:var(--mk-space-2);inset-inline-start:0;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block:hover .mk-block__gutter,.mk-block:focus-within .mk-block__gutter{opacity:1}.mk-block__move{width:22px;height:18px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);line-height:1;cursor:pointer}.mk-block__move:hover:not(:disabled){background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-block__move:disabled{opacity:.3;cursor:not-allowed}.mk-block__handle{color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm);cursor:grab}.mk-block__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1);opacity:0;height:20px;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block:hover .mk-block__bar,.mk-block:focus-within .mk-block__bar{opacity:1}.mk-block__type{display:inline-flex;align-items:center;gap:var(--mk-space-1);color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}.mk-block__type-icon{font-size:var(--mk-font-size-sm)}.mk-block__actions{position:relative}.mk-block__action{width:24px;height:20px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-block__action:hover{background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-block__menu{position:absolute;z-index:var(--mk-z-menu);top:calc(100% + var(--mk-space-1));inset-inline-end:0;display:flex;flex-direction:column;min-width:180px;padding:var(--mk-space-1);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);box-shadow:var(--mk-shadow-lg)}.mk-block__menu button{padding:var(--mk-space-2) var(--mk-space-3);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-sm);text-align:start;cursor:pointer}.mk-block__menu button:hover{background:var(--mk-hover-overlay)}.mk-block__menu-danger{color:var(--mk-danger-text)}.mk-block__divider{height:0;margin:var(--mk-space-3) 0;border:none;border-top:var(--mk-border-width-strong) solid var(--mk-border-strong)}.mk-block__unknown{padding:var(--mk-space-3);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--mk-radius-md);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-columns{display:grid;margin:var(--mk-space-2) 0}.mk-column{min-width:0;padding:var(--mk-space-1);border:var(--mk-border-width) dashed var(--mk-border-subtle);border-radius:var(--mk-radius-sm)}.mk-columns-settings{display:flex;flex-wrap:wrap;gap:var(--mk-space-3);margin-bottom:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-columns-settings label{display:flex;flex-direction:column;gap:var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs)}.mk-columns-settings select,.mk-columns-settings input[type=range]{height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-xs)}.mk-columns-settings__counts{display:inline-flex;gap:2px}.mk-columns-settings__counts button{width:28px;height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;cursor:pointer}.mk-columns-settings__count--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}@media(max-width:640px){.mk-columns{grid-template-columns:1fr!important}}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-block,.mk-block__gutter,.mk-block__bar{transition:none}}\n"], dependencies: [{ kind: "component", type: MkBlockList, selector: "mk-block-list", inputs: ["blocks", "depth", "inColumn"], outputs: ["blocksChange"] }, { kind: "component", type: MkParagraphBlock, selector: "mk-paragraph-block", inputs: ["block", "readonly", "placeholder"], outputs: ["blockChange", "splitAt", "removeEmpty", "arrowOut"] }, { kind: "component", type: MkHeadingBlock, selector: "mk-heading-block", inputs: ["block", "readonly"], outputs: ["blockChange", "splitAt", "removeEmpty", "arrowOut"] }, { kind: "component", type: MkQuoteBlock, selector: "mk-quote-block", inputs: ["block", "readonly"], outputs: ["blockChange", "splitAt", "removeEmpty", "arrowOut"] }, { kind: "component", type: MkListBlock, selector: "mk-list-block", inputs: ["block", "readonly"], outputs: ["blockChange"] }, { kind: "component", type: MkCodeBlock, selector: "mk-code-block", inputs: ["block", "readonly"], outputs: ["blockChange"] }, { kind: "component", type: MkImageBlock, selector: "mk-image-block", inputs: ["block", "readonly"], outputs: ["blockChange"] }, { kind: "component", type: MkEmbedBlock, selector: "mk-embed-block", inputs: ["block", "readonly"], outputs: ["blockChange"] }, { kind: "component", type: MkButtonBlock, selector: "mk-button-block", inputs: ["block", "readonly"], outputs: ["blockChange"] }, { kind: "component", type: MkBlockInserter, selector: "mk-block-inserter", inputs: ["definitions", "variant", "label", "disabled", "columnsOnly"], outputs: ["pick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-block-list', imports: [
+                        MkParagraphBlock,
+                        MkHeadingBlock,
+                        MkQuoteBlock,
+                        MkListBlock,
+                        MkCodeBlock,
+                        MkImageBlock,
+                        MkEmbedBlock,
+                        MkButtonBlock,
+                        MkBlockInserter,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-block-list' }, template: "@let readonly = ctx.readonly() || ctx.disabled();\n\n@for (block of blocks(); track block.id; let i = $index; let last = $last) {\n  @if (!readonly) {\n    <mk-block-inserter\n      variant=\"slim\"\n      [definitions]=\"ctx.definitions()\"\n      [columnsOnly]=\"inColumn()\"\n      (pick)=\"insertAt(i, $event)\"\n    />\n  }\n\n  <div class=\"mk-block\" [attr.data-block-id]=\"block.id\" [class.mk-block--readonly]=\"readonly\">\n    @if (!readonly) {\n      <div class=\"mk-block__gutter\" aria-hidden=\"false\">\n        <button\n          type=\"button\"\n          class=\"mk-block__move\"\n          [disabled]=\"i === 0\"\n          [attr.aria-label]=\"i18n.blockEditor.moveBlockUp\"\n          (click)=\"move(i, -1)\"\n        >\n          \u25B2\n        </button>\n        <span class=\"mk-block__handle\" [title]=\"i18n.blockEditor.dragHandle\" aria-hidden=\"true\">\u283F</span>\n        <button\n          type=\"button\"\n          class=\"mk-block__move\"\n          [disabled]=\"last\"\n          [attr.aria-label]=\"i18n.blockEditor.moveBlockDown\"\n          (click)=\"move(i, 1)\"\n        >\n          \u25BC\n        </button>\n      </div>\n\n      <div class=\"mk-block__bar\">\n        <span class=\"mk-block__type\">\n          <span class=\"mk-block__type-icon\" aria-hidden=\"true\">{{ definition(block.type)?.icon }}</span>\n          {{ definition(block.type)?.label ?? block.type }}\n        </span>\n        <div class=\"mk-block__actions\">\n          <button\n            #menuTrigger\n            type=\"button\"\n            class=\"mk-block__action\"\n            [attr.aria-expanded]=\"menuOpen() === i\"\n            [attr.aria-controls]=\"'mk-block-menu-' + block.id\"\n            [attr.aria-label]=\"i18n.blockEditor.blockOptions\"\n            (click)=\"toggleMenu(i)\"\n          >\n            \u22EF\n          </button>\n          @if (menuOpen() === i) {\n            <div\n              class=\"mk-block__menu\"\n              [id]=\"'mk-block-menu-' + block.id\"\n              (keydown.escape)=\"closeMenu(menuTrigger, $event)\"\n            >\n              <button type=\"button\" (click)=\"duplicate(i)\">{{ i18n.blockEditor.duplicate }}</button>\n              @for (t of transformsFor(block.type); track t) {\n                <button type=\"button\" (click)=\"transform(i, t)\">\n                  {{ i18n.blockEditor.turnInto(definition(t)?.label ?? t) }}\n                </button>\n              }\n              <button type=\"button\" class=\"mk-block__menu-danger\" (click)=\"remove(i)\">\n                {{ i18n.blockEditor.remove }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <div class=\"mk-block__body\">\n      @switch (block.type) {\n        @case ('paragraph') {\n          <mk-paragraph-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"ctx.placeholder()\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('heading') {\n          <mk-heading-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('quote') {\n          <mk-quote-block\n            [block]=\"block\"\n            [readonly]=\"readonly\"\n            (blockChange)=\"update(i, $event)\"\n            (splitAt)=\"onSplit(i, $event)\"\n            (removeEmpty)=\"onMergeBack(i)\"\n            (arrowOut)=\"onArrowOut(i, $event)\"\n          />\n        }\n        @case ('list') {\n          <mk-list-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('code') {\n          <mk-code-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('image') {\n          <mk-image-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('embed') {\n          <mk-embed-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('button') {\n          <mk-button-block [block]=\"block\" [readonly]=\"readonly\" (blockChange)=\"update(i, $event)\" />\n        }\n        @case ('divider') {\n          <hr class=\"mk-block__divider\" data-mk-focus tabindex=\"-1\" />\n        }\n        @case ('columns') {\n          @if (!readonly) {\n            <div class=\"mk-columns-settings\" role=\"group\" [attr.aria-label]=\"i18n.blockEditor.columnSettings\">\n              <label>\n                <span>{{ i18n.blockEditor.columns }}</span>\n                <span class=\"mk-columns-settings__counts\">\n                  @for (n of [2, 3, 4]; track n) {\n                    <button\n                      type=\"button\"\n                      [class.mk-columns-settings__count--active]=\"(block.data['count'] || 2) === n\"\n                      [attr.aria-pressed]=\"(block.data['count'] || 2) === n\"\n                      (click)=\"setColumnCount(i, n)\"\n                    >\n                      {{ n }}\n                    </button>\n                  }\n                </span>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.ratio }}</span>\n                <select [value]=\"block.data['ratio']\" (change)=\"onRatioChange(i, $event)\">\n                  @for (preset of ratioPresets[block.data['count'] || 2]; track preset.value) {\n                    <option [value]=\"preset.value\">{{ preset.label || i18n.blockEditor.ratioEqual }}</option>\n                  }\n                </select>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.gap }}</span>\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"8\"\n                  [value]=\"block.data['gap'] ?? 4\"\n                  (input)=\"onGapChange(i, $event)\"\n                />\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.align }}</span>\n                <select [value]=\"block.data['align'] ?? 'stretch'\" (change)=\"onAlignChange(i, $event)\">\n                  <option value=\"stretch\">{{ i18n.blockEditor.alignStretch }}</option>\n                  <option value=\"start\">{{ i18n.blockEditor.alignTop }}</option>\n                  <option value=\"center\">{{ i18n.blockEditor.alignMiddle }}</option>\n                  <option value=\"end\">{{ i18n.blockEditor.alignBottom }}</option>\n                </select>\n              </label>\n              <label>\n                <span>{{ i18n.blockEditor.justify }}</span>\n                <select [value]=\"block.data['justify'] ?? 'start'\" (change)=\"onJustifyChange(i, $event)\">\n                  <option value=\"start\">{{ i18n.blockEditor.justifyStart }}</option>\n                  <option value=\"center\">{{ i18n.blockEditor.justifyCenter }}</option>\n                  <option value=\"end\">{{ i18n.blockEditor.justifyEnd }}</option>\n                  <option value=\"between\">{{ i18n.blockEditor.justifyBetween }}</option>\n                </select>\n              </label>\n            </div>\n          }\n          <div\n            class=\"mk-columns\"\n            [style.grid-template-columns]=\"gridColumns(block)\"\n            [style.gap]=\"gridGap(block)\"\n            [style.align-items]=\"block.data['align'] ?? 'stretch'\"\n            [style.justify-content]=\"justifyValue(block)\"\n          >\n            @for (col of block.children ?? []; track col.id; let c = $index) {\n              <div class=\"mk-column\">\n                <mk-block-list\n                  [blocks]=\"col.children ?? []\"\n                  [depth]=\"depth() + 1\"\n                  [inColumn]=\"true\"\n                  (blocksChange)=\"onColumnChange(i, c, $event)\"\n                />\n              </div>\n            }\n          </div>\n        }\n        @default {\n          <p class=\"mk-block__unknown\">{{ i18n.blockEditor.unknownBlock(block.type) }}</p>\n        }\n      }\n    </div>\n  </div>\n}\n\n@if (!readonly) {\n  <mk-block-inserter\n    class=\"mk-block-list__add\"\n    [definitions]=\"ctx.definitions()\"\n    [columnsOnly]=\"inColumn()\"\n    [label]=\"blocks().length ? i18n.blockEditor.addBlock : i18n.blockEditor.addFirstBlock\"\n    (pick)=\"insertAt(blocks().length, $event)\"\n  />\n}\n", styles: [":host{display:block}.mk-block{position:relative;padding:var(--mk-space-2);padding-inline-start:var(--mk-space-8);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block--readonly{padding-inline-start:var(--mk-space-2)}.mk-block:hover,.mk-block:focus-within{border-color:var(--mk-border-subtle);background:var(--mk-surface-2)}.mk-block__gutter{position:absolute;top:var(--mk-space-2);inset-inline-start:0;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block:hover .mk-block__gutter,.mk-block:focus-within .mk-block__gutter{opacity:1}.mk-block__move{width:22px;height:18px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);line-height:1;cursor:pointer}.mk-block__move:hover:not(:disabled){background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-block__move:disabled{opacity:.3;cursor:not-allowed}.mk-block__handle{color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm);cursor:grab}.mk-block__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1);opacity:0;height:20px;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-block:hover .mk-block__bar,.mk-block:focus-within .mk-block__bar{opacity:1}.mk-block__type{display:inline-flex;align-items:center;gap:var(--mk-space-1);color:var(--mk-text-subtle);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}.mk-block__type-icon{font-size:var(--mk-font-size-sm)}.mk-block__actions{position:relative}.mk-block__action{width:24px;height:20px;border:none;border-radius:var(--mk-radius-xs);background:transparent;color:var(--mk-text-muted);cursor:pointer}.mk-block__action:hover{background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-block__menu{position:absolute;z-index:var(--mk-z-menu);top:calc(100% + var(--mk-space-1));inset-inline-end:0;display:flex;flex-direction:column;min-width:180px;padding:var(--mk-space-1);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);box-shadow:var(--mk-shadow-lg)}.mk-block__menu button{padding:var(--mk-space-2) var(--mk-space-3);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-sm);text-align:start;cursor:pointer}.mk-block__menu button:hover{background:var(--mk-hover-overlay)}.mk-block__menu-danger{color:var(--mk-danger-text)}.mk-block__divider{height:0;margin:var(--mk-space-3) 0;border:none;border-top:var(--mk-border-width-strong) solid var(--mk-border-strong)}.mk-block__unknown{padding:var(--mk-space-3);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--mk-radius-md);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-columns{display:grid;margin:var(--mk-space-2) 0}.mk-column{min-width:0;padding:var(--mk-space-1);border:var(--mk-border-width) dashed var(--mk-border-subtle);border-radius:var(--mk-radius-sm)}.mk-columns-settings{display:flex;flex-wrap:wrap;gap:var(--mk-space-3);margin-bottom:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);background:var(--mk-surface-2)}.mk-columns-settings label{display:flex;flex-direction:column;gap:var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs)}.mk-columns-settings select,.mk-columns-settings input[type=range]{height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-xs)}.mk-columns-settings__counts{display:inline-flex;gap:2px}.mk-columns-settings__counts button{width:28px;height:var(--mk-control-height-sm);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:var(--mk-text-muted);font:inherit;cursor:pointer}.mk-columns-settings__count--active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-primary-contrast)}@media(max-width:640px){.mk-columns{grid-template-columns:1fr!important}}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-block,.mk-block__gutter,.mk-block__bar{transition:none}}\n"] }]
+        }], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], inColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "inColumn", required: false }] }], blocksChange: [{ type: i0.Output, args: ["blocksChange"] }] } });
+
+/**
+ * HTML → {@link MkBlockDocument} parser — the inverse of {@link mkBlocksToHtml}.
+ *
+ * Lets the block editor back a **string-typed richtext field** (e.g. a CMS
+ * `richtext` column that stores an HTML string): seed the editor from stored
+ * HTML, and serialise back to HTML on change. Best-effort and forgiving — any
+ * HTML parses, with unrecognised block-level wrappers recursed into and loose
+ * inline runs grouped into paragraphs. Round-trips the blocks `mkBlocksToHtml`
+ * emits (paragraph, heading, list, quote, code, image, divider, button, embed,
+ * columns).
+ *
+ * Uses the DOM (`DOMParser`) — available in browsers and jsdom. In a pure Node
+ * context without a DOM it falls back to a single sanitised paragraph.
+ */
+const HEADING_LEVEL = {
+    h1: 1, h2: 2, h3: 3, h4: 4, h5: 4, h6: 4,
+};
+/** Block-level tags handled as their own block (others recurse or group). */
+const BLOCK_TAGS = new Set([
+    'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'blockquote', 'pre',
+    'figure', 'img', 'hr', 'div', 'section', 'article', 'table',
+]);
+function block(type, data, children) {
+    const b = { id: mkBlockId(type), type, data };
+    if (children)
+        b.children = children;
+    return b;
+}
+function parseRoot(html) {
+    if (typeof DOMParser !== 'undefined') {
+        return new DOMParser().parseFromString(html, 'text/html').body;
+    }
+    if (typeof document !== 'undefined') {
+        const tpl = document.createElement('template');
+        tpl.innerHTML = html;
+        return tpl.content;
+    }
+    return null;
+}
+const TEXT_NODE = 3;
+const ELEMENT_NODE = 1;
+function isBlockElement(node) {
+    return (node.nodeType === ELEMENT_NODE &&
+        BLOCK_TAGS.has(node.tagName.toLowerCase()));
+}
+/** HTML for one node in an inline run (encoded text, element markup). */
+function nodeHtml(node) {
+    if (node.nodeType === TEXT_NODE)
+        return mkEscapeHtml(node.textContent ?? '');
+    if (node.nodeType === ELEMENT_NODE)
+        return node.outerHTML;
+    return '';
+}
+function style(el, prop) {
+    return el.style?.getPropertyValue(prop)?.trim() ?? '';
+}
+/** Walk a parent's children into blocks, grouping loose inline runs. */
+function collectBlocks(root, out) {
+    let inline = [];
+    const flush = () => {
+        if (!inline.length)
+            return;
+        const html = inline.map(nodeHtml).join('').trim();
+        if (html)
+            out.push(block('paragraph', { html: sanitizeInlineHtml(html) }));
+        inline = [];
+    };
+    for (const node of Array.from(root.childNodes)) {
+        if (isBlockElement(node)) {
+            flush();
+            appendElement(node, out);
+        }
+        else if (node.nodeType === TEXT_NODE && !node.textContent?.trim()) {
+            // ignore whitespace between blocks
+        }
+        else {
+            inline.push(node);
+        }
+    }
+    flush();
+}
+/** Map a block-level element to one or more blocks (appended to `out`). */
+function appendElement(el, out) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'p') {
+        out.push(block('paragraph', { html: sanitizeInlineHtml(el.innerHTML) }));
+        return;
+    }
+    if (tag in HEADING_LEVEL) {
+        out.push(block('heading', {
+            level: HEADING_LEVEL[tag],
+            html: sanitizeInlineHtml(el.innerHTML),
+        }));
+        return;
+    }
+    if (tag === 'ul' || tag === 'ol') {
+        const items = Array.from(el.querySelectorAll(':scope > li')).map((li) => sanitizeInlineHtml(li.innerHTML));
+        out.push(block('list', { ordered: tag === 'ol', items: items.length ? items : [''] }));
+        return;
+    }
+    if (tag === 'blockquote') {
+        const cite = el.querySelector('cite');
+        const p = el.querySelector('p');
+        const body = p ? p.innerHTML : el.innerHTML;
+        out.push(block('quote', {
+            html: sanitizeInlineHtml(body),
+            citation: cite?.textContent?.trim() ?? '',
+        }));
+        return;
+    }
+    if (tag === 'pre') {
+        const codeEl = el.querySelector('code') ?? el;
+        const lang = (codeEl.className.match(/language-([\w-]+)/) ?? [])[1] ?? '';
+        out.push(block('code', { code: codeEl.textContent ?? '', language: lang }));
+        return;
+    }
+    if (tag === 'figure' || tag === 'img') {
+        const img = tag === 'img' ? el : el.querySelector('img');
+        if (img) {
+            const width = parseInt(style(img, 'max-width'), 10);
+            const align = style(el, 'text-align') === 'left'
+                ? 'left'
+                : style(el, 'text-align') === 'right'
+                    ? 'right'
+                    : 'center';
+            out.push(block('image', {
+                src: img.getAttribute('src') ?? '',
+                alt: img.getAttribute('alt') ?? '',
+                caption: el.querySelector('figcaption')?.textContent?.trim() ?? '',
+                align,
+                width: Number.isFinite(width) && width > 0 ? width : 100,
+            }));
+        }
+        return;
+    }
+    if (tag === 'hr') {
+        out.push(block('divider', {}));
+        return;
+    }
+    // <div> / generic containers: recognise the wrappers mkBlocksToHtml emits,
+    // otherwise recurse into the children.
+    if (el.classList.contains('mk-columns')) {
+        const columns = Array.from(el.querySelectorAll(':scope > .mk-column')).map((colEl) => {
+            const children = [];
+            collectBlocks(colEl, children);
+            return block('column', {}, children);
+        });
+        out.push(block('columns', { count: columns.length || 2 }, columns));
+        return;
+    }
+    const cta = el.querySelector(':scope > a.mk-cta, a.mk-cta');
+    if (cta) {
+        const tone = (cta.className.match(/mk-cta--([\w-]+)/) ?? [])[1] ?? 'primary';
+        out.push(block('button', {
+            label: cta.textContent?.trim() ?? 'Button',
+            href: cta.getAttribute('href') ?? '',
+            align: style(el, 'text-align') || 'left',
+            tone,
+        }));
+        return;
+    }
+    if (el.classList.contains('mk-embed')) {
+        const iframe = el.querySelector('iframe');
+        out.push(block('embed', {
+            url: '',
+            embedUrl: iframe?.getAttribute('src') ?? '',
+            aspectRatio: 16 / 9,
+        }));
+        return;
+    }
+    // Unknown container — recurse into its children.
+    collectBlocks(el, out);
+}
+/**
+ * Parse an HTML string into a {@link MkBlockDocument}. Empty / whitespace input
+ * yields an empty document.
+ */
+function mkHtmlToBlocks(html) {
+    const source = String(html ?? '');
+    if (!source.trim())
+        return mkEmptyDocument();
+    const root = parseRoot(source);
+    if (!root) {
+        // No DOM (server) — degrade to a single sanitised paragraph.
+        return {
+            version: MK_BLOCK_DOCUMENT_VERSION,
+            blocks: [block('paragraph', { html: sanitizeInlineHtml(source) })],
+        };
+    }
+    const blocks = [];
+    collectBlocks(root, blocks);
+    return { version: MK_BLOCK_DOCUMENT_VERSION, blocks };
+}
+
+/**
+ * Block editor — a configurable, Gutenberg-style block content editor. Renders
+ * an ordered document of blocks (paragraph, heading, image, columns, embed,
+ * list, quote, button, divider, code) with a filterable inserter, per-block
+ * chrome (move/duplicate/transform/delete) and inline rich-text formatting.
+ *
+ * The palette is fully customisable: pass definitions via the `blocks` input or
+ * the {@link MK_BLOCK_DEFINITIONS} token (mirrors `registerBlockType`). Both are
+ * merged over {@link MK_DEFAULT_BLOCKS}.
+ *
+ * Implements `ControlValueAccessor` AND a two-way `value` model, so it works
+ * with `[(ngModel)]`, reactive forms and `[(value)]`.
+ *
+ * ```html
+ * <mk-block-editor [(value)]="doc" [uploadHandler]="upload" />
+ * ```
+ */
+class MkBlockEditor {
+    i18n = inject(MK_I18N);
+    ctx = inject(MkBlockEditorContext);
+    hostRef = inject(ElementRef);
+    tokenDefinitions = inject(MK_BLOCK_DEFINITIONS, { optional: true });
+    tokenUpload = inject(MK_BLOCK_UPLOAD_HANDLER, { optional: true });
+    tokenEmbeds = inject(MK_BLOCK_EMBED_PROVIDERS, { optional: true });
+    /** Two-way document value (always an `MkBlockDocument`, regardless of format). */
+    value = model(mkEmptyDocument(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Form/CVA exchange format. `document` (default) reads/writes an
+     * `MkBlockDocument`; `html` reads/writes an **HTML string** — so the editor
+     * can back a string-typed richtext field (`[(ngModel)]="htmlString"`). The
+     * two-way `value` model stays an `MkBlockDocument` either way.
+     */
+    valueFormat = input('document', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Custom / extended block definitions (merged over the defaults + token). */
+    blocks = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    /** Placeholder for empty text blocks. */
+    placeholder = input(this.i18n.blockEditor.emptyBlockPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the editor region. */
+    ariaLabel = input(this.i18n.blockEditor.editorLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Read-only: renders content without editing chrome. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disabled (form-level). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Async upload handler (overrides the {@link MK_BLOCK_UPLOAD_HANDLER} token). */
+    uploadHandler = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadHandler" }] : /* istanbul ignore next */ []));
+    /** Extra embed providers (merged with defaults + token). */
+    embedProviders = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "embedProviders" }] : /* istanbul ignore next */ []));
+    /** Fires on any document change (in addition to the `value` model). */
+    change = output();
+    /** Fires the serialised HTML on any change — convenient in `html` mode. */
+    htmlChange = output();
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    /** Invalid visual, forced by the `invalid` input. */
+    isInvalid = computed(() => this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Effective, merged block definitions (defaults localised via MK_I18N). */
+    definitions = computed(() => mkMergeBlockDefinitions(localizeDefaultBlocks(this.i18n.blockEditor), ...(this.tokenDefinitions ?? []), this.blocks()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    topBlocks = computed(() => this.value()?.blocks ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topBlocks" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.ctx.hostRef = this.hostRef;
+        // Connect the shared context straight to the input-derived signals (pull
+        // based; no per-input mirror effects). Must happen before any child
+        // renders, which the constructor guarantees: the context is provided by
+        // this component, so children inject it only after we are constructed.
+        this.ctx.definitions = this.definitions;
+        this.ctx.readonly = this.readonly;
+        this.ctx.disabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.ctx.placeholder = this.placeholder;
+        this.ctx.uploadHandler = computed(() => this.uploadHandler() ?? this.tokenUpload ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uploadHandler" }] : /* istanbul ignore next */ []));
+        this.ctx.embedProviders = computed(() => [
+            ...MK_DEFAULT_EMBED_PROVIDERS,
+            ...(this.tokenEmbeds?.flat() ?? []),
+            ...(this.embedProviders() ?? []),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "embedProviders" }] : /* istanbul ignore next */ []));
+    }
+    onBlocksChange(blocks) {
+        const next = {
+            version: this.value()?.version ?? MK_BLOCK_DOCUMENT_VERSION,
+            blocks,
+        };
+        this.value.set(next);
+        // Serialising the whole document on every keystroke is expensive — do it
+        // only when something actually consumes the HTML: `html` value format, or
+        // a subscriber on `htmlChange`.
+        const wantsHtml = this.valueFormat() === 'html' || hasObservers(this.htmlChange);
+        const html = wantsHtml ? mkBlocksToHtml(next) : null;
+        this.onChange(this.valueFormat() === 'html' ? html : next);
+        this.onTouched();
+        this.change.emit(next);
+        if (html !== null)
+            this.htmlChange.emit(html);
+    }
+    /**
+     * Marks the control touched once focus leaves it entirely, so a form that
+     * gates its errors on `touched` behaves the same here as on a native input.
+     */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.hostRef.nativeElement.contains(next))
+            return;
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        if (this.valueFormat() === 'html') {
+            this.value.set(typeof value === 'string'
+                ? mkHtmlToBlocks(value)
+                : (value ?? mkEmptyDocument()));
+        }
+        else {
+            this.value.set(value ?? mkEmptyDocument());
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkBlockEditor, isStandalone: true, selector: "mk-block-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, uploadHandler: { classPropertyName: "uploadHandler", publicName: "uploadHandler", isSignal: true, isRequired: false, transformFunction: null }, embedProviders: { classPropertyName: "embedProviders", publicName: "embedProviders", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change", htmlChange: "htmlChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class.mk-block-editor--readonly": "readonly()", "class.mk-block-editor--invalid": "isInvalid()", "attr.aria-invalid": "isInvalid() || null", "class.mk-block-editor--disabled": "disabled() || cvaDisabled()" }, classAttribute: "mk-block-editor" }, providers: [
+            MkBlockEditorContext,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkBlockEditor),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mk-block-list [blocks]=\"topBlocks()\" [depth]=\"0\" (blocksChange)=\"onBlocksChange($event)\" />\n", styles: [":host{display:block;padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}:host(.mk-block-editor--disabled){opacity:.6;pointer-events:none}:host(.mk-block-editor--readonly){border-style:dashed}:host(.mk-block-editor--invalid){border-color:var(--mk-danger)}\n"], dependencies: [{ kind: "component", type: MkBlockList, selector: "mk-block-list", inputs: ["blocks", "depth", "inColumn"], outputs: ["blocksChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-block-editor', imports: [MkBlockList], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-block-editor',
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class.mk-block-editor--readonly]': 'readonly()',
+                        '[class.mk-block-editor--invalid]': 'isInvalid()',
+                        '[attr.aria-invalid]': 'isInvalid() || null',
+                        '[class.mk-block-editor--disabled]': 'disabled() || cvaDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        MkBlockEditorContext,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkBlockEditor),
+                            multi: true,
+                        },
+                    ], template: "<mk-block-list [blocks]=\"topBlocks()\" [depth]=\"0\" (blocksChange)=\"onBlocksChange($event)\" />\n", styles: [":host{display:block;padding:var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}:host(.mk-block-editor--disabled){opacity:.6;pointer-events:none}:host(.mk-block-editor--readonly){border-style:dashed}:host(.mk-block-editor--invalid){border-color:var(--mk-danger)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], uploadHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadHandler", required: false }] }], embedProviders: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedProviders", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], htmlChange: [{ type: i0.Output, args: ["htmlChange"] }] } });
+/**
+ * Whether an `output()` emitter currently has any subscribers (template
+ * `(htmlChange)` bindings and programmatic `.subscribe()` both register one).
+ * Reads `OutputEmitterRef`'s internal `listeners` array — not public API, so
+ * if the field ever disappears in a future Angular this reports `true` and we
+ * fall back to always serialising (the documented pre-optimisation behaviour).
+ */
+function hasObservers(ref) {
+    const listeners = ref.listeners;
+    if (listeners === undefined)
+        return true;
+    return (listeners?.length ?? 0) > 0;
+}
+/**
+ * Returns {@link MK_DEFAULT_BLOCKS} with the built-in labels, descriptions and
+ * group headings resolved from the active i18n strings (custom definitions
+ * merged on top keep their own text). The Button block's `create()` is wrapped
+ * so a fresh block starts with the localised default label.
+ */
+function localizeDefaultBlocks(s) {
+    const text = {
+        paragraph: { label: s.blockParagraph, description: s.blockParagraphDesc },
+        heading: { label: s.blockHeading, description: s.blockHeadingDesc },
+        list: { label: s.blockList, description: s.blockListDesc },
+        quote: { label: s.blockQuote, description: s.blockQuoteDesc },
+        code: { label: s.blockCode, description: s.blockCodeDesc },
+        image: { label: s.blockImage, description: s.blockImageDesc },
+        embed: { label: s.blockEmbed, description: s.blockEmbedDesc },
+        button: { label: s.blockButton, description: s.blockButtonDesc },
+        divider: { label: s.blockDivider, description: s.blockDividerDesc },
+        columns: { label: s.blockColumns, description: s.blockColumnsDesc },
+    };
+    const groups = {
+        Text: s.groupText,
+        Media: s.groupMedia,
+        Layout: s.groupLayout,
+    };
+    return MK_DEFAULT_BLOCKS.map((def) => {
+        const t = text[def.type];
+        const localized = {
+            ...def,
+            label: t?.label ?? def.label,
+            description: t?.description ?? def.description,
+            group: groups[def.group ?? ''] ?? def.group,
+        };
+        if (def.type === 'button') {
+            localized.create = () => {
+                const b = def.create();
+                return { ...b, data: { ...b.data, label: s.buttonDefaultLabel } };
+            };
+        }
+        return localized;
+    });
+}
+
+/**
+ * Block renderer — read-only, themed display of a {@link MkBlockDocument} for
+ * published content pages and blog posts. Reuses the same layout CSS as the
+ * editor so authored columns look identical when published.
+ *
+ * SECURITY MODEL: rich-text HTML is passed through {@link sanitizeInlineHtml}
+ * and then bound with `[innerHTML]`, so Angular's `DomSanitizer` sanitises it
+ * again at render time (never bypassed for author HTML). The ONLY bypass is for
+ * a stored embed's `embedUrl`, which came from an allow-listed provider.
+ */
+class MkBlockRenderer {
+    i18n = inject(MK_I18N);
+    sanitizer = inject(DomSanitizer);
+    safeSrcCache = new Map();
+    /** The document to render. */
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Internal: a block subtree (used when recursing into columns). */
+    blocks = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    items = computed(() => this.blocks() ?? this.value()?.blocks ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Sanitised rich-text HTML for `[innerHTML]` binding. */
+    safeHtml(html) {
+        return sanitizeInlineHtml(String(html ?? ''));
+    }
+    listItems(block) {
+        const items = block.data['items'];
+        return Array.isArray(items) ? items : [];
+    }
+    headingLevel(block) {
+        const l = block.data['level'];
+        return [1, 2, 3, 4].includes(l) ? l : 2;
+    }
+    isImageSafe(block) {
+        const src = String(block.data['src'] ?? '');
+        return !!src && mkIsSafeUrl(src);
+    }
+    buttonHref(block) {
+        const href = String(block.data['href'] ?? '');
+        return mkIsSafeUrl(href) && href ? href : '#';
+    }
+    paddingTop(block) {
+        const ratio = Number(block.data['aspectRatio']) || 16 / 9;
+        return `${100 / ratio}%`;
+    }
+    /** Trusts only a provider-transformed https embed URL — see class doc. */
+    embedSrc(block) {
+        const src = String(block.data['embedUrl'] ?? '');
+        if (!src || !/^https:\/\//i.test(src) || !mkIsSafeUrl(src))
+            return null;
+        let trusted = this.safeSrcCache.get(src);
+        if (!trusted) {
+            trusted = this.sanitizer.bypassSecurityTrustResourceUrl(src);
+            this.safeSrcCache.set(src, trusted);
+        }
+        return trusted;
+    }
+    fallbackUrl(block) {
+        const url = String(block.data['url'] ?? '');
+        return mkIsSafeUrl(url) && url ? url : null;
+    }
+    gridColumns(block) {
+        const ratio = String(block.data['ratio'] ?? '');
+        const parts = ratio.split('-').map((n) => parseFloat(n)).filter((n) => n > 0);
+        if (parts.length >= 2)
+            return parts.map((n) => `${n}fr`).join(' ');
+        return `repeat(${block.children?.length ?? 2}, 1fr)`;
+    }
+    gridGap(block) {
+        const g = Math.max(0, Math.min(8, Number(block.data['gap']) || 4));
+        return `var(--mk-space-${g})`;
+    }
+    justifyValue(block) {
+        const map = {
+            start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between',
+        };
+        return map[String(block.data['justify'] ?? 'start')] ?? 'flex-start';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBlockRenderer, isStandalone: true, selector: "mk-block-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-block-renderer" }, ngImport: i0, template: "@for (block of items(); track block.id) {\n  @switch (block.type) {\n    @case ('paragraph') {\n      <p class=\"mk-r-paragraph\" [innerHTML]=\"safeHtml(block.data['html'])\"></p>\n    }\n    @case ('heading') {\n      @switch (headingLevel(block)) {\n        @case (1) { <h1 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h1> }\n        @case (2) { <h2 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h2> }\n        @case (3) { <h3 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h3> }\n        @case (4) { <h4 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h4> }\n      }\n    }\n    @case ('list') {\n      @if (block.data['ordered']) {\n        <ol class=\"mk-r-list\">\n          @for (item of listItems(block); track $index) {\n            <li [innerHTML]=\"safeHtml(item)\"></li>\n          }\n        </ol>\n      } @else {\n        <ul class=\"mk-r-list\">\n          @for (item of listItems(block); track $index) {\n            <li [innerHTML]=\"safeHtml(item)\"></li>\n          }\n        </ul>\n      }\n    }\n    @case ('quote') {\n      <blockquote class=\"mk-r-quote\">\n        <p [innerHTML]=\"safeHtml(block.data['html'])\"></p>\n        @if (block.data['citation']) {\n          <cite class=\"mk-r-cite\">{{ block.data['citation'] }}</cite>\n        }\n      </blockquote>\n    }\n    @case ('code') {\n      <pre class=\"mk-r-code\"><code>{{ block.data['code'] }}</code></pre>\n    }\n    @case ('image') {\n      @if (isImageSafe(block)) {\n        <figure\n          class=\"mk-r-figure\"\n          [class.mk-r-figure--left]=\"block.data['align'] === 'left'\"\n          [class.mk-r-figure--right]=\"block.data['align'] === 'right'\"\n        >\n          <img\n            [src]=\"block.data['src']\"\n            [alt]=\"block.data['alt'] ?? ''\"\n            [style.width.%]=\"block.data['width'] || 100\"\n            loading=\"lazy\"\n          />\n          @if (block.data['caption']) {\n            <figcaption>{{ block.data['caption'] }}</figcaption>\n          }\n        </figure>\n      }\n    }\n    @case ('button') {\n      <div\n        class=\"mk-r-cta-wrap\"\n        [class.mk-r-cta-wrap--center]=\"block.data['align'] === 'center'\"\n        [class.mk-r-cta-wrap--right]=\"block.data['align'] === 'right'\"\n      >\n        <a\n          class=\"mk-cta\"\n          [class.mk-cta--soft]=\"block.data['variant'] === 'soft'\"\n          [class.mk-cta--outline]=\"block.data['variant'] === 'outline'\"\n          [attr.data-tone]=\"block.data['tone'] ?? 'primary'\"\n          [href]=\"buttonHref(block)\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ block.data['label'] || i18n.blockEditor.blockButton }}\n        </a>\n      </div>\n    }\n    @case ('divider') {\n      <hr class=\"mk-r-divider\" />\n    }\n    @case ('embed') {\n      @if (embedSrc(block); as src) {\n        <div class=\"mk-r-embed\" [style.padding-top]=\"paddingTop(block)\">\n          <iframe\n            [src]=\"src\"\n            [title]=\"i18n.blockEditor.embeddedContent\"\n            loading=\"lazy\"\n            referrerpolicy=\"strict-origin-when-cross-origin\"\n            sandbox=\"allow-scripts allow-same-origin allow-presentation allow-popups\"\n            allowfullscreen\n          ></iframe>\n        </div>\n      } @else if (fallbackUrl(block); as url) {\n        <p class=\"mk-r-embed-fallback\">\n          <a [href]=\"url\" target=\"_blank\" rel=\"noopener noreferrer\">{{ url }}</a>\n        </p>\n      }\n    }\n    @case ('columns') {\n      <div\n        class=\"mk-columns\"\n        [style.grid-template-columns]=\"gridColumns(block)\"\n        [style.gap]=\"gridGap(block)\"\n        [style.align-items]=\"block.data['align'] ?? 'stretch'\"\n        [style.justify-content]=\"justifyValue(block)\"\n      >\n        @for (col of block.children ?? []; track col.id) {\n          <div class=\"mk-column\">\n            <mk-block-renderer [blocks]=\"col.children ?? []\" />\n          </div>\n        }\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-r-paragraph{margin:0 0 var(--mk-space-4)}.mk-r-heading{margin:var(--mk-space-6) 0 var(--mk-space-3);line-height:var(--mk-line-height-snug);color:var(--mk-text)}h1.mk-r-heading{font-size:var(--mk-font-size-3xl);font-weight:var(--mk-font-weight-bold)}h2.mk-r-heading{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold)}h3.mk-r-heading{font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold)}h4.mk-r-heading{font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold)}.mk-r-paragraph a,.mk-r-list a,.mk-r-quote a{color:var(--mk-primary);text-decoration:underline}.mk-r-paragraph code,.mk-r-list code{font-family:var(--mk-font-mono);font-size:.9em;padding:.1em .3em;border-radius:var(--mk-radius-xs);background:var(--mk-code-bg)}.mk-r-list{margin:0 0 var(--mk-space-4);padding-inline-start:var(--mk-space-6)}.mk-r-list li{margin:var(--mk-space-1) 0}.mk-r-quote{margin:0 0 var(--mk-space-4);padding-inline-start:var(--mk-space-4);border-inline-start:4px solid var(--mk-primary);font-size:var(--mk-font-size-lg);font-style:italic}.mk-r-quote p{margin:0}.mk-r-cite{display:block;margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-style:normal}.mk-r-code{margin:0 0 var(--mk-space-4);padding:var(--mk-space-3);border-radius:var(--mk-radius-md);background:var(--mk-code-bg);color:var(--mk-text);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);overflow-x:auto}.mk-r-figure{margin:0 0 var(--mk-space-4);text-align:center}.mk-r-figure--left{text-align:left}.mk-r-figure--right{text-align:right}.mk-r-figure img{max-width:100%;height:auto;border-radius:var(--mk-radius-md)}.mk-r-figure figcaption{margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-r-divider{height:0;margin:var(--mk-space-6) 0;border:none;border-top:var(--mk-border-width-strong) solid var(--mk-border-strong)}.mk-r-cta-wrap{margin:0 0 var(--mk-space-4);text-align:start}.mk-r-cta-wrap--center{text-align:center}.mk-r-cta-wrap--right{text-align:right}.mk-cta{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;height:var(--mk-control-height-md);padding:0 var(--mk-space-5);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);background:var(--_main);color:var(--_contrast);font-weight:var(--mk-font-weight-medium);text-decoration:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-cta:hover{background:var(--_hover)}.mk-cta[data-tone=success]{--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}.mk-cta[data-tone=warning]{--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}.mk-cta[data-tone=danger]{--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}.mk-cta[data-tone=info]{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}.mk-cta[data-tone=neutral]{--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-cta--soft{background:var(--_subtle);color:var(--_subtle-text)}.mk-cta--outline{background:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}.mk-cta:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-r-embed{position:relative;width:100%;margin:0 0 var(--mk-space-4);overflow:hidden;border-radius:var(--mk-radius-md);background:var(--mk-surface-3)}.mk-r-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.mk-r-embed-fallback a{color:var(--mk-primary)}.mk-columns{display:grid;margin:0 0 var(--mk-space-4)}.mk-column{min-width:0}@media(max-width:640px){.mk-columns{grid-template-columns:1fr!important}}\n"], dependencies: [{ kind: "component", type: MkBlockRenderer, selector: "mk-block-renderer", inputs: ["value", "blocks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-block-renderer', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-block-renderer' }, template: "@for (block of items(); track block.id) {\n  @switch (block.type) {\n    @case ('paragraph') {\n      <p class=\"mk-r-paragraph\" [innerHTML]=\"safeHtml(block.data['html'])\"></p>\n    }\n    @case ('heading') {\n      @switch (headingLevel(block)) {\n        @case (1) { <h1 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h1> }\n        @case (2) { <h2 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h2> }\n        @case (3) { <h3 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h3> }\n        @case (4) { <h4 class=\"mk-r-heading\" [innerHTML]=\"safeHtml(block.data['html'])\"></h4> }\n      }\n    }\n    @case ('list') {\n      @if (block.data['ordered']) {\n        <ol class=\"mk-r-list\">\n          @for (item of listItems(block); track $index) {\n            <li [innerHTML]=\"safeHtml(item)\"></li>\n          }\n        </ol>\n      } @else {\n        <ul class=\"mk-r-list\">\n          @for (item of listItems(block); track $index) {\n            <li [innerHTML]=\"safeHtml(item)\"></li>\n          }\n        </ul>\n      }\n    }\n    @case ('quote') {\n      <blockquote class=\"mk-r-quote\">\n        <p [innerHTML]=\"safeHtml(block.data['html'])\"></p>\n        @if (block.data['citation']) {\n          <cite class=\"mk-r-cite\">{{ block.data['citation'] }}</cite>\n        }\n      </blockquote>\n    }\n    @case ('code') {\n      <pre class=\"mk-r-code\"><code>{{ block.data['code'] }}</code></pre>\n    }\n    @case ('image') {\n      @if (isImageSafe(block)) {\n        <figure\n          class=\"mk-r-figure\"\n          [class.mk-r-figure--left]=\"block.data['align'] === 'left'\"\n          [class.mk-r-figure--right]=\"block.data['align'] === 'right'\"\n        >\n          <img\n            [src]=\"block.data['src']\"\n            [alt]=\"block.data['alt'] ?? ''\"\n            [style.width.%]=\"block.data['width'] || 100\"\n            loading=\"lazy\"\n          />\n          @if (block.data['caption']) {\n            <figcaption>{{ block.data['caption'] }}</figcaption>\n          }\n        </figure>\n      }\n    }\n    @case ('button') {\n      <div\n        class=\"mk-r-cta-wrap\"\n        [class.mk-r-cta-wrap--center]=\"block.data['align'] === 'center'\"\n        [class.mk-r-cta-wrap--right]=\"block.data['align'] === 'right'\"\n      >\n        <a\n          class=\"mk-cta\"\n          [class.mk-cta--soft]=\"block.data['variant'] === 'soft'\"\n          [class.mk-cta--outline]=\"block.data['variant'] === 'outline'\"\n          [attr.data-tone]=\"block.data['tone'] ?? 'primary'\"\n          [href]=\"buttonHref(block)\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ block.data['label'] || i18n.blockEditor.blockButton }}\n        </a>\n      </div>\n    }\n    @case ('divider') {\n      <hr class=\"mk-r-divider\" />\n    }\n    @case ('embed') {\n      @if (embedSrc(block); as src) {\n        <div class=\"mk-r-embed\" [style.padding-top]=\"paddingTop(block)\">\n          <iframe\n            [src]=\"src\"\n            [title]=\"i18n.blockEditor.embeddedContent\"\n            loading=\"lazy\"\n            referrerpolicy=\"strict-origin-when-cross-origin\"\n            sandbox=\"allow-scripts allow-same-origin allow-presentation allow-popups\"\n            allowfullscreen\n          ></iframe>\n        </div>\n      } @else if (fallbackUrl(block); as url) {\n        <p class=\"mk-r-embed-fallback\">\n          <a [href]=\"url\" target=\"_blank\" rel=\"noopener noreferrer\">{{ url }}</a>\n        </p>\n      }\n    }\n    @case ('columns') {\n      <div\n        class=\"mk-columns\"\n        [style.grid-template-columns]=\"gridColumns(block)\"\n        [style.gap]=\"gridGap(block)\"\n        [style.align-items]=\"block.data['align'] ?? 'stretch'\"\n        [style.justify-content]=\"justifyValue(block)\"\n      >\n        @for (col of block.children ?? []; track col.id) {\n          <div class=\"mk-column\">\n            <mk-block-renderer [blocks]=\"col.children ?? []\" />\n          </div>\n        }\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-r-paragraph{margin:0 0 var(--mk-space-4)}.mk-r-heading{margin:var(--mk-space-6) 0 var(--mk-space-3);line-height:var(--mk-line-height-snug);color:var(--mk-text)}h1.mk-r-heading{font-size:var(--mk-font-size-3xl);font-weight:var(--mk-font-weight-bold)}h2.mk-r-heading{font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold)}h3.mk-r-heading{font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold)}h4.mk-r-heading{font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold)}.mk-r-paragraph a,.mk-r-list a,.mk-r-quote a{color:var(--mk-primary);text-decoration:underline}.mk-r-paragraph code,.mk-r-list code{font-family:var(--mk-font-mono);font-size:.9em;padding:.1em .3em;border-radius:var(--mk-radius-xs);background:var(--mk-code-bg)}.mk-r-list{margin:0 0 var(--mk-space-4);padding-inline-start:var(--mk-space-6)}.mk-r-list li{margin:var(--mk-space-1) 0}.mk-r-quote{margin:0 0 var(--mk-space-4);padding-inline-start:var(--mk-space-4);border-inline-start:4px solid var(--mk-primary);font-size:var(--mk-font-size-lg);font-style:italic}.mk-r-quote p{margin:0}.mk-r-cite{display:block;margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-style:normal}.mk-r-code{margin:0 0 var(--mk-space-4);padding:var(--mk-space-3);border-radius:var(--mk-radius-md);background:var(--mk-code-bg);color:var(--mk-text);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);overflow-x:auto}.mk-r-figure{margin:0 0 var(--mk-space-4);text-align:center}.mk-r-figure--left{text-align:left}.mk-r-figure--right{text-align:right}.mk-r-figure img{max-width:100%;height:auto;border-radius:var(--mk-radius-md)}.mk-r-figure figcaption{margin-top:var(--mk-space-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}.mk-r-divider{height:0;margin:var(--mk-space-6) 0;border:none;border-top:var(--mk-border-width-strong) solid var(--mk-border-strong)}.mk-r-cta-wrap{margin:0 0 var(--mk-space-4);text-align:start}.mk-r-cta-wrap--center{text-align:center}.mk-r-cta-wrap--right{text-align:right}.mk-cta{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;height:var(--mk-control-height-md);padding:0 var(--mk-space-5);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);background:var(--_main);color:var(--_contrast);font-weight:var(--mk-font-weight-medium);text-decoration:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-cta:hover{background:var(--_hover)}.mk-cta[data-tone=success]{--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}.mk-cta[data-tone=warning]{--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}.mk-cta[data-tone=danger]{--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}.mk-cta[data-tone=info]{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}.mk-cta[data-tone=neutral]{--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-cta--soft{background:var(--_subtle);color:var(--_subtle-text)}.mk-cta--outline{background:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}.mk-cta:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-r-embed{position:relative;width:100%;margin:0 0 var(--mk-space-4);overflow:hidden;border-radius:var(--mk-radius-md);background:var(--mk-surface-3)}.mk-r-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.mk-r-embed-fallback a{color:var(--mk-primary)}.mk-columns{display:grid;margin:0 0 var(--mk-space-4)}.mk-column{min-width:0}@media(max-width:640px){.mk-columns{grid-template-columns:1fr!important}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }] } });
+
+/**
+ * BLOCK EDITOR group barrel for @mk-kit/ui.
+ *
+ * Public surface for the Gutenberg-style block content editor and its
+ * read-only renderer. Built-in block edit components stay internal — consumers
+ * interact through the editor, the registry and the serializers.
+ */
+// Editor + renderer components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MK_BLOCK_DEFINITIONS, MK_BLOCK_DOCUMENT_VERSION, MK_BLOCK_EMBED_PROVIDERS, MK_BLOCK_UPLOAD_HANDLER, MK_DEFAULT_BLOCKS, MK_DEFAULT_EMBED_PROVIDERS, MkBlockEditor, MkBlockRenderer, mkBlockId, mkBlocksToHtml, mkBlocksToText, mkCloneBlock, mkEmptyDocument, mkEscapeAttr, mkEscapeHtml, mkHtmlToBlocks, mkIsSafeUrl, mkMergeBlockDefinitions };
+//# sourceMappingURL=mk-kit-ui-block-editor.mjs.map