@uniformdev/canvas-next-rsc 19.207.1-alpha.28 → 19.209.0

package/dist/{UniformComposition-B8budr-b.d.mts → UniformComposition-IWWzoI_H.d.mts}

@@ -28,11 +28,22 @@ type UniformCompositionProps = PageParameters & {
      * Function to map composition components to React components.
      */
     resolveComponent: ResolveComponentFunction;
+    /**
+     * Function to map empty placeholders to React components.
+     */
+    resolveEmptyPlaceholder?: ResolveEmptyPlaceholderFunction;
 } & (UniformStaticCompositionProps | UniformServerCompositionProps);
 declare const UniformComposition: React.FC<UniformCompositionProps>;
 type ResolveComponentFunction = (options: {
     component: ComponentInstance;
 }) => ResolveComponentResult;
+type ResolveEmptyPlaceholderFunction = (options: ResolveEmptyPlaceholderOptions) => ResolveEmptyPlaceholderResult;
+type ResolveEmptyPlaceholderOptions = {
+    parentComponent: ComponentInstance | undefined;
+    component: ComponentInstance;
+    slotName: string;
+    slotIndex: number;
+};
 type ResolveComponentResult = {
     component: ComponentType<ComponentProps<any, any>> | null;
     includeContext?: boolean;
@@ -40,6 +51,9 @@ type ResolveComponentResult = {
         fallback: ComponentType<any> | undefined;
     };
 };
+type ResolveEmptyPlaceholderResult = {
+    component: ComponentType<ComponentProps<any, any>> | null;
+};
 declare const resolveComposition: (props: Omit<ResolveComponentsOptions, "slotName" | "slotIndex" | "target"> & {
     composition: ComponentInstance;
     compositionContext: CompositionContext;
@@ -60,6 +74,7 @@ type ResolveComponentsOptions = {
     slotName: string | undefined;
     slotIndex: number | undefined;
     resolveComponent: ResolveComponentFunction;
+    resolveEmptyPlaceholder: ResolveEmptyPlaceholderFunction | undefined;
     compositionContext: CompositionContext;
     mode: UniformCompositionProps['mode'];
 };

package/dist/{UniformComposition-B8budr-b.d.ts → UniformComposition-IWWzoI_H.d.ts}

@@ -28,11 +28,22 @@ type UniformCompositionProps = PageParameters & {
      * Function to map composition components to React components.
      */
     resolveComponent: ResolveComponentFunction;
+    /**
+     * Function to map empty placeholders to React components.
+     */
+    resolveEmptyPlaceholder?: ResolveEmptyPlaceholderFunction;
 } & (UniformStaticCompositionProps | UniformServerCompositionProps);
 declare const UniformComposition: React.FC<UniformCompositionProps>;
 type ResolveComponentFunction = (options: {
     component: ComponentInstance;
 }) => ResolveComponentResult;
+type ResolveEmptyPlaceholderFunction = (options: ResolveEmptyPlaceholderOptions) => ResolveEmptyPlaceholderResult;
+type ResolveEmptyPlaceholderOptions = {
+    parentComponent: ComponentInstance | undefined;
+    component: ComponentInstance;
+    slotName: string;
+    slotIndex: number;
+};
 type ResolveComponentResult = {
     component: ComponentType<ComponentProps<any, any>> | null;
     includeContext?: boolean;
@@ -40,6 +51,9 @@ type ResolveComponentResult = {
         fallback: ComponentType<any> | undefined;
     };
 };
+type ResolveEmptyPlaceholderResult = {
+    component: ComponentType<ComponentProps<any, any>> | null;
+};
 declare const resolveComposition: (props: Omit<ResolveComponentsOptions, "slotName" | "slotIndex" | "target"> & {
     composition: ComponentInstance;
     compositionContext: CompositionContext;
@@ -60,6 +74,7 @@ type ResolveComponentsOptions = {
     slotName: string | undefined;
     slotIndex: number | undefined;
     resolveComponent: ResolveComponentFunction;
+    resolveEmptyPlaceholder: ResolveEmptyPlaceholderFunction | undefined;
     compositionContext: CompositionContext;
     mode: UniformCompositionProps['mode'];
 };

package/dist/component.d.mts

@@ -1,7 +1,7 @@
 import { ComponentProps, CompositionContext, SlotDefinition } from '@uniformdev/canvas-next-rsc-shared';
 export { ComponentProps, CompositionContext } from '@uniformdev/canvas-next-rsc-shared';
 import React__default, { PropsWithChildren, ReactNode, Key } from 'react';
-export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-B8budr-b.mjs';
+export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-IWWzoI_H.mjs';
 import { ComponentInstance } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 import { PureUniformTextProps } from '@uniformdev/canvas-react/core';

package/dist/component.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, CompositionContext, SlotDefinition } from '@uniformdev/canvas-next-rsc-shared';
 export { ComponentProps, CompositionContext } from '@uniformdev/canvas-next-rsc-shared';
 import React__default, { PropsWithChildren, ReactNode, Key } from 'react';
-export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-B8budr-b.js';
+export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-IWWzoI_H.js';
 import { ComponentInstance } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 import { PureUniformTextProps } from '@uniformdev/canvas-react/core';

package/dist/index.d.mts

@@ -5,8 +5,8 @@ import { ManifestClient } from '@uniformdev/context/api';
 import { ProjectMapClient, ProjectMapNode } from '@uniformdev/project-map';
 import { ContextState, ContextOptions } from '@uniformdev/context';
 import React__default, { PropsWithChildren } from 'react';
-import { U as UniformCompositionProps } from './UniformComposition-B8budr-b.mjs';
-export { b as UniformComposition, r as resolveComposition } from './UniformComposition-B8budr-b.mjs';
+import { U as UniformCompositionProps } from './UniformComposition-IWWzoI_H.mjs';
+export { b as UniformComposition, r as resolveComposition } from './UniformComposition-IWWzoI_H.mjs';
 import { ClientContextComponent } from '@uniformdev/canvas-next-rsc-client';
 
 type GetCanvasClientOptions = {

package/dist/index.d.ts

@@ -5,8 +5,8 @@ import { ManifestClient } from '@uniformdev/context/api';
 import { ProjectMapClient, ProjectMapNode } from '@uniformdev/project-map';
 import { ContextState, ContextOptions } from '@uniformdev/context';
 import React__default, { PropsWithChildren } from 'react';
-import { U as UniformCompositionProps } from './UniformComposition-B8budr-b.js';
-export { b as UniformComposition, r as resolveComposition } from './UniformComposition-B8budr-b.js';
+import { U as UniformCompositionProps } from './UniformComposition-IWWzoI_H.js';
+export { b as UniformComposition, r as resolveComposition } from './UniformComposition-IWWzoI_H.js';
 import { ClientContextComponent } from '@uniformdev/canvas-next-rsc-client';
 
 type GetCanvasClientOptions = {

package/dist/index.esm.js

@@ -679,6 +679,24 @@ var PersonalizeServer = (props) => {
   return createElement(Fragment, void 0, [...components, eventElement]);
 };
 
+// src/components/PersonalizeServerHybrid.tsx
+import { PersonalizeClient as PersonalizeClient2 } from "@uniformdev/canvas-next-rsc-client";
+import { runPersonalization as runPersonalization3 } from "@uniformdev/canvas-next-rsc-shared";
+import React5 from "react";
+var PersonalizeServerHybrid = (props) => {
+  const { indexes } = runPersonalization3(props);
+  return /* @__PURE__ */ React5.createElement(
+    PersonalizeClient2,
+    {
+      component: props.component,
+      count: props.count,
+      slots: props.slots,
+      trackingEventName: props.trackingEventName,
+      indexes
+    }
+  );
+};
+
 // src/components/TestServer.ts
 import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
 import {
@@ -689,9 +707,9 @@ import { createElement as createElement2, Fragment as Fragment2 } from "react";
 
 // src/components/ContextTestTransfer.tsx
 import { ClientContextTestTransfer } from "@uniformdev/canvas-next-rsc-client";
-import React5 from "react";
+import React6 from "react";
 var ContextTestTransfer = ({ event }) => {
-  return /* @__PURE__ */ React5.createElement(ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
+  return /* @__PURE__ */ React6.createElement(ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
 };
 
 // src/components/TestServer.ts
@@ -718,7 +736,7 @@ import {
   evaluateNodeVisibilityParameter
 } from "@uniformdev/canvas";
 import { VisibilityRulesWrapperClient } from "@uniformdev/canvas-next-rsc-client";
-import React6 from "react";
+import React7 from "react";
 var VisibilityRulesWrapper = (props) => {
   const { context, ...rest } = props;
   let isVisible = null;
@@ -729,12 +747,13 @@ var VisibilityRulesWrapper = (props) => {
       parameter: props.parameter
     });
   }
-  return /* @__PURE__ */ React6.createElement(VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
+  return /* @__PURE__ */ React7.createElement(VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
 };
 
 // src/components/UniformComposition.ts
 var UniformComposition = async ({
   resolveComponent,
+  resolveEmptyPlaceholder,
   route,
   ...props
 }) => {
@@ -789,7 +808,8 @@ var UniformComposition = async ({
     resolveComponent,
     serverContext,
     compositionContext,
-    mode: props.mode
+    mode: props.mode,
+    resolveEmptyPlaceholder
   });
   let transfer = null;
   if (props.mode === "server") {
@@ -842,7 +862,7 @@ var resolveSystemComponent = ({
   let resolved = null;
   let suspense = void 0;
   if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    resolved = server ? PersonalizeServer : PersonalizeClientWrapper;
+    resolved = server ? resolveServerPersonalizeComponent({ config }) : PersonalizeClientWrapper;
     suspense = server && ((_a = config.ppr) == null ? void 0 : _a.personalizationSuspense);
   }
   if (component.type === CANVAS_TEST_TYPE) {
@@ -854,10 +874,15 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
   resolveComponent,
+  resolveEmptyPlaceholder,
   serverContext,
   compositionContext,
   mode
@@ -877,7 +902,8 @@ var resolveSlots = ({
         resolveComponent,
         serverContext,
         compositionContext,
-        mode
+        mode,
+        resolveEmptyPlaceholder
       });
       if (resolved) {
         slots[slotName] = {
@@ -908,6 +934,7 @@ var resolveComponents = ({
   slotName,
   slotIndex,
   resolveComponent,
+  resolveEmptyPlaceholder,
   compositionContext,
   mode
 }) => {
@@ -933,11 +960,29 @@ var resolveComponents = ({
       component,
       server: isServer
     });
+    const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
+    let resolveResult = null;
+    if (isPlaceholder && resolveEmptyPlaceholder) {
+      const resolvedPlaceholder = resolveEmptyPlaceholder({
+        parentComponent: parent,
+        component,
+        slotName,
+        slotIndex: componentIndex
+      });
+      if (resolvedPlaceholder) {
+        resolveResult = {
+          component: resolvedPlaceholder.component
+        };
+      }
+    }
+    if (!resolveResult) {
+      resolveResult = resolveComponent({ component });
+    }
     const {
       component: regularComponent,
       includeContext,
       suspense: componentSuspense
-    } = resolveComponent({ component }) || {
+    } = resolveResult || {
       component: null
     };
     if (!systemComponent && !regularComponent) {
@@ -949,6 +994,7 @@ var resolveComponents = ({
       resolveComponent,
       serverContext,
       compositionContext,
+      resolveEmptyPlaceholder,
       mode
     });
     const resolvedComponent = systemComponent || regularComponent;
@@ -998,13 +1044,13 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
-      const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
-      if (!isPlaceholder || compositionContext.previewMode === "editor") {
+      const isPlaceholder2 = isComponentPlaceholderId(component == null ? void 0 : component._id);
+      if (!isPlaceholder2 || compositionContext.previewMode === "editor") {
         childNode = createElement3(
           PureContextualEditingComponentWrapper,
           {
             key: `${slotName}-${componentIndex}-wrapper`,
-            isPlaceholder,
+            isPlaceholder: isPlaceholder2,
             parentComponent: parent,
             component,
             slotName,
@@ -1069,7 +1115,7 @@ import {
   UniformScript
 } from "@uniformdev/canvas-next-rsc-client";
 import { Suspense as Suspense2 } from "react";
-import React7 from "react";
+import React8 from "react";
 var UniformContext = async ({
   clientContextComponent,
   children
@@ -1083,7 +1129,7 @@ var UniformContext = async ({
   const disableDevTools = ((_a = serverConfig2.context) == null ? void 0 : _a.disableDevTools) || false;
   const defaultConsent = serverConfig2.defaultConsent || false;
   const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children, /* @__PURE__ */ React8.createElement(
     ContextComponent,
     {
       manifest,
@@ -1091,16 +1137,16 @@ var UniformContext = async ({
       defaultConsent,
       experimentalQuirkSerialization
     }
-  ), /* @__PURE__ */ React7.createElement(Suspense2, { fallback: /* @__PURE__ */ React7.createElement(React7.Fragment, null) }, /* @__PURE__ */ React7.createElement(UniformScript, null)));
+  ), /* @__PURE__ */ React8.createElement(Suspense2, { fallback: /* @__PURE__ */ React8.createElement(React8.Fragment, null) }, /* @__PURE__ */ React8.createElement(UniformScript, null)));
 };
 
 // src/components/UniformPlayground.tsx
 import { CANVAS_DRAFT_STATE as CANVAS_DRAFT_STATE3, CANVAS_EDITOR_STATE as CANVAS_EDITOR_STATE3 } from "@uniformdev/canvas";
 import { notFound as notFound2 } from "next/navigation";
-import React8 from "react";
+import React9 from "react";
 var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!isDraftModeEnabled({ searchParams })) {
-    return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("h1", null, "Playground is only available in draft mode"));
+    return /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("h1", null, "Playground is only available in draft mode"));
   }
   const id = searchParams["id"];
   if (!id) {
@@ -1131,7 +1177,7 @@ var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!composition) {
     notFound2();
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     UniformComposition,
     {
       mode: "server",

package/dist/index.js

@@ -472,12 +472,12 @@ async function generateStaticParams() {
 
 // src/components/UniformComposition.ts
 var import_canvas8 = require("@uniformdev/canvas");
-var import_canvas_next_rsc_client7 = require("@uniformdev/canvas-next-rsc-client");
-var import_canvas_next_rsc_shared6 = require("@uniformdev/canvas-next-rsc-shared");
+var import_canvas_next_rsc_client8 = require("@uniformdev/canvas-next-rsc-client");
+var import_canvas_next_rsc_shared7 = require("@uniformdev/canvas-next-rsc-shared");
 var import_core = require("@uniformdev/canvas-react/core");
 var import_headers3 = require("next/headers");
 var import_navigation = require("next/navigation");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/context/createServerUniformContext.ts
 var import_canvas_next_rsc_shared = require("@uniformdev/canvas-next-rsc-shared");
@@ -711,17 +711,35 @@ var PersonalizeServer = (props) => {
   return (0, import_react5.createElement)(import_react5.Fragment, void 0, [...components, eventElement]);
 };
 
+// src/components/PersonalizeServerHybrid.tsx
+var import_canvas_next_rsc_client5 = require("@uniformdev/canvas-next-rsc-client");
+var import_canvas_next_rsc_shared5 = require("@uniformdev/canvas-next-rsc-shared");
+var import_react6 = __toESM(require("react"));
+var PersonalizeServerHybrid = (props) => {
+  const { indexes } = (0, import_canvas_next_rsc_shared5.runPersonalization)(props);
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_canvas_next_rsc_client5.PersonalizeClient,
+    {
+      component: props.component,
+      count: props.count,
+      slots: props.slots,
+      trackingEventName: props.trackingEventName,
+      indexes
+    }
+  );
+};
+
 // src/components/TestServer.ts
 var import_canvas6 = require("@uniformdev/canvas");
-var import_canvas_next_rsc_shared5 = require("@uniformdev/canvas-next-rsc-shared");
+var import_canvas_next_rsc_shared6 = require("@uniformdev/canvas-next-rsc-shared");
 var import_cache2 = require("next/cache");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/ContextTestTransfer.tsx
-var import_canvas_next_rsc_client5 = require("@uniformdev/canvas-next-rsc-client");
-var import_react6 = __toESM(require("react"));
+var import_canvas_next_rsc_client6 = require("@uniformdev/canvas-next-rsc-client");
+var import_react7 = __toESM(require("react"));
 var ContextTestTransfer = ({ event }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(import_canvas_next_rsc_client5.ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
+  return /* @__PURE__ */ import_react7.default.createElement(import_canvas_next_rsc_client6.ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
 };
 
 // src/components/TestServer.ts
@@ -730,22 +748,22 @@ var TestServer = async (props) => {
   if ((_a = getServerConfig().ppr) == null ? void 0 : _a.testSuspense) {
     (0, import_cache2.unstable_noStore)();
   }
-  const { index, event } = (0, import_canvas_next_rsc_shared5.runTest)(props);
+  const { index, event } = (0, import_canvas_next_rsc_shared6.runTest)(props);
   if (index === null || event === null) {
     return null;
   }
   const component = typeof index === "number" ? (_d = (_c = (_b = props.slots) == null ? void 0 : _b[import_canvas6.CANVAS_TEST_SLOT]) == null ? void 0 : _c.items[index]) != null ? _d : null : null;
-  const eventElement = (0, import_react7.createElement)(ContextTestTransfer, {
+  const eventElement = (0, import_react8.createElement)(ContextTestTransfer, {
     event,
     key: `${props.slotName}-${props.slotIndex}-server-transfer`
   });
-  return (0, import_react7.createElement)(import_react7.Fragment, void 0, [component, eventElement]);
+  return (0, import_react8.createElement)(import_react8.Fragment, void 0, [component, eventElement]);
 };
 
 // src/components/VisibilityRulesWrapper.tsx
 var import_canvas7 = require("@uniformdev/canvas");
-var import_canvas_next_rsc_client6 = require("@uniformdev/canvas-next-rsc-client");
-var import_react8 = __toESM(require("react"));
+var import_canvas_next_rsc_client7 = require("@uniformdev/canvas-next-rsc-client");
+var import_react9 = __toESM(require("react"));
 var VisibilityRulesWrapper = (props) => {
   const { context, ...rest } = props;
   let isVisible = null;
@@ -756,12 +774,13 @@ var VisibilityRulesWrapper = (props) => {
       parameter: props.parameter
     });
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_canvas_next_rsc_client6.VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
+  return /* @__PURE__ */ import_react9.default.createElement(import_canvas_next_rsc_client7.VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
 };
 
 // src/components/UniformComposition.ts
 var UniformComposition = async ({
   resolveComponent,
+  resolveEmptyPlaceholder,
   route,
   ...props
 }) => {
@@ -775,7 +794,7 @@ var UniformComposition = async ({
     });
     searchParams = props.searchParams;
   }
-  const { value: path } = (0, import_canvas_next_rsc_shared6.resolvePath)(props);
+  const { value: path } = (0, import_canvas_next_rsc_shared7.resolvePath)(props);
   if (!route || route.type === "notFound") {
     (0, import_navigation.notFound)();
   }
@@ -816,13 +835,14 @@ var UniformComposition = async ({
     resolveComponent,
     serverContext,
     compositionContext,
-    mode: props.mode
+    mode: props.mode,
+    resolveEmptyPlaceholder
   });
   let transfer = null;
   if (props.mode === "server") {
     const headersValue = (0, import_headers3.headers)();
     const missingQuirkValue = "unknown";
-    transfer = (0, import_react9.createElement)(ContextUpdateTransfer, {
+    transfer = (0, import_react10.createElement)(ContextUpdateTransfer, {
       serverContext,
       update: {
         params: props.params,
@@ -842,11 +862,11 @@ var UniformComposition = async ({
       }
     });
   } else if (props.mode === "static") {
-    transfer = (0, import_react9.createElement)(ContextUpdateTrigger, {
+    transfer = (0, import_react10.createElement)(ContextUpdateTrigger, {
       path
     });
   }
-  return (0, import_react9.createElement)(import_react9.Fragment, void 0, transfer, resolved);
+  return (0, import_react10.createElement)(import_react10.Fragment, void 0, transfer, resolved);
 };
 var isServerComponent = ({
   component,
@@ -869,11 +889,11 @@ var resolveSystemComponent = ({
   let resolved = null;
   let suspense = void 0;
   if (component.type === import_canvas8.CANVAS_PERSONALIZE_TYPE) {
-    resolved = server ? PersonalizeServer : PersonalizeClientWrapper;
+    resolved = server ? resolveServerPersonalizeComponent({ config }) : PersonalizeClientWrapper;
     suspense = server && ((_a = config.ppr) == null ? void 0 : _a.personalizationSuspense);
   }
   if (component.type === import_canvas8.CANVAS_TEST_TYPE) {
-    resolved = server ? TestServer : import_canvas_next_rsc_client7.TestClient;
+    resolved = server ? TestServer : import_canvas_next_rsc_client8.TestClient;
     suspense = server && ((_b = config.ppr) == null ? void 0 : _b.testSuspense);
   }
   return {
@@ -881,10 +901,15 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
   resolveComponent,
+  resolveEmptyPlaceholder,
   serverContext,
   compositionContext,
   mode
@@ -904,7 +929,8 @@ var resolveSlots = ({
         resolveComponent,
         serverContext,
         compositionContext,
-        mode
+        mode,
+        resolveEmptyPlaceholder
       });
       if (resolved) {
         slots[slotName] = {
@@ -935,6 +961,7 @@ var resolveComponents = ({
   slotName,
   slotIndex,
   resolveComponent,
+  resolveEmptyPlaceholder,
   compositionContext,
   mode
 }) => {
@@ -960,11 +987,29 @@ var resolveComponents = ({
       component,
       server: isServer
     });
+    const isPlaceholder = (0, import_canvas8.isComponentPlaceholderId)(component == null ? void 0 : component._id);
+    let resolveResult = null;
+    if (isPlaceholder && resolveEmptyPlaceholder) {
+      const resolvedPlaceholder = resolveEmptyPlaceholder({
+        parentComponent: parent,
+        component,
+        slotName,
+        slotIndex: componentIndex
+      });
+      if (resolvedPlaceholder) {
+        resolveResult = {
+          component: resolvedPlaceholder.component
+        };
+      }
+    }
+    if (!resolveResult) {
+      resolveResult = resolveComponent({ component });
+    }
     const {
       component: regularComponent,
       includeContext,
       suspense: componentSuspense
-    } = resolveComponent({ component }) || {
+    } = resolveResult || {
       component: null
     };
     if (!systemComponent && !regularComponent) {
@@ -976,6 +1021,7 @@ var resolveComponents = ({
       resolveComponent,
       serverContext,
       compositionContext,
+      resolveEmptyPlaceholder,
       mode
     });
     const resolvedComponent = systemComponent || regularComponent;
@@ -998,20 +1044,20 @@ var resolveComponents = ({
     };
     let element = null;
     if (wrapInSuspense) {
-      element = (0, import_react9.createElement)(
-        import_react9.Suspense,
+      element = (0, import_react10.createElement)(
+        import_react10.Suspense,
         {
           key,
-          fallback: typeof wrapInSuspense === "boolean" || typeof (wrapInSuspense == null ? void 0 : wrapInSuspense.fallback) === "undefined" ? void 0 : (0, import_react9.createElement)(wrapInSuspense.fallback)
+          fallback: typeof wrapInSuspense === "boolean" || typeof (wrapInSuspense == null ? void 0 : wrapInSuspense.fallback) === "undefined" ? void 0 : (0, import_react10.createElement)(wrapInSuspense.fallback)
         },
-        (0, import_react9.createElement)(resolvedComponent, componentProps)
+        (0, import_react10.createElement)(resolvedComponent, componentProps)
       );
     } else {
-      element = (0, import_react9.createElement)(resolvedComponent, { ...componentProps, key });
+      element = (0, import_react10.createElement)(resolvedComponent, { ...componentProps, key });
     }
     let tagElement = null;
     if (enrichmentTags == null ? void 0 : enrichmentTags.length) {
-      tagElement = (0, import_react9.createElement)(ContextUpdateTransfer, {
+      tagElement = (0, import_react10.createElement)(ContextUpdateTransfer, {
         key: `${slotName}-${componentIndex}-tags`,
         update: {
           enrichments: enrichmentTags
@@ -1025,13 +1071,13 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
-      const isPlaceholder = (0, import_canvas8.isComponentPlaceholderId)(component == null ? void 0 : component._id);
-      if (!isPlaceholder || compositionContext.previewMode === "editor") {
-        childNode = (0, import_react9.createElement)(
+      const isPlaceholder2 = (0, import_canvas8.isComponentPlaceholderId)(component == null ? void 0 : component._id);
+      if (!isPlaceholder2 || compositionContext.previewMode === "editor") {
+        childNode = (0, import_react10.createElement)(
           import_core.PureContextualEditingComponentWrapper,
           {
             key: `${slotName}-${componentIndex}-wrapper`,
-            isPlaceholder,
+            isPlaceholder: isPlaceholder2,
             parentComponent: parent,
             component,
             slotName,
@@ -1047,8 +1093,8 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
-      childNode = (0, import_react9.createElement)(
-        import_canvas_next_rsc_client7.ClientContextualEditingComponentWrapper,
+      childNode = (0, import_react10.createElement)(
+        import_canvas_next_rsc_client8.ClientContextualEditingComponentWrapper,
         {
           key: `${slotName}-${componentIndex}-wrapper`,
           isPlaceholder: false,
@@ -1069,7 +1115,7 @@ var resolveComponents = ({
       childNode = elements;
     }
     if (visibilityRules) {
-      childNode = (0, import_react9.createElement)(
+      childNode = (0, import_react10.createElement)(
         VisibilityRulesWrapper,
         {
           key: `${slotName}-${componentIndex}-visibility`,
@@ -1079,8 +1125,8 @@ var resolveComponents = ({
         childNode
       );
     }
-    return (0, import_react9.createElement)(
-      import_react9.Fragment,
+    return (0, import_react10.createElement)(
+      import_react10.Fragment,
       {
         key: !isRoot ? `${slotName}-${componentIndex}` : void 0
       },
@@ -1091,9 +1137,9 @@ var resolveComponents = ({
 };
 
 // src/components/UniformContext.tsx
-var import_canvas_next_rsc_client8 = require("@uniformdev/canvas-next-rsc-client");
-var import_react10 = require("react");
-var import_react11 = __toESM(require("react"));
+var import_canvas_next_rsc_client9 = require("@uniformdev/canvas-next-rsc-client");
+var import_react11 = require("react");
+var import_react12 = __toESM(require("react"));
 var UniformContext = async ({
   clientContextComponent,
   children
@@ -1102,12 +1148,12 @@ var UniformContext = async ({
   const manifest = await getManifest({
     searchParams: {}
   });
-  const ContextComponent = clientContextComponent || import_canvas_next_rsc_client8.DefaultUniformClientContext;
+  const ContextComponent = clientContextComponent || import_canvas_next_rsc_client9.DefaultUniformClientContext;
   const serverConfig2 = getServerConfig();
   const disableDevTools = ((_a = serverConfig2.context) == null ? void 0 : _a.disableDevTools) || false;
   const defaultConsent = serverConfig2.defaultConsent || false;
   const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, children, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children, /* @__PURE__ */ import_react12.default.createElement(
     ContextComponent,
     {
       manifest,
@@ -1115,16 +1161,16 @@ var UniformContext = async ({
       defaultConsent,
       experimentalQuirkSerialization
     }
-  ), /* @__PURE__ */ import_react11.default.createElement(import_react10.Suspense, { fallback: /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null) }, /* @__PURE__ */ import_react11.default.createElement(import_canvas_next_rsc_client8.UniformScript, null)));
+  ), /* @__PURE__ */ import_react12.default.createElement(import_react11.Suspense, { fallback: /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null) }, /* @__PURE__ */ import_react12.default.createElement(import_canvas_next_rsc_client9.UniformScript, null)));
 };
 
 // src/components/UniformPlayground.tsx
 var import_canvas9 = require("@uniformdev/canvas");
 var import_navigation2 = require("next/navigation");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!isDraftModeEnabled({ searchParams })) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("h1", null, "Playground is only available in draft mode"));
+    return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("h1", null, "Playground is only available in draft mode"));
   }
   const id = searchParams["id"];
   if (!id) {
@@ -1155,7 +1201,7 @@ var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!composition) {
     (0, import_navigation2.notFound)();
   }
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     UniformComposition,
     {
       mode: "server",

package/dist/index.mjs

@@ -679,6 +679,24 @@ var PersonalizeServer = (props) => {
   return createElement(Fragment, void 0, [...components, eventElement]);
 };
 
+// src/components/PersonalizeServerHybrid.tsx
+import { PersonalizeClient as PersonalizeClient2 } from "@uniformdev/canvas-next-rsc-client";
+import { runPersonalization as runPersonalization3 } from "@uniformdev/canvas-next-rsc-shared";
+import React5 from "react";
+var PersonalizeServerHybrid = (props) => {
+  const { indexes } = runPersonalization3(props);
+  return /* @__PURE__ */ React5.createElement(
+    PersonalizeClient2,
+    {
+      component: props.component,
+      count: props.count,
+      slots: props.slots,
+      trackingEventName: props.trackingEventName,
+      indexes
+    }
+  );
+};
+
 // src/components/TestServer.ts
 import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
 import {
@@ -689,9 +707,9 @@ import { createElement as createElement2, Fragment as Fragment2 } from "react";
 
 // src/components/ContextTestTransfer.tsx
 import { ClientContextTestTransfer } from "@uniformdev/canvas-next-rsc-client";
-import React5 from "react";
+import React6 from "react";
 var ContextTestTransfer = ({ event }) => {
-  return /* @__PURE__ */ React5.createElement(ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
+  return /* @__PURE__ */ React6.createElement(ClientContextTestTransfer, { ts: (/* @__PURE__ */ new Date()).valueOf(), event });
 };
 
 // src/components/TestServer.ts
@@ -718,7 +736,7 @@ import {
   evaluateNodeVisibilityParameter
 } from "@uniformdev/canvas";
 import { VisibilityRulesWrapperClient } from "@uniformdev/canvas-next-rsc-client";
-import React6 from "react";
+import React7 from "react";
 var VisibilityRulesWrapper = (props) => {
   const { context, ...rest } = props;
   let isVisible = null;
@@ -729,12 +747,13 @@ var VisibilityRulesWrapper = (props) => {
       parameter: props.parameter
     });
   }
-  return /* @__PURE__ */ React6.createElement(VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
+  return /* @__PURE__ */ React7.createElement(VisibilityRulesWrapperClient, { ...rest, initialIsVisible: isVisible });
 };
 
 // src/components/UniformComposition.ts
 var UniformComposition = async ({
   resolveComponent,
+  resolveEmptyPlaceholder,
   route,
   ...props
 }) => {
@@ -789,7 +808,8 @@ var UniformComposition = async ({
     resolveComponent,
     serverContext,
     compositionContext,
-    mode: props.mode
+    mode: props.mode,
+    resolveEmptyPlaceholder
   });
   let transfer = null;
   if (props.mode === "server") {
@@ -842,7 +862,7 @@ var resolveSystemComponent = ({
   let resolved = null;
   let suspense = void 0;
   if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    resolved = server ? PersonalizeServer : PersonalizeClientWrapper;
+    resolved = server ? resolveServerPersonalizeComponent({ config }) : PersonalizeClientWrapper;
     suspense = server && ((_a = config.ppr) == null ? void 0 : _a.personalizationSuspense);
   }
   if (component.type === CANVAS_TEST_TYPE) {
@@ -854,10 +874,15 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
   resolveComponent,
+  resolveEmptyPlaceholder,
   serverContext,
   compositionContext,
   mode
@@ -877,7 +902,8 @@ var resolveSlots = ({
         resolveComponent,
         serverContext,
         compositionContext,
-        mode
+        mode,
+        resolveEmptyPlaceholder
       });
       if (resolved) {
         slots[slotName] = {
@@ -908,6 +934,7 @@ var resolveComponents = ({
   slotName,
   slotIndex,
   resolveComponent,
+  resolveEmptyPlaceholder,
   compositionContext,
   mode
 }) => {
@@ -933,11 +960,29 @@ var resolveComponents = ({
       component,
       server: isServer
     });
+    const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
+    let resolveResult = null;
+    if (isPlaceholder && resolveEmptyPlaceholder) {
+      const resolvedPlaceholder = resolveEmptyPlaceholder({
+        parentComponent: parent,
+        component,
+        slotName,
+        slotIndex: componentIndex
+      });
+      if (resolvedPlaceholder) {
+        resolveResult = {
+          component: resolvedPlaceholder.component
+        };
+      }
+    }
+    if (!resolveResult) {
+      resolveResult = resolveComponent({ component });
+    }
     const {
       component: regularComponent,
       includeContext,
       suspense: componentSuspense
-    } = resolveComponent({ component }) || {
+    } = resolveResult || {
       component: null
     };
     if (!systemComponent && !regularComponent) {
@@ -949,6 +994,7 @@ var resolveComponents = ({
       resolveComponent,
       serverContext,
       compositionContext,
+      resolveEmptyPlaceholder,
       mode
     });
     const resolvedComponent = systemComponent || regularComponent;
@@ -998,13 +1044,13 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
-      const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
-      if (!isPlaceholder || compositionContext.previewMode === "editor") {
+      const isPlaceholder2 = isComponentPlaceholderId(component == null ? void 0 : component._id);
+      if (!isPlaceholder2 || compositionContext.previewMode === "editor") {
         childNode = createElement3(
           PureContextualEditingComponentWrapper,
           {
             key: `${slotName}-${componentIndex}-wrapper`,
-            isPlaceholder,
+            isPlaceholder: isPlaceholder2,
             parentComponent: parent,
             component,
             slotName,
@@ -1069,7 +1115,7 @@ import {
   UniformScript
 } from "@uniformdev/canvas-next-rsc-client";
 import { Suspense as Suspense2 } from "react";
-import React7 from "react";
+import React8 from "react";
 var UniformContext = async ({
   clientContextComponent,
   children
@@ -1083,7 +1129,7 @@ var UniformContext = async ({
   const disableDevTools = ((_a = serverConfig2.context) == null ? void 0 : _a.disableDevTools) || false;
   const defaultConsent = serverConfig2.defaultConsent || false;
   const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children, /* @__PURE__ */ React8.createElement(
     ContextComponent,
     {
       manifest,
@@ -1091,16 +1137,16 @@ var UniformContext = async ({
       defaultConsent,
       experimentalQuirkSerialization
     }
-  ), /* @__PURE__ */ React7.createElement(Suspense2, { fallback: /* @__PURE__ */ React7.createElement(React7.Fragment, null) }, /* @__PURE__ */ React7.createElement(UniformScript, null)));
+  ), /* @__PURE__ */ React8.createElement(Suspense2, { fallback: /* @__PURE__ */ React8.createElement(React8.Fragment, null) }, /* @__PURE__ */ React8.createElement(UniformScript, null)));
 };
 
 // src/components/UniformPlayground.tsx
 import { CANVAS_DRAFT_STATE as CANVAS_DRAFT_STATE3, CANVAS_EDITOR_STATE as CANVAS_EDITOR_STATE3 } from "@uniformdev/canvas";
 import { notFound as notFound2 } from "next/navigation";
-import React8 from "react";
+import React9 from "react";
 var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!isDraftModeEnabled({ searchParams })) {
-    return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("h1", null, "Playground is only available in draft mode"));
+    return /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("h1", null, "Playground is only available in draft mode"));
   }
   const id = searchParams["id"];
   if (!id) {
@@ -1131,7 +1177,7 @@ var UniformPlayground = async ({ searchParams, ...rest }) => {
   if (!composition) {
     notFound2();
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     UniformComposition,
     {
       mode: "server",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-next-rsc",
-  "version": "19.207.1-alpha.28+369def3ba0",
+  "version": "19.209.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -61,15 +61,15 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/canvas-next-rsc-client": "^19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/canvas-next-rsc-shared": "^19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/canvas-react": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/context": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/project-map": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/redirect": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/richtext": "19.207.1-alpha.28+369def3ba0",
-    "@uniformdev/webhooks": "19.207.1-alpha.28+369def3ba0",
+    "@uniformdev/canvas": "19.209.0",
+    "@uniformdev/canvas-next-rsc-client": "^19.209.0",
+    "@uniformdev/canvas-next-rsc-shared": "^19.209.0",
+    "@uniformdev/canvas-react": "19.209.0",
+    "@uniformdev/context": "19.209.0",
+    "@uniformdev/project-map": "19.209.0",
+    "@uniformdev/redirect": "19.209.0",
+    "@uniformdev/richtext": "19.209.0",
+    "@uniformdev/webhooks": "19.209.0",
     "@vercel/edge-config": "^0.4.0",
     "encoding": "^0.1.13",
     "server-only": "^0.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "369def3ba012b3fc314254d940448b9937e12900"
+  "gitHead": "8e4f9dd23cb5dd695511f73714b3ef055acf1955"
 }