@cmssy/react 0.16.0 → 0.17.1

package/dist/client.cjs

@@ -44,22 +44,37 @@ var PROTOCOL_VERSION = 2;
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
+function resolveInitialTarget(editorOrigin) {
+  const list = (Array.isArray(editorOrigin) ? editorOrigin : [editorOrigin]).map((origin) => normalizeOrigin(origin));
+  if (list.includes("*")) return "*";
+  if (list.length === 1) return list[0];
+  const referrerOrigin = typeof document !== "undefined" && document.referrer ? normalizeOrigin(document.referrer) : "";
+  return list.find((origin) => origin === referrerOrigin) ?? list[0];
+}
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function parseEditorMessage(data, origin, expectedOrigin) {
-  const expected = normalizeOrigin(expectedOrigin);
-  if (expected !== "*" && origin !== expected) return null;
+  if (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -74,6 +89,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         content: data.content,
         protocolVersion: PROTOCOL_VERSION,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         ...typeof data.layoutPosition === "string" ? { layoutPosition: data.layoutPosition } : {}
       } : null;
     case "cmssy:parent-ready":
@@ -85,6 +102,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         blockType: data.blockType,
         content: data.content,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         index: data.index
       } : null;
     case "cmssy:reorder":
@@ -148,6 +167,8 @@ function collectLayoutBlocks(rects, pageIds) {
 }
 function useEditBridge(page, config) {
   const [patches, setPatches] = react.useState({});
+  const [patchesStyle, setPatchesStyle] = react.useState({});
+  const [patchesAdvanced, setPatchesAdvanced] = react.useState({});
   const [selected, setSelected] = react.useState(null);
   const [inserted, setInserted] = react.useState([]);
   const [order, setOrder] = react.useState(null);
@@ -157,6 +178,8 @@ function useEditBridge(page, config) {
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   react.useEffect(() => {
     setPatches({});
+    setPatchesStyle({});
+    setPatchesAdvanced({});
     setSelected(null);
     setInserted([]);
     setOrder(null);
@@ -166,7 +189,9 @@ function useEditBridge(page, config) {
   react.useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -175,7 +200,7 @@ function useEditBridge(page, config) {
       try {
         const rects = collectRects();
         const pageIds = new Set(blocks.map((b) => b.id));
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:ready",
           protocolVersion: PROTOCOL_VERSION,
           blocks: [
@@ -203,12 +228,28 @@ function useEditBridge(page, config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:patch") {
         if (message.layoutPosition !== void 0) return;
         setPatches((prev) => ({
           ...prev,
           [message.blockId]: { ...prev[message.blockId], ...message.content }
         }));
+        if (message.style) {
+          setPatchesStyle((prev) => ({
+            ...prev,
+            [message.blockId]: { ...prev[message.blockId], ...message.style }
+          }));
+        }
+        if (message.advanced) {
+          setPatchesAdvanced((prev) => ({
+            ...prev,
+            [message.blockId]: {
+              ...prev[message.blockId],
+              ...message.advanced
+            }
+          }));
+        }
       } else if (message.type === "cmssy:select") {
         setSelected(message.blockId);
         selectedIdRef.current = message.blockId;
@@ -219,6 +260,8 @@ function useEditBridge(page, config) {
             blockId: message.blockId,
             blockType: message.blockType,
             content: message.content,
+            style: message.style,
+            advanced: message.advanced,
             index: message.index
           });
           return next;
@@ -243,7 +286,7 @@ function useEditBridge(page, config) {
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:click",
           blockId: id,
           rect: { x: r.x, y: r.y, width: r.width, height: r.height },
@@ -268,7 +311,7 @@ function useEditBridge(page, config) {
         if (!el) return;
         const r = el.getBoundingClientRect();
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:bounds",
             blockId: id,
             rect: { x: r.x, y: r.y, width: r.width, height: r.height }
@@ -295,7 +338,15 @@ function useEditBridge(page, config) {
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
-  return { patches, selected, inserted, order, removed };
+  return {
+    patches,
+    patchesStyle,
+    patchesAdvanced,
+    selected,
+    inserted,
+    order,
+    removed
+  };
 }
 var MOVE_MIME = "application/x-cmssy-move";
 function visible(el) {
@@ -350,7 +401,9 @@ function useDragAgent(config) {
   react.useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -386,7 +439,7 @@ function useDragAgent(config) {
       updateDropY(null);
       resolver.invalidate();
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:move",
           protocolVersion: PROTOCOL_VERSION,
           blockId,
@@ -408,6 +461,7 @@ function useDragAgent(config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:drag-over") {
         const edge = 64;
         const step = 20;
@@ -419,7 +473,7 @@ function useDragAgent(config) {
         const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:drag-index",
             protocolVersion: PROTOCOL_VERSION,
             index
@@ -504,6 +558,8 @@ function CmssyBlock({
   defaultLocale,
   blockMap,
   patchedContent,
+  patchedStyle,
+  patchedAdvanced,
   editable,
   layoutPosition,
   context
@@ -511,6 +567,8 @@ function CmssyBlock({
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
   const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -521,8 +579,8 @@ function CmssyBlock({
       style: Component ? void 0 : { display: "none" },
       children: Component ? react.createElement(Component, {
         content,
-        style: asBucket(block.style),
-        advanced: asBucket(block.advanced),
+        style,
+        advanced,
         context
       }) : /* @__PURE__ */ jsxRuntime.jsx(UnknownBlock, { type: block.type })
     }
@@ -581,10 +639,7 @@ function EditableBlocks({
     }),
     [edit, blocks, category]
   );
-  const { patches, inserted, order, removed } = useEditBridge(
-    page,
-    bridgeConfig
-  );
+  const { patches, patchesStyle, patchesAdvanced, inserted, order, removed } = useEditBridge(page, bridgeConfig);
   const { dropY } = useDragAgent(bridgeConfig);
   const renderBlocks = react.useMemo(() => {
     const removedSet = new Set(removed);
@@ -595,7 +650,9 @@ function EditableBlocks({
       merged.splice(at, 0, {
         id: ins.blockId,
         type: ins.blockType,
-        content: ins.content
+        content: ins.content,
+        style: ins.style,
+        advanced: ins.advanced
       });
     }
     if (order) {
@@ -615,6 +672,8 @@ function EditableBlocks({
         locale,
         defaultLocale,
         patchedContent: patches[block.id],
+        patchedStyle: patchesStyle[block.id],
+        patchedAdvanced: patchesAdvanced[block.id],
         blockMap,
         editable: true,
         context

package/dist/client.d.cts

@@ -1,11 +1,11 @@
 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-D9lXIaCQ.cjs';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-D9lXIaCQ.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-CxUeiT52.cjs';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-CxUeiT52.cjs';
 import { ReactNode } from 'react';
 import '@cmssy/types';
 
 interface EditBridgeConfig {
-    editorOrigin: string;
+    editorOrigin: string | string[];
     schemas?: Record<string, BlockSchema>;
     blockMeta?: Record<string, BlockMeta>;
 }
@@ -14,10 +14,14 @@ interface InsertedBlock {
     blockId: string;
     blockType: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     index: number;
 }
 interface EditBridgeState {
     patches: PatchMap;
+    patchesStyle: PatchMap;
+    patchesAdvanced: PatchMap;
     selected: string | null;
     inserted: InsertedBlock[];
     order: string[] | null;

package/dist/client.d.ts

@@ -1,11 +1,11 @@
 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-D9lXIaCQ.js';
-export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-D9lXIaCQ.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-CxUeiT52.js';
+export { i as CmssyCartDiscount, j as CmssyCartItem, k as CmssyCartItemSnapshot, l as CmssyOrderItem, m as CmssyProductVariant } from './commerce-queries-CxUeiT52.js';
 import { ReactNode } from 'react';
 import '@cmssy/types';
 
 interface EditBridgeConfig {
-    editorOrigin: string;
+    editorOrigin: string | string[];
     schemas?: Record<string, BlockSchema>;
     blockMeta?: Record<string, BlockMeta>;
 }
@@ -14,10 +14,14 @@ interface InsertedBlock {
     blockId: string;
     blockType: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     index: number;
 }
 interface EditBridgeState {
     patches: PatchMap;
+    patchesStyle: PatchMap;
+    patchesAdvanced: PatchMap;
     selected: string | null;
     inserted: InsertedBlock[];
     order: string[] | null;

package/dist/client.js

@@ -42,22 +42,37 @@ var PROTOCOL_VERSION = 2;
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
+function resolveInitialTarget(editorOrigin) {
+  const list = (Array.isArray(editorOrigin) ? editorOrigin : [editorOrigin]).map((origin) => normalizeOrigin(origin));
+  if (list.includes("*")) return "*";
+  if (list.length === 1) return list[0];
+  const referrerOrigin = typeof document !== "undefined" && document.referrer ? normalizeOrigin(document.referrer) : "";
+  return list.find((origin) => origin === referrerOrigin) ?? list[0];
+}
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function parseEditorMessage(data, origin, expectedOrigin) {
-  const expected = normalizeOrigin(expectedOrigin);
-  if (expected !== "*" && origin !== expected) return null;
+  if (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -72,6 +87,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         content: data.content,
         protocolVersion: PROTOCOL_VERSION,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         ...typeof data.layoutPosition === "string" ? { layoutPosition: data.layoutPosition } : {}
       } : null;
     case "cmssy:parent-ready":
@@ -83,6 +100,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         blockType: data.blockType,
         content: data.content,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         index: data.index
       } : null;
     case "cmssy:reorder":
@@ -146,6 +165,8 @@ function collectLayoutBlocks(rects, pageIds) {
 }
 function useEditBridge(page, config) {
   const [patches, setPatches] = useState({});
+  const [patchesStyle, setPatchesStyle] = useState({});
+  const [patchesAdvanced, setPatchesAdvanced] = useState({});
   const [selected, setSelected] = useState(null);
   const [inserted, setInserted] = useState([]);
   const [order, setOrder] = useState(null);
@@ -155,6 +176,8 @@ function useEditBridge(page, config) {
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   useEffect(() => {
     setPatches({});
+    setPatchesStyle({});
+    setPatchesAdvanced({});
     setSelected(null);
     setInserted([]);
     setOrder(null);
@@ -164,7 +187,9 @@ function useEditBridge(page, config) {
   useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -173,7 +198,7 @@ function useEditBridge(page, config) {
       try {
         const rects = collectRects();
         const pageIds = new Set(blocks.map((b) => b.id));
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:ready",
           protocolVersion: PROTOCOL_VERSION,
           blocks: [
@@ -201,12 +226,28 @@ function useEditBridge(page, config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:patch") {
         if (message.layoutPosition !== void 0) return;
         setPatches((prev) => ({
           ...prev,
           [message.blockId]: { ...prev[message.blockId], ...message.content }
         }));
+        if (message.style) {
+          setPatchesStyle((prev) => ({
+            ...prev,
+            [message.blockId]: { ...prev[message.blockId], ...message.style }
+          }));
+        }
+        if (message.advanced) {
+          setPatchesAdvanced((prev) => ({
+            ...prev,
+            [message.blockId]: {
+              ...prev[message.blockId],
+              ...message.advanced
+            }
+          }));
+        }
       } else if (message.type === "cmssy:select") {
         setSelected(message.blockId);
         selectedIdRef.current = message.blockId;
@@ -217,6 +258,8 @@ function useEditBridge(page, config) {
             blockId: message.blockId,
             blockType: message.blockType,
             content: message.content,
+            style: message.style,
+            advanced: message.advanced,
             index: message.index
           });
           return next;
@@ -241,7 +284,7 @@ function useEditBridge(page, config) {
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:click",
           blockId: id,
           rect: { x: r.x, y: r.y, width: r.width, height: r.height },
@@ -266,7 +309,7 @@ function useEditBridge(page, config) {
         if (!el) return;
         const r = el.getBoundingClientRect();
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:bounds",
             blockId: id,
             rect: { x: r.x, y: r.y, width: r.width, height: r.height }
@@ -293,7 +336,15 @@ function useEditBridge(page, config) {
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
-  return { patches, selected, inserted, order, removed };
+  return {
+    patches,
+    patchesStyle,
+    patchesAdvanced,
+    selected,
+    inserted,
+    order,
+    removed
+  };
 }
 var MOVE_MIME = "application/x-cmssy-move";
 function visible(el) {
@@ -348,7 +399,9 @@ function useDragAgent(config) {
   useEffect(() => {
     if (typeof window === "undefined" || window.parent === window) return;
     const { editorOrigin } = config;
-    if (editorOrigin === "*" && typeof console !== "undefined") {
+    let postTarget = resolveInitialTarget(editorOrigin);
+    const isWildcard = Array.isArray(editorOrigin) ? editorOrigin.includes("*") : editorOrigin === "*";
+    if (isWildcard && typeof console !== "undefined") {
       console.warn(
         "[cmssy] editorOrigin '*' disables origin checks - dev only, do not use in production"
       );
@@ -384,7 +437,7 @@ function useDragAgent(config) {
       updateDropY(null);
       resolver.invalidate();
       try {
-        postToEditor(window.parent, editorOrigin, {
+        postToEditor(window.parent, postTarget, {
           type: "cmssy:move",
           protocolVersion: PROTOCOL_VERSION,
           blockId,
@@ -406,6 +459,7 @@ function useDragAgent(config) {
         editorOrigin
       );
       if (!message) return;
+      postTarget = event.origin;
       if (message.type === "cmssy:drag-over") {
         const edge = 64;
         const step = 20;
@@ -417,7 +471,7 @@ function useDragAgent(config) {
         const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
-          postToEditor(window.parent, editorOrigin, {
+          postToEditor(window.parent, postTarget, {
             type: "cmssy:drag-index",
             protocolVersion: PROTOCOL_VERSION,
             index
@@ -502,6 +556,8 @@ function CmssyBlock({
   defaultLocale,
   blockMap,
   patchedContent,
+  patchedStyle,
+  patchedAdvanced,
   editable,
   layoutPosition,
   context
@@ -509,6 +565,8 @@ function CmssyBlock({
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
   const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -519,8 +577,8 @@ function CmssyBlock({
       style: Component ? void 0 : { display: "none" },
       children: Component ? createElement(Component, {
         content,
-        style: asBucket(block.style),
-        advanced: asBucket(block.advanced),
+        style,
+        advanced,
         context
       }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }
@@ -579,10 +637,7 @@ function EditableBlocks({
     }),
     [edit, blocks, category]
   );
-  const { patches, inserted, order, removed } = useEditBridge(
-    page,
-    bridgeConfig
-  );
+  const { patches, patchesStyle, patchesAdvanced, inserted, order, removed } = useEditBridge(page, bridgeConfig);
   const { dropY } = useDragAgent(bridgeConfig);
   const renderBlocks = useMemo(() => {
     const removedSet = new Set(removed);
@@ -593,7 +648,9 @@ function EditableBlocks({
       merged.splice(at, 0, {
         id: ins.blockId,
         type: ins.blockType,
-        content: ins.content
+        content: ins.content,
+        style: ins.style,
+        advanced: ins.advanced
       });
     }
     if (order) {
@@ -613,6 +670,8 @@ function EditableBlocks({
         locale,
         defaultLocale,
         patchedContent: patches[block.id],
+        patchedStyle: patchesStyle[block.id],
+        patchedAdvanced: patchesAdvanced[block.id],
         blockMap,
         editable: true,
         context

package/dist/{commerce-queries-D9lXIaCQ.d.cts → commerce-queries-CxUeiT52.d.cts}

@@ -288,6 +288,8 @@ interface PatchMessage {
     protocolVersion: number;
     blockId: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     layoutPosition?: string;
 }
 interface ParentReadyMessage {
@@ -300,6 +302,8 @@ interface InsertMessage {
     blockId: string;
     blockType: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     index: number;
 }
 interface ReorderMessage {

package/dist/{commerce-queries-D9lXIaCQ.d.ts → commerce-queries-CxUeiT52.d.ts}

@@ -288,6 +288,8 @@ interface PatchMessage {
     protocolVersion: number;
     blockId: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     layoutPosition?: string;
 }
 interface ParentReadyMessage {
@@ -300,6 +302,8 @@ interface InsertMessage {
     blockId: string;
     blockType: string;
     content: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    advanced?: Record<string, unknown>;
     index: number;
 }
 interface ReorderMessage {

package/dist/index.cjs

@@ -239,22 +239,30 @@ function isProtocolCompatible(version) {
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function parseEditorMessage(data, origin, expectedOrigin) {
-  const expected = normalizeOrigin(expectedOrigin);
-  if (expected !== "*" && origin !== expected) return null;
+  if (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -269,6 +277,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         content: data.content,
         protocolVersion: PROTOCOL_VERSION,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         ...typeof data.layoutPosition === "string" ? { layoutPosition: data.layoutPosition } : {}
       } : null;
     case "cmssy:parent-ready":
@@ -280,6 +290,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         blockType: data.blockType,
         content: data.content,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         index: data.index
       } : null;
     case "cmssy:reorder":
@@ -745,23 +757,23 @@ function createCmssyClient(input) {
   return {
     config,
     resolveWorkspaceId: resolveWorkspaceId2,
-    query(document, variables = {}, options) {
+    query(document2, variables = {}, options) {
       return graphqlRequest(
         config,
-        document,
+        document2,
         variables,
         options,
         "graphql operation"
       );
     },
-    async queryScoped(document, variables = {}, options = {}) {
+    async queryScoped(document2, variables = {}, options = {}) {
       const { workspaceId: provided, headers, ...rest } = options;
       const workspaceId = provided ?? await resolveWorkspaceId2({ ...rest, headers });
       const hasWorkspaceId = variables.workspaceId !== void 0 && variables.workspaceId !== null;
-      const scopedVariables = /\$workspaceId\b/.test(document) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
+      const scopedVariables = /\$workspaceId\b/.test(document2) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
       return graphqlRequest(
         config,
-        document,
+        document2,
         scopedVariables,
         { ...rest, headers: { ...headers, "x-workspace-id": workspaceId } },
         "graphql operation"
@@ -899,6 +911,8 @@ function CmssyBlock({
   defaultLocale,
   blockMap,
   patchedContent,
+  patchedStyle,
+  patchedAdvanced,
   editable,
   layoutPosition,
   context
@@ -906,6 +920,8 @@ function CmssyBlock({
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
   const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -916,8 +932,8 @@ function CmssyBlock({
       style: Component ? void 0 : { display: "none" },
       children: Component ? react.createElement(Component, {
         content,
-        style: asBucket(block.style),
-        advanced: asBucket(block.advanced),
+        style,
+        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-D9lXIaCQ.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, af as resolvePublicUrl } from './commerce-queries-D9lXIaCQ.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-CxUeiT52.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, af as resolvePublicUrl } from './commerce-queries-CxUeiT52.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { FieldCondition, FieldConditionGroup, FieldConditionLogic, FieldType, evaluateFieldConditionGroup } from '@cmssy/types';
 import 'react';
@@ -68,7 +68,7 @@ interface PostTarget {
 }
 declare function normalizeOrigin(origin: string): string;
 declare function postToEditor(target: PostTarget, editorOrigin: string, message: AppToEditorMessage): void;
-declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string): EditorToAppMessage | null;
+declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string | string[]): EditorToAppMessage | null;
 
 declare function getBlockContentForLanguage(content: unknown, locale: string, defaultLocale?: string, availableLocales?: string[]): Record<string, unknown>;
 
@@ -135,11 +135,13 @@ interface CmssyBlockProps {
     defaultLocale: string;
     blockMap: BlockMap;
     patchedContent?: Record<string, unknown>;
+    patchedStyle?: Record<string, unknown>;
+    patchedAdvanced?: Record<string, unknown>;
     editable?: boolean;
     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, patchedStyle, patchedAdvanced, 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-D9lXIaCQ.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, af as resolvePublicUrl } from './commerce-queries-D9lXIaCQ.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-CxUeiT52.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, af as resolvePublicUrl } from './commerce-queries-CxUeiT52.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { FieldCondition, FieldConditionGroup, FieldConditionLogic, FieldType, evaluateFieldConditionGroup } from '@cmssy/types';
 import 'react';
@@ -68,7 +68,7 @@ interface PostTarget {
 }
 declare function normalizeOrigin(origin: string): string;
 declare function postToEditor(target: PostTarget, editorOrigin: string, message: AppToEditorMessage): void;
-declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string): EditorToAppMessage | null;
+declare function parseEditorMessage(data: unknown, origin: string, expectedOrigin: string | string[]): EditorToAppMessage | null;
 
 declare function getBlockContentForLanguage(content: unknown, locale: string, defaultLocale?: string, availableLocales?: string[]): Record<string, unknown>;
 
@@ -135,11 +135,13 @@ interface CmssyBlockProps {
     defaultLocale: string;
     blockMap: BlockMap;
     patchedContent?: Record<string, unknown>;
+    patchedStyle?: Record<string, unknown>;
+    patchedAdvanced?: Record<string, unknown>;
     editable?: boolean;
     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, patchedStyle, patchedAdvanced, editable, layoutPosition, context, }: CmssyBlockProps): react_jsx_runtime.JSX.Element;
 
 interface UnknownBlockProps {
     type: string;

package/dist/index.js

@@ -237,22 +237,30 @@ function isProtocolCompatible(version) {
 
 // src/bridge/messages.ts
 function normalizeOrigin(origin) {
-  if (origin === "*") return "*";
+  const trimmed = origin.trim();
+  if (trimmed === "*") return "*";
   try {
-    return new URL(origin).origin;
+    return new URL(trimmed).origin;
   } catch {
-    return origin;
+    return trimmed;
   }
 }
 function postToEditor(target, editorOrigin, message) {
   target.postMessage(message, normalizeOrigin(editorOrigin));
 }
+function isOriginAllowed(origin, allowed) {
+  const list = Array.isArray(allowed) ? allowed : [allowed];
+  const actual = normalizeOrigin(origin);
+  return list.some((candidate) => {
+    const expected = normalizeOrigin(candidate);
+    return expected === "*" || expected === actual;
+  });
+}
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function parseEditorMessage(data, origin, expectedOrigin) {
-  const expected = normalizeOrigin(expectedOrigin);
-  if (expected !== "*" && origin !== expected) return null;
+  if (!isOriginAllowed(origin, expectedOrigin)) return null;
   if (!isObject(data)) return null;
   switch (data.type) {
     case "cmssy:select":
@@ -267,6 +275,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         content: data.content,
         protocolVersion: PROTOCOL_VERSION,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         ...typeof data.layoutPosition === "string" ? { layoutPosition: data.layoutPosition } : {}
       } : null;
     case "cmssy:parent-ready":
@@ -278,6 +288,8 @@ function parseEditorMessage(data, origin, expectedOrigin) {
         blockId: data.blockId,
         blockType: data.blockType,
         content: data.content,
+        ...isObject(data.style) ? { style: data.style } : {},
+        ...isObject(data.advanced) ? { advanced: data.advanced } : {},
         index: data.index
       } : null;
     case "cmssy:reorder":
@@ -743,23 +755,23 @@ function createCmssyClient(input) {
   return {
     config,
     resolveWorkspaceId: resolveWorkspaceId2,
-    query(document, variables = {}, options) {
+    query(document2, variables = {}, options) {
       return graphqlRequest(
         config,
-        document,
+        document2,
         variables,
         options,
         "graphql operation"
       );
     },
-    async queryScoped(document, variables = {}, options = {}) {
+    async queryScoped(document2, variables = {}, options = {}) {
       const { workspaceId: provided, headers, ...rest } = options;
       const workspaceId = provided ?? await resolveWorkspaceId2({ ...rest, headers });
       const hasWorkspaceId = variables.workspaceId !== void 0 && variables.workspaceId !== null;
-      const scopedVariables = /\$workspaceId\b/.test(document) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
+      const scopedVariables = /\$workspaceId\b/.test(document2) && !hasWorkspaceId ? { ...variables, workspaceId } : variables;
       return graphqlRequest(
         config,
-        document,
+        document2,
         scopedVariables,
         { ...rest, headers: { ...headers, "x-workspace-id": workspaceId } },
         "graphql operation"
@@ -897,6 +909,8 @@ function CmssyBlock({
   defaultLocale,
   blockMap,
   patchedContent,
+  patchedStyle,
+  patchedAdvanced,
   editable,
   layoutPosition,
   context
@@ -904,6 +918,8 @@ function CmssyBlock({
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
   const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
   const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -914,8 +930,8 @@ function CmssyBlock({
       style: Component ? void 0 : { display: "none" },
       children: Component ? createElement(Component, {
         content,
-        style: asBucket(block.style),
-        advanced: asBucket(block.advanced),
+        style,
+        advanced,
         context
       }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
     }

package/package.json

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