feat(ew): add viewport switcher for block library modal and increase modal size

blocks/canvas/ew-block-library-modal/ew-block-library-modal.css

@@ -3,15 +3,15 @@
 }
 
 .modal {
-  --nx-dialog-max-width: 960px;
-  --nx-dialog-max-height: 640px;
+  --nx-dialog-max-width: min(1440px, 95vw);
+  --nx-dialog-max-height: min(900px, 90vh);
   --nx-dialog-padding: 0;
 }
 
 .modal-content {
-  width: 960px;
+  width: var(--nx-dialog-max-width);
   max-width: 100%;
-  height: 640px;
+  height: var(--nx-dialog-max-height);
   max-height: 100%;
   display: grid;
   grid-template-rows: auto 1fr;
@@ -208,6 +208,14 @@
   background: var(--s2-gray-50);
 }
 
+.modal-preview-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: var(--s2-spacing-100);
+  border-bottom: 1px solid var(--s2-gray-200);
+  background: var(--s2-gray-75);
+}
+
 .modal-preview-placeholder {
   display: flex;
   align-items: center;
@@ -217,6 +225,21 @@
   font-size: var(--s2-body-size-s);
 }
 
+.modal-preview-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+
+.modal-preview-viewport {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  min-height: 0;
+}
+
 .modal-preview-frame {
   flex: 1;
   width: 100%;
@@ -239,4 +262,3 @@
   margin: 0;
 }
 
-

blocks/canvas/ew-block-library-modal/ew-block-library-modal.js

@@ -21,6 +21,12 @@ const SEARCH_ICON_SRC = '/img/icons/s2-icon-search-20-n.svg';
 const INFO_ICON_SRC = '/img/icons/s2-icon-infocircle-20-n.svg';
 const ADD_ICON_SRC = '/img/icons/s2-icon-addcircle-20-n.svg';
 
+const VIEWPORTS = [
+  ['desktop', 'Desktop', '100%', '/img/icons/s2-icon-devicedesktop-20-n.svg'],
+  ['tablet', 'Tablet', '768px', '/img/icons/s2-icon-devicetablet-20-n.svg'],
+  ['mobile', 'Mobile', '390px', '/img/icons/s2-icon-devicephone-20-n.svg'],
+];
+
 function andMatch(query, target) {
   const terms = query.split(/\s+/).filter(Boolean);
   return terms.every((term) => target.includes(term));
@@ -50,6 +56,7 @@ class EwBlockLibraryModal extends LitElement {
     _expandedPath: { state: true },
     _selectedPath: { state: true },
     _previewInfo: { state: true },
+    _viewport: { state: true },
     _hashState: { state: true },
     _search: { state: true },
     _openDescriptions: { state: true },
@@ -60,6 +67,7 @@ class EwBlockLibraryModal extends LitElement {
     this.shadowRoot.adoptedStyleSheets = [buttonsStyle, formStyle, style];
     this._variantsByPath = new Map();
     this._openDescriptions = new Set();
+    this._viewport = 'desktop';
     this._unsubHash = hashChange.subscribe((state) => { this._hashState = state; });
   }
 
@@ -271,6 +279,21 @@ class EwBlockLibraryModal extends LitElement {
       </div>`;
   }
 
+  _renderViewportBar() {
+    return html`
+      <div class="modal-preview-toolbar" role="group" aria-label="Preview width">
+        ${VIEWPORTS.map(([id, label, , icon]) => html`
+          <button type="button"
+                  class="nx-action-btn-icon modal-viewport-btn ${this._viewport === id ? 'is-active' : ''}"
+                  aria-label=${label}
+                  title=${label}
+                  aria-pressed=${this._viewport === id}
+                  @click=${() => { this._viewport = id; }}>
+            <svg aria-hidden="true" viewBox="0 0 20 20"><use href="${icon}#icon"></use></svg>
+          </button>`)}
+      </div>`;
+  }
+
   _renderPreview() {
     if (!this._previewInfo) {
       return html`<div class="modal-preview-placeholder">
@@ -280,11 +303,16 @@ class EwBlockLibraryModal extends LitElement {
     const { name, url, ok } = this._previewInfo;
     const hideIframe = ok === false ? 'hide-iframe' : '';
     const error = ok === false ? `It appears ${name} has not been previewed.` : '';
+    const width = VIEWPORTS.find(([id]) => id === this._viewport)?.[2] || '100%';
     return html`
       ${error ? html`<div class="modal-preview-error"><p>${error}</p></div>` : nothing}
-      <iframe class="modal-preview-frame ${hideIframe}" src=${url}
-              title="Preview of ${name}"
-              allow="clipboard-write *"></iframe>`;
+      <div class="modal-preview-stage">
+        <div class="modal-preview-viewport" style="width:${width}">
+          <iframe class="modal-preview-frame ${hideIframe}" src=${url}
+                  title="Preview of ${name}"
+                  allow="clipboard-write *"></iframe>
+        </div>
+      </div>`;
   }
 
   render() {
@@ -301,7 +329,10 @@ class EwBlockLibraryModal extends LitElement {
               ${this._renderSearch()}
               ${this._renderTree()}
             </aside>
-            <section class="modal-preview-wrap">${this._renderPreview()}</section>
+            <section class="modal-preview-wrap">
+              ${this._previewInfo ? this._renderViewportBar() : nothing}
+              ${this._renderPreview()}
+            </section>
           </div>
         </div>
       </nx-dialog>`;