@bettercms-ai/convert 0.20.1 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @bettercms-ai/convert
 
+## 0.22.0
+
+### Minor Changes
+
+- c0afef4: The emitted helper (v11) paints the same section design keys as `blockStyleToCss`: `theme`, `bg`/`bgCustom`, `bgImage` (http(s) or root-relative only), `corner`, `shadow`, `fullHeight`, `opacity`, `borderTop`/`borderBottom` and the px padding sliders. A converted section root's `data-bcms-style` promise, that its inline style is `blockStyleToCss(block.style)`, holds again for sections styled in the visual editor. Helpers at v10 and older are recognised and upgraded. The content column (`contentWidth`) is still not drawn on converted roots.
+
+### Patch Changes
+
+- Updated dependencies [c0afef4]
+- Updated dependencies [5c6db8e]
+  - @bettercms-ai/types@1.30.0
+
+## 0.21.0
+
+### Minor Changes
+
+- a99b2c3: A site's own section root can now declare that it applies the section's style. `sectionRootAttrs(block)` from `@bettercms-ai/astro` and `@bettercms-ai/next` returns `data-bcms-block`, `data-bcms-style` and the block's `blockStyleToCss(block.style)` as `style`. Spread it on the root: `<section {...sectionRootAttrs(block)}>`. When the block has no style there is no `style` attribute, but the marker is still there. The BetterCMS editor shows a section's spacing handles on a site-rendered page only when every section root it finds carries the marker. `bettercms-convert --componentize` now stamps the marker and the placement's style on every section root it extracts: the helper (v10) inlines the same declarations, and the registry passes each placement's `block.style` down as `blockStyle`. A root that already has its own `style` attribute, or a spread, is left unmarked.
+
+### Patch Changes
+
+- Updated dependencies [d84d241]
+  - @bettercms-ai/types@1.29.0
+
 ## 0.20.1
 
 ### Patch Changes

package/dist/cli.js

@@ -4190,7 +4190,7 @@ async function bindImages(ctx, targets) {
 
 // src/helper.ts
 import { createHash as createHash2 } from "crypto";
-var HELPER_VERSION = 9;
+var HELPER_VERSION = 11;
 var HEADER = "// @bettercms-ai/convert helper v";
 var HELPER_PATH = Object.fromEntries(
   Object.keys(DIALECT_RULES).map((d) => [d, DIALECT_RULES[d].helper])
@@ -4514,6 +4514,144 @@ export function bcmsFields(
     return (own ? undefined : moved(key, rest.slice(key?.length ?? 0))) ?? lane + rest;
   };
 }
+
+/**
+ * C3/C4 \u2014 a section's \`block.style\` as the inline CSS the BetterCMS SDK draws for it.
+ *
+ * A converted section root carries \`data-bcms-style\` beside \`data-bcms-block\`, which is the
+ * site's promise to the editor that "this root's inline style is \`blockStyleToCss(block.style)\`"
+ * \u2014 and the editor only offers a section's spacing handles where every stamped root makes it.
+ * This is \`blockStyleToCss\` from \`@bettercms-ai/types\`, INLINED for the same reason \`readPath\`
+ * is (zero dependencies); \`helper.test.ts\` runs it against the original over a token table.
+ */
+const STYLE_SPACE_PX: Record<string, string> = { none: "0", xs: "4px", sm: "8px", md: "16px", lg: "32px", xl: "64px" };
+const STYLE_FONT_SIZE_REM: Record<string, string> = {
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.25rem",
+  xl: "1.5rem",
+  "2xl": "2rem",
+  "3xl": "2.25rem",
+  "4xl": "3rem",
+  "5xl": "4rem",
+};
+const STYLE_WEIGHT: Record<string, number> = { normal: 400, medium: 500, semibold: 600, bold: 700 };
+const STYLE_RADIUS_PX: Record<string, string> = { none: "0", sm: "4px", md: "8px", lg: "16px", full: "9999px" };
+const STYLE_COLOR_HEX: Record<string, string> = { white: "#ffffff", black: "#111111", muted: "#6b7280", mutedBg: "#f3f4f6", primary: "#111111", accent: "#4f46e5" };
+const STYLE_SPACE_TOKEN_PX: Record<string, string> = {
+  "section-space-none": "0px",
+  "section-space-small": "32px",
+  "section-space-medium": "64px",
+  "section-space-large": "96px",
+  "section-space-xlarge": "144px",
+  "section-space-nav-overlap": "-72px",
+  "space-none": "0px",
+  "space-s": "8px",
+  "space-m": "16px",
+  "space-l": "32px",
+  "space-xl": "64px",
+};
+
+const STYLE_THEME: Record<string, { colorScheme: string; background: string; color: string }> = {
+  light: { colorScheme: "light", background: "#ffffff", color: "#111111" },
+  dark: { colorScheme: "dark", background: "#0b0b0d", color: "#f7f8f8" },
+};
+const STYLE_BG: Record<string, string> = {
+  surface: "var(--bcms-bg-surface,#ffffff)",
+  muted: "var(--bcms-bg-muted,#f3f4f6)",
+  accent: "var(--bcms-bg-accent,#4f46e5)",
+  dark: "var(--bcms-bg-dark,#0b0b0d)",
+};
+const STYLE_CORNER_PX: Record<string, string> = { "0": "0", s: "4px", m: "8px", l: "16px", xl: "24px", "2xl": "32px" };
+const STYLE_SHADOW: Record<string, string> = {
+  "0": "none",
+  s: "0 1px 2px rgba(0,0,0,.06)",
+  m: "0 4px 12px rgba(0,0,0,.08)",
+  l: "0 10px 24px rgba(0,0,0,.10)",
+  xl: "0 24px 48px rgba(0,0,0,.14)",
+};
+const STYLE_HAIRLINE = "1px solid rgba(0,0,0,.10)";
+
+/** A map entry by OWN key only, so a token like \`constructor\` never reaches CSS. */
+function styleOwn<T>(map: Record<string, T>, key: unknown): T | undefined {
+  return typeof key === "string" && Object.prototype.hasOwnProperty.call(map, key) ? map[key] : undefined;
+}
+
+/** An http(s) or root-relative url with nothing that could end \`url(\u2026)\`; "" for anything else. */
+function styleSafeUrl(raw: unknown): string {
+  if (typeof raw !== "string") return "";
+  const url = raw.trim();
+  if (!url || url.length > 2000) return "";
+  if (/["'()\\;]|\\s/.test(url)) return "";
+  if (url.startsWith("//")) return "";
+  if (url.startsWith("/")) return url;
+  return /^https?:\\/\\//i.test(url) ? url : "";
+}
+
+function styleClamp(n: number, lo: number, hi: number): number {
+  return Math.min(hi, Math.max(lo, n));
+}
+
+function styleSpaceToken(token: unknown): string {
+  const px = typeof token === "string" ? STYLE_SPACE_TOKEN_PX[token] : undefined;
+  return px ? "var(--bcms-" + token + "," + px + ")" : "";
+}
+
+/** The declarations as a React-style object (camelCase), or undefined when there are none. */
+export function bcmsSectionStyle(style: unknown): Record<string, string | number> | undefined {
+  if (!style || typeof style !== "object") return undefined;
+  const s = style as Record<string, string>;
+  const css: Record<string, string | number> = {};
+  if (s.paddingY && STYLE_SPACE_PX[s.paddingY] != null) { css.paddingTop = STYLE_SPACE_PX[s.paddingY]!; css.paddingBottom = STYLE_SPACE_PX[s.paddingY]!; }
+  if (s.paddingX && STYLE_SPACE_PX[s.paddingX] != null) { css.paddingLeft = STYLE_SPACE_PX[s.paddingX]!; css.paddingRight = STYLE_SPACE_PX[s.paddingX]!; }
+  const top = styleSpaceToken(s.spaceTop);
+  // A negative band that pulls content under the nav makes sense at the TOP only (SPACE_BOTTOM_TOKENS).
+  const bottom = /^section-space-(none|small|medium|large|xlarge)$/.test(String(s.spaceBottom)) ? styleSpaceToken(s.spaceBottom) : "";
+  const sides = styleSpaceToken(s.spaceSides);
+  const navOverlap = s.spaceTop === "section-space-nav-overlap";
+  if (top && !navOverlap) css.paddingTop = top;
+  if (bottom) css.paddingBottom = bottom;
+  if (sides) { css.paddingLeft = sides; css.paddingRight = sides; }
+  if (s.marginTop && STYLE_SPACE_PX[s.marginTop] != null) css.marginTop = STYLE_SPACE_PX[s.marginTop]!;
+  if (top && navOverlap) { css.marginTop = top; css.paddingTop = "calc(-1 * " + top + ")"; }
+  if (s.marginBottom && STYLE_SPACE_PX[s.marginBottom] != null) css.marginBottom = STYLE_SPACE_PX[s.marginBottom]!;
+  if (s.background && STYLE_COLOR_HEX[s.background]) css.background = STYLE_COLOR_HEX[s.background]!;
+  if (s.textColor && STYLE_COLOR_HEX[s.textColor]) css.color = STYLE_COLOR_HEX[s.textColor]!;
+  if (s.align === "left" || s.align === "center" || s.align === "right") css.textAlign = s.align;
+  if (s.fontSize && STYLE_FONT_SIZE_REM[s.fontSize]) css.fontSize = STYLE_FONT_SIZE_REM[s.fontSize]!;
+  if (s.weight && STYLE_WEIGHT[s.weight] != null) css.fontWeight = STYLE_WEIGHT[s.weight]!;
+  if (s.radius && STYLE_RADIUS_PX[s.radius] != null) css.borderRadius = STYLE_RADIUS_PX[s.radius]!;
+  const theme = styleOwn(STYLE_THEME, s.theme);
+  if (theme) { css.colorScheme = theme.colorScheme; css.background = theme.background; css.color = theme.color; }
+  if (s.bg === "custom") { if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(s.bgCustom ?? "")) css.background = s.bgCustom!; }
+  else if (styleOwn(STYLE_BG, s.bg)) css.background = styleOwn(STYLE_BG, s.bg)!;
+  const bgImage = styleSafeUrl(s.bgImage);
+  if (bgImage) { css.backgroundImage = "url(" + bgImage + ")"; css.backgroundSize = "cover"; css.backgroundPosition = "center"; }
+  const n = style as Record<string, unknown>;
+  if (!top && typeof n.paddingTop === "number") css.paddingTop = styleClamp(n.paddingTop, 0, 240) + "px";
+  if (!bottom && typeof n.paddingBottom === "number") css.paddingBottom = styleClamp(n.paddingBottom, 0, 240) + "px";
+  if (!sides && typeof n.paddingSides === "number") {
+    const px = styleClamp(n.paddingSides, 0, 240) + "px";
+    css.paddingLeft = px; css.paddingRight = px;
+  }
+  if (n.fullHeight === true) { css.minHeight = "100vh"; css.display = "flex"; css.flexDirection = "column"; css.justifyContent = "center"; }
+  if (typeof n.opacity === "number") css.opacity = styleClamp(n.opacity, 0, 100) / 100;
+  if (styleOwn(STYLE_CORNER_PX, s.corner) != null) { css.borderRadius = styleOwn(STYLE_CORNER_PX, s.corner)!; css.overflow = "hidden"; }
+  if (styleOwn(STYLE_SHADOW, s.shadow)) css.boxShadow = styleOwn(STYLE_SHADOW, s.shadow)!;
+  if (n.borderTop === true) css.borderTop = STYLE_HAIRLINE;
+  if (n.borderBottom === true) css.borderBottom = STYLE_HAIRLINE;
+  if ((style as { border?: unknown }).border === true) css.border = "1px solid currentColor";
+  return Object.keys(css).length ? css : undefined;
+}
+
+/** The same declarations as an Astro \`style\` string (kebab-case, \`;\`-joined), or undefined. */
+export function bcmsSectionStyleText(style: unknown): string | undefined {
+  const css = bcmsSectionStyle(style);
+  if (!css) return undefined;
+  return Object.entries(css)
+    .map(([k, v]) => k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()) + ":" + v)
+    .join(";");
+}
 `;
 }
 var HISTORICAL = {
@@ -4525,7 +4663,9 @@ var HISTORICAL = {
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
-    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9"
+    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3",
+    10: "ffcb59862972b15a67c5951e9f3b94ce5b8b50345e6aac2bfa5789cfc3136910"
   },
   "src/lib/bcms-content.ts": {
     1: "ae72ae14d706943d481c880d70da5789b4816ba1ba319a10fbc63ded4d0b42f2",
@@ -4535,7 +4675,9 @@ var HISTORICAL = {
     5: "c8c93655320fa65664611ba84541f3fa7bfa292cc9a2fd655373440b99049fba",
     6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5",
     7: "ed92fb88de953d9951abbe6a1edae1d048f4050eaf6fb607ac08167f94d8bcc7",
-    8: "1a6f669d76d42effe77f082436e9d21c0efa6fc499e919e3d116bc3a27a7f3d5"
+    8: "1a6f669d76d42effe77f082436e9d21c0efa6fc499e919e3d116bc3a27a7f3d5",
+    9: "eee9fb1635ae7d6f8f33676a1f390600ca24a62ee992775252273c73a011c494",
+    10: "35bb7c0e30f5c41fe68e52259ec4764de6de2734064fa0e1521f3338eef0a09e"
   },
   "composables/bcms-content.ts": {
     1: "c272412532efed7db64b6cf313b2bed4291f9951430412289c8a588b7f565407",
@@ -4545,7 +4687,9 @@ var HISTORICAL = {
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
-    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9"
+    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3",
+    10: "ffcb59862972b15a67c5951e9f3b94ce5b8b50345e6aac2bfa5789cfc3136910"
   }
 };
 var sha256 = (value) => createHash2("sha256").update(value, "utf8").digest("hex");
@@ -8303,7 +8447,9 @@ function componentFile(dialect, path, fromFile, content, parsed, resolved, pathP
   ]);
   const fieldsName = introduced.get("bcmsFields");
   const fieldName = introduced.get("bcmsField");
-  const { markup, bound, duplicates } = sectionMarkup(content, resolved.root, fieldName);
+  const styleReader = dialect === "astro" ? "bcmsSectionStyleText" : "bcmsSectionStyle";
+  const styled = rootStyleIsFree(content, resolved.root) && !reserved.has("blockStyle") && !reserved.has(styleReader);
+  const { markup, bound, duplicates } = sectionMarkup(content, resolved.root, fieldName, styled ? styleReader : null);
   if (duplicates.length > 0) return { content: "", free: [], duplicates, unconvertible: [] };
   const groupKey = resolved.section.groupKey;
   const locals = helperLocals(parsed, dialect, fromFile);
@@ -8314,7 +8460,8 @@ function componentFile(dialect, path, fromFile, content, parsed, resolved, pathP
     .../* @__PURE__ */ new Set([
       ...helperNames.map((h) => alias(h.name, h.local)),
       flat3 ? "bcmsSectionPaths" : "bcmsSection",
-      ...bound > 0 ? [alias("bcmsFields", fieldsName)] : []
+      ...bound > 0 ? [alias("bcmsFields", fieldsName)] : [],
+      ...styled ? [styleReader] : []
     ])
   ].sort();
   const helperSpecifier = relativeImport(path, HELPER_PATH[dialect]).replace(/\.tsx?$/, "");
@@ -8363,9 +8510,11 @@ interface Props {
   /** The instance's own copy, when an editor gave it any. Wins over the bound group. */
   overrides?: Record<string, unknown>;
   /** The page snapshot, so one component can serve every page whose group has this shape. */
-  page?: unknown;
+  page?: unknown;${styled ? `
+  /** The placement's \`block.style\` \u2014 painted on the root, which says so with \`data-bcms-style\`. */
+  blockStyle?: Record<string, unknown>;` : ""}
 }
-const { blockId, bind, bindPaths, overrides, page } = Astro.props;
+const { blockId, bind, bindPaths, overrides, page${styled ? ", blockStyle" : ""} } = Astro.props;
 ${carriedDeclarations}${declared}
 ---
 ${markup}
@@ -8377,7 +8526,7 @@ ${styles}
 ${[...carried, `import { ${helpers.join(", ")} } from "${helperSpecifier}";`, `import type { BcmsSectionProps } from "${relativeImport(path, SECTIONS_LIB).replace(/\.tsx?$/, "")}";`].join("\n")}
 ${carriedDeclarations === "" ? "" : `
 ${carriedDeclarations}`}
-export default function ${resolved.name}({ blockId, bind, bindPaths, overrides, page }: BcmsSectionProps) {
+export default function ${resolved.name}({ blockId, bind, bindPaths, overrides, page${styled ? ", blockStyle" : ""} }: BcmsSectionProps) {
   ${declared.split("\n").join("\n  ")}
   return (
     ${markup}
@@ -8385,13 +8534,21 @@ export default function ${resolved.name}({ blockId, bind, bindPaths, overrides,
 }
 ` };
 }
-function sectionMarkup(content, root, fieldName) {
+function rootStyleIsFree(content, root) {
+  return root.attrs.every((attr) => {
+    if (attr.name === "style") return false;
+    const open = attr.expressionRange ? content.slice(attr.expressionRange.start, attr.expressionRange.end).trimStart() : "";
+    return !open.startsWith("{...");
+  });
+}
+function sectionMarkup(content, root, fieldName, styleReader = null) {
   const slice = new MagicString5(content.slice(root.start, root.end));
   const at = (offset) => offset - root.start;
+  const stamp = styleReader ? `data-bcms-block={blockId} data-bcms-style="" style={${styleReader}(blockStyle)}` : "data-bcms-block={blockId}";
   const stamps = root.attrs.filter((attr) => attr.name === "data-bcms-block");
-  if (stamps.length === 0) slice.appendLeft(at(root.attrInsertAt), " data-bcms-block={blockId}");
+  if (stamps.length === 0) slice.appendLeft(at(root.attrInsertAt), ` ${stamp}`);
   else {
-    slice.overwrite(at(stamps[0].range.start), at(stamps[0].range.end), "data-bcms-block={blockId}");
+    slice.overwrite(at(stamps[0].range.start), at(stamps[0].range.end), stamp);
     for (const extra of stamps.slice(1)) {
       let from = extra.range.start;
       while (from > root.start && /\s/.test(content[from - 1])) from--;
@@ -8742,6 +8899,8 @@ export interface BcmsSectionProps {
   bindPaths?: Record<string, string>;
   overrides?: Record<string, unknown>;
   page?: unknown;
+  /** The placement's \`block.style\`, which the section root paints (\`data-bcms-style\`). */
+  blockStyle?: Record<string, unknown>;
 }
 
 /** One placement on one page: which component, bound to which page field group. */
@@ -8752,6 +8911,8 @@ export interface BcmsPlacement {
   /** A locale copy's own field path for each prop, when its keys differ from the component's. */
   bindPaths?: Record<string, string>;
   overrides?: Record<string, unknown>;
+  /** The placement's \`block.style\` \u2014 what the editor's section spacing and style controls write. */
+  style?: Record<string, unknown>;
 }
 
 /** The page's own snapshot \u2014 the copy every placement on it reads through \`bind\`. */
@@ -8813,6 +8974,7 @@ export function pageSections(pageSlug: string): BcmsPlacement[] {
       bind: typeof props.bind === "string" ? props.bind : undefined,
       bindPaths: isRecord(props.bindPaths) ? (props.bindPaths as Record<string, string>) : undefined,
       overrides: isRecord(props.overrides) ? props.overrides : undefined,
+      style: isRecord(block.style) ? block.style : undefined,
     });
   }
   return out;
@@ -8879,6 +9041,7 @@ const snapshot = pageSnapshot(page);
       bind={placement.bind}
       bindPaths={placement.bindPaths}
       overrides={placement.overrides}
+      blockStyle={placement.style}
       page={snapshot}
     />
   ) : null;
@@ -8902,6 +9065,7 @@ export default function Sections({ page }: { page: string }) {
             bind={placement.bind}
             bindPaths={placement.bindPaths}
             overrides={placement.overrides}
+            blockStyle={placement.style}
             page={snapshot}
           />
         ) : null;
@@ -10176,7 +10340,7 @@ function styleEdits(before, after) {
 // package.json
 var package_default = {
   name: "@bettercms-ai/convert",
-  version: "0.20.1",
+  version: "0.22.0",
   type: "module",
   description: "Deterministic codemod that turns an imported site's text-matched bindings into declared ones \u2014 parser offsets in, one magic-string pass out, plus a receipt of everything it could not do.",
   bin: {
@@ -10209,7 +10373,7 @@ var package_default = {
   dependencies: {
     "@astrojs/compiler": "^2.13.1",
     "@babel/parser": "^7.29.2",
-    "@bettercms-ai/types": "^1.25.0",
+    "@bettercms-ai/types": "^1.30.0",
     "@vue/compiler-sfc": "^3.5.0",
     "magic-string": "^0.30.21",
     parse5: "^7.3.0",