pagiera 0.2.0-alpha.54 → 0.2.0-alpha.55

package/dist/full-editor.js

@@ -6366,7 +6366,7 @@ function mountMarquees(root) {
 }
 
 // src/internal/lib/render/marquee-runtime.tsx
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useSyncExternalStore } from "react";
 
 // src/internal/lib/render/disclosure.ts
 function mountDisclosures(root) {
@@ -6441,6 +6441,29 @@ function mountDisclosures(root) {
 
 // src/internal/lib/render/marquee-runtime.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
+var noSubscription = () => () => {
+};
+function PageScript({ name, code, page }) {
+  const fromServer = useSyncExternalStore(noSubscription, () => false, () => true);
+  useEffect4(() => {
+    const host = window;
+    const ran = host.__pgRan ?? (host.__pgRan = {});
+    if (ran[name] === page) return;
+    ran[name] = page;
+    try {
+      new Function(code)();
+    } catch (error) {
+      console.error(error);
+    }
+  }, [code, name, page]);
+  if (!fromServer) return null;
+  return /* @__PURE__ */ jsx10(
+    "script",
+    {
+      dangerouslySetInnerHTML: { __html: `(window.__pgRan=window.__pgRan||{})[${JSON.stringify(name)}]=${JSON.stringify(page)};${code}` }
+    }
+  );
+}
 function MarqueeRuntime({ children, enabled }) {
   const root = useRef2(null);
   useEffect4(() => {
@@ -6733,7 +6756,7 @@ function stylesheetFor(elements, rootStyle) {
     // element selector and leak the editor's typeface into the site.
     // The shell spans the viewport; the content width is applied by each
     // band's inner box, so section backgrounds reach both edges.
-    `.pg-root{font-family:${resolveFont(rootStyle.fontFamily)}}.pg-node{box-sizing:border-box}.pg-component-root{background:transparent!important;background-image:none!important;border-width:0!important;box-shadow:none!important;overflow:visible!important}.pg-node:where(input,textarea,button){font:inherit}.pg-node:where(button){appearance:none;background-color:transparent;border-width:0;color:inherit;text-align:inherit}.pg-node:is(input,textarea){outline:none}.pg-node:is(select){outline:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%271.6%27><path d=%27M4 6.5 8 10.5 12 6.5%27/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}.pg-node[role=radiogroup]{display:flex;flex-direction:column;gap:8px}.pg-choice{display:flex;align-items:center;gap:8px;cursor:pointer}.pg-choice input{accent-color:currentColor;margin:0}.pg-node:is(input[type=checkbox],input[type=radio]){accent-color:currentColor}.pg-node:is(textarea){resize:none}.pg-form-status:empty{display:none}.pg-form-status{font-size:12px;line-height:1.4}.pg-node[data-pg-state=success] .pg-form-status{color:#22c55e}.pg-node[data-pg-state=error] .pg-form-status{color:#ef4444}.pg-node img{display:block;width:100%;height:100%}.pg-node:is(ul,ol){list-style:none}.pg-list{counter-reset:pg-list}.pg-list>li{position:relative}.pg-list-bullet>li::before{content:'\\2022';position:absolute;left:-1em;opacity:.65}.pg-list-number>li::before{counter-increment:pg-list;content:counter(pg-list) '.';position:absolute;left:-1.6em;opacity:.65;font-variant-numeric:tabular-nums}.pg-node hr{border:0;width:100%;height:100%}.pg-node iframe{display:block;width:100%;height:100%;border:0}.pg-svg-glyph>svg{display:block;width:100%;height:100%}.pg-md{width:100%}.pg-md>*{margin:0}.pg-md>*+*{margin-top:1em}.pg-md h1,.pg-md h2,.pg-md h3,.pg-md h4,.pg-md h5,.pg-md h6{font-weight:600;line-height:1.25;margin-top:1.6em;text-wrap:balance}.pg-md h1{font-size:1.9em}.pg-md h2{font-size:1.55em}.pg-md h3{font-size:1.25em}.pg-md h4{font-size:1.1em}.pg-md :is(ul,ol){padding-left:1.4em}.pg-md ul{list-style:disc}.pg-md ol{list-style:decimal}.pg-md li+li{margin-top:.35em}.pg-md a{color:inherit;text-decoration:underline;text-underline-offset:2px}.pg-md img{max-width:100%;height:auto;border-radius:inherit}.pg-md blockquote{border-left:3px solid currentColor;padding-left:1em;opacity:.85}.pg-md :is(code,pre){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.pg-md pre{overflow-x:auto;padding:1em;border-radius:.5em;background:rgba(127,127,127,.12)}.pg-md pre code{background:none;padding:0}.pg-md code{background:rgba(127,127,127,.15);border-radius:.3em;padding:.1em .35em}.pg-md table{width:100%;border-collapse:collapse}.pg-md :is(th,td){border:1px solid rgba(127,127,127,.35);padding:.45em .7em;text-align:left}.pg-md hr{border:0;border-top:1px solid rgba(127,127,127,.35);margin:2em 0}.pg-link{text-decoration:none;color:inherit}`
+    `.pg-root{font-family:${resolveFont(rootStyle.fontFamily)}}.pg-node{box-sizing:border-box}.pg-component-root{background:transparent!important;background-image:none!important;border-width:0!important;box-shadow:none!important;overflow:visible!important}.pg-node:where(input,textarea,button){font:inherit}.pg-node:where(button){appearance:none;background-color:transparent;border-width:0;color:inherit;text-align:inherit}.pg-node:is(input,textarea){outline:none}.pg-node:is(select){outline:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%271.6%27><path d=%27M4 6.5 8 10.5 12 6.5%27/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}.pg-node[role=radiogroup]{display:flex;flex-direction:column;gap:8px}.pg-choice{display:flex;align-items:center;gap:8px;cursor:pointer}.pg-choice input{accent-color:currentColor;margin:0}.pg-node:is(input[type=checkbox],input[type=radio]){accent-color:currentColor}.pg-node:is(textarea){resize:none}.pg-form-status:empty{display:none}.pg-form-status{font-size:12px;line-height:1.4}.pg-node[data-pg-state=success] .pg-form-status{color:#22c55e}.pg-node[data-pg-state=error] .pg-form-status{color:#ef4444}.pg-node img{display:block;width:100%;height:100%}.pg-node:is(ul,ol){list-style:none}.pg-list{counter-reset:pg-list}.pg-list>li{position:relative}.pg-list-bullet>li::before{content:'\\2022';position:absolute;left:-1em;opacity:.65}.pg-list-number>li::before{counter-increment:pg-list;content:counter(pg-list) '.';position:absolute;left:-1.6em;opacity:.65;font-variant-numeric:tabular-nums}.pg-node hr{border:0;width:100%;height:100%}.pg-node iframe{display:block;width:100%;height:100%;border:0}.pg-svg-glyph>svg{display:block;width:100%;height:100%}.pg-md{width:100%}.pg-md>*{margin:0}.pg-md>*+*{margin-top:1em}.pg-md h1,.pg-md h2,.pg-md h3,.pg-md h4,.pg-md h5,.pg-md h6{font-weight:600;line-height:1.25;margin-top:1.6em;text-wrap:balance}.pg-md h1{font-size:1.9em}.pg-md h2{font-size:1.55em}.pg-md h3{font-size:1.25em}.pg-md h4{font-size:1.1em}.pg-md :is(ul,ol){padding-left:1.4em}.pg-md ul{list-style:disc}.pg-md ol{list-style:decimal}.pg-md li+li{margin-top:.35em}.pg-md a{color:inherit;text-decoration:underline;text-underline-offset:2px}.pg-md img{max-width:100%;height:auto;border-radius:inherit}.pg-md blockquote{border-left:3px solid currentColor;padding-left:1em;opacity:.85}.pg-md :is(code,pre){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.pg-md pre{overflow-x:auto;padding:1em;border-radius:.5em;background:rgba(127,127,127,.12)}.pg-md pre code{background:none;padding:0}.pg-md code{background:rgba(127,127,127,.15);border-radius:.3em;padding:.1em .35em}.pg-md table{width:100%;border-collapse:collapse}.pg-md :is(th,td){border:1px solid rgba(127,127,127,.35);padding:.45em .7em;text-align:left}.pg-md hr{border:0;border-top:1px solid rgba(127,127,127,.35);margin:2em 0}.pg-node[data-pg-target]{cursor:pointer}.pg-link{text-decoration:none;color:inherit}`
   );
   for (const element of elements) {
     parts.push(fieldAppearanceCss(`.${classFor(element.id)}`, element.fieldAppearance, element.type === "Select"));
@@ -8390,6 +8413,11 @@ function RenderedPage({
   const elements = all.filter(
     (element) => !parked.has(element.id) && element.componentRole !== "master"
   );
+  let signature = 5381;
+  for (const element of elements) {
+    for (let index = 0; index < element.id.length; index++) signature = (signature << 5) + signature + element.id.charCodeAt(index) | 0;
+  }
+  const pageKey = `${elements.length}:${signature}`;
   return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx12(
       "style",
@@ -8409,25 +8437,15 @@ function RenderedPage({
       },
       el.id
     )) }),
-    includeScripts && hasEntrances(elements) && /* @__PURE__ */ jsx12(
-      "script",
-      {
-        dangerouslySetInnerHTML: { __html: ENTRANCE_SCRIPT }
-      }
-    ),
-    includeScripts && elements.some((element) => element.draggable) && /* @__PURE__ */ jsx12("script", { dangerouslySetInnerHTML: { __html: DRAG_SCRIPT } }),
-    includeScripts && elements.some((element) => element.interaction && ["toggle-layer", "show-layer", "hide-layer"].includes(element.interaction.action)) && /* @__PURE__ */ jsx12("script", { dangerouslySetInnerHTML: { __html: ACTION_SCRIPT } }),
-    includeScripts && elements.some((element) => element.type === "Form" && element.formSubmitMode !== "native") && /* @__PURE__ */ jsx12("script", { dangerouslySetInnerHTML: { __html: FORM_SCRIPT } }),
+    includeScripts && hasEntrances(elements) && /* @__PURE__ */ jsx12(PageScript, { name: "entrance", code: ENTRANCE_SCRIPT, page: pageKey }),
+    includeScripts && elements.some((element) => element.draggable) && /* @__PURE__ */ jsx12(PageScript, { name: "drag", code: DRAG_SCRIPT, page: pageKey }),
+    includeScripts && elements.some((element) => element.interaction && ["toggle-layer", "show-layer", "hide-layer"].includes(element.interaction.action)) && /* @__PURE__ */ jsx12(PageScript, { name: "action", code: ACTION_SCRIPT, page: pageKey }),
+    includeScripts && elements.some((element) => element.type === "Form" && element.formSubmitMode !== "native") && /* @__PURE__ */ jsx12(PageScript, { name: "form", code: FORM_SCRIPT, page: pageKey }),
     includeScripts && elements.some((element) => {
       const pinned = resolveStyle(element, baseId, cascade);
       return pinned.position === "fixed" && pinned.pinAfter > 0;
-    }) && /* @__PURE__ */ jsx12("script", { dangerouslySetInnerHTML: { __html: PIN_SCRIPT } }),
-    includeScripts && rootStyle.customJs && /* @__PURE__ */ jsx12(
-      "script",
-      {
-        dangerouslySetInnerHTML: { __html: rootStyle.customJs }
-      }
-    )
+    }) && /* @__PURE__ */ jsx12(PageScript, { name: "pin", code: PIN_SCRIPT, page: pageKey }),
+    includeScripts && rootStyle.customJs && /* @__PURE__ */ jsx12(PageScript, { name: "custom", code: rootStyle.customJs, page: pageKey })
   ] });
 }
 function RenderedNode({
@@ -8721,9 +8739,9 @@ function semanticTag(element) {
   if (element.type === "Section") return "section";
   return "div";
 }
-var DRAG_SCRIPT = `(function(){document.querySelectorAll('[data-pg-drag]').forEach(function(n){n.style.touchAction='none';n.style.cursor='grab';n.addEventListener('pointerdown',function(e){if(e.button!==0)return;e.preventDefault();var sx=e.clientX,sy=e.clientY,ox=Number(n.dataset.dx||0),oy=Number(n.dataset.dy||0);n.setPointerCapture(e.pointerId);n.style.cursor='grabbing';var move=function(p){var x=ox+p.clientX-sx,y=oy+p.clientY-sy;n.dataset.dx=String(x);n.dataset.dy=String(y);n.style.translate=x+'px '+y+'px'};var up=function(){n.style.cursor='grab';n.removeEventListener('pointermove',move);n.removeEventListener('pointerup',up)};n.addEventListener('pointermove',move);n.addEventListener('pointerup',up)})})})();`;
-var PIN_SCRIPT = `(function(){var nodes=document.querySelectorAll('[data-pg-pin-after]');if(!nodes.length)return;document.documentElement.classList.add('pg-pin-ready');var sync=function(){for(var i=0;i<nodes.length;i++)nodes[i].classList.toggle('pg-pin-in',window.scrollY>Number(nodes[i].dataset.pgPinAfter))};sync();addEventListener('scroll',sync,{passive:true})})();`;
-var ACTION_SCRIPT = `(function(){document.querySelectorAll('[data-pg-target]').forEach(function(trigger){trigger.style.cursor='pointer';trigger.addEventListener('click',function(event){var target=document.getElementById(trigger.dataset.pgTarget);if(!target)return;event.preventDefault();var action=trigger.dataset.pgAction;var open=target.dataset.pgOpen==='true';var next=action==='show-layer'?true:action==='hide-layer'?false:!open;target.dataset.pgOpen=next?'true':'false';target.style.setProperty('display',next?(target.dataset.pgDisplay||'flex'):'none','important');trigger.setAttribute('aria-expanded',String(next));target.setAttribute('aria-hidden',String(!next))})})})();`;
+var DRAG_SCRIPT = `(function(){document.querySelectorAll('[data-pg-drag]').forEach(function(n){if(n.__pgDrag)return;n.__pgDrag=true;n.style.touchAction='none';n.style.cursor='grab';n.addEventListener('pointerdown',function(e){if(e.button!==0)return;e.preventDefault();var sx=e.clientX,sy=e.clientY,ox=Number(n.dataset.dx||0),oy=Number(n.dataset.dy||0);n.setPointerCapture(e.pointerId);n.style.cursor='grabbing';var move=function(p){var x=ox+p.clientX-sx,y=oy+p.clientY-sy;n.dataset.dx=String(x);n.dataset.dy=String(y);n.style.translate=x+'px '+y+'px'};var up=function(){n.style.cursor='grab';n.removeEventListener('pointermove',move);n.removeEventListener('pointerup',up)};n.addEventListener('pointermove',move);n.addEventListener('pointerup',up)})})})();`;
+var PIN_SCRIPT = `(function(){var sync=function(){var nodes=document.querySelectorAll('[data-pg-pin-after]');for(var i=0;i<nodes.length;i++)nodes[i].classList.toggle('pg-pin-in',window.scrollY>Number(nodes[i].dataset.pgPinAfter))};if(!document.querySelector('[data-pg-pin-after]'))return;document.documentElement.classList.add('pg-pin-ready');sync();if(window.__pgPin)return;window.__pgPin=true;addEventListener('scroll',sync,{passive:true})})();`;
+var ACTION_SCRIPT = `(function(){document.querySelectorAll('[data-pg-target]').forEach(function(trigger){if(trigger.__pgBound)return;trigger.__pgBound=true;trigger.addEventListener('click',function(event){var target=document.getElementById(trigger.dataset.pgTarget);if(!target)return;event.preventDefault();var action=trigger.dataset.pgAction;var open=target.dataset.pgOpen==='true';var next=action==='show-layer'?true:action==='hide-layer'?false:!open;target.dataset.pgOpen=next?'true':'false';target.style.setProperty('display',next?(target.dataset.pgDisplay||'flex'):'none','important');trigger.setAttribute('aria-expanded',String(next));target.setAttribute('aria-hidden',String(!next))})})})();`;
 var FORM_SCRIPT = `(function(){function headers(raw){var out={};String(raw||'').split(/\\r?\\n/).forEach(function(line){var at=line.indexOf(':');if(at>0)out[line.slice(0,at).trim()]=line.slice(at+1).trim()});return out}function fields(data){var out={};data.forEach(function(value,key){var next=value instanceof File?value.name:String(value);if(out[key]===undefined)out[key]=next;else if(Array.isArray(out[key]))out[key].push(next);else out[key]=[out[key],next]});return out}function tokens(value,map){return String(value||'').replace(/{{\\s*form\\.([A-Za-z0-9_.-]+)\\s*}}/g,function(_,key){var found=map[key];return found==null?'':Array.isArray(found)?found.join(','):String(found)})}document.querySelectorAll('form[data-pg-form-mode="request"]').forEach(function(form){if(form.dataset.pgFormBound)return;form.dataset.pgFormBound='true';form.addEventListener('submit',async function(event){event.preventDefault();var status=form.querySelector('[data-pg-form-status]');var submit=form.querySelector('[type="submit"]');var data=new FormData(form),map=fields(data),method=form.dataset.pgFormMethod||'POST',kind=form.dataset.pgFormContent||'json',url=form.getAttribute('action')||location.href,custom=tokens(form.dataset.pgFormBody,map),requestHeaders=headers(tokens(form.dataset.pgFormHeaders,map)),options={method:method,headers:requestHeaders};if(method==='GET'){var query=new URLSearchParams(custom||Object.entries(map).flatMap(function(pair){return Array.isArray(pair[1])?pair[1].map(function(value){return [pair[0],value]}):[[pair[0],pair[1]]] }));var target=new URL(url,location.href);query.forEach(function(value,key){target.searchParams.append(key,value)});url=target.href}else if(kind==='form-data'){if(custom){try{var parsed=JSON.parse(custom);Object.keys(parsed).forEach(function(key){data.set(key,String(parsed[key]))})}catch(_){data.set('_body',custom)}}options.body=data}else if(kind==='urlencoded'){options.body=custom||new URLSearchParams(Object.entries(map).flatMap(function(pair){return Array.isArray(pair[1])?pair[1].map(function(value){return [pair[0],value]}):[[pair[0],pair[1]]] })).toString();if(!requestHeaders['Content-Type'])requestHeaders['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'}else{options.body=custom||JSON.stringify(map);if(!requestHeaders['Content-Type'])requestHeaders['Content-Type']='application/json'}form.setAttribute('aria-busy','true');form.dataset.pgState='loading';if(submit)submit.disabled=true;if(status)status.textContent='';try{var response=await fetch(url,options);if(!response.ok)throw new Error('HTTP '+response.status);form.dataset.pgState='success';if(status)status.textContent=form.dataset.pgFormSuccess||'Sent successfully.';if(form.dataset.pgFormReset==='true')form.reset();form.dispatchEvent(new CustomEvent('pagiera:form-success',{bubbles:true,detail:{response:response}}))}catch(error){form.dataset.pgState='error';if(status)status.textContent=form.dataset.pgFormError||'Something went wrong.';form.dispatchEvent(new CustomEvent('pagiera:form-error',{bubbles:true,detail:{error:error}}))}finally{form.removeAttribute('aria-busy');if(submit)submit.disabled=false}})})})();`;
 function isContainerType(type) {
   return ["Frame", "Stack", "Container", "Form", "Fieldset", "List", "Request", "Repeat"].includes(type);