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

package/dist/index.d.mts

@@ -20,7 +20,7 @@ declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
         type: PropType<ComponentInstance>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 interface TestComponent {
     slots?: {
@@ -115,7 +115,7 @@ declare const UniformText: vue_demi.DefineComponent<{
 }>>, {
     as: string | undefined;
     isMultiline: boolean | undefined;
-}>;
+}, {}>;
 
 type UniformComponentProps = {
     /** A dynamic vue component that provides data to the Uniform Canvas SlotContent component via provide/inject */
@@ -411,7 +411,7 @@ declare const UniformComponent: vue_demi.DefineComponent<{
     };
 }>>, {
     behaviorTracking: "onLoad" | "onView" | undefined;
-}>;
+}, {}>;
 
 type UseUniformContextualEditingProps = {
     initialCompositionValue?: Ref<RootComponentInstance | undefined>;
@@ -1518,7 +1518,23 @@ declare const UniformComposition: vue_demi.DefineComponent<{
     };
 }>>, {
     behaviorTracking: "onLoad" | "onView" | undefined;
-}>;
+}, {}>;
+
+type UniformPlaygroundProps = Pick<UniformCompositionProps, 'resolveRenderer'>;
+/**
+ * Playground where you can freely live preview your components and pattern.
+ */
+declare const UniformPlayground: vue_demi.DefineComponent<{
+    resolveRenderer: {
+        type: PropType<ResolveRenderer | undefined>;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    resolveRenderer: {
+        type: PropType<ResolveRenderer | undefined>;
+    };
+}>>, {}, {}>;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
@@ -1570,7 +1586,7 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<RenderRichTextComponentResolver | undefined>;
         required: false;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UniformRichTextNodeProps = {
     node: RichTextNode;
@@ -1596,7 +1612,7 @@ declare const UniformRichTextNode: vue_demi.DefineComponent<{
         type: PropType<RenderRichTextComponentResolver | undefined>;
         required: false;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UniformSlotProps = {
     /** Name of the slot to render */
@@ -1626,7 +1642,7 @@ declare const UniformSlot: vue_demi.DefineComponent<{
     resolveRenderer: {
         type: PropType<ResolveRenderer | undefined>;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
     compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
@@ -1646,4 +1662,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, PersonalizeComponent, QuoteRichTextNode, RenderRichTextComponentResolver, ResolveRenderer, RichTextComponentProps, RichTextRendererComponent, RootRichTextNode, TestComponent, TextRichTextNode, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, PersonalizeComponent, QuoteRichTextNode, RenderRichTextComponentResolver, ResolveRenderer, RichTextComponentProps, RichTextRendererComponent, RootRichTextNode, TestComponent, TextRichTextNode, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformPlayground, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -20,7 +20,7 @@ declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
         type: PropType<ComponentInstance>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 interface TestComponent {
     slots?: {
@@ -115,7 +115,7 @@ declare const UniformText: vue_demi.DefineComponent<{
 }>>, {
     as: string | undefined;
     isMultiline: boolean | undefined;
-}>;
+}, {}>;
 
 type UniformComponentProps = {
     /** A dynamic vue component that provides data to the Uniform Canvas SlotContent component via provide/inject */
@@ -411,7 +411,7 @@ declare const UniformComponent: vue_demi.DefineComponent<{
     };
 }>>, {
     behaviorTracking: "onLoad" | "onView" | undefined;
-}>;
+}, {}>;
 
 type UseUniformContextualEditingProps = {
     initialCompositionValue?: Ref<RootComponentInstance | undefined>;
@@ -1518,7 +1518,23 @@ declare const UniformComposition: vue_demi.DefineComponent<{
     };
 }>>, {
     behaviorTracking: "onLoad" | "onView" | undefined;
-}>;
+}, {}>;
+
+type UniformPlaygroundProps = Pick<UniformCompositionProps, 'resolveRenderer'>;
+/**
+ * Playground where you can freely live preview your components and pattern.
+ */
+declare const UniformPlayground: vue_demi.DefineComponent<{
+    resolveRenderer: {
+        type: PropType<ResolveRenderer | undefined>;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    resolveRenderer: {
+        type: PropType<ResolveRenderer | undefined>;
+    };
+}>>, {}, {}>;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
@@ -1570,7 +1586,7 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<RenderRichTextComponentResolver | undefined>;
         required: false;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UniformRichTextNodeProps = {
     node: RichTextNode;
@@ -1596,7 +1612,7 @@ declare const UniformRichTextNode: vue_demi.DefineComponent<{
         type: PropType<RenderRichTextComponentResolver | undefined>;
         required: false;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UniformSlotProps = {
     /** Name of the slot to render */
@@ -1626,7 +1642,7 @@ declare const UniformSlot: vue_demi.DefineComponent<{
     resolveRenderer: {
         type: PropType<ResolveRenderer | undefined>;
     };
-}>>, {}>;
+}>>, {}, {}>;
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
     compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
@@ -1646,4 +1662,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, PersonalizeComponent, QuoteRichTextNode, RenderRichTextComponentResolver, ResolveRenderer, RichTextComponentProps, RichTextRendererComponent, RootRichTextNode, TestComponent, TextRichTextNode, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, PersonalizeComponent, QuoteRichTextNode, RenderRichTextComponentResolver, ResolveRenderer, RichTextComponentProps, RichTextRendererComponent, RootRichTextNode, TestComponent, TextRichTextNode, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformPlayground, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -384,20 +384,37 @@ var UniformComposition = defineComponent4({
     );
   }
 });
+var UniformComposition_default = UniformComposition;
+
+// src/components/UniformPlayground.ts
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION2 } from "@uniformdev/canvas";
+import { defineComponent as defineComponent5, h as h5 } from "vue-demi";
+var UniformPlayground = defineComponent5({
+  name: "UniformPlayground",
+  inheritAttrs: false,
+  props: {
+    resolveRenderer: {
+      type: Object
+    }
+  },
+  setup(props) {
+    return () => h5(UniformComposition_default, { data: EMPTY_COMPOSITION2, resolveRenderer: props.resolveRenderer });
+  }
+});
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.ts
-import { h as h5 } from "vue-demi";
+import { h as h6 } from "vue-demi";
 var HeadingRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h5(tag != null ? tag : "h1", {}, context.slots);
+  return h6(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.ts
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import { h as h6 } from "vue-demi";
+import { h as h7 } from "vue-demi";
 var LinkRichTextNode = (props, context) => {
   const { link } = props.node;
-  return h6(
+  return h7(
     "a",
     {
       href: linkParamValueToHref(link)
@@ -407,10 +424,10 @@ var LinkRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.ts
-import { h as h7 } from "vue-demi";
+import { h as h8 } from "vue-demi";
 var ListItemRichTextNode = (props, context) => {
   const { value } = props.node;
-  return h7(
+  return h8(
     "li",
     {
       value: Number.isFinite(value) && value > 0 ? value : void 0
@@ -420,18 +437,18 @@ var ListItemRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.ts
-import { h as h8 } from "vue-demi";
+import { h as h9 } from "vue-demi";
 var ListRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h8(tag != null ? tag : "h1", {}, context.slots);
+  return h9(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import { h as h9 } from "vue-demi";
+import { h as h10 } from "vue-demi";
 var ParagraphRichTextNode = (props, context) => {
   const { format, direction } = props.node;
-  return h9(
+  return h10(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -442,61 +459,61 @@ var ParagraphRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/QuoteRichTextNode.ts
-import { h as h10 } from "vue-demi";
+import { h as h11 } from "vue-demi";
 var QuoteRichTextNode = (_, context) => {
-  return h10("blockquote", {}, context.slots);
+  return h11("blockquote", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/RootRichTextNode.ts
-import { h as h11 } from "vue-demi";
+import { h as h12 } from "vue-demi";
 var RootRichTextNode = (props, c) => {
-  return h11(() => c.slots.default ? c.slots.default() : null);
+  return h12(() => c.slots.default ? c.slots.default() : null);
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import { h as h12 } from "vue-demi";
+import { h as h13 } from "vue-demi";
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = getRichTextTagsFromTextFormat(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return h12(tag, null, children);
+      return h13(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : h12(() => text);
+  ) : h13(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
 import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
-import { computed as computed4, defineComponent as defineComponent6, h as h17 } from "vue-demi";
+import { computed as computed4, defineComponent as defineComponent7, h as h18 } from "vue-demi";
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 import { isRichTextNode } from "@uniformdev/richtext";
-import { defineComponent as defineComponent5, h as h16 } from "vue-demi";
+import { defineComponent as defineComponent6, h as h17 } from "vue-demi";
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-import { h as h13 } from "vue-demi";
+import { h as h14 } from "vue-demi";
 var CodeRichTextNode = (_, context) => {
-  return h13("pre", {}, h13("code", {}, context.slots));
+  return h14("pre", {}, h14("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-import { h as h14 } from "vue-demi";
+import { h as h15 } from "vue-demi";
 var LinebreakRichTextNode = () => {
-  return h14("br", {});
+  return h15("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-import { h as h15 } from "vue-demi";
+import { h as h16 } from "vue-demi";
 var TabRichTextNode = () => {
-  return h15("", {}, "	");
+  return h16("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var UniformRichTextNode = defineComponent5({
+var UniformRichTextNode = defineComponent6({
   name: "UniformRichTextNode",
   props: {
     node: {
@@ -521,13 +538,13 @@ var UniformRichTextNode = defineComponent5({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => h16(
+      (childNode) => h17(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => h16(NodeRenderer, { node, children: h16(() => children) }, () => children);
+    return () => h17(NodeRenderer, { node, children: h17(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -548,7 +565,7 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var UniformRichText = defineComponent6({
+var UniformRichText = defineComponent7({
   name: "UniformRichText",
   props: {
     parameterId: {
@@ -570,7 +587,7 @@ var UniformRichText = defineComponent6({
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
     if (isRichTextNode2(root)) {
-      return () => h17(
+      return () => h18(
         UniformRichTextNode,
         {
           node: root,
@@ -594,7 +611,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed5, defineComponent as defineComponent7, h as h18 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent8, h as h19 } from "vue-demi";
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -619,7 +636,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = defineComponent7({
+var UniformSlot = defineComponent8({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -665,7 +682,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = 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 h18(Personalize, {
+  return h19(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -678,7 +695,7 @@ function renderTestComponent(component, resolveRenderer) {
   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 = mapSlotToTestVariations(variants);
-  return h18(Test, {
+  return h19(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -732,13 +749,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h18(
+    return h19(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h18(
+      () => h19(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h18(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h19(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -746,7 +763,7 @@ 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 h18("");
+  return h19("");
 }
 
 // src/components/UniformText.ts
@@ -755,9 +772,9 @@ import {
   ATTRIBUTE_PARAMETER_VALUE,
   ATTRIBUTE_PLACEHOLDER
 } from "@uniformdev/canvas";
-import { computed as computed6, defineComponent as defineComponent8, h as h19, ref as ref2 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent9, h as h20, ref as ref2 } from "vue-demi";
 var DEFAULT_ELEMENT_TYPE = "span";
-var UniformText = defineComponent8({
+var UniformText = defineComponent9({
   name: "UniformText",
   inheritAttrs: true,
   props: {
@@ -809,7 +826,7 @@ var UniformText = defineComponent8({
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return h19(
+        return h20(
           (_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
@@ -820,7 +837,7 @@ var UniformText = defineComponent8({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return h19(
+      return h20(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
           ...getParameterAttributes({
@@ -892,6 +909,7 @@ export {
   TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

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,
@@ -404,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)
@@ -427,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
@@ -440,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,
@@ -462,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: {
@@ -541,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([
@@ -568,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: {
@@ -583,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,
@@ -605,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) {
@@ -632,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: {
@@ -651,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 : [];
@@ -676,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),
@@ -690,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)
@@ -706,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) => {
@@ -715,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) => {
@@ -733,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
           )
         });
@@ -745,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 }
       )
     );
   }
@@ -759,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: {
@@ -790,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;
     };
@@ -818,7 +836,7 @@ var UniformText = (0, import_vue_demi20.defineComponent)({
     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
@@ -829,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
@@ -851,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,
@@ -860,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"
@@ -884,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,
@@ -898,6 +916,7 @@ var import_canvas8 = require("@uniformdev/canvas");
   TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

package/dist/index.mjs

@@ -384,20 +384,37 @@ var UniformComposition = defineComponent4({
     );
   }
 });
+var UniformComposition_default = UniformComposition;
+
+// src/components/UniformPlayground.ts
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION2 } from "@uniformdev/canvas";
+import { defineComponent as defineComponent5, h as h5 } from "vue-demi";
+var UniformPlayground = defineComponent5({
+  name: "UniformPlayground",
+  inheritAttrs: false,
+  props: {
+    resolveRenderer: {
+      type: Object
+    }
+  },
+  setup(props) {
+    return () => h5(UniformComposition_default, { data: EMPTY_COMPOSITION2, resolveRenderer: props.resolveRenderer });
+  }
+});
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.ts
-import { h as h5 } from "vue-demi";
+import { h as h6 } from "vue-demi";
 var HeadingRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h5(tag != null ? tag : "h1", {}, context.slots);
+  return h6(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.ts
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import { h as h6 } from "vue-demi";
+import { h as h7 } from "vue-demi";
 var LinkRichTextNode = (props, context) => {
   const { link } = props.node;
-  return h6(
+  return h7(
     "a",
     {
       href: linkParamValueToHref(link)
@@ -407,10 +424,10 @@ var LinkRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.ts
-import { h as h7 } from "vue-demi";
+import { h as h8 } from "vue-demi";
 var ListItemRichTextNode = (props, context) => {
   const { value } = props.node;
-  return h7(
+  return h8(
     "li",
     {
       value: Number.isFinite(value) && value > 0 ? value : void 0
@@ -420,18 +437,18 @@ var ListItemRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.ts
-import { h as h8 } from "vue-demi";
+import { h as h9 } from "vue-demi";
 var ListRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h8(tag != null ? tag : "h1", {}, context.slots);
+  return h9(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import { h as h9 } from "vue-demi";
+import { h as h10 } from "vue-demi";
 var ParagraphRichTextNode = (props, context) => {
   const { format, direction } = props.node;
-  return h9(
+  return h10(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -442,61 +459,61 @@ var ParagraphRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/QuoteRichTextNode.ts
-import { h as h10 } from "vue-demi";
+import { h as h11 } from "vue-demi";
 var QuoteRichTextNode = (_, context) => {
-  return h10("blockquote", {}, context.slots);
+  return h11("blockquote", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/RootRichTextNode.ts
-import { h as h11 } from "vue-demi";
+import { h as h12 } from "vue-demi";
 var RootRichTextNode = (props, c) => {
-  return h11(() => c.slots.default ? c.slots.default() : null);
+  return h12(() => c.slots.default ? c.slots.default() : null);
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import { h as h12 } from "vue-demi";
+import { h as h13 } from "vue-demi";
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = getRichTextTagsFromTextFormat(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return h12(tag, null, children);
+      return h13(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : h12(() => text);
+  ) : h13(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
 import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
-import { computed as computed4, defineComponent as defineComponent6, h as h17 } from "vue-demi";
+import { computed as computed4, defineComponent as defineComponent7, h as h18 } from "vue-demi";
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 import { isRichTextNode } from "@uniformdev/richtext";
-import { defineComponent as defineComponent5, h as h16 } from "vue-demi";
+import { defineComponent as defineComponent6, h as h17 } from "vue-demi";
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-import { h as h13 } from "vue-demi";
+import { h as h14 } from "vue-demi";
 var CodeRichTextNode = (_, context) => {
-  return h13("pre", {}, h13("code", {}, context.slots));
+  return h14("pre", {}, h14("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-import { h as h14 } from "vue-demi";
+import { h as h15 } from "vue-demi";
 var LinebreakRichTextNode = () => {
-  return h14("br", {});
+  return h15("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-import { h as h15 } from "vue-demi";
+import { h as h16 } from "vue-demi";
 var TabRichTextNode = () => {
-  return h15("", {}, "	");
+  return h16("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var UniformRichTextNode = defineComponent5({
+var UniformRichTextNode = defineComponent6({
   name: "UniformRichTextNode",
   props: {
     node: {
@@ -521,13 +538,13 @@ var UniformRichTextNode = defineComponent5({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => h16(
+      (childNode) => h17(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => h16(NodeRenderer, { node, children: h16(() => children) }, () => children);
+    return () => h17(NodeRenderer, { node, children: h17(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -548,7 +565,7 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var UniformRichText = defineComponent6({
+var UniformRichText = defineComponent7({
   name: "UniformRichText",
   props: {
     parameterId: {
@@ -570,7 +587,7 @@ var UniformRichText = defineComponent6({
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
     if (isRichTextNode2(root)) {
-      return () => h17(
+      return () => h18(
         UniformRichTextNode,
         {
           node: root,
@@ -594,7 +611,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed5, defineComponent as defineComponent7, h as h18 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent8, h as h19 } from "vue-demi";
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -619,7 +636,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = defineComponent7({
+var UniformSlot = defineComponent8({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -665,7 +682,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = 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 h18(Personalize, {
+  return h19(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -678,7 +695,7 @@ function renderTestComponent(component, resolveRenderer) {
   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 = mapSlotToTestVariations(variants);
-  return h18(Test, {
+  return h19(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -732,13 +749,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h18(
+    return h19(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h18(
+      () => h19(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h18(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h19(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -746,7 +763,7 @@ 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 h18("");
+  return h19("");
 }
 
 // src/components/UniformText.ts
@@ -755,9 +772,9 @@ import {
   ATTRIBUTE_PARAMETER_VALUE,
   ATTRIBUTE_PLACEHOLDER
 } from "@uniformdev/canvas";
-import { computed as computed6, defineComponent as defineComponent8, h as h19, ref as ref2 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent9, h as h20, ref as ref2 } from "vue-demi";
 var DEFAULT_ELEMENT_TYPE = "span";
-var UniformText = defineComponent8({
+var UniformText = defineComponent9({
   name: "UniformText",
   inheritAttrs: true,
   props: {
@@ -809,7 +826,7 @@ var UniformText = defineComponent8({
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return h19(
+        return h20(
           (_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
@@ -820,7 +837,7 @@ var UniformText = defineComponent8({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return h19(
+      return h20(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
           ...getParameterAttributes({
@@ -892,6 +909,7 @@ export {
   TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "19.48.0",
+  "version": "19.48.1-alpha.8+0418d546a",
   "description": "Vue SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,9 +23,9 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.48.0",
-    "@uniformdev/context-vue": "19.48.0",
-    "@uniformdev/richtext": "19.48.0",
+    "@uniformdev/canvas": "19.48.1-alpha.8+0418d546a",
+    "@uniformdev/context-vue": "19.48.1-alpha.8+0418d546a",
+    "@uniformdev/richtext": "19.48.1-alpha.8+0418d546a",
     "vue-demi": "^0.14.0"
   },
   "peerDependencies": {
@@ -43,7 +43,7 @@
     "@vue/server-test-utils": "1.3.0",
     "@vue/test-utils": "2.4.0",
     "@vue/vue3-jest": "^29.2.4",
-    "vue": "3.2.47",
+    "vue": "3.3.4",
     "vue-server-renderer": "2.7.14",
     "vue-template-compiler": "2.7.14"
   },
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "046d1410326925dc79a1556a8d5190c74df50d12"
+  "gitHead": "0418d546ad78898515544d07f095ff03809c611c"
 }