@uniformdev/next-app-router-client 20.49.3 → 20.49.4-alpha.124

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { ManifestV2, CompositionMetadata, TestEvent, ContextState, ContextOptions, CookieTransitionDataStoreOptions, Context, Quirks, ScoreVector } from '@uniformdev/context';
 import * as React from 'react';
 import React__default, { JSX, PropsWithChildren } from 'react';
-import { ComponentContext, ComponentParameter, PersonalizeProps } from '@uniformdev/next-app-router-shared';
+import { SlotDefinition, ExtractTestResult, CompositionContext, ComponentContext, ComponentParameter, PersonalizeProps } from '@uniformdev/next-app-router-shared';
 import { VisibilityParameterValue } from '@uniformdev/canvas';
 import * as _uniformdev_context__ from '@uniformdev/context/*';
 
@@ -36,6 +36,20 @@ declare const ClientContextTestTransfer: ({ event }: {
     event: TestEvent;
 }) => null;
 
+type ClientTestProps = {
+    slots: Record<string, SlotDefinition>;
+    test: ExtractTestResult;
+    context: CompositionContext;
+};
+/**
+ * Client-side A/B test component used when the server skipped test evaluation
+ * (e.g. during prefetch). Evaluates the test on the client using the visitor's
+ * stored variant or rolling a new one, ensuring consistent assignment across pages.
+ */
+declare const ClientTest: ({ slots, test, context: compositionContext }: ClientTestProps) => React.FunctionComponentElement<{
+    children?: React.ReactNode | undefined;
+}>;
+
 type ClientUniformTextProps = {
     /**
      * The name of the  HTML tag to render.
@@ -125,4 +139,4 @@ declare const useUniformContext: () => {
     context: Context | undefined;
 };
 
-export { type ClientContextComponent, type ClientContextComponentProps, ClientContextTestTransfer, ClientUniformText, type ClientUniformTextProps, ContextUpdateTransfer, DefaultUniformClientContext, Personalize, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };
+export { type ClientContextComponent, type ClientContextComponentProps, ClientContextTestTransfer, ClientTest, ClientUniformText, type ClientUniformTextProps, ContextUpdateTransfer, DefaultUniformClientContext, Personalize, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ManifestV2, CompositionMetadata, TestEvent, ContextState, ContextOptions, CookieTransitionDataStoreOptions, Context, Quirks, ScoreVector } from '@uniformdev/context';
 import * as React from 'react';
 import React__default, { JSX, PropsWithChildren } from 'react';
-import { ComponentContext, ComponentParameter, PersonalizeProps } from '@uniformdev/next-app-router-shared';
+import { SlotDefinition, ExtractTestResult, CompositionContext, ComponentContext, ComponentParameter, PersonalizeProps } from '@uniformdev/next-app-router-shared';
 import { VisibilityParameterValue } from '@uniformdev/canvas';
 import * as _uniformdev_context__ from '@uniformdev/context/*';
 
@@ -36,6 +36,20 @@ declare const ClientContextTestTransfer: ({ event }: {
     event: TestEvent;
 }) => null;
 
+type ClientTestProps = {
+    slots: Record<string, SlotDefinition>;
+    test: ExtractTestResult;
+    context: CompositionContext;
+};
+/**
+ * Client-side A/B test component used when the server skipped test evaluation
+ * (e.g. during prefetch). Evaluates the test on the client using the visitor's
+ * stored variant or rolling a new one, ensuring consistent assignment across pages.
+ */
+declare const ClientTest: ({ slots, test, context: compositionContext }: ClientTestProps) => React.FunctionComponentElement<{
+    children?: React.ReactNode | undefined;
+}>;
+
 type ClientUniformTextProps = {
     /**
      * The name of the  HTML tag to render.
@@ -125,4 +139,4 @@ declare const useUniformContext: () => {
     context: Context | undefined;
 };
 
-export { type ClientContextComponent, type ClientContextComponentProps, ClientContextTestTransfer, ClientUniformText, type ClientUniformTextProps, ContextUpdateTransfer, DefaultUniformClientContext, Personalize, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };
+export { type ClientContextComponent, type ClientContextComponentProps, ClientContextTestTransfer, ClientTest, ClientUniformText, type ClientUniformTextProps, ContextUpdateTransfer, DefaultUniformClientContext, Personalize, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };

package/dist/index.esm.js

@@ -70,6 +70,39 @@ var ClientContextTestTransfer = ({ event }) => {
   return null;
 };
 
+// src/components/ClientTest.tsx
+import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
+import {
+  evaluateTest
+} from "@uniformdev/next-app-router-shared";
+import { createElement, Fragment, useEffect as useEffect4, useMemo, useState as useState3 } from "react";
+var ClientTest = ({ slots, test, context: compositionContext }) => {
+  const testSlot = slots[CANVAS_TEST_SLOT];
+  const { context } = useUniformContext();
+  const [indexToShow, setIndexToShow] = useState3(void 0);
+  useEffect4(() => {
+    if (!context || !testSlot) {
+      return;
+    }
+    const { index } = evaluateTest({
+      context,
+      test,
+      compositionContext
+    });
+    if (index !== null) {
+      setIndexToShow(index);
+    }
+  }, [context, testSlot, test, compositionContext]);
+  const slotToShow = useMemo(() => {
+    var _a, _b;
+    if (typeof indexToShow !== "number" || !testSlot) {
+      return null;
+    }
+    return (_b = (_a = testSlot.items[indexToShow]) == null ? void 0 : _a.component) != null ? _b : null;
+  }, [indexToShow, testSlot]);
+  return createElement(Fragment, void 0, slotToShow);
+};
+
 // src/components/ClientUniformText.tsx
 import {
   ATTRIBUTE_COMPONENT_ID,
@@ -81,15 +114,15 @@ import {
   createQuirksVisibilityRule,
   evaluatePropertyCriteria
 } from "@uniformdev/canvas";
-import React, { useMemo } from "react";
+import React, { useMemo as useMemo2 } from "react";
 
 // src/hooks/useQuirks.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 function useQuirks() {
   var _a;
   const { context } = useUniformContext();
-  const [quirks, setQuirks] = useState3((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
-  useEffect4(() => {
+  const [quirks, setQuirks] = useState4((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
+  useEffect5(() => {
     if (!context) {
       return;
     }
@@ -117,12 +150,12 @@ var ClientUniformText = ({
 }) => {
   const parameter = providedParameter;
   const quirks = useQuirks();
-  const rules = useMemo(() => {
+  const rules = useMemo2(() => {
     return {
       ...createQuirksVisibilityRule(quirks)
     };
   }, [quirks]);
-  const currentValue = useMemo(() => {
+  const currentValue = useMemo2(() => {
     var _a;
     if (!parameter) {
       return void 0;
@@ -190,12 +223,12 @@ var getParameterAttributes = ({
 };
 
 // src/components/ContextUpdateTransfer.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var hasKeys = (obj) => Object.keys(obj).length > 0;
 var ContextUpdateTransfer = ({ update }) => {
   const { context } = useUniformContext();
   const stableUpdate = useStableValue(update, hasKeys);
-  useEffect5(() => {
+  useEffect6(() => {
     if (context && stableUpdate) {
       context.update(stableUpdate);
     }
@@ -243,7 +276,7 @@ var createClientUniformContext = (options) => {
 import { UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME } from "@uniformdev/next-app-router-shared";
 import Cookies from "js-cookie";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 var useInitUniformContext = (callback, compositionMetadata) => {
   const path = usePathname();
   const searchParams = useSearchParams();
@@ -251,7 +284,7 @@ var useInitUniformContext = (callback, compositionMetadata) => {
   if (typeof window !== "undefined" && context.current === void 0) {
     context.current = callback();
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined" || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -313,14 +346,14 @@ var DefaultUniformClientContext = ({
 // src/components/Personalize.tsx
 import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
 import { evaluatePersonalization } from "@uniformdev/next-app-router-shared";
-import { createElement, Fragment, useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
+import { createElement as createElement2, Fragment as Fragment2, useEffect as useEffect9, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/hooks/useScores.ts
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 function useScores() {
   const { context } = useUniformContext();
-  const [scores, setScores] = useState4(context == null ? void 0 : context.scores);
-  useEffect7(() => {
+  const [scores, setScores] = useState5(context == null ? void 0 : context.scores);
+  useEffect8(() => {
     if (!context) {
       return;
     }
@@ -350,8 +383,8 @@ var Personalize = ({
   const { context } = useUniformContext();
   const scores = useScores();
   const quirks = useQuirks();
-  const [indexesToShow, setIndexesToShow] = useState5(indexes);
-  useEffect8(() => {
+  const [indexesToShow, setIndexesToShow] = useState6(indexes);
+  useEffect9(() => {
     if (typeof context === "undefined" || !personalizationSlot) {
       return;
     }
@@ -390,23 +423,23 @@ var Personalize = ({
     quirks,
     indexesToShow
   ]);
-  const slotsToShow = useMemo2(() => {
+  const slotsToShow = useMemo3(() => {
     return indexesToShow.map((key) => {
       var _a2;
       return (_a2 = personalizationSlot == null ? void 0 : personalizationSlot.items[key]) == null ? void 0 : _a2.component;
     });
   }, [indexesToShow, personalizationSlot]);
-  return createElement(Fragment, void 0, slotsToShow);
+  return createElement2(Fragment2, void 0, slotsToShow);
 };
 
 // src/components/UniformScript.tsx
 import { createCanvasChannel, isAllowedReferrer } from "@uniformdev/canvas";
 import { useRouter as useRouter2 } from "next/navigation";
-import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef4 } from "react";
 var UniformScript = () => {
   const router = useRouter2();
   const needsToRefreshRef = useRef4(false);
-  const channel = useMemo3(() => {
+  const channel = useMemo4(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
@@ -417,7 +450,7 @@ var UniformScript = () => {
     });
     return instance;
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!channel) {
       return;
     }
@@ -434,7 +467,7 @@ var UniformScript = () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -455,7 +488,7 @@ var UniformScript = () => {
       document.head.appendChild(script);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleBlurChange = () => {
       if (needsToRefreshRef.current) {
         router.refresh();
@@ -475,23 +508,23 @@ import {
   createQuirksVisibilityRule as createQuirksVisibilityRule2,
   evaluateNodeVisibilityParameter
 } from "@uniformdev/canvas";
-import React2, { useEffect as useEffect10, useMemo as useMemo4, useState as useState6 } from "react";
+import React2, { useEffect as useEffect11, useMemo as useMemo5, useState as useState7 } from "react";
 var VisibilityRulesWrapperClient = ({
   parameter,
   initialIsVisible,
   children
 }) => {
-  const [isVisible, setIsVisible] = useState6(initialIsVisible);
-  const [visibleSource, setVisibleSource] = useState6(
+  const [isVisible, setIsVisible] = useState7(initialIsVisible);
+  const [visibleSource, setVisibleSource] = useState7(
     initialIsVisible === null ? "unknown" : "server"
   );
   const quirks = useQuirks();
-  const rules = useMemo4(() => {
+  const rules = useMemo5(() => {
     return {
       ...createQuirksVisibilityRule2(quirks)
     };
   }, [quirks]);
-  useEffect10(() => {
+  useEffect11(() => {
     const result = evaluateNodeVisibilityParameter({
       rules,
       parameter
@@ -506,6 +539,7 @@ var VisibilityRulesWrapperClient = ({
 };
 export {
   ClientContextTestTransfer,
+  ClientTest,
   ClientUniformText,
   ContextUpdateTransfer,
   DefaultUniformClientContext,

package/dist/index.js

@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ClientContextTestTransfer: () => ClientContextTestTransfer,
+  ClientTest: () => ClientTest,
   ClientUniformText: () => ClientUniformText,
   ContextUpdateTransfer: () => ContextUpdateTransfer,
   DefaultUniformClientContext: () => DefaultUniformClientContext,
@@ -116,17 +117,48 @@ var ClientContextTestTransfer = ({ event }) => {
   return null;
 };
 
-// src/components/ClientUniformText.tsx
+// src/components/ClientTest.tsx
 var import_canvas = require("@uniformdev/canvas");
-var import_react5 = __toESM(require("react"));
+var import_next_app_router_shared = require("@uniformdev/next-app-router-shared");
+var import_react4 = require("react");
+var ClientTest = ({ slots, test, context: compositionContext }) => {
+  const testSlot = slots[import_canvas.CANVAS_TEST_SLOT];
+  const { context } = useUniformContext();
+  const [indexToShow, setIndexToShow] = (0, import_react4.useState)(void 0);
+  (0, import_react4.useEffect)(() => {
+    if (!context || !testSlot) {
+      return;
+    }
+    const { index } = (0, import_next_app_router_shared.evaluateTest)({
+      context,
+      test,
+      compositionContext
+    });
+    if (index !== null) {
+      setIndexToShow(index);
+    }
+  }, [context, testSlot, test, compositionContext]);
+  const slotToShow = (0, import_react4.useMemo)(() => {
+    var _a, _b;
+    if (typeof indexToShow !== "number" || !testSlot) {
+      return null;
+    }
+    return (_b = (_a = testSlot.items[indexToShow]) == null ? void 0 : _a.component) != null ? _b : null;
+  }, [indexToShow, testSlot]);
+  return (0, import_react4.createElement)(import_react4.Fragment, void 0, slotToShow);
+};
+
+// src/components/ClientUniformText.tsx
+var import_canvas2 = require("@uniformdev/canvas");
+var import_react6 = __toESM(require("react"));
 
 // src/hooks/useQuirks.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useQuirks() {
   var _a;
   const { context } = useUniformContext();
-  const [quirks, setQuirks] = (0, import_react4.useState)((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
-  (0, import_react4.useEffect)(() => {
+  const [quirks, setQuirks] = (0, import_react5.useState)((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
+  (0, import_react5.useEffect)(() => {
     if (!context) {
       return;
     }
@@ -154,12 +186,12 @@ var ClientUniformText = ({
 }) => {
   const parameter = providedParameter;
   const quirks = useQuirks();
-  const rules = (0, import_react5.useMemo)(() => {
+  const rules = (0, import_react6.useMemo)(() => {
     return {
-      ...(0, import_canvas.createQuirksVisibilityRule)(quirks)
+      ...(0, import_canvas2.createQuirksVisibilityRule)(quirks)
     };
   }, [quirks]);
-  const currentValue = (0, import_react5.useMemo)(() => {
+  const currentValue = (0, import_react6.useMemo)(() => {
     var _a;
     if (!parameter) {
       return void 0;
@@ -167,7 +199,7 @@ var ClientUniformText = ({
     if (!rules.length || !((_a = parameter.conditions) == null ? void 0 : _a.length)) {
       return parameter.value;
     }
-    const match = (0, import_canvas.evaluatePropertyCriteria)({
+    const match = (0, import_canvas2.evaluatePropertyCriteria)({
       baseValue: parameter.value,
       conditionalValues: parameter.conditions,
       rules
@@ -184,10 +216,10 @@ var ClientUniformText = ({
   const parameterId = parameter.parameterId;
   const isContextualEditing = Boolean(parameter._contextualEditing);
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react5.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(currentValue));
+    return /* @__PURE__ */ import_react6.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(currentValue));
   }
   const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     Tag,
     {
       ...props,
@@ -215,24 +247,24 @@ var getParameterAttributes = ({
   const type = parameter == null ? void 0 : parameter.type;
   const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
   return {
-    [import_canvas.ATTRIBUTE_COMPONENT_ID]: component._id,
-    [import_canvas.ATTRIBUTE_PARAMETER_ID]: parameter.parameterId,
-    [import_canvas.ATTRIBUTE_PARAMETER_VALUE]: String(value != null ? value : ""),
-    [import_canvas.ATTRIBUTE_PARAMETER_TYPE]: type,
-    [import_canvas.ATTRIBUTE_PLACEHOLDER]: placeholder,
-    [import_canvas.ATTRIBUTE_MULTILINE]: isMultiline,
+    [import_canvas2.ATTRIBUTE_COMPONENT_ID]: component._id,
+    [import_canvas2.ATTRIBUTE_PARAMETER_ID]: parameter.parameterId,
+    [import_canvas2.ATTRIBUTE_PARAMETER_VALUE]: String(value != null ? value : ""),
+    [import_canvas2.ATTRIBUTE_PARAMETER_TYPE]: type,
+    [import_canvas2.ATTRIBUTE_PLACEHOLDER]: placeholder,
+    [import_canvas2.ATTRIBUTE_MULTILINE]: isMultiline,
     contentEditable: isEditable,
     suppressContentEditableWarning: true
   };
 };
 
 // src/components/ContextUpdateTransfer.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var hasKeys = (obj) => Object.keys(obj).length > 0;
 var ContextUpdateTransfer = ({ update }) => {
   const { context } = useUniformContext();
   const stableUpdate = useStableValue(update, hasKeys);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (context && stableUpdate) {
       context.update(stableUpdate);
     }
@@ -274,18 +306,18 @@ var createClientUniformContext = (options) => {
 };
 
 // src/hooks/useInitUniformContext.ts
-var import_next_app_router_shared = require("@uniformdev/next-app-router-shared");
+var import_next_app_router_shared2 = require("@uniformdev/next-app-router-shared");
 var import_js_cookie = __toESM(require("js-cookie"));
 var import_navigation = require("next/navigation");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useInitUniformContext = (callback, compositionMetadata) => {
   const path = (0, import_navigation.usePathname)();
   const searchParams = (0, import_navigation.useSearchParams)();
-  const context = (0, import_react7.useRef)(void 0);
+  const context = (0, import_react8.useRef)(void 0);
   if (typeof window !== "undefined" && context.current === void 0) {
     context.current = callback();
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -293,7 +325,7 @@ var useInitUniformContext = (callback, compositionMetadata) => {
     searchParams.forEach((value, key) => {
       url.searchParams.set(key, value);
     });
-    const quirkCookie = import_js_cookie.default.get(import_next_app_router_shared.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
+    const quirkCookie = import_js_cookie.default.get(import_next_app_router_shared2.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
     let quirks = void 0;
     if (quirkCookie) {
       try {
@@ -302,7 +334,7 @@ var useInitUniformContext = (callback, compositionMetadata) => {
         console.error("Error parsing quirk cookie", error);
       }
     }
-    import_js_cookie.default.remove(import_next_app_router_shared.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
+    import_js_cookie.default.remove(import_next_app_router_shared2.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
     context.current.update({
       url,
       compositionMetadata,
@@ -345,16 +377,16 @@ var DefaultUniformClientContext = ({
 };
 
 // src/components/Personalize.tsx
-var import_canvas2 = require("@uniformdev/canvas");
-var import_next_app_router_shared2 = require("@uniformdev/next-app-router-shared");
-var import_react9 = require("react");
+var import_canvas3 = require("@uniformdev/canvas");
+var import_next_app_router_shared3 = require("@uniformdev/next-app-router-shared");
+var import_react10 = require("react");
 
 // src/hooks/useScores.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useScores() {
   const { context } = useUniformContext();
-  const [scores, setScores] = (0, import_react8.useState)(context == null ? void 0 : context.scores);
-  (0, import_react8.useEffect)(() => {
+  const [scores, setScores] = (0, import_react9.useState)(context == null ? void 0 : context.scores);
+  (0, import_react9.useEffect)(() => {
     if (!context) {
       return;
     }
@@ -380,16 +412,16 @@ var Personalize = ({
   var _a, _b;
   const trackingEventName = (_a = parameters.trackingEventName) == null ? void 0 : _a.value;
   const algorithm = (_b = parameters.algorithm) == null ? void 0 : _b.value;
-  const personalizationSlot = slots[import_canvas2.CANVAS_PERSONALIZE_SLOT];
+  const personalizationSlot = slots[import_canvas3.CANVAS_PERSONALIZE_SLOT];
   const { context } = useUniformContext();
   const scores = useScores();
   const quirks = useQuirks();
-  const [indexesToShow, setIndexesToShow] = (0, import_react9.useState)(indexes);
-  (0, import_react9.useEffect)(() => {
+  const [indexesToShow, setIndexesToShow] = (0, import_react10.useState)(indexes);
+  (0, import_react10.useEffect)(() => {
     if (typeof context === "undefined" || !personalizationSlot) {
       return;
     }
-    const result = (0, import_next_app_router_shared2.evaluatePersonalization)({
+    const result = (0, import_next_app_router_shared3.evaluatePersonalization)({
       context,
       compositionContext,
       personalization: {
@@ -424,34 +456,34 @@ var Personalize = ({
     quirks,
     indexesToShow
   ]);
-  const slotsToShow = (0, import_react9.useMemo)(() => {
+  const slotsToShow = (0, import_react10.useMemo)(() => {
     return indexesToShow.map((key) => {
       var _a2;
       return (_a2 = personalizationSlot == null ? void 0 : personalizationSlot.items[key]) == null ? void 0 : _a2.component;
     });
   }, [indexesToShow, personalizationSlot]);
-  return (0, import_react9.createElement)(import_react9.Fragment, void 0, slotsToShow);
+  return (0, import_react10.createElement)(import_react10.Fragment, void 0, slotsToShow);
 };
 
 // src/components/UniformScript.tsx
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_navigation3 = require("next/navigation");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var UniformScript = () => {
   const router = (0, import_navigation3.useRouter)();
-  const needsToRefreshRef = (0, import_react10.useRef)(false);
-  const channel = (0, import_react10.useMemo)(() => {
+  const needsToRefreshRef = (0, import_react11.useRef)(false);
+  const channel = (0, import_react11.useMemo)(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
     }
-    const instance = (0, import_canvas3.createCanvasChannel)({
+    const instance = (0, import_canvas4.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return instance;
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!channel) {
       return;
     }
@@ -468,13 +500,13 @@ var UniformScript = () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
     const existing = document.getElementById("uniform-script");
     if (!existing) {
-      const textHost = (0, import_canvas3.isAllowedReferrer)(window.document.referrer) ? window.document.referrer : "https://uniform.app/";
+      const textHost = (0, import_canvas4.isAllowedReferrer)(window.document.referrer) ? window.document.referrer : "https://uniform.app/";
       window.__UNIFORM_CONTEXTUAL_EDITING__ = {
         framework: "React",
         version: 2
@@ -489,7 +521,7 @@ var UniformScript = () => {
       document.head.appendChild(script);
     }
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleBlurChange = () => {
       if (needsToRefreshRef.current) {
         router.refresh();
@@ -505,25 +537,25 @@ var UniformScript = () => {
 };
 
 // src/components/VisibilityRulesWrapperClient.tsx
-var import_canvas4 = require("@uniformdev/canvas");
-var import_react11 = __toESM(require("react"));
+var import_canvas5 = require("@uniformdev/canvas");
+var import_react12 = __toESM(require("react"));
 var VisibilityRulesWrapperClient = ({
   parameter,
   initialIsVisible,
   children
 }) => {
-  const [isVisible, setIsVisible] = (0, import_react11.useState)(initialIsVisible);
-  const [visibleSource, setVisibleSource] = (0, import_react11.useState)(
+  const [isVisible, setIsVisible] = (0, import_react12.useState)(initialIsVisible);
+  const [visibleSource, setVisibleSource] = (0, import_react12.useState)(
     initialIsVisible === null ? "unknown" : "server"
   );
   const quirks = useQuirks();
-  const rules = (0, import_react11.useMemo)(() => {
+  const rules = (0, import_react12.useMemo)(() => {
     return {
-      ...(0, import_canvas4.createQuirksVisibilityRule)(quirks)
+      ...(0, import_canvas5.createQuirksVisibilityRule)(quirks)
     };
   }, [quirks]);
-  (0, import_react11.useEffect)(() => {
-    const result = (0, import_canvas4.evaluateNodeVisibilityParameter)({
+  (0, import_react12.useEffect)(() => {
+    const result = (0, import_canvas5.evaluateNodeVisibilityParameter)({
       rules,
       parameter
     });
@@ -533,11 +565,12 @@ var VisibilityRulesWrapperClient = ({
     setIsVisible(result);
     setVisibleSource("client");
   }, [initialIsVisible, visibleSource, parameter, rules]);
-  return isVisible ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, children) : null;
+  return isVisible ? /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children) : null;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ClientContextTestTransfer,
+  ClientTest,
   ClientUniformText,
   ContextUpdateTransfer,
   DefaultUniformClientContext,

package/dist/index.mjs

@@ -70,6 +70,39 @@ var ClientContextTestTransfer = ({ event }) => {
   return null;
 };
 
+// src/components/ClientTest.tsx
+import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
+import {
+  evaluateTest
+} from "@uniformdev/next-app-router-shared";
+import { createElement, Fragment, useEffect as useEffect4, useMemo, useState as useState3 } from "react";
+var ClientTest = ({ slots, test, context: compositionContext }) => {
+  const testSlot = slots[CANVAS_TEST_SLOT];
+  const { context } = useUniformContext();
+  const [indexToShow, setIndexToShow] = useState3(void 0);
+  useEffect4(() => {
+    if (!context || !testSlot) {
+      return;
+    }
+    const { index } = evaluateTest({
+      context,
+      test,
+      compositionContext
+    });
+    if (index !== null) {
+      setIndexToShow(index);
+    }
+  }, [context, testSlot, test, compositionContext]);
+  const slotToShow = useMemo(() => {
+    var _a, _b;
+    if (typeof indexToShow !== "number" || !testSlot) {
+      return null;
+    }
+    return (_b = (_a = testSlot.items[indexToShow]) == null ? void 0 : _a.component) != null ? _b : null;
+  }, [indexToShow, testSlot]);
+  return createElement(Fragment, void 0, slotToShow);
+};
+
 // src/components/ClientUniformText.tsx
 import {
   ATTRIBUTE_COMPONENT_ID,
@@ -81,15 +114,15 @@ import {
   createQuirksVisibilityRule,
   evaluatePropertyCriteria
 } from "@uniformdev/canvas";
-import React, { useMemo } from "react";
+import React, { useMemo as useMemo2 } from "react";
 
 // src/hooks/useQuirks.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 function useQuirks() {
   var _a;
   const { context } = useUniformContext();
-  const [quirks, setQuirks] = useState3((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
-  useEffect4(() => {
+  const [quirks, setQuirks] = useState4((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
+  useEffect5(() => {
     if (!context) {
       return;
     }
@@ -117,12 +150,12 @@ var ClientUniformText = ({
 }) => {
   const parameter = providedParameter;
   const quirks = useQuirks();
-  const rules = useMemo(() => {
+  const rules = useMemo2(() => {
     return {
       ...createQuirksVisibilityRule(quirks)
     };
   }, [quirks]);
-  const currentValue = useMemo(() => {
+  const currentValue = useMemo2(() => {
     var _a;
     if (!parameter) {
       return void 0;
@@ -190,12 +223,12 @@ var getParameterAttributes = ({
 };
 
 // src/components/ContextUpdateTransfer.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var hasKeys = (obj) => Object.keys(obj).length > 0;
 var ContextUpdateTransfer = ({ update }) => {
   const { context } = useUniformContext();
   const stableUpdate = useStableValue(update, hasKeys);
-  useEffect5(() => {
+  useEffect6(() => {
     if (context && stableUpdate) {
       context.update(stableUpdate);
     }
@@ -243,7 +276,7 @@ var createClientUniformContext = (options) => {
 import { UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME } from "@uniformdev/next-app-router-shared";
 import Cookies from "js-cookie";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 var useInitUniformContext = (callback, compositionMetadata) => {
   const path = usePathname();
   const searchParams = useSearchParams();
@@ -251,7 +284,7 @@ var useInitUniformContext = (callback, compositionMetadata) => {
   if (typeof window !== "undefined" && context.current === void 0) {
     context.current = callback();
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined" || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -313,14 +346,14 @@ var DefaultUniformClientContext = ({
 // src/components/Personalize.tsx
 import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
 import { evaluatePersonalization } from "@uniformdev/next-app-router-shared";
-import { createElement, Fragment, useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
+import { createElement as createElement2, Fragment as Fragment2, useEffect as useEffect9, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/hooks/useScores.ts
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 function useScores() {
   const { context } = useUniformContext();
-  const [scores, setScores] = useState4(context == null ? void 0 : context.scores);
-  useEffect7(() => {
+  const [scores, setScores] = useState5(context == null ? void 0 : context.scores);
+  useEffect8(() => {
     if (!context) {
       return;
     }
@@ -350,8 +383,8 @@ var Personalize = ({
   const { context } = useUniformContext();
   const scores = useScores();
   const quirks = useQuirks();
-  const [indexesToShow, setIndexesToShow] = useState5(indexes);
-  useEffect8(() => {
+  const [indexesToShow, setIndexesToShow] = useState6(indexes);
+  useEffect9(() => {
     if (typeof context === "undefined" || !personalizationSlot) {
       return;
     }
@@ -390,23 +423,23 @@ var Personalize = ({
     quirks,
     indexesToShow
   ]);
-  const slotsToShow = useMemo2(() => {
+  const slotsToShow = useMemo3(() => {
     return indexesToShow.map((key) => {
       var _a2;
       return (_a2 = personalizationSlot == null ? void 0 : personalizationSlot.items[key]) == null ? void 0 : _a2.component;
     });
   }, [indexesToShow, personalizationSlot]);
-  return createElement(Fragment, void 0, slotsToShow);
+  return createElement2(Fragment2, void 0, slotsToShow);
 };
 
 // src/components/UniformScript.tsx
 import { createCanvasChannel, isAllowedReferrer } from "@uniformdev/canvas";
 import { useRouter as useRouter2 } from "next/navigation";
-import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef4 } from "react";
 var UniformScript = () => {
   const router = useRouter2();
   const needsToRefreshRef = useRef4(false);
-  const channel = useMemo3(() => {
+  const channel = useMemo4(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
@@ -417,7 +450,7 @@ var UniformScript = () => {
     });
     return instance;
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!channel) {
       return;
     }
@@ -434,7 +467,7 @@ var UniformScript = () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -455,7 +488,7 @@ var UniformScript = () => {
       document.head.appendChild(script);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleBlurChange = () => {
       if (needsToRefreshRef.current) {
         router.refresh();
@@ -475,23 +508,23 @@ import {
   createQuirksVisibilityRule as createQuirksVisibilityRule2,
   evaluateNodeVisibilityParameter
 } from "@uniformdev/canvas";
-import React2, { useEffect as useEffect10, useMemo as useMemo4, useState as useState6 } from "react";
+import React2, { useEffect as useEffect11, useMemo as useMemo5, useState as useState7 } from "react";
 var VisibilityRulesWrapperClient = ({
   parameter,
   initialIsVisible,
   children
 }) => {
-  const [isVisible, setIsVisible] = useState6(initialIsVisible);
-  const [visibleSource, setVisibleSource] = useState6(
+  const [isVisible, setIsVisible] = useState7(initialIsVisible);
+  const [visibleSource, setVisibleSource] = useState7(
     initialIsVisible === null ? "unknown" : "server"
   );
   const quirks = useQuirks();
-  const rules = useMemo4(() => {
+  const rules = useMemo5(() => {
     return {
       ...createQuirksVisibilityRule2(quirks)
     };
   }, [quirks]);
-  useEffect10(() => {
+  useEffect11(() => {
     const result = evaluateNodeVisibilityParameter({
       rules,
       parameter
@@ -506,6 +539,7 @@ var VisibilityRulesWrapperClient = ({
 };
 export {
   ClientContextTestTransfer,
+  ClientTest,
   ClientUniformText,
   ContextUpdateTransfer,
   DefaultUniformClientContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/next-app-router-client",
-  "version": "20.49.3",
+  "version": "20.49.4-alpha.124+f9898bee23",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -36,10 +36,10 @@
     "vitest": "3.2.4"
   },
   "dependencies": {
-    "@uniformdev/canvas": "20.49.3",
-    "@uniformdev/canvas-react": "20.49.3",
-    "@uniformdev/context": "20.49.3",
-    "@uniformdev/next-app-router-shared": "20.49.3",
+    "@uniformdev/canvas": "20.49.4-alpha.124+f9898bee23",
+    "@uniformdev/canvas-react": "20.49.4-alpha.124+f9898bee23",
+    "@uniformdev/context": "20.49.4-alpha.124+f9898bee23",
+    "@uniformdev/next-app-router-shared": "20.49.4-alpha.124+f9898bee23",
     "js-cookie": "3.0.5"
   },
   "engines": {
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6424635c7b318f5039e4d9c4d5a2ec72125af46"
+  "gitHead": "f9898bee2368f0b75128ecc2b8914ca788d85163"
 }