@bettercms-ai/convert 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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 = 10;
+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])
@@ -4552,6 +4552,46 @@ const STYLE_SPACE_TOKEN_PX: Record<string, string> = {
   "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 + ")" : "";
@@ -4581,6 +4621,25 @@ export function bcmsSectionStyle(style: unknown): Record<string, string | number
   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;
 }
@@ -4605,7 +4664,8 @@ var HISTORICAL = {
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
     8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
-    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3"
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3",
+    10: "ffcb59862972b15a67c5951e9f3b94ce5b8b50345e6aac2bfa5789cfc3136910"
   },
   "src/lib/bcms-content.ts": {
     1: "ae72ae14d706943d481c880d70da5789b4816ba1ba319a10fbc63ded4d0b42f2",
@@ -4616,7 +4676,8 @@ var HISTORICAL = {
     6: "63f1fa29e47e70c5193b81ee24addb238ba100247124d55bc17713102d587df5",
     7: "ed92fb88de953d9951abbe6a1edae1d048f4050eaf6fb607ac08167f94d8bcc7",
     8: "1a6f669d76d42effe77f082436e9d21c0efa6fc499e919e3d116bc3a27a7f3d5",
-    9: "eee9fb1635ae7d6f8f33676a1f390600ca24a62ee992775252273c73a011c494"
+    9: "eee9fb1635ae7d6f8f33676a1f390600ca24a62ee992775252273c73a011c494",
+    10: "35bb7c0e30f5c41fe68e52259ec4764de6de2734064fa0e1521f3338eef0a09e"
   },
   "composables/bcms-content.ts": {
     1: "c272412532efed7db64b6cf313b2bed4291f9951430412289c8a588b7f565407",
@@ -4627,7 +4688,8 @@ var HISTORICAL = {
     6: "c907e7245578d947c6541b1ab2c5c6659ea7789a1519e895b4a4aed122c6f649",
     7: "f22514ef48c50230985e605bea6cf9bf41756384a7dc80603e347baba9b65d93",
     8: "484e72852d2b496e016a1f2a2b1a77bb993f8a163b290781522d6114b6519bb9",
-    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3"
+    9: "d6441db2ff4578c3c5d4b7d461f3374b89247ef6ba9e0d535791e840d803e4f3",
+    10: "ffcb59862972b15a67c5951e9f3b94ce5b8b50345e6aac2bfa5789cfc3136910"
   }
 };
 var sha256 = (value) => createHash2("sha256").update(value, "utf8").digest("hex");
@@ -10278,7 +10340,7 @@ function styleEdits(before, after) {
 // package.json
 var package_default = {
   name: "@bettercms-ai/convert",
-  version: "0.21.0",
+  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: {
@@ -10311,7 +10373,7 @@ var package_default = {
   dependencies: {
     "@astrojs/compiler": "^2.13.1",
     "@babel/parser": "^7.29.2",
-    "@bettercms-ai/types": "^1.29.0",
+    "@bettercms-ai/types": "^1.30.0",
     "@vue/compiler-sfc": "^3.5.0",
     "magic-string": "^0.30.21",
     parse5: "^7.3.0",