@uniformdev/canvas-next-rsc 19.202.0 → 19.202.1-alpha.9

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

@@ -64,4 +64,4 @@ type ResolveComponentsOptions = {
     mode: UniformCompositionProps['mode'];
 };
 
-export { type ResolveComponentFunction as R, type UniformCompositionProps as U, UniformComposition as a, type ResolveComponentResult as b, resolveComposition as r };
+export { type ResolveComponentFunction as R, type UniformCompositionProps as U, type ResolveComponentResult as a, UniformComposition as b, resolveComposition as r };

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

@@ -64,4 +64,4 @@ type ResolveComponentsOptions = {
     mode: UniformCompositionProps['mode'];
 };
 
-export { type ResolveComponentFunction as R, type UniformCompositionProps as U, UniformComposition as a, type ResolveComponentResult as b, resolveComposition as r };
+export { type ResolveComponentFunction as R, type UniformCompositionProps as U, type ResolveComponentResult as a, UniformComposition as b, resolveComposition as r };

package/dist/component.d.mts

@@ -1,13 +1,13 @@
 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, b as ResolveComponentResult } from './UniformComposition-Dw55RFP6.mjs';
+export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-B8budr-b.mjs';
 import { ComponentInstance } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 import { PureUniformTextProps } from '@uniformdev/canvas-react/core';
 export { ClientContextComponent, createClientUniformContext, useInitUniformContext, useUniformContext } from '@uniformdev/canvas-next-rsc-client';
 
-declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element;
+declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element | null;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
@@ -71,7 +71,7 @@ declare const UniformRichText: React__default.ForwardRefExoticComponent<{
     placeholder?: string | ((parameter: {
         id: string;
     }) => string | undefined);
-} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "placeholder" | "children"> & React__default.RefAttributes<unknown>>;
+} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "children" | "placeholder"> & React__default.RefAttributes<unknown>>;
 
 type UniformRichTextNodeProps = {
     node: RichTextNode;

package/dist/component.d.ts

@@ -1,13 +1,13 @@
 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, b as ResolveComponentResult } from './UniformComposition-Dw55RFP6.js';
+export { R as ResolveComponentFunction, a as ResolveComponentResult } from './UniformComposition-B8budr-b.js';
 import { ComponentInstance } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 import { PureUniformTextProps } from '@uniformdev/canvas-react/core';
 export { ClientContextComponent, createClientUniformContext, useInitUniformContext, useUniformContext } from '@uniformdev/canvas-next-rsc-client';
 
-declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element;
+declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element | null;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
@@ -71,7 +71,7 @@ declare const UniformRichText: React__default.ForwardRefExoticComponent<{
     placeholder?: string | ((parameter: {
         id: string;
     }) => string | undefined);
-} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "placeholder" | "children"> & React__default.RefAttributes<unknown>>;
+} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "children" | "placeholder"> & React__default.RefAttributes<unknown>>;
 
 type UniformRichTextNodeProps = {
     node: RichTextNode;

package/dist/component.js

@@ -43,8 +43,78 @@ module.exports = __toCommonJS(component_exports);
 
 // src/components/DefaultNotImplementedComponent.tsx
 var import_react = __toESM(require("react"));
+var wrapperStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem",
+  borderLeft: "4px solid #e42535",
+  padding: "16px",
+  fontSize: "16px",
+  borderRadius: "0 8px 8px 0",
+  margin: "8px",
+  backgroundColor: "rgba(255, 255, 255, 0.45)",
+  color: "#1d3557"
+};
 var DefaultNotImplementedComponent = ({ component }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", null, "The component of type ", component.type, " not been implemented yet.");
+  var _a, _b;
+  const componentType = component == null ? void 0 : component.type;
+  if (!componentType) {
+    return null;
+  }
+  const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
+  const probableProps = Object.keys((_a = component.parameters) != null ? _a : {});
+  const probableSlots = Object.keys((_b = component.slots) != null ? _b : {});
+  const resolvedParameters = probableProps.map((prop) => {
+    var _a2;
+    const propType = (_a2 = component.parameters) == null ? void 0 : _a2[prop];
+    const propTypeValue = (propType == null ? void 0 : propType.type) === "text" ? "string" : "unknown";
+    return `  ${prop}: ${propTypeValue}`;
+  }).join("\n");
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react.default.createElement("h2", { style: { fontSize: "1.2rem" } }, "Unknown Component"), /* @__PURE__ */ import_react.default.createElement("p", null, "Received request from Uniform to render a component with the public ID: ", /* @__PURE__ */ import_react.default.createElement("code", null, componentType), "."), /* @__PURE__ */ import_react.default.createElement("p", null, /* @__PURE__ */ import_react.default.createElement("code", null, "<UniformComposition />"), " does not have ", /* @__PURE__ */ import_react.default.createElement("code", null, componentType), " mapped to a React component yet."), /* @__PURE__ */ import_react.default.createElement(
+    "ul",
+    {
+      style: {
+        listStyleType: "disc",
+        marginLeft: "1rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("li", null, "Create a React component and register it with Uniform, for example", /* @__PURE__ */ import_react.default.createElement("pre", null, `
+import {
+  ComponentProps,
+  UniformSlot,
+} from '@uniformdev/canvas-next-rsc/component';
+
+type ${proposedFileName}Parameters = {
+${resolvedParameters}
+};
+type ${proposedFileName}Slots = ${probableSlots.map((slot) => `'${slot}'`).join(" | ")};
+type ${proposedFileName}Props = ComponentProps<${proposedFileName}Parameters, ${proposedFileName}Slots>;
+
+export const ${proposedFileName}Component = (props: ${proposedFileName}Props) => {
+  return (
+    <div>
+      <div>
+        ${probableSlots.map((slot) => `<UniformSlot data={props.component} context={props.context} slot={props.slots.${slot}} />`).join("\n")}
+      </div>
+    </div>
+  );
+};
+
+Add this component mapping to your resolveComponent function on UniformComposition.`)),
+    /* @__PURE__ */ import_react.default.createElement("li", null, "Import the component into the file where ", /* @__PURE__ */ import_react.default.createElement("code", null, "<UniformComposition />"), " is defined, for example ", /* @__PURE__ */ import_react.default.createElement("pre", null, `import "../../components/${proposedFileName}.tsx"`))
+  ), " ", /* @__PURE__ */ import_react.default.createElement("p", null, "Need more help?", " ", /* @__PURE__ */ import_react.default.createElement(
+    "a",
+    {
+      href: "https://docs.uniform.app/docs/learn/tutorials/nextjs-app-router",
+      target: "_blank",
+      rel: "noreferrer",
+      style: { textDecoration: "underline" }
+    },
+    "Check out the documentation."
+  )));
 };
 
 // src/components/UniformRichText.tsx
@@ -64,10 +134,16 @@ var AssetRichTextNode = ({ node }) => {
   if (__asset === void 0) {
     return null;
   }
-  if (__asset.type !== "image") {
-    return null;
+  if (__asset.type === "image") {
+    return /* @__PURE__ */ import_react2.default.createElement("figure", null, /* @__PURE__ */ import_react2.default.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ import_react2.default.createElement("figcaption", null, __asset.fields.description.value) : null);
+  }
+  if (__asset.type === "video") {
+    return /* @__PURE__ */ import_react2.default.createElement("video", { src: __asset.fields.url.value, controls: true });
+  }
+  if (__asset.type === "audio") {
+    return /* @__PURE__ */ import_react2.default.createElement("audio", { src: __asset.fields.url.value, controls: true });
   }
-  return /* @__PURE__ */ import_react2.default.createElement("figure", null, /* @__PURE__ */ import_react2.default.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ import_react2.default.createElement("figcaption", null, __asset.fields.description.value) : null);
+  return null;
 };
 
 // src/components/nodes/HeadingRichTextNode.tsx

package/dist/component.mjs

@@ -1,7 +1,77 @@
 // src/components/DefaultNotImplementedComponent.tsx
 import React from "react";
+var wrapperStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem",
+  borderLeft: "4px solid #e42535",
+  padding: "16px",
+  fontSize: "16px",
+  borderRadius: "0 8px 8px 0",
+  margin: "8px",
+  backgroundColor: "rgba(255, 255, 255, 0.45)",
+  color: "#1d3557"
+};
 var DefaultNotImplementedComponent = ({ component }) => {
-  return /* @__PURE__ */ React.createElement("div", null, "The component of type ", component.type, " not been implemented yet.");
+  var _a, _b;
+  const componentType = component == null ? void 0 : component.type;
+  if (!componentType) {
+    return null;
+  }
+  const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
+  const probableProps = Object.keys((_a = component.parameters) != null ? _a : {});
+  const probableSlots = Object.keys((_b = component.slots) != null ? _b : {});
+  const resolvedParameters = probableProps.map((prop) => {
+    var _a2;
+    const propType = (_a2 = component.parameters) == null ? void 0 : _a2[prop];
+    const propTypeValue = (propType == null ? void 0 : propType.type) === "text" ? "string" : "unknown";
+    return `  ${prop}: ${propTypeValue}`;
+  }).join("\n");
+  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React.createElement("h2", { style: { fontSize: "1.2rem" } }, "Unknown Component"), /* @__PURE__ */ React.createElement("p", null, "Received request from Uniform to render a component with the public ID: ", /* @__PURE__ */ React.createElement("code", null, componentType), "."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, "<UniformComposition />"), " does not have ", /* @__PURE__ */ React.createElement("code", null, componentType), " mapped to a React component yet."), /* @__PURE__ */ React.createElement(
+    "ul",
+    {
+      style: {
+        listStyleType: "disc",
+        marginLeft: "1rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem"
+      }
+    },
+    /* @__PURE__ */ React.createElement("li", null, "Create a React component and register it with Uniform, for example", /* @__PURE__ */ React.createElement("pre", null, `
+import {
+  ComponentProps,
+  UniformSlot,
+} from '@uniformdev/canvas-next-rsc/component';
+
+type ${proposedFileName}Parameters = {
+${resolvedParameters}
+};
+type ${proposedFileName}Slots = ${probableSlots.map((slot) => `'${slot}'`).join(" | ")};
+type ${proposedFileName}Props = ComponentProps<${proposedFileName}Parameters, ${proposedFileName}Slots>;
+
+export const ${proposedFileName}Component = (props: ${proposedFileName}Props) => {
+  return (
+    <div>
+      <div>
+        ${probableSlots.map((slot) => `<UniformSlot data={props.component} context={props.context} slot={props.slots.${slot}} />`).join("\n")}
+      </div>
+    </div>
+  );
+};
+
+Add this component mapping to your resolveComponent function on UniformComposition.`)),
+    /* @__PURE__ */ React.createElement("li", null, "Import the component into the file where ", /* @__PURE__ */ React.createElement("code", null, "<UniformComposition />"), " is defined, for example ", /* @__PURE__ */ React.createElement("pre", null, `import "../../components/${proposedFileName}.tsx"`))
+  ), " ", /* @__PURE__ */ React.createElement("p", null, "Need more help?", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "https://docs.uniform.app/docs/learn/tutorials/nextjs-app-router",
+      target: "_blank",
+      rel: "noreferrer",
+      style: { textDecoration: "underline" }
+    },
+    "Check out the documentation."
+  )));
 };
 
 // src/components/UniformRichText.tsx
@@ -25,10 +95,16 @@ var AssetRichTextNode = ({ node }) => {
   if (__asset === void 0) {
     return null;
   }
-  if (__asset.type !== "image") {
-    return null;
+  if (__asset.type === "image") {
+    return /* @__PURE__ */ React2.createElement("figure", null, /* @__PURE__ */ React2.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ React2.createElement("figcaption", null, __asset.fields.description.value) : null);
+  }
+  if (__asset.type === "video") {
+    return /* @__PURE__ */ React2.createElement("video", { src: __asset.fields.url.value, controls: true });
+  }
+  if (__asset.type === "audio") {
+    return /* @__PURE__ */ React2.createElement("audio", { src: __asset.fields.url.value, controls: true });
   }
-  return /* @__PURE__ */ React2.createElement("figure", null, /* @__PURE__ */ React2.createElement("img", { src: __asset.fields.url.value, alt: (_a = __asset.fields.title) == null ? void 0 : _a.value }), ((_b = __asset.fields.description) == null ? void 0 : _b.value) ? /* @__PURE__ */ React2.createElement("figcaption", null, __asset.fields.description.value) : null);
+  return null;
 };
 
 // src/components/nodes/HeadingRichTextNode.tsx

package/dist/handler.js

@@ -84,13 +84,14 @@ var createPreviewGETRouteHandler = (options) => {
       pathToRedirectTo = options.playgroundPath;
     }
     const id = getQueryParam(request, compositionQueryParam.id);
-    const slug = getQueryParam(request, compositionQueryParam.slug);
     const path = getQueryParam(request, compositionQueryParam.path);
+    const slug = getQueryParam(request, compositionQueryParam.slug);
     const locale = getQueryParam(request, compositionQueryParam.locale);
     const disable = getQueryParam(request, "disable");
     const secret = getQueryParam(request, import_canvas.SECRET_QUERY_STRING_PARAM);
     const referer = request.headers.get("referer");
     const isUniformContextualEditing = getQueryParam(request, import_canvas.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true" && (0, import_canvas.isAllowedReferrer)(referer || void 0);
+    const releaseId = getQueryParam(request, "releaseId");
     if (typeof pathToRedirectTo === "undefined") {
       const resolveFullPath = (options == null ? void 0 : options.resolveFullPath) || resolveFullPathDefault;
       pathToRedirectTo = resolveFullPath({ id, slug, path, locale });
@@ -110,9 +111,12 @@ var createPreviewGETRouteHandler = (options) => {
     (0, import_headers.draftMode)().enable();
     const redirectionUrl = new URL(pathToRedirectTo, BASE_URL_EXAMPLE);
     assignRequestQueryToSearchParams(redirectionUrl.searchParams, searchParams);
-    if (isPlayground) {
+    if (isPlayground || (options == null ? void 0 : options.playgroundPath) && pathToRedirectTo === options.playgroundPath) {
       redirectionUrl.searchParams.set("id", searchParams.get("id") || "");
     }
+    if (releaseId) {
+      redirectionUrl.searchParams.set("releaseId", releaseId);
+    }
     if (!isUniformContextualEditing) {
       contextualEditingQueryParams.forEach((param) => {
         redirectionUrl.searchParams.delete(param);
@@ -363,7 +367,7 @@ var isSvixMessage = async (request) => {
     const wh = new import_svix.Webhook(process.env.UNIFORM_WEBHOOK_SECRET);
     try {
       wh.verify(payload, headers);
-    } catch (err) {
+    } catch (e) {
       return {
         looksLikeMessage: true,
         validation: false

package/dist/handler.mjs

@@ -51,13 +51,14 @@ var createPreviewGETRouteHandler = (options) => {
       pathToRedirectTo = options.playgroundPath;
     }
     const id = getQueryParam(request, compositionQueryParam.id);
-    const slug = getQueryParam(request, compositionQueryParam.slug);
     const path = getQueryParam(request, compositionQueryParam.path);
+    const slug = getQueryParam(request, compositionQueryParam.slug);
     const locale = getQueryParam(request, compositionQueryParam.locale);
     const disable = getQueryParam(request, "disable");
     const secret = getQueryParam(request, SECRET_QUERY_STRING_PARAM);
     const referer = request.headers.get("referer");
     const isUniformContextualEditing = getQueryParam(request, IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true" && isAllowedReferrer(referer || void 0);
+    const releaseId = getQueryParam(request, "releaseId");
     if (typeof pathToRedirectTo === "undefined") {
       const resolveFullPath = (options == null ? void 0 : options.resolveFullPath) || resolveFullPathDefault;
       pathToRedirectTo = resolveFullPath({ id, slug, path, locale });
@@ -77,9 +78,12 @@ var createPreviewGETRouteHandler = (options) => {
     draftMode().enable();
     const redirectionUrl = new URL(pathToRedirectTo, BASE_URL_EXAMPLE);
     assignRequestQueryToSearchParams(redirectionUrl.searchParams, searchParams);
-    if (isPlayground) {
+    if (isPlayground || (options == null ? void 0 : options.playgroundPath) && pathToRedirectTo === options.playgroundPath) {
       redirectionUrl.searchParams.set("id", searchParams.get("id") || "");
     }
+    if (releaseId) {
+      redirectionUrl.searchParams.set("releaseId", releaseId);
+    }
     if (!isUniformContextualEditing) {
       contextualEditingQueryParams.forEach((param) => {
         redirectionUrl.searchParams.delete(param);
@@ -330,7 +334,7 @@ var isSvixMessage = async (request) => {
     const wh = new Webhook(process.env.UNIFORM_WEBHOOK_SECRET);
     try {
       wh.verify(payload, headers);
-    } catch (err) {
+    } catch (e) {
       return {
         looksLikeMessage: true,
         validation: false

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-Dw55RFP6.mjs';
-export { a as UniformComposition, r as resolveComposition } from './UniformComposition-Dw55RFP6.mjs';
+import { U as UniformCompositionProps } from './UniformComposition-B8budr-b.mjs';
+export { b as UniformComposition, r as resolveComposition } from './UniformComposition-B8budr-b.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-Dw55RFP6.js';
-export { a as UniformComposition, r as resolveComposition } from './UniformComposition-Dw55RFP6.js';
+import { U as UniformCompositionProps } from './UniformComposition-B8budr-b.js';
+export { b as UniformComposition, r as resolveComposition } from './UniformComposition-B8budr-b.js';
 import { ClientContextComponent } from '@uniformdev/canvas-next-rsc-client';
 
 type GetCanvasClientOptions = {

package/dist/index.esm.js

@@ -441,7 +441,10 @@ import { createElement as createElement3, Fragment as Fragment3, Suspense } from
 import {
   createUniformContext
 } from "@uniformdev/canvas-next-rsc-shared";
-import { UNIFORM_DEFAULT_COOKIE_NAME } from "@uniformdev/context";
+import {
+  UNIFORM_DEFAULT_COOKIE_NAME,
+  UNIFORM_DEFAULT_QUIRK_COOKIE_NAME
+} from "@uniformdev/context";
 import { cookies } from "next/headers";
 var createServerUniformContext = async (options) => {
   const manifest = await getManifest(options);
@@ -452,10 +455,13 @@ var createServerUniformContext = async (options) => {
   return context;
 };
 var createServerUniformContextFromManifest = async (options) => {
-  var _a;
+  var _a, _b, _c;
+  const quirksEnabled = (_a = getServerConfig().experimental) == null ? void 0 : _a.quirkSerialization;
   const context = createUniformContext({
     ...options || {},
-    serverCookieValue: (_a = cookies().get(UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _a.value
+    serverCookieValue: (_b = cookies().get(UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _b.value,
+    experimental_quirksEnabled: quirksEnabled,
+    quirkCookieValue: quirksEnabled ? (_c = cookies().get(UNIFORM_DEFAULT_QUIRK_COOKIE_NAME)) == null ? void 0 : _c.value : void 0
   });
   return context;
 };
@@ -533,12 +539,17 @@ var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions)
   let result;
   for (let i = 0; i < states.length; i++) {
     const state = states[i];
+    const releaseId = determineReleaseId({
+      searchParams,
+      state
+    });
     try {
       result = await retrieveRouteByPath({
         path: value,
         state,
         searchParams,
-        fetchOptions
+        fetchOptions,
+        releaseId
       });
     } catch (e) {
       console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
@@ -555,7 +566,8 @@ var retrieveRouteByPath = async ({
   path,
   state,
   searchParams,
-  fetchOptions
+  fetchOptions,
+  releaseId
 }) => {
   var _a;
   const client = getDefaultRouteClient({
@@ -580,7 +592,8 @@ var retrieveRouteByPath = async ({
     state,
     dataSourceVariant: getDataSourceVariantFromRouteGetParams(fetchOptions != null ? fetchOptions : {}, state),
     withComponentIDs: true,
-    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing)
+    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing),
+    releaseId
   });
 };
 var resolveRedirectHref = (resolveResult, path) => {
@@ -604,6 +617,16 @@ var determineState = ({ searchParams }) => {
   }
   return states;
 };
+var determineReleaseId = ({
+  searchParams,
+  state
+}) => {
+  const draftMode2 = isDraftModeEnabled({ searchParams });
+  if (!draftMode2 || state === CANVAS_PUBLISHED_STATE) {
+    return void 0;
+  }
+  return searchParams == null ? void 0 : searchParams.releaseId;
+};
 
 // src/components/ContextUpdateTrigger.tsx
 import { ClientContextUpdate } from "@uniformdev/canvas-next-rsc-client";
@@ -656,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 {
@@ -666,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
@@ -695,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;
@@ -706,7 +747,7 @@ 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
@@ -819,7 +860,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) {
@@ -831,6 +872,10 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
@@ -1046,12 +1091,12 @@ 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
 }) => {
-  var _a;
+  var _a, _b;
   const manifest = await getManifest({
     searchParams: {}
   });
@@ -1059,23 +1104,25 @@ var UniformContext = async ({
   const serverConfig2 = getServerConfig();
   const disableDevTools = ((_a = serverConfig2.context) == null ? void 0 : _a.disableDevTools) || false;
   const defaultConsent = serverConfig2.defaultConsent || false;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children, /* @__PURE__ */ React7.createElement(
+  const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children, /* @__PURE__ */ React8.createElement(
     ContextComponent,
     {
       manifest,
       disableDevTools,
-      defaultConsent
+      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) {
@@ -1106,7 +1153,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");
@@ -492,10 +492,13 @@ var createServerUniformContext = async (options) => {
   return context;
 };
 var createServerUniformContextFromManifest = async (options) => {
-  var _a;
+  var _a, _b, _c;
+  const quirksEnabled = (_a = getServerConfig().experimental) == null ? void 0 : _a.quirkSerialization;
   const context = (0, import_canvas_next_rsc_shared.createUniformContext)({
     ...options || {},
-    serverCookieValue: (_a = (0, import_headers2.cookies)().get(import_context.UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _a.value
+    serverCookieValue: (_b = (0, import_headers2.cookies)().get(import_context.UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _b.value,
+    experimental_quirksEnabled: quirksEnabled,
+    quirkCookieValue: quirksEnabled ? (_c = (0, import_headers2.cookies)().get(import_context.UNIFORM_DEFAULT_QUIRK_COOKIE_NAME)) == null ? void 0 : _c.value : void 0
   });
   return context;
 };
@@ -568,12 +571,17 @@ var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions)
   let result;
   for (let i = 0; i < states.length; i++) {
     const state = states[i];
+    const releaseId = determineReleaseId({
+      searchParams,
+      state
+    });
     try {
       result = await retrieveRouteByPath({
         path: value,
         state,
         searchParams,
-        fetchOptions
+        fetchOptions,
+        releaseId
       });
     } catch (e) {
       console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
@@ -590,7 +598,8 @@ var retrieveRouteByPath = async ({
   path,
   state,
   searchParams,
-  fetchOptions
+  fetchOptions,
+  releaseId
 }) => {
   var _a;
   const client = getDefaultRouteClient({
@@ -615,7 +624,8 @@ var retrieveRouteByPath = async ({
     state,
     dataSourceVariant: (0, import_canvas4.getDataSourceVariantFromRouteGetParams)(fetchOptions != null ? fetchOptions : {}, state),
     withComponentIDs: true,
-    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing)
+    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing),
+    releaseId
   });
 };
 var resolveRedirectHref = (resolveResult, path) => {
@@ -639,6 +649,16 @@ var determineState = ({ searchParams }) => {
   }
   return states;
 };
+var determineReleaseId = ({
+  searchParams,
+  state
+}) => {
+  const draftMode2 = isDraftModeEnabled({ searchParams });
+  if (!draftMode2 || state === import_canvas4.CANVAS_PUBLISHED_STATE) {
+    return void 0;
+  }
+  return searchParams == null ? void 0 : searchParams.releaseId;
+};
 
 // src/components/ContextUpdateTrigger.tsx
 var import_canvas_next_rsc_client2 = require("@uniformdev/canvas-next-rsc-client");
@@ -691,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
@@ -710,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;
@@ -736,7 +774,7 @@ 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
@@ -755,7 +793,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)();
   }
@@ -802,7 +840,7 @@ var UniformComposition = async ({
   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,
@@ -822,11 +860,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,
@@ -849,11 +887,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 {
@@ -861,6 +899,10 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
@@ -978,20 +1020,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
@@ -1007,7 +1049,7 @@ var resolveComponents = ({
       }
       const isPlaceholder = (0, import_canvas8.isComponentPlaceholderId)(component == null ? void 0 : component._id);
       if (!isPlaceholder || compositionContext.previewMode === "editor") {
-        childNode = (0, import_react9.createElement)(
+        childNode = (0, import_react10.createElement)(
           import_core.PureContextualEditingComponentWrapper,
           {
             key: `${slotName}-${componentIndex}-wrapper`,
@@ -1027,8 +1069,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,
@@ -1049,7 +1091,7 @@ var resolveComponents = ({
       childNode = elements;
     }
     if (visibilityRules) {
-      childNode = (0, import_react9.createElement)(
+      childNode = (0, import_react10.createElement)(
         VisibilityRulesWrapper,
         {
           key: `${slotName}-${componentIndex}-visibility`,
@@ -1059,8 +1101,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
       },
@@ -1071,38 +1113,40 @@ 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
 }) => {
-  var _a;
+  var _a, _b;
   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;
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, children, /* @__PURE__ */ import_react11.default.createElement(
+  const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children, /* @__PURE__ */ import_react12.default.createElement(
     ContextComponent,
     {
       manifest,
       disableDevTools,
-      defaultConsent
+      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) {
@@ -1133,7 +1177,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

@@ -441,7 +441,10 @@ import { createElement as createElement3, Fragment as Fragment3, Suspense } from
 import {
   createUniformContext
 } from "@uniformdev/canvas-next-rsc-shared";
-import { UNIFORM_DEFAULT_COOKIE_NAME } from "@uniformdev/context";
+import {
+  UNIFORM_DEFAULT_COOKIE_NAME,
+  UNIFORM_DEFAULT_QUIRK_COOKIE_NAME
+} from "@uniformdev/context";
 import { cookies } from "next/headers";
 var createServerUniformContext = async (options) => {
   const manifest = await getManifest(options);
@@ -452,10 +455,13 @@ var createServerUniformContext = async (options) => {
   return context;
 };
 var createServerUniformContextFromManifest = async (options) => {
-  var _a;
+  var _a, _b, _c;
+  const quirksEnabled = (_a = getServerConfig().experimental) == null ? void 0 : _a.quirkSerialization;
   const context = createUniformContext({
     ...options || {},
-    serverCookieValue: (_a = cookies().get(UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _a.value
+    serverCookieValue: (_b = cookies().get(UNIFORM_DEFAULT_COOKIE_NAME)) == null ? void 0 : _b.value,
+    experimental_quirksEnabled: quirksEnabled,
+    quirkCookieValue: quirksEnabled ? (_c = cookies().get(UNIFORM_DEFAULT_QUIRK_COOKIE_NAME)) == null ? void 0 : _c.value : void 0
   });
   return context;
 };
@@ -533,12 +539,17 @@ var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions)
   let result;
   for (let i = 0; i < states.length; i++) {
     const state = states[i];
+    const releaseId = determineReleaseId({
+      searchParams,
+      state
+    });
     try {
       result = await retrieveRouteByPath({
         path: value,
         state,
         searchParams,
-        fetchOptions
+        fetchOptions,
+        releaseId
       });
     } catch (e) {
       console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
@@ -555,7 +566,8 @@ var retrieveRouteByPath = async ({
   path,
   state,
   searchParams,
-  fetchOptions
+  fetchOptions,
+  releaseId
 }) => {
   var _a;
   const client = getDefaultRouteClient({
@@ -580,7 +592,8 @@ var retrieveRouteByPath = async ({
     state,
     dataSourceVariant: getDataSourceVariantFromRouteGetParams(fetchOptions != null ? fetchOptions : {}, state),
     withComponentIDs: true,
-    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing)
+    withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing),
+    releaseId
   });
 };
 var resolveRedirectHref = (resolveResult, path) => {
@@ -604,6 +617,16 @@ var determineState = ({ searchParams }) => {
   }
   return states;
 };
+var determineReleaseId = ({
+  searchParams,
+  state
+}) => {
+  const draftMode2 = isDraftModeEnabled({ searchParams });
+  if (!draftMode2 || state === CANVAS_PUBLISHED_STATE) {
+    return void 0;
+  }
+  return searchParams == null ? void 0 : searchParams.releaseId;
+};
 
 // src/components/ContextUpdateTrigger.tsx
 import { ClientContextUpdate } from "@uniformdev/canvas-next-rsc-client";
@@ -656,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 {
@@ -666,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
@@ -695,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;
@@ -706,7 +747,7 @@ 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
@@ -819,7 +860,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) {
@@ -831,6 +872,10 @@ var resolveSystemComponent = ({
     suspense
   };
 };
+var resolveServerPersonalizeComponent = ({ config }) => {
+  var _a;
+  return ((_a = config.evaluation) == null ? void 0 : _a.personalization) === "hybrid" ? PersonalizeServerHybrid : PersonalizeServer;
+};
 var resolveSlots = ({
   component,
   root,
@@ -1046,12 +1091,12 @@ 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
 }) => {
-  var _a;
+  var _a, _b;
   const manifest = await getManifest({
     searchParams: {}
   });
@@ -1059,23 +1104,25 @@ var UniformContext = async ({
   const serverConfig2 = getServerConfig();
   const disableDevTools = ((_a = serverConfig2.context) == null ? void 0 : _a.disableDevTools) || false;
   const defaultConsent = serverConfig2.defaultConsent || false;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children, /* @__PURE__ */ React7.createElement(
+  const experimentalQuirkSerialization = ((_b = serverConfig2.experimental) == null ? void 0 : _b.quirkSerialization) || false;
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children, /* @__PURE__ */ React8.createElement(
     ContextComponent,
     {
       manifest,
       disableDevTools,
-      defaultConsent
+      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) {
@@ -1106,7 +1153,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.202.0",
+  "version": "19.202.1-alpha.9+63c059770a",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -13,9 +13,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.esm.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.esm.js"
     },
     "./handler": {
       "require": "./dist/handler.js",
@@ -23,14 +23,14 @@
       "types": "./dist/handler.d.ts"
     },
     "./config": {
+      "types": "./dist/config.d.ts",
       "require": "./dist/config.js",
-      "import": "./dist/config.mjs",
-      "types": "./dist/config.d.ts"
+      "import": "./dist/config.mjs"
     },
     "./component": {
+      "types": "./dist/component.d.ts",
       "require": "./dist/component.js",
-      "import": "./dist/component.mjs",
-      "types": "./dist/component.d.ts"
+      "import": "./dist/component.mjs"
     }
   },
   "typesVersions": {
@@ -53,23 +53,23 @@
     "/dist"
   ],
   "devDependencies": {
-    "@types/node": "20.10.6",
-    "@types/react": "18.3.3",
+    "@types/node": "22.7.8",
+    "@types/react": "18.3.11",
     "eslint": "9.9.0",
     "next": "^14.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.202.0",
-    "@uniformdev/canvas-next-rsc-client": "^19.202.0",
-    "@uniformdev/canvas-next-rsc-shared": "^19.202.0",
-    "@uniformdev/canvas-react": "19.202.0",
-    "@uniformdev/context": "19.202.0",
-    "@uniformdev/project-map": "19.202.0",
-    "@uniformdev/redirect": "19.202.0",
-    "@uniformdev/richtext": "19.202.0",
-    "@uniformdev/webhooks": "19.202.0",
+    "@uniformdev/canvas": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/canvas-next-rsc-client": "^19.202.1-alpha.9+63c059770a",
+    "@uniformdev/canvas-next-rsc-shared": "^19.202.1-alpha.9+63c059770a",
+    "@uniformdev/canvas-react": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/context": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/project-map": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/redirect": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/richtext": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/webhooks": "19.202.1-alpha.9+63c059770a",
     "@vercel/edge-config": "^0.4.0",
     "encoding": "^0.1.13",
     "server-only": "^0.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "133a9ea4d2d3794e2d05ad8277f6bb3803d109d7"
+  "gitHead": "63c059770a54fc063a12af0f74eba059143e8074"
 }