@uniformdev/canvas-react 20.35.0 → 20.35.1-alpha.188

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { P as PureUniformTextProps } from './PureUniformText-B3GAm6Dc.mjs';
+import { CompositionMetadata } from '@uniformdev/context';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -18,7 +19,7 @@ type ComponentProps<TProps = unknown> = TProps & {
  */
 type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType<ComponentProps<any>> | null;
 /** Function that renders Canvas system internals */
-type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => JSX.Element | null) => JSX.Element | null;
+type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => ReactNode | null) => ReactNode | null;
 /** Configures rendering of system components (tests, pz) */
 type SystemRenderConfig = {
     test: SystemRenderFunction;
@@ -54,7 +55,7 @@ type UniformComponentProps<TRenderProps = unknown> = {
     /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */
     resolveRenderer?: RenderComponentResolver;
     /** Children to render. Can also be a function that takes ComponentProps as argument */
-    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => ReactNode);
     /**
      * When to track behavior from enrichment tags on the current composition
      * onView: adds enrichment score when the visitor views the tagged component in the browser viewport.
@@ -158,6 +159,13 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
                     name: string;
                     value?: string;
                     helpText?: string;
+                    optionsSource?: {
+                        source: "static";
+                        options: {
+                            name: string;
+                            value: string;
+                        }[];
+                    };
                 }[];
                 previewValue?: string;
             };
@@ -727,12 +735,12 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
     isContextualEditing: boolean;
 };
 
-type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & {
+type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & Omit<CompositionMetadata, 'compositionId'> & {
     /** The composition data */
     data?: RootComponentInstance;
     contextualEditingEnhancer?: UseUniformContextualEditingProps['enhance'];
 };
-type UniformCompositionContextValue = {
+type UniformCompositionContextValue = Omit<CompositionMetadata, 'compositionId'> & {
     data: UniformCompositionProps['data'] | undefined;
     resolveRenderer?: UniformCompositionProps['resolveRenderer'];
     behaviorTracking?: UniformCompositionProps['behaviorTracking'];
@@ -748,7 +756,7 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`.
  * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing).
  */
-declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
+declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, matchedRoute, dynamicInputs, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type UniformPlaygroundDecorator = (props: {
     /** The rendered component instance, needs to be wrapped and rendered by the decorator */
@@ -841,7 +849,7 @@ type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
     key: Key;
-}) => JSX.Element;
+}) => ReactNode;
 type UniformSlotWrapperComponentProps = {
     items: ReactNode[];
     slotName: string;
@@ -867,7 +875,7 @@ type UniformSlotProps<TSlotNames extends string> = {
     emptyPlaceholder?: React$1.ReactNode;
 };
 /** Renders a named Slot within a Composition. */
-declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): ReactNode | null;
 
 /**
  * Converts a raw Canvas component instance to React component props format.

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { P as PureUniformTextProps } from './PureUniformText-B3GAm6Dc.js';
+import { CompositionMetadata } from '@uniformdev/context';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -18,7 +19,7 @@ type ComponentProps<TProps = unknown> = TProps & {
  */
 type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType<ComponentProps<any>> | null;
 /** Function that renders Canvas system internals */
-type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => JSX.Element | null) => JSX.Element | null;
+type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => ReactNode | null) => ReactNode | null;
 /** Configures rendering of system components (tests, pz) */
 type SystemRenderConfig = {
     test: SystemRenderFunction;
@@ -54,7 +55,7 @@ type UniformComponentProps<TRenderProps = unknown> = {
     /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */
     resolveRenderer?: RenderComponentResolver;
     /** Children to render. Can also be a function that takes ComponentProps as argument */
-    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => ReactNode);
     /**
      * When to track behavior from enrichment tags on the current composition
      * onView: adds enrichment score when the visitor views the tagged component in the browser viewport.
@@ -158,6 +159,13 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
                     name: string;
                     value?: string;
                     helpText?: string;
+                    optionsSource?: {
+                        source: "static";
+                        options: {
+                            name: string;
+                            value: string;
+                        }[];
+                    };
                 }[];
                 previewValue?: string;
             };
@@ -727,12 +735,12 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
     isContextualEditing: boolean;
 };
 
-type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & {
+type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & Omit<CompositionMetadata, 'compositionId'> & {
     /** The composition data */
     data?: RootComponentInstance;
     contextualEditingEnhancer?: UseUniformContextualEditingProps['enhance'];
 };
-type UniformCompositionContextValue = {
+type UniformCompositionContextValue = Omit<CompositionMetadata, 'compositionId'> & {
     data: UniformCompositionProps['data'] | undefined;
     resolveRenderer?: UniformCompositionProps['resolveRenderer'];
     behaviorTracking?: UniformCompositionProps['behaviorTracking'];
@@ -748,7 +756,7 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`.
  * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing).
  */
-declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
+declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, matchedRoute, dynamicInputs, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type UniformPlaygroundDecorator = (props: {
     /** The rendered component instance, needs to be wrapped and rendered by the decorator */
@@ -841,7 +849,7 @@ type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
     key: Key;
-}) => JSX.Element;
+}) => ReactNode;
 type UniformSlotWrapperComponentProps = {
     items: ReactNode[];
     slotName: string;
@@ -867,7 +875,7 @@ type UniformSlotProps<TSlotNames extends string> = {
     emptyPlaceholder?: React$1.ReactNode;
 };
 /** Renders a named Slot within a Composition. */
-declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): ReactNode | null;
 
 /**
  * Converts a raw Canvas component instance to React component props format.

package/dist/index.esm.js

@@ -77,7 +77,7 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 import {
   CANVAS_ENRICHMENT_TAG_PARAM
 } from "@uniformdev/canvas";
-import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
+import { Track, TrackFragment, useUniformContext as useUniformContext2 } from "@uniformdev/context-react";
 import React7, { createContext as createContext2, useContext as useContext2 } from "react";
 
 // src/helpers/convertComponentToProps.ts
@@ -155,87 +155,11 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-react";
-import * as React2 from "react";
-var defaultSystemComponentResolver = {
-  test: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e;
-    const testComponent = component;
-    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
-    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
-    const finalVariants = mapSlotToTestVariations(variants);
-    return /* @__PURE__ */ React2.createElement(
-      Test,
-      {
-        key,
-        variations: finalVariants,
-        name: testName,
-        component: (variation) => renderChild(variation, key)
-      }
-    );
-  },
-  personalization: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const pzComponent = component;
-    const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React2.createElement(
-      Personalize,
-      {
-        key,
-        variations: processedVariants,
-        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
-        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
-        component: (variation) => renderChild(variation, 0),
-        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value
-      }
-    );
-  }
-};
-
-// src/components/ContextualEditingComponentWrapper.tsx
-import {
-  isComponentPlaceholderId
-} from "@uniformdev/canvas";
-import React5 from "react";
-
-// src/components/PureContextualEditingComponentWrapper.tsx
-import {
-  CANVAS_LOCALE_TAG_PARAM,
-  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
-  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
-} from "@uniformdev/canvas";
-import React3 from "react";
-var PureContextualEditingComponentWrapper = ({
-  children,
-  isPlaceholder,
-  parentComponent,
-  component,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  isReadOnly
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    "script",
-    {
-      "data-role": 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 == null ? void 0 : component._id,
-      "data-slot-name": slotName != null ? slotName : "",
-      "data-component-index": indexInSlot != null ? indexInSlot : "",
-      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
-      "data-component-name": component == null ? void 0 : component.type,
-      "data-is-placeholder": isPlaceholder ? "true" : void 0,
-      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
-      "data-is-readonly": isReadOnly
-    }
-  ), children, /* @__PURE__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
-};
+import * as React5 from "react";
 
 // src/components/UniformComposition.tsx
-import React4, { createContext, useContext } from "react";
+import { useUniformContext } from "@uniformdev/context-react";
+import React4, { createContext, useContext, useEffect as useEffect2 } from "react";
 
 // src/hooks/useClientConditionsComposition.ts
 import {
@@ -299,7 +223,7 @@ var useUniformContextualEditing = ({
   enhance = (message) => message.composition
 }) => {
   const [contextualComposition, setContextualComposition] = useState();
-  const latestEventTimeStamp = useRef();
+  const latestEventTimeStamp = useRef(void 0);
   const channel = useMemo3(() => {
     var _a;
     if (!isInContextEditingMode()) {
@@ -375,6 +299,84 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowedReferrer(window.document.referrer);
 }
 
+// src/components/ContextualEditingComponentWrapper.tsx
+import {
+  isComponentPlaceholderId
+} from "@uniformdev/canvas";
+import React3 from "react";
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
+} from "@uniformdev/canvas";
+import React2 from "react";
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "script",
+    {
+      "data-role": 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 == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ React2.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
+
+// src/components/ContextualEditingComponentWrapper.tsx
+function ContextualEditingComponentWrapper({
+  component,
+  parentComponent,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  emptyPlaceholder,
+  children
+}) {
+  var _a;
+  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+  }
+  if (isPlaceholder && emptyPlaceholder === null) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    PureContextualEditingComponentWrapper,
+    {
+      isPlaceholder,
+      parentComponent,
+      component,
+      slotName,
+      indexInSlot,
+      slotChildrenCount,
+      isReadOnly
+    },
+    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
+  );
+}
+
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
   data: void 0,
@@ -389,8 +391,21 @@ function UniformComposition({
   children,
   resolveRenderer,
   contextualEditingEnhancer,
-  contextualEditingDefaultPlaceholder
+  contextualEditingDefaultPlaceholder,
+  // provide default non-undefined values to avoid serialization issues
+  matchedRoute = "",
+  dynamicInputs = {}
 }) {
+  const maybeContext = useUniformContext({ throwOnMissingProvider: false });
+  useEffect2(() => {
+    if ((maybeContext == null ? void 0 : maybeContext.context) && (data == null ? void 0 : data._id)) {
+      maybeContext.context.updateCompositionMetadata({
+        compositionId: data._id,
+        matchedRoute,
+        dynamicInputs
+      });
+    }
+  }, [data == null ? void 0 : data._id, maybeContext == null ? void 0 : maybeContext.context, matchedRoute, dynamicInputs]);
   const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: ruledComposition,
@@ -399,7 +414,14 @@ function UniformComposition({
   return /* @__PURE__ */ React4.createElement(
     UniformCompositionContext.Provider,
     {
-      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+      value: {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        isContextualEditing,
+        matchedRoute,
+        dynamicInputs
+      }
     },
     /* @__PURE__ */ React4.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React4.createElement(
       UniformComponent,
@@ -414,40 +436,48 @@ function UniformComposition({
   );
 }
 
-// src/components/ContextualEditingComponentWrapper.tsx
-function ContextualEditingComponentWrapper({
-  component,
-  parentComponent,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  emptyPlaceholder,
-  children
-}) {
-  var _a;
-  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
-  if (!isContextualEditing) {
-    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
-  }
-  if (isPlaceholder && emptyPlaceholder === null) {
-    return null;
+// src/defaultSystemComponentResolver.tsx
+var defaultSystemComponentResolver = {
+  test: function TestComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e;
+    const testComponent = component;
+    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
+    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
+    const finalVariants = mapSlotToTestVariations(variants);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      Test,
+      {
+        key,
+        variations: finalVariants,
+        name: testName,
+        component: (variation) => renderChild(variation, key),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0
+      }
+    );
+  },
+  personalization: function PersonalizeComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const pzComponent = component;
+    const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
+        component: (variation) => renderChild(variation, 0),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0,
+        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value,
+        compositionId: data == null ? void 0 : data._id,
+        matchedRoute,
+        dynamicInputs
+      }
+    );
   }
-  return /* @__PURE__ */ React5.createElement(
-    PureContextualEditingComponentWrapper,
-    {
-      isPlaceholder,
-      parentComponent,
-      component,
-      slotName,
-      indexInSlot,
-      slotChildrenCount,
-      isReadOnly
-    },
-    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
-  );
-}
+};
 
 // src/components/UniformSlot.tsx
 function UniformSlot({
@@ -602,7 +632,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = useUniformContext({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = useUniformContext2({ throwOnMissingProvider: false }) !== void 0;
   if (!data) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
@@ -987,7 +1017,7 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect2, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
@@ -1007,7 +1037,7 @@ var useUniformContextualEditingState = ({
     });
     return channel2;
   }, [isContextualEditing]);
-  useEffect2(() => {
+  useEffect3(() => {
     var _a, _b;
     if (!channel) {
       return;

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
   convertComponentToProps: () => convertComponentToProps,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
-  createUniformApiEnhancer: () => import_canvas6.createUniformApiEnhancer,
+  createUniformApiEnhancer: () => import_canvas4.createUniformApiEnhancer,
   getParameterAttributes: () => getParameterAttributes,
   registerUniformComponent: () => registerUniformComponent,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -131,7 +131,7 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 
 // src/components/UniformComponent.tsx
 var import_canvas9 = require("@uniformdev/canvas");
-var import_context_react3 = require("@uniformdev/context-react");
+var import_context_react4 = require("@uniformdev/context-react");
 var import_react9 = __toESM(require("react"));
 
 // src/helpers/convertComponentToProps.ts
@@ -195,98 +195,28 @@ var import_canvas8 = require("@uniformdev/canvas");
 var import_react8 = __toESM(require("react"));
 
 // src/defaultSystemComponentResolver.tsx
-var import_canvas2 = require("@uniformdev/canvas");
-var import_context_react = require("@uniformdev/context-react");
-var React2 = __toESM(require("react"));
-var defaultSystemComponentResolver = {
-  test: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e;
-    const testComponent = component;
-    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
-    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
-    const finalVariants = (0, import_canvas2.mapSlotToTestVariations)(variants);
-    return /* @__PURE__ */ React2.createElement(
-      import_context_react.Test,
-      {
-        key,
-        variations: finalVariants,
-        name: testName,
-        component: (variation) => renderChild(variation, key)
-      }
-    );
-  },
-  personalization: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const pzComponent = component;
-    const processedVariants = (0, import_canvas2.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React2.createElement(
-      import_context_react.Personalize,
-      {
-        key,
-        variations: processedVariants,
-        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[import_canvas2.CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
-        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[import_canvas2.CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
-        component: (variation) => renderChild(variation, 0),
-        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[import_canvas2.CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value
-      }
-    );
-  }
-};
-
-// src/components/ContextualEditingComponentWrapper.tsx
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react7 = __toESM(require("react"));
-
-// src/components/PureContextualEditingComponentWrapper.tsx
-var import_canvas3 = require("@uniformdev/canvas");
-var import_react2 = __toESM(require("react"));
-var PureContextualEditingComponentWrapper = ({
-  children,
-  isPlaceholder,
-  parentComponent,
-  component,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  isReadOnly
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
-    "script",
-    {
-      "data-role": import_canvas3.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 == null ? void 0 : component._id,
-      "data-slot-name": slotName != null ? slotName : "",
-      "data-component-index": indexInSlot != null ? indexInSlot : "",
-      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
-      "data-component-name": component == null ? void 0 : component.type,
-      "data-is-placeholder": isPlaceholder ? "true" : void 0,
-      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[import_canvas3.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
-      "data-is-readonly": isReadOnly
-    }
-  ), children, /* @__PURE__ */ import_react2.default.createElement("script", { "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
-};
+var import_context_react3 = require("@uniformdev/context-react");
+var React5 = __toESM(require("react"));
 
 // src/components/UniformComposition.tsx
-var import_react6 = __toESM(require("react"));
+var import_context_react2 = require("@uniformdev/context-react");
+var import_react7 = __toESM(require("react"));
 
 // src/hooks/useClientConditionsComposition.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_immer = require("immer");
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/hooks/useClientVisibilityRules.ts
-var import_canvas4 = require("@uniformdev/canvas");
-var import_context_react2 = require("@uniformdev/context-react");
-var import_react3 = require("react");
+var import_canvas2 = require("@uniformdev/canvas");
+var import_context_react = require("@uniformdev/context-react");
+var import_react2 = require("react");
 function useClientVisibilityRules() {
-  const quirks = (0, import_context_react2.useQuirks)({ throwOnMissingProvider: false });
-  return (0, import_react3.useMemo)(() => {
+  const quirks = (0, import_context_react.useQuirks)({ throwOnMissingProvider: false });
+  return (0, import_react2.useMemo)(() => {
     return {
-      ...(0, import_canvas4.createQuirksVisibilityRule)(quirks)
+      ...(0, import_canvas2.createQuirksVisibilityRule)(quirks)
     };
   }, [quirks]);
 }
@@ -294,15 +224,15 @@ function useClientVisibilityRules() {
 // src/hooks/useClientConditionsComposition.ts
 function useClientConditionsComposition(data) {
   const rules = useClientVisibilityRules();
-  const preprocessedValue = (0, import_react4.useMemo)(() => {
+  const preprocessedValue = (0, import_react3.useMemo)(() => {
     if (!data) {
       return data;
     }
     try {
       return (0, import_immer.produce)(data, (draft) => {
-        (0, import_canvas5.walkNodeTree)(draft, (context) => {
-          (0, import_canvas5.evaluateWalkTreeNodeVisibility)({ context, rules, showIndeterminate: false });
-          (0, import_canvas5.evaluateWalkTreePropertyCriteria)({ node: context.node, rules, keepIndeterminate: false });
+        (0, import_canvas3.walkNodeTree)(draft, (context) => {
+          (0, import_canvas3.evaluateWalkTreeNodeVisibility)({ context, rules, showIndeterminate: false });
+          (0, import_canvas3.evaluateWalkTreePropertyCriteria)({ node: context.node, rules, keepIndeterminate: false });
         });
       });
     } catch (e) {
@@ -314,28 +244,28 @@ function useClientConditionsComposition(data) {
 }
 
 // src/hooks/useUniformContextualEditing.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_react5 = require("react");
+var import_canvas4 = require("@uniformdev/canvas");
+var import_react4 = require("react");
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
   enhance = (message) => message.composition
 }) => {
-  const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
-  const latestEventTimeStamp = (0, import_react5.useRef)();
-  const channel = (0, import_react5.useMemo)(() => {
+  const [contextualComposition, setContextualComposition] = (0, import_react4.useState)();
+  const latestEventTimeStamp = (0, import_react4.useRef)(void 0);
+  const channel = (0, import_react4.useMemo)(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
     }
-    const channel2 = (0, import_canvas6.createCanvasChannel)({
+    const channel2 = (0, import_canvas4.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return channel2;
   }, []);
-  (0, import_react5.useEffect)(() => {
-    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas6.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
+  (0, import_react4.useEffect)(() => {
+    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas4.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
       setContextualComposition(void 0);
       return;
     }
@@ -343,7 +273,7 @@ var useUniformContextualEditing = ({
       return;
     }
     const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
-      if (!(0, import_canvas6.isUpdateCompositionInternalMessage)(message)) {
+      if (!(0, import_canvas4.isUpdateCompositionInternalMessage)(message)) {
         return;
       }
       if (latestEventTimeStamp.current && message.eventTimestamp && message.eventTimestamp <= latestEventTimeStamp.current) {
@@ -359,11 +289,11 @@ var useUniformContextualEditing = ({
       registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
     };
   }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id, contextualComposition == null ? void 0 : contextualComposition._id]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isInContextEditingMode()) {
       return;
     }
-    const existingScript = document.getElementById(import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
+    const existingScript = document.getElementById(import_canvas4.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
     if (existingScript) {
       return;
     }
@@ -371,10 +301,10 @@ var useUniformContextualEditing = ({
       framework: "React",
       // Make sure to also update the value in canvas-vue
       version: 2,
-      canvasPackageVersion: import_canvas6.version
+      canvasPackageVersion: import_canvas4.version
     };
     const script = document.createElement("script");
-    script.id = import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
+    script.id = import_canvas4.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
     script.src = getCanvasInContextEmbedScriptUrl();
     script.async = true;
     document.head.appendChild(script);
@@ -393,49 +323,47 @@ function isInContextEditingMode() {
     return false;
   }
   const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+    import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
   );
-  return isOpenedByInContextEditor && (0, import_canvas6.isAllowedReferrer)(window.document.referrer);
+  return isOpenedByInContextEditor && (0, import_canvas4.isAllowedReferrer)(window.document.referrer);
 }
 
-// src/components/UniformComposition.tsx
-var UniformCompositionContext = (0, import_react6.createContext)({
-  data: void 0,
-  isContextualEditing: false
-});
-function useUniformCurrentComposition() {
-  return (0, import_react6.useContext)(UniformCompositionContext);
-}
-function UniformComposition({
-  data,
-  behaviorTracking = "onView",
+// src/components/ContextualEditingComponentWrapper.tsx
+var import_canvas6 = require("@uniformdev/canvas");
+var import_react6 = __toESM(require("react"));
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+var import_canvas5 = require("@uniformdev/canvas");
+var import_react5 = __toESM(require("react"));
+var PureContextualEditingComponentWrapper = ({
   children,
-  resolveRenderer,
-  contextualEditingEnhancer,
-  contextualEditingDefaultPlaceholder
-}) {
-  const ruledComposition = useClientConditionsComposition(data);
-  const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: ruledComposition,
-    enhance: contextualEditingEnhancer
-  });
-  return /* @__PURE__ */ import_react6.default.createElement(
-    UniformCompositionContext.Provider,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+    "script",
     {
-      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
-    },
-    /* @__PURE__ */ import_react6.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react6.default.createElement(
-      UniformComponent,
-      {
-        data: composition,
-        behaviorTracking,
-        resolveRenderer,
-        contextualEditingDefaultPlaceholder
-      },
-      children
-    ))
-  );
-}
+      "data-role": import_canvas5.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 == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[import_canvas5.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ import_react5.default.createElement("script", { "data-role": import_canvas5.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -448,16 +376,16 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a;
-  const isPlaceholder = (0, import_canvas7.isComponentPlaceholderId)(component == null ? void 0 : component._id);
+  const isPlaceholder = (0, import_canvas6.isComponentPlaceholderId)(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, children);
   }
   if (isPlaceholder && emptyPlaceholder === null) {
     return null;
   }
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     PureContextualEditingComponentWrapper,
     {
       isPlaceholder,
@@ -472,6 +400,108 @@ function ContextualEditingComponentWrapper({
   );
 }
 
+// src/components/UniformComposition.tsx
+var UniformCompositionContext = (0, import_react7.createContext)({
+  data: void 0,
+  isContextualEditing: false
+});
+function useUniformCurrentComposition() {
+  return (0, import_react7.useContext)(UniformCompositionContext);
+}
+function UniformComposition({
+  data,
+  behaviorTracking = "onView",
+  children,
+  resolveRenderer,
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder,
+  // provide default non-undefined values to avoid serialization issues
+  matchedRoute = "",
+  dynamicInputs = {}
+}) {
+  const maybeContext = (0, import_context_react2.useUniformContext)({ throwOnMissingProvider: false });
+  (0, import_react7.useEffect)(() => {
+    if ((maybeContext == null ? void 0 : maybeContext.context) && (data == null ? void 0 : data._id)) {
+      maybeContext.context.updateCompositionMetadata({
+        compositionId: data._id,
+        matchedRoute,
+        dynamicInputs
+      });
+    }
+  }, [data == null ? void 0 : data._id, maybeContext == null ? void 0 : maybeContext.context, matchedRoute, dynamicInputs]);
+  const ruledComposition = useClientConditionsComposition(data);
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: ruledComposition,
+    enhance: contextualEditingEnhancer
+  });
+  return /* @__PURE__ */ import_react7.default.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        isContextualEditing,
+        matchedRoute,
+        dynamicInputs
+      }
+    },
+    /* @__PURE__ */ import_react7.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react7.default.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    ))
+  );
+}
+
+// src/defaultSystemComponentResolver.tsx
+var defaultSystemComponentResolver = {
+  test: function TestComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e;
+    const testComponent = component;
+    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
+    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
+    const finalVariants = (0, import_canvas7.mapSlotToTestVariations)(variants);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      import_context_react3.Test,
+      {
+        key,
+        variations: finalVariants,
+        name: testName,
+        component: (variation) => renderChild(variation, key),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0
+      }
+    );
+  },
+  personalization: function PersonalizeComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const pzComponent = component;
+    const processedVariants = (0, import_canvas7.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      import_context_react3.Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[import_canvas7.CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[import_canvas7.CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
+        component: (variation) => renderChild(variation, 0),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0,
+        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[import_canvas7.CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value,
+        compositionId: data == null ? void 0 : data._id,
+        matchedRoute,
+        dynamicInputs
+      }
+    );
+  }
+};
+
 // src/components/UniformSlot.tsx
 function UniformSlot({
   name,
@@ -625,7 +655,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = (0, import_context_react3.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = (0, import_context_react4.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
   if (!data) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
@@ -639,7 +669,7 @@ function UniformComponent({
     contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
   const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas9.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
-  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react3.TrackFragment : import_context_react3.Track;
+  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react4.TrackFragment : import_context_react4.Track;
   const resolvedChildren = resolveChildren({
     children,
     data,

package/dist/index.mjs

@@ -77,7 +77,7 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 import {
   CANVAS_ENRICHMENT_TAG_PARAM
 } from "@uniformdev/canvas";
-import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
+import { Track, TrackFragment, useUniformContext as useUniformContext2 } from "@uniformdev/context-react";
 import React7, { createContext as createContext2, useContext as useContext2 } from "react";
 
 // src/helpers/convertComponentToProps.ts
@@ -155,87 +155,11 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-react";
-import * as React2 from "react";
-var defaultSystemComponentResolver = {
-  test: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e;
-    const testComponent = component;
-    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
-    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
-    const finalVariants = mapSlotToTestVariations(variants);
-    return /* @__PURE__ */ React2.createElement(
-      Test,
-      {
-        key,
-        variations: finalVariants,
-        name: testName,
-        component: (variation) => renderChild(variation, key)
-      }
-    );
-  },
-  personalization: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const pzComponent = component;
-    const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React2.createElement(
-      Personalize,
-      {
-        key,
-        variations: processedVariants,
-        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
-        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
-        component: (variation) => renderChild(variation, 0),
-        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value
-      }
-    );
-  }
-};
-
-// src/components/ContextualEditingComponentWrapper.tsx
-import {
-  isComponentPlaceholderId
-} from "@uniformdev/canvas";
-import React5 from "react";
-
-// src/components/PureContextualEditingComponentWrapper.tsx
-import {
-  CANVAS_LOCALE_TAG_PARAM,
-  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
-  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
-} from "@uniformdev/canvas";
-import React3 from "react";
-var PureContextualEditingComponentWrapper = ({
-  children,
-  isPlaceholder,
-  parentComponent,
-  component,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  isReadOnly
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    "script",
-    {
-      "data-role": 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 == null ? void 0 : component._id,
-      "data-slot-name": slotName != null ? slotName : "",
-      "data-component-index": indexInSlot != null ? indexInSlot : "",
-      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
-      "data-component-name": component == null ? void 0 : component.type,
-      "data-is-placeholder": isPlaceholder ? "true" : void 0,
-      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
-      "data-is-readonly": isReadOnly
-    }
-  ), children, /* @__PURE__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
-};
+import * as React5 from "react";
 
 // src/components/UniformComposition.tsx
-import React4, { createContext, useContext } from "react";
+import { useUniformContext } from "@uniformdev/context-react";
+import React4, { createContext, useContext, useEffect as useEffect2 } from "react";
 
 // src/hooks/useClientConditionsComposition.ts
 import {
@@ -299,7 +223,7 @@ var useUniformContextualEditing = ({
   enhance = (message) => message.composition
 }) => {
   const [contextualComposition, setContextualComposition] = useState();
-  const latestEventTimeStamp = useRef();
+  const latestEventTimeStamp = useRef(void 0);
   const channel = useMemo3(() => {
     var _a;
     if (!isInContextEditingMode()) {
@@ -375,6 +299,84 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowedReferrer(window.document.referrer);
 }
 
+// src/components/ContextualEditingComponentWrapper.tsx
+import {
+  isComponentPlaceholderId
+} from "@uniformdev/canvas";
+import React3 from "react";
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
+} from "@uniformdev/canvas";
+import React2 from "react";
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "script",
+    {
+      "data-role": 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 == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ React2.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
+
+// src/components/ContextualEditingComponentWrapper.tsx
+function ContextualEditingComponentWrapper({
+  component,
+  parentComponent,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  emptyPlaceholder,
+  children
+}) {
+  var _a;
+  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+  }
+  if (isPlaceholder && emptyPlaceholder === null) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    PureContextualEditingComponentWrapper,
+    {
+      isPlaceholder,
+      parentComponent,
+      component,
+      slotName,
+      indexInSlot,
+      slotChildrenCount,
+      isReadOnly
+    },
+    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
+  );
+}
+
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
   data: void 0,
@@ -389,8 +391,21 @@ function UniformComposition({
   children,
   resolveRenderer,
   contextualEditingEnhancer,
-  contextualEditingDefaultPlaceholder
+  contextualEditingDefaultPlaceholder,
+  // provide default non-undefined values to avoid serialization issues
+  matchedRoute = "",
+  dynamicInputs = {}
 }) {
+  const maybeContext = useUniformContext({ throwOnMissingProvider: false });
+  useEffect2(() => {
+    if ((maybeContext == null ? void 0 : maybeContext.context) && (data == null ? void 0 : data._id)) {
+      maybeContext.context.updateCompositionMetadata({
+        compositionId: data._id,
+        matchedRoute,
+        dynamicInputs
+      });
+    }
+  }, [data == null ? void 0 : data._id, maybeContext == null ? void 0 : maybeContext.context, matchedRoute, dynamicInputs]);
   const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: ruledComposition,
@@ -399,7 +414,14 @@ function UniformComposition({
   return /* @__PURE__ */ React4.createElement(
     UniformCompositionContext.Provider,
     {
-      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+      value: {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        isContextualEditing,
+        matchedRoute,
+        dynamicInputs
+      }
     },
     /* @__PURE__ */ React4.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React4.createElement(
       UniformComponent,
@@ -414,40 +436,48 @@ function UniformComposition({
   );
 }
 
-// src/components/ContextualEditingComponentWrapper.tsx
-function ContextualEditingComponentWrapper({
-  component,
-  parentComponent,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  emptyPlaceholder,
-  children
-}) {
-  var _a;
-  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
-  if (!isContextualEditing) {
-    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
-  }
-  if (isPlaceholder && emptyPlaceholder === null) {
-    return null;
+// src/defaultSystemComponentResolver.tsx
+var defaultSystemComponentResolver = {
+  test: function TestComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e;
+    const testComponent = component;
+    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
+    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
+    const finalVariants = mapSlotToTestVariations(variants);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      Test,
+      {
+        key,
+        variations: finalVariants,
+        name: testName,
+        component: (variation) => renderChild(variation, key),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0
+      }
+    );
+  },
+  personalization: function PersonalizeComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const pzComponent = component;
+    const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
+        component: (variation) => renderChild(variation, 0),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0,
+        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value,
+        compositionId: data == null ? void 0 : data._id,
+        matchedRoute,
+        dynamicInputs
+      }
+    );
   }
-  return /* @__PURE__ */ React5.createElement(
-    PureContextualEditingComponentWrapper,
-    {
-      isPlaceholder,
-      parentComponent,
-      component,
-      slotName,
-      indexInSlot,
-      slotChildrenCount,
-      isReadOnly
-    },
-    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
-  );
-}
+};
 
 // src/components/UniformSlot.tsx
 function UniformSlot({
@@ -602,7 +632,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = useUniformContext({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = useUniformContext2({ throwOnMissingProvider: false }) !== void 0;
   if (!data) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
@@ -987,7 +1017,7 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect2, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
@@ -1007,7 +1037,7 @@ var useUniformContextualEditingState = ({
     });
     return channel2;
   }, [isContextualEditing]);
-  useEffect2(() => {
+  useEffect3(() => {
     var _a, _b;
     if (!channel) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "20.35.0",
+  "version": "20.35.1-alpha.188+c2a5b9c45f",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,10 +45,10 @@
     "document:prebuild": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "20.35.0",
-    "@uniformdev/context": "20.35.0",
-    "@uniformdev/context-react": "20.35.0",
-    "@uniformdev/richtext": "20.35.0"
+    "@uniformdev/canvas": "20.35.1-alpha.188+c2a5b9c45f",
+    "@uniformdev/context": "20.35.1-alpha.188+c2a5b9c45f",
+    "@uniformdev/context-react": "20.35.1-alpha.188+c2a5b9c45f",
+    "@uniformdev/richtext": "20.35.1-alpha.188+c2a5b9c45f"
   },
   "peerDependencies": {
     "immer": ">= 10",
@@ -56,10 +56,10 @@
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.3.24",
-    "immer": "10.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@types/react": "19.2.2",
+    "immer": "10.1.3",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
   },
   "files": [
     "/dist"
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f228361828ef49a596ca3841e5b79768c64418cf"
+  "gitHead": "c2a5b9c45fdbcd3199fba23e38beaf7ca0388c35"
 }