@uniformdev/canvas-vue 18.1.1-alpha.11 → 18.1.2-alpha.4

package/dist/index.js

@@ -20,34 +20,95 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  CANVAS_COMPOSITION_TYPE: () => CANVAS_COMPOSITION_TYPE,
-  CANVAS_SLOT_CONTENT_TYPE: () => CANVAS_SLOT_CONTENT_TYPE,
   Composition: () => Composition,
   DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
   SlotContent: () => SlotContent,
-  compositionInjectionKey: () => compositionInjectionKey,
+  UniformComponent: () => UniformComponent,
+  UniformComposition: () => UniformComposition,
+  UniformSlot: () => UniformSlot,
   convertComponentToProps: () => convertComponentToProps,
   createApiEnhancer: () => createApiEnhancer,
-  resolveRendererInjectionKey: () => resolveRendererInjectionKey,
+  createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
+  globalCompositionEnhancerInjectionKey: () => globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect: () => useCompositionEventEffect,
-  useContextualEditing: () => useContextualEditing
+  useUniformContextualEditing: () => useUniformContextualEditing,
+  useUniformCurrentComponent: () => useUniformCurrentComponent,
+  useUniformCurrentComposition: () => useUniformCurrentComposition
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Composition.ts
+// src/components/DefaultNotImplementedComponent.ts
 var import_canvas = require("@uniformdev/canvas");
-var import_context_vue = require("@uniformdev/context-vue");
 var import_vue_demi = require("vue-demi");
+var wrapperStyles = {
+  borderLeft: "4px solid #e42535",
+  padding: "16px",
+  fontSize: "16px",
+  borderRadius: "0 8px 8px 0",
+  margin: "8px",
+  backgroundColor: "rgba(255, 255, 255, 0.45)",
+  color: "#1d3557"
+};
+var DefaultNotImplementedComponent = (0, import_vue_demi.defineComponent)({
+  name: "DefaultNotImplementedComponent",
+  props: {
+    component: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { attrs }) {
+    var _a;
+    const componentType = (_a = props.component) == null ? void 0 : _a.type;
+    if (componentType === import_canvas.CANVAS_LOCALIZATION_TYPE) {
+      (0, import_vue_demi.h)("div", { key: "content", style: wrapperStyles }, [
+        (0, import_vue_demi.h)("p", [
+          `Seems like localization is not enabled in your application. Please read our documentation on how to `,
+          (0, import_vue_demi.h)(
+            "a",
+            {
+              href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
+              target: "_blank",
+              style: { fontWeight: "bolder", textDecoration: "underline" }
+            },
+            "enable localization in your front-end application."
+          )
+        ])
+      ]);
+    }
+    return () => (0, import_vue_demi.h)("div", { key: "content", style: wrapperStyles }, [
+      (0, import_vue_demi.h)("h2", {}, `Component: ${componentType}`),
+      (0, import_vue_demi.h)("p", [
+        (0, import_vue_demi.h)("strong", `${componentType} has no Vue implementation. It may need to be added to your `),
+        (0, import_vue_demi.h)("code", {}, "resolveRenderer()"),
+        (0, import_vue_demi.h)("strong", {}, " function.")
+      ]),
+      (0, import_vue_demi.h)("details", {}, [
+        (0, import_vue_demi.h)("summary", {}, "props/attributes"),
+        (0, import_vue_demi.h)(
+          "pre",
+          {
+            style: {
+              overflowX: "auto"
+            }
+          },
+          `${JSON.stringify(attrs)}`
+        )
+      ])
+    ]);
+  }
+});
 
-// src/utils/constants.ts
-var CANVAS_COMPOSITION_TYPE = "Composition";
-var CANVAS_SLOT_CONTENT_TYPE = "SlotContent";
-var compositionInjectionKey = "uniformComposition";
-var resolveRendererInjectionKey = "uniformResolveRenderer";
-
-// src/components/Composition.ts
-var Composition = (0, import_vue_demi.defineComponent)({
-  name: CANVAS_COMPOSITION_TYPE,
+// src/components/UniformComponent.ts
+var import_canvas2 = require("@uniformdev/canvas");
+var import_context_vue = require("@uniformdev/context-vue");
+var import_vue_demi2 = require("vue-demi");
+var uniformCurrentComponentInjectionKey = "uniformCurrentComponent";
+var useUniformCurrentComponent = () => {
+  return (0, import_vue_demi2.inject)(uniformCurrentComponentInjectionKey, {});
+};
+var UniformComponent = (0, import_vue_demi2.defineComponent)({
+  name: "UniformComponent",
   inheritAttrs: false,
   props: {
     data: {
@@ -55,8 +116,7 @@ var Composition = (0, import_vue_demi.defineComponent)({
       required: true
     },
     resolveRenderer: {
-      type: Function,
-      default: () => ({ type }) => (0, import_vue_demi.resolveComponent)(type)
+      type: Function
     },
     behaviorTracking: {
       type: String,
@@ -64,26 +124,39 @@ var Composition = (0, import_vue_demi.defineComponent)({
     }
   },
   setup(props, context) {
-    var _a, _b, _c;
-    const data = (0, import_vue_demi.computed)(() => {
-      var _a2, _b2;
-      return (_b2 = props.data) != null ? _b2 : (_a2 = (0, import_vue_demi.inject)(compositionInjectionKey)) == null ? void 0 : _a2.value;
+    var _a, _b;
+    const parentComponent = useUniformCurrentComponent();
+    const data = (0, import_vue_demi2.computed)(() => {
+      var _a2;
+      return (_a2 = props.data) != null ? _a2 : parentComponent == null ? void 0 : parentComponent.data;
     });
-    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : (0, import_vue_demi.inject)(resolveRendererInjectionKey);
-    (0, import_vue_demi.provide)(compositionInjectionKey, data);
-    (0, import_vue_demi.provide)(resolveRendererInjectionKey, resolveRenderer);
-    const slots = (0, import_vue_demi.computed)(() => {
+    if (!data) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
+      }
+      return null;
+    }
+    const currentComponent = (0, import_vue_demi2.computed)(() => {
+      var _a2, _b2, _c, _d;
+      return {
+        data: data.value,
+        resolveRenderer: (_b2 = (_a2 = props.resolveRenderer) != null ? _a2 : parentComponent == null ? void 0 : parentComponent.resolveRenderer) != null ? _b2 : ({ type }) => (0, import_vue_demi2.resolveComponent)(type),
+        behaviorTracking: (_d = (_c = props.behaviorTracking) != null ? _c : parentComponent == null ? void 0 : parentComponent.behaviorTracking) != null ? _d : "onView"
+      };
+    });
+    (0, import_vue_demi2.provide)(uniformCurrentComponentInjectionKey, currentComponent.value);
+    const slots = (0, import_vue_demi2.computed)(() => {
       var _a2, _b2;
       return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.slots) != null ? _b2 : {};
     });
-    const parameters = (0, import_vue_demi.computed)(() => {
+    const parameters = (0, import_vue_demi2.computed)(() => {
       var _a2, _b2;
       return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.parameters) != null ? _b2 : {};
     });
-    const componentKey = (0, import_vue_demi.computed)(() => {
+    const componentKey = (0, import_vue_demi2.computed)(() => {
       return JSON.stringify(data.value);
     });
-    const enrichmentTags = (_c = (_b = data.value.parameters) == null ? void 0 : _b[import_canvas.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+    const enrichmentTags = (_b = (_a = data.value.parameters) == null ? void 0 : _a[import_canvas2.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _b.value;
     const renderChildren = () => {
       var _a2, _b2;
       return (_b2 = (_a2 = context.slots).default) == null ? void 0 : _b2.call(_a2, {
@@ -93,7 +166,7 @@ var Composition = (0, import_vue_demi.defineComponent)({
     };
     if ((0, import_context_vue.isUsingUniformContext)()) {
       const TrackComponent = props.behaviorTracking === "onLoad" ? import_context_vue.TrackSlot : import_context_vue.Track;
-      return () => (0, import_vue_demi.h)(
+      return () => (0, import_vue_demi2.h)(
         TrackComponent,
         { behavior: enrichmentTags, key: componentKey.value },
         renderChildren
@@ -102,73 +175,156 @@ var Composition = (0, import_vue_demi.defineComponent)({
     return renderChildren;
   }
 });
+var UniformComponent_default = UniformComponent;
 
-// src/components/DefaultNotImplementedComponent.ts
-var import_canvas2 = require("@uniformdev/canvas");
-var import_vue_demi2 = require("vue-demi");
-var wrapperStyles = {
-  borderLeft: "4px solid #e42535",
-  padding: "16px",
-  fontSize: "16px",
-  borderRadius: "0 8px 8px 0",
-  margin: "8px",
-  backgroundColor: "rgba(255, 255, 255, 0.45)",
-  color: "#1d3557"
+// src/components/UniformComposition.ts
+var import_vue_demi4 = require("vue-demi");
+
+// src/composables/useUniformContextualEditing.ts
+var import_canvas3 = require("@uniformdev/canvas");
+var import_vue_demi3 = require("vue-demi");
+var createApiEnhancer = import_canvas3.createUniformApiEnhancer;
+var registeredCompositionIds = /* @__PURE__ */ new Set();
+var useUniformContextualEditing = ({
+  initialCompositionValue,
+  enhance = (message) => message.composition
+}) => {
+  const contextualComposition = (0, import_vue_demi3.ref)();
+  const composition = (0, import_vue_demi3.computed)(() => {
+    var _a;
+    return (_a = contextualComposition.value) != null ? _a : initialCompositionValue;
+  });
+  const channel = (0, import_vue_demi3.computed)(() => {
+    var _a;
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const channel2 = (0, import_canvas3.createCanvasChannel)({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  (0, import_vue_demi3.watch)(
+    [channel, () => enhance, () => initialCompositionValue == null ? void 0 : initialCompositionValue._id],
+    () => {
+      if (!channel.value || registeredCompositionIds.has(initialCompositionValue._id)) {
+        return;
+      }
+      const unsubscribe = channel.value.on("update-composition", async (message) => {
+        if (!(0, import_canvas3.isUpdateCompositionMessage)(message)) {
+          return;
+        }
+        const enhancedComposition = await enhance(message);
+        contextualComposition.value = enhancedComposition;
+      });
+      registeredCompositionIds.add(initialCompositionValue._id);
+      return () => {
+        unsubscribe();
+        registeredCompositionIds.delete(initialCompositionValue._id);
+      };
+    },
+    { immediate: true }
+  );
+  (0, import_vue_demi3.onMounted)(() => {
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const existingScript = document.getElementById(import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
+    if (existingScript) {
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
+    script.src = getCanvasInContextEmbedScriptUrl();
+    script.async = true;
+    document.head.appendChild(script);
+  });
+  return {
+    composition
+  };
 };
-var DefaultNotImplementedComponent = (0, import_vue_demi2.defineComponent)({
-  name: "DefaultNotImplementedComponent",
+function getCanvasInContextEmbedScriptUrl() {
+  const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
+  return scriptUrl;
+}
+function isInContextEditingMode() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
+    import_canvas3.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+  );
+  const isAllowlistedReferrer = Boolean(
+    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
+  );
+  return isOpenedByInContextEditor && isAllowlistedReferrer;
+}
+
+// src/utils/constants.ts
+var globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
+
+// src/components/UniformComposition.ts
+var uniformCurrentCompositionInjectionKey = "uniformCurrentComposition";
+var useUniformCurrentComposition = () => {
+  return (0, import_vue_demi4.inject)(uniformCurrentCompositionInjectionKey, {});
+};
+var UniformComposition = (0, import_vue_demi4.defineComponent)({
+  name: "UniformComposition",
+  inheritAttrs: false,
   props: {
-    component: {
+    data: {
       type: Object,
       required: true
+    },
+    resolveRenderer: {
+      type: Function
+    },
+    behaviorTracking: {
+      type: String,
+      default: "onView"
+    },
+    contextualEditingEnhancer: {
+      type: Function
     }
   },
-  setup(props, { attrs }) {
+  setup(props, context) {
     var _a;
-    const componentType = (_a = props.component) == null ? void 0 : _a.type;
-    if (componentType === import_canvas2.CANVAS_LOCALIZATION_TYPE) {
-      (0, import_vue_demi2.h)("div", { key: "content", style: wrapperStyles }, [
-        (0, import_vue_demi2.h)("p", [
-          `Seems like localization is not enabled in your application. Please read our documentation on how to `,
-          (0, import_vue_demi2.h)(
-            "a",
-            {
-              href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
-              target: "_blank",
-              style: { fontWeight: "bolder", textDecoration: "underline" }
-            },
-            "enable localization in your front-end application."
-          )
-        ])
-      ]);
-    }
-    return () => (0, import_vue_demi2.h)("div", { key: "content", style: wrapperStyles }, [
-      (0, import_vue_demi2.h)("h2", {}, `Component: ${componentType}`),
-      (0, import_vue_demi2.h)("p", [
-        (0, import_vue_demi2.h)("strong", `${componentType} has no Vue implementation. It may need to be added to your `),
-        (0, import_vue_demi2.h)("code", {}, "resolveRenderer()"),
-        (0, import_vue_demi2.h)("strong", {}, " function.")
-      ]),
-      (0, import_vue_demi2.h)("details", {}, [
-        (0, import_vue_demi2.h)("summary", {}, "props/attributes"),
-        (0, import_vue_demi2.h)(
-          "pre",
-          {
-            style: {
-              overflowX: "auto"
-            }
-          },
-          `${JSON.stringify(attrs)}`
-        )
-      ])
-    ]);
+    const inheritedEnhancer = (0, import_vue_demi4.inject)(
+      globalCompositionEnhancerInjectionKey,
+      (composition2) => composition2
+    );
+    const inheritedContextualEnhancer = (message) => inheritedEnhancer(message.composition);
+    const { composition } = useUniformContextualEditing({
+      initialCompositionValue: props.data,
+      enhance: (_a = props.contextualEditingEnhancer) != null ? _a : inheritedContextualEnhancer
+    });
+    (0, import_vue_demi4.provide)(uniformCurrentCompositionInjectionKey, {
+      data: composition,
+      behaviorTracking: props.behaviorTracking,
+      resolveRenderer: props.resolveRenderer
+    });
+    const compositionKey = (0, import_vue_demi4.computed)(() => {
+      return JSON.stringify(composition.value);
+    });
+    return () => (0, import_vue_demi4.h)(
+      UniformComponent_default,
+      {
+        key: compositionKey.value,
+        data: composition.value,
+        behaviorTracking: props.behaviorTracking,
+        resolveRenderer: props.resolveRenderer
+      },
+      context.slots.default
+    );
   }
 });
+var Composition = UniformComposition;
 
-// src/components/SlotContent.ts
-var import_canvas3 = require("@uniformdev/canvas");
+// src/components/UniformSlot.ts
+var import_canvas4 = require("@uniformdev/canvas");
 var import_context_vue2 = require("@uniformdev/context-vue");
-var import_vue_demi3 = require("vue-demi");
+var import_vue_demi5 = require("vue-demi");
 
 // src/utils/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -192,9 +348,9 @@ function normalizePropName(name) {
   return name.replace("$", "");
 }
 
-// src/components/SlotContent.ts
-var SlotContent = (0, import_vue_demi3.defineComponent)({
-  name: CANVAS_SLOT_CONTENT_TYPE,
+// src/components/UniformSlot.ts
+var UniformSlot = (0, import_vue_demi5.defineComponent)({
+  name: "UniformSlot",
   inheritAttrs: false,
   props: {
     name: {
@@ -206,18 +362,18 @@ var SlotContent = (0, import_vue_demi3.defineComponent)({
   },
   setup(props, context) {
     var _a;
-    const componentData = (0, import_vue_demi3.inject)(compositionInjectionKey);
-    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : (0, import_vue_demi3.inject)(resolveRendererInjectionKey);
+    const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : parentResolveRenderer;
     const emptyPlaceholder = context.slots.emptyPlaceholder;
-    if (!componentData || !resolveRenderer) {
-      throw new Error("<SlotContent /> can only be used inside a <Composition />");
+    if (!parentData || !resolveRenderer) {
+      throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = (0, import_vue_demi3.computed)(() => {
+    const slotItems = (0, import_vue_demi5.computed)(() => {
       var _a2, _b, _c;
       if (props.name) {
-        return (_b = (_a2 = componentData == null ? void 0 : componentData.value.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
+        return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
       }
-      return Object.values((_c = componentData == null ? void 0 : componentData.value.slots) != null ? _c : {}).flat();
+      return Object.values((_c = parentData.slots) != null ? _c : {}).flat();
     });
     const childrenToRender = slotItems.value.map((component, index) => {
       const child = renderComponent({
@@ -225,7 +381,7 @@ var SlotContent = (0, import_vue_demi3.defineComponent)({
         resolveRenderer,
         indexInSlot: index,
         slotName: props.name,
-        parentComponent: componentData.value,
+        parentComponent: parentData,
         slotChildrenCount: slotItems.value.length,
         emptyPlaceholder
       });
@@ -237,9 +393,9 @@ var SlotContent = (0, import_vue_demi3.defineComponent)({
 function renderPersonalizeComponent(component, resolveRenderer) {
   var _a, _b, _c, _d, _e, _f;
   const parameters = component == null ? void 0 : component.parameters;
-  const processedVariants = (0, import_canvas3.mapSlotToPersonalizedVariations)((_a = component.slots) == null ? void 0 : _a.pz);
+  const processedVariants = (0, import_canvas4.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_demi3.h)(import_context_vue2.Personalize, {
+  return (0, import_vue_demi5.h)(import_context_vue2.Personalize, {
     name,
     component: (variant) => resolveRenderer(variant),
     variations: processedVariants,
@@ -250,8 +406,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_canvas3.mapSlotToTestVariations)(variants);
-  return (0, import_vue_demi3.h)(import_context_vue2.Test, {
+  const finalVariants = (0, import_canvas4.mapSlotToTestVariations)(variants);
+  return (0, import_vue_demi5.h)(import_context_vue2.Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -267,13 +423,13 @@ function renderComponent({
   emptyPlaceholder
 }) {
   var _a, _b;
-  if (component.type === import_canvas3.CANVAS_TEST_TYPE) {
+  if (component.type === import_canvas4.CANVAS_TEST_TYPE) {
     return renderTestComponent(
       component,
       (component2) => renderComponent({ component: component2, resolveRenderer })
     );
   }
-  if (component.type === import_canvas3.CANVAS_PERSONALIZE_TYPE) {
+  if (component.type === import_canvas4.CANVAS_PERSONALIZE_TYPE) {
     return renderPersonalizeComponent(
       component,
       (component2) => renderComponent({ component: component2, resolveRenderer })
@@ -283,10 +439,10 @@ function renderComponent({
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
     const shouldRenderContextualEditingTags = Boolean(component._id);
-    const isPlaceholder = component._id === import_canvas3.PLACEHOLDER_ID;
+    const isPlaceholder = component._id === import_canvas4.PLACEHOLDER_ID;
     const elementsToRender = shouldRenderContextualEditingTags ? [
-      (0, import_vue_demi3.h)("script", {
-        "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+      (0, import_vue_demi5.h)("script", {
+        "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
         "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
         "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
         "data-component-id": component._id,
@@ -297,21 +453,22 @@ function renderComponent({
         "data-is-placeholder": isPlaceholder ? "true" : void 0,
         "data-component-title": (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value
       }),
-      isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder() : (0, import_vue_demi3.h)(resolvedComponent, props),
-      (0, import_vue_demi3.h)("script", { "data-role": "component-end" })
-    ] : [(0, import_vue_demi3.h)(resolvedComponent, props)];
-    return (0, import_vue_demi3.h)(Composition, { data: component, resolveRenderer }, () => elementsToRender);
+      isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder() : (0, import_vue_demi5.h)(resolvedComponent, props),
+      (0, import_vue_demi5.h)("script", { "data-role": "component-end" })
+    ] : [(0, import_vue_demi5.h)(resolvedComponent, props)];
+    return (0, import_vue_demi5.h)(UniformComponent, { data: component, resolveRenderer }, () => elementsToRender);
   }
   console.warn(
     `[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_demi3.h)("");
+  return (0, import_vue_demi5.h)("");
 }
+var SlotContent = UniformSlot;
 
 // src/composables/useCompositionEventEffect.ts
-var import_canvas4 = require("@uniformdev/canvas");
-var import_vue_demi4 = require("vue-demi");
+var import_canvas5 = require("@uniformdev/canvas");
+var import_vue_demi6 = require("vue-demi");
 async function useCompositionEventEffect({
   enabled,
   projectId,
@@ -319,19 +476,19 @@ async function useCompositionEventEffect({
   effect
 }) {
   let unsubscribe;
-  (0, import_vue_demi4.watch)(
+  (0, import_vue_demi6.watch)(
     [() => enabled, () => compositionIdRef.value, () => projectId],
     async () => {
       unsubscribe == null ? void 0 : unsubscribe();
       if (!enabled || !compositionIdRef.value || !projectId) {
         return;
       }
-      const eventBus = await (0, import_canvas4.createEventBus)();
+      const eventBus = await (0, import_canvas5.createEventBus)();
       if (eventBus) {
-        unsubscribe = (0, import_canvas4.subscribeToComposition)({
+        unsubscribe = (0, import_canvas5.subscribeToComposition)({
           eventBus,
           compositionId: compositionIdRef.value,
-          compositionState: import_canvas4.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas5.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -341,110 +498,20 @@ async function useCompositionEventEffect({
     { immediate: true }
   );
 }
-
-// src/composables/useContextualEditing.ts
-var import_canvas5 = require("@uniformdev/canvas");
-var import_vue_demi5 = require("vue-demi");
-var previewScriptId = "uniform-canvas-preview-script";
-var createApiEnhancer = ({ apiUrl }) => {
-  return async (message) => {
-    const response = await fetch(apiUrl, {
-      method: "post",
-      body: JSON.stringify({
-        composition: message.composition,
-        hash: message.hash
-      }),
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    const json = await response.json();
-    if (!response.ok) {
-      throw new Error("Error reading enhanced composition");
-    }
-    const body = json;
-    return body.composition;
-  };
-};
-var useContextualEditing = ({
-  initialCompositionValue,
-  enhance = (message) => message.composition
-}) => {
-  const contextualComposition = (0, import_vue_demi5.ref)();
-  const channel = (0, import_vue_demi5.computed)(() => {
-    var _a;
-    if (!isInContextEditingMode()) {
-      return;
-    }
-    const channel2 = (0, import_canvas5.createCanvasChannel)({
-      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
-      listenTo: [window]
-    });
-    return channel2;
-  });
-  (0, import_vue_demi5.watch)(
-    [channel, () => enhance],
-    () => {
-      if (!channel.value) {
-        return;
-      }
-      const unsubscribe = channel.value.on("update-composition", async (message) => {
-        if ((0, import_canvas5.isUpdateCompositionMessage)(message)) {
-          const composition = await enhance(message);
-          contextualComposition.value = composition;
-        }
-      });
-      return () => {
-        unsubscribe();
-      };
-    },
-    { immediate: true }
-  );
-  (0, import_vue_demi5.onMounted)(() => {
-    if (!isInContextEditingMode()) {
-      return;
-    }
-    const existingScript = document.getElementById(previewScriptId);
-    if (existingScript) {
-      return;
-    }
-    const script = document.createElement("script");
-    script.id = previewScriptId;
-    script.src = getCanvasInContextEmbedScriptUrl();
-    script.async = true;
-    document.head.appendChild(script);
-  });
-  return {
-    composition: contextualComposition != null ? contextualComposition : initialCompositionValue
-  };
-};
-function getCanvasInContextEmbedScriptUrl() {
-  const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
-  return scriptUrl;
-}
-function isInContextEditingMode() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
-  );
-  const isAllowlistedReferrer = Boolean(
-    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
-  );
-  return isOpenedByInContextEditor && isAllowlistedReferrer;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CANVAS_COMPOSITION_TYPE,
-  CANVAS_SLOT_CONTENT_TYPE,
   Composition,
   DefaultNotImplementedComponent,
   SlotContent,
-  compositionInjectionKey,
+  UniformComponent,
+  UniformComposition,
+  UniformSlot,
   convertComponentToProps,
   createApiEnhancer,
-  resolveRendererInjectionKey,
+  createUniformApiEnhancer,
+  globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect,
-  useContextualEditing
+  useUniformContextualEditing,
+  useUniformCurrentComponent,
+  useUniformCurrentComposition
 });