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

package/dist/editor.d.cts

@@ -1,6 +1,6 @@
-export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-wdlYQMHg.cjs';
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-CIRm2oi-.cjs';
 import { ReactNode, ReactElement } from 'react';
-import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-CUNaBqTs.cjs';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-B4FaQDip.cjs';
 import '@particle-academy/fancy-doc-commons';
 
 /** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */

package/dist/editor.d.ts

@@ -1,6 +1,6 @@
-export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-aPH5falI.js';
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-DZDD9qpS.js';
 import { ReactNode, ReactElement } from 'react';
-import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-CUNaBqTs.js';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-B4FaQDip.js';
 import '@particle-academy/fancy-doc-commons';
 
 /** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */

package/dist/editor.js

@@ -1,6 +1,6 @@
-import { useEditor, useLatestRef, CONTAINER_TYPES, ADD_DEFAULTS, ADD_MENU } from './chunk-SYRU2X45.js';
-export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-SYRU2X45.js';
-import { isBinding, lastRootId, childrenOf, CmsPage, defaultRegistry } from './chunk-LY6ID2J2.js';
+import { useEditor, useLatestRef, CONTAINER_TYPES, ADD_DEFAULTS, ADD_MENU } from './chunk-IOMIYI45.js';
+export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-IOMIYI45.js';
+import { isBinding, lastRootId, childrenOf, CmsPage, defaultRegistry } from './chunk-SJYKJ6SG.js';
 import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { ContextMenu } from '@particle-academy/react-fancy';
 import { fractionalKey } from '@particle-academy/fancy-doc-commons';

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var fancyDocCommons = require('@particle-academy/fancy-doc-commons');
-var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/document/types.ts
 function isBinding(v) {
@@ -61,6 +61,17 @@ function bindingSources(doc) {
   }
   return [...seen.values()];
 }
+
+// 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 fancyDocCommons.childrenOf(doc, parent);
 }
@@ -76,7 +87,7 @@ function descendantIds(doc, id) {
   return fancyDocCommons.descendantsOf(doc, id);
 }
 function patchNode(doc, id, patch) {
-  const node = doc.nodes[id];
+  const node = own(doc.nodes, id);
   return {
     ...doc,
     nodes: { ...doc.nodes, [id]: { ...node, ...patch } },
@@ -90,8 +101,8 @@ function reduce(doc, op, opts = {}) {
   };
   switch (op.t) {
     case "insert_node": {
-      if (doc.nodes[op.node.id]) return invalid("node id already exists");
-      if (op.node.parent !== null && !doc.nodes[op.node.parent]) return invalid("parent not found");
+      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 },
@@ -99,11 +110,11 @@ function reduce(doc, op, opts = {}) {
       };
     }
     case "remove_node": {
-      if (!doc.nodes[op.id]) return invalid("node not found");
+      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)) nodes[id] = doc.nodes[id];
+        if (!dead.has(id)) setOwn(nodes, id, own(doc.nodes, id));
       }
       return {
         ...doc,
@@ -112,10 +123,10 @@ function reduce(doc, op, opts = {}) {
       };
     }
     case "move_node": {
-      const node = doc.nodes[op.id];
+      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 && !doc.nodes[op.parent]) return invalid("new parent not found");
+      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");
       }
@@ -126,34 +137,35 @@ function reduce(doc, op, opts = {}) {
       };
     }
     case "set_node_props": {
-      if (!doc.nodes[op.id]) return invalid("node not found");
+      const node = own(doc.nodes, op.id);
+      if (!node) return invalid("node not found");
       return patchNode(doc, op.id, {
-        props: { ...doc.nodes[op.id].props, ...op.patch }
+        props: { ...node.props, ...op.patch }
       });
     }
     case "set_layout": {
-      if (!doc.nodes[op.id]) return invalid("node not found");
+      if (!own(doc.nodes, op.id)) return invalid("node not found");
       return patchNode(doc, op.id, { layout: op.layout });
     }
     case "set_style": {
-      const node = doc.nodes[op.id];
+      const node = own(doc.nodes, op.id);
       if (!node) return invalid("node not found");
-      const prev = node.style[op.breakpoint] ?? {};
+      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 = doc.nodes[op.id];
+      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 = base[op.breakpoint] ?? {};
+      const prev = own(base, op.breakpoint) ?? {};
       return patchNode(doc, op.id, {
         constraints: { ...base, [op.breakpoint]: { ...prev, ...op.patch } }
       });
     }
     case "set_animation": {
-      const node = doc.nodes[op.id];
+      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);
@@ -162,14 +174,14 @@ function reduce(doc, op, opts = {}) {
       });
     }
     case "remove_animation": {
-      const node = doc.nodes[op.id];
+      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 = doc.nodes[op.id];
+      const node = own(doc.nodes, op.id);
       if (!node) return invalid("node not found");
       const list = node.actions ?? [];
       let actions;
@@ -185,13 +197,13 @@ function reduce(doc, op, opts = {}) {
     case "reorder_roots": {
       const currentRoots = childrenOf(doc, null);
       const current = new Set(currentRoots.map((n) => n.id));
-      const same = op.order.length === currentRoots.length && op.order.every((id) => current.has(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 = fancyDocCommons.fractionalKey(prev, null);
-        nodes[id] = { ...nodes[id], order: prev };
+        setOwn(nodes, id, { ...own(nodes, id), order: prev });
       }
       return { ...doc, nodes, seq: doc.seq + 1 };
     }
@@ -207,17 +219,17 @@ function invert(doc, op) {
     case "insert_node":
       return [{ t: "remove_node", id: op.node.id }];
     case "remove_node": {
-      const node = doc.nodes[op.id];
+      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: doc.nodes[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 = doc.nodes[op.id];
+      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) {
@@ -226,19 +238,19 @@ function invert(doc, op) {
       return back;
     }
     case "set_node_props": {
-      const node = doc.nodes[op.id];
+      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 = doc.nodes[op.id];
+      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 = doc.nodes[op.id];
+      const node = own(doc.nodes, op.id);
       if (!node) return [];
       const prevBp = node.style[op.breakpoint] ?? {};
       const prev = {};
@@ -276,7 +288,7 @@ function migrateDocVerbose(input2) {
   const ordered = [];
   const seen = /* @__PURE__ */ new Set();
   for (const id of sections) {
-    if (!normalized.nodes[id]) {
+    if (!own(normalized.nodes, id)) {
       danglingIds.push(id);
       continue;
     }
@@ -290,7 +302,7 @@ function migrateDocVerbose(input2) {
   let prev = null;
   for (const id of finalOrder) {
     const key = fancyDocCommons.fractionalKey(prev, null);
-    nodes[id] = { ...nodes[id], order: key };
+    setOwn(nodes, id, { ...own(nodes, id), order: key });
     prev = key;
   }
   const { sections: _dropped, ...rest } = legacy;
@@ -309,15 +321,36 @@ function needsMigration(input2) {
 }
 
 // src/render/css.ts
-var selectorFor = (id) => `[data-cms="${id}"]`;
+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 UNITS = /* @__PURE__ */ new Set(["px", "%", "vw", "vh", "rem", "fr"]);
 function lengthToCss(len) {
-  return `${len.value}${len.unit}`;
+  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",
@@ -331,51 +364,150 @@ var JUSTIFY = {
   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 = {};
-  if (style.padding) d["padding"] = lengthToCss(style.padding);
-  if (style.margin) d["margin"] = lengthToCss(style.margin);
-  if (style.radius) d["border-radius"] = lengthToCss(style.radius);
-  if (style.background !== void 0) d["background"] = style.background;
-  if (style.color !== void 0) d["color"] = style.color;
-  if (style.opacity !== void 0) d["opacity"] = String(style.opacity);
-  if (style.fontFamily !== void 0) d["font-family"] = style.fontFamily;
-  if (style.fontSize) d["font-size"] = lengthToCss(style.fontSize);
-  if (style.fontWeight !== void 0) d["font-weight"] = String(style.fontWeight);
-  if (style.lineHeight !== void 0) d["line-height"] = String(style.lineHeight);
-  if (style.textAlign !== void 0) d["text-align"] = style.textAlign;
-  if (style.letterSpacing) d["letter-spacing"] = lengthToCss(style.letterSpacing);
-  if (style.border !== void 0) d["border"] = style.border;
-  if (style.boxShadow !== void 0) d["box-shadow"] = style.boxShadow;
-  if (style.transform !== void 0) d["transform"] = style.transform;
-  if (style.filter !== void 0) d["filter"] = style.filter;
-  if (style.gap) d["gap"] = lengthToCss(style.gap);
-  if (style.align !== void 0) d["align-items"] = ALIGN[style.align] ?? style.align;
-  if (style.justify !== void 0) d["justify-content"] = JUSTIFY[style.justify] ?? style.justify;
+  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 layoutDecls(node) {
+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") {
-    d["display"] = "flex";
-    d["flex-direction"] = node.style.base.direction ?? "column";
+    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") {
-    d["display"] = "grid";
-    d["grid-template-columns"] = `repeat(${node.style.base.columns ?? 1}, 1fr)`;
-  } else if (node.layout === "free") {
+    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";
-    if (c.left) d["left"] = lengthToCss(c.left);
-    if (c.right) d["right"] = lengthToCss(c.right);
-    if (c.top) d["top"] = lengthToCss(c.top);
-    if (c.bottom) d["bottom"] = lengthToCss(c.bottom);
+    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%)");
@@ -386,13 +518,15 @@ function constraintDecls(c, parentFree) {
     }
     if (transforms.length) d["transform"] = transforms.join(" ");
   }
-  if (c.width) d["width"] = sizeToCss(c.width);
-  if (c.height) d["height"] = sizeToCss(c.height);
+  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 = doc.nodes[node.parent];
+  const parent = own(doc.nodes, node.parent);
   return !parent || parent.layout === void 0 || parent.layout === "free";
 }
 function serializeRule(selector, decls, indent) {
@@ -407,14 +541,17 @@ 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 = doc.nodes[id];
     const selector = selectorFor(id);
     const parentFree = isParentFree(doc, node);
     const base = {
-      ...layoutDecls(node),
+      ...containerDecls(node, node.style.base, true),
       ...node.constraints ? constraintDecls(node.constraints.base, parentFree) : {},
-      ...styleDecls(node.style.base)
+      ...styleDecls(node.style.base),
+      ...visibilityDecls(node, node.style.base, true)
     };
     const baseRule = serializeRule(selector, base, "");
     if (baseRule) blocks.push(baseRule);
@@ -422,9 +559,12 @@ function emitDocCss(doc) {
       if (bp === "base") continue;
       const px = breakpointPx[bp];
       if (px === void 0) continue;
+      const bpStyle = node.style[bp];
       const decls = {
+        ...bpStyle ? containerDecls(node, bpStyle, false) : {},
         ...node.constraints?.[bp] ? constraintDecls(node.constraints[bp], parentFree) : {},
-        ...node.style[bp] ? styleDecls(node.style[bp]) : {}
+        ...bpStyle ? styleDecls(bpStyle) : {},
+        ...bpStyle ? visibilityDecls(node, bpStyle, false) : {}
       };
       const inner = serializeRule(selector, decls, "  ");
       if (inner) blocks.push(`@media (min-width: ${px}px) {
@@ -442,6 +582,48 @@ function resolveValue(v, data) {
   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));
+      if (href === null) return { tag: node.type === "link" ? "span" : "div" };
+      const attrs = { href };
+      if (/^https?:\/\//i.test(href)) attrs.rel = "noopener noreferrer";
+      return { tag: "a", attrs };
+    }
+    default:
+      return { tag: CONTAINERS.has(node.type) && LANDMARKS.has(as) ? as : "div" };
+  }
+}
 var defaultRegistry = {
   section: ({ children }) => children,
   stack: ({ children }) => children,
@@ -454,7 +636,12 @@ var defaultRegistry = {
   // 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__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: text(node.props.html) } }),
-  link: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: text(node.props.href) || "#", style: { color: "inherit", textDecoration: "underline" }, children: text(node.props.content) || "link" }),
+  // 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__ */ jsxRuntime.jsx("li", { children: item === null || item === void 0 ? "" : String(item) }, i)) : null;
+  },
   divider: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: 0 } }),
   callout: ({ node, text }) => {
     const tone = { info: "#3b82f6", success: "#10b981", warning: "#f59e0b", danger: "#ef4444" }[text(node.props.variant)] ?? "#3b82f6";
@@ -466,15 +653,20 @@ var defaultRegistry = {
     const variant = text(node.props.variant) || "primary";
     return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label2 });
   },
-  image: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src: text(node.props.src),
-      alt: text(node.props.alt),
-      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-    }
-  )
+  image: ({ node, text }) => {
+    const fit = text(node.props.fit);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: text(node.props.src),
+        alt: text(node.props.alt),
+        loading: text(node.props.loading) === "eager" ? "eager" : "lazy",
+        style: { width: "100%", height: "100%", objectFit: IMAGE_FITS.has(fit) ? fit : "cover", display: "block" }
+      }
+    );
+  }
 };
+var IMAGE_FITS = /* @__PURE__ */ new Set(["cover", "contain", "fill", "none", "scale-down"]);
 function buttonStyle(variant) {
   const base = {
     display: "inline-flex",
@@ -493,7 +685,7 @@ function buttonStyle(variant) {
   return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
 }
 function RenderNode({ doc, id, registry = defaultRegistry, data }) {
-  const node = doc.nodes[id];
+  const node = own(doc.nodes, id);
   if (!node) return null;
   if (node.type === "repeater") {
     const arr = resolveValue(node.props.items, data);
@@ -509,7 +701,19 @@ function RenderNode({ doc, id, registry = defaultRegistry, data }) {
   };
   const renderer = registry[node.type];
   const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, className: node.className, children: inner });
+  const { tag, attrs } = elementFor(node, text);
+  const anchor = anchorFor(node, text);
+  return react.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: input2,
@@ -911,7 +1115,8 @@ var ADD_DEFAULTS = {
   divider: { type: "divider", props: {}, style: {} },
   code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, style: {} },
   richtext: { type: "richtext", props: { html: "<p>Rich <strong>text</strong> with <em>inline</em> formatting.</p>" }, style: {} },
-  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
+  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" },
+  list: { type: "list", props: { items: ["First point", "Second point"], ordered: false }, style: {} }
 };
 var ADD_MENU = [
   { kind: "heading", label: "Heading" },
@@ -927,6 +1132,7 @@ var ADD_MENU = [
   { kind: "divider", label: "Divider" },
   { kind: "code", label: "Code" },
   { kind: "richtext", label: "Rich text" },
+  { kind: "list", label: "List" },
   { kind: "repeater", label: "Repeater" }
 ];
 function resolveInsertParent(doc, selectedId) {