@uniformdev/canvas-react 19.166.1 → 19.169.0

package/dist/index.d.mts

@@ -10,7 +10,7 @@ import { RichTextNode } from '@uniformdev/richtext';
  * all enhancers have been applied.
  */
 type ComponentProps<TProps = unknown> = TProps & {
-    component: ComponentInstance;
+    component: ComponentInstance | RootComponentInstance;
 };
 /**
  * Function that maps a Canvas component instance to its React component to render it.
@@ -313,24 +313,26 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type UniformPlaygroundDecorator = (props: {
-    /** The rendered component instance, needs to wrapped and rendered by the decorator */
+    /** The rendered component instance, needs to be wrapped and rendered by the decorator */
     children: React$1.ReactNode;
     /** The component instance data */
     data: ComponentInstance | RootComponentInstance;
 }) => React$1.ReactElement;
 type UniformPlaygroundProps = {
     /**
-     * Allows wrapping the playground in custom components.
-     * Useful to customize the playground to allow previewing the components in realistic scenarios
-     * (e.g. different background color, different parent size)
+     * Allows wrapping the playground in custom layouts.
+     * Useful to customize the playground to allow previewing the patterns in realistic scenarios
+     * (e.g. wrap the pattern in a specific layout, show a background color selector, parent size selector, etc.)
      * @deprecated This feature is not stable yet and might be changed or removed in a minor release. Do not use it in production environments.
      */
     decorators?: UniformPlaygroundDecorator[];
-} & Omit<UniformCompositionProps, 'data'>;
+    /** @deprecated This prop is not supported anymore. */
+    children?: ReactNode;
+} & Omit<UniformCompositionProps, 'data' | 'children'>;
 /**
- * Playground where you can freely live preview your components and pattern.
+ * Playground where you can freely live preview your components and patterns.
  */
-declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, children, }: UniformPlaygroundProps) => React$1.JSX.Element;
+declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformPlaygroundProps) => React$1.JSX.Element;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;

package/dist/index.d.ts

@@ -10,7 +10,7 @@ import { RichTextNode } from '@uniformdev/richtext';
  * all enhancers have been applied.
  */
 type ComponentProps<TProps = unknown> = TProps & {
-    component: ComponentInstance;
+    component: ComponentInstance | RootComponentInstance;
 };
 /**
  * Function that maps a Canvas component instance to its React component to render it.
@@ -313,24 +313,26 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type UniformPlaygroundDecorator = (props: {
-    /** The rendered component instance, needs to wrapped and rendered by the decorator */
+    /** The rendered component instance, needs to be wrapped and rendered by the decorator */
     children: React$1.ReactNode;
     /** The component instance data */
     data: ComponentInstance | RootComponentInstance;
 }) => React$1.ReactElement;
 type UniformPlaygroundProps = {
     /**
-     * Allows wrapping the playground in custom components.
-     * Useful to customize the playground to allow previewing the components in realistic scenarios
-     * (e.g. different background color, different parent size)
+     * Allows wrapping the playground in custom layouts.
+     * Useful to customize the playground to allow previewing the patterns in realistic scenarios
+     * (e.g. wrap the pattern in a specific layout, show a background color selector, parent size selector, etc.)
      * @deprecated This feature is not stable yet and might be changed or removed in a minor release. Do not use it in production environments.
      */
     decorators?: UniformPlaygroundDecorator[];
-} & Omit<UniformCompositionProps, 'data'>;
+    /** @deprecated This prop is not supported anymore. */
+    children?: ReactNode;
+} & Omit<UniformCompositionProps, 'data' | 'children'>;
 /**
- * Playground where you can freely live preview your components and pattern.
+ * Playground where you can freely live preview your components and patterns.
  */
-declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, children, }: UniformPlaygroundProps) => React$1.JSX.Element;
+declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformPlaygroundProps) => React$1.JSX.Element;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;

package/dist/index.esm.js

@@ -233,6 +233,45 @@ var PureContextualEditingComponentWrapper = ({
 // src/components/UniformComposition.tsx
 import React4, { createContext, useContext } from "react";
 
+// src/hooks/useClientConditionsComposition.ts
+import { evaluateWalkTreeVisibility, walkNodeTree } from "@uniformdev/canvas";
+import { produce } from "immer";
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useClientVisibilityRules.ts
+import { createQuirksVisibilityRule } from "@uniformdev/canvas";
+import { useQuirks } from "@uniformdev/context-react";
+import { useMemo } from "react";
+function useClientVisibilityRules() {
+  const quirks = useQuirks({ throwOnMissingProvider: false });
+  return useMemo(() => {
+    return {
+      ...createQuirksVisibilityRule(quirks)
+    };
+  }, [quirks]);
+}
+
+// src/hooks/useClientConditionsComposition.ts
+function useClientConditionsComposition(data) {
+  const rules = useClientVisibilityRules();
+  const preprocessedValue = useMemo2(() => {
+    if (!data) {
+      return data;
+    }
+    try {
+      return produce(data, (draft) => {
+        walkNodeTree(draft, (context) => {
+          evaluateWalkTreeVisibility({ context, rules, showIndeterminate: false });
+        });
+      });
+    } catch (e) {
+      console.error("Error evaluating visibility rules:", e.stack);
+      return data;
+    }
+  }, [data, rules]);
+  return preprocessedValue;
+}
+
 // src/hooks/useUniformContextualEditing.ts
 import {
   createCanvasChannel,
@@ -243,7 +282,7 @@ import {
   isAllowedReferrer,
   isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
@@ -251,7 +290,7 @@ var useUniformContextualEditing = ({
 }) => {
   const [contextualComposition, setContextualComposition] = useState();
   const latestEventTimeStamp = useRef();
-  const channel = useMemo(() => {
+  const channel = useMemo3(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
@@ -341,8 +380,9 @@ function UniformComposition({
   contextualEditingEnhancer,
   contextualEditingDefaultPlaceholder
 }) {
+  const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: data,
+    initialCompositionValue: ruledComposition,
     enhance: contextualEditingEnhancer
   });
   return /* @__PURE__ */ React4.createElement(
@@ -605,20 +645,19 @@ function resolveChildren({
 
 // src/components/UniformPlayground.tsx
 import { EMPTY_COMPOSITION as EMPTY_COMPOSITION4 } from "@uniformdev/canvas";
-import React8, { useMemo as useMemo2 } from "react";
+import React8, { useMemo as useMemo4 } from "react";
 var UniformPlayground = ({
   resolveRenderer,
   decorators = [],
   contextualEditingEnhancer,
   behaviorTracking,
-  contextualEditingDefaultPlaceholder,
-  children
+  contextualEditingDefaultPlaceholder
 }) => {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: EMPTY_COMPOSITION4,
     enhance: contextualEditingEnhancer
   });
-  const renderedComponent = useMemo2(() => {
+  const renderedComponent = useMemo4(() => {
     if (!composition) {
       return null;
     }
@@ -629,21 +668,13 @@ var UniformPlayground = ({
         behaviorTracking,
         resolveRenderer,
         contextualEditingDefaultPlaceholder
-      },
-      children
+      }
     ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ React8.createElement(Decorator, { data: composition }, component);
     });
     return component;
-  }, [
-    children,
-    resolveRenderer,
-    decorators,
-    composition,
-    behaviorTracking,
-    contextualEditingDefaultPlaceholder
-  ]);
+  }, [resolveRenderer, decorators, composition, behaviorTracking, contextualEditingDefaultPlaceholder]);
   return /* @__PURE__ */ React8.createElement(
     UniformCompositionContext.Provider,
     {
@@ -663,7 +694,7 @@ import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React18, { useMemo as useMemo3 } from "react";
+import React18, { useMemo as useMemo5 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
@@ -773,11 +804,11 @@ var resolveRichTextDefaultRenderer = (node) => {
 // src/components/UniformRichText/UniformRichText.tsx
 var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo3(() => {
+  const parameter = useMemo5(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo5(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
   return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
     Tag,
@@ -936,7 +967,7 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
@@ -946,7 +977,7 @@ var useUniformContextualEditingState = ({
   const [previewMode, setPreviewMode] = useState3(
     isContextualEditing ? "editor" : void 0
   );
-  const channel = useMemo4(() => {
+  const channel = useMemo6(() => {
     if (!isContextualEditing) {
       return;
     }
@@ -980,7 +1011,7 @@ var useUniformContextualEditingState = ({
       unsubscribe();
     };
   }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
-  return useMemo4(
+  return useMemo6(
     () => ({
       isContextualEditing,
       selectedComponentReference,

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
   convertComponentToProps: () => convertComponentToProps,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
-  createUniformApiEnhancer: () => import_canvas4.createUniformApiEnhancer,
+  createUniformApiEnhancer: () => import_canvas6.createUniformApiEnhancer,
   getParameterAttributes: () => getParameterAttributes,
   registerUniformComponent: () => registerUniformComponent,
   useCompositionEventEffect: () => useCompositionEventEffect,
@@ -131,9 +131,9 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 }
 
 // src/components/UniformComponent.tsx
-var import_canvas7 = require("@uniformdev/canvas");
-var import_context_react2 = require("@uniformdev/context-react");
-var import_react7 = __toESM(require("react"));
+var import_canvas9 = require("@uniformdev/canvas");
+var import_context_react3 = require("@uniformdev/context-react");
+var import_react9 = __toESM(require("react"));
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -192,8 +192,8 @@ var componentStoreResolver = createComponentStoreResolver({
 });
 
 // src/components/UniformSlot.tsx
-var import_canvas6 = require("@uniformdev/canvas");
-var import_react6 = __toESM(require("react"));
+var import_canvas8 = require("@uniformdev/canvas");
+var import_react8 = __toESM(require("react"));
 
 // src/defaultSystemComponentResolver.tsx
 var import_canvas2 = require("@uniformdev/canvas");
@@ -234,8 +234,8 @@ var defaultSystemComponentResolver = {
 };
 
 // src/components/ContextualEditingComponentWrapper.tsx
-var import_canvas5 = require("@uniformdev/canvas");
-var import_react5 = __toESM(require("react"));
+var import_canvas7 = require("@uniformdev/canvas");
+var import_react7 = __toESM(require("react"));
 
 // src/components/PureContextualEditingComponentWrapper.tsx
 var import_canvas3 = require("@uniformdev/canvas");
@@ -271,31 +271,70 @@ var PureContextualEditingComponentWrapper = ({
 };
 
 // src/components/UniformComposition.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
-// src/hooks/useUniformContextualEditing.ts
+// src/hooks/useClientConditionsComposition.ts
+var import_canvas5 = require("@uniformdev/canvas");
+var import_immer = require("immer");
+var import_react4 = require("react");
+
+// src/hooks/useClientVisibilityRules.ts
 var import_canvas4 = require("@uniformdev/canvas");
+var import_context_react2 = require("@uniformdev/context-react");
 var import_react3 = require("react");
+function useClientVisibilityRules() {
+  const quirks = (0, import_context_react2.useQuirks)({ throwOnMissingProvider: false });
+  return (0, import_react3.useMemo)(() => {
+    return {
+      ...(0, import_canvas4.createQuirksVisibilityRule)(quirks)
+    };
+  }, [quirks]);
+}
+
+// src/hooks/useClientConditionsComposition.ts
+function useClientConditionsComposition(data) {
+  const rules = useClientVisibilityRules();
+  const preprocessedValue = (0, import_react4.useMemo)(() => {
+    if (!data) {
+      return data;
+    }
+    try {
+      return (0, import_immer.produce)(data, (draft) => {
+        (0, import_canvas5.walkNodeTree)(draft, (context) => {
+          (0, import_canvas5.evaluateWalkTreeVisibility)({ context, rules, showIndeterminate: false });
+        });
+      });
+    } catch (e) {
+      console.error("Error evaluating visibility rules:", e.stack);
+      return data;
+    }
+  }, [data, rules]);
+  return preprocessedValue;
+}
+
+// src/hooks/useUniformContextualEditing.ts
+var import_canvas6 = require("@uniformdev/canvas");
+var import_react5 = require("react");
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
   enhance = (message) => message.composition
 }) => {
-  const [contextualComposition, setContextualComposition] = (0, import_react3.useState)();
-  const latestEventTimeStamp = (0, import_react3.useRef)();
-  const channel = (0, import_react3.useMemo)(() => {
+  const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
+  const latestEventTimeStamp = (0, import_react5.useRef)();
+  const channel = (0, import_react5.useMemo)(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
     }
-    const channel2 = (0, import_canvas4.createCanvasChannel)({
+    const channel2 = (0, import_canvas6.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return channel2;
   }, []);
-  (0, import_react3.useEffect)(() => {
-    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas4.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
+  (0, import_react5.useEffect)(() => {
+    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas6.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
       setContextualComposition(void 0);
       return;
     }
@@ -303,7 +342,7 @@ var useUniformContextualEditing = ({
       return;
     }
     const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
-      if (!(0, import_canvas4.isUpdateCompositionInternalMessage)(message)) {
+      if (!(0, import_canvas6.isUpdateCompositionInternalMessage)(message)) {
         return;
       }
       if (latestEventTimeStamp.current && message.eventTimestamp && message.eventTimestamp <= latestEventTimeStamp.current) {
@@ -319,11 +358,11 @@ var useUniformContextualEditing = ({
       registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
     };
   }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id, contextualComposition == null ? void 0 : contextualComposition._id]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isInContextEditingMode()) {
       return;
     }
-    const existingScript = document.getElementById(import_canvas4.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
+    const existingScript = document.getElementById(import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
     if (existingScript) {
       return;
     }
@@ -333,7 +372,7 @@ var useUniformContextualEditing = ({
       version: 2
     };
     const script = document.createElement("script");
-    script.id = import_canvas4.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
+    script.id = import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
     script.src = getCanvasInContextEmbedScriptUrl();
     script.async = true;
     document.head.appendChild(script);
@@ -352,18 +391,18 @@ function isInContextEditingMode() {
     return false;
   }
   const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+    import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
   );
-  return isOpenedByInContextEditor && (0, import_canvas4.isAllowedReferrer)(window.document.referrer);
+  return isOpenedByInContextEditor && (0, import_canvas6.isAllowedReferrer)(window.document.referrer);
 }
 
 // src/components/UniformComposition.tsx
-var UniformCompositionContext = (0, import_react4.createContext)({
+var UniformCompositionContext = (0, import_react6.createContext)({
   data: void 0,
   isContextualEditing: false
 });
 function useUniformCurrentComposition() {
-  return (0, import_react4.useContext)(UniformCompositionContext);
+  return (0, import_react6.useContext)(UniformCompositionContext);
 }
 function UniformComposition({
   data,
@@ -373,16 +412,17 @@ function UniformComposition({
   contextualEditingEnhancer,
   contextualEditingDefaultPlaceholder
 }) {
+  const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: data,
+    initialCompositionValue: ruledComposition,
     enhance: contextualEditingEnhancer
   });
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     UniformCompositionContext.Provider,
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
     },
-    /* @__PURE__ */ import_react4.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react6.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react6.default.createElement(
       UniformComponent,
       {
         data: composition,
@@ -406,16 +446,16 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a;
-  const isPlaceholder = (0, import_canvas5.isComponentPlaceholderId)(component == null ? void 0 : component._id);
+  const isPlaceholder = (0, import_canvas7.isComponentPlaceholderId)(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, children);
   }
   if (isPlaceholder && emptyPlaceholder === null) {
     return null;
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     PureContextualEditingComponentWrapper,
     {
       isPlaceholder,
@@ -445,7 +485,7 @@ function UniformSlot({
   }
   const slot = (_a = parentData.slots) == null ? void 0 : _a[name];
   if (!slot || !Array.isArray(slot)) {
-    if (process.env.NODE_ENV === "development" && parentData.type !== import_canvas6.EMPTY_COMPOSITION.type) {
+    if (process.env.NODE_ENV === "development" && parentData.type !== import_canvas8.EMPTY_COMPOSITION.type) {
       console.warn(
         `[canvas-dev] slot '${name}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,
         parentData
@@ -466,13 +506,13 @@ function UniformSlot({
       emptyPlaceholder
     });
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
-    return import_react6.default.createElement(import_react6.default.Fragment, { key: index }, elements);
+    return import_react8.default.createElement(import_react8.default.Fragment, { key: index }, elements);
   });
   if (!wrapperComponent) {
-    return import_react6.default.createElement(import_react6.default.Fragment, void 0, finalChildren);
+    return import_react8.default.createElement(import_react8.default.Fragment, void 0, finalChildren);
   }
   const Wrapper = wrapperComponent;
-  return /* @__PURE__ */ import_react6.default.createElement(Wrapper, { items: finalChildren, slotName: name });
+  return /* @__PURE__ */ import_react8.default.createElement(Wrapper, { items: finalChildren, slotName: name });
 }
 function renderComponent({
   component,
@@ -485,7 +525,7 @@ function renderComponent({
   emptyPlaceholder
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
-  if (component.type === import_canvas6.CANVAS_TEST_TYPE) {
+  if (component.type === import_canvas8.CANVAS_TEST_TYPE) {
     const testComponent = defaultSystemComponentResolver.test(
       component,
       key,
@@ -496,15 +536,15 @@ function renderComponent({
           resolveRenderer,
           key: key2,
           parentComponent: component,
-          slotName: import_canvas6.CANVAS_TEST_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas6.CANVAS_TEST_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas6.CANVAS_TEST_SLOT].findIndex(
+          slotName: import_canvas8.CANVAS_TEST_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas8.CANVAS_TEST_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas8.CANVAS_TEST_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
       }
     );
-    return /* @__PURE__ */ import_react6.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -516,7 +556,7 @@ function renderComponent({
       },
       testComponent
     );
-  } else if (component.type === import_canvas6.CANVAS_PERSONALIZE_TYPE) {
+  } else if (component.type === import_canvas8.CANVAS_PERSONALIZE_TYPE) {
     const personalizationComponent = defaultSystemComponentResolver.personalization(
       component,
       key,
@@ -527,15 +567,15 @@ function renderComponent({
           resolveRenderer,
           key: key2,
           parentComponent: component,
-          slotName: import_canvas6.CANVAS_PERSONALIZE_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas6.CANVAS_PERSONALIZE_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas6.CANVAS_PERSONALIZE_SLOT].findIndex(
+          slotName: import_canvas8.CANVAS_PERSONALIZE_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas8.CANVAS_PERSONALIZE_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas8.CANVAS_PERSONALIZE_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
       }
     );
-    return /* @__PURE__ */ import_react6.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -549,7 +589,7 @@ function renderComponent({
     );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
-    return /* @__PURE__ */ import_react6.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ import_react6.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ import_react8.default.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -559,7 +599,7 @@ function renderComponent({
         slotChildrenCount,
         emptyPlaceholder
       },
-      /* @__PURE__ */ import_react6.default.createElement(RenderComponent, { ...props })
+      /* @__PURE__ */ import_react8.default.createElement(RenderComponent, { ...props })
     ));
   } else if (process.env.NODE_ENV !== "production") {
     console.warn(
@@ -572,9 +612,9 @@ function renderComponent({
 }
 
 // src/components/UniformComponent.tsx
-var UniformComponentContext = (0, import_react7.createContext)({});
+var UniformComponentContext = (0, import_react9.createContext)({});
 function useUniformCurrentComponent() {
-  return (0, import_react7.useContext)(UniformComponentContext);
+  return (0, import_react9.useContext)(UniformComponentContext);
 }
 function UniformComponent({
   data,
@@ -585,7 +625,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = (0, import_context_react2.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = (0, import_context_react3.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
   if (!data) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
@@ -598,17 +638,17 @@ function UniformComponent({
     behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView",
     contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
-  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas7.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
-  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
+  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas9.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react3.TrackFragment : import_context_react3.Track;
   const resolvedChildren = resolveChildren({
     children,
     data,
     hasParentLayout: Boolean(parentData.data),
     resolveRenderer: contextValue.resolveRenderer
   });
-  return /* @__PURE__ */ import_react7.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
+  return /* @__PURE__ */ import_react9.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
     /* auto-track behavior signals when in a Canvas context */
-    /* @__PURE__ */ import_react7.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
+    /* @__PURE__ */ import_react9.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
   ) : resolvedChildren);
 }
 function resolveChildren({
@@ -621,14 +661,14 @@ function resolveChildren({
   if (!children && !hasParentLayout) {
     const topLevelComponent = resolveRenderer({ type: data.type });
     if (topLevelComponent) {
-      children = import_react7.default.createElement(topLevelComponent, convertComponentToProps(data));
+      children = import_react9.default.createElement(topLevelComponent, convertComponentToProps(data));
     } else {
       if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
         console.warn(
           `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<UniformSlot name={slotName} />' to reliably render the slots.`
         );
       }
-      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react7.default.createElement(UniformSlot, { key: slotName, name: slotName }));
+      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react9.default.createElement(UniformSlot, { key: slotName, name: slotName }));
     }
   }
   const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
@@ -636,47 +676,38 @@ function resolveChildren({
 }
 
 // src/components/UniformPlayground.tsx
-var import_canvas8 = require("@uniformdev/canvas");
-var import_react8 = __toESM(require("react"));
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react10 = __toESM(require("react"));
 var UniformPlayground = ({
   resolveRenderer,
   decorators = [],
   contextualEditingEnhancer,
   behaviorTracking,
-  contextualEditingDefaultPlaceholder,
-  children
+  contextualEditingDefaultPlaceholder
 }) => {
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: import_canvas8.EMPTY_COMPOSITION,
+    initialCompositionValue: import_canvas10.EMPTY_COMPOSITION,
     enhance: contextualEditingEnhancer
   });
-  const renderedComponent = (0, import_react8.useMemo)(() => {
+  const renderedComponent = (0, import_react10.useMemo)(() => {
     if (!composition) {
       return null;
     }
-    let component = /* @__PURE__ */ import_react8.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react8.default.createElement(
+    let component = /* @__PURE__ */ import_react10.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react10.default.createElement(
       UniformComponent,
       {
         data: composition,
         behaviorTracking,
         resolveRenderer,
         contextualEditingDefaultPlaceholder
-      },
-      children
+      }
     ));
     decorators.forEach((Decorator) => {
-      component = /* @__PURE__ */ import_react8.default.createElement(Decorator, { data: composition }, component);
+      component = /* @__PURE__ */ import_react10.default.createElement(Decorator, { data: composition }, component);
     });
     return component;
-  }, [
-    children,
-    resolveRenderer,
-    decorators,
-    composition,
-    behaviorTracking,
-    contextualEditingDefaultPlaceholder
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement(
+  }, [resolveRenderer, decorators, composition, behaviorTracking, contextualEditingDefaultPlaceholder]);
+  return /* @__PURE__ */ import_react10.default.createElement(
     UniformCompositionContext.Provider,
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
@@ -686,57 +717,57 @@ var UniformPlayground = ({
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var import_canvas9 = require("@uniformdev/canvas");
+var import_canvas11 = require("@uniformdev/canvas");
 var import_richtext5 = require("@uniformdev/richtext");
-var import_react18 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 var import_richtext4 = require("@uniformdev/richtext");
-var import_react17 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ import_react9.default.createElement(HTag, null, children);
+  return /* @__PURE__ */ import_react11.default.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ import_react10.default.createElement("br", null);
+  return /* @__PURE__ */ import_react12.default.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 var import_richtext = require("@uniformdev/richtext");
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ import_react11.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
+  return /* @__PURE__ */ import_react13.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ import_react12.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ import_react14.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ import_react13.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ import_react15.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 var import_richtext2 = require("@uniformdev/richtext");
-var import_react14 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "p",
     {
       dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
@@ -747,18 +778,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-var import_react15 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, "	");
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 var import_richtext3 = require("@uniformdev/richtext");
-var import_react16 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react16.default.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react18.default.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -772,8 +803,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ import_react17.default.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react19.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ import_react19.default.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -782,12 +813,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ import_react17.default.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react19.default.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ import_react17.default.createElement("pre", null, /* @__PURE__ */ import_react17.default.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ import_react19.default.createElement("pre", null, /* @__PURE__ */ import_react19.default.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -796,34 +827,34 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = import_react18.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = import_react20.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = (0, import_react18.useMemo)(() => {
+  const parameter = (0, import_react20.useMemo)(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = (0, import_react18.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = (0, import_react20.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value)) return null;
-  return Tag === null ? /* @__PURE__ */ import_react18.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react18.default.createElement(
+  return Tag === null ? /* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react20.default.createElement(
     Tag,
     {
       ref,
       ...props,
       ...{
-        [import_canvas9.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
-        [import_canvas9.ATTRIBUTE_PARAMETER_ID]: parameterId,
-        [import_canvas9.ATTRIBUTE_PARAMETER_TYPE]: "richText"
+        [import_canvas11.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [import_canvas11.ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [import_canvas11.ATTRIBUTE_PARAMETER_TYPE]: "richText"
       }
     },
-    /* @__PURE__ */ import_react18.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+    /* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
   );
 });
 
 // src/components/UniformText.tsx
-var import_react20 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/PureUniformText.tsx
-var import_react19 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var PureUniformText = ({
   as: Tag = "span",
   parameterId,
@@ -842,10 +873,10 @@ var PureUniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react19.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ import_react21.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     Tag,
     {
       ...props,
@@ -874,7 +905,7 @@ var UniformText = ({
   var _a, _b, _c;
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
   const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
   const shouldSkipCustomRendering = isFocused && isEditable;
@@ -883,7 +914,7 @@ var UniformText = ({
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     PureUniformText,
     {
       ...props,
@@ -906,35 +937,35 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas10 = require("@uniformdev/canvas");
+var import_canvas12 = require("@uniformdev/canvas");
 var getParameterAttributes = (options) => {
   return {
-    ...(0, import_canvas10.getParameterAttributes)(options),
+    ...(0, import_canvas12.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas11 = require("@uniformdev/canvas");
-var import_react21 = require("react");
+var import_canvas13 = require("@uniformdev/canvas");
+var import_react23 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas11.createEventBus)();
+      const eventBus = await (0, import_canvas13.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas11.subscribeToComposition)({
+        goodbye = (0, import_canvas13.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas11.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas13.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -951,28 +982,28 @@ function useCompositionEventEffect({
 }
 
 // src/hooks/useUniformContextualEditingState.ts
-var import_canvas12 = require("@uniformdev/canvas");
-var import_react22 = require("react");
+var import_canvas14 = require("@uniformdev/canvas");
+var import_react24 = require("react");
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
-  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react22.useState)();
-  const [previewMode, setPreviewMode] = (0, import_react22.useState)(
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react24.useState)();
+  const [previewMode, setPreviewMode] = (0, import_react24.useState)(
     isContextualEditing ? "editor" : void 0
   );
-  const channel = (0, import_react22.useMemo)(() => {
+  const channel = (0, import_react24.useMemo)(() => {
     if (!isContextualEditing) {
       return;
     }
-    const channel2 = (0, import_canvas12.createCanvasChannel)({
+    const channel2 = (0, import_canvas14.createCanvasChannel)({
       broadcastTo: [window],
       listenTo: [window]
     });
     return channel2;
   }, [isContextualEditing]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     var _a, _b;
     if (!channel) {
       return;
@@ -982,7 +1013,7 @@ var useUniformContextualEditingState = ({
     }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
       var _a2;
-      if (!(0, import_canvas12.isUpdateContextualEditingStateInternalMessage)(message)) {
+      if (!(0, import_canvas14.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
       setPreviewMode(message.state.previewMode);
@@ -996,7 +1027,7 @@ var useUniformContextualEditingState = ({
       unsubscribe();
     };
   }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
-  return (0, import_react22.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       isContextualEditing,
       selectedComponentReference,

package/dist/index.mjs

@@ -233,6 +233,45 @@ var PureContextualEditingComponentWrapper = ({
 // src/components/UniformComposition.tsx
 import React4, { createContext, useContext } from "react";
 
+// src/hooks/useClientConditionsComposition.ts
+import { evaluateWalkTreeVisibility, walkNodeTree } from "@uniformdev/canvas";
+import { produce } from "immer";
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useClientVisibilityRules.ts
+import { createQuirksVisibilityRule } from "@uniformdev/canvas";
+import { useQuirks } from "@uniformdev/context-react";
+import { useMemo } from "react";
+function useClientVisibilityRules() {
+  const quirks = useQuirks({ throwOnMissingProvider: false });
+  return useMemo(() => {
+    return {
+      ...createQuirksVisibilityRule(quirks)
+    };
+  }, [quirks]);
+}
+
+// src/hooks/useClientConditionsComposition.ts
+function useClientConditionsComposition(data) {
+  const rules = useClientVisibilityRules();
+  const preprocessedValue = useMemo2(() => {
+    if (!data) {
+      return data;
+    }
+    try {
+      return produce(data, (draft) => {
+        walkNodeTree(draft, (context) => {
+          evaluateWalkTreeVisibility({ context, rules, showIndeterminate: false });
+        });
+      });
+    } catch (e) {
+      console.error("Error evaluating visibility rules:", e.stack);
+      return data;
+    }
+  }, [data, rules]);
+  return preprocessedValue;
+}
+
 // src/hooks/useUniformContextualEditing.ts
 import {
   createCanvasChannel,
@@ -243,7 +282,7 @@ import {
   isAllowedReferrer,
   isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
@@ -251,7 +290,7 @@ var useUniformContextualEditing = ({
 }) => {
   const [contextualComposition, setContextualComposition] = useState();
   const latestEventTimeStamp = useRef();
-  const channel = useMemo(() => {
+  const channel = useMemo3(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
@@ -341,8 +380,9 @@ function UniformComposition({
   contextualEditingEnhancer,
   contextualEditingDefaultPlaceholder
 }) {
+  const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: data,
+    initialCompositionValue: ruledComposition,
     enhance: contextualEditingEnhancer
   });
   return /* @__PURE__ */ React4.createElement(
@@ -605,20 +645,19 @@ function resolveChildren({
 
 // src/components/UniformPlayground.tsx
 import { EMPTY_COMPOSITION as EMPTY_COMPOSITION4 } from "@uniformdev/canvas";
-import React8, { useMemo as useMemo2 } from "react";
+import React8, { useMemo as useMemo4 } from "react";
 var UniformPlayground = ({
   resolveRenderer,
   decorators = [],
   contextualEditingEnhancer,
   behaviorTracking,
-  contextualEditingDefaultPlaceholder,
-  children
+  contextualEditingDefaultPlaceholder
 }) => {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: EMPTY_COMPOSITION4,
     enhance: contextualEditingEnhancer
   });
-  const renderedComponent = useMemo2(() => {
+  const renderedComponent = useMemo4(() => {
     if (!composition) {
       return null;
     }
@@ -629,21 +668,13 @@ var UniformPlayground = ({
         behaviorTracking,
         resolveRenderer,
         contextualEditingDefaultPlaceholder
-      },
-      children
+      }
     ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ React8.createElement(Decorator, { data: composition }, component);
     });
     return component;
-  }, [
-    children,
-    resolveRenderer,
-    decorators,
-    composition,
-    behaviorTracking,
-    contextualEditingDefaultPlaceholder
-  ]);
+  }, [resolveRenderer, decorators, composition, behaviorTracking, contextualEditingDefaultPlaceholder]);
   return /* @__PURE__ */ React8.createElement(
     UniformCompositionContext.Provider,
     {
@@ -663,7 +694,7 @@ import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React18, { useMemo as useMemo3 } from "react";
+import React18, { useMemo as useMemo5 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
@@ -773,11 +804,11 @@ var resolveRichTextDefaultRenderer = (node) => {
 // src/components/UniformRichText/UniformRichText.tsx
 var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo3(() => {
+  const parameter = useMemo5(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo5(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
   return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
     Tag,
@@ -936,7 +967,7 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
@@ -946,7 +977,7 @@ var useUniformContextualEditingState = ({
   const [previewMode, setPreviewMode] = useState3(
     isContextualEditing ? "editor" : void 0
   );
-  const channel = useMemo4(() => {
+  const channel = useMemo6(() => {
     if (!isContextualEditing) {
       return;
     }
@@ -980,7 +1011,7 @@ var useUniformContextualEditingState = ({
       unsubscribe();
     };
   }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
-  return useMemo4(
+  return useMemo6(
     () => ({
       isContextualEditing,
       selectedComponentReference,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.166.1",
+  "version": "19.169.0",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,17 +45,19 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.166.1",
-    "@uniformdev/context": "19.166.1",
-    "@uniformdev/context-react": "19.166.1",
-    "@uniformdev/richtext": "19.166.1"
+    "@uniformdev/canvas": "19.169.0",
+    "@uniformdev/context": "19.169.0",
+    "@uniformdev/context-react": "19.169.0",
+    "@uniformdev/richtext": "19.169.0"
   },
   "peerDependencies": {
+    "immer": ">= 10",
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
     "@types/react": "18.2.40",
+    "immer": "10.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -65,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d6a92d76bb91fa41a51cf27a69d81e0cc985f80f"
+  "gitHead": "78f454f7178dfac0480403a9728c430b7697a724"
 }