@praxisui/tabs 0.0.1

package/fesm2022/praxisui-tabs.mjs

@@ -0,0 +1,2192 @@
+import * as i0 from '@angular/core';
+import { Inject, Component, inject, EventEmitter, signal, Output, Input, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@praxisui/core';
+import { PraxisIconDirective, CONFIG_STORAGE, EmptyStateCardComponent, DynamicWidgetLoaderDirective, ComponentMetadataRegistry } from '@praxisui/core';
+import * as i5$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
+import { SETTINGS_PANEL_DATA, SettingsPanelService } from '@praxisui/settings-panel';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i10 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i11 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BehaviorSubject } from 'rxjs';
+import { produce } from 'immer';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+class PraxisTabsConfigEditor {
+    registry;
+    editedConfig;
+    initialConfig;
+    jsonText = '';
+    isValid = true;
+    errorMsg = '';
+    componentOptions = [];
+    selectedTabWidgetId = {};
+    selectedLinkWidgetId = {};
+    quickResourcePathTab = {};
+    quickResourcePathLink = {};
+    // Simplified token list we support at runtime
+    tokenList = [
+        { key: 'active-indicator-color', label: 'Indicador ativo' },
+        { key: 'active-label-text-color', label: 'Texto ativo' },
+        { key: 'active-hover-indicator-color', label: 'Indicador ativo (hover)' },
+        { key: 'active-hover-label-text-color', label: 'Texto ativo (hover)' },
+        { key: 'active-focus-indicator-color', label: 'Indicador ativo (focus)' },
+        { key: 'active-focus-label-text-color', label: 'Texto ativo (focus)' },
+        { key: 'inactive-label-text-color', label: 'Texto inativo' },
+        { key: 'inactive-hover-label-text-color', label: 'Texto inativo (hover)' },
+        { key: 'inactive-focus-label-text-color', label: 'Texto inativo (focus)' },
+        { key: 'pagination-icon-color', label: 'Ícones de paginação' },
+        { key: 'divider-color', label: 'Divisor/linha' },
+        { key: 'background-color', label: 'Fundo do header' },
+    ];
+    presets = {
+        primary: {
+            'active-indicator-color': 'var(--mat-sys-primary)',
+            'active-label-text-color': 'var(--mat-sys-primary)',
+            'inactive-label-text-color': 'rgba(var(--mat-sys-on-surface-rgb), 0.72)',
+            'inactive-hover-label-text-color': 'var(--mat-sys-on-surface)',
+            'divider-color': 'rgba(255, 255, 255, 0.12)',
+            'background-color': 'var(--mat-sys-surface-container)',
+            'pagination-icon-color': 'var(--mat-sys-on-surface)'
+        },
+        neutral: {
+            'active-indicator-color': 'var(--mat-sys-on-surface)',
+            'active-label-text-color': 'var(--mat-sys-on-surface)',
+            'inactive-label-text-color': 'rgba(var(--mat-sys-on-surface-rgb), 0.56)',
+            'inactive-hover-label-text-color': 'var(--mat-sys-on-surface)',
+            'divider-color': 'rgba(255, 255, 255, 0.10)',
+            'background-color': 'var(--mat-sys-surface-container)',
+            'pagination-icon-color': 'var(--mat-sys-on-surface)'
+        },
+        'high-contrast': {
+            'active-indicator-color': '#FFD54F',
+            'active-label-text-color': '#FFFFFF',
+            'inactive-label-text-color': '#BDBDBD',
+            'inactive-hover-label-text-color': '#EEEEEE',
+            'divider-color': '#FFFFFF',
+            'background-color': 'var(--mat-sys-surface)',
+            'pagination-icon-color': '#FFFFFF'
+        }
+    };
+    isDirty$ = new BehaviorSubject(false);
+    isValid$ = new BehaviorSubject(true);
+    isBusy$ = new BehaviorSubject(false);
+    constructor(data, registry) {
+        this.registry = registry;
+        const cfg = data?.config || data || {};
+        this.initialConfig = structuredClone(cfg);
+        this.editedConfig = structuredClone(cfg);
+        this.isValid$.next(true);
+        this.jsonText = this.stringify(this.editedConfig);
+        this.updateDirty();
+        this.componentOptions = this.registry.getAll().map((m) => ({ id: m.id, friendlyName: m.friendlyName }));
+    }
+    updateDirty() {
+        this.isDirty$.next(JSON.stringify(this.initialConfig) !== JSON.stringify(this.editedConfig));
+    }
+    onJsonTextChange(text) {
+        try {
+            const parsed = JSON.parse(text);
+            this.errorMsg = '';
+            this.isValid = true;
+            this.isValid$.next(true);
+            this.editedConfig = parsed;
+            this.updateDirty();
+        }
+        catch (e) {
+            this.isValid = false;
+            this.isValid$.next(false);
+            this.errorMsg = e?.message || 'Erro de sintaxe JSON';
+        }
+    }
+    // stringify helper is public to be used in the template
+    formatJson() {
+        if (!this.isValid)
+            return;
+        this.jsonText = this.stringify(this.editedConfig);
+    }
+    getSettingsValue() {
+        return { config: this.editedConfig };
+    }
+    onSave() {
+        return { config: this.editedConfig };
+    }
+    reset() {
+        this.editedConfig = structuredClone(this.initialConfig);
+        this.jsonText = this.stringify(this.editedConfig);
+        this.isValid = true;
+        this.isValid$.next(true);
+        this.updateDirty();
+    }
+    // Appearance helpers
+    get appearance() {
+        const ap = (this.editedConfig.appearance ??= {});
+        (ap.tokens ??= {});
+        return ap;
+    }
+    onAppearanceChange() {
+        this.updateDirty();
+        this.jsonText = this.stringify(this.editedConfig);
+    }
+    onTokenChange(key, value) {
+        const ap = this.appearance;
+        const tokens = (ap.tokens = ap.tokens || {});
+        if (!value) {
+            delete tokens[key];
+        }
+        else {
+            tokens[key] = value;
+        }
+        this.onAppearanceChange();
+    }
+    clearTokens() {
+        const ap = this.appearance;
+        ap.tokens = {};
+        this.onAppearanceChange();
+    }
+    applyPreset(id) {
+        const preset = this.presets[id];
+        if (!preset)
+            return;
+        const ap = this.appearance;
+        const tokens = (ap.tokens = ap.tokens || {});
+        for (const [k, v] of Object.entries(preset)) {
+            tokens[k] = v;
+        }
+        this.onAppearanceChange();
+    }
+    scssSnippet() {
+        const tokens = this.editedConfig.appearance?.tokens || {};
+        const entries = Object.entries(tokens).filter(([, v]) => !!v);
+        const selector = this.editedConfig.appearance?.themeClass
+            ? `.${this.editedConfig.appearance.themeClass}`
+            : ':root';
+        const map = entries.map(([k, v]) => `  ${k}: ${v},`).join('\n');
+        return `${selector} {\n  @include mat.tabs-overrides((\n${map}\n  ));\n}`;
+    }
+    // Group/Nav helpers and list editors
+    get group() {
+        if (!this.editedConfig.group)
+            this.editedConfig.group = {};
+        return this.editedConfig.group;
+    }
+    get nav() {
+        const nav = (this.editedConfig.nav ??= { links: [] });
+        if (!nav.links)
+            nav.links = [];
+        return nav;
+    }
+    get behavior() {
+        if (!this.editedConfig.behavior)
+            this.editedConfig.behavior = {};
+        // Default to lazy load to improve UX/perf with heavy widgets (table/form)
+        if (typeof this.editedConfig.behavior.lazyLoad === 'undefined') {
+            this.editedConfig.behavior.lazyLoad = true;
+        }
+        return this.editedConfig.behavior;
+    }
+    get accessibility() {
+        if (!this.editedConfig.accessibility)
+            this.editedConfig.accessibility = {};
+        return this.editedConfig.accessibility;
+    }
+    addTab() {
+        if (!this.editedConfig.tabs)
+            this.editedConfig.tabs = [];
+        this.editedConfig.tabs.push({ id: `tab${(this.editedConfig.tabs.length + 1)}`, textLabel: 'Nova aba' });
+        this.onAppearanceChange();
+    }
+    removeTab(index) {
+        this.editedConfig.tabs?.splice(index, 1);
+        this.onAppearanceChange();
+    }
+    moveTab(index, delta) {
+        if (!this.editedConfig.tabs)
+            return;
+        const i2 = index + delta;
+        if (i2 < 0 || i2 >= this.editedConfig.tabs.length)
+            return;
+        const [item] = this.editedConfig.tabs.splice(index, 1);
+        this.editedConfig.tabs.splice(i2, 0, item);
+        this.onAppearanceChange();
+    }
+    // ===== Widgets (Tabs) =====
+    addWidgetToTab(tabIndex) {
+        const id = (this.selectedTabWidgetId[tabIndex] || '').trim();
+        if (!id)
+            return;
+        const t = this.editedConfig.tabs[tabIndex];
+        t.widgets = t.widgets || [];
+        t.widgets.push({ id });
+        this.onAppearanceChange();
+    }
+    removeWidgetFromTab(tabIndex, widgetIndex) {
+        const t = this.editedConfig.tabs[tabIndex];
+        if (!t.widgets)
+            return;
+        t.widgets.splice(widgetIndex, 1);
+        this.onAppearanceChange();
+    }
+    updateWidgetInputsTab(tabIndex, widgetIndex, text) {
+        const t = this.editedConfig.tabs[tabIndex];
+        try {
+            const obj = text ? JSON.parse(text) : undefined;
+            t.widgets[widgetIndex].inputs = obj;
+            this.onAppearanceChange();
+        }
+        catch { }
+    }
+    updateWidgetOutputsTab(tabIndex, widgetIndex, text) {
+        const t = this.editedConfig.tabs[tabIndex];
+        try {
+            const obj = text ? JSON.parse(text) : undefined;
+            t.widgets[widgetIndex].outputs = obj;
+            this.onAppearanceChange();
+        }
+        catch { }
+    }
+    addPresetToTab(tabIndex, type) {
+        const rp = (this.quickResourcePathTab[tabIndex] || '').trim();
+        if (!rp)
+            return;
+        const t = this.editedConfig.tabs[tabIndex];
+        t.widgets = t.widgets || [];
+        if (type === 'form') {
+            t.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+        }
+        else if (type === 'table') {
+            t.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp } });
+        }
+        else {
+            t.widgets.push({ id: 'praxis-crud', inputs: { metadata: { resource: { path: rp } } } });
+        }
+        this.onAppearanceChange();
+    }
+    addLink() {
+        if (!this.nav.links)
+            this.nav.links = [];
+        this.nav.links.push({ id: `link${this.nav.links.length + 1}`, label: 'Novo link' });
+        this.onAppearanceChange();
+    }
+    removeLink(index) {
+        if (!this.nav.links)
+            return;
+        this.nav.links.splice(index, 1);
+        this.onAppearanceChange();
+    }
+    moveLink(index, delta) {
+        if (!this.nav.links)
+            return;
+        const i2 = index + delta;
+        if (i2 < 0 || i2 >= this.nav.links.length)
+            return;
+        const [item] = this.nav.links.splice(index, 1);
+        this.nav.links.splice(i2, 0, item);
+        this.onAppearanceChange();
+    }
+    // ===== Widgets (Links) =====
+    addWidgetToLink(linkIndex) {
+        const id = (this.selectedLinkWidgetId[linkIndex] || '').trim();
+        if (!id)
+            return;
+        const l = this.nav.links[linkIndex];
+        l.widgets = l.widgets || [];
+        l.widgets.push({ id });
+        this.onAppearanceChange();
+    }
+    removeWidgetFromLink(linkIndex, widgetIndex) {
+        const l = this.nav.links[linkIndex];
+        if (!l.widgets)
+            return;
+        l.widgets.splice(widgetIndex, 1);
+        this.onAppearanceChange();
+    }
+    updateWidgetInputsLink(linkIndex, widgetIndex, text) {
+        const l = this.nav.links[linkIndex];
+        try {
+            const obj = text ? JSON.parse(text) : undefined;
+            l.widgets[widgetIndex].inputs = obj;
+            this.onAppearanceChange();
+        }
+        catch { }
+    }
+    updateWidgetOutputsLink(linkIndex, widgetIndex, text) {
+        const l = this.nav.links[linkIndex];
+        try {
+            const obj = text ? JSON.parse(text) : undefined;
+            l.widgets[widgetIndex].outputs = obj;
+            this.onAppearanceChange();
+        }
+        catch { }
+    }
+    addPresetToLink(linkIndex, type) {
+        const rp = (this.quickResourcePathLink[linkIndex] || '').trim();
+        if (!rp)
+            return;
+        const l = this.nav.links[linkIndex];
+        l.widgets = l.widgets || [];
+        if (type === 'form') {
+            l.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+        }
+        else if (type === 'table') {
+            l.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp } });
+        }
+        else {
+            l.widgets.push({ id: 'praxis-crud', inputs: { metadata: { resource: { path: rp } } } });
+        }
+        this.onAppearanceChange();
+    }
+    stringify(v) { try {
+        return v ? JSON.stringify(v, null, 2) : '';
+    }
+    catch {
+        return '';
+    } }
+    getCompName(id) { const c = this.componentOptions.find(o => o.id === id); return c?.friendlyName || id; }
+    // Reorder handlers (drag & drop)
+    onTabWidgetDrop(tabIndex, event) {
+        const t = this.editedConfig.tabs?.[tabIndex];
+        if (!t?.widgets)
+            return;
+        moveItemInArray(t.widgets, event.previousIndex, event.currentIndex);
+        this.onAppearanceChange();
+    }
+    onLinkWidgetDrop(linkIndex, event) {
+        const l = this.nav.links?.[linkIndex];
+        if (!l?.widgets)
+            return;
+        moveItemInArray(l.widgets, event.previousIndex, event.currentIndex);
+        this.onAppearanceChange();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisTabsConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }, { token: i1.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisTabsConfigEditor, isStandalone: true, selector: "praxis-tabs-config-editor", ngImport: i0, template: `
+    <mat-tab-group>
+      <mat-tab label="Comportamento">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">closeable</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">lazyLoad (planejado)</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">reorderable (planejado)</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="Grupo">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px;">
+            <mat-form-field appearance="outline"><mat-label>Alinhamento</mat-label>
+              <select matNativeControl [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">padrão</option>
+                <option value="start">start</option>
+                <option value="center">center</option>
+                <option value="end">end</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>Header</mat-label>
+              <select matNativeControl [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">above</option>
+                <option value="above">above</option>
+                <option value="below">below</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>selectedIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="group.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>animationDuration</mat-label>
+              <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" placeholder="500ms" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>contentTabIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="group.contentTabIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>color (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>backgroundColor (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>aria-label</mat-label>
+              <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>aria-labelledby</mat-label>
+              <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+          </div>
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">dynamicHeight</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">disablePagination</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">preserveContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">stretchTabs</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Navegação">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px;">
+            <mat-form-field appearance="outline"><mat-label>selectedIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>animationDuration</mat-label>
+              <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" placeholder="500ms" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>color (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>backgroundColor (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+          </div>
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">disablePagination</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">stretchTabs</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="JSON">
+        <div style="padding: 12px; display: grid; gap: 12px;">
+          <div class="json-editor-toolbar" style="display:flex; gap:8px;">
+            <button mat-button (click)="formatJson()" [disabled]="!isValid"> 
+              <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>Formatar
+            </button>
+            <button mat-button (click)="reset()"> 
+              <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>Resetar
+            </button>
+          </div>
+
+          <mat-form-field appearance="outline" class="json-textarea-field" style="width:100%">
+            <mat-label>Configuração JSON</mat-label>
+            <textarea
+              matInput
+              [(ngModel)]="jsonText"
+              (ngModelChange)="onJsonTextChange($event)"
+              rows="22"
+              spellcheck="false"
+              style="font-family: monospace"
+            ></textarea>
+            <mat-hint *ngIf="isValid">JSON válido</mat-hint>
+            <mat-error *ngIf="!isValid && jsonText">JSON inválido: {{ errorMsg }}</mat-error>
+          </mat-form-field>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Estilo">
+        <div style="padding: 12px; display: grid; gap: 16px;">
+          <div style="display:flex; gap:8px; align-items:center; flex-wrap: wrap;">
+            <span style="opacity:.75">Presets:</span>
+            <button mat-button color="primary" (click)="applyPreset('primary')">
+              <mat-icon [praxisIcon]="'palette'"></mat-icon>
+              Primário
+            </button>
+            <button mat-button (click)="applyPreset('neutral')">
+              <mat-icon [praxisIcon]="'contrast'"></mat-icon>
+              Neutro
+            </button>
+            <button mat-button (click)="applyPreset('high-contrast')">
+              <mat-icon [praxisIcon]="'visibility'"></mat-icon>
+              Alto contraste
+            </button>
+            <button mat-button (click)="clearTokens()">
+              <mat-icon [praxisIcon]="'backspace'"></mat-icon>
+              Limpar tokens
+            </button>
+          </div>
+
+          <div style="display:grid; gap:8px; grid-template-columns: repeat(2, minmax(220px, 1fr));">
+            <mat-form-field appearance="outline">
+              <mat-label>Classe de tema (opcional)</mat-label>
+              <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="ex.: tabs-accented" />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Densidade</mat-label>
+              <select matNativeControl [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">padrão</option>
+                <option value="compact">compact</option>
+                <option value="comfortable">comfortable</option>
+                <option value="spacious">spacious</option>
+              </select>
+            </mat-form-field>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">Tokens (M3 aproximados)</h3>
+            <div style="display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px;">
+              <ng-container *ngFor="let t of tokenList">
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t.label }}</mat-label>
+                  <input matInput placeholder="var(--mat-sys-primary) / #RRGGBB" [ngModel]="appearance.tokens?.[t.key]" (ngModelChange)="onTokenChange(t.key, $event)" />
+                </mat-form-field>
+              </ng-container>
+            </div>
+            <p style="margin:8px 0 0; color: var(--mat-sys-on-surface-variant); font-size: 12px;">Dica: valores aceitam CSS vars (ex.: <code>var(--mat-sys-primary)</code>) ou cores hex/rgb.</p>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">CSS Personalizado</h3>
+            <mat-form-field appearance="outline" class="json-textarea-field" style="width:100%">
+              <mat-label>CSS a ser injetado no componente</mat-label>
+              <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" placeholder=".praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }"></textarea>
+            </mat-form-field>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">Snippet SCSS (para uso em styles.scss)</h3>
+            <pre style="white-space: pre-wrap; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px;">
+@use '@angular/material' as mat;
+{{ scssSnippet() }}
+            </pre>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Abas">
+        <div style="padding:12px; display:grid; gap:12px;">
+          <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar aba</button>
+          <div *ngIf="editedConfig.tabs?.length; else noTabs" style="display:grid; gap:10px;">
+            <div *ngFor="let t of editedConfig.tabs; let i = index" style="border:1px solid var(--mat-sys-outline-variant); padding:10px; border-radius:8px; display:grid; gap:8px;">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <strong style="flex:1">#{{ i+1 }}</strong>
+                <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+              </div>
+              <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 10px;">
+                <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+                  <input matInput [(ngModel)]="t.id" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Texto</mat-label>
+                  <input matInput [(ngModel)]="t.textLabel" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Label class</mat-label>
+                  <input matInput [(ngModel)]="t.labelClass" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Body class</mat-label>
+                  <input matInput [(ngModel)]="t.bodyClass" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>aria-label</mat-label>
+                  <input matInput [(ngModel)]="t.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>aria-labelledby</mat-label>
+                  <input matInput [(ngModel)]="t.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+              </div>
+              <mat-slide-toggle [(ngModel)]="t.disabled" (ngModelChange)="onAppearanceChange()">disabled</mat-slide-toggle>
+
+              <!-- Widgets (componentes dinâmicos) -->
+              <div style="border-top:1px solid var(--mat-sys-outline-variant); padding-top:8px; display:grid; gap:8px;">
+                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                  <mat-form-field appearance="outline" style="min-width:260px;">
+                    <mat-label>Adicionar componente</mat-label>
+                    <select matNativeControl [(ngModel)]="selectedTabWidgetId[i]">
+                      <option [ngValue]="''">(selecione)</option>
+                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    </select>
+                  </mat-form-field>
+          <button mat-stroked-button (click)="addWidgetToTab(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar</button>
+                  <span style="flex:1"></span>
+                  <mat-form-field appearance="outline" style="width:240px;">
+                    <mat-label>resourcePath</mat-label>
+                    <input matInput [(ngModel)]="quickResourcePathTab[i]" placeholder="ex.: usuarios" />
+                  </mat-form-field>
+                  <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>Form</button>
+                  <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>Tabela</button>
+                  <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>CRUD</button>
+                </div>
+
+                <div *ngIf="t.widgets?.length" style="display:grid; gap:8px;" cdkDropList [cdkDropListData]="t.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
+                  <div *ngFor="let w of t.widgets; let wi = index" cdkDrag style="border:1px dashed var(--mat-sys-outline-variant); padding:8px; border-radius:6px;">
+                    <div style="display:flex; align-items:center; gap:8px;">
+                      <button mat-icon-button cdkDragHandle matTooltip="Arrastar para reordenar" aria-label="Arrastar para reordenar">
+                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                      </button>
+                      <strong style="flex:1">{{ getCompName(w.id) }}</strong>
+                      <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" matTooltip="Remover componente" aria-label="Remover componente"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                    </div>
+                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px;">
+                      <mat-form-field appearance="outline">
+                        <mat-label>inputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline">
+                        <mat-label>outputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <ng-template #noTabs><em>Nenhuma aba definida.</em></ng-template>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Acessibilidade">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">highContrast</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">reduceMotion</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Links">
+        <div style="padding:12px; display:grid; gap:12px;">
+          <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>Adicionar link</button>
+          <div *ngIf="nav.links?.length; else noLinks" style="display:grid; gap:10px;">
+            <div *ngFor="let l of nav.links; let i = index" style="border:1px solid var(--mat-sys-outline-variant); padding:10px; border-radius:8px; display:grid; gap:8px;">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <strong style="flex:1">#{{ i+1 }}</strong>
+                <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+              </div>
+              <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 10px;">
+                <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+                  <input matInput [(ngModel)]="l.id" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Label</mat-label>
+                  <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+              </div>
+              <div style="display:flex; gap:10px; flex-wrap:wrap;">
+                <mat-slide-toggle [(ngModel)]="l.active" (ngModelChange)="onAppearanceChange()">active</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">disabled</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+              </div>
+
+              <!-- Widgets para Links -->
+              <div style="border-top:1px solid var(--mat-sys-outline-variant); padding-top:8px; display:grid; gap:8px;">
+                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                  <mat-form-field appearance="outline" style="min-width:260px;">
+                    <mat-label>Adicionar componente</mat-label>
+                    <select matNativeControl [(ngModel)]="selectedLinkWidgetId[i]">
+                      <option [ngValue]="''">(selecione)</option>
+                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    </select>
+                  </mat-form-field>
+                  <button mat-stroked-button (click)="addWidgetToLink(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar</button>
+                  <span style="flex:1"></span>
+                  <mat-form-field appearance="outline" style="width:240px;">
+                    <mat-label>resourcePath</mat-label>
+                    <input matInput [(ngModel)]="quickResourcePathLink[i]" placeholder="ex.: usuarios" />
+                  </mat-form-field>
+                  <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>Form</button>
+                  <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>Tabela</button>
+                  <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>CRUD</button>
+                </div>
+
+                <div *ngIf="l.widgets?.length" style="display:grid; gap:8px;" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
+                  <div *ngFor="let w of l.widgets; let wi = index" cdkDrag style="border:1px dashed var(--mat-sys-outline-variant); padding:8px; border-radius:6px;">
+                    <div style="display:flex; align-items:center; gap:8px;">
+                      <button mat-icon-button cdkDragHandle matTooltip="Arrastar para reordenar" aria-label="Arrastar para reordenar">
+                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                      </button>
+                      <strong style="flex:1">{{ getCompName(w.id) }}</strong>
+                      <button mat-icon-button color="warn" (click)="removeWidgetFromLink(i, wi)" matTooltip="Remover componente" aria-label="Remover componente"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                    </div>
+                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px;">
+                      <mat-form-field appearance="outline">
+                        <mat-label>inputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsLink(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline">
+                        <mat-label>outputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsLink(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <ng-template #noLinks><em>Nenhum link definido.</em></ng-template>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.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: i10.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: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisTabsConfigEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-tabs-config-editor',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatTabsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        PraxisIconDirective,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        DragDropModule,
+                        MatTooltipModule,
+                    ],
+                    template: `
+    <mat-tab-group>
+      <mat-tab label="Comportamento">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">closeable</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">lazyLoad (planejado)</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">reorderable (planejado)</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="Grupo">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px;">
+            <mat-form-field appearance="outline"><mat-label>Alinhamento</mat-label>
+              <select matNativeControl [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">padrão</option>
+                <option value="start">start</option>
+                <option value="center">center</option>
+                <option value="end">end</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>Header</mat-label>
+              <select matNativeControl [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">above</option>
+                <option value="above">above</option>
+                <option value="below">below</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>selectedIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="group.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>animationDuration</mat-label>
+              <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" placeholder="500ms" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>contentTabIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="group.contentTabIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>color (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>backgroundColor (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>aria-label</mat-label>
+              <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>aria-labelledby</mat-label>
+              <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+          </div>
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">dynamicHeight</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">disablePagination</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">preserveContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">stretchTabs</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Navegação">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px;">
+            <mat-form-field appearance="outline"><mat-label>selectedIndex</mat-label>
+              <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>animationDuration</mat-label>
+              <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" placeholder="500ms" />
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>color (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+            <mat-form-field appearance="outline"><mat-label>backgroundColor (M2)</mat-label>
+              <select matNativeControl [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">(nenhum)</option>
+                <option value="primary">primary</option>
+                <option value="accent">accent</option>
+                <option value="warn">warn</option>
+              </select>
+            </mat-form-field>
+          </div>
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">disablePagination</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">stretchTabs</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="JSON">
+        <div style="padding: 12px; display: grid; gap: 12px;">
+          <div class="json-editor-toolbar" style="display:flex; gap:8px;">
+            <button mat-button (click)="formatJson()" [disabled]="!isValid"> 
+              <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>Formatar
+            </button>
+            <button mat-button (click)="reset()"> 
+              <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>Resetar
+            </button>
+          </div>
+
+          <mat-form-field appearance="outline" class="json-textarea-field" style="width:100%">
+            <mat-label>Configuração JSON</mat-label>
+            <textarea
+              matInput
+              [(ngModel)]="jsonText"
+              (ngModelChange)="onJsonTextChange($event)"
+              rows="22"
+              spellcheck="false"
+              style="font-family: monospace"
+            ></textarea>
+            <mat-hint *ngIf="isValid">JSON válido</mat-hint>
+            <mat-error *ngIf="!isValid && jsonText">JSON inválido: {{ errorMsg }}</mat-error>
+          </mat-form-field>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Estilo">
+        <div style="padding: 12px; display: grid; gap: 16px;">
+          <div style="display:flex; gap:8px; align-items:center; flex-wrap: wrap;">
+            <span style="opacity:.75">Presets:</span>
+            <button mat-button color="primary" (click)="applyPreset('primary')">
+              <mat-icon [praxisIcon]="'palette'"></mat-icon>
+              Primário
+            </button>
+            <button mat-button (click)="applyPreset('neutral')">
+              <mat-icon [praxisIcon]="'contrast'"></mat-icon>
+              Neutro
+            </button>
+            <button mat-button (click)="applyPreset('high-contrast')">
+              <mat-icon [praxisIcon]="'visibility'"></mat-icon>
+              Alto contraste
+            </button>
+            <button mat-button (click)="clearTokens()">
+              <mat-icon [praxisIcon]="'backspace'"></mat-icon>
+              Limpar tokens
+            </button>
+          </div>
+
+          <div style="display:grid; gap:8px; grid-template-columns: repeat(2, minmax(220px, 1fr));">
+            <mat-form-field appearance="outline">
+              <mat-label>Classe de tema (opcional)</mat-label>
+              <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="ex.: tabs-accented" />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Densidade</mat-label>
+              <select matNativeControl [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()">
+                <option [ngValue]="undefined">padrão</option>
+                <option value="compact">compact</option>
+                <option value="comfortable">comfortable</option>
+                <option value="spacious">spacious</option>
+              </select>
+            </mat-form-field>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">Tokens (M3 aproximados)</h3>
+            <div style="display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px;">
+              <ng-container *ngFor="let t of tokenList">
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t.label }}</mat-label>
+                  <input matInput placeholder="var(--mat-sys-primary) / #RRGGBB" [ngModel]="appearance.tokens?.[t.key]" (ngModelChange)="onTokenChange(t.key, $event)" />
+                </mat-form-field>
+              </ng-container>
+            </div>
+            <p style="margin:8px 0 0; color: var(--mat-sys-on-surface-variant); font-size: 12px;">Dica: valores aceitam CSS vars (ex.: <code>var(--mat-sys-primary)</code>) ou cores hex/rgb.</p>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">CSS Personalizado</h3>
+            <mat-form-field appearance="outline" class="json-textarea-field" style="width:100%">
+              <mat-label>CSS a ser injetado no componente</mat-label>
+              <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" placeholder=".praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }"></textarea>
+            </mat-form-field>
+          </div>
+
+          <div>
+            <h3 style="margin: 6px 0 8px;">Snippet SCSS (para uso em styles.scss)</h3>
+            <pre style="white-space: pre-wrap; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px;">
+@use '@angular/material' as mat;
+{{ scssSnippet() }}
+            </pre>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Abas">
+        <div style="padding:12px; display:grid; gap:12px;">
+          <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar aba</button>
+          <div *ngIf="editedConfig.tabs?.length; else noTabs" style="display:grid; gap:10px;">
+            <div *ngFor="let t of editedConfig.tabs; let i = index" style="border:1px solid var(--mat-sys-outline-variant); padding:10px; border-radius:8px; display:grid; gap:8px;">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <strong style="flex:1">#{{ i+1 }}</strong>
+                <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+              </div>
+              <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 10px;">
+                <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+                  <input matInput [(ngModel)]="t.id" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Texto</mat-label>
+                  <input matInput [(ngModel)]="t.textLabel" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Label class</mat-label>
+                  <input matInput [(ngModel)]="t.labelClass" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Body class</mat-label>
+                  <input matInput [(ngModel)]="t.bodyClass" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>aria-label</mat-label>
+                  <input matInput [(ngModel)]="t.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>aria-labelledby</mat-label>
+                  <input matInput [(ngModel)]="t.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+              </div>
+              <mat-slide-toggle [(ngModel)]="t.disabled" (ngModelChange)="onAppearanceChange()">disabled</mat-slide-toggle>
+
+              <!-- Widgets (componentes dinâmicos) -->
+              <div style="border-top:1px solid var(--mat-sys-outline-variant); padding-top:8px; display:grid; gap:8px;">
+                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                  <mat-form-field appearance="outline" style="min-width:260px;">
+                    <mat-label>Adicionar componente</mat-label>
+                    <select matNativeControl [(ngModel)]="selectedTabWidgetId[i]">
+                      <option [ngValue]="''">(selecione)</option>
+                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    </select>
+                  </mat-form-field>
+          <button mat-stroked-button (click)="addWidgetToTab(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar</button>
+                  <span style="flex:1"></span>
+                  <mat-form-field appearance="outline" style="width:240px;">
+                    <mat-label>resourcePath</mat-label>
+                    <input matInput [(ngModel)]="quickResourcePathTab[i]" placeholder="ex.: usuarios" />
+                  </mat-form-field>
+                  <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>Form</button>
+                  <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>Tabela</button>
+                  <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>CRUD</button>
+                </div>
+
+                <div *ngIf="t.widgets?.length" style="display:grid; gap:8px;" cdkDropList [cdkDropListData]="t.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
+                  <div *ngFor="let w of t.widgets; let wi = index" cdkDrag style="border:1px dashed var(--mat-sys-outline-variant); padding:8px; border-radius:6px;">
+                    <div style="display:flex; align-items:center; gap:8px;">
+                      <button mat-icon-button cdkDragHandle matTooltip="Arrastar para reordenar" aria-label="Arrastar para reordenar">
+                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                      </button>
+                      <strong style="flex:1">{{ getCompName(w.id) }}</strong>
+                      <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" matTooltip="Remover componente" aria-label="Remover componente"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                    </div>
+                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px;">
+                      <mat-form-field appearance="outline">
+                        <mat-label>inputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline">
+                        <mat-label>outputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <ng-template #noTabs><em>Nenhuma aba definida.</em></ng-template>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Acessibilidade">
+        <div style="padding: 12px; display:grid; gap: 12px;">
+          <div style="display:flex; gap: 10px; flex-wrap: wrap;">
+            <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">highContrast</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">reduceMotion</mat-slide-toggle>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Links">
+        <div style="padding:12px; display:grid; gap:12px;">
+          <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>Adicionar link</button>
+          <div *ngIf="nav.links?.length; else noLinks" style="display:grid; gap:10px;">
+            <div *ngFor="let l of nav.links; let i = index" style="border:1px solid var(--mat-sys-outline-variant); padding:10px; border-radius:8px; display:grid; gap:8px;">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <strong style="flex:1">#{{ i+1 }}</strong>
+                <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+              </div>
+              <div style="display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 10px;">
+                <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+                  <input matInput [(ngModel)]="l.id" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>Label</mat-label>
+                  <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
+              </div>
+              <div style="display:flex; gap:10px; flex-wrap:wrap;">
+                <mat-slide-toggle [(ngModel)]="l.active" (ngModelChange)="onAppearanceChange()">active</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">disabled</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">disableRipple</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">fitInkBarToContent</mat-slide-toggle>
+              </div>
+
+              <!-- Widgets para Links -->
+              <div style="border-top:1px solid var(--mat-sys-outline-variant); padding-top:8px; display:grid; gap:8px;">
+                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
+                  <mat-form-field appearance="outline" style="min-width:260px;">
+                    <mat-label>Adicionar componente</mat-label>
+                    <select matNativeControl [(ngModel)]="selectedLinkWidgetId[i]">
+                      <option [ngValue]="''">(selecione)</option>
+                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    </select>
+                  </mat-form-field>
+                  <button mat-stroked-button (click)="addWidgetToLink(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar</button>
+                  <span style="flex:1"></span>
+                  <mat-form-field appearance="outline" style="width:240px;">
+                    <mat-label>resourcePath</mat-label>
+                    <input matInput [(ngModel)]="quickResourcePathLink[i]" placeholder="ex.: usuarios" />
+                  </mat-form-field>
+                  <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>Form</button>
+                  <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>Tabela</button>
+                  <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>CRUD</button>
+                </div>
+
+                <div *ngIf="l.widgets?.length" style="display:grid; gap:8px;" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
+                  <div *ngFor="let w of l.widgets; let wi = index" cdkDrag style="border:1px dashed var(--mat-sys-outline-variant); padding:8px; border-radius:6px;">
+                    <div style="display:flex; align-items:center; gap:8px;">
+                      <button mat-icon-button cdkDragHandle matTooltip="Arrastar para reordenar" aria-label="Arrastar para reordenar">
+                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                      </button>
+                      <strong style="flex:1">{{ getCompName(w.id) }}</strong>
+                      <button mat-icon-button color="warn" (click)="removeWidgetFromLink(i, wi)" matTooltip="Remover componente" aria-label="Remover componente"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                    </div>
+                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px;">
+                      <mat-form-field appearance="outline">
+                        <mat-label>inputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsLink(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline">
+                        <mat-label>outputs (JSON)</mat-label>
+                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsLink(i, wi, $event)"></textarea>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <ng-template #noLinks><em>Nenhum link definido.</em></ng-template>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_PANEL_DATA]
+                }] }, { type: i1.ComponentMetadataRegistry }] });
+
+class TabsQuickSetupComponent {
+    model = { mode: 'group', labels: [], dynamicHeight: true, stretchTabs: true };
+    initial = { ...this.model };
+    newLabel = '';
+    isDirty$ = new BehaviorSubject(false);
+    isValid$ = new BehaviorSubject(false);
+    isBusy$ = new BehaviorSubject(false);
+    constructor(data) {
+        // Optionally seed from existing config
+        const cfg = data?.config || undefined;
+        if (cfg) {
+            if (cfg.tabs?.length) {
+                this.model.mode = 'group';
+                this.model.labels = cfg.tabs.map((t) => t.textLabel || 'Aba');
+                this.model.dynamicHeight = cfg.group?.dynamicHeight ?? true;
+                this.model.stretchTabs = cfg.group?.stretchTabs ?? true;
+            }
+            else if (cfg.nav?.links?.length) {
+                this.model.mode = 'nav';
+                this.model.labels = cfg.nav.links.map((l) => l.label || 'Link');
+                this.model.stretchTabs = cfg.nav.stretchTabs ?? true;
+            }
+            this.initial = { ...this.model, labels: [...this.model.labels] };
+        }
+        this.updateState();
+    }
+    updateState() {
+        const dirty = JSON.stringify(this.model) !== JSON.stringify(this.initial);
+        this.isDirty$.next(dirty);
+        this.isValid$.next(this.model.labels.length > 0);
+    }
+    setMode(mode) {
+        this.model.mode = mode;
+        this.updateState();
+    }
+    addLabel() {
+        const l = (this.newLabel || '').trim();
+        if (!l)
+            return;
+        this.model.labels.push(l);
+        this.newLabel = '';
+        this.updateState();
+    }
+    removeLabel(i) {
+        this.model.labels.splice(i, 1);
+        this.updateState();
+    }
+    buildConfig() {
+        if (this.model.mode === 'group') {
+            return {
+                group: {
+                    dynamicHeight: !!this.model.dynamicHeight,
+                    stretchTabs: !!this.model.stretchTabs,
+                    selectedIndex: 0,
+                },
+                tabs: this.model.labels.map((label, idx) => ({ id: `tab${idx + 1}`, textLabel: label })),
+            };
+        }
+        return {
+            nav: {
+                selectedIndex: 0,
+                stretchTabs: !!this.model.stretchTabs,
+                links: this.model.labels.map((label, idx) => ({ id: `link${idx + 1}`, label })),
+            },
+        };
+    }
+    getSettingsValue() {
+        return { config: this.buildConfig() };
+    }
+    onSave() {
+        return { config: this.buildConfig() };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsQuickSetupComponent, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: TabsQuickSetupComponent, isStandalone: true, selector: "praxis-tabs-quick-setup", ngImport: i0, template: `
+    <div style="display:grid; gap: 12px; padding: 8px;">
+      <div style="display:flex; gap: 12px; align-items:center; flex-wrap:wrap;">
+        <button mat-stroked-button [color]="model.mode==='group' ? 'primary' : undefined" (click)="setMode('group')">
+          <mat-icon [praxisIcon]="'tab'"></mat-icon>
+          Abas (TabGroup)
+        </button>
+        <button mat-stroked-button [color]="model.mode==='nav' ? 'primary' : undefined" (click)="setMode('nav')">
+          <mat-icon [praxisIcon]="'segment'"></mat-icon>
+          Navegação (TabNav)
+        </button>
+      </div>
+
+      <div style="display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items:start;">
+        <mat-form-field appearance="outline">
+          <mat-label>Adicionar label</mat-label>
+          <input matInput [(ngModel)]="newLabel" (keyup.enter)="addLabel()" placeholder="Ex.: Dados Gerais" />
+        </mat-form-field>
+        <button mat-flat-button color="primary" (click)="addLabel()">
+          <mat-icon [praxisIcon]="'add'"></mat-icon>
+          Adicionar
+        </button>
+      </div>
+
+      <div *ngIf="model.labels.length; else emptyLabels" style="display:flex; flex-wrap:wrap; gap: 8px;">
+        <div *ngFor="let l of model.labels; let i = index" class="chip">
+          <span>{{ l }}</span>
+          <button mat-icon-button (click)="removeLabel(i)"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+        </div>
+      </div>
+      <ng-template #emptyLabels>
+        <em>Adicione 1 ou mais labels para criar as abas.</em>
+      </ng-template>
+
+      <div style="display:flex; gap: 12px; flex-wrap:wrap;">
+        <mat-slide-toggle [(ngModel)]="model.dynamicHeight">dynamicHeight</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="model.stretchTabs">stretchTabs</mat-slide-toggle>
+      </div>
+    </div>
+  `, isInline: true, styles: [".chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsQuickSetupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-tabs-quick-setup', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        PraxisIconDirective,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                    ], template: `
+    <div style="display:grid; gap: 12px; padding: 8px;">
+      <div style="display:flex; gap: 12px; align-items:center; flex-wrap:wrap;">
+        <button mat-stroked-button [color]="model.mode==='group' ? 'primary' : undefined" (click)="setMode('group')">
+          <mat-icon [praxisIcon]="'tab'"></mat-icon>
+          Abas (TabGroup)
+        </button>
+        <button mat-stroked-button [color]="model.mode==='nav' ? 'primary' : undefined" (click)="setMode('nav')">
+          <mat-icon [praxisIcon]="'segment'"></mat-icon>
+          Navegação (TabNav)
+        </button>
+      </div>
+
+      <div style="display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items:start;">
+        <mat-form-field appearance="outline">
+          <mat-label>Adicionar label</mat-label>
+          <input matInput [(ngModel)]="newLabel" (keyup.enter)="addLabel()" placeholder="Ex.: Dados Gerais" />
+        </mat-form-field>
+        <button mat-flat-button color="primary" (click)="addLabel()">
+          <mat-icon [praxisIcon]="'add'"></mat-icon>
+          Adicionar
+        </button>
+      </div>
+
+      <div *ngIf="model.labels.length; else emptyLabels" style="display:flex; flex-wrap:wrap; gap: 8px;">
+        <div *ngFor="let l of model.labels; let i = index" class="chip">
+          <span>{{ l }}</span>
+          <button mat-icon-button (click)="removeLabel(i)"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+        </div>
+      </div>
+      <ng-template #emptyLabels>
+        <em>Adicione 1 ou mais labels para criar as abas.</em>
+      </ng-template>
+
+      <div style="display:flex; gap: 12px; flex-wrap:wrap;">
+        <mat-slide-toggle [(ngModel)]="model.dynamicHeight">dynamicHeight</mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="model.stretchTabs">stretchTabs</mat-slide-toggle>
+      </div>
+    </div>
+  `, styles: [".chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:16px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_PANEL_DATA]
+                }] }] });
+
+class PraxisTabs {
+    settings = inject(SettingsPanelService);
+    storage = inject(CONFIG_STORAGE);
+    snack = inject(MatSnackBar);
+    config = null;
+    tabsId;
+    editModeEnabled = false;
+    form = null;
+    context = null;
+    animationDone = new EventEmitter();
+    focusChange = new EventEmitter();
+    selectedIndexChange = new EventEmitter();
+    selectedTabChange = new EventEmitter();
+    indexFocused = new EventEmitter();
+    selectFocusedIndex = new EventEmitter();
+    widgetEvent = new EventEmitter();
+    // Signals to manage local state for selection in Nav mode and Group mode
+    currentNavIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentNavIndex" }] : []));
+    selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexSignal" }] : []));
+    groupLoaded = new Set();
+    navLoaded = new Set();
+    ngOnInit() {
+        // Load stored config if tabsId provided
+        if (this.tabsId) {
+            const stored = this.storage.loadConfig(this.storageKey());
+            if (stored) {
+                this.config = stored;
+            }
+        }
+        // Initialize selected indices from config
+        this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+        this.currentNavIndex.set(this.config?.nav?.selectedIndex ?? 0);
+        // Mark initial selections as loaded for lazy mode
+        this.groupLoaded.add(this.selectedIndexSignal() ?? 0);
+        this.navLoaded.add(this.currentNavIndex() ?? 0);
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && this.config) {
+            // Reset loaded caches on config change and seed with current selections
+            this.groupLoaded.clear();
+            this.navLoaded.clear();
+            // Keep indices in sync when config input changes
+            this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+            this.currentNavIndex.set(this.config?.nav?.selectedIndex ?? 0);
+            this.groupLoaded.add(this.selectedIndexSignal() ?? 0);
+            this.navLoaded.add(this.currentNavIndex() ?? 0);
+            // Persist when tabsId provided
+            if (this.tabsId) {
+                this.storage.saveConfig(this.storageKey(), this.config);
+            }
+        }
+    }
+    isNavMode() {
+        return !!this.config?.nav && !!this.config?.nav?.links?.length;
+    }
+    effectiveAnimationDuration() {
+        const reduce = this.config?.accessibility?.reduceMotion;
+        if (reduce)
+            return '0ms';
+        return (this.config?.group?.animationDuration || this.config?.nav?.animationDuration || '500ms');
+    }
+    getNavActive(i) {
+        return this.currentNavIndex() === i;
+    }
+    onNavClick(i) {
+        if (!this.config?.nav)
+            return;
+        this.currentNavIndex.set(i);
+        // Lazy: mark as loaded
+        this.navLoaded.add(i);
+        // Emit as index change for consumers to track
+        this.selectedIndexChange.emit(i);
+    }
+    onNavDrop(event) {
+        if (!this.config?.nav?.links)
+            return;
+        const prev = event.previousIndex;
+        const curr = event.currentIndex;
+        if (prev === curr)
+            return;
+        const selectedId = this.config.nav.links[this.currentNavIndex()]?.id;
+        this.config = produce(this.config, (draft) => {
+            const arr = draft.nav.links;
+            const [moved] = arr.splice(prev, 1);
+            arr.splice(curr, 0, moved);
+        });
+        // Update selected index based on id
+        if (selectedId) {
+            const idx = this.config.nav.links.findIndex((l) => l.id === selectedId);
+            if (idx >= 0)
+                this.currentNavIndex.set(idx);
+        }
+        else {
+            // If no id, try to preserve selection around movement
+            if (this.currentNavIndex() === prev)
+                this.currentNavIndex.set(curr);
+        }
+        // Reset lazy cache for nav except current
+        const currIdx = this.currentNavIndex();
+        this.navLoaded.clear();
+        this.navLoaded.add(currIdx);
+    }
+    onSelectedIndexChange(index) {
+        this.selectedIndexSignal.set(index);
+        // Update config immutably
+        if (this.config) {
+            this.config = produce(this.config, (draft) => {
+                if (!draft.group) {
+                    draft.group = { selectedIndex: index };
+                }
+                else {
+                    draft.group.selectedIndex = index;
+                }
+            });
+            if (this.tabsId) {
+                this.storage.saveConfig(this.storageKey(), this.config);
+            }
+        }
+        // Lazy: mark as loaded
+        this.groupLoaded.add(index);
+        this.selectedIndexChange.emit(index);
+    }
+    closeTab(index) {
+        if (!this.config?.tabs)
+            return;
+        this.config = produce(this.config, (draft) => {
+            draft.tabs.splice(index, 1);
+        });
+        if (this.tabsId)
+            this.storage.saveConfig(this.storageKey(), this.config);
+    }
+    moveTab(index, delta) {
+        if (!this.config?.tabs)
+            return;
+        const to = index + delta;
+        if (to < 0 || to >= this.config.tabs.length)
+            return;
+        const wasSelected = this.selectedIndexSignal() === index;
+        this.config = produce(this.config, (draft) => {
+            const arr = draft.tabs;
+            const [m] = arr.splice(index, 1);
+            arr.splice(to, 0, m);
+            if (!draft.group)
+                draft.group = { selectedIndex: to };
+            else if (wasSelected)
+                draft.group.selectedIndex = to;
+            else if (draft.group.selectedIndex != null) {
+                // Adjust selection if it lies between moved indices
+                const sel = draft.group.selectedIndex;
+                if (index < sel && to >= sel)
+                    draft.group.selectedIndex = sel - 1;
+                else if (index > sel && to <= sel)
+                    draft.group.selectedIndex = sel + 1;
+            }
+        });
+        this.selectedIndexSignal.set(this.config.group?.selectedIndex ?? this.selectedIndexSignal());
+        // Reset lazy cache for group except current
+        const sel = this.selectedIndexSignal() ?? 0;
+        this.groupLoaded.clear();
+        this.groupLoaded.add(sel);
+    }
+    openEditor() {
+        const ref = this.settings.open({
+            id: `praxis-tabs-editor:${this.tabsId || 'default'}`,
+            title: 'Configurar Tabs',
+            content: {
+                component: PraxisTabsConfigEditor,
+                inputs: { config: this.config, tabsId: this.tabsId },
+            },
+        });
+        // Essential preview: apply updates without closing
+        ref.applied$.subscribe((value) => {
+            const nextCfg = value?.config || value;
+            if (nextCfg) {
+                this.config = produce(this.config || {}, () => nextCfg);
+                if (this.tabsId)
+                    this.storage.saveConfig(this.storageKey(), this.config);
+                this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+                this.currentNavIndex.set(this.config?.nav?.selectedIndex ?? 0);
+            }
+        });
+        ref.saved$.subscribe((value) => {
+            const nextCfg = value?.config || value;
+            if (nextCfg) {
+                this.config = produce(this.config || {}, () => nextCfg);
+                if (this.tabsId)
+                    this.storage.saveConfig(this.storageKey(), this.config);
+                // Sync indices
+                this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+                this.currentNavIndex.set(this.config?.nav?.selectedIndex ?? 0);
+            }
+        });
+    }
+    addEmptyTab() {
+        const next = produce(this.config || {}, (draft) => {
+            if (!draft.group)
+                draft.group = { selectedIndex: 0 };
+            if (!draft.tabs)
+                draft.tabs = [];
+            draft.tabs.push({ id: `tab${(draft.tabs.length || 0) + 1}`, textLabel: 'Nova aba' });
+            draft.group.selectedIndex = (draft.tabs.length || 1) - 1;
+        });
+        this.config = next;
+        if (this.tabsId)
+            this.storage.saveConfig(this.storageKey(), this.config);
+        this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+    }
+    /** Clears persisted tabs configuration to fallback to defaults */
+    resetPreferences() {
+        if (!this.tabsId)
+            return;
+        try {
+            this.storage.clearConfig(this.storageKey());
+        }
+        catch { }
+        try {
+            this.snack.open('Preferências de Tabs redefinidas', undefined, { duration: 2000 });
+        }
+        catch { }
+        // keep current in-memory config; caller may choose to reload
+    }
+    openQuickSetup() {
+        const ref = this.settings.open({
+            id: `praxis-tabs-quick-setup:${this.tabsId || 'default'}`,
+            title: 'Criar abas rapidamente',
+            content: {
+                component: TabsQuickSetupComponent,
+                inputs: { config: this.config },
+            },
+        });
+        const apply = (value) => {
+            const nextCfg = value?.config || value;
+            if (nextCfg) {
+                this.config = produce(this.config || {}, () => nextCfg);
+                if (this.tabsId)
+                    this.storage.saveConfig(this.storageKey(), this.config);
+                this.selectedIndexSignal.set(this.config?.group?.selectedIndex ?? 0);
+                this.currentNavIndex.set(this.config?.nav?.selectedIndex ?? 0);
+            }
+        };
+        ref.applied$.subscribe(apply);
+        ref.saved$.subscribe(apply);
+    }
+    storageKey() {
+        return `tabs:${this.tabsId}`;
+    }
+    // =====================
+    // Lazy load helpers
+    // =====================
+    isLazy() {
+        return !!this.config?.behavior?.lazyLoad;
+    }
+    groupContentReady(index) {
+        return !this.isLazy() || this.groupLoaded.has(index) || this.selectedIndexSignal() === index;
+    }
+    navContentReady(index) {
+        return !this.isLazy() || this.navLoaded.has(index) || this.currentNavIndex() === index;
+    }
+    isEmptyGlobal() {
+        const hasTabs = !!(this.config?.tabs && this.config.tabs.length > 0);
+        const hasLinks = !!(this.config?.nav?.links && this.config.nav.links.length > 0);
+        return !(hasTabs || hasLinks);
+    }
+    emitWidgetEvent(loc, ev) {
+        this.widgetEvent.emit({ ...loc, ...ev });
+    }
+    styleCss() {
+        const t = this.config?.appearance?.tokens;
+        if (!t)
+            return null;
+        const scope = `.praxis-tabs-root[data-tabs-id="${(this.tabsId || 'default').replace(/"/g, '')}"]`;
+        const rules = [];
+        const push = (selector, decls) => {
+            rules.push(`${scope} ${selector}{${decls.join('')}}`);
+        };
+        // Active indicator underline
+        if (t['active-indicator-color']) {
+            push(' .mat-mdc-tab .mdc-tab-indicator__content--underline', [`background-color:${t['active-indicator-color']}!important;`]);
+        }
+        // Active label
+        if (t['active-label-text-color']) {
+            push(' .mdc-tab--active .mdc-tab__text-label', [
+                `color:${t['active-label-text-color']}!important;`,
+            ]);
+        }
+        if (t['active-hover-label-text-color']) {
+            push(' .mdc-tab--active:hover .mdc-tab__text-label', [
+                `color:${t['active-hover-label-text-color']}!important;`,
+            ]);
+        }
+        if (t['active-focus-label-text-color']) {
+            push(' .mdc-tab--active:focus .mdc-tab__text-label', [
+                `color:${t['active-focus-label-text-color']}!important;`,
+            ]);
+        }
+        if (t['active-focus-indicator-color']) {
+            push(' .mdc-tab--active:focus .mdc-tab-indicator__content--underline', [
+                `background-color:${t['active-focus-indicator-color']}!important;`,
+            ]);
+        }
+        if (t['active-hover-indicator-color']) {
+            push(' .mdc-tab--active:hover .mdc-tab-indicator__content--underline', [
+                `background-color:${t['active-hover-indicator-color']}!important;`,
+            ]);
+        }
+        // Inactive label
+        if (t['inactive-label-text-color']) {
+            push(' .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label', [
+                `color:${t['inactive-label-text-color']}!important;`,
+            ]);
+        }
+        if (t['inactive-hover-label-text-color']) {
+            push(' .mdc-tab:not(.mdc-tab--active):hover .mdc-tab__text-label', [
+                `color:${t['inactive-hover-label-text-color']}!important;`,
+            ]);
+        }
+        if (t['inactive-focus-label-text-color']) {
+            push(' .mdc-tab:not(.mdc-tab--active):focus .mdc-tab__text-label', [
+                `color:${t['inactive-focus-label-text-color']}!important;`,
+            ]);
+        }
+        // Pagination chevrons
+        if (t['pagination-icon-color']) {
+            push(' .mat-mdc-tab-header-pagination-chevron', [
+                `color:${t['pagination-icon-color']}!important;`,
+            ]);
+        }
+        // Divider / background
+        const containerDecls = [];
+        if (t['divider-color']) {
+            containerDecls.push(`border-bottom-color:${t['divider-color']}!important;`);
+        }
+        if (containerDecls.length) {
+            push(' .mat-mdc-tab-header', containerDecls);
+        }
+        if (t['background-color']) {
+            push(' .mat-mdc-tab-header', [`background:${t['background-color']}!important;`]);
+        }
+        return rules.length ? rules.join('\n') : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", editModeEnabled: "editModeEnabled", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", widgetEvent: "widgetEvent" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="praxis-tabs-root"
+      [class.density-compact]="config?.appearance?.density === 'compact'"
+      [class.density-comfortable]="config?.appearance?.density === 'comfortable'"
+      [class.density-spacious]="config?.appearance?.density === 'spacious'"
+      [class.high-contrast]="config?.accessibility?.highContrast"
+      [class.reduce-motion]="config?.accessibility?.reduceMotion"
+      [ngClass]="config?.appearance?.themeClass || ''"
+      [attr.data-tabs-id]="tabsId || 'default'"
+    >
+      <!-- Inline custom CSS, if provided -->
+      <style *ngIf="config?.appearance?.customCss" [innerHTML]="config?.appearance?.customCss"></style>
+      <!-- Runtime style derived from tokens -->
+      <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
+
+      <!-- Empty state (global) -->
+      <ng-container *ngIf="isEmptyGlobal(); else notEmpty">
+        <praxis-empty-state-card
+          icon="tab"
+          [title]="'Nenhuma aba configurada'"
+          [description]="'Crie rapidamente suas abas ou abra o editor completo.'"
+          [primaryAction]="{ label: 'Criar abas rapidamente', icon: 'add', action: openQuickSetup.bind(this) }"
+          [secondaryActions]="[
+            { label: 'Adicionar aba vazia', icon: 'tab', action: addEmptyTab.bind(this) },
+            { label: 'Abrir editor completo', icon: 'tune', action: openEditor.bind(this) }
+          ]"
+        ></praxis-empty-state-card>
+      </ng-container>
+
+      <ng-template #notEmpty>
+      <!-- Tab Nav variant -->
+      <ng-container *ngIf="isNavMode(); else groupMode">
+        <nav
+          mat-tab-nav-bar
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListDisabled]="!config?.behavior?.reorderable"
+          (cdkDropListDropped)="onNavDrop($event)"
+          [disablePagination]="config?.nav?.disablePagination"
+          [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
+          [mat-stretch-tabs]="config?.nav?.stretchTabs"
+          [color]="config?.nav?.color"
+          [backgroundColor]="config?.nav?.backgroundColor"
+          [selectedIndex]="currentNavIndex()"
+          [attr.aria-label]="config?.group?.ariaLabel || null"
+          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+          [animationDuration]="effectiveAnimationDuration()"
+          (indexFocused)="indexFocused.emit($event)"
+          (selectFocusedIndex)="selectFocusedIndex.emit($event)"
+        >
+          <a
+            mat-tab-link
+            *ngFor="let link of config?.nav?.links; let i = index"
+            cdkDrag
+            [cdkDragDisabled]="!config?.behavior?.reorderable"
+            cdkDragLockAxis="x"
+            [active]="getNavActive(i)"
+            [disabled]="link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || link.disableRipple"
+            [fitInkBarToContent]="link.fitInkBarToContent || false"
+            [id]="link.id || ''"
+            (click)="onNavClick(i)"
+          >
+            <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
+              <mat-icon fontIcon="drag_indicator"></mat-icon>
+            </span>
+            {{ link.label }}
+          </a>
+        </nav>
+
+        <div class="praxis-tabnav-content" *ngIf="currentNavIndex() >= 0">
+          <ng-container
+            *ngIf="config?.nav?.links?.[currentNavIndex()] as l"
+          >
+            <ng-container *ngIf="(l.content?.length || l.widgets?.length) && navContentReady(currentNavIndex()); else emptyNav">
+              <ng-container *ngIf="l.content && form">
+                <ng-container
+                  dynamicFieldLoader
+                  [fields]="l.content || []"
+                  [formGroup]="form!"
+                ></ng-container>
+              </ng-container>
+              <ng-container *ngIf="l.widgets?.length">
+                <ng-container *ngFor="let w of l.widgets; let wi = index">
+                  <ng-container
+                    [dynamicWidgetLoader]="w"
+                    [context]="context || {}"
+                    (widgetEvent)="emitWidgetEvent({ linkId: l.id, linkIndex: currentNavIndex() }, $event)"
+                  ></ng-container>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+            <ng-template #emptyNav>
+              <praxis-empty-state-card
+                [inline]="true"
+                icon="add_to_queue"
+                [title]="'Sem conteúdo neste link'"
+                [description]="'Adicione conteúdo ou use o editor para configurar.'"
+                [primaryAction]="{ label: 'Abrir editor', icon: 'tune', action: openEditor.bind(this) }"
+              ></praxis-empty-state-card>
+            </ng-template>
+          </ng-container>
+        </div>
+      </ng-container>
+
+      <!-- Tab Group variant -->
+      <ng-template #groupMode>
+        <mat-tab-group
+          [dynamicHeight]="config?.group?.dynamicHeight"
+          [disableRipple]="config?.group?.disableRipple"
+          [disablePagination]="config?.group?.disablePagination"
+          [fitInkBarToContent]="config?.group?.fitInkBarToContent"
+          [headerPosition]="config?.group?.headerPosition ?? 'above'"
+          [preserveContent]="config?.group?.preserveContent"
+          [selectedIndex]="selectedIndexSignal()"
+          [mat-stretch-tabs]="config?.group?.stretchTabs"
+          [mat-align-tabs]="config?.group?.alignTabs || 'start'"
+          [color]="config?.group?.color"
+          [backgroundColor]="config?.group?.backgroundColor"
+          [animationDuration]="effectiveAnimationDuration()"
+          [attr.aria-label]="config?.group?.ariaLabel || null"
+          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+          (animationDone)="animationDone.emit()"
+          (focusChange)="focusChange.emit($event)"
+          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedTabChange)="selectedTabChange.emit($event)"
+          class="praxis-tabs-group"
+        >
+          <mat-tab
+            *ngFor="let t of config?.tabs; let i = index"
+            [disabled]="t.disabled"
+            [labelClass]="t.labelClass ?? ''"
+            [bodyClass]="t.bodyClass ?? ''"
+            [id]="t.id || ''"
+            [attr.aria-label]="t.ariaLabel || null"
+            [attr.aria-labelledby]="t.ariaLabelledby || null"
+          >
+            <ng-template mat-tab-label>
+              <span>{{ t.textLabel }}</span>
+              <button
+                *ngIf="config?.behavior?.closeable"
+                mat-icon-button
+                type="button"
+                (click)="closeTab(i); $event.stopPropagation()"
+                aria-label="Fechar aba"
+              >
+                <mat-icon fontIcon="close"></mat-icon>
+              </button>
+              <ng-container *ngIf="config?.behavior?.reorderable">
+                <button mat-icon-button type="button" (click)="moveTab(i, -1); $event.stopPropagation()" [disabled]="i===0" aria-label="Mover aba para esquerda">
+                  <mat-icon fontIcon="arrow_back"></mat-icon>
+                </button>
+                <button mat-icon-button type="button" (click)="moveTab(i, 1); $event.stopPropagation()" [disabled]="i===(config?.tabs?.length||1)-1" aria-label="Mover aba para direita">
+                  <mat-icon fontIcon="arrow_forward"></mat-icon>
+                </button>
+              </ng-container>
+            </ng-template>
+
+            <ng-template matTabContent>
+              <ng-container *ngIf="(t.content?.length || t.widgets?.length) && groupContentReady(i); else emptyTab">
+                <ng-container *ngIf="t.content && form">
+                  <ng-container
+                    dynamicFieldLoader
+                    [fields]="t.content || []"
+                    [formGroup]="form!"
+                  ></ng-container>
+                </ng-container>
+                <ng-container *ngIf="t.widgets?.length">
+                  <ng-container *ngFor="let w of t.widgets; let wi = index">
+                    <ng-container
+                      [dynamicWidgetLoader]="w"
+                      [context]="context || {}"
+                      (widgetEvent)="emitWidgetEvent({ tabId: t.id, tabIndex: i }, $event)"
+                    ></ng-container>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+              <ng-template #emptyTab>
+                <praxis-empty-state-card
+                  [inline]="true"
+                  icon="dashboard_customize"
+                  [title]="'Sem conteúdo nesta aba'"
+                  [description]="'Adicione conteúdo ou use o editor para configurar.'"
+                  [primaryAction]="{ label: 'Abrir editor', icon: 'tune', action: openEditor.bind(this) }"
+                ></praxis-empty-state-card>
+              </ng-template>
+            </ng-template>
+          </mat-tab>
+        </mat-tab-group>
+      </ng-template>
+      </ng-template>
+
+      <!-- Edit button -->
+      <button
+        *ngIf="editModeEnabled"
+        mat-fab
+        class="edit-fab"
+        aria-label="Editar tabs"
+        (click)="openEditor()"
+      >
+        <mat-icon fontIcon="edit"></mat-icon>
+      </button>
+      <button
+        *ngIf="editModeEnabled && tabsId"
+        mat-mini-fab
+        class="edit-fab"
+        style="right: 56px"
+        aria-label="Redefinir preferências de tabs"
+        (click)="resetPreferences()"
+        matTooltip="Redefinir preferências de tabs"
+      >
+        <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
+      </button>
+    </div>
+  `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.tab-empty{padding:16px;color:#0000008a;font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.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: i10.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: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-tabs', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatTabsModule,
+                        MatIconModule,
+                        PraxisIconDirective,
+                        MatButtonModule,
+                        DragDropModule,
+                        EmptyStateCardComponent,
+                        DynamicFieldLoaderDirective,
+                        DynamicWidgetLoaderDirective,
+                    ], template: `
+    <div
+      class="praxis-tabs-root"
+      [class.density-compact]="config?.appearance?.density === 'compact'"
+      [class.density-comfortable]="config?.appearance?.density === 'comfortable'"
+      [class.density-spacious]="config?.appearance?.density === 'spacious'"
+      [class.high-contrast]="config?.accessibility?.highContrast"
+      [class.reduce-motion]="config?.accessibility?.reduceMotion"
+      [ngClass]="config?.appearance?.themeClass || ''"
+      [attr.data-tabs-id]="tabsId || 'default'"
+    >
+      <!-- Inline custom CSS, if provided -->
+      <style *ngIf="config?.appearance?.customCss" [innerHTML]="config?.appearance?.customCss"></style>
+      <!-- Runtime style derived from tokens -->
+      <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
+
+      <!-- Empty state (global) -->
+      <ng-container *ngIf="isEmptyGlobal(); else notEmpty">
+        <praxis-empty-state-card
+          icon="tab"
+          [title]="'Nenhuma aba configurada'"
+          [description]="'Crie rapidamente suas abas ou abra o editor completo.'"
+          [primaryAction]="{ label: 'Criar abas rapidamente', icon: 'add', action: openQuickSetup.bind(this) }"
+          [secondaryActions]="[
+            { label: 'Adicionar aba vazia', icon: 'tab', action: addEmptyTab.bind(this) },
+            { label: 'Abrir editor completo', icon: 'tune', action: openEditor.bind(this) }
+          ]"
+        ></praxis-empty-state-card>
+      </ng-container>
+
+      <ng-template #notEmpty>
+      <!-- Tab Nav variant -->
+      <ng-container *ngIf="isNavMode(); else groupMode">
+        <nav
+          mat-tab-nav-bar
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListDisabled]="!config?.behavior?.reorderable"
+          (cdkDropListDropped)="onNavDrop($event)"
+          [disablePagination]="config?.nav?.disablePagination"
+          [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
+          [mat-stretch-tabs]="config?.nav?.stretchTabs"
+          [color]="config?.nav?.color"
+          [backgroundColor]="config?.nav?.backgroundColor"
+          [selectedIndex]="currentNavIndex()"
+          [attr.aria-label]="config?.group?.ariaLabel || null"
+          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+          [animationDuration]="effectiveAnimationDuration()"
+          (indexFocused)="indexFocused.emit($event)"
+          (selectFocusedIndex)="selectFocusedIndex.emit($event)"
+        >
+          <a
+            mat-tab-link
+            *ngFor="let link of config?.nav?.links; let i = index"
+            cdkDrag
+            [cdkDragDisabled]="!config?.behavior?.reorderable"
+            cdkDragLockAxis="x"
+            [active]="getNavActive(i)"
+            [disabled]="link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || link.disableRipple"
+            [fitInkBarToContent]="link.fitInkBarToContent || false"
+            [id]="link.id || ''"
+            (click)="onNavClick(i)"
+          >
+            <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
+              <mat-icon fontIcon="drag_indicator"></mat-icon>
+            </span>
+            {{ link.label }}
+          </a>
+        </nav>
+
+        <div class="praxis-tabnav-content" *ngIf="currentNavIndex() >= 0">
+          <ng-container
+            *ngIf="config?.nav?.links?.[currentNavIndex()] as l"
+          >
+            <ng-container *ngIf="(l.content?.length || l.widgets?.length) && navContentReady(currentNavIndex()); else emptyNav">
+              <ng-container *ngIf="l.content && form">
+                <ng-container
+                  dynamicFieldLoader
+                  [fields]="l.content || []"
+                  [formGroup]="form!"
+                ></ng-container>
+              </ng-container>
+              <ng-container *ngIf="l.widgets?.length">
+                <ng-container *ngFor="let w of l.widgets; let wi = index">
+                  <ng-container
+                    [dynamicWidgetLoader]="w"
+                    [context]="context || {}"
+                    (widgetEvent)="emitWidgetEvent({ linkId: l.id, linkIndex: currentNavIndex() }, $event)"
+                  ></ng-container>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+            <ng-template #emptyNav>
+              <praxis-empty-state-card
+                [inline]="true"
+                icon="add_to_queue"
+                [title]="'Sem conteúdo neste link'"
+                [description]="'Adicione conteúdo ou use o editor para configurar.'"
+                [primaryAction]="{ label: 'Abrir editor', icon: 'tune', action: openEditor.bind(this) }"
+              ></praxis-empty-state-card>
+            </ng-template>
+          </ng-container>
+        </div>
+      </ng-container>
+
+      <!-- Tab Group variant -->
+      <ng-template #groupMode>
+        <mat-tab-group
+          [dynamicHeight]="config?.group?.dynamicHeight"
+          [disableRipple]="config?.group?.disableRipple"
+          [disablePagination]="config?.group?.disablePagination"
+          [fitInkBarToContent]="config?.group?.fitInkBarToContent"
+          [headerPosition]="config?.group?.headerPosition ?? 'above'"
+          [preserveContent]="config?.group?.preserveContent"
+          [selectedIndex]="selectedIndexSignal()"
+          [mat-stretch-tabs]="config?.group?.stretchTabs"
+          [mat-align-tabs]="config?.group?.alignTabs || 'start'"
+          [color]="config?.group?.color"
+          [backgroundColor]="config?.group?.backgroundColor"
+          [animationDuration]="effectiveAnimationDuration()"
+          [attr.aria-label]="config?.group?.ariaLabel || null"
+          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+          (animationDone)="animationDone.emit()"
+          (focusChange)="focusChange.emit($event)"
+          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedTabChange)="selectedTabChange.emit($event)"
+          class="praxis-tabs-group"
+        >
+          <mat-tab
+            *ngFor="let t of config?.tabs; let i = index"
+            [disabled]="t.disabled"
+            [labelClass]="t.labelClass ?? ''"
+            [bodyClass]="t.bodyClass ?? ''"
+            [id]="t.id || ''"
+            [attr.aria-label]="t.ariaLabel || null"
+            [attr.aria-labelledby]="t.ariaLabelledby || null"
+          >
+            <ng-template mat-tab-label>
+              <span>{{ t.textLabel }}</span>
+              <button
+                *ngIf="config?.behavior?.closeable"
+                mat-icon-button
+                type="button"
+                (click)="closeTab(i); $event.stopPropagation()"
+                aria-label="Fechar aba"
+              >
+                <mat-icon fontIcon="close"></mat-icon>
+              </button>
+              <ng-container *ngIf="config?.behavior?.reorderable">
+                <button mat-icon-button type="button" (click)="moveTab(i, -1); $event.stopPropagation()" [disabled]="i===0" aria-label="Mover aba para esquerda">
+                  <mat-icon fontIcon="arrow_back"></mat-icon>
+                </button>
+                <button mat-icon-button type="button" (click)="moveTab(i, 1); $event.stopPropagation()" [disabled]="i===(config?.tabs?.length||1)-1" aria-label="Mover aba para direita">
+                  <mat-icon fontIcon="arrow_forward"></mat-icon>
+                </button>
+              </ng-container>
+            </ng-template>
+
+            <ng-template matTabContent>
+              <ng-container *ngIf="(t.content?.length || t.widgets?.length) && groupContentReady(i); else emptyTab">
+                <ng-container *ngIf="t.content && form">
+                  <ng-container
+                    dynamicFieldLoader
+                    [fields]="t.content || []"
+                    [formGroup]="form!"
+                  ></ng-container>
+                </ng-container>
+                <ng-container *ngIf="t.widgets?.length">
+                  <ng-container *ngFor="let w of t.widgets; let wi = index">
+                    <ng-container
+                      [dynamicWidgetLoader]="w"
+                      [context]="context || {}"
+                      (widgetEvent)="emitWidgetEvent({ tabId: t.id, tabIndex: i }, $event)"
+                    ></ng-container>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+              <ng-template #emptyTab>
+                <praxis-empty-state-card
+                  [inline]="true"
+                  icon="dashboard_customize"
+                  [title]="'Sem conteúdo nesta aba'"
+                  [description]="'Adicione conteúdo ou use o editor para configurar.'"
+                  [primaryAction]="{ label: 'Abrir editor', icon: 'tune', action: openEditor.bind(this) }"
+                ></praxis-empty-state-card>
+              </ng-template>
+            </ng-template>
+          </mat-tab>
+        </mat-tab-group>
+      </ng-template>
+      </ng-template>
+
+      <!-- Edit button -->
+      <button
+        *ngIf="editModeEnabled"
+        mat-fab
+        class="edit-fab"
+        aria-label="Editar tabs"
+        (click)="openEditor()"
+      >
+        <mat-icon fontIcon="edit"></mat-icon>
+      </button>
+      <button
+        *ngIf="editModeEnabled && tabsId"
+        mat-mini-fab
+        class="edit-fab"
+        style="right: 56px"
+        aria-label="Redefinir preferências de tabs"
+        (click)="resetPreferences()"
+        matTooltip="Redefinir preferências de tabs"
+      >
+        <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
+      </button>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.tab-empty{padding:16px;color:#0000008a;font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], tabsId: [{
+                type: Input
+            }], editModeEnabled: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], animationDone: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], selectedIndexChange: [{
+                type: Output
+            }], selectedTabChange: [{
+                type: Output
+            }], indexFocused: [{
+                type: Output
+            }], selectFocusedIndex: [{
+                type: Output
+            }], widgetEvent: [{
+                type: Output
+            }] } });
+
+const PRAXIS_TABS_COMPONENT_METADATA = {
+    id: 'praxis-tabs',
+    selector: 'praxis-tabs',
+    component: PraxisTabs,
+    friendlyName: 'Praxis Tabs',
+    description: 'Abas dinâmicas baseadas em metadata, suportando MatTabGroup e TabNav.',
+    icon: 'tab',
+    inputs: [
+        { name: 'config', type: 'TabsMetadata', label: 'Configuração', description: 'Configuração JSON (tabs/nav e widgets internos)' },
+        {
+            name: 'tabsId',
+            type: 'string',
+            label: 'ID das Tabs',
+            description: 'Identificador para persistência local',
+        },
+        {
+            name: 'editModeEnabled',
+            type: 'boolean',
+            default: false,
+            label: 'Modo de edição',
+            description: 'Habilita editor via Settings Panel',
+        },
+        {
+            name: 'form',
+            type: 'FormGroup',
+            label: 'FormGroup',
+            description: 'FormGroup para conteúdo com campos dinâmicos',
+        },
+    ],
+    outputs: [
+        { name: 'selectedIndexChange', type: 'number', label: 'Índice selecionado' },
+        { name: 'selectedTabChange', type: 'MatTabChangeEvent', label: 'Troca de aba' },
+        { name: 'animationDone', type: 'void' },
+        { name: 'focusChange', type: 'MatTabChangeEvent', label: 'Foco alterado' },
+        { name: 'indexFocused', type: 'number', label: 'Índice focado' },
+        { name: 'selectFocusedIndex', type: 'number', label: 'Selecionar foco' },
+        {
+            name: 'widgetEvent',
+            type: "{ tabId?: string; tabIndex?: number; linkId?: string; linkIndex?: number; sourceId: string; output?: string; payload?: any }",
+            label: 'Evento interno',
+            description: 'Eventos reemitidos de componentes dinâmicos dentro da aba/link',
+        },
+    ],
+    tags: ['widget', 'tabs', 'configurable', 'stable'],
+    lib: '@praxisui/tabs',
+};
+function providePraxisTabsMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_TABS_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
+/*
+ * Public API Surface of praxis-tabs
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PRAXIS_TABS_COMPONENT_METADATA, PraxisTabs, PraxisTabsConfigEditor, providePraxisTabsMetadata };
+//# sourceMappingURL=praxisui-tabs.mjs.map