@cmssy/react 0.12.0 → 0.13.0

package/dist/client.cjs

@@ -485,67 +485,11 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
-
-// src/components/block-attrs.ts
-var PADDING_SCALE = {
-  none: "0",
-  sm: "0.5rem",
-  md: "1rem",
-  lg: "2rem",
-  xl: "4rem"
-};
-var MAX_WIDTH_SCALE = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  full: "100%"
-};
-var TEXT_ALIGN = /* @__PURE__ */ new Set(["left", "center", "right"]);
-function asRecord(value) {
-  return value && typeof value === "object" ? value : {};
-}
-function text(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-function resolveBlockAttrs(blockId, styleBucket, advancedBucket) {
-  const s = asRecord(styleBucket);
-  const a = asRecord(advancedBucket);
-  const style = {};
-  const background = text(s.background);
-  if (background) style.background = background;
-  const padding = text(s.padding);
-  if (padding && PADDING_SCALE[padding]) {
-    style.paddingTop = PADDING_SCALE[padding];
-    style.paddingBottom = PADDING_SCALE[padding];
-  }
-  const align = text(s.align);
-  if (align && TEXT_ALIGN.has(align)) {
-    style.textAlign = align;
-  }
-  const maxWidth = text(s.maxWidth);
-  if (maxWidth && MAX_WIDTH_SCALE[maxWidth]) {
-    style.maxWidth = MAX_WIDTH_SCALE[maxWidth];
-    style.marginLeft = "auto";
-    style.marginRight = "auto";
-  }
-  const selector = `[data-block-id="${blockId.replace(/["\\]/g, "\\$&")}"]`;
-  const rules = [];
-  const customCss = text(a.customCss);
-  if (customCss) {
-    const safe = customCss.replace(/[{}]/g, "").replace(/<\/style/gi, "");
-    rules.push(`${selector}{${safe}}`);
-  }
-  if (a.hideOnMobile === true) {
-    rules.push(
-      `@media (max-width:767px){${selector}{display:none !important}}`
-    );
-  }
+function mergeBlockValues(content, style, advanced) {
   return {
-    style: Object.keys(style).length > 0 ? style : void 0,
-    className: text(a.className),
-    id: text(a.anchorId),
-    hidden: a.visible === false,
-    css: rules.length > 0 ? rules.join("") : void 0
+    ...content,
+    ...isPlainObject(style) ? style : {},
+    ...isPlainObject(advanced) ? advanced : {}
   };
 }
 var WARN_CAP = 256;
@@ -569,24 +513,18 @@ function CmssyBlock({
   context
 }) {
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden && !editable) return null;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const resolved = patchedContent ? { ...base, ...patchedContent } : base;
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/client.js

@@ -483,67 +483,11 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
-
-// src/components/block-attrs.ts
-var PADDING_SCALE = {
-  none: "0",
-  sm: "0.5rem",
-  md: "1rem",
-  lg: "2rem",
-  xl: "4rem"
-};
-var MAX_WIDTH_SCALE = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  full: "100%"
-};
-var TEXT_ALIGN = /* @__PURE__ */ new Set(["left", "center", "right"]);
-function asRecord(value) {
-  return value && typeof value === "object" ? value : {};
-}
-function text(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-function resolveBlockAttrs(blockId, styleBucket, advancedBucket) {
-  const s = asRecord(styleBucket);
-  const a = asRecord(advancedBucket);
-  const style = {};
-  const background = text(s.background);
-  if (background) style.background = background;
-  const padding = text(s.padding);
-  if (padding && PADDING_SCALE[padding]) {
-    style.paddingTop = PADDING_SCALE[padding];
-    style.paddingBottom = PADDING_SCALE[padding];
-  }
-  const align = text(s.align);
-  if (align && TEXT_ALIGN.has(align)) {
-    style.textAlign = align;
-  }
-  const maxWidth = text(s.maxWidth);
-  if (maxWidth && MAX_WIDTH_SCALE[maxWidth]) {
-    style.maxWidth = MAX_WIDTH_SCALE[maxWidth];
-    style.marginLeft = "auto";
-    style.marginRight = "auto";
-  }
-  const selector = `[data-block-id="${blockId.replace(/["\\]/g, "\\$&")}"]`;
-  const rules = [];
-  const customCss = text(a.customCss);
-  if (customCss) {
-    const safe = customCss.replace(/[{}]/g, "").replace(/<\/style/gi, "");
-    rules.push(`${selector}{${safe}}`);
-  }
-  if (a.hideOnMobile === true) {
-    rules.push(
-      `@media (max-width:767px){${selector}{display:none !important}}`
-    );
-  }
+function mergeBlockValues(content, style, advanced) {
   return {
-    style: Object.keys(style).length > 0 ? style : void 0,
-    className: text(a.className),
-    id: text(a.anchorId),
-    hidden: a.visible === false,
-    css: rules.length > 0 ? rules.join("") : void 0
+    ...content,
+    ...isPlainObject(style) ? style : {},
+    ...isPlainObject(advanced) ? advanced : {}
   };
 }
 var WARN_CAP = 256;
@@ -567,24 +511,18 @@ function CmssyBlock({
   context
 }) {
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden && !editable) return null;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  return /* @__PURE__ */ jsxs(
+  const resolved = patchedContent ? { ...base, ...patchedContent } : base;
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/index.cjs

@@ -101,6 +101,13 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
+function mergeBlockValues(content, style, advanced) {
+  return {
+    ...content,
+    ...isPlainObject(style) ? style : {},
+    ...isPlainObject(advanced) ? advanced : {}
+  };
+}
 
 // src/components/block-context.ts
 function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, forms, extra) {
@@ -116,69 +123,6 @@ function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, for
     ...extra?.workspace ? { workspace: extra.workspace } : {}
   };
 }
-
-// src/components/block-attrs.ts
-var PADDING_SCALE = {
-  none: "0",
-  sm: "0.5rem",
-  md: "1rem",
-  lg: "2rem",
-  xl: "4rem"
-};
-var MAX_WIDTH_SCALE = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  full: "100%"
-};
-var TEXT_ALIGN = /* @__PURE__ */ new Set(["left", "center", "right"]);
-function asRecord(value) {
-  return value && typeof value === "object" ? value : {};
-}
-function text(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-function resolveBlockAttrs(blockId, styleBucket, advancedBucket) {
-  const s = asRecord(styleBucket);
-  const a = asRecord(advancedBucket);
-  const style = {};
-  const background = text(s.background);
-  if (background) style.background = background;
-  const padding = text(s.padding);
-  if (padding && PADDING_SCALE[padding]) {
-    style.paddingTop = PADDING_SCALE[padding];
-    style.paddingBottom = PADDING_SCALE[padding];
-  }
-  const align = text(s.align);
-  if (align && TEXT_ALIGN.has(align)) {
-    style.textAlign = align;
-  }
-  const maxWidth = text(s.maxWidth);
-  if (maxWidth && MAX_WIDTH_SCALE[maxWidth]) {
-    style.maxWidth = MAX_WIDTH_SCALE[maxWidth];
-    style.marginLeft = "auto";
-    style.marginRight = "auto";
-  }
-  const selector = `[data-block-id="${blockId.replace(/["\\]/g, "\\$&")}"]`;
-  const rules = [];
-  const customCss = text(a.customCss);
-  if (customCss) {
-    const safe = customCss.replace(/[{}]/g, "").replace(/<\/style/gi, "");
-    rules.push(`${selector}{${safe}}`);
-  }
-  if (a.hideOnMobile === true) {
-    rules.push(
-      `@media (max-width:767px){${selector}{display:none !important}}`
-    );
-  }
-  return {
-    style: Object.keys(style).length > 0 ? style : void 0,
-    className: text(a.className),
-    id: text(a.anchorId),
-    hidden: a.visible === false,
-    css: rules.length > 0 ? rules.join("") : void 0
-  };
-}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
@@ -192,26 +136,20 @@ function UnknownBlock({ type }) {
 function renderResolvedBlock(block, map, locale, defaultLocale, options = {}) {
   const { context, data, resolvedContent, enabledLocales } = options;
   const Component = Object.hasOwn(map, block.type) ? map[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden) return null;
-  const content = resolvedContent ?? getBlockContentForLanguage(
+  const resolved = resolvedContent ?? getBlockContentForLanguage(
     block.content,
     locale,
     defaultLocale,
     enabledLocales?.length ? enabledLocales : void 0
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? react.createElement(Component, { content, context, data }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? react.createElement(Component, { content, context, data }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     },
     block.id
   );
@@ -958,24 +896,18 @@ function CmssyBlock({
   context
 }) {
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden && !editable) return null;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const resolved = patchedContent ? { ...base, ...patchedContent } : base;
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/index.d.cts

@@ -133,7 +133,7 @@ interface CmssyBlockProps {
     layoutPosition?: string;
     context?: CmssyBlockContext;
 }
-declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element;
 
 interface UnknownBlockProps {
     type: string;

package/dist/index.d.ts

@@ -133,7 +133,7 @@ interface CmssyBlockProps {
     layoutPosition?: string;
     context?: CmssyBlockContext;
 }
-declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element;
 
 interface UnknownBlockProps {
     type: string;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 export { evaluateFieldConditionGroup } from '@cmssy/types';
 
 // src/fields.ts
@@ -99,6 +99,13 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
+function mergeBlockValues(content, style, advanced) {
+  return {
+    ...content,
+    ...isPlainObject(style) ? style : {},
+    ...isPlainObject(advanced) ? advanced : {}
+  };
+}
 
 // src/components/block-context.ts
 function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, forms, extra) {
@@ -114,69 +121,6 @@ function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, for
     ...extra?.workspace ? { workspace: extra.workspace } : {}
   };
 }
-
-// src/components/block-attrs.ts
-var PADDING_SCALE = {
-  none: "0",
-  sm: "0.5rem",
-  md: "1rem",
-  lg: "2rem",
-  xl: "4rem"
-};
-var MAX_WIDTH_SCALE = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  full: "100%"
-};
-var TEXT_ALIGN = /* @__PURE__ */ new Set(["left", "center", "right"]);
-function asRecord(value) {
-  return value && typeof value === "object" ? value : {};
-}
-function text(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-function resolveBlockAttrs(blockId, styleBucket, advancedBucket) {
-  const s = asRecord(styleBucket);
-  const a = asRecord(advancedBucket);
-  const style = {};
-  const background = text(s.background);
-  if (background) style.background = background;
-  const padding = text(s.padding);
-  if (padding && PADDING_SCALE[padding]) {
-    style.paddingTop = PADDING_SCALE[padding];
-    style.paddingBottom = PADDING_SCALE[padding];
-  }
-  const align = text(s.align);
-  if (align && TEXT_ALIGN.has(align)) {
-    style.textAlign = align;
-  }
-  const maxWidth = text(s.maxWidth);
-  if (maxWidth && MAX_WIDTH_SCALE[maxWidth]) {
-    style.maxWidth = MAX_WIDTH_SCALE[maxWidth];
-    style.marginLeft = "auto";
-    style.marginRight = "auto";
-  }
-  const selector = `[data-block-id="${blockId.replace(/["\\]/g, "\\$&")}"]`;
-  const rules = [];
-  const customCss = text(a.customCss);
-  if (customCss) {
-    const safe = customCss.replace(/[{}]/g, "").replace(/<\/style/gi, "");
-    rules.push(`${selector}{${safe}}`);
-  }
-  if (a.hideOnMobile === true) {
-    rules.push(
-      `@media (max-width:767px){${selector}{display:none !important}}`
-    );
-  }
-  return {
-    style: Object.keys(style).length > 0 ? style : void 0,
-    className: text(a.className),
-    id: text(a.anchorId),
-    hidden: a.visible === false,
-    css: rules.length > 0 ? rules.join("") : void 0
-  };
-}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
@@ -190,26 +134,20 @@ function UnknownBlock({ type }) {
 function renderResolvedBlock(block, map, locale, defaultLocale, options = {}) {
   const { context, data, resolvedContent, enabledLocales } = options;
   const Component = Object.hasOwn(map, block.type) ? map[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden) return null;
-  const content = resolvedContent ?? getBlockContentForLanguage(
+  const resolved = resolvedContent ?? getBlockContentForLanguage(
     block.content,
     locale,
     defaultLocale,
     enabledLocales?.length ? enabledLocales : void 0
   );
-  return /* @__PURE__ */ jsxs(
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? createElement(Component, { content, context, data }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? createElement(Component, { content, context, data }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     },
     block.id
   );
@@ -956,24 +894,18 @@ function CmssyBlock({
   context
 }) {
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const attrs = resolveBlockAttrs(block.id, block.style, block.advanced);
-  if (attrs.hidden && !editable) return null;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  return /* @__PURE__ */ jsxs(
+  const resolved = patchedContent ? { ...base, ...patchedContent } : base;
+  const content = mergeBlockValues(resolved, block.style, block.advanced);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      id: attrs.id,
-      className: attrs.className,
-      style: Component ? attrs.style : { ...attrs.style, display: "none" },
-      children: [
-        attrs.css ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: attrs.css } }) : null,
-        Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
-      ]
+      style: Component ? void 0 : { display: "none" },
+      children: Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",