@praxisui/page-builder 10.0.0-rc.19 → 10.0.0-rc.20

package/fesm2022/praxisui-page-builder.mjs

@@ -558,6 +558,8 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     "praxis.pageBuilder.editor.devices.stack": "Stack widgets",
     "praxis.pageBuilder.editor.devices.stackHelp": "Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.",
     "praxis.pageBuilder.editor.devices.stacked": "Single-column layout prepared. Save to apply; Reset undoes the changes.",
+    "praxis.pageBuilder.editor.devices.widgetOverridesHelp": "Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.",
+    "praxis.pageBuilder.editor.errors.widgetOverridesUnsupportedProperty": "Invalid override for widget \"{{widgetKey}}\": property \"{{property}}\" is not supported in widgetOverrides. Allowed per-device properties: className, span, order, hidden. To configure internal card or rich-content layout, use responsive settings on the widget itself.",
     'praxis.pageBuilder.shell.menuPlacement': 'More actions menu',
     'praxis.pageBuilder.editor.limits.tab': "Widget limits",
     'praxis.pageBuilder.editor.limits.help': 'Grid limits use columns and rows. Content-row layouts also offer pixel height below. Leave limits blank for defaults or to inherit the base layout.',
@@ -583,6 +585,11 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     'praxis.pageBuilder.editor.limits.errors.range': "The minimum cannot exceed the maximum, including inherited limits.",
     'praxis.pageBuilder.editor.limits.errors.columns': "The minimum width exceeds the grid columns.",
     'praxis.pageBuilder.editor.limits.errors.size': "The current size is outside these limits. Resize the widget first, or review the limits.",
+    'praxis.pageBuilder.editor.limits.blockedBannerTitle': "Height geometry requires review in Widget limits",
+    'praxis.pageBuilder.editor.limits.blockedBannerHelp': "One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:",
+    'praxis.pageBuilder.editor.limits.gotoLimitsAction': "Go to Adjustments → Widget limits",
+    'praxis.pageBuilder.editor.limits.switchToAutoHeightAction': "Switch affected widgets to Automatic height",
+    'praxis.pageBuilder.editor.limits.previousHeightsSummary': "Previous adjustable heights preserved for reference:",
     "praxis.pageBuilder.shell.intro": "Name the widget and choose its style. The sample reflects your changes.",
     "praxis.pageBuilder.shell.identityTitle": "Title and description",
     "praxis.pageBuilder.shell.previewTitle": "Appearance sample",
@@ -1672,6 +1679,8 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     "praxis.pageBuilder.editor.devices.stack": "Empilhar widgets",
     "praxis.pageBuilder.editor.devices.stackHelp": "Usa a largura total e altura natural, na ordem de leitura. Substitui as posições e os limites de largura apenas neste dispositivo; os outros layouts são preservados.",
     "praxis.pageBuilder.editor.devices.stacked": "Layout de uma coluna preparado. Salve para aplicar; Redefinir desfaz os ajustes.",
+    "praxis.pageBuilder.editor.devices.widgetOverridesHelp": "Propriedades suportadas por widget neste dispositivo: className, span, order e hidden. Não sobrescreve definition ou inputs internos do widget.",
+    "praxis.pageBuilder.editor.errors.widgetOverridesUnsupportedProperty": "Sobrescrita inválida para o widget \"{{widgetKey}}\": a propriedade \"{{property}}\" não é suportada em widgetOverrides. Propriedades permitidas por dispositivo: className, span, order, hidden. Para configurar layout interno de card ou rich-content, use responsividade no próprio widget.",
     'praxis.pageBuilder.shell.menuPlacement': 'Menu Mais ações',
     'praxis.pageBuilder.editor.limits.tab': "Limites dos widgets",
     'praxis.pageBuilder.editor.limits.help': 'Os limites da grade usam colunas e linhas. Em linhas de conteúdo, a seção de altura também permite pixels. Deixe os limites em branco para usar os padrões ou herdar o layout base.',
@@ -1697,6 +1706,11 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     'praxis.pageBuilder.editor.limits.errors.range': "O mínimo não pode ultrapassar o máximo, incluindo os limites herdados.",
     'praxis.pageBuilder.editor.limits.errors.columns': "A largura mínima ultrapassa as colunas da grade.",
     'praxis.pageBuilder.editor.limits.errors.size': "O tamanho atual está fora destes limites. Redimensione o widget antes ou revise os limites.",
+    'praxis.pageBuilder.editor.limits.blockedBannerTitle': "Geometria de altura em revisão nos limites dos widgets",
+    'praxis.pageBuilder.editor.limits.blockedBannerHelp': "Um ou mais widgets usam altura ajustável em pixels que excede a área útil atual ou exige revisão antes de aplicar a página ou o modelo:",
+    'praxis.pageBuilder.editor.limits.gotoLimitsAction': "Ir para Ajustes → Limites dos widgets",
+    'praxis.pageBuilder.editor.limits.switchToAutoHeightAction': "Alternar widgets afetados para altura Automática",
+    'praxis.pageBuilder.editor.limits.previousHeightsSummary': "Alturas ajustáveis anteriores preservadas para referência:",
     "praxis.pageBuilder.connections.details.transientHelp": "Dados temporários da seleção. Não são salvos na página. O cabeçalho pode ler ${transient.<caminho>.<campo>}.",
     "praxis.pageBuilder.shell.reviewAppearance": "Revisar erros em Personalizar aparência",
     "praxis.pageBuilder.shell.invalidTopic": "Contém campos inválidos",
@@ -13790,11 +13804,8 @@ class CanvasConstraintEditorModel {
                     heightPx: size && size !== 'auto' ? size.heightPx : null,
                     offsetTopPx: size && size !== 'auto' ? size.offsetTopPx ?? 0 : null,
                 };
-                const authoredTitle = typeof widget.shell?.title === 'string' ? widget.shell.title : '';
-                // This editor has no runtime state projection: identify templates by stable widget key.
-                // Template detection is presentation only, never intent routing or expression evaluation.
-                const title = authoredTitle.includes('${') ? key : authoredTitle;
-                this.targets.push({ key, title: title || key, scope, seed });
+                const title = this.resolveFriendlyWidgetTitle(widget, key);
+                this.targets.push({ key, title, scope, seed });
                 this.form.push(new FormGroup({
                     minColSpan: new FormControl(seed.minColSpan), maxColSpan: new FormControl(seed.maxColSpan),
                     minRowSpan: new FormControl(seed.minRowSpan), maxRowSpan: new FormControl(seed.maxRowSpan),
@@ -13927,6 +13938,55 @@ class CanvasConstraintEditorModel {
             height: Math.max(minRow, Math.min(override?.rowSpan ?? base.rowSpan, Math.max(minRow, limits.maxRowSpan || Number.MAX_SAFE_INTEGER))),
         };
     }
+    resolveFriendlyWidgetTitle(widget, key) {
+        const cleanStatic = (candidate) => {
+            if (typeof candidate !== 'string')
+                return '';
+            const trimmed = candidate.trim();
+            return trimmed && !trimmed.includes('${') ? trimmed : '';
+        };
+        const authoredTitle = cleanStatic(widget.shell?.title);
+        if (authoredTitle) {
+            return authoredTitle;
+        }
+        const subtitle = cleanStatic(widget.shell?.subtitle);
+        if (subtitle) {
+            return `${subtitle} (${key})`;
+        }
+        const inputs = widget.definition?.inputs && typeof widget.definition.inputs === 'object'
+            ? widget.definition.inputs
+            : null;
+        if (inputs) {
+            const directInputTitle = cleanStatic(inputs['title']) || cleanStatic(inputs['label']);
+            if (directInputTitle) {
+                return `${directInputTitle} (${key})`;
+            }
+            for (const nestedKey of ['config', 'chartDocument']) {
+                const nested = inputs[nestedKey];
+                if (nested && typeof nested === 'object') {
+                    const nestedTitle = cleanStatic(nested['title']);
+                    if (nestedTitle) {
+                        return `${nestedTitle} (${key})`;
+                    }
+                }
+            }
+            const doc = inputs['document'];
+            if (doc && typeof doc === 'object' && Array.isArray(doc['nodes'])) {
+                for (const node of doc['nodes']) {
+                    if (!node || typeof node !== 'object')
+                        continue;
+                    const rec = node;
+                    const nodeTitle = cleanStatic(rec['title']) ||
+                        cleanStatic(rec['headline']) ||
+                        cleanStatic(rec['label']);
+                    if (nodeTitle) {
+                        return `${nodeTitle} (${key})`;
+                    }
+                }
+            }
+        }
+        return key;
+    }
 }
 
 const LAYOUT_PRESET_ENTRIES = Object.values(BUILTIN_PAGE_LAYOUT_PRESETS).map((preset) => ({
@@ -14092,6 +14152,7 @@ class DynamicPageConfigEditorComponent {
     contextControl = new FormControl('', { nonNullable: true });
     stateControl = new FormControl('', { nonNullable: true });
     dataSourcesControl = new FormControl('', { nonNullable: true });
+    dataSourceNodes = new FormArray([]);
     groupingNodes = new FormArray([]);
     deviceForms = { desktop: this.createDeviceVariantForm(), tablet: this.createDeviceVariantForm(), mobile: this.createDeviceVariantForm() };
     isDirty$ = new BehaviorSubject(false);
@@ -14106,6 +14167,7 @@ class DynamicPageConfigEditorComponent {
     canvasLimits = new CanvasConstraintEditorModel();
     limitsTargetControl = new FormControl(0, { nonNullable: true });
     limitsError = signal(null, ...(ngDevMode ? [{ debugName: "limitsError" }] : /* istanbul ignore next */ []));
+    previousAdjustableHeights = signal([], ...(ngDevMode ? [{ debugName: "previousAdjustableHeights" }] : /* istanbul ignore next */ []));
     limitsErrorMatcher = { isErrorState: (control) => !!control?.invalid };
     injectedData = inject(SETTINGS_PANEL_DATA$1, { optional: true });
     isHostedInSettingsPanel = this.injectedData != null;
@@ -14115,6 +14177,8 @@ class DynamicPageConfigEditorComponent {
     stackedDevices = new Set();
     activeDevice = signal('mobile', ...(ngDevMode ? [{ debugName: "activeDevice" }] : /* istanbul ignore next */ []));
     hydrating = false;
+    syncingDataSources = false;
+    guidedDataSourcesInvalid = false;
     renderedCandidate = null;
     renderedValidationFingerprint = '';
     tabOrder = ['canvas', 'grouping', 'devices', 'context', 'state', 'limits'];
@@ -14127,7 +14191,15 @@ class DynamicPageConfigEditorComponent {
                     this.arrangementFeedback.nativeElement.scrollIntoView({ block: 'nearest' });
                 }
             }, read: () => this.refreshRenderedValidation() });
-        merge(this.canvasLimits.form.valueChanges, this.canvasColumnsControl.valueChanges, this.canvasRowUnitControl.valueChanges, this.canvasGapControl.valueChanges, this.paddingInlineControl.valueChanges, this.canvasAutoRowsControl.valueChanges, this.layoutPresetControl.valueChanges, this.themePresetControl.valueChanges, this.shellPresetControl.valueChanges, this.contextControl.valueChanges, this.stateControl.valueChanges, this.dataSourcesControl.valueChanges, this.groupingNodes.valueChanges, this.deviceForms.desktop.valueChanges, this.deviceForms.tablet.valueChanges, this.deviceForms.mobile.valueChanges).pipe(takeUntilDestroyed()).subscribe(() => { if (!this.hydrating)
+        this.dataSourceNodes.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            if (!this.hydrating && !this.syncingDataSources)
+                this.syncDataSourcesJsonFromNodes();
+        });
+        this.dataSourcesControl.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            if (!this.hydrating && !this.syncingDataSources)
+                this.syncDataSourceNodesFromJson();
+        });
+        merge(this.canvasLimits.form.valueChanges, this.canvasColumnsControl.valueChanges, this.canvasRowUnitControl.valueChanges, this.canvasGapControl.valueChanges, this.paddingInlineControl.valueChanges, this.canvasAutoRowsControl.valueChanges, this.layoutPresetControl.valueChanges, this.themePresetControl.valueChanges, this.shellPresetControl.valueChanges, this.contextControl.valueChanges, this.stateControl.valueChanges, this.groupingNodes.valueChanges, this.deviceForms.desktop.valueChanges, this.deviceForms.tablet.valueChanges, this.deviceForms.mobile.valueChanges).pipe(takeUntilDestroyed()).subscribe(() => { if (!this.hydrating)
             this.refreshPanelState(); });
     }
     ngOnInit() { this.hydrate(); }
@@ -14150,6 +14222,69 @@ class DynamicPageConfigEditorComponent {
             && form.controls.heightPx.getError('canvasLimit') === 'rendered-height'
             ? null : message;
     }
+    get blockedGeometryWidgets() {
+        if (!this.limitsError())
+            return [];
+        const items = [];
+        for (const [index, target] of this.canvasLimits.targets.entries()) {
+            const group = this.canvasLimits.form.at(index);
+            if (!group)
+                continue;
+            const hasError = Object.values(group.controls).some(ctrl => !!ctrl.getError('canvasLimit'));
+            if (!hasError)
+                continue;
+            const scopeLabel = target.scope === 'base' ? this.tx('editor.limits.base', 'Base layout') : this.deviceLabels[target.scope];
+            items.push({
+                targetIndex: index,
+                key: target.key,
+                title: target.title,
+                scope: target.scope,
+                scopeLabel,
+                heightPx: group.controls.heightPx.value,
+                message: this.limitsError() || '',
+            });
+        }
+        return items;
+    }
+    navigateToBlockedLimit(targetIndex) {
+        const index = targetIndex ?? this.blockedGeometryWidgets[0]?.targetIndex ?? this.limitsTargetControl.value;
+        this.limitsTargetControl.setValue(index);
+        this.focusEditorTab('limits');
+        setTimeout(() => {
+            const element = document.querySelector('[data-testid="canvas-limits-identity"]');
+            element?.focus?.();
+            element?.scrollIntoView?.({ block: 'nearest' });
+        }, 50);
+    }
+    switchBlockedWidgetsToAutoHeight() {
+        const preserved = [...this.previousAdjustableHeights()];
+        let changed = false;
+        for (const [index, target] of this.canvasLimits.targets.entries()) {
+            const group = this.canvasLimits.form.at(index);
+            if (!group)
+                continue;
+            const hasHeightError = !!group.controls.heightPx.getError('canvasLimit') || !!group.controls.offsetTopPx.getError('canvasLimit');
+            const isFixedWithActiveError = !!this.limitsError() && group.controls.heightMode.value === 'fixed';
+            if (!hasHeightError && !isFixedWithActiveError)
+                continue;
+            const currentHeight = group.controls.heightPx.value;
+            if (typeof currentHeight === 'number') {
+                const scopeLabel = target.scope === 'base' ? this.tx('editor.limits.base', 'Base layout') : this.deviceLabels[target.scope];
+                const existingIndex = preserved.findIndex(item => item.key === target.key && item.scope === target.scope);
+                const entry = { key: target.key, title: target.title, scope: target.scope, scopeLabel, heightPx: currentHeight };
+                if (existingIndex >= 0)
+                    preserved[existingIndex] = entry;
+                else
+                    preserved.push(entry);
+            }
+            group.patchValue({ heightMode: 'auto', heightPx: null, offsetTopPx: null }, { emitEvent: false });
+            changed = true;
+        }
+        if (changed) {
+            this.previousAdjustableHeights.set(preserved);
+            this.refreshPanelState();
+        }
+    }
     get selectedLayoutPresetLabel() { return this.tx('editor.summary.layout', 'Layout: {{label}}').replace('{{label}}', this.lookupPresetLabel(this.layoutPresetEntries, this.layoutPresetControl.value, this.tx('editor.fallback.manual', 'manual'))); }
     get selectedThemePresetLabel() { return this.tx('editor.summary.theme', 'Theme: {{label}}').replace('{{label}}', this.lookupPresetLabel(this.themePresetEntries, this.themePresetControl.value, this.tx('editor.layout.layoutDefault', 'Layout default'))); }
     get selectedLayoutPresetEntry() { const id = resolveWidgetPageLayoutPreset({ layoutPreset: this.layoutPresetControl.value, layoutPresetOptions: this.layoutPresetOptions })?.id; return this.layoutPresetEntries.find(entry => entry.id === id) || null; }
@@ -14234,6 +14369,17 @@ class DynamicPageConfigEditorComponent {
     }
     addGroupingNode(seed) { this.groupingNodes.push(this.createGroupingNodeGroup(seed)); this.refreshPanelState(); }
     removeGroupingNode(index) { this.groupingNodes.removeAt(index); this.refreshPanelState(); }
+    addDataSourceNode(seed) {
+        this.dataSourceNodes.push(this.createDataSourceNodeGroup(seed), { emitEvent: false });
+        this.syncDataSourcesJsonFromNodes();
+    }
+    removeDataSourceNode(index) {
+        this.dataSourceNodes.removeAt(index, { emitEvent: false });
+        this.syncDataSourcesJsonFromNodes();
+    }
+    dataSourceLabel(index) {
+        return this.tx('editor.state.dataSourceN', 'Data source {{index}}').replace('{{index}}', String(index + 1));
+    }
     layoutPresetSummary(preset) { return this.tx('editor.preview.layoutSummary', '{{columns}} columns · {{gap}}').replace('{{columns}}', String(preset.defaultColumns)).replace('{{gap}}', preset.defaultGap || this.tx('editor.preview.defaultGap', 'default gap')); }
     slotsSummary(preset) { return this.tx('editor.preview.slotsChip', 'Slots: {{value}}').replace('{{value}}', preset.slotLabels.join(', ') || this.tx('editor.preview.none', 'none')); }
     requiredSlotsSummary(preset) { return this.tx('editor.preview.requiredSlotsChip', 'Required: {{value}}').replace('{{value}}', preset.requiredSlotLabels.join(', ') || this.tx('editor.preview.noRequiredSlots', 'No required slots')); }
@@ -14271,7 +14417,7 @@ class DynamicPageConfigEditorComponent {
             this.canvasColumnsControl.value, this.canvasRowUnitControl.value,
             this.canvasGapControl.value, this.paddingInlineControl.value, this.canvasAutoRowsControl.value,
             this.layoutPresetControl.value, this.themePresetControl.value, this.shellPresetControl.value,
-            this.contextControl.value, this.stateControl.value, this.dataSourcesControl.value, this.groupingNodes.getRawValue(),
+            this.contextControl.value, this.stateControl.value, this.dataSourcesControl.value, this.dataSourceNodes.getRawValue(), this.groupingNodes.getRawValue(),
             this.deviceKeys.map(key => this.deviceForms[key].getRawValue()),
             this.canvasLimits.form.getRawValue(), [...this.stackedDevices], this.arrangedItems,
         ]);
@@ -14364,13 +14510,141 @@ class DynamicPageConfigEditorComponent {
     }
     createDeviceVariantForm() { return new FormGroup({ columns: new FormControl(null, { validators: [Validators.min(1), integerColumnValidator] }), rowUnit: new FormControl('', { nonNullable: true }), gap: new FormControl('', { nonNullable: true }), paddingInline: new FormControl('', { nonNullable: true }), autoRows: new FormControl('', { nonNullable: true }), groupingOverrides: new FormControl('', { nonNullable: true }), widgetOverrides: new FormControl('', { nonNullable: true }) }); }
     createGroupingNodeGroup(seed) { const label = seed && 'label' in seed && typeof seed.label === 'string' ? seed.label : ''; return new FormGroup({ kind: new FormControl(seed?.kind || 'section', { nonNullable: true }), id: new FormControl(seed?.id || '', { nonNullable: true, validators: [Validators.required] }), label: new FormControl(label, { nonNullable: true }), widgetKeysCsv: new FormControl(this.stringifyGroupingWidgetKeys(seed), { nonNullable: true }), layout: new FormControl(seed?.kind === 'section' ? seed.layout || '' : '', { nonNullable: true }), emphasis: new FormControl(seed?.kind === 'hero' ? seed.emphasis || '' : '', { nonNullable: true }), side: new FormControl(seed?.kind === 'rail' ? seed.side || 'right' : 'right', { nonNullable: true }), tabsJson: new FormControl(seed?.kind === 'tabs' ? JSON.stringify(seed.tabs || [], null, 2) : '', { nonNullable: true }) }); }
-    hydrate(preserveEcho = false) { this.arrangementSelection.set(''); this.focusArrangementFeedback = false; const keepUndo = preserveEcho && this.arrangementUndoAvailable() && this.arrangementAppliedDocument === JSON.stringify(this.currentPageInput()); const undoItems = this.previousArrangementItems; this.arrangementPreview.set(null); this.arrangementMessage.set(''); this.arrangedItems = undefined; this.previousArrangementItems = undefined; this.arrangementUndoAvailable.set(keepUndo); if (keepUndo)
+    createDataSourceNodeGroup(seed) {
+        const autoFetch = seed?.autoFetch === true ? 'true' : seed?.autoFetch === false ? 'false' : '';
+        const fallbackJson = seed && 'fallbackValue' in seed && seed.fallbackValue !== undefined
+            ? JSON.stringify(seed.fallbackValue, null, 2)
+            : '';
+        return new FormGroup({
+            id: new FormControl(seed?.id || '', { nonNullable: true, validators: [Validators.required] }),
+            kind: new FormControl(seed?.kind || '', { nonNullable: true }),
+            resourcePath: new FormControl(seed?.resourcePath || '', { nonNullable: true, validators: [Validators.required] }),
+            endpointKey: new FormControl(seed?.endpointKey || '', { nonNullable: true }),
+            method: new FormControl(seed?.method || '', { nonNullable: true }),
+            targetStatePath: new FormControl(seed?.targetStatePath || '', { nonNullable: true }),
+            errorPolicy: new FormControl(seed?.errorPolicy || '', { nonNullable: true }),
+            refreshIntervalMs: new FormControl(seed?.refreshIntervalMs ?? null, { validators: [Validators.min(0)] }),
+            autoFetch: new FormControl(autoFetch, { nonNullable: true }),
+            description: new FormControl(seed?.description || '', { nonNullable: true }),
+            queryJson: new FormControl(seed?.query ? JSON.stringify(seed.query, null, 2) : '', { nonNullable: true }),
+            transformJson: new FormControl(seed?.transform !== undefined ? JSON.stringify(seed.transform, null, 2) : '', { nonNullable: true }),
+            fallbackJson: new FormControl(fallbackJson, { nonNullable: true }),
+        });
+    }
+    replaceDataSourceNodes(dataSources) {
+        this.dataSourceNodes.clear({ emitEvent: false });
+        for (const item of dataSources || []) {
+            this.dataSourceNodes.push(this.createDataSourceNodeGroup(item), { emitEvent: false });
+        }
+    }
+    buildDataSourcesFromNodes() {
+        if (!this.dataSourceNodes.controls.length)
+            return undefined;
+        const items = [];
+        const seenIds = new Set();
+        for (const group of this.dataSourceNodes.controls) {
+            const id = group.controls.id.value.trim();
+            const resourcePath = group.controls.resourcePath.value.trim();
+            if (!id || !resourcePath || seenIds.has(id))
+                return null;
+            seenIds.add(id);
+            const refreshIntervalMs = group.controls.refreshIntervalMs.value;
+            if (refreshIntervalMs != null && (!Number.isFinite(refreshIntervalMs) || refreshIntervalMs < 0)) {
+                return null;
+            }
+            const kindRaw = group.controls.kind.value.trim();
+            if (kindRaw && !['remote-resource', 'stats-query', 'raw-http'].includes(kindRaw)) {
+                return null;
+            }
+            const methodRaw = group.controls.method.value.trim();
+            if (methodRaw && !['GET', 'POST'].includes(methodRaw)) {
+                return null;
+            }
+            const errorPolicyRaw = group.controls.errorPolicy.value.trim();
+            if (errorPolicyRaw && !['propagate', 'silent', 'fallback'].includes(errorPolicyRaw)) {
+                return null;
+            }
+            let query;
+            const queryRaw = group.controls.queryJson.value.trim();
+            if (queryRaw) {
+                const parsedQuery = this.parseRecordJson(queryRaw, {});
+                if (parsedQuery === null)
+                    return null;
+                query = parsedQuery;
+            }
+            let transform;
+            const transformRaw = group.controls.transformJson.value.trim();
+            if (transformRaw) {
+                const parsedTransform = this.parseJson(transformRaw, null);
+                if (!this.isValidDataSourceTransform(parsedTransform))
+                    return null;
+                transform = parsedTransform;
+            }
+            let hasFallback = false;
+            let fallbackValue;
+            const fallbackRaw = group.controls.fallbackJson.value.trim();
+            if (fallbackRaw) {
+                try {
+                    fallbackValue = JSON.parse(fallbackRaw);
+                    hasFallback = true;
+                }
+                catch {
+                    return null;
+                }
+            }
+            const endpointKey = group.controls.endpointKey.value.trim();
+            const targetStatePath = group.controls.targetStatePath.value.trim();
+            const description = group.controls.description.value.trim();
+            const autoFetchRaw = group.controls.autoFetch.value.trim();
+            items.push({
+                id,
+                ...(kindRaw ? { kind: kindRaw } : {}),
+                resourcePath,
+                ...(endpointKey ? { endpointKey } : {}),
+                ...(methodRaw ? { method: methodRaw } : {}),
+                ...(query !== undefined ? { query } : {}),
+                ...(targetStatePath ? { targetStatePath } : {}),
+                ...(transform !== undefined ? { transform } : {}),
+                ...(refreshIntervalMs != null ? { refreshIntervalMs } : {}),
+                ...(autoFetchRaw === 'true' ? { autoFetch: true } : autoFetchRaw === 'false' ? { autoFetch: false } : {}),
+                ...(errorPolicyRaw ? { errorPolicy: errorPolicyRaw } : {}),
+                ...(hasFallback ? { fallbackValue } : {}),
+                ...(description ? { description } : {}),
+            });
+        }
+        return items.length ? items : undefined;
+    }
+    syncDataSourcesJsonFromNodes() {
+        const built = this.buildDataSourcesFromNodes();
+        if (built === null) {
+            this.guidedDataSourcesInvalid = true;
+        }
+        else {
+            this.guidedDataSourcesInvalid = false;
+            this.syncingDataSources = true;
+            this.dataSourcesControl.setValue(this.stringify(built), { emitEvent: false });
+            this.syncingDataSources = false;
+        }
+        this.refreshPanelState();
+    }
+    syncDataSourceNodesFromJson() {
+        const parsed = this.parseDataSourcesJson(this.dataSourcesControl.value);
+        if (parsed !== null) {
+            this.guidedDataSourcesInvalid = false;
+            this.syncingDataSources = true;
+            this.replaceDataSourceNodes(parsed);
+            this.syncingDataSources = false;
+        }
+        this.refreshPanelState();
+    }
+    hydrate(preserveEcho = false) { this.arrangementSelection.set(''); this.focusArrangementFeedback = false; if (!preserveEcho)
+        this.previousAdjustableHeights.set([]); const keepUndo = preserveEcho && this.arrangementUndoAvailable() && this.arrangementAppliedDocument === JSON.stringify(this.currentPageInput()); const undoItems = this.previousArrangementItems; this.arrangementPreview.set(null); this.arrangementMessage.set(''); this.arrangedItems = undefined; this.previousArrangementItems = undefined; this.arrangementUndoAvailable.set(keepUndo); if (keepUndo)
         this.previousArrangementItems = undoItems;
     else {
         this.arrangementAppliedDocument = '';
         this.arrangementSourcePage = null;
         this.arrangementGeometry = '';
-    } this.stackedDevices.clear(); const page = this.currentPageInput() || { widgets: [] }; const canvas = page.canvas || this.defaultCanvas(); const context = this.clone(page.context || {}); this.hydrating = true; this.canvasLimits.hydrate(page); this.limitsTargetControl.setValue(0, { emitEvent: false }); this.limitsError.set(null); this.canvasColumnsControl.setValue(canvas.columns || 12, { emitEvent: false }); this.canvasRowUnitControl.setValue(canvas.rowUnit || '80px', { emitEvent: false }); this.canvasGapControl.setValue(canvas.gap || '16px', { emitEvent: false }); this.paddingInlineControl.setValue(page.layout?.paddingInline || '', { emitEvent: false }); this.canvasAutoRowsControl.setValue(canvas.autoRows || 'fixed', { emitEvent: false }); this.layoutPresetControl.setValue(page.layoutPreset || '', { emitEvent: false }); this.themePresetControl.setValue(page.themePreset || '', { emitEvent: false }); this.shellPresetControl.setValue(this.extractShellPreset(context) || '', { emitEvent: false }); this.replaceGroupingNodes(page.grouping); this.contextControl.setValue(this.stringify(this.removeShellPresetFromContext(context)), { emitEvent: false }); this.stateControl.setValue(this.stringify(page.state || {}), { emitEvent: false }); this.dataSourcesControl.setValue(this.stringify(page.dataSources), { emitEvent: false }); for (const device of this.deviceKeys) {
+    } this.stackedDevices.clear(); const page = this.currentPageInput() || { widgets: [] }; const canvas = page.canvas || this.defaultCanvas(); const context = this.clone(page.context || {}); this.hydrating = true; this.guidedDataSourcesInvalid = false; this.canvasLimits.hydrate(page); this.limitsTargetControl.setValue(0, { emitEvent: false }); this.limitsError.set(null); this.canvasColumnsControl.setValue(canvas.columns || 12, { emitEvent: false }); this.canvasRowUnitControl.setValue(canvas.rowUnit || '80px', { emitEvent: false }); this.canvasGapControl.setValue(canvas.gap || '16px', { emitEvent: false }); this.paddingInlineControl.setValue(page.layout?.paddingInline || '', { emitEvent: false }); this.canvasAutoRowsControl.setValue(canvas.autoRows || 'fixed', { emitEvent: false }); this.layoutPresetControl.setValue(page.layoutPreset || '', { emitEvent: false }); this.themePresetControl.setValue(page.themePreset || '', { emitEvent: false }); this.shellPresetControl.setValue(this.extractShellPreset(context) || '', { emitEvent: false }); this.replaceGroupingNodes(page.grouping); this.contextControl.setValue(this.stringify(this.removeShellPresetFromContext(context)), { emitEvent: false }); this.stateControl.setValue(this.stringify(page.state || {}), { emitEvent: false }); const rawDataSources = this.stringify(page.dataSources); this.dataSourcesControl.setValue(rawDataSources, { emitEvent: false }); const parsedDataSources = this.parseDataSourcesJson(rawDataSources); this.replaceDataSourceNodes(parsedDataSources ?? undefined); for (const device of this.deviceKeys) {
         const variant = page.deviceLayouts?.[device];
         this.deviceForms[device].setValue({ columns: variant?.canvas?.columns ?? null, rowUnit: variant?.canvas?.rowUnit || '', gap: variant?.canvas?.gap || '', paddingInline: variant?.layout?.paddingInline || '', autoRows: variant?.canvas?.autoRows || '', groupingOverrides: this.stringify(variant?.groupingOverrides || []), widgetOverrides: this.stringify(variant?.widgetOverrides || {}) }, { emitEvent: false });
     } this.canvasError.set(null); this.groupingError.set(null); this.deviceError.set(null); this.contextError.set(null); this.stateError.set(null); this.hydrating = false; this.refreshPanelState(true); }
@@ -14381,7 +14655,7 @@ class DynamicPageConfigEditorComponent {
         return null; this.groupingError.set(null); const context = this.parseRecordJson(this.contextControl.value, {}); if (context === null)
         return this.invalidate('context', this.contextError, reportErrors, this.tx('editor.errors.contextInvalid', 'Invalid context')); if (!this.validShellContext(context))
         return this.invalidate('context', this.contextError, reportErrors, this.tx('editor.errors.contextStructure', 'Context ui and ui.shell must be objects; shell.preset must be text. Correct these fields without removing other context data.')); this.contextError.set(null); const state = this.parseRecordJson(this.stateControl.value, {}); if (state === null)
-        return this.invalidate('state', this.stateError, reportErrors, this.tx('editor.errors.stateInvalid', 'Invalid state')); const dataSources = this.parseDataSourcesJson(this.dataSourcesControl.value); if (dataSources === null)
+        return this.invalidate('state', this.stateError, reportErrors, this.tx('editor.errors.stateInvalid', 'Invalid state')); const dataSources = this.guidedDataSourcesInvalid ? null : this.parseDataSourcesJson(this.dataSourcesControl.value); if (dataSources === null)
         return this.invalidate('state', this.stateError, reportErrors, this.tx('editor.errors.dataSourcesInvalid', 'Invalid data sources')); this.stateError.set(null); const deviceLayouts = this.buildDeviceLayouts(reportErrors, next.deviceLayouts); if (deviceLayouts === null)
         return null; next.canvas = this.buildCanvas(next); if (next.canvas && this.arrangedItems)
         next.canvas = { ...next.canvas, items: this.clone(this.arrangedItems) }; next.layout = withPagePaddingInline(next.layout, this.paddingInlineControl.value); next.layoutPreset = this.layoutPresetControl.value.trim() || undefined; next.themePreset = this.themePresetControl.value.trim() || undefined; next.grouping = grouping.length ? grouping : undefined; next.deviceLayouts = Object.keys(deviceLayouts).length ? deviceLayouts : undefined; next.context = this.buildPageContext(next.context, context); next.state = Object.keys(state).length ? state : undefined; next.dataSources = dataSources; return this.applyCanvasLimits(next, reportErrors); }
@@ -14462,9 +14736,10 @@ class DynamicPageConfigEditorComponent {
         if (form.controls.columns.invalid)
             return this.invalidate('devices', this.deviceError, reportErrors, this.tx('editor.errors.invalidColumns', 'Invalid columns'));
         const groupingOverrides = this.parseGroupingOverrides(form.controls.groupingOverrides.value);
-        const widgetOverrides = this.parseWidgetOverrides(form.controls.widgetOverrides.value);
+        const widgetOverridesCheck = this.validateWidgetOverrides(form.controls.widgetOverrides.value);
+        const widgetOverrides = widgetOverridesCheck.overrides;
         if (groupingOverrides === null || widgetOverrides === null)
-            return this.invalidate('devices', this.deviceError, reportErrors, this.tx('editor.errors.invalidOverrides', 'Invalid overrides'));
+            return this.invalidate('devices', this.deviceError, reportErrors, widgetOverridesCheck.error || this.tx('editor.errors.invalidOverrides', 'Invalid overrides'));
         const baseVariant = this.clone(base?.[device] || {});
         const baseCanvas = this.clone(baseVariant.canvas || {});
         baseVariant.layout = withPagePaddingInline(baseVariant.layout, form.controls.paddingInline.value);
@@ -14549,42 +14824,124 @@ class DynamicPageConfigEditorComponent {
         }));
         return entries.length ? entries : undefined;
     }
+    isValidDataSourceTransform(value) {
+        if (!this.isPlainObject(value) || !Object.keys(value).length)
+            return false;
+        if ('kind' in value) {
+            const kind = value['kind'];
+            if (kind === 'path') {
+                return typeof value['path'] === 'string' && value['path'].trim().length > 0;
+            }
+            if (kind === 'group-by-map') {
+                return (this.isPlainObject(value['mappings'])
+                    && Object.values(value['mappings']).every((target) => typeof target === 'string' && target.trim().length > 0)
+                    && (value['totalField'] === undefined || (typeof value['totalField'] === 'string' && value['totalField'].trim().length > 0)));
+            }
+            if (kind === 'timeseries-last') {
+                return (this.isPlainObject(value['mappings'])
+                    && Object.values(value['mappings']).every((target) => typeof target === 'string' && target.trim().length > 0));
+            }
+            return false;
+        }
+        return true;
+    }
+    validateDataSourceEntry(item, fallbackId) {
+        if (!this.isPlainObject(item))
+            return null;
+        if (item['id'] !== undefined && (typeof item['id'] !== 'string' || !item['id'].trim().length)) {
+            return null;
+        }
+        const effectiveId = typeof item['id'] === 'string' ? item['id'].trim() : (fallbackId?.trim() || '');
+        if (!effectiveId)
+            return null;
+        if (typeof item['resourcePath'] !== 'string' || !item['resourcePath'].trim().length) {
+            return null;
+        }
+        if (item['kind'] !== undefined && !['remote-resource', 'stats-query', 'raw-http'].includes(item['kind'])) {
+            return null;
+        }
+        if (item['method'] !== undefined && !['GET', 'POST'].includes(item['method'])) {
+            return null;
+        }
+        if (item['errorPolicy'] !== undefined && !['propagate', 'silent', 'fallback'].includes(item['errorPolicy'])) {
+            return null;
+        }
+        if (item['refreshIntervalMs'] !== undefined
+            && (typeof item['refreshIntervalMs'] !== 'number' || !Number.isFinite(item['refreshIntervalMs']) || item['refreshIntervalMs'] < 0)) {
+            return null;
+        }
+        if (item['autoFetch'] !== undefined && typeof item['autoFetch'] !== 'boolean') {
+            return null;
+        }
+        if (item['endpointKey'] !== undefined && typeof item['endpointKey'] !== 'string') {
+            return null;
+        }
+        if (item['targetStatePath'] !== undefined && typeof item['targetStatePath'] !== 'string') {
+            return null;
+        }
+        if (item['description'] !== undefined && typeof item['description'] !== 'string') {
+            return null;
+        }
+        if (item['query'] !== undefined && !this.isPlainObject(item['query'])) {
+            return null;
+        }
+        if (item['transform'] !== undefined && !this.isValidDataSourceTransform(item['transform'])) {
+            return null;
+        }
+        return effectiveId;
+    }
     isValidDataSourcesPayload(parsed) {
         if (!parsed || typeof parsed !== 'object')
             return false;
-        const isValidRefreshInterval = (val) => val === undefined || (typeof val === 'number' && Number.isFinite(val) && val >= 0);
+        const seenIds = new Set();
         if (Array.isArray(parsed)) {
-            const seenIds = new Set();
             for (const item of parsed) {
-                if (!this.isPlainObject(item)
-                    || typeof item.id !== 'string'
-                    || !item.id.trim().length
-                    || typeof item.resourcePath !== 'string'
-                    || !item.resourcePath.trim().length
-                    || !isValidRefreshInterval(item.refreshIntervalMs)) {
+                const id = this.validateDataSourceEntry(item);
+                if (!id || seenIds.has(id))
                     return false;
-                }
-                const trimmedId = item.id.trim();
-                if (seenIds.has(trimmedId))
-                    return false;
-                seenIds.add(trimmedId);
+                seenIds.add(id);
             }
             return true;
         }
-        return Object.entries(parsed).every(([id, item]) => id.trim().length > 0 && this.isPlainObject(item)
-            && typeof item.resourcePath === 'string'
-            && item.resourcePath.trim().length > 0
-            && isValidRefreshInterval(item.refreshIntervalMs));
+        for (const [key, item] of Object.entries(parsed)) {
+            if (!key.trim().length)
+                return false;
+            const id = this.validateDataSourceEntry(item, key);
+            if (!id || seenIds.has(id))
+                return false;
+            seenIds.add(id);
+        }
+        return true;
     }
     parseGroupingTabs(raw) { const parsed = this.parseJson(raw, []); if (!Array.isArray(parsed) || !parsed.every((tab) => this.isGroupingTab(tab)))
         return null; return this.hasDuplicateIds(parsed) ? null : parsed; }
     parseGroupingOverrides(raw) { const parsed = this.parseJson(raw, []); if (!Array.isArray(parsed) || !parsed.every((item) => this.isGroupingOverride(item)))
         return null; return this.hasDuplicateIds(parsed) ? null : parsed; }
-    parseWidgetOverrides(raw) { const parsed = this.parseJson(raw, {}); if (!this.isPlainObject(parsed))
-        return null; return Object.values(parsed).every((value) => this.isWidgetOverride(value)) ? parsed : null; }
+    parseWidgetOverrides(raw) { return this.validateWidgetOverrides(raw).overrides; }
+    validateWidgetOverrides(raw) {
+        const parsed = this.parseJson(raw, {});
+        if (!this.isPlainObject(parsed))
+            return { overrides: null, error: null };
+        const allowedKeys = new Set(['className', 'span', 'order', 'hidden']);
+        for (const [widgetKey, item] of Object.entries(parsed)) {
+            if (!this.isPlainObject(item))
+                return { overrides: null, error: null };
+            for (const prop of Object.keys(item)) {
+                if (!allowedKeys.has(prop)) {
+                    const message = this.tx('editor.errors.widgetOverridesUnsupportedProperty', 'Invalid override for widget "{{widgetKey}}": property "{{property}}" is not supported in widgetOverrides. Allowed per-device properties: className, span, order, hidden. To configure internal card or rich-content layout, use responsive settings on the widget itself.')
+                        .replace('{{widgetKey}}', widgetKey)
+                        .replace('{{property}}', prop);
+                    return { overrides: null, error: message };
+                }
+            }
+            if (!this.isWidgetOverride(item))
+                return { overrides: null, error: null };
+        }
+        return { overrides: parsed, error: null };
+    }
     isGroupingTab(value) { return this.isPlainObject(value) && typeof value.id === 'string' && value.id.trim().length > 0 && typeof value.label === 'string' && Array.isArray(value.widgetKeys) && value.widgetKeys.every((item) => typeof item === 'string') && !this.hasDuplicateStrings(value.widgetKeys); }
     isGroupingOverride(value) { return this.isPlainObject(value) && typeof value.id === 'string' && value.id.trim().length > 0 && (value.hidden === undefined || typeof value.hidden === 'boolean') && (value.widgetKeys === undefined || (Array.isArray(value.widgetKeys) && value.widgetKeys.every((item) => typeof item === 'string') && !this.hasDuplicateStrings(value.widgetKeys))) && (value.tabs === undefined || (Array.isArray(value.tabs) && value.tabs.every((item) => this.isGroupingTab(item)) && !this.hasDuplicateIds(value.tabs))); }
-    isWidgetOverride(value) { return this.isPlainObject(value) && (value.className === undefined || typeof value.className === 'string') && (value.span === undefined || typeof value.span === 'number') && (value.order === undefined || typeof value.order === 'number') && (value.hidden === undefined || typeof value.hidden === 'boolean'); }
+    isWidgetOverride(value) { return this.isPlainObject(value) && Object.keys(value).every((key) => ['className', 'span', 'order', 'hidden'].includes(key)) && (value.className === undefined || typeof value.className === 'string') && (value.span === undefined || (typeof value.span === 'number' && Number.isFinite(value.span))) && (value.order === undefined || (typeof value.order === 'number' && Number.isFinite(value.order))) && (value.hidden === undefined || typeof value.hidden === 'boolean'); }
     isPlainObject(value) { return !!value && typeof value === 'object' && !Array.isArray(value); }
     hasDuplicateIds(values) { const seen = new Set(); for (const value of values) {
         if (seen.has(value.id))
@@ -14624,11 +14981,11 @@ class DynamicPageConfigEditorComponent {
     clone(value) { if (value == null || typeof value !== 'object')
         return value; return JSON.parse(JSON.stringify(value)); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicPageConfigEditorComponent, isStandalone: true, selector: "praxis-dynamic-page-config-editor", inputs: { page: "page", layout: "layout", presets: "presets", pagePreset: "pagePreset" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "refreshRenderedValidation()" } }, providers: [providePraxisPageBuilderI18n()], viewQueries: [{ propertyName: "arrangementFeedback", first: true, predicate: ["arrangementFeedback"], descendants: true }], ngImport: i0, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\"><div class=\"panel\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label><textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea></mat-form-field><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label><textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}\n"], dependencies: [{ kind: "component", type: PagePresetComparisonComponent, selector: "praxis-page-preset-comparison", inputs: ["expanded", "layoutId", "themeId", "layoutPresetOptions", "canvas"], outputs: ["choose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicPageConfigEditorComponent, isStandalone: true, selector: "praxis-dynamic-page-config-editor", inputs: { page: "page", layout: "layout", presets: "presets", pagePreset: "pagePreset" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "refreshRenderedValidation()" } }, providers: [providePraxisPageBuilderI18n()], viewQueries: [{ propertyName: "arrangementFeedback", first: true, predicate: ["arrangementFeedback"], descendants: true }], ngImport: i0, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}\n"], dependencies: [{ kind: "component", type: PagePresetComparisonComponent, selector: "praxis-page-preset-comparison", inputs: ["expanded", "layoutId", "themeId", "layoutPresetOptions", "canvas"], outputs: ["choose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [PagePresetComparisonComponent, ReactiveFormsModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, MatTooltipModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\"><div class=\"panel\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label><textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea></mat-form-field><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label><textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}\n"] }]
+            args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [PagePresetComparisonComponent, ReactiveFormsModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, MatTooltipModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, template: "<div class=\"editor\">\n      @if (!isHostedInSettingsPanel) { <div class=\"head\">\n        <div>{{ tx('editor.title', 'Page settings') }}</div>\n        <button mat-stroked-button type=\"button\" (click)=\"reset()\">{{ tx('editor.reload', 'Reload') }}</button>\n      </div> }\n\n      @if (nonLimitError) { <p class=\"limits-error\" role=\"alert\">{{ nonLimitError }}</p> }\n      @if (limitsError() || previousAdjustableHeights().length) {\n        <section class=\"card limits-blocking-banner\" role=\"region\" [attr.aria-label]=\"tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits')\" data-testid=\"preset-geometry-blocking-banner\">\n          @if (limitsError()) {\n            <div class=\"head\">\n              <strong>{{ tx('editor.limits.blockedBannerTitle', 'Height geometry requires review in Widget limits') }}</strong>\n            </div>\n            <p class=\"hint\">{{ tx('editor.limits.blockedBannerHelp', 'One or more widgets use an adjustable pixel height that exceeds the current usable area or requires review before applying the page or template:') }}</p>\n            <ul class=\"blocked-widgets-list\">\n              @for (item of blockedGeometryWidgets; track item.scope + ':' + item.key) {\n                <li>\n                  <strong>{{ item.title }}</strong>\n                  @if (item.title !== item.key) { <code>({{ item.key }})</code> }\n                  <span> \u00B7 {{ item.scopeLabel }}</span>\n                  @if (item.heightPx !== null) {\n                    <span> \u00B7 {{ tx('editor.height.fixed', 'Adjustable') }}: <strong>{{ item.heightPx }}px</strong></span>\n                  }\n                </li>\n              }\n            </ul>\n            <p class=\"limits-error\" role=\"alert\">{{ limitsError() }}</p>\n            <div class=\"head\">\n              <button mat-stroked-button type=\"button\" data-testid=\"goto-blocked-widget-limits\" (click)=\"navigateToBlockedLimit()\">\n                <mat-icon aria-hidden=\"true\">tune</mat-icon>{{ tx('editor.limits.gotoLimitsAction', 'Go to Adjustments \u2192 Widget limits') }}\n              </button>\n              <button mat-flat-button type=\"button\" data-testid=\"switch-blocked-widgets-auto-height\" (click)=\"switchBlockedWidgetsToAutoHeight()\">\n                <mat-icon aria-hidden=\"true\">height</mat-icon>{{ tx('editor.limits.switchToAutoHeightAction', 'Switch affected widgets to Automatic height') }}\n              </button>\n            </div>\n          }\n          @if (previousAdjustableHeights().length) {\n            <div class=\"previous-heights-summary\" data-testid=\"previous-adjustable-heights-summary\">\n              <span>{{ tx('editor.limits.previousHeightsSummary', 'Previous adjustable heights preserved for reference:') }}</span>\n              @for (prev of previousAdjustableHeights(); track prev.scope + ':' + prev.key) {\n                <span class=\"previous-height-chip\">{{ prev.title }} ({{ prev.scopeLabel }}): <strong>{{ prev.heightPx }}px</strong></span>\n              }\n            </div>\n          }\n        </section>\n      }\n      <mat-tab-group class=\"editor-tabs studio-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"workspaceTab()\" (selectedIndexChange)=\"workspaceTab.set($event)\">\n        <mat-tab [label]=\"tx('studio.visualTab', 'Visual templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-visual\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.visualEyebrow', 'Appearance') }}</span><h2>{{ tx('studio.visualTitle', 'Give the page a visual language') }}</h2><p>{{ tx('studio.visualHelp', 'Choose surfaces, density and chart styling together. Individual widget overrides still take precedence.') }}</p></header>\n            <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!themePresetControl.value\" (click)=\"themePresetControl.setValue('')\">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</button>\n            <p class=\"selection-line\">{{ tx('presets.effectiveTheme', 'Effective page theme') }}: <strong>{{ selectedThemePresetEntry?.label || themePresetControl.value || recommendedThemePresetEntry?.label || tx('presets.hostTheme', 'Host theme') }}</strong></p>\n            <div class=\"studio-gallery\">\n              @for (theme of themePresetEntries; track theme.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"themePresetControl.value === theme.id\" [attr.aria-pressed]=\"themePresetControl.value === theme.id\" [attr.data-theme-preset]=\"theme.id\" (click)=\"themePresetControl.setValue(theme.id)\">\n                  <span class=\"theme-sample\" aria-hidden=\"true\" [style.background]=\"themeTokens(theme.id)['--pdx-page-bg']\" [style.--sample-accent]=\"themeTokens(theme.id)['--pdx-page-accent']\" [style.--sample-surface]=\"themeTokens(theme.id)['--pdx-page-surface']\" [style.--sample-radius]=\"themeTokens(theme.id)['--pdx-page-card-radius']\" [style.--sample-shadow]=\"themeTokens(theme.id)['--pdx-page-card-shadow']\" [style.gap]=\"themeTokens(theme.id)['--pdx-page-gap']\">\n                    <span class=\"sample-metric\"><b>128</b><i></i></span><span class=\"sample-metric\"><b>86%</b><i></i></span><span class=\"sample-chart\"><i></i><i></i><i></i><i></i><i></i></span>\n                  </span>\n                  <span class=\"choice-title\">{{ theme.label }}@if (themePresetControl.value === theme.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.theme.' + theme.id, theme.label) }}</span>\n                  <span class=\"choice-meta\">{{ tx('studio.density.' + theme.density, theme.density) }} \u00B7 {{ shellName(theme.shellPreset) }}</span>\n                </button>\n              }\n            </div>\n            <p class=\"hint\">{{ tx('studio.samplesHelp', 'Illustrative samples using the preset tokens. Apply to see the result with your content.') }}</p>\n            <details class=\"shell-options\"><summary>{{ tx('studio.shellTitle', 'Customize widget surfaces') }} \u00B7 {{ shellPresetEntries.length }}</summary>\n              <p>{{ tx('studio.shellHelp', 'Override the page theme\u2019s default widget surface. Per-widget appearance settings keep their priority.') }}</p>\n              <button mat-stroked-button type=\"button\" [attr.aria-pressed]=\"!shellPresetControl.value\" (click)=\"shellPresetControl.setValue('')\">{{ tx('editor.layout.inheritShell', 'Inherit appearance') }}</button>\n              <div class=\"studio-gallery shell-gallery\">@for (shell of shellPresetEntries; track shell.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"shellPresetControl.value === shell.id\" [attr.aria-pressed]=\"shellPresetControl.value === shell.id\" (click)=\"shellPresetControl.setValue(shell.id)\">\n                  <span class=\"shell-sample\" aria-hidden=\"true\" [style.background]=\"shell.appearance.card?.background\" [style.border-color]=\"shell.appearance.card?.borderColor\" [style.border-radius]=\"shell.appearance.card?.borderRadius\" [style.box-shadow]=\"shell.appearance.card?.shadow\"><span [style.background]=\"shell.appearance.header?.background\" [style.border-color]=\"shell.appearance.header?.borderColor\"><mat-icon>analytics</mat-icon><i></i></span><span [style.background]=\"shell.appearance.body?.background\"><i></i><i></i></span></span>\n                  <span class=\"choice-title\">{{ shellPresetLabel(shell) }}@if (shellPresetControl.value === shell.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span><span class=\"choice-description\">{{ shellDescription(shell) }}</span>\n                </button>\n              }</div>\n            </details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.layoutTab', 'Layout templates')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"studio-layout\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.layoutEyebrow', 'Composition model') }}</span><h2>{{ tx('studio.layoutTitle', 'Choose the structure for your use case') }}</h2><p>{{ tx('studio.layoutHelp', 'Compare the roles and default theme of each model. To redistribute the widgets already on this canvas, open Arrange.') }}</p></header>\n            <div class=\"studio-actions\"><button mat-stroked-button type=\"button\" (click)=\"layoutPresetControl.setValue('')\">{{ tx('studio.inheritLayout', 'Use inherited model') }}</button><button mat-button type=\"button\" (click)=\"workspaceTab.set(2)\">{{ tx('studio.goArrange', 'Arrange existing widgets') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button></div>\n            <praxis-page-preset-comparison [expanded]=\"true\" [layoutId]=\"layoutPresetControl.value\" [layoutPresetOptions]=\"layoutPresetOptions\" [themeId]=\"themePresetControl.value\" [canvas]=\"true\" (choose)=\"layoutPresetControl.setValue($event)\" />\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.arrangeTab', 'Arrange')\"><ng-template matTabContent>\n          <section class=\"studio-panel\" data-testid=\"canvas-arrangement\">\n            <header class=\"studio-heading\"><span class=\"eyebrow\">{{ tx('studio.arrangeEyebrow', 'Existing widgets') }} \u00B7 {{ canvasColumnsControl.value }} {{ tx('editor.layout.cols', 'Columns') }}</span><h2>{{ tx('studio.arrangeTitle', 'Find the right balance of space') }}</h2><p>{{ tx('studio.arrangeHelp', 'Choose a distribution, compare the real positions, then use it in the draft. Widgets keep their reading order and content.') }}</p></header>\n            <div #arrangementFeedback tabindex=\"-1\" class=\"arrangement-feedback\">\n            @if (arrangementPreview(); as preview) {\n              <section class=\"arrangement-review\" aria-live=\"polite\" data-testid=\"arrangement-preview\">\n                <div class=\"review-heading\"><h3>{{ tx('studio.reviewTitle', 'Compare before using') }}</h3><span>{{ preview.keys.length }} {{ tx('studio.changedWidgets', 'widgets change') }}</span></div>\n                <div class=\"canvas-comparison\">\n                  @for (side of ['before', 'after']; track side) {\n                    <figure><figcaption>{{ side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After') }}</figcaption>\n                      <div class=\"canvas-map\" [style.grid-template-columns]=\"'repeat(' + preview.canvas.columns + ', minmax(0, 1fr))'\" [style.grid-template-rows]=\"'repeat(' + previewRowCount(preview.before, preview.canvas) + ', minmax(0, 1fr))'\" role=\"img\" [attr.aria-label]=\"side === 'before' ? tx('studio.before', 'Before') : tx('studio.after', 'After')\">\n                        @for (item of previewItems(side === 'before' ? preview.before : preview.canvas); track item.key) {\n                          <span [style.grid-column]=\"item.col + ' / span ' + item.colSpan\" [style.grid-row]=\"item.row + ' / span ' + item.rowSpan\" [class.changed]=\"preview.keys.includes(item.key)\" [matTooltip]=\"item.label\">{{ item.number }}</span>\n                        }\n                      </div>\n                    </figure>\n                  }\n                </div>\n                <p class=\"hint\">{{ tx('studio.mapHelp', 'Numbered map of your widgets. Positions and spans are to scale; content height is evaluated on the page.') }}</p>\n                <details><summary>{{ tx('studio.widgetDetails', 'Widget positions and sizes') }}</summary><ol class=\"widget-changes\">@for (item of previewItems(preview.canvas); track item.key) {<li><strong>{{ item.label }}</strong><span>{{ tx('studio.before', 'Before') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ preview.before.items[item.key].col }} / {{ preview.before.items[item.key].row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ preview.before.items[item.key].colSpan }} \u00D7 {{ preview.before.items[item.key].rowSpan }}</span><span>{{ tx('studio.after', 'After') }}: {{ tx('editor.arrange.position', 'Column / row') }} {{ item.col }} / {{ item.row }} \u00B7 {{ tx('studio.gridSize', 'Size in columns \u00D7 rows') }} {{ item.colSpan }} \u00D7 {{ item.rowSpan }}</span></li>}</ol></details>\n                <button mat-flat-button type=\"button\" data-testid=\"arrangement-use\" (click)=\"useArrangement()\">{{ tx('editor.arrange.use', 'Use arrangement in draft') }}<mat-icon iconPositionEnd>arrow_forward</mat-icon></button>\n              </section>\n            }\n            @if (arrangementMessage()) {<p class=\"studio-status\" role=\"status\">{{ arrangementMessage() }}</p>}\n            @if (arrangementUndoAvailable()) {<button mat-stroked-button type=\"button\" data-testid=\"arrangement-undo\" (click)=\"undoArrangement()\"><mat-icon>undo</mat-icon>{{ tx('editor.arrange.undo', 'Undo arrangement') }}</button>}\n            </div>\n            <div class=\"studio-gallery arrangement-gallery\">\n              @for (choice of arrangementChoices; track choice.id) {\n                <button type=\"button\" class=\"studio-choice\" [class.selected]=\"arrangementSelection() === choice.id\" [attr.aria-pressed]=\"arrangementSelection() === choice.id\" [disabled]=\"!hasCanvasWidgets || !arrangementFits(choice.id)\" [attr.data-testid]=\"'arrange-' + choice.id\" (click)=\"prepareArrangement(choice.id)\">\n                  <span class=\"distribution-sample\" aria-hidden=\"true\" [style.grid-template-columns]=\"(arrangementFits(choice.id) ? arrangementWidths(choice.id) : choice.weights).join('fr ') + 'fr'\">@for (weight of choice.weights; track $index) {<i>{{ arrangementWidths(choice.id)[$index] }}</i>}@for (weight of choice.weights; track $index) {<i></i>}</span>\n                  <span class=\"choice-title\">{{ tx('editor.arrange.' + choice.id, choice.id) }}@if (arrangementSelection() === choice.id) {<mat-icon aria-hidden=\"true\">check_circle</mat-icon>}</span>\n                  <span class=\"choice-description\">{{ tx('studio.arrange.' + choice.id, choice.id) }}</span>\n                  <span class=\"choice-meta\">{{ arrangementFits(choice.id) ? arrangementWidths(choice.id).join(' + ') : tx('studio.moreColumns', 'Needs more grid columns') }}</span>\n                </button>\n              }\n            </div>\n            @if (!hasCanvasWidgets) {<p role=\"status\">{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>}\n            <details class=\"arrangement-rules\"><summary>{{ tx('studio.rules', 'Scope, devices and locked widgets') }}</summary><p>{{ tx('editor.arrange.help', 'Base canvas, in current reading order. Inheriting devices follow the base; explicit device positions are preserved. Locked positions stay in place.') }}</p><button mat-button type=\"button\" (click)=\"onSelectedTabIndexChange(5)\">{{ tx('studio.goLimits', 'Review widget limits') }}</button></details>\n          </section>\n        </ng-template></mat-tab>\n        <mat-tab [label]=\"tx('studio.settingsTab', 'Adjustments')\">\n          <div class=\"studio-panel\"><mat-tab-group class=\"editor-tabs\" [mat-stretch-tabs]=\"false\" [selectedIndex]=\"selectedTabIndex\" (selectedIndexChange)=\"selectDetailTab($event)\">\n            <mat-tab [label]=\"tx('editor.tabs.layout', 'Layout')\"><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"canvasColumnsControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"canvasRowUnitControl\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"canvasGapControl\" /></mat-form-field><mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"paddingInlineControl\" placeholder=\"24px\" /><button praxisIconButton=\"help_outline\" size=\"dense\" matSuffix type=\"button\" [matTooltip]=\"tx('editor.hints.paddingInline', 'Shared space beside all page widgets. Use a CSS length or theme token; 0px removes it. Leave empty to inherit the host theme.')\" [attr.aria-label]=\"tx('editor.layout.paddingInline', 'Page side inset')\"></button></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"canvasAutoRowsControl\"><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field></div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.grouping', 'Grouping')\"><div class=\"panel\">\n          <p class=\"hint\" data-testid=\"canvas-grouping-notice\">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class=\"head\"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type=\"button\" (click)=\"addGroupingNode()\"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class=\"card\" [formGroup]=\"group\"><div class=\"head\"><span>{{ groupLabel($index) }}</span><button praxisIconButton=\"delete\" size=\"compact\" type=\"button\" [attr.aria-label]=\"tx('editor.grouping.removeAria', 'Remove group')\" (click)=\"removeGroupingNode($index)\"></button></div><div class=\"grid\"><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName=\"kind\"><mat-option value=\"section\">section</mat-option><mat-option value=\"tabs\">tabs</mat-option><mat-option value=\"hero\">hero</mat-option><mat-option value=\"rail\">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName=\"id\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName=\"label\" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName=\"layout\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"stack\">stack</mat-option><mat-option value=\"grid\">grid</mat-option><mat-option value=\"row\">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName=\"emphasis\"><mat-option value=\"\">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value=\"high\">high</mat-option><mat-option value=\"medium\">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName=\"side\"><mat-option value=\"left\">left</mat-option><mat-option value=\"right\">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows=\"4\" formControlName=\"tabsJson\"></textarea></mat-form-field>} @else {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName=\"widgetKeysCsv\" /></mat-form-field>}</div></div>}</div></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.devices', 'Device Layouts')\">\n          <div class=\"panel\">\n            <mat-button-toggle-group [value]=\"activeDevice()\" (change)=\"activeDevice.set($event.value)\" [attr.aria-label]=\"tx('editor.devices.target', 'Device to configure')\">\n              @for (device of deviceKeys; track device) {\n                <mat-button-toggle [value]=\"device\">{{ deviceLabels[device] }}</mat-button-toggle>\n              }\n            </mat-button-toggle-group>\n            @for (device of deviceKeys; track device) {\n              @if (activeDevice() === device) {\n                <div class=\"card\">\n                  <div class=\"head\"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type=\"button\" [attr.data-testid]=\"'stack-device-' + device\" [disabled]=\"!hasCanvasWidgets\" (click)=\"stackDevice(device)\"><mat-icon aria-hidden=\"true\">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>\n                  <p class=\"hint\">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>\n                  @if (stackedDevices.has(device)) { <p class=\"hint\" role=\"status\">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type=\"number\" min=\"1\" [formControl]=\"deviceForms[device].controls.columns\" /></mat-form-field>\n                    <mat-form-field class=\"page-inset-field\" appearance=\"outline\"><mat-label>{{ tx('editor.layout.paddingInline', 'Page side inset') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.paddingInline\" placeholder=\"16px\" /></mat-form-field><mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.gap\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]=\"deviceForms[device].controls.autoRows\"><mat-option value=\"\">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value=\"fixed\">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value=\"content\">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>\n                  </div>\n                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class=\"grid\">\n                    <mat-form-field appearance=\"outline\"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]=\"deviceForms[device].controls.rowUnit\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.groupingOverrides\"></textarea></mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows=\"4\" [formControl]=\"deviceForms[device].controls.widgetOverrides\"></textarea><mat-hint>{{ tx('editor.devices.widgetOverridesHelp', 'Supported per-widget properties on this device: className, span, order, and hidden. Does not override internal widget definition or inputs.') }}</mat-hint></mat-form-field>\n                  </div></details>\n                  @if (!stackedDevices.has(device)) { <div class=\"hint\">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }\n                </div>\n              }\n            }\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.context', 'Context')\"><mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows=\"12\" [formControl]=\"contextControl\"></textarea></mat-form-field></mat-tab>\n        <mat-tab [label]=\"tx('editor.tabs.state', 'Page State')\">\n          <div class=\"panel\">\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.stateDefinitionJson', 'Page state (values, schema, derived \u2014 JSON)') }}</mat-label>\n              <textarea matInput rows=\"10\" [formControl]=\"stateControl\" data-testid=\"page-state-json\"></textarea>\n            </mat-form-field>\n\n            <section class=\"panel\" data-testid=\"page-datasources-guided\">\n              <div class=\"head\">\n                <strong>{{ tx('editor.state.dataSourcesTitle', 'Data Sources') }}</strong>\n                <button mat-stroked-button type=\"button\" data-testid=\"page-datasources-add\" (click)=\"addDataSourceNode()\">\n                  <mat-icon>add</mat-icon>{{ tx('editor.state.addDataSource', 'Add data source') }}\n                </button>\n              </div>\n              <p class=\"hint\">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</p>\n              @if (!dataSourceNodes.controls.length) {\n                <p class=\"hint\" data-testid=\"page-datasources-empty\">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</p>\n              }\n              @for (ds of dataSourceNodes.controls; track $index) {\n                <div class=\"card\" [formGroup]=\"ds\" [attr.data-testid]=\"'page-datasource-card-' + $index\">\n                  <div class=\"head\">\n                    <span>{{ dataSourceLabel($index) }}</span>\n                    <button\n                      praxisIconButton=\"delete\"\n                      size=\"compact\"\n                      type=\"button\"\n                      [attr.data-testid]=\"'page-datasource-remove-' + $index\"\n                      [attr.aria-label]=\"tx('editor.state.removeDataSourceAria', 'Remove data source')\"\n                      (click)=\"removeDataSourceNode($index)\"\n                    ></button>\n                  </div>\n                  <div class=\"grid\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>\n                      <input matInput formControlName=\"id\" [attr.data-testid]=\"'page-datasource-id-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>\n                      <mat-select formControlName=\"kind\" [attr.data-testid]=\"'page-datasource-kind-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"remote-resource\">remote-resource</mat-option>\n                        <mat-option value=\"stats-query\">stats-query</mat-option>\n                        <mat-option value=\"raw-http\">raw-http</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>\n                      <input matInput formControlName=\"resourcePath\" [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.endpointKey', 'Endpoint key') }}</mat-label>\n                      <input matInput formControlName=\"endpointKey\" [attr.data-testid]=\"'page-datasource-endpointKey-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>\n                      <mat-select formControlName=\"method\" [attr.data-testid]=\"'page-datasource-method-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.auto', 'Auto') }}</mat-option>\n                        <mat-option value=\"GET\">GET</mat-option>\n                        <mat-option value=\"POST\">POST</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>\n                      <input matInput formControlName=\"targetStatePath\" [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>\n                      <mat-select formControlName=\"errorPolicy\" [attr.data-testid]=\"'page-datasource-errorPolicy-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"propagate\">propagate</mat-option>\n                        <mat-option value=\"silent\">silent</mat-option>\n                        <mat-option value=\"fallback\">fallback</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.refreshIntervalMs', 'Refresh interval (ms)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"0\" formControlName=\"refreshIntervalMs\" [attr.data-testid]=\"'page-datasource-refreshIntervalMs-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('editor.state.autoFetch', 'Auto fetch') }}</mat-label>\n                      <mat-select formControlName=\"autoFetch\" [attr.data-testid]=\"'page-datasource-autoFetch-' + $index\">\n                        <mat-option value=\"\">{{ tx('editor.common.default', 'Default') }}</mat-option>\n                        <mat-option value=\"true\">true</mat-option>\n                        <mat-option value=\"false\">false</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>\n                      <input matInput formControlName=\"description\" [attr.data-testid]=\"'page-datasource-description-' + $index\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"queryJson\" [attr.data-testid]=\"'page-datasource-queryJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"3\" formControlName=\"transformJson\" [attr.data-testid]=\"'page-datasource-transformJson-' + $index\"></textarea>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" class=\"wide\">\n                      <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>\n                      <textarea matInput rows=\"2\" formControlName=\"fallbackJson\" [attr.data-testid]=\"'page-datasource-fallbackJson-' + $index\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              }\n            </section>\n\n            <mat-form-field appearance=\"outline\" class=\"wide\">\n              <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>\n              <textarea matInput rows=\"8\" [formControl]=\"dataSourcesControl\" [placeholder]=\"tx('editor.hints.dataSourcesExample', '')\" data-testid=\"page-datasources-json\"></textarea>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab [label]=\"tx('editor.limits.tab', 'Widget limits')\">\n          <section class=\"limits-panel\" data-testid=\"canvas-limits-editor\">\n      @if (workspaceTab() === 3 && activeTab() === 'limits' && canvasLimits.targets.length) {\n        <div class=\"selection-identity\" tabindex=\"-1\" data-testid=\"canvas-limits-identity\">\n          <mat-icon aria-hidden=\"true\">dashboard_customize</mat-icon>\n          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>\n        </div>\n      }\n\n            <p class=\"hint\" id=\"canvas-limits-help\">{{ tx('editor.limits.help', 'Limits use grid columns and rows, not pixels. Leave blank for defaults, or to inherit the base limits on a device.') }}</p>\n            @if (canvasLimits.targets.length) {\n              <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                <mat-label>{{ tx('editor.limits.target', 'Widget and layout') }}</mat-label>\n                <mat-select [formControl]=\"limitsTargetControl\" data-testid=\"canvas-limits-target\">\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">{{ limitsTargetLabel(index) }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <p class=\"hint\">{{ limitsGeometryLabel() }}</p>\n              @if (canvasLimits.form.controls[limitsTargetControl.value]; as limitsForm) {\n                <div class=\"limits-fields\" aria-describedby=\"canvas-limits-help\">\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minColSpan', 'Minimum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minColSpan\" data-testid=\"canvas-limit-minColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxColSpan', 'Maximum width (columns)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxColSpan\" data-testid=\"canvas-limit-maxColSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxColSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.minRowSpan', 'Minimum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.minRowSpan\" data-testid=\"canvas-limit-minRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.minRowSpan) }}</mat-error>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                    <mat-label>{{ tx('editor.limits.maxRowSpan', 'Maximum height (rows)') }}</mat-label>\n                    <input matInput [errorStateMatcher]=\"limitsErrorMatcher\" type=\"number\" min=\"1\" step=\"1\" [formControl]=\"limitsForm.controls.maxRowSpan\" data-testid=\"canvas-limit-maxRowSpan\">\n                    <mat-error>{{ limitFieldError(limitsForm.controls.maxRowSpan) }}</mat-error>\n                  </mat-form-field>\n                </div>\n                @if (limitsUseContentHeight()) {\n                  <p class=\"limits-notice\"><mat-icon aria-hidden=\"true\">height</mat-icon><span>{{ tx('editor.limits.autoHeight', 'Choose natural height or an adjustable height with internal scrolling.') }}</span></p>\n                  <mat-button-toggle-group class=\"height-modes\" [formControl]=\"limitsForm.controls.heightMode\" [attr.aria-label]=\"tx('editor.height.mode', 'Widget height')\" data-testid=\"canvas-height-mode\">\n                    <mat-button-toggle value=\"inherit\">{{ tx('editor.height.inherit', 'Default') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"auto\">{{ tx('editor.height.auto', 'Automatic') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"fixed\">{{ tx('editor.height.fixed', 'Adjustable') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                  @if (limitsForm.controls.heightMode.value === 'fixed') {\n                    <div class=\"limits-fields\">\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.value', 'Height (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.heightPx\" data-testid=\"canvas-height-px\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.heightPx) }}</mat-error>\n                      </mat-form-field>\n                      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                        <mat-label>{{ tx('editor.height.top', 'Top inset (px)') }}</mat-label>\n                        <input matInput type=\"number\" min=\"0\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.offsetTopPx\" data-testid=\"canvas-height-top\">\n                        <mat-error>{{ limitFieldError(limitsForm.controls.offsetTopPx) }}</mat-error>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div class=\"limits-fields\">\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.min', 'Minimum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.minHeightPx\" data-testid=\"canvas-limit-minHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.minHeightPx) }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n                      <mat-label>{{ tx('editor.height.max', 'Maximum height (px)') }}</mat-label>\n                      <input matInput type=\"number\" min=\"160\" step=\"1\" [errorStateMatcher]=\"limitsErrorMatcher\" [formControl]=\"limitsForm.controls.maxHeightPx\" data-testid=\"canvas-limit-maxHeightPx\">\n                      <mat-error>{{ limitFieldError(limitsForm.controls.maxHeightPx) }}</mat-error>\n                    </mat-form-field>\n                  </div>\n                }\n              }\n              @if (limitsSummaryError) { <p class=\"limits-error\" role=\"alert\">{{ limitsSummaryError }}</p> }\n            } @else {\n              <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>\n            }\n          </section>\n        </mat-tab>\n          </mat-tab-group></div>\n        </mat-tab>\n      </mat-tab-group>\n      <details class=\"summary-details\">\n      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>\n      <div class=\"summary\">\n        @if (!isHostedInSettingsPanel) {\n          <span>{{ validationStateLabel }}</span>\n          <span>{{ dirtyStateLabel }}</span>\n        }\n        <span>{{ selectedLayoutPresetLabel }}</span>\n        <span>{{ selectedThemePresetLabel }}</span>\n        <span>{{ canvasSummaryLabel }}</span>\n      </div>\n      </details>\n    </div>\n", styles: [".page-inset-field{grid-column:1/-1;min-width:0}:host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.limits-blocking-banner{border-color:var(--md-sys-color-error, #b3261e);gap:8px}.blocked-widgets-list{margin:0;padding-inline-start:20px;display:grid;gap:4px}.previous-heights-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:var(--mat-sys-body-small, inherit);color:var(--md-sys-color-on-surface-variant, currentColor)}.previous-height-chip{padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14))}.wide{grid-column:1/-1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}:host{container-type:inline-size}.studio-panel{display:grid;gap:var(--p-space-4, 16px);padding-block:var(--p-space-5, 20px);min-width:0}.studio-heading h2{font-size:var(--p-font-size-lg, 20px);line-height:1.25;margin:var(--p-space-2, 8px) 0;font-weight:600}.studio-heading p{margin:0;color:var(--md-sys-color-on-surface-variant);line-height:1.5}.studio-panel h3{font-size:var(--p-font-size-md, 16px);margin:0}.studio-panel>button{justify-self:start}.studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.studio-choice{display:flex;flex-direction:column;gap:var(--p-space-2, 8px);min-width:0;padding:var(--p-space-3, 12px);text-align:start;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--p-radius-lg, 12px);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit;cursor:pointer;transition:border-color var(--md-sys-motion-duration-short2, .1s),background-color var(--md-sys-motion-duration-short2, .1s)}.studio-choice:hover:not(:disabled){border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice.selected{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low)}.studio-choice:focus-visible,.studio-panel summary:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:3px}.studio-choice:disabled{opacity:var(--p-disabled-opacity, .5);cursor:not-allowed}.choice-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-space-2, 8px);width:100%;font-weight:600;line-height:1.35}.choice-title mat-icon{color:var(--md-sys-color-primary);flex-shrink:0;font-size:20px;height:20px;width:20px}.choice-description{font-size:var(--p-font-size-sm, 13px);line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.choice-meta{font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-surface-variant);margin-top:auto;padding-top:var(--p-space-1, 4px)}.theme-sample{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--p-space-3, 12px);border-radius:var(--p-radius-md, 8px);min-height:128px;align-self:stretch;margin-bottom:var(--p-space-1, 4px)}.sample-metric,.sample-chart{background:var(--sample-surface);border-radius:var(--sample-radius);box-shadow:var(--sample-shadow);padding:var(--p-space-2, 8px)}.sample-metric b{display:block;font-size:var(--p-font-size-md, 16px)}.sample-metric i{display:block;height:3px;width:55%;margin-top:var(--p-space-1, 4px);background:var(--sample-accent)}.sample-chart{grid-column:1/-1;display:flex;height:40px;align-items:flex-end;gap:var(--p-space-2, 8px)}.sample-chart i{flex:1;background:var(--sample-accent);height:50%;border-radius:var(--p-radius-xs, 2px)}.sample-chart i:nth-child(2){height:85%}.sample-chart i:nth-child(3){height:65%}.sample-chart i:nth-child(4){height:100%}.sample-chart i:nth-child(5){height:75%}.shell-options,.arrangement-rules{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--p-space-3, 12px)}.studio-panel summary{cursor:pointer;font-weight:500;line-height:1.5;padding-block:var(--p-space-2, 8px)}.shell-gallery{margin-top:var(--p-space-4, 16px)}.shell-sample{display:block;align-self:stretch;border:1px solid;overflow:hidden;margin:var(--p-space-2, 8px)}.shell-sample>span{display:flex;gap:var(--p-space-2, 8px);align-items:center;padding:var(--p-space-2, 8px);border-bottom:1px solid transparent}.shell-sample i{height:4px;width:60%;background:var(--md-sys-color-on-surface-variant);opacity:.4}.shell-sample>span:last-child{min-height:30px;flex-direction:column;align-items:flex-start}.shell-sample>span:last-child i:last-child{width:40%}.selection-line{margin:0;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-space-2, 8px)}.distribution-sample{display:grid;grid-template-rows:repeat(2,1fr);gap:var(--p-space-1, 4px);align-self:stretch;height:76px;padding:var(--p-space-2, 8px);background:var(--md-sys-color-surface-container);border-radius:var(--p-radius-md, 8px)}.distribution-sample i{display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-radius:var(--p-radius-sm, 4px);font-size:var(--p-font-size-xs, 12px);font-style:normal}.distribution-sample i:nth-child(n+4){opacity:.65}.selected .distribution-sample i{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.arrangement-review{display:grid;gap:var(--p-space-3, 12px);padding-block:var(--p-space-4, 16px);border-top:2px solid var(--md-sys-color-primary)}.review-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--p-space-2, 8px)}.review-heading>span{font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-primary)}.canvas-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-space-3, 12px)}.canvas-comparison figure{margin:0;min-width:0}.canvas-comparison figcaption{font-weight:500;margin-bottom:var(--p-space-2, 8px)}.canvas-map{display:grid;gap:2px;height:220px;padding:var(--p-space-2, 8px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);border-radius:var(--p-radius-md, 8px)}.canvas-map span{display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;font-size:var(--p-font-size-xs, 12px);color:var(--md-sys-color-on-secondary-container);background:var(--md-sys-color-secondary-container);border-radius:var(--p-radius-xs, 2px)}.canvas-map .changed{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.widget-changes{padding-inline-start:var(--p-space-5, 20px);margin:0}.widget-changes li{padding-block:var(--p-space-2, 8px);overflow-wrap:anywhere}.widget-changes span{display:block;font-size:var(--p-font-size-sm, 13px);color:var(--md-sys-color-on-surface-variant)}.studio-status{border-inline-start:3px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);padding:var(--p-space-3, 12px);margin:0;line-height:1.5}@container (max-width:420px){.studio-gallery{grid-template-columns:minmax(0,1fr)}.canvas-map{height:180px}}@media(prefers-reduced-motion:reduce){.studio-choice{transition:none}}.arrangement-feedback:empty{display:none}.arrangement-feedback:focus{outline:none}.arrangement-feedback:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}@container (min-width:620px){.arrangement-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}:host ::ng-deep .studio-tabs>.mat-mdc-tab-header .mdc-tab{flex:1 1 0;padding-inline:var(--p-space-1, 4px)}.arrangement-feedback{scroll-margin-block-start:var(--p-space-16, 64px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{
                 type: Input
             }], layout: [{
@@ -15064,7 +15421,9 @@ class PageConfigEditorComponent {
         this.patchDeviceLayoutForm(this.deviceTabletForm, deviceLayouts?.tablet);
         this.patchDeviceLayoutForm(this.deviceMobileForm, deviceLayouts?.mobile);
     }
+    deviceOverridesError = null;
     buildDeviceLayouts() {
+        this.deviceOverridesError = null;
         const current = this.currentPageInput()?.deviceLayouts;
         const desktop = this.buildDeviceLayoutVariant(this.deviceDesktopForm, current?.desktop);
         const tablet = this.buildDeviceLayoutVariant(this.deviceTabletForm, current?.tablet);
@@ -15111,6 +15470,30 @@ class PageConfigEditorComponent {
         const widgetOverrides = this.parseJson(form.controls.widgetOverridesJson.value, {});
         if (breakpoints === null || groupingOverrides === null || widgetOverrides === null)
             return null;
+        if (Array.isArray(widgetOverrides) || typeof widgetOverrides !== 'object')
+            return null;
+        const allowedKeys = new Set(['className', 'span', 'order', 'hidden']);
+        for (const [widgetKey, item] of Object.entries(widgetOverrides)) {
+            if (!item || typeof item !== 'object' || Array.isArray(item))
+                return null;
+            const rec = item;
+            for (const prop of Object.keys(rec)) {
+                if (!allowedKeys.has(prop)) {
+                    this.deviceOverridesError = this.tx('editor.errors.widgetOverridesUnsupportedProperty', 'Invalid override for widget "{{widgetKey}}": property "{{property}}" is not supported in widgetOverrides. Allowed per-device properties: className, span, order, hidden. To configure internal card or rich-content layout, use responsive settings on the widget itself.')
+                        .replace('{{widgetKey}}', widgetKey)
+                        .replace('{{property}}', prop);
+                    return null;
+                }
+            }
+            if (rec['className'] !== undefined && typeof rec['className'] !== 'string')
+                return null;
+            if (rec['span'] !== undefined && (typeof rec['span'] !== 'number' || !Number.isFinite(rec['span'])))
+                return null;
+            if (rec['order'] !== undefined && (typeof rec['order'] !== 'number' || !Number.isFinite(rec['order'])))
+                return null;
+            if (rec['hidden'] !== undefined && typeof rec['hidden'] !== 'boolean')
+                return null;
+        }
         const layout = { ...(current?.layout || {}) };
         delete layout.orientation;
         delete layout.columns;
@@ -15175,7 +15558,7 @@ class PageConfigEditorComponent {
         if (typeof dataSources === 'object') {
             return Object.entries(dataSources).map(([id, def]) => ({
                 ...def,
-                id: def?.id || id,
+                id: typeof def?.id === 'string' && def.id.trim().length > 0 ? def.id.trim() : id.trim(),
             }));
         }
         return [];
@@ -15222,39 +15605,97 @@ class PageConfigEditorComponent {
         this.lastDataSources = json;
         this.dataSourcesControl.setValue(json, { emitEvent: false });
     }
+    isPlainRecord(value) {
+        return !!value && typeof value === 'object' && !Array.isArray(value);
+    }
+    isValidDataSourceTransform(value) {
+        if (!this.isPlainRecord(value) || !Object.keys(value).length)
+            return false;
+        if ('kind' in value) {
+            const kind = value['kind'];
+            if (kind === 'path') {
+                return typeof value['path'] === 'string' && value['path'].trim().length > 0;
+            }
+            if (kind === 'group-by-map') {
+                return (this.isPlainRecord(value['mappings'])
+                    && Object.values(value['mappings']).every((target) => typeof target === 'string' && target.trim().length > 0)
+                    && (value['totalField'] === undefined || (typeof value['totalField'] === 'string' && value['totalField'].trim().length > 0)));
+            }
+            if (kind === 'timeseries-last') {
+                return (this.isPlainRecord(value['mappings'])
+                    && Object.values(value['mappings']).every((target) => typeof target === 'string' && target.trim().length > 0));
+            }
+            return false;
+        }
+        return true;
+    }
+    validateDataSourceEntry(item, fallbackId) {
+        if (!this.isPlainRecord(item))
+            return null;
+        if (item['id'] !== undefined && (typeof item['id'] !== 'string' || !item['id'].trim().length)) {
+            return null;
+        }
+        const effectiveId = typeof item['id'] === 'string' ? item['id'].trim() : (fallbackId?.trim() || '');
+        if (!effectiveId)
+            return null;
+        if (typeof item['resourcePath'] !== 'string' || !item['resourcePath'].trim().length) {
+            return null;
+        }
+        if (item['kind'] !== undefined && !['remote-resource', 'stats-query', 'raw-http'].includes(item['kind'])) {
+            return null;
+        }
+        if (item['method'] !== undefined && !['GET', 'POST'].includes(item['method'])) {
+            return null;
+        }
+        if (item['errorPolicy'] !== undefined && !['propagate', 'silent', 'fallback'].includes(item['errorPolicy'])) {
+            return null;
+        }
+        if (item['refreshIntervalMs'] !== undefined
+            && (typeof item['refreshIntervalMs'] !== 'number' || !Number.isFinite(item['refreshIntervalMs']) || item['refreshIntervalMs'] < 0)) {
+            return null;
+        }
+        if (item['autoFetch'] !== undefined && typeof item['autoFetch'] !== 'boolean') {
+            return null;
+        }
+        if (item['endpointKey'] !== undefined && typeof item['endpointKey'] !== 'string') {
+            return null;
+        }
+        if (item['targetStatePath'] !== undefined && typeof item['targetStatePath'] !== 'string') {
+            return null;
+        }
+        if (item['description'] !== undefined && typeof item['description'] !== 'string') {
+            return null;
+        }
+        if (item['query'] !== undefined && !this.isPlainRecord(item['query'])) {
+            return null;
+        }
+        if (item['transform'] !== undefined && !this.isValidDataSourceTransform(item['transform'])) {
+            return null;
+        }
+        return effectiveId;
+    }
     isValidDataSourcesPayload(parsed) {
         if (!parsed || typeof parsed !== 'object')
             return false;
-        const isValidRefreshInterval = (val) => val === undefined ||
-            (typeof val === 'number' && Number.isFinite(val) && val >= 0);
+        const seenIds = new Set();
         if (Array.isArray(parsed)) {
-            const seenIds = new Set();
             for (const item of parsed) {
-                if (!item ||
-                    typeof item !== 'object' ||
-                    Array.isArray(item) ||
-                    typeof item.id !== 'string' ||
-                    !item.id.trim().length ||
-                    typeof item.resourcePath !== 'string' ||
-                    !item.resourcePath.trim().length ||
-                    !isValidRefreshInterval(item.refreshIntervalMs)) {
-                    return false;
-                }
-                const trimmedId = item.id.trim();
-                if (seenIds.has(trimmedId)) {
+                const id = this.validateDataSourceEntry(item);
+                if (!id || seenIds.has(id))
                     return false;
-                }
-                seenIds.add(trimmedId);
+                seenIds.add(id);
             }
             return true;
         }
-        return Object.entries(parsed).every(([id, item]) => id.trim().length > 0 &&
-            !!item &&
-            typeof item === 'object' &&
-            !Array.isArray(item) &&
-            typeof item.resourcePath === 'string' &&
-            item.resourcePath.trim().length > 0 &&
-            isValidRefreshInterval(item.refreshIntervalMs));
+        for (const [key, item] of Object.entries(parsed)) {
+            if (!key.trim().length)
+                return false;
+            const id = this.validateDataSourceEntry(item, key);
+            if (!id || seenIds.has(id))
+                return false;
+            seenIds.add(id);
+        }
+        return true;
     }
     buildDataSourcesFromNodes() {
         const list = [];
@@ -15277,6 +15718,12 @@ class PageConfigEditorComponent {
             const transformRaw = group.controls.transformJson.value.trim();
             const fallbackRaw = group.controls.fallbackJson.value.trim();
             const description = group.controls.description.value.trim();
+            if (kind && !['remote-resource', 'stats-query', 'raw-http'].includes(kind))
+                return null;
+            if (method && !['GET', 'POST'].includes(method))
+                return null;
+            if (errorPolicy && !['propagate', 'silent', 'fallback'].includes(errorPolicy))
+                return null;
             if (kind)
                 node.kind = kind;
             if (endpointKey)
@@ -15302,13 +15749,13 @@ class PageConfigEditorComponent {
                 node.autoFetch = false;
             if (queryRaw) {
                 const parsedQuery = this.parseJson(queryRaw, {});
-                if (parsedQuery === null || typeof parsedQuery !== 'object' || Array.isArray(parsedQuery))
+                if (!this.isPlainRecord(parsedQuery))
                     return null;
                 node.query = parsedQuery;
             }
             if (transformRaw) {
-                const parsedTransform = this.parseJson(transformRaw, {});
-                if (parsedTransform === null)
+                const parsedTransform = this.parseJson(transformRaw, null);
+                if (!this.isValidDataSourceTransform(parsedTransform))
                     return null;
                 node.transform = parsedTransform;
             }
@@ -15578,7 +16025,9 @@ class PageConfigEditorComponent {
         }
         if (grouping === null || deviceLayouts === null) {
             if (reportErrors) {
-                this.layoutError.set(this.tx('editor.errors.invalidJson', 'Invalid JSON'));
+                this.layoutError.set(deviceLayouts === null && this.deviceOverridesError
+                    ? this.deviceOverridesError
+                    : this.tx('editor.errors.invalidJson', 'Invalid JSON'));
                 this.activeTab.set(grouping === null ? 'grouping' : 'devices');
             }
             return null;
@@ -15587,7 +16036,7 @@ class PageConfigEditorComponent {
             if (reportErrors) {
                 this.stateError.set(state === null
                     ? this.tx('editor.errors.invalidJson', 'Invalid JSON')
-                    : this.tx('dataSourcesInvalid', 'Fontes de dados inválidas'));
+                    : this.tx('editor.errors.dataSourcesInvalid', 'Invalid data sources'));
                 this.activeTab.set('state');
             }
             return null;