@praxisui/tabs 8.0.0-beta.2 → 8.0.0-beta.20

package/fesm2022/praxisui-tabs.mjs

@@ -784,6 +784,7 @@ class PraxisTabsConfigEditor {
         this.editedConfig.tabs.push({
             id: `tab${(this.editedConfig.tabs.length + 1)}`,
             textLabel: this.t('defaults.newTabLabel', 'New Tab'),
+            visible: true,
         });
         this.onAppearanceChange();
     }
@@ -859,6 +860,7 @@ class PraxisTabsConfigEditor {
         this.nav.links.push({
             id: `link${this.nav.links.length + 1}`,
             label: this.t('defaults.newLinkLabel', 'New Link'),
+            visible: true,
         });
         this.onAppearanceChange();
     }
@@ -1293,6 +1295,9 @@ class PraxisTabsConfigEditor {
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
@@ -1306,7 +1311,10 @@ class PraxisTabsConfigEditor {
                   <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
               </div>
-              <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+              <div class="editor-row">
+                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+              </div>
 
               <!-- Widgets (componentes dinâmicos) -->
               <div class="editor-divider editor-grid">
@@ -1384,9 +1392,13 @@ class PraxisTabsConfigEditor {
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
               </div>
               <div class="editor-row">
                 <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
               </div>
@@ -1797,6 +1809,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
@@ -1810,7 +1825,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
               </div>
-              <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+              <div class="editor-row">
+                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+              </div>
 
               <!-- Widgets (componentes dinâmicos) -->
               <div class="editor-divider editor-grid">
@@ -1888,9 +1906,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
               </div>
               <div class="editor-row">
                 <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
               </div>
@@ -2372,6 +2394,12 @@ class PraxisTabs {
     config = null;
     tabsId;
     componentInstanceId;
+    set selectedIndex(index) {
+        if (index == null)
+            return;
+        this.controlledSelectedIndex = index;
+        this.applySelectedIndex(index, false, false);
+    }
     enableCustomization = false;
     form = null;
     context = null;
@@ -2388,6 +2416,7 @@ class PraxisTabs {
     selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexSignal" }] : []));
     groupLoaded = new Set();
     navLoaded = new Set();
+    controlledSelectedIndex;
     destroy$ = new Subject();
     widgetDefinitionCache = new WeakMap();
     ngOnInit() {
@@ -2400,6 +2429,7 @@ class PraxisTabs {
                     this.config = stored;
                 }
                 this.syncSelectionFromConfig();
+                this.reapplyControlledSelectedIndex();
             });
         }
     }
@@ -2409,6 +2439,7 @@ class PraxisTabs {
             this.syncSelectionFromConfig();
             // Persist when tabsId provided
             this.persistConfig(this.config);
+            this.reapplyControlledSelectedIndex();
         }
     }
     ngOnDestroy() {
@@ -2427,23 +2458,39 @@ class PraxisTabs {
     getNavActive(i) {
         return this.currentNavIndex() === i;
     }
+    visibleNavLinkEntries() {
+        return (this.config?.nav?.links ?? [])
+            .map((link, index) => ({ link, index }))
+            .filter((entry) => entry.link.visible !== false);
+    }
+    visibleTabEntries() {
+        return (this.config?.tabs ?? [])
+            .map((tab, index) => ({ tab, index }))
+            .filter((entry) => entry.tab.visible !== false);
+    }
+    selectedVisibleNavIndex() {
+        const entries = this.visibleNavLinkEntries();
+        const index = entries.findIndex((entry) => entry.index === this.currentNavIndex());
+        return index >= 0 ? index : 0;
+    }
+    selectedVisibleTabIndex() {
+        const entries = this.visibleTabEntries();
+        const index = entries.findIndex((entry) => entry.index === this.selectedIndexSignal());
+        return index >= 0 ? index : 0;
+    }
+    onVisibleTabIndexChange(index) {
+        const entry = this.visibleTabEntries()[index];
+        if (!entry)
+            return;
+        this.onSelectedIndexChange(entry.index);
+    }
     onNavClick(i) {
         if (!this.config?.nav?.links?.length)
             return;
         const linksCount = this.config.nav.links.length;
         if (i < 0 || i >= linksCount)
             return;
-        this.currentNavIndex.set(i);
-        this.config = produce(this.config, (draft) => {
-            if (!draft.nav)
-                return;
-            draft.nav.selectedIndex = i;
-        });
-        this.persistConfig(this.config);
-        // Lazy: mark as loaded
-        this.navLoaded.add(i);
-        // Emit as index change for consumers to track
-        this.selectedIndexChange.emit(i);
+        this.applySelectedIndex(i, true);
     }
     onNavDrop(event) {
         if (!this.config?.nav?.links)
@@ -2491,10 +2538,39 @@ class PraxisTabs {
         });
         this.persistConfig(this.config);
     }
+    onVisibleNavDrop(event) {
+        const entries = this.visibleNavLinkEntries();
+        const previous = entries[event.previousIndex];
+        const current = entries[event.currentIndex];
+        if (!previous || !current)
+            return;
+        this.onNavDrop({
+            ...event,
+            previousIndex: previous.index,
+            currentIndex: current.index,
+        });
+    }
     onSelectedIndexChange(index) {
+        this.applySelectedIndex(index, true);
+    }
+    applySelectedIndex(index, emit, persist = true) {
+        if (this.isNavMode() && this.config) {
+            const selected = this.clampIndex(index, this.config?.nav?.links?.length ?? 0);
+            this.currentNavIndex.set(selected);
+            this.config = produce(this.config, (draft) => {
+                draft.nav.selectedIndex = selected;
+            });
+            if (persist) {
+                this.persistConfig(this.config);
+            }
+            this.navLoaded.add(selected);
+            if (emit) {
+                this.selectedIndexChange.emit(selected);
+            }
+            return;
+        }
         const selected = this.clampIndex(index, this.config?.tabs?.length ?? 0);
         this.selectedIndexSignal.set(selected);
-        // Update config immutably
         if (this.config) {
             this.config = produce(this.config, (draft) => {
                 if (!draft.group) {
@@ -2504,11 +2580,20 @@ class PraxisTabs {
                     draft.group.selectedIndex = selected;
                 }
             });
-            this.persistConfig(this.config);
+            if (persist) {
+                this.persistConfig(this.config);
+            }
         }
-        // Lazy: mark as loaded
         this.groupLoaded.add(selected);
-        this.selectedIndexChange.emit(selected);
+        if (emit) {
+            this.selectedIndexChange.emit(selected);
+        }
+    }
+    reapplyControlledSelectedIndex() {
+        if (this.controlledSelectedIndex == null) {
+            return;
+        }
+        this.applySelectedIndex(this.controlledSelectedIndex, false, false);
     }
     closeTab(index) {
         if (!this.config?.tabs)
@@ -2691,19 +2776,26 @@ class PraxisTabs {
         return id ? `tabs:${id}` : null;
     }
     syncSelectionFromConfig() {
-        this.groupLoaded.clear();
-        this.navLoaded.clear();
         const tabsLength = this.config?.tabs?.length ?? 0;
         const linksLength = this.config?.nav?.links?.length ?? 0;
         const groupIndex = this.clampIndex(this.config?.group?.selectedIndex, tabsLength);
         const navIndex = this.clampIndex(this.config?.nav?.selectedIndex, linksLength);
         this.selectedIndexSignal.set(groupIndex);
         this.currentNavIndex.set(navIndex);
+        this.pruneLoadedIndexes(this.groupLoaded, tabsLength);
+        this.pruneLoadedIndexes(this.navLoaded, linksLength);
         if (tabsLength > 0)
             this.groupLoaded.add(groupIndex);
         if (linksLength > 0)
             this.navLoaded.add(navIndex);
     }
+    pruneLoadedIndexes(indexes, size) {
+        for (const index of Array.from(indexes)) {
+            if (index < 0 || index >= size) {
+                indexes.delete(index);
+            }
+        }
+    }
     persistConfig(config) {
         const key = this.storageKey();
         if (!key || !config)
@@ -2764,10 +2856,16 @@ class PraxisTabs {
         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);
+        const hasTabs = this.visibleTabEntries().length > 0;
+        const hasLinks = this.visibleNavLinkEntries().length > 0;
         return !(hasTabs || hasLinks);
     }
+    trackVisibleNavLink(index, entry) {
+        return entry.link.id || `${entry.link.label || 'nav-link'}:${entry.index ?? index}`;
+    }
+    trackVisibleTab(index, entry) {
+        return entry.tab.id || entry.tab.textLabel || `tab:${entry.index ?? index}`;
+    }
     trackNavLink(index, link) {
         return link.id || `${link.label || 'nav-link'}:${index}`;
     }
@@ -2952,7 +3050,7 @@ class PraxisTabs {
         return JSON.parse(JSON.stringify(widget));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-tabs-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -2995,13 +3093,13 @@ class PraxisTabs {
           cdkDropList
           cdkDropListOrientation="horizontal"
           [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onNavDrop($event)"
+          (cdkDropListDropped)="onVisibleNavDrop($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()"
+          [selectedIndex]="selectedVisibleNavIndex()"
           [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
           [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
           [animationDuration]="effectiveAnimationDuration()"
@@ -3010,21 +3108,22 @@ class PraxisTabs {
         >
           <a
             mat-tab-link
-            *ngFor="let link of config?.nav?.links; let i = index; trackBy: trackNavLink"
+            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
             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)"
+            [active]="getNavActive(entry.index)"
+            [disabled]="entry.link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+            [id]="entry.link.id || ''"
+            (click)="onNavClick(entry.index)"
           >
             <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
               <mat-icon fontIcon="drag_indicator"></mat-icon>
             </span>
-            {{ link.label }}
+            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+            {{ entry.link.label }}
           </a>
         </nav>
 
@@ -3074,7 +3173,7 @@ class PraxisTabs {
           [fitInkBarToContent]="config?.group?.fitInkBarToContent"
           [headerPosition]="config?.group?.headerPosition ?? 'above'"
           [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedIndexSignal()"
+          [selectedIndex]="selectedVisibleTabIndex()"
           [mat-stretch-tabs]="config?.group?.stretchTabs"
           [mat-align-tabs]="config?.group?.alignTabs || 'start'"
           [color]="config?.group?.color"
@@ -3084,26 +3183,27 @@ class PraxisTabs {
           [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
           (animationDone)="animationDone.emit()"
           (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedIndexChange)="onVisibleTabIndexChange($event)"
           (selectedTabChange)="selectedTabChange.emit($event)"
           class="praxis-tabs-group"
         >
           <mat-tab
-            *ngFor="let tab of config?.tabs; let i = index; trackBy: trackTab"
-            [disabled]="tab.disabled"
-            [labelClass]="tab.labelClass ?? ''"
-            [bodyClass]="tab.bodyClass ?? ''"
-            [id]="tab.id || ''"
-            [attr.aria-label]="tab.ariaLabel || null"
-            [attr.aria-labelledby]="tab.ariaLabelledby || null"
+            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
+            [disabled]="entry.tab.disabled"
+            [labelClass]="entry.tab.labelClass ?? ''"
+            [bodyClass]="entry.tab.bodyClass ?? ''"
+            [id]="entry.tab.id || ''"
+            [attr.aria-label]="entry.tab.ariaLabel || null"
+            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
           >
             <ng-template mat-tab-label>
-              <span>{{ tab.textLabel }}</span>
+              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+              <span>{{ entry.tab.textLabel }}</span>
               <button
                 *ngIf="config?.behavior?.closeable"
                 mat-icon-button
                 type="button"
-                (click)="closeTab(i); $event.stopPropagation()"
+                (click)="closeTab(entry.index); $event.stopPropagation()"
                 (keydown.enter)="$event.stopPropagation()"
                 (keydown.space)="$event.stopPropagation()"
                 [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
@@ -3114,10 +3214,10 @@ class PraxisTabs {
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, -1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===0"
+                  [disabled]="entry.index===0"
                   [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
                 >
                   <mat-icon fontIcon="arrow_back"></mat-icon>
@@ -3125,10 +3225,10 @@ class PraxisTabs {
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, 1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===(config?.tabs?.length||1)-1"
+                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
                   [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
                 >
                   <mat-icon fontIcon="arrow_forward"></mat-icon>
@@ -3137,20 +3237,20 @@ class PraxisTabs {
             </ng-template>
 
             <ng-template matTabContent>
-              <ng-container *ngIf="(tab.content?.length || tab.widgets?.length) && groupContentReady(i); else emptyTab">
-                <ng-container *ngIf="tab.content && form">
+              <ng-container *ngIf="(entry.tab.content?.length || entry.tab.widgets?.length) && groupContentReady(entry.index); else emptyTab">
+                <ng-container *ngIf="entry.tab.content && form">
                   <ng-container
                     dynamicFieldLoader
-                    [fields]="tab.content || []"
+                    [fields]="entry.tab.content || []"
                     [formGroup]="form!"
                   ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="tab.widgets?.length">
-                  <ng-container *ngFor="let w of tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
+                <ng-container *ngIf="entry.tab.widgets?.length">
+                  <ng-container *ngFor="let w of entry.tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
                     <ng-container
                       [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                       [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(tabEventPath(tab.id, i), $event)"
+                      (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                     ></ng-container>
                   </ng-container>
                 </ng-container>
@@ -3191,7 +3291,7 @@ class PraxisTabs {
         <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}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);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.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$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", "tone"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);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}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}: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.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$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", "tone"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, decorators: [{
             type: Component,
@@ -3251,13 +3351,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           cdkDropList
           cdkDropListOrientation="horizontal"
           [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onNavDrop($event)"
+          (cdkDropListDropped)="onVisibleNavDrop($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()"
+          [selectedIndex]="selectedVisibleNavIndex()"
           [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
           [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
           [animationDuration]="effectiveAnimationDuration()"
@@ -3266,21 +3366,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         >
           <a
             mat-tab-link
-            *ngFor="let link of config?.nav?.links; let i = index; trackBy: trackNavLink"
+            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
             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)"
+            [active]="getNavActive(entry.index)"
+            [disabled]="entry.link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+            [id]="entry.link.id || ''"
+            (click)="onNavClick(entry.index)"
           >
             <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
               <mat-icon fontIcon="drag_indicator"></mat-icon>
             </span>
-            {{ link.label }}
+            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+            {{ entry.link.label }}
           </a>
         </nav>
 
@@ -3330,7 +3431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           [fitInkBarToContent]="config?.group?.fitInkBarToContent"
           [headerPosition]="config?.group?.headerPosition ?? 'above'"
           [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedIndexSignal()"
+          [selectedIndex]="selectedVisibleTabIndex()"
           [mat-stretch-tabs]="config?.group?.stretchTabs"
           [mat-align-tabs]="config?.group?.alignTabs || 'start'"
           [color]="config?.group?.color"
@@ -3340,26 +3441,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
           (animationDone)="animationDone.emit()"
           (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedIndexChange)="onVisibleTabIndexChange($event)"
           (selectedTabChange)="selectedTabChange.emit($event)"
           class="praxis-tabs-group"
         >
           <mat-tab
-            *ngFor="let tab of config?.tabs; let i = index; trackBy: trackTab"
-            [disabled]="tab.disabled"
-            [labelClass]="tab.labelClass ?? ''"
-            [bodyClass]="tab.bodyClass ?? ''"
-            [id]="tab.id || ''"
-            [attr.aria-label]="tab.ariaLabel || null"
-            [attr.aria-labelledby]="tab.ariaLabelledby || null"
+            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
+            [disabled]="entry.tab.disabled"
+            [labelClass]="entry.tab.labelClass ?? ''"
+            [bodyClass]="entry.tab.bodyClass ?? ''"
+            [id]="entry.tab.id || ''"
+            [attr.aria-label]="entry.tab.ariaLabel || null"
+            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
           >
             <ng-template mat-tab-label>
-              <span>{{ tab.textLabel }}</span>
+              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+              <span>{{ entry.tab.textLabel }}</span>
               <button
                 *ngIf="config?.behavior?.closeable"
                 mat-icon-button
                 type="button"
-                (click)="closeTab(i); $event.stopPropagation()"
+                (click)="closeTab(entry.index); $event.stopPropagation()"
                 (keydown.enter)="$event.stopPropagation()"
                 (keydown.space)="$event.stopPropagation()"
                 [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
@@ -3370,10 +3472,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, -1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===0"
+                  [disabled]="entry.index===0"
                   [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
                 >
                   <mat-icon fontIcon="arrow_back"></mat-icon>
@@ -3381,10 +3483,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, 1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===(config?.tabs?.length||1)-1"
+                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
                   [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
                 >
                   <mat-icon fontIcon="arrow_forward"></mat-icon>
@@ -3393,20 +3495,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </ng-template>
 
             <ng-template matTabContent>
-              <ng-container *ngIf="(tab.content?.length || tab.widgets?.length) && groupContentReady(i); else emptyTab">
-                <ng-container *ngIf="tab.content && form">
+              <ng-container *ngIf="(entry.tab.content?.length || entry.tab.widgets?.length) && groupContentReady(entry.index); else emptyTab">
+                <ng-container *ngIf="entry.tab.content && form">
                   <ng-container
                     dynamicFieldLoader
-                    [fields]="tab.content || []"
+                    [fields]="entry.tab.content || []"
                     [formGroup]="form!"
                   ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="tab.widgets?.length">
-                  <ng-container *ngFor="let w of tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
+                <ng-container *ngIf="entry.tab.widgets?.length">
+                  <ng-container *ngFor="let w of entry.tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
                     <ng-container
                       [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                       [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(tabEventPath(tab.id, i), $event)"
+                      (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                     ></ng-container>
                   </ng-container>
                 </ng-container>
@@ -3447,7 +3549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <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}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);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"] }]
+  `, 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}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);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}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}: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: [{
@@ -3455,6 +3557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: [{ required: true }]
             }], componentInstanceId: [{
                 type: Input
+            }], selectedIndex: [{
+                type: Input
             }], enableCustomization: [{
                 type: Input
             }], form: [{
@@ -3504,6 +3608,19 @@ const PRAXIS_TABS_PORTS = [
         description: 'Fragmento canonico de configuracao das tabs/nav e dos widgets internos.',
         exposure: { public: true, group: 'config' },
     },
+    {
+        id: 'selectedIndex',
+        label: 'Indice selecionado',
+        direction: 'input',
+        semanticKind: 'value',
+        schema: {
+            id: 'number',
+            kind: 'ts-type',
+            ref: 'number',
+        },
+        description: 'Indice ativo de abas/nav para controle externo por composicao.',
+        exposure: { public: true, group: 'state' },
+    },
     {
         id: 'selectedIndexChange',
         label: 'Troca de indice selecionado',
@@ -3554,6 +3671,12 @@ const PRAXIS_TABS_COMPONENT_METADATA = {
             label: 'ID da instância',
             description: 'Identificador opcional para múltiplas instâncias na mesma rota',
         },
+        {
+            name: 'selectedIndex',
+            type: 'number',
+            label: 'Indice selecionado',
+            description: 'Indice ativo de abas/nav controlavel externamente pela composicao',
+        },
         {
             name: 'enableCustomization',
             type: 'boolean',
@@ -3675,6 +3798,341 @@ function providePraxisTabsMetadata() {
     };
 }
 
+const tabItemSchema = {
+    type: 'object',
+    required: ['id', 'textLabel'],
+    properties: {
+        id: { type: 'string' },
+        textLabel: { type: 'string' },
+        icon: { type: 'string' },
+        disabled: { type: 'boolean' },
+        visible: { type: 'boolean', default: true },
+        content: { type: 'array', items: { type: 'object' } },
+        widgets: { type: 'array', items: { type: 'object' } },
+    },
+};
+const tabPatchSchema = {
+    type: 'object',
+    minProperties: 1,
+    properties: {
+        id: { type: 'string' },
+        textLabel: { type: 'string' },
+        icon: { type: 'string' },
+        disabled: { type: 'boolean' },
+        visible: { type: 'boolean' },
+        content: { type: 'array', items: { type: 'object' } },
+        widgets: { type: 'array', items: { type: 'object' } },
+    },
+};
+const PRAXIS_TABS_AUTHORING_MANIFEST = {
+    schemaVersion: '1.0.0',
+    componentId: 'praxis-tabs',
+    ownerPackage: '@praxisui/tabs',
+    configSchemaId: 'TabsMetadata',
+    manifestVersion: '1.0.0',
+    runtimeInputs: [
+        { name: 'config', type: 'TabsMetadata', description: 'Canonical tabs/nav configuration.' },
+        { name: 'tabsId', type: 'string', description: 'Stable id used to derive persistence scope.' },
+        { name: 'componentInstanceId', type: 'string', description: 'Optional instance discriminator for persistence scope.' },
+        { name: 'form', type: 'FormGroup', description: 'FormGroup consumed by dynamic field content.' },
+        { name: 'context', type: 'Record<string, any>', description: 'Context passed to nested widgets.' },
+        { name: 'enableCustomization', type: 'boolean', description: 'Enables Settings Panel authoring surfaces.' },
+    ],
+    editableTargets: [
+        { kind: 'tab', resolver: 'tab-by-id-or-label', description: 'A group-mode tab in config.tabs[].' },
+        { kind: 'tabLabel', resolver: 'tab-by-id-or-label', description: 'The text label of a group-mode tab.' },
+        { kind: 'tabIcon', resolver: 'tab-by-id-or-label', description: 'Icon metadata rendered in a group tab label.' },
+        { kind: 'tabContent', resolver: 'tab-or-link-by-id', description: 'Dynamic fields or widgets hosted by a tab or nav link.' },
+        { kind: 'activeTab', resolver: 'tab-index-or-id', description: 'Selected tab or nav link index.' },
+        { kind: 'visibility', resolver: 'tab-or-link-by-id', description: 'Runtime visibility flag for a group tab or nav link.' },
+        { kind: 'disabledState', resolver: 'tab-or-link-by-id', description: 'Disabled state of a tab or nav link.' },
+        { kind: 'layout', resolver: 'tabs-layout-config', description: 'Group/nav mode, header position, density, stretch and behavior settings.' },
+    ],
+    operations: [
+        {
+            operationId: 'tab.add',
+            title: 'Add tab',
+            scope: 'global',
+            targetKind: 'tab',
+            target: { kind: 'tab', resolver: 'tabs-array', ambiguityPolicy: 'fail', required: false },
+            inputSchema: tabItemSchema,
+            effects: [{ kind: 'append-unique', path: 'tabs[]', key: 'id' }],
+            validators: ['tab-id-unique', 'tabs-mode-compatible', 'tab-content-valid'],
+            destructive: false,
+            requiresConfirmation: false,
+            affectedPaths: ['tabs[]'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'tab.remove',
+            title: 'Remove tab',
+            scope: 'layout',
+            targetKind: 'tab',
+            target: { kind: 'tab', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    replacementActiveTabId: { type: 'string' },
+                },
+            },
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.remove-tab-and-reselect',
+                    handlerContract: {
+                        reads: ['tabs[]', 'group.selectedIndex'],
+                        writes: ['tabs[]', 'group.selectedIndex'],
+                        identityKeys: ['tabs[].id'],
+                        inputSchema: {
+                            type: 'object',
+                            properties: { replacementActiveTabId: { type: 'string' } },
+                        },
+                        failureModes: ['target-tab-missing', 'replacement-tab-missing', 'confirmation-missing'],
+                        description: 'Removes the target tab by stable id and reselects a safe replacement when the active/default tab is removed.',
+                    },
+                },
+            ],
+            destructive: true,
+            requiresConfirmation: true,
+            validators: ['tab-exists', 'active-tab-removal-safe', 'tab-content-removal-confirmed'],
+            affectedPaths: ['tabs[]', 'group.selectedIndex'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-exists', 'confirmation-collected'],
+        },
+        {
+            operationId: 'tab.label.set',
+            title: 'Set tab label',
+            scope: 'layout',
+            targetKind: 'tabLabel',
+            target: { kind: 'tabLabel', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['textLabel'], properties: { textLabel: { type: 'string' } } },
+            effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-exists', 'tab-label-valid'],
+            affectedPaths: ['tabs[].textLabel'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-exists'],
+        },
+        {
+            operationId: 'tab.icon.set',
+            title: 'Set tab icon',
+            scope: 'layout',
+            targetKind: 'tabIcon',
+            target: { kind: 'tabIcon', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['icon'], properties: { icon: { type: 'string' } } },
+            effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-exists', 'tab-icon-valid'],
+            affectedPaths: ['tabs[].icon'],
+            submissionImpact: 'visual-only',
+            preconditions: ['config-initialized', 'target-tab-exists'],
+        },
+        {
+            operationId: 'tab.order.set',
+            title: 'Reorder tabs',
+            scope: 'layout',
+            targetKind: 'tab',
+            target: { kind: 'tab', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['beforeTabId'], properties: { beforeTabId: { type: 'string' } } },
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.reorder-tab-and-preserve-selection',
+                    handlerContract: {
+                        reads: ['tabs[]', 'group.selectedIndex'],
+                        writes: ['tabs[]', 'group.selectedIndex'],
+                        identityKeys: ['tabs[].id'],
+                        inputSchema: { type: 'object', required: ['beforeTabId'], properties: { beforeTabId: { type: 'string' } } },
+                        failureModes: ['target-tab-missing', 'before-tab-missing', 'unstable-tab-id'],
+                        description: 'Reorders tabs by stable id and remaps group.selectedIndex when the selected tab crosses positions.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-exists', 'tab-order-deterministic'],
+            affectedPaths: ['tabs[]', 'group.selectedIndex'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-exists'],
+        },
+        {
+            operationId: 'tab.disabled.set',
+            title: 'Set tab disabled state',
+            scope: 'interaction',
+            targetKind: 'disabledState',
+            target: { kind: 'disabledState', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['disabled'], properties: { disabled: { type: 'boolean' } } },
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-disabled',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['tabs[].disabled', 'nav.links[].disabled'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['disabled'], properties: { disabled: { type: 'boolean' } } },
+                        failureModes: ['target-tab-or-link-missing', 'ambiguous-target', 'active-item-disabled-without-reselection'],
+                        description: 'Sets disabled on the resolved group tab or nav link without guessing between modes.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-or-link-exists', 'active-tab-disabled-safe'],
+            affectedPaths: ['tabs[].disabled', 'nav.links[].disabled'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-or-link-exists'],
+        },
+        {
+            operationId: 'tab.visible.set',
+            title: 'Set tab visibility',
+            scope: 'interaction',
+            targetKind: 'visibility',
+            target: { kind: 'visibility', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['visible'], properties: { visible: { type: 'boolean' } } },
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-visible',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['tabs[].visible', 'nav.links[].visible'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['visible'], properties: { visible: { type: 'boolean' } } },
+                        failureModes: ['target-tab-or-link-missing', 'ambiguous-target', 'active-item-hidden-without-reselection'],
+                        description: 'Sets visible on the resolved group tab or nav link and preserves deterministic visible-index mapping.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-or-link-exists', 'active-tab-visibility-safe'],
+            affectedPaths: ['tabs[].visible', 'nav.links[].visible'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-or-link-exists'],
+        },
+        {
+            operationId: 'tab.active.set',
+            title: 'Set active tab',
+            scope: 'interaction',
+            targetKind: 'activeTab',
+            target: { kind: 'activeTab', resolver: 'tab-index-or-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: { type: 'object', required: ['selectedIndex'], properties: { selectedIndex: { type: 'number' }, tabId: { type: 'string' } } },
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-active-item',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['group.selectedIndex', 'nav.selectedIndex'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['selectedIndex'], properties: { selectedIndex: { type: 'number' }, tabId: { type: 'string' } } },
+                        failureModes: ['target-tab-or-link-missing', 'selected-index-out-of-range', 'hidden-or-disabled-target'],
+                        description: 'Sets the active index for the current primary mode using either selectedIndex or a resolved tab/link id.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['active-tab-exists', 'selected-index-in-range'],
+            affectedPaths: ['group.selectedIndex', 'nav.selectedIndex'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-or-link-exists'],
+        },
+        {
+            operationId: 'layout.variant.set',
+            title: 'Set tabs layout variant',
+            scope: 'layout',
+            targetKind: 'layout',
+            target: { kind: 'layout', resolver: 'tabs-layout-config', ambiguityPolicy: 'fail', required: true },
+            inputSchema: {
+                type: 'object',
+                required: ['mode'],
+                properties: {
+                    mode: { enum: ['group', 'nav'] },
+                    density: { enum: ['compact', 'comfortable', 'spacious'] },
+                    headerPosition: { enum: ['above', 'below'] },
+                    alignTabs: { enum: ['start', 'center', 'end'] },
+                    stretchTabs: { type: 'boolean' },
+                    lazyLoad: { type: 'boolean' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'appearance' }, { kind: 'merge-object', path: 'group' }, { kind: 'merge-object', path: 'nav' }, { kind: 'merge-object', path: 'behavior' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tabs-mode-compatible', 'layout-values-valid', 'editor-runtime-round-trip'],
+            affectedPaths: ['appearance.density', 'group.headerPosition', 'group.alignTabs', 'group.stretchTabs', 'nav.stretchTabs', 'behavior.lazyLoad'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'tab.content.set',
+            title: 'Set tab content',
+            scope: 'layout',
+            targetKind: 'tabContent',
+            target: { kind: 'tabContent', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
+            inputSchema: tabPatchSchema,
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-content',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]'],
+                        writes: ['tabs[].content', 'tabs[].widgets', 'nav.links[].content', 'nav.links[].widgets'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: tabPatchSchema,
+                        failureModes: ['target-tab-or-link-missing', 'invalid-dynamic-field-content', 'invalid-widget-definition'],
+                        description: 'Updates content/widgets only on the resolved group tab or nav link while preserving nested widget identity.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['tab-or-link-exists', 'tab-content-valid', 'widget-event-delegated'],
+            affectedPaths: ['tabs[].content', 'tabs[].widgets', 'nav.links[].content', 'nav.links[].widgets'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'target-tab-or-link-exists'],
+        },
+    ],
+    validators: [
+        { validatorId: 'tab-id-unique', level: 'error', code: 'PTABS001', description: 'Tab ids and nav link ids must be unique within their mode.' },
+        { validatorId: 'tab-exists', level: 'error', code: 'PTABS002', description: 'Target tab must exist before applying the operation.' },
+        { validatorId: 'tab-or-link-exists', level: 'error', code: 'PTABS003', description: 'Target must resolve to an existing group tab or nav link.' },
+        { validatorId: 'active-tab-exists', level: 'error', code: 'PTABS004', description: 'Active tab or nav link selection must reference an existing item.' },
+        { validatorId: 'selected-index-in-range', level: 'error', code: 'PTABS005', description: 'Selected index must be clamped to the target mode item count.' },
+        { validatorId: 'active-tab-removal-safe', level: 'error', code: 'PTABS006', description: 'Removing the active/default tab requires confirmation or a replacement active tab.' },
+        { validatorId: 'tab-content-removal-confirmed', level: 'error', code: 'PTABS007', description: 'Removing a tab or link with content/widgets is destructive and requires confirmation.' },
+        { validatorId: 'tab-label-valid', level: 'error', code: 'PTABS008', description: 'Tab labels must be non-empty text values after localization/domain projection.' },
+        { validatorId: 'tab-icon-valid', level: 'warning', code: 'PTABS009', description: 'Tab icon metadata must remain compatible with the icon directive and editor round-trip.' },
+        { validatorId: 'tab-order-deterministic', level: 'error', code: 'PTABS010', description: 'Tab ordering must use stable ids, not transient array index as identity.' },
+        { validatorId: 'tabs-mode-compatible', level: 'error', code: 'PTABS011', description: 'Authoring must resolve to one primary mode: group tabs or nav links.' },
+        { validatorId: 'layout-values-valid', level: 'error', code: 'PTABS012', description: 'Layout values must match TabsMetadata enums and runtime bindings.' },
+        { validatorId: 'editor-runtime-round-trip', level: 'error', code: 'PTABS013', description: 'Settings Panel, quick setup, JSON editor and runtime must preserve ids, order and selected index.' },
+        { validatorId: 'active-tab-disabled-safe', level: 'warning', code: 'PTABS014', description: 'Disabling the active item should move selection or request explicit confirmation.' },
+        { validatorId: 'active-tab-visibility-safe', level: 'warning', code: 'PTABS015', description: 'Hiding the active item should move selection or request explicit confirmation.' },
+        { validatorId: 'tab-content-valid', level: 'error', code: 'PTABS016', description: 'Tab content must be valid DynamicFieldMetadata[] or WidgetDefinition[] and preserve nested widget identity.' },
+        { validatorId: 'widget-event-delegated', level: 'info', code: 'PTABS017', description: 'Nested widget event paths remain delegated to the tabs runtime contract and are not redefined by authoring.' },
+    ],
+    roundTripRequirements: [
+        'Operations must preserve stable tab/link ids; array index may be used only as a resolver fallback, never as canonical identity.',
+        'Settings Panel, quick setup and JSON editor must round-trip through TabsAuthoringDocument without losing config or bindings.',
+        'Group and nav modes must remain mutually explicit; authoring cannot silently mix config.tabs and nav.links as competing primary modes.',
+        'Nested widget events remain delegated through widgetEvent path enrichment and component-port nestedPath semantics.',
+    ],
+    examples: [
+        { id: 'add-overview-tab', request: 'Add an Overview tab before the details tab.', operationId: 'tab.add', params: { id: 'overview', textLabel: 'Overview' }, isPositive: true },
+        { id: 'rename-tab', request: 'Rename the details tab to Account Details.', operationId: 'tab.label.set', target: 'details', params: { textLabel: 'Account Details' }, isPositive: true },
+        { id: 'reorder-tabs', request: 'Move billing before overview.', operationId: 'tab.order.set', target: 'billing', params: { beforeTabId: 'overview' }, isPositive: true },
+        { id: 'disable-tab', request: 'Disable the audit tab until the user has permission.', operationId: 'tab.disabled.set', target: 'audit', params: { disabled: true }, isPositive: true },
+        { id: 'activate-tab', request: 'Open the documents tab by default.', operationId: 'tab.active.set', target: 'documents', params: { tabId: 'documents', selectedIndex: 2 }, isPositive: true },
+        { id: 'reject-duplicate-tab-id', request: 'Add another tab with id overview.', operationId: 'tab.add', params: { id: 'overview', textLabel: 'Duplicate Overview' }, isPositive: false },
+        { id: 'confirm-remove-content-tab', request: 'Remove the details tab that contains widgets.', operationId: 'tab.remove', target: 'details', params: { replacementActiveTabId: 'overview' }, isPositive: true },
+    ],
+};
+
 /*
  * Public API Surface of praxis-tabs
  */
@@ -3683,4 +4141,4 @@ function providePraxisTabsMetadata() {
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };
+export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };