@uniformdev/canvas-next-rsc-client 19.55.2-alpha.48 → 19.55.2-alpha.54

package/dist/index.d.mts

@@ -1,13 +1,22 @@
-import { AppDirectoryContextState, ComponentProps, PersonalizeProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
-import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PureContextualEditingComponentWrapperProps } from '@uniformdev/canvas-react/core';
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import { AppDirectoryContextState, PersonalizeProps, ComponentProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
+
+declare const ClientContextualEditingComponentWrapper: (props: PropsWithChildren<PureContextualEditingComponentWrapperProps>) => react_jsx_runtime.JSX.Element;
+
+declare const ClientContextUpdate: () => react_jsx_runtime.JSX.Element;
 
 declare const ContextUpdateTransferClient: ({ update, ts, }: {
     update: Partial<AppDirectoryContextState>;
     ts: number;
 }) => null;
 
-declare const PersonalizeClient: (props: ComponentProps<PersonalizeProps>) => react.FunctionComponentElement<{
+type PersonalizeClientProps = PersonalizeProps & {
+    indexes: number[];
+};
+declare const PersonalizeClient: (props: ComponentProps<PersonalizeClientProps>) => react.FunctionComponentElement<{
     children?: react.ReactNode;
 }>;
 
@@ -28,4 +37,4 @@ declare const useUniformContext: () => {
     context: AppDirectoryContext | undefined;
 };
 
-export { ContextUpdateTransferClient, PersonalizeClient, TestClient, UniformScript, useInitUniformContext, useUniformContext };
+export { ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, PersonalizeClient, PersonalizeClientProps, TestClient, UniformScript, useInitUniformContext, useUniformContext };

package/dist/index.d.ts

@@ -1,13 +1,22 @@
-import { AppDirectoryContextState, ComponentProps, PersonalizeProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
-import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PureContextualEditingComponentWrapperProps } from '@uniformdev/canvas-react/core';
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import { AppDirectoryContextState, PersonalizeProps, ComponentProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
+
+declare const ClientContextualEditingComponentWrapper: (props: PropsWithChildren<PureContextualEditingComponentWrapperProps>) => react_jsx_runtime.JSX.Element;
+
+declare const ClientContextUpdate: () => react_jsx_runtime.JSX.Element;
 
 declare const ContextUpdateTransferClient: ({ update, ts, }: {
     update: Partial<AppDirectoryContextState>;
     ts: number;
 }) => null;
 
-declare const PersonalizeClient: (props: ComponentProps<PersonalizeProps>) => react.FunctionComponentElement<{
+type PersonalizeClientProps = PersonalizeProps & {
+    indexes: number[];
+};
+declare const PersonalizeClient: (props: ComponentProps<PersonalizeClientProps>) => react.FunctionComponentElement<{
     children?: react.ReactNode;
 }>;
 
@@ -28,4 +37,4 @@ declare const useUniformContext: () => {
     context: AppDirectoryContext | undefined;
 };
 
-export { ContextUpdateTransferClient, PersonalizeClient, TestClient, UniformScript, useInitUniformContext, useUniformContext };
+export { ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, PersonalizeClient, PersonalizeClientProps, TestClient, UniformScript, useInitUniformContext, useUniformContext };

package/dist/index.esm.js

@@ -1,7 +1,31 @@
 "use client";
 
-// src/components/ContextUpdateTransferClient.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+// src/components/ClientContextualEditingComponentWrapper.tsx
+import { IN_CONTEXT_EDITOR_QUERY_STRING_PARAM } from "@uniformdev/canvas";
+import {
+  PureContextualEditingComponentWrapper
+} from "@uniformdev/canvas-react/core";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var ClientContextualEditingComponentWrapper = (props) => {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ClientContextualEditingComponentWrapperInner, { ...props }) });
+};
+var ClientContextualEditingComponentWrapperInner = ({
+  children,
+  ...rest
+}) => {
+  const searchParams = useSearchParams();
+  const inContextMode = searchParams.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  if (!inContextMode) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(PureContextualEditingComponentWrapper, { ...rest, children });
+};
+
+// src/components/ClientContextUpdate.tsx
+import { useParams, useSearchParams as useSearchParams2 } from "next/navigation";
+import { Suspense as Suspense2, useEffect as useEffect2 } from "react";
 
 // src/hooks/useUniformContext.ts
 import { useEffect, useState } from "react";
@@ -23,14 +47,37 @@ var useUniformContext = () => {
   };
 };
 
+// src/components/ClientContextUpdate.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var ClientContextUpdate = () => {
+  return /* @__PURE__ */ jsx2(Suspense2, { children: /* @__PURE__ */ jsx2(ClientContextUpdateInner, {}) });
+};
+var ClientContextUpdateInner = () => {
+  const params = useParams();
+  const searchParams = useSearchParams2();
+  const { context } = useUniformContext();
+  useEffect2(() => {
+    if (!context || typeof window === "undefined") {
+      return;
+    }
+    const convertedSearchParams = Object.fromEntries(searchParams.entries());
+    context.update({
+      params,
+      searchParams: convertedSearchParams
+    });
+  }, [params, searchParams, context]);
+  return /* @__PURE__ */ jsx2(Fragment2, {});
+};
+
 // src/components/ContextUpdateTransferClient.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
 var ContextUpdateTransferClient = ({
   update,
   ts
 }) => {
   const { context } = useUniformContext();
   const [lastLogged, setLastLogged] = useState2(void 0);
-  useEffect2(() => {
+  useEffect3(() => {
     const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
     const hasContext = typeof context !== "undefined";
     if (shouldBeLogged && hasContext) {
@@ -44,59 +91,62 @@ var ContextUpdateTransferClient = ({
 // src/components/PersonalizeClient.ts
 import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
 import { runPersonalization } from "@uniformdev/canvas-next-rsc-shared";
-import { createElement, Fragment, useMemo } from "react";
+import { createElement, Fragment as Fragment3, useEffect as useEffect4, useState as useState3 } from "react";
 var PersonalizeClient = (props) => {
   const { slots } = props;
   const { context } = useUniformContext();
-  const indexes = useMemo(() => {
+  const [indexesToShow, setIndexesToShow] = useState3(props.indexes);
+  useEffect4(() => {
     const result = runPersonalization({
       ...props,
       contextInstance: context
     });
-    return result.indexes;
+    setIndexesToShow(result.indexes);
   }, [props, context]);
-  const slotsToShow = indexes.map((key) => {
+  const slotsToShow = indexesToShow.map((key) => {
     var _a;
     return (_a = slots[CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
   });
-  return createElement(Fragment, void 0, slotsToShow);
+  return createElement(Fragment3, void 0, slotsToShow);
 };
 
 // src/components/TestClient.ts
 import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
 import { runTest } from "@uniformdev/canvas-next-rsc-shared";
-import { createElement as createElement2, Fragment as Fragment2, useMemo as useMemo2 } from "react";
+import { createElement as createElement2, Fragment as Fragment4, useEffect as useEffect5, useState as useState4 } from "react";
 var TestClient = (props) => {
   var _a;
   const { slots } = props;
   const { context } = useUniformContext();
-  const index = useMemo2(() => {
+  const [index, setIndex] = useState4(0);
+  useEffect5(() => {
     const result = runTest({
       ...props,
       contextInstance: context
     });
-    return result.index;
+    setIndex(result.index);
   }, [props, context]);
   if (typeof index !== "number") {
     return null;
   }
-  return createElement2(Fragment2, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+  return createElement2(Fragment4, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
 };
 
 // src/components/UniformScriptClient.tsx
 import {
   createCanvasChannel,
-  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
+  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as IN_CONTEXT_EDITOR_QUERY_STRING_PARAM2,
   isAllowedReferrer
 } from "@uniformdev/canvas";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment3, jsx } from "react/jsx-runtime";
+import { useRouter, useSearchParams as useSearchParams3 } from "next/navigation";
+import { useEffect as useEffect6, useMemo, useRef } from "react";
+import { Fragment as Fragment5, jsx as jsx3 } from "react/jsx-runtime";
 var UniformScript = () => {
   const router = useRouter();
-  const params = useSearchParams();
-  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
-  const channel = useMemo3(() => {
+  const params = useSearchParams3();
+  const needsToRefreshRef = useRef(false);
+  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM2) === "true";
+  const channel = useMemo(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
@@ -107,18 +157,24 @@ var UniformScript = () => {
     });
     return instance;
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     if (!channel) {
       return;
     }
     const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
-      router.refresh();
+      const el = document.activeElement;
+      const isActiveElementEditable = el == null ? void 0 : el.isContentEditable;
+      if (!isActiveElementEditable) {
+        router.refresh();
+      } else {
+        needsToRefreshRef.current = true;
+      }
     });
     return () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -139,14 +195,26 @@ var UniformScript = () => {
       existing.remove();
     }
   }, [enabled]);
-  return /* @__PURE__ */ jsx(Fragment3, {});
+  useEffect6(() => {
+    const handleBlurChange = () => {
+      if (needsToRefreshRef.current) {
+        router.refresh();
+        needsToRefreshRef.current = false;
+      }
+    };
+    document.addEventListener("blur", handleBlurChange, true);
+    return () => {
+      document.removeEventListener("focus", handleBlurChange, true);
+    };
+  }, [router]);
+  return /* @__PURE__ */ jsx3(Fragment5, {});
 };
 
 // src/hooks/useInitUniformContext.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState5 } from "react";
 var useInitUniformContext = (callback) => {
-  const [called, setCalled] = useState3(false);
-  useEffect4(() => {
+  const [called, setCalled] = useState5(false);
+  useEffect7(() => {
     if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -157,6 +225,8 @@ var useInitUniformContext = (callback) => {
   }, [called, callback]);
 };
 export {
+  ClientContextUpdate,
+  ClientContextualEditingComponentWrapper,
   ContextUpdateTransferClient,
   PersonalizeClient,
   TestClient,

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ClientContextUpdate: () => ClientContextUpdate,
+  ClientContextualEditingComponentWrapper: () => ClientContextualEditingComponentWrapper,
   ContextUpdateTransferClient: () => ContextUpdateTransferClient,
   PersonalizeClient: () => PersonalizeClient,
   TestClient: () => TestClient,
@@ -30,16 +32,38 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/ContextUpdateTransferClient.tsx
-var import_react2 = require("react");
+// src/components/ClientContextualEditingComponentWrapper.tsx
+var import_canvas = require("@uniformdev/canvas");
+var import_core = require("@uniformdev/canvas-react/core");
+var import_navigation = require("next/navigation");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ClientContextualEditingComponentWrapper = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClientContextualEditingComponentWrapperInner, { ...props }) });
+};
+var ClientContextualEditingComponentWrapperInner = ({
+  children,
+  ...rest
+}) => {
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const inContextMode = searchParams.get(import_canvas.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  if (!inContextMode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.PureContextualEditingComponentWrapper, { ...rest, children });
+};
+
+// src/components/ClientContextUpdate.tsx
+var import_navigation2 = require("next/navigation");
+var import_react3 = require("react");
 
 // src/hooks/useUniformContext.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var useUniformContext = () => {
-  const [context, setContext] = (0, import_react.useState)(
+  const [context, setContext] = (0, import_react2.useState)(
     typeof window !== "undefined" ? window.__UNIFORM_CONTEXT__ : void 0
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const listener = () => {
       setContext(window.__UNIFORM_CONTEXT__);
     };
@@ -53,14 +77,37 @@ var useUniformContext = () => {
   };
 };
 
+// src/components/ClientContextUpdate.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ClientContextUpdate = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClientContextUpdateInner, {}) });
+};
+var ClientContextUpdateInner = () => {
+  const params = (0, import_navigation2.useParams)();
+  const searchParams = (0, import_navigation2.useSearchParams)();
+  const { context } = useUniformContext();
+  (0, import_react3.useEffect)(() => {
+    if (!context || typeof window === "undefined") {
+      return;
+    }
+    const convertedSearchParams = Object.fromEntries(searchParams.entries());
+    context.update({
+      params,
+      searchParams: convertedSearchParams
+    });
+  }, [params, searchParams, context]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+};
+
 // src/components/ContextUpdateTransferClient.tsx
+var import_react4 = require("react");
 var ContextUpdateTransferClient = ({
   update,
   ts
 }) => {
   const { context } = useUniformContext();
-  const [lastLogged, setLastLogged] = (0, import_react2.useState)(void 0);
-  (0, import_react2.useEffect)(() => {
+  const [lastLogged, setLastLogged] = (0, import_react4.useState)(void 0);
+  (0, import_react4.useEffect)(() => {
     const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
     const hasContext = typeof context !== "undefined";
     if (shouldBeLogged && hasContext) {
@@ -72,86 +119,95 @@ var ContextUpdateTransferClient = ({
 };
 
 // src/components/PersonalizeClient.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared = require("@uniformdev/canvas-next-rsc-shared");
-var import_react3 = require("react");
+var import_react5 = require("react");
 var PersonalizeClient = (props) => {
   const { slots } = props;
   const { context } = useUniformContext();
-  const indexes = (0, import_react3.useMemo)(() => {
+  const [indexesToShow, setIndexesToShow] = (0, import_react5.useState)(props.indexes);
+  (0, import_react5.useEffect)(() => {
     const result = (0, import_canvas_next_rsc_shared.runPersonalization)({
       ...props,
       contextInstance: context
     });
-    return result.indexes;
+    setIndexesToShow(result.indexes);
   }, [props, context]);
-  const slotsToShow = indexes.map((key) => {
+  const slotsToShow = indexesToShow.map((key) => {
     var _a;
-    return (_a = slots[import_canvas.CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
+    return (_a = slots[import_canvas2.CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
   });
-  return (0, import_react3.createElement)(import_react3.Fragment, void 0, slotsToShow);
+  return (0, import_react5.createElement)(import_react5.Fragment, void 0, slotsToShow);
 };
 
 // src/components/TestClient.ts
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared2 = require("@uniformdev/canvas-next-rsc-shared");
-var import_react4 = require("react");
+var import_react6 = require("react");
 var TestClient = (props) => {
   var _a;
   const { slots } = props;
   const { context } = useUniformContext();
-  const index = (0, import_react4.useMemo)(() => {
+  const [index, setIndex] = (0, import_react6.useState)(0);
+  (0, import_react6.useEffect)(() => {
     const result = (0, import_canvas_next_rsc_shared2.runTest)({
       ...props,
       contextInstance: context
     });
-    return result.index;
+    setIndex(result.index);
   }, [props, context]);
   if (typeof index !== "number") {
     return null;
   }
-  return (0, import_react4.createElement)(import_react4.Fragment, void 0, (_a = slots == null ? void 0 : slots[import_canvas2.CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+  return (0, import_react6.createElement)(import_react6.Fragment, void 0, (_a = slots == null ? void 0 : slots[import_canvas3.CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
 };
 
 // src/components/UniformScriptClient.tsx
-var import_canvas3 = require("@uniformdev/canvas");
-var import_navigation = require("next/navigation");
-var import_react5 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_canvas4 = require("@uniformdev/canvas");
+var import_navigation3 = require("next/navigation");
+var import_react7 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var UniformScript = () => {
-  const router = (0, import_navigation.useRouter)();
-  const params = (0, import_navigation.useSearchParams)();
-  const enabled = params.get(import_canvas3.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
-  const channel = (0, import_react5.useMemo)(() => {
+  const router = (0, import_navigation3.useRouter)();
+  const params = (0, import_navigation3.useSearchParams)();
+  const needsToRefreshRef = (0, import_react7.useRef)(false);
+  const enabled = params.get(import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  const channel = (0, import_react7.useMemo)(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
     }
-    const instance = (0, import_canvas3.createCanvasChannel)({
+    const instance = (0, import_canvas4.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return instance;
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!channel) {
       return;
     }
     const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
-      router.refresh();
+      const el = document.activeElement;
+      const isActiveElementEditable = el == null ? void 0 : el.isContentEditable;
+      if (!isActiveElementEditable) {
+        router.refresh();
+      } else {
+        needsToRefreshRef.current = true;
+      }
     });
     return () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
     const existing = document.getElementById("uniform-script");
     if (enabled) {
       if (!existing) {
-        const textHost = (0, import_canvas3.isAllowedReferrer)(window.document.referrer) ? window.document.referrer : "https://uniform.app/";
+        const textHost = (0, import_canvas4.isAllowedReferrer)(window.document.referrer) ? window.document.referrer : "https://uniform.app/";
         const bundleHost = new URL(textHost);
         bundleHost.pathname = "/files/canvas-in-context-embed/index.js";
         const script = document.createElement("script");
@@ -165,14 +221,26 @@ var UniformScript = () => {
       existing.remove();
     }
   }, [enabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  (0, import_react7.useEffect)(() => {
+    const handleBlurChange = () => {
+      if (needsToRefreshRef.current) {
+        router.refresh();
+        needsToRefreshRef.current = false;
+      }
+    };
+    document.addEventListener("blur", handleBlurChange, true);
+    return () => {
+      document.removeEventListener("focus", handleBlurChange, true);
+    };
+  }, [router]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
 };
 
 // src/hooks/useInitUniformContext.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var useInitUniformContext = (callback) => {
-  const [called, setCalled] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [called, setCalled] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -184,6 +252,8 @@ var useInitUniformContext = (callback) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ClientContextUpdate,
+  ClientContextualEditingComponentWrapper,
   ContextUpdateTransferClient,
   PersonalizeClient,
   TestClient,

package/dist/index.mjs

@@ -1,7 +1,31 @@
 "use client";
 
-// src/components/ContextUpdateTransferClient.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+// src/components/ClientContextualEditingComponentWrapper.tsx
+import { IN_CONTEXT_EDITOR_QUERY_STRING_PARAM } from "@uniformdev/canvas";
+import {
+  PureContextualEditingComponentWrapper
+} from "@uniformdev/canvas-react/core";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var ClientContextualEditingComponentWrapper = (props) => {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ClientContextualEditingComponentWrapperInner, { ...props }) });
+};
+var ClientContextualEditingComponentWrapperInner = ({
+  children,
+  ...rest
+}) => {
+  const searchParams = useSearchParams();
+  const inContextMode = searchParams.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  if (!inContextMode) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(PureContextualEditingComponentWrapper, { ...rest, children });
+};
+
+// src/components/ClientContextUpdate.tsx
+import { useParams, useSearchParams as useSearchParams2 } from "next/navigation";
+import { Suspense as Suspense2, useEffect as useEffect2 } from "react";
 
 // src/hooks/useUniformContext.ts
 import { useEffect, useState } from "react";
@@ -23,14 +47,37 @@ var useUniformContext = () => {
   };
 };
 
+// src/components/ClientContextUpdate.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var ClientContextUpdate = () => {
+  return /* @__PURE__ */ jsx2(Suspense2, { children: /* @__PURE__ */ jsx2(ClientContextUpdateInner, {}) });
+};
+var ClientContextUpdateInner = () => {
+  const params = useParams();
+  const searchParams = useSearchParams2();
+  const { context } = useUniformContext();
+  useEffect2(() => {
+    if (!context || typeof window === "undefined") {
+      return;
+    }
+    const convertedSearchParams = Object.fromEntries(searchParams.entries());
+    context.update({
+      params,
+      searchParams: convertedSearchParams
+    });
+  }, [params, searchParams, context]);
+  return /* @__PURE__ */ jsx2(Fragment2, {});
+};
+
 // src/components/ContextUpdateTransferClient.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
 var ContextUpdateTransferClient = ({
   update,
   ts
 }) => {
   const { context } = useUniformContext();
   const [lastLogged, setLastLogged] = useState2(void 0);
-  useEffect2(() => {
+  useEffect3(() => {
     const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
     const hasContext = typeof context !== "undefined";
     if (shouldBeLogged && hasContext) {
@@ -44,59 +91,62 @@ var ContextUpdateTransferClient = ({
 // src/components/PersonalizeClient.ts
 import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
 import { runPersonalization } from "@uniformdev/canvas-next-rsc-shared";
-import { createElement, Fragment, useMemo } from "react";
+import { createElement, Fragment as Fragment3, useEffect as useEffect4, useState as useState3 } from "react";
 var PersonalizeClient = (props) => {
   const { slots } = props;
   const { context } = useUniformContext();
-  const indexes = useMemo(() => {
+  const [indexesToShow, setIndexesToShow] = useState3(props.indexes);
+  useEffect4(() => {
     const result = runPersonalization({
       ...props,
       contextInstance: context
     });
-    return result.indexes;
+    setIndexesToShow(result.indexes);
   }, [props, context]);
-  const slotsToShow = indexes.map((key) => {
+  const slotsToShow = indexesToShow.map((key) => {
     var _a;
     return (_a = slots[CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
   });
-  return createElement(Fragment, void 0, slotsToShow);
+  return createElement(Fragment3, void 0, slotsToShow);
 };
 
 // src/components/TestClient.ts
 import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
 import { runTest } from "@uniformdev/canvas-next-rsc-shared";
-import { createElement as createElement2, Fragment as Fragment2, useMemo as useMemo2 } from "react";
+import { createElement as createElement2, Fragment as Fragment4, useEffect as useEffect5, useState as useState4 } from "react";
 var TestClient = (props) => {
   var _a;
   const { slots } = props;
   const { context } = useUniformContext();
-  const index = useMemo2(() => {
+  const [index, setIndex] = useState4(0);
+  useEffect5(() => {
     const result = runTest({
       ...props,
       contextInstance: context
     });
-    return result.index;
+    setIndex(result.index);
   }, [props, context]);
   if (typeof index !== "number") {
     return null;
   }
-  return createElement2(Fragment2, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+  return createElement2(Fragment4, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
 };
 
 // src/components/UniformScriptClient.tsx
 import {
   createCanvasChannel,
-  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
+  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as IN_CONTEXT_EDITOR_QUERY_STRING_PARAM2,
   isAllowedReferrer
 } from "@uniformdev/canvas";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment3, jsx } from "react/jsx-runtime";
+import { useRouter, useSearchParams as useSearchParams3 } from "next/navigation";
+import { useEffect as useEffect6, useMemo, useRef } from "react";
+import { Fragment as Fragment5, jsx as jsx3 } from "react/jsx-runtime";
 var UniformScript = () => {
   const router = useRouter();
-  const params = useSearchParams();
-  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
-  const channel = useMemo3(() => {
+  const params = useSearchParams3();
+  const needsToRefreshRef = useRef(false);
+  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM2) === "true";
+  const channel = useMemo(() => {
     var _a;
     if (typeof window === "undefined") {
       return;
@@ -107,18 +157,24 @@ var UniformScript = () => {
     });
     return instance;
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     if (!channel) {
       return;
     }
     const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
-      router.refresh();
+      const el = document.activeElement;
+      const isActiveElementEditable = el == null ? void 0 : el.isContentEditable;
+      if (!isActiveElementEditable) {
+        router.refresh();
+      } else {
+        needsToRefreshRef.current = true;
+      }
     });
     return () => {
       unsubscribeFromEditorUpdates();
     };
   }, [channel, router]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -139,14 +195,26 @@ var UniformScript = () => {
       existing.remove();
     }
   }, [enabled]);
-  return /* @__PURE__ */ jsx(Fragment3, {});
+  useEffect6(() => {
+    const handleBlurChange = () => {
+      if (needsToRefreshRef.current) {
+        router.refresh();
+        needsToRefreshRef.current = false;
+      }
+    };
+    document.addEventListener("blur", handleBlurChange, true);
+    return () => {
+      document.removeEventListener("focus", handleBlurChange, true);
+    };
+  }, [router]);
+  return /* @__PURE__ */ jsx3(Fragment5, {});
 };
 
 // src/hooks/useInitUniformContext.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState5 } from "react";
 var useInitUniformContext = (callback) => {
-  const [called, setCalled] = useState3(false);
-  useEffect4(() => {
+  const [called, setCalled] = useState5(false);
+  useEffect7(() => {
     if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
       return;
     }
@@ -157,6 +225,8 @@ var useInitUniformContext = (callback) => {
   }, [called, callback]);
 };
 export {
+  ClientContextUpdate,
+  ClientContextualEditingComponentWrapper,
   ContextUpdateTransferClient,
   PersonalizeClient,
   TestClient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-next-rsc-client",
-  "version": "19.55.2-alpha.48+3b4e395a3",
+  "version": "19.55.2-alpha.54+5c0508742",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -32,8 +32,9 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.55.2-alpha.48+3b4e395a3",
-    "@uniformdev/canvas-next-rsc-shared": "^19.55.2-alpha.48+3b4e395a3"
+    "@uniformdev/canvas": "19.55.2-alpha.54+5c0508742",
+    "@uniformdev/canvas-next-rsc-shared": "^19.55.2-alpha.54+5c0508742",
+    "@uniformdev/canvas-react": "^19.55.2-alpha.54+5c0508742"
   },
   "engines": {
     "node": ">=16.14.0"
@@ -46,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3b4e395a30a0c38676df3b030b30337e492d4cc7"
+  "gitHead": "5c0508742475c257e8e24003c4515dd06252045b"
 }