@particle-academy/fancy-cms-ui 0.7.1 → 0.9.0

package/dist/chunk-IRG5IKKO.js

@@ -0,0 +1,716 @@
+import { childrenOf as childrenOf$1, descendantsOf, fractionalKey } from '@particle-academy/fancy-doc-commons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createElement, useMemo, Fragment } from 'react';
+
+// src/document/types.ts
+function isBinding(v) {
+  return typeof v === "object" && v !== null && typeof v.$bind === "string";
+}
+function hasNodeMap(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const nodes = value.nodes;
+  return typeof nodes === "object" && nodes !== null && !Array.isArray(nodes);
+}
+function withNodeDefaults(node) {
+  const props = typeof node.props === "object" && node.props !== null ? node.props : {};
+  const style = typeof node.style === "object" && node.style !== null ? node.style : { base: {} };
+  const base = typeof style.base === "object" && style.base !== null ? style.base : {};
+  return props === node.props && style === node.style && base === style.base ? node : { ...node, props, style: { ...style, base } };
+}
+var DEFAULT_BREAKPOINTS = {
+  base: 0,
+  md: 768,
+  lg: 1024
+};
+function emptyDoc(id, slug = "/") {
+  return {
+    id,
+    seq: 0,
+    meta: { title: "Untitled", slug, scrollMode: "smooth" },
+    theme: { name: "default" },
+    breakpoints: ["base", "md", "lg"],
+    nodes: {}
+  };
+}
+
+// src/document/own.ts
+var has = Object.prototype.hasOwnProperty;
+function own(map, key) {
+  return map != null && has.call(map, key) ? map[key] : void 0;
+}
+function setOwn(map, key, value) {
+  Object.defineProperty(map, key, { value, writable: true, enumerable: true, configurable: true });
+}
+
+// src/document/reduce.ts
+function childrenOf(doc, parent) {
+  return childrenOf$1(doc, parent);
+}
+function rootIds(doc) {
+  if (!hasNodeMap(doc)) return [];
+  return childrenOf(doc, null).map((n) => n.id);
+}
+function lastRootId(doc) {
+  const r = rootIds(doc);
+  return r[r.length - 1] ?? null;
+}
+function descendantIds(doc, id) {
+  return descendantsOf(doc, id);
+}
+function patchNode(doc, id, patch) {
+  const node = own(doc.nodes, id);
+  return {
+    ...doc,
+    nodes: { ...doc.nodes, [id]: { ...node, ...patch } },
+    seq: doc.seq + 1
+  };
+}
+function reduce(doc, op, opts = {}) {
+  const invalid = (reason) => {
+    opts.onInvalid?.(op, reason);
+    return doc;
+  };
+  switch (op.t) {
+    case "insert_node": {
+      if (own(doc.nodes, op.node.id)) return invalid("node id already exists");
+      if (op.node.parent !== null && !own(doc.nodes, op.node.parent)) return invalid("parent not found");
+      return {
+        ...doc,
+        nodes: { ...doc.nodes, [op.node.id]: op.node },
+        seq: doc.seq + 1
+      };
+    }
+    case "remove_node": {
+      if (!own(doc.nodes, op.id)) return invalid("node not found");
+      const dead = /* @__PURE__ */ new Set([op.id, ...descendantIds(doc, op.id)]);
+      const nodes = {};
+      for (const id of Object.keys(doc.nodes)) {
+        if (!dead.has(id)) setOwn(nodes, id, own(doc.nodes, id));
+      }
+      return {
+        ...doc,
+        nodes,
+        seq: doc.seq + 1
+      };
+    }
+    case "move_node": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      if (op.parent === op.id) return invalid("cannot parent a node to itself");
+      if (op.parent !== null && !own(doc.nodes, op.parent)) return invalid("new parent not found");
+      if (op.parent !== null && descendantIds(doc, op.id).includes(op.parent)) {
+        return invalid("move would create a cycle");
+      }
+      return {
+        ...doc,
+        nodes: { ...doc.nodes, [op.id]: { ...node, parent: op.parent, order: op.order } },
+        seq: doc.seq + 1
+      };
+    }
+    case "set_node_props": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      return patchNode(doc, op.id, {
+        props: { ...node.props, ...op.patch }
+      });
+    }
+    case "set_layout": {
+      if (!own(doc.nodes, op.id)) return invalid("node not found");
+      return patchNode(doc, op.id, { layout: op.layout });
+    }
+    case "set_style": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      const prev = own(node.style, op.breakpoint) ?? {};
+      return patchNode(doc, op.id, {
+        style: { ...node.style, [op.breakpoint]: { ...prev, ...op.patch } }
+      });
+    }
+    case "set_constraints": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      const base = node.constraints ?? { base: { width: "hug", height: "hug" } };
+      const prev = own(base, op.breakpoint) ?? {};
+      return patchNode(doc, op.id, {
+        constraints: { ...base, [op.breakpoint]: { ...prev, ...op.patch } }
+      });
+    }
+    case "set_animation": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      const list = node.animations ?? [];
+      const idx = list.findIndex((a) => a.id === op.anim.id);
+      return patchNode(doc, op.id, {
+        animations: idx >= 0 ? list.map((a, i) => i === idx ? op.anim : a) : [...list, op.anim]
+      });
+    }
+    case "remove_animation": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      return patchNode(doc, op.id, {
+        animations: (node.animations ?? []).filter((a) => a.id !== op.animId)
+      });
+    }
+    case "set_action": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
+      const list = node.actions ?? [];
+      let actions;
+      if (op.action === null) actions = list.filter((_, i) => i !== op.index);
+      else if (op.index >= list.length) actions = [...list, op.action];
+      else actions = list.map((a, i) => i === op.index ? op.action : a);
+      return patchNode(doc, op.id, { actions });
+    }
+    case "set_meta":
+      return { ...doc, meta: { ...doc.meta, ...op.patch }, seq: doc.seq + 1 };
+    case "set_theme":
+      return { ...doc, theme: { ...doc.theme, ...op.patch }, seq: doc.seq + 1 };
+    case "reorder_roots": {
+      const currentRoots = childrenOf(doc, null);
+      const current = new Set(currentRoots.map((n) => n.id));
+      const same = op.order.length === currentRoots.length && new Set(op.order).size === op.order.length && op.order.every((id) => current.has(id));
+      if (!same) return invalid("reorder must be a permutation of the current roots");
+      const nodes = { ...doc.nodes };
+      let prev = null;
+      for (const id of op.order) {
+        prev = fractionalKey(prev, null);
+        setOwn(nodes, id, { ...own(nodes, id), order: prev });
+      }
+      return { ...doc, nodes, seq: doc.seq + 1 };
+    }
+    default:
+      return invalid(`unknown op "${op.t}"`);
+  }
+}
+function reduceAll(doc, ops, opts) {
+  return ops.reduce((d, op) => reduce(d, op, opts), doc);
+}
+function invert(doc, op) {
+  switch (op.t) {
+    case "insert_node":
+      return [{ t: "remove_node", id: op.node.id }];
+    case "remove_node": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return [];
+      const ids = [op.id, ...descendantIds(doc, op.id)];
+      const inserts = ids.map((id) => ({ t: "insert_node", node: own(doc.nodes, id) }));
+      if (node.parent === null) {
+        inserts.push({ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) });
+      }
+      return inserts;
+    }
+    case "move_node": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return [];
+      const back = [{ t: "move_node", id: op.id, parent: node.parent, order: node.order }];
+      if (node.parent === null) {
+        back.push({ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) });
+      }
+      return back;
+    }
+    case "set_node_props": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return [];
+      const prev = {};
+      for (const k of Object.keys(op.patch)) prev[k] = node.props[k];
+      return [{ t: "set_node_props", id: op.id, patch: prev }];
+    }
+    case "set_layout": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return [];
+      return [{ t: "set_layout", id: op.id, layout: node.layout }];
+    }
+    case "set_style": {
+      const node = own(doc.nodes, op.id);
+      if (!node) return [];
+      const prevBp = node.style[op.breakpoint] ?? {};
+      const prev = {};
+      for (const k of Object.keys(op.patch)) prev[k] = prevBp[k];
+      return [{ t: "set_style", id: op.id, breakpoint: op.breakpoint, patch: prev }];
+    }
+    case "set_meta":
+      return [{ t: "set_meta", patch: pick(doc.meta, Object.keys(op.patch)) }];
+    case "set_theme":
+      return [{ t: "set_theme", patch: pick(doc.theme, Object.keys(op.patch)) }];
+    case "reorder_roots":
+      return [{ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) }];
+    default:
+      return [];
+  }
+}
+function pick(obj, keys) {
+  const out = {};
+  for (const k of keys) out[k] = obj[k];
+  return out;
+}
+function normalizeDoc(input) {
+  if (hasNodeMap(input)) return input;
+  const id = typeof input === "object" && input !== null && !Array.isArray(input) && typeof input.id === "string" ? input.id : "malformed";
+  return emptyDoc(id);
+}
+function migrateDocVerbose(input) {
+  const normalized = normalizeDoc(input);
+  const legacy = normalized;
+  const sections = legacy.sections;
+  if (!Array.isArray(sections)) {
+    return { doc: normalized, migrated: false, danglingIds: [], unlistedRootIds: [] };
+  }
+  const danglingIds = [];
+  const ordered = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const id of sections) {
+    if (!own(normalized.nodes, id)) {
+      danglingIds.push(id);
+      continue;
+    }
+    if (seen.has(id)) continue;
+    seen.add(id);
+    ordered.push(id);
+  }
+  const unlistedRootIds = Object.values(normalized.nodes).filter((n) => n.parent === null && !seen.has(n.id)).sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0).map((n) => n.id);
+  const finalOrder = [...ordered, ...unlistedRootIds];
+  const nodes = { ...normalized.nodes };
+  let prev = null;
+  for (const id of finalOrder) {
+    const key = fractionalKey(prev, null);
+    setOwn(nodes, id, { ...own(nodes, id), order: key });
+    prev = key;
+  }
+  const { sections: _dropped, ...rest } = legacy;
+  return {
+    doc: { ...rest, nodes },
+    migrated: true,
+    danglingIds,
+    unlistedRootIds
+  };
+}
+function migrateDoc(input) {
+  return migrateDocVerbose(input).doc;
+}
+function needsMigration(input) {
+  return Array.isArray(input.sections);
+}
+
+// src/render/css.ts
+function cssString(value) {
+  let out = "";
+  for (const ch of value) {
+    const code = ch.codePointAt(0);
+    if (ch === "\\" || ch === '"') out += `\\${ch}`;
+    else if (code < 32 || code === 127 || ch === "<") out += `\\${code.toString(16)} `;
+    else out += ch;
+  }
+  return out;
+}
+var selectorFor = (id) => `[data-cms="${cssString(id)}"]`;
+var BASE_CSS = [
+  "/* fancy-cms base */",
+  ":where([data-cms]) {\n  box-sizing: border-box;\n}",
+  ":where(h1, h2, h3, h4, h5, h6, p, ul, ol)[data-cms] {\n  margin: 0;\n}",
+  ":where(ul, ol)[data-cms] {\n  padding-left: 1.25em;\n}",
+  ":where(a[data-cms]) {\n  color: inherit;\n}",
+  ":where([data-cms] > img) {\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}",
+  ':where([data-cms] > img[data-cms-fit="contain"]) {\n  object-fit: contain;\n}',
+  ':where([data-cms] > img[data-cms-fit="fill"]) {\n  object-fit: fill;\n}',
+  ':where([data-cms] > img[data-cms-fit="none"]) {\n  object-fit: none;\n}',
+  ':where([data-cms] > img[data-cms-fit="scale-down"]) {\n  object-fit: scale-down;\n}',
+  ":where([data-cms-button]) {\n  align-items: center;\n  border: 1px solid var(--cms-color-primary, #7c3aed);\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: 600;\n  gap: 6px;\n  justify-content: center;\n  line-height: 1.2;\n  padding: 10px 18px;\n  text-decoration: none;\n}",
+  ':where([data-cms-button="primary"]) {\n  background: var(--cms-color-primary, #7c3aed);\n  color: #ffffff;\n}',
+  ':where([data-cms-button="outline"]) {\n  background: transparent;\n  color: var(--cms-color-primary, #7c3aed);\n}',
+  ':where([data-cms-button="ghost"]) {\n  background: transparent;\n  border-color: currentColor;\n  color: inherit;\n}',
+  ":where([data-cms-callout]) {\n  background: #3b82f614;\n  border-left: 3px solid #3b82f6;\n  border-radius: 10px;\n  padding: 12px 14px;\n}",
+  ':where([data-cms-callout="success"]) {\n  background: #10b98114;\n  border-left-color: #10b981;\n}',
+  ':where([data-cms-callout="warning"]) {\n  background: #f59e0b14;\n  border-left-color: #f59e0b;\n}',
+  ':where([data-cms-callout="danger"]) {\n  background: #ef444414;\n  border-left-color: #ef4444;\n}',
+  ":where([data-cms] > hr) {\n  border: none;\n  border-top: 1px solid #e2e8f0;\n  margin: 0;\n}",
+  ":where([data-cms] > pre) {\n  background: #0b1220;\n  border-radius: 10px;\n  color: #e2e8f0;\n  font-family: ui-monospace, monospace;\n  font-size: 13px;\n  margin: 0;\n  overflow-x: auto;\n  padding: 12px 14px;\n}"
+].join("\n\n");
+var UNITS = /* @__PURE__ */ new Set(["px", "%", "vw", "vh", "rem", "fr"]);
+function lengthToCss(len) {
+  if (typeof len !== "object" || len === null) return null;
+  const { value, unit } = len;
+  if (typeof value !== "number" || !Number.isFinite(value) || typeof unit !== "string" || !UNITS.has(unit)) return null;
+  return `${value}${unit}`;
+}
+function sizeToCss(size) {
+  if (size === "fill") return "100%";
+  if (size === "hug") return "auto";
+  return lengthToCss(size);
+}
+function numberToCss(value) {
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : null;
+}
+function putLen(d, props, len) {
+  const css = lengthToCss(len);
+  if (css !== null) for (const p of props) d[p] = css;
+}
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function safeCssValue(value) {
+  if (/[{}<]/.test(value)) return null;
+  let depth = 0;
+  let quote = null;
+  for (const ch of value) {
+    if (quote) {
+      if (ch === quote) quote = null;
+    } else if (ch === '"' || ch === "'") {
+      quote = ch;
+    } else if (ch === "(") {
+      depth++;
+    } else if (ch === ")") {
+      depth = Math.max(0, depth - 1);
+    } else if (ch === ";" && depth === 0) {
+      return null;
+    }
+  }
+  return value;
+}
+function put(d, prop, value) {
+  if (value === void 0) return;
+  const safe = safeCssValue(value);
+  if (safe !== null) d[prop] = safe;
+}
+var OVERFLOW = /* @__PURE__ */ new Set(["visible", "hidden", "auto"]);
+var TEXT_TRANSFORM = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
+var BACKGROUND_SIZE = /* @__PURE__ */ new Set(["cover", "contain", "auto"]);
+var TEXT_ALIGN = /* @__PURE__ */ new Set(["left", "center", "right", "justify"]);
+var DIRECTIONS = /* @__PURE__ */ new Set(["row", "column"]);
+function keyword(map, value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(map, value) ? map[value] : null;
+}
+function inSet(set, value) {
+  return typeof value === "string" && set.has(value) ? value : null;
+}
+function styleDecls(style) {
+  const d = {};
+  putLen(d, ["padding"], style.padding);
+  putLen(d, ["padding-left", "padding-right"], style.paddingX);
+  putLen(d, ["padding-top", "padding-bottom"], style.paddingY);
+  putLen(d, ["margin"], style.margin);
+  if (style.marginX === "auto") d["margin-left"] = d["margin-right"] = "auto";
+  else putLen(d, ["margin-left", "margin-right"], style.marginX);
+  putLen(d, ["margin-top", "margin-bottom"], style.marginY);
+  putLen(d, ["border-radius"], style.radius);
+  putLen(d, ["max-width"], style.maxWidth);
+  putLen(d, ["min-height"], style.minHeight);
+  put(d, "aspect-ratio", typeof style.aspectRatio === "string" ? style.aspectRatio : void 0);
+  if (style.sticky === true) {
+    d["position"] = "sticky";
+    d["top"] = "0";
+  }
+  if (typeof style.zIndex === "number" && Number.isFinite(style.zIndex)) d["z-index"] = String(Math.trunc(style.zIndex));
+  const overflow = inSet(OVERFLOW, style.overflow);
+  if (overflow) d["overflow"] = overflow;
+  put(d, "background", typeof style.background === "string" ? style.background : void 0);
+  const backgroundSize = inSet(BACKGROUND_SIZE, style.backgroundSize);
+  if (backgroundSize) d["background-size"] = backgroundSize;
+  put(d, "background-position", typeof style.backgroundPosition === "string" ? style.backgroundPosition : void 0);
+  put(d, "color", typeof style.color === "string" ? style.color : void 0);
+  const opacity = numberToCss(style.opacity);
+  if (opacity !== null) d["opacity"] = opacity;
+  put(d, "font-family", typeof style.fontFamily === "string" ? style.fontFamily : void 0);
+  putLen(d, ["font-size"], style.fontSize);
+  const fontWeight = numberToCss(style.fontWeight);
+  if (fontWeight !== null) d["font-weight"] = fontWeight;
+  const lineHeight = numberToCss(style.lineHeight);
+  if (lineHeight !== null) d["line-height"] = lineHeight;
+  const textAlign = inSet(TEXT_ALIGN, style.textAlign);
+  if (textAlign) d["text-align"] = textAlign;
+  putLen(d, ["letter-spacing"], style.letterSpacing);
+  const textTransform = inSet(TEXT_TRANSFORM, style.textTransform);
+  if (textTransform) d["text-transform"] = textTransform;
+  put(d, "border", typeof style.border === "string" ? style.border : void 0);
+  put(d, "box-shadow", typeof style.boxShadow === "string" ? style.boxShadow : void 0);
+  put(d, "transform", typeof style.transform === "string" ? style.transform : void 0);
+  put(d, "filter", typeof style.filter === "string" ? style.filter : void 0);
+  putLen(d, ["gap"], style.gap);
+  const align = keyword(ALIGN, style.align);
+  if (align) d["align-items"] = align;
+  const justify = keyword(JUSTIFY, style.justify);
+  if (justify) d["justify-content"] = justify;
+  return d;
+}
+function shownDisplay(node) {
+  if (node.layout === "stack") return "flex";
+  if (node.layout === "grid") return "grid";
+  return "block";
+}
+function gridColumns(style) {
+  const min = lengthToCss(style.columnMin);
+  if (min !== null) return `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))`;
+  if (typeof style.columns === "number" && Number.isFinite(style.columns)) return `repeat(${Math.max(1, Math.trunc(style.columns))}, 1fr)`;
+  return void 0;
+}
+function containerDecls(node, style, isBase) {
+  const d = {};
+  if (node.layout === "stack") {
+    if (isBase) d["display"] = "flex";
+    const direction = inSet(DIRECTIONS, style.direction);
+    if (isBase || direction) d["flex-direction"] = direction ?? "column";
+    if (style.wrap !== void 0) d["flex-wrap"] = style.wrap ? "wrap" : "nowrap";
+  } else if (node.layout === "grid") {
+    if (isBase) d["display"] = "grid";
+    const cols = gridColumns(style);
+    if (isBase || cols !== void 0) d["grid-template-columns"] = cols ?? "repeat(1, 1fr)";
+  } else if (node.layout === "free" && isBase) {
+    d["position"] = "relative";
+  }
+  return d;
+}
+function visibilityDecls(node, style, isBase) {
+  if (style.hidden === true) return { display: "none" };
+  if (style.hidden === false && !isBase) return { display: shownDisplay(node) };
+  return {};
+}
+function themeDecls(theme) {
+  const d = {};
+  const walk = (value, path) => {
+    if (typeof value === "string" || typeof value === "number" && Number.isFinite(value)) {
+      const key = path.map((p) => p.toLowerCase().replace(/[^a-z0-9-]/g, "")).filter(Boolean).join("-");
+      if (key) put(d, `--cms-${key}`, String(value));
+      return;
+    }
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      for (const [k, v] of Object.entries(value)) walk(v, [...path, k]);
+    }
+  };
+  if (typeof theme === "object" && theme !== null && !Array.isArray(theme)) {
+    for (const [k, v] of Object.entries(theme)) {
+      if (k !== "name") walk(v, [k]);
+    }
+  }
+  return d;
+}
+function constraintDecls(c, parentFree) {
+  const d = {};
+  const transforms = [];
+  if (parentFree) {
+    d["position"] = "absolute";
+    putLen(d, ["left"], c.left);
+    putLen(d, ["right"], c.right);
+    putLen(d, ["top"], c.top);
+    putLen(d, ["bottom"], c.bottom);
+    if (c.centerX) {
+      d["left"] = "50%";
+      transforms.push("translateX(-50%)");
+    }
+    if (c.centerY) {
+      d["top"] = "50%";
+      transforms.push("translateY(-50%)");
+    }
+    if (transforms.length) d["transform"] = transforms.join(" ");
+  }
+  const width = sizeToCss(c.width);
+  if (width !== null) d["width"] = width;
+  const height = sizeToCss(c.height);
+  if (height !== null) d["height"] = height;
+  return d;
+}
+function isParentFree(doc, node) {
+  if (node.parent === null) return false;
+  const parent = own(doc.nodes, node.parent);
+  return !parent || parent.layout === void 0 || parent.layout === "free";
+}
+function serializeRule(selector, decls, indent) {
+  const props = Object.keys(decls).sort();
+  if (props.length === 0) return "";
+  const body = props.map((p) => `${indent}  ${p}: ${decls[p]};`).join("\n");
+  return `${indent}${selector} {
+${body}
+${indent}}`;
+}
+function emitDocCss(doc) {
+  if (!hasNodeMap(doc)) return "";
+  const breakpointPx = DEFAULT_BREAKPOINTS;
+  const blocks = [];
+  const themeRule = serializeRule(":root", themeDecls(doc.theme), "");
+  if (themeRule) blocks.push(themeRule);
+  for (const id of Object.keys(doc.nodes).sort()) {
+    const node = withNodeDefaults(doc.nodes[id]);
+    const selector = selectorFor(id);
+    const parentFree = isParentFree(doc, node);
+    const base = {
+      ...containerDecls(node, node.style.base, true),
+      ...node.constraints ? constraintDecls(node.constraints.base, parentFree) : {},
+      ...styleDecls(node.style.base),
+      ...visibilityDecls(node, node.style.base, true)
+    };
+    const baseRule = serializeRule(selector, base, "");
+    if (baseRule) blocks.push(baseRule);
+    for (const bp of doc.breakpoints) {
+      if (bp === "base") continue;
+      const px = own(breakpointPx, bp);
+      if (typeof px !== "number") continue;
+      const bpStyle = own(node.style, bp);
+      const bpConstraints = node.constraints ? own(node.constraints, bp) : void 0;
+      const decls = {
+        ...bpStyle ? containerDecls(node, bpStyle, false) : {},
+        ...bpConstraints ? constraintDecls(bpConstraints, parentFree) : {},
+        ...bpStyle ? styleDecls(bpStyle) : {},
+        ...bpStyle ? visibilityDecls(node, bpStyle, false) : {}
+      };
+      const inner = serializeRule(selector, decls, "  ");
+      if (inner) blocks.push(`@media (min-width: ${px}px) {
+${inner}
+}`);
+    }
+  }
+  if (blocks.length === 0 && Object.keys(doc.nodes).length === 0) return "";
+  return [BASE_CSS, ...blocks].join("\n\n") + "\n";
+}
+function getPath(data, path) {
+  return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], data);
+}
+function resolveValue(v, data) {
+  if (v === void 0 || v === null) return v;
+  if (isBinding(v)) return getPath(data, v.$bind);
+  return v;
+}
+var LANDMARK_TAGS = ["section", "header", "nav", "main", "footer", "article", "aside", "div"];
+var LANDMARKS = new Set(LANDMARK_TAGS);
+var CONTAINERS = /* @__PURE__ */ new Set(["stack", "grid", "frame", "shape", "card"]);
+var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+function safeHref(raw) {
+  const href = raw.trim();
+  if (!href) return null;
+  const probe = href.replace(/[\u0000- \u007f]+/g, "");
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(probe);
+  if (scheme && !SAFE_SCHEMES.has(scheme[1].toLowerCase())) return null;
+  return href;
+}
+var ANCHOR_PATTERN = /^[a-z][a-z0-9-]{0,63}$/;
+function anchorFor(node, text) {
+  const anchor = text(node.props.anchor);
+  return ANCHOR_PATTERN.test(anchor) ? anchor : null;
+}
+function elementFor(node, text) {
+  const as = text(node.props.as);
+  switch (node.type) {
+    case "heading": {
+      const level = Number(text(node.props.level) || 2);
+      return { tag: Number.isInteger(level) && level >= 1 && level <= 6 ? `h${level}` : "h2" };
+    }
+    case "text":
+      return { tag: "p" };
+    case "section":
+      return { tag: LANDMARKS.has(as) ? as : "section" };
+    case "list":
+      return { tag: text(node.props.ordered) === "true" ? "ol" : "ul" };
+    case "button":
+    case "link": {
+      const href = safeHref(text(node.props.href));
+      const attrs = {};
+      if (href !== null) {
+        attrs.href = href;
+        if (/^https?:\/\//i.test(href)) attrs.rel = "noopener noreferrer";
+      }
+      if (node.type === "button") attrs["data-cms-button"] = BUTTON_VARIANTS.has(text(node.props.variant)) ? text(node.props.variant) : "primary";
+      return { tag: href !== null ? "a" : node.type === "link" ? "span" : "div", attrs };
+    }
+    case "callout": {
+      const variant = text(node.props.variant);
+      return { tag: "div", attrs: { "data-cms-callout": CALLOUT_VARIANTS.has(variant) ? variant : "info" } };
+    }
+    default:
+      return { tag: CONTAINERS.has(node.type) && LANDMARKS.has(as) ? as : "div" };
+  }
+}
+var defaultRegistry = {
+  section: ({ children }) => children,
+  stack: ({ children }) => children,
+  grid: ({ children }) => children,
+  frame: ({ children }) => children,
+  shape: ({ children }) => children,
+  card: ({ children }) => children,
+  text: ({ node, text }) => text(node.props.content),
+  heading: ({ node, text }) => text(node.props.content) || "Heading",
+  // Rich text — inline-formatted HTML (gradient spans, links, <code>, …) that
+  // plain `text` can't express. The author owns the markup (it's their content).
+  richtext: ({ node, text }) => /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: text(node.props.html) } }),
+  // The [data-cms] element is already the <a> (see elementFor), so a link renders its label only.
+  link: ({ node, text }) => text(node.props.content) || "link",
+  list: ({ node, resolve }) => {
+    const items = resolve(node.props.items);
+    return Array.isArray(items) ? items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item === null || item === void 0 ? "" : String(item) }, i)) : null;
+  },
+  // Looks come from the base stylesheet (render/css.ts BASE_CSS), never from
+  // inline style objects, so the PHP renderer emits the same markup.
+  divider: () => /* @__PURE__ */ jsx("hr", {}),
+  callout: ({ node, text }) => text(node.props.content) || "Callout",
+  code: ({ node, text }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: text(node.props.content) }) }),
+  button: ({ node, text }) => text(node.props.label) || text(node.props.content) || "Button",
+  image: ({ node, text }) => {
+    const fit = text(node.props.fit);
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: text(node.props.src) || void 0,
+        alt: text(node.props.alt),
+        loading: text(node.props.loading) === "eager" ? "eager" : "lazy",
+        "data-cms-fit": IMAGE_FITS.has(fit) && fit !== "cover" ? fit : void 0
+      }
+    );
+  }
+};
+var IMAGE_FITS = /* @__PURE__ */ new Set(["cover", "contain", "fill", "none", "scale-down"]);
+var BUTTON_VARIANTS = /* @__PURE__ */ new Set(["primary", "outline", "ghost"]);
+var CALLOUT_VARIANTS = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
+function RenderNode({ doc, id, registry = defaultRegistry, data }) {
+  const stored = own(doc.nodes, id);
+  if (!stored) return null;
+  const node = withNodeDefaults(stored);
+  if (node.type === "repeater") {
+    const arr = resolveValue(node.props.items, data);
+    const items = Array.isArray(arr) ? arr : [];
+    const template = childrenOf(doc, id)[0];
+    return /* @__PURE__ */ jsx("div", { "data-cms": node.id, className: node.className, children: template ? items.map((item, index) => /* @__PURE__ */ jsx(RenderNode, { doc, id: template.id, registry, data: { ...data, item, index } }, index)) : null });
+  }
+  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsx(RenderNode, { doc, id: child.id, registry, data }, child.id));
+  const resolve = (v) => resolveValue(v, data);
+  const text = (v) => {
+    const r = resolve(v);
+    return r === void 0 || r === null ? "" : String(r);
+  };
+  const renderer = registry[node.type];
+  const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;
+  const { tag, attrs } = elementFor(node, text);
+  const anchor = anchorFor(node, text);
+  return createElement(
+    tag,
+    {
+      "data-cms": node.id,
+      "data-cms-island": node.island ? node.type : void 0,
+      className: node.className,
+      ...anchor ? { id: anchor } : {},
+      ...attrs
+    },
+    inner
+  );
+}
+function CmsPage({
+  doc: input,
+  registry = defaultRegistry,
+  data,
+  includeStyles = true
+}) {
+  const doc = useMemo(() => migrateDoc(input), [input]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    includeStyles ? /* @__PURE__ */ jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
+    rootIds(doc).map((id) => /* @__PURE__ */ jsx(RenderNode, { doc, id, registry, data }, id))
+  ] });
+}
+
+export { CmsPage, DEFAULT_BREAKPOINTS, RenderNode, childrenOf, defaultRegistry, descendantIds, emitDocCss, emptyDoc, getPath, hasNodeMap, invert, isBinding, lastRootId, migrateDoc, migrateDocVerbose, needsMigration, reduce, reduceAll, resolveValue, rootIds, withNodeDefaults };
+//# sourceMappingURL=chunk-IRG5IKKO.js.map
+//# sourceMappingURL=chunk-IRG5IKKO.js.map