@mosaicoo/kanban 0.1.0

package/fesm2022/mosaicoo-kanban-ui.mjs

@@ -0,0 +1,2299 @@
+import { CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview } from '@angular/cdk/drag-drop';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, ChangeDetectionStrategy, Component, Injectable, output, computed, contentChild, signal, ElementRef, effect } from '@angular/core';
+import { entriesOf, MKB_VERSION } from '@mosaicoo/kanban/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Template de cartão custom, projetado no board:
+ *
+ *   <mos-kanban-board [board]="board">
+ *     <ng-template mosKanbanCard let-item>{{ item['title'] }}</ng-template>
+ *   </mos-kanban-board>
+ *
+ * Sem o template, o board renderiza o cartão default.
+ */
+class MosKanbanCardDef {
+    template = inject((TemplateRef));
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCardDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: MosKanbanCardDef, isStandalone: true, selector: "ng-template[mosKanbanCard]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCardDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mosKanbanCard]' }]
+        }] });
+
+/** Cartão DEFAULT (usado quando o consumidor não projeta um template
+ * mosKanbanCard): título + id discreto. Visual 100% por tokens. */
+class MosKanbanCard {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    title() {
+        const title = this.item()['title'];
+        return typeof title === 'string' && title !== '' ? title : this.item().id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: MosKanbanCard, isStandalone: true, selector: "mos-kanban-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <span class="mkb-card-title">{{ title() }}</span>
+  `, isInline: true, styles: [":host{display:block}.mkb-card-title{font-size:13px;font-weight:500;color:var(--mkb-foreground, var(--color-foreground, #241f33));overflow-wrap:anywhere}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-card', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="mkb-card-title">{{ title() }}</span>
+  `, styles: [":host{display:block}.mkb-card-title{font-size:13px;font-weight:500;color:var(--mkb-foreground, var(--color-foreground, #241f33));overflow-wrap:anywhere}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+
+/**
+ * Cancelamento por Esc (spike D0/E4): o CDK não cancela drag nativamente.
+ * Workaround: Esc arma este flag e dispara um mouseup sintético — o drop
+ * acontece, mas os handlers CONSOMEM o flag e não executam comando algum;
+ * como a UI renderiza do estado (inalterado), o elemento volta à origem.
+ * Instância por board (provider do componente), nunca singleton de módulo.
+ */
+class DragCancelFlag {
+    canceled = false;
+    arm() {
+        this.canceled = true;
+    }
+    /** Lê E limpa (check-and-clear em todo handler de drop). */
+    consume() {
+        const was = this.canceled;
+        this.canceled = false;
+        return was;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DragCancelFlag, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DragCancelFlag });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DragCancelFlag, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Costura entre o GESTO de arrasto e os COMANDOS do core — deliberadamente
+ * agnóstica de CDK (docs/01 §6): os componentes traduzem eventos do CDK para
+ * estas funções; trocar a engine de drag no futuro não toca em regra alguma.
+ *
+ * Preview e commit usam o MESMO caminho (board.canMove / moveItem): o que o
+ * indicador de drop mostra é exatamente o que o solto faz.
+ *
+ * Uma "célula" é a interseção coluna × lane; sem eixo de lanes, a célula é a
+ * coluna inteira (laneId undefined).
+ */
+/**
+ * Id DOM estável da drop list de uma célula (spike D0/E1): as células são
+ * conectadas entre si por `cdkDropListConnectedTo` EXPLÍCITO — nada de
+ * `cdkDropListGroup`, que auto-conectaria também as listas de reorder de
+ * colunas/lanes (ancestrais) e corromperia a detecção de alvo do CDK.
+ * encodeURIComponent: ids de grupo podem ter espaço (inválido em id de DOM).
+ */
+function cellListId(columnId, laneId) {
+    const col = encodeURIComponent(columnId);
+    return laneId === undefined
+        ? `mkb-cell-${col}`
+        : `mkb-cell-${col}--${encodeURIComponent(laneId)}`;
+}
+/** Id DOM estável da drop list de ENTRIES de um card (bloco items): listas
+ * do MESMO field conectam-se entre cards quando 'move-across' está ligado —
+ * mesma topologia explícita das células. */
+function entriesListId(cardId, field) {
+    return `mkb-entries-${encodeURIComponent(cardId)}--${encodeURIComponent(field)}`;
+}
+/** O item pode ENTRAR na célula? (indicador durante o arrasto) */
+function canEnterCell(board, itemId, columnId, laneId) {
+    return board.canMove(itemId, { column: columnId, lane: laneId }).ok;
+}
+/**
+ * Converte o índice VISUAL do drop (posição na lista visível, sem o item
+ * arrastado) para o índice da célula no core (ordem manual entre TODOS os
+ * itens da célula, sem o movido) — os dois divergem quando há filtro ativo.
+ */
+function resolveDropIndex(board, itemId, columnId, visibleIndex, laneId) {
+    const visible = board
+        .visibleItemsIn(columnId, laneId)
+        .filter((item) => item.id !== itemId);
+    if (visibleIndex >= visible.length)
+        return undefined; // fim da célula
+    const referenceId = visible[visibleIndex]?.id;
+    const cellOrder = board
+        .itemsIn(columnId, laneId)
+        .filter((item) => item.id !== itemId);
+    const index = cellOrder.findIndex((item) => item.id === referenceId);
+    return index === -1 ? undefined : index;
+}
+/** Executa o drop como comando do core. */
+function executeDrop(board, itemId, columnId, visibleIndex, laneId) {
+    return board.execute({
+        type: 'moveItem',
+        itemId,
+        to: {
+            column: columnId,
+            lane: laneId,
+            index: resolveDropIndex(board, itemId, columnId, visibleIndex, laneId),
+        },
+    });
+}
+
+const isEmpty = (v) => v === undefined || v === null || v === '';
+const toDate = (value) => {
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    if (typeof value === 'number' || typeof value === 'string') {
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+};
+/** Texto simples com prefixo/sufixo; `format` (registry) tem precedência. */
+function formatText(value, opts, item, ctx) {
+    if (opts.format) {
+        const fn = ctx.registry?.get(opts.format);
+        if (fn)
+            return fn(value, item);
+    }
+    if (isEmpty(value))
+        return '';
+    return `${opts.prefix ?? ''}${String(value)}${opts.suffix ?? ''}`;
+}
+function formatNumber(value, opts, ctx) {
+    if (isEmpty(value))
+        return '';
+    const num = typeof value === 'number' ? value : Number(value);
+    if (isNaN(num))
+        return String(value);
+    const formatted = new Intl.NumberFormat(ctx.locale, {
+        style: opts.style ?? 'decimal',
+        currency: opts.currency,
+        minimumFractionDigits: opts.decimals,
+        maximumFractionDigits: opts.decimals,
+    }).format(num);
+    return `${opts.prefix ?? ''}${formatted}${opts.suffix ?? ''}`;
+}
+function formatDate(value, opts, ctx) {
+    if (isEmpty(value))
+        return '';
+    const date = toDate(value);
+    if (!date)
+        return String(value);
+    if (opts.relative)
+        return formatRelative(date, ctx.locale);
+    return new Intl.DateTimeFormat(ctx.locale, {
+        dateStyle: opts.withDate === false ? undefined : (opts.dateStyle ?? 'medium'),
+        timeStyle: opts.withTime ? (opts.timeStyle ?? 'short') : undefined,
+    }).format(date);
+}
+const RELATIVE_UNITS = [
+    ['year', 31536000000],
+    ['month', 2592000000],
+    ['week', 604800000],
+    ['day', 86400000],
+    ['hour', 3600000],
+    ['minute', 60000],
+    ['second', 1000],
+];
+/** "há 4 horas" / "em 2 dias" via Intl.RelativeTimeFormat, maior unidade. */
+function formatRelative(date, locale) {
+    const diff = date.getTime() - Date.now();
+    const abs = Math.abs(diff);
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    for (const [unit, ms] of RELATIVE_UNITS) {
+        if (abs >= ms || unit === 'second') {
+            return rtf.format(Math.round(diff / ms), unit);
+        }
+    }
+    return rtf.format(0, 'second');
+}
+/**
+ * Resolve um ícone pelo nome no registry (`icon:<nome>`, valor registrado pelo
+ * host). Retorna { markup } quando o valor é SVG/HTML (host-confiável → seguro
+ * dar bypass) ou { text } para emoji/rótulo curto. Nome não registrado cai no
+ * próprio nome como texto (fallback visível, não quebra o layout).
+ */
+function resolveIcon(name, registry) {
+    if (!name)
+        return {};
+    const value = registry?.get(`icon:${name}`);
+    if (typeof value === 'string') {
+        return value.trimStart().startsWith('<') ? { markup: value } : { text: value };
+    }
+    return { text: name };
+}
+/** Iniciais para o avatar sem foto (ex.: "Ana Paula" → "AP"). */
+function initials(name) {
+    if (typeof name !== 'string' || name.trim() === '')
+        return '?';
+    const parts = name.trim().split(/\s+/);
+    const first = parts[0]?.[0] ?? '';
+    const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';
+    return (first + last).toUpperCase();
+}
+
+/**
+ * Renderiza a árvore de blocos DECLARATIVOS de um cartão (docs/01 §4; F5.5).
+ * Recursivo (o bloco `row` reentra no próprio componente). Estilo é CSS
+ * externo: cada bloco recebe classes-base estáveis (`mkb-block-*`,
+ * `mkb-variant-*`, `mkb-tone-*`) + as classes do host (atributo `class`).
+ */
+class MosKanbanCardBlocks {
+    blocks = input.required(...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    registry = input(undefined, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    column = input(undefined, ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    lane = input(undefined, ...(ngDevMode ? [{ debugName: "lane" }] : /* istanbul ignore next */ []));
+    /** Ids de TODOS os cards do board — conexões do 'move-across'. */
+    allCardIds = input([], ...(ngDevMode ? [{ debugName: "allCardIds" }] : /* istanbul ignore next */ []));
+    /** Preview de drop de entry entre cards (vem do board.canMoveEntry). */
+    canDropEntry = input(null, ...(ngDevMode ? [{ debugName: "canDropEntry" }] : /* istanbul ignore next */ []));
+    action = output();
+    entryCheck = output();
+    entryAction = output();
+    entryMove = output();
+    /** Ciclo do gesto de arraste de entry (docs/02 §9). */
+    lifecycle = output();
+    sanitizer = inject(DomSanitizer);
+    ctx = computed(() => ({
+        locale: this.locale(),
+        registry: this.registry(),
+    }), ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
+    String = String;
+    raw(field) {
+        return field === undefined ? undefined : this.item()[field];
+    }
+    text(block) {
+        return formatText(this.raw(block.field), block, this.item(), this.ctx());
+    }
+    num(block) {
+        return formatNumber(this.raw(block.field), block, this.ctx());
+    }
+    dateVal(block) {
+        const value = this.raw(block.field);
+        if (block.type === 'time') {
+            return formatDate(value, { withDate: false, withTime: true, timeStyle: block.timeStyle }, this.ctx());
+        }
+        if (block.type === 'datetime') {
+            return formatDate(value, { withTime: true, dateStyle: block.dateStyle, timeStyle: block.timeStyle, relative: block.relative }, this.ctx());
+        }
+        return formatDate(value, { dateStyle: block.dateStyle, relative: block.relative }, this.ctx());
+    }
+    valueStyle(block) {
+        const value = this.raw(block.field);
+        return block.map?.[String(value)] ?? {};
+    }
+    factText(fact) {
+        return `${fact.prefix ?? ''}${String(this.raw(fact.field))}${fact.suffix ?? ''}`;
+    }
+    avatarName(block) {
+        const name = this.raw(block.nameField);
+        if (typeof name === 'string' && name !== '')
+            return name;
+        return this.raw(block.photoField) ? ' ' : '';
+    }
+    ini(name) {
+        return initials(name);
+    }
+    progressValue(block) {
+        const v = Number(this.raw(block.field));
+        return isNaN(v) ? 0 : v;
+    }
+    progressPct(block) {
+        const max = block.max ?? 100;
+        return max <= 0 ? 0 : Math.max(0, Math.min(100, (this.progressValue(block) / max) * 100));
+    }
+    visibleActions(block) {
+        return block.items.filter((a) => this.matchesWhen(a));
+    }
+    // ---- bloco 'items' (entries do card) --------------------------------------
+    entryList(block) {
+        return entriesOf(this.item(), block.field);
+    }
+    visibleEntries(block) {
+        const list = this.entryList(block);
+        return block.maxVisible !== undefined ? list.slice(0, block.maxVisible) : list;
+    }
+    hiddenCount(block) {
+        return this.entryList(block).length - this.visibleEntries(block).length;
+    }
+    hasCap(block, cap) {
+        return block.capabilities?.includes(cap) ?? false;
+    }
+    /** 'move-across' implica 'reorder'. */
+    reorderEnabled(block) {
+        return this.hasCap(block, 'reorder') || this.hasCap(block, 'move-across');
+    }
+    entriesId(block) {
+        return entriesListId(this.item().id, block.field);
+    }
+    /** Conexões do move-across: listas do MESMO field nos outros cards. */
+    entryConnections(block) {
+        if (!this.hasCap(block, 'move-across'))
+            return [];
+        const self = this.item().id;
+        return this.allCardIds()
+            .filter((id) => id !== self)
+            .map((id) => entriesListId(id, block.field));
+    }
+    /** enterPredicate por bloco (identidade cacheada p/ o CDK). */
+    predicateCache = new WeakMap();
+    entryPredicate(block) {
+        let fn = this.predicateCache.get(block);
+        if (!fn) {
+            fn = (drag) => {
+                const fromCardId = drag.dropContainer.data;
+                const toCardId = this.item().id;
+                if (fromCardId === toCardId)
+                    return true; // reorder local
+                const can = this.canDropEntry();
+                return can
+                    ? can({ fromCardId, toCardId, field: block.field, entryId: drag.data })
+                    : true;
+            };
+            this.predicateCache.set(block, fn);
+        }
+        return fn;
+    }
+    /** Ctrl+↑/↓ move a entry focada (índice entre as remanescentes). */
+    onEntryKeydown(block, entry, event) {
+        if (!this.reorderEnabled(block) || !(event.ctrlKey || event.metaKey))
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+            return;
+        event.preventDefault();
+        event.stopPropagation(); // não aciona o teclado do CARD
+        const list = this.entryList(block);
+        const idx = list.findIndex((e) => e.id === entry.id);
+        const target = idx + (event.key === 'ArrowDown' ? 1 : -1);
+        if (target < 0 || target >= list.length)
+            return;
+        this.entryMove.emit({
+            cardId: this.item().id,
+            field: block.field,
+            entryId: entry.id,
+            index: target,
+        });
+        // refoco após o re-render
+        const host = event.target.closest('.mkb-block-items');
+        setTimeout(() => {
+            const rows = host?.querySelectorAll('[data-entry]') ?? [];
+            for (const row of Array.from(rows)) {
+                if (row.dataset['entry'] === entry.id) {
+                    row.focus();
+                    return;
+                }
+            }
+        });
+    }
+    isDone(block, entry) {
+        return block.checkField !== undefined && entry[block.checkField] === true;
+    }
+    entryLabel(block, entry) {
+        const label = entry[block.labelField ?? 'label'];
+        return typeof label === 'string' && label !== '' ? label : entry.id;
+    }
+    doneCount(block) {
+        return this.entryList(block).filter((e) => this.isDone(block, e)).length;
+    }
+    toggleEntry(block, entry) {
+        if (!block.checkField)
+            return;
+        this.entryCheck.emit({
+            cardId: this.item().id,
+            field: block.field,
+            entryId: entry.id,
+            checkField: block.checkField,
+            value: !this.isDone(block, entry),
+        });
+    }
+    emitEntryAction(_block, entry, actionId, event) {
+        event.stopPropagation(); // não seleciona o card
+        this.entryAction.emit({ card: this.item(), entry, actionId });
+    }
+    /** CDK: currentIndex == posição entre as REMANESCENTES (mesma semântica do
+     * índice do comando moveEntry); cross-container → move entre cards. */
+    onEntryDrop(block, event) {
+        const fromCardId = event.previousContainer.data;
+        const toCardId = this.item().id;
+        const cross = fromCardId !== toCardId;
+        if (!cross && event.previousIndex === event.currentIndex)
+            return;
+        this.entryMove.emit({
+            cardId: fromCardId,
+            field: block.field,
+            entryId: event.item.data,
+            index: event.currentIndex,
+            toCardId: cross ? toCardId : undefined,
+        });
+    }
+    matchesWhen(action) {
+        const when = action.when;
+        if (!when)
+            return true;
+        const has = (side, value) => side === undefined ||
+            (Array.isArray(side) ? side.includes(value) : side === value);
+        return has(when.column, this.column()) && has(when.lane, this.lane());
+    }
+    emitAction(action, event) {
+        event.stopPropagation(); // não seleciona o cartão ao clicar na ação
+        this.action.emit({ item: this.item(), actionId: action.id });
+    }
+    icon(name) {
+        const resolved = resolveIcon(name, this.registry());
+        return resolved.markup
+            ? this.sanitizer.bypassSecurityTrustHtml(resolved.markup)
+            : (resolved.text ?? '');
+    }
+    customHtml(renderer) {
+        const fn = this.registry()?.get(`renderer:${renderer}`);
+        return fn ? this.sanitizer.bypassSecurityTrustHtml(fn(this.item())) : '';
+    }
+    classes(block, tone) {
+        const out = ['mkb-block', `mkb-block-${block.type}`];
+        if ('variant' in block && block.variant)
+            out.push(`mkb-variant-${block.variant}`);
+        if (tone)
+            out.push(`mkb-tone-${tone}`);
+        if (block.class) {
+            Array.isArray(block.class) ? out.push(...block.class) : out.push(block.class);
+        }
+        return out;
+    }
+    rowClasses(block) {
+        const out = this.classes(block);
+        if (block.align && block.align !== 'start')
+            out.push(`mkb-row-${block.align}`);
+        if (block.wrap)
+            out.push('mkb-row-wrap');
+        return out;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCardBlocks, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MosKanbanCardBlocks, isStandalone: true, selector: "mos-kanban-card-blocks", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, lane: { classPropertyName: "lane", publicName: "lane", isSignal: true, isRequired: false, transformFunction: null }, allCardIds: { classPropertyName: "allCardIds", publicName: "allCardIds", isSignal: true, isRequired: false, transformFunction: null }, canDropEntry: { classPropertyName: "canDropEntry", publicName: "canDropEntry", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entryCheck: "entryCheck", entryAction: "entryAction", entryMove: "entryMove", lifecycle: "lifecycle" }, ngImport: i0, template: `
+    @for (block of blocks(); track $index) {
+      @switch (block.type) {
+        @case ('text') {
+          @if (text(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('number') {
+          @if (num(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('date') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('time') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('datetime') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('image') {
+          @if (raw(block.field); as src) {
+            <img
+              [ngClass]="classes(block)"
+              [class.mkb-image-rounded]="block.rounded"
+              [src]="src"
+              [alt]="block.alt ?? ''"
+              loading="lazy"
+            />
+          }
+        }
+        @case ('tag') {
+          @if (raw(block.field) !== undefined && raw(block.field) !== '') {
+            <span [ngClass]="classes(block, valueStyle(block).tone ?? block.tone)">
+              @if (valueStyle(block).icon; as ic) {
+                <span class="mkb-icon" [innerHTML]="icon(ic)"></span>
+              }
+              {{ valueStyle(block).label ?? raw(block.field) }}
+            </span>
+          }
+        }
+        @case ('badge') {
+          @if (raw(block.field) !== undefined && raw(block.field) !== '') {
+            <span
+              [ngClass]="classes(block, valueStyle(block).tone ?? block.tone)"
+              [attr.title]="String(raw(block.field))"
+            >
+              <span class="mkb-icon" [innerHTML]="icon(valueStyle(block).icon ?? block.icon)"></span>
+              @if (block.showText) {
+                <span class="mkb-text">{{ valueStyle(block).label ?? raw(block.field) }}</span>
+              }
+            </span>
+          }
+        }
+        @case ('icon') {
+          <span [ngClass]="classes(block, block.tone)">
+            <span class="mkb-icon" [innerHTML]="icon(block.icon)"></span>
+          </span>
+        }
+        @case ('avatar') {
+          @if (avatarName(block); as name) {
+            <span [ngClass]="classes(block)">
+              @if (raw(block.photoField); as photo) {
+                <img class="mkb-avatar-img" [src]="photo" [alt]="name" loading="lazy" />
+              } @else {
+                <span class="mkb-avatar-initials">{{ ini(name) }}</span>
+              }
+              @if (block.nameField) { <span class="mkb-avatar-name">{{ name }}</span> }
+            </span>
+          }
+        }
+        @case ('facts') {
+          <div [ngClass]="classes(block)">
+            @for (fact of block.items; track $index) {
+              @if (raw(fact.field) !== undefined && raw(fact.field) !== '') {
+                <span class="mkb-fact">
+                  @if (fact.icon) { <span class="mkb-icon" [innerHTML]="icon(fact.icon)"></span> }
+                  <span class="mkb-fact-value">{{ factText(fact) }}</span>
+                </span>
+              }
+            }
+          </div>
+        }
+        @case ('items') {
+          @if (entryList(block).length) {
+            <div [ngClass]="classes(block)" [attr.data-entries]="block.field">
+              @if (block.showProgress && block.checkField) {
+                <div class="mkb-entries-progress">
+                  <span class="mkb-entries-count">
+                    {{ doneCount(block) }}/{{ entryList(block).length }}
+                  </span>
+                  <span class="mkb-progress-track">
+                    <span
+                      class="mkb-progress-fill"
+                      [style.width.%]="(doneCount(block) / entryList(block).length) * 100"
+                    ></span>
+                  </span>
+                </div>
+              }
+              <div
+                class="mkb-entries-list"
+                cdkDropList
+                [id]="entriesId(block)"
+                [cdkDropListData]="item().id"
+                [cdkDropListConnectedTo]="entryConnections(block)"
+                [cdkDropListDisabled]="!reorderEnabled(block)"
+                [cdkDropListEnterPredicate]="entryPredicate(block)"
+                (cdkDropListDropped)="onEntryDrop(block, $event)"
+              >
+                @for (entry of visibleEntries(block); track entry.id) {
+                  <div
+                    class="mkb-entry"
+                    cdkDrag
+                    [cdkDragData]="entry.id"
+                    [cdkDragDisabled]="!reorderEnabled(block)"
+                    [attr.data-entry]="entry.id"
+                    [attr.tabindex]="reorderEnabled(block) ? 0 : null"
+                    [attr.aria-keyshortcuts]="reorderEnabled(block) ? 'Control+ArrowUp Control+ArrowDown' : null"
+                    (keydown)="onEntryKeydown(block, entry, $event)"
+                    (cdkDragStarted)="lifecycle.emit({ phase: 'start', kind: 'entry', id: entry.id })"
+                    (cdkDragEnded)="lifecycle.emit({ phase: 'end', kind: 'entry', id: entry.id })"
+                  >
+                    @if (reorderEnabled(block)) {
+                      <span class="mkb-entry-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                    }
+                    @if (hasCap(block, 'check') && block.checkField) {
+                      <input
+                        type="checkbox"
+                        class="mkb-entry-check"
+                        [checked]="isDone(block, entry)"
+                        [attr.aria-label]="entryLabel(block, entry)"
+                        (change)="toggleEntry(block, entry)"
+                      />
+                    }
+                    <span class="mkb-entry-label" [class.is-done]="isDone(block, entry)">
+                      {{ entryLabel(block, entry) }}
+                    </span>
+                    @if (hasCap(block, 'action')) {
+                      @for (action of block.actions ?? []; track action.id) {
+                        <button
+                          type="button"
+                          class="mkb-entry-action"
+                          [attr.data-entry-action]="action.id"
+                          (click)="emitEntryAction(block, entry, action.id, $event)"
+                        >
+                          {{ action.label }}
+                        </button>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+              @if (hiddenCount(block) > 0) {
+                <span class="mkb-entries-more">+{{ hiddenCount(block) }}</span>
+              }
+            </div>
+          }
+        }
+        @case ('alert') {
+          @if (raw(block.field); as v) {
+            <div [ngClass]="classes(block, block.tone ?? 'warning')" role="status">
+              @if (block.icon) { <span class="mkb-icon" [innerHTML]="icon(block.icon)"></span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('progress') {
+          <div [ngClass]="classes(block, block.tone)">
+            @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+            <span
+              class="mkb-progress-track"
+              role="progressbar"
+              [attr.aria-valuenow]="progressValue(block)"
+              [attr.aria-valuemax]="block.max ?? 100"
+            >
+              <span class="mkb-progress-fill" [style.width.%]="progressPct(block)"></span>
+            </span>
+          </div>
+        }
+        @case ('divider') {
+          <hr [ngClass]="classes(block)" />
+        }
+        @case ('actions') {
+          <div [ngClass]="classes(block)">
+            @for (action of visibleActions(block); track action.id) {
+              <button
+                type="button"
+                class="mkb-action"
+                [ngClass]="action.tone ? 'mkb-tone-' + action.tone : ''"
+                (click)="emitAction(action, $event)"
+              >
+                @if (action.icon) { <span class="mkb-icon" [innerHTML]="icon(action.icon)"></span> }
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+        @case ('row') {
+          <div [ngClass]="rowClasses(block)">
+            <mos-kanban-card-blocks
+              [blocks]="block.blocks"
+              [item]="item()"
+              [registry]="registry()"
+              [locale]="locale()"
+              [column]="column()"
+              [lane]="lane()"
+              [allCardIds]="allCardIds()"
+              [canDropEntry]="canDropEntry()"
+              (action)="action.emit($event)"
+              (entryCheck)="entryCheck.emit($event)"
+              (entryAction)="entryAction.emit($event)"
+              (entryMove)="entryMove.emit($event)"
+              (lifecycle)="lifecycle.emit($event)"
+            />
+          </div>
+        }
+        @case ('custom') {
+          <div [ngClass]="classes(block)" [innerHTML]="customHtml(block.renderer)"></div>
+        }
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}.mkb-block{min-width:0}.mkb-label{display:block;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--mkb-muted, #6f6a7c)}.mkb-block-text .mkb-text,.mkb-block-number .mkb-text{color:var(--mkb-foreground, #241f33);overflow-wrap:anywhere}.mkb-variant-title .mkb-text{font-size:14px;font-weight:600}.mkb-variant-subtitle .mkb-text{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkb-variant-caption .mkb-text{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-variant-highlight .mkb-text{font-size:15px;font-weight:700;color:var(--mkb-accent, #5e35b1)}.mkb-block-image{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--mkb-radius-sm, 6px)}.mkb-image-rounded{border-radius:999px}.mkb-block-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--mkb-tone, var(--mkb-accent, #5e35b1)) 14%,transparent);color:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-badge{display:inline-flex;align-items:center;gap:4px;color:var(--mkb-tone, var(--mkb-muted, #6f6a7c))}.mkb-block-icon{display:inline-flex;color:var(--mkb-tone, var(--mkb-muted, #6f6a7c))}.mkb-block-avatar{display:inline-flex;align-items:center;gap:6px}.mkb-avatar-img,.mkb-avatar-initials{width:24px;height:24px;border-radius:999px;flex:none}.mkb-avatar-initials{display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--mkb-accent, #5e35b1)}.mkb-avatar-name{font-size:12px;color:var(--mkb-foreground, #241f33)}.mkb-block-facts{display:flex;flex-wrap:wrap;gap:var(--mkb-fact-gap, 10px);font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-fact{display:inline-flex;align-items:center;gap:3px}.mkb-block-items{display:flex;flex-direction:column;gap:4px}.mkb-entries-progress{display:flex;align-items:center;gap:8px}.mkb-entries-count{font-size:10.5px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkb-entries-progress .mkb-progress-track{flex:1}.mkb-entries-list{display:flex;flex-direction:column;gap:var(--mkb-entry-gap, 4px)}.mkb-entry{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;color:var(--mkb-foreground, #241f33);background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-entry.cdk-drag-placeholder{opacity:.4;border-style:dashed}.mkb-entry.cdk-drag-preview{box-shadow:0 6px 18px #0003}.mkb-entry-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:10px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-entry-check{accent-color:var(--mkb-accent, #5e35b1);margin:0;flex:none}.mkb-entry-label{flex:1;min-width:0;overflow-wrap:anywhere}.mkb-entry-label.is-done{text-decoration:line-through;color:var(--mkb-muted, #6f6a7c)}.mkb-entry-action{padding:2px 8px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);background:var(--mkb-card-bg, #fff);color:var(--mkb-foreground, #241f33);font:inherit;font-size:10.5px;cursor:pointer}.mkb-entries-more{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-block-alert{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--mkb-radius-sm, 6px);font-size:11.5px;background:color-mix(in srgb,var(--mkb-tone, var(--mkb-warning, #9a6b00)) 14%,transparent);color:var(--mkb-tone, var(--mkb-warning, #9a6b00))}.mkb-block-progress{display:flex;flex-direction:column;gap:3px}.mkb-progress-track{display:block;height:6px;border-radius:999px;background:var(--mkb-border, #e3e0ea);overflow:hidden}.mkb-progress-fill{display:block;height:100%;border-radius:999px;background:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-divider{border:0;border-top:1px solid var(--mkb-border, #e3e0ea);margin:2px 0}.mkb-block-actions{display:flex;flex-wrap:wrap;gap:6px}.mkb-action{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);background:var(--mkb-card-bg, #fff);color:var(--mkb-tone, var(--mkb-foreground, #241f33));font:inherit;font-size:12px;cursor:pointer}.mkb-action:hover{border-color:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-row{display:flex;align-items:center;gap:8px}.mkb-row-between{justify-content:space-between}.mkb-row-center{justify-content:center}.mkb-row-end{justify-content:flex-end}.mkb-row-wrap{flex-wrap:wrap}.mkb-icon{display:inline-flex;align-items:center}.mkb-tone-info{--mkb-tone: var(--mkb-info, #2264c4)}.mkb-tone-success{--mkb-tone: var(--mkb-success, #1b6e3c)}.mkb-tone-warning{--mkb-tone: var(--mkb-warning, #9a6b00)}.mkb-tone-danger{--mkb-tone: var(--mkb-danger, #b3261e)}.mkb-tone-neutral{--mkb-tone: var(--mkb-muted, #6f6a7c)}\n"], dependencies: [{ kind: "component", type: MosKanbanCardBlocks, selector: "mos-kanban-card-blocks", inputs: ["blocks", "item", "registry", "locale", "column", "lane", "allCardIds", "canDropEntry"], outputs: ["action", "entryCheck", "entryAction", "entryMove", "lifecycle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCardBlocks, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-card-blocks', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, CdkDropList, CdkDrag, CdkDragHandle, MosKanbanCardBlocks], template: `
+    @for (block of blocks(); track $index) {
+      @switch (block.type) {
+        @case ('text') {
+          @if (text(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('number') {
+          @if (num(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('date') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('time') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('datetime') {
+          @if (dateVal(block); as v) {
+            <div [ngClass]="classes(block)">
+              @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('image') {
+          @if (raw(block.field); as src) {
+            <img
+              [ngClass]="classes(block)"
+              [class.mkb-image-rounded]="block.rounded"
+              [src]="src"
+              [alt]="block.alt ?? ''"
+              loading="lazy"
+            />
+          }
+        }
+        @case ('tag') {
+          @if (raw(block.field) !== undefined && raw(block.field) !== '') {
+            <span [ngClass]="classes(block, valueStyle(block).tone ?? block.tone)">
+              @if (valueStyle(block).icon; as ic) {
+                <span class="mkb-icon" [innerHTML]="icon(ic)"></span>
+              }
+              {{ valueStyle(block).label ?? raw(block.field) }}
+            </span>
+          }
+        }
+        @case ('badge') {
+          @if (raw(block.field) !== undefined && raw(block.field) !== '') {
+            <span
+              [ngClass]="classes(block, valueStyle(block).tone ?? block.tone)"
+              [attr.title]="String(raw(block.field))"
+            >
+              <span class="mkb-icon" [innerHTML]="icon(valueStyle(block).icon ?? block.icon)"></span>
+              @if (block.showText) {
+                <span class="mkb-text">{{ valueStyle(block).label ?? raw(block.field) }}</span>
+              }
+            </span>
+          }
+        }
+        @case ('icon') {
+          <span [ngClass]="classes(block, block.tone)">
+            <span class="mkb-icon" [innerHTML]="icon(block.icon)"></span>
+          </span>
+        }
+        @case ('avatar') {
+          @if (avatarName(block); as name) {
+            <span [ngClass]="classes(block)">
+              @if (raw(block.photoField); as photo) {
+                <img class="mkb-avatar-img" [src]="photo" [alt]="name" loading="lazy" />
+              } @else {
+                <span class="mkb-avatar-initials">{{ ini(name) }}</span>
+              }
+              @if (block.nameField) { <span class="mkb-avatar-name">{{ name }}</span> }
+            </span>
+          }
+        }
+        @case ('facts') {
+          <div [ngClass]="classes(block)">
+            @for (fact of block.items; track $index) {
+              @if (raw(fact.field) !== undefined && raw(fact.field) !== '') {
+                <span class="mkb-fact">
+                  @if (fact.icon) { <span class="mkb-icon" [innerHTML]="icon(fact.icon)"></span> }
+                  <span class="mkb-fact-value">{{ factText(fact) }}</span>
+                </span>
+              }
+            }
+          </div>
+        }
+        @case ('items') {
+          @if (entryList(block).length) {
+            <div [ngClass]="classes(block)" [attr.data-entries]="block.field">
+              @if (block.showProgress && block.checkField) {
+                <div class="mkb-entries-progress">
+                  <span class="mkb-entries-count">
+                    {{ doneCount(block) }}/{{ entryList(block).length }}
+                  </span>
+                  <span class="mkb-progress-track">
+                    <span
+                      class="mkb-progress-fill"
+                      [style.width.%]="(doneCount(block) / entryList(block).length) * 100"
+                    ></span>
+                  </span>
+                </div>
+              }
+              <div
+                class="mkb-entries-list"
+                cdkDropList
+                [id]="entriesId(block)"
+                [cdkDropListData]="item().id"
+                [cdkDropListConnectedTo]="entryConnections(block)"
+                [cdkDropListDisabled]="!reorderEnabled(block)"
+                [cdkDropListEnterPredicate]="entryPredicate(block)"
+                (cdkDropListDropped)="onEntryDrop(block, $event)"
+              >
+                @for (entry of visibleEntries(block); track entry.id) {
+                  <div
+                    class="mkb-entry"
+                    cdkDrag
+                    [cdkDragData]="entry.id"
+                    [cdkDragDisabled]="!reorderEnabled(block)"
+                    [attr.data-entry]="entry.id"
+                    [attr.tabindex]="reorderEnabled(block) ? 0 : null"
+                    [attr.aria-keyshortcuts]="reorderEnabled(block) ? 'Control+ArrowUp Control+ArrowDown' : null"
+                    (keydown)="onEntryKeydown(block, entry, $event)"
+                    (cdkDragStarted)="lifecycle.emit({ phase: 'start', kind: 'entry', id: entry.id })"
+                    (cdkDragEnded)="lifecycle.emit({ phase: 'end', kind: 'entry', id: entry.id })"
+                  >
+                    @if (reorderEnabled(block)) {
+                      <span class="mkb-entry-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                    }
+                    @if (hasCap(block, 'check') && block.checkField) {
+                      <input
+                        type="checkbox"
+                        class="mkb-entry-check"
+                        [checked]="isDone(block, entry)"
+                        [attr.aria-label]="entryLabel(block, entry)"
+                        (change)="toggleEntry(block, entry)"
+                      />
+                    }
+                    <span class="mkb-entry-label" [class.is-done]="isDone(block, entry)">
+                      {{ entryLabel(block, entry) }}
+                    </span>
+                    @if (hasCap(block, 'action')) {
+                      @for (action of block.actions ?? []; track action.id) {
+                        <button
+                          type="button"
+                          class="mkb-entry-action"
+                          [attr.data-entry-action]="action.id"
+                          (click)="emitEntryAction(block, entry, action.id, $event)"
+                        >
+                          {{ action.label }}
+                        </button>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+              @if (hiddenCount(block) > 0) {
+                <span class="mkb-entries-more">+{{ hiddenCount(block) }}</span>
+              }
+            </div>
+          }
+        }
+        @case ('alert') {
+          @if (raw(block.field); as v) {
+            <div [ngClass]="classes(block, block.tone ?? 'warning')" role="status">
+              @if (block.icon) { <span class="mkb-icon" [innerHTML]="icon(block.icon)"></span> }
+              <span class="mkb-text">{{ v }}</span>
+            </div>
+          }
+        }
+        @case ('progress') {
+          <div [ngClass]="classes(block, block.tone)">
+            @if (block.label) { <span class="mkb-label">{{ block.label }}</span> }
+            <span
+              class="mkb-progress-track"
+              role="progressbar"
+              [attr.aria-valuenow]="progressValue(block)"
+              [attr.aria-valuemax]="block.max ?? 100"
+            >
+              <span class="mkb-progress-fill" [style.width.%]="progressPct(block)"></span>
+            </span>
+          </div>
+        }
+        @case ('divider') {
+          <hr [ngClass]="classes(block)" />
+        }
+        @case ('actions') {
+          <div [ngClass]="classes(block)">
+            @for (action of visibleActions(block); track action.id) {
+              <button
+                type="button"
+                class="mkb-action"
+                [ngClass]="action.tone ? 'mkb-tone-' + action.tone : ''"
+                (click)="emitAction(action, $event)"
+              >
+                @if (action.icon) { <span class="mkb-icon" [innerHTML]="icon(action.icon)"></span> }
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+        @case ('row') {
+          <div [ngClass]="rowClasses(block)">
+            <mos-kanban-card-blocks
+              [blocks]="block.blocks"
+              [item]="item()"
+              [registry]="registry()"
+              [locale]="locale()"
+              [column]="column()"
+              [lane]="lane()"
+              [allCardIds]="allCardIds()"
+              [canDropEntry]="canDropEntry()"
+              (action)="action.emit($event)"
+              (entryCheck)="entryCheck.emit($event)"
+              (entryAction)="entryAction.emit($event)"
+              (entryMove)="entryMove.emit($event)"
+              (lifecycle)="lifecycle.emit($event)"
+            />
+          </div>
+        }
+        @case ('custom') {
+          <div [ngClass]="classes(block)" [innerHTML]="customHtml(block.renderer)"></div>
+        }
+      }
+    }
+  `, styles: [":host{display:contents}.mkb-block{min-width:0}.mkb-label{display:block;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--mkb-muted, #6f6a7c)}.mkb-block-text .mkb-text,.mkb-block-number .mkb-text{color:var(--mkb-foreground, #241f33);overflow-wrap:anywhere}.mkb-variant-title .mkb-text{font-size:14px;font-weight:600}.mkb-variant-subtitle .mkb-text{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkb-variant-caption .mkb-text{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-variant-highlight .mkb-text{font-size:15px;font-weight:700;color:var(--mkb-accent, #5e35b1)}.mkb-block-image{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--mkb-radius-sm, 6px)}.mkb-image-rounded{border-radius:999px}.mkb-block-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--mkb-tone, var(--mkb-accent, #5e35b1)) 14%,transparent);color:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-badge{display:inline-flex;align-items:center;gap:4px;color:var(--mkb-tone, var(--mkb-muted, #6f6a7c))}.mkb-block-icon{display:inline-flex;color:var(--mkb-tone, var(--mkb-muted, #6f6a7c))}.mkb-block-avatar{display:inline-flex;align-items:center;gap:6px}.mkb-avatar-img,.mkb-avatar-initials{width:24px;height:24px;border-radius:999px;flex:none}.mkb-avatar-initials{display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--mkb-accent, #5e35b1)}.mkb-avatar-name{font-size:12px;color:var(--mkb-foreground, #241f33)}.mkb-block-facts{display:flex;flex-wrap:wrap;gap:var(--mkb-fact-gap, 10px);font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-fact{display:inline-flex;align-items:center;gap:3px}.mkb-block-items{display:flex;flex-direction:column;gap:4px}.mkb-entries-progress{display:flex;align-items:center;gap:8px}.mkb-entries-count{font-size:10.5px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkb-entries-progress .mkb-progress-track{flex:1}.mkb-entries-list{display:flex;flex-direction:column;gap:var(--mkb-entry-gap, 4px)}.mkb-entry{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;color:var(--mkb-foreground, #241f33);background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-entry.cdk-drag-placeholder{opacity:.4;border-style:dashed}.mkb-entry.cdk-drag-preview{box-shadow:0 6px 18px #0003}.mkb-entry-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:10px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-entry-check{accent-color:var(--mkb-accent, #5e35b1);margin:0;flex:none}.mkb-entry-label{flex:1;min-width:0;overflow-wrap:anywhere}.mkb-entry-label.is-done{text-decoration:line-through;color:var(--mkb-muted, #6f6a7c)}.mkb-entry-action{padding:2px 8px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);background:var(--mkb-card-bg, #fff);color:var(--mkb-foreground, #241f33);font:inherit;font-size:10.5px;cursor:pointer}.mkb-entries-more{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkb-block-alert{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--mkb-radius-sm, 6px);font-size:11.5px;background:color-mix(in srgb,var(--mkb-tone, var(--mkb-warning, #9a6b00)) 14%,transparent);color:var(--mkb-tone, var(--mkb-warning, #9a6b00))}.mkb-block-progress{display:flex;flex-direction:column;gap:3px}.mkb-progress-track{display:block;height:6px;border-radius:999px;background:var(--mkb-border, #e3e0ea);overflow:hidden}.mkb-progress-fill{display:block;height:100%;border-radius:999px;background:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-divider{border:0;border-top:1px solid var(--mkb-border, #e3e0ea);margin:2px 0}.mkb-block-actions{display:flex;flex-wrap:wrap;gap:6px}.mkb-action{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);background:var(--mkb-card-bg, #fff);color:var(--mkb-tone, var(--mkb-foreground, #241f33));font:inherit;font-size:12px;cursor:pointer}.mkb-action:hover{border-color:var(--mkb-tone, var(--mkb-accent, #5e35b1))}.mkb-block-row{display:flex;align-items:center;gap:8px}.mkb-row-between{justify-content:space-between}.mkb-row-center{justify-content:center}.mkb-row-end{justify-content:flex-end}.mkb-row-wrap{flex-wrap:wrap}.mkb-icon{display:inline-flex;align-items:center}.mkb-tone-info{--mkb-tone: var(--mkb-info, #2264c4)}.mkb-tone-success{--mkb-tone: var(--mkb-success, #1b6e3c)}.mkb-tone-warning{--mkb-tone: var(--mkb-warning, #9a6b00)}.mkb-tone-danger{--mkb-tone: var(--mkb-danger, #b3261e)}.mkb-tone-neutral{--mkb-tone: var(--mkb-muted, #6f6a7c)}\n"] }]
+        }], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], lane: [{ type: i0.Input, args: [{ isSignal: true, alias: "lane", required: false }] }], allCardIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCardIds", required: false }] }], canDropEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDropEntry", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], entryCheck: [{ type: i0.Output, args: ["entryCheck"] }], entryAction: [{ type: i0.Output, args: ["entryAction"] }], entryMove: [{ type: i0.Output, args: ["entryMove"] }], lifecycle: [{ type: i0.Output, args: ["lifecycle"] }] } });
+
+/**
+ * Uma CÉLULA do board (coluna × lane; sem lanes, a coluna inteira): drop list
+ * do CDK + cartões. É a unidade de drop — toda decisão de movimento é
+ * delegada ao core via drag-controller (preview == commit).
+ */
+class MosKanbanCell {
+    board = input.required(...(ngDevMode ? [{ debugName: "board" }] : /* istanbul ignore next */ []));
+    columnId = input.required(...(ngDevMode ? [{ debugName: "columnId" }] : /* istanbul ignore next */ []));
+    laneId = input(undefined, ...(ngDevMode ? [{ debugName: "laneId" }] : /* istanbul ignore next */ []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    cardTemplate = input(null, ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
+    /** Modelo declarativo do cartão (do board.cardConfig); usado quando não há
+     * template custom. */
+    cardConfig = input(null, ...(ngDevMode ? [{ debugName: "cardConfig" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    selection = input([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Ids das drop lists de células conectadas (fornecidos pelo board). */
+    connectedTo = input([], ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
+    /** Ids de todos os cards (conexões do move-across de entries). */
+    allCardIds = input([], ...(ngDevMode ? [{ debugName: "allCardIds" }] : /* istanbul ignore next */ []));
+    cardActivate = output();
+    cardContext = output();
+    cardKey = output();
+    cardAction = output();
+    entryCheck = output();
+    entryAction = output();
+    entryMove = output();
+    /** Ciclo de gesto (card/entry) — o board traduz em dragStarted/Ended. */
+    lifecycle = output();
+    dropRejected = output();
+    /** Preview de drop de entry entre cards — MESMO caminho do commit. */
+    canDropEntryFn = (req) => this.board().canMoveEntry({
+        cardId: req.fromCardId,
+        field: req.field,
+        entryId: req.entryId,
+        index: 0,
+        toCardId: req.toCardId,
+    }).ok;
+    /** Toque segura 250ms antes de iniciar o drag — o scroll da lista continua
+     * natural no touch; mouse arrasta imediatamente. */
+    dragStartDelay = { touch: 250, mouse: 0 };
+    /** Id DOM da própria drop list (conectada às demais pelo board). */
+    cellId = computed(() => cellListId(this.columnId(), this.laneId()), ...(ngDevMode ? [{ debugName: "cellId" }] : /* istanbul ignore next */ []));
+    label() {
+        const lane = this.laneId();
+        return lane ? `${this.columnId()} · ${lane}` : this.columnId();
+    }
+    /** O CDK pergunta se o item pode ENTRAR — a resposta vem do core. Drags de
+     * grupo (coluna/lane, data = objeto) NÃO entram em célula: só cartões
+     * (data = id string). */
+    enterPredicate = (drag) => typeof drag.data === 'string' &&
+        canEnterCell(this.board(), drag.data, this.columnId(), this.laneId());
+    /** Flag de cancelamento por Esc (provider do board; null fora dele). */
+    cancelFlag = inject(DragCancelFlag, { optional: true });
+    onDrop(event) {
+        if (this.cancelFlag?.consume())
+            return; // Esc: gesto cancelado
+        const itemId = event.item.data;
+        if (event.previousContainer === event.container &&
+            event.previousIndex === event.currentIndex) {
+            return; // soltou onde estava
+        }
+        const result = executeDrop(this.board(), itemId, this.columnId(), event.currentIndex, this.laneId());
+        if (!result.ok) {
+            this.dropRejected.emit({
+                itemId,
+                columnId: this.columnId(),
+                laneId: this.laneId(),
+                reason: result.reason,
+            });
+        }
+    }
+    activate(item, event) {
+        const toggle = event instanceof MouseEvent && (event.ctrlKey || event.metaKey);
+        this.cardActivate.emit({ item, toggle });
+    }
+    onKeydown(item, event) {
+        if (event.key === 'Enter') {
+            this.cardActivate.emit({ item, toggle: event.ctrlKey || event.metaKey });
+            return;
+        }
+        if (event.key === 'ArrowUp' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight') {
+            event.preventDefault(); // senão a seta rola a lista
+            this.cardKey.emit({
+                item,
+                key: event.key,
+                ctrl: event.ctrlKey || event.metaKey,
+                shift: event.shiftKey,
+            });
+        }
+    }
+    onContextMenu(item, event) {
+        const mouse = event;
+        event.preventDefault();
+        this.cardContext.emit({ item, x: mouse.clientX, y: mouse.clientY });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MosKanbanCell, isStandalone: true, selector: "mos-kanban-cell", inputs: { board: { classPropertyName: "board", publicName: "board", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: true, transformFunction: null }, laneId: { classPropertyName: "laneId", publicName: "laneId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, cardConfig: { classPropertyName: "cardConfig", publicName: "cardConfig", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, allCardIds: { classPropertyName: "allCardIds", publicName: "allCardIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardActivate: "cardActivate", cardContext: "cardContext", cardKey: "cardKey", cardAction: "cardAction", entryCheck: "entryCheck", entryAction: "entryAction", entryMove: "entryMove", lifecycle: "lifecycle", dropRejected: "dropRejected" }, ngImport: i0, template: `
+    <div
+      class="mkb-cell-body"
+      cdkDropList
+      [id]="cellId()"
+      [cdkDropListConnectedTo]="connectedTo()"
+      [cdkDropListDisabled]="readOnly()"
+      [cdkDropListEnterPredicate]="enterPredicate"
+      (cdkDropListDropped)="onDrop($event)"
+      role="listbox"
+      aria-multiselectable="true"
+      [attr.aria-label]="label()"
+      [attr.data-column]="columnId()"
+      [attr.data-lane]="laneId() ?? null"
+    >
+      @for (item of items(); track item.id) {
+        <div
+          class="mkb-card"
+          cdkDrag
+          [cdkDragData]="item.id"
+          [cdkDragDisabled]="readOnly()"
+          [cdkDragStartDelay]="dragStartDelay"
+          role="option"
+          tabindex="0"
+          [class.is-selected]="selection().includes(item.id)"
+          [attr.data-item]="item.id"
+          [attr.aria-selected]="selection().includes(item.id)"
+          aria-keyshortcuts="Control+ArrowLeft Control+ArrowRight Control+ArrowUp Control+ArrowDown"
+          (click)="activate(item, $event)"
+          (keydown)="onKeydown(item, $event)"
+          (contextmenu)="onContextMenu(item, $event)"
+          (cdkDragStarted)="lifecycle.emit({ phase: 'start', kind: 'card', id: item.id })"
+          (cdkDragEnded)="lifecycle.emit({ phase: 'end', kind: 'card', id: item.id })"
+        >
+          @if (cardConfig()?.dragHandle && !readOnly()) {
+            <span class="mkb-card-grip" cdkDragHandle aria-hidden="true">⠿</span>
+          }
+          @if (cardTemplate(); as tpl) {
+            <ng-container *ngTemplateOutlet="tpl; context: { $implicit: item }" />
+          } @else if (cardConfig(); as card) {
+            <mos-kanban-card-blocks
+              [blocks]="card.blocks"
+              [item]="item"
+              [registry]="board().registry"
+              [locale]="board().locale"
+              [column]="columnId()"
+              [lane]="laneId()"
+              [allCardIds]="allCardIds()"
+              [canDropEntry]="canDropEntryFn"
+              (action)="cardAction.emit($event)"
+              (entryCheck)="entryCheck.emit($event)"
+              (entryAction)="entryAction.emit($event)"
+              (entryMove)="entryMove.emit($event)"
+              (lifecycle)="lifecycle.emit($event)"
+            />
+          } @else {
+            <mos-kanban-card [item]="item" />
+          }
+        </div>
+      } @empty {
+        <div class="mkb-cell-empty">Solte itens aqui</div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;min-width:0}.mkb-cell-body{display:flex;flex-direction:column;gap:var(--mkb-card-gap, 8px);padding:var(--mkb-cell-padding, 4px 8px 10px);overflow-y:auto;min-height:60px;height:100%}.mkb-card{position:relative;display:flex;flex-direction:column;gap:var(--mkb-block-gap, 8px);background:var(--mkb-card-bg, var(--color-panel, #fff));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius-sm, var(--radius-sm, 6px));padding:var(--mkb-card-padding, 10px 12px);cursor:grab;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mkb-dur, .15s) var(--mkb-ease, ease),border-color var(--mkb-dur, .15s) var(--mkb-ease, ease)}.mkb-card.is-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:0 0 0 1px var(--mkb-accent, #5e35b1)}.mkb-card:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-card.cdk-drag-dragging{cursor:grabbing}.mkb-card-grip{position:absolute;top:8px;right:8px;cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:11px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-card:has(.mkb-card-grip){cursor:default}.mkb-card.cdk-drag-preview{box-shadow:0 10px 28px #00000038;rotate:2deg;opacity:.95}.mkb-card.cdk-drag-animating{transition:transform var(--mkb-dur-move, .18s) var(--mkb-ease, ease)}@media(prefers-reduced-motion:reduce){.mkb-card,.mkb-card.cdk-drag-animating{transition:none}.mkb-card.cdk-drag-preview{rotate:none}}.mkb-card.cdk-drag-placeholder{opacity:.4;border:1px dashed var(--mkb-accent, #5e35b1);background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 6%,var(--mkb-card-bg, #fff))}.mkb-cell-empty{padding:14px 8px;text-align:center;font-size:11.5px;color:var(--mkb-muted, var(--color-muted, #6f6a7c));border:1px dashed var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px)}:host-context(.mkb-readonly) .mkb-card{cursor:default}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MosKanbanCard, selector: "mos-kanban-card", inputs: ["item"] }, { kind: "component", type: MosKanbanCardBlocks, selector: "mos-kanban-card-blocks", inputs: ["blocks", "item", "registry", "locale", "column", "lane", "allCardIds", "canDropEntry"], outputs: ["action", "entryCheck", "entryAction", "entryMove", "lifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        NgTemplateOutlet,
+                        MosKanbanCard,
+                        MosKanbanCardBlocks,
+                    ], template: `
+    <div
+      class="mkb-cell-body"
+      cdkDropList
+      [id]="cellId()"
+      [cdkDropListConnectedTo]="connectedTo()"
+      [cdkDropListDisabled]="readOnly()"
+      [cdkDropListEnterPredicate]="enterPredicate"
+      (cdkDropListDropped)="onDrop($event)"
+      role="listbox"
+      aria-multiselectable="true"
+      [attr.aria-label]="label()"
+      [attr.data-column]="columnId()"
+      [attr.data-lane]="laneId() ?? null"
+    >
+      @for (item of items(); track item.id) {
+        <div
+          class="mkb-card"
+          cdkDrag
+          [cdkDragData]="item.id"
+          [cdkDragDisabled]="readOnly()"
+          [cdkDragStartDelay]="dragStartDelay"
+          role="option"
+          tabindex="0"
+          [class.is-selected]="selection().includes(item.id)"
+          [attr.data-item]="item.id"
+          [attr.aria-selected]="selection().includes(item.id)"
+          aria-keyshortcuts="Control+ArrowLeft Control+ArrowRight Control+ArrowUp Control+ArrowDown"
+          (click)="activate(item, $event)"
+          (keydown)="onKeydown(item, $event)"
+          (contextmenu)="onContextMenu(item, $event)"
+          (cdkDragStarted)="lifecycle.emit({ phase: 'start', kind: 'card', id: item.id })"
+          (cdkDragEnded)="lifecycle.emit({ phase: 'end', kind: 'card', id: item.id })"
+        >
+          @if (cardConfig()?.dragHandle && !readOnly()) {
+            <span class="mkb-card-grip" cdkDragHandle aria-hidden="true">⠿</span>
+          }
+          @if (cardTemplate(); as tpl) {
+            <ng-container *ngTemplateOutlet="tpl; context: { $implicit: item }" />
+          } @else if (cardConfig(); as card) {
+            <mos-kanban-card-blocks
+              [blocks]="card.blocks"
+              [item]="item"
+              [registry]="board().registry"
+              [locale]="board().locale"
+              [column]="columnId()"
+              [lane]="laneId()"
+              [allCardIds]="allCardIds()"
+              [canDropEntry]="canDropEntryFn"
+              (action)="cardAction.emit($event)"
+              (entryCheck)="entryCheck.emit($event)"
+              (entryAction)="entryAction.emit($event)"
+              (entryMove)="entryMove.emit($event)"
+              (lifecycle)="lifecycle.emit($event)"
+            />
+          } @else {
+            <mos-kanban-card [item]="item" />
+          }
+        </div>
+      } @empty {
+        <div class="mkb-cell-empty">Solte itens aqui</div>
+      }
+    </div>
+  `, styles: [":host{display:block;min-width:0}.mkb-cell-body{display:flex;flex-direction:column;gap:var(--mkb-card-gap, 8px);padding:var(--mkb-cell-padding, 4px 8px 10px);overflow-y:auto;min-height:60px;height:100%}.mkb-card{position:relative;display:flex;flex-direction:column;gap:var(--mkb-block-gap, 8px);background:var(--mkb-card-bg, var(--color-panel, #fff));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius-sm, var(--radius-sm, 6px));padding:var(--mkb-card-padding, 10px 12px);cursor:grab;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mkb-dur, .15s) var(--mkb-ease, ease),border-color var(--mkb-dur, .15s) var(--mkb-ease, ease)}.mkb-card.is-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:0 0 0 1px var(--mkb-accent, #5e35b1)}.mkb-card:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-card.cdk-drag-dragging{cursor:grabbing}.mkb-card-grip{position:absolute;top:8px;right:8px;cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:11px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-card:has(.mkb-card-grip){cursor:default}.mkb-card.cdk-drag-preview{box-shadow:0 10px 28px #00000038;rotate:2deg;opacity:.95}.mkb-card.cdk-drag-animating{transition:transform var(--mkb-dur-move, .18s) var(--mkb-ease, ease)}@media(prefers-reduced-motion:reduce){.mkb-card,.mkb-card.cdk-drag-animating{transition:none}.mkb-card.cdk-drag-preview{rotate:none}}.mkb-card.cdk-drag-placeholder{opacity:.4;border:1px dashed var(--mkb-accent, #5e35b1);background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 6%,var(--mkb-card-bg, #fff))}.mkb-cell-empty{padding:14px 8px;text-align:center;font-size:11.5px;color:var(--mkb-muted, var(--color-muted, #6f6a7c));border:1px dashed var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px)}:host-context(.mkb-readonly) .mkb-card{cursor:default}\n"] }]
+        }], propDecorators: { board: [{ type: i0.Input, args: [{ isSignal: true, alias: "board", required: true }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: true }] }], laneId: [{ type: i0.Input, args: [{ isSignal: true, alias: "laneId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], cardTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTemplate", required: false }] }], cardConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardConfig", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], allCardIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCardIds", required: false }] }], cardActivate: [{ type: i0.Output, args: ["cardActivate"] }], cardContext: [{ type: i0.Output, args: ["cardContext"] }], cardKey: [{ type: i0.Output, args: ["cardKey"] }], cardAction: [{ type: i0.Output, args: ["cardAction"] }], entryCheck: [{ type: i0.Output, args: ["entryCheck"] }], entryAction: [{ type: i0.Output, args: ["entryAction"] }], entryMove: [{ type: i0.Output, args: ["entryMove"] }], lifecycle: [{ type: i0.Output, args: ["lifecycle"] }], dropRejected: [{ type: i0.Output, args: ["dropRejected"] }] } });
+
+/** Uma coluna do board SEM lanes: cabeçalho (título/contagem/WIP) + uma única
+ * célula ocupando a coluna inteira. Com lanes, o board monta a grade de
+ * células diretamente. */
+class MosKanbanColumn {
+    board = input.required(...(ngDevMode ? [{ debugName: "board" }] : /* istanbul ignore next */ []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    cardTemplate = input(null, ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
+    cardConfig = input(null, ...(ngDevMode ? [{ debugName: "cardConfig" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    reorderable = input(false, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
+    selection = input([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Ids das drop lists de células conectadas (repasse para a célula). */
+    connectedTo = input([], ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
+    allCardIds = input([], ...(ngDevMode ? [{ debugName: "allCardIds" }] : /* istanbul ignore next */ []));
+    cardActivate = output();
+    cardContext = output();
+    cardKey = output();
+    cardAction = output();
+    entryCheck = output();
+    entryAction = output();
+    entryMove = output();
+    lifecycle = output();
+    dropRejected = output();
+    /** Ctrl+←/→ no cabeçalho: pedido de reordenação (o board executa). */
+    reorderKey = output();
+    isFull = computed(() => {
+        const { count, limit } = this.column();
+        return limit !== undefined && count >= limit;
+    }, ...(ngDevMode ? [{ debugName: "isFull" }] : /* istanbul ignore next */ []));
+    /** Cor do cabeçalho vinda de group.meta.color (a lib não interpreta meta
+     * além disto). */
+    color = computed(() => {
+        const c = this.column().meta?.['color'];
+        return typeof c === 'string' ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    onHeaderKeydown(event) {
+        if (!this.reorderable() || !(event.ctrlKey || event.metaKey))
+            return;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.reorderKey.emit('left');
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.reorderKey.emit('right');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: MosKanbanColumn, isStandalone: true, selector: "mos-kanban-column", inputs: { board: { classPropertyName: "board", publicName: "board", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, cardConfig: { classPropertyName: "cardConfig", publicName: "cardConfig", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, allCardIds: { classPropertyName: "allCardIds", publicName: "allCardIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardActivate: "cardActivate", cardContext: "cardContext", cardKey: "cardKey", cardAction: "cardAction", entryCheck: "entryCheck", entryAction: "entryAction", entryMove: "entryMove", lifecycle: "lifecycle", dropRejected: "dropRejected", reorderKey: "reorderKey" }, host: { properties: { "style.--mkb-col-accent": "color()" } }, ngImport: i0, template: `
+    <header
+      class="mkb-col-header"
+      [class.mkb-col-accented]="!!color()"
+      [class.mkb-col-reorderable]="reorderable()"
+      [attr.tabindex]="reorderable() ? 0 : null"
+      [attr.data-column-header]="column().id"
+      [attr.role]="reorderable() ? 'button' : null"
+      [attr.aria-label]="reorderable() ? 'Coluna ' + (column().title ?? column().id) + ' — Ctrl+setas para reordenar' : null"
+      [attr.aria-keyshortcuts]="reorderable() ? 'Control+ArrowLeft Control+ArrowRight' : null"
+      (keydown)="onHeaderKeydown($event)"
+    >
+      <!-- alça CDK projetada pelo board: o cdkDragHandle precisa ser
+           conteúdo do MESMO cdkDrag (aplicado no host deste componente) -->
+      <ng-content select="[mkbColHandle]" />
+      <span class="mkb-col-title">{{ column().title ?? column().id }}</span>
+      <span
+        class="mkb-col-count"
+        [class.is-full]="isFull()"
+        [attr.title]="isFull() ? 'Limite de itens atingido' : null"
+      >
+        {{ column().count }}{{ column().limit !== undefined ? ' / ' + column().limit : '' }}
+      </span>
+    </header>
+
+    <mos-kanban-cell
+      class="mkb-col-cell"
+      [board]="board()"
+      [columnId]="column().id"
+      [items]="items()"
+      [cardTemplate]="cardTemplate()"
+      [cardConfig]="cardConfig()"
+      [readOnly]="readOnly()"
+      [selection]="selection()"
+      [connectedTo]="connectedTo()"
+      [allCardIds]="allCardIds()"
+      (cardActivate)="cardActivate.emit($event)"
+      (cardContext)="cardContext.emit($event)"
+      (cardKey)="cardKey.emit($event)"
+      (cardAction)="cardAction.emit($event)"
+      (entryCheck)="entryCheck.emit($event)"
+      (entryAction)="entryAction.emit($event)"
+      (entryMove)="entryMove.emit($event)"
+      (lifecycle)="lifecycle.emit($event)"
+      (dropRejected)="dropRejected.emit($event)"
+    />
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;min-width:0;max-height:100%;background:var(--mkb-column-bg, var(--color-surface, #efedf3));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius, var(--radius-md, 10px))}.mkb-col-header{display:flex;align-items:center;gap:8px;padding:var(--mkb-header-padding, 10px 12px)}.mkb-col-header .mkb-col-title{flex:1}.mkb-col-header:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35));border-radius:var(--mkb-radius-sm, 6px)}.mkb-col-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-col-grip:active{cursor:grabbing}.mkb-col-header.mkb-col-accented{background:color-mix(in srgb,var(--mkb-col-accent) 16%,transparent);border-top:3px solid var(--mkb-col-accent);border-radius:var(--mkb-radius, 10px) var(--mkb-radius, 10px) 0 0}.mkb-col-title{font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--mkb-foreground, var(--color-foreground, #241f33))}.mkb-col-count{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--mkb-card-bg, var(--color-panel, #fff));color:var(--mkb-muted, var(--color-muted, #6f6a7c))}.mkb-col-count.is-full{color:var(--mkb-danger, #b3261e)}.mkb-col-cell{flex:1;min-height:0}\n"], dependencies: [{ kind: "component", type: MosKanbanCell, selector: "mos-kanban-cell", inputs: ["board", "columnId", "laneId", "items", "cardTemplate", "cardConfig", "readOnly", "selection", "connectedTo", "allCardIds"], outputs: ["cardActivate", "cardContext", "cardKey", "cardAction", "entryCheck", "entryAction", "entryMove", "lifecycle", "dropRejected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MosKanbanCell], template: `
+    <header
+      class="mkb-col-header"
+      [class.mkb-col-accented]="!!color()"
+      [class.mkb-col-reorderable]="reorderable()"
+      [attr.tabindex]="reorderable() ? 0 : null"
+      [attr.data-column-header]="column().id"
+      [attr.role]="reorderable() ? 'button' : null"
+      [attr.aria-label]="reorderable() ? 'Coluna ' + (column().title ?? column().id) + ' — Ctrl+setas para reordenar' : null"
+      [attr.aria-keyshortcuts]="reorderable() ? 'Control+ArrowLeft Control+ArrowRight' : null"
+      (keydown)="onHeaderKeydown($event)"
+    >
+      <!-- alça CDK projetada pelo board: o cdkDragHandle precisa ser
+           conteúdo do MESMO cdkDrag (aplicado no host deste componente) -->
+      <ng-content select="[mkbColHandle]" />
+      <span class="mkb-col-title">{{ column().title ?? column().id }}</span>
+      <span
+        class="mkb-col-count"
+        [class.is-full]="isFull()"
+        [attr.title]="isFull() ? 'Limite de itens atingido' : null"
+      >
+        {{ column().count }}{{ column().limit !== undefined ? ' / ' + column().limit : '' }}
+      </span>
+    </header>
+
+    <mos-kanban-cell
+      class="mkb-col-cell"
+      [board]="board()"
+      [columnId]="column().id"
+      [items]="items()"
+      [cardTemplate]="cardTemplate()"
+      [cardConfig]="cardConfig()"
+      [readOnly]="readOnly()"
+      [selection]="selection()"
+      [connectedTo]="connectedTo()"
+      [allCardIds]="allCardIds()"
+      (cardActivate)="cardActivate.emit($event)"
+      (cardContext)="cardContext.emit($event)"
+      (cardKey)="cardKey.emit($event)"
+      (cardAction)="cardAction.emit($event)"
+      (entryCheck)="entryCheck.emit($event)"
+      (entryAction)="entryAction.emit($event)"
+      (entryMove)="entryMove.emit($event)"
+      (lifecycle)="lifecycle.emit($event)"
+      (dropRejected)="dropRejected.emit($event)"
+    />
+  `, host: { '[style.--mkb-col-accent]': 'color()' }, styles: [":host{display:flex;flex-direction:column;min-width:0;max-height:100%;background:var(--mkb-column-bg, var(--color-surface, #efedf3));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius, var(--radius-md, 10px))}.mkb-col-header{display:flex;align-items:center;gap:8px;padding:var(--mkb-header-padding, 10px 12px)}.mkb-col-header .mkb-col-title{flex:1}.mkb-col-header:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35));border-radius:var(--mkb-radius-sm, 6px)}.mkb-col-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-col-grip:active{cursor:grabbing}.mkb-col-header.mkb-col-accented{background:color-mix(in srgb,var(--mkb-col-accent) 16%,transparent);border-top:3px solid var(--mkb-col-accent);border-radius:var(--mkb-radius, 10px) var(--mkb-radius, 10px) 0 0}.mkb-col-title{font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--mkb-foreground, var(--color-foreground, #241f33))}.mkb-col-count{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--mkb-card-bg, var(--color-panel, #fff));color:var(--mkb-muted, var(--color-muted, #6f6a7c))}.mkb-col-count.is-full{color:var(--mkb-danger, #b3261e)}.mkb-col-cell{flex:1;min-height:0}\n"] }]
+        }], propDecorators: { board: [{ type: i0.Input, args: [{ isSignal: true, alias: "board", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], cardTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTemplate", required: false }] }], cardConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardConfig", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], allCardIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCardIds", required: false }] }], cardActivate: [{ type: i0.Output, args: ["cardActivate"] }], cardContext: [{ type: i0.Output, args: ["cardContext"] }], cardKey: [{ type: i0.Output, args: ["cardKey"] }], cardAction: [{ type: i0.Output, args: ["cardAction"] }], entryCheck: [{ type: i0.Output, args: ["entryCheck"] }], entryAction: [{ type: i0.Output, args: ["entryAction"] }], entryMove: [{ type: i0.Output, args: ["entryMove"] }], lifecycle: [{ type: i0.Output, args: ["lifecycle"] }], dropRejected: [{ type: i0.Output, args: ["dropRejected"] }], reorderKey: [{ type: i0.Output, args: ["reorderKey"] }] } });
+
+/**
+ * <mos-kanban-board> — raiz da camada visual.
+ *
+ * Recebe um KanbanBoard do core e o REFLETE: nenhuma regra vive aqui. Dois
+ * layouts: colunas (sem lanes) e grade coluna × lane (swimlanes) — nos dois,
+ * a unidade de drop é a CÉLULA. A ponte de reatividade é um signal de versão
+ * incrementado a cada `change` do board (zoneless-friendly, OnPush).
+ */
+class MosKanbanBoard {
+    /** Instância criada com createBoard() do core. */
+    board = input(null, ...(ngDevMode ? [{ debugName: "board" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Caixa de pesquisa embutida (gerencia o filtro de texto do board,
+     * preservando os demais filtros do host). */
+    showSearch = input(false, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** Ações do menu contextual dos cartões; vazio = sem menu. */
+    itemActions = input([], ...(ngDevMode ? [{ debugName: "itemActions" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    /** Espelha o after:move do core (qualquer origem: drag, comando, undo). */
+    itemMove = output();
+    /** Drop recusado pelas regras — gancho para toast/feedback do host. */
+    moveRejected = output();
+    itemAction = output();
+    /** Ação disparada numa ENTRY (bloco items, capability 'action'). */
+    entryAction = output();
+    /** Ciclo do gesto (qualquer nível): início / fim / cancelado por Esc.
+     * `dragCanceled` é emitido ADICIONALMENTE ao `dragEnded` (docs/02 §9). */
+    dragStarted = output();
+    dragEnded = output();
+    dragCanceled = output();
+    version = MKB_VERSION;
+    cardDef = contentChild(MosKanbanCardDef, ...(ngDevMode ? [{ debugName: "cardDef" }] : /* istanbul ignore next */ []));
+    menu = signal(null, ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    /** Mensagem do aria-live (movimentos por teclado e recusas). */
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    /** Flag de cancelamento por Esc (compartilhado com as células via DI). */
+    cancelFlag = inject(DragCancelFlag);
+    /** Incrementado a cada mudança do board — invalida os computed. */
+    revision = signal(0, ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const board = this.board();
+            if (!board)
+                return;
+            const offChange = board.subscribe(() => this.revision.update((r) => r + 1));
+            const offMove = board.on('after:move', (ev) => this.itemMove.emit(ev));
+            onCleanup(() => {
+                offChange();
+                offMove();
+            });
+        });
+        // GUARDA DE INTERATIVOS (spike D0/E4): um único listener em CAPTURE na
+        // raiz do board impede que mousedown/touchstart originados em elementos
+        // interativos alcancem qualquer cdkDrag — nenhum arraste (de nível algum)
+        // inicia a partir de botão/link/input; o click deles segue normal.
+        const guard = (event) => {
+            const target = event.target;
+            if (target?.closest?.('button, a[href], input, select, textarea, [contenteditable="true"], [data-mkb-no-drag]')) {
+                event.stopPropagation();
+            }
+        };
+        this.elementRef.nativeElement.addEventListener('mousedown', guard, true);
+        this.elementRef.nativeElement.addEventListener('touchstart', guard, true);
+    }
+    readOnly = computed(() => {
+        this.revision();
+        return this.board()?.state.readOnly ?? false;
+    }, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    selection = computed(() => {
+        this.revision();
+        return this.board()?.state.selection ?? [];
+    }, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    columnVMs = computed(() => {
+        this.revision();
+        const board = this.board();
+        if (!board)
+            return [];
+        return board.columns().map((column) => ({
+            column,
+            items: board.visibleItemsIn(column.id),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "columnVMs" }] : /* istanbul ignore next */ []));
+    /** null = sem eixo de lanes (layout de colunas). */
+    laneVMs = computed(() => {
+        this.revision();
+        const board = this.board();
+        const lanes = board?.lanes();
+        if (!board || !lanes)
+            return null;
+        return lanes.map((lane) => ({
+            lane,
+            cells: board.columns().map((column) => ({
+                column,
+                items: board.visibleItemsIn(column.id, lane.id),
+            })),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "laneVMs" }] : /* istanbul ignore next */ []));
+    /** Modelo declarativo do cartão (da config do board); null = cartão default. */
+    cardConfig = computed(() => this.board()?.cardConfig ?? null, ...(ngDevMode ? [{ debugName: "cardConfig" }] : /* istanbul ignore next */ []));
+    /** Ids de todos os cards (conexões do move-across de entries). */
+    allCardIds = computed(() => {
+        this.revision();
+        return this.board()?.state.items.map((i) => i.id) ?? [];
+    }, ...(ngDevMode ? [{ debugName: "allCardIds" }] : /* istanbul ignore next */ []));
+    columnsReorderable = computed(() => {
+        this.revision();
+        return this.board()?.isReorderable('columns') ?? false;
+    }, ...(ngDevMode ? [{ debugName: "columnsReorderable" }] : /* istanbul ignore next */ []));
+    lanesReorderable = computed(() => {
+        this.revision();
+        return this.board()?.isReorderable('lanes') ?? false;
+    }, ...(ngDevMode ? [{ debugName: "lanesReorderable" }] : /* istanbul ignore next */ []));
+    isFull(group) {
+        return group.limit !== undefined && group.count >= group.limit;
+    }
+    /** Cor de group.meta.color (cabeçalhos de coluna da grade com swimlanes). */
+    colColor(group) {
+        const c = group.meta?.['color'];
+        return typeof c === 'string' ? c : null;
+    }
+    // ---- Reordenação de colunas/lanes (spike D0: CDK com listas ISOLADAS) -----
+    // Cada nível tem sua drop list AUTÔNOMA (sem cdkDropListGroup): a lista de
+    // colunas e a de lanes não se conectam a nada; as células conectam-se só
+    // entre si via cdkDropListConnectedTo explícito. Colisão só entre iguais.
+    /** Ids das drop lists de TODAS as células (para o connectedTo). */
+    cellIds = computed(() => {
+        const lanes = this.laneVMs();
+        const cols = this.columnVMs();
+        if (lanes) {
+            const ids = [];
+            for (const laneVM of lanes) {
+                for (const vm of cols)
+                    ids.push(cellListId(vm.column.id, laneVM.lane.id));
+            }
+            return ids;
+        }
+        return cols.map((vm) => cellListId(vm.column.id));
+    }, ...(ngDevMode ? [{ debugName: "cellIds" }] : /* istanbul ignore next */ []));
+    /** Conexões de uma célula = todas as demais células (nunca listas de grupo). */
+    connectedFor(columnId, laneId) {
+        const self = cellListId(columnId, laneId);
+        return this.cellIds().filter((id) => id !== self);
+    }
+    onColumnDrop(event) {
+        if (this.cancelFlag.consume())
+            return;
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const id = event.item.data.id;
+        this.moveGroup('columns', id, event.currentIndex);
+    }
+    onLaneDrop(event) {
+        if (this.cancelFlag.consume())
+            return;
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const id = event.item.data.id;
+        this.moveGroup('lanes', id, event.currentIndex);
+    }
+    /** Linhas-fantasma do preview de fatia de coluna (grade de swimlanes). */
+    ghostRows(count) {
+        return Array.from({ length: Math.max(1, Math.min(count, 4)) });
+    }
+    /** Traduz o ciclo dos cdkDrag* nos outputs públicos e memoriza o gesto
+     * ativo (para o dragCanceled do Esc). */
+    lastDrag = null;
+    onLifecycle(ev) {
+        const info = { kind: ev.kind, id: ev.id };
+        if (ev.phase === 'start') {
+            this.lastDrag = info;
+            this.dragStarted.emit(info);
+        }
+        else {
+            this.lastDrag = null;
+            this.dragEnded.emit(info);
+        }
+    }
+    /** Check de entry (bloco items): vira comando updateEntry no core. */
+    onEntryCheck(ev) {
+        const result = this.board()?.execute({
+            type: 'updateEntry',
+            cardId: ev.cardId,
+            field: ev.field,
+            entryId: ev.entryId,
+            changes: { [ev.checkField]: ev.value },
+        });
+        if (result && !result.ok)
+            this.announce(`Alteração recusada: ${result.reason}`);
+    }
+    /** Movimentação de entry (bloco items): vira comando moveEntry no core —
+     * dentro do card ou entre cards (move-across). */
+    onEntryMove(ev) {
+        const result = this.board()?.execute({
+            type: 'moveEntry',
+            cardId: ev.cardId,
+            field: ev.field,
+            entryId: ev.entryId,
+            index: ev.index,
+            toCardId: ev.toCardId,
+        });
+        if (result && !result.ok)
+            this.announce(`Movimento recusado: ${result.reason}`);
+    }
+    /** Esc durante um drag: arma o flag e encerra o gesto com mouseup sintético
+     * — o drop dispara, os handlers consomem o flag e nenhum comando executa. */
+    onEscape() {
+        if (this.menu()) {
+            this.closeMenu();
+            return;
+        }
+        if (document.querySelector('.cdk-drop-list-dragging')) {
+            this.cancelFlag.arm();
+            if (this.lastDrag)
+                this.dragCanceled.emit(this.lastDrag);
+            document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+            this.announce('Movimento cancelado');
+        }
+    }
+    /** Ctrl+←/→ na coluna (layout de colunas, via componente). */
+    onColumnReorderKey(id, dir) {
+        this.nudgeGroup('columns', id, dir === 'left' ? -1 : 1);
+    }
+    onColumnHeaderKeydown(id, event) {
+        if (!this.columnsReorderable() || !(event.ctrlKey || event.metaKey))
+            return;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.nudgeGroup('columns', id, -1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.nudgeGroup('columns', id, 1);
+        }
+    }
+    onLaneHeaderKeydown(id, event) {
+        if (!this.lanesReorderable() || !(event.ctrlKey || event.metaKey))
+            return;
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.nudgeGroup('lanes', id, -1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.nudgeGroup('lanes', id, 1);
+        }
+    }
+    nudgeGroup(axis, id, delta) {
+        const board = this.board();
+        if (!board)
+            return;
+        const order = axis === 'columns' ? board.state.columnOrder : board.state.laneOrder;
+        const from = order.indexOf(id);
+        if (from === -1)
+            return;
+        this.moveGroup(axis, id, from + delta, true);
+    }
+    moveGroup(axis, groupId, index, refocusHeader = false) {
+        const board = this.board();
+        if (!board)
+            return;
+        const result = board.execute({ type: 'moveGroup', axis, groupId, index });
+        const label = axis === 'columns' ? 'Coluna' : 'Lane';
+        if (result.ok) {
+            this.announce(`${label} ${groupId} reposicionada`);
+            if (refocusHeader)
+                this.focusHeaderSoon(axis, groupId);
+        }
+        else {
+            this.announce(`Reordenação recusada: ${result.reason}`);
+        }
+    }
+    focusHeaderSoon(axis, groupId) {
+        const attr = axis === 'columns' ? 'data-column-header' : 'data-lane-header';
+        setTimeout(() => {
+            const nodes = this.elementRef.nativeElement.querySelectorAll(`[${attr}]`);
+            for (const el of Array.from(nodes)) {
+                if (el.getAttribute(attr) === groupId) {
+                    el.focus();
+                    return;
+                }
+            }
+        });
+    }
+    onActivate({ item, toggle }) {
+        const board = this.board();
+        if (board) {
+            const current = board.state.selection;
+            const itemIds = toggle
+                ? current.includes(item.id)
+                    ? current.filter((id) => id !== item.id)
+                    : [...current, item.id]
+                : [item.id];
+            board.execute({ type: 'setSelection', itemIds });
+        }
+        this.itemClick.emit(item);
+    }
+    onCardContext(request) {
+        if (this.itemActions().length === 0)
+            return;
+        const board = this.board();
+        if (board && !board.state.selection.includes(request.item.id)) {
+            board.execute({ type: 'setSelection', itemIds: [request.item.id] });
+        }
+        this.menu.set({ item: request.item, x: request.x, y: request.y });
+        // foco no primeiro item do menu depois de renderizar
+        setTimeout(() => this.elementRef.nativeElement
+            .querySelector('.mkb-menu button:not(:disabled)')
+            ?.focus());
+    }
+    invoke(item, actionId) {
+        this.itemAction.emit({ item, actionId });
+        this.closeMenu();
+    }
+    closeMenu() {
+        const open = this.menu();
+        if (!open)
+            return;
+        this.menu.set(null);
+        this.focusCardSoon(open.item.id); // devolve o foco ao cartão
+    }
+    // ---- Teclado (DnD acessível) ---------------------------------------------
+    /** Setas navegam o foco entre cartões; Ctrl+setas MOVEM o cartão
+     * (Ctrl+Shift+↑/↓ move entre lanes). Mesmo caminho de comando do mouse. */
+    onCardKey(ev) {
+        const board = this.board();
+        const loc = this.locate(ev.item.id);
+        if (!board || !loc)
+            return;
+        if (ev.ctrl)
+            this.moveByKey(board, ev, loc);
+        else
+            this.focusByKey(ev, loc);
+    }
+    onDropRejected(rejection) {
+        this.announce(`Movimento recusado: ${rejection.reason}`);
+        this.moveRejected.emit(rejection);
+    }
+    /** Localiza o cartão nas VMs atuais (índices de coluna/lane + posição
+     * visível na célula). */
+    locate(itemId) {
+        const lanes = this.laneVMs();
+        if (lanes) {
+            for (let l = 0; l < lanes.length; l++) {
+                const cells = lanes[l].cells;
+                for (let c = 0; c < cells.length; c++) {
+                    const i = cells[c].items.findIndex((it) => it.id === itemId);
+                    if (i !== -1)
+                        return { colIdx: c, laneIdx: l, visIdx: i };
+                }
+            }
+            return null;
+        }
+        const cols = this.columnVMs();
+        for (let c = 0; c < cols.length; c++) {
+            const i = cols[c].items.findIndex((it) => it.id === itemId);
+            if (i !== -1)
+                return { colIdx: c, laneIdx: -1, visIdx: i };
+        }
+        return null;
+    }
+    cellItems(colIdx, laneIdx) {
+        const lanes = this.laneVMs();
+        return ((lanes ? lanes[laneIdx]?.cells[colIdx] : this.columnVMs()[colIdx])?.items ?? []);
+    }
+    focusByKey(ev, loc) {
+        let target;
+        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+            const delta = ev.key === 'ArrowDown' ? 1 : -1;
+            target = this.cellItems(loc.colIdx, loc.laneIdx)[loc.visIdx + delta];
+        }
+        else {
+            const dir = ev.key === 'ArrowRight' ? 1 : -1;
+            const count = this.columnVMs().length;
+            for (let c = loc.colIdx + dir; c >= 0 && c < count; c += dir) {
+                const items = this.cellItems(c, loc.laneIdx);
+                if (items.length) {
+                    target = items[Math.min(loc.visIdx, items.length - 1)];
+                    break;
+                }
+            }
+        }
+        if (target)
+            this.focusCard(target.id);
+    }
+    moveByKey(board, ev, loc) {
+        const lanes = this.laneVMs();
+        const column = this.columnVMs()[loc.colIdx].column;
+        const laneId = lanes ? lanes[loc.laneIdx].lane.id : undefined;
+        const vertical = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
+        const down = ev.key === 'ArrowDown';
+        let targetColumn = column;
+        let targetLaneId = laneId;
+        let visibleIndex = Number.MAX_SAFE_INTEGER; // default: fim da célula
+        let destination;
+        if (vertical && ev.shift && lanes) {
+            const targetLane = lanes[loc.laneIdx + (down ? 1 : -1)];
+            if (!targetLane)
+                return;
+            targetLaneId = targetLane.lane.id;
+            destination = `${column.title ?? column.id} · ${targetLane.lane.title ?? targetLane.lane.id}`;
+        }
+        else if (vertical) {
+            const items = this.cellItems(loc.colIdx, loc.laneIdx);
+            const targetVis = loc.visIdx + (down ? 1 : -1);
+            if (targetVis < 0 || targetVis >= items.length)
+                return;
+            visibleIndex = targetVis;
+            destination = `posição ${targetVis + 1}`;
+        }
+        else {
+            const neighbor = this.columnVMs()[loc.colIdx + (ev.key === 'ArrowRight' ? 1 : -1)]?.column;
+            if (!neighbor)
+                return;
+            targetColumn = neighbor;
+            destination = neighbor.title ?? neighbor.id;
+        }
+        const result = executeDrop(board, ev.item.id, targetColumn.id, visibleIndex, targetLaneId);
+        if (result.ok) {
+            const label = (this.getTitle(ev.item) ?? ev.item.id);
+            this.announce(`${label} movido para ${destination}`);
+            this.focusCardSoon(ev.item.id);
+        }
+        else {
+            this.announce(`Movimento recusado: ${result.reason}`);
+            this.moveRejected.emit({
+                itemId: ev.item.id,
+                columnId: targetColumn.id,
+                laneId: targetLaneId,
+                reason: result.reason,
+            });
+            this.focusCardSoon(ev.item.id);
+        }
+    }
+    getTitle(item) {
+        const title = item['title'];
+        return typeof title === 'string' && title !== '' ? title : undefined;
+    }
+    announce(message) {
+        this.announcement.set(message);
+    }
+    focusCard(id) {
+        // comparação via dataset (CSS.escape não existe em todo ambiente)
+        const cards = this.elementRef.nativeElement.querySelectorAll('[data-item]');
+        for (const el of Array.from(cards)) {
+            if (el.dataset['item'] === id) {
+                el.focus();
+                return;
+            }
+        }
+    }
+    /** Após um movimento o DOM re-renderiza — refoca no próximo tick. */
+    focusCardSoon(id) {
+        setTimeout(() => this.focusCard(id));
+    }
+    onSearch(text) {
+        const board = this.board();
+        if (!board)
+            return;
+        const others = board.state.filters.filter((f) => !('text' in f));
+        const trimmed = text.trim();
+        board.execute({
+            type: 'setFilters',
+            filters: trimmed ? [...others, { text: trimmed }] : [...others],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanBoard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MosKanbanBoard, isStandalone: true, selector: "mos-kanban-board", inputs: { board: { classPropertyName: "board", publicName: "board", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemMove: "itemMove", moveRejected: "moveRejected", itemAction: "itemAction", entryAction: "entryAction", dragStarted: "dragStarted", dragEnded: "dragEnded", dragCanceled: "dragCanceled" }, host: { listeners: { "document:click": "closeMenu()", "document:keydown.escape": "onEscape()" } }, providers: [DragCancelFlag], queries: [{ propertyName: "cardDef", first: true, predicate: MosKanbanCardDef, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (error(); as message) {
+      <div class="mkb-state mkb-error" role="alert">
+        <span class="mkb-state-title">Não foi possível carregar o board</span>
+        <span class="mkb-state-hint">{{ message }}</span>
+      </div>
+    } @else if (loading()) {
+      <div class="mkb-state" aria-label="Carregando board" aria-busy="true">
+        <div class="mkb-skeleton">
+          @for (i of [0, 1, 2]; track i) {
+            <div class="mkb-skeleton-col"></div>
+          }
+        </div>
+      </div>
+    } @else if (!board()) {
+      <div class="mkb-state">
+        <span class="mkb-state-title">Nenhum board configurado</span>
+        <span class="mkb-state-hint">mos-kanban-board · v{{ version }}</span>
+      </div>
+    } @else {
+      <div
+        class="mkb-board"
+        [class.mkb-readonly]="readOnly()"
+        role="region"
+        aria-label="Kanban board"
+      >
+        @if (readOnly()) {
+          <span class="mkb-readonly-pill">somente leitura</span>
+        }
+
+        <div class="mkb-sr-only" aria-live="polite">{{ announcement() }}</div>
+
+        @if (showSearch()) {
+          <div class="mkb-search">
+            <input
+              type="search"
+              placeholder="Pesquisar…"
+              aria-label="Pesquisar itens do board"
+              #search
+              (input)="onSearch(search.value)"
+            />
+          </div>
+        }
+
+        @if (laneVMs(); as lanes) {
+          <div class="mkb-grid" cdkScrollable>
+            <div class="mkb-grid-inner">
+              <div class="mkb-grid-head">
+                <div class="mkb-grid-corner"></div>
+                <div
+                  class="mkb-grid-head-cols"
+                  cdkDropList
+                  cdkDropListOrientation="horizontal"
+                  [cdkDropListDisabled]="!columnsReorderable() || readOnly()"
+                  (cdkDropListDropped)="onColumnDrop($event)"
+                >
+                  @for (vm of columnVMs(); track vm.column.id) {
+                    <header
+                      class="mkb-grid-col-header"
+                      cdkDrag
+                      [cdkDragData]="{ kind: 'column', id: vm.column.id }"
+                      [cdkDragDisabled]="!columnsReorderable() || readOnly()"
+                      (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'column', id: vm.column.id })"
+                      (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'column', id: vm.column.id })"
+                      [class.mkb-col-accented]="!!colColor(vm.column)"
+                      [style.--mkb-col-accent]="colColor(vm.column)"
+                      [attr.tabindex]="columnsReorderable() ? 0 : null"
+                      [attr.data-column-header]="vm.column.id"
+                      [attr.aria-keyshortcuts]="columnsReorderable() ? 'Control+ArrowLeft Control+ArrowRight' : null"
+                      (keydown)="onColumnHeaderKeydown(vm.column.id, $event)"
+                    >
+                      @if (columnsReorderable()) {
+                        <span class="mkb-col-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                      }
+                      <span class="mkb-col-title">{{ vm.column.title ?? vm.column.id }}</span>
+                      <span class="mkb-col-count" [class.is-full]="isFull(vm.column)">
+                        {{ vm.column.count }}{{ vm.column.limit !== undefined ? ' / ' + vm.column.limit : '' }}
+                      </span>
+
+                      <!-- preview = a COLUNA inteira (fatia vertical da grade
+                           não é um elemento DOM único; representação
+                           equivalente: header + pilha de cartões-fantasma) -->
+                      <div class="mkb-col-slice-preview" *cdkDragPreview>
+                        <div class="mkb-col-slice-head">
+                          <span class="mkb-col-title">{{ vm.column.title ?? vm.column.id }}</span>
+                          <span class="mkb-col-count">{{ vm.column.count }}</span>
+                        </div>
+                        @for (g of ghostRows(vm.column.count); track $index) {
+                          <div class="mkb-col-slice-card"></div>
+                        }
+                      </div>
+                    </header>
+                  }
+                </div>
+              </div>
+
+              <div
+                class="mkb-lanes"
+                cdkDropList
+                [cdkDropListDisabled]="!lanesReorderable() || readOnly()"
+                (cdkDropListDropped)="onLaneDrop($event)"
+              >
+                @for (laneVM of lanes; track laneVM.lane.id) {
+                  <div
+                    class="mkb-lane-row"
+                    cdkDrag
+                    [cdkDragData]="{ kind: 'lane', id: laneVM.lane.id }"
+                    [cdkDragDisabled]="!lanesReorderable() || readOnly()"
+                    (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'lane', id: laneVM.lane.id })"
+                    (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'lane', id: laneVM.lane.id })"
+                  >
+                    <div
+                      class="mkb-lane-header"
+                      [attr.tabindex]="lanesReorderable() ? 0 : null"
+                      [attr.data-lane-header]="laneVM.lane.id"
+                      [attr.aria-keyshortcuts]="lanesReorderable() ? 'Control+ArrowUp Control+ArrowDown' : null"
+                      (keydown)="onLaneHeaderKeydown(laneVM.lane.id, $event)"
+                    >
+                      @if (lanesReorderable()) {
+                        <span class="mkb-col-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                      }
+                      <span class="mkb-col-title">{{ laneVM.lane.title ?? laneVM.lane.id }}</span>
+                      <span class="mkb-col-count" [class.is-full]="isFull(laneVM.lane)">
+                        {{ laneVM.lane.count }}{{ laneVM.lane.limit !== undefined ? ' / ' + laneVM.lane.limit : '' }}
+                      </span>
+                    </div>
+                    <div class="mkb-lane-cells">
+                      @for (cell of laneVM.cells; track cell.column.id) {
+                        <mos-kanban-cell
+                          class="mkb-grid-cell"
+                          [board]="board()!"
+                          [columnId]="cell.column.id"
+                          [laneId]="laneVM.lane.id"
+                          [connectedTo]="connectedFor(cell.column.id, laneVM.lane.id)"
+                          [items]="cell.items"
+                          [cardTemplate]="cardDef()?.template ?? null"
+                          [cardConfig]="cardConfig()"
+                          [readOnly]="readOnly()"
+                          [selection]="selection()"
+                          [allCardIds]="allCardIds()"
+                          (cardActivate)="onActivate($event)"
+                          (cardContext)="onCardContext($event)"
+                          (cardKey)="onCardKey($event)"
+                          (cardAction)="itemAction.emit($event)"
+                          (entryCheck)="onEntryCheck($event)"
+                          (entryAction)="entryAction.emit($event)"
+                          (entryMove)="onEntryMove($event)"
+                          (lifecycle)="onLifecycle($event)"
+                          (dropRejected)="onDropRejected($event)"
+                        />
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        } @else {
+          <div
+            class="mkb-columns"
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            [cdkDropListDisabled]="!columnsReorderable() || readOnly()"
+            (cdkDropListDropped)="onColumnDrop($event)"
+          >
+            @for (vm of columnVMs(); track vm.column.id) {
+              <mos-kanban-column
+                cdkDrag
+                [cdkDragData]="{ kind: 'column', id: vm.column.id }"
+                [cdkDragDisabled]="!columnsReorderable() || readOnly()"
+                [board]="board()!"
+                [column]="vm.column"
+                [items]="vm.items"
+                [cardTemplate]="cardDef()?.template ?? null"
+                [cardConfig]="cardConfig()"
+                [readOnly]="readOnly()"
+                [reorderable]="columnsReorderable() && !readOnly()"
+                [selection]="selection()"
+                [connectedTo]="connectedFor(vm.column.id)"
+                [allCardIds]="allCardIds()"
+                (cardActivate)="onActivate($event)"
+                (cardContext)="onCardContext($event)"
+                (cardKey)="onCardKey($event)"
+                (cardAction)="itemAction.emit($event)"
+                (entryCheck)="onEntryCheck($event)"
+                (entryAction)="entryAction.emit($event)"
+                (entryMove)="onEntryMove($event)"
+                (lifecycle)="onLifecycle($event)"
+                (reorderKey)="onColumnReorderKey(vm.column.id, $event)"
+                (dropRejected)="onDropRejected($event)"
+                (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'column', id: vm.column.id })"
+                (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'column', id: vm.column.id })"
+              >
+                @if (columnsReorderable() && !readOnly()) {
+                  <span mkbColHandle cdkDragHandle class="mkb-col-grip" aria-hidden="true">⠿</span>
+                }
+              </mos-kanban-column>
+            }
+          </div>
+        }
+
+        @if (menu(); as m) {
+          <div
+            class="mkb-menu"
+            role="menu"
+            [style.left.px]="m.x"
+            [style.top.px]="m.y"
+            (click)="$event.stopPropagation()"
+          >
+            @for (action of itemActions(); track action.id) {
+              <button
+                type="button"
+                role="menuitem"
+                [disabled]="action.disabled"
+                (click)="invoke(m.item, action.id)"
+              >
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;height:100%;font-family:var(--mkb-font, var(--font-sans, system-ui, sans-serif))}.mkb-board{position:relative;display:flex;flex-direction:column;height:100%;background:var(--mkb-surface, var(--color-background, #f6f5f8));border-radius:var(--mkb-radius, var(--radius-md, 10px))}.mkb-search{padding:2px 2px 10px}.mkb-search input{width:min(320px,100%);padding:7px 10px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);font:inherit;font-size:13px;background:var(--mkb-card-bg, #fff);color:var(--mkb-foreground, #241f33)}.mkb-search input:focus-visible{outline:none;border-color:var(--mkb-accent, #5e35b1);box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-columns{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px));flex:1;min-height:0;overflow-x:auto;padding:2px;align-items:start}.mkb-columns>mos-kanban-column{flex:0 0 var(--mkb-column-width, clamp(220px, 26vw, 320px));max-height:100%}.mkb-grid{flex:1;min-height:0;overflow:auto;padding:2px}.mkb-grid-inner{display:flex;flex-direction:column;gap:var(--mkb-lane-gap, var(--mkb-gap, 12px));width:max-content;min-width:100%}.mkb-lanes{display:flex;flex-direction:column;gap:var(--mkb-lane-gap, var(--mkb-gap, 12px))}.mkb-grid-head,.mkb-lane-row{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px));align-items:stretch}.mkb-grid-head{position:sticky;top:0;z-index:2}.mkb-grid-head-cols,.mkb-lane-cells{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px))}.mkb-grid-corner,.mkb-lane-header{flex:0 0 var(--mkb-lane-label-width, 140px)}.mkb-grid-col-header,.mkb-grid-cell{flex:0 0 var(--mkb-grid-column-width, var(--mkb-column-width, clamp(220px, 26vw, 320px)));box-sizing:border-box}.mkb-grid-corner{background:var(--mkb-surface, #f6f5f8)}.mkb-grid-col-header{display:flex;align-items:center;gap:8px;padding:var(--mkb-header-padding, 8px 12px);background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-grid-col-header .mkb-col-title{flex:1}.mkb-grid-col-header[tabindex]:focus-visible,.mkb-lane-header[tabindex]:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-grid-col-header.mkb-col-accented{background:color-mix(in srgb,var(--mkb-col-accent) 16%,transparent);border-top:3px solid var(--mkb-col-accent)}.mkb-lane-header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-col-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-col-grip:active{cursor:grabbing}.mkb-col-title{font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--mkb-foreground, #241f33);overflow-wrap:anywhere}.mkb-col-count{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--mkb-card-bg, #fff);color:var(--mkb-muted, #6f6a7c)}.mkb-col-count.is-full{color:var(--mkb-danger, #b3261e)}.mkb-grid-cell{background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius, 10px);min-height:84px}.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform var(--mkb-dur-move, .18s) var(--mkb-ease, ease)}@media(prefers-reduced-motion:reduce){.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:none}mos-kanban-column.cdk-drag-preview,.mkb-lane-row.cdk-drag-preview{rotate:none}}mos-kanban-column.cdk-drag-preview,.mkb-lane-row.cdk-drag-preview{box-shadow:0 12px 32px #0000003d;opacity:.95}.mkb-col-slice-preview{display:flex;flex-direction:column;gap:var(--mkb-card-gap, 8px);width:var(--mkb-grid-column-width, var(--mkb-column-width, clamp(220px, 26vw, 320px)));padding:0 0 10px;background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius, 10px);box-shadow:0 12px 32px #0000003d}.mkb-col-slice-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea)}.mkb-col-slice-card{height:44px;margin:0 8px;background:var(--mkb-card-bg, #fff);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}@media(prefers-reduced-motion:reduce){.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:none}}.mkb-readonly-pill{position:absolute;top:-6px;right:8px;z-index:3;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--mkb-warning, #9a6b00);color:#fff}.mkb-menu{position:fixed;z-index:10;display:flex;flex-direction:column;min-width:160px;padding:4px;background:var(--mkb-card-bg, #fff);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px);box-shadow:0 8px 24px #00000024}.mkb-menu button{padding:7px 10px;border:0;border-radius:4px;background:transparent;color:var(--mkb-foreground, #241f33);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}.mkb-menu button:hover:not(:disabled){background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 10%,transparent)}.mkb-menu button:disabled{opacity:.45;cursor:default}.mkb-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:240px;height:100%;background:var(--mkb-surface, var(--color-background, #f6f5f8));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius, var(--radius-md, 10px));color:var(--mkb-muted, var(--color-muted, #6f6a7c))}.mkb-state-title{font-size:14px;font-weight:500}.mkb-error .mkb-state-title{color:var(--mkb-danger, #b3261e)}.mkb-state-hint{font-size:11px;opacity:.8}.mkb-skeleton{display:flex;gap:var(--mkb-gap, 12px)}.mkb-skeleton-col{width:220px;height:180px;border-radius:var(--mkb-radius, 10px);background:var(--mkb-column-bg, #efedf3);animation:mkb-pulse 1.2s ease-in-out infinite}@keyframes mkb-pulse{50%{opacity:.55}}.mkb-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mkb-skeleton-col{animation:none}}@media(max-width:540px){.mkb-columns>mos-kanban-column{flex:0 0 78vw}.mkb-search input{width:100%}}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MosKanbanColumn, selector: "mos-kanban-column", inputs: ["board", "column", "items", "cardTemplate", "cardConfig", "readOnly", "reorderable", "selection", "connectedTo", "allCardIds"], outputs: ["cardActivate", "cardContext", "cardKey", "cardAction", "entryCheck", "entryAction", "entryMove", "lifecycle", "dropRejected", "reorderKey"] }, { kind: "component", type: MosKanbanCell, selector: "mos-kanban-cell", inputs: ["board", "columnId", "laneId", "items", "cardTemplate", "cardConfig", "readOnly", "selection", "connectedTo", "allCardIds"], outputs: ["cardActivate", "cardContext", "cardKey", "cardAction", "entryCheck", "entryAction", "entryMove", "lifecycle", "dropRejected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanBoard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-board', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDragPreview,
+                        CdkScrollable,
+                        MosKanbanColumn,
+                        MosKanbanCell,
+                    ], providers: [DragCancelFlag], host: {
+                        '(document:click)': 'closeMenu()',
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: `
+    @if (error(); as message) {
+      <div class="mkb-state mkb-error" role="alert">
+        <span class="mkb-state-title">Não foi possível carregar o board</span>
+        <span class="mkb-state-hint">{{ message }}</span>
+      </div>
+    } @else if (loading()) {
+      <div class="mkb-state" aria-label="Carregando board" aria-busy="true">
+        <div class="mkb-skeleton">
+          @for (i of [0, 1, 2]; track i) {
+            <div class="mkb-skeleton-col"></div>
+          }
+        </div>
+      </div>
+    } @else if (!board()) {
+      <div class="mkb-state">
+        <span class="mkb-state-title">Nenhum board configurado</span>
+        <span class="mkb-state-hint">mos-kanban-board · v{{ version }}</span>
+      </div>
+    } @else {
+      <div
+        class="mkb-board"
+        [class.mkb-readonly]="readOnly()"
+        role="region"
+        aria-label="Kanban board"
+      >
+        @if (readOnly()) {
+          <span class="mkb-readonly-pill">somente leitura</span>
+        }
+
+        <div class="mkb-sr-only" aria-live="polite">{{ announcement() }}</div>
+
+        @if (showSearch()) {
+          <div class="mkb-search">
+            <input
+              type="search"
+              placeholder="Pesquisar…"
+              aria-label="Pesquisar itens do board"
+              #search
+              (input)="onSearch(search.value)"
+            />
+          </div>
+        }
+
+        @if (laneVMs(); as lanes) {
+          <div class="mkb-grid" cdkScrollable>
+            <div class="mkb-grid-inner">
+              <div class="mkb-grid-head">
+                <div class="mkb-grid-corner"></div>
+                <div
+                  class="mkb-grid-head-cols"
+                  cdkDropList
+                  cdkDropListOrientation="horizontal"
+                  [cdkDropListDisabled]="!columnsReorderable() || readOnly()"
+                  (cdkDropListDropped)="onColumnDrop($event)"
+                >
+                  @for (vm of columnVMs(); track vm.column.id) {
+                    <header
+                      class="mkb-grid-col-header"
+                      cdkDrag
+                      [cdkDragData]="{ kind: 'column', id: vm.column.id }"
+                      [cdkDragDisabled]="!columnsReorderable() || readOnly()"
+                      (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'column', id: vm.column.id })"
+                      (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'column', id: vm.column.id })"
+                      [class.mkb-col-accented]="!!colColor(vm.column)"
+                      [style.--mkb-col-accent]="colColor(vm.column)"
+                      [attr.tabindex]="columnsReorderable() ? 0 : null"
+                      [attr.data-column-header]="vm.column.id"
+                      [attr.aria-keyshortcuts]="columnsReorderable() ? 'Control+ArrowLeft Control+ArrowRight' : null"
+                      (keydown)="onColumnHeaderKeydown(vm.column.id, $event)"
+                    >
+                      @if (columnsReorderable()) {
+                        <span class="mkb-col-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                      }
+                      <span class="mkb-col-title">{{ vm.column.title ?? vm.column.id }}</span>
+                      <span class="mkb-col-count" [class.is-full]="isFull(vm.column)">
+                        {{ vm.column.count }}{{ vm.column.limit !== undefined ? ' / ' + vm.column.limit : '' }}
+                      </span>
+
+                      <!-- preview = a COLUNA inteira (fatia vertical da grade
+                           não é um elemento DOM único; representação
+                           equivalente: header + pilha de cartões-fantasma) -->
+                      <div class="mkb-col-slice-preview" *cdkDragPreview>
+                        <div class="mkb-col-slice-head">
+                          <span class="mkb-col-title">{{ vm.column.title ?? vm.column.id }}</span>
+                          <span class="mkb-col-count">{{ vm.column.count }}</span>
+                        </div>
+                        @for (g of ghostRows(vm.column.count); track $index) {
+                          <div class="mkb-col-slice-card"></div>
+                        }
+                      </div>
+                    </header>
+                  }
+                </div>
+              </div>
+
+              <div
+                class="mkb-lanes"
+                cdkDropList
+                [cdkDropListDisabled]="!lanesReorderable() || readOnly()"
+                (cdkDropListDropped)="onLaneDrop($event)"
+              >
+                @for (laneVM of lanes; track laneVM.lane.id) {
+                  <div
+                    class="mkb-lane-row"
+                    cdkDrag
+                    [cdkDragData]="{ kind: 'lane', id: laneVM.lane.id }"
+                    [cdkDragDisabled]="!lanesReorderable() || readOnly()"
+                    (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'lane', id: laneVM.lane.id })"
+                    (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'lane', id: laneVM.lane.id })"
+                  >
+                    <div
+                      class="mkb-lane-header"
+                      [attr.tabindex]="lanesReorderable() ? 0 : null"
+                      [attr.data-lane-header]="laneVM.lane.id"
+                      [attr.aria-keyshortcuts]="lanesReorderable() ? 'Control+ArrowUp Control+ArrowDown' : null"
+                      (keydown)="onLaneHeaderKeydown(laneVM.lane.id, $event)"
+                    >
+                      @if (lanesReorderable()) {
+                        <span class="mkb-col-grip" cdkDragHandle aria-hidden="true">⠿</span>
+                      }
+                      <span class="mkb-col-title">{{ laneVM.lane.title ?? laneVM.lane.id }}</span>
+                      <span class="mkb-col-count" [class.is-full]="isFull(laneVM.lane)">
+                        {{ laneVM.lane.count }}{{ laneVM.lane.limit !== undefined ? ' / ' + laneVM.lane.limit : '' }}
+                      </span>
+                    </div>
+                    <div class="mkb-lane-cells">
+                      @for (cell of laneVM.cells; track cell.column.id) {
+                        <mos-kanban-cell
+                          class="mkb-grid-cell"
+                          [board]="board()!"
+                          [columnId]="cell.column.id"
+                          [laneId]="laneVM.lane.id"
+                          [connectedTo]="connectedFor(cell.column.id, laneVM.lane.id)"
+                          [items]="cell.items"
+                          [cardTemplate]="cardDef()?.template ?? null"
+                          [cardConfig]="cardConfig()"
+                          [readOnly]="readOnly()"
+                          [selection]="selection()"
+                          [allCardIds]="allCardIds()"
+                          (cardActivate)="onActivate($event)"
+                          (cardContext)="onCardContext($event)"
+                          (cardKey)="onCardKey($event)"
+                          (cardAction)="itemAction.emit($event)"
+                          (entryCheck)="onEntryCheck($event)"
+                          (entryAction)="entryAction.emit($event)"
+                          (entryMove)="onEntryMove($event)"
+                          (lifecycle)="onLifecycle($event)"
+                          (dropRejected)="onDropRejected($event)"
+                        />
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        } @else {
+          <div
+            class="mkb-columns"
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            [cdkDropListDisabled]="!columnsReorderable() || readOnly()"
+            (cdkDropListDropped)="onColumnDrop($event)"
+          >
+            @for (vm of columnVMs(); track vm.column.id) {
+              <mos-kanban-column
+                cdkDrag
+                [cdkDragData]="{ kind: 'column', id: vm.column.id }"
+                [cdkDragDisabled]="!columnsReorderable() || readOnly()"
+                [board]="board()!"
+                [column]="vm.column"
+                [items]="vm.items"
+                [cardTemplate]="cardDef()?.template ?? null"
+                [cardConfig]="cardConfig()"
+                [readOnly]="readOnly()"
+                [reorderable]="columnsReorderable() && !readOnly()"
+                [selection]="selection()"
+                [connectedTo]="connectedFor(vm.column.id)"
+                [allCardIds]="allCardIds()"
+                (cardActivate)="onActivate($event)"
+                (cardContext)="onCardContext($event)"
+                (cardKey)="onCardKey($event)"
+                (cardAction)="itemAction.emit($event)"
+                (entryCheck)="onEntryCheck($event)"
+                (entryAction)="entryAction.emit($event)"
+                (entryMove)="onEntryMove($event)"
+                (lifecycle)="onLifecycle($event)"
+                (reorderKey)="onColumnReorderKey(vm.column.id, $event)"
+                (dropRejected)="onDropRejected($event)"
+                (cdkDragStarted)="onLifecycle({ phase: 'start', kind: 'column', id: vm.column.id })"
+                (cdkDragEnded)="onLifecycle({ phase: 'end', kind: 'column', id: vm.column.id })"
+              >
+                @if (columnsReorderable() && !readOnly()) {
+                  <span mkbColHandle cdkDragHandle class="mkb-col-grip" aria-hidden="true">⠿</span>
+                }
+              </mos-kanban-column>
+            }
+          </div>
+        }
+
+        @if (menu(); as m) {
+          <div
+            class="mkb-menu"
+            role="menu"
+            [style.left.px]="m.x"
+            [style.top.px]="m.y"
+            (click)="$event.stopPropagation()"
+          >
+            @for (action of itemActions(); track action.id) {
+              <button
+                type="button"
+                role="menuitem"
+                [disabled]="action.disabled"
+                (click)="invoke(m.item, action.id)"
+              >
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block;height:100%;font-family:var(--mkb-font, var(--font-sans, system-ui, sans-serif))}.mkb-board{position:relative;display:flex;flex-direction:column;height:100%;background:var(--mkb-surface, var(--color-background, #f6f5f8));border-radius:var(--mkb-radius, var(--radius-md, 10px))}.mkb-search{padding:2px 2px 10px}.mkb-search input{width:min(320px,100%);padding:7px 10px;border:1px solid var(--mkb-border-strong, #c9c4d4);border-radius:var(--mkb-radius-sm, 6px);font:inherit;font-size:13px;background:var(--mkb-card-bg, #fff);color:var(--mkb-foreground, #241f33)}.mkb-search input:focus-visible{outline:none;border-color:var(--mkb-accent, #5e35b1);box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-columns{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px));flex:1;min-height:0;overflow-x:auto;padding:2px;align-items:start}.mkb-columns>mos-kanban-column{flex:0 0 var(--mkb-column-width, clamp(220px, 26vw, 320px));max-height:100%}.mkb-grid{flex:1;min-height:0;overflow:auto;padding:2px}.mkb-grid-inner{display:flex;flex-direction:column;gap:var(--mkb-lane-gap, var(--mkb-gap, 12px));width:max-content;min-width:100%}.mkb-lanes{display:flex;flex-direction:column;gap:var(--mkb-lane-gap, var(--mkb-gap, 12px))}.mkb-grid-head,.mkb-lane-row{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px));align-items:stretch}.mkb-grid-head{position:sticky;top:0;z-index:2}.mkb-grid-head-cols,.mkb-lane-cells{display:flex;gap:var(--mkb-column-gap, var(--mkb-gap, 12px))}.mkb-grid-corner,.mkb-lane-header{flex:0 0 var(--mkb-lane-label-width, 140px)}.mkb-grid-col-header,.mkb-grid-cell{flex:0 0 var(--mkb-grid-column-width, var(--mkb-column-width, clamp(220px, 26vw, 320px)));box-sizing:border-box}.mkb-grid-corner{background:var(--mkb-surface, #f6f5f8)}.mkb-grid-col-header{display:flex;align-items:center;gap:8px;padding:var(--mkb-header-padding, 8px 12px);background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-grid-col-header .mkb-col-title{flex:1}.mkb-grid-col-header[tabindex]:focus-visible,.mkb-lane-header[tabindex]:focus-visible{outline:none;box-shadow:var(--mkb-focus-ring, 0 0 0 3px rgba(94, 53, 177, .35))}.mkb-grid-col-header.mkb-col-accented{background:color-mix(in srgb,var(--mkb-col-accent) 16%,transparent);border-top:3px solid var(--mkb-col-accent)}.mkb-lane-header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}.mkb-col-grip{cursor:grab;color:var(--mkb-muted, #6f6a7c);font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.mkb-col-grip:active{cursor:grabbing}.mkb-col-title{font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--mkb-foreground, #241f33);overflow-wrap:anywhere}.mkb-col-count{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--mkb-card-bg, #fff);color:var(--mkb-muted, #6f6a7c)}.mkb-col-count.is-full{color:var(--mkb-danger, #b3261e)}.mkb-grid-cell{background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius, 10px);min-height:84px}.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform var(--mkb-dur-move, .18s) var(--mkb-ease, ease)}@media(prefers-reduced-motion:reduce){.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:none}mos-kanban-column.cdk-drag-preview,.mkb-lane-row.cdk-drag-preview{rotate:none}}mos-kanban-column.cdk-drag-preview,.mkb-lane-row.cdk-drag-preview{box-shadow:0 12px 32px #0000003d;opacity:.95}.mkb-col-slice-preview{display:flex;flex-direction:column;gap:var(--mkb-card-gap, 8px);width:var(--mkb-grid-column-width, var(--mkb-column-width, clamp(220px, 26vw, 320px)));padding:0 0 10px;background:var(--mkb-column-bg, #efedf3);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius, 10px);box-shadow:0 12px 32px #0000003d}.mkb-col-slice-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea)}.mkb-col-slice-card{height:44px;margin:0 8px;background:var(--mkb-card-bg, #fff);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px)}@media(prefers-reduced-motion:reduce){.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:none}}.mkb-readonly-pill{position:absolute;top:-6px;right:8px;z-index:3;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--mkb-warning, #9a6b00);color:#fff}.mkb-menu{position:fixed;z-index:10;display:flex;flex-direction:column;min-width:160px;padding:4px;background:var(--mkb-card-bg, #fff);border:1px solid var(--mkb-border, #e3e0ea);border-radius:var(--mkb-radius-sm, 6px);box-shadow:0 8px 24px #00000024}.mkb-menu button{padding:7px 10px;border:0;border-radius:4px;background:transparent;color:var(--mkb-foreground, #241f33);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}.mkb-menu button:hover:not(:disabled){background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 10%,transparent)}.mkb-menu button:disabled{opacity:.45;cursor:default}.mkb-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:240px;height:100%;background:var(--mkb-surface, var(--color-background, #f6f5f8));border:1px solid var(--mkb-border, var(--color-border, #e3e0ea));border-radius:var(--mkb-radius, var(--radius-md, 10px));color:var(--mkb-muted, var(--color-muted, #6f6a7c))}.mkb-state-title{font-size:14px;font-weight:500}.mkb-error .mkb-state-title{color:var(--mkb-danger, #b3261e)}.mkb-state-hint{font-size:11px;opacity:.8}.mkb-skeleton{display:flex;gap:var(--mkb-gap, 12px)}.mkb-skeleton-col{width:220px;height:180px;border-radius:var(--mkb-radius, 10px);background:var(--mkb-column-bg, #efedf3);animation:mkb-pulse 1.2s ease-in-out infinite}@keyframes mkb-pulse{50%{opacity:.55}}.mkb-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mkb-skeleton-col{animation:none}}@media(max-width:540px){.mkb-columns>mos-kanban-column{flex:0 0 78vw}.mkb-search input{width:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { board: [{ type: i0.Input, args: [{ isSignal: true, alias: "board", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], itemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemActions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemMove: [{ type: i0.Output, args: ["itemMove"] }], moveRejected: [{ type: i0.Output, args: ["moveRejected"] }], itemAction: [{ type: i0.Output, args: ["itemAction"] }], entryAction: [{ type: i0.Output, args: ["entryAction"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }], dragCanceled: [{ type: i0.Output, args: ["dragCanceled"] }], cardDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MosKanbanCardDef), { isSignal: true }] }] } });
+
+/*
+ * @mosaicoo/kanban/ui — camada visual Angular.
+ *
+ * Consome exclusivamente a API pública do core (docs/01-arquitetura.md §2);
+ * nenhuma regra de negócio ou de domínio vive aqui. Tema por design tokens
+ * `--mkb-*` com fallback para os tokens do DS Mosaicoo (§12).
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DragCancelFlag, MosKanbanBoard, MosKanbanCard, MosKanbanCardBlocks, MosKanbanCardDef, MosKanbanCell, MosKanbanColumn, canEnterCell, cellListId, entriesListId, executeDrop, formatDate, formatNumber, formatRelative, formatText, initials, resolveDropIndex, resolveIcon };