@kubex/zinc 1.1.68 → 1.1.70

package/src/components/input/input.test.ts

@@ -172,4 +172,49 @@ describe('<zn-input>', () => {
       expect(secondInput.value).to.equal('');
     });
   });
+
+  describe('type="range"', () => {
+    const contextNote = (el: ZnInput) =>
+      el.shadowRoot!.querySelector('.form-control__label-context-note')!.textContent!.trim();
+
+    it('adopts the native midpoint when no value is set', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="range" min="0" max="10"></zn-input>`);
+      await el.updateComplete;
+
+      expect(el.value).to.equal('5');
+    });
+
+    it('displays the value with its suffix in the context note', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="2" step="0.5" value="0.5" value-suffix="rem"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('0.5rem');
+    });
+
+    it('updates the context note as the value changes', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="10" value="4" value-suffix="px"></zn-input>`
+      );
+      await el.updateComplete;
+
+      const input = el.shadowRoot!.querySelector('.input__control') as HTMLInputElement;
+      input.value = '7';
+      input.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      expect(el.value).to.equal('7');
+      expect(contextNote(el)).to.equal('7px');
+    });
+
+    it('prefers an explicit context-note over the value', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" context-note="Custom" value="4"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('Custom');
+    });
+  });
 });

package/src/components/preview-frame/preview-frame.component.ts

@@ -6,11 +6,21 @@ import ZincElement from '../../internal/zinc-element';
 
 import styles from './preview-frame.scss';
 
+const DEVICE_WIDTHS = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '390px',
+} as const;
+
+export type PreviewFrameDevice = keyof typeof DEVICE_WIDTHS;
+
 /**
  * @summary Embeds a live preview iframe and drives the hp-preview postMessage
  * protocol: answers the frame's ready handshake with a config payload fetched
- * from data-uri, auto-saves watched forms on change, and refreshes the
- * preview after each save.
+ * from data-uri, auto-saves watched forms on change, refreshes the preview
+ * after each save (its own, or a shell-driven save of a `refresh-on` form),
+ * and accepts a theme payload via setTheme() that is retained and replayed
+ * after every ready handshake.
  * @documentation https://zinc.style/components/preview-frame
  * @status experimental
  * @since 1.0
@@ -18,8 +28,12 @@ import styles from './preview-frame.scss';
  * @event zn-error - Emitted when the preview reports a render error or a save fails.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart stage - The device-width wrapper around the iframe.
  * @csspart iframe - The preview iframe.
  * @csspart error - The error overlay.
+ *
+ * @cssproperty --zn-preview-frame-dot-spacing - Spacing of the backdrop dot grid (`backdrop="dots"`). Defaults to 20px.
+ * @cssproperty --zn-preview-frame-dot-opacity - Opacity of the backdrop dots (`backdrop="dots"`). Defaults to 0.08.
  */
 export default class ZnPreviewFrame extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -41,6 +55,15 @@ export default class ZnPreviewFrame extends ZincElement {
    */
   @property() watch = 'form[data-auto-save]';
 
+  /**
+   * Selector for forms whose saves are left to the shell but should still
+   * refresh the preview. These are never intercepted: the shell submits them
+   * (so its own response handling — alerts, refreshes — runs as normal) and the
+   * preview re-fetches its config once the shell reports the save complete.
+   * Set empty to disable.
+   */
+  @property({attribute: 'refresh-on'}) refreshOn = 'form';
+
   /** Debounce in ms between a form change and its auto-save. */
   @property({type: Number}) debounce = 400;
 
@@ -48,23 +71,46 @@ export default class ZnPreviewFrame extends ZincElement {
    * Zooms the previewed page out (0–1]. The frame always fills the panel;
    * zoom shrinks the content browser-style, so 0.4 shows the page at 40%
    * size with correspondingly more of it visible. 1 = natural size.
+   * Ignored when `fill` is set.
    */
   @property({type: Number}) zoom = 1;
 
   /**
    * The visible height (in CSS pixels) of the preview panel. Fixed rather
    * than measured, because a measured height would feed back into the
-   * scaled iframe's layout box and grow unbounded.
+   * scaled iframe's layout box and grow unbounded. With `fill` set, this
+   * becomes a `min-height` floor instead of the height.
    */
   @property({type: Number, attribute: 'min-height'}) minHeight = 480;
 
+  /**
+   * Fills the panel's own column height instead of using a fixed
+   * `min-height` pixel height — for hosts (like zn-theme-editor) whose
+   * layout already stretches the column to match a taller sibling.
+   * `zoom` is ignored when set: its oversize maths depends on a known
+   * pixel height, which `fill` deliberately doesn't have.
+   */
+  @property({type: Boolean}) fill = false;
+
+  /**
+   * Constrains and centres the preview to a device width: `desktop` (100%),
+   * `tablet` (768px) or `mobile` (390px). The iframe element itself is
+   * narrowed, so the embedded page's own media queries fire.
+   */
+  @property({reflect: true}) device: PreviewFrameDevice = 'desktop';
+
+  /** Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill. */
+  @property({reflect: true}) backdrop: 'dots' | 'panel' = 'dots';
+
   @query('iframe') frame: HTMLIFrameElement;
 
   @state() private error = '';
 
   private _generation = 0;
+  private _theme: Record<string, unknown> | undefined;
 
   private readonly _watchedForms = new Set<HTMLFormElement>();
+  private readonly _refreshForms = new Set<HTMLFormElement>();
   private readonly _debounceTimers = new Map<HTMLFormElement, number>();
 
   // Forms are siblings in light DOM and get replaced when other content
@@ -95,6 +141,8 @@ export default class ZnPreviewFrame extends ZincElement {
     window.removeEventListener('message', this._onMessage);
     this._watchedForms.forEach(form => this._detachForm(form));
     this._watchedForms.clear();
+    this._refreshForms.forEach(form => form.removeEventListener('complete', this._onShellSave));
+    this._refreshForms.clear();
   }
 
   private readonly _onMessage = (e: MessageEvent) => {
@@ -105,7 +153,8 @@ export default class ZnPreviewFrame extends ZincElement {
     const data = e.data as {type?: string; message?: string} | undefined;
     switch (data?.type) {
       case 'hp-preview:ready':
-        void this._sendConfig();
+        // config first: the embed applies the theme on top of a rendered page
+        void this._sendConfig().then(() => this._postTheme());
         break;
       case 'hp-preview:rendered':
         this.error = '';
@@ -121,7 +170,29 @@ export default class ZnPreviewFrame extends ZincElement {
     return this._sendConfig();
   }
 
+  /**
+   * Pushes a theme payload into the preview. The payload is retained and
+   * re-posted after every ready handshake, so a frame reload doesn't drop an
+   * in-progress theme.
+   */
+  setTheme(theme: Record<string, unknown>) {
+    this._theme = theme;
+    this._postTheme();
+  }
+
+  private _postTheme() {
+    if (!this._theme || !this.frameOrigin) return;
+    this.frame?.contentWindow?.postMessage(
+      {type: 'hp-preview:theme', ...this._theme},
+      this.frameOrigin
+    );
+  }
+
   private async _sendConfig() {
+    // A theme-editor-only setup has no config endpoint; fetch('') would return
+    // the host page's HTML and fail JSON parsing into the error overlay.
+    if (!this.dataUri || !this.frameOrigin) return;
+
     const generation = ++this._generation;
     try {
       const response = await fetch(this.dataUri, {
@@ -168,8 +239,33 @@ export default class ZnPreviewFrame extends ZincElement {
       form.addEventListener('zn-input', this._onChange);
       form.addEventListener('change', this._onChange);
     });
+
+    // Shell-saved forms: the shell fires 'complete' on the form it submitted.
+    const refreshMatched = new Set<HTMLFormElement>();
+    if (this.refreshOn) {
+      root.querySelectorAll(this.refreshOn).forEach(node => {
+        if (node instanceof HTMLFormElement && !matched.has(node)) refreshMatched.add(node);
+      });
+    }
+
+    this._refreshForms.forEach(form => {
+      if (!refreshMatched.has(form)) {
+        form.removeEventListener('complete', this._onShellSave);
+        this._refreshForms.delete(form);
+      }
+    });
+
+    refreshMatched.forEach(form => {
+      if (this._refreshForms.has(form)) return;
+      this._refreshForms.add(form);
+      form.addEventListener('complete', this._onShellSave);
+    });
   }
 
+  private readonly _onShellSave = () => {
+    void this._sendConfig();
+  };
+
   private _detachForm(form: HTMLFormElement) {
     form.removeEventListener('submit', this._onSubmit, {capture: true});
     form.removeEventListener('zn-change', this._onChange);
@@ -202,8 +298,15 @@ export default class ZnPreviewFrame extends ZincElement {
       const response = await fetch(form.getAttribute('action') || '', {
         method: 'POST',
         credentials: 'same-origin',
+        // 'download' streams the app's own status and headers through verbatim;
+        // without it the console proxy pagelet-wraps the response and a failed
+        // save is indistinguishable from a successful one.
+        headers: {'x-kx-fetch-style': 'download'},
         body: new FormData(form),
       });
+      // Apps report a failed save as 204 plus an alert header, which is `ok`.
+      const alert = response.headers.get('x-kubex-alert-danger');
+      if (alert) throw new Error(alert);
       if (!response.ok) {
         throw new Error(await response.text() || response.statusText);
       }
@@ -224,21 +327,28 @@ export default class ZnPreviewFrame extends ZincElement {
     // transformed back down, so the frame fills the panel while the content
     // renders smaller and more of the page is visible. Percentage width means
     // nothing is measured — no layout feedback loop.
-    const iframeStyles = {
-      width: `${100 / zoom}%`,
-      height: `${this.minHeight / zoom}px`,
-      transform: `scale(${zoom})`,
-      transformOrigin: '0 0',
-    };
-    const containerStyles = {height: `${this.minHeight}px`};
+    const iframeStyles = this.fill
+      ? {width: '100%', height: '100%'}
+      : {
+        width: `${100 / zoom}%`,
+        height: `${this.minHeight / zoom}px`,
+        transform: `scale(${zoom})`,
+        transformOrigin: '0 0',
+      };
+    const containerStyles = this.fill
+      ? {height: '100%', minHeight: `${this.minHeight}px`}
+      : {height: `${this.minHeight}px`};
 
     return html`
       <div part="base" class="preview" style="${styleMap(containerStyles)}">
-        <iframe part="iframe"
-                src="${this.src}"
-                title="Payment form preview"
-                allow="local-network-access"
-                style="${styleMap(iframeStyles)}"></iframe>
+        <div part="stage" class="preview__stage"
+             style="${styleMap({width: DEVICE_WIDTHS[this.device] ?? DEVICE_WIDTHS.desktop})}">
+          <iframe part="iframe"
+                  src="${this.src}"
+                  title="Payment form preview"
+                  allow="local-network-access"
+                  style="${styleMap(iframeStyles)}"></iframe>
+        </div>
         ${this.error ? html`
           <div part="error" class="preview__error">${this.error}</div>` : ''}
       </div>`;

package/src/components/preview-frame/preview-frame.scss

@@ -2,16 +2,43 @@
   display: block;
 }
 
+// So `fill` works without the consumer also having to grow the host.
+:host([fill]) {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .preview {
   position: relative;
   width: 100%;
   overflow: hidden;
+
+  // Matches page-builder's canvas.
+  background:
+    radial-gradient(circle, rgba(var(--zn-text), var(--zn-preview-frame-dot-opacity, 0.08)) 1px, transparent 1px)
+    0 0 / var(--zn-preview-frame-dot-spacing, 20px) var(--zn-preview-frame-dot-spacing, 20px),
+    rgb(var(--zn-body));
+}
+
+// Higher specificity than .preview alone, so it wins without !important.
+:host([backdrop="panel"]) .preview {
+  background: rgb(var(--zn-panel));
+}
+
+.preview__stage {
+  height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
 iframe {
   display: block;
   width: 100%;
   border: 0;
+  // Iframes are transparent by default, so without this the dot grid would show
+  // through any embed that doesn't set its own background.
+  background: rgb(var(--zn-body));
 }
 
 .preview__error {

package/src/components/preview-frame/preview-frame.test.ts

@@ -160,6 +160,41 @@ describe('<zn-preview-frame>', () => {
     expect(fetchCalls[0].uri).to.contain('/save');
   });
 
+  it('treats a 204 carrying an alert-danger header as a failed save', async () => {
+    window.fetch = (uri: RequestInfo | URL, init?: RequestInit) => {
+      fetchCalls.push({uri: String(uri), init});
+      if (String(uri).includes('/save')) {
+        return Promise.resolve(new Response(null, {
+          status: 204,
+          headers: {'x-kubex-alert-danger': 'Unable to update page'}
+        }));
+      }
+      return Promise.resolve(new Response(JSON.stringify(PAYLOAD), {
+        status: 200,
+        headers: {'Content-Type': 'application/json'}
+      }));
+    };
+
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"></zn-preview-frame>
+      </div>`);
+
+    const el = wrapper.querySelector('zn-preview-frame')!;
+    wrapper.querySelector('form')!.requestSubmit();
+
+    await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+    expect(el.shadowRoot!.querySelector('[part="error"]')!.textContent)
+      .to.contain('Unable to update page');
+    // the preview must not be refreshed as though the save succeeded
+    expect(fetchCalls.filter(c => c.uri === '/payload').length).to.equal(0);
+    expect(fetchCalls[0].init?.headers).to.deep.equal({'x-kx-fetch-style': 'download'});
+  });
+
   it('does not save a form removed from the DOM mid-debounce', async () => {
     const wrapper = await fixture(html`
       <div>
@@ -179,6 +214,52 @@ describe('<zn-preview-frame>', () => {
     expect(fetchCalls.length).to.equal(0);
   });
 
+  it('refreshes the preview when the shell reports a form save complete', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"></zn-preview-frame>
+      </div>`);
+
+    const el = wrapper.querySelector('zn-preview-frame')!;
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage = (msg: Record<string, unknown>) => posted.push(msg);
+
+    // the shell submitted the form itself and fires 'complete' on it
+    wrapper.querySelector('form')!.dispatchEvent(
+      new CustomEvent('complete', {bubbles: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+    // the save itself stays with the shell — the component must not post it
+    expect(fetchCalls.some(c => c.uri.includes('/save'))).to.equal(false);
+    await waitUntil(() => posted.length === 1);
+    expect(posted[0]['type']).to.equal('hp-preview:config');
+  });
+
+  it('does not intercept the submit of a refresh-on form', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"></zn-preview-frame>
+      </div>`);
+
+    let bubbled = false;
+    wrapper.addEventListener('submit', e => { bubbled = true; e.preventDefault(); });
+
+    wrapper.querySelector('form')!.requestSubmit();
+
+    expect(bubbled).to.equal(true);
+    expect(fetchCalls.length).to.equal(0);
+  });
+
   it('leaves forms without data-auto-save alone', async () => {
     const wrapper = await fixture(html`
       <div>
@@ -256,6 +337,45 @@ describe('<zn-preview-frame>', () => {
     expect(container.style.height).to.equal('600px');
   });
 
+  describe('fill', () => {
+    it('fills the container instead of a fixed pixel height, with no zoom transform', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          min-height="480"
+          fill></zn-preview-frame>`);
+
+      const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      expect(container.style.height).to.equal('100%');
+      expect(container.style.minHeight).to.equal('480px');
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      expect(iframe.style.width).to.equal('100%');
+      expect(iframe.style.height).to.equal('100%');
+      expect(iframe.style.transform).to.equal('');
+    });
+
+    it('ignores zoom when fill is set', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          zoom="0.4"
+          min-height="600"
+          fill></zn-preview-frame>`);
+
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      expect(iframe.style.transform).to.equal('');
+      expect(iframe.style.width).to.equal('100%');
+      expect(iframe.style.height).to.equal('100%');
+      const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      expect(container.style.height).to.equal('100%');
+      expect(container.style.minHeight).to.equal('600px');
+    });
+  });
+
   it('renders at natural size by default', async () => {
     const el = await fixture(FIXTURE);
     const iframe = el.shadowRoot!.querySelector('iframe')!;
@@ -265,4 +385,137 @@ describe('<zn-preview-frame>', () => {
     const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
     expect(container.style.height).to.equal('480px');
   });
+
+  it('defaults to a full-width desktop stage', async () => {
+    const el = await fixture(FIXTURE);
+    const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+    expect(stage.style.width).to.equal('100%');
+  });
+
+  it('constrains the stage to the tablet width', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        device="tablet"></zn-preview-frame>`);
+
+    const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+    expect(stage.style.width).to.equal('768px');
+    // the iframe still sizes off the stage, so zoom maths is unaffected
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    expect(iframe.style.width).to.equal('100%');
+  });
+
+  it('constrains the stage to the mobile width', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        device="mobile"></zn-preview-frame>`);
+
+    const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+    expect(stage.style.width).to.equal('390px');
+  });
+
+  it('setTheme() posts an hp-preview:theme message', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: {msg: Record<string, unknown>; origin: string}[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>, origin: string) => void}).postMessage =
+      (msg: Record<string, unknown>, origin: string) => posted.push({msg, origin});
+
+    (el as HTMLElement & {setTheme: (t: Record<string, unknown>) => void})
+      .setTheme({mode: 'dark', values: {background: '#101014'}});
+
+    await waitUntil(() => posted.length === 1);
+    expect(posted[0].origin).to.equal('https://site.example');
+    expect(posted[0].msg['type']).to.equal('hp-preview:theme');
+    expect(posted[0].msg['mode']).to.equal('dark');
+    expect(posted[0].msg['values']).to.deep.equal({background: '#101014'});
+  });
+
+  it('replays the stored theme after a ready handshake', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage =
+      (msg: Record<string, unknown>) => posted.push(msg);
+
+    (el as HTMLElement & {setTheme: (t: Record<string, unknown>) => void})
+      .setTheme({mode: 'light', values: {background: '#ffffff'}});
+    await waitUntil(() => posted.length === 1);
+
+    // a frame reload re-announces readiness; the theme must survive it
+    ready(el);
+
+    await waitUntil(() => posted.length === 3);
+    expect(posted[1]['type']).to.equal('hp-preview:config');
+    expect(posted[2]['type']).to.equal('hp-preview:theme');
+    expect(posted[2]['values']).to.deep.equal({background: '#ffffff'});
+  });
+
+  it('setTheme() does not throw and posts nothing when frame-origin is unset', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame src="about:blank" data-uri="/payload"></zn-preview-frame>`);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    // Forward to the real postMessage (not mocked) so an unguarded '' target
+    // origin actually throws its SyntaxError, same as it would in production.
+    const realPostMessage = iframe.contentWindow!.postMessage.bind(iframe.contentWindow);
+    let calls = 0;
+    (iframe.contentWindow as {postMessage: (...args: unknown[]) => void}).postMessage =
+      (...args: unknown[]) => { calls++; return (realPostMessage as (...a: unknown[]) => void)(...args); };
+
+    expect(() => (el as HTMLElement & {setTheme: (t: Record<string, unknown>) => void})
+      .setTheme({mode: 'light', values: {}})).to.not.throw();
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(calls).to.equal(0);
+  });
+
+  // The docs site's theme stylesheet (--zn-text/--zn-body/--zn-panel) isn't
+  // loaded in this test shell, so an undefined var() makes the whole
+  // declaration invalid - set them inline to get a real computed background.
+  it('renders a dot grid backdrop by default', async () => {
+    const el = await fixture(FIXTURE) as HTMLElement;
+    el.style.setProperty('--zn-text', '0, 0, 0');
+    el.style.setProperty('--zn-body', '255, 255, 255');
+
+    expect(el.getAttribute('backdrop')).to.equal('dots');
+    const preview = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(getComputedStyle(preview).backgroundImage).to.not.equal('none');
+  });
+
+  it('renders a plain panel backdrop when backdrop="panel"', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        backdrop="panel"></zn-preview-frame>`) as HTMLElement;
+    el.style.setProperty('--zn-panel', '240, 240, 240');
+
+    expect(el.getAttribute('backdrop')).to.equal('panel');
+    const preview = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(getComputedStyle(preview).backgroundImage).to.equal('none');
+  });
+
+  it('skips the config fetch when data-uri is empty', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame src="about:blank" frame-origin="https://site.example"></zn-preview-frame>`);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage =
+      (msg: Record<string, unknown>) => posted.push(msg);
+
+    (el as HTMLElement & {setTheme: (t: Record<string, unknown>) => void}).setTheme({mode: 'light', values: {}});
+    ready(el);
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(fetchCalls.length).to.equal(0);
+    expect(el.shadowRoot!.querySelector('[part="error"]')).to.not.exist;
+    // theme still replays even with no config to send
+    expect(posted.filter(m => m['type'] === 'hp-preview:theme').length).to.equal(2);
+  });
 });

package/src/components/theme-editor/index.ts

@@ -0,0 +1,12 @@
+import ZnThemeEditor from './theme-editor.component';
+
+export * from './theme-editor.component';
+export default ZnThemeEditor;
+
+ZnThemeEditor.define('zn-theme-editor');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-theme-editor': ZnThemeEditor;
+  }
+}