@praxisui/page-builder 9.0.66 → 9.0.67

package/README.md

@@ -6,6 +6,23 @@ Use this package when an application must let users compose governed operational
 
 ## Widget shell editor integrity
 
+The shell editor exposes **Keep header visible while scrolling the page**
+(`widget.shell.stickyHeader`). It retains the current title/subtitle rather than
+copying record state into the host. Apply/save/reopen/reset use the same shell
+document and the existing identity-authoring capability governs the option.
+Pinning is visible in presentation mode, not while dragging/editing the canvas;
+hidden headers, collapsed/overlay widgets and scroll recovery retain their own
+behavior. Hosts with a fixed heading provide the Core CSS length
+`--pdx-shell-sticky-header-offset`. The default remains normal flow.
+
+The page editor keeps Material tab pagination/keyboard navigation with wrapped labels
+for narrow panels. Its configuration summary is progressively disclosed; when hosted
+in Settings Panel it does not repeat the shell's title, reset action or dirty status.
+The selected widget/layout remains visible while scrolling the limits inspector.
+Rendered-height diagnostics appear at the visible height field only; diagnostics for
+another target or a hidden height field remain in the section summary. The validity
+and apply/save protocol are unchanged.
+
 Dynamic Page height validation follows viewport resize and Angular render completion
 while the editor remains open. It reuses the runtime's transient validator and updates
 the existing field diagnostics/Apply/Save gates only when the diagnostic changes.
@@ -51,6 +68,22 @@ content-aware minimums remain important, including in restored layouts; changing
 recipe does not silently rewrite a saved user page. Auto-content rows still do not
 provide pixel-continuous vertical shrinking of a one-row widget.
 
+### Device composition
+
+**Page settings → Responsiveness** opens on Mobile and shows one device at a time.
+**Stack widgets** prepares a single-column variant in the base canvas's visual reading
+order, with natural content height. It replaces positions and width bounds only for
+that device, preserves hidden widgets and other overrides, and leaves the base and
+other device layouts unchanged. Apply/Save materializes the existing
+`deviceLayouts[device].canvas` contract; Reset restores the original draft.
+Advanced JSON overrides remain available under **Advanced overrides**.
+
+Reducing a device's column count also reflows inherited base positions in Core.
+Explicit device positions remain authoritative. With no device variant the base
+canvas is still inherited; the editor does not silently apply a mobile template.
+Grouping settings are preserved for flow layouts; canvas geometry currently takes
+precedence over grouping. The editor explains this distinction in the Grouping tab.
+
 ### Visual widget limits
 
 Open **Page settings → Widget limits** in the default Dynamic Page editor to set
@@ -527,3 +560,23 @@ Main exports:
 - Use component-owned config editors through metadata instead of duplicating widget-specific editors in Page Builder.
 - Keep diagnostics and streaming opt-in for hosts that need auditability or richer authoring feedback.
 - Use the official documentation for extended recipes, playground routes, and advanced AI authoring flows.
+
+### Montagem manual de master detail a partir de uma página vazia
+
+1. Insira Filter, Table e Dynamic Form e conecte-os ao recurso pelo catálogo.
+2. No filtro, carregue o schema e selecione os campos sempre visíveis.
+3. Na tabela, habilite seleção única por clique e escolha paginação no servidor para APIs paginadas; no formulário, escolha modo `view`.
+4. Crie as conexões `Filter.change → Table.queryContext` e `Table.selectionChange → Dynamic Form.resourceId`. O editor usa os contratos públicos das portas para propor as transformações do filtro e do identificador.
+5. Configure a grade, salve a página e reabra para conferir filtro, seleção e detalhe.
+
+Ao converter uma página sem posições em grade, o editor acrescenta posições para todos os widgets e usa altura de conteúdo como padrão. Isso garante visibilidade; a distribuição lado a lado continua sendo uma decisão de layout do autor. O diagrama radial mantém os modos de edição e apresentação.
+
+### Menu de ações e tamanho preciso
+
+O editor de shell aceita `placement: 'menu'` para manter uma ação em Mais ações mesmo
+com espaço livre no cabeçalho. A edição do canvas oferece `Mais ações → Tamanho…`,
+com largura em colunas e altura em linhas ou pixels conforme `autoRows`. O ajuste usa
+as restrições e o layout de dispositivo canônicos, com prévia e aplicação explícita.
+Selecionar o widget continua expondo suas alças; o ícone dedicado e os painéis de setas
+separados foram removidos. O editor oferece presets exatos de largura e recuperação do último resize da sessão,
+incluindo vizinhos. Clique duplo e histórico geral continuam fora desta entrega.

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-06T19:09:46.917Z",
+  "generatedAt": "2026-09-07T00:54:55.301Z",
   "packageName": "@praxisui/page-builder",
-  "packageVersion": "9.0.66",
+  "packageVersion": "9.0.67",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,
@@ -2059,7 +2059,13 @@
                   "type": "string"
                 },
                 "shell": {
-                  "type": "object"
+                  "type": "object",
+                  "properties": {
+                    "stickyHeader": {
+                      "type": "boolean",
+                      "description": "Retain the existing header within the widget during page scrolling; suspended for drag authoring, collapsed/overlay states and scroll recovery."
+                    }
+                  }
                 }
               }
             },
@@ -3783,9 +3789,9 @@
         {
           "chunkIndex": 10,
           "chunkKind": "authoring_manifest",
-          "content": "{\"operationId\":\"widget.shell.configure\",\"schemaVersion\":\"1.0.0\",\"manifestVersion\":\"1.5.0\",\"componentId\":\"praxis-page-builder\",\"ownerPackage\":\"@praxisui/page-builder\",\"configSchemaId\":\"WidgetPageDefinition\",\"chunkSection\":\"operation_card\",\"semanticSummary\":\"Configure widget shell Effects: compile-domain-patch. Rename the employees widget card and enable the refresh shell action.\",\"scope\":\"templating\",\"target\":{\"kind\":\"widgetShell\",\"resolver\":\"widget-shell-by-widget-key\",\"required\":true},\"inputContract\":{\"required\":[\"widgetKey\"],\"properties\":[\"widgetKey\",\"shell\"],\"semanticTerms\":[\"widgetKey\",\"shell\"]},\"effects\":[\"compile-domain-patch\"],\"affectedPaths\":[\"widgets[].shell\"],\"validators\":[{\"validatorId\":\"widget-exists\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_WIDGET_EXISTS\",\"description\":\"Target widget must exist.\"},{\"validatorId\":\"widget-shell-shape-valid\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_SHELL_SHAPE\",\"description\":\"Widget shell config must match the shell editor contract.\"},{\"validatorId\":\"settings-panel-bridge-available\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_SETTINGS_BRIDGE\",\"description\":\"Settings panel bridge must be available for shell/page editors.\"},{\"validatorId\":\"child-inputs-not-mutated\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_CHILD_INPUTS_NOT_MUTATED\",\"description\":\"Shell edits cannot mutate child inputs.\"}],\"preconditions\":[\"page-loaded\",\"target-widget-exists\"],\"submissionImpact\":\"config-only\",\"presentationAffordances\":[],\"positiveExamples\":[{\"id\":\"configure-widget-shell\",\"request\":\"Rename the employees widget card and enable the refresh shell action.\",\"operationId\":\"widget.shell.configure\",\"target\":\"employees-table\",\"params\":{\"widgetKey\":\"employees-table\",\"shell\":{\"title\":\"Employees\",\"actions\":[{\"id\":\"refresh\"}]}},\"isPositive\":true}],\"negativeExamples\":[]}",
+          "content": "{\"operationId\":\"widget.shell.configure\",\"schemaVersion\":\"1.0.0\",\"manifestVersion\":\"1.5.0\",\"componentId\":\"praxis-page-builder\",\"ownerPackage\":\"@praxisui/page-builder\",\"configSchemaId\":\"WidgetPageDefinition\",\"chunkSection\":\"operation_card\",\"semanticSummary\":\"Configure widget shell Effects: compile-domain-patch. Rename the employees widget card and enable the refresh shell action.\",\"scope\":\"templating\",\"target\":{\"kind\":\"widgetShell\",\"resolver\":\"widget-shell-by-widget-key\",\"required\":true},\"inputContract\":{\"required\":[\"widgetKey\"],\"properties\":[\"widgetKey\",\"shell\"],\"semanticTerms\":[\"widgetKey\",\"shell\",\"shell.stickyHeader\"]},\"effects\":[\"compile-domain-patch\"],\"affectedPaths\":[\"widgets[].shell\"],\"validators\":[{\"validatorId\":\"widget-exists\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_WIDGET_EXISTS\",\"description\":\"Target widget must exist.\"},{\"validatorId\":\"widget-shell-shape-valid\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_SHELL_SHAPE\",\"description\":\"Widget shell config must match the shell editor contract.\"},{\"validatorId\":\"settings-panel-bridge-available\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_SETTINGS_BRIDGE\",\"description\":\"Settings panel bridge must be available for shell/page editors.\"},{\"validatorId\":\"child-inputs-not-mutated\",\"level\":\"error\",\"code\":\"PAGE_BUILDER_CHILD_INPUTS_NOT_MUTATED\",\"description\":\"Shell edits cannot mutate child inputs.\"}],\"preconditions\":[\"page-loaded\",\"target-widget-exists\"],\"submissionImpact\":\"config-only\",\"presentationAffordances\":[],\"positiveExamples\":[{\"id\":\"configure-widget-shell\",\"request\":\"Rename the employees widget card and enable the refresh shell action.\",\"operationId\":\"widget.shell.configure\",\"target\":\"employees-table\",\"params\":{\"widgetKey\":\"employees-table\",\"shell\":{\"title\":\"Employees\",\"actions\":[{\"id\":\"refresh\"}]}},\"isPositive\":true}],\"negativeExamples\":[]}",
           "sourcePointer": "projects/praxis-page-builder/src/lib/ai/praxis-page-builder-authoring-manifest.ts",
-          "contentHash": "dcc7c6aa2af41e42874984177813703afaa2115744d1d565eb265671bf1d1fbd",
+          "contentHash": "12355c4633b7f09a4c4e46d4edac2f23a2ff0e45b6d2a27251ec93b181e50b6e",
           "sourceKind": "component_definition",
           "sourceId": "praxis-page-builder",
           "corpusVersion": "1.0.0"
@@ -3893,9 +3899,9 @@
         {
           "chunkIndex": 21,
           "chunkKind": "authoring_manifest",
-          "content": "{\"schemaVersion\":\"1.0.0\",\"manifestVersion\":\"1.5.0\",\"componentId\":\"praxis-page-builder\",\"ownerPackage\":\"@praxisui/page-builder\",\"configSchemaId\":\"WidgetPageDefinition\",\"chunkSection\":\"operations\",\"operations\":[{\"operationId\":\"page.configure\",\"title\":\"Configure page metadata\",\"scope\":\"global\",\"targetKind\":\"page\",\"target\":{\"kind\":\"page\",\"resolver\":\"widget-page-definition-root\",\"ambiguityPolicy\":\"fail\",\"required\":false},\"inputSchema\":{\"type\":\"object\",\"properties\":{\"title\":{\"type\":\"string\"},\"layoutPreset\":{\"type\":\"string\"},\"themePreset\":{\"type\":\"string\"},\"context\":{\"type\":\"object\"},\"metadata\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-page-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition\",\"DynamicPageConfigEditorComponent\",\"SettingsPanelBridge\"],\"writes\":[\"page.title\",\"page.layoutPreset\",\"page.themePreset\",\"page.context\",\"page.metadata\"],\"identityKeys\":[\"pageIdentity.componentId\",\"pageIdentity.scope\"],\"inputSchema\":{\"type\":\"object\",\"properties\":{\"title\":{\"type\":\"string\"},\"layoutPreset\":{\"type\":\"string\"},\"themePreset\":{\"type\":\"string\"},\"context\":{\"type\":\"object\"},\"metadata\":{\"type\":\"object\"}}},\"failureModes\":[\"page-not-loaded\",\"context-not-json\",\"settings-panel-bridge-missing\"],\"description\":\"Updates root page metadata while preserving the renderable WidgetPageDefinition shape.\"}}],\"validators\":[\"widget-page-definition-valid\",\"no-legacy-grid-page-definition\",\"page-context-json-valid\",\"settings-panel-round-trip-valid\"],\"affectedPaths\":[\"title\",\"layoutPreset\",\"themePreset\",\"context\",\"metadata\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\"]},{\"operationId\":\"canvas.configure\",\"title\":\"Configure page canvas\",\"scope\":\"layout\",\"targetKind\":\"canvas\",\"target\":{\"kind\":\"canvas\",\"resolver\":\"widget-page-canvas\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"properties\":{\"columns\":{\"type\":\"number\"},\"rowUnit\":{\"type\":\"number\"},\"gap\":{\"type\":\"number\"},\"items\":{\"type\":\"array\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-canvas-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.canvas\",\"DynamicPageBuilderComponent\"],\"writes\":[\"page.canvas.columns\",\"page.canvas.rowUnit\",\"page.canvas.gap\",\"page.canvas.items\"],\"identityKeys\":[\"canvas\"],\"inputSchema\":{\"type\":\"object\",\"properties\":{\"columns\":{\"type\":\"number\"},\"rowUnit\":{\"type\":\"number\"},\"gap\":{\"type\":\"number\"},\"items\":{\"type\":\"array\"}}},\"failureModes\":[\"canvas-missing\",\"canvas-item-references-missing-widget\",\"invalid-grid-geometry\"],\"description\":\"Configures the top-level canvas without introducing legacy GridPageDefinition semantics.\"}}],\"validators\":[\"canvas-columns-integer\",\"canvas-row-unit-valid\",\"canvas-gap-valid\",\"canvas-items-reference-existing-widgets\"],\"affectedPaths\":[\"canvas.columns\",\"canvas.rowUnit\",\"canvas.gap\",\"canvas.items\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\"]},{\"operationId\":\"widget.add\",\"title\":\"Add widget to page\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"componentId\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"componentId\":{\"type\":\"string\"},\"title\":{\"type\":\"string\"},\"inputs\":{\"type\":\"object\"},\"canvasItem\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-add\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetPageDefinition.canvas\",\"ComponentDocRegistry\",\"PAGE_BUILDER_WIDGET_AI_CATALOGS\"],\"writes\":[\"page.widgets[]\",\"page.canvas.items[]\"],\"identityKeys\":[\"widgetKey\"],\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"componentId\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"componentId\":{\"type\":\"string\"},\"title\":{\"type\":\"string\"},\"inputs\":{\"type\":\"object\"},\"canvasItem\":{\"type\":\"object\"}}},\"failureModes\":[\"widget-key-duplicate\",\"component-not-registered\",\"canvas-item-invalid\",\"child-input-contract-unknown\"],\"description\":\"Adds a registered component as a widget and places it on the canvas using a stable widgetKey.\"}}],\"validators\":[\"widget-key-unique\",\"component-registered\",\"canvas-item-valid\",\"child-inputs-delegated\",\"widget-key-not-array-index\"],\"affectedPaths\":[\"widgets[]\",\"canvas.items[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"component-catalog-loaded\"]},{\"operationId\":\"widget.remove\",\"title\":\"Remove widget from page\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"confirmed\":{\"type\":\"boolean\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-remove\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetPageDefinition.canvas.items\",\"WidgetPageDefinition.composition.links\"],\"writes\":[\"page.widgets[]\",\"page.canvas.items[]\",\"page.composition.links[]\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"destructive-removal-not-confirmed\",\"dangling-composition-link\"],\"description\":\"Removes a widget and cleans canvas items and composition links that reference it.\"}}],\"destructive\":true,\"requiresConfirmation\":true,\"validators\":[\"widget-exists\",\"destructive-removal-confirmed\",\"composition-links-cleaned\",\"canvas-items-reference-existing-widgets\"],\"affectedPaths\":[\"widgets[]\",\"canvas.items[]\",\"composition.links[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]},{\"operationId\":\"widget.moveResize\",\"title\":\"Move or resize widget\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"canvasItem\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"canvasItem\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-move-resize\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.canvas.items\",\"WidgetPageDefinition.widgets\"],\"writes\":[\"page.canvas.items[]\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"canvas-item-invalid\",\"canvas-overlap-invalid\"],\"description\":\"Updates canvas placement for an existing widget using widgetKey as the stable identity.\"}}],\"validators\":[\"widget-exists\",\"canvas-item-valid\",\"canvas-item-targets-existing-widget\",\"canvas-overlap-policy-valid\"],\"affectedPaths\":[\"canvas.items[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]},{\"operationId\":\"widget.shell.configure\",\"title\":\"Configure widget shell\",\"scope\":\"templating\",\"targetKind\":\"widgetShell\",\"target\":{\"kind\":\"widgetShell\",\"resolver\":\"widget-shell-by-widget-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"shell\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-shell-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetShellEditorComponent\",\"SettingsPanelBridge\"],\"writes\":[\"page.widgets[].shell\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"settings-panel-bridge-missing\",\"shell-config-invalid\"],\"description\":\"Updates the page-builder-owned widget shell without editing child component inputs.\"}}],\"validators\":[\"widget-exists\",\"widget-shell-shape-valid\",\"settings-panel-bridge-available\",\"child-inputs-not-mutated\"],\"affectedPaths\":[\"widgets[].shell\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]}]}",
+          "content": "{\"schemaVersion\":\"1.0.0\",\"manifestVersion\":\"1.5.0\",\"componentId\":\"praxis-page-builder\",\"ownerPackage\":\"@praxisui/page-builder\",\"configSchemaId\":\"WidgetPageDefinition\",\"chunkSection\":\"operations\",\"operations\":[{\"operationId\":\"page.configure\",\"title\":\"Configure page metadata\",\"scope\":\"global\",\"targetKind\":\"page\",\"target\":{\"kind\":\"page\",\"resolver\":\"widget-page-definition-root\",\"ambiguityPolicy\":\"fail\",\"required\":false},\"inputSchema\":{\"type\":\"object\",\"properties\":{\"title\":{\"type\":\"string\"},\"layoutPreset\":{\"type\":\"string\"},\"themePreset\":{\"type\":\"string\"},\"context\":{\"type\":\"object\"},\"metadata\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-page-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition\",\"DynamicPageConfigEditorComponent\",\"SettingsPanelBridge\"],\"writes\":[\"page.title\",\"page.layoutPreset\",\"page.themePreset\",\"page.context\",\"page.metadata\"],\"identityKeys\":[\"pageIdentity.componentId\",\"pageIdentity.scope\"],\"inputSchema\":{\"type\":\"object\",\"properties\":{\"title\":{\"type\":\"string\"},\"layoutPreset\":{\"type\":\"string\"},\"themePreset\":{\"type\":\"string\"},\"context\":{\"type\":\"object\"},\"metadata\":{\"type\":\"object\"}}},\"failureModes\":[\"page-not-loaded\",\"context-not-json\",\"settings-panel-bridge-missing\"],\"description\":\"Updates root page metadata while preserving the renderable WidgetPageDefinition shape.\"}}],\"validators\":[\"widget-page-definition-valid\",\"no-legacy-grid-page-definition\",\"page-context-json-valid\",\"settings-panel-round-trip-valid\"],\"affectedPaths\":[\"title\",\"layoutPreset\",\"themePreset\",\"context\",\"metadata\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\"]},{\"operationId\":\"canvas.configure\",\"title\":\"Configure page canvas\",\"scope\":\"layout\",\"targetKind\":\"canvas\",\"target\":{\"kind\":\"canvas\",\"resolver\":\"widget-page-canvas\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"properties\":{\"columns\":{\"type\":\"number\"},\"rowUnit\":{\"type\":\"number\"},\"gap\":{\"type\":\"number\"},\"items\":{\"type\":\"array\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-canvas-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.canvas\",\"DynamicPageBuilderComponent\"],\"writes\":[\"page.canvas.columns\",\"page.canvas.rowUnit\",\"page.canvas.gap\",\"page.canvas.items\"],\"identityKeys\":[\"canvas\"],\"inputSchema\":{\"type\":\"object\",\"properties\":{\"columns\":{\"type\":\"number\"},\"rowUnit\":{\"type\":\"number\"},\"gap\":{\"type\":\"number\"},\"items\":{\"type\":\"array\"}}},\"failureModes\":[\"canvas-missing\",\"canvas-item-references-missing-widget\",\"invalid-grid-geometry\"],\"description\":\"Configures the top-level canvas without introducing legacy GridPageDefinition semantics.\"}}],\"validators\":[\"canvas-columns-integer\",\"canvas-row-unit-valid\",\"canvas-gap-valid\",\"canvas-items-reference-existing-widgets\"],\"affectedPaths\":[\"canvas.columns\",\"canvas.rowUnit\",\"canvas.gap\",\"canvas.items\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\"]},{\"operationId\":\"widget.add\",\"title\":\"Add widget to page\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"componentId\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"componentId\":{\"type\":\"string\"},\"title\":{\"type\":\"string\"},\"inputs\":{\"type\":\"object\"},\"canvasItem\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-add\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetPageDefinition.canvas\",\"ComponentDocRegistry\",\"PAGE_BUILDER_WIDGET_AI_CATALOGS\"],\"writes\":[\"page.widgets[]\",\"page.canvas.items[]\"],\"identityKeys\":[\"widgetKey\"],\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"componentId\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"componentId\":{\"type\":\"string\"},\"title\":{\"type\":\"string\"},\"inputs\":{\"type\":\"object\"},\"canvasItem\":{\"type\":\"object\"}}},\"failureModes\":[\"widget-key-duplicate\",\"component-not-registered\",\"canvas-item-invalid\",\"child-input-contract-unknown\"],\"description\":\"Adds a registered component as a widget and places it on the canvas using a stable widgetKey.\"}}],\"validators\":[\"widget-key-unique\",\"component-registered\",\"canvas-item-valid\",\"child-inputs-delegated\",\"widget-key-not-array-index\"],\"affectedPaths\":[\"widgets[]\",\"canvas.items[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"component-catalog-loaded\"]},{\"operationId\":\"widget.remove\",\"title\":\"Remove widget from page\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"confirmed\":{\"type\":\"boolean\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-remove\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetPageDefinition.canvas.items\",\"WidgetPageDefinition.composition.links\"],\"writes\":[\"page.widgets[]\",\"page.canvas.items[]\",\"page.composition.links[]\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"destructive-removal-not-confirmed\",\"dangling-composition-link\"],\"description\":\"Removes a widget and cleans canvas items and composition links that reference it.\"}}],\"destructive\":true,\"requiresConfirmation\":true,\"validators\":[\"widget-exists\",\"destructive-removal-confirmed\",\"composition-links-cleaned\",\"canvas-items-reference-existing-widgets\"],\"affectedPaths\":[\"widgets[]\",\"canvas.items[]\",\"composition.links[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]},{\"operationId\":\"widget.moveResize\",\"title\":\"Move or resize widget\",\"scope\":\"layout\",\"targetKind\":\"widget\",\"target\":{\"kind\":\"widget\",\"resolver\":\"widget-by-stable-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\",\"canvasItem\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"canvasItem\":{\"type\":\"object\"}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-move-resize\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.canvas.items\",\"WidgetPageDefinition.widgets\"],\"writes\":[\"page.canvas.items[]\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"canvas-item-invalid\",\"canvas-overlap-invalid\"],\"description\":\"Updates canvas placement for an existing widget using widgetKey as the stable identity.\"}}],\"validators\":[\"widget-exists\",\"canvas-item-valid\",\"canvas-item-targets-existing-widget\",\"canvas-overlap-policy-valid\"],\"affectedPaths\":[\"canvas.items[]\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]},{\"operationId\":\"widget.shell.configure\",\"title\":\"Configure widget shell\",\"scope\":\"templating\",\"targetKind\":\"widgetShell\",\"target\":{\"kind\":\"widgetShell\",\"resolver\":\"widget-shell-by-widget-key\",\"ambiguityPolicy\":\"fail\",\"required\":true},\"inputSchema\":{\"type\":\"object\",\"required\":[\"widgetKey\"],\"properties\":{\"widgetKey\":{\"type\":\"string\"},\"shell\":{\"type\":\"object\",\"properties\":{\"stickyHeader\":{\"type\":\"boolean\",\"description\":\"Retain the existing header within the widget during page scrolling; suspended for drag authoring, collapsed/overlay states and scroll recovery.\"}}}}},\"effects\":[{\"kind\":\"compile-domain-patch\",\"handler\":\"page-builder-widget-shell-configure\",\"handlerContract\":{\"reads\":[\"WidgetPageDefinition.widgets\",\"WidgetShellEditorComponent\",\"SettingsPanelBridge\"],\"writes\":[\"page.widgets[].shell\"],\"identityKeys\":[\"widgetKey\"],\"failureModes\":[\"widget-not-found\",\"settings-panel-bridge-missing\",\"shell-config-invalid\"],\"description\":\"Updates the page-builder-owned widget shell without editing child component inputs.\"}}],\"validators\":[\"widget-exists\",\"widget-shell-shape-valid\",\"settings-panel-bridge-available\",\"child-inputs-not-mutated\"],\"affectedPaths\":[\"widgets[].shell\"],\"submissionImpact\":\"config-only\",\"preconditions\":[\"page-loaded\",\"target-widget-exists\"]}]}",
           "sourcePointer": "projects/praxis-page-builder/src/lib/ai/praxis-page-builder-authoring-manifest.ts",
-          "contentHash": "274e44542351d7394147fd0337a495141c70e188417a7c4a7cf5bb15d8179ceb",
+          "contentHash": "9c3f606edc681ae101c35f0f28dd14c59a3978e73357a81b1c85080d9280c239",
           "sourceKind": "component_definition",
           "sourceId": "praxis-page-builder",
           "corpusVersion": "1.0.0"

package/fesm2022/praxisui-page-builder.mjs

@@ -363,6 +363,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 const PRAXIS_PAGE_BUILDER_EN_US = {
+    "praxis.pageBuilder.editor.devices.target": "Device to configure",
+    "praxis.pageBuilder.editor.devices.advanced": "Advanced overrides",
+    "praxis.pageBuilder.editor.grouping.canvasNotice": "Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.",
+    "praxis.pageBuilder.editor.devices.stack": "Stack widgets",
+    "praxis.pageBuilder.editor.devices.stackHelp": "Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.",
+    "praxis.pageBuilder.editor.devices.stacked": "Single-column layout prepared. Save to apply; Reset undoes the changes.",
+    'praxis.pageBuilder.shell.menuPlacement': 'More actions menu',
     'praxis.pageBuilder.editor.limits.tab': "Widget limits",
     'praxis.pageBuilder.editor.limits.help': 'Grid limits use columns and rows. Content-row layouts also offer pixel height below. Leave limits blank for defaults or to inherit the base layout.',
     'praxis.pageBuilder.editor.limits.target': "Widget and layout",
@@ -388,6 +395,7 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     'praxis.pageBuilder.editor.limits.errors.columns': "The minimum width exceeds the grid columns.",
     'praxis.pageBuilder.editor.limits.errors.size': "The current size is outside these limits. Resize the widget first, or review the limits.",
     'praxis.pageBuilder.shell.invalidCss': 'Invalid CSS value. Use a valid color, dimension or expression for this field.',
+    'praxis.pageBuilder.shell.stickyHeader': 'Keep header visible while scrolling the page',
     'praxis.pageBuilder.authoringSource.alert.title': 'Semantic lineage requires attention',
     'praxis.pageBuilder.authoringSource.alert.description': 'The page remains available, but this source will not be reused until new governed authoring restores its provenance.',
     'praxis.pageBuilder.authoringSource.diagnostics.authoring-source-schema-invalid': 'The authoring envelope does not match the schema supported by Page Builder.',
@@ -1054,6 +1062,7 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     'praxis.pageBuilder.connections.draft.backToEdit': 'Back to editing',
     'praxis.pageBuilder.connections.draft.present': 'Present diagram',
     'praxis.pageBuilder.connections.draft.title': 'Connection draft',
+    'praxis.pageBuilder.connections.draft.prerequisites': 'Enable the source event in its component settings. For row selection, enable single selection; configure the detail as read-only when needed.',
     'praxis.pageBuilder.connections.draft.help': 'Choose the source and destination. Review the route and delivered value before applying.',
     'praxis.pageBuilder.connections.draft.source': '1 · Source / event',
     'praxis.pageBuilder.connections.draft.target': '2 · Destination / input',
@@ -1092,6 +1101,13 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
 };
 
 const PRAXIS_PAGE_BUILDER_PT_BR = {
+    "praxis.pageBuilder.editor.devices.target": "Dispositivo para configurar",
+    "praxis.pageBuilder.editor.devices.advanced": "Ajustes avançados",
+    "praxis.pageBuilder.editor.grouping.canvasNotice": "As posições no canvas controlam esta página. Os agrupamentos abaixo são preservados para layouts de fluxo e não organizam os widgets no canvas. Para colocá-los lado a lado, use os controles de mover e redimensionar de cada widget.",
+    "praxis.pageBuilder.editor.devices.stack": "Empilhar widgets",
+    "praxis.pageBuilder.editor.devices.stackHelp": "Usa a largura total e altura natural, na ordem de leitura. Substitui as posições e os limites de largura apenas neste dispositivo; os outros layouts são preservados.",
+    "praxis.pageBuilder.editor.devices.stacked": "Layout de uma coluna preparado. Salve para aplicar; Redefinir desfaz os ajustes.",
+    'praxis.pageBuilder.shell.menuPlacement': 'Menu Mais ações',
     'praxis.pageBuilder.editor.limits.tab': "Limites dos widgets",
     'praxis.pageBuilder.editor.limits.help': 'Os limites da grade usam colunas e linhas. Em linhas de conteúdo, a seção de altura também permite pixels. Deixe os limites em branco para usar os padrões ou herdar o layout base.',
     'praxis.pageBuilder.editor.limits.target': "Widget e layout",
@@ -1117,6 +1133,7 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     'praxis.pageBuilder.editor.limits.errors.columns': "A largura mínima ultrapassa as colunas da grade.",
     'praxis.pageBuilder.editor.limits.errors.size': "O tamanho atual está fora destes limites. Redimensione o widget antes ou revise os limites.",
     'praxis.pageBuilder.shell.invalidCss': 'Valor CSS inválido. Use uma cor, medida ou expressão válida para este campo.',
+    'praxis.pageBuilder.shell.stickyHeader': 'Manter cabeçalho visível ao rolar a página',
     'praxis.pageBuilder.authoringSource.alert.title': 'Linhagem semântica requer atenção',
     'praxis.pageBuilder.authoringSource.alert.description': 'A página continua disponível, mas esta fonte não será reutilizada até que uma nova autoria governada restabeleça sua proveniência.',
     'praxis.pageBuilder.authoringSource.diagnostics.authoring-source-schema-invalid': 'O envelope de autoria não atende ao schema suportado pelo Page Builder.',
@@ -1783,6 +1800,7 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     'praxis.pageBuilder.connections.draft.backToEdit': 'Voltar à edição',
     'praxis.pageBuilder.connections.draft.present': 'Apresentar diagrama',
     'praxis.pageBuilder.connections.draft.title': 'Rascunho da conexão',
+    'praxis.pageBuilder.connections.draft.prerequisites': 'Habilite o evento nas configurações do componente de origem. Para seleção de linhas, habilite a seleção única; configure o detalhe como somente leitura quando necessário.',
     'praxis.pageBuilder.connections.draft.help': 'Escolha a origem e o destino. Revise o percurso e o valor entregue antes de aplicar.',
     'praxis.pageBuilder.connections.draft.source': '1 · Origem / evento',
     'praxis.pageBuilder.connections.draft.target': '2 · Destino / entrada',
@@ -2464,9 +2482,13 @@ const SET_INPUT_PRESETS = {
 class WidgetShellEditorComponent {
     registry;
     i18n = inject(PraxisI18nService);
+    menuPlacementLabel() { return this.i18n.t('praxis.pageBuilder.shell.menuPlacement'); }
     appearanceError() {
         return this.i18n.t('praxis.pageBuilder.shell.invalidCss');
     }
+    stickyHeaderLabel() {
+        return this.i18n.t('praxis.pageBuilder.shell.stickyHeader');
+    }
     form = new FormGroup({
         kind: new FormControl('dashboard-card', {
             nonNullable: true,
@@ -2479,6 +2501,7 @@ class WidgetShellEditorComponent {
         showHeader: new FormControl('auto', {
             nonNullable: true,
         }),
+        stickyHeader: new FormControl(false, { nonNullable: true }),
         collapsible: new FormControl(true, { nonNullable: true }),
         cardBg: new FormControl('', { nonNullable: true }),
         cardBorder: new FormControl('', { nonNullable: true }),
@@ -2636,6 +2659,7 @@ class WidgetShellEditorComponent {
             subtitle: this.editableText(shell?.subtitle),
             icon: shell?.icon || '',
             showHeader,
+            stickyHeader: shell?.stickyHeader === true,
             collapsible: window.collapsible !== false,
             cardBg: card.background || '',
             cardBorder: card.borderColor || '',
@@ -2737,6 +2761,7 @@ class WidgetShellEditorComponent {
             delete shell.subtitle;
             delete shell.icon;
             delete shell.showHeader;
+            delete shell.stickyHeader;
             if (raw.preset)
                 shell.preset = raw.preset;
             const title = this.preserveTextDescriptor(this.initialTitle, raw.title);
@@ -2749,6 +2774,8 @@ class WidgetShellEditorComponent {
                 shell.icon = raw.icon.trim();
             if (raw.showHeader !== 'auto')
                 shell.showHeader = raw.showHeader === 'true';
+            if (raw.stickyHeader)
+                shell.stickyHeader = true;
             const windowActions = {
                 ...(initial?.windowActions || {}),
             };
@@ -2933,7 +2960,7 @@ class WidgetShellEditorComponent {
     }
     previewOverflowCount() {
         const actions = this.previewActions().filter((a) => (a.placement || 'header') === 'header');
-        return Math.max(0, actions.length - 3);
+        return Math.max(0, actions.length - 3) + this.previewActions().filter(a => a.placement === 'menu').length;
     }
     previewWindowActions() {
         return this.previewActions().filter((a) => (a.placement || 'header') === 'window');
@@ -3221,6 +3248,9 @@ class WidgetShellEditorComponent {
               <mat-option value="false">Nunca</mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-checkbox [formControl]="form.controls.stickyHeader">
+            {{ stickyHeaderLabel() }}
+          </mat-checkbox>
         </div>
 
         <div class="shell-section">Controles de janela</div>
@@ -3684,6 +3714,7 @@ class WidgetShellEditorComponent {
                   <mat-select formControlName="placement">
                     <mat-option value="header">Cabeçalho</mat-option>
                     <mat-option value="window">Janela</mat-option>
+                    <mat-option value="menu">{{ menuPlacementLabel() }}</mat-option>
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
@@ -3831,6 +3862,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <mat-option value="false">Nunca</mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-checkbox [formControl]="form.controls.stickyHeader">
+            {{ stickyHeaderLabel() }}
+          </mat-checkbox>
         </div>
 
         <div class="shell-section">Controles de janela</div>
@@ -4294,6 +4328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   <mat-select formControlName="placement">
                     <mat-option value="header">Cabeçalho</mat-option>
                     <mat-option value="window">Janela</mat-option>
+                    <mat-option value="menu">{{ menuPlacementLabel() }}</mat-option>
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
@@ -4487,13 +4522,24 @@ function deriveConnectionEditorGraph(page, options = {}) {
         const angle = (index / count) * Math.PI * 2 - Math.PI / 2;
         const widgetId = widget.key;
         const componentType = widget.definition?.id ?? 'unknown';
-        const inputs = Object.keys(widget.definition?.inputs ?? {});
+        const metadata = options.componentMetadata?.(componentType);
+        const contracts = (metadata?.ports ?? []).filter(port => port.exposure?.public !== false && !port.exposure?.deprecated);
+        const inputs = uniqueStrings([
+            ...contracts.filter(port => port.direction === 'input').map(port => port.id),
+            ...(contracts.length ? [] : metadata?.inputs ?? []).map(input => input.name),
+            ...Object.keys(widget.definition?.inputs ?? {}),
+        ]);
         const outputs = uniqueStrings([
+            ...contracts.filter(port => port.direction === 'output').map(port => port.id),
+            ...(contracts.length ? [] : metadata?.outputs ?? []).map(output => output.name),
             ...Object.keys(widget.definition?.outputs ?? {}),
             ...configuredWidgetEventOutputs(widget),
         ]);
-        const outputPorts = (outputs.length ? outputs : ['change']).map((port) => componentPort(widgetId, port, 'output', componentType));
-        const inputPorts = prioritizedInputPorts(inputs).map((port) => componentPort(widgetId, port, 'input', componentType));
+        const outputPorts = (outputs.length || metadata ? outputs : ['change']).map((port) => componentPort(widgetId, port, 'output', componentType));
+        const inputPorts = (metadata ? inputs : prioritizedInputPorts(inputs)).map((port) => componentPort(widgetId, port, 'input', componentType));
+        for (const port of [...inputPorts, ...outputPorts]) {
+            port.contract = contracts.find(contract => contract.id === port.label && contract.direction === port.kind);
+        }
         for (const nested of collectNestedWidgets(widget)) {
             const nestedComponentType = nested.definition.id ?? nested.path.find((segment) => segment.kind === 'widget')?.componentType;
             const nestedPrefix = nested.definition.childWidgetKey
@@ -4787,6 +4833,17 @@ function buildCompositionLinkFromPorts(source, target, links) {
     };
 }
 function inferCanonicalTransform(source, target) {
+    if (source.kind === 'output' && target.kind === 'input'
+        && source.contract?.resourceQueryFieldSource && target.contract?.semanticKind === 'query-context') {
+        return {
+            id: `${source.nodeId}-${target.nodeId}-filter-query-projection`,
+            version: '2.0', phase: 'link-propagation', mode: 'object-fragment',
+            sourceBindings: [{ source: 'event' }],
+            steps: [{ id: 'shape-filter-query', kind: 'object-template', phase: 'link-propagation',
+                    input: { source: 'event' }, config: { template: { filters: '${payload}' } } }],
+            output: { semanticKind: 'query-context', cardinality: 'one', stableShape: true, materializationHint: 'replace' },
+        };
+    }
     if (!isTableRowSelectionToFormResourceId(source, target)) {
         return undefined;
     }
@@ -5946,6 +6003,7 @@ class ConnectionEditorComponent {
     }, ...(ngDevMode ? [{ debugName: "visibleEdges" }] : /* istanbul ignore next */ []));
     selectedEdge = computed(() => this.model().edges.find((edge) => edge.id === this.selectedLinkId()) ?? null, ...(ngDevMode ? [{ debugName: "selectedEdge" }] : /* istanbul ignore next */ []));
     editorGraph = computed(() => deriveConnectionEditorGraph(this.workingPage(), {
+        componentMetadata: componentType => this.componentRegistry.get(componentType),
         stateNodeTitle: this.tx('connections.editor.stateNode', 'Page state'),
         globalActionIds: this.availableGlobalActionIds(),
         widgetTitle: widget => {
@@ -5953,7 +6011,10 @@ class ConnectionEditorComponent {
             if (title && !title.includes('${'))
                 return title;
             const metadata = this.componentRegistry.get(widget.definition.id);
-            return metadata ? `${metadata.friendlyName} · ${widget.key}` : widget.key;
+            if (!metadata)
+                return widget.key;
+            const peers = (this.workingPage()?.widgets ?? []).filter(peer => peer.definition.id === widget.definition.id);
+            return peers.length > 1 ? `${metadata.friendlyName} ${peers.findIndex(peer => peer.key === widget.key) + 1}` : metadata.friendlyName;
         },
     }), ...(ngDevMode ? [{ debugName: "editorGraph" }] : /* istanbul ignore next */ []));
     connectedNodeIds = computed(() => {
@@ -9103,6 +9164,7 @@ class ConnectionEditorComponent {
                 @for (port of draftTargets(); track port.id) { <option [value]="port.id">{{ draftPortLabel(port) }}</option> }
               </select>
             </label>
+            <p>{{ tx('connections.draft.prerequisites', 'Enable the source event in its component settings. For row selection, enable single selection; configure the detail as read-only when needed.') }}</p>
             @if (selectedConnection(); as connection) {
               <div class="connection-editor__draft-review">
                 <span>{{ tx('connections.draft.review', 'Review the route') }}</span>
@@ -10737,6 +10799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 @for (port of draftTargets(); track port.id) { <option [value]="port.id">{{ draftPortLabel(port) }}</option> }
               </select>
             </label>
+            <p>{{ tx('connections.draft.prerequisites', 'Enable the source event in its component settings. For row selection, enable single selection; configure the detail as read-only when needed.') }}</p>
             @if (selectedConnection(); as connection) {
               <div class="connection-editor__draft-review">
                 <span>{{ tx('connections.draft.review', 'Review the route') }}</span>
@@ -11789,9 +11852,12 @@ class DynamicPageConfigEditorComponent {
     limitsError = signal(null, ...(ngDevMode ? [{ debugName: "limitsError" }] : /* istanbul ignore next */ []));
     limitsErrorMatcher = { isErrorState: (control) => !!control?.invalid };
     injectedData = inject(SETTINGS_PANEL_DATA$1, { optional: true });
+    isHostedInSettingsPanel = this.injectedData != null;
     i18n = inject(PraxisI18nService);
     pageInput = null;
     snapshot = '';
+    stackedDevices = new Set();
+    activeDevice = signal('mobile', ...(ngDevMode ? [{ debugName: "activeDevice" }] : /* istanbul ignore next */ []));
     hydrating = false;
     renderedCandidate = null;
     renderedValidationFingerprint = '';
@@ -11808,6 +11874,19 @@ class DynamicPageConfigEditorComponent {
     get validationStateLabel() { const issue = this.limitsError() || this.canvasError() || this.groupingError() || this.deviceError() || this.contextError() || this.stateError(); if (issue)
         return this.tx('editor.status.validationIssue', 'Review: {{issue}}').replace('{{issue}}', issue); return this.isValid$.value ? this.tx('editor.status.valid', 'Valid configuration') : this.tx('editor.status.review', 'Review errors before saving'); }
     get dirtyStateLabel() { return this.hasPendingChanges ? this.tx('editor.status.pending', 'Pending changes') : this.tx('editor.status.clean', 'No changes'); }
+    get nonLimitError() {
+        return this.canvasError() || this.groupingError() || this.deviceError() || this.contextError() || this.stateError();
+    }
+    get limitsSummaryError() {
+        const message = this.limitsError();
+        const form = this.canvasLimits.form.at(this.limitsTargetControl.value);
+        // A rendered-height diagnostic is already attached to the visible height field.
+        // Keep the summary for a different target or a field hidden by the current mode.
+        return form?.controls.heightMode.value === 'fixed'
+            && this.limitsUseContentHeight()
+            && form.controls.heightPx.getError('canvasLimit') === 'rendered-height'
+            ? null : message;
+    }
     get selectedLayoutPresetLabel() { return this.tx('editor.summary.layout', 'Layout: {{label}}').replace('{{label}}', this.lookupPresetLabel(this.layoutPresetEntries, this.layoutPresetControl.value, this.tx('editor.fallback.manual', 'manual'))); }
     get selectedThemePresetLabel() { return this.tx('editor.summary.theme', 'Theme: {{label}}').replace('{{label}}', this.lookupPresetLabel(this.themePresetEntries, this.themePresetControl.value, this.tx('editor.layout.layoutDefault', 'Layout default'))); }
     get selectedLayoutPresetEntry() { return this.layoutPresetEntries.find((entry) => entry.id === this.layoutPresetControl.value) || null; }
@@ -11820,6 +11899,38 @@ class DynamicPageConfigEditorComponent {
     reset() { this.hydrate(); }
     pinRecommendedThemePreset() { const theme = this.recommendedThemePresetEntry; if (theme)
         this.themePresetControl.setValue(theme.id); }
+    get hasCanvasWidgets() { return !!this.currentPageInput()?.widgets.length; }
+    stackDevice(device) {
+        this.hydrating = true;
+        this.stackedDevices.add(device);
+        this.deviceForms[device].patchValue({ columns: 1, autoRows: 'content' }, { emitEvent: false });
+        for (const [index, target] of this.canvasLimits.targets.entries()) {
+            if (target.scope !== device)
+                continue;
+            this.canvasLimits.form.at(index).patchValue({
+                minColSpan: 1, maxColSpan: 1,
+                heightMode: 'auto', heightPx: null, offsetTopPx: null,
+            }, { emitEvent: false });
+        }
+        this.hydrating = false;
+        this.refreshPanelState();
+    }
+    stackedCanvas(device, previous) {
+        const page = this.currentPageInput() || { widgets: [] };
+        const source = this.completeCanvasItems(page);
+        const widgetOverrides = this.parseWidgetOverrides(this.deviceForms[device].controls.widgetOverrides.value);
+        const items = this.clone(previous.items || {});
+        let row = 1;
+        for (const [key] of Object.entries(source).sort(([aKey, a], [bKey, b]) => a.row - b.row || a.col - b.col || aKey.localeCompare(bKey))) {
+            if (!page.widgets.some(widget => widget.key === key) || items[key]?.hidden || widgetOverrides?.[key]?.hidden)
+                continue;
+            const rowSpan = items[key]?.rowSpan ?? source[key].rowSpan;
+            items[key] = { ...items[key], col: 1, row, colSpan: 1, rowSpan, contentSize: 'auto',
+                constraints: { ...items[key]?.constraints, minColSpan: 1, maxColSpan: 1 } };
+            row += rowSpan;
+        }
+        return { ...previous, items };
+    }
     addGroupingNode(seed) { this.groupingNodes.push(this.createGroupingNodeGroup(seed)); this.refreshPanelState(); }
     removeGroupingNode(index) { this.groupingNodes.removeAt(index); this.refreshPanelState(); }
     layoutPresetSummary(preset) { return this.tx('editor.preview.layoutSummary', '{{columns}} columns · {{gap}}').replace('{{columns}}', String(preset.defaultColumns)).replace('{{gap}}', preset.defaultGap || this.tx('editor.preview.defaultGap', 'default gap')); }
@@ -11858,7 +11969,7 @@ class DynamicPageConfigEditorComponent {
             this.layoutPresetControl.value, this.themePresetControl.value, this.shellPresetControl.value,
             this.contextControl.value, this.stateControl.value, this.groupingNodes.getRawValue(),
             this.deviceKeys.map(key => this.deviceForms[key].getRawValue()),
-            this.canvasLimits.form.getRawValue(),
+            this.canvasLimits.form.getRawValue(), [...this.stackedDevices],
         ]);
     }
     limitsGeometryLabel() {
@@ -11933,7 +12044,7 @@ class DynamicPageConfigEditorComponent {
     }
     createDeviceVariantForm() { return new FormGroup({ columns: new FormControl(null, { validators: [Validators.min(1), integerColumnValidator] }), rowUnit: new FormControl('', { nonNullable: true }), gap: new FormControl('', { nonNullable: true }), autoRows: new FormControl('', { nonNullable: true }), groupingOverrides: new FormControl('', { nonNullable: true }), widgetOverrides: new FormControl('', { nonNullable: true }) }); }
     createGroupingNodeGroup(seed) { const label = seed && 'label' in seed && typeof seed.label === 'string' ? seed.label : ''; return new FormGroup({ kind: new FormControl(seed?.kind || 'section', { nonNullable: true }), id: new FormControl(seed?.id || '', { nonNullable: true, validators: [Validators.required] }), label: new FormControl(label, { nonNullable: true }), widgetKeysCsv: new FormControl(this.stringifyGroupingWidgetKeys(seed), { nonNullable: true }), layout: new FormControl(seed?.kind === 'section' ? seed.layout || '' : '', { nonNullable: true }), emphasis: new FormControl(seed?.kind === 'hero' ? seed.emphasis || '' : '', { nonNullable: true }), side: new FormControl(seed?.kind === 'rail' ? seed.side || 'right' : 'right', { nonNullable: true }), tabsJson: new FormControl(seed?.kind === 'tabs' ? JSON.stringify(seed.tabs || [], null, 2) : '', { nonNullable: true }) }); }
-    hydrate() { const page = this.currentPageInput() || { widgets: [] }; const canvas = page.canvas || this.defaultCanvas(); const context = this.clone(page.context || {}); this.hydrating = true; this.canvasLimits.hydrate(page); this.limitsTargetControl.setValue(0, { emitEvent: false }); this.limitsError.set(null); this.canvasColumnsControl.setValue(canvas.columns || 12, { emitEvent: false }); this.canvasRowUnitControl.setValue(canvas.rowUnit || '80px', { emitEvent: false }); this.canvasGapControl.setValue(canvas.gap || '16px', { emitEvent: false }); this.canvasAutoRowsControl.setValue(canvas.autoRows || 'fixed', { emitEvent: false }); this.layoutPresetControl.setValue(page.layoutPreset || '', { emitEvent: false }); this.themePresetControl.setValue(page.themePreset || '', { emitEvent: false }); this.shellPresetControl.setValue(this.extractShellPreset(context) || this.pagePreset || '', { emitEvent: false }); this.replaceGroupingNodes(page.grouping); this.contextControl.setValue(this.stringify(this.removeShellPresetFromContext(context)), { emitEvent: false }); this.stateControl.setValue(this.stringify(page.state || {}), { emitEvent: false }); for (const device of this.deviceKeys) {
+    hydrate() { this.stackedDevices.clear(); const page = this.currentPageInput() || { widgets: [] }; const canvas = page.canvas || this.defaultCanvas(); const context = this.clone(page.context || {}); this.hydrating = true; this.canvasLimits.hydrate(page); this.limitsTargetControl.setValue(0, { emitEvent: false }); this.limitsError.set(null); this.canvasColumnsControl.setValue(canvas.columns || 12, { emitEvent: false }); this.canvasRowUnitControl.setValue(canvas.rowUnit || '80px', { emitEvent: false }); this.canvasGapControl.setValue(canvas.gap || '16px', { emitEvent: false }); this.canvasAutoRowsControl.setValue(canvas.autoRows || 'fixed', { emitEvent: false }); this.layoutPresetControl.setValue(page.layoutPreset || '', { emitEvent: false }); this.themePresetControl.setValue(page.themePreset || '', { emitEvent: false }); this.shellPresetControl.setValue(this.extractShellPreset(context) || this.pagePreset || '', { emitEvent: false }); this.replaceGroupingNodes(page.grouping); this.contextControl.setValue(this.stringify(this.removeShellPresetFromContext(context)), { emitEvent: false }); this.stateControl.setValue(this.stringify(page.state || {}), { emitEvent: false }); for (const device of this.deviceKeys) {
         const variant = page.deviceLayouts?.[device];
         this.deviceForms[device].setValue({ columns: variant?.canvas?.columns ?? null, rowUnit: variant?.canvas?.rowUnit || '', gap: variant?.canvas?.gap || '', autoRows: variant?.canvas?.autoRows || '', groupingOverrides: this.stringify(variant?.groupingOverrides || []), widgetOverrides: this.stringify(variant?.widgetOverrides || {}) }, { emitEvent: false });
     } this.canvasError.set(null); this.groupingError.set(null); this.deviceError.set(null); this.contextError.set(null); this.stateError.set(null); this.hydrating = false; this.refreshPanelState(true); }
@@ -11944,7 +12055,7 @@ class DynamicPageConfigEditorComponent {
         return null; this.groupingError.set(null); const context = this.parseRecordJson(this.contextControl.value, {}); if (context === null)
         return this.invalidate('context', this.contextError, reportErrors, this.tx('editor.errors.contextInvalid', 'Invalid context')); this.contextError.set(null); const state = this.parseRecordJson(this.stateControl.value, {}); if (state === null)
         return this.invalidate('state', this.stateError, reportErrors, this.tx('editor.errors.stateInvalid', 'Invalid state')); this.stateError.set(null); const deviceLayouts = this.buildDeviceLayouts(reportErrors, next.deviceLayouts); if (deviceLayouts === null)
-        return null; next.canvas = { ...(next.canvas || this.defaultCanvas()), mode: 'grid', columns: this.canvasColumnsControl.value, rowUnit: this.canvasRowUnitControl.value.trim() || '80px', gap: this.canvasGapControl.value.trim() || '16px', autoRows: this.canvasAutoRowsControl.value, items: next.canvas?.items || {} }; next.layoutPreset = this.layoutPresetControl.value.trim() || undefined; next.themePreset = this.themePresetControl.value.trim() || undefined; next.grouping = grouping.length ? grouping : undefined; next.deviceLayouts = Object.keys(deviceLayouts).length ? deviceLayouts : undefined; next.context = this.applyShellPresetToContext(context, this.shellPresetControl.value.trim()); next.state = Object.keys(state).length ? state : undefined; return this.applyCanvasLimits(next, reportErrors); }
+        return null; next.canvas = { ...(next.canvas || this.defaultCanvas()), mode: 'grid', columns: this.canvasColumnsControl.value, rowUnit: this.canvasRowUnitControl.value.trim() || '80px', gap: this.canvasGapControl.value.trim() || '16px', autoRows: this.canvasAutoRowsControl.value, items: this.completeCanvasItems(next) }; next.layoutPreset = this.layoutPresetControl.value.trim() || undefined; next.themePreset = this.themePresetControl.value.trim() || undefined; next.grouping = grouping.length ? grouping : undefined; next.deviceLayouts = Object.keys(deviceLayouts).length ? deviceLayouts : undefined; next.context = this.applyShellPresetToContext(context, this.shellPresetControl.value.trim()); next.state = Object.keys(state).length ? state : undefined; return this.applyCanvasLimits(next, reportErrors); }
     buildGrouping(reportErrors) { const grouping = []; const seenIds = new Set(); for (const group of this.groupingNodes.controls) {
         const kind = group.controls.kind.value;
         const id = group.controls.id.value.trim();
@@ -11974,6 +12085,18 @@ class DynamicPageConfigEditorComponent {
         }
         grouping.push({ kind: 'rail', id, side: (group.controls.side.value || 'right'), widgetKeys });
     } return grouping; }
+    /** A grid must place every existing widget before replacing the flow layout. */
+    completeCanvasItems(page) {
+        const items = { ...(page.canvas?.items || {}) };
+        let row = Math.max(1, ...Object.values(items).map(item => item.row + item.rowSpan));
+        for (const widget of page.widgets) {
+            if (items[widget.key])
+                continue;
+            items[widget.key] = { col: 1, row, colSpan: this.canvasColumnsControl.value, rowSpan: 1 };
+            row += 1;
+        }
+        return items;
+    }
     buildDeviceLayouts(reportErrors, base) { const next = {}; for (const device of this.deviceKeys) {
         const form = this.deviceForms[device];
         if (form.controls.columns.invalid)
@@ -11987,7 +12110,7 @@ class DynamicPageConfigEditorComponent {
         delete baseVariant.canvas;
         delete baseVariant.groupingOverrides;
         delete baseVariant.widgetOverrides;
-        const canvas = { ...baseCanvas };
+        const canvas = this.stackedDevices.has(device) ? this.stackedCanvas(device, baseCanvas) : { ...baseCanvas };
         if (form.controls.columns.value != null)
             canvas.columns = form.controls.columns.value;
         else
@@ -12075,27 +12198,68 @@ class DynamicPageConfigEditorComponent {
         next.ui.shell.preset = shellPreset;
     } return Object.keys(next).length ? next : undefined; }
     lookupPresetLabel(entries, value, fallback) { return entries.find((entry) => entry.id === value)?.label || fallback; }
-    defaultCanvas() { return { mode: 'grid', columns: 12, rowUnit: '80px', gap: '16px', autoRows: 'fixed', items: {} }; }
+    defaultCanvas() { return { mode: 'grid', columns: 12, rowUnit: '80px', gap: '16px', autoRows: 'content', items: {} }; }
     clone(value) { if (value == null || typeof value !== 'object')
         return value; return JSON.parse(JSON.stringify(value)); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicPageConfigEditorComponent, isStandalone: true, selector: "praxis-dynamic-page-config-editor", inputs: { page: "page", layout: "layout", presets: "presets", pagePreset: "pagePreset" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "refreshRenderedValidation()" } }, providers: [providePraxisPageBuilderI18n()], ngImport: i0, template: `
     <div class="editor">
-      <div class="head">
+      @if (!isHostedInSettingsPanel) { <div class="head">
         <div>{{ tx('editor.title', 'Page settings') }}</div>
         <button mat-stroked-button type="button" (click)="reset()">{{ tx('editor.reload', 'Reload') }}</button>
-      </div>
-      <div class="summary" [attr.aria-label]="tx('editor.summaryAria', 'Configuration summary')">
-        <span>{{ validationStateLabel }}</span>
-        <span>{{ dirtyStateLabel }}</span>
+      </div> }
+      <details class="summary-details">
+      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>
+      <div class="summary">
+        @if (!isHostedInSettingsPanel) {
+          <span>{{ validationStateLabel }}</span>
+          <span>{{ dirtyStateLabel }}</span>
+        }
         <span>{{ selectedLayoutPresetLabel }}</span>
         <span>{{ selectedThemePresetLabel }}</span>
         <span>{{ canvasSummaryLabel }}</span>
       </div>
-      <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
+      </details>
+      @if (nonLimitError) { <p class="limits-error" role="alert">{{ nonLimitError }}</p> }
+      @if (activeTab() === 'limits' && canvasLimits.targets.length) {
+        <div class="selection-identity" data-testid="canvas-limits-identity">
+          <mat-icon aria-hidden="true">dashboard_customize</mat-icon>
+          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>
+        </div>
+      }
+      <mat-tab-group class="editor-tabs" [mat-stretch-tabs]="false" [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
         <mat-tab [label]="tx('editor.tabs.layout', 'Layout')"><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="canvasColumnsControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="canvasRowUnitControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]="canvasGapControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="canvasAutoRowsControl"><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.layoutPreset', 'Layout preset') }}</mat-label><mat-select [formControl]="layoutPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of layoutPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label><mat-select [formControl]="themePresetControl"><mat-option value="">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</mat-option>@for (preset of themePresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label><mat-select [formControl]="shellPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of shellPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field></div>@if (selectedLayoutPresetEntry; as preset) {<div class="preset-preview"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.layoutEyebrow', 'Layout template') }} · {{ preset.category }}</span><strong>{{ preset.label }}</strong></div><span>{{ layoutPresetSummary(preset) }}</span></div><p>{{ preset.description || tx('editor.preview.layoutFallbackDescription', 'Page organization preset.') }}</p><div class="preset-preview__chips"><span>{{ slotsSummary(preset) }}</span><span>{{ requiredSlotsSummary(preset) }}</span><span>{{ devicePolicySummary(preset) }}</span></div>@if (recommendedThemePresetEntry; as theme) {<div class="preset-preview__recommendation"><div><span class="eyebrow">{{ tx('editor.preview.inheritedTheme', 'Inherited theme') }}</span><strong>{{ theme.label }}</strong><span>{{ inheritedThemeHelp(theme) }}</span></div><button mat-stroked-button type="button" [disabled]="themePresetControl.value === theme.id" (click)="pinRecommendedThemePreset()">{{ tx('editor.preview.pinTheme', 'Pin theme') }}</button></div>}</div>} @if (selectedThemePresetEntry; as theme) {<div class="preset-preview preset-preview--theme"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.explicitTheme', 'Explicit theme') }}</span><strong>{{ theme.label }}</strong></div><span>{{ theme.density }} · {{ theme.motion }}</span></div><p>{{ theme.description || tx('editor.preview.themeFallbackDescription', 'Page visual preset.') }}</p><div class="preset-preview__chips"><span>{{ tx('editor.preview.shellChip', 'Shell: {{value}}').replace('{{value}}', theme.shellPreset) }}</span><span>{{ tx('editor.preview.chartsChip', 'Charts: {{value}}').replace('{{value}}', theme.chartThemePreset) }}</span></div></div>}</mat-tab>
-        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
-        <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')"><div class="panel">@for (device of deviceKeys; track device) {<div class="card"><div>{{ deviceLabels[device] }}</div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field></div><div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel">
+          <p class="hint" data-testid="canvas-grouping-notice">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')">
+          <div class="panel">
+            <mat-button-toggle-group [value]="activeDevice()" (change)="activeDevice.set($event.value)" [attr.aria-label]="tx('editor.devices.target', 'Device to configure')">
+              @for (device of deviceKeys; track device) {
+                <mat-button-toggle [value]="device">{{ deviceLabels[device] }}</mat-button-toggle>
+              }
+            </mat-button-toggle-group>
+            @for (device of deviceKeys; track device) {
+              @if (activeDevice() === device) {
+                <div class="card">
+                  <div class="head"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type="button" [attr.data-testid]="'stack-device-' + device" [disabled]="!hasCanvasWidgets" (click)="stackDevice(device)"><mat-icon aria-hidden="true">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>
+                  <p class="hint">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>
+                  @if (stackedDevices.has(device)) { <p class="hint" role="status">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }
+                  <div class="grid">
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field>
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field>
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>
+                  </div>
+                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class="grid">
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field>
+                    <mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field>
+                    <mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field>
+                  </div></details>
+                  @if (!stackedDevices.has(device)) { <div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }
+                </div>
+              }
+            }
+          </div>
+        </mat-tab>
         <mat-tab [label]="tx('editor.tabs.context', 'Context')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows="12" [formControl]="contextControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.tabs.state', 'Page State')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label><textarea matInput rows="14" [formControl]="stateControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.limits.tab', 'Widget limits')">
@@ -12169,7 +12333,7 @@ class DynamicPageConfigEditorComponent {
                   </div>
                 }
               }
-              @if (limitsError()) { <p class="limits-error" role="alert">{{ limitsError() }}</p> }
+              @if (limitsSummaryError) { <p class="limits-error" role="alert">{{ limitsSummaryError }}</p> }
             } @else {
               <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>
             }
@@ -12177,27 +12341,68 @@ class DynamicPageConfigEditorComponent {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [":host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary,.preset-preview__head,.preset-preview__recommendation{align-items:stretch}.head>button,.preset-preview__recommendation button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary,.preset-preview__head,.preset-preview__recommendation{align-items:stretch}.head>button,.preset-preview__recommendation button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-dynamic-page-config-editor', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatTabsModule, PraxisIconButtonComponent], providers: [providePraxisPageBuilderI18n()], template: `
     <div class="editor">
-      <div class="head">
+      @if (!isHostedInSettingsPanel) { <div class="head">
         <div>{{ tx('editor.title', 'Page settings') }}</div>
         <button mat-stroked-button type="button" (click)="reset()">{{ tx('editor.reload', 'Reload') }}</button>
-      </div>
-      <div class="summary" [attr.aria-label]="tx('editor.summaryAria', 'Configuration summary')">
-        <span>{{ validationStateLabel }}</span>
-        <span>{{ dirtyStateLabel }}</span>
+      </div> }
+      <details class="summary-details">
+      <summary>{{ tx('editor.summaryAria', 'Configuration summary') }}</summary>
+      <div class="summary">
+        @if (!isHostedInSettingsPanel) {
+          <span>{{ validationStateLabel }}</span>
+          <span>{{ dirtyStateLabel }}</span>
+        }
         <span>{{ selectedLayoutPresetLabel }}</span>
         <span>{{ selectedThemePresetLabel }}</span>
         <span>{{ canvasSummaryLabel }}</span>
       </div>
-      <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
+      </details>
+      @if (nonLimitError) { <p class="limits-error" role="alert">{{ nonLimitError }}</p> }
+      @if (activeTab() === 'limits' && canvasLimits.targets.length) {
+        <div class="selection-identity" data-testid="canvas-limits-identity">
+          <mat-icon aria-hidden="true">dashboard_customize</mat-icon>
+          <strong>{{ limitsTargetLabel(limitsTargetControl.value) }}</strong>
+        </div>
+      }
+      <mat-tab-group class="editor-tabs" [mat-stretch-tabs]="false" [selectedIndex]="selectedTabIndex" (selectedIndexChange)="onSelectedTabIndexChange($event)">
         <mat-tab [label]="tx('editor.tabs.layout', 'Layout')"><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.cols', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="canvasColumnsControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="canvasRowUnitControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.gap', 'Gap') }}</mat-label><input matInput [formControl]="canvasGapControl" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="canvasAutoRowsControl"><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.layoutPreset', 'Layout preset') }}</mat-label><mat-select [formControl]="layoutPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of layoutPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.themePreset', 'Theme preset') }}</mat-label><mat-select [formControl]="themePresetControl"><mat-option value="">{{ tx('editor.layout.layoutDefault', 'Layout default') }}</mat-option>@for (preset of themePresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.shellPreset', 'Shell visual preset') }}</mat-label><mat-select [formControl]="shellPresetControl"><mat-option value="">{{ tx('editor.layout.none', 'None') }}</mat-option>@for (preset of shellPresetEntries; track preset.id) {<mat-option [value]="preset.id">{{ preset.label }}</mat-option>}</mat-select></mat-form-field></div>@if (selectedLayoutPresetEntry; as preset) {<div class="preset-preview"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.layoutEyebrow', 'Layout template') }} · {{ preset.category }}</span><strong>{{ preset.label }}</strong></div><span>{{ layoutPresetSummary(preset) }}</span></div><p>{{ preset.description || tx('editor.preview.layoutFallbackDescription', 'Page organization preset.') }}</p><div class="preset-preview__chips"><span>{{ slotsSummary(preset) }}</span><span>{{ requiredSlotsSummary(preset) }}</span><span>{{ devicePolicySummary(preset) }}</span></div>@if (recommendedThemePresetEntry; as theme) {<div class="preset-preview__recommendation"><div><span class="eyebrow">{{ tx('editor.preview.inheritedTheme', 'Inherited theme') }}</span><strong>{{ theme.label }}</strong><span>{{ inheritedThemeHelp(theme) }}</span></div><button mat-stroked-button type="button" [disabled]="themePresetControl.value === theme.id" (click)="pinRecommendedThemePreset()">{{ tx('editor.preview.pinTheme', 'Pin theme') }}</button></div>}</div>} @if (selectedThemePresetEntry; as theme) {<div class="preset-preview preset-preview--theme"><div class="preset-preview__head"><div><span class="eyebrow">{{ tx('editor.preview.explicitTheme', 'Explicit theme') }}</span><strong>{{ theme.label }}</strong></div><span>{{ theme.density }} · {{ theme.motion }}</span></div><p>{{ theme.description || tx('editor.preview.themeFallbackDescription', 'Page visual preset.') }}</p><div class="preset-preview__chips"><span>{{ tx('editor.preview.shellChip', 'Shell: {{value}}').replace('{{value}}', theme.shellPreset) }}</span><span>{{ tx('editor.preview.chartsChip', 'Charts: {{value}}').replace('{{value}}', theme.chartThemePreset) }}</span></div></div>}</mat-tab>
-        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel"><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
-        <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')"><div class="panel">@for (device of deviceKeys; track device) {<div class="card"><div>{{ deviceLabels[device] }}</div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field></div><div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.grouping', 'Grouping')"><div class="panel">
+          <p class="hint" data-testid="canvas-grouping-notice">{{ tx('editor.grouping.canvasNotice', 'Canvas positions control this page. Groups below are preserved for flow layouts and do not arrange widgets in the canvas. Use the widget move and resize controls to place them side by side.') }}</p><div class="head"><span>{{ tx('editor.grouping.title', 'Grouping') }}</span><button mat-stroked-button type="button" (click)="addGroupingNode()"><mat-icon>add</mat-icon>{{ tx('editor.grouping.add', 'Add group') }}</button></div>@for (group of groupingNodes.controls; track $index) {<div class="card" [formGroup]="group"><div class="head"><span>{{ groupLabel($index) }}</span><button praxisIconButton="delete" size="compact" type="button" [attr.aria-label]="tx('editor.grouping.removeAria', 'Remove group')" (click)="removeGroupingNode($index)"></button></div><div class="grid"><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.kind', 'Kind') }}</mat-label><mat-select formControlName="kind"><mat-option value="section">section</mat-option><mat-option value="tabs">tabs</mat-option><mat-option value="hero">hero</mat-option><mat-option value="rail">rail</mat-option></mat-select></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.id', 'Id') }}</mat-label><input matInput formControlName="id" /></mat-form-field><mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.label', 'Label') }}</mat-label><input matInput formControlName="label" /></mat-form-field>@if (group.controls.kind.value === 'section') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.layout', 'Layout') }}</mat-label><mat-select formControlName="layout"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="stack">stack</mat-option><mat-option value="grid">grid</mat-option><mat-option value="row">row</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'hero') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.emphasis', 'Emphasis') }}</mat-label><mat-select formControlName="emphasis"><mat-option value="">{{ tx('editor.grouping.layoutDefault', 'Default') }}</mat-option><mat-option value="high">high</mat-option><mat-option value="medium">medium</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'rail') {<mat-form-field appearance="outline"><mat-label>{{ tx('editor.grouping.side', 'Side') }}</mat-label><mat-select formControlName="side"><mat-option value="left">left</mat-option><mat-option value="right">right</mat-option></mat-select></mat-form-field>}@if (group.controls.kind.value === 'tabs') {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.tabsJson', 'Tabs (JSON)') }}</mat-label><textarea matInput rows="4" formControlName="tabsJson"></textarea></mat-form-field>} @else {<mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.grouping.widgetKeysCsv', 'Widget keys (comma-separated)') }}</mat-label><input matInput formControlName="widgetKeysCsv" /></mat-form-field>}</div></div>}</div></mat-tab>
+        <mat-tab [label]="tx('editor.tabs.devices', 'Device Layouts')">
+          <div class="panel">
+            <mat-button-toggle-group [value]="activeDevice()" (change)="activeDevice.set($event.value)" [attr.aria-label]="tx('editor.devices.target', 'Device to configure')">
+              @for (device of deviceKeys; track device) {
+                <mat-button-toggle [value]="device">{{ deviceLabels[device] }}</mat-button-toggle>
+              }
+            </mat-button-toggle-group>
+            @for (device of deviceKeys; track device) {
+              @if (activeDevice() === device) {
+                <div class="card">
+                  <div class="head"><strong>{{ deviceLabels[device] }}</strong><button mat-stroked-button type="button" [attr.data-testid]="'stack-device-' + device" [disabled]="!hasCanvasWidgets" (click)="stackDevice(device)"><mat-icon aria-hidden="true">view_agenda</mat-icon>{{ tx('editor.devices.stack', 'Stack widgets') }}</button></div>
+                  <p class="hint">{{ tx('editor.devices.stackHelp', 'Use full width and natural height, in reading order. This replaces positions and width limits only for this device; other layouts stay unchanged.') }}</p>
+                  @if (stackedDevices.has(device)) { <p class="hint" role="status">{{ tx('editor.devices.stacked', 'Single-column layout prepared. Save to apply; Reset undoes the changes.') }}</p> }
+                  <div class="grid">
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.columns', 'Columns') }}</mat-label><input matInput type="number" min="1" [formControl]="deviceForms[device].controls.columns" /></mat-form-field>
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.devices.gap', 'Gap') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.gap" /></mat-form-field>
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.autoRows', 'Auto rows') }}</mat-label><mat-select [formControl]="deviceForms[device].controls.autoRows"><mat-option value="">{{ tx('editor.devices.orientationDefault', 'Default') }}</mat-option><mat-option value="fixed">{{ tx('editor.layout.autoRowsFixed', 'Fixed height') }}</mat-option><mat-option value="content">{{ tx('editor.layout.autoRowsContent', 'Fit content') }}</mat-option></mat-select></mat-form-field>
+                  </div>
+                  <details><summary>{{ tx('editor.devices.advanced', 'Advanced overrides') }}</summary><div class="grid">
+                    <mat-form-field appearance="outline"><mat-label>{{ tx('editor.layout.rowUnit', 'Row unit') }}</mat-label><input matInput [formControl]="deviceForms[device].controls.rowUnit" /></mat-form-field>
+                    <mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.groupingOverridesJson', 'Grouping overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.groupingOverrides"></textarea></mat-form-field>
+                    <mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.devices.widgetOverridesJson', 'Widget overrides (JSON)') }}</mat-label><textarea matInput rows="4" [formControl]="deviceForms[device].controls.widgetOverrides"></textarea></mat-form-field>
+                  </div></details>
+                  @if (!stackedDevices.has(device)) { <div class="hint">{{ tx('editor.preview.deviceCanvasHint', 'Existing canvas item overrides are preserved.') }}</div> }
+                </div>
+              }
+            }
+          </div>
+        </mat-tab>
         <mat-tab [label]="tx('editor.tabs.context', 'Context')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.context.json', 'Context (JSON)') }}</mat-label><textarea matInput rows="12" [formControl]="contextControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.tabs.state', 'Page State')"><mat-form-field appearance="outline" class="wide"><mat-label>{{ tx('editor.state.valuesJson', 'Primary values (JSON)') }}</mat-label><textarea matInput rows="14" [formControl]="stateControl"></textarea></mat-form-field></mat-tab>
         <mat-tab [label]="tx('editor.limits.tab', 'Widget limits')">
@@ -12271,7 +12476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   </div>
                 }
               }
-              @if (limitsError()) { <p class="limits-error" role="alert">{{ limitsError() }}</p> }
+              @if (limitsSummaryError) { <p class="limits-error" role="alert">{{ limitsSummaryError }}</p> }
             } @else {
               <p>{{ tx('editor.limits.empty', 'Add widgets to the canvas to configure their limits.') }}</p>
             }
@@ -12279,7 +12484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, styles: [":host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary,.preset-preview__head,.preset-preview__recommendation{align-items:stretch}.head>button,.preset-preview__recommendation button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { '(window:resize)': 'refreshRenderedValidation()' }, styles: [":host{display:block;min-width:0;max-width:100%}.height-modes{width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:16px}.editor,.panel{display:grid;gap:16px;min-width:0;max-width:100%;color:var(--md-sys-color-on-surface, currentColor)}mat-tab-group,mat-form-field{min-width:0;max-width:100%}.head,.summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.summary{color:var(--md-sys-color-on-surface-variant, currentColor)}.selection-identity{position:sticky;top:0;z-index:var(--praxis-layer-sticky-local, 100);display:flex;align-items:flex-start;gap:8px;padding-block:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));overflow-wrap:anywhere}.selection-identity mat-icon{flex-shrink:0}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab{min-width:0;padding-inline:12px}:host ::ng-deep .editor-tabs>.mat-mdc-tab-header .mdc-tab__text-label{max-width:128px;white-space:normal;overflow-wrap:anywhere;text-align:center;letter-spacing:normal;line-height:1.25}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary,.preset-preview__head,.preset-preview__recommendation{align-items:stretch}.head>button,.preset-preview__recommendation button{width:100%}}.card{display:grid;gap:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container, transparent));color:var(--md-sys-color-on-surface, currentColor)}.limits-panel{display:grid;gap:8px;min-width:0}.limits-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}.limits-fields mat-form-field{min-width:0}.limits-notice{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant, currentColor)}.limits-notice mat-icon{flex-shrink:0}.limits-error{color:var(--md-sys-color-error, #b3261e)}.wide{grid-column:1 / -1}.hint{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px}.preset-preview{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 18%, transparent));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low, transparent) 88%,var(--md-sys-color-primary-container, transparent) 12%)}.preset-preview--theme{background:var(--md-sys-color-surface-container-low, transparent)}.preset-preview__head,.preset-preview__recommendation{display:flex;justify-content:space-between;align-items:center;gap:16px}.preset-preview__head>div,.preset-preview__recommendation>div{display:grid;gap:4px;min-width:0}.preset-preview p{margin:0;color:var(--md-sys-color-on-surface-variant, currentColor);line-height:1.45}.preset-preview__chips{display:flex;flex-wrap:wrap;gap:8px}.preset-preview__chips span{padding:5px 9px;border-radius:999px;background:var(--md-sys-color-surface-container, color-mix(in srgb, currentColor 8%, transparent));color:var(--md-sys-color-on-surface-variant, currentColor);font-size:12px;line-height:1.3}.preset-preview__recommendation{padding-top:12px;border-top:1px solid var(--md-sys-color-outline-variant, color-mix(in srgb, currentColor 14%, transparent))}.preset-preview__recommendation span:last-child{color:var(--md-sys-color-on-surface-variant, currentColor);font-size:13px;line-height:1.35}.eyebrow{color:var(--md-sys-color-primary, currentColor);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}:host ::ng-deep .mat-mdc-tab-body-content{padding-top:12px;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{
                 type: Input
             }], layout: [{
@@ -15526,7 +15731,7 @@ const PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST = {
             scope: 'templating',
             targetKind: 'widgetShell',
             target: { kind: 'widgetShell', resolver: 'widget-shell-by-widget-key', ambiguityPolicy: 'fail', required: true },
-            inputSchema: { type: 'object', required: ['widgetKey'], properties: { widgetKey: { type: 'string' }, shell: { type: 'object' } } },
+            inputSchema: { type: 'object', required: ['widgetKey'], properties: { widgetKey: { type: 'string' }, shell: { type: 'object', properties: { stickyHeader: { type: 'boolean', description: 'Retain the existing header within the widget during page scrolling; suspended for drag authoring, collapsed/overlay states and scroll recovery.' } } } } },
             effects: [{ kind: 'compile-domain-patch', handler: 'page-builder-widget-shell-configure', handlerContract: {
                         reads: ['WidgetPageDefinition.widgets', 'WidgetShellEditorComponent', 'SettingsPanelBridge'],
                         writes: ['page.widgets[].shell'],
@@ -23899,6 +24104,10 @@ class DynamicPageBuilderComponent {
             this.agenticAuthoringLastEtag.set(this.authoringDocument.etag?.trim() || null);
         }
         else if (authoringDocumentChange && !this.authoringDocument) {
+            // Clearing the persisted document hands ownership back to the page input.
+            const parsed = this.parsePage(this.page) || { widgets: [] };
+            this.currentPage.set(parsed);
+            this.lastRuntimePageChangeFingerprint = JSON.stringify(parsed);
             this.persistedUiCompositionAuthoringSource.set(null);
             this.agenticAuthoringLastEtag.set(null);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/page-builder",
-  "version": "9.0.66",
+  "version": "9.0.67",
   "description": "Page and widget builder utilities for Praxis UI (grid, dynamic widgets, editors).",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -8,9 +8,9 @@
     "@angular/forms": "^21.0.0",
     "@angular/cdk": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/ai": "^9.0.66",
-    "@praxisui/core": "^9.0.66",
-    "@praxisui/settings-panel": "^9.0.66",
+    "@praxisui/ai": "^9.0.67",
+    "@praxisui/core": "^9.0.67",
+    "@praxisui/settings-panel": "^9.0.67",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-page-builder.d.ts

@@ -2,7 +2,7 @@ import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import * as _angular_core from '@angular/core';
 import { EventEmitter, OnInit, WritableSignal, InjectionToken, Provider, OnChanges, OnDestroy, Type, SimpleChanges } from '@angular/core';
 import * as _praxisui_core from '@praxisui/core';
-import { ComponentDocMeta, ComponentMetadataRegistry, PraxisI18nService, WidgetShellConfig, WidgetPageAuthoringCapabilities, WidgetShellAction, EndpointRef, ComponentPortPathSegment, LinkIntent, CompositionLink, WidgetPageDefinition, TransformKind, SurfaceOpenPayload, WidgetPageDeviceKind, SettingsValueProvider as SettingsValueProvider$1, WidgetPageGroupingDefinition, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, PageIdentity, WidgetStateNode, WidgetDerivedStateNode, AiCapability, AiCapabilityCategory, AiCapabilityCatalog, AiValueKind, WidgetPageCanvasLayout, WidgetPageDeviceLayouts, WidgetPageSlotAssignments, WidgetPageStateInput, WidgetInstance, TransformOutputHint, TransformSemanticKind, ConfigAuthoringSource, DomainKnowledgeChangeSetRequest, DomainKnowledgeChangeSet, DomainKnowledgeChangeSetTimelineResponse, DomainKnowledgeChangeSetFilters, DomainKnowledgeValidationResponse, DomainKnowledgeStatusTransitionRequest, DomainRuleIntakeRequest, DomainRuleIntakeResponse, DomainRuleDefinitionRequest, DomainRuleDefinition, DomainRuleSimulationRequest, DomainRuleSimulationResponse, DomainRuleStatusTransitionRequest, DomainRulePublicationRequest, DomainRulePublicationResponse, DomainRuleMaterializationFilters, DomainRuleMaterialization, DomainRuleTimelineResponse, PraxisRuntimeComponentObservationEnvelope, ComponentContextPack, ComponentAuthoringManifest, DiagnosticRecord, NestedPortCatalogRegistry, CompositionValidatorService, ApiUrlEntry, DynamicWidgetPageComponent, ConfigDocument, WidgetEventEnvelope, ObservabilityAgenticTurnMetrics, SettingsPanelBridge, ObservabilityAgenticTurnMetricBucket, RichTimelineItem } from '@praxisui/core';
+import { ComponentDocMeta, ComponentMetadataRegistry, PraxisI18nService, WidgetShellConfig, WidgetPageAuthoringCapabilities, WidgetShellAction, EndpointRef, PortContract, ComponentPortPathSegment, LinkIntent, CompositionLink, WidgetPageDefinition, TransformKind, SurfaceOpenPayload, WidgetPageDeviceKind, SettingsValueProvider as SettingsValueProvider$1, WidgetPageGroupingDefinition, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, PageIdentity, WidgetStateNode, WidgetDerivedStateNode, AiCapability, AiCapabilityCategory, AiCapabilityCatalog, AiValueKind, WidgetPageCanvasLayout, WidgetPageDeviceLayouts, WidgetPageSlotAssignments, WidgetPageStateInput, WidgetInstance, TransformOutputHint, TransformSemanticKind, ConfigAuthoringSource, DomainKnowledgeChangeSetRequest, DomainKnowledgeChangeSet, DomainKnowledgeChangeSetTimelineResponse, DomainKnowledgeChangeSetFilters, DomainKnowledgeValidationResponse, DomainKnowledgeStatusTransitionRequest, DomainRuleIntakeRequest, DomainRuleIntakeResponse, DomainRuleDefinitionRequest, DomainRuleDefinition, DomainRuleSimulationRequest, DomainRuleSimulationResponse, DomainRuleStatusTransitionRequest, DomainRulePublicationRequest, DomainRulePublicationResponse, DomainRuleMaterializationFilters, DomainRuleMaterialization, DomainRuleTimelineResponse, PraxisRuntimeComponentObservationEnvelope, ComponentContextPack, ComponentAuthoringManifest, DiagnosticRecord, NestedPortCatalogRegistry, CompositionValidatorService, ApiUrlEntry, DynamicWidgetPageComponent, ConfigDocument, WidgetEventEnvelope, ObservabilityAgenticTurnMetrics, SettingsPanelBridge, ObservabilityAgenticTurnMetricBucket, RichTimelineItem } from '@praxisui/core';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { FormGroup, FormControl, FormArray } from '@angular/forms';
@@ -164,7 +164,9 @@ type SetInputPreset = {
 declare class WidgetShellEditorComponent implements SettingsValueProvider {
     private registry?;
     private readonly i18n;
+    menuPlacementLabel(): string;
     appearanceError(): string;
+    stickyHeaderLabel(): string;
     form: FormGroup<{
         kind: FormControl<"none" | "dashboard-card">;
         preset: FormControl<string>;
@@ -173,6 +175,7 @@ declare class WidgetShellEditorComponent implements SettingsValueProvider {
         subtitle: FormControl<string>;
         icon: FormControl<string>;
         showHeader: FormControl<"auto" | "true" | "false">;
+        stickyHeader: FormControl<boolean>;
         collapsible: FormControl<boolean>;
         cardBg: FormControl<string>;
         cardBorder: FormControl<string>;
@@ -280,6 +283,8 @@ interface ConnectionEditorPort {
     label: string;
     kind: ConnectionEditorPortKind;
     endpoint: EndpointRef;
+    /** Transient registry evidence; never serialized into a composition endpoint. */
+    contract?: PortContract;
     nestedPath?: ComponentPortPathSegment[];
 }
 interface ConnectionEditorNode {
@@ -1016,9 +1021,12 @@ declare class DynamicPageConfigEditorComponent implements OnInit, SettingsValueP
         isErrorState: (control: FormControl | null) => boolean;
     };
     private readonly injectedData;
+    readonly isHostedInSettingsPanel: boolean;
     private readonly i18n;
     private pageInput;
     private snapshot;
+    readonly stackedDevices: Set<DeviceKey>;
+    readonly activeDevice: WritableSignal<DeviceKey>;
     private hydrating;
     private renderedCandidate;
     private renderedValidationFingerprint;
@@ -1030,6 +1038,8 @@ declare class DynamicPageConfigEditorComponent implements OnInit, SettingsValueP
     get hasPendingChanges(): boolean;
     get validationStateLabel(): string;
     get dirtyStateLabel(): string;
+    get nonLimitError(): string | null;
+    get limitsSummaryError(): string | null;
     get selectedLayoutPresetLabel(): string;
     get selectedThemePresetLabel(): string;
     get selectedLayoutPresetEntry(): LayoutPresetEntry | null;
@@ -1041,6 +1051,9 @@ declare class DynamicPageConfigEditorComponent implements OnInit, SettingsValueP
     onSave(): WidgetPageDefinition | null;
     reset(): void;
     pinRecommendedThemePreset(): void;
+    get hasCanvasWidgets(): boolean;
+    stackDevice(device: DeviceKey): void;
+    private stackedCanvas;
     addGroupingNode(seed?: WidgetPageGroupingDefinition): void;
     removeGroupingNode(index: number): void;
     layoutPresetSummary(preset: LayoutPresetEntry): string;
@@ -1064,6 +1077,8 @@ declare class DynamicPageConfigEditorComponent implements OnInit, SettingsValueP
     private replaceGroupingNodes;
     private buildCurrentPage;
     private buildGrouping;
+    /** A grid must place every existing widget before replacing the flow layout. */
+    private completeCanvasItems;
     private buildDeviceLayouts;
     private invalidate;
     private refreshPanelState;