@cmssy/react 0.10.0 → 0.12.0

package/dist/client.cjs

@@ -485,6 +485,69 @@ 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
+  };
+}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
@@ -506,17 +569,24 @@ 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.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { 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 }) : /* @__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-DXT2RQlm.cjs';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-DXT2RQlm.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-ClCU8FZN.cjs';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-ClCU8FZN.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-DXT2RQlm.js';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-DXT2RQlm.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-ClCU8FZN.js';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-ClCU8FZN.js';
 import { ReactNode } from 'react';
 import '@cmssy/types';
 

package/dist/client.js

@@ -483,6 +483,69 @@ 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
+  };
+}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
@@ -504,17 +567,24 @@ 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { 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 }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+      ]
     }
   );
 }

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

@@ -36,6 +36,8 @@ interface RawBlock {
     id: string;
     type: string;
     content: unknown;
+    style?: unknown;
+    advanced?: unknown;
 }
 interface CmssyPageData {
     id: string;
@@ -45,6 +47,8 @@ interface RawLayoutBlock {
     id: string;
     type: string;
     content: unknown;
+    style?: unknown;
+    advanced?: unknown;
     order: number;
     isActive: boolean;
 }

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

@@ -36,6 +36,8 @@ interface RawBlock {
     id: string;
     type: string;
     content: unknown;
+    style?: unknown;
+    advanced?: unknown;
 }
 interface CmssyPageData {
     id: string;
@@ -45,6 +47,8 @@ interface RawLayoutBlock {
     id: string;
     type: string;
     content: unknown;
+    style?: unknown;
+    advanced?: unknown;
     order: number;
     isActive: boolean;
 }

package/dist/index.cjs

@@ -116,6 +116,69 @@ 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 }) {
@@ -129,19 +192,26 @@ 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.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? react.createElement(Component, { content, context, data }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { 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 })
+      ]
     },
     block.id
   );
@@ -312,8 +382,8 @@ var PUBLIC_PAGE_QUERY = `query PublicPage($workspaceSlug: String!, $slug: String
     page {
       get(workspaceSlug: $workspaceSlug, slug: $slug, previewSecret: $previewSecret) {
         id
-        blocks { id type content }
-        publishedBlocks { id type content }
+        blocks { id type content style advanced }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -323,8 +393,8 @@ var PUBLIC_PAGE_DEV_QUERY = `query PublicPage($workspaceSlug: String!, $slug: St
     page {
       get(workspaceSlug: $workspaceSlug, slug: $slug, previewSecret: $previewSecret, devPreview: $devPreview) {
         id
-        blocks { id type content }
-        publishedBlocks { id type content }
+        blocks { id type content style advanced }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -334,7 +404,7 @@ var PUBLIC_PAGE_BY_ID_QUERY = `query PublicPageById($workspaceSlug: String!, $pa
     page {
       getById(workspaceSlug: $workspaceSlug, pageId: $pageId) {
         id
-        publishedBlocks { id type content }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -369,7 +439,7 @@ var PUBLIC_PAGE_LAYOUTS_QUERY = `query PublicPageLayouts($workspaceSlug: String!
     page {
       layouts(workspaceSlug: $workspaceSlug, pageSlug: $pageSlug, previewSecret: $previewSecret) {
         position
-        blocks { id type content order isActive }
+        blocks { id type content style advanced order isActive }
       }
     }
   }
@@ -888,17 +958,24 @@ 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.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? react.createElement(Component, { content, context }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { 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 }) : /* @__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-DXT2RQlm.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-DXT2RQlm.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-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 * 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;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
 
 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-DXT2RQlm.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-DXT2RQlm.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-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 * 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;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
 
 interface UnknownBlockProps {
     type: string;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 export { evaluateFieldConditionGroup } from '@cmssy/types';
 
 // src/fields.ts
@@ -114,6 +114,69 @@ 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 }) {
@@ -127,19 +190,26 @@ 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, { content, context, data }) : /* @__PURE__ */ jsx(UnknownBlock, { 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 })
+      ]
     },
     block.id
   );
@@ -310,8 +380,8 @@ var PUBLIC_PAGE_QUERY = `query PublicPage($workspaceSlug: String!, $slug: String
     page {
       get(workspaceSlug: $workspaceSlug, slug: $slug, previewSecret: $previewSecret) {
         id
-        blocks { id type content }
-        publishedBlocks { id type content }
+        blocks { id type content style advanced }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -321,8 +391,8 @@ var PUBLIC_PAGE_DEV_QUERY = `query PublicPage($workspaceSlug: String!, $slug: St
     page {
       get(workspaceSlug: $workspaceSlug, slug: $slug, previewSecret: $previewSecret, devPreview: $devPreview) {
         id
-        blocks { id type content }
-        publishedBlocks { id type content }
+        blocks { id type content style advanced }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -332,7 +402,7 @@ var PUBLIC_PAGE_BY_ID_QUERY = `query PublicPageById($workspaceSlug: String!, $pa
     page {
       getById(workspaceSlug: $workspaceSlug, pageId: $pageId) {
         id
-        publishedBlocks { id type content }
+        publishedBlocks { id type content style advanced }
       }
     }
   }
@@ -367,7 +437,7 @@ var PUBLIC_PAGE_LAYOUTS_QUERY = `query PublicPageLayouts($workspaceSlug: String!
     page {
       layouts(workspaceSlug: $workspaceSlug, pageSlug: $pageSlug, previewSecret: $previewSecret) {
         position
-        blocks { id type content order isActive }
+        blocks { id type content style advanced order isActive }
       }
     }
   }
@@ -886,17 +956,24 @@ 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, { content, context }) : /* @__PURE__ */ jsx(UnknownBlock, { 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 }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+      ]
     }
   );
 }

package/package.json

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