@uniformdev/canvas-vue 19.38.2 → 19.38.3-alpha.78

package/dist/index.js

@@ -31,13 +31,14 @@ __export(src_exports, {
   TextRichTextNode: () => TextRichTextNode,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
+  UniformPlayground: () => UniformPlayground,
   UniformRichText: () => UniformRichText,
   UniformRichTextNode: () => UniformRichTextNode,
   UniformSlot: () => UniformSlot,
   UniformText: () => UniformText,
   convertComponentToProps: () => convertComponentToProps,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
-  getParameterAttributes: () => import_canvas8.getParameterAttributes,
+  getParameterAttributes: () => import_canvas9.getParameterAttributes,
   globalCompositionEnhancerInjectionKey: () => globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect: () => useCompositionEventEffect,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -315,25 +316,29 @@ var ContextualEditingComponentWrapper = (0, import_vue_demi4.defineComponent)({
     var _a;
     const { isContextualEditing } = useUniformCurrentComposition();
     const isPlaceholder = ((_a = props.component) == null ? void 0 : _a._id) === import_canvas4.PLACEHOLDER_ID;
+    const component = props.component;
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return !(isContextualEditing == null ? void 0 : isContextualEditing.value) ? (_b = (_a2 = context.slots).default) == null ? void 0 : _b.call(_a2) : isPlaceholder && ((_d = (_c = context.slots).emptyPlaceholder) == null ? void 0 : _d.call(_c).length) === 0 ? [] : [
         (0, import_vue_demi4.h)("script", {
           "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
           "data-parent-id": (_e = props.parentComponent) == null ? void 0 : _e._id,
           "data-parent-type": (_f = props.parentComponent) == null ? void 0 : _f.type,
-          "data-component-id": (_g = props.component) == null ? void 0 : _g._id,
+          "data-component-id": component == null ? void 0 : component._id,
           "data-slot-name": props.slotName,
           "data-component-index": props.indexInSlot,
           "data-total-components": props.slotChildrenCount,
-          "data-component-name": (_h = props.component) == null ? void 0 : _h.type,
+          "data-component-name": component == null ? void 0 : component.type,
           "data-is-placeholder": isPlaceholder ? "true" : void 0,
-          "data-is-localized": ((_j = (_i = props.component) == null ? void 0 : _i.parameters) == null ? void 0 : _j[import_canvas4.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+          "data-is-localized": ((_g = component == null ? void 0 : component.parameters) == null ? void 0 : _g[import_canvas4.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
           // TODO: use a proper way to get the component's title, don't assume that it's always "title"
           // https://linear.app/uniform/issue/UNI-937/show-the-right-component-title-in-the-highlighter
-          "data-component-title": (_m = (_l = (_k = props.component) == null ? void 0 : _k.parameters) == null ? void 0 : _l.title) == null ? void 0 : _m.value
+          "data-component-title": (_i = (_h = component == null ? void 0 : component.parameters) == null ? void 0 : _h.title) == null ? void 0 : _i.value,
+          // In preview mode if we are viewing a historic entry we do not want to allow
+          // the user to add a component to the composition or move the component around the page
+          "data-is-readonly": ((_j = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _j.isEditable) ? void 0 : "true"
         }),
-        isPlaceholder && context.slots.emptyPlaceholder !== void 0 ? context.slots.emptyPlaceholder() : (_o = (_n = context.slots).default) == null ? void 0 : _o.call(_n),
+        isPlaceholder && context.slots.emptyPlaceholder !== void 0 ? context.slots.emptyPlaceholder() : (_l = (_k = context.slots).default) == null ? void 0 : _l.call(_k),
         (0, import_vue_demi4.h)("script", { "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE })
       ];
     };
@@ -400,20 +405,37 @@ var UniformComposition = (0, import_vue_demi5.defineComponent)({
     );
   }
 });
+var UniformComposition_default = UniformComposition;
 
-// src/components/UniformRichText/nodes/HeadingRichTextNode.ts
+// src/components/UniformPlayground.ts
+var import_canvas5 = require("@uniformdev/canvas");
 var import_vue_demi6 = require("vue-demi");
+var UniformPlayground = (0, import_vue_demi6.defineComponent)({
+  name: "UniformPlayground",
+  inheritAttrs: false,
+  props: {
+    resolveRenderer: {
+      type: Object
+    }
+  },
+  setup(props) {
+    return () => (0, import_vue_demi6.h)(UniformComposition_default, { data: import_canvas5.EMPTY_COMPOSITION, resolveRenderer: props.resolveRenderer });
+  }
+});
+
+// src/components/UniformRichText/nodes/HeadingRichTextNode.ts
+var import_vue_demi7 = require("vue-demi");
 var HeadingRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return (0, import_vue_demi6.h)(tag != null ? tag : "h1", {}, context.slots);
+  return (0, import_vue_demi7.h)(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.ts
 var import_richtext = require("@uniformdev/richtext");
-var import_vue_demi7 = require("vue-demi");
+var import_vue_demi8 = require("vue-demi");
 var LinkRichTextNode = (props, context) => {
   const { link } = props.node;
-  return (0, import_vue_demi7.h)(
+  return (0, import_vue_demi8.h)(
     "a",
     {
       href: (0, import_richtext.linkParamValueToHref)(link)
@@ -423,10 +445,10 @@ var LinkRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.ts
-var import_vue_demi8 = require("vue-demi");
+var import_vue_demi9 = require("vue-demi");
 var ListItemRichTextNode = (props, context) => {
   const { value } = props.node;
-  return (0, import_vue_demi8.h)(
+  return (0, import_vue_demi9.h)(
     "li",
     {
       value: Number.isFinite(value) && value > 0 ? value : void 0
@@ -436,18 +458,18 @@ var ListItemRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.ts
-var import_vue_demi9 = require("vue-demi");
+var import_vue_demi10 = require("vue-demi");
 var ListRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return (0, import_vue_demi9.h)(tag != null ? tag : "h1", {}, context.slots);
+  return (0, import_vue_demi10.h)(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
 var import_richtext2 = require("@uniformdev/richtext");
-var import_vue_demi10 = require("vue-demi");
+var import_vue_demi11 = require("vue-demi");
 var ParagraphRichTextNode = (props, context) => {
   const { format, direction } = props.node;
-  return (0, import_vue_demi10.h)(
+  return (0, import_vue_demi11.h)(
     "p",
     {
       dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
@@ -458,61 +480,61 @@ var ParagraphRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/QuoteRichTextNode.ts
-var import_vue_demi11 = require("vue-demi");
+var import_vue_demi12 = require("vue-demi");
 var QuoteRichTextNode = (_, context) => {
-  return (0, import_vue_demi11.h)("blockquote", {}, context.slots);
+  return (0, import_vue_demi12.h)("blockquote", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/RootRichTextNode.ts
-var import_vue_demi12 = require("vue-demi");
+var import_vue_demi13 = require("vue-demi");
 var RootRichTextNode = (props, c) => {
-  return (0, import_vue_demi12.h)(() => c.slots.default ? c.slots.default() : null);
+  return (0, import_vue_demi13.h)(() => c.slots.default ? c.slots.default() : null);
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 var import_richtext3 = require("@uniformdev/richtext");
-var import_vue_demi13 = require("vue-demi");
+var import_vue_demi14 = require("vue-demi");
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return (0, import_vue_demi13.h)(tag, null, children);
+      return (0, import_vue_demi14.h)(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : (0, import_vue_demi13.h)(() => text);
+  ) : (0, import_vue_demi14.h)(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
 var import_richtext5 = require("@uniformdev/richtext");
-var import_vue_demi18 = require("vue-demi");
+var import_vue_demi19 = require("vue-demi");
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 var import_richtext4 = require("@uniformdev/richtext");
-var import_vue_demi17 = require("vue-demi");
+var import_vue_demi18 = require("vue-demi");
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-var import_vue_demi14 = require("vue-demi");
+var import_vue_demi15 = require("vue-demi");
 var CodeRichTextNode = (_, context) => {
-  return (0, import_vue_demi14.h)("pre", {}, (0, import_vue_demi14.h)("code", {}, context.slots));
+  return (0, import_vue_demi15.h)("pre", {}, (0, import_vue_demi15.h)("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-var import_vue_demi15 = require("vue-demi");
+var import_vue_demi16 = require("vue-demi");
 var LinebreakRichTextNode = () => {
-  return (0, import_vue_demi15.h)("br", {});
+  return (0, import_vue_demi16.h)("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-var import_vue_demi16 = require("vue-demi");
+var import_vue_demi17 = require("vue-demi");
 var TabRichTextNode = () => {
-  return (0, import_vue_demi16.h)("", {}, "	");
+  return (0, import_vue_demi17.h)("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var UniformRichTextNode = (0, import_vue_demi17.defineComponent)({
+var UniformRichTextNode = (0, import_vue_demi18.defineComponent)({
   name: "UniformRichTextNode",
   props: {
     node: {
@@ -537,13 +559,13 @@ var UniformRichTextNode = (0, import_vue_demi17.defineComponent)({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => (0, import_vue_demi17.h)(
+      (childNode) => (0, import_vue_demi18.h)(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => (0, import_vue_demi17.h)(NodeRenderer, { node, children: (0, import_vue_demi17.h)(() => children) }, () => children);
+    return () => (0, import_vue_demi18.h)(NodeRenderer, { node, children: (0, import_vue_demi18.h)(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -564,7 +586,7 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var UniformRichText = (0, import_vue_demi18.defineComponent)({
+var UniformRichText = (0, import_vue_demi19.defineComponent)({
   name: "UniformRichText",
   props: {
     parameterId: {
@@ -579,14 +601,14 @@ var UniformRichText = (0, import_vue_demi18.defineComponent)({
   setup(props, context) {
     var _a;
     const { data: componentData } = useUniformCurrentComponent();
-    const value = (0, import_vue_demi18.computed)(() => {
+    const value = (0, import_vue_demi19.computed)(() => {
       var _a2;
       const parameter = (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
       return parameter == null ? void 0 : parameter.value;
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
     if ((0, import_richtext5.isRichTextNode)(root)) {
-      return () => (0, import_vue_demi18.h)(
+      return () => (0, import_vue_demi19.h)(
         UniformRichTextNode,
         {
           node: root,
@@ -601,9 +623,9 @@ var UniformRichText = (0, import_vue_demi18.defineComponent)({
 });
 
 // src/components/UniformSlot.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_context_vue2 = require("@uniformdev/context-vue");
-var import_vue_demi19 = require("vue-demi");
+var import_vue_demi20 = require("vue-demi");
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -628,7 +650,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = (0, import_vue_demi19.defineComponent)({
+var UniformSlot = (0, import_vue_demi20.defineComponent)({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -647,7 +669,7 @@ var UniformSlot = (0, import_vue_demi19.defineComponent)({
     if (!parentData || !resolveRenderer) {
       throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = (0, import_vue_demi19.computed)(() => {
+    const slotItems = (0, import_vue_demi20.computed)(() => {
       var _a2, _b, _c;
       if (props.name) {
         return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
@@ -672,9 +694,9 @@ var UniformSlot = (0, import_vue_demi19.defineComponent)({
 function renderPersonalizeComponent(component, resolveRenderer) {
   var _a, _b, _c, _d, _e, _f;
   const parameters = component == null ? void 0 : component.parameters;
-  const processedVariants = (0, import_canvas5.mapSlotToPersonalizedVariations)((_a = component.slots) == null ? void 0 : _a.pz);
+  const processedVariants = (0, import_canvas6.mapSlotToPersonalizedVariations)((_a = component.slots) == null ? void 0 : _a.pz);
   const name = (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.trackingEventName) == null ? void 0 : _c.value) != null ? _d : "Untitled Personalization";
-  return (0, import_vue_demi19.h)(import_context_vue2.Personalize, {
+  return (0, import_vue_demi20.h)(import_context_vue2.Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -686,8 +708,8 @@ function renderTestComponent(component, resolveRenderer) {
   var _a, _b, _c, _d, _e;
   const variants = (_b = (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a.test) != null ? _b : [];
   const testName = (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
-  const finalVariants = (0, import_canvas5.mapSlotToTestVariations)(variants);
-  return (0, import_vue_demi19.h)(import_context_vue2.Test, {
+  const finalVariants = (0, import_canvas6.mapSlotToTestVariations)(variants);
+  return (0, import_vue_demi20.h)(import_context_vue2.Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -702,7 +724,7 @@ function renderComponent({
   slotChildrenCount,
   emptyPlaceholder
 }) {
-  if (component.type === import_canvas5.CANVAS_TEST_TYPE) {
+  if (component.type === import_canvas6.CANVAS_TEST_TYPE) {
     return renderTestComponent(
       component,
       (variantComponent) => {
@@ -711,16 +733,16 @@ function renderComponent({
           component: variantComponent,
           resolveRenderer,
           parentComponent: component,
-          slotName: import_canvas5.CANVAS_TEST_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas5.CANVAS_TEST_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas5.CANVAS_TEST_SLOT].findIndex(
+          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(
             ({ _id }) => variantComponent._id === _id
           )
         });
       }
     );
   }
-  if (component.type === import_canvas5.CANVAS_PERSONALIZE_TYPE) {
+  if (component.type === import_canvas6.CANVAS_PERSONALIZE_TYPE) {
     return renderPersonalizeComponent(
       component,
       (variantComponent) => {
@@ -729,9 +751,9 @@ function renderComponent({
           component: variantComponent,
           resolveRenderer,
           parentComponent: component,
-          slotName: import_canvas5.CANVAS_PERSONALIZE_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas5.CANVAS_PERSONALIZE_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas5.CANVAS_PERSONALIZE_SLOT].findIndex(
+          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(
             ({ _id }) => variantComponent._id === _id
           )
         });
@@ -741,13 +763,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return (0, import_vue_demi19.h)(
+    return (0, import_vue_demi20.h)(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => (0, import_vue_demi19.h)(
+      () => (0, import_vue_demi20.h)(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => (0, import_vue_demi19.h)(resolvedComponent, props), emptyPlaceholder }
+        { default: () => (0, import_vue_demi20.h)(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -755,14 +777,14 @@ function renderComponent({
     `[canvas] found component of type '${component.type}' which the 'resolveRenderer' prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,
     component
   );
-  return (0, import_vue_demi19.h)("");
+  return (0, import_vue_demi20.h)("");
 }
 
 // src/components/UniformText.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_vue_demi20 = require("vue-demi");
+var import_canvas7 = require("@uniformdev/canvas");
+var import_vue_demi21 = require("vue-demi");
 var DEFAULT_ELEMENT_TYPE = "span";
-var UniformText = (0, import_vue_demi20.defineComponent)({
+var UniformText = (0, import_vue_demi21.defineComponent)({
   name: "UniformText",
   inheritAttrs: true,
   props: {
@@ -786,22 +808,22 @@ var UniformText = (0, import_vue_demi20.defineComponent)({
     var _a;
     const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
     const { isContextualEditing } = useUniformCurrentComposition();
-    const isFocused = (0, import_vue_demi20.ref)(false);
-    const parameter = (0, import_vue_demi20.computed)(
+    const isFocused = (0, import_vue_demi21.ref)(false);
+    const parameter = (0, import_vue_demi21.computed)(
       () => {
         var _a2;
         return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
       }
     );
-    const value = (0, import_vue_demi20.computed)(() => {
+    const value = (0, import_vue_demi21.computed)(() => {
       var _a2;
       return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
-    const isEditable = (0, import_vue_demi20.computed)(() => {
+    const isEditable = (0, import_vue_demi21.computed)(() => {
       var _a2, _b, _c;
       return (_c = (_b = (_a2 = parameter.value) == null ? void 0 : _a2._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
     });
-    const shouldSkipCustomRendering = (0, import_vue_demi20.computed)(() => isFocused.value && isEditable.value);
+    const shouldSkipCustomRendering = (0, import_vue_demi21.computed)(() => isFocused.value && isEditable.value);
     const handleOnFocus = () => {
       isFocused.value = true;
     };
@@ -809,15 +831,12 @@ var UniformText = (0, import_vue_demi20.defineComponent)({
       isFocused.value = false;
     };
     if (!parameter) {
-      console.warn(
-        `UniformText: The parameterId "${props.parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
-      );
       return null;
     }
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return (0, import_vue_demi20.h)(
+        return (0, import_vue_demi21.h)(
           (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
           { style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {} },
           (_d = (_c = (_b = context.slots).default) == null ? void 0 : _c.call(_b, value.value)) != null ? _d : value.value
@@ -828,17 +847,17 @@ var UniformText = (0, import_vue_demi20.defineComponent)({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return (0, import_vue_demi20.h)(
+      return (0, import_vue_demi21.h)(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
-          ...(0, import_canvas8.getParameterAttributes)({
+          ...(0, import_canvas9.getParameterAttributes)({
             component: componentData,
             id: props.parameterId,
             isMultiline: props.isMultiline
           }),
-          [import_canvas6.ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
-          [import_canvas6.ATTRIBUTE_PARAMETER_TYPE]: "text",
-          [import_canvas6.ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
+          [import_canvas7.ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
+          [import_canvas7.ATTRIBUTE_PARAMETER_TYPE]: "text",
+          [import_canvas7.ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
           style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {},
           onFocus: handleOnFocus,
           onBlur: handleOnBlur
@@ -850,8 +869,8 @@ var UniformText = (0, import_vue_demi20.defineComponent)({
 });
 
 // src/composables/useCompositionEventEffect.ts
-var import_canvas7 = require("@uniformdev/canvas");
-var import_vue_demi21 = require("vue-demi");
+var import_canvas8 = require("@uniformdev/canvas");
+var import_vue_demi22 = require("vue-demi");
 async function useCompositionEventEffect({
   enabled,
   projectId,
@@ -859,19 +878,19 @@ async function useCompositionEventEffect({
   effect
 }) {
   let unsubscribe;
-  (0, import_vue_demi21.watch)(
+  (0, import_vue_demi22.watch)(
     [() => enabled, () => compositionIdRef.value, () => projectId],
     async () => {
       unsubscribe == null ? void 0 : unsubscribe();
       if (!enabled || !compositionIdRef.value || !projectId) {
         return;
       }
-      const eventBus = await (0, import_canvas7.createEventBus)();
+      const eventBus = await (0, import_canvas8.createEventBus)();
       if (eventBus) {
-        unsubscribe = (0, import_canvas7.subscribeToComposition)({
+        unsubscribe = (0, import_canvas8.subscribeToComposition)({
           eventBus,
           compositionId: compositionIdRef.value,
-          compositionState: import_canvas7.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas8.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -883,7 +902,7 @@ async function useCompositionEventEffect({
 }
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,
@@ -897,6 +916,7 @@ var import_canvas8 = require("@uniformdev/canvas");
   TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,