@uniformdev/canvas-react 19.48.0 → 19.48.1-alpha.8

package/dist/index.d.mts

@@ -257,6 +257,7 @@ type UniformCompositionContextValue = {
     behaviorTracking?: UniformCompositionProps['behaviorTracking'];
     isContextualEditing: boolean;
 };
+declare const UniformCompositionContext: React$1.Context<UniformCompositionContextValue>;
 /**
  * Gets the data of the closest `<UniformComposition />` ancestor.
  */
@@ -268,6 +269,24 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
+type UniformPlaygroundDecorator = (options: {
+    children: React$1.ReactNode;
+    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)
+     * @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'>;
+/**
+ * Playground where you can freely live preview your components and pattern.
+ */
+declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, children, }: UniformPlaygroundProps) => React$1.JSX.Element;
+
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
 };
@@ -404,4 +423,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -257,6 +257,7 @@ type UniformCompositionContextValue = {
     behaviorTracking?: UniformCompositionProps['behaviorTracking'];
     isContextualEditing: boolean;
 };
+declare const UniformCompositionContext: React$1.Context<UniformCompositionContextValue>;
 /**
  * Gets the data of the closest `<UniformComposition />` ancestor.
  */
@@ -268,6 +269,24 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
+type UniformPlaygroundDecorator = (options: {
+    children: React$1.ReactNode;
+    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)
+     * @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'>;
+/**
+ * Playground where you can freely live preview your components and pattern.
+ */
+declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, children, }: UniformPlaygroundProps) => React$1.JSX.Element;
+
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
 };
@@ -404,4 +423,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -558,60 +558,110 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformPlayground.tsx
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION3 } from "@uniformdev/canvas";
+import React7, { useMemo as useMemo2 } from "react";
+var UniformPlayground = ({
+  resolveRenderer,
+  decorators = [],
+  contextualEditingEnhancer,
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder,
+  children
+}) => {
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: EMPTY_COMPOSITION3,
+    enhance: contextualEditingEnhancer
+  });
+  const renderedComponent = useMemo2(() => {
+    if (!composition) {
+      return null;
+    }
+    let component = /* @__PURE__ */ React7.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    );
+    decorators.forEach((Decorator) => {
+      component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
+    });
+    return component;
+  }, [
+    children,
+    resolveRenderer,
+    decorators,
+    composition,
+    behaviorTracking,
+    contextualEditingDefaultPlaceholder
+  ]);
+  return /* @__PURE__ */ React7.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+    },
+    /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+  );
+};
+
 // src/components/UniformRichText/UniformRichText.tsx
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React16, { useMemo as useMemo2 } from "react";
+import React17, { useMemo as useMemo3 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React15 from "react";
+import React16 from "react";
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-import React7 from "react";
+import React8 from "react";
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ React7.createElement(HTag, null, children);
+  return /* @__PURE__ */ React8.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-import React8 from "react";
+import React9 from "react";
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ React8.createElement("br", null);
+  return /* @__PURE__ */ React9.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import React9 from "react";
+import React10 from "react";
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ React9.createElement("a", { href: linkParamValueToHref(link) }, children);
+  return /* @__PURE__ */ React10.createElement("a", { href: linkParamValueToHref(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-import React10 from "react";
+import React11 from "react";
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ React10.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ React11.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-import React11 from "react";
+import React12 from "react";
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ React11.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ React12.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import React12 from "react";
+import React13 from "react";
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -622,18 +672,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-import React13 from "react";
+import React14 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, "	");
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React14 from "react";
+import React15 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React14.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React15.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -648,8 +698,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React15.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React15.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React16.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React16.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -658,12 +708,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React15.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React16.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React15.createElement("pre", null, /* @__PURE__ */ React15.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React16.createElement("pre", null, /* @__PURE__ */ React16.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React16.createElement(React16.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -672,20 +722,20 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = React16.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo2(() => {
+  const parameter = useMemo3(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
 });
 
 // src/components/UniformText.tsx
-import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import React18, { useCallback, useMemo as useMemo4, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -698,7 +748,7 @@ var UniformText = ({
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo3(() => {
+  const parameter = useMemo4(() => {
     var _a2;
     return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
@@ -715,11 +765,11 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React18.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ...props,
@@ -794,14 +844,14 @@ 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 useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
-  const channel = useMemo4(() => {
+  const channel = useMemo5(() => {
     if (!isContextualEditing) {
       return;
     }
@@ -840,6 +890,8 @@ export {
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformCompositionContext,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

package/dist/index.js

@@ -34,6 +34,8 @@ __export(src_exports, {
   NOT_IMPLEMENTED_COMPONENT: () => NOT_IMPLEMENTED_COMPONENT,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
+  UniformCompositionContext: () => UniformCompositionContext,
+  UniformPlayground: () => UniformPlayground,
   UniformRichText: () => UniformRichText,
   UniformRichTextNode: () => UniformRichTextNode,
   UniformSlot: () => UniformSlot,
@@ -590,57 +592,107 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformPlayground.tsx
+var import_canvas7 = require("@uniformdev/canvas");
+var import_react7 = __toESM(require("react"));
+var UniformPlayground = ({
+  resolveRenderer,
+  decorators = [],
+  contextualEditingEnhancer,
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder,
+  children
+}) => {
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: import_canvas7.EMPTY_COMPOSITION,
+    enhance: contextualEditingEnhancer
+  });
+  const renderedComponent = (0, import_react7.useMemo)(() => {
+    if (!composition) {
+      return null;
+    }
+    let component = /* @__PURE__ */ import_react7.default.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    );
+    decorators.forEach((Decorator) => {
+      component = /* @__PURE__ */ import_react7.default.createElement(Decorator, { data: composition }, component);
+    });
+    return component;
+  }, [
+    children,
+    resolveRenderer,
+    decorators,
+    composition,
+    behaviorTracking,
+    contextualEditingDefaultPlaceholder
+  ]);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+    },
+    /* @__PURE__ */ import_react7.default.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+  );
+};
+
 // src/components/UniformRichText/UniformRichText.tsx
 var import_richtext5 = require("@uniformdev/richtext");
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 var import_richtext4 = require("@uniformdev/richtext");
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ import_react7.default.createElement(HTag, null, children);
+  return /* @__PURE__ */ import_react8.default.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ import_react8.default.createElement("br", null);
+  return /* @__PURE__ */ import_react9.default.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 var import_richtext = require("@uniformdev/richtext");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ import_react9.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
+  return /* @__PURE__ */ import_react10.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ import_react10.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ import_react11.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ import_react11.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ import_react12.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_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "p",
     {
       dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
@@ -651,18 +703,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, "	");
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 var import_richtext3 = require("@uniformdev/richtext");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react14.default.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react15.default.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -677,8 +729,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react15.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ import_react15.default.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react16.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ import_react16.default.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -687,12 +739,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ import_react15.default.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react16.default.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ import_react15.default.createElement("pre", null, /* @__PURE__ */ import_react15.default.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ import_react16.default.createElement("pre", null, /* @__PURE__ */ import_react16.default.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -701,20 +753,20 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = import_react16.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = import_react17.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = (0, import_react16.useMemo)(() => {
+  const parameter = (0, import_react17.useMemo)(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = (0, import_react16.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = (0, import_react17.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_react16.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react16.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react16.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react17.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
 });
 
 // src/components/UniformText.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -726,29 +778,29 @@ var UniformText = ({
   var _a, _b;
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
-  const parameter = (0, import_react17.useMemo)(() => {
+  const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
+  const parameter = (0, import_react18.useMemo)(() => {
     var _a2;
     return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
   const value = parameter == null ? void 0 : parameter.value;
   const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
   const shouldSkipCustomRendering = isFocused && isEditable;
-  const handleOnFocus = (0, import_react17.useCallback)(() => {
+  const handleOnFocus = (0, import_react18.useCallback)(() => {
     setIsFocused(true);
   }, [setIsFocused]);
-  const handleOnBlur = (0, import_react17.useCallback)(() => {
+  const handleOnBlur = (0, import_react18.useCallback)(() => {
     setIsFocused(false);
   }, [setIsFocused]);
   if (!parameter) {
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react17.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ import_react18.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     Tag,
     {
       ...props,
@@ -768,35 +820,35 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas7 = require("@uniformdev/canvas");
+var import_canvas8 = require("@uniformdev/canvas");
 var getParameterAttributes = (options) => {
   return {
-    ...(0, import_canvas7.getParameterAttributes)(options),
+    ...(0, import_canvas8.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas8 = require("@uniformdev/canvas");
-var import_react18 = require("react");
+var import_canvas9 = require("@uniformdev/canvas");
+var import_react19 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas8.createEventBus)();
+      const eventBus = await (0, import_canvas9.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas8.subscribeToComposition)({
+        goodbye = (0, import_canvas9.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas8.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas9.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -813,31 +865,31 @@ function useCompositionEventEffect({
 }
 
 // src/hooks/useUniformContextualEditingState.ts
-var import_canvas9 = require("@uniformdev/canvas");
-var import_react19 = require("react");
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react20 = require("react");
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
-  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react19.useState)();
-  const channel = (0, import_react19.useMemo)(() => {
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react20.useState)();
+  const channel = (0, import_react20.useMemo)(() => {
     if (!isContextualEditing) {
       return;
     }
-    const channel2 = (0, import_canvas9.createCanvasChannel)({
+    const channel2 = (0, import_canvas10.createCanvasChannel)({
       broadcastTo: [window],
       listenTo: [window]
     });
     return channel2;
   }, [isContextualEditing]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!channel) {
       return;
     }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
       var _a;
-      if (!(0, import_canvas9.isUpdateContextualEditingStateInternalMessage)(message)) {
+      if (!(0, import_canvas10.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
@@ -861,6 +913,8 @@ var useUniformContextualEditingState = ({
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformCompositionContext,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

package/dist/index.mjs

@@ -558,60 +558,110 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformPlayground.tsx
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION3 } from "@uniformdev/canvas";
+import React7, { useMemo as useMemo2 } from "react";
+var UniformPlayground = ({
+  resolveRenderer,
+  decorators = [],
+  contextualEditingEnhancer,
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder,
+  children
+}) => {
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: EMPTY_COMPOSITION3,
+    enhance: contextualEditingEnhancer
+  });
+  const renderedComponent = useMemo2(() => {
+    if (!composition) {
+      return null;
+    }
+    let component = /* @__PURE__ */ React7.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    );
+    decorators.forEach((Decorator) => {
+      component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
+    });
+    return component;
+  }, [
+    children,
+    resolveRenderer,
+    decorators,
+    composition,
+    behaviorTracking,
+    contextualEditingDefaultPlaceholder
+  ]);
+  return /* @__PURE__ */ React7.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+    },
+    /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+  );
+};
+
 // src/components/UniformRichText/UniformRichText.tsx
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React16, { useMemo as useMemo2 } from "react";
+import React17, { useMemo as useMemo3 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React15 from "react";
+import React16 from "react";
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-import React7 from "react";
+import React8 from "react";
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ React7.createElement(HTag, null, children);
+  return /* @__PURE__ */ React8.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-import React8 from "react";
+import React9 from "react";
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ React8.createElement("br", null);
+  return /* @__PURE__ */ React9.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import React9 from "react";
+import React10 from "react";
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ React9.createElement("a", { href: linkParamValueToHref(link) }, children);
+  return /* @__PURE__ */ React10.createElement("a", { href: linkParamValueToHref(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-import React10 from "react";
+import React11 from "react";
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ React10.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ React11.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-import React11 from "react";
+import React12 from "react";
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ React11.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ React12.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import React12 from "react";
+import React13 from "react";
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -622,18 +672,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-import React13 from "react";
+import React14 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, "	");
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React14 from "react";
+import React15 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React14.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React15.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -648,8 +698,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React15.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React15.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React16.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React16.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -658,12 +708,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React15.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React16.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React15.createElement("pre", null, /* @__PURE__ */ React15.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React16.createElement("pre", null, /* @__PURE__ */ React16.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React16.createElement(React16.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -672,20 +722,20 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = React16.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo2(() => {
+  const parameter = useMemo3(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
 });
 
 // src/components/UniformText.tsx
-import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import React18, { useCallback, useMemo as useMemo4, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -698,7 +748,7 @@ var UniformText = ({
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo3(() => {
+  const parameter = useMemo4(() => {
     var _a2;
     return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
@@ -715,11 +765,11 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React18.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ...props,
@@ -794,14 +844,14 @@ 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 useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
-  const channel = useMemo4(() => {
+  const channel = useMemo5(() => {
     if (!isContextualEditing) {
       return;
     }
@@ -840,6 +890,8 @@ export {
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformCompositionContext,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.48.0",
+  "version": "19.48.1-alpha.8+0418d546a",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -25,10 +25,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.48.0",
-    "@uniformdev/context": "19.48.0",
-    "@uniformdev/context-react": "19.48.0",
-    "@uniformdev/richtext": "19.48.0"
+    "@uniformdev/canvas": "19.48.1-alpha.8+0418d546a",
+    "@uniformdev/context": "19.48.1-alpha.8+0418d546a",
+    "@uniformdev/context-react": "19.48.1-alpha.8+0418d546a",
+    "@uniformdev/richtext": "19.48.1-alpha.8+0418d546a"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "046d1410326925dc79a1556a8d5190c74df50d12"
+  "gitHead": "0418d546ad78898515544d07f095ff03809c611c"
 }