@praxisui/core 1.0.0-beta.3 → 1.0.0-beta.30

package/fesm2022/praxisui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, Injectable, inject, APP_INITIALIZER, Inject, makeEnvironmentProviders, ViewContainerRef, EventEmitter, Output, Input, Directive, signal, computed, HostListener, Optional } from '@angular/core';
+import { Component, InjectionToken, Injectable, inject, APP_INITIALIZER, Inject, makeEnvironmentProviders, ViewContainerRef, EventEmitter, Output, Input, Directive, signal, computed, HostListener, Optional, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
 import { BehaviorSubject, from, of, EMPTY, throwError, firstValueFrom } from 'rxjs';
@@ -8,20 +8,22 @@ import * as i1$1 from '@angular/forms';
 import { Validators, FormGroup, FormControl, FormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/card';
+import * as i3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/input';
+import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i2$2 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 class PraxisCore {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -849,6 +851,16 @@ class SchemaNormalizerService {
             // -------------------------------------------------------------------
             // Layout and presentation
             // -------------------------------------------------------------------
+            // Visibility flags (x-ui)
+            if (ui.hidden !== undefined) {
+                field.hidden = this.parseBoolean(ui.hidden);
+            }
+            if (ui.tableHidden !== undefined) {
+                field.tableHidden = this.parseBoolean(ui.tableHidden);
+            }
+            if (ui.formHidden !== undefined) {
+                field.formHidden = this.parseBoolean(ui.formHidden);
+            }
             if (ui.width !== undefined) {
                 field.width = ui.width;
             }
@@ -1127,20 +1139,14 @@ class GenericCrudService {
         const schemaId = buildSchemaId({ path, operation, schemaType, includeInternalSchemas: false, tenant, locale, apiOrigin });
         const headersBase = composeHeadersWithVersion(entry);
         return from(this._schemaCache.get(schemaId)).pipe(concatMap((cached) => {
-            let headers = headersBase;
+            let headers = (headersBase instanceof HttpHeaders ? headersBase : new HttpHeaders(headersBase));
             if (cached?.schemaHash) {
-                headers = (headersBase instanceof HttpHeaders ? headersBase : new HttpHeaders(headersBase))
-                    .set('If-None-Match', `"${cached.schemaHash}"`)
-                    .set('Accept-Language', locale || '')
-                    .set('X-Tenant', tenant || '');
-            }
-            else {
-                headers = (headersBase instanceof HttpHeaders ? headersBase : new HttpHeaders(headersBase));
-                if (locale)
-                    headers = headers.set('Accept-Language', locale);
-                if (tenant)
-                    headers = headers.set('X-Tenant', tenant);
+                headers = headers.set('If-None-Match', `"${cached.schemaHash}"`);
             }
+            if (locale)
+                headers = headers.set('Accept-Language', locale);
+            if (tenant)
+                headers = headers.set('X-Tenant', tenant);
             console.debug('[CRUD:Service] getSchema (filtered fallback):request', { filteredUrl, path, hasCached: !!cached });
             return this.http.get(filteredUrl, { params: httpParams, headers, observe: 'response' });
         }), concatMap((resp) => {
@@ -1217,9 +1223,9 @@ class GenericCrudService {
             catch { }
             return of(this.schemaNormalizer.normalizeSchema(body));
         }), 
-        // Angular HttpClient treats 304 as error; handle cache reuse here
+        // Angular HttpClient treats 304 as error; also handle status 0 (CORS/network) by reusing cache
         catchError((err) => {
-            if (err?.status === 304) {
+            if (err?.status === 304 || err?.status === 0) {
                 return from(this._schemaCache.get(schemaId)).pipe(concatMap((cached) => {
                     if (cached?.schema) {
                         try {
@@ -1437,9 +1443,9 @@ class GenericCrudService {
             this._schemaCache.set(schemaId, entryToCache);
             return of(this.schemaNormalizer.normalizeSchema(body));
         }), 
-        // Angular HttpClient may surface 304 as error; handle reuse and refetch
+        // Angular HttpClient may surface 304 as error; also handle status 0 (CORS/network) by reusing cache
         catchError((err) => {
-            if (err?.status === 304) {
+            if (err?.status === 304 || err?.status === 0) {
                 return from(this._schemaCache.get(schemaId)).pipe(concatMap((cached) => {
                     if (cached?.schema) {
                         try {
@@ -1958,10 +1964,19 @@ class GenericCrudService {
         const baseUrl = buildApiUrl(entry);
         try {
             const origin = new URL(baseUrl).origin;
-            return `${origin}/schemas/filtered`;
+            return `${origin.replace(/\/+$/, '')}/schemas/filtered`;
         }
         catch {
-            return '/schemas/filtered';
+            // Tolerate relative baseUrl (e.g., '/api') by resolving against app origin when available
+            try {
+                const appOrigin = globalThis?.location?.origin;
+                if (appOrigin && typeof appOrigin === 'string' && appOrigin.startsWith('http')) {
+                    return `${appOrigin.replace(/\/+$/, '')}/schemas/filtered`;
+                }
+            }
+            catch { }
+            // Last resort: localhost origin to build an absolute URL (document SSR guidance in docs)
+            return 'http://localhost/schemas/filtered';
         }
     }
     /**
@@ -2134,27 +2149,12 @@ function createDefaultTableConfig() {
         },
         actions: {
             row: {
-                enabled: true,
+                enabled: false,
                 position: 'end',
                 width: '120px',
                 display: 'icons',
                 trigger: 'hover',
-                actions: [
-                    {
-                        id: 'view',
-                        label: 'Visualizar',
-                        icon: 'visibility',
-                        action: 'view',
-                    },
-                    { id: 'edit', label: 'Editar', icon: 'edit', action: 'edit' },
-                    {
-                        id: 'delete',
-                        label: 'Excluir',
-                        icon: 'delete',
-                        action: 'delete',
-                        autoDelete: false,
-                    },
-                ],
+                actions: [],
             },
             bulk: {
                 enabled: false,
@@ -4126,6 +4126,13 @@ function normalizeFormConfig(config) {
         return config;
     const normalized = { ...config };
     normalized.fieldMetadata = normalizeFormMetadata(config.fieldMetadata);
+    // Ensure hints exist and fill missing values with defaults
+    try {
+        const defaults = getDefaultFormHints();
+        const current = normalized.hints;
+        normalized.hints = fillUndefined(current || {}, defaults);
+    }
+    catch { }
     return normalized;
 }
 /**
@@ -4257,6 +4264,8 @@ function createDefaultFormConfig() {
                 ],
             },
         ],
+        // Default mode hints (didactic tooltips)
+        hints: getDefaultFormHints(),
     };
     return ensureIds(config);
 }
@@ -4269,6 +4278,24 @@ function isValidFormConfig(config) {
 function createEmptyFormConfig() {
     return { sections: [] };
 }
+/**
+ * Default hint texts for data and UI modes.
+ */
+function getDefaultFormHints() {
+    return {
+        dataModes: {
+            create: 'Criar novo registro. Campos editáveis e ações de salvar habilitadas.',
+            edit: 'Editar registro existente. Campos editáveis e ações de salvar habilitadas.',
+            view: 'Visualizar registro. Sem edição por padrão; combine com Modo Leitura ou Apresentação.',
+        },
+        uiModes: {
+            presentation: 'Modo apresentação: exibe rótulo + valor formatado e oculta inputs/ações. Efetivo apenas em Visualizar.',
+            readonly: 'Modo leitura: mantém os inputs visíveis, porém bloqueados (sem interação). Continua participando da validação e do envio.',
+            disabled: 'Desabilitado: aparência inativa; ideal para bloquear interação visualmente. Evite desativar campos essenciais.',
+            visible: 'Visibilidade: controla exibição sem destruir controles (útil para regras condicionais).',
+        },
+    };
+}
 /**
  * Merges field metadata into a FormConfig
  * Useful when combining layout with server-loaded metadata
@@ -4711,6 +4738,8 @@ function mapFieldDefinitionToMetadata(field) {
         'disabled',
         'readOnly',
         'hidden',
+        'formHidden',
+        'tableHidden',
         'unique',
         'mask',
         'inlineEditing',
@@ -5750,7 +5779,7 @@ class EmptyStateCardComponent {
         </div>
       </mat-card-content>
     </mat-card>
-  `, isInline: true, styles: [".empty-card{display:block;margin:12px}.empty-card.empty-inline{margin:8px 0}.content{display:flex;align-items:center;gap:12px}.icon{font-size:32px;width:32px;height:32px;opacity:.9}.title{margin:0;font-size:16px;font-weight:600}.desc{margin:4px 0 0;opacity:.76}.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  `, isInline: true, styles: [".empty-card{display:block;margin:12px}.empty-card.empty-inline{margin:8px 0}.content{display:flex;align-items:center;gap:12px}.icon{font-size:32px;width:32px;height:32px;opacity:.9}.title{margin:0;font-size:16px;font-weight:600}.desc{margin:4px 0 0;opacity:.76}.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EmptyStateCardComponent, decorators: [{
             type: Component,
@@ -5904,7 +5933,7 @@ class ResourceQuickConnectComponent {
       </mat-form-field>
       <small style="opacity:.75">Conecte o componente à fonte de dados (ex.: /api/&lt;rota-do-recurso&gt;)</small>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ResourceQuickConnectComponent, decorators: [{
             type: Component,
@@ -6093,7 +6122,7 @@ class PraxisIconPickerComponent {
       <span class="pip-typed" *ngIf="query.trim()">{{ previewValue() }}</span>
     </div>
   </div>
-  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pip-item:hover{background:#0000000a}.pip-name{font-size:12px;color:#0009;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:#0009;margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:#000000b3}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }] });
+  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.14));border-radius:10px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);cursor:pointer}.pip-item:hover{background:color-mix(in oklab,var(--md-sys-color-on-surface) 8%,transparent)}.pip-name{font-size:12px;color:var(--md-sys-color-on-surface-variant, rgba(0,0,0,.6));white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:var(--md-sys-color-on-surface-variant, rgba(0,0,0,.6));margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:var(--md-sys-color-on-surface, rgba(0,0,0,.7))}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisIconPickerComponent, decorators: [{
             type: Component,
@@ -6137,7 +6166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
       <span class="pip-typed" *ngIf="query.trim()">{{ previewValue() }}</span>
     </div>
   </div>
-  `, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pip-item:hover{background:#0000000a}.pip-name{font-size:12px;color:#0009;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:#0009;margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:#000000b3}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"] }]
+  `, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.14));border-radius:10px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);cursor:pointer}.pip-item:hover{background:color-mix(in oklab,var(--md-sys-color-on-surface) 8%,transparent)}.pip-name{font-size:12px;color:var(--md-sys-color-on-surface-variant, rgba(0,0,0,.6));white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:var(--md-sys-color-on-surface-variant, rgba(0,0,0,.6));margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:var(--md-sys-color-on-surface, rgba(0,0,0,.7))}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -6196,6 +6225,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Optional DI token used by SchemaViewer when input is not provided. */
+const SCHEMA_VIEWER_CONTEXT = new InjectionToken('SCHEMA_VIEWER_CONTEXT');
+
+class SchemaViewerComponent {
+    registry = inject(ComponentMetadataRegistry);
+    normalizer = inject(SchemaNormalizerService);
+    injected = inject(SCHEMA_VIEWER_CONTEXT, { optional: true });
+    context;
+    // Internal reactive state
+    _ctx = signal(undefined, ...(ngDevMode ? [{ debugName: "_ctx" }] : []));
+    ctx = computed(() => this._ctx(), ...(ngDevMode ? [{ debugName: "ctx" }] : []));
+    _componentMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "_componentMeta" }] : []));
+    componentMeta = computed(() => this._componentMeta(), ...(ngDevMode ? [{ debugName: "componentMeta" }] : []));
+    _normalizedFields = signal([], ...(ngDevMode ? [{ debugName: "_normalizedFields" }] : []));
+    normalizedFields = computed(() => this._normalizedFields(), ...(ngDevMode ? [{ debugName: "normalizedFields" }] : []));
+    ngOnChanges(changes) {
+        if ('context' in changes) {
+            this.refresh();
+        }
+    }
+    refresh() {
+        const ctx = this.context || this.injected || undefined;
+        this._ctx.set(ctx);
+        if (!ctx) {
+            this._componentMeta.set(undefined);
+            this._normalizedFields.set([]);
+            return;
+        }
+        const meta = ctx.componentId ? this.registry.get(ctx.componentId) : undefined;
+        this._componentMeta.set(meta);
+        // Compute normalized fields if needed
+        if (ctx.normalizedFields && ctx.normalizedFields.length) {
+            this._normalizedFields.set(ctx.normalizedFields);
+        }
+        else if (ctx.backendSchema) {
+            try {
+                const defs = this.normalizer.normalizeSchema(ctx.backendSchema);
+                this._normalizedFields.set(defs || []);
+            }
+            catch {
+                this._normalizedFields.set([]);
+            }
+        }
+        else {
+            this._normalizedFields.set([]);
+        }
+    }
+    hasAnyData() {
+        const c = this._ctx();
+        return !!(c?.rawConfig || c?.effectiveConfig || c?.backendSchema || (this._normalizedFields()?.length));
+    }
+    copyAll() {
+        const c = this._ctx();
+        const payload = {
+            component: this._componentMeta(),
+            config: { raw: c?.rawConfig, effective: c?.effectiveConfig },
+            backendSchema: { meta: c?.schemaMeta, body: c?.backendSchema },
+            fields: this._normalizedFields(),
+        };
+        try {
+            const text = JSON.stringify(payload, null, 2);
+            if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+                navigator.clipboard.writeText(text);
+            }
+            else {
+                // Fallback: create a temp textarea
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                document.body.removeChild(ta);
+            }
+        }
+        catch { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: SchemaViewerComponent, isStandalone: true, selector: "praxis-schema-viewer", inputs: { context: "context" }, usesOnChanges: true, ngImport: i0, template: `
+    <mat-card class="schema-viewer" appearance="outlined">
+      <mat-card-header>
+        <div class="header">
+          <div class="title">
+            <mat-icon fontIcon="schema"></mat-icon>
+            <h3>{{ ctx()?.title || 'Schema & Metadata' }}</h3>
+          </div>
+          <div class="actions">
+            <button mat-stroked-button color="primary" (click)="copyAll()" [disabled]="!hasAnyData()">
+              <mat-icon>content_copy</mat-icon>
+              Copiar tudo
+            </button>
+          </div>
+        </div>
+        <div class="notes" *ngIf="ctx()?.notes">{{ ctx()?.notes }}</div>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-tab-group>
+          <mat-tab label="Component">
+            <div class="section">
+              <div class="kv"><span>Id</span><code>{{ componentMeta()?.id }}</code></div>
+              <div class="kv"><span>Selector</span><code>{{ componentMeta()?.selector }}</code></div>
+              <div class="kv"><span>Lib</span><code>{{ componentMeta()?.lib || '—' }}</code></div>
+              <div class="kv"><span>Friendly</span><code>{{ componentMeta()?.friendlyName }}</code></div>
+              <div class="kv" *ngIf="componentMeta()?.description"><span>Descrição</span><code>{{ componentMeta()?.description }}</code></div>
+
+              <div class="sub">Inputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.inputs?.length; else noInputs">{{ componentMeta()?.inputs | json }}</pre>
+              <ng-template #noInputs><div class="muted">Sem inputs documentados.</div></ng-template>
+
+              <div class="sub">Outputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.outputs?.length; else noOutputs">{{ componentMeta()?.outputs | json }}</pre>
+              <ng-template #noOutputs><div class="muted">Sem outputs documentados.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Config">
+            <div class="section">
+              <div class="sub">Raw</div>
+              <pre class="pretty" *ngIf="ctx()?.rawConfig as rc; else noRaw">{{ rc | json }}</pre>
+              <ng-template #noRaw><div class="muted">Sem configuração fornecida.</div></ng-template>
+
+              <div class="sub">Effective</div>
+              <pre class="pretty" *ngIf="ctx()?.effectiveConfig as ec; else noEff">{{ ec | json }}</pre>
+              <ng-template #noEff><div class="muted">Sem configuração efetiva (usando raw/defaults do componente).</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Backend Schema">
+            <div class="section">
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Path</span><code>{{ m.path }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Operation</span><code>{{ m.operation }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Schema Type</span><code>{{ m.schemaType }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta?.schemaHash">
+                <span>Server Hash</span><code>{{ ctx()?.schemaMeta?.schemaHash }}</code>
+              </div>
+              <pre class="pretty" *ngIf="ctx()?.backendSchema as bs; else noSchema">{{ bs | json }}</pre>
+              <ng-template #noSchema><div class="muted">Sem schema de backend.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Fields">
+            <div class="section">
+              <div class="muted" *ngIf="!normalizedFields()?.length">Sem campos normalizados.</div>
+              <pre class="pretty" *ngIf="normalizedFields()?.length">{{ normalizedFields() | json }}</pre>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  `, isInline: true, styles: [".schema-viewer{display:block}.header{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{display:flex;align-items:center;gap:8px}.title h3{margin:0;font-weight:600}.notes{margin-top:6px;opacity:.78;font-size:12px}.section{padding:12px}.sub{font-weight:600;margin:12px 0 4px;opacity:.9}.pretty{background:#0b0b0b0d;padding:8px;border-radius:4px;overflow:auto}.kv{display:grid;grid-template-columns:140px 1fr;align-items:baseline;gap:8px;margin:2px 0}.kv>span{opacity:.75}.kv>code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.muted{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-schema-viewer', standalone: true, imports: [CommonModule, MatTabsModule, MatCardModule, MatButtonModule, MatIconModule], template: `
+    <mat-card class="schema-viewer" appearance="outlined">
+      <mat-card-header>
+        <div class="header">
+          <div class="title">
+            <mat-icon fontIcon="schema"></mat-icon>
+            <h3>{{ ctx()?.title || 'Schema & Metadata' }}</h3>
+          </div>
+          <div class="actions">
+            <button mat-stroked-button color="primary" (click)="copyAll()" [disabled]="!hasAnyData()">
+              <mat-icon>content_copy</mat-icon>
+              Copiar tudo
+            </button>
+          </div>
+        </div>
+        <div class="notes" *ngIf="ctx()?.notes">{{ ctx()?.notes }}</div>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-tab-group>
+          <mat-tab label="Component">
+            <div class="section">
+              <div class="kv"><span>Id</span><code>{{ componentMeta()?.id }}</code></div>
+              <div class="kv"><span>Selector</span><code>{{ componentMeta()?.selector }}</code></div>
+              <div class="kv"><span>Lib</span><code>{{ componentMeta()?.lib || '—' }}</code></div>
+              <div class="kv"><span>Friendly</span><code>{{ componentMeta()?.friendlyName }}</code></div>
+              <div class="kv" *ngIf="componentMeta()?.description"><span>Descrição</span><code>{{ componentMeta()?.description }}</code></div>
+
+              <div class="sub">Inputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.inputs?.length; else noInputs">{{ componentMeta()?.inputs | json }}</pre>
+              <ng-template #noInputs><div class="muted">Sem inputs documentados.</div></ng-template>
+
+              <div class="sub">Outputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.outputs?.length; else noOutputs">{{ componentMeta()?.outputs | json }}</pre>
+              <ng-template #noOutputs><div class="muted">Sem outputs documentados.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Config">
+            <div class="section">
+              <div class="sub">Raw</div>
+              <pre class="pretty" *ngIf="ctx()?.rawConfig as rc; else noRaw">{{ rc | json }}</pre>
+              <ng-template #noRaw><div class="muted">Sem configuração fornecida.</div></ng-template>
+
+              <div class="sub">Effective</div>
+              <pre class="pretty" *ngIf="ctx()?.effectiveConfig as ec; else noEff">{{ ec | json }}</pre>
+              <ng-template #noEff><div class="muted">Sem configuração efetiva (usando raw/defaults do componente).</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Backend Schema">
+            <div class="section">
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Path</span><code>{{ m.path }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Operation</span><code>{{ m.operation }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Schema Type</span><code>{{ m.schemaType }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta?.schemaHash">
+                <span>Server Hash</span><code>{{ ctx()?.schemaMeta?.schemaHash }}</code>
+              </div>
+              <pre class="pretty" *ngIf="ctx()?.backendSchema as bs; else noSchema">{{ bs | json }}</pre>
+              <ng-template #noSchema><div class="muted">Sem schema de backend.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Fields">
+            <div class="section">
+              <div class="muted" *ngIf="!normalizedFields()?.length">Sem campos normalizados.</div>
+              <pre class="pretty" *ngIf="normalizedFields()?.length">{{ normalizedFields() | json }}</pre>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".schema-viewer{display:block}.header{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{display:flex;align-items:center;gap:8px}.title h3{margin:0;font-weight:600}.notes{margin-top:6px;opacity:.78;font-size:12px}.section{padding:12px}.sub{font-weight:600;margin:12px 0 4px;opacity:.9}.pretty{background:#0b0b0b0d;padding:8px;border-radius:4px;overflow:auto}.kv{display:grid;grid-template-columns:140px 1fr;align-items:baseline;gap:8px;margin:2px 0}.kv>span{opacity:.75}.kv>code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.muted{opacity:.6}\n"] }]
+        }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
 async function fetchWithETag(params) {
     const headers = { Accept: 'application/json' };
     if (params.schemaHash)
@@ -6247,11 +6516,41 @@ class SchemaMetadataClient {
         try {
             apiOrigin = new URL(params.baseUrl).origin;
         }
-        catch { }
+        catch {
+            try {
+                apiOrigin = globalThis?.location?.origin || '';
+            }
+            catch { }
+        }
         const schemaId = buildSchemaId({ ...params, apiOrigin });
         const cached = await this.cache.get(schemaId);
         // Build URL with query params
-        const u = new URL(params.baseUrl);
+        let u;
+        try {
+            u = new URL(params.baseUrl);
+        }
+        catch (err) {
+            // Accept relative baseUrl by resolving against the app origin when available
+            const origin = (() => {
+                try {
+                    return globalThis?.location?.origin;
+                }
+                catch {
+                    return undefined;
+                }
+            })();
+            if (origin && origin.startsWith('http')) {
+                u = new URL(params.baseUrl, origin);
+            }
+            else {
+                // Friendly error for hosts: instruct to set absolute baseUrl or provide runtime origin
+                const e = new Error(`Failed to construct schema URL. API_URL.baseUrl appears relative and no runtime origin is available. ` +
+                    `Set API_URL.baseUrl to an absolute URL (e.g., http://localhost:4200/api) or run in a browser context. ` +
+                    `Received baseUrl="${params.baseUrl}".`);
+                e.cause = err;
+                throw e;
+            }
+        }
         u.searchParams.set('path', params.path);
         u.searchParams.set('operation', (params.operation || 'get').toLowerCase());
         u.searchParams.set('schemaType', (params.schemaType || 'response').toLowerCase());
@@ -6794,5 +7093,5 @@ function provideHookWhitelist(allowed) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AllowedFileTypes, ApiEndpoint, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentMetadataRegistry, ConnectionManagerService, DEFAULT_TABLE_CONFIG, DynamicFormService, DynamicGridPageComponent, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EmptyStateCardComponent, ErrorMessageService, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FormHooksRegistry, GLOBAL_CONFIG, GenericCrudService, GlobalConfigService, IconPickerService, IconPosition, IconSize, LocalConnectionStorage, LocalStorageCacheAdapter, LocalStorageConfigService, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, OverlayDeciderService, PraxisCore, PraxisIconDirective, PraxisIconPickerComponent, ResourceQuickConnectComponent, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SchemaMetadataClient, SchemaNormalizerService, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryService, ValidationPattern, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildHeaders, buildPageKey, buildSchemaId, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getEssentialConfig, getReferencedFieldMetadata, getTextTransformer, isCssTextTransform, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergeTableConfigs, minWordsValidator, normalizeFieldConstraints, normalizeFormConfig, normalizeFormMetadata, normalizePath, notifySuccessHook, prefillFromContextHook, provideDefaultFormHooks, provideFormHookPresets, provideFormHooks, provideGlobalConfig, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, provideRemoteGlobalConfig, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, resolveHidden, resolveOffset, resolveOrder, resolveSpan, slugify, stripMasksHook, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, trim, uniqueAsyncValidator, urlValidator, withMessage };
+export { API_URL, AllowedFileTypes, ApiEndpoint, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentMetadataRegistry, ConnectionManagerService, DEFAULT_TABLE_CONFIG, DynamicFormService, DynamicGridPageComponent, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EmptyStateCardComponent, ErrorMessageService, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FormHooksRegistry, GLOBAL_CONFIG, GenericCrudService, GlobalConfigService, IconPickerService, IconPosition, IconSize, LocalConnectionStorage, LocalStorageCacheAdapter, LocalStorageConfigService, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, OverlayDeciderService, PraxisCore, PraxisIconDirective, PraxisIconPickerComponent, ResourceQuickConnectComponent, SCHEMA_VIEWER_CONTEXT, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SchemaMetadataClient, SchemaNormalizerService, SchemaViewerComponent, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryService, ValidationPattern, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildHeaders, buildPageKey, buildSchemaId, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getDefaultFormHints, getEssentialConfig, getReferencedFieldMetadata, getTextTransformer, isCssTextTransform, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergeTableConfigs, minWordsValidator, normalizeFieldConstraints, normalizeFormConfig, normalizeFormMetadata, normalizePath, notifySuccessHook, prefillFromContextHook, provideDefaultFormHooks, provideFormHookPresets, provideFormHooks, provideGlobalConfig, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, provideRemoteGlobalConfig, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, resolveHidden, resolveOffset, resolveOrder, resolveSpan, slugify, stripMasksHook, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, trim, uniqueAsyncValidator, urlValidator, withMessage };
 //# sourceMappingURL=praxisui-core.mjs.map