@praxisui/tabs 8.0.0-beta.1 → 8.0.0-beta.12

package/README.md

@@ -75,13 +75,46 @@ Inputs
 - `componentInstanceId?: string` Opcional para desambiguar múltiplas instâncias com o mesmo `tabsId` na mesma rota.
 - `form?: FormGroup` FormGroup opcional para campos dinâmicos declarados em `content`.
 - `context?: any` Contexto propagado a widgets internos (via `DynamicWidgetLoader`).
+- `selectedIndex?: number` Índice ativo controlado por composição; não reemite `selectedIndexChange`.
 - `enableCustomization?: boolean` Exibe botão de edição quando verdadeiro (abre o editor).
 
 Outputs
 - `selectedIndexChange: number` Índice selecionado atualizado (ambos modos).
 - `selectedTabChange: MatTabChangeEvent` Evento nativo do MatTabGroup.
 - `focusChange, animationDone, indexFocused, selectFocusedIndex` Eventos nativos do Angular Material.
-- `widgetEvent: { tabId?, tabIndex?, linkId?, linkIndex?, sourceId, output?, payload? }` Reemissão de eventos dos widgets internos com contexto da aba/link.
+- `widgetEvent: WidgetEventEnvelope` Bridge avançada/legado para transporte de eventos dos widgets internos com contexto da aba/link. Para conexões novas de widgets internos, use `composition.links` com `component-port + nestedPath`.
+
+## Uso Controlado por Composição
+
+`selectedIndex` é a porta pública para controlar a aba ativa a partir de estado externo ou de outro componente. Quando esse input é aplicado, o componente atualiza a aba ativa sem reemitir `selectedIndexChange`, evitando ciclos entre `state -> selectedIndex` e `selectedIndexChange -> state`.
+
+Padrão recomendado para páginas dinâmicas:
+
+- grave a seleção do usuário com `selectedIndexChange -> state`;
+- projete o estado de volta com `state -> selectedIndex`;
+- declare `selectedIndex` depois de `config` em `bindingOrder`, para que a configuração seja carregada antes da seleção controlada;
+- não persista `inputs.selectedIndex` estático em recipes quando a seleção vem de `composition.links`.
+
+Quando existe configuração persistida por `tabsId`, o valor controlado por `selectedIndex` vence a restauração local depois do carregamento da config. Essa projeção controlada não grava uma nova preferência no storage; somente interações diretas do usuário persistem seleção. Isso mantém o estado canônico da composição como fonte de verdade da navegação ativa sem transformar navegação transitória em configuração salva. Em modo `nav`, o índice controla `nav.links`; em modo `group`, controla `tabs`.
+
+Exemplo canônico:
+
+```json
+{
+  "links": [
+    {
+      "id": "tabs.selectedIndexChange->state.navigation.activeTabIndex",
+      "from": { "kind": "component-port", "ref": { "widget": "workspaceTabs", "port": "selectedIndexChange" } },
+      "to": { "kind": "state", "ref": { "path": "navigation.activeTabIndex", "layer": "values", "write": true } }
+    },
+    {
+      "id": "state.navigation.activeTabIndex->tabs.selectedIndex",
+      "from": { "kind": "state", "ref": { "path": "navigation.activeTabIndex", "layer": "values" } },
+      "to": { "kind": "component-port", "ref": { "widget": "workspaceTabs", "port": "selectedIndex" } }
+    }
+  ]
+}
+```
 
 Persistência
 - Quando `tabsId` é fornecido, a configuração é salva/recuperada em `AsyncConfigStorage` na chave `tabs:<component_id>`.
@@ -110,8 +143,8 @@ export interface TabsMetadata {
   behavior?: { lazyLoad?: boolean; closeable?: boolean; reorderable?: boolean };
   accessibility?: { highContrast?: boolean; reduceMotion?: boolean };
   group?: { alignTabs?: 'start' | 'center' | 'end'; headerPosition?: 'above'|'below'; selectedIndex?: number; dynamicHeight?: boolean; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string; };
-  tabs?: Array<{ id?: string; textLabel?: string; disabled?: boolean; labelClass?: string|string[]; bodyClass?: string|string[]; content?: any[]; widgets?: WidgetDefinition[] }>;
-  nav?: { links: Array<{ id?: string; label: string; disabled?: boolean; content?: any[]; widgets?: WidgetDefinition[] }>; selectedIndex?: number; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string };
+  tabs?: Array<{ id?: string; textLabel?: string; icon?: string; disabled?: boolean; visible?: boolean; labelClass?: string|string[]; bodyClass?: string|string[]; content?: any[]; widgets?: WidgetDefinition[] }>;
+  nav?: { links: Array<{ id?: string; label: string; icon?: string; disabled?: boolean; visible?: boolean; content?: any[]; widgets?: WidgetDefinition[] }>; selectedIndex?: number; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string };
 }
 ```
 
@@ -146,18 +179,49 @@ Quick Setup
 - `openQuickSetup()` abre `TabsQuickSetupComponent` para criação rápida de abas/links.
 - `applied$`/`saved$` aplicam a configuração ao componente.
 
+## Agentic Authoring
+
+`@praxisui/tabs` publica `PRAXIS_TABS_AUTHORING_MANIFEST` para orientar edições assistidas por IA sobre `TabsMetadata`.
+
+- **Editable targets:** `tab`, `tabLabel`, `tabIcon`, `tabContent`, `activeTab`, `visibility`, `disabledState` e `layout`.
+- **Operation families:** `tab.add`, `tab.remove`, `tab.label.set`, `tab.icon.set`, `tab.order.set`, `tab.disabled.set`, `tab.visible.set`, `tab.active.set`, `layout.variant.set` e `tab.content.set`.
+- **Validation:** ids de abas/links devem ser estáveis e únicos, remoção destrutiva exige confirmação, `group` e `nav` não devem virar modos primários concorrentes, e o round-trip precisa preservar ordem, ids e selected index.
+- **Runtime/editor parity:** `tabs[].icon`, `tabs[].visible`, `nav.links[].icon` e `nav.links[].visible` são campos canônicos editáveis; itens com `visible: false` não são renderizados na navegação.
+- **Registry projection:** o manifesto é exportado no `public-api` e projetado em `components['praxis-tabs'].authoringManifest` pelo AI Registry.
+
 ## Eventos e Conexões
 
-`widgetEvent` reemite eventos de widgets internos com contexto da origem, permitindo conexões no Builder/Graph:
+Para conexoes canonicas de widgets internos, use `composition.links` com endpoint `component-port + nestedPath`.
+
+Exemplo de output de uma lista dentro da primeira tab:
+
+```json
+{
+  "kind": "component-port",
+  "ref": {
+    "widget": "tabs-widget",
+    "nestedPath": [
+      { "kind": "tab", "id": "employees-list", "index": 0 },
+      { "kind": "widget", "key": "employees-list", "componentType": "praxis-list" }
+    ],
+    "port": "itemClick",
+    "direction": "output"
+  }
+}
+```
+
+Regras:
+
+- `ref.widget` e a instancia top-level de `praxis-tabs`;
+- `nestedPath` e relativo a essa instancia e deve terminar em `kind: "widget"` com `key` estavel;
+- `ref.port` e a porta real do widget filho;
+- inputs para filhos nested devem atualizar a configuracao declarativa do filho, nao depender de dot-path publico sobre `config`.
+
+`widgetEvent` continua existindo como bridge avancada/legado para transporte de eventos internos com contexto da origem:
 
 - Forma do evento: `{ tabId?, tabIndex?, linkId?, linkIndex?, sourceId, output?, payload }`.
-- De um componente interno para fora:
-  - From: `{ widget: '<key do tabs>', output: 'widgetEvent' }`
-  - Map (exemplo tabela interna): `payload.payload.id`
-  - To: `<widget externo>.<input>`
-- De fora para um componente interno (dot-path):
-  - Grupo: `inputs.config.tabs[<idx>].widgets[<widx>].inputs.<input>`
-  - Nav: `inputs.config.nav.links[<idx>].widgets[<widx>].inputs.<input>`
+- Nao use `widgetEvent` como caminho principal para authoring novo de nested ports.
+- Nao use dot-path de `config.tabs[].widgets[]` como contrato publico para novos links nested.
 
 ## Lazy Load
 
@@ -167,7 +231,7 @@ Quick Setup
 ## Exemplo Mínimo
 
 ```html
-<praxis-tabs [config]="tabsCfg" [tabsId]="'cliente-tabs'" [enableCustomization]="true" (widgetEvent)="onWidgetEvent($event)"></praxis-tabs>
+<praxis-tabs [config]="tabsCfg" [tabsId]="'cliente-tabs'" [enableCustomization]="true"></praxis-tabs>
 ```
 
 ```ts

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)
@@ -2764,10 +2849,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 +3043,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 +3086,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 +3101,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 +3166,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 +3176,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 +3207,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 +3218,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 +3230,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 +3284,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 +3344,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 +3359,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 +3424,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 +3434,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 +3465,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 +3476,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 +3488,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 +3542,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 +3550,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 +3601,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 +3664,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 +3791,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 +4134,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 };

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Provider } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
-import { AiCapability, WidgetDefinition, WidgetEventEnvelope, WidgetEventPathSegment, PraxisI18nConfig, ComponentDocMeta, ComponentMetadataRegistry, AiCapabilityCategory, AiValueKind, AiCapabilityCatalog } from '@praxisui/core';
+import { AiCapability, WidgetDefinition, WidgetEventEnvelope, WidgetEventPathSegment, PraxisI18nConfig, ComponentDocMeta, ComponentMetadataRegistry, AiCapabilityCategory, AiValueKind, AiCapabilityCatalog, ComponentAuthoringManifest } from '@praxisui/core';
 import { FormGroup } from '@angular/forms';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { BaseAiAdapter, PatchResult } from '@praxisui/ai';
@@ -81,9 +81,11 @@ interface TabMetadata {
     ariaLabel?: string;
     ariaLabelledby?: string;
     textLabel?: string;
+    icon?: string;
     labelClass?: string | string[];
     bodyClass?: string | string[];
     disabled?: boolean;
+    visible?: boolean;
     content?: any[];
     widgets?: WidgetDefinition[];
     isActive?: boolean;
@@ -106,8 +108,10 @@ interface TabNavMetadata {
 interface TabLinkMetadata {
     id?: string;
     label: string;
+    icon?: string;
     active?: boolean;
     disabled?: boolean;
+    visible?: boolean;
     disableRipple?: boolean;
     fitInkBarToContent?: boolean;
     content?: any[];
@@ -140,6 +144,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     config: TabsMetadata | null;
     tabsId: string;
     componentInstanceId?: string;
+    set selectedIndex(index: number | null | undefined);
     enableCustomization: boolean;
     form: FormGroup | null;
     context: Record<string, any> | null;
@@ -155,6 +160,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected selectedIndexSignal: i0.WritableSignal<number>;
     private groupLoaded;
     private navLoaded;
+    private controlledSelectedIndex?;
     private readonly destroy$;
     private readonly widgetDefinitionCache;
     ngOnInit(): void;
@@ -163,9 +169,23 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     isNavMode(): boolean;
     effectiveAnimationDuration(): string;
     getNavActive(i: number): boolean;
+    protected visibleNavLinkEntries(): Array<{
+        link: TabLinkMetadata;
+        index: number;
+    }>;
+    protected visibleTabEntries(): Array<{
+        tab: TabMetadata;
+        index: number;
+    }>;
+    protected selectedVisibleNavIndex(): number;
+    protected selectedVisibleTabIndex(): number;
+    protected onVisibleTabIndexChange(index: number): void;
     onNavClick(i: number): void;
     onNavDrop(event: CdkDragDrop<any>): void;
+    protected onVisibleNavDrop(event: CdkDragDrop<any>): void;
     onSelectedIndexChange(index: number): void;
+    private applySelectedIndex;
+    private reapplyControlledSelectedIndex;
     closeTab(index: number): void;
     moveTab(index: number, delta: number): void;
     openEditor(): void;
@@ -187,6 +207,14 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected groupContentReady(index: number): boolean;
     protected navContentReady(index: number): boolean;
     protected isEmptyGlobal(): boolean;
+    protected trackVisibleNavLink(index: number, entry: {
+        link: TabLinkMetadata;
+        index: number;
+    }): string;
+    protected trackVisibleTab(index: number, entry: {
+        tab: TabMetadata;
+        index: number;
+    }): string;
     protected trackNavLink(index: number, link: TabLinkMetadata): string;
     protected trackTab(index: number, tab: TabMetadata): string;
     protected trackWidgetDefinition(index: number, widget: WidgetDefinition): string;
@@ -200,7 +228,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected styleCss(): string | null;
     private cloneWidgetDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<PraxisTabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisTabs, "praxis-tabs", never, { "config": { "alias": "config"; "required": false; }; "tabsId": { "alias": "tabsId"; "required": true; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; }; "form": { "alias": "form"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, { "animationDone": "animationDone"; "focusChange": "focusChange"; "selectedIndexChange": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "indexFocused": "indexFocused"; "selectFocusedIndex": "selectFocusedIndex"; "widgetEvent": "widgetEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisTabs, "praxis-tabs", never, { "config": { "alias": "config"; "required": false; }; "tabsId": { "alias": "tabsId"; "required": true; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; }; "form": { "alias": "form"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, { "animationDone": "animationDone"; "focusChange": "focusChange"; "selectedIndexChange": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "indexFocused": "indexFocused"; "selectFocusedIndex": "selectFocusedIndex"; "widgetEvent": "widgetEvent"; }, never, never, true, never>;
 }
 
 declare const PRAXIS_TABS_I18N_NAMESPACE = "praxisTabs";
@@ -412,5 +440,7 @@ interface CapabilityCatalog extends AiCapabilityCatalog {
 }
 declare const TABS_AI_CAPABILITIES: CapabilityCatalog;
 
-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 };
+declare const PRAXIS_TABS_AUTHORING_MANIFEST: ComponentAuthoringManifest;
+
+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 };
 export type { Capability, CapabilityCatalog, CapabilityCategory, TabGroupMetadata, TabLinkMetadata, TabMetadata, TabNavMetadata, TabsAccessibilityConfig, TabsAppearanceConfig, TabsApplyPlan, TabsAuthoringBindings, TabsAuthoringDocument, TabsBehaviorConfig, TabsBindingsDiff, TabsEditorDiagnostic, TabsEditorDiagnosticLevel, TabsEditorDocumentKind, TabsEventConfig, TabsMetadata, TabsRuntimeContext, TabsRuntimePlan, TabsStyleTokens, ValueKind };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@praxisui/tabs",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.12",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/material": "^20.0.0",
     "@angular/cdk": "^20.0.0",
-    "@praxisui/core": "^8.0.0-beta.1",
-    "@praxisui/dynamic-fields": "^8.0.0-beta.1",
-    "@praxisui/settings-panel": "^8.0.0-beta.1"
+    "@praxisui/core": "^8.0.0-beta.12",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.12",
+    "@praxisui/settings-panel": "^8.0.0-beta.12"
   },
   "dependencies": {
     "tslib": "^2.3.0",