@bettercms-ai/convert 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @bettercms-ai/convert
 
+## 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
+
+- 12147f7: The x-ray counts a bare number (a `49` price, a `5` rating) as copy. Only a zero-padded (`01`) or punctuated (`2.`, `3 /`) step marker is an ornament.
+
 ## 0.20.0
 
 ### Minor 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 = 10;
 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,85 @@ 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",
+};
+
+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]!;
+  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 +4604,8 @@ var HISTORICAL = {
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
-    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9"
+    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3"
   },
   "src/lib/bcms-content.ts": {
     1: "ae72ae14d706943d481c880d70da5789b4816ba1ba319a10fbc63ded4d0b42f2",
@@ -4535,7 +4615,8 @@ var HISTORICAL = {
     5: "c8c93655320fa65664611ba84541f3fa7bfa292cc9a2fd655373440b99049fba",
     6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5",
     7: "ed92fb88de953d9951abbe6a1edae1d048f4050eaf6fb607ac08167f94d8bcc7",
-    8: "1a6f669d76d42effe77f082436e9d21c0efa6fc499e919e3d116bc3a27a7f3d5"
+    8: "1a6f669d76d42effe77f082436e9d21c0efa6fc499e919e3d116bc3a27a7f3d5",
+    9: "eee9fb1635ae7d6f8f33676a1f390600ca24a62ee992775252273c73a011c494"
   },
   "composables/bcms-content.ts": {
     1: "c272412532efed7db64b6cf313b2bed4291f9951430412289c8a588b7f565407",
@@ -4545,7 +4626,8 @@ var HISTORICAL = {
     5: "0472fe3ffdcfa49e719c7b9da9cb63b6eba637cc22783bb00c3c2cadd3d800da",
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
-    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9"
+    8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3"
   }
 };
 var sha256 = (value) => createHash2("sha256").update(value, "utf8").digest("hex");
@@ -7100,7 +7182,7 @@ var CONTEXT_TAGS = /* @__PURE__ */ new Set([
 var BOUND_ATTRS = ["data-bcms-field", "data-bcms-layout-field"];
 var isDecorativeGlyph = (text) => {
   const t = flat2(text);
-  return t === "" || !/[\p{L}\p{N}]/u.test(t) || new RegExp("^\\p{Nd}{1,2}\\s*[/.)\\-\u2013\u2014]?$", "u").test(t);
+  return t === "" || !/[\p{L}\p{N}]/u.test(t) || new RegExp("^(?:0\\p{Nd}|\\p{Nd}{1,2}\\s*[/.)\\-\u2013\u2014])$", "u").test(t);
 };
 var PLATFORM_BADGE = /^made with\b/iu;
 var MAX_BUCKETS = 12;
@@ -8303,7 +8385,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 +8398,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 +8448,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 +8464,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 +8472,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 +8837,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 +8849,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 +8912,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 +8979,7 @@ const snapshot = pageSnapshot(page);
       bind={placement.bind}
       bindPaths={placement.bindPaths}
       overrides={placement.overrides}
+      blockStyle={placement.style}
       page={snapshot}
     />
   ) : null;
@@ -8902,6 +9003,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 +10278,7 @@ function styleEdits(before, after) {
 // package.json
 var package_default = {
   name: "@bettercms-ai/convert",
-  version: "0.20.0",
+  version: "0.21.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 +10311,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.29.0",
     "@vue/compiler-sfc": "^3.5.0",
     "magic-string": "^0.30.21",
     parse5: "^7.3.0",