@mosaicoo/kanban 0.1.0 → 0.3.0

package/fesm2022/mosaicoo-kanban-designer.mjs

@@ -0,0 +1,3551 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, output, signal, viewChild, computed, Injectable, inject, effect, untracked } from '@angular/core';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$2 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MosKanbanBoard } from '@mosaicoo/kanban/ui';
+import { CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { validateConfig, createBoard } from '@mosaicoo/kanban/core';
+
+class MkbIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbIcon, isStandalone: true, selector: "mkb-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      @switch (name()) {
+        @case ('drag') {
+          <circle cx="9" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="19" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="19" r="1.6" fill="currentColor" stroke="none" />
+        }
+        @case ('up') {
+          <path d="M6 14.5 12 8.5l6 6" />
+        }
+        @case ('down') {
+          <path d="M6 9.5 12 15.5l6-6" />
+        }
+        @case ('close') {
+          <path d="M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5" />
+        }
+        @case ('add') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('upload') {
+          <path d="M12 15.5V4M8 7.5 12 3.5l4 4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('download') {
+          <path d="M12 3.5V15M8 11l4 4 4-4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('expand') {
+          <path d="M7 10l5 5 5-5" />
+        }
+        @case ('trash') {
+          <path d="M4 7h16M10 7V4.5h4V7M6.5 7l1 13h9l1-13" />
+        }
+        @case ('check-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M8.5 12.2l2.6 2.6 4.6-5.2" />
+        }
+        @case ('alert-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M12 7.6v5" />
+          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
+        }
+        @case ('eye') {
+          <path d="M2.5 12S6 6.2 12 6.2 21.5 12 21.5 12 18 17.8 12 17.8 2.5 12 2.5 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        }
+        @case ('rows') {
+          <rect x="3.2" y="4.5" width="17.6" height="15" rx="2.4" />
+          <path d="M3.2 9.5h17.6M3.2 14.5h17.6" />
+        }
+        @case ('reset') {
+          <path d="M4 11a8 8 0 1 0 2.6-5.3" />
+          <path d="M3.6 4.2v4.6h4.6" />
+        }
+      }
+    </svg>
+  `, isInline: true, styles: [":host{display:inline-flex;width:1.25em;height:1.25em;flex:none}svg{width:100%;height:100%;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      @switch (name()) {
+        @case ('drag') {
+          <circle cx="9" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="5" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="9" cy="19" r="1.6" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="19" r="1.6" fill="currentColor" stroke="none" />
+        }
+        @case ('up') {
+          <path d="M6 14.5 12 8.5l6 6" />
+        }
+        @case ('down') {
+          <path d="M6 9.5 12 15.5l6-6" />
+        }
+        @case ('close') {
+          <path d="M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5" />
+        }
+        @case ('add') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('upload') {
+          <path d="M12 15.5V4M8 7.5 12 3.5l4 4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('download') {
+          <path d="M12 3.5V15M8 11l4 4 4-4" />
+          <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+        }
+        @case ('expand') {
+          <path d="M7 10l5 5 5-5" />
+        }
+        @case ('trash') {
+          <path d="M4 7h16M10 7V4.5h4V7M6.5 7l1 13h9l1-13" />
+        }
+        @case ('check-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M8.5 12.2l2.6 2.6 4.6-5.2" />
+        }
+        @case ('alert-circle') {
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M12 7.6v5" />
+          <circle cx="12" cy="16" r="1" fill="currentColor" stroke="none" />
+        }
+        @case ('eye') {
+          <path d="M2.5 12S6 6.2 12 6.2 21.5 12 21.5 12 18 17.8 12 17.8 2.5 12 2.5 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        }
+        @case ('rows') {
+          <rect x="3.2" y="4.5" width="17.6" height="15" rx="2.4" />
+          <path d="M3.2 9.5h17.6M3.2 14.5h17.6" />
+        }
+        @case ('reset') {
+          <path d="M4 11a8 8 0 1 0 2.6-5.3" />
+          <path d="M3.6 4.2v4.6h4.6" />
+        }
+      }
+    </svg>
+  `, styles: [":host{display:inline-flex;width:1.25em;height:1.25em;flex:none}svg{width:100%;height:100%;display:block}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
+/** Comparação tolerante: sem caixa e sem acento (ex.: "icone" acha "Ícone"). */
+function normalize(text) {
+    return text
+        .toLocaleLowerCase('pt-BR')
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .trim();
+}
+/**
+ * Combobox do Designer — gatilho no padrão de campo do DS + painel de menu
+ * (§11 dos Componentes: superfície card, itens navitem, selecionado em
+ * primary-container).
+ *
+ * Existe porque `<select>` nativo abre uma lista renderizada pelo SISTEMA,
+ * que não aceita estilo: dentro do DS ela destoa por completo. Serve tanto
+ * seleção única quanto múltipla; no múltiplo o painel não fecha a cada
+ * escolha e o estado é booleano por item (nada de array em [ngModel], que
+ * realimentava a detecção de mudanças).
+ */
+class MkbCombo {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Valor único (string) ou lista de valores quando `multiple`. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Texto exibido quando nada está selecionado. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    valuesChange = output();
+    /** Acima deste número a varredura visual perde para a digitação: o painel
+     * ganha campo de filtro (convenção de ~10 itens). */
+    static SEARCH_THRESHOLD = 10;
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    search = viewChild('search', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    searchable = computed(() => this.options().length > MkbCombo.SEARCH_THRESHOLD, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Opções após o filtro — sem acento e sem caixa, como se espera em pt-BR. */
+    visible = computed(() => {
+        const query = normalize(this.filter());
+        if (!query)
+            return this.options();
+        return this.options().filter((o) => normalize(o.label).includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    onOpen() {
+        this.open.set(true);
+        // o menu foca o primeiro item; com filtro, o cursor deve ir para a busca
+        if (this.searchable()) {
+            setTimeout(() => this.search()?.nativeElement.focus());
+        }
+    }
+    onClose() {
+        this.open.set(false);
+        this.filter.set('');
+    }
+    /** Deixa passar o que o MENU precisa tratar (fechar, navegar, escolher) e
+     * segura o resto, senão o typeahead do Material rouba a digitação. */
+    onSearchKeydown(event) {
+        const passthrough = event.key === 'Escape' ||
+            event.key === 'Enter' ||
+            event.key === 'Tab' ||
+            event.key.startsWith('Arrow');
+        if (!passthrough)
+            event.stopPropagation();
+    }
+    selected = computed(() => {
+        const v = this.value();
+        if (v == null || v === '')
+            return [];
+        return typeof v === 'string' ? [v] : [...v];
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    isSelected(value) {
+        return this.selected().includes(value);
+    }
+    /** Resumo no gatilho: rótulo da opção, lista curta ou contagem. */
+    summary() {
+        const selected = this.selected();
+        if (!selected.length)
+            return '';
+        const labels = selected.map((v) => this.options().find((o) => o.value === v)?.label ?? v);
+        if (!this.multiple())
+            return labels[0] ?? '';
+        return labels.length <= 2 ? labels.join(', ') : `${labels.length} selecionados`;
+    }
+    pick(value, event) {
+        if (!this.multiple()) {
+            this.valueChange.emit(value);
+            return;
+        }
+        // múltiplo: mantém o painel aberto para várias escolhas seguidas
+        event.stopPropagation();
+        const current = this.selected();
+        this.valuesChange.emit(current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCombo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MkbCombo, isStandalone: true, selector: "mkb-combo", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="mkbd-field mkbd-field-combo" [class.mkbd-combo-open]="open()">
+      <span class="mkbd-label">{{ label() }}</span>
+      <button
+        type="button"
+        class="mkbd-combo-btn"
+        [matMenuTriggerFor]="menu"
+        (menuOpened)="onOpen()"
+        (menuClosed)="onClose()"
+        [attr.aria-label]="label()"
+      >
+        <span class="mkbd-combo-value" [class.mkbd-combo-empty]="!summary()">
+          {{ summary() || placeholder() }}
+        </span>
+        <mkb-icon name="expand" class="mkbd-combo-caret" />
+      </button>
+    </div>
+
+    <mat-menu #menu="matMenu" class="mkbd-menu">
+      @if (searchable()) {
+        <div class="mkbd-menu-search" (click)="$event.stopPropagation()">
+          <input
+            #search
+            type="text"
+            [value]="filter()"
+            (input)="filter.set($any($event.target).value)"
+            (keydown)="onSearchKeydown($event)"
+            [attr.aria-label]="'Filtrar ' + label()"
+            [placeholder]="'Filtrar ' + options().length + ' opções…'"
+          />
+          @if (filter()) {
+            <span class="mkbd-menu-count">{{ visible().length }}/{{ options().length }}</span>
+          }
+        </div>
+      }
+
+      @for (opt of visible(); track opt.value) {
+        <button
+          mat-menu-item
+          type="button"
+          [role]="multiple() ? 'menuitemcheckbox' : 'menuitemradio'"
+          [attr.aria-checked]="isSelected(opt.value)"
+          [class.mkbd-menu-item-active]="isSelected(opt.value)"
+          (click)="pick(opt.value, $event)"
+        >
+          @if (multiple()) {
+            <span
+              class="mkbd-menu-check"
+              [class.mkbd-menu-check-on]="isSelected(opt.value)"
+              aria-hidden="true"
+            ></span>
+          }
+          {{ opt.label }}
+        </button>
+      } @empty {
+        <p class="mkbd-menu-empty">Nenhuma opção corresponde a “{{ filter() }}”.</p>
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block;min-width:0}:host .mkbd-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MkbCombo, decorators: [{
+            type: Component,
+            args: [{ selector: 'mkb-combo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MkbIcon], template: `
+    <div class="mkbd-field mkbd-field-combo" [class.mkbd-combo-open]="open()">
+      <span class="mkbd-label">{{ label() }}</span>
+      <button
+        type="button"
+        class="mkbd-combo-btn"
+        [matMenuTriggerFor]="menu"
+        (menuOpened)="onOpen()"
+        (menuClosed)="onClose()"
+        [attr.aria-label]="label()"
+      >
+        <span class="mkbd-combo-value" [class.mkbd-combo-empty]="!summary()">
+          {{ summary() || placeholder() }}
+        </span>
+        <mkb-icon name="expand" class="mkbd-combo-caret" />
+      </button>
+    </div>
+
+    <mat-menu #menu="matMenu" class="mkbd-menu">
+      @if (searchable()) {
+        <div class="mkbd-menu-search" (click)="$event.stopPropagation()">
+          <input
+            #search
+            type="text"
+            [value]="filter()"
+            (input)="filter.set($any($event.target).value)"
+            (keydown)="onSearchKeydown($event)"
+            [attr.aria-label]="'Filtrar ' + label()"
+            [placeholder]="'Filtrar ' + options().length + ' opções…'"
+          />
+          @if (filter()) {
+            <span class="mkbd-menu-count">{{ visible().length }}/{{ options().length }}</span>
+          }
+        </div>
+      }
+
+      @for (opt of visible(); track opt.value) {
+        <button
+          mat-menu-item
+          type="button"
+          [role]="multiple() ? 'menuitemcheckbox' : 'menuitemradio'"
+          [attr.aria-checked]="isSelected(opt.value)"
+          [class.mkbd-menu-item-active]="isSelected(opt.value)"
+          (click)="pick(opt.value, $event)"
+        >
+          @if (multiple()) {
+            <span
+              class="mkbd-menu-check"
+              [class.mkbd-menu-check-on]="isSelected(opt.value)"
+              aria-hidden="true"
+            ></span>
+          }
+          {{ opt.label }}
+        </button>
+      } @empty {
+        <p class="mkbd-menu-empty">Nenhuma opção corresponde a “{{ filter() }}”.</p>
+      }
+    </mat-menu>
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block;min-width:0}:host .mkbd-field{width:100%}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }], search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }] } });
+
+/** 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;
+    blockTypeOptions = BLOCK_TYPE_LABELS.map((t) => ({
+        value: t.type,
+        label: t.label,
+    }));
+    toneOptions = ['', 'neutral', 'info', 'success', 'warning', 'danger'].map((tone) => ({ value: tone, label: tone || '—' }));
+    allCapabilities = ['check', 'reorder', 'move-across', 'action'];
+    /** Opções por descritor de campo — memoizadas: os defs são constantes do
+     * módulo, então a referência da lista precisa ser estável entre ciclos. */
+    selectOptionsCache = new WeakMap();
+    selectOptions(def) {
+        let options = this.selectOptionsCache.get(def);
+        if (!options) {
+            options = (def.options ?? []).map((opt) => ({ value: opt, label: opt || '—' }));
+            this.selectOptionsCache.set(def, options);
+        }
+        return options;
+    }
+    newType = signal('text', ...(ngDevMode ? [{ debugName: "newType" }] : /* istanbul ignore next */ []));
+    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);
+    }
+    /** Arraste (CDK): `parentPath` vazio = lista raiz; [i] = filhos da row i. */
+    dropBlock(parentPath, event) {
+        const { previousIndex, currentIndex } = event;
+        if (previousIndex === currentIndex)
+            return;
+        this.move([...parentPath, previousIndex], currentIndex - previousIndex);
+    }
+    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-options">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().card?.dragHandle ?? false"
+          (ngModelChange)="setDragHandle($event)"
+        />
+        Arrastar só pela alça
+      </label>
+    </div>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Blocos do cartão</span>
+      <span class="mkbd-count">{{ blocks().length }}</span>
+    </div>
+
+    <!-- Listas AUTÔNOMAS (sem cdkDropListGroup): a raiz e os filhos de cada
+         linha reordenam dentro de si. Conectar ancestral com descendente foi
+         o que quebrou o DnD do board no spike D0. -->
+    <div
+      class="mkbd-rows"
+      role="tree"
+      aria-label="Blocos do cartão"
+      cdkDropList
+      (cdkDropListDropped)="dropBlock([], $event)"
+    >
+      @for (block of blocks(); track $index; let i = $index) {
+        <!-- cdkDrag e a alça ficam AQUI, no mesmo template do cdkDropList:
+             as queries do CDK seguem a posição de DECLARAÇÃO, então um
+             ng-template com outlet não é registrado pela lista. Só o CORPO
+             da linha continua fatorado no template. -->
+        <div
+          class="mkbd-row mkbd-block"
+          role="treeitem"
+          tabindex="0"
+          cdkDrag
+          cdkDragLockAxis="y"
+          [class.mkbd-row-selected]="isSelected([i])"
+          [attr.aria-selected]="isSelected([i])"
+          (click)="select([i])"
+          (keydown.enter)="select([i])"
+        >
+          <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(block.type)">
+            <mkb-icon name="drag" />
+          </span>
+          <ng-container
+            *ngTemplateOutlet="blockBody; context: { block, path: [i], siblings: blocks().length }"
+          />
+        </div>
+
+        @if (block.type === 'row') {
+          <div
+            class="mkbd-rows mkbd-nested"
+            cdkDropList
+            (cdkDropListDropped)="dropBlock([i], $event)"
+          >
+            @for (child of rowChildren(block); track $index; let j = $index) {
+              <div
+                class="mkbd-row mkbd-block mkbd-block-child"
+                role="treeitem"
+                tabindex="0"
+                cdkDrag
+                cdkDragLockAxis="y"
+                [class.mkbd-row-selected]="isSelected([i, j])"
+                [attr.aria-selected]="isSelected([i, j])"
+                (click)="select([i, j])"
+                (keydown.enter)="select([i, j])"
+              >
+                <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(child.type)">
+                  <mkb-icon name="drag" />
+                </span>
+                <ng-container
+                  *ngTemplateOutlet="
+                    blockBody;
+                    context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+                  "
+                />
+              </div>
+            }
+          </div>
+        }
+      } @empty {
+        <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
+      }
+    </div>
+
+    <!-- Corpo da linha (sem a alça): compartilhado pela raiz e pelos filhos. -->
+    <ng-template #blockBody let-block="block" let-path="path" let-siblings="siblings">
+      <span class="mkbd-block-type">{{ typeLabel(block.type) }}</span>
+      <span class="mkbd-block-summary">{{ summary(block) }}</span>
+      <div class="mkbd-row-ctrls">
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, -1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === 0"
+          aria-label="Mover para cima"
+        >
+          <mkb-icon name="up" />
+        </button>
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, 1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === siblings - 1"
+          aria-label="Mover para baixo"
+        >
+          <mkb-icon name="down" />
+        </button>
+        <button
+          class="mkbd-icon-btn mkbd-icon-btn-danger"
+          type="button"
+          (click)="remove(path); $event.stopPropagation()"
+          aria-label="Remover bloco"
+        >
+          <mkb-icon name="close" />
+        </button>
+      </div>
+    </ng-template>
+
+    <div class="mkbd-new-block">
+      <mkb-combo
+        label="Tipo do novo bloco"
+        [options]="blockTypeOptions"
+        [value]="newType()"
+        (valueChange)="newType.set($any($event))"
+      />
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="add(false)">
+        <mkb-icon name="add" />
+        Adicionar
+      </button>
+      @if (selectedIsRow()) {
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" (click)="add(true)">
+          <mkb-icon name="add" />
+          Dentro da linha
+        </button>
+      }
+    </div>
+
+    @if (selectedBlock(); as block) {
+      <div class="mkbd-section">
+        <span class="mkbd-overline">Propriedades · {{ typeLabel(block.type) }}</span>
+      </div>
+      <div class="mkbd-stack">
+        @for (def of fieldsFor(block.type); track def.key) {
+          @switch (def.kind) {
+            @case ('text') {
+              <label class="mkbd-field">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                  [placeholder]="def.hint ?? ''"
+                />
+              </label>
+            }
+            @case ('number') {
+              <label class="mkbd-field mkbd-field-sm">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  type="number"
+                  [ngModel]="num(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
+                />
+              </label>
+            }
+            @case ('toggle') {
+              <label class="mkbd-switch mkbd-switch-boxed">
+                <input
+                  type="checkbox"
+                  [ngModel]="bool(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
+                {{ def.label }}
+              </label>
+            }
+            @case ('select') {
+              <mkb-combo
+                [label]="def.label"
+                [options]="selectOptions(def)"
+                [value]="str(block, def.key)"
+                (valueChange)="setProp(def.key, $event || undefined)"
+              />
+            }
+            @case ('csv') {
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input [ngModel]="csv(block, def.key)" (ngModelChange)="setCsv(def.key, $event)" />
+              </label>
+            }
+            @case ('json') {
+              <label class="mkbd-field mkbd-field-area mkbd-field-full">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <textarea rows="4" [value]="json(block, def.key)" (change)="setJson(def.key, $event)"></textarea>
+              </label>
+              <p class="mkbd-hint mkbd-full" [class.mkbd-error-text]="jsonError()">
+                {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+              </p>
+            }
+            @case ('capabilities') {
+              <div class="mkbd-caps">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (cap of allCapabilities; track cap) {
+                  <label class="mkbd-check">
+                    <input
+                      type="checkbox"
+                      [ngModel]="hasCapability(block, cap)"
+                      (ngModelChange)="toggleCapability(cap, $event)"
+                    />
+                    {{ cap }}
+                  </label>
+                }
+              </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-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Campo</span>
+                      <input [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Prefixo</span>
+                      <input [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Sufixo</span>
+                      <input [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, fi)"
+                      aria-label="Remover fato"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addFact(def.key)">
+                  <mkb-icon name="add" />
+                  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-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm mkbd-field-mono">
+                      <span class="mkbd-label">Id</span>
+                      <input [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </label>
+                    <mkb-combo
+                      class="mkbd-field-sm"
+                      label="Tom"
+                      [options]="toneOptions"
+                      [value]="action.tone ?? ''"
+                      (valueChange)="setAction(def.key, ai, 'tone', $event || undefined)"
+                    />
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Só nas colunas</span>
+                      <input
+                        placeholder="col-a, col-b"
+                        [ngModel]="whenColumns(action)"
+                        (ngModelChange)="setActionWhen(def.key, ai, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, ai)"
+                      aria-label="Remover ação"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addAction(def.key)">
+                  <mkb-icon name="add" />
+                  Ação
+                </button>
+              </div>
+            }
+          }
+        }
+      </div>
+    } @else {
+      <p class="mkbd-hint">Selecione um bloco para editar as propriedades.</p>
+    }
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-block{grid-template-columns:22px auto minmax(0,1fr) auto;cursor:pointer;border-left-color:var(--mkbd-border-strong)}.mkbd-block:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-block-child{border-left-color:var(--mkbd-primary-outline)}.mkbd-nested{margin-left:26px;margin-top:3px;gap:3px}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-block.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-block.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .mkbd-block:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-block-type{font-size:12.5px;font-weight:500}.mkbd-block-summary{font:500 11.5px var(--mkbd-font-mono);color:var(--mkbd-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-new-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.mkbd-new-block .mkbd-field{width:230px}.mkbd-new-block .mkbd-field>.mkbd-label{background:var(--mkbd-canvas)}.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:8px}.mkbd-subrow{flex-wrap:wrap}.mkbd-caps-label{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-full{flex:1 0 100%;margin:0}.mkbd-error-text{color:var(--mkbd-error)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], 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, CdkDropList, CdkDrag, CdkDragHandle, MkbCombo, MkbIcon], template: `
+    <div class="mkbd-options">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().card?.dragHandle ?? false"
+          (ngModelChange)="setDragHandle($event)"
+        />
+        Arrastar só pela alça
+      </label>
+    </div>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Blocos do cartão</span>
+      <span class="mkbd-count">{{ blocks().length }}</span>
+    </div>
+
+    <!-- Listas AUTÔNOMAS (sem cdkDropListGroup): a raiz e os filhos de cada
+         linha reordenam dentro de si. Conectar ancestral com descendente foi
+         o que quebrou o DnD do board no spike D0. -->
+    <div
+      class="mkbd-rows"
+      role="tree"
+      aria-label="Blocos do cartão"
+      cdkDropList
+      (cdkDropListDropped)="dropBlock([], $event)"
+    >
+      @for (block of blocks(); track $index; let i = $index) {
+        <!-- cdkDrag e a alça ficam AQUI, no mesmo template do cdkDropList:
+             as queries do CDK seguem a posição de DECLARAÇÃO, então um
+             ng-template com outlet não é registrado pela lista. Só o CORPO
+             da linha continua fatorado no template. -->
+        <div
+          class="mkbd-row mkbd-block"
+          role="treeitem"
+          tabindex="0"
+          cdkDrag
+          cdkDragLockAxis="y"
+          [class.mkbd-row-selected]="isSelected([i])"
+          [attr.aria-selected]="isSelected([i])"
+          (click)="select([i])"
+          (keydown.enter)="select([i])"
+        >
+          <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(block.type)">
+            <mkb-icon name="drag" />
+          </span>
+          <ng-container
+            *ngTemplateOutlet="blockBody; context: { block, path: [i], siblings: blocks().length }"
+          />
+        </div>
+
+        @if (block.type === 'row') {
+          <div
+            class="mkbd-rows mkbd-nested"
+            cdkDropList
+            (cdkDropListDropped)="dropBlock([i], $event)"
+          >
+            @for (child of rowChildren(block); track $index; let j = $index) {
+              <div
+                class="mkbd-row mkbd-block mkbd-block-child"
+                role="treeitem"
+                tabindex="0"
+                cdkDrag
+                cdkDragLockAxis="y"
+                [class.mkbd-row-selected]="isSelected([i, j])"
+                [attr.aria-selected]="isSelected([i, j])"
+                (click)="select([i, j])"
+                (keydown.enter)="select([i, j])"
+              >
+                <span class="mkbd-handle" cdkDragHandle [attr.aria-label]="'Arrastar bloco ' + typeLabel(child.type)">
+                  <mkb-icon name="drag" />
+                </span>
+                <ng-container
+                  *ngTemplateOutlet="
+                    blockBody;
+                    context: { block: child, path: [i, j], siblings: rowChildren(block).length }
+                  "
+                />
+              </div>
+            }
+          </div>
+        }
+      } @empty {
+        <p class="mkbd-hint">Nenhum bloco — o cartão renderiza vazio. Adicione abaixo.</p>
+      }
+    </div>
+
+    <!-- Corpo da linha (sem a alça): compartilhado pela raiz e pelos filhos. -->
+    <ng-template #blockBody let-block="block" let-path="path" let-siblings="siblings">
+      <span class="mkbd-block-type">{{ typeLabel(block.type) }}</span>
+      <span class="mkbd-block-summary">{{ summary(block) }}</span>
+      <div class="mkbd-row-ctrls">
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, -1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === 0"
+          aria-label="Mover para cima"
+        >
+          <mkb-icon name="up" />
+        </button>
+        <button
+          class="mkbd-icon-btn"
+          type="button"
+          (click)="move(path, 1); $event.stopPropagation()"
+          [disabled]="path[path.length - 1] === siblings - 1"
+          aria-label="Mover para baixo"
+        >
+          <mkb-icon name="down" />
+        </button>
+        <button
+          class="mkbd-icon-btn mkbd-icon-btn-danger"
+          type="button"
+          (click)="remove(path); $event.stopPropagation()"
+          aria-label="Remover bloco"
+        >
+          <mkb-icon name="close" />
+        </button>
+      </div>
+    </ng-template>
+
+    <div class="mkbd-new-block">
+      <mkb-combo
+        label="Tipo do novo bloco"
+        [options]="blockTypeOptions"
+        [value]="newType()"
+        (valueChange)="newType.set($any($event))"
+      />
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="add(false)">
+        <mkb-icon name="add" />
+        Adicionar
+      </button>
+      @if (selectedIsRow()) {
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" (click)="add(true)">
+          <mkb-icon name="add" />
+          Dentro da linha
+        </button>
+      }
+    </div>
+
+    @if (selectedBlock(); as block) {
+      <div class="mkbd-section">
+        <span class="mkbd-overline">Propriedades · {{ typeLabel(block.type) }}</span>
+      </div>
+      <div class="mkbd-stack">
+        @for (def of fieldsFor(block.type); track def.key) {
+          @switch (def.kind) {
+            @case ('text') {
+              <label class="mkbd-field">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  [ngModel]="str(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                  [placeholder]="def.hint ?? ''"
+                />
+              </label>
+            }
+            @case ('number') {
+              <label class="mkbd-field mkbd-field-sm">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  type="number"
+                  [ngModel]="num(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event === null || $event === '' ? undefined : +$event)"
+                />
+              </label>
+            }
+            @case ('toggle') {
+              <label class="mkbd-switch mkbd-switch-boxed">
+                <input
+                  type="checkbox"
+                  [ngModel]="bool(block, def.key)"
+                  (ngModelChange)="setProp(def.key, $event || undefined)"
+                />
+                {{ def.label }}
+              </label>
+            }
+            @case ('select') {
+              <mkb-combo
+                [label]="def.label"
+                [options]="selectOptions(def)"
+                [value]="str(block, def.key)"
+                (valueChange)="setProp(def.key, $event || undefined)"
+              />
+            }
+            @case ('csv') {
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input [ngModel]="csv(block, def.key)" (ngModelChange)="setCsv(def.key, $event)" />
+              </label>
+            }
+            @case ('json') {
+              <label class="mkbd-field mkbd-field-area mkbd-field-full">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <textarea rows="4" [value]="json(block, def.key)" (change)="setJson(def.key, $event)"></textarea>
+              </label>
+              <p class="mkbd-hint mkbd-full" [class.mkbd-error-text]="jsonError()">
+                {{ jsonError() || def.hint || 'Objeto JSON; vazio remove.' }}
+              </p>
+            }
+            @case ('capabilities') {
+              <div class="mkbd-caps">
+                <span class="mkbd-caps-label">{{ def.label }}</span>
+                @for (cap of allCapabilities; track cap) {
+                  <label class="mkbd-check">
+                    <input
+                      type="checkbox"
+                      [ngModel]="hasCapability(block, cap)"
+                      (ngModelChange)="toggleCapability(cap, $event)"
+                    />
+                    {{ cap }}
+                  </label>
+                }
+              </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-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Campo</span>
+                      <input [ngModel]="fact.field" (ngModelChange)="setFact(fi, 'field', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="fact.icon ?? ''" (ngModelChange)="setFact(fi, 'icon', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="fact.label ?? ''" (ngModelChange)="setFact(fi, 'label', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Prefixo</span>
+                      <input [ngModel]="fact.prefix ?? ''" (ngModelChange)="setFact(fi, 'prefix', $event || undefined)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Sufixo</span>
+                      <input [ngModel]="fact.suffix ?? ''" (ngModelChange)="setFact(fi, 'suffix', $event || undefined)" />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, fi)"
+                      aria-label="Remover fato"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addFact(def.key)">
+                  <mkb-icon name="add" />
+                  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-stack mkbd-subrow">
+                    <label class="mkbd-field mkbd-field-sm mkbd-field-mono">
+                      <span class="mkbd-label">Id</span>
+                      <input [ngModel]="action.id" (ngModelChange)="setAction(def.key, ai, 'id', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Rótulo</span>
+                      <input [ngModel]="action.label" (ngModelChange)="setAction(def.key, ai, 'label', $event)" />
+                    </label>
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Ícone</span>
+                      <input [ngModel]="action.icon ?? ''" (ngModelChange)="setAction(def.key, ai, 'icon', $event || undefined)" />
+                    </label>
+                    <mkb-combo
+                      class="mkbd-field-sm"
+                      label="Tom"
+                      [options]="toneOptions"
+                      [value]="action.tone ?? ''"
+                      (valueChange)="setAction(def.key, ai, 'tone', $event || undefined)"
+                    />
+                    <label class="mkbd-field mkbd-field-sm">
+                      <span class="mkbd-label">Só nas colunas</span>
+                      <input
+                        placeholder="col-a, col-b"
+                        [ngModel]="whenColumns(action)"
+                        (ngModelChange)="setActionWhen(def.key, ai, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeListItem(def.key, ai)"
+                      aria-label="Remover ação"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addAction(def.key)">
+                  <mkb-icon name="add" />
+                  Ação
+                </button>
+              </div>
+            }
+          }
+        }
+      </div>
+    } @else {
+      <p class="mkbd-hint">Selecione um bloco para editar as propriedades.</p>
+    }
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-block{grid-template-columns:22px auto minmax(0,1fr) auto;cursor:pointer;border-left-color:var(--mkbd-border-strong)}.mkbd-block:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-block-child{border-left-color:var(--mkbd-primary-outline)}.mkbd-nested{margin-left:26px;margin-top:3px;gap:3px}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-block.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-block.cdk-drag-placeholder{opacity:.35}.cdk-drop-list-dragging .mkbd-block:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-block-type{font-size:12.5px;font-weight:500}.mkbd-block-summary{font:500 11.5px var(--mkbd-font-mono);color:var(--mkbd-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-new-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.mkbd-new-block .mkbd-field{width:230px}.mkbd-new-block .mkbd-field>.mkbd-label{background:var(--mkbd-canvas)}.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:8px}.mkbd-subrow{flex-wrap:wrap}.mkbd-caps-label{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-full{flex:1 0 100%;margin:0}.mkbd-error-text{color:var(--mkbd-error)}\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 */ []));
+    /** Índice do item aberto (acordeão de um por vez). */
+    expanded = signal(null, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    toggle(index) {
+        this.expanded.update((current) => (current === index ? null : index));
+    }
+    items() {
+        return this.config().items ?? [];
+    }
+    columnField() {
+        return this.store.columnsAxis().field ?? 'column';
+    }
+    laneField() {
+        return this.store.lanesAxis()?.field ?? 'lane';
+    }
+    hasLanes() {
+        return !!this.store.lanesAxis();
+    }
+    /** Opções derivadas da config — computed, para a referência ser estável. */
+    columnOptions = computed(() => (this.store.columnsAxis().groups ?? []).map((g) => ({
+        value: g.id,
+        label: g.title ? `${g.id} · ${g.title}` : g.id,
+    })), ...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
+    laneOptions = computed(() => (this.store.lanesAxis()?.groups ?? []).map((g) => ({
+        value: g.id,
+        label: g.title ? `${g.id} · ${g.title}` : g.id,
+    })), ...(ngDevMode ? [{ debugName: "laneOptions" }] : /* istanbul ignore next */ []));
+    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);
+        });
+        this.expanded.set(this.items().length - 1);
+    }
+    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));
+        this.expanded.set(null);
+    }
+    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: `
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Itens</span>
+      <span class="mkbd-count">{{ items().length }}</span>
+    </div>
+
+    <div class="mkbd-rows">
+      @for (item of items(); track $index; let i = $index) {
+        <div class="mkbd-row mkbd-item" [class.mkbd-row-selected]="expanded() === i">
+          <div class="mkbd-item-head">
+            <button
+              class="mkbd-item-toggle"
+              type="button"
+              [attr.aria-expanded]="expanded() === i"
+              (click)="toggle(i)"
+            >
+              <mkb-icon [name]="expanded() === i ? 'down' : 'expand'" />
+              <span class="mkbd-item-title">{{ label(item) }}</span>
+              <span class="mkbd-item-where">{{ position(item) }}</span>
+            </button>
+            <button class="mkbd-icon-btn" type="button" (click)="duplicateItem(i)" aria-label="Duplicar item">
+              <mkb-icon name="add" />
+            </button>
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeItem(i)"
+              aria-label="Remover item"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+
+          @if (expanded() === i) {
+            <div class="mkbd-item-body">
+              <div class="mkbd-stack">
+                <label class="mkbd-field mkbd-field-mono">
+                  <span class="mkbd-label">Id</span>
+                  <input [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+                </label>
+
+                @if (columnOptions().length) {
+                  <mkb-combo
+                    [label]="'Coluna (' + columnField() + ')'"
+                    [options]="columnOptions()"
+                    [value]="str(item, columnField())"
+                    (valueChange)="setItemProp(i, columnField(), $event)"
+                  />
+                } @else {
+                  <label class="mkbd-field">
+                    <span class="mkbd-label">Coluna ({{ columnField() }})</span>
+                    <input
+                      [ngModel]="str(item, columnField())"
+                      (ngModelChange)="setItemProp(i, columnField(), $event)"
+                    />
+                  </label>
+                }
+
+                @if (hasLanes()) {
+                  @if (laneOptions().length) {
+                    <mkb-combo
+                      [label]="'Lane (' + laneField() + ')'"
+                      [options]="laneOptions()"
+                      [value]="str(item, laneField())"
+                      (valueChange)="setItemProp(i, laneField(), $event)"
+                    />
+                  } @else {
+                    <label class="mkbd-field">
+                      <span class="mkbd-label">Lane ({{ laneField() }})</span>
+                      <input
+                        [ngModel]="str(item, laneField())"
+                        (ngModelChange)="setItemProp(i, laneField(), $event)"
+                      />
+                    </label>
+                  }
+                }
+              </div>
+
+              <div class="mkbd-subsection">
+                <span class="mkbd-overline">Campos</span>
+              </div>
+              @for (key of freeFields(item); track key) {
+                <div class="mkbd-stack mkbd-field-row">
+                  <label class="mkbd-field mkbd-field-mono mkbd-field-sm">
+                    <span class="mkbd-label">Campo</span>
+                    <input [ngModel]="key" (change)="renameField(i, key, $event)" />
+                  </label>
+                  <label class="mkbd-field mkbd-field-grow">
+                    <span class="mkbd-label">Valor</span>
+                    <input
+                      [ngModel]="display(item, key)"
+                      (ngModelChange)="setItemProp(i, key, coerceValue($event))"
+                    />
+                  </label>
+                  <button
+                    class="mkbd-icon-btn mkbd-icon-btn-danger"
+                    type="button"
+                    (click)="removeField(i, key)"
+                    aria-label="Remover campo"
+                  >
+                    <mkb-icon name="close" />
+                  </button>
+                </div>
+              }
+              <button class="mkbd-add mkbd-add-sm" type="button" (click)="addField(i)">
+                <mkb-icon name="add" />
+                Campo
+              </button>
+
+              @for (def of entryDefs(); track def.field) {
+                <div class="mkbd-subsection">
+                  <span class="mkbd-overline">Itens internos · {{ def.field }}</span>
+                </div>
+                @for (entry of entriesOf(item, def.field); track $index; let ei = $index) {
+                  <div class="mkbd-stack mkbd-field-row">
+                    @if (def.checkField; as checkField) {
+                      <label class="mkbd-check">
+                        <input
+                          type="checkbox"
+                          [ngModel]="entry[checkField] === true"
+                          (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                        />
+                        Feito
+                      </label>
+                    }
+                    <label class="mkbd-field mkbd-field-grow">
+                      <span class="mkbd-label">{{ def.labelField }}</span>
+                      <input
+                        [ngModel]="str(entry, def.labelField)"
+                        (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeEntry(i, def.field, ei)"
+                      aria-label="Remover item interno"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addEntry(i, def)">
+                  <mkb-icon name="add" />
+                  Item interno
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <button class="mkbd-add" type="button" (click)="addItem()">
+      <mkb-icon name="add" />
+      Adicionar item
+    </button>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Filtros iniciais</span>
+    </div>
+    <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
+    <label class="mkbd-field mkbd-field-area mkbd-field-full">
+      <span class="mkbd-label">filters (JSON)</span>
+      <textarea rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+    </label>
+    @if (filtersError(); as err) {
+      <p class="mkbd-error-text">{{ err }}</p>
+    }
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-item{display:block;padding:0;border-left-color:var(--mkbd-border-strong)}.mkbd-item-head{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 4px}.mkbd-item-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:none;border-radius:var(--mkbd-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.mkbd-item-toggle:hover{background:var(--mkbd-panel-3)}.mkbd-item-toggle:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-item-toggle>mkb-icon{font-size:18px;color:var(--mkbd-muted)}.mkbd-item-title{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-item-where{margin-left:auto;font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted);background:var(--mkbd-panel-3);padding:2px 8px;border-radius:var(--mkbd-radius-pill);white-space:nowrap}.mkbd-item-body{padding:4px 12px 14px;border-top:1px solid var(--mkbd-border-soft)}.mkbd-item-body .mkbd-field>.mkbd-label{background:var(--mkbd-panel)}.mkbd-subsection{margin:16px 0 10px}.mkbd-field-row{margin-bottom:10px;flex-wrap:nowrap}.mkbd-add-sm{height:34px;margin-top:0;font-size:12px}.mkbd-error-text{margin:6px 0 0;font-size:11.5px;color:var(--mkbd-error)}.mkbd-field-full{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], 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, MkbCombo, MkbIcon], template: `
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Itens</span>
+      <span class="mkbd-count">{{ items().length }}</span>
+    </div>
+
+    <div class="mkbd-rows">
+      @for (item of items(); track $index; let i = $index) {
+        <div class="mkbd-row mkbd-item" [class.mkbd-row-selected]="expanded() === i">
+          <div class="mkbd-item-head">
+            <button
+              class="mkbd-item-toggle"
+              type="button"
+              [attr.aria-expanded]="expanded() === i"
+              (click)="toggle(i)"
+            >
+              <mkb-icon [name]="expanded() === i ? 'down' : 'expand'" />
+              <span class="mkbd-item-title">{{ label(item) }}</span>
+              <span class="mkbd-item-where">{{ position(item) }}</span>
+            </button>
+            <button class="mkbd-icon-btn" type="button" (click)="duplicateItem(i)" aria-label="Duplicar item">
+              <mkb-icon name="add" />
+            </button>
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeItem(i)"
+              aria-label="Remover item"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+
+          @if (expanded() === i) {
+            <div class="mkbd-item-body">
+              <div class="mkbd-stack">
+                <label class="mkbd-field mkbd-field-mono">
+                  <span class="mkbd-label">Id</span>
+                  <input [ngModel]="item.id" (ngModelChange)="setItemProp(i, 'id', $event)" />
+                </label>
+
+                @if (columnOptions().length) {
+                  <mkb-combo
+                    [label]="'Coluna (' + columnField() + ')'"
+                    [options]="columnOptions()"
+                    [value]="str(item, columnField())"
+                    (valueChange)="setItemProp(i, columnField(), $event)"
+                  />
+                } @else {
+                  <label class="mkbd-field">
+                    <span class="mkbd-label">Coluna ({{ columnField() }})</span>
+                    <input
+                      [ngModel]="str(item, columnField())"
+                      (ngModelChange)="setItemProp(i, columnField(), $event)"
+                    />
+                  </label>
+                }
+
+                @if (hasLanes()) {
+                  @if (laneOptions().length) {
+                    <mkb-combo
+                      [label]="'Lane (' + laneField() + ')'"
+                      [options]="laneOptions()"
+                      [value]="str(item, laneField())"
+                      (valueChange)="setItemProp(i, laneField(), $event)"
+                    />
+                  } @else {
+                    <label class="mkbd-field">
+                      <span class="mkbd-label">Lane ({{ laneField() }})</span>
+                      <input
+                        [ngModel]="str(item, laneField())"
+                        (ngModelChange)="setItemProp(i, laneField(), $event)"
+                      />
+                    </label>
+                  }
+                }
+              </div>
+
+              <div class="mkbd-subsection">
+                <span class="mkbd-overline">Campos</span>
+              </div>
+              @for (key of freeFields(item); track key) {
+                <div class="mkbd-stack mkbd-field-row">
+                  <label class="mkbd-field mkbd-field-mono mkbd-field-sm">
+                    <span class="mkbd-label">Campo</span>
+                    <input [ngModel]="key" (change)="renameField(i, key, $event)" />
+                  </label>
+                  <label class="mkbd-field mkbd-field-grow">
+                    <span class="mkbd-label">Valor</span>
+                    <input
+                      [ngModel]="display(item, key)"
+                      (ngModelChange)="setItemProp(i, key, coerceValue($event))"
+                    />
+                  </label>
+                  <button
+                    class="mkbd-icon-btn mkbd-icon-btn-danger"
+                    type="button"
+                    (click)="removeField(i, key)"
+                    aria-label="Remover campo"
+                  >
+                    <mkb-icon name="close" />
+                  </button>
+                </div>
+              }
+              <button class="mkbd-add mkbd-add-sm" type="button" (click)="addField(i)">
+                <mkb-icon name="add" />
+                Campo
+              </button>
+
+              @for (def of entryDefs(); track def.field) {
+                <div class="mkbd-subsection">
+                  <span class="mkbd-overline">Itens internos · {{ def.field }}</span>
+                </div>
+                @for (entry of entriesOf(item, def.field); track $index; let ei = $index) {
+                  <div class="mkbd-stack mkbd-field-row">
+                    @if (def.checkField; as checkField) {
+                      <label class="mkbd-check">
+                        <input
+                          type="checkbox"
+                          [ngModel]="entry[checkField] === true"
+                          (ngModelChange)="setEntryProp(i, def.field, ei, checkField, $event)"
+                        />
+                        Feito
+                      </label>
+                    }
+                    <label class="mkbd-field mkbd-field-grow">
+                      <span class="mkbd-label">{{ def.labelField }}</span>
+                      <input
+                        [ngModel]="str(entry, def.labelField)"
+                        (ngModelChange)="setEntryProp(i, def.field, ei, def.labelField, $event)"
+                      />
+                    </label>
+                    <button
+                      class="mkbd-icon-btn mkbd-icon-btn-danger"
+                      type="button"
+                      (click)="removeEntry(i, def.field, ei)"
+                      aria-label="Remover item interno"
+                    >
+                      <mkb-icon name="close" />
+                    </button>
+                  </div>
+                }
+                <button class="mkbd-add mkbd-add-sm" type="button" (click)="addEntry(i, def)">
+                  <mkb-icon name="add" />
+                  Item interno
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <button class="mkbd-add" type="button" (click)="addItem()">
+      <mkb-icon name="add" />
+      Adicionar item
+    </button>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Filtros iniciais</span>
+    </div>
+    <p class="mkbd-hint">Array de KanbanFilter aplicado na criação do board; vazio remove.</p>
+    <label class="mkbd-field mkbd-field-area mkbd-field-full">
+      <span class="mkbd-label">filters (JSON)</span>
+      <textarea rows="4" [value]="filtersJson()" (change)="setFilters($event)"></textarea>
+    </label>
+    @if (filtersError(); as err) {
+      <p class="mkbd-error-text">{{ err }}</p>
+    }
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-item{display:block;padding:0;border-left-color:var(--mkbd-border-strong)}.mkbd-item-head{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 4px}.mkbd-item-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:none;border-radius:var(--mkbd-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.mkbd-item-toggle:hover{background:var(--mkbd-panel-3)}.mkbd-item-toggle:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-item-toggle>mkb-icon{font-size:18px;color:var(--mkbd-muted)}.mkbd-item-title{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-item-where{margin-left:auto;font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted);background:var(--mkbd-panel-3);padding:2px 8px;border-radius:var(--mkbd-radius-pill);white-space:nowrap}.mkbd-item-body{padding:4px 12px 14px;border-top:1px solid var(--mkbd-border-soft)}.mkbd-item-body .mkbd-field>.mkbd-label{background:var(--mkbd-panel)}.mkbd-subsection{margin:16px 0 10px}.mkbd-field-row{margin-bottom:10px;flex-wrap:nowrap}.mkbd-add-sm{height:34px;margin-top:0;font-size:12px}.mkbd-error-text{margin:6px 0 0;font-size:11.5px;color:var(--mkbd-error)}.mkbd-field-full{width:100%}\n"] }]
+        }] });
+
+/**
+ * Editor do PIPELINE: eixos (colunas/lanes — estáticos ou derivados),
+ * regras de transição/nomeadas e ordenação.
+ *
+ * Visual: "linha de lista editável" do DS (§16 dos Componentes) — cada grupo
+ * é um card em grid com acento de cor, alça, campos outline e controles de
+ * ordem, como na tela 13a.
+ */
+class MkbPipelineEditor {
+    store = inject(DesignerStore);
+    config = this.store.config;
+    /** Cor default por posição — a paleta de dados do DS (--viz-*). */
+    static PALETTE = ['#6f6a7c', '#2264c4', '#9a6b00', '#2e7d32', '#c62828', '#00897b'];
+    // Opções fixas: constantes de instância (referência estável entre ciclos).
+    modeOptions = [
+        { value: 'static', label: 'Estático (grupos)' },
+        { value: 'derived', label: 'Derivado (dinâmico)' },
+    ];
+    sortGroupOptions = [
+        { value: '', label: 'Ordem declarada' },
+        { value: 'asc', label: 'Crescente' },
+        { value: 'desc', label: 'Decrescente' },
+    ];
+    directionOptions = [
+        { value: 'asc', label: 'Crescente' },
+        { value: 'desc', label: 'Decrescente' },
+    ];
+    /** Opções derivadas da config — computed, para não realocar a cada ciclo.
+     * Nas regras o rótulo é o ID puro: é ele que a transição referencia. */
+    columnOptions = computed(() => (this.store.columnsAxis().groups ?? []).map((g) => ({ value: g.id, label: g.id })), ...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
+    fromOptions = computed(() => [
+        { value: '*', label: 'Qualquer' },
+        ...this.columnOptions(),
+    ], ...(ngDevMode ? [{ debugName: "fromOptions" }] : /* istanbul ignore next */ []));
+    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;
+        });
+    }
+    /** Cor do grupo: `meta.color` do host ou a cor default da POSIÇÃO na lista
+     * (só exibição — nada é gravado na config até o usuário escolher uma cor). */
+    groupColor(group, index = 0) {
+        const color = group.meta?.['color'];
+        if (typeof color === 'string')
+            return color;
+        const palette = MkbPipelineEditor.PALETTE;
+        return palette[index % palette.length];
+    }
+    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));
+    }
+    /** Arraste (CDK) — mesma reordenação das setas ↑↓, por posição absoluta. */
+    dropGroup(key, event) {
+        const { previousIndex, currentIndex } = event;
+        if (previousIndex === currentIndex)
+            return;
+        this.moveGroup(key, previousIndex, currentIndex - previousIndex);
+    }
+    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] ?? '*') : '*';
+    }
+    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 ======================= -->
+    <ng-container
+      *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
+    />
+
+    <!-- ======================== LANES ======================== -->
+    <div class="mkbd-feature">
+      <mkb-icon name="rows" />
+      <div>
+        <div class="mkbd-feature-title">Lanes (swimlanes)</div>
+        <div class="mkbd-feature-desc">Agrupa cartões em faixas horizontais por um eixo</div>
+      </div>
+      <label class="mkbd-switch">
+        <input
+          type="checkbox"
+          [ngModel]="!!store.lanesAxis()"
+          (ngModelChange)="toggleLanes($event)"
+          aria-label="Usar lanes"
+        />
+      </label>
+    </div>
+    @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-options">
+        <mkb-combo
+          label="Modo"
+          [options]="modeOptions"
+          [value]="axis.groups ? 'static' : 'derived'"
+          (valueChange)="setAxisMode(key, $any($event))"
+        />
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo do item</span>
+          <input
+            [ngModel]="axis.field ?? ''"
+            (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
+            [placeholder]="key === 'columns' ? 'column' : 'lane'"
+          />
+        </label>
+        <mkb-combo
+          label="Ordenar grupos"
+          [options]="sortGroupOptions"
+          [value]="axis.sortGroups ?? ''"
+          (valueChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+        />
+        @if (axis.groups) {
+          <label class="mkbd-switch mkbd-switch-boxed">
+            <input
+              type="checkbox"
+              [ngModel]="axis.reorderable ?? false"
+              (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+            />
+            Reordenável
+          </label>
+        }
+      </div>
+
+      @if (axis.groups; as groups) {
+        <div class="mkbd-section">
+          <span class="mkbd-overline">{{ key === 'columns' ? 'Colunas' : 'Lanes' }}</span>
+          <span class="mkbd-count">{{ groups.length }}</span>
+        </div>
+
+        <div class="mkbd-rows" cdkDropList (cdkDropListDropped)="dropGroup(key, $event)">
+          @for (group of groups; track $index; let i = $index) {
+            <div
+              class="mkbd-row mkbd-row-group"
+              cdkDrag
+              cdkDragLockAxis="y"
+              [cdkDragPreviewClass]="'mkbd-drag-preview'"
+              [style.--mkbd-accent]="groupColor(group, i)"
+            >
+              <span
+                class="mkbd-handle"
+                cdkDragHandle
+                [attr.aria-label]="'Arrastar ' + (group.title ?? group.id)"
+              >
+                <mkb-icon name="drag" />
+              </span>
+
+              <label class="mkbd-field mkbd-field-mono">
+                <span class="mkbd-label">Id</span>
+                <input [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </label>
+
+              <label class="mkbd-field">
+                <span class="mkbd-label">Título</span>
+                <input
+                  [ngModel]="group.title ?? ''"
+                  (ngModelChange)="setGroup(key, i, 'title', $event || undefined)"
+                />
+              </label>
+
+              <label class="mkbd-swatch" [title]="'Cor de ' + (group.title ?? group.id)">
+                <input
+                  type="color"
+                  [ngModel]="groupColor(group, i)"
+                  (ngModelChange)="setGroupColor(key, i, $event)"
+                  [attr.aria-label]="'Cor de ' + (group.title ?? group.id)"
+                />
+                <span [style.background]="groupColor(group, i)"></span>
+              </label>
+
+              <label class="mkbd-field mkbd-field-optional">
+                <span class="mkbd-label">WIP</span>
+                <input
+                  type="number"
+                  min="0"
+                  placeholder="∞"
+                  [ngModel]="group.limit ?? null"
+                  (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
+                />
+              </label>
+
+              <div class="mkbd-row-ctrls">
+                <label class="mkbd-check">
+                  <input
+                    type="checkbox"
+                    [ngModel]="group.locked ?? false"
+                    (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+                  />
+                  Travado
+                </label>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, -1)"
+                  [disabled]="i === 0"
+                  aria-label="Mover para cima"
+                >
+                  <mkb-icon name="up" />
+                </button>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, 1)"
+                  [disabled]="i === groups.length - 1"
+                  aria-label="Mover para baixo"
+                >
+                  <mkb-icon name="down" />
+                </button>
+                <button
+                  class="mkbd-icon-btn mkbd-icon-btn-danger"
+                  type="button"
+                  (click)="removeGroup(key, i)"
+                  aria-label="Remover grupo"
+                >
+                  <mkb-icon name="close" />
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+
+        <button class="mkbd-add" type="button" (click)="addGroup(key)">
+          <mkb-icon name="add" />
+          Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}
+        </button>
+      }
+    </ng-template>
+
+    <!-- ======================= REGRAS ========================= -->
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras de transição</span>
+      @if (transitions().length) {
+        <span class="mkbd-count">{{ transitions().length }}</span>
+      }
+    </div>
+    <p class="mkbd-hint">
+      Sem regras = qualquer transição é permitida. Com regras, só as listadas passam.
+    </p>
+
+    @if (transitions().length) {
+      <div class="mkbd-rows">
+        @for (t of transitions(); track $index; let i = $index) {
+          <div class="mkbd-row mkbd-row-rule">
+            <mkb-combo
+              label="De"
+              [options]="fromOptions()"
+              [value]="fromOf(t)"
+              (valueChange)="setTransition(i, 'from', $event)"
+            />
+            <!-- Destino é multi-seleção: o valor vem da própria config (sem
+                 alocar array a cada ciclo, que foi o que travou a tela). -->
+            <mkb-combo
+              label="Para"
+              [multiple]="true"
+              placeholder="Qualquer"
+              [options]="columnOptions()"
+              [value]="t.to ?? null"
+              (valuesChange)="setTransition(i, 'to', $event)"
+            />
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeTransition(i)"
+              aria-label="Remover transição"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+    <button class="mkbd-btn mkbd-btn-outline mkbd-btn-block" type="button" (click)="addTransition()">
+      <mkb-icon name="add" />
+      Adicionar transição
+    </button>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras nomeadas</span>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+    <div class="mkbd-stack">
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de cartão (rule:*)</span>
+        <input
+          [ngModel]="namesOf('rules')"
+          (ngModelChange)="setNames('rules', $event)"
+          placeholder="rule:berco-livre, rule:sla"
+        />
+      </label>
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de itens (entryRules)</span>
+        <input [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </label>
+    </div>
+
+    <!-- ================== ORDENAÇÃO / GERAL ==================== -->
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Ordenação e geral</span>
+    </div>
+    <div class="mkbd-stack">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input type="checkbox" [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)" />
+        Ordenar itens por campo
+      </label>
+      @if (config().sort; as sort) {
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo</span>
+          <input [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </label>
+        <mkb-combo
+          label="Direção"
+          [options]="directionOptions"
+          [value]="sort.direction ?? 'asc'"
+          (valueChange)="setSort('direction', $event)"
+        />
+      }
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().readOnly ?? false"
+          (ngModelChange)="setReadOnly($event)"
+        />
+        Somente leitura
+      </label>
+    </div>
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-row-group{grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.3fr) 42px 76px auto}.mkbd-row-rule{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;border-left-color:var(--mkbd-border-strong)}.mkbd-btn-block{margin-top:4px}.mkbd-combo-btn{flex:1;min-width:0;height:100%;padding:0 16px 0 0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-field-combo:has(.mkbd-combo-btn:focus-visible){border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-combo-empty{color:var(--mkbd-muted)}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-row.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-row.cdk-drag-placeholder{opacity:.35}.mkbd-rows.cdk-drop-list-dragging .mkbd-row:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}@media(max-width:720px){.mkbd-row-group{grid-template-columns:22px minmax(0,1fr) 42px 76px}.mkbd-row-group .mkbd-row-ctrls{grid-column:1 / -1;justify-content:flex-end}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MkbCombo, selector: "mkb-combo", inputs: ["label", "options", "value", "multiple", "placeholder"], outputs: ["valueChange", "valuesChange"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], 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, CdkDropList, CdkDrag, CdkDragHandle, MkbCombo, MkbIcon], template: `
+    <!-- ======================= COLUNAS ======================= -->
+    <ng-container
+      *ngTemplateOutlet="axisEditor; context: { axis: store.columnsAxis(), key: 'columns' }"
+    />
+
+    <!-- ======================== LANES ======================== -->
+    <div class="mkbd-feature">
+      <mkb-icon name="rows" />
+      <div>
+        <div class="mkbd-feature-title">Lanes (swimlanes)</div>
+        <div class="mkbd-feature-desc">Agrupa cartões em faixas horizontais por um eixo</div>
+      </div>
+      <label class="mkbd-switch">
+        <input
+          type="checkbox"
+          [ngModel]="!!store.lanesAxis()"
+          (ngModelChange)="toggleLanes($event)"
+          aria-label="Usar lanes"
+        />
+      </label>
+    </div>
+    @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-options">
+        <mkb-combo
+          label="Modo"
+          [options]="modeOptions"
+          [value]="axis.groups ? 'static' : 'derived'"
+          (valueChange)="setAxisMode(key, $any($event))"
+        />
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo do item</span>
+          <input
+            [ngModel]="axis.field ?? ''"
+            (ngModelChange)="setAxisProp(key, 'field', $event || undefined)"
+            [placeholder]="key === 'columns' ? 'column' : 'lane'"
+          />
+        </label>
+        <mkb-combo
+          label="Ordenar grupos"
+          [options]="sortGroupOptions"
+          [value]="axis.sortGroups ?? ''"
+          (valueChange)="setAxisProp(key, 'sortGroups', $event || undefined)"
+        />
+        @if (axis.groups) {
+          <label class="mkbd-switch mkbd-switch-boxed">
+            <input
+              type="checkbox"
+              [ngModel]="axis.reorderable ?? false"
+              (ngModelChange)="setAxisProp(key, 'reorderable', $event || undefined)"
+            />
+            Reordenável
+          </label>
+        }
+      </div>
+
+      @if (axis.groups; as groups) {
+        <div class="mkbd-section">
+          <span class="mkbd-overline">{{ key === 'columns' ? 'Colunas' : 'Lanes' }}</span>
+          <span class="mkbd-count">{{ groups.length }}</span>
+        </div>
+
+        <div class="mkbd-rows" cdkDropList (cdkDropListDropped)="dropGroup(key, $event)">
+          @for (group of groups; track $index; let i = $index) {
+            <div
+              class="mkbd-row mkbd-row-group"
+              cdkDrag
+              cdkDragLockAxis="y"
+              [cdkDragPreviewClass]="'mkbd-drag-preview'"
+              [style.--mkbd-accent]="groupColor(group, i)"
+            >
+              <span
+                class="mkbd-handle"
+                cdkDragHandle
+                [attr.aria-label]="'Arrastar ' + (group.title ?? group.id)"
+              >
+                <mkb-icon name="drag" />
+              </span>
+
+              <label class="mkbd-field mkbd-field-mono">
+                <span class="mkbd-label">Id</span>
+                <input [ngModel]="group.id" (ngModelChange)="setGroup(key, i, 'id', $event)" />
+              </label>
+
+              <label class="mkbd-field">
+                <span class="mkbd-label">Título</span>
+                <input
+                  [ngModel]="group.title ?? ''"
+                  (ngModelChange)="setGroup(key, i, 'title', $event || undefined)"
+                />
+              </label>
+
+              <label class="mkbd-swatch" [title]="'Cor de ' + (group.title ?? group.id)">
+                <input
+                  type="color"
+                  [ngModel]="groupColor(group, i)"
+                  (ngModelChange)="setGroupColor(key, i, $event)"
+                  [attr.aria-label]="'Cor de ' + (group.title ?? group.id)"
+                />
+                <span [style.background]="groupColor(group, i)"></span>
+              </label>
+
+              <label class="mkbd-field mkbd-field-optional">
+                <span class="mkbd-label">WIP</span>
+                <input
+                  type="number"
+                  min="0"
+                  placeholder="∞"
+                  [ngModel]="group.limit ?? null"
+                  (ngModelChange)="setGroup(key, i, 'limit', $event === null || $event === '' ? undefined : +$event)"
+                />
+              </label>
+
+              <div class="mkbd-row-ctrls">
+                <label class="mkbd-check">
+                  <input
+                    type="checkbox"
+                    [ngModel]="group.locked ?? false"
+                    (ngModelChange)="setGroup(key, i, 'locked', $event || undefined)"
+                  />
+                  Travado
+                </label>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, -1)"
+                  [disabled]="i === 0"
+                  aria-label="Mover para cima"
+                >
+                  <mkb-icon name="up" />
+                </button>
+                <button
+                  class="mkbd-icon-btn"
+                  type="button"
+                  (click)="moveGroup(key, i, 1)"
+                  [disabled]="i === groups.length - 1"
+                  aria-label="Mover para baixo"
+                >
+                  <mkb-icon name="down" />
+                </button>
+                <button
+                  class="mkbd-icon-btn mkbd-icon-btn-danger"
+                  type="button"
+                  (click)="removeGroup(key, i)"
+                  aria-label="Remover grupo"
+                >
+                  <mkb-icon name="close" />
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+
+        <button class="mkbd-add" type="button" (click)="addGroup(key)">
+          <mkb-icon name="add" />
+          Adicionar {{ key === 'columns' ? 'coluna' : 'lane' }}
+        </button>
+      }
+    </ng-template>
+
+    <!-- ======================= REGRAS ========================= -->
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras de transição</span>
+      @if (transitions().length) {
+        <span class="mkbd-count">{{ transitions().length }}</span>
+      }
+    </div>
+    <p class="mkbd-hint">
+      Sem regras = qualquer transição é permitida. Com regras, só as listadas passam.
+    </p>
+
+    @if (transitions().length) {
+      <div class="mkbd-rows">
+        @for (t of transitions(); track $index; let i = $index) {
+          <div class="mkbd-row mkbd-row-rule">
+            <mkb-combo
+              label="De"
+              [options]="fromOptions()"
+              [value]="fromOf(t)"
+              (valueChange)="setTransition(i, 'from', $event)"
+            />
+            <!-- Destino é multi-seleção: o valor vem da própria config (sem
+                 alocar array a cada ciclo, que foi o que travou a tela). -->
+            <mkb-combo
+              label="Para"
+              [multiple]="true"
+              placeholder="Qualquer"
+              [options]="columnOptions()"
+              [value]="t.to ?? null"
+              (valuesChange)="setTransition(i, 'to', $event)"
+            />
+            <button
+              class="mkbd-icon-btn mkbd-icon-btn-danger"
+              type="button"
+              (click)="removeTransition(i)"
+              aria-label="Remover transição"
+            >
+              <mkb-icon name="close" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+    <button class="mkbd-btn mkbd-btn-outline mkbd-btn-block" type="button" (click)="addTransition()">
+      <mkb-icon name="add" />
+      Adicionar transição
+    </button>
+
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Regras nomeadas</span>
+    </div>
+    <p class="mkbd-hint">Os nomes referenciam código registrado pelo host no KanbanRegistry.</p>
+    <div class="mkbd-stack">
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de cartão (rule:*)</span>
+        <input
+          [ngModel]="namesOf('rules')"
+          (ngModelChange)="setNames('rules', $event)"
+          placeholder="rule:berco-livre, rule:sla"
+        />
+      </label>
+      <label class="mkbd-field mkbd-field-grow">
+        <span class="mkbd-label">Regras de itens (entryRules)</span>
+        <input [ngModel]="namesOf('entryRules')" (ngModelChange)="setNames('entryRules', $event)" />
+      </label>
+    </div>
+
+    <!-- ================== ORDENAÇÃO / GERAL ==================== -->
+    <div class="mkbd-section">
+      <span class="mkbd-overline">Ordenação e geral</span>
+    </div>
+    <div class="mkbd-stack">
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input type="checkbox" [ngModel]="!!config().sort" (ngModelChange)="toggleSort($event)" />
+        Ordenar itens por campo
+      </label>
+      @if (config().sort; as sort) {
+        <label class="mkbd-field">
+          <span class="mkbd-label">Campo</span>
+          <input [ngModel]="sort.field" (ngModelChange)="setSort('field', $event)" />
+        </label>
+        <mkb-combo
+          label="Direção"
+          [options]="directionOptions"
+          [value]="sort.direction ?? 'asc'"
+          (valueChange)="setSort('direction', $event)"
+        />
+      }
+      <label class="mkbd-switch mkbd-switch-boxed">
+        <input
+          type="checkbox"
+          [ngModel]="config().readOnly ?? false"
+          (ngModelChange)="setReadOnly($event)"
+        />
+        Somente leitura
+      </label>
+    </div>
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-row-group{grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.3fr) 42px 76px auto}.mkbd-row-rule{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;border-left-color:var(--mkbd-border-strong)}.mkbd-btn-block{margin-top:4px}.mkbd-combo-btn{flex:1;min-width:0;height:100%;padding:0 16px 0 0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-field-combo:has(.mkbd-combo-btn:focus-visible){border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-combo-empty{color:var(--mkbd-muted)}.mkbd-handle[cdkDragHandle]{cursor:grab;touch-action:none}.mkbd-row.cdk-drag-preview{box-shadow:var(--elevation-3, 0 8px 30px rgba(20, 22, 30, .14));opacity:.96}.mkbd-row.cdk-drag-placeholder{opacity:.35}.mkbd-rows.cdk-drop-list-dragging .mkbd-row:not(.cdk-drag-placeholder){transition:transform var(--mkbd-dur) var(--mkbd-ease)}@media(max-width:720px){.mkbd-row-group{grid-template-columns:22px minmax(0,1fr) 42px 76px}.mkbd-row-group .mkbd-row-ctrls{grid-column:1 / -1;justify-content:flex-end}}\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();
+    }
+    /** Quantos tokens do grupo estão alterados (0 = não mostra contador). */
+    changedIn(label) {
+        const group = this.groups.find((g) => g.label === label);
+        return group?.tokens.filter((t) => this.isChanged(t)).length ?? 0;
+    }
+    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) {
+      <div class="mkbd-section">
+        <span class="mkbd-overline">{{ group.label }}</span>
+        @if (changedIn(group.label); as n) {
+          <span class="mkbd-count">{{ n }}</span>
+        }
+      </div>
+
+      <div class="mkbd-tokens">
+        @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-swatch">
+                <input
+                  type="color"
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [attr.aria-label]="def.label"
+                />
+                <span [style.background]="valueOf(def)"></span>
+              </label>
+              <span class="mkbd-token-text">
+                <span class="mkbd-token-label">{{ def.label }}</span>
+                <code>{{ def.token }}</code>
+              </span>
+            } @else {
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [placeholder]="def.default"
+                />
+              </label>
+              <code class="mkbd-token-code">{{ def.token }}</code>
+            }
+
+            <button
+              class="mkbd-icon-btn"
+              type="button"
+              (click)="store.setToken(def.token, '')"
+              [disabled]="!isChanged(def)"
+              [attr.aria-label]="'Restaurar ' + def.label"
+            >
+              <mkb-icon name="reset" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+
+    <div class="mkbd-theme-actions">
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        <mkb-icon name="reset" />
+        Restaurar todos os defaults
+      </button>
+      <span class="mkbd-hint mkbd-theme-count">{{ changedCount() }} token(s) alterado(s)</span>
+    </div>
+  `, isInline: true, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 16px}.mkbd-token{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;border-radius:var(--mkbd-radius-md);min-width:0}.mkbd-token-changed{border-color:var(--mkbd-primary-outline);background:var(--mkbd-primary-soft)}.mkbd-token-text{display:flex;flex-direction:column;min-width:0;gap:2px}.mkbd-token-label{font-size:12.5px}.mkbd-token code,.mkbd-token-code{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mkbd-token-code{width:92px;flex:none}.mkbd-token>.mkbd-icon-btn{margin-left:auto}.mkbd-theme-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.mkbd-theme-count{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }], 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, MkbIcon], 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) {
+      <div class="mkbd-section">
+        <span class="mkbd-overline">{{ group.label }}</span>
+        @if (changedIn(group.label); as n) {
+          <span class="mkbd-count">{{ n }}</span>
+        }
+      </div>
+
+      <div class="mkbd-tokens">
+        @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-swatch">
+                <input
+                  type="color"
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [attr.aria-label]="def.label"
+                />
+                <span [style.background]="valueOf(def)"></span>
+              </label>
+              <span class="mkbd-token-text">
+                <span class="mkbd-token-label">{{ def.label }}</span>
+                <code>{{ def.token }}</code>
+              </span>
+            } @else {
+              <label class="mkbd-field mkbd-field-grow">
+                <span class="mkbd-label">{{ def.label }}</span>
+                <input
+                  [ngModel]="valueOf(def)"
+                  (ngModelChange)="store.setToken(def.token, $event)"
+                  [placeholder]="def.default"
+                />
+              </label>
+              <code class="mkbd-token-code">{{ def.token }}</code>
+            }
+
+            <button
+              class="mkbd-icon-btn"
+              type="button"
+              (click)="store.setToken(def.token, '')"
+              [disabled]="!isChanged(def)"
+              [attr.aria-label]="'Restaurar ' + def.label"
+            >
+              <mkb-icon name="reset" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+
+    <div class="mkbd-theme-actions">
+      <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="store.resetTheme()" [disabled]="!changedCount()">
+        <mkb-icon name="reset" />
+        Restaurar todos os defaults
+      </button>
+      <span class="mkbd-hint mkbd-theme-count">{{ changedCount() }} token(s) alterado(s)</span>
+    </div>
+  `, styles: [":host{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:block}.mkbd-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 16px}.mkbd-token{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;border-radius:var(--mkbd-radius-md);min-width:0}.mkbd-token-changed{border-color:var(--mkbd-primary-outline);background:var(--mkbd-primary-soft)}.mkbd-token-text{display:flex;flex-direction:column;min-width:0;gap:2px}.mkbd-token-label{font-size:12.5px}.mkbd-token code,.mkbd-token-code{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mkbd-token-code{width:92px;flex:none}.mkbd-token>.mkbd-icon-btn{margin-left:auto}.mkbd-theme-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.mkbd-theme-count{margin:0}\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.
+ *
+ * Visual: linguagem do Mosaicoo Design System (tela 13a dos Layouts). Os
+ * tokens caem no DS do host quando embarcado — ver designer.css.
+ */
+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">
+      <h2 class="mkbd-title">Designer do Board</h2>
+      @if (store.errors().length; as count) {
+        <span class="mkbd-chip mkbd-chip-error" role="status">
+          <mkb-icon name="alert-circle" />
+          {{ count }} erro(s)
+        </span>
+      } @else {
+        <span class="mkbd-chip mkbd-chip-ok" role="status">
+          <mkb-icon name="check-circle" />
+          Config válida
+        </span>
+      }
+
+      <div class="mkbd-toolbar-actions">
+        <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="fileInput.click()">
+          <mkb-icon name="upload" />
+          Importar
+        </button>
+        <input
+          #fileInput
+          type="file"
+          accept=".json,application/json"
+          hidden
+          (change)="onImportFile($event)"
+        />
+
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" [matMenuTriggerFor]="exportMenu">
+          <mkb-icon name="download" />
+          Exportar
+          <mkb-icon name="expand" />
+        </button>
+        <mat-menu #exportMenu="matMenu">
+          <button mat-menu-item type="button" (click)="exportConfig()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar config</strong>
+              <small>BoardConfig — o que o runtime consome</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" (click)="exportDesign()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar design</strong>
+              <small>Config + tema, para reabrir aqui</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" [disabled]="!hasTheme()" (click)="exportCss()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar CSS</strong>
+              <small>Só os tokens alterados</small>
+            </span>
+          </button>
+        </mat-menu>
+
+        @if (storageKey()) {
+          <span class="mkbd-toolbar-sep"></span>
+          <button class="mkbd-btn mkbd-btn-danger" type="button" (click)="clearDraft()">
+            <mkb-icon name="trash" />
+            Limpar rascunho
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (importErrors().length) {
+      <div class="mkbd-banner" role="alert">
+        <mkb-icon name="alert-circle" />
+        <div>
+          <strong>Importação rejeitada</strong>
+          <ul>
+            @for (issue of importErrors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        </div>
+        <button class="mkbd-icon-btn" type="button" (click)="importErrors.set([])" aria-label="Fechar aviso">
+          <mkb-icon name="close" />
+        </button>
+      </div>
+    }
+
+    <div class="mkbd-body">
+      <div class="mkbd-editors">
+        <mat-tab-group class="mkbd-tabs" stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline">
+            <div class="mkbd-pane"><mkb-pipeline-editor /></div>
+          </mat-tab>
+          <mat-tab label="Cartão">
+            <div class="mkbd-pane"><mkb-card-editor /></div>
+          </mat-tab>
+          <mat-tab label="Dados">
+            <div class="mkbd-pane"><mkb-data-editor /></div>
+          </mat-tab>
+          <mat-tab label="Tema">
+            <div class="mkbd-pane"><mkb-theme-editor /></div>
+          </mat-tab>
+          <mat-tab label="JSON">
+            <div class="mkbd-pane">
+              <p class="mkbd-hint">
+                BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+              </p>
+              <textarea class="mkbd-json" rows="22" spellcheck="false" [value]="store.exportConfigJson()" #jsonArea></textarea>
+              <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="applyJson(jsonArea)">
+                Aplicar JSON
+              </button>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
+      <div class="mkbd-preview">
+        <div class="mkbd-preview-head">
+          <mkb-icon name="eye" class="mkbd-preview-eye" />
+          <span class="mkbd-overline">Preview ao vivo</span>
+          @if (store.errors().length) {
+            <span class="mkbd-hint mkbd-preview-note">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{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--mkbd-surface)}.mkbd-toolbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 12px;background:var(--mkbd-panel);border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-title{margin:0;font:500 17px var(--mkbd-font);letter-spacing:-.2px}.mkbd-toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mkbd-toolbar-sep{width:1px;height:26px;background:var(--mkbd-border)}.mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}.mkbd-menu-item strong{font:500 13px var(--mkbd-font)}.mkbd-menu-item small{font-size:11px;color:var(--mkbd-muted)}.mkbd-banner{flex:none;display:flex;align-items:flex-start;gap:10px;margin:12px 20px 0;padding:12px 14px;border:1px solid var(--mkbd-error);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-error-container);color:var(--mkbd-error);font-size:12px}.mkbd-banner>mkb-icon{font-size:20px;margin-top:1px}.mkbd-banner ul{margin:4px 0 0;padding-left:18px}.mkbd-banner strong{font:500 13px var(--mkbd-font)}.mkbd-banner>.mkbd-icon-btn{margin-left:auto;color:inherit}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--mkbd-canvas);border-right:1px solid var(--mkbd-border)}.mkbd-pane{padding:18px 20px 28px}.mkbd-tabs{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-header{background:var(--mkbd-panel);padding:0 12px;flex:none;border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-tabs ::ng-deep .mat-mdc-tab{min-width:0;padding:0 14px}.mkbd-tabs ::ng-deep .mdc-tab__text-label{font:500 13.5px var(--mkbd-font);letter-spacing:0;color:var(--mkbd-muted);transition:color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-tabs ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mdc-tab-indicator__content--underline{border-top-width:3px;border-radius:3px 3px 0 0;border-color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-content{overflow:auto}.mkbd-preview{flex:none;width:clamp(360px,42%,560px);display:flex;flex-direction:column;min-width:0;background:var(--mkbd-surface)}.mkbd-preview-head{flex:none;display:flex;align-items:center;gap:8px;padding:14px 18px 10px}.mkbd-preview-eye{font-size:16px;color:var(--mkbd-success)}.mkbd-preview-note{margin:0;text-transform:none}.mkbd-preview-board{flex:1;min-height:0;overflow:auto;padding:0 18px 16px}.mkbd-preview-board>mos-kanban-board{display:block;height:100%}.mkbd-issues{margin:0 18px 8px;padding:8px 12px 8px 26px;font-size:11.5px;color:var(--mkbd-error);background:var(--mkbd-error-container);border-radius:var(--mkbd-radius-md)}.mkbd-issues code,.mkbd-banner code{font-family:var(--mkbd-font-mono)}.mkbd-json{display:block;width:100%;margin-bottom:12px;padding:12px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel);color:var(--mkbd-fg);font:400 12px/1.5 var(--mkbd-font-mono);box-sizing:border-box;resize:vertical}.mkbd-json:focus-visible{outline:none;border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}::ng-deep .mat-mdc-menu-panel.mkbd-menu{min-width:176px;padding:6px;border:1px solid var(--color-border, #e6e8ee);border-radius:var(--radius-xl, 14px);background:var(--color-panel, #ffffff);box-shadow:var(--elevation-2, 0 1px 2px rgba(20, 22, 30, .1), 0 2px 6px rgba(20, 22, 30, .08))}::ng-deep .mkbd-menu .mat-mdc-menu-content{padding:0;max-height:285px;overflow-y:auto;overscroll-behavior:contain}::ng-deep .mkbd-menu .mkbd-menu-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 4px 8px;background:var(--color-panel, #ffffff)}::ng-deep .mkbd-menu .mkbd-menu-search input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--color-border-strong, #c9cdd6);border-radius:var(--radius-sm, 8px);background:var(--color-panel, #ffffff);color:var(--color-foreground, #1e1f24);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);outline:none}::ng-deep .mkbd-menu .mkbd-menu-search input:focus{border-color:var(--color-primary, #5e35b1);box-shadow:var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4))}::ng-deep .mkbd-menu .mkbd-menu-count{font:500 10px var(--font-mono, ui-monospace, monospace);color:var(--color-muted, #8b909c);padding-right:4px}::ng-deep .mkbd-menu .mkbd-menu-empty{margin:0;padding:10px;font-size:12px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mat-mdc-menu-item{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 10px;border-radius:var(--radius-md, 10px);color:var(--color-secondary, #4a4d57);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);letter-spacing:0}::ng-deep .mkbd-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font:inherit;display:flex;align-items:center;gap:10px}::ng-deep .mkbd-menu .mat-mdc-menu-item:hover:not([disabled]){background:color-mix(in srgb,var(--color-foreground, #1e1f24) 8%,transparent)}::ng-deep .mkbd-menu .mkbd-menu-item-active{background:var(--color-primary-container, #ede7f6);color:var(--color-on-primary-container, #2a1258);font-weight:500}::ng-deep .mkbd-menu .mat-mdc-menu-item[disabled]{color:var(--color-disabled-fg, #b3b7c1)}::ng-deep .mkbd-menu .mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}::ng-deep .mkbd-menu .mkbd-menu-item strong{font:500 13px var(--font-sans, sans-serif)}::ng-deep .mkbd-menu .mkbd-menu-item small{font-size:11px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;border:1.5px solid var(--color-border-strong, #c9cdd6);border-radius:4px}::ng-deep .mkbd-menu .mkbd-menu-check-on{background:var(--color-primary, #5e35b1);border-color:var(--color-primary, #5e35b1)}::ng-deep .mkbd-menu .mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--color-on-primary, #ffffff);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkbd-border)}.mkbd-preview{width:auto;flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.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: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MkbIcon, selector: "mkb-icon", inputs: ["name"] }, { 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,
+                        MatMenuModule,
+                        MkbIcon,
+                        MosKanbanBoard,
+                        MkbPipelineEditor,
+                        MkbCardEditor,
+                        MkbDataEditor,
+                        MkbThemeEditor,
+                    ], template: `
+    <div class="mkbd-toolbar">
+      <h2 class="mkbd-title">Designer do Board</h2>
+      @if (store.errors().length; as count) {
+        <span class="mkbd-chip mkbd-chip-error" role="status">
+          <mkb-icon name="alert-circle" />
+          {{ count }} erro(s)
+        </span>
+      } @else {
+        <span class="mkbd-chip mkbd-chip-ok" role="status">
+          <mkb-icon name="check-circle" />
+          Config válida
+        </span>
+      }
+
+      <div class="mkbd-toolbar-actions">
+        <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="fileInput.click()">
+          <mkb-icon name="upload" />
+          Importar
+        </button>
+        <input
+          #fileInput
+          type="file"
+          accept=".json,application/json"
+          hidden
+          (change)="onImportFile($event)"
+        />
+
+        <button class="mkbd-btn mkbd-btn-tonal" type="button" [matMenuTriggerFor]="exportMenu">
+          <mkb-icon name="download" />
+          Exportar
+          <mkb-icon name="expand" />
+        </button>
+        <mat-menu #exportMenu="matMenu">
+          <button mat-menu-item type="button" (click)="exportConfig()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar config</strong>
+              <small>BoardConfig — o que o runtime consome</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" (click)="exportDesign()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar design</strong>
+              <small>Config + tema, para reabrir aqui</small>
+            </span>
+          </button>
+          <button mat-menu-item type="button" [disabled]="!hasTheme()" (click)="exportCss()">
+            <span class="mkbd-menu-item">
+              <strong>Exportar CSS</strong>
+              <small>Só os tokens alterados</small>
+            </span>
+          </button>
+        </mat-menu>
+
+        @if (storageKey()) {
+          <span class="mkbd-toolbar-sep"></span>
+          <button class="mkbd-btn mkbd-btn-danger" type="button" (click)="clearDraft()">
+            <mkb-icon name="trash" />
+            Limpar rascunho
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (importErrors().length) {
+      <div class="mkbd-banner" role="alert">
+        <mkb-icon name="alert-circle" />
+        <div>
+          <strong>Importação rejeitada</strong>
+          <ul>
+            @for (issue of importErrors(); track $index) {
+              <li><code>{{ issue.path }}</code> {{ issue.message }}</li>
+            }
+          </ul>
+        </div>
+        <button class="mkbd-icon-btn" type="button" (click)="importErrors.set([])" aria-label="Fechar aviso">
+          <mkb-icon name="close" />
+        </button>
+      </div>
+    }
+
+    <div class="mkbd-body">
+      <div class="mkbd-editors">
+        <mat-tab-group class="mkbd-tabs" stretchTabs="false" animationDuration="0ms">
+          <mat-tab label="Pipeline">
+            <div class="mkbd-pane"><mkb-pipeline-editor /></div>
+          </mat-tab>
+          <mat-tab label="Cartão">
+            <div class="mkbd-pane"><mkb-card-editor /></div>
+          </mat-tab>
+          <mat-tab label="Dados">
+            <div class="mkbd-pane"><mkb-data-editor /></div>
+          </mat-tab>
+          <mat-tab label="Tema">
+            <div class="mkbd-pane"><mkb-theme-editor /></div>
+          </mat-tab>
+          <mat-tab label="JSON">
+            <div class="mkbd-pane">
+              <p class="mkbd-hint">
+                BoardConfig ao vivo. Edite e aplique — inválido não substitui o design atual.
+              </p>
+              <textarea class="mkbd-json" rows="22" spellcheck="false" [value]="store.exportConfigJson()" #jsonArea></textarea>
+              <button class="mkbd-btn mkbd-btn-outline" type="button" (click)="applyJson(jsonArea)">
+                Aplicar JSON
+              </button>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
+      <div class="mkbd-preview">
+        <div class="mkbd-preview-head">
+          <mkb-icon name="eye" class="mkbd-preview-eye" />
+          <span class="mkbd-overline">Preview ao vivo</span>
+          @if (store.errors().length) {
+            <span class="mkbd-hint mkbd-preview-note">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{--mkbd-primary: var(--color-primary, #5e35b1);--mkbd-on-primary: var(--color-on-primary, #ffffff);--mkbd-primary-container: var(--color-primary-container, #ede7f6);--mkbd-primary-soft: color-mix(in srgb, var(--mkbd-primary) 8%, transparent);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 28%, #ffffff);--mkbd-surface: var(--color-surface, #f4f5f7);--mkbd-panel: var(--color-panel, #ffffff);--mkbd-panel-2: var(--color-panel-2, #f6f7f9);--mkbd-panel-3: var(--color-panel-3, #f1f2f5);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 70%, var(--mkbd-surface));--mkbd-border: var(--color-border, #e6e8ee);--mkbd-border-soft: var(--color-border-soft, #eef0f4);--mkbd-border-strong: var(--color-border-strong, #c9cdd6);--mkbd-fg: var(--color-foreground, #1e1f24);--mkbd-secondary: var(--color-secondary, #4a4d57);--mkbd-muted: var(--color-muted, #8b909c);--mkbd-muted-2: var(--color-muted-2, #a2a7b2);--mkbd-disabled: var(--color-disabled-fg, #b3b7c1);--mkbd-success: var(--color-success, #2e7d32);--mkbd-success-container: var(--color-success-container, #e8f5e9);--mkbd-error: var(--color-error-text, #c62828);--mkbd-error-container: var(--color-error-container, #fdecea);--mkbd-warning-text: var(--color-warning-text, #b76e00);--mkbd-warning-container: var(--color-warning-container, #fff4e0);--mkbd-radius-sm: var(--radius-sm, 8px);--mkbd-radius-md: var(--radius-md, 10px);--mkbd-radius-lg: var(--radius-lg, 12px);--mkbd-radius-pill: var(--radius-pill, 999px);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(20, 22, 30, .1));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4));--mkbd-dur: var(--dur-fast, .12s);--mkbd-ease: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));--mkbd-font: var(--font-sans, \"Roboto\", system-ui, -apple-system, \"Segoe UI\", sans-serif);--mkbd-font-mono: var(--font-mono, \"Roboto Mono\", ui-monospace, \"SFMono-Regular\", Menlo, monospace);font-family:var(--mkbd-font);color:var(--mkbd-fg)}:host-context([data-theme=\"dark\"]){--mkbd-primary: var(--color-primary, #b39ddb);--mkbd-on-primary: var(--color-on-primary, #2a1258);--mkbd-primary-container: var(--color-primary-container, #4b3b80);--mkbd-primary-outline: color-mix(in srgb, var(--mkbd-primary) 40%, transparent);--mkbd-surface: var(--color-surface, #0e1116);--mkbd-panel: var(--color-panel, #14171d);--mkbd-panel-2: var(--color-panel-2, #1b1f27);--mkbd-panel-3: var(--color-panel-3, #222732);--mkbd-canvas: color-mix(in srgb, var(--mkbd-panel) 60%, var(--mkbd-surface));--mkbd-border: var(--color-border, #262b34);--mkbd-border-soft: var(--color-border-soft, #1e232b);--mkbd-border-strong: var(--color-border-strong, #3a4048);--mkbd-fg: var(--color-foreground, #e6e9ef);--mkbd-secondary: var(--color-secondary, #c2c7d0);--mkbd-muted: var(--color-muted, #9aa3b2);--mkbd-muted-2: var(--color-muted-2, #7c8494);--mkbd-disabled: var(--color-disabled-fg, #59606c);--mkbd-success: var(--color-success, #81c784);--mkbd-success-container: var(--color-success-container, #1e3a24);--mkbd-error: var(--color-error-text, #ef9a9a);--mkbd-error-container: var(--color-error-container, #3a1e1e);--mkbd-warning-text: var(--color-warning-text, #ffb74d);--mkbd-warning-container: var(--color-warning-container, #3a2c10);--mkbd-elevation-1: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, .4));--mkbd-focus-ring: var(--focus-ring, 0 0 0 3px rgba(179, 157, 219, .55))}.mkbd-overline{font:500 11px var(--mkbd-font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mkbd-muted)}.mkbd-hint{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--mkbd-muted)}.mkbd-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px}.mkbd-section:first-child{margin-top:0}.mkbd-section:after{content:\"\";flex:1;height:1px;background:var(--mkbd-border-soft)}.mkbd-count{font:500 10px var(--mkbd-font-mono);color:var(--mkbd-primary);background:var(--mkbd-primary-container);padding:2px 8px;border-radius:var(--mkbd-radius-pill)}.mkbd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--mkbd-radius-md);border:1px solid transparent;background:transparent;font:500 12.5px var(--mkbd-font);color:var(--mkbd-secondary);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-btn-outline{border-color:var(--mkbd-primary-outline);background:var(--mkbd-panel);color:var(--mkbd-primary)}.mkbd-btn-outline:hover:not(:disabled){background:var(--mkbd-primary-soft)}.mkbd-btn-tonal{background:var(--mkbd-primary-container);color:var(--mkbd-primary)}.mkbd-btn-tonal:hover:not(:disabled){background:color-mix(in srgb,var(--mkbd-primary) 16%,var(--mkbd-panel))}.mkbd-btn-tonal:disabled{background:var(--mkbd-panel-3)}.mkbd-btn-text:hover:not(:disabled){background:var(--mkbd-panel-3)}.mkbd-btn-danger{color:var(--mkbd-error)}.mkbd-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container)}.mkbd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:7px;background:transparent;color:var(--mkbd-muted);font-size:19px;cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-icon-btn:hover:not(:disabled){background:var(--mkbd-panel-3);color:var(--mkbd-secondary)}.mkbd-icon-btn:disabled{color:var(--mkbd-disabled);cursor:default}.mkbd-icon-btn:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-icon-btn-danger{color:color-mix(in srgb,var(--mkbd-error) 45%,var(--mkbd-muted))}.mkbd-icon-btn-danger:hover:not(:disabled){background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:12px;border:1.5px dashed var(--mkbd-border-strong);border-radius:var(--mkbd-radius-lg);background:transparent;color:var(--mkbd-primary);font:500 13px var(--mkbd-font);cursor:pointer;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-add:hover{background:var(--mkbd-primary-soft);border-color:var(--mkbd-primary)}.mkbd-add:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--mkbd-radius-pill);font:500 11px var(--mkbd-font);white-space:nowrap}.mkbd-chip-ok{background:var(--mkbd-success-container);color:var(--mkbd-success)}.mkbd-chip-error{background:var(--mkbd-error-container);color:var(--mkbd-error)}.mkbd-field{position:relative;display:flex;align-items:center;min-width:0;height:40px;padding:0 10px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field>.mkbd-label{position:absolute;top:-6px;left:8px;padding:0 4px;background:var(--mkbd-label-bg, var(--mkbd-panel));font-size:9.5px;line-height:1;color:var(--mkbd-muted);pointer-events:none;white-space:nowrap}.mkbd-field input,.mkbd-field select,.mkbd-field textarea{width:100%;min-width:0;border:none;outline:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);padding:0}.mkbd-field input::placeholder{color:var(--mkbd-disabled)}.mkbd-field select{appearance:none;cursor:pointer;padding-right:18px}.mkbd-field-select:after{content:\"\";position:absolute;right:12px;width:8px;height:8px;border-right:1.6px solid var(--mkbd-muted);border-bottom:1.6px solid var(--mkbd-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}.mkbd-field:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-field-mono input{font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-grow{flex:1}.mkbd-field-optional{border-style:dashed;border-color:var(--mkbd-border);background:var(--mkbd-panel-2)}.mkbd-field-optional>.mkbd-label{background:var(--mkbd-panel-2);color:var(--mkbd-muted-2)}.mkbd-field-optional input{text-align:center;font-family:var(--mkbd-font-mono);font-weight:500}.mkbd-field-optional:focus-within{border-style:solid;background:var(--mkbd-panel)}.mkbd-field-optional:focus-within>.mkbd-label{background:var(--mkbd-panel)}.mkbd-field textarea{height:100%;padding:8px 0;resize:vertical;font-family:var(--mkbd-font-mono);font-size:12px;line-height:1.5}.mkbd-field-area{height:auto;align-items:stretch;padding:2px 10px}.mkbd-check{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mkbd-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.mkbd-check input{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;background:var(--mkbd-panel);cursor:pointer;position:relative;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease),border-color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-check input:checked{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-check input:checked:after{content:\"\";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}.mkbd-check input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-check:has(input:checked){color:var(--mkbd-primary);font-weight:500}.mkbd-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mkbd-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.mkbd-switch input{appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:var(--mkbd-radius-pill);background:var(--mkbd-border-strong);cursor:pointer;flex:none;transition:background var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:after{content:\"\";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mkbd-panel);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-switch input:checked{background:var(--mkbd-primary)}.mkbd-switch input:checked:after{transform:translate(16px)}.mkbd-switch input:focus-visible{outline:none;box-shadow:var(--mkbd-focus-ring)}.mkbd-switch-boxed{height:40px;padding:0 14px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel)}.mkbd-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-sm);background:var(--mkbd-panel);cursor:pointer;overflow:hidden}.mkbd-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.mkbd-swatch span{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001f}.mkbd-swatch:focus-within{border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}.mkbd-rows{display:flex;flex-direction:column;gap:10px}.mkbd-row{display:grid;align-items:center;gap:10px;padding:12px 12px 12px 8px;border:1px solid var(--mkbd-border);border-left:4px solid var(--mkbd-accent, var(--mkbd-border-strong));border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel);transition:border-color var(--mkbd-dur) var(--mkbd-ease),box-shadow var(--mkbd-dur) var(--mkbd-ease)}.mkbd-row-selected{border-color:var(--mkbd-primary);border-width:1.5px;padding:11.5px 11.5px 11.5px 7.5px;box-shadow:0 0 0 3px var(--mkbd-primary-soft)}.mkbd-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mkbd-disabled);font-size:19px;cursor:grab}.mkbd-row-ctrls{display:flex;align-items:center;gap:2px}.mkbd-feature{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--mkbd-border);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-panel)}.mkbd-feature>mkb-icon{font-size:20px;color:var(--mkbd-primary)}.mkbd-feature-title{font-weight:500;font-size:13.5px}.mkbd-feature-desc{font-size:11.5px;color:var(--mkbd-muted)}.mkbd-feature>.mkbd-switch{margin-left:auto}.mkbd-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}.mkbd-options,.mkbd-stack,.mkbd-new-block{--mkbd-label-bg: var(--mkbd-canvas)}.mkbd-options>.mkbd-field,.mkbd-options>mkb-combo{flex:1;min-width:150px}.mkbd-stack{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}.mkbd-stack .mkbd-field,.mkbd-stack mkb-combo{width:190px}.mkbd-stack .mkbd-field-sm,.mkbd-stack mkb-combo.mkbd-field-sm{width:130px}.mkbd-stack .mkbd-field-grow,.mkbd-stack mkb-combo.mkbd-field-grow{flex:1;min-width:220px;width:auto}.mkbd-stack .mkbd-field-full{flex:1 0 100%;width:auto}.mkbd-combo-btn{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;color:inherit;font:400 12.5px var(--mkbd-font);text-align:left;cursor:pointer}.mkbd-combo-btn:focus-visible{outline:none}.mkbd-combo-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkbd-combo-empty{color:var(--mkbd-disabled)}.mkbd-combo-caret{font-size:18px;color:var(--mkbd-muted);transition:transform var(--mkbd-dur) var(--mkbd-ease)}.mkbd-field-combo:focus-within{border-color:var(--mkbd-primary);border-width:1.5px;padding:0 9.5px}.mkbd-field-combo:focus-within>.mkbd-label{color:var(--mkbd-primary)}.mkbd-combo-open .mkbd-combo-caret{transform:rotate(180deg)}.mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:10px;border:1.5px solid var(--mkbd-border-strong);border-radius:4px;flex:none}.mkbd-menu-check-on{background:var(--mkbd-primary);border-color:var(--mkbd-primary)}.mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--mkbd-on-primary);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}\n", ":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--mkbd-surface)}.mkbd-toolbar{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 12px;background:var(--mkbd-panel);border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-title{margin:0;font:500 17px var(--mkbd-font);letter-spacing:-.2px}.mkbd-toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mkbd-toolbar-sep{width:1px;height:26px;background:var(--mkbd-border)}.mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}.mkbd-menu-item strong{font:500 13px var(--mkbd-font)}.mkbd-menu-item small{font-size:11px;color:var(--mkbd-muted)}.mkbd-banner{flex:none;display:flex;align-items:flex-start;gap:10px;margin:12px 20px 0;padding:12px 14px;border:1px solid var(--mkbd-error);border-radius:var(--mkbd-radius-lg);background:var(--mkbd-error-container);color:var(--mkbd-error);font-size:12px}.mkbd-banner>mkb-icon{font-size:20px;margin-top:1px}.mkbd-banner ul{margin:4px 0 0;padding-left:18px}.mkbd-banner strong{font:500 13px var(--mkbd-font)}.mkbd-banner>.mkbd-icon-btn{margin-left:auto;color:inherit}.mkbd-body{display:flex;flex:1;min-height:0}.mkbd-editors{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--mkbd-canvas);border-right:1px solid var(--mkbd-border)}.mkbd-pane{padding:18px 20px 28px}.mkbd-tabs{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-header{background:var(--mkbd-panel);padding:0 12px;flex:none;border-bottom:1px solid var(--mkbd-border-soft)}.mkbd-tabs ::ng-deep .mat-mdc-tab{min-width:0;padding:0 14px}.mkbd-tabs ::ng-deep .mdc-tab__text-label{font:500 13.5px var(--mkbd-font);letter-spacing:0;color:var(--mkbd-muted);transition:color var(--mkbd-dur) var(--mkbd-ease)}.mkbd-tabs ::ng-deep .mdc-tab--active .mdc-tab__text-label{color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mdc-tab-indicator__content--underline{border-top-width:3px;border-radius:3px 3px 0 0;border-color:var(--mkbd-primary)}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1;min-height:0}.mkbd-tabs ::ng-deep .mat-mdc-tab-body-content{overflow:auto}.mkbd-preview{flex:none;width:clamp(360px,42%,560px);display:flex;flex-direction:column;min-width:0;background:var(--mkbd-surface)}.mkbd-preview-head{flex:none;display:flex;align-items:center;gap:8px;padding:14px 18px 10px}.mkbd-preview-eye{font-size:16px;color:var(--mkbd-success)}.mkbd-preview-note{margin:0;text-transform:none}.mkbd-preview-board{flex:1;min-height:0;overflow:auto;padding:0 18px 16px}.mkbd-preview-board>mos-kanban-board{display:block;height:100%}.mkbd-issues{margin:0 18px 8px;padding:8px 12px 8px 26px;font-size:11.5px;color:var(--mkbd-error);background:var(--mkbd-error-container);border-radius:var(--mkbd-radius-md)}.mkbd-issues code,.mkbd-banner code{font-family:var(--mkbd-font-mono)}.mkbd-json{display:block;width:100%;margin-bottom:12px;padding:12px;border:1px solid var(--mkbd-border-strong);border-radius:var(--mkbd-radius-md);background:var(--mkbd-panel);color:var(--mkbd-fg);font:400 12px/1.5 var(--mkbd-font-mono);box-sizing:border-box;resize:vertical}.mkbd-json:focus-visible{outline:none;border-color:var(--mkbd-primary);box-shadow:var(--mkbd-focus-ring)}::ng-deep .mat-mdc-menu-panel.mkbd-menu{min-width:176px;padding:6px;border:1px solid var(--color-border, #e6e8ee);border-radius:var(--radius-xl, 14px);background:var(--color-panel, #ffffff);box-shadow:var(--elevation-2, 0 1px 2px rgba(20, 22, 30, .1), 0 2px 6px rgba(20, 22, 30, .08))}::ng-deep .mkbd-menu .mat-mdc-menu-content{padding:0;max-height:285px;overflow-y:auto;overscroll-behavior:contain}::ng-deep .mkbd-menu .mkbd-menu-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 4px 8px;background:var(--color-panel, #ffffff)}::ng-deep .mkbd-menu .mkbd-menu-search input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--color-border-strong, #c9cdd6);border-radius:var(--radius-sm, 8px);background:var(--color-panel, #ffffff);color:var(--color-foreground, #1e1f24);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);outline:none}::ng-deep .mkbd-menu .mkbd-menu-search input:focus{border-color:var(--color-primary, #5e35b1);box-shadow:var(--focus-ring, 0 0 0 3px rgba(94, 53, 177, .4))}::ng-deep .mkbd-menu .mkbd-menu-count{font:500 10px var(--font-mono, ui-monospace, monospace);color:var(--color-muted, #8b909c);padding-right:4px}::ng-deep .mkbd-menu .mkbd-menu-empty{margin:0;padding:10px;font-size:12px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mat-mdc-menu-item{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 10px;border-radius:var(--radius-md, 10px);color:var(--color-secondary, #4a4d57);font:400 12.5px var(--font-sans, \"Roboto\", system-ui, sans-serif);letter-spacing:0}::ng-deep .mkbd-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font:inherit;display:flex;align-items:center;gap:10px}::ng-deep .mkbd-menu .mat-mdc-menu-item:hover:not([disabled]){background:color-mix(in srgb,var(--color-foreground, #1e1f24) 8%,transparent)}::ng-deep .mkbd-menu .mkbd-menu-item-active{background:var(--color-primary-container, #ede7f6);color:var(--color-on-primary-container, #2a1258);font-weight:500}::ng-deep .mkbd-menu .mat-mdc-menu-item[disabled]{color:var(--color-disabled-fg, #b3b7c1)}::ng-deep .mkbd-menu .mkbd-menu-item{display:flex;flex-direction:column;line-height:1.35}::ng-deep .mkbd-menu .mkbd-menu-item strong{font:500 13px var(--font-sans, sans-serif)}::ng-deep .mkbd-menu .mkbd-menu-item small{font-size:11px;color:var(--color-muted, #8b909c)}::ng-deep .mkbd-menu .mkbd-menu-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;border:1.5px solid var(--color-border-strong, #c9cdd6);border-radius:4px}::ng-deep .mkbd-menu .mkbd-menu-check-on{background:var(--color-primary, #5e35b1);border-color:var(--color-primary, #5e35b1)}::ng-deep .mkbd-menu .mkbd-menu-check-on:after{content:\"\";width:4px;height:8px;margin-top:-2px;border:solid var(--color-on-primary, #ffffff);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}@media(max-width:900px){.mkbd-body{flex-direction:column}.mkbd-editors{border-right:none;border-bottom:1px solid var(--mkbd-border)}.mkbd-preview{width:auto;flex:1}}\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 };