@particle-academy/fancy-cms-ui 0.8.0 → 0.9.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-CIRm2oi-.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-B2kVZJA0.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-B4FaQDip.cjs';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-F2TAMjhx.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-DZDD9qpS.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-BQSictH3.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-B4FaQDip.js';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-F2TAMjhx.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-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 { useEditor, useLatestRef, CONTAINER_TYPES, ADD_DEFAULTS, ADD_MENU } from './chunk-BVMSHUQF.js';
+export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-BVMSHUQF.js';
+import { isBinding, lastRootId, childrenOf, CmsPage, defaultRegistry } from './chunk-IRG5IKKO.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

@@ -13,6 +13,12 @@ function hasNodeMap(value) {
   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,
@@ -332,6 +338,28 @@ function cssString(value) {
   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;
@@ -544,7 +572,7 @@ function emitDocCss(doc) {
   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 node = withNodeDefaults(doc.nodes[id]);
     const selector = selectorFor(id);
     const parentFree = isParentFree(doc, node);
     const base = {
@@ -557,12 +585,13 @@ function emitDocCss(doc) {
     if (baseRule) blocks.push(baseRule);
     for (const bp of doc.breakpoints) {
       if (bp === "base") continue;
-      const px = breakpointPx[bp];
-      if (px === void 0) continue;
-      const bpStyle = node.style[bp];
+      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) : {},
-        ...node.constraints?.[bp] ? constraintDecls(node.constraints[bp], parentFree) : {},
+        ...bpConstraints ? constraintDecls(bpConstraints, parentFree) : {},
         ...bpStyle ? styleDecls(bpStyle) : {},
         ...bpStyle ? visibilityDecls(node, bpStyle, false) : {}
       };
@@ -572,7 +601,8 @@ ${inner}
 }`);
     }
   }
-  return blocks.join("\n\n") + (blocks.length ? "\n" : "");
+  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);
@@ -615,10 +645,17 @@ function elementFor(node, text) {
     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 };
+      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" };
@@ -642,51 +679,32 @@ var defaultRegistry = {
     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";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 10, padding: "12px 14px", borderRadius: 10, background: `${tone}14`, borderLeft: `3px solid ${tone}` }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: text(node.props.content) || "Callout" }) });
-  },
-  code: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, padding: "12px 14px", borderRadius: 10, background: "#0b1220", color: "#e2e8f0", fontFamily: "ui-monospace, monospace", fontSize: 13, overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: text(node.props.content) }) }),
-  button: ({ node, text }) => {
-    const label2 = text(node.props.label) || text(node.props.content) || "Button";
-    const variant = text(node.props.variant) || "primary";
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label2 });
-  },
+  // 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__ */ jsxRuntime.jsx("hr", {}),
+  callout: ({ node, text }) => text(node.props.content) || "Callout",
+  code: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       "img",
       {
-        src: text(node.props.src),
+        src: text(node.props.src) || void 0,
         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" }
+        "data-cms-fit": IMAGE_FITS.has(fit) && fit !== "cover" ? fit : void 0
       }
     );
   }
 };
 var IMAGE_FITS = /* @__PURE__ */ new Set(["cover", "contain", "fill", "none", "scale-down"]);
-function buttonStyle(variant) {
-  const base = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    padding: "9px 16px",
-    borderRadius: 8,
-    fontWeight: 600,
-    fontSize: 14,
-    lineHeight: 1,
-    cursor: "pointer",
-    userSelect: "none"
-  };
-  if (variant === "ghost") return { ...base, background: "transparent", color: "inherit", border: "1px solid currentColor" };
-  if (variant === "outline") return { ...base, background: "transparent", color: "#7c3aed", border: "1px solid #7c3aed" };
-  return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
-}
+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 node = own(doc.nodes, id);
-  if (!node) return null;
+  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 : [];
@@ -1355,5 +1373,6 @@ exports.resolveInsertParent = resolveInsertParent;
 exports.resolveValue = resolveValue;
 exports.rootIds = rootIds;
 exports.useEditor = useEditor;
+exports.withNodeDefaults = withNodeDefaults;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map