@kubex/zinc 1.1.85 → 1.1.86

package/dist/vscode.html-custom-data.json

@@ -13,6 +13,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -53,17 +64,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -138,21 +138,6 @@
         }
       ]
     },
-    {
-      "name": "zn-bulk-actions",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        { "name": "name", "values": [] },
-        { "name": "value", "values": [{ "name": "PropertyKey" }] },
-        { "name": "actions", "values": [{ "name": "BulkActionData" }] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/bulk-actions"
-        }
-      ]
-    },
     {
       "name": "zn-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -286,6 +271,21 @@
         }
       ]
     },
+    {
+      "name": "zn-bulk-actions",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [{ "name": "PropertyKey" }] },
+        { "name": "actions", "values": [{ "name": "BulkActionData" }] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/bulk-actions"
+        }
+      ]
+    },
     {
       "name": "zn-button-group",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3033,7 +3033,7 @@
         },
         {
           "name": "refresh-on",
-          "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nSet empty to disable.",
+          "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
           "values": []
         },
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.85",
+  "version": "1.1.86",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -83,28 +105,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -250,44 +250,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-bulk-actions",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "PropertyKey" } },
-            {
-              "name": "actions",
-              "value": { "type": "BulkActionData", "default": "[]" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "container", "type": "HTMLDivElement" },
-              { "name": "addRule", "type": "ZnSelect" },
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "PropertyKey" },
-              { "name": "actions", "type": "BulkActionData" },
-              { "name": "validationMessage", "type": "string" },
-              { "name": "validity", "type": "ValidityState" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -554,6 +516,44 @@
             ]
           }
         },
+        {
+          "name": "zn-bulk-actions",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "PropertyKey" } },
+            {
+              "name": "actions",
+              "value": { "type": "BulkActionData", "default": "[]" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "container", "type": "HTMLDivElement" },
+              { "name": "addRule", "type": "ZnSelect" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "PropertyKey" },
+              { "name": "actions", "type": "BulkActionData" },
+              { "name": "validationMessage", "type": "string" },
+              { "name": "validity", "type": "ValidityState" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-button-group",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -7089,7 +7089,7 @@
             },
             {
               "name": "refresh-on",
-              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nSet empty to disable.",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
               "value": { "type": "string", "default": "'form'" }
             },
             {
@@ -7158,7 +7158,7 @@
               },
               {
                 "name": "refreshOn",
-                "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nSet empty to disable.",
+                "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
                 "type": "string"
               },
               {

package/dist/zn.d.ts

@@ -10980,6 +10980,11 @@ declare module "components/preview-frame/preview-frame.component" {
          * 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.
+         * Matched by delegation on the shell's bubbled `complete` event rather than
+         * by attaching to the forms themselves, so a save anywhere on the page
+         * refreshes the preview — including forms in a different DOM root, e.g. a
+         * page-level form saved while the preview sits inside a tab panel's shadow
+         * root (a page's Template select lives on one tab, its preview on another).
          * Set empty to disable.
          */
         refreshOn: string;
@@ -11047,8 +11052,9 @@ declare module "components/preview-frame/preview-frame.component" {
         private _theme;
         private _contentObserver;
         private readonly _watchedForms;
-        private readonly _refreshForms;
         private readonly _debounceTimers;
+        private _shellSaveRoots;
+        private _lastShellSave;
         private readonly _formObserver;
         connectedCallback(): void;
         protected willUpdate(changed: PropertyValues<this>): void;

package/dist/zn.min.js

@@ -5578,7 +5578,7 @@ ${n}`:""}</li></ol>`};return t(0)}parseTable(o,t){this.index++;let r=[],n=[];for
         ${this._renderInspector()}
         <slot name="config" class="declarations" @slotchange="${this._registerSlottedTemplates}"></slot>
       </div>
-    `}};At.styles=T(I_),At.dependencies={"zn-collapsible":la,"zn-icon":ct,"zn-input":Se,"zn-page-palette-item":Jf,"zn-page-section-card":Zf},c([p()],At.prototype,"name",2),c([p({reflect:!0})],At.prototype,"form",2),c([p()],At.prototype,"config",2),c([p({reflect:!0})],At.prototype,"heading",2),c([p({reflect:!0})],At.prototype,"subheading",2),c([p({attribute:!1})],At.prototype,"sectionTypes",2),c([p({type:Boolean,reflect:!0,attribute:"palette-collapsed"})],At.prototype,"paletteCollapsed",2),c([p({type:Boolean,reflect:!0,attribute:"inspector-collapsed"})],At.prototype,"inspectorCollapsed",2),c([p({attribute:"auto-save",converter:{fromAttribute:t=>{if(t===null)return null;let r=parseFloat(t);return Number.isFinite(r)&&r>0?r:RM},toAttribute:t=>t===null?null:String(t)}})],At.prototype,"autoSave",2),c([O()],At.prototype,"_state",2),c([O()],At.prototype,"_selectedId",2),c([O()],At.prototype,"_search",2),c([O()],At.prototype,"_pickerIndex",2),c([O()],At.prototype,"_dragOverIndex",2),c([O()],At.prototype,"_slotDragOver",2),c([O()],At.prototype,"_slotPicker",2),c([O()],At.prototype,"_form",2),c([K("config")],At.prototype,"handleConfigChange",1),c([K("sectionTypes")],At.prototype,"handleSectionTypesChange",1),c([O()],At.prototype,"_lastSavedAt",2),c([O()],At.prototype,"_justSaved",2),c([O()],At.prototype,"_statusNow",2),c([O()],At.prototype,"_restorePrompt",2);var PM=At;At.define("zn-page-builder");var N_=E`:host{display:block}:host([fill]){flex:1 1 auto;min-height:0}.preview{position:relative;width:100%;overflow-x:hidden;overflow-y:auto;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))}: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;pointer-events:none;background:rgb(var(--zn-body))}:host([interactive]) iframe{pointer-events:auto}.preview__error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;background:rgba(0,0,0,0.65);color:#fff}`;var R_={desktop:"100%",tablet:"768px",mobile:"390px"},we=class extends k{constructor(){super(...arguments);this.src="";this.frameOrigin="";this.dataUri="";this.watch="form[data-auto-save]";this.refreshOn="form";this.debounce=400;this.zoom=1;this.minHeight=480;this.fill=!1;this.device="desktop";this.backdrop="dots";this.interactive=!1;this.error="";this._contentHeight=0;this._generation=0;this._watchedForms=new Set;this._refreshForms=new Set;this._debounceTimers=new Map;this._formObserver=new Lt(this,{target:null,config:{subtree:!0,childList:!0},callback:()=>this._attachForms()});this._onMessage=t=>{if(t.origin!==this.frameOrigin||!this.frame||t.source!==this.frame.contentWindow)return;let r=t.data;switch(r?.type){case"hp-preview:ready":this._sendConfig().then(()=>this._postTheme());break;case"hp-preview:rendered":this.error="",this._applyContentHeight(r.height);break;case"hp-preview:height":this._applyContentHeight(r.height);break;case"hp-preview:error":this._fail(String(r.message??"Preview failed to render"));break}};this._onFrameLoad=()=>{this._contentObserver?.disconnect(),this._contentObserver=void 0;let t;try{t=this.frame?.contentDocument?.documentElement}catch{return}if(!t)return;let r=()=>{let n=t.getBoundingClientRect().height;n>(this.frame?.clientHeight??0)&&this._applyContentHeight(n)};r(),this._contentObserver=new ResizeObserver(r),this._contentObserver.observe(t)};this._onShellSave=()=>{this._sendConfig()};this._onChange=t=>{let r=t.currentTarget,n=this._debounceTimers.get(r);n&&window.clearTimeout(n),this._debounceTimers.set(r,window.setTimeout(()=>{this._debounceTimers.delete(r),r.isConnected&&r.requestSubmit()},this.debounce))};this._onSubmit=t=>{t.preventDefault(),t.stopImmediatePropagation(),this._save(t.currentTarget)}}connectedCallback(){super.connectedCallback(),window.addEventListener("message",this._onMessage),this._attachForms();let t=this.getRootNode();t instanceof Document?this._formObserver.observe(t.body):t instanceof ShadowRoot&&this._formObserver.observe(t)}willUpdate(t){t.has("src")&&this._resetContentHeight()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("message",this._onMessage),this._contentObserver?.disconnect(),this._contentObserver=void 0,this._watchedForms.forEach(t=>this._detachForm(t)),this._watchedForms.clear(),this._refreshForms.forEach(t=>t.removeEventListener("complete",this._onShellSave)),this._refreshForms.clear()}_applyContentHeight(t){let r=Math.round(Number(t));!Number.isFinite(r)||r<=0||(this._contentHeight=r)}_resetContentHeight(){this._contentHeight=0,this._contentObserver?.disconnect(),this._contentObserver=void 0}refresh(){return this._sendConfig()}setTheme(t){this._theme=t,this._postTheme()}_postTheme(){!this._theme||!this.frameOrigin||this.frame?.contentWindow?.postMessage({type:"hp-preview:theme",...this._theme},this.frameOrigin)}async _sendConfig(){if(!this.dataUri||!this.frameOrigin)return;let t=++this._generation;try{let r=await fetch(this.dataUri,{credentials:"same-origin",headers:{"x-kx-fetch-style":"download"}});if(!r.ok)throw new Error(await r.text()||r.statusText);let n=await r.json();if(t!==this._generation)return;this.frame?.contentWindow?.postMessage({type:"hp-preview:config",...n},this.frameOrigin)}catch(r){t===this._generation&&this._fail(r instanceof Error?r.message:String(r))}}_attachForms(){let t=this.getRootNode(),r=new Set;t.querySelectorAll(this.watch).forEach(a=>{a instanceof HTMLFormElement&&r.add(a)}),this._watchedForms.forEach(a=>{r.has(a)||(this._detachForm(a),this._watchedForms.delete(a))}),r.forEach(a=>{this._watchedForms.has(a)||(this._watchedForms.add(a),a.addEventListener("submit",this._onSubmit,{capture:!0}),a.addEventListener("zn-change",this._onChange),a.addEventListener("zn-input",this._onChange),a.addEventListener("change",this._onChange))});let n=new Set;this.refreshOn&&t.querySelectorAll(this.refreshOn).forEach(a=>{a instanceof HTMLFormElement&&!r.has(a)&&n.add(a)}),this._refreshForms.forEach(a=>{n.has(a)||(a.removeEventListener("complete",this._onShellSave),this._refreshForms.delete(a))}),n.forEach(a=>{this._refreshForms.has(a)||(this._refreshForms.add(a),a.addEventListener("complete",this._onShellSave))})}_detachForm(t){t.removeEventListener("submit",this._onSubmit,{capture:!0}),t.removeEventListener("zn-change",this._onChange),t.removeEventListener("zn-input",this._onChange),t.removeEventListener("change",this._onChange);let r=this._debounceTimers.get(t);r&&window.clearTimeout(r),this._debounceTimers.delete(t)}async _save(t){try{let r=await fetch(t.getAttribute("action")||"",{method:"POST",credentials:"same-origin",headers:{"x-kx-fetch-style":"download"},body:new FormData(t)}),n=r.headers.get("x-kubex-alert-danger");if(n)throw new Error(n);if(!r.ok)throw new Error(await r.text()||r.statusText);await this._sendConfig()}catch(r){this._fail(r instanceof Error?r.message:String(r))}}_fail(t){this.error=t,this.emit("zn-error",{detail:{message:t}})}render(){let t=this.zoom>0&&this.zoom<=1?this.zoom:1,r=this.error||this.interactive?0:this._contentHeight,n=this.fill?{width:"100%",height:r?`max(${r}px, 100%)`:"100%"}:{width:`${100/t}%`,height:`${Math.max(r,this.minHeight/t)}px`,transform:`scale(${t})`,transformOrigin:"0 0"},a=this.fill?{height:"100%",minHeight:`${this.minHeight}px`}:{height:`${this.minHeight}px`},s={width:R_[this.device]??R_.desktop};return r&&(s.height=this.fill?`max(${r}px, 100%)`:`${Math.max(r*t,this.minHeight)}px`),u`
+    `}};At.styles=T(I_),At.dependencies={"zn-collapsible":la,"zn-icon":ct,"zn-input":Se,"zn-page-palette-item":Jf,"zn-page-section-card":Zf},c([p()],At.prototype,"name",2),c([p({reflect:!0})],At.prototype,"form",2),c([p()],At.prototype,"config",2),c([p({reflect:!0})],At.prototype,"heading",2),c([p({reflect:!0})],At.prototype,"subheading",2),c([p({attribute:!1})],At.prototype,"sectionTypes",2),c([p({type:Boolean,reflect:!0,attribute:"palette-collapsed"})],At.prototype,"paletteCollapsed",2),c([p({type:Boolean,reflect:!0,attribute:"inspector-collapsed"})],At.prototype,"inspectorCollapsed",2),c([p({attribute:"auto-save",converter:{fromAttribute:t=>{if(t===null)return null;let r=parseFloat(t);return Number.isFinite(r)&&r>0?r:RM},toAttribute:t=>t===null?null:String(t)}})],At.prototype,"autoSave",2),c([O()],At.prototype,"_state",2),c([O()],At.prototype,"_selectedId",2),c([O()],At.prototype,"_search",2),c([O()],At.prototype,"_pickerIndex",2),c([O()],At.prototype,"_dragOverIndex",2),c([O()],At.prototype,"_slotDragOver",2),c([O()],At.prototype,"_slotPicker",2),c([O()],At.prototype,"_form",2),c([K("config")],At.prototype,"handleConfigChange",1),c([K("sectionTypes")],At.prototype,"handleSectionTypesChange",1),c([O()],At.prototype,"_lastSavedAt",2),c([O()],At.prototype,"_justSaved",2),c([O()],At.prototype,"_statusNow",2),c([O()],At.prototype,"_restorePrompt",2);var PM=At;At.define("zn-page-builder");var N_=E`:host{display:block}:host([fill]){flex:1 1 auto;min-height:0}.preview{position:relative;width:100%;overflow-x:hidden;overflow-y:auto;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))}: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;pointer-events:none;background:rgb(var(--zn-body))}:host([interactive]) iframe{pointer-events:auto}.preview__error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;background:rgba(0,0,0,0.65);color:#fff}`;var R_={desktop:"100%",tablet:"768px",mobile:"390px"},we=class extends k{constructor(){super(...arguments);this.src="";this.frameOrigin="";this.dataUri="";this.watch="form[data-auto-save]";this.refreshOn="form";this.debounce=400;this.zoom=1;this.minHeight=480;this.fill=!1;this.device="desktop";this.backdrop="dots";this.interactive=!1;this.error="";this._contentHeight=0;this._generation=0;this._watchedForms=new Set;this._debounceTimers=new Map;this._shellSaveRoots=[];this._formObserver=new Lt(this,{target:null,config:{subtree:!0,childList:!0},callback:()=>this._attachForms()});this._onMessage=t=>{if(t.origin!==this.frameOrigin||!this.frame||t.source!==this.frame.contentWindow)return;let r=t.data;switch(r?.type){case"hp-preview:ready":this._sendConfig().then(()=>this._postTheme());break;case"hp-preview:rendered":this.error="",this._applyContentHeight(r.height);break;case"hp-preview:height":this._applyContentHeight(r.height);break;case"hp-preview:error":this._fail(String(r.message??"Preview failed to render"));break}};this._onFrameLoad=()=>{this._contentObserver?.disconnect(),this._contentObserver=void 0;let t;try{t=this.frame?.contentDocument?.documentElement}catch{return}if(!t)return;let r=()=>{let n=t.getBoundingClientRect().height;n>(this.frame?.clientHeight??0)&&this._applyContentHeight(n)};r(),this._contentObserver=new ResizeObserver(r),this._contentObserver.observe(t)};this._onShellSave=t=>{if(t===this._lastShellSave||(this._lastShellSave=t,!this.refreshOn))return;let r=t.composedPath()[0];!(r instanceof HTMLFormElement)||!r.matches(this.refreshOn)||this._watchedForms.has(r)||this._sendConfig()};this._onChange=t=>{let r=t.currentTarget,n=this._debounceTimers.get(r);n&&window.clearTimeout(n),this._debounceTimers.set(r,window.setTimeout(()=>{this._debounceTimers.delete(r),r.isConnected&&r.requestSubmit()},this.debounce))};this._onSubmit=t=>{t.preventDefault(),t.stopImmediatePropagation(),this._save(t.currentTarget)}}connectedCallback(){super.connectedCallback(),window.addEventListener("message",this._onMessage),this._attachForms();let t=this.getRootNode();this._shellSaveRoots=t instanceof ShadowRoot?[document,t]:[document],this._shellSaveRoots.forEach(r=>r.addEventListener("complete",this._onShellSave)),t instanceof Document?this._formObserver.observe(t.body):t instanceof ShadowRoot&&this._formObserver.observe(t)}willUpdate(t){t.has("src")&&this._resetContentHeight()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("message",this._onMessage),this._contentObserver?.disconnect(),this._contentObserver=void 0,this._watchedForms.forEach(t=>this._detachForm(t)),this._watchedForms.clear(),this._shellSaveRoots.forEach(t=>t.removeEventListener("complete",this._onShellSave)),this._shellSaveRoots=[]}_applyContentHeight(t){let r=Math.round(Number(t));!Number.isFinite(r)||r<=0||(this._contentHeight=r)}_resetContentHeight(){this._contentHeight=0,this._contentObserver?.disconnect(),this._contentObserver=void 0}refresh(){return this._sendConfig()}setTheme(t){this._theme=t,this._postTheme()}_postTheme(){!this._theme||!this.frameOrigin||this.frame?.contentWindow?.postMessage({type:"hp-preview:theme",...this._theme},this.frameOrigin)}async _sendConfig(){if(!this.dataUri||!this.frameOrigin)return;let t=++this._generation;try{let r=await fetch(this.dataUri,{credentials:"same-origin",headers:{"x-kx-fetch-style":"download"}});if(!r.ok)throw new Error(await r.text()||r.statusText);let n=await r.json();if(t!==this._generation)return;this.frame?.contentWindow?.postMessage({type:"hp-preview:config",...n},this.frameOrigin)}catch(r){t===this._generation&&this._fail(r instanceof Error?r.message:String(r))}}_attachForms(){let t=this.getRootNode(),r=new Set;t.querySelectorAll(this.watch).forEach(n=>{n instanceof HTMLFormElement&&r.add(n)}),this._watchedForms.forEach(n=>{r.has(n)||(this._detachForm(n),this._watchedForms.delete(n))}),r.forEach(n=>{this._watchedForms.has(n)||(this._watchedForms.add(n),n.addEventListener("submit",this._onSubmit,{capture:!0}),n.addEventListener("zn-change",this._onChange),n.addEventListener("zn-input",this._onChange),n.addEventListener("change",this._onChange))})}_detachForm(t){t.removeEventListener("submit",this._onSubmit,{capture:!0}),t.removeEventListener("zn-change",this._onChange),t.removeEventListener("zn-input",this._onChange),t.removeEventListener("change",this._onChange);let r=this._debounceTimers.get(t);r&&window.clearTimeout(r),this._debounceTimers.delete(t)}async _save(t){try{let r=await fetch(t.getAttribute("action")||"",{method:"POST",credentials:"same-origin",headers:{"x-kx-fetch-style":"download"},body:new FormData(t)}),n=r.headers.get("x-kubex-alert-danger");if(n)throw new Error(n);if(!r.ok)throw new Error(await r.text()||r.statusText);await this._sendConfig()}catch(r){this._fail(r instanceof Error?r.message:String(r))}}_fail(t){this.error=t,this.emit("zn-error",{detail:{message:t}})}render(){let t=this.zoom>0&&this.zoom<=1?this.zoom:1,r=this.error||this.interactive?0:this._contentHeight,n=this.fill?{width:"100%",height:r?`max(${r}px, 100%)`:"100%"}:{width:`${100/t}%`,height:`${Math.max(r,this.minHeight/t)}px`,transform:`scale(${t})`,transformOrigin:"0 0"},a=this.fill?{height:"100%",minHeight:`${this.minHeight}px`}:{height:`${this.minHeight}px`},s={width:R_[this.device]??R_.desktop};return r&&(s.height=this.fill?`max(${r}px, 100%)`:`${Math.max(r*t,this.minHeight)}px`),u`
       <div part="base" class="preview" style="${Sr(a)}">
         <div part="stage" class="preview__stage" style="${Sr(s)}">
           <iframe part="iframe"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.85",
+  "version": "1.1.86",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

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

@@ -62,6 +62,11 @@ export default class ZnPreviewFrame extends ZincElement {
    * 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.
+   * Matched by delegation on the shell's bubbled `complete` event rather than
+   * by attaching to the forms themselves, so a save anywhere on the page
+   * refreshes the preview — including forms in a different DOM root, e.g. a
+   * page-level form saved while the preview sits inside a tab panel's shadow
+   * root (a page's Template select lives on one tab, its preview on another).
    * Set empty to disable.
    */
   @property({attribute: 'refresh-on'}) refreshOn = 'form';
@@ -141,8 +146,13 @@ export default class ZnPreviewFrame extends ZincElement {
   private _contentObserver: ResizeObserver | undefined;
 
   private readonly _watchedForms = new Set<HTMLFormElement>();
-  private readonly _refreshForms = new Set<HTMLFormElement>();
   private readonly _debounceTimers = new Map<HTMLFormElement, number>();
+  // 'complete' delegation targets: the document always, plus the component's
+  // own shadow root when it has one (a non-composed event never reaches the
+  // document). A composed event inside the shadow root hits both, so the
+  // handler dedupes by event object.
+  private _shellSaveRoots: EventTarget[] = [];
+  private _lastShellSave: Event | undefined;
 
   // Forms are siblings in light DOM and get replaced when other content
   // re-renders; re-resolve them whenever the surrounding DOM changes.
@@ -158,6 +168,8 @@ export default class ZnPreviewFrame extends ZincElement {
     window.addEventListener('message', this._onMessage);
     this._attachForms();
     const root = this.getRootNode();
+    this._shellSaveRoots = root instanceof ShadowRoot ? [document, root] : [document];
+    this._shellSaveRoots.forEach(target => target.addEventListener('complete', this._onShellSave));
     if (root instanceof Document) {
       this._formObserver.observe(root.body);
     } else if (root instanceof ShadowRoot) {
@@ -178,8 +190,8 @@ export default class ZnPreviewFrame extends ZincElement {
     this._contentObserver = undefined;
     this._watchedForms.forEach(form => this._detachForm(form));
     this._watchedForms.clear();
-    this._refreshForms.forEach(form => form.removeEventListener('complete', this._onShellSave));
-    this._refreshForms.clear();
+    this._shellSaveRoots.forEach(target => target.removeEventListener('complete', this._onShellSave));
+    this._shellSaveRoots = [];
   }
 
   private readonly _onMessage = (e: MessageEvent) => {
@@ -315,30 +327,18 @@ 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 = () => {
+  // Shell-saved forms: the shell fires a bubbling 'complete' on the form it
+  // submitted. composedPath()[0] recovers the form when the event was
+  // retargeted crossing a shadow boundary on its way to the document.
+  private readonly _onShellSave = (e: Event) => {
+    if (e === this._lastShellSave) return;
+    this._lastShellSave = e;
+    if (!this.refreshOn) return;
+    const origin = e.composedPath()[0];
+    if (!(origin instanceof HTMLFormElement) || !origin.matches(this.refreshOn)) return;
+    if (this._watchedForms.has(origin)) return; // auto-saved forms refresh via _save
     void this._sendConfig();
   };
 

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

@@ -248,6 +248,54 @@ describe('<zn-preview-frame>', () => {
     expect(posted[0]['type']).to.equal('hp-preview:config');
   });
 
+  // A uri tab panel puts the preview in the tabs component's shadow root while
+  // page-level forms (e.g. the page's Template select) stay in the document —
+  // a save out there must still refresh the preview.
+  it('refreshes on a shell save of a form outside the component\'s own root', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="template" value="flow"></form>
+        <div id="host"></div>
+      </div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    wrapper.querySelector('form')!.dispatchEvent(
+      new CustomEvent('complete', {bubbles: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+  });
+
+  it('refreshes once for a composed complete event inside its own shadow root', async () => {
+    const wrapper = await fixture(html`<div><div id="host"></div></div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const form = document.createElement('form');
+    form.setAttribute('action', '/save');
+    shadow.appendChild(form);
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    // the shell fires composed events, so this reaches both the shadow root
+    // and the document — it must trigger a single refresh
+    form.dispatchEvent(new CustomEvent('complete', {bubbles: true, composed: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(1);
+  });
+
   it('does not intercept the submit of a refresh-on form', async () => {
     const wrapper = await fixture(html`
       <div>