@praxisui/rich-content 9.0.0-beta.6 → 9.0.0-beta.8

package/fesm2022/praxisui-rich-content.mjs

@@ -13,15 +13,32 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.subtitle': 'Edit the canonical document consumed by the renderer. The saved payload preserves the remaining widget inputs.',
     'praxis.richContent.editor.valid': 'Valid document',
     'praxis.richContent.editor.invalid': 'Invalid JSON',
+    'praxis.richContent.editor.invalidBadge': 'Invalid',
     'praxis.richContent.editor.layout': 'Layout',
     'praxis.richContent.editor.layout.block': 'Block',
     'praxis.richContent.editor.layout.inline': 'Inline',
     'praxis.richContent.editor.rootClass': 'Root class',
     'praxis.richContent.editor.rootClassPlaceholder': 'Example: employee-expansion-rich',
+    'praxis.richContent.editor.workbenchTabs': 'Editor sections',
+    'praxis.richContent.editor.guidedEditing': 'Guided editing',
     'praxis.richContent.editor.document': 'Advanced JSON',
+    'praxis.richContent.editor.documentJson': 'Canonical document JSON',
     'praxis.richContent.editor.documentHelp': 'Edit the canonical RichContentDocument. The inspector validates the shape and renders a preview before apply or save.',
+    'praxis.richContent.editor.documentAdvancedHelp': 'Use JSON for diagnostics, migration and advanced fields that are not yet surfaced by guided controls.',
     'praxis.richContent.editor.blocks': 'Blocks',
     'praxis.richContent.editor.blocksHelp': 'Create and edit common top-level rich-content blocks. Use JSON for advanced nested structures.',
+    'praxis.richContent.editor.structure': 'Document structure',
+    'praxis.richContent.editor.structureHelp': 'Select a block to edit its properties.',
+    'praxis.richContent.editor.properties': 'Properties',
+    'praxis.richContent.editor.propertiesHelp': 'Edit the selected block without leaving the document structure.',
+    'praxis.richContent.editor.intentNavigation': 'Property sections',
+    'praxis.richContent.editor.intent.content': 'Content',
+    'praxis.richContent.editor.intent.contentHelp': 'Primary block fields',
+    'praxis.richContent.editor.intent.presentation': 'Presentation',
+    'praxis.richContent.editor.intent.presentationHelp': 'Visual affordances',
+    'praxis.richContent.editor.intent.dataRules': 'Data and rules',
+    'praxis.richContent.editor.intent.dataRulesHelp': 'Metadata and gates',
+    'praxis.richContent.editor.hasIssues': 'Needs attention',
     'praxis.richContent.editor.block': 'Block',
     'praxis.richContent.editor.blockType': 'Block type',
     'praxis.richContent.editor.addBlock': 'Add block',
@@ -43,6 +60,8 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.cardContentHelp': 'Card content is preserved in JSON. Use advanced JSON for nested card nodes.',
     'praxis.richContent.editor.nodeId': 'Stable id',
     'praxis.richContent.editor.nodeIdPlaceholder': 'Example: hero-title',
+    'praxis.richContent.editor.advancedDataRules': 'Advanced data and rules',
+    'praxis.richContent.editor.advancedDataRulesHelp': 'Metadata, capability gates, visibility and safe style.',
     'praxis.richContent.editor.visibilityRule': 'Visibility rule',
     'praxis.richContent.editor.safeStyle': 'Safe style',
     'praxis.richContent.editor.nodeType.text': 'Text',
@@ -86,10 +105,12 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.field.icon': 'Icon',
     'praxis.richContent.editor.field.ariaLabel': 'Accessible label',
     'praxis.richContent.editor.field.src': 'Image URL',
+    'praxis.richContent.editor.field.srcExpr': 'Image URL binding',
     'praxis.richContent.editor.field.href': 'Link URL',
     'praxis.richContent.editor.field.target': 'Target',
     'praxis.richContent.editor.field.rel': 'Rel',
     'praxis.richContent.editor.field.alt': 'Alternative text',
+    'praxis.richContent.editor.field.altExpr': 'Alt text binding',
     'praxis.richContent.editor.field.testId': 'Test id',
     'praxis.richContent.editor.field.className': 'CSS class',
     'praxis.richContent.editor.field.visibleWhenPath': 'Context path',
@@ -99,8 +120,10 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.field.valueExpr': 'Value binding',
     'praxis.richContent.editor.field.captionExpr': 'Caption binding',
     'praxis.richContent.editor.field.max': 'Maximum',
+    'praxis.richContent.editor.field.showPercent': 'Show percent',
     'praxis.richContent.editor.field.direction': 'Direction',
     'praxis.richContent.editor.field.gap': 'Gap',
+    'praxis.richContent.editor.field.wrap': 'Wrap items',
     'praxis.richContent.editor.field.avatarName': 'Avatar name',
     'praxis.richContent.editor.field.avatarImage': 'Avatar image',
     'praxis.richContent.editor.field.nameExpr': 'Name binding',
@@ -112,6 +135,7 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.field.meta': 'Meta',
     'praxis.richContent.editor.field.opposite': 'Opposite content',
     'praxis.richContent.editor.field.badge': 'Badge',
+    'praxis.richContent.editor.field.badgeExpr': 'Badge binding',
     'praxis.richContent.editor.field.preset': 'Preset',
     'praxis.richContent.editor.field.title': 'Title',
     'praxis.richContent.editor.field.subtitle': 'Subtitle',
@@ -168,11 +192,29 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.field.ctaLabel': 'CTA label',
     'praxis.richContent.editor.field.ctaIcon': 'CTA icon',
     'praxis.richContent.editor.field.size': 'Size',
+    'praxis.richContent.editor.field.density': 'Density',
+    'praxis.richContent.editor.field.loading': 'Loading',
+    'praxis.richContent.editor.field.loadingExpr': 'Loading binding',
+    'praxis.richContent.editor.field.active': 'Active',
+    'praxis.richContent.editor.field.activeExpr': 'Active binding',
     'praxis.richContent.editor.field.mediaKind': 'Media',
     'praxis.richContent.editor.field.mediaSrc': 'Media source',
+    'praxis.richContent.editor.field.mediaSrcExpr': 'Media source binding',
     'praxis.richContent.editor.field.mediaAlt': 'Media alt text',
+    'praxis.richContent.editor.field.mediaAltExpr': 'Media alt binding',
     'praxis.richContent.editor.field.mediaIcon': 'Media icon',
+    'praxis.richContent.editor.field.mediaLabel': 'Media label',
+    'praxis.richContent.editor.field.mediaLabelExpr': 'Media label binding',
+    'praxis.richContent.editor.field.aspectRatio': 'Aspect ratio',
     'praxis.richContent.editor.field.mediaPlacement': 'Media placement',
+    'praxis.richContent.editor.field.interactionMode': 'Interaction mode',
+    'praxis.richContent.editor.field.selected': 'Selected',
+    'praxis.richContent.editor.field.selectedExpr': 'Selected binding',
+    'praxis.richContent.editor.field.interactionActionId': 'Interaction action ID',
+    'praxis.richContent.editor.field.accessibilityRole': 'Accessibility role',
+    'praxis.richContent.editor.field.ariaLabelExpr': 'Accessible label binding',
+    'praxis.richContent.editor.field.requiresCapabilities': 'Capabilities',
+    'praxis.richContent.editor.field.capabilityMode': 'Capability mode',
     'praxis.richContent.editor.decisionGovernance': 'Decision governance',
     'praxis.richContent.editor.decisionEvidence': 'Evidence',
     'praxis.richContent.editor.decisionPrimaryAction': 'Primary action',
@@ -210,6 +252,20 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.placeholder.supersedesExpr': '${decision.supersedes}',
     'praxis.richContent.editor.placeholder.evidenceLabelExpr': '${evidence.label}',
     'praxis.richContent.editor.placeholder.evidenceSourceExpr': '${evidence.source}',
+    'praxis.richContent.editor.placeholder.tabLabelExpr': 'row.tabLabel',
+    'praxis.richContent.editor.placeholder.badgeExpr': 'row.badge',
+    'praxis.richContent.editor.placeholder.requiresCapabilities': 'form.mode.edit, employee.open',
+    'praxis.richContent.editor.placeholder.srcExpr': 'row.imageUrl',
+    'praxis.richContent.editor.placeholder.altExpr': 'row.imageAlt',
+    'praxis.richContent.editor.placeholder.loadingExpr': 'row.loading',
+    'praxis.richContent.editor.placeholder.activeExpr': 'row.active',
+    'praxis.richContent.editor.placeholder.mediaSrcExpr': 'row.mediaUrl',
+    'praxis.richContent.editor.placeholder.mediaAltExpr': 'row.mediaAlt',
+    'praxis.richContent.editor.placeholder.mediaLabelExpr': 'row.mediaLabel',
+    'praxis.richContent.editor.placeholder.aspectRatio': '16 / 9',
+    'praxis.richContent.editor.placeholder.selectedExpr': 'row.selected',
+    'praxis.richContent.editor.placeholder.actionId': 'host.action.open',
+    'praxis.richContent.editor.placeholder.ariaLabelExpr': 'row.ariaLabel',
     'praxis.richContent.editor.cardVariant.outlined': 'Outlined',
     'praxis.richContent.editor.cardVariant.elevated': 'Elevated',
     'praxis.richContent.editor.cardVariant.filled': 'Filled',
@@ -218,8 +274,18 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.size.sm': 'Small',
     'praxis.richContent.editor.size.md': 'Medium',
     'praxis.richContent.editor.size.lg': 'Large',
+    'praxis.richContent.editor.density.compact': 'Compact',
+    'praxis.richContent.editor.density.comfortable': 'Comfortable',
     'praxis.richContent.editor.orientation.vertical': 'Vertical',
     'praxis.richContent.editor.orientation.horizontal': 'Horizontal',
+    'praxis.richContent.editor.interaction.none': 'None',
+    'praxis.richContent.editor.interaction.action': 'Action',
+    'praxis.richContent.editor.interaction.selectable': 'Selectable',
+    'praxis.richContent.editor.accessibilityRole.article': 'Article',
+    'praxis.richContent.editor.accessibilityRole.group': 'Group',
+    'praxis.richContent.editor.accessibilityRole.button': 'Button',
+    'praxis.richContent.editor.capabilityMode.all': 'All',
+    'praxis.richContent.editor.capabilityMode.any': 'Any',
     'praxis.richContent.editor.mediaKind.image': 'Image',
     'praxis.richContent.editor.mediaKind.video': 'Video',
     'praxis.richContent.editor.mediaKind.icon': 'Icon',
@@ -366,6 +432,8 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     'praxis.richContent.editor.nodeTypes': 'Types',
     'praxis.richContent.editor.none': 'None',
     'praxis.richContent.editor.preview': 'Preview',
+    'praxis.richContent.editor.previewHelp': 'Inspect the materialized document without mixing preview with authoring fields.',
+    'praxis.richContent.editor.previewUnavailable': 'Preview is unavailable until the document is valid.',
     'praxis.richContent.editor.restore': 'Restore',
     'praxis.richContent.editor.emptyDocument': 'Empty document',
     'praxis.richContent.editor.validation.documentShape': 'The document must be a valid RichContentDocument.',
@@ -408,15 +476,32 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.subtitle': 'Edite o documento canônico consumido pelo renderer. O payload salvo preserva os demais inputs do widget.',
     'praxis.richContent.editor.valid': 'Documento válido',
     'praxis.richContent.editor.invalid': 'JSON inválido',
+    'praxis.richContent.editor.invalidBadge': 'Inválido',
     'praxis.richContent.editor.layout': 'Layout',
     'praxis.richContent.editor.layout.block': 'Bloco',
     'praxis.richContent.editor.layout.inline': 'Inline',
     'praxis.richContent.editor.rootClass': 'Classe raiz',
     'praxis.richContent.editor.rootClassPlaceholder': 'Exemplo: employee-expansion-rich',
+    'praxis.richContent.editor.workbenchTabs': 'Seções do editor',
+    'praxis.richContent.editor.guidedEditing': 'Edição guiada',
     'praxis.richContent.editor.document': 'JSON avançado',
+    'praxis.richContent.editor.documentJson': 'JSON do documento canônico',
     'praxis.richContent.editor.documentHelp': 'Edite o RichContentDocument canônico. O inspetor valida o formato e renderiza uma prévia antes de aplicar ou salvar.',
+    'praxis.richContent.editor.documentAdvancedHelp': 'Use JSON para diagnóstico, migração e campos avançados que ainda não estão materializados nos controles guiados.',
     'praxis.richContent.editor.blocks': 'Blocos',
     'praxis.richContent.editor.blocksHelp': 'Crie e edite blocos comuns de nível superior de rich-content. Use JSON para estruturas aninhadas avançadas.',
+    'praxis.richContent.editor.structure': 'Estrutura do documento',
+    'praxis.richContent.editor.structureHelp': 'Selecione um bloco para editar suas propriedades.',
+    'praxis.richContent.editor.properties': 'Propriedades',
+    'praxis.richContent.editor.propertiesHelp': 'Edite o bloco selecionado sem sair da estrutura do documento.',
+    'praxis.richContent.editor.intentNavigation': 'Seções de propriedades',
+    'praxis.richContent.editor.intent.content': 'Conteúdo',
+    'praxis.richContent.editor.intent.contentHelp': 'Campos principais do bloco',
+    'praxis.richContent.editor.intent.presentation': 'Apresentação',
+    'praxis.richContent.editor.intent.presentationHelp': 'Affordances visuais',
+    'praxis.richContent.editor.intent.dataRules': 'Dados e regras',
+    'praxis.richContent.editor.intent.dataRulesHelp': 'Metadados e gates',
+    'praxis.richContent.editor.hasIssues': 'Requer atenção',
     'praxis.richContent.editor.block': 'Bloco',
     'praxis.richContent.editor.blockType': 'Tipo de bloco',
     'praxis.richContent.editor.addBlock': 'Adicionar bloco',
@@ -438,6 +523,8 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.cardContentHelp': 'O conteúdo do card é preservado no JSON. Use o JSON avançado para nodes aninhados do card.',
     'praxis.richContent.editor.nodeId': 'Id estável',
     'praxis.richContent.editor.nodeIdPlaceholder': 'Exemplo: hero-title',
+    'praxis.richContent.editor.advancedDataRules': 'Dados e regras avançados',
+    'praxis.richContent.editor.advancedDataRulesHelp': 'Metadados, capability gates, visibilidade e estilo seguro.',
     'praxis.richContent.editor.visibilityRule': 'Regra de visibilidade',
     'praxis.richContent.editor.safeStyle': 'Estilo seguro',
     'praxis.richContent.editor.nodeType.text': 'Texto',
@@ -460,10 +547,12 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.field.icon': 'Ícone',
     'praxis.richContent.editor.field.ariaLabel': 'Label acessível',
     'praxis.richContent.editor.field.src': 'URL da imagem',
+    'praxis.richContent.editor.field.srcExpr': 'Vínculo da URL da imagem',
     'praxis.richContent.editor.field.href': 'URL do link',
     'praxis.richContent.editor.field.target': 'Destino',
     'praxis.richContent.editor.field.rel': 'Rel',
     'praxis.richContent.editor.field.alt': 'Texto alternativo',
+    'praxis.richContent.editor.field.altExpr': 'Vínculo do texto alternativo',
     'praxis.richContent.editor.field.testId': 'Id de teste',
     'praxis.richContent.editor.field.className': 'Classe CSS',
     'praxis.richContent.editor.field.visibleWhenPath': 'Path de contexto',
@@ -473,8 +562,10 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.field.valueExpr': 'Binding do valor',
     'praxis.richContent.editor.field.captionExpr': 'Binding da legenda',
     'praxis.richContent.editor.field.max': 'Máximo',
+    'praxis.richContent.editor.field.showPercent': 'Mostrar percentual',
     'praxis.richContent.editor.field.direction': 'Direção',
     'praxis.richContent.editor.field.gap': 'Espaçamento',
+    'praxis.richContent.editor.field.wrap': 'Quebrar itens',
     'praxis.richContent.editor.field.avatarName': 'Nome do avatar',
     'praxis.richContent.editor.field.avatarImage': 'Imagem do avatar',
     'praxis.richContent.editor.field.nameExpr': 'Vínculo do nome',
@@ -486,16 +577,35 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.field.meta': 'Meta',
     'praxis.richContent.editor.field.opposite': 'Conteúdo oposto',
     'praxis.richContent.editor.field.badge': 'Badge',
+    'praxis.richContent.editor.field.badgeExpr': 'Vínculo do badge',
     'praxis.richContent.editor.field.preset': 'Preset',
     'praxis.richContent.editor.field.title': 'Título',
     'praxis.richContent.editor.field.subtitle': 'Subtítulo',
     'praxis.richContent.editor.field.size': 'Tamanho',
+    'praxis.richContent.editor.field.density': 'Densidade',
+    'praxis.richContent.editor.field.loading': 'Carregando',
+    'praxis.richContent.editor.field.loadingExpr': 'Vínculo de carregamento',
+    'praxis.richContent.editor.field.active': 'Ativo',
+    'praxis.richContent.editor.field.activeExpr': 'Vínculo de ativo',
     'praxis.richContent.editor.field.orientation': 'Orientação',
     'praxis.richContent.editor.field.mediaKind': 'Mídia',
     'praxis.richContent.editor.field.mediaSrc': 'Origem da mídia',
+    'praxis.richContent.editor.field.mediaSrcExpr': 'Vínculo da origem da mídia',
     'praxis.richContent.editor.field.mediaAlt': 'Texto alternativo da mídia',
+    'praxis.richContent.editor.field.mediaAltExpr': 'Vínculo do texto alternativo da mídia',
     'praxis.richContent.editor.field.mediaIcon': 'Ícone da mídia',
+    'praxis.richContent.editor.field.mediaLabel': 'Label da mídia',
+    'praxis.richContent.editor.field.mediaLabelExpr': 'Vínculo do label da mídia',
+    'praxis.richContent.editor.field.aspectRatio': 'Proporção',
     'praxis.richContent.editor.field.mediaPlacement': 'Posição da mídia',
+    'praxis.richContent.editor.field.interactionMode': 'Modo de interação',
+    'praxis.richContent.editor.field.selected': 'Selecionado',
+    'praxis.richContent.editor.field.selectedExpr': 'Vínculo de seleção',
+    'praxis.richContent.editor.field.interactionActionId': 'Action ID da interação',
+    'praxis.richContent.editor.field.accessibilityRole': 'Papel de acessibilidade',
+    'praxis.richContent.editor.field.ariaLabelExpr': 'Vínculo do label acessível',
+    'praxis.richContent.editor.field.requiresCapabilities': 'Capabilities',
+    'praxis.richContent.editor.field.capabilityMode': 'Modo de capability',
     'praxis.richContent.editor.cardVariant.outlined': 'Com contorno',
     'praxis.richContent.editor.cardVariant.elevated': 'Elevado',
     'praxis.richContent.editor.cardVariant.filled': 'Preenchido',
@@ -504,8 +614,18 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.size.sm': 'Pequeno',
     'praxis.richContent.editor.size.md': 'Médio',
     'praxis.richContent.editor.size.lg': 'Grande',
+    'praxis.richContent.editor.density.compact': 'Compacta',
+    'praxis.richContent.editor.density.comfortable': 'Confortável',
     'praxis.richContent.editor.orientation.vertical': 'Vertical',
     'praxis.richContent.editor.orientation.horizontal': 'Horizontal',
+    'praxis.richContent.editor.interaction.none': 'Nenhuma',
+    'praxis.richContent.editor.interaction.action': 'Ação',
+    'praxis.richContent.editor.interaction.selectable': 'Selecionável',
+    'praxis.richContent.editor.accessibilityRole.article': 'Artigo',
+    'praxis.richContent.editor.accessibilityRole.group': 'Grupo',
+    'praxis.richContent.editor.accessibilityRole.button': 'Botão',
+    'praxis.richContent.editor.capabilityMode.all': 'Todas',
+    'praxis.richContent.editor.capabilityMode.any': 'Qualquer',
     'praxis.richContent.editor.mediaKind.image': 'Imagem',
     'praxis.richContent.editor.mediaKind.video': 'Vídeo',
     'praxis.richContent.editor.mediaKind.icon': 'Ícone',
@@ -528,6 +648,20 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.placeholder.valueExpr': 'row.total',
     'praxis.richContent.editor.placeholder.captionExpr': 'row.caption',
     'praxis.richContent.editor.placeholder.progressExpr': 'row.progress',
+    'praxis.richContent.editor.placeholder.tabLabelExpr': 'row.tabLabel',
+    'praxis.richContent.editor.placeholder.badgeExpr': 'row.badge',
+    'praxis.richContent.editor.placeholder.requiresCapabilities': 'form.mode.edit, employee.open',
+    'praxis.richContent.editor.placeholder.srcExpr': 'row.imageUrl',
+    'praxis.richContent.editor.placeholder.altExpr': 'row.imageAlt',
+    'praxis.richContent.editor.placeholder.loadingExpr': 'row.loading',
+    'praxis.richContent.editor.placeholder.activeExpr': 'row.active',
+    'praxis.richContent.editor.placeholder.mediaSrcExpr': 'row.mediaUrl',
+    'praxis.richContent.editor.placeholder.mediaAltExpr': 'row.mediaAlt',
+    'praxis.richContent.editor.placeholder.mediaLabelExpr': 'row.mediaLabel',
+    'praxis.richContent.editor.placeholder.aspectRatio': '16 / 9',
+    'praxis.richContent.editor.placeholder.selectedExpr': 'row.selected',
+    'praxis.richContent.editor.placeholder.actionId': 'host.action.open',
+    'praxis.richContent.editor.placeholder.ariaLabelExpr': 'row.ariaLabel',
     'praxis.richContent.editor.placeholder.nameExpr': 'row.name',
     'praxis.richContent.editor.placeholder.imageSrcExpr': 'row.avatarUrl',
     'praxis.richContent.editor.placeholder.initialsExpr': 'row.initials',
@@ -554,6 +688,8 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     'praxis.richContent.editor.nodeTypes': 'Tipos',
     'praxis.richContent.editor.none': 'Nenhum',
     'praxis.richContent.editor.preview': 'Prévia',
+    'praxis.richContent.editor.previewHelp': 'Inspecione o documento materializado sem misturar prévia com campos de autoria.',
+    'praxis.richContent.editor.previewUnavailable': 'A prévia fica indisponível até que o documento seja válido.',
     'praxis.richContent.editor.restore': 'Restaurar',
     'praxis.richContent.editor.emptyDocument': 'Documento vazio',
     'praxis.richContent.editor.validation.documentShape': 'O documento deve ser um RichContentDocument válido.',
@@ -5763,6 +5899,9 @@ class PraxisRichContentConfigEditor {
     validationIssues = [];
     nodeCount = 0;
     nodeTypeSummary = '';
+    selectedNodeIndex = 0;
+    activeEditorPanel = 'guided';
+    advancedRulesOpen = false;
     initialInputs = this.normalizeInputs(this.inputs);
     pendingRemoval = null;
     ngOnChanges(changes) {
@@ -5815,14 +5954,32 @@ class PraxisRichContentConfigEditor {
         this.parseDocument();
         this.markDirty();
     }
+    selectTopLevelNode(index) {
+        this.selectedNodeIndex = index;
+        this.advancedRulesOpen = false;
+    }
+    selectEditorPanel(panel) {
+        this.activeEditorPanel = panel;
+        this.cdr.markForCheck();
+    }
+    openAdvancedRules() {
+        this.advancedRulesOpen = true;
+        this.cdr.markForCheck();
+    }
+    onAdvancedRulesToggle(event) {
+        const target = event.target;
+        this.advancedRulesOpen = target?.open === true;
+    }
     addTopLevelNode() {
         const document = this.ensureEditableDocument();
         document.nodes.push(this.createDefaultNode(this.newNodeType));
+        this.selectedNodeIndex = document.nodes.length - 1;
         this.syncStructuredDocumentChange();
     }
     removeTopLevelNode(index) {
         const document = this.ensureEditableDocument();
         document.nodes.splice(index, 1);
+        this.reconcileSelectedNodeIndex(document);
         this.syncStructuredDocumentChange();
     }
     moveTopLevelNode(index, delta) {
@@ -5833,6 +5990,17 @@ class PraxisRichContentConfigEditor {
         }
         const [node] = document.nodes.splice(index, 1);
         document.nodes.splice(nextIndex, 0, node);
+        if (this.selectedNodeIndex === index) {
+            this.selectedNodeIndex = nextIndex;
+        }
+        else if (delta < 0 &&
+            this.selectedNodeIndex === nextIndex) {
+            this.selectedNodeIndex = index;
+        }
+        else if (delta > 0 &&
+            this.selectedNodeIndex === nextIndex) {
+            this.selectedNodeIndex = index;
+        }
         this.syncStructuredDocumentChange();
     }
     changeTopLevelNodeType(index, nextType) {
@@ -5945,6 +6113,93 @@ class PraxisRichContentConfigEditor {
         }
         this.syncStructuredDocumentChange();
     }
+    getCardInteractionField(index, field) {
+        const interaction = this.ensureCardNode(index).interaction;
+        const value = interaction?.[field];
+        return typeof value === 'string' ? value : '';
+    }
+    setCardInteractionField(index, field, value) {
+        const card = this.ensureCardNode(index);
+        const normalized = value.trim();
+        if (field === 'mode' && (!normalized || normalized === 'none')) {
+            if (card.interaction) {
+                card.interaction.mode = 'none';
+            }
+            this.pruneEmptyCardInteraction(index);
+            this.syncStructuredDocumentChange();
+            return;
+        }
+        card.interaction ??= { mode: 'none' };
+        const interaction = card.interaction;
+        if (normalized) {
+            interaction[field] = normalized;
+        }
+        else {
+            delete interaction[field];
+        }
+        this.pruneEmptyCardInteraction(index);
+        this.syncStructuredDocumentChange();
+    }
+    getCardInteractionBooleanField(index, field) {
+        const interaction = this.ensureCardNode(index).interaction;
+        return interaction?.[field] === true;
+    }
+    setCardInteractionBooleanField(index, field, value) {
+        const card = this.ensureCardNode(index);
+        card.interaction ??= { mode: 'none' };
+        const interaction = card.interaction;
+        if (value) {
+            interaction[field] = true;
+        }
+        else {
+            delete interaction[field];
+        }
+        this.pruneEmptyCardInteraction(index);
+        this.syncStructuredDocumentChange();
+    }
+    getCardInteractionActionField(index, field) {
+        const action = this.ensureCardNode(index).interaction?.action;
+        return typeof action?.[field] === 'string' ? action[field] : '';
+    }
+    setCardInteractionActionField(index, field, value) {
+        const card = this.ensureCardNode(index);
+        card.interaction ??= { mode: 'action' };
+        card.interaction.action ??= { actionId: '' };
+        const action = card.interaction.action;
+        const normalized = value.trim();
+        if (normalized) {
+            action[field] = value;
+        }
+        else {
+            delete action[field];
+        }
+        if (!card.interaction.action.actionId) {
+            delete card.interaction.action;
+        }
+        this.pruneEmptyCardInteraction(index);
+        this.syncStructuredDocumentChange();
+    }
+    getCardAccessibilityField(index, field) {
+        const accessibility = this.ensureCardNode(index).accessibility;
+        const value = accessibility?.[field];
+        return typeof value === 'string' ? value : '';
+    }
+    setCardAccessibilityField(index, field, value) {
+        const card = this.ensureCardNode(index);
+        const normalized = value.trim();
+        card.accessibility ??= {};
+        const accessibility = card.accessibility;
+        if (normalized) {
+            accessibility[field] = value;
+        }
+        else {
+            delete accessibility[field];
+        }
+        if (!Object.keys(accessibility).length) {
+            delete card.accessibility;
+        }
+        this.syncStructuredDocumentChange();
+    }
     addCardSlotNode(index, slot) {
         this.ensureCardSlotNodes(index, slot).push(createDefaultPresenterNode('text', this.tx.bind(this)));
         this.syncStructuredDocumentChange();
@@ -6244,6 +6499,65 @@ class PraxisRichContentConfigEditor {
         };
         this.syncStructuredDocumentChange();
     }
+    getTabsItemCapabilityList(index, itemIndex) {
+        const item = this.ensureTabsNode(index).items[itemIndex];
+        return Array.isArray(item?.requiresCapabilities)
+            ? item.requiresCapabilities.join(', ')
+            : '';
+    }
+    setTabsItemCapabilityList(index, itemIndex, value) {
+        const node = this.ensureTabsNode(index);
+        const current = node.items[itemIndex] ?? { content: [] };
+        const capabilities = value
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean);
+        node.items[itemIndex] = {
+            ...current,
+            requiresCapabilities: capabilities.length ? capabilities : undefined,
+            content: Array.isArray(current.content) && current.content.length
+                ? current.content
+                : [
+                    {
+                        type: 'text',
+                        text: this.tx('editor.defaultTabText', 'Tab content'),
+                    },
+                ],
+        };
+        this.syncStructuredDocumentChange();
+    }
+    getTabsItemVisibleWhenPath(index, itemIndex) {
+        const item = this.ensureTabsNode(index).items[itemIndex];
+        return parseSimpleVisibleWhen(item?.visibleWhen)?.path ?? '';
+    }
+    getTabsItemVisibleWhenValue(index, itemIndex) {
+        const item = this.ensureTabsNode(index).items[itemIndex];
+        return parseSimpleVisibleWhen(item?.visibleWhen)?.value ?? '';
+    }
+    setTabsItemVisibleWhenPath(index, itemIndex, path) {
+        const item = this.ensureTabsNode(index).items[itemIndex];
+        if (!item)
+            return;
+        this.setTabsItemSimpleVisibleWhen(item, path, this.getTabsItemVisibleWhenValue(index, itemIndex));
+        this.syncStructuredDocumentChange();
+    }
+    setTabsItemVisibleWhenValue(index, itemIndex, value) {
+        const item = this.ensureTabsNode(index).items[itemIndex];
+        if (!item)
+            return;
+        this.setTabsItemSimpleVisibleWhen(item, this.getTabsItemVisibleWhenPath(index, itemIndex), value);
+        this.syncStructuredDocumentChange();
+    }
+    setTabsItemSimpleVisibleWhen(item, path, value) {
+        const trimmedPath = path.trim();
+        if (!trimmedPath) {
+            delete item.visibleWhen;
+            return;
+        }
+        item.visibleWhen = {
+            '===': [{ var: trimmedPath }, parseScalar(value)],
+        };
+    }
     getActionCardSecondaryActions(index) {
         return this.ensureActionCardSecondaryActions(index);
     }
@@ -6610,6 +6924,12 @@ class PraxisRichContentConfigEditor {
             .filter((issue) => issue.path === path || issue.path.startsWith(`${path}.`))
             .map((issue) => this.tx(issue.messageKey, issue.fallback));
     }
+    getIssueCount(path) {
+        return this.validationIssues.filter((issue) => issue.path === path || issue.path.startsWith(`${path}.`)).length;
+    }
+    getSelectedNodeIssueCount() {
+        return this.getIssueCount(`$.nodes[${this.selectedNodeIndex}]`);
+    }
     isEditableNodeType(type) {
         return EDITABLE_TOP_LEVEL_NODE_TYPES.includes(type);
     }
@@ -6667,6 +6987,16 @@ class PraxisRichContentConfigEditor {
         }
         return node;
     }
+    pruneEmptyCardInteraction(index) {
+        const card = this.ensureCardNode(index);
+        const interaction = card.interaction;
+        if (!interaction)
+            return;
+        const hasOnlyNoneMode = Object.keys(interaction).length === 1 && interaction['mode'] === 'none';
+        if (!Object.keys(interaction).length || hasOnlyNoneMode) {
+            delete card.interaction;
+        }
+    }
     ensureCardSlotNodes(index, slot) {
         const card = this.ensureCardNode(index);
         if (!Array.isArray(card[slot])) {
@@ -6972,6 +7302,7 @@ class PraxisRichContentConfigEditor {
             this.errorMessage = '';
             this.isValid$.next(true);
             this.parsedDocument = document;
+            this.reconcileSelectedNodeIndex(document);
             this.updateDocumentOverview(document);
             return document;
         }
@@ -6991,6 +7322,20 @@ class PraxisRichContentConfigEditor {
         this.nodeCount = 0;
         this.nodeTypeSummary = '';
     }
+    reconcileSelectedNodeIndex(document) {
+        const nodeTotal = document.nodes.length;
+        if (!nodeTotal) {
+            this.selectedNodeIndex = 0;
+            return;
+        }
+        if (this.selectedNodeIndex < 0) {
+            this.selectedNodeIndex = 0;
+            return;
+        }
+        if (this.selectedNodeIndex >= nodeTotal) {
+            this.selectedNodeIndex = nodeTotal - 1;
+        }
+    }
     updateDocumentOverview(document) {
         const typeCounts = new Map();
         let count = 0;
@@ -7218,6 +7563,13 @@ class PraxisRichContentConfigEditor {
                 (ngModelChange)="setString('src', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.srcExpr', 'Image URL binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'srcExpr')"
+                (ngModelChange)="setString('srcExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
               <input
@@ -7225,6 +7577,13 @@ class PraxisRichContentConfigEditor {
                 (ngModelChange)="setString('alt', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.altExpr', 'Alt text binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'altExpr')"
+                (ngModelChange)="setString('altExpr', $event)"
+              />
+            </label>
           }
           @case ('link') {
             <label>
@@ -7234,6 +7593,13 @@ class PraxisRichContentConfigEditor {
                 (ngModelChange)="setString('label', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'labelExpr')"
+                (ngModelChange)="setString('labelExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.href', 'Link URL') }}</span>
               <input
@@ -7283,6 +7649,20 @@ class PraxisRichContentConfigEditor {
                 (ngModelChange)="setString('label', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'labelExpr')"
+                (ngModelChange)="setString('labelExpr', $event)"
+              />
+            </label>
+            <label>
+              <span>{{ tx('editor.field.valueExpr', 'Value binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'valueExpr')"
+                (ngModelChange)="setString('valueExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.max', 'Maximum') }}</span>
               <input
@@ -7536,7 +7916,59 @@ class PraxisRichContentConfigEditor {
         </div>
       </ng-template>
 
-      <section class="prx-rich-editor__blocks">
+      <nav
+        class="prx-rich-editor__tabs"
+        [attr.aria-label]="tx('editor.workbenchTabs', 'Editor sections')"
+        role="tablist"
+      >
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'guided'"
+          [attr.aria-selected]="activeEditorPanel === 'guided'"
+          (click)="selectEditorPanel('guided')"
+          data-testid="rich-content-guided-tab"
+        >
+          {{ tx('editor.guidedEditing', 'Guided editing') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'preview'"
+          [attr.aria-selected]="activeEditorPanel === 'preview'"
+          (click)="selectEditorPanel('preview')"
+          data-testid="rich-content-preview-tab"
+        >
+          {{ tx('editor.preview', 'Preview') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'json'"
+          [attr.aria-selected]="activeEditorPanel === 'json'"
+          (click)="selectEditorPanel('json')"
+          data-testid="rich-content-json-tab"
+        >
+          {{ tx('editor.document', 'Advanced JSON') }}
+          @if (!valid || validationIssues.length) {
+            <span class="prx-rich-editor__tab-badge">
+              {{
+                validationIssues.length || tx('editor.invalidBadge', 'Invalid')
+              }}
+            </span>
+          }
+        </button>
+      </nav>
+
+      @if (activeEditorPanel === 'guided') {
+      <section
+        class="prx-rich-editor__blocks"
+        role="tabpanel"
+        [attr.aria-label]="tx('editor.guidedEditing', 'Guided editing')"
+      >
         <header class="prx-rich-editor__section-header">
           <div>
             <h3>{{ tx('editor.blocks', 'Blocks') }}</h3>
@@ -7573,8 +8005,83 @@ class PraxisRichContentConfigEditor {
         </header>
 
         @if (parsedDocument?.nodes?.length) {
+          <div class="prx-rich-editor__authoring-shell">
+            <aside
+              class="prx-rich-editor__structure"
+              [attr.aria-label]="tx('editor.structure', 'Document structure')"
+            >
+              <div class="prx-rich-editor__structure-summary">
+                <strong>{{ tx('editor.structure', 'Document structure') }}</strong>
+                <span>
+                  {{
+                    tx('editor.structureHelp', 'Select a block to edit its properties.')
+                  }}
+                </span>
+              </div>
+              <div class="prx-rich-editor__structure-list">
+                @for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
+                  <button
+                    type="button"
+                    class="prx-rich-editor__structure-item"
+                    [class.prx-rich-editor__structure-item--selected]="selectedNodeIndex === nodeIndex"
+                    [attr.aria-current]="selectedNodeIndex === nodeIndex ? 'true' : null"
+                    (click)="selectTopLevelNode(nodeIndex)"
+                    [attr.data-testid]="'rich-content-node-selector-' + nodeIndex"
+                  >
+                    <span class="prx-rich-editor__node-eyebrow">
+                      {{ tx('editor.block', 'Block') }} {{ nodeIndex + 1 }}
+                    </span>
+                    <strong>{{ tx('editor.nodeType.' + node.type, node.type) }}</strong>
+                    @if (getIssueCount('$.nodes[' + nodeIndex + ']'); as issueCount) {
+                      <small>
+                        {{ tx('editor.hasIssues', 'Needs attention') }}
+                        <span class="prx-rich-editor__issue-count">{{ issueCount }}</span>
+                      </small>
+                    }
+                  </button>
+                }
+              </div>
+            </aside>
+
+            <div class="prx-rich-editor__properties">
+              <header class="prx-rich-editor__section-header">
+                <div>
+                  <h3>{{ tx('editor.properties', 'Properties') }}</h3>
+                  <p>
+                    {{
+                      tx(
+                        'editor.propertiesHelp',
+                        'Edit the selected block without leaving the document structure.'
+                      )
+                    }}
+                  </p>
+                </div>
+              </header>
+              <div
+                class="prx-rich-editor__intent-strip"
+                [attr.aria-label]="tx('editor.intentNavigation', 'Property sections')"
+              >
+                <span>
+                  <strong>{{ tx('editor.intent.content', 'Content') }}</strong>
+                  <small>{{ tx('editor.intent.contentHelp', 'Primary block fields') }}</small>
+                </span>
+                <span>
+                  <strong>{{ tx('editor.intent.presentation', 'Presentation') }}</strong>
+                  <small>{{ tx('editor.intent.presentationHelp', 'Visual affordances') }}</small>
+                </span>
+                <button type="button" (click)="openAdvancedRules()">
+                  <strong>{{ tx('editor.intent.dataRules', 'Data and rules') }}</strong>
+                  <small>{{ tx('editor.intent.dataRulesHelp', 'Metadata and gates') }}</small>
+                  @if (getSelectedNodeIssueCount(); as selectedIssueCount) {
+                    <span class="prx-rich-editor__issue-count">
+                      {{ selectedIssueCount }}
+                    </span>
+                  }
+                </button>
+              </div>
           <div class="prx-rich-editor__node-list">
             @for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
+              @if (selectedNodeIndex === nodeIndex) {
               <article
                 class="prx-rich-editor__node-card"
                 [attr.data-rich-editor-node-type]="node.type"
@@ -7760,22 +8267,38 @@ class PraxisRichContentConfigEditor {
                         />
                       </label>
                     }
-                    @case ('image') {
-                      <label>
-                        <span>{{ tx('editor.field.src', 'Image URL') }}</span>
-                        <input
-                          [ngModel]="getStringField(node, 'src')"
-                          (ngModelChange)="setStringField($index, 'src', $event)"
-                        />
-                      </label>
-                      <label>
-                        <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
-                        <input
-                          [ngModel]="getStringField(node, 'alt')"
-                          (ngModelChange)="setStringField($index, 'alt', $event)"
-                        />
-                      </label>
-                    }
+              @case ('image') {
+                <label>
+                  <span>{{ tx('editor.field.src', 'Image URL') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'src')"
+                    (ngModelChange)="setStringField($index, 'src', $event)"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.srcExpr', 'Image URL binding') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'srcExpr')"
+                    (ngModelChange)="setStringField($index, 'srcExpr', $event)"
+                    [placeholder]="tx('editor.placeholder.srcExpr', 'row.imageUrl')"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'alt')"
+                    (ngModelChange)="setStringField($index, 'alt', $event)"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.altExpr', 'Alt text binding') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'altExpr')"
+                    (ngModelChange)="setStringField($index, 'altExpr', $event)"
+                    [placeholder]="tx('editor.placeholder.altExpr', 'row.imageAlt')"
+                  />
+                </label>
+              }
                     @case ('link') {
                       <label>
                         <span>{{ tx('editor.field.label', 'Label') }}</span>
@@ -7826,6 +8349,14 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setStringField($index, 'label', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'labelExpr')"
+                          (ngModelChange)="setStringField($index, 'labelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.labelExpr', 'row.status')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.valueExpr', 'Value binding') }}</span>
                         <input
@@ -7867,6 +8398,14 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setNumberField($index, 'max', $event)"
                         />
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'showPercent')"
+                          (ngModelChange)="setBooleanField($index, 'showPercent', $event)"
+                        />
+                        <span>{{ tx('editor.field.showPercent', 'Show percent') }}</span>
+                      </label>
               }
               @case ('actionButton') {
                 <label>
@@ -7962,6 +8501,14 @@ class PraxisRichContentConfigEditor {
                           <option value="xl">xl</option>
                         </select>
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'wrap')"
+                          (ngModelChange)="setBooleanField($index, 'wrap', $event)"
+                        />
+                        <span>{{ tx('editor.field.wrap', 'Wrap items') }}</span>
+                      </label>
                       <div class="prx-rich-editor__nested-editor">
                         <header class="prx-rich-editor__nested-header">
                           <h5>{{ tx('editor.composeItems', 'Compose items') }}</h5>
@@ -8019,6 +8566,14 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setStringField($index, 'title', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.titleExpr', 'Title binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'titleExpr')"
+                          (ngModelChange)="setStringField($index, 'titleExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.titleExpr', '\${decision.title}')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.subtitle', 'Subtitle') }}</span>
                         <input
@@ -8026,6 +8581,14 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setStringField($index, 'subtitle', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.subtitleExpr', 'Subtitle binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'subtitleExpr')"
+                          (ngModelChange)="setStringField($index, 'subtitleExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.subtitleExpr', '\${decision.policySource}')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.variant', 'Variant') }}</span>
                         <select
@@ -8063,6 +8626,16 @@ class PraxisRichContentConfigEditor {
                           <option value="lg">{{ tx('editor.size.lg', 'Large') }}</option>
                         </select>
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.density', 'Density') }}</span>
+                        <select
+                          [ngModel]="getStringField(node, 'density') || 'comfortable'"
+                          (ngModelChange)="setStringField($index, 'density', $event)"
+                        >
+                          <option value="comfortable">{{ tx('editor.density.comfortable', 'Comfortable') }}</option>
+                          <option value="compact">{{ tx('editor.density.compact', 'Compact') }}</option>
+                        </select>
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.orientation', 'Orientation') }}</span>
                         <select
@@ -8073,6 +8646,38 @@ class PraxisRichContentConfigEditor {
                           <option value="horizontal">{{ tx('editor.orientation.horizontal', 'Horizontal') }}</option>
                         </select>
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'loading')"
+                          (ngModelChange)="setBooleanField($index, 'loading', $event)"
+                        />
+                        <span>{{ tx('editor.field.loading', 'Loading') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.loadingExpr', 'Loading binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'loadingExpr')"
+                          (ngModelChange)="setStringField($index, 'loadingExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.loadingExpr', 'row.loading')"
+                        />
+                      </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'active')"
+                          (ngModelChange)="setBooleanField($index, 'active', $event)"
+                        />
+                        <span>{{ tx('editor.field.active', 'Active') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.activeExpr', 'Active binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'activeExpr')"
+                          (ngModelChange)="setStringField($index, 'activeExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.activeExpr', 'row.active')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.mediaKind', 'Media') }}</span>
                         <select
@@ -8094,6 +8699,14 @@ class PraxisRichContentConfigEditor {
                             (ngModelChange)="setCardMediaField(nodeIndex, 'src', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaSrcExpr', 'Media source binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'srcExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'srcExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaSrcExpr', 'row.mediaUrl')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaAlt', 'Media alt text') }}</span>
                           <input
@@ -8101,6 +8714,14 @@ class PraxisRichContentConfigEditor {
                             (ngModelChange)="setCardMediaField(nodeIndex, 'alt', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaAltExpr', 'Media alt binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'altExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'altExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaAltExpr', 'row.mediaAlt')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaIcon', 'Media icon') }}</span>
                           <input
@@ -8108,6 +8729,29 @@ class PraxisRichContentConfigEditor {
                             (ngModelChange)="setCardMediaField(nodeIndex, 'icon', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaLabel', 'Media label') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'label')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'label', $event)"
+                          />
+                        </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaLabelExpr', 'Media label binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'labelExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'labelExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaLabelExpr', 'row.mediaLabel')"
+                          />
+                        </label>
+                        <label>
+                          <span>{{ tx('editor.field.aspectRatio', 'Aspect ratio') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'aspectRatio')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'aspectRatio', $event)"
+                            [placeholder]="tx('editor.placeholder.aspectRatio', '16 / 9')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaPlacement', 'Media placement') }}</span>
                           <select
@@ -8121,16 +8765,86 @@ class PraxisRichContentConfigEditor {
                           </select>
                         </label>
                       }
-                      <div class="prx-rich-editor__nested-editor">
-                        <header class="prx-rich-editor__nested-header">
-                          <h5>{{ tx('editor.cardContent', 'Card body') }}</h5>
-                          <button type="button" (click)="addCardContentNode($index)">
-                            {{ tx('editor.addItem', 'Add item') }}
-                          </button>
-                        </header>
-                        @for (item of getCardContentNodes(nodeIndex); track item.id ?? $index; let itemIndex = $index) {
-                          <div class="prx-rich-editor__nested-node">
-                            <div class="prx-rich-editor__nested-actions">
+                      <label>
+                        <span>{{ tx('editor.field.interactionMode', 'Interaction mode') }}</span>
+                        <select
+                          [ngModel]="getCardInteractionField(nodeIndex, 'mode') || 'none'"
+                          (ngModelChange)="setCardInteractionField(nodeIndex, 'mode', $event)"
+                        >
+                          <option value="none">{{ tx('editor.interaction.none', 'None') }}</option>
+                          <option value="action">{{ tx('editor.interaction.action', 'Action') }}</option>
+                          <option value="selectable">{{ tx('editor.interaction.selectable', 'Selectable') }}</option>
+                        </select>
+                      </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getCardInteractionBooleanField(nodeIndex, 'selected')"
+                          (ngModelChange)="setCardInteractionBooleanField(nodeIndex, 'selected', $event)"
+                        />
+                        <span>{{ tx('editor.field.selected', 'Selected') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.selectedExpr', 'Selected binding') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionField(nodeIndex, 'selectedExpr')"
+                          (ngModelChange)="setCardInteractionField(nodeIndex, 'selectedExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.selectedExpr', 'row.selected')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.interactionActionId', 'Interaction action ID') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionActionField(nodeIndex, 'actionId')"
+                          (ngModelChange)="setCardInteractionActionField(nodeIndex, 'actionId', $event)"
+                          [placeholder]="tx('editor.placeholder.actionId', 'host.action.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.payloadExpr', 'Payload binding') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionActionField(nodeIndex, 'payloadExpr')"
+                          (ngModelChange)="setCardInteractionActionField(nodeIndex, 'payloadExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.payloadExpr', 'row')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.accessibilityRole', 'Accessibility role') }}</span>
+                        <select
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'role')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'role', $event)"
+                        >
+                          <option value="">{{ tx('editor.none', 'None') }}</option>
+                          <option value="article">{{ tx('editor.accessibilityRole.article', 'Article') }}</option>
+                          <option value="group">{{ tx('editor.accessibilityRole.group', 'Group') }}</option>
+                          <option value="button">{{ tx('editor.accessibilityRole.button', 'Button') }}</option>
+                        </select>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.ariaLabel', 'Accessible label') }}</span>
+                        <input
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'ariaLabel')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'ariaLabel', $event)"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.ariaLabelExpr', 'Accessible label binding') }}</span>
+                        <input
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'ariaLabelExpr')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'ariaLabelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.ariaLabelExpr', 'row.ariaLabel')"
+                        />
+                      </label>
+                      <div class="prx-rich-editor__nested-editor">
+                        <header class="prx-rich-editor__nested-header">
+                          <h5>{{ tx('editor.cardContent', 'Card body') }}</h5>
+                          <button type="button" (click)="addCardContentNode($index)">
+                            {{ tx('editor.addItem', 'Add item') }}
+                          </button>
+                        </header>
+                        @for (item of getCardContentNodes(nodeIndex); track item.id ?? $index; let itemIndex = $index) {
+                          <div class="prx-rich-editor__nested-node">
+                            <div class="prx-rich-editor__nested-actions">
                               <strong>{{ tx('editor.item', 'Item') }} {{ itemIndex + 1 }}</strong>
                               @if (isRemovalPending('nodes.' + nodeIndex + '.content', itemIndex)) {
                                 <button type="button" (click)="confirmCardContentRemoval(nodeIndex, itemIndex)">
@@ -8566,6 +9280,14 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setTabsItemField(nodeIndex, $index, 'label', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+                        <input
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'labelExpr')"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'labelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.tabLabelExpr', 'row.tabLabel')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.icon', 'Icon') }}</span>
                         <input
@@ -8580,6 +9302,48 @@ class PraxisRichContentConfigEditor {
                           (ngModelChange)="setTabsItemField(nodeIndex, $index, 'badge', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.badgeExpr', 'Badge binding') }}</span>
+                        <input
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'badgeExpr')"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'badgeExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.badgeExpr', 'row.badge')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
+                        <input
+                          [ngModel]="getTabsItemCapabilityList(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemCapabilityList(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
+                        <select
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'capabilityMode') || 'all'"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'capabilityMode', $event)"
+                        >
+                          <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
+                          <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
+                        </select>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
+                        <input
+                          [ngModel]="getTabsItemVisibleWhenPath(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemVisibleWhenPath(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
+                        <input
+                          [ngModel]="getTabsItemVisibleWhenValue(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemVisibleWhenValue(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
+                        />
+                      </label>
                     </div>
                   }
                 </div>
@@ -9970,97 +10734,169 @@ class PraxisRichContentConfigEditor {
                       </p>
                     }
                   }
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.commonMetadata', 'Common metadata') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.testId', 'Test id') }}</span>
-                      <input
-                        [ngModel]="getStringField(node, 'testId')"
-                        (ngModelChange)="setStringField($index, 'testId', $event)"
-                        [placeholder]="tx('editor.placeholder.testId', 'rich-hero-title')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.className', 'CSS class') }}</span>
-                      <input
-                        [ngModel]="getStringField(node, 'className')"
-                        (ngModelChange)="setStringField($index, 'className', $event)"
-                        [placeholder]="tx('editor.placeholder.className', 'hero-title')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
-                      <input
-                        [ngModel]="getCapabilityList(node)"
-                        (ngModelChange)="setCapabilityList($index, $event)"
-                        [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
-                      <select
-                        [ngModel]="getStringField(node, 'capabilityMode') || 'all'"
-                        (ngModelChange)="setStringField($index, 'capabilityMode', $event)"
-                      >
-                        <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
-                        <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
-                      </select>
-                    </label>
-                  </fieldset>
+                  <details
+                    class="prx-rich-editor__advanced-group"
+                    [open]="advancedRulesOpen"
+                    (toggle)="onAdvancedRulesToggle($event)"
+                  >
+                    <summary>
+                      <span>{{ tx('editor.advancedDataRules', 'Advanced data and rules') }}</span>
+                      <small>
+                        {{
+                          tx(
+                            'editor.advancedDataRulesHelp',
+                            'Metadata, capability gates, visibility and safe style.'
+                          )
+                        }}
+                      </small>
+                    </summary>
 
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.visibilityRule', 'Visibility rule') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
-                      <input
-                        [ngModel]="getVisibleWhenPath(node)"
-                        (ngModelChange)="setVisibleWhenPath($index, $event)"
-                        [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
-                      <input
-                        [ngModel]="getVisibleWhenValue(node)"
-                        (ngModelChange)="setVisibleWhenValue($index, $event)"
-                        [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
-                      />
-                    </label>
-                  </fieldset>
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.commonMetadata', 'Common metadata') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.testId', 'Test id') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'testId')"
+                          (ngModelChange)="setStringField($index, 'testId', $event)"
+                          [placeholder]="tx('editor.placeholder.testId', 'rich-hero-title')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.className', 'CSS class') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'className')"
+                          (ngModelChange)="setStringField($index, 'className', $event)"
+                          [placeholder]="tx('editor.placeholder.className', 'hero-title')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
+                        <input
+                          [ngModel]="getCapabilityList(node)"
+                          (ngModelChange)="setCapabilityList($index, $event)"
+                          [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
+                        <select
+                          [ngModel]="getStringField(node, 'capabilityMode') || 'all'"
+                          (ngModelChange)="setStringField($index, 'capabilityMode', $event)"
+                        >
+                          <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
+                          <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
+                        </select>
+                      </label>
+                    </fieldset>
 
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.safeStyle', 'Safe style') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.styleName', 'CSS property') }}</span>
-                      <input
-                        [ngModel]="getFirstStyleName(node)"
-                        (ngModelChange)="setFirstStyleName($index, $event)"
-                        [placeholder]="tx('editor.placeholder.styleName', 'color')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.styleValue', 'CSS value') }}</span>
-                      <input
-                        [ngModel]="getFirstStyleValue(node)"
-                        (ngModelChange)="setFirstStyleValue($index, $event)"
-                        [placeholder]="tx('editor.placeholder.styleValue', 'var(--md-sys-color-primary)')"
-                      />
-                    </label>
-                  </fieldset>
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.visibilityRule', 'Visibility rule') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
+                        <input
+                          [ngModel]="getVisibleWhenPath(node)"
+                          (ngModelChange)="setVisibleWhenPath($index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
+                        <input
+                          [ngModel]="getVisibleWhenValue(node)"
+                          (ngModelChange)="setVisibleWhenValue($index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
+                        />
+                      </label>
+                    </fieldset>
+
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.safeStyle', 'Safe style') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.styleName', 'CSS property') }}</span>
+                        <input
+                          [ngModel]="getFirstStyleName(node)"
+                          (ngModelChange)="setFirstStyleName($index, $event)"
+                          [placeholder]="tx('editor.placeholder.styleName', 'color')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.styleValue', 'CSS value') }}</span>
+                        <input
+                          [ngModel]="getFirstStyleValue(node)"
+                          (ngModelChange)="setFirstStyleValue($index, $event)"
+                          [placeholder]="tx('editor.placeholder.styleValue', 'var(--md-sys-color-primary)')"
+                        />
+                      </label>
+                    </fieldset>
+                  </details>
                 </div>
               </article>
+              }
             }
           </div>
+            </div>
+          </div>
         } @else {
           <p class="prx-rich-editor__empty">
             {{ tx('editor.noBlocks', 'No blocks yet. Add a block to start authoring this document.') }}
           </p>
         }
       </section>
+      }
+
+      @if (activeEditorPanel === 'preview') {
+      <section
+        class="prx-rich-editor__preview-panel"
+        role="tabpanel"
+        [attr.aria-label]="tx('editor.preview', 'Preview')"
+      >
+        <header class="prx-rich-editor__section-header">
+          <div>
+            <h3>{{ tx('editor.preview', 'Preview') }}</h3>
+            <p>
+              {{
+                tx(
+                  'editor.previewHelp',
+                  'Inspect the materialized document without mixing preview with authoring fields.'
+                )
+              }}
+            </p>
+          </div>
+        </header>
+        @if (parsedDocument) {
+          <div class="prx-rich-editor__preview prx-rich-editor__preview--large">
+            <praxis-rich-content
+              [document]="parsedDocument"
+              [layout]="layout"
+              [rootClassName]="rootClassName"
+            ></praxis-rich-content>
+          </div>
+        } @else {
+          <p class="prx-rich-editor__empty">
+            {{ tx('editor.previewUnavailable', 'Preview is unavailable until the document is valid.') }}
+          </p>
+        }
+      </section>
+      }
 
-      <label class="prx-rich-editor__document">
-        <span>{{ tx('editor.document', 'Advanced JSON') }}</span>
+      @if (activeEditorPanel === 'json') {
+      <section class="prx-rich-editor__document-panel">
+        <header class="prx-rich-editor__section-header">
+          <div>
+            <h3>{{ tx('editor.document', 'Advanced JSON') }}</h3>
+            <p>
+              {{
+                tx(
+                  'editor.documentAdvancedHelp',
+                  'Use JSON for diagnostics, migration and advanced fields that are not yet surfaced by guided controls.'
+                )
+              }}
+            </p>
+          </div>
+        </header>
         <div class="prx-rich-editor__workbench">
+          <label class="prx-rich-editor__document">
+            <span>{{ tx('editor.documentJson', 'Canonical document JSON') }}</span>
           <textarea
             name="rich-content-document"
             [(ngModel)]="documentJson"
@@ -10074,6 +10910,7 @@ class PraxisRichContentConfigEditor {
             spellcheck="false"
             data-testid="rich-content-document-input"
           ></textarea>
+          </label>
 
           <aside
             class="prx-rich-editor__inspector"
@@ -10093,21 +10930,9 @@ class PraxisRichContentConfigEditor {
               </dl>
             </section>
 
-            @if (parsedDocument) {
-              <section>
-                <h3>{{ tx('editor.preview', 'Preview') }}</h3>
-                <div class="prx-rich-editor__preview">
-                  <praxis-rich-content
-                    [document]="parsedDocument"
-                    [layout]="layout"
-                    [rootClassName]="rootClassName"
-                  ></praxis-rich-content>
-                </div>
-              </section>
-            }
           </aside>
         </div>
-      </label>
+      </section>
 
       @if (errorMessage) {
         <div
@@ -10137,6 +10962,7 @@ class PraxisRichContentConfigEditor {
           }}
         </p>
       }
+      }
 
       <div class="prx-rich-editor__actions">
         <button type="button" (click)="reset()">
@@ -10147,7 +10973,7 @@ class PraxisRichContentConfigEditor {
         </button>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.prx-rich-editor{display:grid;gap:18px;color:var(--md-sys-color-on-surface, #1f2937)}.prx-rich-editor__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__header h2{margin:0;font-size:1.25rem}.prx-rich-editor__header p{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673)}.prx-rich-editor__eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--md-sys-color-primary, #3154e7)}.prx-rich-editor__status{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,#16a34a 12%,transparent);color:#166534;font-size:.78rem;font-weight:700}.prx-rich-editor__status.invalid{background:color-mix(in srgb,#dc2626 12%,transparent);color:#991b1b}.prx-rich-editor__grid{display:grid;gap:14px;grid-template-columns:minmax(0,180px) minmax(0,1fr)}.prx-rich-editor__blocks{display:grid;gap:14px}.prx-rich-editor__section-header,.prx-rich-editor__node-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__section-header h3,.prx-rich-editor__node-header h4{margin:0}.prx-rich-editor__section-header p,.prx-rich-editor__node-note,.prx-rich-editor__empty{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.88rem}.prx-rich-editor__add-block,.prx-rich-editor__node-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.prx-rich-editor__add-block label{min-width:180px}.prx-rich-editor__node-list{display:grid;gap:12px}.prx-rich-editor__node-card{display:grid;gap:14px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:14px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__node-eyebrow{margin:0 0 4px;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.75rem;font-weight:700;text-transform:uppercase}.prx-rich-editor__node-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__wide-field,.prx-rich-editor__node-note{grid-column:1 / -1}.prx-rich-editor__field-group,.prx-rich-editor__nested-editor,.prx-rich-editor__nested-node{grid-column:1 / -1;display:grid;gap:12px}.prx-rich-editor__field-group,.prx-rich-editor__nested-node{margin:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px}.prx-rich-editor__field-group{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__field-group legend{padding:0 4px;font-weight:700}.prx-rich-editor__nested-header,.prx-rich-editor__nested-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.prx-rich-editor__quick-actions{display:flex;flex-wrap:wrap;gap:8px}.prx-rich-editor__node-grid textarea{min-height:96px;font-family:inherit}label,.prx-rich-editor__document{display:grid;gap:7px;font-weight:700}.prx-rich-editor__checkbox-field{display:flex;gap:10px;align-items:center;align-self:end}.prx-rich-editor__checkbox-field input[type=checkbox]{width:auto}input,select,textarea{box-sizing:border-box;width:100%;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;background:var(--md-sys-color-surface, #fff)}textarea{min-height:360px;resize:vertical;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.86rem;line-height:1.45}.prx-rich-editor__workbench{display:grid;gap:14px;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}.prx-rich-editor__inspector{display:grid;align-content:start;gap:14px;min-width:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__inspector h3{margin:0 0 8px;font-size:.95rem}.prx-rich-editor__inspector dl{display:grid;gap:8px;margin:0}.prx-rich-editor__inspector dl div{display:grid;gap:2px}.prx-rich-editor__inspector dt{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:700}.prx-rich-editor__inspector dd{margin:0;overflow-wrap:anywhere;font-weight:600}.prx-rich-editor__preview{max-height:260px;overflow:auto;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__help{margin:-8px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.85rem}.prx-rich-editor__error{margin:0;padding:10px 12px;border-radius:8px;color:#991b1b;background:color-mix(in srgb,#dc2626 9%,transparent)}.prx-rich-editor__error p{margin:0}.prx-rich-editor__error ul{display:grid;gap:6px;margin:8px 0 0;padding-inline-start:18px}.prx-rich-editor__error code{margin-right:4px;font-family:Cascadia Code,Fira Code,Consolas,monospace}.prx-rich-editor__actions{display:flex;flex-wrap:wrap;gap:10px}button{border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:8px 14px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:760px){.prx-rich-editor__header,.prx-rich-editor__section-header,.prx-rich-editor__node-header,.prx-rich-editor__grid,.prx-rich-editor__field-group,.prx-rich-editor__node-grid,.prx-rich-editor__workbench{grid-template-columns:1fr;display:grid}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-width:0;width:100%;max-width:100%;box-sizing:border-box}.prx-rich-editor{display:grid;gap:18px;min-width:0;color:var(--md-sys-color-on-surface, #1f2937)}.prx-rich-editor__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__header h2{margin:0;font-size:1.25rem}.prx-rich-editor__header p{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673)}.prx-rich-editor__eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--md-sys-color-primary, #3154e7)}.prx-rich-editor__status{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,#16a34a 12%,transparent);color:#166534;font-size:.78rem;font-weight:700}.prx-rich-editor__status.invalid{background:color-mix(in srgb,#dc2626 12%,transparent);color:#991b1b}.prx-rich-editor__grid{display:grid;gap:14px;grid-template-columns:minmax(0,180px) minmax(0,1fr)}.prx-rich-editor__tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--md-sys-color-outline-variant, #d7dce5)}.prx-rich-editor__tab{margin-block-end:-1px;border-radius:8px 8px 0 0;border-bottom-color:transparent;color:var(--md-sys-color-on-surface-variant, #5f6673);background:transparent}.prx-rich-editor__tab--active{border-color:var(--md-sys-color-outline-variant, #d7dce5);border-bottom-color:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__tab-badge,.prx-rich-editor__issue-count{display:inline-flex;min-width:1.35em;min-height:1.35em;padding:0 .38em;border-radius:999px;align-items:center;justify-content:center;background:color-mix(in srgb,#dc2626 14%,transparent);color:#991b1b;font-size:.72rem;font-weight:800;line-height:1}.prx-rich-editor__tab-badge{margin-inline-start:6px}.prx-rich-editor__blocks{display:grid;gap:14px}.prx-rich-editor__authoring-shell{display:grid;gap:14px;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);align-items:start}.prx-rich-editor__structure,.prx-rich-editor__properties,.prx-rich-editor__document-panel,.prx-rich-editor__preview-panel{min-width:0;display:grid;gap:12px}.prx-rich-editor__structure{position:sticky;top:12px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__structure-summary{display:grid;gap:4px}.prx-rich-editor__structure-summary span{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.82rem;font-weight:500}.prx-rich-editor__structure-list{display:grid;gap:8px}.prx-rich-editor__structure-item{display:grid;gap:3px;width:100%;padding:10px;text-align:left;color:var(--md-sys-color-on-surface, #1f2937);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__structure-item--selected{border-color:var(--md-sys-color-primary, #3154e7);background:color-mix(in srgb,var(--md-sys-color-primary, #3154e7) 8%,var(--md-sys-color-surface, #fff))}.prx-rich-editor__structure-item small{color:#991b1b;font-weight:700}.prx-rich-editor__intent-strip{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.prx-rich-editor__intent-strip span,.prx-rich-editor__intent-strip button{min-width:0;display:grid;gap:3px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:10px 12px;text-align:left;color:var(--md-sys-color-on-surface, #1f2937);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__intent-strip button{position:relative}.prx-rich-editor__intent-strip small{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:600}.prx-rich-editor__intent-strip .prx-rich-editor__issue-count{position:absolute;inset-block-start:8px;inset-inline-end:8px}.prx-rich-editor__section-header,.prx-rich-editor__node-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__section-header h3,.prx-rich-editor__node-header h4{margin:0}.prx-rich-editor__section-header p,.prx-rich-editor__node-note,.prx-rich-editor__empty{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.88rem}.prx-rich-editor__add-block,.prx-rich-editor__node-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.prx-rich-editor__add-block label{min-width:180px}.prx-rich-editor__node-list{display:grid;gap:12px}.prx-rich-editor__node-card{display:grid;gap:14px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:14px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__node-eyebrow{margin:0 0 4px;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.75rem;font-weight:700;text-transform:uppercase}.prx-rich-editor__node-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__wide-field,.prx-rich-editor__node-note{grid-column:1 / -1}.prx-rich-editor__field-group,.prx-rich-editor__nested-editor,.prx-rich-editor__nested-node{grid-column:1 / -1;display:grid;gap:12px}.prx-rich-editor__field-group,.prx-rich-editor__nested-node{margin:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px}.prx-rich-editor__field-group{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__field-group legend{padding:0 4px;font-weight:700}.prx-rich-editor__advanced-group{grid-column:1 / -1;display:grid;gap:12px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest, #fff) 88%,var(--md-sys-color-primary, #3154e7) 4%)}.prx-rich-editor__advanced-group summary{display:flex;gap:10px;align-items:center;justify-content:space-between;cursor:pointer;font-weight:800}.prx-rich-editor__advanced-group summary small{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:600}.prx-rich-editor__advanced-group[open]{padding-block-end:14px}.prx-rich-editor__advanced-group[open] summary{margin-block-end:12px}.prx-rich-editor__advanced-group .prx-rich-editor__field-group+.prx-rich-editor__field-group{margin-block-start:12px}.prx-rich-editor__nested-header,.prx-rich-editor__nested-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.prx-rich-editor__quick-actions{display:flex;flex-wrap:wrap;gap:8px}.prx-rich-editor__node-grid textarea{min-height:96px;font-family:inherit}label,.prx-rich-editor__document{display:grid;gap:7px;font-weight:700}.prx-rich-editor__checkbox-field{display:flex;gap:10px;align-items:center;align-self:end}.prx-rich-editor__checkbox-field input[type=checkbox]{width:auto}input,select,textarea{box-sizing:border-box;width:100%;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;background:var(--md-sys-color-surface, #fff)}textarea{min-height:360px;resize:vertical;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.86rem;line-height:1.45}.prx-rich-editor__workbench{display:grid;gap:14px;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}.prx-rich-editor__inspector{display:grid;align-content:start;gap:14px;min-width:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__inspector h3{margin:0 0 8px;font-size:.95rem}.prx-rich-editor__inspector dl{display:grid;gap:8px;margin:0}.prx-rich-editor__inspector dl div{display:grid;gap:2px}.prx-rich-editor__inspector dt{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:700}.prx-rich-editor__inspector dd{margin:0;overflow-wrap:anywhere;font-weight:600}.prx-rich-editor__preview{max-height:260px;overflow:auto;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__preview--large{max-height:min(68vh,760px)}.prx-rich-editor__help{margin:-8px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.85rem}.prx-rich-editor__error{margin:0;padding:10px 12px;border-radius:8px;color:#991b1b;background:color-mix(in srgb,#dc2626 9%,transparent)}.prx-rich-editor__error p{margin:0}.prx-rich-editor__error ul{display:grid;gap:6px;margin:8px 0 0;padding-inline-start:18px}.prx-rich-editor__error code{margin-right:4px;font-family:Cascadia Code,Fira Code,Consolas,monospace}.prx-rich-editor__actions{display:flex;flex-wrap:wrap;gap:10px}button{border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:8px 14px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:760px){.prx-rich-editor__header,.prx-rich-editor__section-header,.prx-rich-editor__node-header,.prx-rich-editor__authoring-shell,.prx-rich-editor__intent-strip,.prx-rich-editor__grid,.prx-rich-editor__field-group,.prx-rich-editor__node-grid,.prx-rich-editor__workbench{grid-template-columns:1fr;display:grid}.prx-rich-editor__structure{position:static}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRichContentConfigEditor, decorators: [{
             type: Component,
@@ -10300,6 +11126,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 (ngModelChange)="setString('src', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.srcExpr', 'Image URL binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'srcExpr')"
+                (ngModelChange)="setString('srcExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
               <input
@@ -10307,6 +11140,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 (ngModelChange)="setString('alt', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.altExpr', 'Alt text binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'altExpr')"
+                (ngModelChange)="setString('altExpr', $event)"
+              />
+            </label>
           }
           @case ('link') {
             <label>
@@ -10316,6 +11156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 (ngModelChange)="setString('label', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'labelExpr')"
+                (ngModelChange)="setString('labelExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.href', 'Link URL') }}</span>
               <input
@@ -10365,6 +11212,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 (ngModelChange)="setString('label', $event)"
               />
             </label>
+            <label>
+              <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'labelExpr')"
+                (ngModelChange)="setString('labelExpr', $event)"
+              />
+            </label>
+            <label>
+              <span>{{ tx('editor.field.valueExpr', 'Value binding') }}</span>
+              <input
+                [ngModel]="getStringField(node, 'valueExpr')"
+                (ngModelChange)="setString('valueExpr', $event)"
+              />
+            </label>
             <label>
               <span>{{ tx('editor.field.max', 'Maximum') }}</span>
               <input
@@ -10618,7 +11479,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       </ng-template>
 
-      <section class="prx-rich-editor__blocks">
+      <nav
+        class="prx-rich-editor__tabs"
+        [attr.aria-label]="tx('editor.workbenchTabs', 'Editor sections')"
+        role="tablist"
+      >
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'guided'"
+          [attr.aria-selected]="activeEditorPanel === 'guided'"
+          (click)="selectEditorPanel('guided')"
+          data-testid="rich-content-guided-tab"
+        >
+          {{ tx('editor.guidedEditing', 'Guided editing') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'preview'"
+          [attr.aria-selected]="activeEditorPanel === 'preview'"
+          (click)="selectEditorPanel('preview')"
+          data-testid="rich-content-preview-tab"
+        >
+          {{ tx('editor.preview', 'Preview') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="prx-rich-editor__tab"
+          [class.prx-rich-editor__tab--active]="activeEditorPanel === 'json'"
+          [attr.aria-selected]="activeEditorPanel === 'json'"
+          (click)="selectEditorPanel('json')"
+          data-testid="rich-content-json-tab"
+        >
+          {{ tx('editor.document', 'Advanced JSON') }}
+          @if (!valid || validationIssues.length) {
+            <span class="prx-rich-editor__tab-badge">
+              {{
+                validationIssues.length || tx('editor.invalidBadge', 'Invalid')
+              }}
+            </span>
+          }
+        </button>
+      </nav>
+
+      @if (activeEditorPanel === 'guided') {
+      <section
+        class="prx-rich-editor__blocks"
+        role="tabpanel"
+        [attr.aria-label]="tx('editor.guidedEditing', 'Guided editing')"
+      >
         <header class="prx-rich-editor__section-header">
           <div>
             <h3>{{ tx('editor.blocks', 'Blocks') }}</h3>
@@ -10655,8 +11568,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </header>
 
         @if (parsedDocument?.nodes?.length) {
+          <div class="prx-rich-editor__authoring-shell">
+            <aside
+              class="prx-rich-editor__structure"
+              [attr.aria-label]="tx('editor.structure', 'Document structure')"
+            >
+              <div class="prx-rich-editor__structure-summary">
+                <strong>{{ tx('editor.structure', 'Document structure') }}</strong>
+                <span>
+                  {{
+                    tx('editor.structureHelp', 'Select a block to edit its properties.')
+                  }}
+                </span>
+              </div>
+              <div class="prx-rich-editor__structure-list">
+                @for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
+                  <button
+                    type="button"
+                    class="prx-rich-editor__structure-item"
+                    [class.prx-rich-editor__structure-item--selected]="selectedNodeIndex === nodeIndex"
+                    [attr.aria-current]="selectedNodeIndex === nodeIndex ? 'true' : null"
+                    (click)="selectTopLevelNode(nodeIndex)"
+                    [attr.data-testid]="'rich-content-node-selector-' + nodeIndex"
+                  >
+                    <span class="prx-rich-editor__node-eyebrow">
+                      {{ tx('editor.block', 'Block') }} {{ nodeIndex + 1 }}
+                    </span>
+                    <strong>{{ tx('editor.nodeType.' + node.type, node.type) }}</strong>
+                    @if (getIssueCount('$.nodes[' + nodeIndex + ']'); as issueCount) {
+                      <small>
+                        {{ tx('editor.hasIssues', 'Needs attention') }}
+                        <span class="prx-rich-editor__issue-count">{{ issueCount }}</span>
+                      </small>
+                    }
+                  </button>
+                }
+              </div>
+            </aside>
+
+            <div class="prx-rich-editor__properties">
+              <header class="prx-rich-editor__section-header">
+                <div>
+                  <h3>{{ tx('editor.properties', 'Properties') }}</h3>
+                  <p>
+                    {{
+                      tx(
+                        'editor.propertiesHelp',
+                        'Edit the selected block without leaving the document structure.'
+                      )
+                    }}
+                  </p>
+                </div>
+              </header>
+              <div
+                class="prx-rich-editor__intent-strip"
+                [attr.aria-label]="tx('editor.intentNavigation', 'Property sections')"
+              >
+                <span>
+                  <strong>{{ tx('editor.intent.content', 'Content') }}</strong>
+                  <small>{{ tx('editor.intent.contentHelp', 'Primary block fields') }}</small>
+                </span>
+                <span>
+                  <strong>{{ tx('editor.intent.presentation', 'Presentation') }}</strong>
+                  <small>{{ tx('editor.intent.presentationHelp', 'Visual affordances') }}</small>
+                </span>
+                <button type="button" (click)="openAdvancedRules()">
+                  <strong>{{ tx('editor.intent.dataRules', 'Data and rules') }}</strong>
+                  <small>{{ tx('editor.intent.dataRulesHelp', 'Metadata and gates') }}</small>
+                  @if (getSelectedNodeIssueCount(); as selectedIssueCount) {
+                    <span class="prx-rich-editor__issue-count">
+                      {{ selectedIssueCount }}
+                    </span>
+                  }
+                </button>
+              </div>
           <div class="prx-rich-editor__node-list">
             @for (node of parsedDocument?.nodes ?? []; track node.id ?? $index; let nodeIndex = $index) {
+              @if (selectedNodeIndex === nodeIndex) {
               <article
                 class="prx-rich-editor__node-card"
                 [attr.data-rich-editor-node-type]="node.type"
@@ -10842,22 +11830,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         />
                       </label>
                     }
-                    @case ('image') {
-                      <label>
-                        <span>{{ tx('editor.field.src', 'Image URL') }}</span>
-                        <input
-                          [ngModel]="getStringField(node, 'src')"
-                          (ngModelChange)="setStringField($index, 'src', $event)"
-                        />
-                      </label>
-                      <label>
-                        <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
-                        <input
-                          [ngModel]="getStringField(node, 'alt')"
-                          (ngModelChange)="setStringField($index, 'alt', $event)"
-                        />
-                      </label>
-                    }
+              @case ('image') {
+                <label>
+                  <span>{{ tx('editor.field.src', 'Image URL') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'src')"
+                    (ngModelChange)="setStringField($index, 'src', $event)"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.srcExpr', 'Image URL binding') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'srcExpr')"
+                    (ngModelChange)="setStringField($index, 'srcExpr', $event)"
+                    [placeholder]="tx('editor.placeholder.srcExpr', 'row.imageUrl')"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.alt', 'Alternative text') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'alt')"
+                    (ngModelChange)="setStringField($index, 'alt', $event)"
+                  />
+                </label>
+                <label>
+                  <span>{{ tx('editor.field.altExpr', 'Alt text binding') }}</span>
+                  <input
+                    [ngModel]="getStringField(node, 'altExpr')"
+                    (ngModelChange)="setStringField($index, 'altExpr', $event)"
+                    [placeholder]="tx('editor.placeholder.altExpr', 'row.imageAlt')"
+                  />
+                </label>
+              }
                     @case ('link') {
                       <label>
                         <span>{{ tx('editor.field.label', 'Label') }}</span>
@@ -10908,6 +11912,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setStringField($index, 'label', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'labelExpr')"
+                          (ngModelChange)="setStringField($index, 'labelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.labelExpr', 'row.status')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.valueExpr', 'Value binding') }}</span>
                         <input
@@ -10949,6 +11961,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setNumberField($index, 'max', $event)"
                         />
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'showPercent')"
+                          (ngModelChange)="setBooleanField($index, 'showPercent', $event)"
+                        />
+                        <span>{{ tx('editor.field.showPercent', 'Show percent') }}</span>
+                      </label>
               }
               @case ('actionButton') {
                 <label>
@@ -11044,6 +12064,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <option value="xl">xl</option>
                         </select>
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'wrap')"
+                          (ngModelChange)="setBooleanField($index, 'wrap', $event)"
+                        />
+                        <span>{{ tx('editor.field.wrap', 'Wrap items') }}</span>
+                      </label>
                       <div class="prx-rich-editor__nested-editor">
                         <header class="prx-rich-editor__nested-header">
                           <h5>{{ tx('editor.composeItems', 'Compose items') }}</h5>
@@ -11101,6 +12129,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setStringField($index, 'title', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.titleExpr', 'Title binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'titleExpr')"
+                          (ngModelChange)="setStringField($index, 'titleExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.titleExpr', '\${decision.title}')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.subtitle', 'Subtitle') }}</span>
                         <input
@@ -11108,6 +12144,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setStringField($index, 'subtitle', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.subtitleExpr', 'Subtitle binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'subtitleExpr')"
+                          (ngModelChange)="setStringField($index, 'subtitleExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.subtitleExpr', '\${decision.policySource}')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.variant', 'Variant') }}</span>
                         <select
@@ -11145,6 +12189,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <option value="lg">{{ tx('editor.size.lg', 'Large') }}</option>
                         </select>
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.density', 'Density') }}</span>
+                        <select
+                          [ngModel]="getStringField(node, 'density') || 'comfortable'"
+                          (ngModelChange)="setStringField($index, 'density', $event)"
+                        >
+                          <option value="comfortable">{{ tx('editor.density.comfortable', 'Comfortable') }}</option>
+                          <option value="compact">{{ tx('editor.density.compact', 'Compact') }}</option>
+                        </select>
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.orientation', 'Orientation') }}</span>
                         <select
@@ -11155,6 +12209,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <option value="horizontal">{{ tx('editor.orientation.horizontal', 'Horizontal') }}</option>
                         </select>
                       </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'loading')"
+                          (ngModelChange)="setBooleanField($index, 'loading', $event)"
+                        />
+                        <span>{{ tx('editor.field.loading', 'Loading') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.loadingExpr', 'Loading binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'loadingExpr')"
+                          (ngModelChange)="setStringField($index, 'loadingExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.loadingExpr', 'row.loading')"
+                        />
+                      </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getBooleanField(node, 'active')"
+                          (ngModelChange)="setBooleanField($index, 'active', $event)"
+                        />
+                        <span>{{ tx('editor.field.active', 'Active') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.activeExpr', 'Active binding') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'activeExpr')"
+                          (ngModelChange)="setStringField($index, 'activeExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.activeExpr', 'row.active')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.mediaKind', 'Media') }}</span>
                         <select
@@ -11176,6 +12262,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             (ngModelChange)="setCardMediaField(nodeIndex, 'src', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaSrcExpr', 'Media source binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'srcExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'srcExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaSrcExpr', 'row.mediaUrl')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaAlt', 'Media alt text') }}</span>
                           <input
@@ -11183,6 +12277,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             (ngModelChange)="setCardMediaField(nodeIndex, 'alt', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaAltExpr', 'Media alt binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'altExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'altExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaAltExpr', 'row.mediaAlt')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaIcon', 'Media icon') }}</span>
                           <input
@@ -11190,6 +12292,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             (ngModelChange)="setCardMediaField(nodeIndex, 'icon', $event)"
                           />
                         </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaLabel', 'Media label') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'label')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'label', $event)"
+                          />
+                        </label>
+                        <label>
+                          <span>{{ tx('editor.field.mediaLabelExpr', 'Media label binding') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'labelExpr')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'labelExpr', $event)"
+                            [placeholder]="tx('editor.placeholder.mediaLabelExpr', 'row.mediaLabel')"
+                          />
+                        </label>
+                        <label>
+                          <span>{{ tx('editor.field.aspectRatio', 'Aspect ratio') }}</span>
+                          <input
+                            [ngModel]="getCardMediaField(nodeIndex, 'aspectRatio')"
+                            (ngModelChange)="setCardMediaField(nodeIndex, 'aspectRatio', $event)"
+                            [placeholder]="tx('editor.placeholder.aspectRatio', '16 / 9')"
+                          />
+                        </label>
                         <label>
                           <span>{{ tx('editor.field.mediaPlacement', 'Media placement') }}</span>
                           <select
@@ -11203,6 +12328,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           </select>
                         </label>
                       }
+                      <label>
+                        <span>{{ tx('editor.field.interactionMode', 'Interaction mode') }}</span>
+                        <select
+                          [ngModel]="getCardInteractionField(nodeIndex, 'mode') || 'none'"
+                          (ngModelChange)="setCardInteractionField(nodeIndex, 'mode', $event)"
+                        >
+                          <option value="none">{{ tx('editor.interaction.none', 'None') }}</option>
+                          <option value="action">{{ tx('editor.interaction.action', 'Action') }}</option>
+                          <option value="selectable">{{ tx('editor.interaction.selectable', 'Selectable') }}</option>
+                        </select>
+                      </label>
+                      <label class="prx-rich-editor__checkbox-field">
+                        <input
+                          type="checkbox"
+                          [ngModel]="getCardInteractionBooleanField(nodeIndex, 'selected')"
+                          (ngModelChange)="setCardInteractionBooleanField(nodeIndex, 'selected', $event)"
+                        />
+                        <span>{{ tx('editor.field.selected', 'Selected') }}</span>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.selectedExpr', 'Selected binding') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionField(nodeIndex, 'selectedExpr')"
+                          (ngModelChange)="setCardInteractionField(nodeIndex, 'selectedExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.selectedExpr', 'row.selected')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.interactionActionId', 'Interaction action ID') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionActionField(nodeIndex, 'actionId')"
+                          (ngModelChange)="setCardInteractionActionField(nodeIndex, 'actionId', $event)"
+                          [placeholder]="tx('editor.placeholder.actionId', 'host.action.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.payloadExpr', 'Payload binding') }}</span>
+                        <input
+                          [ngModel]="getCardInteractionActionField(nodeIndex, 'payloadExpr')"
+                          (ngModelChange)="setCardInteractionActionField(nodeIndex, 'payloadExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.payloadExpr', 'row')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.accessibilityRole', 'Accessibility role') }}</span>
+                        <select
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'role')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'role', $event)"
+                        >
+                          <option value="">{{ tx('editor.none', 'None') }}</option>
+                          <option value="article">{{ tx('editor.accessibilityRole.article', 'Article') }}</option>
+                          <option value="group">{{ tx('editor.accessibilityRole.group', 'Group') }}</option>
+                          <option value="button">{{ tx('editor.accessibilityRole.button', 'Button') }}</option>
+                        </select>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.ariaLabel', 'Accessible label') }}</span>
+                        <input
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'ariaLabel')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'ariaLabel', $event)"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.ariaLabelExpr', 'Accessible label binding') }}</span>
+                        <input
+                          [ngModel]="getCardAccessibilityField(nodeIndex, 'ariaLabelExpr')"
+                          (ngModelChange)="setCardAccessibilityField(nodeIndex, 'ariaLabelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.ariaLabelExpr', 'row.ariaLabel')"
+                        />
+                      </label>
                       <div class="prx-rich-editor__nested-editor">
                         <header class="prx-rich-editor__nested-header">
                           <h5>{{ tx('editor.cardContent', 'Card body') }}</h5>
@@ -11648,6 +12843,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setTabsItemField(nodeIndex, $index, 'label', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.labelExpr', 'Label binding') }}</span>
+                        <input
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'labelExpr')"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'labelExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.tabLabelExpr', 'row.tabLabel')"
+                        />
+                      </label>
                       <label>
                         <span>{{ tx('editor.field.icon', 'Icon') }}</span>
                         <input
@@ -11662,6 +12865,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           (ngModelChange)="setTabsItemField(nodeIndex, $index, 'badge', $event)"
                         />
                       </label>
+                      <label>
+                        <span>{{ tx('editor.field.badgeExpr', 'Badge binding') }}</span>
+                        <input
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'badgeExpr')"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'badgeExpr', $event)"
+                          [placeholder]="tx('editor.placeholder.badgeExpr', 'row.badge')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
+                        <input
+                          [ngModel]="getTabsItemCapabilityList(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemCapabilityList(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
+                        <select
+                          [ngModel]="getTabsItemField(nodeIndex, $index, 'capabilityMode') || 'all'"
+                          (ngModelChange)="setTabsItemField(nodeIndex, $index, 'capabilityMode', $event)"
+                        >
+                          <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
+                          <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
+                        </select>
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
+                        <input
+                          [ngModel]="getTabsItemVisibleWhenPath(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemVisibleWhenPath(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
+                        <input
+                          [ngModel]="getTabsItemVisibleWhenValue(nodeIndex, $index)"
+                          (ngModelChange)="setTabsItemVisibleWhenValue(nodeIndex, $index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
+                        />
+                      </label>
                     </div>
                   }
                 </div>
@@ -13052,97 +14297,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       </p>
                     }
                   }
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.commonMetadata', 'Common metadata') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.testId', 'Test id') }}</span>
-                      <input
-                        [ngModel]="getStringField(node, 'testId')"
-                        (ngModelChange)="setStringField($index, 'testId', $event)"
-                        [placeholder]="tx('editor.placeholder.testId', 'rich-hero-title')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.className', 'CSS class') }}</span>
-                      <input
-                        [ngModel]="getStringField(node, 'className')"
-                        (ngModelChange)="setStringField($index, 'className', $event)"
-                        [placeholder]="tx('editor.placeholder.className', 'hero-title')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
-                      <input
-                        [ngModel]="getCapabilityList(node)"
-                        (ngModelChange)="setCapabilityList($index, $event)"
-                        [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
-                      <select
-                        [ngModel]="getStringField(node, 'capabilityMode') || 'all'"
-                        (ngModelChange)="setStringField($index, 'capabilityMode', $event)"
-                      >
-                        <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
-                        <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
-                      </select>
-                    </label>
-                  </fieldset>
+                  <details
+                    class="prx-rich-editor__advanced-group"
+                    [open]="advancedRulesOpen"
+                    (toggle)="onAdvancedRulesToggle($event)"
+                  >
+                    <summary>
+                      <span>{{ tx('editor.advancedDataRules', 'Advanced data and rules') }}</span>
+                      <small>
+                        {{
+                          tx(
+                            'editor.advancedDataRulesHelp',
+                            'Metadata, capability gates, visibility and safe style.'
+                          )
+                        }}
+                      </small>
+                    </summary>
 
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.visibilityRule', 'Visibility rule') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
-                      <input
-                        [ngModel]="getVisibleWhenPath(node)"
-                        (ngModelChange)="setVisibleWhenPath($index, $event)"
-                        [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
-                      <input
-                        [ngModel]="getVisibleWhenValue(node)"
-                        (ngModelChange)="setVisibleWhenValue($index, $event)"
-                        [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
-                      />
-                    </label>
-                  </fieldset>
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.commonMetadata', 'Common metadata') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.testId', 'Test id') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'testId')"
+                          (ngModelChange)="setStringField($index, 'testId', $event)"
+                          [placeholder]="tx('editor.placeholder.testId', 'rich-hero-title')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.className', 'CSS class') }}</span>
+                        <input
+                          [ngModel]="getStringField(node, 'className')"
+                          (ngModelChange)="setStringField($index, 'className', $event)"
+                          [placeholder]="tx('editor.placeholder.className', 'hero-title')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.requiresCapabilities', 'Capabilities') }}</span>
+                        <input
+                          [ngModel]="getCapabilityList(node)"
+                          (ngModelChange)="setCapabilityList($index, $event)"
+                          [placeholder]="tx('editor.placeholder.requiresCapabilities', 'form.mode.edit, employee.open')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.capabilityMode', 'Capability mode') }}</span>
+                        <select
+                          [ngModel]="getStringField(node, 'capabilityMode') || 'all'"
+                          (ngModelChange)="setStringField($index, 'capabilityMode', $event)"
+                        >
+                          <option value="all">{{ tx('editor.capabilityMode.all', 'All') }}</option>
+                          <option value="any">{{ tx('editor.capabilityMode.any', 'Any') }}</option>
+                        </select>
+                      </label>
+                    </fieldset>
 
-                  <fieldset class="prx-rich-editor__wide-field prx-rich-editor__field-group">
-                    <legend>{{ tx('editor.safeStyle', 'Safe style') }}</legend>
-                    <label>
-                      <span>{{ tx('editor.field.styleName', 'CSS property') }}</span>
-                      <input
-                        [ngModel]="getFirstStyleName(node)"
-                        (ngModelChange)="setFirstStyleName($index, $event)"
-                        [placeholder]="tx('editor.placeholder.styleName', 'color')"
-                      />
-                    </label>
-                    <label>
-                      <span>{{ tx('editor.field.styleValue', 'CSS value') }}</span>
-                      <input
-                        [ngModel]="getFirstStyleValue(node)"
-                        (ngModelChange)="setFirstStyleValue($index, $event)"
-                        [placeholder]="tx('editor.placeholder.styleValue', 'var(--md-sys-color-primary)')"
-                      />
-                    </label>
-                  </fieldset>
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.visibilityRule', 'Visibility rule') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenPath', 'Context path') }}</span>
+                        <input
+                          [ngModel]="getVisibleWhenPath(node)"
+                          (ngModelChange)="setVisibleWhenPath($index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenPath', 'row.active')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.visibleWhenValue', 'Expected value') }}</span>
+                        <input
+                          [ngModel]="getVisibleWhenValue(node)"
+                          (ngModelChange)="setVisibleWhenValue($index, $event)"
+                          [placeholder]="tx('editor.placeholder.visibleWhenValue', 'true')"
+                        />
+                      </label>
+                    </fieldset>
+
+                    <fieldset class="prx-rich-editor__field-group">
+                      <legend>{{ tx('editor.safeStyle', 'Safe style') }}</legend>
+                      <label>
+                        <span>{{ tx('editor.field.styleName', 'CSS property') }}</span>
+                        <input
+                          [ngModel]="getFirstStyleName(node)"
+                          (ngModelChange)="setFirstStyleName($index, $event)"
+                          [placeholder]="tx('editor.placeholder.styleName', 'color')"
+                        />
+                      </label>
+                      <label>
+                        <span>{{ tx('editor.field.styleValue', 'CSS value') }}</span>
+                        <input
+                          [ngModel]="getFirstStyleValue(node)"
+                          (ngModelChange)="setFirstStyleValue($index, $event)"
+                          [placeholder]="tx('editor.placeholder.styleValue', 'var(--md-sys-color-primary)')"
+                        />
+                      </label>
+                    </fieldset>
+                  </details>
                 </div>
               </article>
+              }
             }
           </div>
+            </div>
+          </div>
         } @else {
           <p class="prx-rich-editor__empty">
             {{ tx('editor.noBlocks', 'No blocks yet. Add a block to start authoring this document.') }}
           </p>
         }
       </section>
+      }
+
+      @if (activeEditorPanel === 'preview') {
+      <section
+        class="prx-rich-editor__preview-panel"
+        role="tabpanel"
+        [attr.aria-label]="tx('editor.preview', 'Preview')"
+      >
+        <header class="prx-rich-editor__section-header">
+          <div>
+            <h3>{{ tx('editor.preview', 'Preview') }}</h3>
+            <p>
+              {{
+                tx(
+                  'editor.previewHelp',
+                  'Inspect the materialized document without mixing preview with authoring fields.'
+                )
+              }}
+            </p>
+          </div>
+        </header>
+        @if (parsedDocument) {
+          <div class="prx-rich-editor__preview prx-rich-editor__preview--large">
+            <praxis-rich-content
+              [document]="parsedDocument"
+              [layout]="layout"
+              [rootClassName]="rootClassName"
+            ></praxis-rich-content>
+          </div>
+        } @else {
+          <p class="prx-rich-editor__empty">
+            {{ tx('editor.previewUnavailable', 'Preview is unavailable until the document is valid.') }}
+          </p>
+        }
+      </section>
+      }
 
-      <label class="prx-rich-editor__document">
-        <span>{{ tx('editor.document', 'Advanced JSON') }}</span>
+      @if (activeEditorPanel === 'json') {
+      <section class="prx-rich-editor__document-panel">
+        <header class="prx-rich-editor__section-header">
+          <div>
+            <h3>{{ tx('editor.document', 'Advanced JSON') }}</h3>
+            <p>
+              {{
+                tx(
+                  'editor.documentAdvancedHelp',
+                  'Use JSON for diagnostics, migration and advanced fields that are not yet surfaced by guided controls.'
+                )
+              }}
+            </p>
+          </div>
+        </header>
         <div class="prx-rich-editor__workbench">
+          <label class="prx-rich-editor__document">
+            <span>{{ tx('editor.documentJson', 'Canonical document JSON') }}</span>
           <textarea
             name="rich-content-document"
             [(ngModel)]="documentJson"
@@ -13156,6 +14473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             spellcheck="false"
             data-testid="rich-content-document-input"
           ></textarea>
+          </label>
 
           <aside
             class="prx-rich-editor__inspector"
@@ -13175,21 +14493,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </dl>
             </section>
 
-            @if (parsedDocument) {
-              <section>
-                <h3>{{ tx('editor.preview', 'Preview') }}</h3>
-                <div class="prx-rich-editor__preview">
-                  <praxis-rich-content
-                    [document]="parsedDocument"
-                    [layout]="layout"
-                    [rootClassName]="rootClassName"
-                  ></praxis-rich-content>
-                </div>
-              </section>
-            }
           </aside>
         </div>
-      </label>
+      </section>
 
       @if (errorMessage) {
         <div
@@ -13219,6 +14525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           }}
         </p>
       }
+      }
 
       <div class="prx-rich-editor__actions">
         <button type="button" (click)="reset()">
@@ -13229,7 +14536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </button>
       </div>
     </section>
-  `, styles: [":host{display:block;min-width:0}.prx-rich-editor{display:grid;gap:18px;color:var(--md-sys-color-on-surface, #1f2937)}.prx-rich-editor__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__header h2{margin:0;font-size:1.25rem}.prx-rich-editor__header p{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673)}.prx-rich-editor__eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--md-sys-color-primary, #3154e7)}.prx-rich-editor__status{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,#16a34a 12%,transparent);color:#166534;font-size:.78rem;font-weight:700}.prx-rich-editor__status.invalid{background:color-mix(in srgb,#dc2626 12%,transparent);color:#991b1b}.prx-rich-editor__grid{display:grid;gap:14px;grid-template-columns:minmax(0,180px) minmax(0,1fr)}.prx-rich-editor__blocks{display:grid;gap:14px}.prx-rich-editor__section-header,.prx-rich-editor__node-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__section-header h3,.prx-rich-editor__node-header h4{margin:0}.prx-rich-editor__section-header p,.prx-rich-editor__node-note,.prx-rich-editor__empty{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.88rem}.prx-rich-editor__add-block,.prx-rich-editor__node-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.prx-rich-editor__add-block label{min-width:180px}.prx-rich-editor__node-list{display:grid;gap:12px}.prx-rich-editor__node-card{display:grid;gap:14px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:14px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__node-eyebrow{margin:0 0 4px;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.75rem;font-weight:700;text-transform:uppercase}.prx-rich-editor__node-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__wide-field,.prx-rich-editor__node-note{grid-column:1 / -1}.prx-rich-editor__field-group,.prx-rich-editor__nested-editor,.prx-rich-editor__nested-node{grid-column:1 / -1;display:grid;gap:12px}.prx-rich-editor__field-group,.prx-rich-editor__nested-node{margin:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px}.prx-rich-editor__field-group{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__field-group legend{padding:0 4px;font-weight:700}.prx-rich-editor__nested-header,.prx-rich-editor__nested-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.prx-rich-editor__quick-actions{display:flex;flex-wrap:wrap;gap:8px}.prx-rich-editor__node-grid textarea{min-height:96px;font-family:inherit}label,.prx-rich-editor__document{display:grid;gap:7px;font-weight:700}.prx-rich-editor__checkbox-field{display:flex;gap:10px;align-items:center;align-self:end}.prx-rich-editor__checkbox-field input[type=checkbox]{width:auto}input,select,textarea{box-sizing:border-box;width:100%;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;background:var(--md-sys-color-surface, #fff)}textarea{min-height:360px;resize:vertical;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.86rem;line-height:1.45}.prx-rich-editor__workbench{display:grid;gap:14px;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}.prx-rich-editor__inspector{display:grid;align-content:start;gap:14px;min-width:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__inspector h3{margin:0 0 8px;font-size:.95rem}.prx-rich-editor__inspector dl{display:grid;gap:8px;margin:0}.prx-rich-editor__inspector dl div{display:grid;gap:2px}.prx-rich-editor__inspector dt{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:700}.prx-rich-editor__inspector dd{margin:0;overflow-wrap:anywhere;font-weight:600}.prx-rich-editor__preview{max-height:260px;overflow:auto;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__help{margin:-8px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.85rem}.prx-rich-editor__error{margin:0;padding:10px 12px;border-radius:8px;color:#991b1b;background:color-mix(in srgb,#dc2626 9%,transparent)}.prx-rich-editor__error p{margin:0}.prx-rich-editor__error ul{display:grid;gap:6px;margin:8px 0 0;padding-inline-start:18px}.prx-rich-editor__error code{margin-right:4px;font-family:Cascadia Code,Fira Code,Consolas,monospace}.prx-rich-editor__actions{display:flex;flex-wrap:wrap;gap:10px}button{border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:8px 14px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:760px){.prx-rich-editor__header,.prx-rich-editor__section-header,.prx-rich-editor__node-header,.prx-rich-editor__grid,.prx-rich-editor__field-group,.prx-rich-editor__node-grid,.prx-rich-editor__workbench{grid-template-columns:1fr;display:grid}}\n"] }]
+  `, styles: [":host{display:block;min-width:0;width:100%;max-width:100%;box-sizing:border-box}.prx-rich-editor{display:grid;gap:18px;min-width:0;color:var(--md-sys-color-on-surface, #1f2937)}.prx-rich-editor__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__header h2{margin:0;font-size:1.25rem}.prx-rich-editor__header p{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673)}.prx-rich-editor__eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--md-sys-color-primary, #3154e7)}.prx-rich-editor__status{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,#16a34a 12%,transparent);color:#166534;font-size:.78rem;font-weight:700}.prx-rich-editor__status.invalid{background:color-mix(in srgb,#dc2626 12%,transparent);color:#991b1b}.prx-rich-editor__grid{display:grid;gap:14px;grid-template-columns:minmax(0,180px) minmax(0,1fr)}.prx-rich-editor__tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--md-sys-color-outline-variant, #d7dce5)}.prx-rich-editor__tab{margin-block-end:-1px;border-radius:8px 8px 0 0;border-bottom-color:transparent;color:var(--md-sys-color-on-surface-variant, #5f6673);background:transparent}.prx-rich-editor__tab--active{border-color:var(--md-sys-color-outline-variant, #d7dce5);border-bottom-color:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__tab-badge,.prx-rich-editor__issue-count{display:inline-flex;min-width:1.35em;min-height:1.35em;padding:0 .38em;border-radius:999px;align-items:center;justify-content:center;background:color-mix(in srgb,#dc2626 14%,transparent);color:#991b1b;font-size:.72rem;font-weight:800;line-height:1}.prx-rich-editor__tab-badge{margin-inline-start:6px}.prx-rich-editor__blocks{display:grid;gap:14px}.prx-rich-editor__authoring-shell{display:grid;gap:14px;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);align-items:start}.prx-rich-editor__structure,.prx-rich-editor__properties,.prx-rich-editor__document-panel,.prx-rich-editor__preview-panel{min-width:0;display:grid;gap:12px}.prx-rich-editor__structure{position:sticky;top:12px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__structure-summary{display:grid;gap:4px}.prx-rich-editor__structure-summary span{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.82rem;font-weight:500}.prx-rich-editor__structure-list{display:grid;gap:8px}.prx-rich-editor__structure-item{display:grid;gap:3px;width:100%;padding:10px;text-align:left;color:var(--md-sys-color-on-surface, #1f2937);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__structure-item--selected{border-color:var(--md-sys-color-primary, #3154e7);background:color-mix(in srgb,var(--md-sys-color-primary, #3154e7) 8%,var(--md-sys-color-surface, #fff))}.prx-rich-editor__structure-item small{color:#991b1b;font-weight:700}.prx-rich-editor__intent-strip{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.prx-rich-editor__intent-strip span,.prx-rich-editor__intent-strip button{min-width:0;display:grid;gap:3px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:10px 12px;text-align:left;color:var(--md-sys-color-on-surface, #1f2937);background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__intent-strip button{position:relative}.prx-rich-editor__intent-strip small{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:600}.prx-rich-editor__intent-strip .prx-rich-editor__issue-count{position:absolute;inset-block-start:8px;inset-inline-end:8px}.prx-rich-editor__section-header,.prx-rich-editor__node-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.prx-rich-editor__section-header h3,.prx-rich-editor__node-header h4{margin:0}.prx-rich-editor__section-header p,.prx-rich-editor__node-note,.prx-rich-editor__empty{margin:6px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.88rem}.prx-rich-editor__add-block,.prx-rich-editor__node-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.prx-rich-editor__add-block label{min-width:180px}.prx-rich-editor__node-list{display:grid;gap:12px}.prx-rich-editor__node-card{display:grid;gap:14px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:14px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__node-eyebrow{margin:0 0 4px;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.75rem;font-weight:700;text-transform:uppercase}.prx-rich-editor__node-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__wide-field,.prx-rich-editor__node-note{grid-column:1 / -1}.prx-rich-editor__field-group,.prx-rich-editor__nested-editor,.prx-rich-editor__nested-node{grid-column:1 / -1;display:grid;gap:12px}.prx-rich-editor__field-group,.prx-rich-editor__nested-node{margin:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px}.prx-rich-editor__field-group{grid-template-columns:repeat(2,minmax(0,1fr))}.prx-rich-editor__field-group legend{padding:0 4px;font-weight:700}.prx-rich-editor__advanced-group{grid-column:1 / -1;display:grid;gap:12px;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest, #fff) 88%,var(--md-sys-color-primary, #3154e7) 4%)}.prx-rich-editor__advanced-group summary{display:flex;gap:10px;align-items:center;justify-content:space-between;cursor:pointer;font-weight:800}.prx-rich-editor__advanced-group summary small{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:600}.prx-rich-editor__advanced-group[open]{padding-block-end:14px}.prx-rich-editor__advanced-group[open] summary{margin-block-end:12px}.prx-rich-editor__advanced-group .prx-rich-editor__field-group+.prx-rich-editor__field-group{margin-block-start:12px}.prx-rich-editor__nested-header,.prx-rich-editor__nested-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.prx-rich-editor__quick-actions{display:flex;flex-wrap:wrap;gap:8px}.prx-rich-editor__node-grid textarea{min-height:96px;font-family:inherit}label,.prx-rich-editor__document{display:grid;gap:7px;font-weight:700}.prx-rich-editor__checkbox-field{display:flex;gap:10px;align-items:center;align-self:end}.prx-rich-editor__checkbox-field input[type=checkbox]{width:auto}input,select,textarea{box-sizing:border-box;width:100%;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;background:var(--md-sys-color-surface, #fff)}textarea{min-height:360px;resize:vertical;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.86rem;line-height:1.45}.prx-rich-editor__workbench{display:grid;gap:14px;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}.prx-rich-editor__inspector{display:grid;align-content:start;gap:14px;min-width:0;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface-container-lowest, #fff)}.prx-rich-editor__inspector h3{margin:0 0 8px;font-size:.95rem}.prx-rich-editor__inspector dl{display:grid;gap:8px;margin:0}.prx-rich-editor__inspector dl div{display:grid;gap:2px}.prx-rich-editor__inspector dt{color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.78rem;font-weight:700}.prx-rich-editor__inspector dd{margin:0;overflow-wrap:anywhere;font-weight:600}.prx-rich-editor__preview{max-height:260px;overflow:auto;border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:12px;background:var(--md-sys-color-surface, #fff)}.prx-rich-editor__preview--large{max-height:min(68vh,760px)}.prx-rich-editor__help{margin:-8px 0 0;color:var(--md-sys-color-on-surface-variant, #5f6673);font-size:.85rem}.prx-rich-editor__error{margin:0;padding:10px 12px;border-radius:8px;color:#991b1b;background:color-mix(in srgb,#dc2626 9%,transparent)}.prx-rich-editor__error p{margin:0}.prx-rich-editor__error ul{display:grid;gap:6px;margin:8px 0 0;padding-inline-start:18px}.prx-rich-editor__error code{margin-right:4px;font-family:Cascadia Code,Fira Code,Consolas,monospace}.prx-rich-editor__actions{display:flex;flex-wrap:wrap;gap:10px}button{border:1px solid var(--md-sys-color-outline-variant, #d7dce5);border-radius:8px;padding:8px 14px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-primary, #3154e7);font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:760px){.prx-rich-editor__header,.prx-rich-editor__section-header,.prx-rich-editor__node-header,.prx-rich-editor__authoring-shell,.prx-rich-editor__intent-strip,.prx-rich-editor__grid,.prx-rich-editor__field-group,.prx-rich-editor__node-grid,.prx-rich-editor__workbench{grid-template-columns:1fr;display:grid}.prx-rich-editor__structure{position:static}}\n"] }]
         }], propDecorators: { inputs: [{
                 type: Input
             }] } });