pagiera 0.2.0-alpha.33

package/dist/runtime.js

@@ -0,0 +1,717 @@
+// src/internal/lib/render/page-render.tsx
+import React from "react";
+
+// src/internal/lib/editor/types.ts
+var DEFAULT_BREAKPOINTS = [
+  { id: "desktop", name: "Desktop", width: 1280 },
+  { id: "tablet", name: "Tablet", width: 768 },
+  { id: "mobile", name: "Mobile", width: 375 }
+];
+
+// src/internal/lib/editor/cascade.ts
+var DEFAULT_CASCADE = {
+  breakpoints: DEFAULT_BREAKPOINTS,
+  baseId: "desktop"
+};
+function cascadeOf(breakpoints, baseId) {
+  const list = breakpoints?.length ? breakpoints : DEFAULT_BREAKPOINTS;
+  const base = list.find((item) => item.id === baseId) ?? widest(list);
+  return { breakpoints: list, baseId: base.id };
+}
+function widest(list) {
+  return list.reduce((a, b) => b.width > a.width ? b : a, list[0]);
+}
+function baseOf(cascade) {
+  return cascade.breakpoints.find((item) => item.id === cascade.baseId) ?? widest(cascade.breakpoints);
+}
+function overrideChain(cascade, targetId) {
+  const base = baseOf(cascade);
+  if (targetId === base.id) return [];
+  const target = cascade.breakpoints.find((item) => item.id === targetId);
+  if (!target) return [];
+  const goingNarrower = target.width < base.width;
+  const between = cascade.breakpoints.filter((item) => {
+    if (item.id === base.id) return false;
+    return goingNarrower ? item.width < base.width && item.width >= target.width : item.width > base.width && item.width <= target.width;
+  });
+  between.sort((a, b) => goingNarrower ? b.width - a.width : a.width - b.width);
+  return between.map((item) => item.id);
+}
+function mediaPlan(cascade) {
+  const base = baseOf(cascade);
+  const narrower = cascade.breakpoints.filter((item) => item.id !== base.id && item.width < base.width).sort((a, b) => b.width - a.width).map((item) => {
+    const ceiling = cascade.breakpoints.filter((other) => other.width > item.width).reduce(
+      (lowest, other) => Math.min(lowest, other.width),
+      Number.POSITIVE_INFINITY
+    );
+    return { id: item.id, query: `(max-width: ${ceiling - 1}px)` };
+  });
+  const wider = cascade.breakpoints.filter((item) => item.id !== base.id && item.width > base.width).sort((a, b) => a.width - b.width).map((item) => ({ id: item.id, query: `(min-width: ${item.width}px)` }));
+  return [...narrower, ...wider];
+}
+var chainCache = /* @__PURE__ */ new WeakMap();
+function chainFor(cascade, targetId) {
+  let byTarget = chainCache.get(cascade);
+  if (!byTarget) {
+    byTarget = /* @__PURE__ */ new Map();
+    chainCache.set(cascade, byTarget);
+  }
+  const cached = byTarget.get(targetId);
+  if (cached) return cached;
+  const chain = overrideChain(cascade, targetId);
+  byTarget.set(targetId, chain);
+  return chain;
+}
+
+// src/internal/lib/editor/style.ts
+function resolveStyle(element, breakpoint, cascade = DEFAULT_CASCADE) {
+  let style = element.base;
+  for (const step of chainFor(cascade, breakpoint)) {
+    const override = element.overrides?.[step];
+    if (override) style = { ...style, ...override };
+  }
+  return style;
+}
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+function styleToCss(style, context, element) {
+  const css = {
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: style.direction,
+    gap: style.gap || void 0,
+    justifyContent: JUSTIFY_MAP[style.justify],
+    alignItems: ALIGN_MAP[style.align],
+    flexWrap: style.wrap ? "wrap" : "nowrap",
+    paddingTop: style.padT || void 0,
+    paddingRight: style.padR || void 0,
+    paddingBottom: style.padB || void 0,
+    paddingLeft: style.padL || void 0,
+    backgroundColor: style.bg || void 0,
+    // A gradient and a photo can be layered; the gradient is painted first
+    // so it reads as a scrim over the image.
+    backgroundImage: [style.gradient, style.bgImage && `url("${style.bgImage}")`].filter(Boolean).join(", ") || void 0,
+    backgroundSize: style.bgImage ? style.bgSize : void 0,
+    backgroundPosition: style.bgImage ? style.bgPosition : void 0,
+    backgroundRepeat: style.bgImage ? "no-repeat" : void 0,
+    overflow: style.overflow === "visible" ? void 0 : style.overflow,
+    aspectRatio: style.aspectRatio || void 0,
+    cursor: style.cursor === "auto" ? void 0 : style.cursor,
+    mixBlendMode: style.blendMode === "normal" ? void 0 : style.blendMode,
+    filter: style.blur ? `blur(${style.blur}px)` : void 0,
+    backdropFilter: style.backdropBlur ? `blur(${style.backdropBlur}px)` : void 0,
+    color: style.color,
+    borderRadius: style.radius || void 0,
+    opacity: style.opacity === 100 ? void 0 : style.opacity / 100,
+    borderWidth: style.borderW || void 0,
+    borderColor: style.borderW ? style.borderC : void 0,
+    borderStyle: style.borderW ? style.borderStyle : void 0,
+    boxShadow: style.shadow || void 0,
+    transform: [
+      style.rotate ? `rotate(${style.rotate}deg)` : "",
+      style.scale === 100 ? "" : `scale(${style.scale / 100})`
+    ].filter(Boolean).join(" ") || void 0,
+    fontFamily: style.fontFamily === "inherit" ? void 0 : style.fontFamily,
+    fontSize: style.fontSize,
+    fontWeight: style.fontWeight,
+    lineHeight: style.lineHeight,
+    letterSpacing: style.letterSpacing || void 0,
+    textAlign: style.textAlign,
+    textTransform: style.textTransform
+  };
+  if (element?.type === "Grid" && style.layout === "stack") {
+    css.display = "grid";
+    css.gridTemplateColumns = `repeat(${Math.max(1, style.columns)}, minmax(0, 1fr))`;
+    css.alignItems = ALIGN_MAP[style.align];
+  }
+  if (style.layout === "absolute") {
+    css.display = "block";
+  }
+  if (context.parentLayout === "absolute") {
+    css.position = "absolute";
+    css.left = style.x;
+    css.top = style.y;
+    css.width = style.widthMode === "fixed" ? style.w : "max-content";
+    css.height = style.heightMode === "fixed" ? style.h : "max-content";
+    if (style.widthMode === "fill") css.width = "100%";
+    if (style.heightMode === "fill") css.height = "100%";
+    const transforms = [];
+    if (style.constraintX === "center") {
+      css.left = `calc(50% + ${style.x}px)`;
+      transforms.push("translateX(-50%)");
+    } else if (style.constraintX === "end") {
+      css.left = void 0;
+      css.right = style.x;
+    } else if (style.constraintX === "stretch") {
+      css.left = style.x;
+      css.right = style.x;
+      css.width = "auto";
+    }
+    if (style.constraintY === "center") {
+      css.top = `calc(50% + ${style.y}px)`;
+      transforms.push("translateY(-50%)");
+    } else if (style.constraintY === "end") {
+      css.top = void 0;
+      css.bottom = style.y;
+    } else if (style.constraintY === "stretch") {
+      css.top = style.y;
+      css.bottom = style.y;
+      css.height = "auto";
+    }
+    if (css.transform) transforms.push(String(css.transform));
+    css.transform = transforms.join(" ") || void 0;
+    return css;
+  }
+  css.position = style.position === "sticky" ? "sticky" : "relative";
+  if (style.position === "sticky") css.top = style.stickyOffset;
+  const mainAxisIsWidth = context.parentDirection === "row";
+  applySize(css, "width", style.widthMode, style.w, mainAxisIsWidth);
+  applySize(css, "height", style.heightMode, style.h, !mainAxisIsWidth);
+  return css;
+}
+function applySize(css, axis, mode, value, isMainAxis) {
+  if (mode === "fixed") {
+    css[axis] = value;
+    if (isMainAxis) css.flexShrink = 0;
+    return;
+  }
+  if (mode === "auto") {
+    css[axis] = "auto";
+    if (isMainAxis) css.flexGrow = 0;
+    else css.alignSelf = "flex-start";
+    return;
+  }
+  css[axis] = "auto";
+  if (isMainAxis) {
+    css.flexGrow = 1;
+    css.flexBasis = 0;
+  } else {
+    css.alignSelf = "stretch";
+  }
+}
+function splitBand(css, contentWidth) {
+  const inner = {
+    boxSizing: "border-box",
+    display: css.display,
+    flexDirection: css.flexDirection,
+    gap: css.gap,
+    justifyContent: css.justifyContent,
+    alignItems: css.alignItems,
+    flexWrap: css.flexWrap,
+    gridTemplateColumns: css.gridTemplateColumns,
+    width: "100%",
+    maxWidth: contentWidth,
+    marginLeft: "auto",
+    marginRight: "auto"
+  };
+  const shell = { ...css };
+  shell.flexDirection = void 0;
+  shell.gap = void 0;
+  shell.justifyContent = void 0;
+  shell.alignItems = void 0;
+  shell.flexWrap = void 0;
+  shell.gridTemplateColumns = void 0;
+  shell.display = "block";
+  return { shell, inner };
+}
+function isBand(type, style, root) {
+  return type === "Section" && style.layout === "stack" && !root.fullWidth;
+}
+function rootStyleToCss(root) {
+  return {
+    boxSizing: "border-box",
+    display: root.layout === "stack" ? "flex" : "block",
+    flexDirection: root.direction,
+    gap: root.gap || void 0,
+    alignItems: ALIGN_MAP[root.align],
+    paddingTop: root.padT || void 0,
+    paddingRight: root.padR || void 0,
+    paddingBottom: root.padB || void 0,
+    paddingLeft: root.padL || void 0,
+    backgroundColor: root.bg,
+    fontFamily: root.fontFamily === "inherit" ? void 0 : root.fontFamily,
+    position: "relative",
+    minHeight: "100%",
+    width: "100%"
+  };
+}
+
+// src/internal/lib/editor/tree.ts
+function indexById(elements) {
+  return new Map(elements.map((el) => [el.id, el]));
+}
+function childrenOf(elements, parentId) {
+  return elements.filter((el) => (el.parentId ?? void 0) === parentId).sort((a, b) => a.z - b.z);
+}
+function subtreeIds(elements, rootId) {
+  const ids = /* @__PURE__ */ new Set([rootId]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const el of elements) {
+      if (el.parentId && ids.has(el.parentId) && !ids.has(el.id)) {
+        ids.add(el.id);
+        grew = true;
+      }
+    }
+  }
+  return ids;
+}
+function absolutePosition(byId, element, breakpoint, cascade = DEFAULT_CASCADE) {
+  const own = resolveStyle(element, breakpoint, cascade);
+  let x = own.x;
+  let y = own.y;
+  let parent = element.parentId ? byId.get(element.parentId) : void 0;
+  const guard = /* @__PURE__ */ new Set([element.id]);
+  while (parent && !guard.has(parent.id)) {
+    guard.add(parent.id);
+    const style = resolveStyle(parent, breakpoint, cascade);
+    x += style.x;
+    y += style.y;
+    parent = parent.parentId ? byId.get(parent.parentId) : void 0;
+  }
+  return { x, y };
+}
+function isNote(element, byId, breakpoint, frameWidth, rootLayout = "absolute", cascade = DEFAULT_CASCADE) {
+  const parent = element.parentId ? byId.get(element.parentId) : void 0;
+  const placedBy = parent ? resolveStyle(parent, breakpoint, cascade).layout : rootLayout;
+  if (placedBy !== "absolute") return false;
+  const style = resolveStyle(element, breakpoint, cascade);
+  const { x } = absolutePosition(byId, element, breakpoint, cascade);
+  const right = x + (style.widthMode === "fixed" ? style.w : 0);
+  return right <= 0 || x >= frameWidth;
+}
+function noteIds(elements, byId, breakpoint, frameWidth, rootLayout = "absolute", cascade = DEFAULT_CASCADE) {
+  const notes = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (isNote(element, byId, breakpoint, frameWidth, rootLayout, cascade)) {
+      for (const id of subtreeIds(elements, element.id)) notes.add(id);
+    }
+  }
+  return notes;
+}
+
+// src/internal/lib/data/source.ts
+function selectPath(payload, path) {
+  const steps = path.split(".").map((s) => s.trim()).filter(Boolean);
+  let cursor = payload;
+  for (const step of steps) {
+    if (cursor === null || typeof cursor !== "object") return void 0;
+    cursor = cursor[step];
+  }
+  return cursor;
+}
+function readBinding(row, path) {
+  const value = selectPath(row, path);
+  if (value === null || value === void 0) return "";
+  if (typeof value === "object") return "";
+  return String(value);
+}
+
+// src/internal/lib/render/bind.ts
+function bindElement(element, row) {
+  if (!row || !element.binding) return element;
+  const value = readBinding(row, element.binding);
+  if (element.type === "Image" || element.type === "Video") {
+    return value ? { ...element, src: value } : element;
+  }
+  return { ...element, content: value };
+}
+function rowsFor(element, data, placeholderWhenEmpty) {
+  const rows = element.sourceId ? data[element.sourceId] : void 0;
+  if (rows && rows.length > 0) return rows;
+  return placeholderWhenEmpty ? [void 0] : [];
+}
+
+// src/internal/lib/render/css.ts
+var UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "lineHeight",
+  "order",
+  "fontWeight",
+  "columns"
+]);
+function kebab(property) {
+  return property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+function declarationsToCss(css) {
+  return Object.entries(css).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([property, value]) => {
+    const rendered = typeof value === "number" && !UNITLESS.has(property) ? `${value}px` : String(value);
+    return `${kebab(property)}:${rendered}`;
+  }).join(";");
+}
+function classFor(id) {
+  return `pg-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+var DEFAULT_PAGE_FONT = "ui-sans-serif, system-ui, sans-serif";
+function resolveFont(fontFamily) {
+  return fontFamily === "inherit" || fontFamily === "" ? DEFAULT_PAGE_FONT : fontFamily;
+}
+function rulesFor(element, byId, breakpoint, rootStyle, cascade) {
+  const parent = element.parentId ? byId.get(element.parentId) : void 0;
+  const parentStyle = parent ? resolveStyle(parent, breakpoint, cascade) : void 0;
+  const style = resolveStyle(element, breakpoint, cascade);
+  const css = styleToCss(
+    style,
+    {
+      parentLayout: parentStyle?.layout ?? "stack",
+      parentDirection: parentStyle?.direction ?? "column"
+    },
+    element
+  );
+  css.zIndex = element.z;
+  if (style.hidden) css.display = "none";
+  if (!isBand(element.type, style, rootStyle) || style.hidden) {
+    return [["", declarationsToCss(css)]];
+  }
+  const { shell, inner } = splitBand(css, rootStyle.maxWidth);
+  return [
+    ["", declarationsToCss(shell)],
+    [">.pg-inner", declarationsToCss(inner)]
+  ];
+}
+var ENTRANCE_KEYFRAMES = `
+@keyframes pg-fade{from{opacity:0}to{opacity:1}}
+@keyframes pg-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
+@keyframes pg-down{from{opacity:0;translate:0 -28px}to{opacity:1;translate:none}}
+@keyframes pg-left{from{opacity:0;translate:-32px 0}to{opacity:1;translate:none}}
+@keyframes pg-right{from{opacity:0;translate:32px 0}to{opacity:1;translate:none}}
+@keyframes pg-zoom{from{opacity:0;scale:.94}to{opacity:1;scale:none}}
+/* The hidden start state is applied only once the script is running, so a
+   visitor without JavaScript still sees every element. */
+.pg-ready .pg-anim{opacity:0}
+/* Revealed elements are visible as a resting value, not only as the end of a
+   keyframe: if animations are disabled or never get to run, the content still
+   shows rather than staying at zero opacity. */
+.pg-ready .pg-anim.pg-in{opacity:1}
+@media (prefers-reduced-motion:reduce){.pg-ready .pg-anim{opacity:1;animation:none!important}}
+`.trim();
+var ENTRANCE_SCRIPT = `
+(function(){
+  var nodes=document.querySelectorAll('.pg-anim');
+  if(!nodes.length)return;
+  var reveal=function(n){n.classList.add('pg-in');};
+  var all=function(){for(var i=0;i<nodes.length;i++)reveal(nodes[i]);};
+
+  if(!('IntersectionObserver' in window)||!window.matchMedia||matchMedia('(prefers-reduced-motion:reduce)').matches){
+    all();return;
+  }
+  document.documentElement.classList.add('pg-ready');
+
+  // Anything already in view animates straight away rather than waiting for
+  // the observer's first delivery.
+  var pending=[];
+  for(var i=0;i<nodes.length;i++){
+    var r=nodes[i].getBoundingClientRect();
+    if(r.top<innerHeight&&r.bottom>0)reveal(nodes[i]);else pending.push(nodes[i]);
+  }
+
+  var io=new IntersectionObserver(function(entries){
+    for(var j=0;j<entries.length;j++){
+      if(entries[j].isIntersecting){reveal(entries[j].target);io.unobserve(entries[j].target);}
+    }
+  },{threshold:0.15,rootMargin:'0px 0px -8% 0px'});
+  for(var k=0;k<pending.length;k++)io.observe(pending[k]);
+
+  // Last resort: never leave content invisible because a callback did not run.
+  setTimeout(all,3000);
+})();
+`.trim();
+function hasEntrances(elements, cascade = DEFAULT_CASCADE) {
+  const baseId = baseOf(cascade).id;
+  return elements.some(
+    (el) => resolveStyle(el, baseId, cascade).entrance !== "none"
+  );
+}
+function stylesheetFor(elements, rootStyle) {
+  const byId = new Map(elements.map((el) => [el.id, el]));
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const parts = [];
+  for (const font of rootStyle.customFonts ?? []) {
+    const family = font.name.replace(/["'{};]/g, "");
+    const rawUrl = font.url.replace(/["'()\\]/g, "");
+    const url = rawUrl === "/fonts/manrope-variable.woff2" ? "/api/pagiera/assets/manrope-variable.woff2" : rawUrl;
+    parts.push(`@font-face{font-family:"${family}";src:url("${url}") format("woff2");font-weight:${font.weight};font-style:${font.style};font-display:swap}`);
+  }
+  parts.push(`html,body{margin:0;padding:0;background:${rootStyle.bg}}`);
+  parts.push(`html{scroll-behavior:smooth}.pg-root{${declarationsToCss(rootStyleToCss(rootStyle))}}`);
+  parts.push(
+    // The font is pinned on `.pg-root` rather than on <body>: the app's
+    // layout puts a font class on <body>, which would out-specify an
+    // 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-node img{display:block;width:100%;height:100%}.pg-link{text-decoration:none;color:inherit}`
+  );
+  for (const element of elements) {
+    const emitted = rulesFor(element, byId, baseId, rootStyle, cascade).map(([suffix, decl]) => `.${classFor(element.id)}${suffix}{${decl}}`).join("");
+    parts.push(emitted);
+  }
+  for (const plan of mediaPlan(cascade)) {
+    const breakpoint = plan.id;
+    const affected = elements.filter((el) => {
+      if (el.overrides?.[breakpoint]) return true;
+      const parent = el.parentId ? byId.get(el.parentId) : void 0;
+      return Boolean(parent?.overrides?.[breakpoint]);
+    });
+    if (affected.length === 0) continue;
+    const rules = affected.flatMap(
+      (el) => rulesFor(el, byId, breakpoint, rootStyle, cascade).map(
+        ([suffix, decl]) => `.${classFor(el.id)}${suffix}{${decl}}`
+      )
+    ).join("");
+    parts.push(`@media ${plan.query}{${rules}}`);
+  }
+  if (hasEntrances(elements, cascade)) {
+    parts.push(ENTRANCE_KEYFRAMES);
+    for (const element of elements) {
+      const style = resolveStyle(element, baseId, cascade);
+      if (style.entrance === "none") continue;
+      parts.push(
+        `.pg-ready .${classFor(element.id)}.pg-in{animation:pg-${style.entrance} ${style.entranceDuration}ms ${style.entranceCurve === "spring" ? `cubic-bezier(.16,${1 + Math.max(0, 45 - style.springDamping) / 100},${Math.max(0.12, Math.min(0.52, 120 / style.springStiffness))},1)` : `cubic-bezier(${style.entranceBezier})`} ${style.entranceDelay}ms both}`
+      );
+    }
+  }
+  for (const element of elements) {
+    if (element.hover || element.press) parts.push(`.${classFor(element.id)}{transition:transform .42s cubic-bezier(.16,1,.3,1),scale .42s cubic-bezier(.16,1,.3,1),rotate .42s cubic-bezier(.16,1,.3,1),translate .42s cubic-bezier(.16,1,.3,1),background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .42s cubic-bezier(.16,1,.3,1),opacity .32s ease,filter .42s ease;will-change:transform}`);
+    if (!element.hover || Object.keys(element.hover).length === 0) continue;
+    const merged = { ...resolveStyle(element, baseId, cascade), ...element.hover };
+    const parent = element.parentId ? byId.get(element.parentId) : void 0;
+    const parentStyle = parent ? resolveStyle(parent, baseId, cascade) : void 0;
+    const css = styleToCss(
+      merged,
+      {
+        parentLayout: parentStyle?.layout ?? "stack",
+        parentDirection: parentStyle?.direction ?? "column"
+      },
+      element
+    );
+    parts.push(
+      `.${classFor(element.id)}:hover{${declarationsToCss(css)}}`
+    );
+  }
+  for (const element of elements) {
+    if (element.press && Object.keys(element.press).length) {
+      const merged = { ...resolveStyle(element, baseId, cascade), ...element.press };
+      const parent = element.parentId ? byId.get(element.parentId) : void 0;
+      const parentStyle = parent ? resolveStyle(parent, baseId, cascade) : void 0;
+      const css = styleToCss(merged, { parentLayout: parentStyle?.layout ?? "stack", parentDirection: parentStyle?.direction ?? "column" }, element);
+      parts.push(`.${classFor(element.id)}:active{${declarationsToCss(css)}}`);
+    }
+    if (element.loop) {
+      const name = element.loop.type;
+      parts.push(`.${classFor(element.id)}{animation:pg-loop-${name} ${element.loop.duration}ms ease-in-out infinite}`);
+    }
+  }
+  if (elements.some((element) => element.loop)) parts.push(`@keyframes pg-loop-pulse{0%,100%{scale:1}50%{scale:1.06}}@keyframes pg-loop-float{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes pg-loop-spin{to{rotate:360deg}}@media(prefers-reduced-motion:reduce){.pg-node{animation:none!important}}`);
+  return parts.join("\n");
+}
+
+// src/internal/lib/editor/icon.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var paths = {
+  star: /* @__PURE__ */ jsx("path", { d: "m12 2.8 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9L6.4 20l1.1-6.2L3 9.4l6.2-.9L12 2.8Z" }),
+  heart: /* @__PURE__ */ jsx("path", { d: "M20.8 5.8c-2.2-2.2-5.7-2.2-7.9 0L12 6.7l-.9-.9a5.6 5.6 0 0 0-7.9 7.9L12 22l8.8-8.3a5.6 5.6 0 0 0 0-7.9Z" }),
+  "arrow-right": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx("path", { d: "m14 7 5 5-5 5" })
+  ] }),
+  check: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }),
+  menu: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 7h16" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 17h16" })
+  ] }),
+  search: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "m20 20-4-4" })
+  ] })
+};
+function IconGlyph({ element }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: paths[element.iconName ?? "star"] });
+}
+
+// src/internal/lib/render/page-render.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RenderedPage({
+  elements: all,
+  rootStyle,
+  data = {}
+}) {
+  const frameWidth = rootStyle.fullWidth ? Number.POSITIVE_INFINITY : rootStyle.maxWidth;
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const notes = noteIds(all, indexById(all), baseId, frameWidth, rootStyle.layout, cascade);
+  const elements = all.filter((element) => !notes.has(element.id) && element.componentRole !== "master");
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: stylesheetFor(elements, rootStyle) }
+      }
+    ),
+    /* @__PURE__ */ jsx2("main", { className: "pg-root", children: childrenOf(elements, void 0).map((el) => /* @__PURE__ */ jsx2(
+      RenderedNode,
+      {
+        element: el,
+        elements,
+        rootStyle,
+        data
+      },
+      el.id
+    )) }),
+    hasEntrances(elements) && /* @__PURE__ */ jsx2(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: ENTRANCE_SCRIPT }
+      }
+    ),
+    elements.some((element) => element.draggable) && /* @__PURE__ */ jsx2("script", { dangerouslySetInnerHTML: { __html: DRAG_SCRIPT } }),
+    elements.some((element) => element.interaction && ["toggle-layer", "show-layer", "hide-layer"].includes(element.interaction.action)) && /* @__PURE__ */ jsx2("script", { dangerouslySetInnerHTML: { __html: ACTION_SCRIPT } })
+  ] });
+}
+function RenderedNode({
+  element: raw,
+  elements,
+  rootStyle,
+  data,
+  row
+}) {
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const directRow = row ?? (raw.sourceId ? data[raw.sourceId]?.[0] : void 0);
+  const element = bindElement(raw, directRow);
+  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)}` + (band ? " pg-band" : "") + (style.entrance === "none" ? "" : " pg-anim");
+  const renderChildren = () => element.type === "Repeat" ? rowsFor(element, data, true).flatMap(
+    (dataRow, index) => children.map((child) => /* @__PURE__ */ jsx2(
+      RenderedNode,
+      {
+        element: child,
+        elements,
+        rootStyle,
+        data,
+        row: dataRow
+      },
+      `${index}:${child.id}`
+    ))
+  ) : children.map((child) => /* @__PURE__ */ jsx2(
+    RenderedNode,
+    {
+      element: child,
+      elements,
+      rootStyle,
+      data,
+      row: element.type === "Request" ? data[element.sourceId ?? ""]?.[0] : row
+    },
+    child.id
+  ));
+  const content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(ElementContent, { element }),
+    renderChildren()
+  ] });
+  const body = band ? /* @__PURE__ */ jsx2("div", { className: "pg-inner", children: content }) : content;
+  const interactionHref = element.interaction?.action === "scroll-to" ? `#${classFor(element.interaction.value)}` : element.interaction?.action === "navigate" ? element.interaction.value : void 0;
+  const href = interactionHref || element.href;
+  const target = element.interaction?.target || element.target;
+  if (href) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        id: classFor(element.id),
+        "data-pg-drag": element.draggable ? "true" : void 0,
+        "data-pg-action": element.interaction?.action,
+        "data-pg-target": element.interaction && !["navigate", "scroll-to"].includes(element.interaction.action) ? classFor(element.interaction.value) : void 0,
+        className: `${className} pg-link`,
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        children: body
+      }
+    );
+  }
+  const tag = semanticTag(element);
+  return React.createElement(tag, {
+    id: classFor(element.id),
+    type: tag === "button" ? "button" : void 0,
+    "data-pg-drag": element.draggable ? "true" : void 0,
+    "data-pg-action": element.interaction?.action,
+    "data-pg-target": element.interaction && !["navigate", "scroll-to"].includes(element.interaction.action) ? classFor(element.interaction.value) : void 0,
+    "data-pg-display": element.type === "Grid" ? "grid" : isContainerType(element.type) || element.type === "Section" ? "flex" : "block",
+    className
+  }, body);
+}
+function semanticTag(element) {
+  const name = (element.name ?? "").toLowerCase();
+  if (element.type === "Button") return "button";
+  if (element.type === "Heading") {
+    const level = name.match(/(?:^|\s)h([1-6])(?:\s|$)/)?.[1] ?? "2";
+    return `h${level}`;
+  }
+  if (element.type === "Text") return "p";
+  if (name.includes("navbar") || name === "nav" || name.includes("navigation")) return "nav";
+  if (name.includes("footer")) return "footer";
+  if (name.includes("header")) return "header";
+  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 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))})})})();`;
+function isContainerType(type) {
+  return ["Frame", "Stack", "Container", "Request", "Repeat"].includes(type);
+}
+function ElementContent({ element }) {
+  if (element.code) return /* @__PURE__ */ jsx2("iframe", { title: element.name ?? "Code component", srcDoc: element.code, sandbox: "", style: { width: "100%", height: "100%", border: 0, borderRadius: "inherit" } });
+  if (element.type === "Image") {
+    if (!element.src) return null;
+    return (
+      // biome-ignore lint/performance/noImgElement: the src is author-supplied at runtime and cannot be statically optimised
+      /* @__PURE__ */ jsx2(
+        "img",
+        {
+          src: element.src,
+          alt: element.alt ?? "",
+          style: { objectFit: element.objectFit ?? "cover", borderRadius: "inherit" }
+        }
+      )
+    );
+  }
+  if (element.type === "Video") {
+    if (!element.src) return null;
+    return /* @__PURE__ */ jsx2(
+      "iframe",
+      {
+        src: element.src,
+        title: element.name ?? "Video",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture",
+        allowFullScreen: true,
+        style: { width: "100%", height: "100%", border: 0, borderRadius: "inherit" }
+      }
+    );
+  }
+  if (element.type === "Icon") return /* @__PURE__ */ jsx2(IconGlyph, { element });
+  if (!element.content) return null;
+  return /* @__PURE__ */ jsx2("span", { style: { display: "block", width: "100%", whiteSpace: "pre-wrap" }, children: element.content });
+}
+export {
+  ElementContent,
+  RenderedPage
+};
+//# sourceMappingURL=runtime.js.map