@praxisui/tabs 10.0.0-rc.3 → 10.0.0-rc.31

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-07T02:07:06.204Z",
+  "generatedAt": "2026-10-16T17:45:27.774Z",
   "packageName": "@praxisui/tabs",
-  "packageVersion": "10.0.0-rc.3",
+  "packageVersion": "10.0.0-rc.31",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-tabs.mjs

@@ -55,6 +55,7 @@ function validateTabsAuthoringDocument(doc, _context) {
     validateModeAmbiguity(normalized.config, diagnostics);
     validateDuplicateTabIds(normalized.config, diagnostics);
     validateDuplicateLinkIds(normalized.config, diagnostics);
+    validateDuplicateChildWidgetKeys(normalized.config, diagnostics);
     validateUnsupportedGuidedFields(normalized.config, diagnostics);
     return diagnostics;
 }
@@ -86,11 +87,28 @@ function buildTabsApplyPlan(doc, runtime, options) {
 function serializeTabsAuthoringDocument(doc) {
     return normalizeTabsAuthoringDocument(doc);
 }
+function buildUniqueChildWidgetKey(containerId, widgetId, existingKeys) {
+    const used = new Set(Array.from(existingKeys)
+        .map((key) => key.trim())
+        .filter(Boolean));
+    const ownerSlug = slugifyIdentifier(containerId) || 'item';
+    const widgetSlug = slugifyIdentifier((widgetId || 'widget').replace(/^praxis-/i, '')) || 'widget';
+    const base = `${ownerSlug}-${widgetSlug}`;
+    let candidate = base;
+    let suffix = 2;
+    while (used.has(candidate)) {
+        candidate = `${base}-${suffix++}`;
+    }
+    return candidate;
+}
 function normalizeTabsConfig(config) {
     const next = cloneJson(config ?? {});
     if (!Array.isArray(next.tabs) || next.tabs.length === 0) {
         delete next.tabs;
     }
+    else {
+        next.tabs = next.tabs.map((tab, index) => normalizeContainerWidgets(tab, `tab${index + 1}`));
+    }
     if (!next.nav || typeof next.nav !== 'object') {
         delete next.nav;
     }
@@ -104,8 +122,8 @@ function normalizeTabsConfig(config) {
         next.nav.selectedIndex = clampIndex(next.nav.selectedIndex, next.nav.links?.length ?? 0);
     }
     if (Array.isArray(next.nav?.links)) {
-        next.nav.links = next.nav.links.map((link) => {
-            const copy = { ...link };
+        next.nav.links = next.nav.links.map((link, index) => {
+            const copy = normalizeContainerWidgets({ ...link }, `link${index + 1}`);
             delete copy.active;
             return copy;
         });
@@ -166,6 +184,74 @@ function validateDuplicateLinkIds(config, diagnostics) {
         seen.add(id);
     });
 }
+function validateDuplicateChildWidgetKeys(config, diagnostics) {
+    (config.tabs ?? []).forEach((tab, tabIndex) => {
+        const seen = new Set();
+        (tab.widgets ?? []).forEach((widget, widgetIndex) => {
+            const key = normalizeId(widget?.childWidgetKey);
+            if (!key)
+                return;
+            if (seen.has(key)) {
+                diagnostics.push(errorDiagnostic('tabs.config.widgets.childWidgetKey.duplicate', 'Duplicate childWidgetKey detected within the same tab.', `config.tabs[${tabIndex}].widgets[${widgetIndex}].childWidgetKey`));
+                return;
+            }
+            seen.add(key);
+        });
+    });
+    (config.nav?.links ?? []).forEach((link, linkIndex) => {
+        const seen = new Set();
+        (link.widgets ?? []).forEach((widget, widgetIndex) => {
+            const key = normalizeId(widget?.childWidgetKey);
+            if (!key)
+                return;
+            if (seen.has(key)) {
+                diagnostics.push(errorDiagnostic('tabs.config.widgets.childWidgetKey.duplicate', 'Duplicate childWidgetKey detected within the same nav link.', `config.nav.links[${linkIndex}].widgets[${widgetIndex}].childWidgetKey`));
+                return;
+            }
+            seen.add(key);
+        });
+    });
+}
+function normalizeContainerWidgets(container, fallbackContainerId) {
+    if (!container || typeof container !== 'object' || !Array.isArray(container.widgets)) {
+        return container;
+    }
+    const usedKeys = new Set();
+    for (const widget of container.widgets) {
+        const explicitKey = normalizeId(widget?.childWidgetKey);
+        if (explicitKey) {
+            usedKeys.add(explicitKey);
+        }
+    }
+    return {
+        ...container,
+        widgets: container.widgets.map((widget) => {
+            if (!widget || typeof widget !== 'object') {
+                return widget;
+            }
+            const explicitKey = normalizeId(widget.childWidgetKey);
+            if (explicitKey) {
+                return {
+                    ...widget,
+                    childWidgetKey: explicitKey,
+                };
+            }
+            const generatedKey = buildUniqueChildWidgetKey(container.id || fallbackContainerId, widget.id, usedKeys);
+            usedKeys.add(generatedKey);
+            return {
+                ...widget,
+                childWidgetKey: generatedKey,
+            };
+        }),
+    };
+}
+function slugifyIdentifier(value) {
+    return String(value ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}
 function validateUnsupportedGuidedFields(config, diagnostics) {
     if (config.group?.contentTabIndex !== undefined) {
         diagnostics.push(infoDiagnostic('tabs.config.group.contentTabIndex.unsupported', 'group.contentTabIndex is outside the supported authoring surface.', 'config.group.contentTabIndex'));
@@ -849,7 +935,14 @@ class PraxisTabsConfigEditor {
             return;
         const t = this.editedConfig.tabs[tabIndex];
         t.widgets = t.widgets || [];
-        t.widgets.push({ id });
+        const childWidgetKey = this.nextChildWidgetKey(t.id || `tab${tabIndex + 1}`, id, t.widgets);
+        const rp = (this.quickResourcePathTab[tabIndex] || '').trim();
+        const defaultInputs = this.buildDefaultWidgetInputs(id, rp);
+        t.widgets.push({
+            id,
+            childWidgetKey,
+            ...(defaultInputs ? { inputs: defaultInputs } : {}),
+        });
         this.onAppearanceChange();
     }
     removeWidgetFromTab(tabIndex, widgetIndex) {
@@ -859,6 +952,20 @@ class PraxisTabsConfigEditor {
         t.widgets.splice(widgetIndex, 1);
         this.onAppearanceChange();
     }
+    updateWidgetKeyTab(tabIndex, widgetIndex, key) {
+        const t = this.editedConfig.tabs?.[tabIndex];
+        const widget = t?.widgets?.[widgetIndex];
+        if (!widget)
+            return;
+        const trimmed = String(key ?? '').trim();
+        if (trimmed) {
+            widget.childWidgetKey = trimmed;
+        }
+        else {
+            delete widget.childWidgetKey;
+        }
+        this.onAppearanceChange();
+    }
     updateWidgetInputsTab(tabIndex, widgetIndex, text) {
         const t = this.editedConfig.tabs[tabIndex];
         try {
@@ -883,14 +990,30 @@ class PraxisTabsConfigEditor {
             return;
         const t = this.editedConfig.tabs[tabIndex];
         t.widgets = t.widgets || [];
+        const containerId = t.id || `tab${tabIndex + 1}`;
         if (type === 'form') {
-            t.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+            const id = 'praxis-dynamic-form';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { resourcePath: rp },
+            });
         }
         else if (type === 'table') {
-            t.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp, tableId: rp } });
+            const id = 'praxis-table';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { resourcePath: rp, tableId: rp },
+            });
         }
         else {
-            t.widgets.push({ id: 'praxis-crud', inputs: { crudId: rp, metadata: { resource: { path: rp } } } });
+            const id = 'praxis-crud';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { crudId: rp, metadata: { resource: { path: rp } } },
+            });
         }
         this.onAppearanceChange();
     }
@@ -927,7 +1050,14 @@ class PraxisTabsConfigEditor {
             return;
         const l = this.nav.links[linkIndex];
         l.widgets = l.widgets || [];
-        l.widgets.push({ id });
+        const childWidgetKey = this.nextChildWidgetKey(l.id || `link${linkIndex + 1}`, id, l.widgets);
+        const rp = (this.quickResourcePathLink[linkIndex] || '').trim();
+        const defaultInputs = this.buildDefaultWidgetInputs(id, rp);
+        l.widgets.push({
+            id,
+            childWidgetKey,
+            ...(defaultInputs ? { inputs: defaultInputs } : {}),
+        });
         this.onAppearanceChange();
     }
     removeWidgetFromLink(linkIndex, widgetIndex) {
@@ -937,6 +1067,20 @@ class PraxisTabsConfigEditor {
         l.widgets.splice(widgetIndex, 1);
         this.onAppearanceChange();
     }
+    updateWidgetKeyLink(linkIndex, widgetIndex, key) {
+        const l = this.nav.links?.[linkIndex];
+        const widget = l?.widgets?.[widgetIndex];
+        if (!widget)
+            return;
+        const trimmed = String(key ?? '').trim();
+        if (trimmed) {
+            widget.childWidgetKey = trimmed;
+        }
+        else {
+            delete widget.childWidgetKey;
+        }
+        this.onAppearanceChange();
+    }
     updateWidgetInputsLink(linkIndex, widgetIndex, text) {
         const l = this.nav.links[linkIndex];
         try {
@@ -961,17 +1105,58 @@ class PraxisTabsConfigEditor {
             return;
         const l = this.nav.links[linkIndex];
         l.widgets = l.widgets || [];
+        const containerId = l.id || `link${linkIndex + 1}`;
         if (type === 'form') {
-            l.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+            const id = 'praxis-dynamic-form';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { resourcePath: rp },
+            });
         }
         else if (type === 'table') {
-            l.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp, tableId: rp } });
+            const id = 'praxis-table';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { resourcePath: rp, tableId: rp },
+            });
         }
         else {
-            l.widgets.push({ id: 'praxis-crud', inputs: { crudId: rp, metadata: { resource: { path: rp } } } });
+            const id = 'praxis-crud';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { crudId: rp, metadata: { resource: { path: rp } } },
+            });
         }
         this.onAppearanceChange();
     }
+    nextChildWidgetKey(containerId, widgetId, widgets) {
+        const existingKeys = (widgets ?? [])
+            .map((widget) => String(widget?.childWidgetKey ?? '').trim())
+            .filter(Boolean);
+        return buildUniqueChildWidgetKey(containerId, widgetId, existingKeys);
+    }
+    buildDefaultWidgetInputs(widgetId, resourcePath) {
+        if (widgetId === 'praxis-related-resource-outlet') {
+            return {
+                parentResourcePath: resourcePath,
+                surfaceId: '',
+                mode: 'inline',
+            };
+        }
+        if (!resourcePath) {
+            return undefined;
+        }
+        if (widgetId === 'praxis-table') {
+            return { resourcePath, tableId: resourcePath };
+        }
+        if (widgetId === 'praxis-dynamic-form') {
+            return { resourcePath };
+        }
+        return undefined;
+    }
     stringify(v) { try {
         return v ? JSON.stringify(v, null, 2) : '';
     }
@@ -1390,6 +1575,10 @@ class PraxisTabsConfigEditor {
                 <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                 <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
               </div>
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyTab(i, wi, $event)" />
+              </mat-form-field>
               <div class="editor-grid two tight">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -1484,6 +1673,10 @@ class PraxisTabsConfigEditor {
                       <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                       <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromLink(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
                     </div>
+                    <mat-form-field appearance="outline">
+                      <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                      <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyLink(i, wi, $event)" />
+                    </mat-form-field>
                     <div class="editor-grid two tight">
                       <mat-form-field appearance="outline">
                         <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -1920,6 +2113,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                 <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
               </div>
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyTab(i, wi, $event)" />
+              </mat-form-field>
               <div class="editor-grid two tight">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -2014,6 +2211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                       <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromLink(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
                     </div>
+                    <mat-form-field appearance="outline">
+                      <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                      <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyLink(i, wi, $event)" />
+                    </mat-form-field>
                     <div class="editor-grid two tight">
                       <mat-form-field appearance="outline">
                         <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -5764,4 +5965,4 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, PraxisTabsWidgetConfigEditor, 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, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, buildUniqueChildWidgetKey, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@praxisui/tabs",
-  "version": "10.0.0-rc.3",
+  "version": "10.0.0-rc.31",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^10.0.0-rc.3",
-    "@praxisui/dynamic-fields": "^10.0.0-rc.3",
-    "@praxisui/settings-panel": "^10.0.0-rc.3",
+    "@praxisui/core": "^10.0.0-rc.31",
+    "@praxisui/dynamic-fields": "^10.0.0-rc.31",
+    "@praxisui/settings-panel": "^10.0.0-rc.31",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^10.0.0-rc.3",
+    "@praxisui/ai": "^10.0.0-rc.31",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-tabs.d.ts

@@ -492,6 +492,7 @@ declare class PraxisTabsConfigEditor implements SettingsValueProvider {
     moveTab(index: number, delta: number): void;
     addWidgetToTab(tabIndex: number): void;
     removeWidgetFromTab(tabIndex: number, widgetIndex: number): void;
+    updateWidgetKeyTab(tabIndex: number, widgetIndex: number, key: string): void;
     updateWidgetInputsTab(tabIndex: number, widgetIndex: number, text: string): void;
     updateWidgetOutputsTab(tabIndex: number, widgetIndex: number, text: string): void;
     addPresetToTab(tabIndex: number, type: 'form' | 'table' | 'crud'): void;
@@ -500,9 +501,12 @@ declare class PraxisTabsConfigEditor implements SettingsValueProvider {
     moveLink(index: number, delta: number): void;
     addWidgetToLink(linkIndex: number): void;
     removeWidgetFromLink(linkIndex: number, widgetIndex: number): void;
+    updateWidgetKeyLink(linkIndex: number, widgetIndex: number, key: string): void;
     updateWidgetInputsLink(linkIndex: number, widgetIndex: number, text: string): void;
     updateWidgetOutputsLink(linkIndex: number, widgetIndex: number, text: string): void;
     addPresetToLink(linkIndex: number, type: 'form' | 'table' | 'crud'): void;
+    private nextChildWidgetKey;
+    private buildDefaultWidgetInputs;
     stringify(v: any): string;
     getCompName(id: string): string;
     onTabWidgetDrop(tabIndex: number, event: CdkDragDrop<WidgetDefinition[]>): void;
@@ -560,6 +564,7 @@ declare function buildTabsApplyPlan(doc: TabsAuthoringDocument, runtime?: TabsRu
     saveBindings?: boolean;
 }): TabsApplyPlan;
 declare function serializeTabsAuthoringDocument(doc: TabsAuthoringDocument): TabsAuthoringDocument;
+declare function buildUniqueChildWidgetKey(containerId: string | undefined, widgetId: string | undefined, existingKeys: Iterable<string>): string;
 
 /**
  * Capabilities catalog for Praxis Tabs (TabsMetadata).
@@ -586,5 +591,5 @@ declare const TABS_AI_CAPABILITIES: CapabilityCatalog;
 
 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, PraxisTabsWidgetConfigEditor, 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, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, buildUniqueChildWidgetKey, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };
 export type { Capability, CapabilityCatalog, CapabilityCategory, PraxisTabsWidgetEditorInputs, PraxisTabsWidgetEditorValue, TabGroupMetadata, TabLinkMetadata, TabMetadata, TabNavMetadata, TabsAccessibilityConfig, TabsAppearanceConfig, TabsApplyPlan, TabsAuthoringBindings, TabsAuthoringDocument, TabsBehaviorConfig, TabsBindingsDiff, TabsConfigChangeEvent, TabsConfigPersistenceStrategy, TabsEditorDiagnostic, TabsEditorDiagnosticLevel, TabsEditorDocumentKind, TabsEventConfig, TabsMetadata, TabsRuntimeContext, TabsRuntimePlan, TabsStyleTokens, ValueKind };