@mosaicoo/kanban 0.1.0 → 0.2.0

package/fesm2022/mosaicoo-kanban-designer.mjs

@@ -0,0 +1,2570 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, input, output, effect, untracked } from '@angular/core';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MosKanbanBoard } from '@mosaicoo/kanban/ui';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { validateConfig, createBoard } from '@mosaicoo/kanban/core';
+import * as i7$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+/** Espelho de styles/kanban-tokens.css (defaults de fábrica). */
+const TOKEN_GROUPS = [
+    {
+        label: 'Espaçamento',
+        tokens: [
+            { token: '--mkb-column-gap', label: 'Entre colunas', kind: 'text', default: '12px' },
+            { token: '--mkb-lane-gap', label: 'Entre lanes', kind: 'text', default: '12px' },
+            { token: '--mkb-card-gap', label: 'Entre cartões', kind: 'text', default: '8px' },
+            { token: '--mkb-entry-gap', label: 'Entre itens do cartão', kind: 'text', default: '4px' },
+            { token: '--mkb-block-gap', label: 'Entre blocos do cartão', kind: 'text', default: '8px' },
+            { token: '--mkb-fact-gap', label: 'Entre fatos (facts)', kind: 'text', default: '10px' },
+            { token: '--mkb-card-padding', label: 'Interno do cartão', kind: 'text', default: '10px 12px' },
+            { token: '--mkb-cell-padding', label: 'Interno da célula', kind: 'text', default: '4px 8px 10px' },
+            { token: '--mkb-header-padding', label: 'Interno dos cabeçalhos', kind: 'text', default: '10px 12px' },
+            { token: '--mkb-column-width', label: 'Largura da coluna', kind: 'text', default: 'clamp(220px, 26vw, 320px)' },
+            { token: '--mkb-grid-column-width', label: 'Largura da coluna (grade de lanes)', kind: 'text', default: 'var(--mkb-column-width)' },
+            { token: '--mkb-lane-label-width', label: 'Largura do rótulo da lane', kind: 'text', default: '140px' },
+        ],
+    },
+    {
+        label: 'Cores',
+        tokens: [
+            { token: '--mkb-surface', label: 'Fundo do board', kind: 'color', default: '#f6f5f8' },
+            { token: '--mkb-column-bg', label: 'Fundo da coluna', kind: 'color', default: '#efedf3' },
+            { token: '--mkb-card-bg', label: 'Fundo do cartão', kind: 'color', default: '#ffffff' },
+            { token: '--mkb-border', label: 'Borda', kind: 'color', default: '#e3e0ea' },
+            { token: '--mkb-border-strong', label: 'Borda forte', kind: 'color', default: '#c9c4d4' },
+            { token: '--mkb-foreground', label: 'Texto', kind: 'color', default: '#241f33' },
+            { token: '--mkb-muted', label: 'Texto secundário', kind: 'color', default: '#6f6a7c' },
+            { token: '--mkb-accent', label: 'Realce (accent)', kind: 'color', default: '#5e35b1' },
+            { token: '--mkb-accent-contrast', label: 'Contraste do realce', kind: 'color', default: '#ffffff' },
+            { token: '--mkb-danger', label: 'Perigo', kind: 'color', default: '#b3261e' },
+            { token: '--mkb-warning', label: 'Alerta', kind: 'color', default: '#9a6b00' },
+            { token: '--mkb-success', label: 'Sucesso', kind: 'color', default: '#1b6e3c' },
+            { token: '--mkb-info', label: 'Informação', kind: 'color', default: '#2264c4' },
+        ],
+    },
+    {
+        label: 'Forma e movimento',
+        tokens: [
+            { token: '--mkb-radius', label: 'Raio (containers)', kind: 'text', default: '10px' },
+            { token: '--mkb-radius-sm', label: 'Raio (cartões/controles)', kind: 'text', default: '6px' },
+            { token: '--mkb-dur', label: 'Duração (hover/foco)', kind: 'text', default: '150ms' },
+            { token: '--mkb-dur-move', label: 'Duração (movimento/settle)', kind: 'text', default: '180ms' },
+        ],
+    },
+];
+const COMMON = [
+    { key: 'label', label: 'Rótulo (label)', kind: 'text' },
+    { key: 'class', label: 'Classes CSS (separadas por espaço)', kind: 'csv' },
+];
+const FIELD = {
+    key: 'field',
+    label: 'Campo do item',
+    kind: 'text',
+    hint: 'Nome do campo lido no card (ex.: titulo)',
+};
+const TONES = ['neutral', 'info', 'success', 'warning', 'danger'];
+/** Descritores dos campos editáveis de cada tipo de bloco. */
+const BLOCK_FIELDS = {
+    text: [
+        FIELD,
+        { key: 'variant', label: 'Variante', kind: 'select', options: ['', 'title', 'subtitle', 'body', 'caption', 'highlight'] },
+        { key: 'prefix', label: 'Prefixo', kind: 'text' },
+        { key: 'suffix', label: 'Sufixo', kind: 'text' },
+        { key: 'format', label: 'Formatador (format:*)', kind: 'text', hint: 'Nome no registry do host' },
+        { key: 'clamp', label: 'Máx. de linhas', kind: 'number' },
+        ...COMMON,
+    ],
+    number: [
+        FIELD,
+        { key: 'variant', label: 'Variante', kind: 'select', options: ['', 'body', 'highlight'] },
+        { key: 'style', label: 'Estilo', kind: 'select', options: ['', 'decimal', 'currency', 'percent'] },
+        { key: 'currency', label: 'Moeda (ISO)', kind: 'text', hint: 'ex.: BRL' },
+        { key: 'decimals', label: 'Casas decimais', kind: 'number' },
+        { key: 'prefix', label: 'Prefixo', kind: 'text' },
+        { key: 'suffix', label: 'Sufixo', kind: 'text' },
+        ...COMMON,
+    ],
+    date: [
+        FIELD,
+        { key: 'dateStyle', label: 'Formato', kind: 'select', options: ['', 'short', 'medium', 'long', 'full'] },
+        { key: 'relative', label: 'Relativo (há 2 dias)', kind: 'toggle' },
+        ...COMMON,
+    ],
+    time: [
+        FIELD,
+        { key: 'timeStyle', label: 'Formato', kind: 'select', options: ['', 'short', 'medium'] },
+        ...COMMON,
+    ],
+    datetime: [
+        FIELD,
+        { key: 'dateStyle', label: 'Formato (data)', kind: 'select', options: ['', 'short', 'medium', 'long', 'full'] },
+        { key: 'timeStyle', label: 'Formato (hora)', kind: 'select', options: ['', 'short', 'medium'] },
+        { key: 'relative', label: 'Relativo', kind: 'toggle' },
+        ...COMMON,
+    ],
+    image: [
+        FIELD,
+        { key: 'alt', label: 'Texto alternativo', kind: 'text' },
+        { key: 'rounded', label: 'Arredondada', kind: 'toggle' },
+        ...COMMON,
+    ],
+    tag: [
+        FIELD,
+        { key: 'tone', label: 'Tom', kind: 'select', options: ['', ...TONES] },
+        { key: 'map', label: 'Mapa valor → estilo (JSON)', kind: 'json', hint: '{"ok": {"label": "OK", "tone": "success", "icon": "check"}}' },
+        ...COMMON,
+    ],
+    badge: [
+        FIELD,
+        { key: 'icon', label: 'Ícone (icon:*)', kind: 'text' },
+        { key: 'tone', label: 'Tom', kind: 'select', options: ['', ...TONES] },
+        { key: 'showText', label: 'Mostrar texto', kind: 'toggle' },
+        { key: 'map', label: 'Mapa valor → estilo (JSON)', kind: 'json' },
+        ...COMMON,
+    ],
+    icon: [
+        { key: 'icon', label: 'Ícone (icon:*)', kind: 'text' },
+        { key: 'tone', label: 'Tom', kind: 'select', options: ['', ...TONES] },
+        ...COMMON,
+    ],
+    avatar: [
+        { key: 'nameField', label: 'Campo do nome', kind: 'text' },
+        { key: 'photoField', label: 'Campo da foto (URL)', kind: 'text' },
+        ...COMMON,
+    ],
+    facts: [{ key: 'items', label: 'Fatos', kind: 'facts' }, ...COMMON],
+    items: [
+        FIELD,
+        { key: 'labelField', label: 'Campo do rótulo', kind: 'text', hint: 'default: label' },
+        { key: 'checkField', label: 'Campo de conclusão', kind: 'text', hint: 'ex.: done' },
+        { key: 'capabilities', label: 'Capacidades', kind: 'capabilities' },
+        { key: 'actions', label: 'Ações por item', kind: 'card-actions' },
+        { key: 'showProgress', label: 'Mostrar progresso (N/M)', kind: 'toggle' },
+        { key: 'maxVisible', label: 'Máx. visíveis', kind: 'number' },
+        ...COMMON,
+    ],
+    alert: [
+        FIELD,
+        { key: 'tone', label: 'Tom', kind: 'select', options: ['', ...TONES] },
+        { key: 'icon', label: 'Ícone (icon:*)', kind: 'text' },
+        ...COMMON,
+    ],
+    progress: [
+        FIELD,
+        { key: 'max', label: 'Máximo', kind: 'number' },
+        { key: 'tone', label: 'Tom', kind: 'select', options: ['', ...TONES] },
+        ...COMMON,
+    ],
+    divider: [...COMMON],
+    actions: [{ key: 'items', label: 'Ações', kind: 'card-actions' }, ...COMMON],
+    row: [
+        { key: 'align', label: 'Alinhamento', kind: 'select', options: ['', 'start', 'center', 'end', 'between'] },
+        { key: 'wrap', label: 'Quebrar linha', kind: 'toggle' },
+        ...COMMON,
+    ],
+    custom: [
+        { key: 'renderer', label: 'Renderer (renderer:*)', kind: 'text', hint: 'Nome no registry do host' },
+        ...COMMON,
+    ],
+};
+/** Tipos de bloco oferecidos no "adicionar bloco" (ordem de exibição). */
+const BLOCK_TYPE_LABELS = [
+    { type: 'text', label: 'Texto' },
+    { type: 'number', label: 'Número' },
+    { type: 'date', label: 'Data' },
+    { type: 'time', label: 'Hora' },
+    { type: 'datetime', label: 'Data e hora' },
+    { type: 'image', label: 'Imagem' },
+    { type: 'tag', label: 'Tag' },
+    { type: 'badge', label: 'Selo (badge)' },
+    { type: 'icon', label: 'Ícone' },
+    { type: 'avatar', label: 'Avatar' },
+    { type: 'facts', label: 'Fatos (ícone + valor)' },
+    { type: 'items', label: 'Itens internos (checklist/ações)' },
+    { type: 'alert', label: 'Alerta' },
+    { type: 'progress', label: 'Progresso' },
+    { type: 'divider', label: 'Divisor' },
+    { type: 'actions', label: 'Ações do cartão' },
+    { type: 'row', label: 'Linha (composição horizontal)' },
+    { type: 'custom', label: 'Custom (renderer do host)' },
+];
+
+const DEFAULT_CONFIG = {
+    columns: {
+        groups: [
+            { id: 'todo', title: 'A Fazer' },
+            { id: 'doing', title: 'Fazendo' },
+            { id: 'done', title: 'Feito' },
+        ],
+    },
+    card: { blocks: [{ type: 'text', field: 'title', variant: 'title' }] },
+    items: [
+        { id: 'item-1', column: 'todo', title: 'Primeiro cartão' },
+        { id: 'item-2', column: 'doing', title: 'Segundo cartão' },
+    ],
+};
+/**
+ * Estado do Designer — instância POR componente (provider do
+ * MosKanbanDesigner; nunca singleton de módulo). Fonte da verdade é um
+ * BoardConfig serializável em forma canônica de edição (eixos como objeto);
+ * toda mutação passa por `update()` (clone → muta → valida → re-preview).
+ */
+class DesignerStore {
+    config = signal(structuredClone(DEFAULT_CONFIG), ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    theme = signal({}, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    registry;
+    /** Validação contínua da config em edição. */
+    validation = computed(() => validateConfig(this.config()), ...(ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.validation().errors, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Board do preview — recriado a cada config VÁLIDA (a inválida mantém o
+     * último preview bom, com os erros listados ao lado). */
+    lastGood = null;
+    previewBoard = computed(() => {
+        const cfg = this.config();
+        if (!validateConfig(cfg).valid)
+            return this.lastGood;
+        try {
+            this.lastGood?.destroy();
+            this.lastGood = createBoard(structuredClone(cfg), { registry: this.registry });
+        }
+        catch {
+            /* estrutural já validado; regra de runtime inesperada mantém o último */
+        }
+        return this.lastGood;
+    }, ...(ngDevMode ? [{ debugName: "previewBoard" }] : /* istanbul ignore next */ []));
+    /** String de estilo com os tokens alterados (aplicada no preview). */
+    themeStyle = computed(() => Object.entries(this.theme())
+        .map(([token, value]) => `${token}: ${value}`)
+        .join('; '), ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
+    // ---- mutações ---------------------------------------------------------------
+    /** Toda mutação: clona, aplica, publica (imutável p/ OnPush). */
+    update(mutator) {
+        const draft = structuredClone(this.config());
+        mutator(draft);
+        this.config.set(draft);
+    }
+    load(config, theme) {
+        this.config.set(this.canonicalize(structuredClone(config)));
+        if (theme)
+            this.theme.set({ ...theme });
+    }
+    setToken(token, value) {
+        const def = TOKEN_GROUPS.flatMap((g) => g.tokens).find((t) => t.token === token);
+        const next = { ...this.theme() };
+        if (!value || value === def?.default)
+            delete next[token];
+        else
+            next[token] = value;
+        this.theme.set(next);
+    }
+    resetTheme() {
+        this.theme.set({});
+    }
+    // ---- eixos em forma canônica --------------------------------------------------
+    /** Eixo de colunas SEMPRE como objeto (açúcar de array normalizado). */
+    columnsAxis() {
+        return this.axisOf(this.config().columns);
+    }
+    lanesAxis() {
+        const lanes = this.config().lanes;
+        return lanes ? this.axisOf(lanes) : null;
+    }
+    axisOf(axis) {
+        if (Array.isArray(axis)) {
+            return {
+                groups: axis.map((g) => (typeof g === 'string' ? { id: g } : { ...g })),
+            };
+        }
+        return {
+            ...axis,
+            groups: axis.groups?.map((g) => (typeof g === 'string' ? { id: g } : { ...g })),
+        };
+    }
+    /** Importa qualquer config para a forma canônica de edição. */
+    canonicalize(config) {
+        config.columns = this.axisOf(config.columns);
+        if (config.lanes)
+            config.lanes = this.axisOf(config.lanes);
+        return config;
+    }
+    // ---- import / export ----------------------------------------------------------
+    /** Aceita BoardConfig puro OU KanbanDesignFile; retorna erros sem aplicar
+     * quando a config é inválida. */
+    import(json) {
+        let parsed;
+        try {
+            parsed = JSON.parse(json);
+        }
+        catch (e) {
+            return { ok: false, errors: [{ path: '', message: `JSON inválido: ${e.message}` }] };
+        }
+        const asFile = parsed;
+        const isDesignFile = !!asFile.config;
+        const config = (asFile.config ?? parsed);
+        const result = validateConfig(config);
+        if (!result.valid)
+            return { ok: false, errors: result.errors };
+        // Design file descreve o design INTEIRO: sem `theme` = tema no padrão, o
+        // que ZERA os tokens em edição. BoardConfig puro só traz estrutura, então
+        // preserva o tema atual.
+        this.load(config, isDesignFile ? (asFile.theme ?? {}) : undefined);
+        return { ok: true, errors: [] };
+    }
+    exportConfigJson() {
+        return JSON.stringify(this.config(), null, 2);
+    }
+    exportDesignJson() {
+        const file = { version: 1, config: this.config() };
+        if (Object.keys(this.theme()).length)
+            file.theme = this.theme();
+        return JSON.stringify(file, null, 2);
+    }
+    /** Snippet CSS só com os tokens alterados (nada = string vazia). */
+    exportThemeCss() {
+        const entries = Object.entries(this.theme());
+        if (!entries.length)
+            return '';
+        const lines = entries.map(([token, value]) => `  ${token}: ${value};`);
+        return `/* Tema @mosaicoo/kanban — gerado pelo Designer */\n:root {\n${lines.join('\n')}\n}\n`;
+    }
+    // ---- rascunho local -------------------------------------------------------------
+    saveDraft(storageKey) {
+        try {
+            localStorage.setItem(storageKey, this.exportDesignJson());
+        }
+        catch {
+            /* storage cheio/indisponível: rascunho é conveniência, não requisito */
+        }
+    }
+    loadDraft(storageKey) {
+        try {
+            const raw = localStorage.getItem(storageKey);
+            return raw ? this.import(raw).ok : false;
+        }
+        catch {
+            return false;
+        }
+    }
+    clearDraft(storageKey) {
+        try {
+            localStorage.removeItem(storageKey);
+        }
+        catch {
+            /* idem */
+        }
+    }
+    destroy() {
+        this.lastGood?.destroy();
+        this.lastGood = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DesignerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DesignerStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DesignerStore, decorators: [{
+            type: Injectable
+        }] });
+
+const TYPE_LABEL = new Map(BLOCK_TYPE_LABELS.map((t) => [t.type, t.label]));
+/** Bloco novo mínimo VÁLIDO por tipo (campos obrigatórios preenchidos). */
+function blankBlock(type) {
+    switch (type) {
+        case 'icon':
+            return { type, icon: 'star' };
+        case 'avatar':
+            return { type, nameField: 'owner' };
+        case 'facts':
+            return { type, items: [{ field: 'campo' }] };
+        case 'actions':
+            return { type, items: [{ id: 'acao-1', label: 'Ação' }] };
+        case 'divider':
+            return { type };
+        case 'row':
+            return { type, blocks: [] };
+        case 'custom':
+            return { type, renderer: 'renderer:custom' };
+        default:
+            return { type, field: 'campo' };
+    }
+}
+/**
+ * Editor do CARTÃO: árvore de blocos (com `row` de um nível) + painel de
+ * propriedades GERADO a partir de BLOCK_FIELDS — novos campos entram na
+ * tabela, não em template escrito à mão.
+ */
+class MkbCardEditor {
+    store = inject(DesignerStore);
+    config = this.store.config;
+    blockTypes = BLOCK_TYPE_LABELS;
+    tones = ['', 'neutral', 'info', 'success', 'warning', 'danger'];
+    allCapabilities = ['check', 'reorder', 'move-across', 'action'];
+    newType = 'text';
+    selectedPath = signal(null, ...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
+    jsonError = signal(null, ...(ngDevMode ? [{ debugName: "jsonError" }] : /* istanbul ignore next */ []));
+    selectedBlock = computed(() => {
+        const path = this.selectedPath();
+        return path ? this.blockAt(this.config().card?.blocks ?? [], path) : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedBlock" }] : /* istanbul ignore next */ []));
+    blocks() {
+        return this.config().card?.blocks ?? [];
+    }
+    rowChildren(block) {
+        return block.type === 'row' ? block.blocks : [];
+    }
+    typeLabel(type) {
+        return TYPE_LABEL.get(type) ?? type;
+    }
+    summary(block) {
+        const b = block;
+        return String(b['field'] ?? b['icon'] ?? b['renderer'] ?? b['nameField'] ?? '');
+    }
+    fieldsFor(type) {
+        return BLOCK_FIELDS[type];
+    }
+    // ---- seleção / árvore --------------------------------------------------------
+    select(path) {
+        this.selectedPath.set(path);
+        this.jsonError.set(null);
+    }
+    isSelected(path) {
+        const sel = this.selectedPath();
+        return !!sel && sel.length === path.length && sel.every((v, i) => v === path[i]);
+    }
+    selectedIsRow() {
+        return this.selectedBlock()?.type === 'row';
+    }
+    blockAt(blocks, path) {
+        const top = blocks[path[0]];
+        if (!top)
+            return null;
+        if (path.length === 1)
+            return top;
+        return top.type === 'row' ? (top.blocks[path[1]] ?? null) : null;
+    }
+    /** Lista IRMÃ do caminho (raiz ou blocos de uma row) dentro do draft. */
+    siblingsAt(draft, path) {
+        const blocks = draft.card?.blocks;
+        if (!blocks)
+            return null;
+        if (path.length === 1)
+            return blocks;
+        const parent = blocks[path[0]];
+        return parent?.type === 'row' ? parent.blocks : null;
+    }
+    add(intoSelectedRow) {
+        const block = blankBlock(this.newType);
+        const rowPath = intoSelectedRow ? this.selectedPath() : null;
+        this.store.update((d) => {
+            d.card ??= { blocks: [] };
+            if (rowPath) {
+                const row = this.blockAt(d.card.blocks, rowPath);
+                if (row?.type === 'row') {
+                    row.blocks.push(block);
+                    return;
+                }
+            }
+            d.card.blocks.push(block);
+        });
+        if (rowPath) {
+            const row = this.blockAt(this.blocks(), rowPath);
+            this.select([...rowPath, (row?.type === 'row' ? row.blocks.length : 1) - 1]);
+        }
+        else {
+            this.select([this.blocks().length - 1]);
+        }
+    }
+    remove(path) {
+        this.store.update((d) => {
+            this.siblingsAt(d, path)?.splice(path[path.length - 1], 1);
+        });
+        this.selectedPath.set(null);
+    }
+    move(path, delta) {
+        const index = path[path.length - 1];
+        const target = index + delta;
+        let moved = false;
+        this.store.update((d) => {
+            const siblings = this.siblingsAt(d, path);
+            if (!siblings || target < 0 || target >= siblings.length)
+                return;
+            const [b] = siblings.splice(index, 1);
+            siblings.splice(target, 0, b);
+            moved = true;
+        });
+        if (moved && this.isSelected(path)) {
+            this.select([...path.slice(0, -1), target]);
+        }
+    }
+    // ---- leitura de propriedades ----------------------------------------------------
+    str(block, key) {
+        const v = block[key];
+        return typeof v === 'string' ? v : '';
+    }
+    num(block, key) {
+        const v = block[key];
+        return typeof v === 'number' ? v : null;
+    }
+    bool(block, key) {
+        return block[key] === true;
+    }
+    csv(block, key) {
+        const v = block[key];
+        return Array.isArray(v) ? v.join(' ') : typeof v === 'string' ? v : '';
+    }
+    json(block, key) {
+        const v = block[key];
+        return v === undefined ? '' : JSON.stringify(v, null, 2);
+    }
+    facts(block) {
+        return block.type === 'facts' ? block.items : [];
+    }
+    actions(block, key) {
+        const v = block[key];
+        return Array.isArray(v) ? v : [];
+    }
+    hasCapability(block, cap) {
+        return block.type === 'items' && !!block.capabilities?.includes(cap);
+    }
+    whenColumns(action) {
+        const col = action.when?.column;
+        return Array.isArray(col) ? col.join(', ') : (col ?? '');
+    }
+    // ---- escrita de propriedades ------------------------------------------------------
+    /** Escreve no bloco selecionado; undefined REMOVE a chave. */
+    setProp(key, value) {
+        const path = this.selectedPath();
+        if (!path)
+            return;
+        this.store.update((d) => {
+            const block = this.blockAt(d.card?.blocks ?? [], path);
+            if (!block)
+                return;
+            if (value === undefined)
+                delete block[key];
+            else
+                block[key] = value;
+        });
+    }
+    setCsv(key, raw) {
+        const list = raw.split(/[\s,]+/).filter(Boolean);
+        this.setProp(key, list.length ? list : undefined);
+    }
+    setJson(key, event) {
+        const raw = event.target.value.trim();
+        if (!raw) {
+            this.jsonError.set(null);
+            this.setProp(key, undefined);
+            return;
+        }
+        try {
+            this.setProp(key, JSON.parse(raw));
+            this.jsonError.set(null);
+        }
+        catch (e) {
+            this.jsonError.set(`JSON inválido: ${e.message}`);
+        }
+    }
+    toggleCapability(cap, enabled) {
+        const block = this.selectedBlock();
+        if (block?.type !== 'items')
+            return;
+        const caps = new Set(block.capabilities ?? []);
+        if (enabled)
+            caps.add(cap);
+        else
+            caps.delete(cap);
+        this.setProp('capabilities', caps.size ? [...caps] : undefined);
+    }
+    // ---- listas internas (facts / actions) --------------------------------------------
+    addFact(key) {
+        this.mutateList(key, (list) => list.push({ field: 'campo' }));
+    }
+    setFact(index, prop, value) {
+        this.mutateList('items', (list) => {
+            const fact = list[index];
+            if (!fact)
+                return;
+            if (value === undefined)
+                delete fact[prop];
+            else
+                fact[prop] = value;
+        });
+    }
+    addAction(key) {
+        this.mutateList(key, (list) => list.push({ id: `acao-${list.length + 1}`, label: 'Ação' }));
+    }
+    setAction(key, index, prop, value) {
+        this.mutateList(key, (list) => {
+            const action = list[index];
+            if (!action)
+                return;
+            if (value === undefined)
+                delete action[prop];
+            else
+                action[prop] = value;
+        });
+    }
+    setActionWhen(key, index, raw) {
+        const columns = raw.split(/[\s,]+/).filter(Boolean);
+        this.mutateList(key, (list) => {
+            const action = list[index];
+            if (!action)
+                return;
+            if (!columns.length) {
+                if (action.when)
+                    delete action.when.column;
+                if (action.when && !action.when.lane)
+                    delete action.when;
+            }
+            else {
+                action.when = { ...(action.when ?? {}), column: columns.length === 1 ? columns[0] : columns };
+            }
+        });
+    }
+    removeListItem(key, index) {
+        this.mutateList(key, (list) => list.splice(index, 1));
+    }
+    mutateList(key, mutator) {
+        const path = this.selectedPath();
+        if (!path)
+            return;
+        this.store.update((d) => {
+            const block = this.blockAt(d.card?.blocks ?? [], path);
+            if (!block)
+                return;
+            block[key] ??= [];
+            mutator(block[key]);
+        });
+    }
+    // ---- geral -------------------------------------------------------------------------
+    setDragHandle(value) {
+        this.store.update((d) => {
+            d.card ??= { blocks: [] };
+            if (value)
+                d.card.dragHandle = true;
+            else
+                delete d.card.dragHandle;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCardEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbCardEditor, isStandalone: true, selector: "mkb-card-editor", ngImport: i0, template: `
+    <div class="mkbd-row">
+      <mat-slide-toggle
+        [ngModel]="config().card?.dragHandle ?? false"
+        (ngModelChange)="setDragHandle($event)"
+      >
+        Arrastar só pela alça ⠿
+      </mat-slide-toggle>
+    </div>
+
+    <h3 class="mkbd-h">Blocos do cartão</h3>
+    <div class="mkbd-tree" role="tree" aria-label="Blocos do cartão">
+      @for (block of blocks(); track $index; let i = $index) {
+        <ng-container
+          *ngTemplateOutlet="blockRow; context: { block, path: [i], siblings: blocks().length }"
+        />
+        @if (block.type === 'row') {
+          @for (child of rowChildren(block); track $index; let j = $index) {
+            <ng-container
+              *ngTemplateOutlet="
+                blockRow;
+                context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+              "
+            />
+          }
+        }
+      } @empty {
+        <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
+      }
+    </div>
+
+    <ng-template #blockRow let-block="block" let-path="path" let-siblings="siblings">
+      <div
+        class="mkbd-node"
+        role="treeitem"
+        tabindex="0"
+        [class.mkbd-node-child]="path.length > 1"
+        [class.mkbd-node-selected]="isSelected(path)"
+        [attr.aria-selected]="isSelected(path)"
+        (click)="select(path)"
+        (keydown.enter)="select(path)"
+      >
+        <span class="mkbd-node-type">{{ typeLabel(block.type) }}</span>
+        <span class="mkbd-node-summary">{{ summary(block) }}</span>
+        <span class="mkbd-spacer"></span>
+        <button matIconButton type="button" (click)="move(path, -1); $event.stopPropagation()" [disabled]="path[path.length - 1] === 0" aria-label="Subir bloco">↑</button>
+        <button matIconButton type="button" (click)="move(path, 1); $event.stopPropagation()" [disabled]="path[path.length - 1] === siblings - 1" aria-label="Descer bloco">↓</button>
+        <button matIconButton type="button" (click)="remove(path); $event.stopPropagation()" aria-label="Remover bloco">✕</button>
+      </div>
+    </ng-template>
+
+    <div class="mkbd-row mkbd-mt">
+      <mat-form-field appearance="outline" class="mkbd-slim">
+        <mat-label>Tipo do novo bloco</mat-label>
+        <mat-select [(ngModel)]="newType">
+          @for (t of blockTypes; track t.type) {
+            <mat-option [value]="t.type">{{ t.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <button matButton type="button" (click)="add(false)">+ Adicionar</button>
+      @if (selectedIsRow()) {
+        <button matButton type="button" (click)="add(true)">+ Adicionar DENTRO da linha</button>
+      }
+    </div>
+
+    @if (selectedBlock(); as block) {
+      <h3 class="mkbd-h">Propriedades — {{ typeLabel(block.type) }}</h3>
+      <div class="mkbd-props">
+        @for (def of fieldsFor(block.type); track def.key) {
+          @switch (def.kind) {
+            @case ('text') {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
+                @if (def.hint) { <mat-hint>{{ def.hint }}</mat-hint> }
+              </mat-form-field>
+            }
+            @case ('number') {
+              <mat-form-field appearance="outline" class="mkbd-tiny">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  type="number"
+                  [ngModel]="num(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
+                />
+              </mat-form-field>
+            }
+            @case ('toggle') {
+              <mat-slide-toggle
+                [ngModel]="bool(block, def.key)"
+                (ngModelChange)="setProp(def.key, $event || undefined)"
+              >
+                {{ def.label }}
+              </mat-slide-toggle>
+            }
+            @case ('select') {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>{{ def.label }}</mat-label>
+                <mat-select
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                >
+                  @for (opt of def.options; track opt) {
+                    <mat-option [value]="opt">{{ opt || '—' }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+            @case ('csv') {
+              <mat-form-field appearance="outline" class="mkbd-grow">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="csv(block, def.key)"
+                  (ngModelChange)="setCsv(def.key, $event)"
+                />
+              </mat-form-field>
+            }
+            @case ('json') {
+              <mat-form-field appearance="outline" class="mkbd-full">
+                <mat-label>{{ def.label }}</mat-label>
+                <textarea
+                  matInput
+                  rows="4"
+                  [value]="json(block, def.key)"
+                  (change)="setJson(def.key, $event)"
+                ></textarea>
+                <mat-hint [class.mkbd-error]="jsonError()">
+                  {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+                </mat-hint>
+              </mat-form-field>
+            }
+            @case ('capabilities') {
+              <div class="mkbd-caps">
+                <span class="mkbd-caps-label">{{ def.label }}:</span>
+                @for (cap of allCapabilities; track cap) {
+                  <mat-checkbox
+                    [ngModel]="hasCapability(block, cap)"
+                    (ngModelChange)="toggleCapability(cap, $event)"
+                  >
+                    {{ cap }}
+                  </mat-checkbox>
+                }
+              </div>
+            }
+            @case ('facts') {
+              <div class="mkbd-sub">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (fact of facts(block); track $index; let fi = $index) {
+                  <div class="mkbd-subrow">
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Campo</mat-label>
+                      <input matInput [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Ícone</mat-label>
+                      <input matInput [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Rótulo</mat-label>
+                      <input matInput [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Prefixo</mat-label>
+                      <input matInput [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Sufixo</mat-label>
+                      <input matInput [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </mat-form-field>
+                    <button matIconButton type="button" (click)="removeListItem(def.key, fi)" aria-label="Remover fato">✕</button>
+                  </div>
+                }
+                <button matButton type="button" (click)="addFact(def.key)">+ Fato</button>
+              </div>
+            }
+            @case ('card-actions') {
+              <div class="mkbd-sub">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (action of actions(block, def.key); track $index; let ai = $index) {
+                  <div class="mkbd-subrow">
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Id</mat-label>
+                      <input matInput [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Rótulo</mat-label>
+                      <input matInput [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Ícone</mat-label>
+                      <input matInput [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Tom</mat-label>
+                      <mat-select [ngModel]="action.tone ?? ''" (ngModelChange)="setAction(def.key, ai, 'tone', $event || undefined)">
+                        @for (tone of tones; track tone) {
+                          <mat-option [value]="tone">{{ tone || '—' }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Só nas colunas</mat-label>
+                      <input
+                        matInput
+                        placeholder="col-a, col-b"
+                        [ngModel]="whenColumns(action)"
+                        (ngModelChange)="setActionWhen(def.key, ai, $event)"
+                      />
+                    </mat-form-field>
+                    <button matIconButton type="button" (click)="removeListItem(def.key, ai)" aria-label="Remover ação">✕</button>
+                  </div>
+                }
+                <button matButton type="button" (click)="addAction(def.key)">+ Ação</button>
+              </div>
+            }
+          }
+        }
+      </div>
+    } @else {
+      <p class="mkbd-hint mkbd-mt">Selecione um bloco para editar as propriedades.</p>
+    }
+  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:12px}.mkbd-tree{display:flex;flex-direction:column;gap:3px}.mkbd-node{display:flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;cursor:pointer;background:var(--mkb-card-bg, #fff)}.mkbd-node:focus-visible{outline:2px solid var(--mkb-accent, #5e35b1);outline-offset:1px}.mkbd-node-child{margin-left:26px}.mkbd-node-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:inset 2px 0 0 var(--mkb-accent, #5e35b1)}.mkbd-node-type{font-size:12px;font-weight:600}.mkbd-node-summary{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-spacer{flex:1}.mkbd-props{display:flex;flex-wrap:wrap;gap:18px 10px;align-items:center}.mkbd-slim{width:200px}.mkbd-tiny{width:110px}.mkbd-tiny2{width:130px}.mkbd-grow{flex:1;min-width:220px}.mkbd-full{width:100%}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:4px}.mkbd-subrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mkbd-caps-label{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCardEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-card-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                    ], template: `
+    <div class="mkbd-row">
+      <mat-slide-toggle
+        [ngModel]="config().card?.dragHandle ?? false"
+        (ngModelChange)="setDragHandle($event)"
+      >
+        Arrastar só pela alça ⠿
+      </mat-slide-toggle>
+    </div>
+
+    <h3 class="mkbd-h">Blocos do cartão</h3>
+    <div class="mkbd-tree" role="tree" aria-label="Blocos do cartão">
+      @for (block of blocks(); track $index; let i = $index) {
+        <ng-container
+          *ngTemplateOutlet="blockRow; context: { block, path: [i], siblings: blocks().length }"
+        />
+        @if (block.type === 'row') {
+          @for (child of rowChildren(block); track $index; let j = $index) {
+            <ng-container
+              *ngTemplateOutlet="
+                blockRow;
+                context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+              "
+            />
+          }
+        }
+      } @empty {
+        <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
+      }
+    </div>
+
+    <ng-template #blockRow let-block="block" let-path="path" let-siblings="siblings">
+      <div
+        class="mkbd-node"
+        role="treeitem"
+        tabindex="0"
+        [class.mkbd-node-child]="path.length > 1"
+        [class.mkbd-node-selected]="isSelected(path)"
+        [attr.aria-selected]="isSelected(path)"
+        (click)="select(path)"
+        (keydown.enter)="select(path)"
+      >
+        <span class="mkbd-node-type">{{ typeLabel(block.type) }}</span>
+        <span class="mkbd-node-summary">{{ summary(block) }}</span>
+        <span class="mkbd-spacer"></span>
+        <button matIconButton type="button" (click)="move(path, -1); $event.stopPropagation()" [disabled]="path[path.length - 1] === 0" aria-label="Subir bloco">↑</button>
+        <button matIconButton type="button" (click)="move(path, 1); $event.stopPropagation()" [disabled]="path[path.length - 1] === siblings - 1" aria-label="Descer bloco">↓</button>
+        <button matIconButton type="button" (click)="remove(path); $event.stopPropagation()" aria-label="Remover bloco">✕</button>
+      </div>
+    </ng-template>
+
+    <div class="mkbd-row mkbd-mt">
+      <mat-form-field appearance="outline" class="mkbd-slim">
+        <mat-label>Tipo do novo bloco</mat-label>
+        <mat-select [(ngModel)]="newType">
+          @for (t of blockTypes; track t.type) {
+            <mat-option [value]="t.type">{{ t.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <button matButton type="button" (click)="add(false)">+ Adicionar</button>
+      @if (selectedIsRow()) {
+        <button matButton type="button" (click)="add(true)">+ Adicionar DENTRO da linha</button>
+      }
+    </div>
+
+    @if (selectedBlock(); as block) {
+      <h3 class="mkbd-h">Propriedades — {{ typeLabel(block.type) }}</h3>
+      <div class="mkbd-props">
+        @for (def of fieldsFor(block.type); track def.key) {
+          @switch (def.kind) {
+            @case ('text') {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
+                @if (def.hint) { <mat-hint>{{ def.hint }}</mat-hint> }
+              </mat-form-field>
+            }
+            @case ('number') {
+              <mat-form-field appearance="outline" class="mkbd-tiny">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  type="number"
+                  [ngModel]="num(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
+                />
+              </mat-form-field>
+            }
+            @case ('toggle') {
+              <mat-slide-toggle
+                [ngModel]="bool(block, def.key)"
+                (ngModelChange)="setProp(def.key, $event || undefined)"
+              >
+                {{ def.label }}
+              </mat-slide-toggle>
+            }
+            @case ('select') {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>{{ def.label }}</mat-label>
+                <mat-select
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                >
+                  @for (opt of def.options; track opt) {
+                    <mat-option [value]="opt">{{ opt || '—' }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+            @case ('csv') {
+              <mat-form-field appearance="outline" class="mkbd-grow">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="csv(block, def.key)"
+                  (ngModelChange)="setCsv(def.key, $event)"
+                />
+              </mat-form-field>
+            }
+            @case ('json') {
+              <mat-form-field appearance="outline" class="mkbd-full">
+                <mat-label>{{ def.label }}</mat-label>
+                <textarea
+                  matInput
+                  rows="4"
+                  [value]="json(block, def.key)"
+                  (change)="setJson(def.key, $event)"
+                ></textarea>
+                <mat-hint [class.mkbd-error]="jsonError()">
+                  {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+                </mat-hint>
+              </mat-form-field>
+            }
+            @case ('capabilities') {
+              <div class="mkbd-caps">
+                <span class="mkbd-caps-label">{{ def.label }}:</span>
+                @for (cap of allCapabilities; track cap) {
+                  <mat-checkbox
+                    [ngModel]="hasCapability(block, cap)"
+                    (ngModelChange)="toggleCapability(cap, $event)"
+                  >
+                    {{ cap }}
+                  </mat-checkbox>
+                }
+              </div>
+            }
+            @case ('facts') {
+              <div class="mkbd-sub">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (fact of facts(block); track $index; let fi = $index) {
+                  <div class="mkbd-subrow">
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Campo</mat-label>
+                      <input matInput [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Ícone</mat-label>
+                      <input matInput [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Rótulo</mat-label>
+                      <input matInput [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Prefixo</mat-label>
+                      <input matInput [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Sufixo</mat-label>
+                      <input matInput [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </mat-form-field>
+                    <button matIconButton type="button" (click)="removeListItem(def.key, fi)" aria-label="Remover fato">✕</button>
+                  </div>
+                }
+                <button matButton type="button" (click)="addFact(def.key)">+ Fato</button>
+              </div>
+            }
+            @case ('card-actions') {
+              <div class="mkbd-sub">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (action of actions(block, def.key); track $index; let ai = $index) {
+                  <div class="mkbd-subrow">
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Id</mat-label>
+                      <input matInput [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Rótulo</mat-label>
+                      <input matInput [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Ícone</mat-label>
+                      <input matInput [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Tom</mat-label>
+                      <mat-select [ngModel]="action.tone ?? ''" (ngModelChange)="setAction(def.key, ai, 'tone', $event || undefined)">
+                        @for (tone of tones; track tone) {
+                          <mat-option [value]="tone">{{ tone || '—' }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+                    <mat-form-field appearance="outline" class="mkbd-tiny2">
+                      <mat-label>Só nas colunas</mat-label>
+                      <input
+                        matInput
+                        placeholder="col-a, col-b"
+                        [ngModel]="whenColumns(action)"
+                        (ngModelChange)="setActionWhen(def.key, ai, $event)"
+                      />
+                    </mat-form-field>
+                    <button matIconButton type="button" (click)="removeListItem(def.key, ai)" aria-label="Remover ação">✕</button>
+                  </div>
+                }
+                <button matButton type="button" (click)="addAction(def.key)">+ Ação</button>
+              </div>
+            }
+          }
+        }
+      </div>
+    } @else {
+      <p class="mkbd-hint mkbd-mt">Selecione um bloco para editar as propriedades.</p>
+    }
+  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:12px}.mkbd-tree{display:flex;flex-direction:column;gap:3px}.mkbd-node{display:flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;cursor:pointer;background:var(--mkb-card-bg, #fff)}.mkbd-node:focus-visible{outline:2px solid var(--mkb-accent, #5e35b1);outline-offset:1px}.mkbd-node-child{margin-left:26px}.mkbd-node-selected{border-color:var(--mkb-accent, #5e35b1);box-shadow:inset 2px 0 0 var(--mkb-accent, #5e35b1)}.mkbd-node-type{font-size:12px;font-weight:600}.mkbd-node-summary{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-spacer{flex:1}.mkbd-props{display:flex;flex-wrap:wrap;gap:18px 10px;align-items:center}.mkbd-slim{width:200px}.mkbd-tiny{width:110px}.mkbd-tiny2{width:130px}.mkbd-grow{flex:1;min-width:220px}.mkbd-full{width:100%}.mkbd-caps,.mkbd-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}.mkbd-sub{flex-direction:column;align-items:stretch;gap:4px}.mkbd-subrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mkbd-caps-label{font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"] }]
+        }] });
+
+/** Converte texto digitado no tipo mais provável (números e booleanos). */
+function coerce(raw) {
+    if (raw === 'true')
+        return true;
+    if (raw === 'false')
+        return false;
+    if (/^-?\d+(\.\d+)?$/.test(raw))
+        return Number(raw);
+    return raw;
+}
+/**
+ * Editor de DADOS: os itens de exemplo do board (`config.items`), suas
+ * entries (blocos `items` do cartão) e os filtros iniciais. São os dados
+ * que viajam junto na exportação — no runtime real o host normalmente
+ * substitui por um adapter.
+ */
+class MkbDataEditor {
+    store = inject(DesignerStore);
+    config = this.store.config;
+    filtersError = signal(null, ...(ngDevMode ? [{ debugName: "filtersError" }] : /* istanbul ignore next */ []));
+    items() {
+        return this.config().items ?? [];
+    }
+    columnField() {
+        return this.store.columnsAxis().field ?? 'column';
+    }
+    laneField() {
+        return this.store.lanesAxis()?.field ?? 'lane';
+    }
+    hasLanes() {
+        return !!this.store.lanesAxis();
+    }
+    columnIds() {
+        return (this.store.columnsAxis().groups ?? []).map((g) => g.id);
+    }
+    laneIds() {
+        return (this.store.lanesAxis()?.groups ?? []).map((g) => g.id);
+    }
+    label(item) {
+        const title = item['title'] ?? item['titulo'] ?? item['name'];
+        return typeof title === 'string' && title ? title : item.id;
+    }
+    position(item) {
+        const col = this.str(item, this.columnField());
+        const lane = this.hasLanes() ? this.str(item, this.laneField()) : '';
+        return lane ? `${col} · ${lane}` : col;
+    }
+    str(record, key) {
+        const v = record[key];
+        return typeof v === 'string' ? v : v == null ? '' : String(v);
+    }
+    display(item, key) {
+        const v = item[key];
+        return typeof v === 'object' ? JSON.stringify(v) : String(v ?? '');
+    }
+    coerceValue(raw) {
+        return coerce(raw);
+    }
+    /** Campos livres do item: tudo menos id, eixos e campos de entries. */
+    freeFields(item) {
+        const reserved = new Set([
+            'id',
+            this.columnField(),
+            this.laneField(),
+            ...this.entryDefs().map((d) => d.field),
+        ]);
+        return Object.keys(item).filter((k) => !reserved.has(k));
+    }
+    /** Blocos `items` declarados no cartão (recursivo em rows). */
+    entryDefs() {
+        const defs = [];
+        const walk = (blocks) => {
+            for (const block of blocks) {
+                if (block.type === 'items') {
+                    defs.push({
+                        field: block.field,
+                        labelField: block.labelField ?? 'label',
+                        checkField: block.checkField,
+                    });
+                }
+                else if (block.type === 'row') {
+                    walk(block.blocks);
+                }
+            }
+        };
+        walk(this.config().card?.blocks ?? []);
+        return defs;
+    }
+    entriesOf(item, field) {
+        const v = item[field];
+        return Array.isArray(v) ? v : [];
+    }
+    // ---- mutações de item ---------------------------------------------------------
+    addItem() {
+        const column = this.columnIds()[0] ?? 'todo';
+        const lane = this.hasLanes() ? this.laneIds()[0] : undefined;
+        this.store.update((d) => {
+            d.items ??= [];
+            const item = {
+                id: `item-${d.items.length + 1}`,
+                [this.columnField()]: column,
+                title: 'Novo item',
+            };
+            if (lane)
+                item[this.laneField()] = lane;
+            d.items.push(item);
+        });
+    }
+    duplicateItem(index) {
+        this.store.update((d) => {
+            const source = d.items?.[index];
+            if (!source || !d.items)
+                return;
+            const copy = structuredClone(source);
+            copy['id'] = `${source.id}-copia`;
+            d.items.splice(index + 1, 0, copy);
+        });
+    }
+    removeItem(index) {
+        this.store.update((d) => d.items?.splice(index, 1));
+    }
+    setItemProp(index, key, value) {
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            if (!item)
+                return;
+            if (value === undefined || value === '')
+                delete item[key];
+            else
+                item[key] = value;
+        });
+    }
+    addField(index) {
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            if (!item)
+                return;
+            let n = 1;
+            while (`campo-${n}` in item)
+                n++;
+            item[`campo-${n}`] = '';
+        });
+    }
+    renameField(index, oldKey, event) {
+        const newKey = event.target.value.trim();
+        if (!newKey || newKey === oldKey)
+            return;
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            if (!item || newKey in item)
+                return;
+            item[newKey] = item[oldKey];
+            delete item[oldKey];
+        });
+    }
+    removeField(index, key) {
+        this.setItemProp(index, key, undefined);
+    }
+    // ---- entries -------------------------------------------------------------------
+    addEntry(index, def) {
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            if (!item)
+                return;
+            const list = (item[def.field] ??= []);
+            const entry = {
+                id: `entry-${list.length + 1}`,
+                [def.labelField]: 'Novo item interno',
+            };
+            if (def.checkField)
+                entry[def.checkField] = false;
+            list.push(entry);
+        });
+    }
+    setEntryProp(index, field, entryIndex, key, value) {
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            const list = item?.[field];
+            const entry = list?.[entryIndex];
+            if (!entry)
+                return;
+            entry[key] = value;
+        });
+    }
+    removeEntry(index, field, entryIndex) {
+        this.store.update((d) => {
+            const item = d.items?.[index];
+            const list = item?.[field];
+            list?.splice(entryIndex, 1);
+        });
+    }
+    // ---- filtros ---------------------------------------------------------------------
+    filtersJson() {
+        const filters = this.config().filters;
+        return filters?.length ? JSON.stringify(filters, null, 2) : '';
+    }
+    setFilters(event) {
+        const raw = event.target.value.trim();
+        if (!raw) {
+            this.filtersError.set(null);
+            this.store.update((d) => delete d.filters);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                throw new Error('esperado um ARRAY de filtros');
+            this.filtersError.set(null);
+            this.store.update((d) => (d.filters = parsed));
+        }
+        catch (e) {
+            this.filtersError.set(`JSON inválido: ${e.message}`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbDataEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbDataEditor, isStandalone: true, selector: "mkb-data-editor", ngImport: i0, template: `
+    <h3 class="mkbd-h">Itens ({{ items().length }})</h3>
+    <mat-accordion displayMode="flat" [multi]="false">
+      @for (item of items(); track item.id; let i = $index) {
+        <mat-expansion-panel class="mat-elevation-z0 mkbd-panel">
+          <mat-expansion-panel-header>
+            <mat-panel-title>{{ label(item) }}</mat-panel-title>
+            <mat-panel-description>{{ position(item) }}</mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <div class="mkbd-row">
+            <mat-form-field appearance="outline" class="mkbd-slim">
+              <mat-label>Id</mat-label>
+              <input matInput [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+            </mat-form-field>
+            @if (columnIds().length) {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Coluna ({{ columnField() }})</mat-label>
+                <mat-select
+                  [ngModel]="str(item, columnField())"
+                  (ngModelChange)="setItemProp(i, columnField(), $event)"
+                >
+                  @for (id of columnIds(); track id) {
+                    <mat-option [value]="id">{{ id }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            } @else {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Coluna ({{ columnField() }})</mat-label>
+                <input matInput [ngModel]="str(item, columnField())" (ngModelChange)="setItemProp(i, columnField(), $event)" />
+              </mat-form-field>
+            }
+            @if (hasLanes()) {
+              @if (laneIds().length) {
+                <mat-form-field appearance="outline" class="mkbd-slim">
+                  <mat-label>Lane ({{ laneField() }})</mat-label>
+                  <mat-select [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)">
+                    @for (id of laneIds(); track id) {
+                      <mat-option [value]="id">{{ id }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              } @else {
+                <mat-form-field appearance="outline" class="mkbd-slim">
+                  <mat-label>Lane ({{ laneField() }})</mat-label>
+                  <input matInput [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)" />
+                </mat-form-field>
+              }
+            }
+          </div>
+
+          <h4 class="mkbd-h4">Campos</h4>
+          @for (key of freeFields(item); track key) {
+            <div class="mkbd-row">
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Campo</mat-label>
+                <input matInput [ngModel]="key" (change)="renameField(i, key, $event)" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="mkbd-grow">
+                <mat-label>Valor</mat-label>
+                <input matInput [ngModel]="display(item, key)" (ngModelChange)="setItemProp(i, key, coerceValue($event))" />
+              </mat-form-field>
+              <button matIconButton type="button" (click)="removeField(i, key)" aria-label="Remover campo">✕</button>
+            </div>
+          }
+          <button matButton type="button" (click)="addField(i)">+ Campo</button>
+
+          @for (def of entryDefs(); track def.field) {
+            <h4 class="mkbd-h4">Itens internos — {{ def.field }}</h4>
+            @for (entry of entriesOf(item, def.field); track entry.id; let ei = $index) {
+              <div class="mkbd-row">
+                @if (def.checkField; as checkField) {
+                  <mat-checkbox
+                    [ngModel]="entry[checkField] === true"
+                    (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                    aria-label="Concluído"
+                  />
+                }
+                <mat-form-field appearance="outline" class="mkbd-grow">
+                  <mat-label>{{ def.labelField }}</mat-label>
+                  <input
+                    matInput
+                    [ngModel]="str(entry, def.labelField)"
+                    (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                  />
+                </mat-form-field>
+                <button matIconButton type="button" (click)="removeEntry(i, def.field, ei)" aria-label="Remover item interno">✕</button>
+              </div>
+            }
+            <button matButton type="button" (click)="addEntry(i, def)">+ Item interno</button>
+          }
+
+          <div class="mkbd-row mkbd-mt">
+            <button matButton type="button" (click)="duplicateItem(i)">Duplicar</button>
+            <button matButton type="button" (click)="removeItem(i)">Remover item</button>
+          </div>
+        </mat-expansion-panel>
+      }
+    </mat-accordion>
+    <button matButton class="mkbd-mt" type="button" (click)="addItem()">+ Adicionar item</button>
+
+    <h3 class="mkbd-h">Filtros iniciais (JSON)</h3>
+    <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
+    <mat-form-field appearance="outline" class="mkbd-full">
+      <mat-label>filters</mat-label>
+      <textarea matInput rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+      @if (filtersError(); as err) {
+        <mat-hint class="mkbd-error">{{ err }}</mat-hint>
+      }
+    </mat-form-field>
+  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-h:first-child{margin-top:0}.mkbd-h4{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}.mkbd-mt{margin-top:10px}.mkbd-slim{width:180px}.mkbd-grow{flex:1;min-width:180px}.mkbd-full{width:100%}.mkbd-panel{border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px!important;margin-bottom:6px}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7$1.MatExpansionPanelDescription, selector: "mat-panel-description" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbDataEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-data-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatExpansionModule,
+                    ], template: `
+    <h3 class="mkbd-h">Itens ({{ items().length }})</h3>
+    <mat-accordion displayMode="flat" [multi]="false">
+      @for (item of items(); track item.id; let i = $index) {
+        <mat-expansion-panel class="mat-elevation-z0 mkbd-panel">
+          <mat-expansion-panel-header>
+            <mat-panel-title>{{ label(item) }}</mat-panel-title>
+            <mat-panel-description>{{ position(item) }}</mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <div class="mkbd-row">
+            <mat-form-field appearance="outline" class="mkbd-slim">
+              <mat-label>Id</mat-label>
+              <input matInput [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+            </mat-form-field>
+            @if (columnIds().length) {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Coluna ({{ columnField() }})</mat-label>
+                <mat-select
+                  [ngModel]="str(item, columnField())"
+                  (ngModelChange)="setItemProp(i, columnField(), $event)"
+                >
+                  @for (id of columnIds(); track id) {
+                    <mat-option [value]="id">{{ id }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            } @else {
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Coluna ({{ columnField() }})</mat-label>
+                <input matInput [ngModel]="str(item, columnField())" (ngModelChange)="setItemProp(i, columnField(), $event)" />
+              </mat-form-field>
+            }
+            @if (hasLanes()) {
+              @if (laneIds().length) {
+                <mat-form-field appearance="outline" class="mkbd-slim">
+                  <mat-label>Lane ({{ laneField() }})</mat-label>
+                  <mat-select [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)">
+                    @for (id of laneIds(); track id) {
+                      <mat-option [value]="id">{{ id }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              } @else {
+                <mat-form-field appearance="outline" class="mkbd-slim">
+                  <mat-label>Lane ({{ laneField() }})</mat-label>
+                  <input matInput [ngModel]="str(item, laneField())" (ngModelChange)="setItemProp(i, laneField(), $event)" />
+                </mat-form-field>
+              }
+            }
+          </div>
+
+          <h4 class="mkbd-h4">Campos</h4>
+          @for (key of freeFields(item); track key) {
+            <div class="mkbd-row">
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Campo</mat-label>
+                <input matInput [ngModel]="key" (change)="renameField(i, key, $event)" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="mkbd-grow">
+                <mat-label>Valor</mat-label>
+                <input matInput [ngModel]="display(item, key)" (ngModelChange)="setItemProp(i, key, coerceValue($event))" />
+              </mat-form-field>
+              <button matIconButton type="button" (click)="removeField(i, key)" aria-label="Remover campo">✕</button>
+            </div>
+          }
+          <button matButton type="button" (click)="addField(i)">+ Campo</button>
+
+          @for (def of entryDefs(); track def.field) {
+            <h4 class="mkbd-h4">Itens internos — {{ def.field }}</h4>
+            @for (entry of entriesOf(item, def.field); track entry.id; let ei = $index) {
+              <div class="mkbd-row">
+                @if (def.checkField; as checkField) {
+                  <mat-checkbox
+                    [ngModel]="entry[checkField] === true"
+                    (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                    aria-label="Concluído"
+                  />
+                }
+                <mat-form-field appearance="outline" class="mkbd-grow">
+                  <mat-label>{{ def.labelField }}</mat-label>
+                  <input
+                    matInput
+                    [ngModel]="str(entry, def.labelField)"
+                    (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                  />
+                </mat-form-field>
+                <button matIconButton type="button" (click)="removeEntry(i, def.field, ei)" aria-label="Remover item interno">✕</button>
+              </div>
+            }
+            <button matButton type="button" (click)="addEntry(i, def)">+ Item interno</button>
+          }
+
+          <div class="mkbd-row mkbd-mt">
+            <button matButton type="button" (click)="duplicateItem(i)">Duplicar</button>
+            <button matButton type="button" (click)="removeItem(i)">Remover item</button>
+          </div>
+        </mat-expansion-panel>
+      }
+    </mat-accordion>
+    <button matButton class="mkbd-mt" type="button" (click)="addItem()">+ Adicionar item</button>
+
+    <h3 class="mkbd-h">Filtros iniciais (JSON)</h3>
+    <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
+    <mat-form-field appearance="outline" class="mkbd-full">
+      <mat-label>filters</mat-label>
+      <textarea matInput rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+      @if (filtersError(); as err) {
+        <mat-hint class="mkbd-error">{{ err }}</mat-hint>
+      }
+    </mat-form-field>
+  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-h:first-child{margin-top:0}.mkbd-h4{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--mkb-muted, #6f6a7c)}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}.mkbd-mt{margin-top:10px}.mkbd-slim{width:180px}.mkbd-grow{flex:1;min-width:180px}.mkbd-full{width:100%}.mkbd-panel{border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px!important;margin-bottom:6px}.mkbd-error{color:var(--mkb-danger, #b3261e)}\n"] }]
+        }] });
+
+/**
+ * Editor do PIPELINE: eixos (colunas/lanes — estáticos ou derivados),
+ * regras de transição/nomeadas e ordenação. Todos os recursos flexíveis
+ * do BoardConfig fora do cartão.
+ */
+class MkbPipelineEditor {
+    store = inject(DesignerStore);
+    config = this.store.config;
+    columnIds() {
+        return (this.store.columnsAxis().groups ?? []).map((g) => g.id);
+    }
+    // ---- eixos -----------------------------------------------------------------
+    toggleLanes(enabled) {
+        this.store.update((d) => {
+            if (enabled) {
+                d.lanes = { groups: [{ id: 'lane-1', title: 'Lane 1' }] };
+            }
+            else {
+                delete d.lanes;
+            }
+        });
+    }
+    setAxisMode(key, mode) {
+        this.store.update((d) => {
+            const axis = this.draftAxis(d, key);
+            if (mode === 'derived') {
+                delete axis.groups;
+                delete axis.reorderable;
+                axis.field ||= key === 'columns' ? 'column' : 'lane';
+            }
+            else {
+                axis.groups ??= [{ id: 'grupo-1', title: 'Grupo 1' }];
+            }
+        });
+    }
+    setAxisProp(key, prop, value) {
+        this.store.update((d) => {
+            const axis = this.draftAxis(d, key);
+            if (value === undefined)
+                delete axis[prop];
+            else
+                axis[prop] = value;
+        });
+    }
+    setGroup(key, index, prop, value) {
+        this.store.update((d) => {
+            const group = this.draftAxis(d, key).groups?.[index];
+            if (!group)
+                return;
+            if (value === undefined)
+                delete group[prop];
+            else
+                group[prop] = value;
+        });
+    }
+    groupColor(group) {
+        const c = group.meta?.['color'];
+        return typeof c === 'string' ? c : '#efedf3';
+    }
+    setGroupColor(key, index, color) {
+        this.store.update((d) => {
+            const group = this.draftAxis(d, key).groups?.[index];
+            if (!group)
+                return;
+            group.meta = { ...(group.meta ?? {}), color };
+        });
+    }
+    addGroup(key) {
+        this.store.update((d) => {
+            const groups = this.draftAxis(d, key).groups;
+            groups?.push({ id: `grupo-${(groups.length + 1)}` });
+        });
+    }
+    removeGroup(key, index) {
+        this.store.update((d) => this.draftAxis(d, key).groups?.splice(index, 1));
+    }
+    moveGroup(key, index, delta) {
+        this.store.update((d) => {
+            const groups = this.draftAxis(d, key).groups;
+            if (!groups)
+                return;
+            const target = index + delta;
+            if (target < 0 || target >= groups.length)
+                return;
+            const [g] = groups.splice(index, 1);
+            groups.splice(target, 0, g);
+        });
+    }
+    draftAxis(d, key) {
+        if (key === 'lanes') {
+            d.lanes ??= {};
+            if (Array.isArray(d.lanes))
+                d.lanes = { groups: d.lanes };
+            return d.lanes;
+        }
+        if (Array.isArray(d.columns))
+            d.columns = { groups: d.columns };
+        return d.columns;
+    }
+    // ---- regras ----------------------------------------------------------------
+    transitions() {
+        return this.config().rules?.transitions ?? [];
+    }
+    fromOf(t) {
+        return typeof t.from === 'string' ? t.from : Array.isArray(t.from) ? (t.from[0] ?? '*') : '*';
+    }
+    toOf(t) {
+        return typeof t.to === 'string' ? [t.to] : (t.to ?? []);
+    }
+    addTransition() {
+        this.store.update((d) => {
+            d.rules ??= {};
+            d.rules.transitions ??= [];
+            d.rules.transitions.push({});
+        });
+    }
+    removeTransition(index) {
+        this.store.update((d) => {
+            d.rules?.transitions?.splice(index, 1);
+            if (d.rules?.transitions?.length === 0)
+                delete d.rules.transitions;
+        });
+    }
+    setTransition(index, side, value) {
+        this.store.update((d) => {
+            const t = d.rules?.transitions?.[index];
+            if (!t)
+                return;
+            if (side === 'from') {
+                if (value === '*')
+                    delete t['from'];
+                else
+                    t['from'] = value;
+            }
+            else {
+                const list = value;
+                if (!list.length)
+                    delete t['to'];
+                else
+                    t['to'] = list.length === 1 ? list[0] : list;
+            }
+        });
+    }
+    namesOf(key) {
+        return (this.config().rules?.[key] ?? []).join(', ');
+    }
+    setNames(key, csv) {
+        const names = csv.split(/[\s,]+/).filter(Boolean);
+        this.store.update((d) => {
+            d.rules ??= {};
+            if (names.length)
+                d.rules[key] = names;
+            else
+                delete d.rules[key];
+        });
+    }
+    // ---- ordenação / geral -------------------------------------------------------
+    toggleSort(enabled) {
+        this.store.update((d) => {
+            if (enabled)
+                d.sort = { field: 'title', direction: 'asc' };
+            else
+                delete d.sort;
+        });
+    }
+    setSort(prop, value) {
+        this.store.update((d) => {
+            if (!d.sort)
+                return;
+            if (prop === 'field')
+                d.sort.field = value;
+            else
+                d.sort.direction = value;
+        });
+    }
+    setReadOnly(value) {
+        this.store.update((d) => {
+            if (value)
+                d.readOnly = true;
+            else
+                delete d.readOnly;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbPipelineEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbPipelineEditor, isStandalone: true, selector: "mkb-pipeline-editor", ngImport: i0, template: `
+    <!-- ======================= COLUNAS ======================= -->
+    <h3 class="mkbd-h">Colunas</h3>
+    <ng-container
+      *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
+    />
+
+    <!-- ======================= LANES ========================= -->
+    <h3 class="mkbd-h">
+      Lanes (swimlanes)
+      <mat-slide-toggle
+        [ngModel]="!!store.lanesAxis()"
+        (ngModelChange)="toggleLanes($event)"
+        aria-label="Usar lanes"
+      />
+    </h3>
+    @if (store.lanesAxis(); as lanes) {
+      <ng-container *ngTemplateOutlet="axisEditor; context: { axis: lanes, key: 'lanes' }" />
+    }
+
+    <!-- ================= EDITOR DE EIXO (template) ============ -->
+    <ng-template #axisEditor let-axis="axis" let-key="key">
+      <div class="mkbd-row">
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Modo</mat-label>
+          <mat-select
+            [ngModel]="axis.groups ? 'static' : 'derived'"
+            (ngModelChange)="setAxisMode(key, $event)"
+          >
+            <mat-option value="static">Estático (grupos declarados)</mat-option>
+            <mat-option value="derived">Derivado (agrupamento dinâmico)</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Campo do item</mat-label>
+          <input
+            matInput
+            [ngModel]="axis.field ?? ''"
+            (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
+            [placeholder]="key === 'columns' ? 'column' : 'lane'"
+          />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Ordenar grupos</mat-label>
+          <mat-select
+            [ngModel]="axis.sortGroups ?? ''"
+            (ngModelChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+          >
+            <mat-option value="">Ordem declarada / de aparição</mat-option>
+            <mat-option value="asc">Crescente</mat-option>
+            <mat-option value="desc">Decrescente</mat-option>
+          </mat-select>
+        </mat-form-field>
+        @if (axis.groups) {
+          <mat-slide-toggle
+            [ngModel]="axis.reorderable ?? false"
+            (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+          >
+            Reordenável (arrastar)
+          </mat-slide-toggle>
+        }
+      </div>
+
+      @if (axis.groups; as groups) {
+        <div class="mkbd-groups">
+          @for (group of groups; track $index; let i = $index) {
+            <div class="mkbd-group">
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Id</mat-label>
+                <input matInput [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Título</mat-label>
+                <input matInput [ngModel]="group.title ?? ''" (ngModelChange)="setGroup(key, i, 'title', $event || undefined)" />
+              </mat-form-field>
+              <label class="mkbd-color">
+                Cor
+                <input
+                  type="color"
+                  [ngModel]="groupColor(group)"
+                  (ngModelChange)="setGroupColor(key, i, $event)"
+                />
+              </label>
+              <mat-form-field appearance="outline" class="mkbd-tiny">
+                <mat-label>WIP</mat-label>
+                <input
+                  matInput
+                  type="number"
+                  min="0"
+                  [ngModel]="group.limit ?? null"
+                  (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
+                />
+              </mat-form-field>
+              <mat-checkbox
+                [ngModel]="group.locked ?? false"
+                (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+              >
+                Travado
+              </mat-checkbox>
+              <span class="mkbd-spacer"></span>
+              <button matIconButton type="button" (click)="moveGroup(key, i, -1)" [disabled]="i === 0" aria-label="Subir">↑</button>
+              <button matIconButton type="button" (click)="moveGroup(key, i, 1)" [disabled]="i === groups.length - 1" aria-label="Descer">↓</button>
+              <button matIconButton type="button" (click)="removeGroup(key, i)" aria-label="Remover grupo">✕</button>
+            </div>
+          }
+          <button matButton type="button" (click)="addGroup(key)">+ Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}</button>
+        </div>
+      }
+    </ng-template>
+
+    <!-- ======================= REGRAS ========================= -->
+    <h3 class="mkbd-h">Regras de transição (colunas)</h3>
+    <p class="mkbd-hint">
+      Sem linhas = qualquer transição é permitida. Com linhas, SÓ as listadas passam.
+    </p>
+    @for (t of transitions(); track $index; let i = $index) {
+      <div class="mkbd-row">
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>De</mat-label>
+          <mat-select [ngModel]="fromOf(t)" (ngModelChange)="setTransition(i, 'from', $event)">
+            <mat-option value="*">Qualquer</mat-option>
+            @for (id of columnIds(); track id) {
+              <mat-option [value]="id">{{ id }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-grow">
+          <mat-label>Para</mat-label>
+          <mat-select multiple [ngModel]="toOf(t)" (ngModelChange)="setTransition(i, 'to', $event)">
+            @for (id of columnIds(); track id) {
+              <mat-option [value]="id">{{ id }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <button matIconButton type="button" (click)="removeTransition(i)" aria-label="Remover transição">✕</button>
+      </div>
+    }
+    <button matButton type="button" (click)="addTransition()">+ Adicionar transição</button>
+
+    <div class="mkbd-row mkbd-mt">
+      <mat-form-field appearance="outline" class="mkbd-grow">
+        <mat-label>Regras nomeadas de cartão (rule:*)</mat-label>
+        <input
+          matInput
+          [ngModel]="namesOf('rules')"
+          (ngModelChange)="setNames('rules', $event)"
+          placeholder="rule:berco-livre, rule:sla"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline" class="mkbd-grow">
+        <mat-label>Regras nomeadas de itens (entryRules)</mat-label>
+        <input matInput [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </mat-form-field>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+
+    <!-- ================== ORDENAÇÃO / GERAL ==================== -->
+    <h3 class="mkbd-h">Ordenação e geral</h3>
+    <div class="mkbd-row">
+      <mat-slide-toggle [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)">
+        Ordenar itens por campo
+      </mat-slide-toggle>
+      @if (config().sort; as sort) {
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Campo</mat-label>
+          <input matInput [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Direção</mat-label>
+          <mat-select [ngModel]="sort.direction ?? 'asc'" (ngModelChange)="setSort('direction', $event)">
+            <mat-option value="asc">Crescente</mat-option>
+            <mat-option value="desc">Decrescente</mat-option>
+          </mat-select>
+        </mat-form-field>
+      }
+      <mat-slide-toggle
+        [ngModel]="config().readOnly ?? false"
+        (ngModelChange)="setReadOnly($event)"
+      >
+        Somente leitura
+      </mat-slide-toggle>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px}.mkbd-h:first-child{margin-top:0}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:10px}.mkbd-groups{display:flex;flex-direction:column;gap:4px}.mkbd-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 8px;border:1px dashed var(--mkb-border, #e3e0ea);border-radius:8px}.mkbd-slim{width:170px}.mkbd-tiny{width:90px}.mkbd-grow{flex:1;min-width:200px}.mkbd-spacer{flex:1}.mkbd-color{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbPipelineEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-pipeline-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatExpansionModule,
+                    ], template: `
+    <!-- ======================= COLUNAS ======================= -->
+    <h3 class="mkbd-h">Colunas</h3>
+    <ng-container
+      *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
+    />
+
+    <!-- ======================= LANES ========================= -->
+    <h3 class="mkbd-h">
+      Lanes (swimlanes)
+      <mat-slide-toggle
+        [ngModel]="!!store.lanesAxis()"
+        (ngModelChange)="toggleLanes($event)"
+        aria-label="Usar lanes"
+      />
+    </h3>
+    @if (store.lanesAxis(); as lanes) {
+      <ng-container *ngTemplateOutlet="axisEditor; context: { axis: lanes, key: 'lanes' }" />
+    }
+
+    <!-- ================= EDITOR DE EIXO (template) ============ -->
+    <ng-template #axisEditor let-axis="axis" let-key="key">
+      <div class="mkbd-row">
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Modo</mat-label>
+          <mat-select
+            [ngModel]="axis.groups ? 'static' : 'derived'"
+            (ngModelChange)="setAxisMode(key, $event)"
+          >
+            <mat-option value="static">Estático (grupos declarados)</mat-option>
+            <mat-option value="derived">Derivado (agrupamento dinâmico)</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Campo do item</mat-label>
+          <input
+            matInput
+            [ngModel]="axis.field ?? ''"
+            (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
+            [placeholder]="key === 'columns' ? 'column' : 'lane'"
+          />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Ordenar grupos</mat-label>
+          <mat-select
+            [ngModel]="axis.sortGroups ?? ''"
+            (ngModelChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+          >
+            <mat-option value="">Ordem declarada / de aparição</mat-option>
+            <mat-option value="asc">Crescente</mat-option>
+            <mat-option value="desc">Decrescente</mat-option>
+          </mat-select>
+        </mat-form-field>
+        @if (axis.groups) {
+          <mat-slide-toggle
+            [ngModel]="axis.reorderable ?? false"
+            (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+          >
+            Reordenável (arrastar)
+          </mat-slide-toggle>
+        }
+      </div>
+
+      @if (axis.groups; as groups) {
+        <div class="mkbd-groups">
+          @for (group of groups; track $index; let i = $index) {
+            <div class="mkbd-group">
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Id</mat-label>
+                <input matInput [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="mkbd-slim">
+                <mat-label>Título</mat-label>
+                <input matInput [ngModel]="group.title ?? ''" (ngModelChange)="setGroup(key, i, 'title', $event || undefined)" />
+              </mat-form-field>
+              <label class="mkbd-color">
+                Cor
+                <input
+                  type="color"
+                  [ngModel]="groupColor(group)"
+                  (ngModelChange)="setGroupColor(key, i, $event)"
+                />
+              </label>
+              <mat-form-field appearance="outline" class="mkbd-tiny">
+                <mat-label>WIP</mat-label>
+                <input
+                  matInput
+                  type="number"
+                  min="0"
+                  [ngModel]="group.limit ?? null"
+                  (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
+                />
+              </mat-form-field>
+              <mat-checkbox
+                [ngModel]="group.locked ?? false"
+                (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+              >
+                Travado
+              </mat-checkbox>
+              <span class="mkbd-spacer"></span>
+              <button matIconButton type="button" (click)="moveGroup(key, i, -1)" [disabled]="i === 0" aria-label="Subir">↑</button>
+              <button matIconButton type="button" (click)="moveGroup(key, i, 1)" [disabled]="i === groups.length - 1" aria-label="Descer">↓</button>
+              <button matIconButton type="button" (click)="removeGroup(key, i)" aria-label="Remover grupo">✕</button>
+            </div>
+          }
+          <button matButton type="button" (click)="addGroup(key)">+ Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}</button>
+        </div>
+      }
+    </ng-template>
+
+    <!-- ======================= REGRAS ========================= -->
+    <h3 class="mkbd-h">Regras de transição (colunas)</h3>
+    <p class="mkbd-hint">
+      Sem linhas = qualquer transição é permitida. Com linhas, SÓ as listadas passam.
+    </p>
+    @for (t of transitions(); track $index; let i = $index) {
+      <div class="mkbd-row">
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>De</mat-label>
+          <mat-select [ngModel]="fromOf(t)" (ngModelChange)="setTransition(i, 'from', $event)">
+            <mat-option value="*">Qualquer</mat-option>
+            @for (id of columnIds(); track id) {
+              <mat-option [value]="id">{{ id }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-grow">
+          <mat-label>Para</mat-label>
+          <mat-select multiple [ngModel]="toOf(t)" (ngModelChange)="setTransition(i, 'to', $event)">
+            @for (id of columnIds(); track id) {
+              <mat-option [value]="id">{{ id }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <button matIconButton type="button" (click)="removeTransition(i)" aria-label="Remover transição">✕</button>
+      </div>
+    }
+    <button matButton type="button" (click)="addTransition()">+ Adicionar transição</button>
+
+    <div class="mkbd-row mkbd-mt">
+      <mat-form-field appearance="outline" class="mkbd-grow">
+        <mat-label>Regras nomeadas de cartão (rule:*)</mat-label>
+        <input
+          matInput
+          [ngModel]="namesOf('rules')"
+          (ngModelChange)="setNames('rules', $event)"
+          placeholder="rule:berco-livre, rule:sla"
+        />
+      </mat-form-field>
+      <mat-form-field appearance="outline" class="mkbd-grow">
+        <mat-label>Regras nomeadas de itens (entryRules)</mat-label>
+        <input matInput [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </mat-form-field>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+
+    <!-- ================== ORDENAÇÃO / GERAL ==================== -->
+    <h3 class="mkbd-h">Ordenação e geral</h3>
+    <div class="mkbd-row">
+      <mat-slide-toggle [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)">
+        Ordenar itens por campo
+      </mat-slide-toggle>
+      @if (config().sort; as sort) {
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Campo</mat-label>
+          <input matInput [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mkbd-slim">
+          <mat-label>Direção</mat-label>
+          <mat-select [ngModel]="sort.direction ?? 'asc'" (ngModelChange)="setSort('direction', $event)">
+            <mat-option value="asc">Crescente</mat-option>
+            <mat-option value="desc">Decrescente</mat-option>
+          </mat-select>
+        </mat-form-field>
+      }
+      <mat-slide-toggle
+        [ngModel]="config().readOnly ?? false"
+        (ngModelChange)="setReadOnly($event)"
+      >
+        Somente leitura
+      </mat-slide-toggle>
+    </div>
+  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px}.mkbd-h:first-child{margin-top:0}.mkbd-hint{margin:0 0 8px;font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mkbd-mt{margin-top:10px}.mkbd-groups{display:flex;flex-direction:column;gap:4px}.mkbd-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 8px;border:1px dashed var(--mkb-border, #e3e0ea);border-radius:8px}.mkbd-slim{width:170px}.mkbd-tiny{width:90px}.mkbd-grow{flex:1;min-width:200px}.mkbd-spacer{flex:1}.mkbd-color{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mkb-muted, #6f6a7c)}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}\n"] }]
+        }] });
+
+/**
+ * Editor de TEMA: personaliza os tokens --mkb-* (espaçamento, cores, forma).
+ * Só os tokens ALTERADOS entram na exportação (design JSON / CSS) — o resto
+ * continua herdando os defaults de kanban-tokens.css e do DS do host.
+ */
+class MkbThemeEditor {
+    store = inject(DesignerStore);
+    groups = TOKEN_GROUPS;
+    valueOf(def) {
+        return this.store.theme()[def.token] ?? def.default;
+    }
+    isChanged(def) {
+        return def.token in this.store.theme();
+    }
+    changedCount() {
+        return Object.keys(this.store.theme()).length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbThemeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbThemeEditor, isStandalone: true, selector: "mkb-theme-editor", ngImport: i0, template: `
+    <p class="mkbd-hint">
+      Só o que você ALTERAR entra na exportação; o resto herda o default do
+      pacote e os tokens do Design System do host.
+    </p>
+    @for (group of groups; track group.label) {
+      <h3 class="mkbd-h">{{ group.label }}</h3>
+      <div class="mkbd-grid">
+        @for (def of group.tokens; track def.token) {
+          <div class="mkbd-token" [class.mkbd-token-changed]="isChanged(def)">
+            @if (def.kind === 'color') {
+              <label class="mkbd-color">
+                <input
+                  type="color"
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [attr.aria-label]="def.label"
+                />
+                <span>
+                  <strong>{{ def.label }}</strong>
+                  <code>{{ def.token }}</code>
+                </span>
+              </label>
+            } @else {
+              <mat-form-field appearance="outline" class="mkbd-field">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [placeholder]="def.default"
+                />
+                <mat-hint><code>{{ def.token }}</code></mat-hint>
+              </mat-form-field>
+            }
+            @if (isChanged(def)) {
+              <button matIconButton type="button" (click)="store.setToken(def.token, '')" [attr.aria-label]="'Restaurar ' + def.label">↺</button>
+            }
+          </div>
+        }
+      </div>
+    }
+    <div class="mkbd-actions">
+      <button matButton type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        Restaurar todos os defaults
+      </button>
+      <span class="mkbd-hint">{{ changedCount() }} token(s) alterado(s)</span>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);margin:0}.mkbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px}.mkbd-token{display:flex;align-items:center;gap:6px;border-radius:8px;padding:2px 6px}.mkbd-token-changed{background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 8%,transparent)}.mkbd-field{width:100%}.mkbd-color{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}.mkbd-color span{display:flex;flex-direction:column;font-size:12px}.mkbd-color code,.mkbd-field code{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-actions{display:flex;align-items:center;gap:12px;margin-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbThemeEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-theme-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule], template: `
+    <p class="mkbd-hint">
+      Só o que você ALTERAR entra na exportação; o resto herda o default do
+      pacote e os tokens do Design System do host.
+    </p>
+    @for (group of groups; track group.label) {
+      <h3 class="mkbd-h">{{ group.label }}</h3>
+      <div class="mkbd-grid">
+        @for (def of group.tokens; track def.token) {
+          <div class="mkbd-token" [class.mkbd-token-changed]="isChanged(def)">
+            @if (def.kind === 'color') {
+              <label class="mkbd-color">
+                <input
+                  type="color"
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [attr.aria-label]="def.label"
+                />
+                <span>
+                  <strong>{{ def.label }}</strong>
+                  <code>{{ def.token }}</code>
+                </span>
+              </label>
+            } @else {
+              <mat-form-field appearance="outline" class="mkbd-field">
+                <mat-label>{{ def.label }}</mat-label>
+                <input
+                  matInput
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [placeholder]="def.default"
+                />
+                <mat-hint><code>{{ def.token }}</code></mat-hint>
+              </mat-form-field>
+            }
+            @if (isChanged(def)) {
+              <button matIconButton type="button" (click)="store.setToken(def.token, '')" [attr.aria-label]="'Restaurar ' + def.label">↺</button>
+            }
+          </div>
+        }
+      </div>
+    }
+    <div class="mkbd-actions">
+      <button matButton type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        Restaurar todos os defaults
+      </button>
+      <span class="mkbd-hint">{{ changedCount() }} token(s) alterado(s)</span>
+    </div>
+  `, styles: [":host{display:block}.mkbd-h{margin:18px 0 8px;font-size:13px;font-weight:600}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c);margin:0}.mkbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px}.mkbd-token{display:flex;align-items:center;gap:6px;border-radius:8px;padding:2px 6px}.mkbd-token-changed{background:color-mix(in srgb,var(--mkb-accent, #5e35b1) 8%,transparent)}.mkbd-field{width:100%}.mkbd-color{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0}.mkbd-color input{width:34px;height:28px;border:none;background:none;padding:0;cursor:pointer}.mkbd-color span{display:flex;flex-direction:column;font-size:12px}.mkbd-color code,.mkbd-field code{font-size:10.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-actions{display:flex;align-items:center;gap:12px;margin-top:16px}\n"] }]
+        }] });
+
+/**
+ * Designer do Board — tela OPT-IN (entry point isolado
+ * `@mosaicoo/kanban/designer`): edita visualmente o BoardConfig (pipeline,
+ * cartão, dados, tema) com preview ao vivo e importa/exporta no formato que
+ * o kanban consome em runtime. Exige @angular/material + @angular/forms
+ * (peers opcionais do pacote — quem não usa o designer não paga por eles).
+ */
+class MosKanbanDesigner {
+    store = inject(DesignerStore);
+    /** Config inicial (senão: rascunho salvo → default). */
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** Tema inicial (tokens alterados). */
+    theme = input(null, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Registry do host — deixa o preview resolver rule:, icon: e format:. */
+    registry = input(undefined, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /** Chave do rascunho automático em localStorage; '' desliga. */
+    storageKey = input('mkb-designer-draft', ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
+    /** Config a cada mudança VÁLIDA (para persistência pelo host). */
+    configChange = output();
+    themeChange = output();
+    importErrors = signal([], ...(ngDevMode ? [{ debugName: "importErrors" }] : /* istanbul ignore next */ []));
+    initialized = false;
+    constructor() {
+        // Inicialização: input config > rascunho salvo > default do store.
+        effect(() => {
+            const config = this.config();
+            const key = untracked(this.storageKey);
+            if (!this.initialized) {
+                this.initialized = true;
+                if (config) {
+                    this.store.load(config, untracked(this.theme) ?? undefined);
+                }
+                else if (key) {
+                    this.store.loadDraft(key);
+                }
+                return;
+            }
+            if (config)
+                this.store.load(config, untracked(this.theme) ?? undefined);
+        });
+        // Registry é referência viva (funções) — passa direto ao preview.
+        effect(() => {
+            this.store.registry = this.registry();
+        });
+        // Cada mudança válida: emite pro host + salva rascunho.
+        effect(() => {
+            const config = this.store.config();
+            const theme = this.store.theme();
+            if (!untracked(this.store.validation).valid)
+                return;
+            this.configChange.emit(config);
+            this.themeChange.emit(theme);
+            const key = untracked(this.storageKey);
+            if (key)
+                this.store.saveDraft(key);
+        });
+    }
+    hasTheme() {
+        return Object.keys(this.store.theme()).length > 0;
+    }
+    // ---- import / export -----------------------------------------------------------
+    onImportFile(event) {
+        const inputEl = event.target;
+        const file = inputEl.files?.[0];
+        inputEl.value = '';
+        if (!file)
+            return;
+        file.text().then((text) => {
+            const result = this.store.import(text);
+            this.importErrors.set(result.ok ? [] : result.errors);
+        });
+    }
+    applyJson(area) {
+        const result = this.store.import(area.value);
+        this.importErrors.set(result.ok ? [] : result.errors);
+        // O textarea é editado pelo usuário, e o [value] só reescreve quando a
+        // string ligada muda — sem isto ele fica com o texto digitado (design file
+        // ou açúcar de eixo) em vez da config canônica que passou a valer.
+        if (result.ok)
+            area.value = this.store.exportConfigJson();
+    }
+    exportConfig() {
+        this.download('board-config.json', this.store.exportConfigJson(), 'application/json');
+    }
+    exportDesign() {
+        this.download('board-design.json', this.store.exportDesignJson(), 'application/json');
+    }
+    exportCss() {
+        const css = this.store.exportThemeCss();
+        if (css)
+            this.download('kanban-theme.css', css, 'text/css');
+    }
+    clearDraft() {
+        const key = this.storageKey();
+        if (key)
+            this.store.clearDraft(key);
+    }
+    download(name, content, mime) {
+        const url = URL.createObjectURL(new Blob([content], { type: mime }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = name;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    ngOnDestroy() {
+        this.store.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanDesigner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MosKanbanDesigner, isStandalone: true, selector: "mos-kanban-designer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", themeChange: "themeChange" }, providers: [DesignerStore], ngImport: i0, template: `
+    <div class="mkbd-toolbar">
+      <span class="mkbd-title">Designer do Board</span>
+      @if (store.errors().length; as count) {
+        <span class="mkbd-chip mkbd-chip-error" role="status">{{ count }} erro(s)</span>
+      } @else {
+        <span class="mkbd-chip mkbd-chip-ok" role="status">Config válida</span>
+      }
+      <span class="mkbd-spacer"></span>
+      <button matButton type="button" (click)="fileInput.click()">Importar</button>
+      <input
+        #fileInput
+        type="file"
+        accept=".json,application/json"
+        hidden
+        (change)="onImportFile($event)"
+      />
+      <button matButton type="button" (click)="exportConfig()">Exportar config</button>
+      <button matButton type="button" (click)="exportDesign()">Exportar design</button>
+      <button matButton type="button" (click)="exportCss()" [disabled]="!hasTheme()">Exportar CSS</button>
+      @if (storageKey()) {
+        <button matButton type="button" (click)="clearDraft()">Limpar rascunho</button>
+      }
+    </div>
+
+    @if (importErrors().length) {
+      <div class="mkbd-import-errors" role="alert">
+        <strong>Importação rejeitada:</strong>
+        <ul>
+          @for (issue of importErrors(); track $index) {
+            <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+          }
+        </ul>
+        <button matButton type="button" (click)="importErrors.set([])">Fechar</button>
+      </div>
+    }
+
+    <div class="mkbd-body">
+      <div class="mkbd-editors">
+        <mat-tab-group stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline"><mkb-pipeline-editor /></mat-tab>
+          <mat-tab label="Cartão"><mkb-card-editor /></mat-tab>
+          <mat-tab label="Dados"><mkb-data-editor /></mat-tab>
+          <mat-tab label="Tema"><mkb-theme-editor /></mat-tab>
+          <mat-tab label="JSON">
+            <p class="mkbd-hint">
+              BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+            </p>
+            <textarea
+              class="mkbd-json"
+              rows="24"
+              spellcheck="false"
+              [value]="store.exportConfigJson()"
+              #jsonArea
+            ></textarea>
+            <button matButton type="button" (click)="applyJson(jsonArea)">Aplicar JSON</button>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
+      <div class="mkbd-preview">
+        <div class="mkbd-preview-head">
+          <span>Preview ao vivo</span>
+          @if (store.errors().length) {
+            <span class="mkbd-hint">mostrando a última config válida</span>
+          }
+        </div>
+        @if (store.errors().length) {
+          <ul class="mkbd-issues">
+            @for (issue of store.errors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        }
+        <div class="mkbd-preview-board" [style]="store.themeStyle()">
+          <mos-kanban-board [board]="store.previewBoard()" />
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--mkb-font, inherit)}.mkbd-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea);flex-wrap:wrap}.mkbd-title{font-size:14px;font-weight:600}.mkbd-chip{font-size:11px;padding:2px 10px;border-radius:999px}.mkbd-chip-ok{background:color-mix(in srgb,var(--mkb-success, #1b6e3c) 12%,transparent);color:var(--mkb-success, #1b6e3c)}.mkbd-chip-error{background:color-mix(in srgb,var(--mkb-danger, #b3261e) 12%,transparent);color:var(--mkb-danger, #b3261e)}.mkbd-spacer{flex:1}.mkbd-import-errors{margin:8px 12px;padding:8px 12px;border:1px solid var(--mkb-danger, #b3261e);border-radius:8px;font-size:12px}.mkbd-import-errors ul{margin:4px 0;padding-left:18px}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1 1 46%;min-width:340px;overflow:auto;padding:8px 12px 24px;border-right:1px solid var(--mkb-border, #e3e0ea)}.mkbd-preview{flex:1 1 54%;min-width:0;display:flex;flex-direction:column}.mkbd-preview-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px 4px;font-size:12px;font-weight:600}.mkbd-preview-board{flex:1;min-height:0;overflow:auto}.mkbd-issues{margin:0 12px 6px;padding:6px 12px 6px 26px;font-size:12px;color:var(--mkb-danger, #b3261e);border:1px dashed var(--mkb-danger, #b3261e);border-radius:8px}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-json{width:100%;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;padding:8px;box-sizing:border-box}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkb-border, #e3e0ea)}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MosKanbanBoard, selector: "mos-kanban-board", inputs: ["board", "loading", "error", "showSearch", "itemActions"], outputs: ["itemClick", "itemMove", "moveRejected", "itemAction", "entryAction", "dragStarted", "dragEnded", "dragCanceled"] }, { kind: "component", type: MkbPipelineEditor, selector: "mkb-pipeline-editor" }, { kind: "component", type: MkbCardEditor, selector: "mkb-card-editor" }, { kind: "component", type: MkbDataEditor, selector: "mkb-data-editor" }, { kind: "component", type: MkbThemeEditor, selector: "mkb-theme-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MosKanbanDesigner, decorators: [{
+            type: Component,
+            args: [{ selector: 'mos-kanban-designer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DesignerStore], imports: [
+                        MatTabsModule,
+                        MatButtonModule,
+                        MosKanbanBoard,
+                        MkbPipelineEditor,
+                        MkbCardEditor,
+                        MkbDataEditor,
+                        MkbThemeEditor,
+                    ], template: `
+    <div class="mkbd-toolbar">
+      <span class="mkbd-title">Designer do Board</span>
+      @if (store.errors().length; as count) {
+        <span class="mkbd-chip mkbd-chip-error" role="status">{{ count }} erro(s)</span>
+      } @else {
+        <span class="mkbd-chip mkbd-chip-ok" role="status">Config válida</span>
+      }
+      <span class="mkbd-spacer"></span>
+      <button matButton type="button" (click)="fileInput.click()">Importar</button>
+      <input
+        #fileInput
+        type="file"
+        accept=".json,application/json"
+        hidden
+        (change)="onImportFile($event)"
+      />
+      <button matButton type="button" (click)="exportConfig()">Exportar config</button>
+      <button matButton type="button" (click)="exportDesign()">Exportar design</button>
+      <button matButton type="button" (click)="exportCss()" [disabled]="!hasTheme()">Exportar CSS</button>
+      @if (storageKey()) {
+        <button matButton type="button" (click)="clearDraft()">Limpar rascunho</button>
+      }
+    </div>
+
+    @if (importErrors().length) {
+      <div class="mkbd-import-errors" role="alert">
+        <strong>Importação rejeitada:</strong>
+        <ul>
+          @for (issue of importErrors(); track $index) {
+            <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+          }
+        </ul>
+        <button matButton type="button" (click)="importErrors.set([])">Fechar</button>
+      </div>
+    }
+
+    <div class="mkbd-body">
+      <div class="mkbd-editors">
+        <mat-tab-group stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline"><mkb-pipeline-editor /></mat-tab>
+          <mat-tab label="Cartão"><mkb-card-editor /></mat-tab>
+          <mat-tab label="Dados"><mkb-data-editor /></mat-tab>
+          <mat-tab label="Tema"><mkb-theme-editor /></mat-tab>
+          <mat-tab label="JSON">
+            <p class="mkbd-hint">
+              BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+            </p>
+            <textarea
+              class="mkbd-json"
+              rows="24"
+              spellcheck="false"
+              [value]="store.exportConfigJson()"
+              #jsonArea
+            ></textarea>
+            <button matButton type="button" (click)="applyJson(jsonArea)">Aplicar JSON</button>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
+      <div class="mkbd-preview">
+        <div class="mkbd-preview-head">
+          <span>Preview ao vivo</span>
+          @if (store.errors().length) {
+            <span class="mkbd-hint">mostrando a última config válida</span>
+          }
+        </div>
+        @if (store.errors().length) {
+          <ul class="mkbd-issues">
+            @for (issue of store.errors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        }
+        <div class="mkbd-preview-board" [style]="store.themeStyle()">
+          <mos-kanban-board [board]="store.previewBoard()" />
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--mkb-font, inherit)}.mkbd-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--mkb-border, #e3e0ea);flex-wrap:wrap}.mkbd-title{font-size:14px;font-weight:600}.mkbd-chip{font-size:11px;padding:2px 10px;border-radius:999px}.mkbd-chip-ok{background:color-mix(in srgb,var(--mkb-success, #1b6e3c) 12%,transparent);color:var(--mkb-success, #1b6e3c)}.mkbd-chip-error{background:color-mix(in srgb,var(--mkb-danger, #b3261e) 12%,transparent);color:var(--mkb-danger, #b3261e)}.mkbd-spacer{flex:1}.mkbd-import-errors{margin:8px 12px;padding:8px 12px;border:1px solid var(--mkb-danger, #b3261e);border-radius:8px;font-size:12px}.mkbd-import-errors ul{margin:4px 0;padding-left:18px}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1 1 46%;min-width:340px;overflow:auto;padding:8px 12px 24px;border-right:1px solid var(--mkb-border, #e3e0ea)}.mkbd-preview{flex:1 1 54%;min-width:0;display:flex;flex-direction:column}.mkbd-preview-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px 4px;font-size:12px;font-weight:600}.mkbd-preview-board{flex:1;min-height:0;overflow:auto}.mkbd-issues{margin:0 12px 6px;padding:6px 12px 6px 26px;font-size:12px;color:var(--mkb-danger, #b3261e);border:1px dashed var(--mkb-danger, #b3261e);border-radius:8px}.mkbd-hint{font-size:11.5px;color:var(--mkb-muted, #6f6a7c)}.mkbd-json{width:100%;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--mkb-border, #e3e0ea);border-radius:8px;padding:8px;box-sizing:border-box}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkb-border, #e3e0ea)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }] } });
+
+/**
+ * @mosaicoo/kanban/designer — tela OPT-IN de design do board.
+ *
+ * Entry point ISOLADO: só quem importa daqui paga por @angular/material e
+ * @angular/forms (peers opcionais). O runtime (ui/adapters/core) não depende
+ * de nada deste entry point.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BLOCK_FIELDS, BLOCK_TYPE_LABELS, DesignerStore, MosKanbanDesigner, TOKEN_GROUPS };