pagiera 0.2.0-alpha.64 → 0.2.0-alpha.65

package/dist/full-editor.js

@@ -4656,6 +4656,27 @@ var ALIGN_MAP = {
   end: "flex-end",
   stretch: "stretch"
 };
+var TEXT_VERTICAL = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "start",
+  stretch: "stretch"
+};
+function textOnlyPlacementCss(selector) {
+  return `${selector}>*{grid-column:2}${selector}::before{grid-column:1;grid-row:1}${selector}::after{grid-column:3;grid-row:1}`;
+}
+var parentIdsByMap = /* @__PURE__ */ new WeakMap();
+function textOnly(element, byId) {
+  if (!isTextual(element.type)) return false;
+  let parents = parentIdsByMap.get(byId);
+  if (!parents) {
+    parents = /* @__PURE__ */ new Set();
+    for (const other of byId.values()) if (other.parentId) parents.add(other.parentId);
+    parentIdsByMap.set(byId, parents);
+  }
+  return !parents.has(element.id);
+}
 function styleToCss(style, context, element) {
   const borderT = style.borderT ?? style.borderW;
   const borderR = style.borderR ?? style.borderW;
@@ -4734,6 +4755,17 @@ function styleToCss(style, context, element) {
     css2.gridTemplateColumns = `repeat(${Math.max(1, style.columns)}, minmax(0, 1fr))`;
     css2.alignItems = ALIGN_MAP[style.align];
   }
+  if (context.textOnly && style.layout === "stack") {
+    const vertical = style.direction === "row" ? style.align : style.justify;
+    css2.display = "grid";
+    css2.gridTemplateColumns = "auto minmax(0, 1fr) auto";
+    css2.alignContent = TEXT_VERTICAL[vertical];
+    css2.alignItems = "baseline";
+    css2.justifyContent = void 0;
+    css2.flexDirection = void 0;
+    css2.flexWrap = void 0;
+    css2.columnGap = void 0;
+  }
   if (style.layout === "absolute") {
     css2.display = "block";
   }
@@ -6466,6 +6498,21 @@ function mountDisclosures(root) {
 import { jsx as jsx9 } from "react/jsx-runtime";
 var noSubscription = () => () => {
 };
+function runInline(code) {
+  const flag = `__pgExec${Math.random().toString(36).slice(2)}`;
+  const host = window;
+  const script = document.createElement("script");
+  const nonce = document.querySelector("script[nonce]")?.nonce;
+  if (nonce) script.nonce = nonce;
+  script.text = `window[${JSON.stringify(flag)}]=1;(function(){
+${code}
+})();`;
+  document.head.appendChild(script);
+  script.remove();
+  const ran = host[flag] === 1;
+  delete host[flag];
+  return ran;
+}
 function PageScript({ name, code, page }) {
   const fromServer = useSyncExternalStore(noSubscription, () => false, () => true);
   useEffect3(() => {
@@ -6475,11 +6522,9 @@ function PageScript({ name, code, page }) {
       delete ran[name];
       return;
     }
-    try {
-      new Function(code)();
-    } catch (error) {
-      console.error(error);
-    }
+    if (runInline(code)) return;
+    console.error(`Pagiera: the "${name}" page script could not run (blocked by the Content Security Policy?).`);
+    if (name === "entrance") document.documentElement.classList.remove("pg-ready");
   }, [code, name, page]);
   if (!fromServer) return null;
   return /* @__PURE__ */ jsx9(
@@ -7597,7 +7642,8 @@ function rulesFor(element, byId, breakpoint, rootStyle, cascade) {
     {
       parentLayout: parentStyle?.layout ?? "stack",
       parentDirection: parentStyle?.direction ?? "column",
-      parentAlign: parentStyle?.align ?? rootStyle.align
+      parentAlign: parentStyle?.align ?? rootStyle.align,
+      textOnly: textOnly(element, byId)
     },
     element
   );
@@ -7628,7 +7674,8 @@ function interactionDeclarations(element, byId, breakpoint, rootStyle, cascade,
   const context = {
     parentLayout: parentStyle?.layout ?? "stack",
     parentDirection: parentStyle?.direction ?? "column",
-    parentAlign: parentStyle?.align ?? rootStyle.align
+    parentAlign: parentStyle?.align ?? rootStyle.align,
+    textOnly: textOnly(element, byId)
   };
   const resting = resolveStyle(element, breakpoint, cascade);
   const restingCss = styleToCss(resting, context, element);
@@ -7804,7 +7851,9 @@ 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-node[data-pg-target]{cursor:pointer}.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}` + // Text with a `::before`/`::after` from custom CSS keeps them on
+    // the text's line (the node itself is a grid, see `textOnly`).
+    textOnlyPlacementCss(".pg-text-only") + ".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}"
   );
   const setByRule = /* @__PURE__ */ new Map();
   const record = (id, suffix, css2) => {
@@ -9640,7 +9689,9 @@ function RenderedNode({
   const children = childrenOf(elements, element.id);
   const style = resolveStyle(element, baseId, cascade);
   const band = isBand(element.type, style, rootStyle);
-  const className = `pg-node ${classFor(element.id)}` + (element.componentRole === "master" || element.componentRole === "instance" ? " pg-component-root" : "") + (band ? " pg-band" : "") + (element.type === "List" && element.listStyle !== "none" ? ` pg-list pg-list-${element.listStyle === "number" ? "number" : "bullet"}` : "") + (style.entrance === "none" || style.scrollEffect !== "none" ? "" : style.entranceSplit === "none" ? " pg-anim" : " pg-anim pg-split");
+  const className = `pg-node ${classFor(element.id)}` + (element.componentRole === "master" || element.componentRole === "instance" ? " pg-component-root" : "") + (band ? " pg-band" : "") + // Matches `textOnly` in the stylesheet: text with no child elements is
+  // a grid, and this class places its text and pseudo-elements.
+  (isTextual(element.type) && children.length === 0 ? " pg-text-only" : "") + (element.type === "List" && element.listStyle !== "none" ? ` pg-list pg-list-${element.listStyle === "number" ? "number" : "bullet"}` : "") + (style.entrance === "none" || style.scrollEffect !== "none" ? "" : style.entranceSplit === "none" ? " pg-anim" : " pg-anim pg-split");
   const renderChildren = (subset = children) => element.type === "Repeat" ? rowsFor(element, data, false).flatMap(
     (dataRow, index) => children.map((child) => /* @__PURE__ */ jsx11(
       RenderedNode,
@@ -21343,7 +21394,8 @@ function Editor({
       return {
         parentLayout: parentStyle?.layout ?? rootStyle.layout,
         parentDirection: parentStyle?.direction ?? rootStyle.direction,
-        parentAlign: parentStyle?.align ?? rootStyle.align
+        parentAlign: parentStyle?.align ?? rootStyle.align,
+        textOnly: textOnly(element, byId)
       };
     },
     [byId, breakpoint, rootStyle.align, rootStyle.direction, rootStyle.layout]
@@ -23237,6 +23289,7 @@ function Editor({
         "div",
         {
           "data-canvas-element": el.id,
+          "data-pg-text-only": textOnly(el, byId) ? "" : void 0,
           ...carouselControlAttributes(el.carouselControl),
           ...disclosureAttributes(el.disclosure),
           style: split ? split.shell : css2,
@@ -24912,6 +24965,7 @@ function Editor({
       {
         dangerouslySetInnerHTML: {
           __html: `${customFontCss}
+                        ${textOnlyPlacementCss("[data-pg-text-only]")}
                         .canvas-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
                         .canvas-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
                     `