@praxisui/expansion 1.0.0-beta.7 → 2.0.0-beta.0

package/fesm2022/praxisui-expansion.mjs

@@ -1,23 +1,196 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, DestroyRef, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Component, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { EventEmitter, inject, ChangeDetectorRef, DestroyRef, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Component, Inject, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/material/expansion';
 import { MAT_EXPANSION_PANEL_DEFAULT_OPTIONS, MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { CONFIG_STORAGE, DynamicWidgetLoaderDirective, PraxisIconDirective, ComponentMetadataRegistry } from '@praxisui/core';
-import { SettingsPanelService } from '@praxisui/settings-panel';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i8 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
+import { deepMerge, ASYNC_CONFIG_STORAGE, DynamicFormService, ComponentKeyService, DynamicWidgetLoaderDirective, PraxisIconDirective, ComponentMetadataRegistry } from '@praxisui/core';
+import { SettingsPanelService, SETTINGS_PANEL_DATA } from '@praxisui/settings-panel';
+import { BehaviorSubject } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
+
+/**
+ * Capabilities catalog for Praxis Expansion (ExpansionMetadata).
+ * Paths follow ExpansionMetadata shape (patch merged at config root).
+ */
+const ENUMS = {
+    density: ['compact', 'comfortable', 'spacious'],
+    displayMode: ['default', 'flat'],
+    togglePosition: ['before', 'after'],
+    widgetId: ['praxis-dynamic-form', 'praxis-list', 'pdx-material-searchable-select', 'praxis-files-upload'],
+    expansionTokenKey: ['header-background-color'],
+};
+const TOKEN_CAPS = ENUMS.expansionTokenKey.map((t) => ({
+    path: `appearance.tokens.${t}`,
+    category: 'appearance',
+    valueKind: 'string',
+    description: `Token ${t} (CSS color or var).`,
+    safetyNotes: 'Aceita apenas hex color ou var(--token).',
+}));
+const CAPS = [
+    { path: 'appearance', category: 'appearance', valueKind: 'object', description: 'Appearance settings.' },
+    { path: 'appearance.density', category: 'appearance', valueKind: 'enum', allowedValues: ENUMS.density, description: 'Density preset.' },
+    { path: 'appearance.themeClass', category: 'appearance', valueKind: 'string', description: 'Theme CSS class for root.' },
+    { path: 'appearance.customCss', category: 'appearance', valueKind: 'string', description: 'Custom CSS injected into component.', safetyNotes: 'CSS is injected as raw string.' },
+    { path: 'appearance.tokens', category: 'appearance', valueKind: 'object', description: 'Token map for theme overrides.' },
+    { path: 'appearance.tokens.[token]', category: 'appearance', valueKind: 'string', allowedValues: ENUMS.expansionTokenKey, description: 'Token value (CSS or var).', safetyNotes: 'Only keys supported by styleCss().' },
+    ...TOKEN_CAPS,
+    { path: 'accordion', category: 'accordion', valueKind: 'object', description: 'Accordion behavior settings.' },
+    { path: 'accordion.multi', category: 'accordion', valueKind: 'boolean', description: 'Allow multiple panels open.' },
+    { path: 'accordion.displayMode', category: 'accordion', valueKind: 'enum', allowedValues: ENUMS.displayMode, description: 'Accordion display mode.' },
+    { path: 'accordion.togglePosition', category: 'accordion', valueKind: 'enum', allowedValues: ENUMS.togglePosition, description: 'Toggle icon position.' },
+    { path: 'accordion.hideToggle', category: 'accordion', valueKind: 'boolean', description: 'Hide toggle icon.' },
+    { path: 'accordion.id', category: 'accordion', valueKind: 'string', description: 'Accordion id.' },
+    { path: 'panels', category: 'panels', valueKind: 'array', description: 'Panel list.' },
+    { path: 'panels[]', category: 'panels', valueKind: 'object', description: 'Panel definition.' },
+    { path: 'panels[].id', category: 'panels', valueKind: 'string', description: 'Panel id.' },
+    { path: 'panels[].title', category: 'panels', valueKind: 'string', description: 'Panel title.' },
+    { path: 'panels[].description', category: 'panels', valueKind: 'string', description: 'Panel description.' },
+    { path: 'panels[].disabled', category: 'panels', valueKind: 'boolean', description: 'Disable panel.' },
+    { path: 'panels[].expanded', category: 'panels', valueKind: 'boolean', description: 'Expanded state.' },
+    { path: 'panels[].hideToggle', category: 'panels', valueKind: 'boolean', description: 'Hide toggle icon for panel.' },
+    { path: 'panels[].collapsedHeight', category: 'panels', valueKind: 'string', description: 'Collapsed header height (e.g., 48px).' },
+    { path: 'panels[].expandedHeight', category: 'panels', valueKind: 'string', description: 'Expanded header height (e.g., 64px).' },
+    { path: 'panels[].content', category: 'panels', valueKind: 'array', description: 'Dynamic field metadata list (legacy).' },
+    { path: 'panels[].content[]', category: 'panels', valueKind: 'object', description: 'Dynamic field metadata item.', safetyNotes: 'Use FieldMetadata base when no controlType catalog exists.' },
+    { path: 'panels[].widgets', category: 'panels', valueKind: 'array', description: 'WidgetDefinition list for content.' },
+    { path: 'panels[].widgets[]', category: 'panels', valueKind: 'object', description: 'WidgetDefinition item.' },
+    { path: 'panels[].widgets[].id', category: 'panels', valueKind: 'enum', allowedValues: ENUMS.widgetId, description: 'Component registry id for widget.' },
+    { path: 'panels[].widgets[].inputs', category: 'panels', valueKind: 'object', description: 'Inputs bound into the widget instance.' },
+    { path: 'panels[].widgets[].outputs', category: 'panels', valueKind: 'object', description: 'Outputs mapped to actions.' },
+    { path: 'panels[].widgets[].outputs.[outputName]', category: 'panels', valueKind: 'object', description: 'Output action mapping (ActionDefinition or "emit").' },
+    { path: 'panels[].widgets[].bindingOrder', category: 'panels', valueKind: 'array', description: 'Explicit input binding order.' },
+    { path: 'panels[].widgets[].bindingOrder[]', category: 'panels', valueKind: 'string', description: 'Input name applied first.' },
+    { path: 'panels[].actionButtons', category: 'actions', valueKind: 'array', description: 'Action buttons at panel footer.' },
+    { path: 'panels[].actionButtons[]', category: 'actions', valueKind: 'object', description: 'Action button definition.' },
+    { path: 'panels[].actionButtons[].icon', category: 'actions', valueKind: 'string', description: 'Action icon.' },
+    { path: 'panels[].actionButtons[].label', category: 'actions', valueKind: 'string', description: 'Action label.' },
+    { path: 'panels[].actionButtons[].action', category: 'actions', valueKind: 'string', description: 'Action identifier payload.' },
+];
+const EXPANSION_AI_CAPABILITIES = {
+    version: 'v1.1',
+    enums: ENUMS,
+    targets: [
+        'praxis-expansion',
+        'mat-accordion',
+        'expansion-panel',
+        'praxis-expansion-config-editor',
+    ],
+    notes: [
+        'panels[] should be merged by id or title to avoid replacing all panels.',
+        'appearance.customCss is injected into a <style> tag; avoid unsafe CSS from untrusted sources.',
+        'appearance.tokens supports limited keys used by styleCss().',
+        'panels[].widgets[].id must be a ComponentMetadataRegistry id.',
+        'If a field controlType lacks a dedicated catalog, treat it as FieldMetadata base.',
+    ],
+    capabilities: CAPS,
+};
+
+class ExpansionAiAdapter extends BaseAiAdapter {
+    expansion;
+    componentName = 'Praxis Expansion';
+    constructor(expansion) {
+        super();
+        this.expansion = expansion;
+    }
+    getCurrentConfig() {
+        const current = this.expansion.config || {};
+        return this.cloneConfig(current);
+    }
+    getCapabilities() {
+        return EXPANSION_AI_CAPABILITIES.capabilities;
+    }
+    getRuntimeState() {
+        const panels = this.expansion.config?.panels || [];
+        return {
+            panelsCount: panels.length,
+            expandedCount: panels.filter((p) => p.expanded).length,
+            multi: this.expansion.config?.accordion?.multi ?? false,
+        };
+    }
+    createSnapshot() {
+        return this.getCurrentConfig();
+    }
+    async restoreSnapshot(snapshot) {
+        if (!snapshot)
+            return;
+        this.applyConfig(this.cloneConfig(snapshot));
+    }
+    async applyPatch(patch) {
+        try {
+            const current = this.getCurrentConfig();
+            const next = this.smartMergeExpansionConfig(current, patch);
+            this.applyConfig(next);
+            return { success: true };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Unknown error applying patch';
+            return { success: false, error: message };
+        }
+    }
+    applyConfig(config) {
+        const apply = this.expansion.applyConfigFromAdapter;
+        if (typeof apply === 'function') {
+            apply.call(this.expansion, config);
+            return;
+        }
+        this.expansion.config = config;
+    }
+    smartMergeExpansionConfig(base, patch) {
+        const result = deepMerge(base, patch);
+        if (patch.panels && Array.isArray(patch.panels)) {
+            const merged = this.mergeByKey(base.panels || [], patch.panels, (p) => p.id || p.title || '');
+            result.panels = merged;
+        }
+        return result;
+    }
+    mergeByKey(baseArr, patchArr, keyFn) {
+        const merged = baseArr.map((orig) => {
+            const key = keyFn(orig);
+            const match = key ? patchArr.find((p) => keyFn(p) === key) : undefined;
+            return match ? deepMerge(orig, match) : orig;
+        });
+        patchArr.forEach((item) => {
+            const key = keyFn(item);
+            if (!key || !baseArr.find((o) => keyFn(o) === key)) {
+                merged.push(item);
+            }
+        });
+        return merged;
+    }
+    cloneConfig(config) {
+        try {
+            return structuredClone(config);
+        }
+        catch {
+            return JSON.parse(JSON.stringify(config));
+        }
+    }
+}
 
 class PraxisExpansion {
     config;
     expansionId;
+    componentInstanceId;
     context = {};
     strictValidation = true;
-    editModeEnabled = false;
+    enableCustomization = false;
     defaultOptions;
     opened = new EventEmitter();
     closed = new EventEmitter();
@@ -27,26 +200,202 @@ class PraxisExpansion {
     destroyed = new EventEmitter();
     widgetEvent = new EventEmitter();
     settings = inject(SettingsPanelService);
-    storage = inject(CONFIG_STORAGE);
+    storage = inject(ASYNC_CONFIG_STORAGE);
+    cdr = inject(ChangeDetectorRef);
     destroyRef = inject(DestroyRef);
+    dynamicForm = inject(DynamicFormService);
+    componentKeys = inject(ComponentKeyService);
+    route = (() => { try {
+        return inject(ActivatedRoute);
+    }
+    catch {
+        return undefined;
+    } })();
+    warnedMissingId = false;
+    panelForms = new Map();
+    aiAdapter = new ExpansionAiAdapter(this);
     accordionRef;
     panels;
     injectedDefaults = inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS, { optional: true });
     hasMultiple = () => (this.config?.panels?.length || 0) > 1;
     single = () => (this.config?.panels && this.config.panels[0]) || null;
+    ngOnInit() {
+        const key = this.storageKey();
+        if (!key)
+            return;
+        this.storage.loadConfig(key).pipe(take(1)).subscribe((stored) => {
+            if (!stored)
+                return;
+            this.config = stored;
+            this.buildPanelForms();
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnChanges(changes) {
+        if ('config' in changes) {
+            this.buildPanelForms();
+            this.persistConfig(this.config);
+        }
+    }
     styleCss() {
         const t = this.config?.appearance?.tokens;
-        if (!t)
+        const appearance = this.config?.appearance;
+        if (!t && !appearance?.container && !appearance?.header && !appearance?.states)
             return null;
         const scope = `.praxis-expansion-root[data-expansion-id="${(this.expansionId || 'default').replace(/"/g, '')}"]`;
         const rules = [];
-        const push = (selector, decls) => { rules.push(`${scope} ${selector}{${decls.join('')}}`); };
-        // Example: header background color
-        const bg = t['header-background-color'];
-        if (bg) {
-            const safe = /^#[0-9a-fA-F]{3,8}$/.test(bg) || /^var\(--[\w-]+\)$/.test(bg);
-            if (safe) {
-                push(' .mat-expansion-panel-header', [`background-color:${bg}!important;`]);
+        const push = (selector, decls) => {
+            rules.push(`${scope} ${selector}{${decls.join('')}}`);
+        };
+        const isSafeColor = (value) => /^#[0-9a-fA-F]{3,8}$/.test(value)
+            || /^var\(--[\w-]+\)$/.test(value)
+            || /^(rgb|rgba|hsl|hsla)\(/.test(value)
+            || /^color-mix\(/.test(value);
+        if (t) {
+            const panelBg = t['panel-background-color'];
+            if (panelBg && isSafeColor(panelBg)) {
+                push(' .mat-expansion-panel', [`background:${panelBg}!important;`]);
+            }
+            const panelBorder = t['panel-border-color'];
+            if (panelBorder && isSafeColor(panelBorder)) {
+                push(' .mat-expansion-panel', [`border-color:${panelBorder}!important;`]);
+            }
+            const headerBg = t['header-background-color'];
+            if (headerBg && isSafeColor(headerBg)) {
+                push(' .mat-expansion-panel-header', [`background-color:${headerBg}!important;`]);
+            }
+            const headerText = t['header-text-color'];
+            if (headerText && isSafeColor(headerText)) {
+                push(' .mat-expansion-panel-header', [`color:${headerText}!important;`]);
+            }
+            const descText = t['description-text-color'];
+            if (descText && isSafeColor(descText)) {
+                push(' .mat-expansion-panel-header-description', [`color:${descText}!important;`]);
+            }
+            const bodyText = t['body-text-color'];
+            if (bodyText && isSafeColor(bodyText)) {
+                push(' .mat-expansion-panel-body', [`color:${bodyText}!important;`]);
+            }
+            const actionBorder = t['action-row-border-color'];
+            if (actionBorder && isSafeColor(actionBorder)) {
+                push(' .mat-action-row', [`border-top-color:${actionBorder}!important;`]);
+            }
+        }
+        if (appearance?.container) {
+            const container = appearance.container;
+            const decls = [];
+            if (container.background)
+                decls.push(`background:${container.background};`);
+            if (container.borderColor)
+                decls.push(`border-color:${container.borderColor};`);
+            if (container.borderWidth)
+                decls.push(`border-width:${container.borderWidth};`);
+            if (container.borderStyle)
+                decls.push(`border-style:${container.borderStyle};`);
+            if (container.borderRadius)
+                decls.push(`border-radius:${container.borderRadius};`);
+            if (container.shadow)
+                decls.push(`box-shadow:${container.shadow};`);
+            if (container.padding)
+                decls.push(`padding:${container.padding};`);
+            if (decls.length) {
+                push('', decls);
+            }
+            if (container.panelGap) {
+                push(' .mat-expansion-panel:not(:last-child)', [`margin-bottom:${container.panelGap};`]);
+            }
+        }
+        if (appearance?.header) {
+            const header = appearance.header;
+            const headerDecls = [];
+            if (header.background)
+                headerDecls.push(`background:${header.background}!important;`);
+            if (header.textColor)
+                headerDecls.push(`color:${header.textColor}!important;`);
+            if (header.height)
+                headerDecls.push(`min-height:${header.height};`);
+            if (header.padding)
+                headerDecls.push(`padding:${header.padding};`);
+            if (header.gap)
+                headerDecls.push(`column-gap:${header.gap};`);
+            if (headerDecls.length)
+                push(' .mat-expansion-panel-header', headerDecls);
+            if (header.fontFamily) {
+                push(' .mat-expansion-panel-header-title', [`font-family:${header.fontFamily};`]);
+                push(' .mat-expansion-panel-header-description', [`font-family:${header.fontFamily};`]);
+            }
+            const titleDecls = [];
+            if (header.titleColor)
+                titleDecls.push(`color:${header.titleColor}!important;`);
+            if (header.titleSize)
+                titleDecls.push(`font-size:${header.titleSize};`);
+            if (header.titleWeight)
+                titleDecls.push(`font-weight:${header.titleWeight};`);
+            if (titleDecls.length)
+                push(' .mat-expansion-panel-header-title', titleDecls);
+            const descDecls = [];
+            if (header.descriptionColor)
+                descDecls.push(`color:${header.descriptionColor}!important;`);
+            if (header.descriptionSize)
+                descDecls.push(`font-size:${header.descriptionSize};`);
+            if (header.descriptionWeight)
+                descDecls.push(`font-weight:${header.descriptionWeight};`);
+            if (descDecls.length)
+                push(' .mat-expansion-panel-header-description', descDecls);
+            const iconDecls = [];
+            if (header.toggleIconColor)
+                iconDecls.push(`border-color:${header.toggleIconColor}!important;`);
+            if (iconDecls.length)
+                push(' .mat-expansion-indicator::after', iconDecls);
+            if (header.toggleIconSize) {
+                push(' .mat-expansion-indicator::after', [
+                    `width:${header.toggleIconSize};`,
+                    `height:${header.toggleIconSize};`,
+                ]);
+            }
+        }
+        if (appearance?.states) {
+            const states = appearance.states;
+            if (states.hover) {
+                const decls = [];
+                if (states.hover.headerBackground)
+                    decls.push(`background:${states.hover.headerBackground}!important;`);
+                if (states.hover.textColor)
+                    decls.push(`color:${states.hover.textColor}!important;`);
+                if (decls.length)
+                    push(' .mat-expansion-panel-header:hover', decls);
+            }
+            if (states.expanded) {
+                const decls = [];
+                if (states.expanded.headerBackground)
+                    decls.push(`background:${states.expanded.headerBackground}!important;`);
+                if (states.expanded.textColor)
+                    decls.push(`color:${states.expanded.textColor}!important;`);
+                if (decls.length)
+                    push(' .mat-expansion-panel.mat-expanded > .mat-expansion-panel-header', decls);
+                if (states.expanded.accentBarColor) {
+                    push(' .mat-expansion-panel.mat-expanded > .mat-expansion-panel-header', [
+                        'position:relative;',
+                    ]);
+                    push(' .mat-expansion-panel.mat-expanded > .mat-expansion-panel-header::before', [
+                        'content:"";',
+                        'position:absolute;',
+                        'left:0;',
+                        'top:0;',
+                        'bottom:0;',
+                        'width:4px;',
+                        `background:${states.expanded.accentBarColor};`,
+                    ]);
+                }
+            }
+            if (states.disabled) {
+                const decls = [];
+                if (states.disabled.headerBackground)
+                    decls.push(`background:${states.disabled.headerBackground}!important;`);
+                if (states.disabled.textColor)
+                    decls.push(`color:${states.disabled.textColor}!important;`);
+                if (decls.length)
+                    push(' .mat-expansion-panel.mat-expansion-panel-disabled .mat-expansion-panel-header', decls);
             }
         }
         if (rules.length === 0)
@@ -101,9 +450,29 @@ class PraxisExpansion {
         const base = p?.id || `${this.expansionId || 'exp'}-panel-${index + 1}`;
         return base.replace(/[^a-zA-Z0-9_-]/g, '-');
     }
+    panelFormFor(panel, index) {
+        const key = this.panelKey(panel, index);
+        const existing = this.panelForms.get(key);
+        if (existing)
+            return existing;
+        const fields = panel.content ?? [];
+        const form = this.dynamicForm.createFormGroupFromMetadata(fields);
+        this.panelForms.set(key, form);
+        return form;
+    }
+    applyConfigFromAdapter(next) {
+        this.config = next;
+        this.buildPanelForms();
+        const key = this.storageKey();
+        if (key) {
+            this.storage.saveConfig(key, this.config).pipe(take(1)).subscribe({ error: () => { } });
+        }
+        this.cdr.markForCheck();
+    }
     openEditor() {
+        const key = this.storageKey() || this.expansionId || 'default';
         const ref = this.settings.open({
-            id: `praxis-expansion-editor:${this.expansionId || 'default'}`,
+            id: `praxis-expansion-editor:${key}`,
             title: 'Configurar Painéis',
             content: { component: PraxisExpansionConfigEditor, inputs: { config: this.config, expansionId: this.expansionId } },
         });
@@ -111,21 +480,71 @@ class PraxisExpansion {
             const nextCfg = value?.config || value;
             if (nextCfg) {
                 this.config = { ...nextCfg };
-                if (this.expansionId)
-                    this.storage.saveConfig(this.storageKey(), this.config);
+                this.buildPanelForms();
+                const storageKey = this.storageKey();
+                if (storageKey) {
+                    this.storage.saveConfig(storageKey, this.config).pipe(take(1)).subscribe({ error: () => { } });
+                }
+                this.cdr.markForCheck();
             }
         };
         ref.applied$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(apply);
         ref.saved$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(apply);
     }
     storageKey() {
-        return `expansion:${this.expansionId}`;
+        const id = this.componentKeyId();
+        return id ? `expansion:${id}` : null;
+    }
+    persistConfig(config) {
+        if (!config)
+            return;
+        const key = this.storageKey();
+        if (!key)
+            return;
+        this.storage.saveConfig(key, config).pipe(take(1)).subscribe({ error: () => { } });
     }
     emitAction(p, index, action) {
         this.widgetEvent.emit({ panelId: p.id, panelIndex: index, sourceId: 'praxis-expansion', output: 'action', payload: { action } });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisExpansion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisExpansion, isStandalone: true, selector: "praxis-expansion", inputs: { config: "config", expansionId: "expansionId", context: "context", strictValidation: "strictValidation", editModeEnabled: "editModeEnabled", defaultOptions: "defaultOptions" }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse", destroyed: "destroyed", widgetEvent: "widgetEvent" }, viewQueries: [{ propertyName: "accordionRef", first: true, predicate: ["accordion"], descendants: true }, { propertyName: "panels", predicate: ["panel"], descendants: true, read: MatExpansionPanel }], ngImport: i0, template: `
+    panelKey(panel, index) {
+        return panel.id ?? `panel-${index}`;
+    }
+    buildPanelForms() {
+        const previous = new Map(this.panelForms);
+        this.panelForms.clear();
+        const panels = this.config?.panels ?? [];
+        panels.forEach((panel, index) => {
+            const fields = panel.content ?? [];
+            if (!fields.length)
+                return;
+            const key = this.panelKey(panel, index);
+            const form = this.dynamicForm.createFormGroupFromMetadata(fields);
+            const previousValues = previous.get(key)?.getRawValue?.() ?? {};
+            form.patchValue(previousValues);
+            this.panelForms.set(key, form);
+        });
+    }
+    componentKeyId() {
+        const key = this.componentKeys.buildComponentId({
+            componentType: 'praxis-expansion',
+            componentId: this.expansionId,
+            instanceKey: this.componentInstanceId,
+            componentRef: this,
+            route: this.route,
+            requireComponentId: true,
+        });
+        if (!key)
+            this.warnMissingId();
+        return key;
+    }
+    warnMissingId() {
+        if (this.warnedMissingId)
+            return;
+        this.warnedMissingId = true;
+        console.warn('[PraxisExpansion] expansionId is required for config persistence.');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisExpansion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisExpansion, isStandalone: true, selector: "praxis-expansion", inputs: { config: "config", expansionId: "expansionId", componentInstanceId: "componentInstanceId", context: "context", strictValidation: "strictValidation", enableCustomization: "enableCustomization", defaultOptions: "defaultOptions" }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse", destroyed: "destroyed", widgetEvent: "widgetEvent" }, viewQueries: [{ propertyName: "accordionRef", first: true, predicate: ["accordion"], descendants: true }, { propertyName: "panels", predicate: ["panel"], descendants: true, read: MatExpansionPanel }], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-expansion-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -137,6 +556,12 @@ class PraxisExpansion {
       <style *ngIf="config?.appearance?.customCss" [innerHTML]="config?.appearance?.customCss"></style>
       <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
 
+      @if (enableCustomization) {
+        <div class="expansion-ai-assistant">
+          <praxis-ai-assistant [adapter]="aiAdapter"></praxis-ai-assistant>
+        </div>
+      }
+
       @if (hasMultiple()) {
         <mat-accordion
           #accordion
@@ -170,6 +595,14 @@ class PraxisExpansion {
               </mat-expansion-panel-header>
 
               <ng-template matExpansionPanelContent>
+                @if (p.content?.length) {
+                  <ng-container
+                    dynamicFieldLoader
+                    [fields]="p.content ?? []"
+                    [formGroup]="panelFormFor(p, i)"
+                  ></ng-container>
+                }
+
                 @if (p.widgets?.length) {
                   @for (w of p.widgets; let wi = $index; track wi) {
                     <ng-container
@@ -219,6 +652,14 @@ class PraxisExpansion {
             </mat-expansion-panel-header>
 
             <ng-template matExpansionPanelContent>
+              @if (p.content?.length) {
+                <ng-container
+                  dynamicFieldLoader
+                  [fields]="p.content ?? []"
+                  [formGroup]="panelFormFor(p, 0)"
+                ></ng-container>
+              }
+
               @if (p.widgets?.length) {
                 @for (w of p.widgets; let wi = $index; track wi) {
                   <ng-container
@@ -245,7 +686,7 @@ class PraxisExpansion {
         } @else {
           <div class="praxis-expansion-empty">
             <span>Nenhum painel configurado</span>
-            <button mat-stroked-button color="primary" *ngIf="editModeEnabled" (click)="openEditor()">
+            <button mat-stroked-button color="primary" *ngIf="enableCustomization" (click)="openEditor()">
               <mat-icon [praxisIcon]="'tune'"></mat-icon> Configurar
             </button>
           </div>
@@ -254,7 +695,7 @@ class PraxisExpansion {
     </div>
     <!-- Edit button -->
     <button
-      *ngIf="editModeEnabled"
+      *ngIf="enableCustomization"
       mat-fab
       class="edit-fab"
       aria-label="Editar painéis"
@@ -262,17 +703,19 @@ class PraxisExpansion {
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, isInline: true, styles: [":host{display:block;position:relative}.praxis-expansion-root{display:block}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px;opacity:.8}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;position:relative;color:var(--md-sys-color-on-surface)}.praxis-expansion-root{display:block;--p-exp-surface: var(--md-sys-color-surface);--p-exp-surface-container: var(--md-sys-color-surface-container);--p-exp-border: var(--md-sys-color-outline-variant);--p-exp-text: var(--md-sys-color-on-surface);--p-exp-text-muted: var(--md-sys-color-on-surface-variant);--p-exp-focus: var(--md-sys-color-primary);--p-exp-radius: 12px}.mat-expansion-panel{background:var(--p-exp-surface);border:1px solid var(--p-exp-border);border-radius:var(--p-exp-radius);overflow:hidden}.mat-expansion-panel:not(:last-child){margin-bottom:var(--p-exp-panel-gap, 12px)}.mat-expansion-panel-header{background:var(--p-exp-surface-container);color:var(--p-exp-text)}.mat-expansion-panel-header:focus-visible{outline:2px solid var(--p-exp-focus);outline-offset:-2px}.mat-expansion-panel-header-title{font-weight:600}.mat-expansion-panel-header-description{color:var(--p-exp-text-muted)}.mat-expansion-panel-body{padding:12px 16px 16px}.mat-action-row{border-top:1px solid var(--p-exp-border)}.density-compact .mat-expansion-panel-body{padding:8px 12px 12px}.density-compact .mat-expansion-panel-header{min-height:40px;padding:0 12px}.density-comfortable .mat-expansion-panel-body{padding:12px 16px 16px}.density-comfortable .mat-expansion-panel-header{min-height:48px;padding:0 16px}.density-spacious .mat-expansion-panel-body{padding:16px 20px 20px}.density-spacious .mat-expansion-panel-header{min-height:56px;padding:0 20px}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px 12px;color:var(--p-exp-text-muted)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.expansion-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { 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", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisExpansion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisExpansion, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-expansion', standalone: true, imports: [
                         CommonModule,
                         MatExpansionModule,
                         MatIconModule,
                         MatButtonModule,
+                        DynamicFieldLoaderDirective,
                         DynamicWidgetLoaderDirective,
                         PraxisIconDirective,
+                        PraxisAiAssistantComponent,
                     ], template: `
     <div
       class="praxis-expansion-root"
@@ -285,6 +728,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
       <style *ngIf="config?.appearance?.customCss" [innerHTML]="config?.appearance?.customCss"></style>
       <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
 
+      @if (enableCustomization) {
+        <div class="expansion-ai-assistant">
+          <praxis-ai-assistant [adapter]="aiAdapter"></praxis-ai-assistant>
+        </div>
+      }
+
       @if (hasMultiple()) {
         <mat-accordion
           #accordion
@@ -318,6 +767,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               </mat-expansion-panel-header>
 
               <ng-template matExpansionPanelContent>
+                @if (p.content?.length) {
+                  <ng-container
+                    dynamicFieldLoader
+                    [fields]="p.content ?? []"
+                    [formGroup]="panelFormFor(p, i)"
+                  ></ng-container>
+                }
+
                 @if (p.widgets?.length) {
                   @for (w of p.widgets; let wi = $index; track wi) {
                     <ng-container
@@ -367,6 +824,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             </mat-expansion-panel-header>
 
             <ng-template matExpansionPanelContent>
+              @if (p.content?.length) {
+                <ng-container
+                  dynamicFieldLoader
+                  [fields]="p.content ?? []"
+                  [formGroup]="panelFormFor(p, 0)"
+                ></ng-container>
+              }
+
               @if (p.widgets?.length) {
                 @for (w of p.widgets; let wi = $index; track wi) {
                   <ng-container
@@ -393,7 +858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
         } @else {
           <div class="praxis-expansion-empty">
             <span>Nenhum painel configurado</span>
-            <button mat-stroked-button color="primary" *ngIf="editModeEnabled" (click)="openEditor()">
+            <button mat-stroked-button color="primary" *ngIf="enableCustomization" (click)="openEditor()">
               <mat-icon [praxisIcon]="'tune'"></mat-icon> Configurar
             </button>
           </div>
@@ -402,7 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
     </div>
     <!-- Edit button -->
     <button
-      *ngIf="editModeEnabled"
+      *ngIf="enableCustomization"
       mat-fab
       class="edit-fab"
       aria-label="Editar painéis"
@@ -410,16 +875,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative}.praxis-expansion-root{display:block}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px;opacity:.8}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;color:var(--md-sys-color-on-surface)}.praxis-expansion-root{display:block;--p-exp-surface: var(--md-sys-color-surface);--p-exp-surface-container: var(--md-sys-color-surface-container);--p-exp-border: var(--md-sys-color-outline-variant);--p-exp-text: var(--md-sys-color-on-surface);--p-exp-text-muted: var(--md-sys-color-on-surface-variant);--p-exp-focus: var(--md-sys-color-primary);--p-exp-radius: 12px}.mat-expansion-panel{background:var(--p-exp-surface);border:1px solid var(--p-exp-border);border-radius:var(--p-exp-radius);overflow:hidden}.mat-expansion-panel:not(:last-child){margin-bottom:var(--p-exp-panel-gap, 12px)}.mat-expansion-panel-header{background:var(--p-exp-surface-container);color:var(--p-exp-text)}.mat-expansion-panel-header:focus-visible{outline:2px solid var(--p-exp-focus);outline-offset:-2px}.mat-expansion-panel-header-title{font-weight:600}.mat-expansion-panel-header-description{color:var(--p-exp-text-muted)}.mat-expansion-panel-body{padding:12px 16px 16px}.mat-action-row{border-top:1px solid var(--p-exp-border)}.density-compact .mat-expansion-panel-body{padding:8px 12px 12px}.density-compact .mat-expansion-panel-header{min-height:40px;padding:0 12px}.density-comfortable .mat-expansion-panel-body{padding:12px 16px 16px}.density-comfortable .mat-expansion-panel-header{min-height:48px;padding:0 16px}.density-spacious .mat-expansion-panel-body{padding:16px 20px 20px}.density-spacious .mat-expansion-panel-header{min-height:56px;padding:0 20px}.praxis-expansion-empty{display:flex;gap:8px;align-items:center;padding:8px 12px;color:var(--p-exp-text-muted)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.expansion-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], expansionId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], componentInstanceId: [{
                 type: Input
             }], context: [{
                 type: Input
             }], strictValidation: [{
                 type: Input
-            }], editModeEnabled: [{
+            }], enableCustomization: [{
                 type: Input
             }], defaultOptions: [{
                 type: Input
@@ -448,15 +916,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
 class PraxisExpansionConfigEditor {
     config;
     expansionId;
+    tokensError = '';
+    isDirty$ = new BehaviorSubject(false);
+    isValid$ = new BehaviorSubject(true);
+    isBusy$ = new BehaviorSubject(false);
+    initialJson = '';
+    hasInitializedSnapshot = false;
+    constructor(injected) {
+        const injectedConfig = injected?.config;
+        if (injectedConfig) {
+            this.config = injectedConfig;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && this.config && !this.hasInitializedSnapshot) {
+            this.captureInitialSnapshot(this.config);
+        }
+    }
+    getSettingsValue() {
+        return this.config;
+    }
+    reset() {
+        if (!this.initialJson)
+            return;
+        try {
+            this.config = JSON.parse(this.initialJson);
+            this.tokensError = '';
+            this.isValid$.next(true);
+            this.isDirty$.next(false);
+        }
+        catch { }
+    }
+    stringifyTokens(tokens) {
+        if (!tokens || Object.keys(tokens).length === 0)
+            return '';
+        try {
+            return JSON.stringify(tokens, null, 2);
+        }
+        catch {
+            return '';
+        }
+    }
+    setAppearance(key, value) {
+        const ap = { ...(this.config?.appearance || {}) };
+        if (value === '' || value === null || typeof value === 'undefined') {
+            delete ap[key];
+        }
+        else {
+            ap[key] = value;
+        }
+        this.setConfig({ ...(this.config || {}), appearance: ap });
+    }
+    setTokens(text) {
+        const raw = (text || '').trim();
+        if (!raw) {
+            this.tokensError = '';
+            this.setAppearance('tokens', undefined);
+            this.isValid$.next(true);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                this.tokensError = 'Formato inválido: use um objeto JSON.';
+                this.isValid$.next(false);
+                return;
+            }
+            this.tokensError = '';
+            this.isValid$.next(true);
+            this.setAppearance('tokens', parsed);
+        }
+        catch (err) {
+            this.tokensError = err?.message || 'JSON inválido.';
+            this.isValid$.next(false);
+        }
+    }
+    setContainer(key, value) {
+        const container = { ...(this.config?.appearance?.container || {}) };
+        if (value === '' || value === null || typeof value === 'undefined') {
+            delete container[key];
+        }
+        else {
+            container[key] = value;
+        }
+        const next = Object.keys(container).length ? container : undefined;
+        this.setAppearance('container', next);
+    }
+    setHeader(key, value) {
+        const header = { ...(this.config?.appearance?.header || {}) };
+        if (value === '' || value === null || typeof value === 'undefined') {
+            delete header[key];
+        }
+        else {
+            header[key] = value;
+        }
+        const next = Object.keys(header).length ? header : undefined;
+        this.setAppearance('header', next);
+    }
+    setState(state, key, value) {
+        const current = { ...(this.config?.appearance?.states || {}) };
+        const stateObj = { ...(current[state] || {}) };
+        if (value === '' || value === null || typeof value === 'undefined') {
+            delete stateObj[key];
+        }
+        else {
+            stateObj[key] = value;
+        }
+        if (Object.keys(stateObj).length) {
+            current[state] = stateObj;
+        }
+        else {
+            delete current[state];
+        }
+        const next = Object.keys(current).length ? current : undefined;
+        this.setAppearance('states', next);
+    }
     addPanel() {
         const next = { ...(this.config || {}), panels: [...(this.config?.panels || []), { title: 'Novo painel' }] };
-        this.config = next;
+        this.setConfig(next);
     }
     removePanel(index) {
         if (!this.config?.panels)
             return;
         const next = { ...this.config, panels: this.config.panels.filter((_, i) => i !== index) };
-        this.config = next;
+        this.setConfig(next);
     }
     move(index, delta) {
         if (!this.config?.panels)
@@ -467,48 +1050,241 @@ class PraxisExpansionConfigEditor {
             return;
         const [m] = arr.splice(index, 1);
         arr.splice(to, 0, m);
-        this.config = { ...(this.config || {}), panels: arr };
+        this.setConfig({ ...(this.config || {}), panels: arr });
     }
     setAccordion(key, value) {
         const acc = { ...(this.config?.accordion || {}) };
         acc[key] = value;
-        this.config = { ...(this.config || {}), accordion: acc };
+        this.setConfig({ ...(this.config || {}), accordion: acc });
     }
     setPanel(index, key, value) {
         if (!this.config?.panels)
             return;
         const arr = this.config.panels.map((p, i) => i === index ? { ...p, [key]: value } : p);
-        this.config = { ...(this.config || {}), panels: arr };
+        this.setConfig({ ...(this.config || {}), panels: arr });
+    }
+    setConfig(next) {
+        this.config = next;
+        if (!this.hasInitializedSnapshot) {
+            this.captureInitialSnapshot(next);
+            return;
+        }
+        this.updateDirtyState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisExpansionConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PraxisExpansionConfigEditor, isStandalone: true, selector: "praxis-expansion-config-editor", inputs: { config: "config", expansionId: "expansionId" }, ngImport: i0, template: `
+    captureInitialSnapshot(cfg) {
+        this.initialJson = JSON.stringify(cfg || {});
+        this.hasInitializedSnapshot = true;
+        this.isDirty$.next(false);
+    }
+    updateDirtyState() {
+        if (!this.hasInitializedSnapshot)
+            return;
+        const current = JSON.stringify(this.config || {});
+        this.isDirty$.next(current !== this.initialJson);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisExpansionConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisExpansionConfigEditor, isStandalone: true, selector: "praxis-expansion-config-editor", inputs: { config: "config", expansionId: "expansionId" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="pdx-expansion-editor">
       <section class="sec">
-        <h4>Configuração do Acordeão</h4>
-        <div class="grid">
-          <label>
-            <span>ID</span>
-            <input type="text" [value]="config?.accordion?.id || ''" (input)="setAccordion('id', $any($event.target).value)" />
-          </label>
-          <label>
-            <span>Display Mode</span>
-            <select [value]="config?.accordion?.displayMode || 'default'" (change)="setAccordion('displayMode', $any($event.target).value)">
-              <option value="default">default</option>
-              <option value="flat">flat</option>
+        <h4>Aparência</h4>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Classe de tema</mat-label>
+            <input matInput [value]="config?.appearance?.themeClass || ''" (input)="setAppearance('themeClass', $any($event.target).value)" placeholder="ex.: expansion-accent" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Densidade</mat-label>
+            <select matNativeControl [value]="config?.appearance?.density || ''" (change)="setAppearance('density', $any($event.target).value || undefined)">
+              <option value="">Padrão</option>
+              <option value="compact">Compacta</option>
+              <option value="comfortable">Confortável</option>
+              <option value="spacious">Espaçosa</option>
             </select>
-          </label>
-          <label>
-            <span>Toggle Position</span>
-            <select [value]="config?.accordion?.togglePosition || 'after'" (change)="setAccordion('togglePosition', $any($event.target).value)">
-              <option value="after">after</option>
-              <option value="before">before</option>
+          </mat-form-field>
+        </div>
+
+        <h5>Container</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Background</mat-label>
+            <input matInput [value]="config?.appearance?.container?.background || ''" (input)="setContainer('background', $any($event.target).value)" placeholder="var(--md-sys-color-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Padding</mat-label>
+            <input matInput [value]="config?.appearance?.container?.padding || ''" (input)="setContainer('padding', $any($event.target).value)" placeholder="0" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderColor || ''" (input)="setContainer('borderColor', $any($event.target).value)" placeholder="var(--md-sys-color-outline-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Espessura da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderWidth || ''" (input)="setContainer('borderWidth', $any($event.target).value)" placeholder="1px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Estilo da borda</mat-label>
+            <select matNativeControl [value]="config?.appearance?.container?.borderStyle || ''" (change)="setContainer('borderStyle', $any($event.target).value || undefined)">
+              <option value="">Padrão</option>
+              <option value="solid">Solid</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="none">None</option>
             </select>
-          </label>
-          <label class="chk"><input type="checkbox" [checked]="config?.accordion?.multi || false" (change)="setAccordion('multi', $any($event.target).checked)"/> Multi</label>
-          <label class="chk"><input type="checkbox" [checked]="config?.accordion?.hideToggle || false" (change)="setAccordion('hideToggle', $any($event.target).checked)"/> Hide Toggle</label>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Raio da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderRadius || ''" (input)="setContainer('borderRadius', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Sombra</mat-label>
+            <input matInput [value]="config?.appearance?.container?.shadow || ''" (input)="setContainer('shadow', $any($event.target).value)" placeholder="var(--md-sys-color-shadow)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Espaço entre painéis</mat-label>
+            <input matInput [value]="config?.appearance?.container?.panelGap || ''" (input)="setContainer('panelGap', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+        </div>
+
+        <h5>Cabeçalho</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Background</mat-label>
+            <input matInput [value]="config?.appearance?.header?.background || ''" (input)="setHeader('background', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do texto</mat-label>
+            <input matInput [value]="config?.appearance?.header?.textColor || ''" (input)="setHeader('textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleColor || ''" (input)="setHeader('titleColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionColor || ''" (input)="setHeader('descriptionColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Altura</mat-label>
+            <input matInput [value]="config?.appearance?.header?.height || ''" (input)="setHeader('height', $any($event.target).value)" placeholder="48px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Padding</mat-label>
+            <input matInput [value]="config?.appearance?.header?.padding || ''" (input)="setHeader('padding', $any($event.target).value)" placeholder="0 16px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Gap</mat-label>
+            <input matInput [value]="config?.appearance?.header?.gap || ''" (input)="setHeader('gap', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Font family</mat-label>
+            <input matInput [value]="config?.appearance?.header?.fontFamily || ''" (input)="setHeader('fontFamily', $any($event.target).value)" placeholder="inherit" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleSize || ''" (input)="setHeader('titleSize', $any($event.target).value)" placeholder="14px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Peso do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleWeight || ''" (input)="setHeader('titleWeight', $any($event.target).value)" placeholder="600" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionSize || ''" (input)="setHeader('descriptionSize', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Peso da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionWeight || ''" (input)="setHeader('descriptionWeight', $any($event.target).value)" placeholder="400" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do ícone toggle</mat-label>
+            <input matInput [value]="config?.appearance?.header?.toggleIconColor || ''" (input)="setHeader('toggleIconColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho do ícone toggle</mat-label>
+            <input matInput [value]="config?.appearance?.header?.toggleIconSize || ''" (input)="setHeader('toggleIconSize', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+        </div>
+
+        <h5>Estados</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Hover - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.hover?.headerBackground || ''" (input)="setState('hover', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container-high)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Hover - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.hover?.textColor || ''" (input)="setState('hover', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.headerBackground || ''" (input)="setState('expanded', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.textColor || ''" (input)="setState('expanded', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - accent bar</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.accentBarColor || ''" (input)="setState('expanded', 'accentBarColor', $any($event.target).value)" placeholder="var(--md-sys-color-primary)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Desabilitado - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.disabled?.headerBackground || ''" (input)="setState('disabled', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Desabilitado - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.disabled?.textColor || ''" (input)="setState('disabled', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+        </div>
+        <mat-form-field appearance="outline" class="full">
+          <mat-label>CSS personalizado</mat-label>
+          <textarea matInput rows="4" [value]="config?.appearance?.customCss || ''" (input)="setAppearance('customCss', $any($event.target).value)" placeholder=".praxis-expansion-root .mat-expansion-panel { }"></textarea>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="full">
+          <mat-label>Tokens (JSON)</mat-label>
+          <textarea matInput rows="4" [value]="stringifyTokens(config?.appearance?.tokens)" (input)="setTokens($any($event.target).value)" placeholder='{"header-background-color":"var(--md-sys-color-surface-container)"}'></textarea>
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="'Use tokens M3, por exemplo: var(--md-sys-color-primary)'"
+            matTooltipPosition="above"
+          >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <div class="error" *ngIf="tokensError">{{ tokensError }}</div>
+      </section>
+
+      <section class="sec">
+        <h4>Configuração do acordeão</h4>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>ID</mat-label>
+            <input matInput [value]="config?.accordion?.id || ''" (input)="setAccordion('id', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Modo de exibição</mat-label>
+            <select matNativeControl [value]="config?.accordion?.displayMode || 'default'" (change)="setAccordion('displayMode', $any($event.target).value)">
+              <option value="default">Padrão</option>
+              <option value="flat">Flat</option>
+            </select>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Posição do toggle</mat-label>
+            <select matNativeControl [value]="config?.accordion?.togglePosition || 'after'" (change)="setAccordion('togglePosition', $any($event.target).value)">
+              <option value="after">Depois</option>
+              <option value="before">Antes</option>
+            </select>
+          </mat-form-field>
+          <div class="row wrap">
+            <mat-slide-toggle [checked]="config?.accordion?.multi || false" (change)="setAccordion('multi', $event.checked)">Múltiplos abertos</mat-slide-toggle>
+            <mat-slide-toggle [checked]="config?.accordion?.hideToggle || false" (change)="setAccordion('hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
+          </div>
         </div>
         <div class="row">
-          <button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar painel</button>
+          <button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar painel</button>
         </div>
       </section>
 
@@ -516,54 +1292,249 @@ class PraxisExpansionConfigEditor {
         <div class="panel-row">
           <strong>{{ p.title || ('Painel ' + (i + 1)) }}</strong>
           <span class="grow"></span>
-          <button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon> Mover</button>
-          <button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon> Mover</button>
-          <button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+          <button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>Subir</button>
+          <button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>Descer</button>
+          <button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon>Remover</button>
         </div>
-        <div class="grid">
-          <label><span>Id</span><input type="text" [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" /></label>
-          <label><span>Título</span><input type="text" [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" /></label>
-          <label><span>Descrição</span><input type="text" [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" /></label>
-          <label><span>Collapsed Height</span><input type="text" placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" /></label>
-          <label><span>Expanded Height</span><input type="text" placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" /></label>
-          <label class="chk"><input type="checkbox" [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $any($event.target).checked)"/> Disabled</label>
-          <label class="chk"><input type="checkbox" [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $any($event.target).checked)"/> Expanded</label>
-          <label class="chk"><input type="checkbox" [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $any($event.target).checked)"/> Hide Toggle</label>
+        <div class="grid two">
+          <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+            <input matInput [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Título</mat-label>
+            <input matInput [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Descrição</mat-label>
+            <input matInput [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Altura recolhida</mat-label>
+            <input matInput placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Altura expandida</mat-label>
+            <input matInput placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" />
+          </mat-form-field>
+          <div class="row wrap">
+            <mat-slide-toggle [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $event.checked)">Desativado</mat-slide-toggle>
+            <mat-slide-toggle [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $event.checked)">Expandido</mat-slide-toggle>
+            <mat-slide-toggle [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
+          </div>
         </div>
       </section>
     </div>
-  `, isInline: true, styles: [".pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px dashed rgba(0,0,0,.12);padding:12px;border-radius:8px}.row{display:flex;gap:8px;align-items:center}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:8px;align-items:center}label{display:flex;flex-direction:column;gap:4px;font-size:12px}label.chk{flex-direction:row;align-items:center;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:10px;background:var(--md-sys-color-surface-container-lowest);display:grid;gap:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;gap:10px;align-items:center}.grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.full{width:100%}.error{color:var(--md-sys-color-error);font-size:12px}.pdx-expansion-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisExpansionConfigEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisExpansionConfigEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-expansion-config-editor', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-expansion-config-editor', standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                        PraxisIconDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="pdx-expansion-editor">
       <section class="sec">
-        <h4>Configuração do Acordeão</h4>
-        <div class="grid">
-          <label>
-            <span>ID</span>
-            <input type="text" [value]="config?.accordion?.id || ''" (input)="setAccordion('id', $any($event.target).value)" />
-          </label>
-          <label>
-            <span>Display Mode</span>
-            <select [value]="config?.accordion?.displayMode || 'default'" (change)="setAccordion('displayMode', $any($event.target).value)">
-              <option value="default">default</option>
-              <option value="flat">flat</option>
+        <h4>Aparência</h4>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Classe de tema</mat-label>
+            <input matInput [value]="config?.appearance?.themeClass || ''" (input)="setAppearance('themeClass', $any($event.target).value)" placeholder="ex.: expansion-accent" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Densidade</mat-label>
+            <select matNativeControl [value]="config?.appearance?.density || ''" (change)="setAppearance('density', $any($event.target).value || undefined)">
+              <option value="">Padrão</option>
+              <option value="compact">Compacta</option>
+              <option value="comfortable">Confortável</option>
+              <option value="spacious">Espaçosa</option>
             </select>
-          </label>
-          <label>
-            <span>Toggle Position</span>
-            <select [value]="config?.accordion?.togglePosition || 'after'" (change)="setAccordion('togglePosition', $any($event.target).value)">
-              <option value="after">after</option>
-              <option value="before">before</option>
+          </mat-form-field>
+        </div>
+
+        <h5>Container</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Background</mat-label>
+            <input matInput [value]="config?.appearance?.container?.background || ''" (input)="setContainer('background', $any($event.target).value)" placeholder="var(--md-sys-color-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Padding</mat-label>
+            <input matInput [value]="config?.appearance?.container?.padding || ''" (input)="setContainer('padding', $any($event.target).value)" placeholder="0" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderColor || ''" (input)="setContainer('borderColor', $any($event.target).value)" placeholder="var(--md-sys-color-outline-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Espessura da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderWidth || ''" (input)="setContainer('borderWidth', $any($event.target).value)" placeholder="1px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Estilo da borda</mat-label>
+            <select matNativeControl [value]="config?.appearance?.container?.borderStyle || ''" (change)="setContainer('borderStyle', $any($event.target).value || undefined)">
+              <option value="">Padrão</option>
+              <option value="solid">Solid</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="none">None</option>
             </select>
-          </label>
-          <label class="chk"><input type="checkbox" [checked]="config?.accordion?.multi || false" (change)="setAccordion('multi', $any($event.target).checked)"/> Multi</label>
-          <label class="chk"><input type="checkbox" [checked]="config?.accordion?.hideToggle || false" (change)="setAccordion('hideToggle', $any($event.target).checked)"/> Hide Toggle</label>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Raio da borda</mat-label>
+            <input matInput [value]="config?.appearance?.container?.borderRadius || ''" (input)="setContainer('borderRadius', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Sombra</mat-label>
+            <input matInput [value]="config?.appearance?.container?.shadow || ''" (input)="setContainer('shadow', $any($event.target).value)" placeholder="var(--md-sys-color-shadow)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Espaço entre painéis</mat-label>
+            <input matInput [value]="config?.appearance?.container?.panelGap || ''" (input)="setContainer('panelGap', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+        </div>
+
+        <h5>Cabeçalho</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Background</mat-label>
+            <input matInput [value]="config?.appearance?.header?.background || ''" (input)="setHeader('background', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do texto</mat-label>
+            <input matInput [value]="config?.appearance?.header?.textColor || ''" (input)="setHeader('textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleColor || ''" (input)="setHeader('titleColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionColor || ''" (input)="setHeader('descriptionColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Altura</mat-label>
+            <input matInput [value]="config?.appearance?.header?.height || ''" (input)="setHeader('height', $any($event.target).value)" placeholder="48px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Padding</mat-label>
+            <input matInput [value]="config?.appearance?.header?.padding || ''" (input)="setHeader('padding', $any($event.target).value)" placeholder="0 16px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Gap</mat-label>
+            <input matInput [value]="config?.appearance?.header?.gap || ''" (input)="setHeader('gap', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Font family</mat-label>
+            <input matInput [value]="config?.appearance?.header?.fontFamily || ''" (input)="setHeader('fontFamily', $any($event.target).value)" placeholder="inherit" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleSize || ''" (input)="setHeader('titleSize', $any($event.target).value)" placeholder="14px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Peso do título</mat-label>
+            <input matInput [value]="config?.appearance?.header?.titleWeight || ''" (input)="setHeader('titleWeight', $any($event.target).value)" placeholder="600" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionSize || ''" (input)="setHeader('descriptionSize', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Peso da descrição</mat-label>
+            <input matInput [value]="config?.appearance?.header?.descriptionWeight || ''" (input)="setHeader('descriptionWeight', $any($event.target).value)" placeholder="400" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Cor do ícone toggle</mat-label>
+            <input matInput [value]="config?.appearance?.header?.toggleIconColor || ''" (input)="setHeader('toggleIconColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Tamanho do ícone toggle</mat-label>
+            <input matInput [value]="config?.appearance?.header?.toggleIconSize || ''" (input)="setHeader('toggleIconSize', $any($event.target).value)" placeholder="12px" />
+          </mat-form-field>
+        </div>
+
+        <h5>Estados</h5>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>Hover - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.hover?.headerBackground || ''" (input)="setState('hover', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container-high)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Hover - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.hover?.textColor || ''" (input)="setState('hover', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.headerBackground || ''" (input)="setState('expanded', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.textColor || ''" (input)="setState('expanded', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Expandido - accent bar</mat-label>
+            <input matInput [value]="config?.appearance?.states?.expanded?.accentBarColor || ''" (input)="setState('expanded', 'accentBarColor', $any($event.target).value)" placeholder="var(--md-sys-color-primary)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Desabilitado - background</mat-label>
+            <input matInput [value]="config?.appearance?.states?.disabled?.headerBackground || ''" (input)="setState('disabled', 'headerBackground', $any($event.target).value)" placeholder="var(--md-sys-color-surface-container)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Desabilitado - texto</mat-label>
+            <input matInput [value]="config?.appearance?.states?.disabled?.textColor || ''" (input)="setState('disabled', 'textColor', $any($event.target).value)" placeholder="var(--md-sys-color-on-surface-variant)" />
+          </mat-form-field>
+        </div>
+        <mat-form-field appearance="outline" class="full">
+          <mat-label>CSS personalizado</mat-label>
+          <textarea matInput rows="4" [value]="config?.appearance?.customCss || ''" (input)="setAppearance('customCss', $any($event.target).value)" placeholder=".praxis-expansion-root .mat-expansion-panel { }"></textarea>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="full">
+          <mat-label>Tokens (JSON)</mat-label>
+          <textarea matInput rows="4" [value]="stringifyTokens(config?.appearance?.tokens)" (input)="setTokens($any($event.target).value)" placeholder='{"header-background-color":"var(--md-sys-color-surface-container)"}'></textarea>
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="'Use tokens M3, por exemplo: var(--md-sys-color-primary)'"
+            matTooltipPosition="above"
+          >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <div class="error" *ngIf="tokensError">{{ tokensError }}</div>
+      </section>
+
+      <section class="sec">
+        <h4>Configuração do acordeão</h4>
+        <div class="grid two">
+          <mat-form-field appearance="outline">
+            <mat-label>ID</mat-label>
+            <input matInput [value]="config?.accordion?.id || ''" (input)="setAccordion('id', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Modo de exibição</mat-label>
+            <select matNativeControl [value]="config?.accordion?.displayMode || 'default'" (change)="setAccordion('displayMode', $any($event.target).value)">
+              <option value="default">Padrão</option>
+              <option value="flat">Flat</option>
+            </select>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Posição do toggle</mat-label>
+            <select matNativeControl [value]="config?.accordion?.togglePosition || 'after'" (change)="setAccordion('togglePosition', $any($event.target).value)">
+              <option value="after">Depois</option>
+              <option value="before">Antes</option>
+            </select>
+          </mat-form-field>
+          <div class="row wrap">
+            <mat-slide-toggle [checked]="config?.accordion?.multi || false" (change)="setAccordion('multi', $event.checked)">Múltiplos abertos</mat-slide-toggle>
+            <mat-slide-toggle [checked]="config?.accordion?.hideToggle || false" (change)="setAccordion('hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
+          </div>
         </div>
         <div class="row">
-          <button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar painel</button>
+          <button mat-stroked-button color="primary" (click)="addPanel()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar painel</button>
         </div>
       </section>
 
@@ -571,24 +1542,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
         <div class="panel-row">
           <strong>{{ p.title || ('Painel ' + (i + 1)) }}</strong>
           <span class="grow"></span>
-          <button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon> Mover</button>
-          <button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon> Mover</button>
-          <button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+          <button mat-button (click)="move(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon>Subir</button>
+          <button mat-button (click)="move(i, 1)" [disabled]="i>=(config!.panels!.length-1)"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon>Descer</button>
+          <button mat-button color="warn" (click)="removePanel(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon>Remover</button>
         </div>
-        <div class="grid">
-          <label><span>Id</span><input type="text" [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" /></label>
-          <label><span>Título</span><input type="text" [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" /></label>
-          <label><span>Descrição</span><input type="text" [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" /></label>
-          <label><span>Collapsed Height</span><input type="text" placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" /></label>
-          <label><span>Expanded Height</span><input type="text" placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" /></label>
-          <label class="chk"><input type="checkbox" [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $any($event.target).checked)"/> Disabled</label>
-          <label class="chk"><input type="checkbox" [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $any($event.target).checked)"/> Expanded</label>
-          <label class="chk"><input type="checkbox" [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $any($event.target).checked)"/> Hide Toggle</label>
+        <div class="grid two">
+          <mat-form-field appearance="outline"><mat-label>ID</mat-label>
+            <input matInput [value]="p.id || ''" (input)="setPanel(i, 'id', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Título</mat-label>
+            <input matInput [value]="p.title || ''" (input)="setPanel(i, 'title', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Descrição</mat-label>
+            <input matInput [value]="p.description || ''" (input)="setPanel(i, 'description', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Altura recolhida</mat-label>
+            <input matInput placeholder="48px" [value]="p.collapsedHeight || ''" (input)="setPanel(i, 'collapsedHeight', $any($event.target).value)" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>Altura expandida</mat-label>
+            <input matInput placeholder="64px" [value]="p.expandedHeight || ''" (input)="setPanel(i, 'expandedHeight', $any($event.target).value)" />
+          </mat-form-field>
+          <div class="row wrap">
+            <mat-slide-toggle [checked]="p.disabled || false" (change)="setPanel(i, 'disabled', $event.checked)">Desativado</mat-slide-toggle>
+            <mat-slide-toggle [checked]="p.expanded || false" (change)="setPanel(i, 'expanded', $event.checked)">Expandido</mat-slide-toggle>
+            <mat-slide-toggle [checked]="p.hideToggle || false" (change)="setPanel(i, 'hideToggle', $event.checked)">Ocultar toggle</mat-slide-toggle>
+          </div>
         </div>
       </section>
     </div>
-  `, styles: [".pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px dashed rgba(0,0,0,.12);padding:12px;border-radius:8px}.row{display:flex;gap:8px;align-items:center}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:8px;align-items:center}label{display:flex;flex-direction:column;gap:4px;font-size:12px}label.chk{flex-direction:row;align-items:center;gap:6px}\n"] }]
-        }], propDecorators: { config: [{
+  `, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.pdx-expansion-editor{display:grid;gap:16px}.sec{border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:10px;background:var(--md-sys-color-surface-container-lowest);display:grid;gap:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}.panel-row{display:flex;gap:8px;align-items:center;width:100%}.grow{flex:1 1 auto}.grid{display:grid;gap:10px;align-items:center}.grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.full{width:100%}.error{color:var(--md-sys-color-error);font-size:12px}.pdx-expansion-editor .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_PANEL_DATA]
+                }] }], propDecorators: { config: [{
                 type: Input
             }], expansionId: [{
                 type: Input
@@ -599,12 +1585,13 @@ const PRAXIS_EXPANSION_COMPONENT_METADATA = {
     selector: 'praxis-expansion',
     component: PraxisExpansion,
     friendlyName: 'Praxis Expansion Panel',
-    description: 'Acordeão/Painéis de expansão configuráveis por metadata, baseados em Angular Material.',
+    description: 'Acordeão/Painéis de expansão configuráveis por metadata, com aparência e tokens M3.',
     icon: 'unfold_more',
     inputs: [
-        { name: 'config', type: 'ExpansionMetadata', label: 'Configuração', description: 'Configuração JSON (acordeão e painéis)' },
-        { name: 'expansionId', type: 'string', label: 'ID', description: 'Identificador para persistência local' },
-        { name: 'editModeEnabled', type: 'boolean', default: false, label: 'Modo de edição' },
+        { name: 'config', type: 'ExpansionMetadata', label: 'Configuração', description: 'Configuração JSON (acordeão, aparência e painéis)' },
+        { name: 'expansionId', type: 'string', label: 'ID', description: 'Identificador para persistência (obrigatório)' },
+        { name: 'componentInstanceId', type: 'string', label: 'ID da instância', description: 'Identificador opcional para múltiplas instâncias na mesma rota' },
+        { name: 'enableCustomization', type: 'boolean', default: false, label: 'Modo de customização' },
         { name: 'context', type: 'Record<string, any>', label: 'Contexto' },
         { name: 'strictValidation', type: 'boolean', default: true },
         { name: 'defaultOptions', type: 'MatExpansionPanelDefaultOptions', label: 'Opções padrão do painel' },
@@ -618,6 +1605,60 @@ const PRAXIS_EXPANSION_COMPONENT_METADATA = {
         { name: 'destroyed', type: '{ panelId?: string; panelIndex: number }', label: 'Destruído' },
         { name: 'widgetEvent', type: '{ panelId?: string; panelIndex?: number; sourceId: string; output?: string; payload?: any }', label: 'Evento interno' },
     ],
+    actions: [
+        {
+            id: 'panel-opened',
+            label: 'Painel aberto',
+            icon: 'unfold_more',
+            description: 'Emite evento ao abrir um painel',
+            emit: 'opened',
+            payloadSchema: {
+                type: 'object',
+                properties: {
+                    panelId: { type: 'string', description: 'ID do painel' },
+                    panelIndex: { type: 'number', description: 'Índice do painel' },
+                },
+                required: ['panelIndex'],
+                example: { panelIndex: 0 },
+            },
+            scope: 'context',
+        },
+        {
+            id: 'panel-closed',
+            label: 'Painel fechado',
+            icon: 'unfold_less',
+            description: 'Emite evento ao fechar um painel',
+            emit: 'closed',
+            payloadSchema: {
+                type: 'object',
+                properties: {
+                    panelId: { type: 'string', description: 'ID do painel' },
+                    panelIndex: { type: 'number', description: 'Índice do painel' },
+                },
+                required: ['panelIndex'],
+                example: { panelIndex: 0 },
+            },
+            scope: 'context',
+        },
+        {
+            id: 'panel-toggle',
+            label: 'Alternar painel',
+            icon: 'open_in_full',
+            description: 'Emite evento ao alternar expansão do painel',
+            emit: 'expandedChange',
+            payloadSchema: {
+                type: 'object',
+                properties: {
+                    panelId: { type: 'string', description: 'ID do painel' },
+                    panelIndex: { type: 'number', description: 'Índice do painel' },
+                    expanded: { type: 'boolean', description: 'Estado expandido' },
+                },
+                required: ['panelIndex', 'expanded'],
+                example: { panelIndex: 0, expanded: true },
+            },
+            scope: 'context',
+        },
+    ],
     tags: ['widget', 'expansion', 'accordion', 'configurable'],
     lib: '@praxisui/expansion',
 };
@@ -638,11 +1679,10 @@ function providePraxisExpansionDefaults(opts) {
 /*
  * Public API Surface of praxis-expansion
  */
-// Editor é exportado pelo mesmo arquivo de componente (praxis-expansion.ts)
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_EXPANSION_COMPONENT_METADATA, PraxisExpansion, PraxisExpansionConfigEditor, providePraxisExpansionDefaults, providePraxisExpansionMetadata };
+export { EXPANSION_AI_CAPABILITIES, PRAXIS_EXPANSION_COMPONENT_METADATA, PraxisExpansion, PraxisExpansionConfigEditor, providePraxisExpansionDefaults, providePraxisExpansionMetadata };
 //# sourceMappingURL=praxisui-expansion.mjs.map