@sankhyalabs/sankhyablocks 10.1.0-dev.57 → 10.1.0-dev.59

package/dist/collection/components/snk-dynaform/snk-dynaform.js

@@ -644,7 +644,11 @@ export class SnkDynaform {
     if (this._snkDataUnit) {
       this._snkDataUnit.ignoreSaveMessage = (this._currentViewMode === VIEW_MODE.GRID && !this.enableGridInsert);
     }
-    return (h(Host, null, h("header", { class: { 'snk-crud--hidden': !this._headerVisible, 'snk-crud__header': true } }, h("div", { class: "snk-crud__header-top" }, h("snk-taskbar", { "data-element-id": "grid_top", key: "snkGridTopTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, resourceID: this._resourceID, primaryButton: "INSERT", overflowStrategy: "hiddenItems", alignRigth: true, actionsList: this.getActionsList(), customActionsList: this.buildTaskbarCustomActionsList(), sizeButtons: 'medium' })), h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, title: this.filterBarTitle, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this._resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, mode: this._filterMode, hideFilterButton: true, sizeChips: 'default' })), h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'snk-crud__grid-stack-item' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter, multipleEditionEnabled: this.multipleEditionEnabled, paginationCounterMode: this.paginationCounterMode, hideHeader: true, hideGridTaskbar: true }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-dynaform-guides-view", { ref: (ref) => this._guidesViewer = ref, customGuidesConfig: this.customGuidesConfig, entityPath: (_a = this._snkDataUnit) === null || _a === void 0 ? void 0 : _a.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: (evt) => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields, onFormConfigVisibilityChanged: evt => this._headerVisible = !evt.detail }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), this.renderCustomGuideSlots(), h("slot", { name: "SnkFormTaskBar" })))), h("snk-attach", { ref: (ref) => this._snkAttach = ref, registerKey: (_b = this.attachmentRegisterKey) !== null && _b !== void 0 ? _b : '', messagesBuilder: this.messagesBuilder, entityName: (_d = (_c = this._snkDataUnit) === null || _c === void 0 ? void 0 : _c.entityName) !== null && _d !== void 0 ? _d : '' }), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, entityName: (_e = this._snkDataUnit) === null || _e === void 0 ? void 0 : _e.entityName, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId, layoutFormConfig: this.layoutFormConfig }), this.renderDynamicSearch(), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
+    return (h(Host, null, h("header", { class: { 'snk-crud--hidden': !this._headerVisible, 'snk-crud__header': true } }, h("div", { class: "snk-crud__header-top" }, h("snk-taskbar", { "data-element-id": "grid_top", key: "snkGridTopTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, resourceID: this._resourceID, primaryButton: "INSERT", overflowStrategy: "hiddenItems", alignRigth: true, actionsList: this.getActionsList(), customActionsList: this.buildTaskbarCustomActionsList(), sizeButtons: 'medium' })), h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, title: this.filterBarTitle, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: {
+        'snk-grid__filter-bar': true,
+        'ez-align--top': true,
+        'snk-crud__filter-bar--hidden': this._currentViewMode !== VIEW_MODE.GRID
+      }, configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this._resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, mode: this._filterMode, hideFilterButton: true, sizeChips: 'default' })), h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'snk-crud__grid-stack-item' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter, multipleEditionEnabled: this.multipleEditionEnabled, paginationCounterMode: this.paginationCounterMode, hideHeader: true, hideGridTaskbar: true }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-dynaform-guides-view", { ref: (ref) => this._guidesViewer = ref, customGuidesConfig: this.customGuidesConfig, entityPath: (_a = this._snkDataUnit) === null || _a === void 0 ? void 0 : _a.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: (evt) => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields, onFormConfigVisibilityChanged: evt => this._headerVisible = !evt.detail }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), this.renderCustomGuideSlots(), h("slot", { name: "SnkFormTaskBar" })))), h("snk-attach", { ref: (ref) => this._snkAttach = ref, registerKey: (_b = this.attachmentRegisterKey) !== null && _b !== void 0 ? _b : '', messagesBuilder: this.messagesBuilder, entityName: (_d = (_c = this._snkDataUnit) === null || _c === void 0 ? void 0 : _c.entityName) !== null && _d !== void 0 ? _d : '' }), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, entityName: (_e = this._snkDataUnit) === null || _e === void 0 ? void 0 : _e.entityName, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId, layoutFormConfig: this.layoutFormConfig }), this.renderDynamicSearch(), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
   }
   static get is() { return "snk-dynaform"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-detail-view/snk-dynaform-detail-view.css

@@ -4,7 +4,36 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space--4, 4px);
+  scrollbar-width: auto;
+  scrollbar-color: var(--color--strokes, #E1E2E5) transparent;
+}
+
+:host::-webkit-scrollbar {
+  width: var(--space--14, 14px);
+  height: var(--space--14, 14px);
+}
+
+:host::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:host::-webkit-scrollbar-thumb {
+  background-color: var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-100, 100px);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+:host::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color--petroleum-100, #C8CCD3);
+  background-clip: padding-box;
+}
+
+:host::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .level-path {
@@ -31,15 +60,29 @@
 
 snk-data-unit {
   flex: 1;
+  /* Permite encolher abaixo do conteúdo p/ a grade rolar quando o painel
+     inferior é redimensionado abaixo da altura natural. */
+  min-height: 0;
   gap: var(--space--12, 12px);
   display: flex;
   flex-direction: column;
 }
 
+/* view-stack preenche o espaço restante e pode encolher (grade rola dentro). */
+snk-data-unit ez-view-stack {
+  flex: 1;
+  min-height: 0;
+}
+
 snk-grid {
   height: 100%;
   --snk-grid-margin: 0px;
   --snk-grid-box-shadow: none;
+  --snk-grid-min-height: 135px;
+}
+
+.form-and-detail-container > ez-tabselector {
+  flex-shrink: 0;
 }
 
 .form-and-detail-container {
@@ -49,6 +92,33 @@ snk-grid {
   width: 100%;
   overflow: auto;
   padding: var(--space--12, 12px);
+  scrollbar-width: auto;
+  scrollbar-color: var(--color--strokes, #E1E2E5) transparent;
+}
+
+.form-and-detail-container::-webkit-scrollbar {
+  width: var(--space--14, 14px);
+  height: var(--space--14, 14px);
+}
+
+.form-and-detail-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.form-and-detail-container::-webkit-scrollbar-thumb {
+  background-color: var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-100, 100px);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.form-and-detail-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color--petroleum-100, #C8CCD3);
+  background-clip: padding-box;
+}
+
+.form-and-detail-container::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .ez-tabselector-internal {

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-detail-view/snk-dynaform-detail-view.js

@@ -13,6 +13,8 @@ import { DEFAULT_TASKBAR_BUTTONS, getTopTaskBarId } from '../../../snk-crud/util
 export class SnkDynaformDetailView {
   constructor() {
     this._taskbarProcessor = new SimpleTaskbarProcessor(DEFAULT_TASKBAR_BUTTONS);
+    /** Evita repetir a carga inicial da grade no mesmo mount da aba. */
+    this._didInitialLoad = false;
     this._currentView = 0;
     this.attachmentRegisterKey = undefined;
     this._fieldToGetFocus = undefined;
@@ -161,6 +163,27 @@ export class SnkDynaformDetailView {
   dataUnitReadyHandler(evt) {
     this.dataUnit = evt.detail;
     this.loadMetadata();
+    this.ensureInitialLoad();
+  }
+  /**
+   * Dispara a carga inicial da grade quando a aba é montada com o master já
+   * selecionado. A carga do filho normalmente é disparada pelo evento de troca
+   * de seleção do master; uma aba montada tardiamente (aberta depois que o
+   * registro master já estava selecionado) não recebe esse evento e ficaria
+   * vazia até um refresh manual. Navegações seguintes do master continuam
+   * recarregando pela assinatura existente do DataUnit.
+   */
+  ensureInitialLoad() {
+    var _a, _b, _c, _d, _e;
+    if (this._didInitialLoad) {
+      return;
+    }
+    const dataUnit = this.dataUnit;
+    const parentDataUnit = (_a = dataUnit === null || dataUnit === void 0 ? void 0 : dataUnit.getParentDataUnit) === null || _a === void 0 ? void 0 : _a.call(dataUnit);
+    if (((_b = parentDataUnit === null || parentDataUnit === void 0 ? void 0 : parentDataUnit.getSelectedRecord) === null || _b === void 0 ? void 0 : _b.call(parentDataUnit)) && ((_d = (_c = dataUnit === null || dataUnit === void 0 ? void 0 : dataUnit.records) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) === 0) {
+      this._didInitialLoad = true;
+      (_e = dataUnit === null || dataUnit === void 0 ? void 0 : dataUnit.loadData) === null || _e === void 0 ? void 0 : _e.call(dataUnit);
+    }
   }
   getFormFields() {
     var _a, _b, _c;

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-form-view/snk-dynaform-form-view.css

@@ -5,6 +5,7 @@
   flex-wrap: wrap;
   background-color: var(--background--xlight);
   padding: var(--space--12, 12px);
+  padding-right: 0;
   border-radius: var(--border--radius-medium);
   border: 1px solid var(--color--petroleum-100, #C8CCD3);
 
@@ -12,8 +13,41 @@
 }
 
 ez-form-view {
-  padding: var(--space--6 ,6px) 0;
+  padding-right: var(--space--12, 12px);
   --ez-form-view__item--padding: 0;
+  min-height: 0;
+  overflow-y: auto;
+  /* Scrollbar moderna (Firefox). Levar para biblioteca após validação*/
+  scrollbar-width: auto;
+  scrollbar-color: var(--color--strokes, #E1E2E5) transparent;
+}
+
+/* Scrollbar moderna (WebKit/Chromium): trilho transparente, polegar em pílula
+   flutuante, some no fundo e escurece no hover. Levar para biblioteca após validação */
+ez-form-view::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+ez-form-view::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+ez-form-view::-webkit-scrollbar-thumb {
+  background-color: var(--color--strokes, #E1E2E5);
+  border-radius: 999px;
+  /* Borda transparente + background-clip cria o respiro em volta do polegar. */
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+ez-form-view::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color--petroleum-100, #C8CCD3);
+  background-clip: padding-box;
+}
+
+ez-form-view::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .level-path{

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-form-view/snk-dynaform-form-view.js

@@ -124,6 +124,9 @@ export class SnkDynaformFormView {
       this.dataUnit.unsubscribe(this.dataUnitObserver);
     }
   }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
+  }
   componentDidLoad() {
     if (this.customEditors) {
       this.observePropsCustomEditor(this.customEditors);
@@ -131,7 +134,6 @@ export class SnkDynaformFormView {
     if (this.fieldsProps) {
       this.observeFieldsProps(this.fieldsProps);
     }
-    this.initLayoutFormConfig();
   }
   async initLayoutFormConfig() {
     const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-guides-view/snk-dynaform-guides-view.css

@@ -31,6 +31,8 @@ snk-dynaform-form-view {
 
     /*public*/
     padding: 0px;
+    padding: var(--space--8, 8px);
+    padding-top: 0;
 }
 
 .snk-guides-viewer__detail-container {
@@ -41,20 +43,106 @@ snk-dynaform-form-view {
     max-height: none;
     min-height: 0;
     overflow: hidden;
-    margin-bottom: var(--space--12, 12px);
 }
 
-.snk-guides-viewer__container > snk-dynaform-form-view {
-    max-height: 300px;
+.snk-guides-viewer__master {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+}
+
+/* Painéis do ez-split-panel: preenchem a faixa e deixam o conteúdo rolar. */
+.snk-guides-viewer__split {
+    flex: 1;
+    min-height: 0;
+}
+
+.snk-guides-viewer__split-master,
+.snk-guides-viewer__split-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+
+/* O master (structural) não tem borda visível; remove o raio herdado do
+   ez-split-item para o conteúdo/scroll não ser cortado nos cantos. */
+.snk-guides-viewer__split-master {
+    border-radius: 0;
+}
+
+/* Painel com contorno: inseta o conteúdo em >= raio da borda, para o scroll/
+   barra ficar na região reta e não cortar o canto arredondado.
+   Classe dobrada para vencer o `.structural__item { padding: 0 }` do ez-ui. */
+.snk-guides-viewer__split-content.snk-guides-viewer__split-content {
+    box-sizing: border-box;
+    padding-top: var(--space--4, 4px);
+}
+
+/* Preenche o painel inferior: abas fixas no topo, scroll no detail-container.
+   Sem transbordo aqui, então o split-item não vira o container de scroll. */
+.snk-guides-viewer__panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* Alterna resumo/expandido só por CSS — o form-view permanece montado. */
+.snk-guides-viewer__master .snk-guides-viewer__master-summary {
+    display: none;
+}
+.snk-guides-viewer__master--collapsed .snk-guides-viewer__master-summary {
+    display: flex;
+}
+.snk-guides-viewer__master--collapsed .snk-guides-viewer__master-expanded {
+    display: none;
+}
+
+.snk-guides-viewer__master-expanded {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+    overflow: visible;
+    margin-top: var(--space--6, 6px);
+}
+
+/* Altura limitada; o scroll é interno ao form-view (a borda fica sempre fixa). */
+.snk-guides-viewer__master-expanded > snk-dynaform-form-view {
+    flex: 1;
     min-height: 0;
-    overflow-y: auto;
 }
 
+/* form-view e detail-view ficam com altura limitada; o scroll é interno
+   (dentro do form-view a borda fica fixa; a grade rola internamente). */
 .snk-guides-viewer__detail-container > snk-dynaform-form-view,
 .snk-guides-viewer__detail-container > snk-dynaform-detail-view {
     flex: 1;
     min-height: 0;
-    overflow-y: auto;
+}
+
+/* Cada aba aberta fica montada; só a ativa é visível. */
+.snk-guides-viewer__guide-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.snk-guides-viewer__guide-content--hidden {
+    display: none;
+}
+
+.snk-guides-viewer__guide-content > snk-dynaform-form-view,
+.snk-guides-viewer__guide-content > snk-dynaform-detail-view {
+    flex: 1;
+    min-height: 0;
 }
 
 .snk-guides-viewer__header {
@@ -66,7 +154,7 @@ snk-dynaform-form-view {
     /*public*/
     z-index: var(--snk-guides-viewer__header--z-index);
     background-color: var(--snk-guides-viewer__header--background-color);
-    padding: var(--snk-guides-viewer--space-small);
+    padding-inline: var(--snk-guides-viewer--space-small);
 }
 
 .snk-guides-viewer__header-breadcrumb {
@@ -95,4 +183,139 @@ snk-dynaform-form-view {
     box-sizing: border-box;
     padding: 0 var(--space--12, 12px);
     flex-shrink: 0;
+}
+
+.snk-guides-viewer__master-summary {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space--12, 12px);
+    box-sizing: border-box;
+    margin: var(--space--2xs, 8px) var(--space--12, 12px);
+    padding: var(--space--2xs, 8px) var(--space--12, 12px);
+    border: 1px solid var(--color--strokes, #E1E2E5);
+    border-radius: var(--border--radius-medium, 12px);
+    background: var(--background--medium, #f0f3f7);
+    box-shadow: var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));
+    cursor: pointer;
+    text-align: left;
+    flex-shrink: 0;
+    overflow: hidden;
+    transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.snk-guides-viewer__master-summary:hover,
+.snk-guides-viewer__master-summary:focus-visible {
+    background: var(--background--xlight, #fff);
+    border-color: var(--color--primary, #4e4e4e);
+}
+
+.snk-guides-viewer__master-summary-fields {
+    display: flex;
+    gap: var(--space--large, 24px);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    /* Espaço p/ o box-shadow do realce de campo inválido não ser cortado. */
+    padding: var(--space--4, 4px);
+    margin: calc(-1 * var(--space--4, 4px));
+}
+
+/* Row-fantasma: fora do fluxo, invisível, largura natural — só para medir. */
+.snk-guides-viewer__master-summary-measure {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    gap: var(--space--large, 24px);
+    white-space: nowrap;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.snk-guides-viewer__master-summary-item {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    padding: var(--space--4, 4px);
+}
+
+.snk-guides-viewer__master-summary-label {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    max-width: 240px;
+    color: var(--text--primary, #626e82);
+    font-size: var(--title--small, 12px);
+    font-weight: var(--text-weight--medium, 400);
+}
+
+.snk-guides-viewer__master-summary-label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+/* Marcador de campo obrigatório (mesmo estilo do ez-classic-input). */
+.snk-guides-viewer__master-summary-required {
+    flex-shrink: 0;
+    color: var(--color--red-600, #BD0025);
+    font-weight: 700;
+}
+
+/* Campo obrigatório não preenchido ao salvar: realce vermelho.
+   box-shadow (não outline) p/ compatibilidade com browsers antigos; o wrapper
+   .master-summary-fields tem padding p/ o anel não ser cortado pelo overflow. */
+.snk-guides-viewer__master-summary-item--invalid {
+    box-shadow: 0 0 0 1px var(--color--red-600, #BD0025);
+    border-radius: var(--border--radius-4, 4px);
+}
+
+.snk-guides-viewer__master-summary-value {
+    color: var(--title--primary, #2b3a54);
+    font-size: var(--text--large, 14px);
+    font-weight: 700;
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.snk-guides-viewer__master-summary-chevron {
+    flex-shrink: 0;
+    color: var(--title--primary, #2b3a54);
+}
+
+/* Botão recolher (ez-button) centrado sobre a borda superior do card master,
+   fora da área dos inputs — não sobrepõe campos no layout lado-a-lado.
+   Oculto por padrão; aparece com transição ao passar o mouse (ou focar) o form. */
+/* Pendura o botão a partir da borda superior do master (topo alinhado à margem
+   reservada). Sem transbordo para cima, então não é cortado pelo overflow do
+   container mesmo com a margem pequena. */
+.snk-guides-viewer__master-collapse-btn {
+    position: absolute;
+    top: calc(-1 * var(--space--6, 6px));
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.snk-guides-viewer__master:hover .snk-guides-viewer__master-collapse-btn,
+.snk-guides-viewer__master:focus-within .snk-guides-viewer__master-collapse-btn,
+.snk-guides-viewer__master-collapse-btn:hover {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Borda do botão igual à borda do card master (form-view usa --color--petroleum-100). */
+.snk-guides-viewer__master-collapse-btn ez-button {
+    --ez-button--border: 1px solid var(--color--petroleum-100, #C8CCD3);
+    --ez-button--hover--border: 1px solid var(--color--petroleum-100, #C8CCD3);
 }