@praxisui/rich-content 9.0.0-beta.7 → 9.0.0-beta.9

package/README.md

@@ -123,7 +123,9 @@ The validator rejects unsupported document versions, unknown node types, unsafe
 }
 ```
 
-The editor supports structured block authoring, nested card/timeline/action collections, preset selection and advanced JSON for less common deep structures. Labels and validation messages use the rich-content i18n dictionary; override them with `providePraxisRichContentI18n()`.
+The editor separates authoring into guided editing, preview and advanced JSON tabs. Guided editing keeps the document structure visible while the selected block exposes content, presentation and advanced data/rule sections. Preview renders the materialized document without mixing authoring fields, and advanced JSON remains available for diagnostics, migration and less common deep structures.
+
+The editor supports structured block authoring, nested card/timeline/action collections, preset selection, validation badges and advanced JSON for less common deep structures. Labels and validation messages use the rich-content i18n dictionary; override them with `providePraxisRichContentI18n()`.
 
 `PRAXIS_RICH_CONTENT_AUTHORING_MANIFEST` describes governed AI/tooling operations for document replacement, block add/remove/order, text updates, link nodes, media blocks, timeline nodes/items, presets, metadata and sanitization policy. Rich content authoring is structured JSON, not arbitrary HTML or markdown patches.
 

package/fesm2022/praxisui-rich-content.mjs

@@ -13,11 +13,14 @@ 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.',
@@ -28,6 +31,13 @@ const PRAXIS_RICH_CONTENT_EN_US = {
     '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',
@@ -50,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',
@@ -420,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.',
@@ -462,11 +476,14 @@ 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.',
@@ -477,6 +494,13 @@ const PRAXIS_RICH_CONTENT_PT_BR = {
     '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',
@@ -499,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',
@@ -662,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.',
@@ -5872,6 +5900,8 @@ class PraxisRichContentConfigEditor {
     nodeCount = 0;
     nodeTypeSummary = '';
     selectedNodeIndex = 0;
+    activeEditorPanel = 'guided';
+    advancedRulesOpen = false;
     initialInputs = this.normalizeInputs(this.inputs);
     pendingRemoval = null;
     ngOnChanges(changes) {
@@ -5926,6 +5956,19 @@ class PraxisRichContentConfigEditor {
     }
     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();
@@ -6881,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);
     }
@@ -7867,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>
@@ -7931,8 +8032,11 @@ class PraxisRichContentConfigEditor {
                       {{ tx('editor.block', 'Block') }} {{ nodeIndex + 1 }}
                     </span>
                     <strong>{{ tx('editor.nodeType.' + node.type, node.type) }}</strong>
-                    @if (getIssueMessages('$.nodes[' + nodeIndex + ']').length) {
-                      <small>{{ tx('editor.hasIssues', 'Needs attention') }}</small>
+                    @if (getIssueCount('$.nodes[' + nodeIndex + ']'); as issueCount) {
+                      <small>
+                        {{ tx('editor.hasIssues', 'Needs attention') }}
+                        <span class="prx-rich-editor__issue-count">{{ issueCount }}</span>
+                      </small>
                     }
                   </button>
                 }
@@ -7953,6 +8057,28 @@ class PraxisRichContentConfigEditor {
                   </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) {
@@ -10608,83 +10734,101 @@ 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>
               }
@@ -10698,7 +10842,44 @@ class PraxisRichContentConfigEditor {
           </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>
+      }
 
+      @if (activeEditorPanel === 'json') {
       <section class="prx-rich-editor__document-panel">
         <header class="prx-rich-editor__section-header">
           <div>
@@ -10749,18 +10930,6 @@ 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>
       </section>
@@ -10793,6 +10962,7 @@ class PraxisRichContentConfigEditor {
           }}
         </p>
       }
+      }
 
       <div class="prx-rich-editor__actions">
         <button type="button" (click)="reset()">
@@ -10803,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__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{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__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__authoring-shell,.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 });
+  `, 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,
@@ -11309,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>
@@ -11373,8 +11595,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       {{ tx('editor.block', 'Block') }} {{ nodeIndex + 1 }}
                     </span>
                     <strong>{{ tx('editor.nodeType.' + node.type, node.type) }}</strong>
-                    @if (getIssueMessages('$.nodes[' + nodeIndex + ']').length) {
-                      <small>{{ tx('editor.hasIssues', 'Needs attention') }}</small>
+                    @if (getIssueCount('$.nodes[' + nodeIndex + ']'); as issueCount) {
+                      <small>
+                        {{ tx('editor.hasIssues', 'Needs attention') }}
+                        <span class="prx-rich-editor__issue-count">{{ issueCount }}</span>
+                      </small>
                     }
                   </button>
                 }
@@ -11395,6 +11620,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   </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) {
@@ -14050,83 +14297,101 @@ 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>
               }
@@ -14140,7 +14405,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           </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>
+      }
+
+      @if (activeEditorPanel === 'json') {
       <section class="prx-rich-editor__document-panel">
         <header class="prx-rich-editor__section-header">
           <div>
@@ -14191,18 +14493,6 @@ 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>
       </section>
@@ -14235,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()">
@@ -14245,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__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{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__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__authoring-shell,.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"] }]
+  `, 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
             }] } });

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@praxisui/rich-content",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.9",
   "description": "Rich content rendering and authoring primitives for Praxis UI surfaces, including semantic blocks and page-builder integration.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^9.0.0-beta.7",
+    "@praxisui/core": "^9.0.0-beta.9",
     "@angular/forms": "^21.0.0",
     "rxjs": "~7.8.0"
   },

package/types/praxisui-rich-content.d.ts

@@ -280,6 +280,7 @@ type EditableTimelineItemField = 'title' | 'titleExpr' | 'subtitle' | 'subtitleE
 type DecisionPackageStringField = 'title' | 'titleExpr' | 'subtitle' | 'subtitleExpr' | 'summary' | 'summaryExpr' | 'status' | 'statusExpr' | 'owner' | 'ownerExpr' | 'policySource' | 'policySourceExpr' | 'version' | 'versionExpr' | 'confidenceExpr' | 'risk' | 'riskExpr' | 'lastReviewed' | 'lastReviewedExpr' | 'supersedes' | 'supersedesExpr';
 type DecisionPackageEvidence = NonNullable<RichDecisionPackageNode['evidence']>[number];
 type DecisionPackageEvidenceField = 'id' | 'label' | 'labelExpr' | 'source' | 'sourceExpr';
+type RichContentEditorPanel = 'guided' | 'preview' | 'json';
 interface PraxisRichContentEditorInputs {
     document?: RichContentDocument | null;
     layout?: 'block' | 'inline';
@@ -313,6 +314,8 @@ declare class PraxisRichContentConfigEditor implements SettingsValueProvider, On
     nodeCount: number;
     nodeTypeSummary: string;
     selectedNodeIndex: number;
+    activeEditorPanel: RichContentEditorPanel;
+    advancedRulesOpen: boolean;
     private initialInputs;
     private pendingRemoval;
     ngOnChanges(changes: SimpleChanges): void;
@@ -325,6 +328,9 @@ declare class PraxisRichContentConfigEditor implements SettingsValueProvider, On
     tx(key: string, fallback: string): string;
     useEmptyDocument(): void;
     selectTopLevelNode(index: number): void;
+    selectEditorPanel(panel: RichContentEditorPanel): void;
+    openAdvancedRules(): void;
+    onAdvancedRulesToggle(event: Event): void;
     addTopLevelNode(): void;
     removeTopLevelNode(index: number): void;
     moveTopLevelNode(index: number, delta: number): void;
@@ -486,6 +492,8 @@ declare class PraxisRichContentConfigEditor implements SettingsValueProvider, On
     getPresetSelection(node: RichBlockNode): string;
     getPresetOptionValue(ref: CorePresetRef): string;
     getIssueMessages(path: string): string[];
+    getIssueCount(path: string): number;
+    getSelectedNodeIssueCount(): number;
     isEditableNodeType(type: string): type is EditableTopLevelNodeType;
     private isPresenterNodeType;
     private load;