@craftile/plugin-static-blocks-renderer 0.11.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,11 +1,11 @@
1
- "use strict";const E='var xe=Object.defineProperty;var Te=(y,C,v)=>C in y?xe(y,C,{enumerable:!0,configurable:!0,writable:!0,value:v}):y[C]=v;var w=(y,C,v)=>Te(y,typeof C!="symbol"?C+"":C,v);var HtmlPreviewClient=(function(){"use strict";var y=Object.defineProperty,C=(o,e,t)=>e in o?y(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,v=(o,e,t)=>C(o,typeof e!="symbol"?e+"":e,t);class ie{constructor(e,t="*"){v(this,"handlers",new Map),v(this,"targetWindow"),v(this,"targetOrigin"),v(this,"fallbackHandler"),this.targetWindow=e,this.targetOrigin=t,window.addEventListener("message",this.handleMessage.bind(this))}handleMessage(e){const t=e.data;if(!t.type)return;const n=this.handlers.get(t.type);n?n.forEach(i=>i(t.payload,e)):this.fallbackHandler&&this.fallbackHandler(e.data,e)}send(e,t){const n={type:e,payload:t};this.targetWindow.postMessage(n,this.targetOrigin)}listen(e,t){return this.handlers.has(e)||this.handlers.set(e,[]),this.handlers.get(e).push(t),()=>{const n=this.handlers.get(e);if(n){const i=n.indexOf(t);i>-1&&n.splice(i,1)}}}registerFallbackHandler(e){this.fallbackHandler=e}}function re(o="*"){if(window.parent===window)throw new Error("Not inside an iframe");return new ie(window.parent,o)}class se{constructor(){v(this,"listeners",new Map)}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>{this.off(e,t)}}off(e,t){const n=this.listeners.get(e);n&&(n.delete(t),n.size===0&&this.listeners.delete(e))}once(e,t){const n=i=>{t(i),this.off(e,n)};this.on(e,n)}emit(e,...t){const n=this.listeners.get(e);if(n){const i=t[0];n.forEach(r=>{try{r(i)}catch(s){console.error(`Error in event listener for \'${String(e)}\':`,s)}})}}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}}class oe{constructor(e){v(this,"active",!0),v(this,"messenger"),v(this,"currentHoveredBlock",null),v(this,"currentSelectedBlock",null),v(this,"overlayButtonHovered",!1),v(this,"resizeObserver",null),v(this,"mutationObserver",null),this.messenger=e,this.messenger.listen("craftile.inspector.enable",()=>this.enable()),this.messenger.listen("craftile.inspector.disable",()=>this.disable()),this.messenger.listen("craftile.inspector.overlay-button-enter",this.handleOverlayButtonEnter.bind(this)),this.messenger.listen("craftile.inspector.overlay-button-leave",this.handleOverlayButtonLeave.bind(this)),this.messenger.listen("craftile.editor.select-block",this.handleEditorSelectBlock.bind(this)),this.messenger.listen("craftile.editor.deselect-block",this.handleEditorDeselectBlock.bind(this)),window.addEventListener("scroll",this.handleScroll.bind(this),{passive:!0}),this.setupGlobalEventListeners()}updateTrackedElement(e,t){this.currentHoveredBlock?.dataset.block===e&&(this.currentHoveredBlock=t,this.sendHoveredBlockPosition()),this.currentSelectedBlock?.dataset.block===e&&(this.currentSelectedBlock=t,requestAnimationFrame(()=>{this.sendSelectedBlockPosition(!0)}),this.trackSelectedBlock())}enable(){this.active=!0,document.body.classList.add("craftile-inspector-active"),this.currentSelectedBlock&&this.trackSelectedBlock()}disable(){this.active=!1,document.body.classList.remove("craftile-inspector-active"),this.currentHoveredBlock=null,this.overlayButtonHovered=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleOverlayButtonEnter(){this.overlayButtonHovered=!0}handleOverlayButtonLeave(e){this.overlayButtonHovered=!1,this.currentHoveredBlock||this.messenger.send("craftile.preview.block-leave")}handleEditorSelectBlock(e){const t=document.querySelector(`[data-block="${e.blockId}"]`);t&&(this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock(),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}handleEditorDeselectBlock(){this.currentSelectedBlock=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleScroll(){this.active&&(this.currentSelectedBlock&&this.sendSelectedBlockPosition(),this.currentHoveredBlock&&this.sendHoveredBlockPosition())}setupGlobalEventListeners(){document.addEventListener("mouseover",this.handleGlobalHover.bind(this)),document.addEventListener("mouseout",this.handleGlobalLeave.bind(this)),document.addEventListener("click",this.handleGlobalClick.bind(this),{capture:!0})}handleGlobalHover(e){if(!this.active)return;const t=e.target.closest("[data-block]");t&&(e.stopPropagation(),this.currentHoveredBlock=t,this.sendHoveredBlockPosition())}handleGlobalLeave(e){!this.active||!e.target.closest("[data-block]")||this.overlayButtonHovered||(this.currentHoveredBlock=null,this.messenger.send("craftile.preview.block-leave"))}handleGlobalClick(e){if(this.messenger.send("craftile.preview.click"),!this.active)return;const t=e.target.closest("[data-block]");if(!t||!t.getAttribute("data-block"))return;this.currentSelectedBlock===t||(e.preventDefault(),e.stopImmediatePropagation(),this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock())}sendHoveredBlockPosition(){const e=this.computeElementPositioning(this.currentHoveredBlock);this.messenger.send("craftile.preview.block-hover",{blockRect:e.rect,parentRect:e.parentRect,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft,blockId:this.currentHoveredBlock.dataset.block,parentFlexDirection:e.parentFlexDirection})}sendSelectedBlockPosition(e=!1){if(!this.currentSelectedBlock)return;const t=this.computeElementPositioning(this.currentSelectedBlock);this.messenger.send(e?"craftile.preview.update-selected-block":"craftile.preview.block-select",{blockRect:t.rect,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,blockId:this.currentSelectedBlock.dataset.block})}trackSelectedBlock(){if(!this.currentSelectedBlock)return;this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.resizeObserver=new ResizeObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.resizeObserver.observe(this.currentSelectedBlock),this.mutationObserver=new MutationObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.mutationObserver.observe(this.currentSelectedBlock,{attributes:!0,subtree:!1});let e=this.currentSelectedBlock.parentElement;for(;e&&(this.mutationObserver.observe(e,{childList:!0,subtree:!1}),e!==document.body);)e=e.parentElement}computeElementPositioning(e){const t=e.getBoundingClientRect(),n=window.pageYOffset||document.documentElement.scrollTop,i=window.pageXOffset||document.documentElement.scrollLeft,r=this.findEldestParentBlock(e),s=r&&r!==e?r.getBoundingClientRect():void 0,l=this.getElementFlexDirection(e.parentElement);return{rect:t,parentRect:s,scrollTop:n,scrollLeft:i,parentFlexDirection:l}}findEldestParentBlock(e){let t=null,n=e.parentElement;for(;n&&n!==document.body;)n.hasAttribute("data-block")&&(t=n),n=n.parentElement;return t}getElementFlexDirection(e){if(!e)return"column";const t=window.getComputedStyle(e),n=t.display.includes("flex")?t.flexDirection:"column";return n==="row"||n==="row-reverse"?"row":"column"}}class le extends se{constructor(){super(),v(this,"messenger"),v(this,"inspector"),this.messenger=re(window.origin),this.inspector=new oe(this.messenger),this.initialize()}initialize(){window.addEventListener("load",()=>{this.messenger.send("craftile.preview.ready",{}),setTimeout(()=>{this.sendPageData()},0)}),this.messenger.registerFallbackHandler(e=>{const{type:t,payload:n}=e;this.emit(t,n)})}sendPageData(){const e=document.getElementById("page-data");if(e)try{const t=JSON.parse(e.textContent||"{}");this.messenger.send("craftile.preview.page-data",{pageData:t})}catch(t){console.error("Failed to parse page data:",t)}}}var q=11;function ce(o,e){var t=e.attributes,n,i,r,s,l;if(!(e.nodeType===q||o.nodeType===q)){for(var h=t.length-1;h>=0;h--)n=t[h],i=n.name,r=n.namespaceURI,s=n.value,r?(i=n.localName||i,l=o.getAttributeNS(r,i),l!==s&&(n.prefix==="xmlns"&&(i=n.name),o.setAttributeNS(r,i,s))):(l=o.getAttribute(i),l!==s&&o.setAttribute(i,s));for(var u=o.attributes,m=u.length-1;m>=0;m--)n=u[m],i=n.name,r=n.namespaceURI,r?(i=n.localName||i,e.hasAttributeNS(r,i)||o.removeAttributeNS(r,i)):e.hasAttribute(i)||o.removeAttribute(i)}}var A,ae="http://www.w3.org/1999/xhtml",b=typeof document>"u"?void 0:document,de=!!b&&"content"in b.createElement("template"),he=!!b&&b.createRange&&"createContextualFragment"in b.createRange();function fe(o){var e=b.createElement("template");return e.innerHTML=o,e.content.childNodes[0]}function ue(o){A||(A=b.createRange(),A.selectNode(b.body));var e=A.createContextualFragment(o);return e.childNodes[0]}function me(o){var e=b.createElement("body");return e.innerHTML=o,e.childNodes[0]}function pe(o){return o=o.trim(),de?fe(o):he?ue(o):me(o)}function P(o,e){var t=o.nodeName,n=e.nodeName,i,r;return t===n?!0:(i=t.charCodeAt(0),r=n.charCodeAt(0),i<=90&&r>=97?t===n.toUpperCase():r<=90&&i>=97?n===t.toUpperCase():!1)}function ve(o,e){return!e||e===ae?b.createElement(o):b.createElementNS(e,o)}function ge(o,e){for(var t=o.firstChild;t;){var n=t.nextSibling;e.appendChild(t),t=n}return e}function _(o,e,t){o[t]!==e[t]&&(o[t]=e[t],o[t]?o.setAttribute(t,""):o.removeAttribute(t))}var X={OPTION:function(o,e){var t=o.parentNode;if(t){var n=t.nodeName.toUpperCase();n==="OPTGROUP"&&(t=t.parentNode,n=t&&t.nodeName.toUpperCase()),n==="SELECT"&&!t.hasAttribute("multiple")&&(o.hasAttribute("selected")&&!e.selected&&(o.setAttribute("selected","selected"),o.removeAttribute("selected")),t.selectedIndex=-1)}_(o,e,"selected")},INPUT:function(o,e){_(o,e,"checked"),_(o,e,"disabled"),o.value!==e.value&&(o.value=e.value),e.hasAttribute("value")||o.removeAttribute("value")},TEXTAREA:function(o,e){var t=e.value;o.value!==t&&(o.value=t);var n=o.firstChild;if(n){var i=n.nodeValue;if(i==t||!t&&i==o.placeholder)return;n.nodeValue=t}},SELECT:function(o,e){if(!e.hasAttribute("multiple")){for(var t=-1,n=0,i=o.firstChild,r,s;i;)if(s=i.nodeName&&i.nodeName.toUpperCase(),s==="OPTGROUP")r=i,i=r.firstChild,i||(i=r.nextSibling,r=null);else{if(s==="OPTION"){if(i.hasAttribute("selected")){t=n;break}n++}i=i.nextSibling,!i&&r&&(i=r.nextSibling,r=null)}o.selectedIndex=t}}},N=1,Y=11,J=3,Q=8;function k(){}function be(o){if(o)return o.getAttribute&&o.getAttribute("id")||o.id}function Ce(o){return function(t,n,i){if(i||(i={}),typeof n=="string")if(t.nodeName==="#document"||t.nodeName==="HTML"||t.nodeName==="BODY"){var r=n;n=b.createElement("html"),n.innerHTML=r}else n=pe(n);else n.nodeType===Y&&(n=n.firstElementChild);var s=i.getNodeKey||be,l=i.onBeforeNodeAdded||k,h=i.onNodeAdded||k,u=i.onBeforeElUpdated||k,m=i.onElUpdated||k,ke=i.onBeforeNodeDiscarded||k,L=i.onNodeDiscarded||k,Se=i.onBeforeElChildrenUpdated||k,Be=i.skipFromChildren||k,Z=i.addChild||function(c,a){return c.appendChild(a)},z=i.childrenOnly===!0,O=Object.create(null),H=[];function I(c){H.push(c)}function ee(c,a){if(c.nodeType===N)for(var p=c.firstChild;p;){var d=void 0;a&&(d=s(p))?I(d):(L(p),p.firstChild&&ee(p,a)),p=p.nextSibling}}function M(c,a,p){ke(c)!==!1&&(a&&a.removeChild(c),L(c),ee(c,p))}function G(c){if(c.nodeType===N||c.nodeType===Y)for(var a=c.firstChild;a;){var p=s(a);p&&(O[p]=a),G(a),a=a.nextSibling}}G(t);function V(c){h(c);for(var a=c.firstChild;a;){var p=a.nextSibling,d=s(a);if(d){var f=O[d];f&&P(a,f)?(a.parentNode.replaceChild(f,a),D(f,a)):V(a)}else V(a);a=p}}function we(c,a,p){for(;a;){var d=a.nextSibling;(p=s(a))?I(p):M(a,c,!0),a=d}}function D(c,a,p){var d=s(a);if(d&&delete O[d],!p){var f=u(c,a);if(f===!1||(f instanceof HTMLElement&&(c=f,G(c)),o(c,a),m(c),Se(c,a)===!1))return}c.nodeName!=="TEXTAREA"?ye(c,a):X.TEXTAREA(c,a)}function ye(c,a){var p=Be(c,a),d=a.firstChild,f=c.firstChild,x,E,T,$,S;e:for(;d;){for($=d.nextSibling,x=s(d);!p&&f;){if(T=f.nextSibling,d.isSameNode&&d.isSameNode(f)){d=$,f=T;continue e}E=s(f);var F=f.nodeType,B=void 0;if(F===d.nodeType&&(F===N?(x?x!==E&&((S=O[x])?T===S?B=!1:(c.insertBefore(S,f),E?I(E):M(f,c,!0),f=S,E=s(f)):B=!1):E&&(B=!1),B=B!==!1&&P(f,d),B&&D(f,d)):(F===J||F==Q)&&(B=!0,f.nodeValue!==d.nodeValue&&(f.nodeValue=d.nodeValue))),B){d=$,f=T;continue e}E?I(E):M(f,c,!0),f=T}if(x&&(S=O[x])&&P(S,d))p||Z(c,S),D(S,d);else{var K=l(d);K!==!1&&(K&&(d=K),d.actualize&&(d=d.actualize(c.ownerDocument||b)),Z(c,d),V(d))}d=$,f=T}we(c,f,E);var ne=X[c.nodeName];ne&&ne(c,a)}var g=t,R=g.nodeType,te=n.nodeType;if(!z){if(R===N)te===N?P(t,n)||(L(t),g=ge(t,ve(n.nodeName,n.namespaceURI))):g=n;else if(R===J||R===Q){if(te===R)return g.nodeValue!==n.nodeValue&&(g.nodeValue=n.nodeValue),g;g=n}}if(g===n)L(t);else{if(n.isSameNode&&n.isSameNode(g))return;if(D(g,n,z),H)for(var W=0,Oe=H.length;W<Oe;W++){var j=O[H[W]];j&&M(j,j.parentNode,!1)}}return!z&&g!==t&&t.parentNode&&(g.actualize&&(g=g.actualize(t.ownerDocument||b)),t.parentNode.replaceChild(g,t)),g}}var Ee=Ce(ce);class U{constructor(e,t){w(this,"previewClient");w(this,"morphdomOptions");w(this,"elementCache",new Map);w(this,"regionCommentsCache",new Map);w(this,"childrenCommentsCache",new Map);w(this,"pendingScripts",new Set);w(this,"scriptExecutionCount",{total:0,completed:0,failed:0});this.previewClient=e||new le,this.morphdomOptions=t?.morphdom||{},this.previewClient.on("updates.effects",this.handleEffects.bind(this)),this.previewClient.on("craftile.editor.updates",this.handleDirectUpdates.bind(this)),this.cacheRegionComments(),this.cacheChildrenComments()}static init(e,t){return new U(e,t)}getElementCached(e){if(this.elementCache.has(e)){const n=this.elementCache.get(e);if(n.isConnected)return n;this.elementCache.delete(e)}const t=document.querySelector(`[data-block="${e}"]`);return t&&this.elementCache.set(e,t),t}cacheRegionComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN region: ")){const r=i.substring(14);n.set(r,t)}else if(i.startsWith("END region: ")){const r=i.substring(12),s=n.get(r);s&&(this.regionCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN children: ")){const r=i.substring(16);n.set(r,t)}else if(i.startsWith("END children: ")){const r=i.substring(14),s=n.get(r);s&&(this.childrenCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenCommentsForBlock(e){const t=this.getElementCached(e);if(!t)return;this.childrenCommentsCache.delete(e);const n=document.createTreeWalker(t,NodeFilter.SHOW_COMMENT,null);let i,r=null;for(;i=n.nextNode();){const s=i.textContent?.trim();if(s){if(s===`BEGIN children: ${e}`)r=i;else if(s===`END children: ${e}`&&r){this.childrenCommentsCache.set(e,{begin:r,end:i});break}}}}invalidateCache(e){[...e.updated,...e.removed].forEach(t=>{this.elementCache.delete(t),this.childrenCommentsCache.delete(t)})}handleEffects(e){const{effects:t,blocks:n,regions:i,changes:r}=e;t&&(this.invalidateCache(r),t.html&&this.handleHtmlEffects(t.html,{blocks:n,regions:i,changes:r}),t.css&&this.handleCssEffects(t.css),t.js&&this.handleJsEffects(t.js))}handleCssEffects(e){for(const t of e)this.injectStyleElement(t)}injectStyleElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="STYLE"&&n.tagName!=="LINK"){console.warn("Invalid CSS element provided:",e);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&(r.tagName==="STYLE"||r.tagName==="LINK")){r.parentNode?.replaceChild(n,r);return}}if(n.tagName==="STYLE"&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("style:not([id])");for(const l of s)if(l.textContent?.trim()===r)return}}if(n.tagName==="LINK"&&!i){const r=n.getAttribute("href"),s=n.getAttribute("rel");if(r){const l=document.querySelectorAll("link:not([id])");for(const h of l)if(h.getAttribute("href")===r&&h.getAttribute("rel")===s)return}}document.head.appendChild(n)}handleJsEffects(e){this.pendingScripts.clear(),this.scriptExecutionCount={total:0,completed:0,failed:0};const t=e.filter(n=>n?.trim());if(this.scriptExecutionCount.total=t.length,t.length===0){this.emitScriptExecutionComplete();return}for(const n of t)this.injectScriptElement(n)}injectScriptElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="SCRIPT"){console.warn("Invalid script element provided:",e),this.onScriptCompleted(!1);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&r.tagName==="SCRIPT"){this.pendingScripts.delete(r),r.parentNode?.replaceChild(n,r),this.trackScriptExecution(n);return}}if(!n.src&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("script:not([src]):not([id])");for(const l of s)if(l.textContent?.trim()===r){this.onScriptCompleted(!0);return}}}if(n.src&&!i){const r=n.src,s=document.querySelectorAll("script[src]:not([id])");for(const l of s)if(l.src===r){this.onScriptCompleted(!0);return}}document.head.appendChild(n),this.trackScriptExecution(n)}trackScriptExecution(e){if(e.src){this.pendingScripts.add(e);const t=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!0),e.removeEventListener("load",t),e.removeEventListener("error",n)},n=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!1),e.removeEventListener("load",t),e.removeEventListener("error",n)};e.addEventListener("load",t),e.addEventListener("error",n)}else this.onScriptCompleted(!0)}onScriptCompleted(e){e?this.scriptExecutionCount.completed++:this.scriptExecutionCount.failed++,this.scriptExecutionCount.completed+this.scriptExecutionCount.failed>=this.scriptExecutionCount.total&&this.emitScriptExecutionComplete()}emitScriptExecutionComplete(){this.previewClient.emit("scripts.execution.complete",{total:this.scriptExecutionCount.total,completed:this.scriptExecutionCount.completed,failed:this.scriptExecutionCount.failed,success:this.scriptExecutionCount.failed===0})}handleDirectUpdates(e){const{changes:t}=e;t.moved&&this.handleMoves(e),t.updated.length>0&&this.handleDisabledBlocks(e),t.removed.length>0&&this.handleRemoves(e)}handleMoves(e){const{blocks:t,changes:n}=e;for(const[i,r]of Object.entries(e.changes.moved)){if(r?.toParent&&n.updated?.includes(r?.toParent))continue;if(!this.isValidMoveInstruction(r)){console.warn(`Invalid move instruction for block ${i}:`,r);continue}const s=t[i];this.moveBlockUsingDOM(s,r)}}handleDisabledBlocks(e){const{blocks:t,changes:n}=e;for(const i of n.updated){const r=t[i];if(!r)continue;const l=!!this.getElementCached(i);r.disabled&&l?this.removeBlock(r.id):r.disabled}}handleRemoves(e){const{changes:t}=e;for(const n of t.removed)this.removeBlock(n)}handleHtmlEffects(e,t){const{blocks:n,regions:i}=t;for(const[r,s]of Object.entries(e)){if(!s)continue;const l=n[r];if(!l){console.warn(`Block data not found for ${r}`);continue}if(l.disabled){console.debug(`Skipping disabled block ${r}`);continue}if(!!this.getElementCached(r))this.updateBlockHtml(l,s);else{const m=this.calculatePosition(l,i,n);this.insertBlock(l,s,m)}}}isValidMoveInstruction(e){const t=!!(e.toParent||e.toRegion),n=e.toIndex===void 0||e.toIndex>=0;return t&&n}removeBlock(e){const t=this.getElementCached(e);t?(this.previewClient.emit("block.remove.before",{blockId:e,element:t}),t.remove(),this.elementCache.delete(e),this.previewClient.emit("block.remove.after",{blockId:e,element:t})):console.warn(`Block ${e} not found for removal`)}moveBlockUsingDOM(e,t){const n=this.getElementCached(e.id),{toParent:i,toRegion:r,toIndex:s}=t;if(!n){console.warn(`Block element ${e.id} not found for move operation`);return}if(this.previewClient.emit("block.move.before",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s}),i){const l=this.getElementCached(i);if(!l){console.error(`Parent element ${i} not found for move operation`);return}this.insertElementInContainer(n,l,e.id,s)}else if(r){const l=this.findRegionInsertionPoint(r,s,void 0,void 0,e.id);if(!l){console.error(`Failed to find insertion point for region: ${r}`);return}l.parent.insertBefore(n,l.before)}this.previewClient.emit("block.move.after",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s})}insertElementInContainer(e,t,n,i){const r=t.getAttribute("data-block"),s=r?this.childrenCommentsCache.get(r):null;if(s){const l=this.findPositionBetweenComments(s.begin,s.end,i,n);l.parent.insertBefore(e,l.before)}else{const h=Array.from(t.children).filter(m=>m.getAttribute("data-block")!==n),u=i!==void 0&&i<h.length?h[i]:null;t.insertBefore(e,u)}}insertBlock(e,t,n){if(this.getElementCached(e.id))return;this.previewClient.emit("block.insert.before",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n});const i=this.parseHtmlElement(t,e.id);if(!i)return;const{parentId:r,regionName:s,position:l,afterId:h,beforeId:u}=n;if(r){const m=this.getElementCached(r);if(!m){console.error(`Parent element ${r} not found for block ${e.id}`);return}this.insertElementByPosition(i,m,l,h,u)}else if(s){const m=this.findRegionInsertionPoint(s,l,h,u);if(!m){console.error(`Failed to find insertion point for region: ${s}`);return}m.parent.insertBefore(i,m.before)}else console.warn(`No parent or region specified for block ${e.id}, inserting into body`),document.body.appendChild(i);this.elementCache.set(e.id,i),this.cacheChildrenCommentsForBlock(e.id),i.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),this.previewClient.emit("block.insert.after",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n})}updateBlockHtml(e,t){if(!t){console.warn(`No HTML provided for block ${e.id}`);return}const n=this.getElementCached(e.id);if(!n){console.warn(`Block element ${e.id} not found for HTML update`);return}this.previewClient.emit("block.update.before",{blockId:e.id,blockType:e.type,block:e,element:n,html:t}),Ee(n,t,this.morphdomOptions),this.elementCache.delete(e.id);const i=this.getElementCached(e.id);if(!i){console.error(`Block element ${e.id} not found after morphdom update`);return}i!==n&&this.previewClient.inspector.updateTrackedElement(e.id,i),this.cacheChildrenCommentsForBlock(e.id),this.previewClient.emit("block.update.after",{blockId:e.id,blockType:e.type,block:e,element:i,html:t})}insertElementByPosition(e,t,n,i,r){const s=t.getAttribute("data-block"),l=s?this.childrenCommentsCache.get(s):null;if(l){let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&u.nextSibling&&(h=u.nextSibling)}else if(typeof n=="number"){const u=this.findPositionBetweenComments(l.begin,l.end,n);l.begin.parentNode.insertBefore(e,u.before);return}h||(h=l.end),l.begin.parentNode.insertBefore(e,h)}else{let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&(h=u.nextElementSibling)}else typeof n=="number"&&(h=Array.from(t.children)[n]||null);t.insertBefore(e,h)}}findRegionInsertionPoint(e,t,n,i,r){const s=this.regionCommentsCache.get(e);if(!s)return console.error(`Region comments not found for region: ${e}`),null;const{begin:l,end:h}=s;let u=null;if(i){const m=this.getElementCached(i);m&&(u=m)}else if(n){const m=this.getElementCached(n);m&&m.nextSibling&&(u=m.nextSibling)}else typeof t=="number"&&(u=this.findPositionInRegion(l,h,t,r));return u||(u=h),{parent:l.parentNode,before:u}}findPositionInRegion(e,t,n,i){const r=[];let s=e.nextSibling;for(;s&&s!==t;){if(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute("data-block")){const l=s.getAttribute("data-block");(!i||l!==i)&&r.push(s)}s=s.nextSibling}return n<r.length?r[n]:null}findPositionBetweenComments(e,t,n,i){let r=null;if(typeof n=="number"){const s=[];let l=e.nextSibling;for(;l&&l!==t;){if(l.nodeType===Node.ELEMENT_NODE&&l.hasAttribute("data-block")){const h=l.getAttribute("data-block");(!i||h!==i)&&s.push(l)}l=l.nextSibling}r=n<s.length?s[n]:null}return r||(r=t),{parent:e.parentNode,before:r}}calculatePosition(e,t,n){if(e.parentId){const i=n[e.parentId];i||console.warn(`Block data not found for block ${e.id}`);const r=i.children.indexOf(e.id);if(r===-1)return console.warn(`Block ${e.id} not found in parent ${e.parentId} children`),{parentId:e.parentId};const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.children,r,n);return{parentId:e.parentId,position:r,afterId:s,beforeId:l}}else{for(const i of t){const r=i.blocks.indexOf(e.id);if(r!==-1){const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.blocks,r,n);return{regionName:i.name,position:r,afterId:s,beforeId:l}}}return{}}}findAdjacentSiblings(e,t,n){let i,r;for(let s=t-1;s>=0;s--){const l=n[e[s]];if(l&&!l.disabled){i=e[s];break}}for(let s=t+1;s<e.length;s++){const l=n[e[s]];if(l&&!l.disabled){r=e[s];break}}return{afterId:i,beforeId:r}}parseHtmlElement(e,t){if(!e.trim())return console.error(`Empty HTML provided for block ${t}`),null;const n=document.createElement("div");n.innerHTML=e;const i=n.firstElementChild;return i||(console.error(`Invalid HTML for block ${t}: no element found`),null)}}return U})();\n',S=(d={})=>({editor:c})=>{const a=new Map;c.events.on("updates",b),f();function u(e){return`data-block="${e}"`}function f(){c.preview.loadFromHtml(m(c.engine.getPage()))}function h(e,r){if(e.ghost===!0)return"";const s=`${e.id}:${JSON.stringify(e.properties)}:${e.children.join(",")}`;if(a.has(s))return a.get(s);let l;if(d.blockRenderers?.[e.type])l=d.blockRenderers[e.type];else{const t=c.engine.getBlockSchema(e.type);l=typeof t?.meta?.render=="function"?t.meta.render:({block:k,editorAttributes:C})=>`<div ${C}><em>Unknown block type: ${k.type}</em></div>`}const o=Array.isArray(e.children)?e.children.map(t=>h(r[t],r)).join(""):"",n=u(e.id);let i;try{i=l({id:e.id,props:e.properties,block:e,editorAttributes:n,children:o})}catch(t){console.warn(`Render error for block ${e.id}:`,t),i=`<div ${n} class="render-error">
1
+ "use strict";const E='var Te=Object.defineProperty;var Ne=(y,C,v)=>C in y?Te(y,C,{enumerable:!0,configurable:!0,writable:!0,value:v}):y[C]=v;var w=(y,C,v)=>Ne(y,typeof C!="symbol"?C+"":C,v);var HtmlPreviewClient=(function(){"use strict";var y=Object.defineProperty,C=(o,e,t)=>e in o?y(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,v=(o,e,t)=>C(o,typeof e!="symbol"?e+"":e,t);class ie{constructor(e,t="*"){v(this,"handlers",new Map),v(this,"targetWindow"),v(this,"targetOrigin"),v(this,"fallbackHandler"),this.targetWindow=e,this.targetOrigin=t,window.addEventListener("message",this.handleMessage.bind(this))}handleMessage(e){const t=e.data;if(!t.type)return;const n=this.handlers.get(t.type);n?n.forEach(i=>i(t.payload,e)):this.fallbackHandler&&this.fallbackHandler(e.data,e)}send(e,t){const n={type:e,payload:t};this.targetWindow.postMessage(n,this.targetOrigin)}listen(e,t){return this.handlers.has(e)||this.handlers.set(e,[]),this.handlers.get(e).push(t),()=>{const n=this.handlers.get(e);if(n){const i=n.indexOf(t);i>-1&&n.splice(i,1)}}}registerFallbackHandler(e){this.fallbackHandler=e}}function re(o="*"){if(window.parent===window)throw new Error("Not inside an iframe");return new ie(window.parent,o)}class se{constructor(){v(this,"listeners",new Map)}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>{this.off(e,t)}}off(e,t){const n=this.listeners.get(e);n&&(n.delete(t),n.size===0&&this.listeners.delete(e))}once(e,t){const n=i=>{t(i),this.off(e,n)};this.on(e,n)}emit(e,...t){const n=this.listeners.get(e);if(n){const i=t[0];n.forEach(r=>{try{r(i)}catch(s){console.error(`Error in event listener for \'${String(e)}\':`,s)}})}}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}}class oe{constructor(e){v(this,"active",!0),v(this,"messenger"),v(this,"currentHoveredBlock",null),v(this,"currentSelectedBlock",null),v(this,"overlayButtonHovered",!1),v(this,"resizeObserver",null),v(this,"mutationObserver",null),this.messenger=e,this.messenger.listen("craftile.inspector.enable",()=>this.enable()),this.messenger.listen("craftile.inspector.disable",()=>this.disable()),this.messenger.listen("craftile.inspector.overlay-button-enter",this.handleOverlayButtonEnter.bind(this)),this.messenger.listen("craftile.inspector.overlay-button-leave",this.handleOverlayButtonLeave.bind(this)),this.messenger.listen("craftile.editor.select-block",this.handleEditorSelectBlock.bind(this)),this.messenger.listen("craftile.editor.deselect-block",this.handleEditorDeselectBlock.bind(this)),window.addEventListener("scroll",this.handleScroll.bind(this),{passive:!0}),this.setupGlobalEventListeners()}updateTrackedElement(e,t){this.currentHoveredBlock?.dataset.block===e&&(this.currentHoveredBlock=t,this.sendHoveredBlockPosition()),this.currentSelectedBlock?.dataset.block===e&&(this.currentSelectedBlock=t,requestAnimationFrame(()=>{this.sendSelectedBlockPosition(!0)}),this.trackSelectedBlock())}enable(){this.active=!0,document.body.classList.add("craftile-inspector-active"),this.currentSelectedBlock&&this.trackSelectedBlock()}disable(){this.active=!1,document.body.classList.remove("craftile-inspector-active"),this.currentHoveredBlock=null,this.overlayButtonHovered=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleOverlayButtonEnter(){this.overlayButtonHovered=!0}handleOverlayButtonLeave(e){this.overlayButtonHovered=!1,this.currentHoveredBlock||this.messenger.send("craftile.preview.block-leave")}handleEditorSelectBlock(e){const t=document.querySelector(`[data-block="${e.blockId}"]`);t&&(this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock(),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}handleEditorDeselectBlock(){this.currentSelectedBlock=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleScroll(){this.active&&(this.currentSelectedBlock&&this.sendSelectedBlockPosition(),this.currentHoveredBlock&&this.sendHoveredBlockPosition())}setupGlobalEventListeners(){document.addEventListener("mouseover",this.handleGlobalHover.bind(this)),document.addEventListener("mouseout",this.handleGlobalLeave.bind(this)),document.addEventListener("click",this.handleGlobalClick.bind(this),{capture:!0})}handleGlobalHover(e){if(!this.active)return;const t=e.target.closest("[data-block]");t&&(e.stopPropagation(),this.currentHoveredBlock=t,this.sendHoveredBlockPosition())}handleGlobalLeave(e){!this.active||!e.target.closest("[data-block]")||this.overlayButtonHovered||(this.currentHoveredBlock=null,this.messenger.send("craftile.preview.block-leave"))}handleGlobalClick(e){if(this.messenger.send("craftile.preview.click"),!this.active)return;const t=e.target.closest("[data-block]");if(!t||!t.getAttribute("data-block"))return;this.currentSelectedBlock===t||(e.preventDefault(),e.stopImmediatePropagation(),this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock())}sendHoveredBlockPosition(){const e=this.computeElementPositioning(this.currentHoveredBlock);this.messenger.send("craftile.preview.block-hover",{blockRect:e.rect,parentRect:e.parentRect,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft,blockId:this.currentHoveredBlock.dataset.block,parentFlexDirection:e.parentFlexDirection})}sendSelectedBlockPosition(e=!1){if(!this.currentSelectedBlock)return;const t=this.computeElementPositioning(this.currentSelectedBlock);this.messenger.send(e?"craftile.preview.update-selected-block":"craftile.preview.block-select",{blockRect:t.rect,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,blockId:this.currentSelectedBlock.dataset.block})}trackSelectedBlock(){if(!this.currentSelectedBlock)return;this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.resizeObserver=new ResizeObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.resizeObserver.observe(this.currentSelectedBlock),this.mutationObserver=new MutationObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.mutationObserver.observe(this.currentSelectedBlock,{attributes:!0,subtree:!1});let e=this.currentSelectedBlock.parentElement;for(;e&&(this.mutationObserver.observe(e,{childList:!0,subtree:!1}),e!==document.body);)e=e.parentElement}computeElementPositioning(e){const t=e.getBoundingClientRect(),n=window.pageYOffset||document.documentElement.scrollTop,i=window.pageXOffset||document.documentElement.scrollLeft,r=this.findEldestParentBlock(e),s=r&&r!==e?r.getBoundingClientRect():void 0,l=this.getElementFlexDirection(e.parentElement);return{rect:t,parentRect:s,scrollTop:n,scrollLeft:i,parentFlexDirection:l}}findEldestParentBlock(e){let t=null,n=e.parentElement;for(;n&&n!==document.body;)n.hasAttribute("data-block")&&(t=n),n=n.parentElement;return t}getElementFlexDirection(e){if(!e)return"column";const t=window.getComputedStyle(e),n=t.display.includes("flex")?t.flexDirection:"column";return n==="row"||n==="row-reverse"?"row":"column"}}class le extends se{constructor(){super(),v(this,"messenger"),v(this,"inspector"),this.messenger=re(window.origin),this.inspector=new oe(this.messenger),this.initialize()}initialize(){window.addEventListener("load",()=>{this.messenger.send("craftile.preview.ready",{}),setTimeout(()=>{this.sendPageData()},0)}),this.messenger.registerFallbackHandler(e=>{const{type:t,payload:n}=e;this.emit(t,n)})}sendPageData(){const e=document.getElementById("page-data");if(e)try{const t=JSON.parse(e.textContent||"{}");this.messenger.send("craftile.preview.page-data",{pageData:t})}catch(t){console.error("Failed to parse page data:",t)}}}var q=11;function ce(o,e){var t=e.attributes,n,i,r,s,l;if(!(e.nodeType===q||o.nodeType===q)){for(var h=t.length-1;h>=0;h--)n=t[h],i=n.name,r=n.namespaceURI,s=n.value,r?(i=n.localName||i,l=o.getAttributeNS(r,i),l!==s&&(n.prefix==="xmlns"&&(i=n.name),o.setAttributeNS(r,i,s))):(l=o.getAttribute(i),l!==s&&o.setAttribute(i,s));for(var u=o.attributes,m=u.length-1;m>=0;m--)n=u[m],i=n.name,r=n.namespaceURI,r?(i=n.localName||i,e.hasAttributeNS(r,i)||o.removeAttributeNS(r,i)):e.hasAttribute(i)||o.removeAttribute(i)}}var A,ae="http://www.w3.org/1999/xhtml",b=typeof document>"u"?void 0:document,de=!!b&&"content"in b.createElement("template"),he=!!b&&b.createRange&&"createContextualFragment"in b.createRange();function fe(o){var e=b.createElement("template");return e.innerHTML=o,e.content.childNodes[0]}function ue(o){A||(A=b.createRange(),A.selectNode(b.body));var e=A.createContextualFragment(o);return e.childNodes[0]}function me(o){var e=b.createElement("body");return e.innerHTML=o,e.childNodes[0]}function pe(o){return o=o.trim(),de?fe(o):he?ue(o):me(o)}function P(o,e){var t=o.nodeName,n=e.nodeName,i,r;return t===n?!0:(i=t.charCodeAt(0),r=n.charCodeAt(0),i<=90&&r>=97?t===n.toUpperCase():r<=90&&i>=97?n===t.toUpperCase():!1)}function ve(o,e){return!e||e===ae?b.createElement(o):b.createElementNS(e,o)}function ge(o,e){for(var t=o.firstChild;t;){var n=t.nextSibling;e.appendChild(t),t=n}return e}function _(o,e,t){o[t]!==e[t]&&(o[t]=e[t],o[t]?o.setAttribute(t,""):o.removeAttribute(t))}var X={OPTION:function(o,e){var t=o.parentNode;if(t){var n=t.nodeName.toUpperCase();n==="OPTGROUP"&&(t=t.parentNode,n=t&&t.nodeName.toUpperCase()),n==="SELECT"&&!t.hasAttribute("multiple")&&(o.hasAttribute("selected")&&!e.selected&&(o.setAttribute("selected","selected"),o.removeAttribute("selected")),t.selectedIndex=-1)}_(o,e,"selected")},INPUT:function(o,e){_(o,e,"checked"),_(o,e,"disabled"),o.value!==e.value&&(o.value=e.value),e.hasAttribute("value")||o.removeAttribute("value")},TEXTAREA:function(o,e){var t=e.value;o.value!==t&&(o.value=t);var n=o.firstChild;if(n){var i=n.nodeValue;if(i==t||!t&&i==o.placeholder)return;n.nodeValue=t}},SELECT:function(o,e){if(!e.hasAttribute("multiple")){for(var t=-1,n=0,i=o.firstChild,r,s;i;)if(s=i.nodeName&&i.nodeName.toUpperCase(),s==="OPTGROUP")r=i,i=r.firstChild,i||(i=r.nextSibling,r=null);else{if(s==="OPTION"){if(i.hasAttribute("selected")){t=n;break}n++}i=i.nextSibling,!i&&r&&(i=r.nextSibling,r=null)}o.selectedIndex=t}}},N=1,Y=11,J=3,Q=8;function k(){}function be(o){if(o)return o.getAttribute&&o.getAttribute("id")||o.id}function Ce(o){return function(t,n,i){if(i||(i={}),typeof n=="string")if(t.nodeName==="#document"||t.nodeName==="HTML"||t.nodeName==="BODY"){var r=n;n=b.createElement("html"),n.innerHTML=r}else n=pe(n);else n.nodeType===Y&&(n=n.firstElementChild);var s=i.getNodeKey||be,l=i.onBeforeNodeAdded||k,h=i.onNodeAdded||k,u=i.onBeforeElUpdated||k,m=i.onElUpdated||k,Se=i.onBeforeNodeDiscarded||k,L=i.onNodeDiscarded||k,Be=i.onBeforeElChildrenUpdated||k,we=i.skipFromChildren||k,Z=i.addChild||function(c,a){return c.appendChild(a)},z=i.childrenOnly===!0,O=Object.create(null),I=[];function H(c){I.push(c)}function ee(c,a){if(c.nodeType===N)for(var p=c.firstChild;p;){var d=void 0;a&&(d=s(p))?H(d):(L(p),p.firstChild&&ee(p,a)),p=p.nextSibling}}function M(c,a,p){Se(c)!==!1&&(a&&a.removeChild(c),L(c),ee(c,p))}function G(c){if(c.nodeType===N||c.nodeType===Y)for(var a=c.firstChild;a;){var p=s(a);p&&(O[p]=a),G(a),a=a.nextSibling}}G(t);function V(c){h(c);for(var a=c.firstChild;a;){var p=a.nextSibling,d=s(a);if(d){var f=O[d];f&&P(a,f)?(a.parentNode.replaceChild(f,a),D(f,a)):V(a)}else V(a);a=p}}function ye(c,a,p){for(;a;){var d=a.nextSibling;(p=s(a))?H(p):M(a,c,!0),a=d}}function D(c,a,p){var d=s(a);if(d&&delete O[d],!p){var f=u(c,a);if(f===!1||(f instanceof HTMLElement&&(c=f,G(c)),o(c,a),m(c),Be(c,a)===!1))return}c.nodeName!=="TEXTAREA"?Oe(c,a):X.TEXTAREA(c,a)}function Oe(c,a){var p=we(c,a),d=a.firstChild,f=c.firstChild,x,E,T,$,S;e:for(;d;){for($=d.nextSibling,x=s(d);!p&&f;){if(T=f.nextSibling,d.isSameNode&&d.isSameNode(f)){d=$,f=T;continue e}E=s(f);var F=f.nodeType,B=void 0;if(F===d.nodeType&&(F===N?(x?x!==E&&((S=O[x])?T===S?B=!1:(c.insertBefore(S,f),E?H(E):M(f,c,!0),f=S,E=s(f)):B=!1):E&&(B=!1),B=B!==!1&&P(f,d),B&&D(f,d)):(F===J||F==Q)&&(B=!0,f.nodeValue!==d.nodeValue&&(f.nodeValue=d.nodeValue))),B){d=$,f=T;continue e}E?H(E):M(f,c,!0),f=T}if(x&&(S=O[x])&&P(S,d))p||Z(c,S),D(S,d);else{var K=l(d);K!==!1&&(K&&(d=K),d.actualize&&(d=d.actualize(c.ownerDocument||b)),Z(c,d),V(d))}d=$,f=T}ye(c,f,E);var ne=X[c.nodeName];ne&&ne(c,a)}var g=t,R=g.nodeType,te=n.nodeType;if(!z){if(R===N)te===N?P(t,n)||(L(t),g=ge(t,ve(n.nodeName,n.namespaceURI))):g=n;else if(R===J||R===Q){if(te===R)return g.nodeValue!==n.nodeValue&&(g.nodeValue=n.nodeValue),g;g=n}}if(g===n)L(t);else{if(n.isSameNode&&n.isSameNode(g))return;if(D(g,n,z),I)for(var W=0,xe=I.length;W<xe;W++){var j=O[I[W]];j&&M(j,j.parentNode,!1)}}return!z&&g!==t&&t.parentNode&&(g.actualize&&(g=g.actualize(t.ownerDocument||b)),t.parentNode.replaceChild(g,t)),g}}var Ee=Ce(ce);const ke=o=>o.id||o.name;class U{constructor(e,t){w(this,"previewClient");w(this,"morphdomOptions");w(this,"elementCache",new Map);w(this,"regionCommentsCache",new Map);w(this,"childrenCommentsCache",new Map);w(this,"pendingScripts",new Set);w(this,"scriptExecutionCount",{total:0,completed:0,failed:0});this.previewClient=e||new le,this.morphdomOptions=t?.morphdom||{},this.previewClient.on("updates.effects",this.handleEffects.bind(this)),this.previewClient.on("craftile.editor.updates",this.handleDirectUpdates.bind(this)),this.cacheRegionComments(),this.cacheChildrenComments()}static init(e,t){return new U(e,t)}getElementCached(e){if(this.elementCache.has(e)){const n=this.elementCache.get(e);if(n.isConnected)return n;this.elementCache.delete(e)}const t=document.querySelector(`[data-block="${e}"]`);return t&&this.elementCache.set(e,t),t}cacheRegionComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN region: ")){const r=i.substring(14);n.set(r,t)}else if(i.startsWith("END region: ")){const r=i.substring(12),s=n.get(r);s&&(this.regionCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN children: ")){const r=i.substring(16);n.set(r,t)}else if(i.startsWith("END children: ")){const r=i.substring(14),s=n.get(r);s&&(this.childrenCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenCommentsForBlock(e){const t=this.getElementCached(e);if(!t)return;this.childrenCommentsCache.delete(e);const n=document.createTreeWalker(t,NodeFilter.SHOW_COMMENT,null);let i,r=null;for(;i=n.nextNode();){const s=i.textContent?.trim();if(s){if(s===`BEGIN children: ${e}`)r=i;else if(s===`END children: ${e}`&&r){this.childrenCommentsCache.set(e,{begin:r,end:i});break}}}}invalidateCache(e){[...e.updated,...e.removed].forEach(t=>{this.elementCache.delete(t),this.childrenCommentsCache.delete(t)})}handleEffects(e){const{effects:t,blocks:n,regions:i,changes:r}=e;t&&(this.invalidateCache(r),t.html&&this.handleHtmlEffects(t.html,{blocks:n,regions:i,changes:r}),t.css&&this.handleCssEffects(t.css),t.js&&this.handleJsEffects(t.js))}handleCssEffects(e){for(const t of e)this.injectStyleElement(t)}injectStyleElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="STYLE"&&n.tagName!=="LINK"){console.warn("Invalid CSS element provided:",e);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&(r.tagName==="STYLE"||r.tagName==="LINK")){r.parentNode?.replaceChild(n,r);return}}if(n.tagName==="STYLE"&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("style:not([id])");for(const l of s)if(l.textContent?.trim()===r)return}}if(n.tagName==="LINK"&&!i){const r=n.getAttribute("href"),s=n.getAttribute("rel");if(r){const l=document.querySelectorAll("link:not([id])");for(const h of l)if(h.getAttribute("href")===r&&h.getAttribute("rel")===s)return}}document.head.appendChild(n)}handleJsEffects(e){this.pendingScripts.clear(),this.scriptExecutionCount={total:0,completed:0,failed:0};const t=e.filter(n=>n?.trim());if(this.scriptExecutionCount.total=t.length,t.length===0){this.emitScriptExecutionComplete();return}for(const n of t)this.injectScriptElement(n)}injectScriptElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="SCRIPT"){console.warn("Invalid script element provided:",e),this.onScriptCompleted(!1);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&r.tagName==="SCRIPT"){this.pendingScripts.delete(r),r.parentNode?.replaceChild(n,r),this.trackScriptExecution(n);return}}if(!n.src&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("script:not([src]):not([id])");for(const l of s)if(l.textContent?.trim()===r){this.onScriptCompleted(!0);return}}}if(n.src&&!i){const r=n.src,s=document.querySelectorAll("script[src]:not([id])");for(const l of s)if(l.src===r){this.onScriptCompleted(!0);return}}document.head.appendChild(n),this.trackScriptExecution(n)}trackScriptExecution(e){if(e.src){this.pendingScripts.add(e);const t=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!0),e.removeEventListener("load",t),e.removeEventListener("error",n)},n=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!1),e.removeEventListener("load",t),e.removeEventListener("error",n)};e.addEventListener("load",t),e.addEventListener("error",n)}else this.onScriptCompleted(!0)}onScriptCompleted(e){e?this.scriptExecutionCount.completed++:this.scriptExecutionCount.failed++,this.scriptExecutionCount.completed+this.scriptExecutionCount.failed>=this.scriptExecutionCount.total&&this.emitScriptExecutionComplete()}emitScriptExecutionComplete(){this.previewClient.emit("scripts.execution.complete",{total:this.scriptExecutionCount.total,completed:this.scriptExecutionCount.completed,failed:this.scriptExecutionCount.failed,success:this.scriptExecutionCount.failed===0})}handleDirectUpdates(e){const{changes:t}=e;t.moved&&this.handleMoves(e),t.updated.length>0&&this.handleDisabledBlocks(e),t.removed.length>0&&this.handleRemoves(e)}handleMoves(e){const{blocks:t,changes:n}=e;for(const[i,r]of Object.entries(e.changes.moved)){if(r?.toParent&&n.updated?.includes(r?.toParent))continue;if(!this.isValidMoveInstruction(r)){console.warn(`Invalid move instruction for block ${i}:`,r);continue}const s=t[i];this.moveBlockUsingDOM(s,r)}}handleDisabledBlocks(e){const{blocks:t,changes:n}=e;for(const i of n.updated){const r=t[i];if(!r)continue;const l=!!this.getElementCached(i);r.disabled&&l?this.removeBlock(r.id):r.disabled}}handleRemoves(e){const{changes:t}=e;for(const n of t.removed)this.removeBlock(n)}handleHtmlEffects(e,t){const{blocks:n,regions:i}=t;for(const[r,s]of Object.entries(e)){if(!s)continue;const l=n[r];if(!l){console.warn(`Block data not found for ${r}`);continue}if(l.disabled){console.debug(`Skipping disabled block ${r}`);continue}if(!!this.getElementCached(r))this.updateBlockHtml(l,s);else{const m=this.calculatePosition(l,i,n);this.insertBlock(l,s,m)}}}isValidMoveInstruction(e){const t=!!(e.toParent||e.toRegion),n=e.toIndex===void 0||e.toIndex>=0;return t&&n}removeBlock(e){const t=this.getElementCached(e);t?(this.previewClient.emit("block.remove.before",{blockId:e,element:t}),t.remove(),this.elementCache.delete(e),this.previewClient.emit("block.remove.after",{blockId:e,element:t})):console.warn(`Block ${e} not found for removal`)}moveBlockUsingDOM(e,t){const n=this.getElementCached(e.id),{toParent:i,toRegion:r,toIndex:s}=t;if(!n){console.warn(`Block element ${e.id} not found for move operation`);return}if(this.previewClient.emit("block.move.before",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s}),i){const l=this.getElementCached(i);if(!l){console.error(`Parent element ${i} not found for move operation`);return}this.insertElementInContainer(n,l,e.id,s)}else if(r){const l=this.findRegionInsertionPoint(r,s,void 0,void 0,e.id);if(!l){console.error(`Failed to find insertion point for region: ${r}`);return}l.parent.insertBefore(n,l.before)}this.previewClient.emit("block.move.after",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s})}insertElementInContainer(e,t,n,i){const r=t.getAttribute("data-block"),s=r?this.childrenCommentsCache.get(r):null;if(s){const l=this.findPositionBetweenComments(s.begin,s.end,i,n);l.parent.insertBefore(e,l.before)}else{const h=Array.from(t.children).filter(m=>m.getAttribute("data-block")!==n),u=i!==void 0&&i<h.length?h[i]:null;t.insertBefore(e,u)}}insertBlock(e,t,n){if(this.getElementCached(e.id))return;this.previewClient.emit("block.insert.before",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n});const i=this.parseHtmlElement(t,e.id);if(!i)return;const{parentId:r,regionId:s,position:l,afterId:h,beforeId:u}=n;if(r){const m=this.getElementCached(r);if(!m){console.error(`Parent element ${r} not found for block ${e.id}`);return}this.insertElementByPosition(i,m,l,h,u)}else if(s){const m=this.findRegionInsertionPoint(s,l,h,u);if(!m){console.error(`Failed to find insertion point for region: ${s}`);return}m.parent.insertBefore(i,m.before)}else console.warn(`No parent or region specified for block ${e.id}, inserting into body`),document.body.appendChild(i);this.elementCache.set(e.id,i),this.cacheChildrenCommentsForBlock(e.id),i.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),this.previewClient.emit("block.insert.after",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n})}updateBlockHtml(e,t){if(!t){console.warn(`No HTML provided for block ${e.id}`);return}const n=this.getElementCached(e.id);if(!n){console.warn(`Block element ${e.id} not found for HTML update`);return}this.previewClient.emit("block.update.before",{blockId:e.id,blockType:e.type,block:e,element:n,html:t}),Ee(n,t,this.morphdomOptions),this.elementCache.delete(e.id);const i=this.getElementCached(e.id);if(!i){console.error(`Block element ${e.id} not found after morphdom update`);return}i!==n&&this.previewClient.inspector.updateTrackedElement(e.id,i),this.cacheChildrenCommentsForBlock(e.id),this.previewClient.emit("block.update.after",{blockId:e.id,blockType:e.type,block:e,element:i,html:t})}insertElementByPosition(e,t,n,i,r){const s=t.getAttribute("data-block"),l=s?this.childrenCommentsCache.get(s):null;if(l){let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&u.nextSibling&&(h=u.nextSibling)}else if(typeof n=="number"){const u=this.findPositionBetweenComments(l.begin,l.end,n);l.begin.parentNode.insertBefore(e,u.before);return}h||(h=l.end),l.begin.parentNode.insertBefore(e,h)}else{let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&(h=u.nextElementSibling)}else typeof n=="number"&&(h=Array.from(t.children)[n]||null);t.insertBefore(e,h)}}findRegionInsertionPoint(e,t,n,i,r){const s=this.regionCommentsCache.get(e);if(!s)return console.error(`Region comments not found for region: ${e}`),null;const{begin:l,end:h}=s;let u=null;if(i){const m=this.getElementCached(i);m&&(u=m)}else if(n){const m=this.getElementCached(n);m&&m.nextSibling&&(u=m.nextSibling)}else typeof t=="number"&&(u=this.findPositionInRegion(l,h,t,r));return u||(u=h),{parent:l.parentNode,before:u}}findPositionInRegion(e,t,n,i){const r=[];let s=e.nextSibling;for(;s&&s!==t;){if(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute("data-block")){const l=s.getAttribute("data-block");(!i||l!==i)&&r.push(s)}s=s.nextSibling}return n<r.length?r[n]:null}findPositionBetweenComments(e,t,n,i){let r=null;if(typeof n=="number"){const s=[];let l=e.nextSibling;for(;l&&l!==t;){if(l.nodeType===Node.ELEMENT_NODE&&l.hasAttribute("data-block")){const h=l.getAttribute("data-block");(!i||h!==i)&&s.push(l)}l=l.nextSibling}r=n<s.length?s[n]:null}return r||(r=t),{parent:e.parentNode,before:r}}calculatePosition(e,t,n){if(e.parentId){const i=n[e.parentId];i||console.warn(`Block data not found for block ${e.id}`);const r=i.children.indexOf(e.id);if(r===-1)return console.warn(`Block ${e.id} not found in parent ${e.parentId} children`),{parentId:e.parentId};const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.children,r,n);return{parentId:e.parentId,position:r,afterId:s,beforeId:l}}else{for(const i of t){const r=i.blocks.indexOf(e.id);if(r!==-1){const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.blocks,r,n);return{regionId:ke(i),position:r,afterId:s,beforeId:l}}}return{}}}findAdjacentSiblings(e,t,n){let i,r;for(let s=t-1;s>=0;s--){const l=n[e[s]];if(l&&!l.disabled){i=e[s];break}}for(let s=t+1;s<e.length;s++){const l=n[e[s]];if(l&&!l.disabled){r=e[s];break}}return{afterId:i,beforeId:r}}parseHtmlElement(e,t){if(!e.trim())return console.error(`Empty HTML provided for block ${t}`),null;const n=document.createElement("div");n.innerHTML=e;const i=n.firstElementChild;return i||(console.error(`Invalid HTML for block ${t}: no element found`),null)}}return U})();\n',S=c=>c.id||c.name,B=(c={})=>({editor:a})=>{const d=new Map;a.events.on("updates",b),f();function u(e){return`data-block="${e}"`}function f(){a.preview.loadFromHtml(m(a.engine.getPage()))}function h(e,r){if(e.ghost===!0)return"";const s=`${e.id}:${JSON.stringify(e.properties)}:${e.children.join(",")}`;if(d.has(s))return d.get(s);let l;if(c.blockRenderers?.[e.type])l=c.blockRenderers[e.type];else{const t=a.engine.getBlockSchema(e.type);l=typeof t?.meta?.render=="function"?t.meta.render:({block:k,editorAttributes:C})=>`<div ${C}><em>Unknown block type: ${k.type}</em></div>`}const o=Array.isArray(e.children)?e.children.map(t=>h(r[t],r)).join(""):"",i=u(e.id);let n;try{n=l({id:e.id,props:e.properties,block:e,editorAttributes:i,children:o})}catch(t){console.warn(`Render error for block ${e.id}:`,t),n=`<div ${i} class="render-error">
2
2
  <em>⚠️ Render Error: ${t instanceof Error?t.message:"Unknown error"}</em>
3
- </div>`}return a.set(s,i),i}function m(e){const r=(e.regions??[]).map(o=>{const n=o.blocks.map(i=>h(e.blocks[i],e.blocks)).join(`
4
- `);return`<!--BEGIN region: ${o.name}-->
5
- ${n}
6
- <!--END region: ${o.name}-->`}).join(`
7
- `),s=(d.styles||[]).map(o=>` <link rel="stylesheet" href="${o}" />`).join(`
8
- `),l=(d.scripts||[]).map(o=>`<script src="${o}"><\/script>`).join(`
3
+ </div>`}return d.set(s,n),n}function m(e){const r=(e.regions??[]).map(o=>{const i=o.blocks.map(t=>h(e.blocks[t],e.blocks)).join(`
4
+ `),n=S(o);return`<!--BEGIN region: ${n}-->
5
+ ${i}
6
+ <!--END region: ${n}-->`}).join(`
7
+ `),s=(c.styles||[]).map(o=>` <link rel="stylesheet" href="${o}" />`).join(`
8
+ `),l=(c.scripts||[]).map(o=>`<script src="${o}"><\/script>`).join(`
9
9
  `);return`
10
10
  <!DOCTYPE html>
11
11
  <html lang="en">
@@ -24,4 +24,4 @@ window.HtmlPreviewClient.init();
24
24
  <\/script>
25
25
  </body>
26
26
  </html>
27
- `.trim()}function p(e){return e.changes.added.length>0||e.changes.updated.length>0||e.changes.removed.length>0||Object.keys(e.changes.moved||{}).length>0}function b(e){if(!p(e))return;const r=v(e);c.preview.sendMessage("updates.effects",{...e,effects:r})}function v(e){const r=[...e.changes.added,...e.changes.updated];if(r.length===0)return{html:{}};const s=c.engine.getPage().blocks,l={html:{}};e.changes.removed.forEach(n=>{g(n)});const o=new Set;return r.forEach(n=>{const i=s[n];if(i){l.html[n]=h(i,s);let t=i;for(;t;){if(t.repeated&&t.parentId){o.add(t.parentId);break}t=t.parentId?s[t.parentId]:void 0}}}),o.forEach(n=>{const i=e.blocks[n];i&&!l.html[n]&&(l.html[n]=h(i,s))}),l}function g(e){for(const r of a.keys())r.startsWith(`${e}:`)&&a.delete(r)}};module.exports=S;
27
+ `.trim()}function p(e){return e.changes.added.length>0||e.changes.updated.length>0||e.changes.removed.length>0||Object.keys(e.changes.moved||{}).length>0}function b(e){if(!p(e))return;const r=v(e);a.preview.sendMessage("updates.effects",{...e,effects:r})}function v(e){const r=[...e.changes.added,...e.changes.updated];if(r.length===0)return{html:{}};const s=a.engine.getPage().blocks,l={html:{}};e.changes.removed.forEach(i=>{g(i)});const o=new Set;return r.forEach(i=>{const n=s[i];if(n){l.html[i]=h(n,s);let t=n;for(;t;){if(t.repeated&&t.parentId){o.add(t.parentId);break}t=t.parentId?s[t.parentId]:void 0}}}),o.forEach(i=>{const n=e.blocks[i];n&&!l.html[i]&&(l.html[i]=h(n,s))}),l}function g(e){for(const r of d.keys())r.startsWith(`${e}:`)&&d.delete(r)}};module.exports=B;
package/dist/index.js CHANGED
@@ -1,46 +1,46 @@
1
- const E = 'var xe=Object.defineProperty;var Te=(y,C,v)=>C in y?xe(y,C,{enumerable:!0,configurable:!0,writable:!0,value:v}):y[C]=v;var w=(y,C,v)=>Te(y,typeof C!="symbol"?C+"":C,v);var HtmlPreviewClient=(function(){"use strict";var y=Object.defineProperty,C=(o,e,t)=>e in o?y(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,v=(o,e,t)=>C(o,typeof e!="symbol"?e+"":e,t);class ie{constructor(e,t="*"){v(this,"handlers",new Map),v(this,"targetWindow"),v(this,"targetOrigin"),v(this,"fallbackHandler"),this.targetWindow=e,this.targetOrigin=t,window.addEventListener("message",this.handleMessage.bind(this))}handleMessage(e){const t=e.data;if(!t.type)return;const n=this.handlers.get(t.type);n?n.forEach(i=>i(t.payload,e)):this.fallbackHandler&&this.fallbackHandler(e.data,e)}send(e,t){const n={type:e,payload:t};this.targetWindow.postMessage(n,this.targetOrigin)}listen(e,t){return this.handlers.has(e)||this.handlers.set(e,[]),this.handlers.get(e).push(t),()=>{const n=this.handlers.get(e);if(n){const i=n.indexOf(t);i>-1&&n.splice(i,1)}}}registerFallbackHandler(e){this.fallbackHandler=e}}function re(o="*"){if(window.parent===window)throw new Error("Not inside an iframe");return new ie(window.parent,o)}class se{constructor(){v(this,"listeners",new Map)}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>{this.off(e,t)}}off(e,t){const n=this.listeners.get(e);n&&(n.delete(t),n.size===0&&this.listeners.delete(e))}once(e,t){const n=i=>{t(i),this.off(e,n)};this.on(e,n)}emit(e,...t){const n=this.listeners.get(e);if(n){const i=t[0];n.forEach(r=>{try{r(i)}catch(s){console.error(`Error in event listener for \'${String(e)}\':`,s)}})}}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}}class oe{constructor(e){v(this,"active",!0),v(this,"messenger"),v(this,"currentHoveredBlock",null),v(this,"currentSelectedBlock",null),v(this,"overlayButtonHovered",!1),v(this,"resizeObserver",null),v(this,"mutationObserver",null),this.messenger=e,this.messenger.listen("craftile.inspector.enable",()=>this.enable()),this.messenger.listen("craftile.inspector.disable",()=>this.disable()),this.messenger.listen("craftile.inspector.overlay-button-enter",this.handleOverlayButtonEnter.bind(this)),this.messenger.listen("craftile.inspector.overlay-button-leave",this.handleOverlayButtonLeave.bind(this)),this.messenger.listen("craftile.editor.select-block",this.handleEditorSelectBlock.bind(this)),this.messenger.listen("craftile.editor.deselect-block",this.handleEditorDeselectBlock.bind(this)),window.addEventListener("scroll",this.handleScroll.bind(this),{passive:!0}),this.setupGlobalEventListeners()}updateTrackedElement(e,t){this.currentHoveredBlock?.dataset.block===e&&(this.currentHoveredBlock=t,this.sendHoveredBlockPosition()),this.currentSelectedBlock?.dataset.block===e&&(this.currentSelectedBlock=t,requestAnimationFrame(()=>{this.sendSelectedBlockPosition(!0)}),this.trackSelectedBlock())}enable(){this.active=!0,document.body.classList.add("craftile-inspector-active"),this.currentSelectedBlock&&this.trackSelectedBlock()}disable(){this.active=!1,document.body.classList.remove("craftile-inspector-active"),this.currentHoveredBlock=null,this.overlayButtonHovered=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleOverlayButtonEnter(){this.overlayButtonHovered=!0}handleOverlayButtonLeave(e){this.overlayButtonHovered=!1,this.currentHoveredBlock||this.messenger.send("craftile.preview.block-leave")}handleEditorSelectBlock(e){const t=document.querySelector(`[data-block="${e.blockId}"]`);t&&(this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock(),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}handleEditorDeselectBlock(){this.currentSelectedBlock=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleScroll(){this.active&&(this.currentSelectedBlock&&this.sendSelectedBlockPosition(),this.currentHoveredBlock&&this.sendHoveredBlockPosition())}setupGlobalEventListeners(){document.addEventListener("mouseover",this.handleGlobalHover.bind(this)),document.addEventListener("mouseout",this.handleGlobalLeave.bind(this)),document.addEventListener("click",this.handleGlobalClick.bind(this),{capture:!0})}handleGlobalHover(e){if(!this.active)return;const t=e.target.closest("[data-block]");t&&(e.stopPropagation(),this.currentHoveredBlock=t,this.sendHoveredBlockPosition())}handleGlobalLeave(e){!this.active||!e.target.closest("[data-block]")||this.overlayButtonHovered||(this.currentHoveredBlock=null,this.messenger.send("craftile.preview.block-leave"))}handleGlobalClick(e){if(this.messenger.send("craftile.preview.click"),!this.active)return;const t=e.target.closest("[data-block]");if(!t||!t.getAttribute("data-block"))return;this.currentSelectedBlock===t||(e.preventDefault(),e.stopImmediatePropagation(),this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock())}sendHoveredBlockPosition(){const e=this.computeElementPositioning(this.currentHoveredBlock);this.messenger.send("craftile.preview.block-hover",{blockRect:e.rect,parentRect:e.parentRect,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft,blockId:this.currentHoveredBlock.dataset.block,parentFlexDirection:e.parentFlexDirection})}sendSelectedBlockPosition(e=!1){if(!this.currentSelectedBlock)return;const t=this.computeElementPositioning(this.currentSelectedBlock);this.messenger.send(e?"craftile.preview.update-selected-block":"craftile.preview.block-select",{blockRect:t.rect,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,blockId:this.currentSelectedBlock.dataset.block})}trackSelectedBlock(){if(!this.currentSelectedBlock)return;this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.resizeObserver=new ResizeObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.resizeObserver.observe(this.currentSelectedBlock),this.mutationObserver=new MutationObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.mutationObserver.observe(this.currentSelectedBlock,{attributes:!0,subtree:!1});let e=this.currentSelectedBlock.parentElement;for(;e&&(this.mutationObserver.observe(e,{childList:!0,subtree:!1}),e!==document.body);)e=e.parentElement}computeElementPositioning(e){const t=e.getBoundingClientRect(),n=window.pageYOffset||document.documentElement.scrollTop,i=window.pageXOffset||document.documentElement.scrollLeft,r=this.findEldestParentBlock(e),s=r&&r!==e?r.getBoundingClientRect():void 0,l=this.getElementFlexDirection(e.parentElement);return{rect:t,parentRect:s,scrollTop:n,scrollLeft:i,parentFlexDirection:l}}findEldestParentBlock(e){let t=null,n=e.parentElement;for(;n&&n!==document.body;)n.hasAttribute("data-block")&&(t=n),n=n.parentElement;return t}getElementFlexDirection(e){if(!e)return"column";const t=window.getComputedStyle(e),n=t.display.includes("flex")?t.flexDirection:"column";return n==="row"||n==="row-reverse"?"row":"column"}}class le extends se{constructor(){super(),v(this,"messenger"),v(this,"inspector"),this.messenger=re(window.origin),this.inspector=new oe(this.messenger),this.initialize()}initialize(){window.addEventListener("load",()=>{this.messenger.send("craftile.preview.ready",{}),setTimeout(()=>{this.sendPageData()},0)}),this.messenger.registerFallbackHandler(e=>{const{type:t,payload:n}=e;this.emit(t,n)})}sendPageData(){const e=document.getElementById("page-data");if(e)try{const t=JSON.parse(e.textContent||"{}");this.messenger.send("craftile.preview.page-data",{pageData:t})}catch(t){console.error("Failed to parse page data:",t)}}}var q=11;function ce(o,e){var t=e.attributes,n,i,r,s,l;if(!(e.nodeType===q||o.nodeType===q)){for(var h=t.length-1;h>=0;h--)n=t[h],i=n.name,r=n.namespaceURI,s=n.value,r?(i=n.localName||i,l=o.getAttributeNS(r,i),l!==s&&(n.prefix==="xmlns"&&(i=n.name),o.setAttributeNS(r,i,s))):(l=o.getAttribute(i),l!==s&&o.setAttribute(i,s));for(var u=o.attributes,m=u.length-1;m>=0;m--)n=u[m],i=n.name,r=n.namespaceURI,r?(i=n.localName||i,e.hasAttributeNS(r,i)||o.removeAttributeNS(r,i)):e.hasAttribute(i)||o.removeAttribute(i)}}var A,ae="http://www.w3.org/1999/xhtml",b=typeof document>"u"?void 0:document,de=!!b&&"content"in b.createElement("template"),he=!!b&&b.createRange&&"createContextualFragment"in b.createRange();function fe(o){var e=b.createElement("template");return e.innerHTML=o,e.content.childNodes[0]}function ue(o){A||(A=b.createRange(),A.selectNode(b.body));var e=A.createContextualFragment(o);return e.childNodes[0]}function me(o){var e=b.createElement("body");return e.innerHTML=o,e.childNodes[0]}function pe(o){return o=o.trim(),de?fe(o):he?ue(o):me(o)}function P(o,e){var t=o.nodeName,n=e.nodeName,i,r;return t===n?!0:(i=t.charCodeAt(0),r=n.charCodeAt(0),i<=90&&r>=97?t===n.toUpperCase():r<=90&&i>=97?n===t.toUpperCase():!1)}function ve(o,e){return!e||e===ae?b.createElement(o):b.createElementNS(e,o)}function ge(o,e){for(var t=o.firstChild;t;){var n=t.nextSibling;e.appendChild(t),t=n}return e}function _(o,e,t){o[t]!==e[t]&&(o[t]=e[t],o[t]?o.setAttribute(t,""):o.removeAttribute(t))}var X={OPTION:function(o,e){var t=o.parentNode;if(t){var n=t.nodeName.toUpperCase();n==="OPTGROUP"&&(t=t.parentNode,n=t&&t.nodeName.toUpperCase()),n==="SELECT"&&!t.hasAttribute("multiple")&&(o.hasAttribute("selected")&&!e.selected&&(o.setAttribute("selected","selected"),o.removeAttribute("selected")),t.selectedIndex=-1)}_(o,e,"selected")},INPUT:function(o,e){_(o,e,"checked"),_(o,e,"disabled"),o.value!==e.value&&(o.value=e.value),e.hasAttribute("value")||o.removeAttribute("value")},TEXTAREA:function(o,e){var t=e.value;o.value!==t&&(o.value=t);var n=o.firstChild;if(n){var i=n.nodeValue;if(i==t||!t&&i==o.placeholder)return;n.nodeValue=t}},SELECT:function(o,e){if(!e.hasAttribute("multiple")){for(var t=-1,n=0,i=o.firstChild,r,s;i;)if(s=i.nodeName&&i.nodeName.toUpperCase(),s==="OPTGROUP")r=i,i=r.firstChild,i||(i=r.nextSibling,r=null);else{if(s==="OPTION"){if(i.hasAttribute("selected")){t=n;break}n++}i=i.nextSibling,!i&&r&&(i=r.nextSibling,r=null)}o.selectedIndex=t}}},N=1,Y=11,J=3,Q=8;function k(){}function be(o){if(o)return o.getAttribute&&o.getAttribute("id")||o.id}function Ce(o){return function(t,n,i){if(i||(i={}),typeof n=="string")if(t.nodeName==="#document"||t.nodeName==="HTML"||t.nodeName==="BODY"){var r=n;n=b.createElement("html"),n.innerHTML=r}else n=pe(n);else n.nodeType===Y&&(n=n.firstElementChild);var s=i.getNodeKey||be,l=i.onBeforeNodeAdded||k,h=i.onNodeAdded||k,u=i.onBeforeElUpdated||k,m=i.onElUpdated||k,ke=i.onBeforeNodeDiscarded||k,L=i.onNodeDiscarded||k,Se=i.onBeforeElChildrenUpdated||k,Be=i.skipFromChildren||k,Z=i.addChild||function(c,a){return c.appendChild(a)},z=i.childrenOnly===!0,O=Object.create(null),H=[];function I(c){H.push(c)}function ee(c,a){if(c.nodeType===N)for(var p=c.firstChild;p;){var d=void 0;a&&(d=s(p))?I(d):(L(p),p.firstChild&&ee(p,a)),p=p.nextSibling}}function M(c,a,p){ke(c)!==!1&&(a&&a.removeChild(c),L(c),ee(c,p))}function G(c){if(c.nodeType===N||c.nodeType===Y)for(var a=c.firstChild;a;){var p=s(a);p&&(O[p]=a),G(a),a=a.nextSibling}}G(t);function V(c){h(c);for(var a=c.firstChild;a;){var p=a.nextSibling,d=s(a);if(d){var f=O[d];f&&P(a,f)?(a.parentNode.replaceChild(f,a),D(f,a)):V(a)}else V(a);a=p}}function we(c,a,p){for(;a;){var d=a.nextSibling;(p=s(a))?I(p):M(a,c,!0),a=d}}function D(c,a,p){var d=s(a);if(d&&delete O[d],!p){var f=u(c,a);if(f===!1||(f instanceof HTMLElement&&(c=f,G(c)),o(c,a),m(c),Se(c,a)===!1))return}c.nodeName!=="TEXTAREA"?ye(c,a):X.TEXTAREA(c,a)}function ye(c,a){var p=Be(c,a),d=a.firstChild,f=c.firstChild,x,E,T,$,S;e:for(;d;){for($=d.nextSibling,x=s(d);!p&&f;){if(T=f.nextSibling,d.isSameNode&&d.isSameNode(f)){d=$,f=T;continue e}E=s(f);var F=f.nodeType,B=void 0;if(F===d.nodeType&&(F===N?(x?x!==E&&((S=O[x])?T===S?B=!1:(c.insertBefore(S,f),E?I(E):M(f,c,!0),f=S,E=s(f)):B=!1):E&&(B=!1),B=B!==!1&&P(f,d),B&&D(f,d)):(F===J||F==Q)&&(B=!0,f.nodeValue!==d.nodeValue&&(f.nodeValue=d.nodeValue))),B){d=$,f=T;continue e}E?I(E):M(f,c,!0),f=T}if(x&&(S=O[x])&&P(S,d))p||Z(c,S),D(S,d);else{var K=l(d);K!==!1&&(K&&(d=K),d.actualize&&(d=d.actualize(c.ownerDocument||b)),Z(c,d),V(d))}d=$,f=T}we(c,f,E);var ne=X[c.nodeName];ne&&ne(c,a)}var g=t,R=g.nodeType,te=n.nodeType;if(!z){if(R===N)te===N?P(t,n)||(L(t),g=ge(t,ve(n.nodeName,n.namespaceURI))):g=n;else if(R===J||R===Q){if(te===R)return g.nodeValue!==n.nodeValue&&(g.nodeValue=n.nodeValue),g;g=n}}if(g===n)L(t);else{if(n.isSameNode&&n.isSameNode(g))return;if(D(g,n,z),H)for(var W=0,Oe=H.length;W<Oe;W++){var j=O[H[W]];j&&M(j,j.parentNode,!1)}}return!z&&g!==t&&t.parentNode&&(g.actualize&&(g=g.actualize(t.ownerDocument||b)),t.parentNode.replaceChild(g,t)),g}}var Ee=Ce(ce);class U{constructor(e,t){w(this,"previewClient");w(this,"morphdomOptions");w(this,"elementCache",new Map);w(this,"regionCommentsCache",new Map);w(this,"childrenCommentsCache",new Map);w(this,"pendingScripts",new Set);w(this,"scriptExecutionCount",{total:0,completed:0,failed:0});this.previewClient=e||new le,this.morphdomOptions=t?.morphdom||{},this.previewClient.on("updates.effects",this.handleEffects.bind(this)),this.previewClient.on("craftile.editor.updates",this.handleDirectUpdates.bind(this)),this.cacheRegionComments(),this.cacheChildrenComments()}static init(e,t){return new U(e,t)}getElementCached(e){if(this.elementCache.has(e)){const n=this.elementCache.get(e);if(n.isConnected)return n;this.elementCache.delete(e)}const t=document.querySelector(`[data-block="${e}"]`);return t&&this.elementCache.set(e,t),t}cacheRegionComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN region: ")){const r=i.substring(14);n.set(r,t)}else if(i.startsWith("END region: ")){const r=i.substring(12),s=n.get(r);s&&(this.regionCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN children: ")){const r=i.substring(16);n.set(r,t)}else if(i.startsWith("END children: ")){const r=i.substring(14),s=n.get(r);s&&(this.childrenCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenCommentsForBlock(e){const t=this.getElementCached(e);if(!t)return;this.childrenCommentsCache.delete(e);const n=document.createTreeWalker(t,NodeFilter.SHOW_COMMENT,null);let i,r=null;for(;i=n.nextNode();){const s=i.textContent?.trim();if(s){if(s===`BEGIN children: ${e}`)r=i;else if(s===`END children: ${e}`&&r){this.childrenCommentsCache.set(e,{begin:r,end:i});break}}}}invalidateCache(e){[...e.updated,...e.removed].forEach(t=>{this.elementCache.delete(t),this.childrenCommentsCache.delete(t)})}handleEffects(e){const{effects:t,blocks:n,regions:i,changes:r}=e;t&&(this.invalidateCache(r),t.html&&this.handleHtmlEffects(t.html,{blocks:n,regions:i,changes:r}),t.css&&this.handleCssEffects(t.css),t.js&&this.handleJsEffects(t.js))}handleCssEffects(e){for(const t of e)this.injectStyleElement(t)}injectStyleElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="STYLE"&&n.tagName!=="LINK"){console.warn("Invalid CSS element provided:",e);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&(r.tagName==="STYLE"||r.tagName==="LINK")){r.parentNode?.replaceChild(n,r);return}}if(n.tagName==="STYLE"&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("style:not([id])");for(const l of s)if(l.textContent?.trim()===r)return}}if(n.tagName==="LINK"&&!i){const r=n.getAttribute("href"),s=n.getAttribute("rel");if(r){const l=document.querySelectorAll("link:not([id])");for(const h of l)if(h.getAttribute("href")===r&&h.getAttribute("rel")===s)return}}document.head.appendChild(n)}handleJsEffects(e){this.pendingScripts.clear(),this.scriptExecutionCount={total:0,completed:0,failed:0};const t=e.filter(n=>n?.trim());if(this.scriptExecutionCount.total=t.length,t.length===0){this.emitScriptExecutionComplete();return}for(const n of t)this.injectScriptElement(n)}injectScriptElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="SCRIPT"){console.warn("Invalid script element provided:",e),this.onScriptCompleted(!1);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&r.tagName==="SCRIPT"){this.pendingScripts.delete(r),r.parentNode?.replaceChild(n,r),this.trackScriptExecution(n);return}}if(!n.src&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("script:not([src]):not([id])");for(const l of s)if(l.textContent?.trim()===r){this.onScriptCompleted(!0);return}}}if(n.src&&!i){const r=n.src,s=document.querySelectorAll("script[src]:not([id])");for(const l of s)if(l.src===r){this.onScriptCompleted(!0);return}}document.head.appendChild(n),this.trackScriptExecution(n)}trackScriptExecution(e){if(e.src){this.pendingScripts.add(e);const t=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!0),e.removeEventListener("load",t),e.removeEventListener("error",n)},n=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!1),e.removeEventListener("load",t),e.removeEventListener("error",n)};e.addEventListener("load",t),e.addEventListener("error",n)}else this.onScriptCompleted(!0)}onScriptCompleted(e){e?this.scriptExecutionCount.completed++:this.scriptExecutionCount.failed++,this.scriptExecutionCount.completed+this.scriptExecutionCount.failed>=this.scriptExecutionCount.total&&this.emitScriptExecutionComplete()}emitScriptExecutionComplete(){this.previewClient.emit("scripts.execution.complete",{total:this.scriptExecutionCount.total,completed:this.scriptExecutionCount.completed,failed:this.scriptExecutionCount.failed,success:this.scriptExecutionCount.failed===0})}handleDirectUpdates(e){const{changes:t}=e;t.moved&&this.handleMoves(e),t.updated.length>0&&this.handleDisabledBlocks(e),t.removed.length>0&&this.handleRemoves(e)}handleMoves(e){const{blocks:t,changes:n}=e;for(const[i,r]of Object.entries(e.changes.moved)){if(r?.toParent&&n.updated?.includes(r?.toParent))continue;if(!this.isValidMoveInstruction(r)){console.warn(`Invalid move instruction for block ${i}:`,r);continue}const s=t[i];this.moveBlockUsingDOM(s,r)}}handleDisabledBlocks(e){const{blocks:t,changes:n}=e;for(const i of n.updated){const r=t[i];if(!r)continue;const l=!!this.getElementCached(i);r.disabled&&l?this.removeBlock(r.id):r.disabled}}handleRemoves(e){const{changes:t}=e;for(const n of t.removed)this.removeBlock(n)}handleHtmlEffects(e,t){const{blocks:n,regions:i}=t;for(const[r,s]of Object.entries(e)){if(!s)continue;const l=n[r];if(!l){console.warn(`Block data not found for ${r}`);continue}if(l.disabled){console.debug(`Skipping disabled block ${r}`);continue}if(!!this.getElementCached(r))this.updateBlockHtml(l,s);else{const m=this.calculatePosition(l,i,n);this.insertBlock(l,s,m)}}}isValidMoveInstruction(e){const t=!!(e.toParent||e.toRegion),n=e.toIndex===void 0||e.toIndex>=0;return t&&n}removeBlock(e){const t=this.getElementCached(e);t?(this.previewClient.emit("block.remove.before",{blockId:e,element:t}),t.remove(),this.elementCache.delete(e),this.previewClient.emit("block.remove.after",{blockId:e,element:t})):console.warn(`Block ${e} not found for removal`)}moveBlockUsingDOM(e,t){const n=this.getElementCached(e.id),{toParent:i,toRegion:r,toIndex:s}=t;if(!n){console.warn(`Block element ${e.id} not found for move operation`);return}if(this.previewClient.emit("block.move.before",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s}),i){const l=this.getElementCached(i);if(!l){console.error(`Parent element ${i} not found for move operation`);return}this.insertElementInContainer(n,l,e.id,s)}else if(r){const l=this.findRegionInsertionPoint(r,s,void 0,void 0,e.id);if(!l){console.error(`Failed to find insertion point for region: ${r}`);return}l.parent.insertBefore(n,l.before)}this.previewClient.emit("block.move.after",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s})}insertElementInContainer(e,t,n,i){const r=t.getAttribute("data-block"),s=r?this.childrenCommentsCache.get(r):null;if(s){const l=this.findPositionBetweenComments(s.begin,s.end,i,n);l.parent.insertBefore(e,l.before)}else{const h=Array.from(t.children).filter(m=>m.getAttribute("data-block")!==n),u=i!==void 0&&i<h.length?h[i]:null;t.insertBefore(e,u)}}insertBlock(e,t,n){if(this.getElementCached(e.id))return;this.previewClient.emit("block.insert.before",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n});const i=this.parseHtmlElement(t,e.id);if(!i)return;const{parentId:r,regionName:s,position:l,afterId:h,beforeId:u}=n;if(r){const m=this.getElementCached(r);if(!m){console.error(`Parent element ${r} not found for block ${e.id}`);return}this.insertElementByPosition(i,m,l,h,u)}else if(s){const m=this.findRegionInsertionPoint(s,l,h,u);if(!m){console.error(`Failed to find insertion point for region: ${s}`);return}m.parent.insertBefore(i,m.before)}else console.warn(`No parent or region specified for block ${e.id}, inserting into body`),document.body.appendChild(i);this.elementCache.set(e.id,i),this.cacheChildrenCommentsForBlock(e.id),i.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),this.previewClient.emit("block.insert.after",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n})}updateBlockHtml(e,t){if(!t){console.warn(`No HTML provided for block ${e.id}`);return}const n=this.getElementCached(e.id);if(!n){console.warn(`Block element ${e.id} not found for HTML update`);return}this.previewClient.emit("block.update.before",{blockId:e.id,blockType:e.type,block:e,element:n,html:t}),Ee(n,t,this.morphdomOptions),this.elementCache.delete(e.id);const i=this.getElementCached(e.id);if(!i){console.error(`Block element ${e.id} not found after morphdom update`);return}i!==n&&this.previewClient.inspector.updateTrackedElement(e.id,i),this.cacheChildrenCommentsForBlock(e.id),this.previewClient.emit("block.update.after",{blockId:e.id,blockType:e.type,block:e,element:i,html:t})}insertElementByPosition(e,t,n,i,r){const s=t.getAttribute("data-block"),l=s?this.childrenCommentsCache.get(s):null;if(l){let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&u.nextSibling&&(h=u.nextSibling)}else if(typeof n=="number"){const u=this.findPositionBetweenComments(l.begin,l.end,n);l.begin.parentNode.insertBefore(e,u.before);return}h||(h=l.end),l.begin.parentNode.insertBefore(e,h)}else{let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&(h=u.nextElementSibling)}else typeof n=="number"&&(h=Array.from(t.children)[n]||null);t.insertBefore(e,h)}}findRegionInsertionPoint(e,t,n,i,r){const s=this.regionCommentsCache.get(e);if(!s)return console.error(`Region comments not found for region: ${e}`),null;const{begin:l,end:h}=s;let u=null;if(i){const m=this.getElementCached(i);m&&(u=m)}else if(n){const m=this.getElementCached(n);m&&m.nextSibling&&(u=m.nextSibling)}else typeof t=="number"&&(u=this.findPositionInRegion(l,h,t,r));return u||(u=h),{parent:l.parentNode,before:u}}findPositionInRegion(e,t,n,i){const r=[];let s=e.nextSibling;for(;s&&s!==t;){if(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute("data-block")){const l=s.getAttribute("data-block");(!i||l!==i)&&r.push(s)}s=s.nextSibling}return n<r.length?r[n]:null}findPositionBetweenComments(e,t,n,i){let r=null;if(typeof n=="number"){const s=[];let l=e.nextSibling;for(;l&&l!==t;){if(l.nodeType===Node.ELEMENT_NODE&&l.hasAttribute("data-block")){const h=l.getAttribute("data-block");(!i||h!==i)&&s.push(l)}l=l.nextSibling}r=n<s.length?s[n]:null}return r||(r=t),{parent:e.parentNode,before:r}}calculatePosition(e,t,n){if(e.parentId){const i=n[e.parentId];i||console.warn(`Block data not found for block ${e.id}`);const r=i.children.indexOf(e.id);if(r===-1)return console.warn(`Block ${e.id} not found in parent ${e.parentId} children`),{parentId:e.parentId};const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.children,r,n);return{parentId:e.parentId,position:r,afterId:s,beforeId:l}}else{for(const i of t){const r=i.blocks.indexOf(e.id);if(r!==-1){const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.blocks,r,n);return{regionName:i.name,position:r,afterId:s,beforeId:l}}}return{}}}findAdjacentSiblings(e,t,n){let i,r;for(let s=t-1;s>=0;s--){const l=n[e[s]];if(l&&!l.disabled){i=e[s];break}}for(let s=t+1;s<e.length;s++){const l=n[e[s]];if(l&&!l.disabled){r=e[s];break}}return{afterId:i,beforeId:r}}parseHtmlElement(e,t){if(!e.trim())return console.error(`Empty HTML provided for block ${t}`),null;const n=document.createElement("div");n.innerHTML=e;const i=n.firstElementChild;return i||(console.error(`Invalid HTML for block ${t}: no element found`),null)}}return U})();\n', S = (d = {}) => ({ editor: c }) => {
2
- const a = /* @__PURE__ */ new Map();
3
- c.events.on("updates", b), f();
1
+ const E = 'var Te=Object.defineProperty;var Ne=(y,C,v)=>C in y?Te(y,C,{enumerable:!0,configurable:!0,writable:!0,value:v}):y[C]=v;var w=(y,C,v)=>Ne(y,typeof C!="symbol"?C+"":C,v);var HtmlPreviewClient=(function(){"use strict";var y=Object.defineProperty,C=(o,e,t)=>e in o?y(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,v=(o,e,t)=>C(o,typeof e!="symbol"?e+"":e,t);class ie{constructor(e,t="*"){v(this,"handlers",new Map),v(this,"targetWindow"),v(this,"targetOrigin"),v(this,"fallbackHandler"),this.targetWindow=e,this.targetOrigin=t,window.addEventListener("message",this.handleMessage.bind(this))}handleMessage(e){const t=e.data;if(!t.type)return;const n=this.handlers.get(t.type);n?n.forEach(i=>i(t.payload,e)):this.fallbackHandler&&this.fallbackHandler(e.data,e)}send(e,t){const n={type:e,payload:t};this.targetWindow.postMessage(n,this.targetOrigin)}listen(e,t){return this.handlers.has(e)||this.handlers.set(e,[]),this.handlers.get(e).push(t),()=>{const n=this.handlers.get(e);if(n){const i=n.indexOf(t);i>-1&&n.splice(i,1)}}}registerFallbackHandler(e){this.fallbackHandler=e}}function re(o="*"){if(window.parent===window)throw new Error("Not inside an iframe");return new ie(window.parent,o)}class se{constructor(){v(this,"listeners",new Map)}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>{this.off(e,t)}}off(e,t){const n=this.listeners.get(e);n&&(n.delete(t),n.size===0&&this.listeners.delete(e))}once(e,t){const n=i=>{t(i),this.off(e,n)};this.on(e,n)}emit(e,...t){const n=this.listeners.get(e);if(n){const i=t[0];n.forEach(r=>{try{r(i)}catch(s){console.error(`Error in event listener for \'${String(e)}\':`,s)}})}}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}}class oe{constructor(e){v(this,"active",!0),v(this,"messenger"),v(this,"currentHoveredBlock",null),v(this,"currentSelectedBlock",null),v(this,"overlayButtonHovered",!1),v(this,"resizeObserver",null),v(this,"mutationObserver",null),this.messenger=e,this.messenger.listen("craftile.inspector.enable",()=>this.enable()),this.messenger.listen("craftile.inspector.disable",()=>this.disable()),this.messenger.listen("craftile.inspector.overlay-button-enter",this.handleOverlayButtonEnter.bind(this)),this.messenger.listen("craftile.inspector.overlay-button-leave",this.handleOverlayButtonLeave.bind(this)),this.messenger.listen("craftile.editor.select-block",this.handleEditorSelectBlock.bind(this)),this.messenger.listen("craftile.editor.deselect-block",this.handleEditorDeselectBlock.bind(this)),window.addEventListener("scroll",this.handleScroll.bind(this),{passive:!0}),this.setupGlobalEventListeners()}updateTrackedElement(e,t){this.currentHoveredBlock?.dataset.block===e&&(this.currentHoveredBlock=t,this.sendHoveredBlockPosition()),this.currentSelectedBlock?.dataset.block===e&&(this.currentSelectedBlock=t,requestAnimationFrame(()=>{this.sendSelectedBlockPosition(!0)}),this.trackSelectedBlock())}enable(){this.active=!0,document.body.classList.add("craftile-inspector-active"),this.currentSelectedBlock&&this.trackSelectedBlock()}disable(){this.active=!1,document.body.classList.remove("craftile-inspector-active"),this.currentHoveredBlock=null,this.overlayButtonHovered=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleOverlayButtonEnter(){this.overlayButtonHovered=!0}handleOverlayButtonLeave(e){this.overlayButtonHovered=!1,this.currentHoveredBlock||this.messenger.send("craftile.preview.block-leave")}handleEditorSelectBlock(e){const t=document.querySelector(`[data-block="${e.blockId}"]`);t&&(this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock(),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}handleEditorDeselectBlock(){this.currentSelectedBlock=null,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}handleScroll(){this.active&&(this.currentSelectedBlock&&this.sendSelectedBlockPosition(),this.currentHoveredBlock&&this.sendHoveredBlockPosition())}setupGlobalEventListeners(){document.addEventListener("mouseover",this.handleGlobalHover.bind(this)),document.addEventListener("mouseout",this.handleGlobalLeave.bind(this)),document.addEventListener("click",this.handleGlobalClick.bind(this),{capture:!0})}handleGlobalHover(e){if(!this.active)return;const t=e.target.closest("[data-block]");t&&(e.stopPropagation(),this.currentHoveredBlock=t,this.sendHoveredBlockPosition())}handleGlobalLeave(e){!this.active||!e.target.closest("[data-block]")||this.overlayButtonHovered||(this.currentHoveredBlock=null,this.messenger.send("craftile.preview.block-leave"))}handleGlobalClick(e){if(this.messenger.send("craftile.preview.click"),!this.active)return;const t=e.target.closest("[data-block]");if(!t||!t.getAttribute("data-block"))return;this.currentSelectedBlock===t||(e.preventDefault(),e.stopImmediatePropagation(),this.currentSelectedBlock=t,this.sendSelectedBlockPosition(),this.trackSelectedBlock())}sendHoveredBlockPosition(){const e=this.computeElementPositioning(this.currentHoveredBlock);this.messenger.send("craftile.preview.block-hover",{blockRect:e.rect,parentRect:e.parentRect,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft,blockId:this.currentHoveredBlock.dataset.block,parentFlexDirection:e.parentFlexDirection})}sendSelectedBlockPosition(e=!1){if(!this.currentSelectedBlock)return;const t=this.computeElementPositioning(this.currentSelectedBlock);this.messenger.send(e?"craftile.preview.update-selected-block":"craftile.preview.block-select",{blockRect:t.rect,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,blockId:this.currentSelectedBlock.dataset.block})}trackSelectedBlock(){if(!this.currentSelectedBlock)return;this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.resizeObserver=new ResizeObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.resizeObserver.observe(this.currentSelectedBlock),this.mutationObserver=new MutationObserver(()=>{this.active&&this.currentSelectedBlock&&this.sendSelectedBlockPosition(!0)}),this.mutationObserver.observe(this.currentSelectedBlock,{attributes:!0,subtree:!1});let e=this.currentSelectedBlock.parentElement;for(;e&&(this.mutationObserver.observe(e,{childList:!0,subtree:!1}),e!==document.body);)e=e.parentElement}computeElementPositioning(e){const t=e.getBoundingClientRect(),n=window.pageYOffset||document.documentElement.scrollTop,i=window.pageXOffset||document.documentElement.scrollLeft,r=this.findEldestParentBlock(e),s=r&&r!==e?r.getBoundingClientRect():void 0,l=this.getElementFlexDirection(e.parentElement);return{rect:t,parentRect:s,scrollTop:n,scrollLeft:i,parentFlexDirection:l}}findEldestParentBlock(e){let t=null,n=e.parentElement;for(;n&&n!==document.body;)n.hasAttribute("data-block")&&(t=n),n=n.parentElement;return t}getElementFlexDirection(e){if(!e)return"column";const t=window.getComputedStyle(e),n=t.display.includes("flex")?t.flexDirection:"column";return n==="row"||n==="row-reverse"?"row":"column"}}class le extends se{constructor(){super(),v(this,"messenger"),v(this,"inspector"),this.messenger=re(window.origin),this.inspector=new oe(this.messenger),this.initialize()}initialize(){window.addEventListener("load",()=>{this.messenger.send("craftile.preview.ready",{}),setTimeout(()=>{this.sendPageData()},0)}),this.messenger.registerFallbackHandler(e=>{const{type:t,payload:n}=e;this.emit(t,n)})}sendPageData(){const e=document.getElementById("page-data");if(e)try{const t=JSON.parse(e.textContent||"{}");this.messenger.send("craftile.preview.page-data",{pageData:t})}catch(t){console.error("Failed to parse page data:",t)}}}var q=11;function ce(o,e){var t=e.attributes,n,i,r,s,l;if(!(e.nodeType===q||o.nodeType===q)){for(var h=t.length-1;h>=0;h--)n=t[h],i=n.name,r=n.namespaceURI,s=n.value,r?(i=n.localName||i,l=o.getAttributeNS(r,i),l!==s&&(n.prefix==="xmlns"&&(i=n.name),o.setAttributeNS(r,i,s))):(l=o.getAttribute(i),l!==s&&o.setAttribute(i,s));for(var u=o.attributes,m=u.length-1;m>=0;m--)n=u[m],i=n.name,r=n.namespaceURI,r?(i=n.localName||i,e.hasAttributeNS(r,i)||o.removeAttributeNS(r,i)):e.hasAttribute(i)||o.removeAttribute(i)}}var A,ae="http://www.w3.org/1999/xhtml",b=typeof document>"u"?void 0:document,de=!!b&&"content"in b.createElement("template"),he=!!b&&b.createRange&&"createContextualFragment"in b.createRange();function fe(o){var e=b.createElement("template");return e.innerHTML=o,e.content.childNodes[0]}function ue(o){A||(A=b.createRange(),A.selectNode(b.body));var e=A.createContextualFragment(o);return e.childNodes[0]}function me(o){var e=b.createElement("body");return e.innerHTML=o,e.childNodes[0]}function pe(o){return o=o.trim(),de?fe(o):he?ue(o):me(o)}function P(o,e){var t=o.nodeName,n=e.nodeName,i,r;return t===n?!0:(i=t.charCodeAt(0),r=n.charCodeAt(0),i<=90&&r>=97?t===n.toUpperCase():r<=90&&i>=97?n===t.toUpperCase():!1)}function ve(o,e){return!e||e===ae?b.createElement(o):b.createElementNS(e,o)}function ge(o,e){for(var t=o.firstChild;t;){var n=t.nextSibling;e.appendChild(t),t=n}return e}function _(o,e,t){o[t]!==e[t]&&(o[t]=e[t],o[t]?o.setAttribute(t,""):o.removeAttribute(t))}var X={OPTION:function(o,e){var t=o.parentNode;if(t){var n=t.nodeName.toUpperCase();n==="OPTGROUP"&&(t=t.parentNode,n=t&&t.nodeName.toUpperCase()),n==="SELECT"&&!t.hasAttribute("multiple")&&(o.hasAttribute("selected")&&!e.selected&&(o.setAttribute("selected","selected"),o.removeAttribute("selected")),t.selectedIndex=-1)}_(o,e,"selected")},INPUT:function(o,e){_(o,e,"checked"),_(o,e,"disabled"),o.value!==e.value&&(o.value=e.value),e.hasAttribute("value")||o.removeAttribute("value")},TEXTAREA:function(o,e){var t=e.value;o.value!==t&&(o.value=t);var n=o.firstChild;if(n){var i=n.nodeValue;if(i==t||!t&&i==o.placeholder)return;n.nodeValue=t}},SELECT:function(o,e){if(!e.hasAttribute("multiple")){for(var t=-1,n=0,i=o.firstChild,r,s;i;)if(s=i.nodeName&&i.nodeName.toUpperCase(),s==="OPTGROUP")r=i,i=r.firstChild,i||(i=r.nextSibling,r=null);else{if(s==="OPTION"){if(i.hasAttribute("selected")){t=n;break}n++}i=i.nextSibling,!i&&r&&(i=r.nextSibling,r=null)}o.selectedIndex=t}}},N=1,Y=11,J=3,Q=8;function k(){}function be(o){if(o)return o.getAttribute&&o.getAttribute("id")||o.id}function Ce(o){return function(t,n,i){if(i||(i={}),typeof n=="string")if(t.nodeName==="#document"||t.nodeName==="HTML"||t.nodeName==="BODY"){var r=n;n=b.createElement("html"),n.innerHTML=r}else n=pe(n);else n.nodeType===Y&&(n=n.firstElementChild);var s=i.getNodeKey||be,l=i.onBeforeNodeAdded||k,h=i.onNodeAdded||k,u=i.onBeforeElUpdated||k,m=i.onElUpdated||k,Se=i.onBeforeNodeDiscarded||k,L=i.onNodeDiscarded||k,Be=i.onBeforeElChildrenUpdated||k,we=i.skipFromChildren||k,Z=i.addChild||function(c,a){return c.appendChild(a)},z=i.childrenOnly===!0,O=Object.create(null),I=[];function H(c){I.push(c)}function ee(c,a){if(c.nodeType===N)for(var p=c.firstChild;p;){var d=void 0;a&&(d=s(p))?H(d):(L(p),p.firstChild&&ee(p,a)),p=p.nextSibling}}function M(c,a,p){Se(c)!==!1&&(a&&a.removeChild(c),L(c),ee(c,p))}function G(c){if(c.nodeType===N||c.nodeType===Y)for(var a=c.firstChild;a;){var p=s(a);p&&(O[p]=a),G(a),a=a.nextSibling}}G(t);function V(c){h(c);for(var a=c.firstChild;a;){var p=a.nextSibling,d=s(a);if(d){var f=O[d];f&&P(a,f)?(a.parentNode.replaceChild(f,a),D(f,a)):V(a)}else V(a);a=p}}function ye(c,a,p){for(;a;){var d=a.nextSibling;(p=s(a))?H(p):M(a,c,!0),a=d}}function D(c,a,p){var d=s(a);if(d&&delete O[d],!p){var f=u(c,a);if(f===!1||(f instanceof HTMLElement&&(c=f,G(c)),o(c,a),m(c),Be(c,a)===!1))return}c.nodeName!=="TEXTAREA"?Oe(c,a):X.TEXTAREA(c,a)}function Oe(c,a){var p=we(c,a),d=a.firstChild,f=c.firstChild,x,E,T,$,S;e:for(;d;){for($=d.nextSibling,x=s(d);!p&&f;){if(T=f.nextSibling,d.isSameNode&&d.isSameNode(f)){d=$,f=T;continue e}E=s(f);var F=f.nodeType,B=void 0;if(F===d.nodeType&&(F===N?(x?x!==E&&((S=O[x])?T===S?B=!1:(c.insertBefore(S,f),E?H(E):M(f,c,!0),f=S,E=s(f)):B=!1):E&&(B=!1),B=B!==!1&&P(f,d),B&&D(f,d)):(F===J||F==Q)&&(B=!0,f.nodeValue!==d.nodeValue&&(f.nodeValue=d.nodeValue))),B){d=$,f=T;continue e}E?H(E):M(f,c,!0),f=T}if(x&&(S=O[x])&&P(S,d))p||Z(c,S),D(S,d);else{var K=l(d);K!==!1&&(K&&(d=K),d.actualize&&(d=d.actualize(c.ownerDocument||b)),Z(c,d),V(d))}d=$,f=T}ye(c,f,E);var ne=X[c.nodeName];ne&&ne(c,a)}var g=t,R=g.nodeType,te=n.nodeType;if(!z){if(R===N)te===N?P(t,n)||(L(t),g=ge(t,ve(n.nodeName,n.namespaceURI))):g=n;else if(R===J||R===Q){if(te===R)return g.nodeValue!==n.nodeValue&&(g.nodeValue=n.nodeValue),g;g=n}}if(g===n)L(t);else{if(n.isSameNode&&n.isSameNode(g))return;if(D(g,n,z),I)for(var W=0,xe=I.length;W<xe;W++){var j=O[I[W]];j&&M(j,j.parentNode,!1)}}return!z&&g!==t&&t.parentNode&&(g.actualize&&(g=g.actualize(t.ownerDocument||b)),t.parentNode.replaceChild(g,t)),g}}var Ee=Ce(ce);const ke=o=>o.id||o.name;class U{constructor(e,t){w(this,"previewClient");w(this,"morphdomOptions");w(this,"elementCache",new Map);w(this,"regionCommentsCache",new Map);w(this,"childrenCommentsCache",new Map);w(this,"pendingScripts",new Set);w(this,"scriptExecutionCount",{total:0,completed:0,failed:0});this.previewClient=e||new le,this.morphdomOptions=t?.morphdom||{},this.previewClient.on("updates.effects",this.handleEffects.bind(this)),this.previewClient.on("craftile.editor.updates",this.handleDirectUpdates.bind(this)),this.cacheRegionComments(),this.cacheChildrenComments()}static init(e,t){return new U(e,t)}getElementCached(e){if(this.elementCache.has(e)){const n=this.elementCache.get(e);if(n.isConnected)return n;this.elementCache.delete(e)}const t=document.querySelector(`[data-block="${e}"]`);return t&&this.elementCache.set(e,t),t}cacheRegionComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN region: ")){const r=i.substring(14);n.set(r,t)}else if(i.startsWith("END region: ")){const r=i.substring(12),s=n.get(r);s&&(this.regionCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenComments(){const e=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);let t;const n=new Map;for(;t=e.nextNode();){const i=t.textContent?.trim();if(i){if(i.startsWith("BEGIN children: ")){const r=i.substring(16);n.set(r,t)}else if(i.startsWith("END children: ")){const r=i.substring(14),s=n.get(r);s&&(this.childrenCommentsCache.set(r,{begin:s,end:t}),n.delete(r))}}}}cacheChildrenCommentsForBlock(e){const t=this.getElementCached(e);if(!t)return;this.childrenCommentsCache.delete(e);const n=document.createTreeWalker(t,NodeFilter.SHOW_COMMENT,null);let i,r=null;for(;i=n.nextNode();){const s=i.textContent?.trim();if(s){if(s===`BEGIN children: ${e}`)r=i;else if(s===`END children: ${e}`&&r){this.childrenCommentsCache.set(e,{begin:r,end:i});break}}}}invalidateCache(e){[...e.updated,...e.removed].forEach(t=>{this.elementCache.delete(t),this.childrenCommentsCache.delete(t)})}handleEffects(e){const{effects:t,blocks:n,regions:i,changes:r}=e;t&&(this.invalidateCache(r),t.html&&this.handleHtmlEffects(t.html,{blocks:n,regions:i,changes:r}),t.css&&this.handleCssEffects(t.css),t.js&&this.handleJsEffects(t.js))}handleCssEffects(e){for(const t of e)this.injectStyleElement(t)}injectStyleElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="STYLE"&&n.tagName!=="LINK"){console.warn("Invalid CSS element provided:",e);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&(r.tagName==="STYLE"||r.tagName==="LINK")){r.parentNode?.replaceChild(n,r);return}}if(n.tagName==="STYLE"&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("style:not([id])");for(const l of s)if(l.textContent?.trim()===r)return}}if(n.tagName==="LINK"&&!i){const r=n.getAttribute("href"),s=n.getAttribute("rel");if(r){const l=document.querySelectorAll("link:not([id])");for(const h of l)if(h.getAttribute("href")===r&&h.getAttribute("rel")===s)return}}document.head.appendChild(n)}handleJsEffects(e){this.pendingScripts.clear(),this.scriptExecutionCount={total:0,completed:0,failed:0};const t=e.filter(n=>n?.trim());if(this.scriptExecutionCount.total=t.length,t.length===0){this.emitScriptExecutionComplete();return}for(const n of t)this.injectScriptElement(n)}injectScriptElement(e){const t=document.createElement("div");t.innerHTML=e;const n=t.firstElementChild;if(!n||n.tagName!=="SCRIPT"){console.warn("Invalid script element provided:",e),this.onScriptCompleted(!1);return}const i=n.id;if(i){const r=document.getElementById(i);if(r&&r.tagName==="SCRIPT"){this.pendingScripts.delete(r),r.parentNode?.replaceChild(n,r),this.trackScriptExecution(n);return}}if(!n.src&&!i){const r=n.textContent?.trim();if(r){const s=document.querySelectorAll("script:not([src]):not([id])");for(const l of s)if(l.textContent?.trim()===r){this.onScriptCompleted(!0);return}}}if(n.src&&!i){const r=n.src,s=document.querySelectorAll("script[src]:not([id])");for(const l of s)if(l.src===r){this.onScriptCompleted(!0);return}}document.head.appendChild(n),this.trackScriptExecution(n)}trackScriptExecution(e){if(e.src){this.pendingScripts.add(e);const t=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!0),e.removeEventListener("load",t),e.removeEventListener("error",n)},n=()=>{this.pendingScripts.delete(e),this.onScriptCompleted(!1),e.removeEventListener("load",t),e.removeEventListener("error",n)};e.addEventListener("load",t),e.addEventListener("error",n)}else this.onScriptCompleted(!0)}onScriptCompleted(e){e?this.scriptExecutionCount.completed++:this.scriptExecutionCount.failed++,this.scriptExecutionCount.completed+this.scriptExecutionCount.failed>=this.scriptExecutionCount.total&&this.emitScriptExecutionComplete()}emitScriptExecutionComplete(){this.previewClient.emit("scripts.execution.complete",{total:this.scriptExecutionCount.total,completed:this.scriptExecutionCount.completed,failed:this.scriptExecutionCount.failed,success:this.scriptExecutionCount.failed===0})}handleDirectUpdates(e){const{changes:t}=e;t.moved&&this.handleMoves(e),t.updated.length>0&&this.handleDisabledBlocks(e),t.removed.length>0&&this.handleRemoves(e)}handleMoves(e){const{blocks:t,changes:n}=e;for(const[i,r]of Object.entries(e.changes.moved)){if(r?.toParent&&n.updated?.includes(r?.toParent))continue;if(!this.isValidMoveInstruction(r)){console.warn(`Invalid move instruction for block ${i}:`,r);continue}const s=t[i];this.moveBlockUsingDOM(s,r)}}handleDisabledBlocks(e){const{blocks:t,changes:n}=e;for(const i of n.updated){const r=t[i];if(!r)continue;const l=!!this.getElementCached(i);r.disabled&&l?this.removeBlock(r.id):r.disabled}}handleRemoves(e){const{changes:t}=e;for(const n of t.removed)this.removeBlock(n)}handleHtmlEffects(e,t){const{blocks:n,regions:i}=t;for(const[r,s]of Object.entries(e)){if(!s)continue;const l=n[r];if(!l){console.warn(`Block data not found for ${r}`);continue}if(l.disabled){console.debug(`Skipping disabled block ${r}`);continue}if(!!this.getElementCached(r))this.updateBlockHtml(l,s);else{const m=this.calculatePosition(l,i,n);this.insertBlock(l,s,m)}}}isValidMoveInstruction(e){const t=!!(e.toParent||e.toRegion),n=e.toIndex===void 0||e.toIndex>=0;return t&&n}removeBlock(e){const t=this.getElementCached(e);t?(this.previewClient.emit("block.remove.before",{blockId:e,element:t}),t.remove(),this.elementCache.delete(e),this.previewClient.emit("block.remove.after",{blockId:e,element:t})):console.warn(`Block ${e} not found for removal`)}moveBlockUsingDOM(e,t){const n=this.getElementCached(e.id),{toParent:i,toRegion:r,toIndex:s}=t;if(!n){console.warn(`Block element ${e.id} not found for move operation`);return}if(this.previewClient.emit("block.move.before",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s}),i){const l=this.getElementCached(i);if(!l){console.error(`Parent element ${i} not found for move operation`);return}this.insertElementInContainer(n,l,e.id,s)}else if(r){const l=this.findRegionInsertionPoint(r,s,void 0,void 0,e.id);if(!l){console.error(`Failed to find insertion point for region: ${r}`);return}l.parent.insertBefore(n,l.before)}this.previewClient.emit("block.move.after",{blockId:e.id,blockType:e.type,block:e,element:n,toParent:i,toRegion:r,toIndex:s})}insertElementInContainer(e,t,n,i){const r=t.getAttribute("data-block"),s=r?this.childrenCommentsCache.get(r):null;if(s){const l=this.findPositionBetweenComments(s.begin,s.end,i,n);l.parent.insertBefore(e,l.before)}else{const h=Array.from(t.children).filter(m=>m.getAttribute("data-block")!==n),u=i!==void 0&&i<h.length?h[i]:null;t.insertBefore(e,u)}}insertBlock(e,t,n){if(this.getElementCached(e.id))return;this.previewClient.emit("block.insert.before",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n});const i=this.parseHtmlElement(t,e.id);if(!i)return;const{parentId:r,regionId:s,position:l,afterId:h,beforeId:u}=n;if(r){const m=this.getElementCached(r);if(!m){console.error(`Parent element ${r} not found for block ${e.id}`);return}this.insertElementByPosition(i,m,l,h,u)}else if(s){const m=this.findRegionInsertionPoint(s,l,h,u);if(!m){console.error(`Failed to find insertion point for region: ${s}`);return}m.parent.insertBefore(i,m.before)}else console.warn(`No parent or region specified for block ${e.id}, inserting into body`),document.body.appendChild(i);this.elementCache.set(e.id,i),this.cacheChildrenCommentsForBlock(e.id),i.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),this.previewClient.emit("block.insert.after",{blockId:e.id,blockType:e.type,block:e,html:t,positionInfo:n})}updateBlockHtml(e,t){if(!t){console.warn(`No HTML provided for block ${e.id}`);return}const n=this.getElementCached(e.id);if(!n){console.warn(`Block element ${e.id} not found for HTML update`);return}this.previewClient.emit("block.update.before",{blockId:e.id,blockType:e.type,block:e,element:n,html:t}),Ee(n,t,this.morphdomOptions),this.elementCache.delete(e.id);const i=this.getElementCached(e.id);if(!i){console.error(`Block element ${e.id} not found after morphdom update`);return}i!==n&&this.previewClient.inspector.updateTrackedElement(e.id,i),this.cacheChildrenCommentsForBlock(e.id),this.previewClient.emit("block.update.after",{blockId:e.id,blockType:e.type,block:e,element:i,html:t})}insertElementByPosition(e,t,n,i,r){const s=t.getAttribute("data-block"),l=s?this.childrenCommentsCache.get(s):null;if(l){let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&u.nextSibling&&(h=u.nextSibling)}else if(typeof n=="number"){const u=this.findPositionBetweenComments(l.begin,l.end,n);l.begin.parentNode.insertBefore(e,u.before);return}h||(h=l.end),l.begin.parentNode.insertBefore(e,h)}else{let h=null;if(r)h=this.getElementCached(r);else if(i){const u=this.getElementCached(i);u&&(h=u.nextElementSibling)}else typeof n=="number"&&(h=Array.from(t.children)[n]||null);t.insertBefore(e,h)}}findRegionInsertionPoint(e,t,n,i,r){const s=this.regionCommentsCache.get(e);if(!s)return console.error(`Region comments not found for region: ${e}`),null;const{begin:l,end:h}=s;let u=null;if(i){const m=this.getElementCached(i);m&&(u=m)}else if(n){const m=this.getElementCached(n);m&&m.nextSibling&&(u=m.nextSibling)}else typeof t=="number"&&(u=this.findPositionInRegion(l,h,t,r));return u||(u=h),{parent:l.parentNode,before:u}}findPositionInRegion(e,t,n,i){const r=[];let s=e.nextSibling;for(;s&&s!==t;){if(s.nodeType===Node.ELEMENT_NODE&&s.hasAttribute("data-block")){const l=s.getAttribute("data-block");(!i||l!==i)&&r.push(s)}s=s.nextSibling}return n<r.length?r[n]:null}findPositionBetweenComments(e,t,n,i){let r=null;if(typeof n=="number"){const s=[];let l=e.nextSibling;for(;l&&l!==t;){if(l.nodeType===Node.ELEMENT_NODE&&l.hasAttribute("data-block")){const h=l.getAttribute("data-block");(!i||h!==i)&&s.push(l)}l=l.nextSibling}r=n<s.length?s[n]:null}return r||(r=t),{parent:e.parentNode,before:r}}calculatePosition(e,t,n){if(e.parentId){const i=n[e.parentId];i||console.warn(`Block data not found for block ${e.id}`);const r=i.children.indexOf(e.id);if(r===-1)return console.warn(`Block ${e.id} not found in parent ${e.parentId} children`),{parentId:e.parentId};const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.children,r,n);return{parentId:e.parentId,position:r,afterId:s,beforeId:l}}else{for(const i of t){const r=i.blocks.indexOf(e.id);if(r!==-1){const{afterId:s,beforeId:l}=this.findAdjacentSiblings(i.blocks,r,n);return{regionId:ke(i),position:r,afterId:s,beforeId:l}}}return{}}}findAdjacentSiblings(e,t,n){let i,r;for(let s=t-1;s>=0;s--){const l=n[e[s]];if(l&&!l.disabled){i=e[s];break}}for(let s=t+1;s<e.length;s++){const l=n[e[s]];if(l&&!l.disabled){r=e[s];break}}return{afterId:i,beforeId:r}}parseHtmlElement(e,t){if(!e.trim())return console.error(`Empty HTML provided for block ${t}`),null;const n=document.createElement("div");n.innerHTML=e;const i=n.firstElementChild;return i||(console.error(`Invalid HTML for block ${t}: no element found`),null)}}return U})();\n', S = (c) => c.id || c.name, B = (c = {}) => ({ editor: a }) => {
2
+ const d = /* @__PURE__ */ new Map();
3
+ a.events.on("updates", b), f();
4
4
  function u(e) {
5
5
  return `data-block="${e}"`;
6
6
  }
7
7
  function f() {
8
- c.preview.loadFromHtml(m(c.engine.getPage()));
8
+ a.preview.loadFromHtml(m(a.engine.getPage()));
9
9
  }
10
10
  function h(e, r) {
11
11
  if (e.ghost === !0)
12
12
  return "";
13
13
  const s = `${e.id}:${JSON.stringify(e.properties)}:${e.children.join(",")}`;
14
- if (a.has(s))
15
- return a.get(s);
14
+ if (d.has(s))
15
+ return d.get(s);
16
16
  let l;
17
- if (d.blockRenderers?.[e.type])
18
- l = d.blockRenderers[e.type];
17
+ if (c.blockRenderers?.[e.type])
18
+ l = c.blockRenderers[e.type];
19
19
  else {
20
- const t = c.engine.getBlockSchema(e.type);
20
+ const t = a.engine.getBlockSchema(e.type);
21
21
  l = typeof t?.meta?.render == "function" ? t.meta.render : ({ block: k, editorAttributes: C }) => `<div ${C}><em>Unknown block type: ${k.type}</em></div>`;
22
22
  }
23
- const o = Array.isArray(e.children) ? e.children.map((t) => h(r[t], r)).join("") : "", n = u(e.id);
24
- let i;
23
+ const o = Array.isArray(e.children) ? e.children.map((t) => h(r[t], r)).join("") : "", i = u(e.id);
24
+ let n;
25
25
  try {
26
- i = l({ id: e.id, props: e.properties, block: e, editorAttributes: n, children: o });
26
+ n = l({ id: e.id, props: e.properties, block: e, editorAttributes: i, children: o });
27
27
  } catch (t) {
28
- console.warn(`Render error for block ${e.id}:`, t), i = `<div ${n} class="render-error">
28
+ console.warn(`Render error for block ${e.id}:`, t), n = `<div ${i} class="render-error">
29
29
  <em>⚠️ Render Error: ${t instanceof Error ? t.message : "Unknown error"}</em>
30
30
  </div>`;
31
31
  }
32
- return a.set(s, i), i;
32
+ return d.set(s, n), n;
33
33
  }
34
34
  function m(e) {
35
35
  const r = (e.regions ?? []).map((o) => {
36
- const n = o.blocks.map((i) => h(e.blocks[i], e.blocks)).join(`
37
- `);
38
- return `<!--BEGIN region: ${o.name}-->
39
- ${n}
40
- <!--END region: ${o.name}-->`;
36
+ const i = o.blocks.map((t) => h(e.blocks[t], e.blocks)).join(`
37
+ `), n = S(o);
38
+ return `<!--BEGIN region: ${n}-->
39
+ ${i}
40
+ <!--END region: ${n}-->`;
41
41
  }).join(`
42
- `), s = (d.styles || []).map((o) => ` <link rel="stylesheet" href="${o}" />`).join(`
43
- `), l = (d.scripts || []).map((o) => `<script src="${o}"><\/script>`).join(`
42
+ `), s = (c.styles || []).map((o) => ` <link rel="stylesheet" href="${o}" />`).join(`
43
+ `), l = (c.scripts || []).map((o) => `<script src="${o}"><\/script>`).join(`
44
44
  `);
45
45
  return `
46
46
  <!DOCTYPE html>
@@ -69,24 +69,24 @@ window.HtmlPreviewClient.init();
69
69
  if (!p(e))
70
70
  return;
71
71
  const r = v(e);
72
- c.preview.sendMessage("updates.effects", { ...e, effects: r });
72
+ a.preview.sendMessage("updates.effects", { ...e, effects: r });
73
73
  }
74
74
  function v(e) {
75
75
  const r = [...e.changes.added, ...e.changes.updated];
76
76
  if (r.length === 0)
77
77
  return { html: {} };
78
- const s = c.engine.getPage().blocks, l = {
78
+ const s = a.engine.getPage().blocks, l = {
79
79
  html: {}
80
80
  };
81
- e.changes.removed.forEach((n) => {
82
- g(n);
81
+ e.changes.removed.forEach((i) => {
82
+ g(i);
83
83
  });
84
84
  const o = /* @__PURE__ */ new Set();
85
- return r.forEach((n) => {
86
- const i = s[n];
87
- if (i) {
88
- l.html[n] = h(i, s);
89
- let t = i;
85
+ return r.forEach((i) => {
86
+ const n = s[i];
87
+ if (n) {
88
+ l.html[i] = h(n, s);
89
+ let t = n;
90
90
  for (; t; ) {
91
91
  if (t.repeated && t.parentId) {
92
92
  o.add(t.parentId);
@@ -95,16 +95,16 @@ window.HtmlPreviewClient.init();
95
95
  t = t.parentId ? s[t.parentId] : void 0;
96
96
  }
97
97
  }
98
- }), o.forEach((n) => {
99
- const i = e.blocks[n];
100
- i && !l.html[n] && (l.html[n] = h(i, s));
98
+ }), o.forEach((i) => {
99
+ const n = e.blocks[i];
100
+ n && !l.html[i] && (l.html[i] = h(n, s));
101
101
  }), l;
102
102
  }
103
103
  function g(e) {
104
- for (const r of a.keys())
105
- r.startsWith(`${e}:`) && a.delete(r);
104
+ for (const r of d.keys())
105
+ r.startsWith(`${e}:`) && d.delete(r);
106
106
  }
107
107
  };
108
108
  export {
109
- S as default
109
+ B as default
110
110
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@craftile/plugin-static-blocks-renderer",
3
- "version": "0.11.0",
3
+ "version": "1.0.1",
4
4
  "description": "Craftile plugin for static HTML block rendering",
5
5
  "keywords": [
6
6
  "craftile",
@@ -35,10 +35,10 @@
35
35
  "typescript": "~5.8.3",
36
36
  "vite": "^7.0.0",
37
37
  "vite-plugin-dts": "^4.5.4",
38
- "@craftile/core": "0.11.0",
39
- "@craftile/editor": "0.11.0",
40
- "@craftile/preview-client-html": "0.11.0",
41
- "@craftile/types": "0.11.0"
38
+ "@craftile/core": "1.0.1",
39
+ "@craftile/editor": "1.0.1",
40
+ "@craftile/preview-client-html": "1.0.1",
41
+ "@craftile/types": "1.0.1"
42
42
  },
43
43
  "repository": {
44
44
  "type": "git",