From e107aefc5680afef5bf49b6d73b74822fd95fa3d Mon Sep 17 00:00:00 2001
From: kozmaadrian <kozmaadrian@gmail.com>
Date: Tue, 9 Jun 2026 14:58:25 +0200
Subject: [PATCH 1/2] refactor: create shared ew canvas header.

---
 .../ew-canvas-header/ew-canvas-header.css     | 49 +---------
 .../ew-canvas-header/ew-canvas-header.js      | 84 +++++++----------
 .../ew-canvas-header-base.css                 | 92 +++++++++++++++++++
 .../ew-canvas-header-base.js                  | 55 +++++++++++
 4 files changed, 184 insertions(+), 96 deletions(-)
 create mode 100644 blocks/shared/ew-canvas-header-base/ew-canvas-header-base.css
 create mode 100644 blocks/shared/ew-canvas-header-base/ew-canvas-header-base.js

diff --git a/blocks/canvas/ew-canvas-header/ew-canvas-header.css b/blocks/canvas/ew-canvas-header/ew-canvas-header.css
index fd3e6b5c7..d45f2311f 100644
--- a/blocks/canvas/ew-canvas-header/ew-canvas-header.css
+++ b/blocks/canvas/ew-canvas-header/ew-canvas-header.css
@@ -4,8 +4,8 @@
   font-family: var(
     --s2-font-family,
     adobe-clean,
-    "Source Sans Pro",
-    "Trebuchet MS",
+    'Source Sans Pro',
+    'Trebuchet MS',
     sans-serif
   );
   font-size: var(--s2-body-size-s, 0.875rem);
@@ -119,48 +119,3 @@
     overflow: hidden;
   }
 }
-
-.bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  box-sizing: border-box;
-  height: var(--ew-canvas-header-height);
-  padding: 0 12px;
-  background-color: light-dark(#fff, var(--s2-gray-25));
-  border-bottom: 1px solid var(--s2-gray-200);
-}
-
-.group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.group-center {
-  flex: 1;
-  justify-content: center;
-  min-width: 0;
-}
-
-@media (width < 480px) {
-  .bar {
-    flex-wrap: wrap;
-    justify-content: center;
-    padding-block: 8px;
-    row-gap: 8px;
-  }
-
-  .group-center {
-    order: 0;
-    flex: 1 1 100%;
-    justify-content: center;
-  }
-
-  .group-start,
-  .group-end {
-    order: 1;
-  }
-}
diff --git a/blocks/canvas/ew-canvas-header/ew-canvas-header.js b/blocks/canvas/ew-canvas-header/ew-canvas-header.js
index bc2c4563f..a5d633534 100644
--- a/blocks/canvas/ew-canvas-header/ew-canvas-header.js
+++ b/blocks/canvas/ew-canvas-header/ew-canvas-header.js
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'da-lit';
 
 import { getNx } from '../../../scripts/utils.js';
+import '../../shared/ew-canvas-header-base/ew-canvas-header-base.js';
 
 const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 
@@ -9,7 +10,6 @@ const style = await loadStyle(import.meta.url);
 const ICONS = {
   undo: '/img/icons/s2-icon-undo-20-n.svg',
   redo: '/img/icons/s2-icon-redo-20-n.svg',
-  splitLeft: '/img/icons/s2-icon-splitleft-20-n.svg',
   splitRight: '/img/icons/s2-icon-splitright-20-n.svg',
   gridCompare: '/img/icons/s2-icon-gridcompare-20-n.svg',
 };
@@ -76,58 +76,44 @@ class EWCanvasHeader extends LitElement {
 
   render() {
     return html`
-      <header class="bar" part="bar">
-        <div class="group group-start" part="group-start">
-          <button type="button" class="icon-btn" part="btn toggle-before" data-action="open-panel-before" aria-label="Open before panel" @click=${() => this._openPanel('before')}>
-            ${this._renderIcon('splitLeft')}
-          </button>
-          <button type="button" class="icon-btn" part="btn" data-action="undo" aria-label="Undo" ?disabled=${!this.undoAvailable} @click=${this._undo}>
-            ${this._renderIcon('undo')}
-          </button>
+      <ew-canvas-header-base
+        exportparts="bar, group-start, group-center, group-end, toggle-before"
+        @header-toggle-before=${() => this._openPanel('before')}
+      >
+        <button slot="start" type="button" class="icon-btn" part="btn" data-action="undo" aria-label="Undo" ?disabled=${!this.undoAvailable} @click=${this._undo}>
+          ${this._renderIcon('undo')}
+        </button>
+        <button slot="start" type="button" class="icon-btn" part="btn" data-action="redo" aria-label="Redo" ?disabled=${!this.redoAvailable} @click=${this._redo}>
+          ${this._renderIcon('redo')}
+        </button>
+
+        <div slot="center" class="segmented" role="group" aria-label="Editor view" part="editor-view-toggle">
           <button
             type="button"
-            class="icon-btn"
-            part="btn"
-            data-action="redo"
-            aria-label="Redo"
-            ?disabled=${!this.redoAvailable}
-            @click=${this._redo}
-          >
-            ${this._renderIcon('redo')}
-          </button>
-        </div>
-
-        <div class="group group-center" part="group-center">
-          <div class="segmented" role="group" aria-label="Editor view" part="editor-view-toggle">
-            <button
-              type="button"
-              class="segment ${this.editorView === 'layout' ? 'is-selected' : ''}"
-              aria-pressed=${this.editorView === 'layout'}
-              @click=${() => this._setEditorView('layout')}
-            >Layout</button>
-            <button
-              type="button"
-              class="segment ${this.editorView === 'content' ? 'is-selected' : ''}"
-              aria-pressed=${this.editorView === 'content'}
-              @click=${() => this._setEditorView('content')}
-            >Content</button>
-            <button
-              type="button"
-              class="segment segment-icon ${this.editorView === 'split' ? 'is-selected' : ''}"
-              aria-pressed=${this.editorView === 'split'}
-              aria-label="Split view"
-              title="Split view"
-              @click=${() => this._setEditorView('split')}
-            >${this._renderIcon('gridCompare')}</button>
-          </div>
+            class="segment ${this.editorView === 'layout' ? 'is-selected' : ''}"
+            aria-pressed=${this.editorView === 'layout'}
+            @click=${() => this._setEditorView('layout')}
+          >Layout</button>
+          <button
+            type="button"
+            class="segment ${this.editorView === 'content' ? 'is-selected' : ''}"
+            aria-pressed=${this.editorView === 'content'}
+            @click=${() => this._setEditorView('content')}
+          >Content</button>
+          <button
+            type="button"
+            class="segment segment-icon ${this.editorView === 'split' ? 'is-selected' : ''}"
+            aria-pressed=${this.editorView === 'split'}
+            aria-label="Split view"
+            title="Split view"
+            @click=${() => this._setEditorView('split')}
+          >${this._renderIcon('gridCompare')}</button>
         </div>
 
-        <div class="group group-end" part="group-end">
-          <button type="button" class="icon-btn" part="btn toggle-after" data-action="open-panel-after" aria-label="Open after panel" @click=${() => this._openPanel('after')}>
-            ${this._renderIcon('splitRight')}
-          </button>
-        </div>
-      </header>
+        <button slot="end" type="button" class="icon-btn" part="btn toggle-after" data-action="open-panel-after" aria-label="Open after panel" @click=${() => this._openPanel('after')}>
+          ${this._renderIcon('splitRight')}
+        </button>
+      </ew-canvas-header-base>
     `;
   }
 }
diff --git a/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.css b/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.css
new file mode 100644
index 000000000..b302a68d0
--- /dev/null
+++ b/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.css
@@ -0,0 +1,92 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  font-family: var(
+    --s2-font-family,
+    adobe-clean,
+    'Source Sans Pro',
+    'Trebuchet MS',
+    sans-serif
+  );
+  font-size: var(--s2-body-size-s, 0.875rem);
+  color: var(--s2-gray-800);
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  box-sizing: border-box;
+  height: var(--ew-canvas-header-height, 48px);
+  padding: 0 12px;
+  background-color: light-dark(#fff, var(--s2-gray-25));
+  border-bottom: 1px solid var(--s2-gray-200);
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.group-center {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 4px;
+  margin: 0;
+  border: none;
+  border-radius: 8px;
+  font: inherit;
+  color: var(--s2-gray-800);
+  background: transparent;
+  cursor: pointer;
+}
+
+.icon-btn:hover {
+  background-color: var(--s2-gray-75);
+}
+
+.icon-btn:focus-visible {
+  outline: 2px solid var(--s2-blue-800);
+  outline-offset: 2px;
+}
+
+.icon-btn svg.icon {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+}
+
+@media (width < 480px) {
+  .bar {
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-block: 8px;
+    row-gap: 8px;
+  }
+
+  .group-center {
+    order: 0;
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+
+  .group-start,
+  .group-end {
+    order: 1;
+  }
+}
diff --git a/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.js b/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.js
new file mode 100644
index 000000000..d6b639c0d
--- /dev/null
+++ b/blocks/shared/ew-canvas-header-base/ew-canvas-header-base.js
@@ -0,0 +1,55 @@
+import { LitElement, html } from 'da-lit';
+
+import { getNx } from '../../../scripts/utils.js';
+
+const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
+
+const style = await loadStyle(import.meta.url);
+
+const ICONS = { splitLeft: '/img/icons/s2-icon-splitleft-20-n.svg' };
+
+class EwCanvasHeaderBase extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [style];
+  }
+
+  _toggleBefore() {
+    this.dispatchEvent(
+      new CustomEvent('header-toggle-before', { bubbles: true, composed: true }),
+    );
+  }
+
+  _renderIcon(name) {
+    return html`<svg aria-hidden="true" class="icon" viewBox="0 0 20 20"><use href="${ICONS[name]}#icon"></use></svg>`;
+  }
+
+  render() {
+    return html`
+      <header class="bar" part="bar">
+        <div class="group group-start" part="group-start">
+          <button
+            type="button"
+            class="icon-btn"
+            part="btn toggle-before"
+            aria-label="Toggle panel"
+            @click=${this._toggleBefore}
+          >
+            ${this._renderIcon('splitLeft')}
+          </button>
+          <slot name="start"></slot>
+        </div>
+
+        <div class="group group-center" part="group-center">
+          <slot name="center"></slot>
+        </div>
+
+        <div class="group group-end" part="group-end">
+          <slot name="end"></slot>
+        </div>
+      </header>
+    `;
+  }
+}
+
+customElements.define('ew-canvas-header-base', EwCanvasHeaderBase);

From fee1fe8fa1159ed92ab9ea5f01e0e400ed7f11e2 Mon Sep 17 00:00:00 2001
From: kozmaadrian <kozmaadrian@gmail.com>
Date: Tue, 9 Jun 2026 15:31:32 +0200
Subject: [PATCH 2/2] refactor: code style fix

---
 blocks/canvas/ew-canvas-header/ew-canvas-header.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/canvas/ew-canvas-header/ew-canvas-header.js b/blocks/canvas/ew-canvas-header/ew-canvas-header.js
index a5d633534..0210d33d4 100644
--- a/blocks/canvas/ew-canvas-header/ew-canvas-header.js
+++ b/blocks/canvas/ew-canvas-header/ew-canvas-header.js
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'da-lit';
 
 import { getNx } from '../../../scripts/utils.js';
+
 import '../../shared/ew-canvas-header-base/ew-canvas-header-base.js';
 
 const { loadStyle } = await import(`${getNx()}/utils/utils.js`);