@cmssy/react 0.12.0 → 0.14.0

package/dist/client.cjs

@@ -485,68 +485,8 @@ 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}}`
-    );
-  }
-  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
-  };
+function asBucket(value) {
+  return isPlainObject(value) ? value : {};
 }
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
@@ -569,24 +509,22 @@ 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(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context
+      }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/client.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BlockSchema, a as BlockMeta, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, d as CmssyLayoutGroup, e as CmssyLocaleContext, f as CmssyCart, g as CmssyOrder, h as CmssyProduct } from './commerce-queries-ClCU8FZN.cjs';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-ClCU8FZN.cjs';
+import { B as BlockSchema, a as BlockMeta, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, d as CmssyLayoutGroup, e as CmssyLocaleContext, f as CmssyCart, g as CmssyOrder, h as CmssyProduct } from './commerce-queries-D5duQ6QF.cjs';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-D5duQ6QF.cjs';
 import { ReactNode } from 'react';
 import '@cmssy/types';
 

package/dist/client.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BlockSchema, a as BlockMeta, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, d as CmssyLayoutGroup, e as CmssyLocaleContext, f as CmssyCart, g as CmssyOrder, h as CmssyProduct } from './commerce-queries-ClCU8FZN.js';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-ClCU8FZN.js';
+import { B as BlockSchema, a as BlockMeta, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, d as CmssyLayoutGroup, e as CmssyLocaleContext, f as CmssyCart, g as CmssyOrder, h as CmssyProduct } from './commerce-queries-D5duQ6QF.js';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-D5duQ6QF.js';
 import { ReactNode } from 'react';
 import '@cmssy/types';
 

package/dist/client.js

@@ -483,68 +483,8 @@ 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}}`
-    );
-  }
-  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
-  };
+function asBucket(value) {
+  return isPlainObject(value) ? value : {};
 }
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
@@ -567,24 +507,22 @@ 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(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context
+      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/{commerce-queries-ClCU8FZN.d.cts → commerce-queries-D5duQ6QF.d.cts}

@@ -340,11 +340,13 @@ interface BlockDefinition {
     loader?: BlockLoader;
     component: ComponentType<{
         content: Record<string, unknown>;
+        style?: Record<string, unknown>;
+        advanced?: Record<string, unknown>;
         context?: CmssyBlockContext;
         data?: unknown;
     }>;
 }
-declare function defineBlock<C extends Record<string, unknown>, D = unknown>(def: {
+declare function defineBlock<C extends Record<string, unknown>, D = unknown, S extends Record<string, unknown> = Record<string, unknown>, A extends Record<string, unknown> = Record<string, unknown>>(def: {
     type: string;
     label?: string;
     category?: string;
@@ -358,12 +360,16 @@ declare function defineBlock<C extends Record<string, unknown>, D = unknown>(def
     }) => Promise<D> | D;
     component: ComponentType<{
         content: C;
+        style?: S;
+        advanced?: A;
         context?: CmssyBlockContext;
         data?: D;
     }>;
 }): BlockDefinition;
 type BlockMap = Record<string, ComponentType<{
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     context?: CmssyBlockContext;
     data?: unknown;
 }>>;

package/dist/{commerce-queries-ClCU8FZN.d.ts → commerce-queries-D5duQ6QF.d.ts}

@@ -340,11 +340,13 @@ interface BlockDefinition {
     loader?: BlockLoader;
     component: ComponentType<{
         content: Record<string, unknown>;
+        style?: Record<string, unknown>;
+        advanced?: Record<string, unknown>;
         context?: CmssyBlockContext;
         data?: unknown;
     }>;
 }
-declare function defineBlock<C extends Record<string, unknown>, D = unknown>(def: {
+declare function defineBlock<C extends Record<string, unknown>, D = unknown, S extends Record<string, unknown> = Record<string, unknown>, A extends Record<string, unknown> = Record<string, unknown>>(def: {
     type: string;
     label?: string;
     category?: string;
@@ -358,12 +360,16 @@ declare function defineBlock<C extends Record<string, unknown>, D = unknown>(def
     }) => Promise<D> | D;
     component: ComponentType<{
         content: C;
+        style?: S;
+        advanced?: A;
         context?: CmssyBlockContext;
         data?: D;
     }>;
 }): BlockDefinition;
 type BlockMap = Record<string, ComponentType<{
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     context?: CmssyBlockContext;
     data?: unknown;
 }>>;

package/dist/index.cjs

@@ -101,6 +101,9 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
+function asBucket(value) {
+  return isPlainObject(value) ? value : {};
+}
 
 // src/components/block-context.ts
 function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, forms, extra) {
@@ -116,69 +119,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 +132,25 @@ 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(
     block.content,
     locale,
     defaultLocale,
     enabledLocales?.length ? enabledLocales : void 0
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context,
+        data
+      }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     },
     block.id
   );
@@ -958,24 +897,22 @@ 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(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context
+      }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { F as FieldDefinition, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, n as CmssyBlockAuthContext, o as CmssyBlockWorkspace, d as CmssyLayoutGroup, E as EditorToAppMessage, A as AppToEditorMessage, p as FetchLike, q as CmssyClientConfig, r as CmssySiteConfig, R as RawBlock, e as CmssyLocaleContext, s as BlockMap, t as CmssyBlockContext } from './commerce-queries-ClCU8FZN.cjs';
-export { a as BlockMeta, u as BlockRect, B as BlockSchema, v as BoundsMessage, w as BuildBlockContextExtra, x as ClickMessage, y as CmssyBlockMember, z as CmssyBranding, f as CmssyCart, i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, D as CmssyFormField, G as CmssyFormSettings, H as CmssyFormSubmitResponse, I as CmssyLocalizedValue, J as CmssyModelDefinition, K as CmssyModelRecord, g as CmssyOrder, L as CmssyPageMeta, M as CmssyPageSummary, h as CmssyProduct, m as CmssyProductVariant, N as CmssyRecordList, O as DEFAULT_CMSSY_API_URL, P as FORM_QUERY, Q as FetchLikeResponse, S as FetchPageOptions, T as MODEL_DEFINITIONS_QUERY, U as MODEL_RECORDS_QUERY, V as PROTOCOL_VERSION, W as ParentReadyMessage, X as PatchMessage, Y as RawLayoutBlock, Z as ReadyMessage, _ as SITE_CONFIG_QUERY, $ as SUBMIT_FORM_MUTATION, a0 as SelectMessage, a1 as SubmitFormInput, a2 as blocksToMeta, a3 as blocksToSchemas, a4 as buildBlockContext, a5 as buildBlockMap, a6 as defineBlock, a7 as fetchLayouts, a8 as fetchPage, a9 as fetchPageById, aa as fetchPageMeta, ab as fetchPages, ac as isProtocolCompatible, ad as normalizeSlug, ae as resolveApiUrl } from './commerce-queries-ClCU8FZN.cjs';
+import { F as FieldDefinition, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, n as CmssyBlockAuthContext, o as CmssyBlockWorkspace, d as CmssyLayoutGroup, E as EditorToAppMessage, A as AppToEditorMessage, p as FetchLike, q as CmssyClientConfig, r as CmssySiteConfig, R as RawBlock, e as CmssyLocaleContext, s as BlockMap, t as CmssyBlockContext } from './commerce-queries-D5duQ6QF.cjs';
+export { a as BlockMeta, u as BlockRect, B as BlockSchema, v as BoundsMessage, w as BuildBlockContextExtra, x as ClickMessage, y as CmssyBlockMember, z as CmssyBranding, f as CmssyCart, i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, D as CmssyFormField, G as CmssyFormSettings, H as CmssyFormSubmitResponse, I as CmssyLocalizedValue, J as CmssyModelDefinition, K as CmssyModelRecord, g as CmssyOrder, L as CmssyPageMeta, M as CmssyPageSummary, h as CmssyProduct, m as CmssyProductVariant, N as CmssyRecordList, O as DEFAULT_CMSSY_API_URL, P as FORM_QUERY, Q as FetchLikeResponse, S as FetchPageOptions, T as MODEL_DEFINITIONS_QUERY, U as MODEL_RECORDS_QUERY, V as PROTOCOL_VERSION, W as ParentReadyMessage, X as PatchMessage, Y as RawLayoutBlock, Z as ReadyMessage, _ as SITE_CONFIG_QUERY, $ as SUBMIT_FORM_MUTATION, a0 as SelectMessage, a1 as SubmitFormInput, a2 as blocksToMeta, a3 as blocksToSchemas, a4 as buildBlockContext, a5 as buildBlockMap, a6 as defineBlock, a7 as fetchLayouts, a8 as fetchPage, a9 as fetchPageById, aa as fetchPageMeta, ab as fetchPages, ac as isProtocolCompatible, ad as normalizeSlug, ae as resolveApiUrl } from './commerce-queries-D5duQ6QF.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { FieldCondition, FieldConditionGroup, FieldConditionLogic, FieldType, evaluateFieldConditionGroup } from '@cmssy/types';
 import 'react';
@@ -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

@@ -1,5 +1,5 @@
-import { F as FieldDefinition, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, n as CmssyBlockAuthContext, o as CmssyBlockWorkspace, d as CmssyLayoutGroup, E as EditorToAppMessage, A as AppToEditorMessage, p as FetchLike, q as CmssyClientConfig, r as CmssySiteConfig, R as RawBlock, e as CmssyLocaleContext, s as BlockMap, t as CmssyBlockContext } from './commerce-queries-ClCU8FZN.js';
-export { a as BlockMeta, u as BlockRect, B as BlockSchema, v as BoundsMessage, w as BuildBlockContextExtra, x as ClickMessage, y as CmssyBlockMember, z as CmssyBranding, f as CmssyCart, i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, D as CmssyFormField, G as CmssyFormSettings, H as CmssyFormSubmitResponse, I as CmssyLocalizedValue, J as CmssyModelDefinition, K as CmssyModelRecord, g as CmssyOrder, L as CmssyPageMeta, M as CmssyPageSummary, h as CmssyProduct, m as CmssyProductVariant, N as CmssyRecordList, O as DEFAULT_CMSSY_API_URL, P as FORM_QUERY, Q as FetchLikeResponse, S as FetchPageOptions, T as MODEL_DEFINITIONS_QUERY, U as MODEL_RECORDS_QUERY, V as PROTOCOL_VERSION, W as ParentReadyMessage, X as PatchMessage, Y as RawLayoutBlock, Z as ReadyMessage, _ as SITE_CONFIG_QUERY, $ as SUBMIT_FORM_MUTATION, a0 as SelectMessage, a1 as SubmitFormInput, a2 as blocksToMeta, a3 as blocksToSchemas, a4 as buildBlockContext, a5 as buildBlockMap, a6 as defineBlock, a7 as fetchLayouts, a8 as fetchPage, a9 as fetchPageById, aa as fetchPageMeta, ab as fetchPages, ac as isProtocolCompatible, ad as normalizeSlug, ae as resolveApiUrl } from './commerce-queries-ClCU8FZN.js';
+import { F as FieldDefinition, C as CmssyPageData, b as BlockDefinition, c as CmssyFormDefinition, n as CmssyBlockAuthContext, o as CmssyBlockWorkspace, d as CmssyLayoutGroup, E as EditorToAppMessage, A as AppToEditorMessage, p as FetchLike, q as CmssyClientConfig, r as CmssySiteConfig, R as RawBlock, e as CmssyLocaleContext, s as BlockMap, t as CmssyBlockContext } from './commerce-queries-D5duQ6QF.js';
+export { a as BlockMeta, u as BlockRect, B as BlockSchema, v as BoundsMessage, w as BuildBlockContextExtra, x as ClickMessage, y as CmssyBlockMember, z as CmssyBranding, f as CmssyCart, i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, D as CmssyFormField, G as CmssyFormSettings, H as CmssyFormSubmitResponse, I as CmssyLocalizedValue, J as CmssyModelDefinition, K as CmssyModelRecord, g as CmssyOrder, L as CmssyPageMeta, M as CmssyPageSummary, h as CmssyProduct, m as CmssyProductVariant, N as CmssyRecordList, O as DEFAULT_CMSSY_API_URL, P as FORM_QUERY, Q as FetchLikeResponse, S as FetchPageOptions, T as MODEL_DEFINITIONS_QUERY, U as MODEL_RECORDS_QUERY, V as PROTOCOL_VERSION, W as ParentReadyMessage, X as PatchMessage, Y as RawLayoutBlock, Z as ReadyMessage, _ as SITE_CONFIG_QUERY, $ as SUBMIT_FORM_MUTATION, a0 as SelectMessage, a1 as SubmitFormInput, a2 as blocksToMeta, a3 as blocksToSchemas, a4 as buildBlockContext, a5 as buildBlockMap, a6 as defineBlock, a7 as fetchLayouts, a8 as fetchPage, a9 as fetchPageById, aa as fetchPageMeta, ab as fetchPages, ac as isProtocolCompatible, ad as normalizeSlug, ae as resolveApiUrl } from './commerce-queries-D5duQ6QF.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { FieldCondition, FieldConditionGroup, FieldConditionLogic, FieldType, evaluateFieldConditionGroup } from '@cmssy/types';
 import 'react';
@@ -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,9 @@ function getBlockContentForLanguage(content, locale, defaultLocale = "en", avail
   const chosen = localeMap[locale] ?? localeMap[defaultLocale] ?? localeMap[fallbackKey];
   return { ...nonTranslatable, ...chosen };
 }
+function asBucket(value) {
+  return isPlainObject(value) ? value : {};
+}
 
 // src/components/block-context.ts
 function buildBlockContext(locale, defaultLocale, enabledLocales, isPreview, forms, extra) {
@@ -114,69 +117,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 +130,25 @@ 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(
     block.content,
     locale,
     defaultLocale,
     enabledLocales?.length ? enabledLocales : void 0
   );
-  return /* @__PURE__ */ jsxs(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context,
+        data
+      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     },
     block.id
   );
@@ -956,24 +895,22 @@ 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(
+  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,
+        style: asBucket(block.style),
+        advanced: asBucket(block.advanced),
+        context
+      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }
   );
 }

package/package.json

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