@prismicio/next 2.1.1 → 2.2.0-canary.070be83

package/dist/SliceSimulator.cjs

@@ -0,0 +1,49 @@
+"use client";
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_SliceSimulatorWrapper = require('./SliceSimulatorWrapper.cjs');
+const require_getSlices = require('./getSlices.cjs');
+let next_navigation = require("next/navigation");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _prismicio_simulator_kit = require("@prismicio/simulator/kit");
+let lz_string = require("lz-string");
+
+//#region src/SliceSimulator.tsx
+const STATE_PARAMS_KEY = "state";
+const simulatorManager = new _prismicio_simulator_kit.SimulatorManager();
+/**
+* Simulate slices in isolation. The slice simulator enables live slice
+* development in Slice Machine and live previews in the Page Builder.
+*/
+const SliceSimulator = ({ children, background, zIndex, className }) => {
+	const [message, setMessage] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultMessage)());
+	const router = (0, next_navigation.useRouter)();
+	const hasSlices = require_getSlices.getSlices(typeof window !== "undefined" ? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY) : void 0).length > 0;
+	(0, react.useEffect)(() => {
+		simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Slices, (newSlices) => {
+			const url = new URL(window.location.href);
+			url.searchParams.set(STATE_PARAMS_KEY, (0, lz_string.compressToEncodedURIComponent)(JSON.stringify(newSlices)));
+			window.history.replaceState(null, "", url);
+			setTimeout(() => router.refresh(), 0);
+		}, "simulator-slices");
+		simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
+		simulatorManager.init();
+		return () => {
+			simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Slices, "simulator-slices");
+			simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Message, "simulator-message");
+		};
+	}, [router]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
+		message,
+		hasSlices,
+		background,
+		zIndex,
+		className,
+		children
+	});
+};
+
+//#endregion
+exports.SliceSimulator = SliceSimulator;
+//# sourceMappingURL=SliceSimulator.cjs.map

package/dist/SliceSimulator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","getSlices","StateEventType","SliceSimulatorWrapper"],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport type { SliceSimulatorProps as BaseSliceSimulatorProps } from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\nimport type { FC, ReactNode } from \"react\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\n/**\n * Parameters provided to the Slice Simulator page.\n */\nexport type SliceSimulatorParams = {\n\tsearchParams: Promise<{\n\t\tstate?: string;\n\t}>;\n};\n\nexport type SliceSimulatorProps = BaseSliceSimulatorProps & {\n\tchildren: ReactNode;\n\tclassName?: string;\n};\n\n/**\n * Simulate slices in isolation. The slice simulator enables live slice\n * development in Slice Machine and live previews in the Page Builder.\n */\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tchildren,\n\tbackground,\n\tzIndex,\n\tclassName,\n}) => {\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\tconst router = useRouter();\n\n\tconst state =\n\t\ttypeof window !== \"undefined\"\n\t\t\t? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)\n\t\t\t: undefined;\n\tconst hasSlices = getSlices(state).length > 0;\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(newSlices) => {\n\t\t\t\tconst url = new URL(window.location.href);\n\t\t\t\turl.searchParams.set(\n\t\t\t\t\tSTATE_PARAMS_KEY,\n\t\t\t\t\tcompressToEncodedURIComponent(JSON.stringify(newSlices)),\n\t\t\t\t);\n\n\t\t\t\twindow.history.replaceState(null, \"\", url);\n\t\t\t\t// Wait until the next tick to prevent URL state race conditions.\n\t\t\t\tsetTimeout(() => router.refresh(), 0);\n\t\t\t},\n\t\t\t\"simulator-slices\",\n\t\t);\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Message,\n\t\t\t(newMessage) => setMessage(newMessage),\n\t\t\t\"simulator-message\",\n\t\t);\n\n\t\tsimulatorManager.init();\n\n\t\treturn () => {\n\t\t\tsimulatorManager.state.off(StateEventType.Slices, \"simulator-slices\");\n\n\t\t\tsimulatorManager.state.off(StateEventType.Message, \"simulator-message\");\n\t\t};\n\t}, [router]);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\n\t\t\thasSlices={hasSlices}\n\t\t\tbackground={background}\n\t\t\tzIndex={zIndex}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{children}\n\t\t</SliceSimulatorWrapper>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB,IAAIA,2CAAkB;;;;;AAoB/C,MAAa,kBAA2C,EACvD,UACA,YACA,QACA,gBACK;CACL,MAAM,CAAC,SAAS,yFAAgD,CAAC;CACjE,MAAM,yCAAoB;CAM1B,MAAM,YAAYC,4BAHjB,OAAO,WAAW,cACf,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC,aAAa,IAAI,iBAAiB,GAChE,OAC8B,CAAC,SAAS;AAE5C,4BAAgB;AACf,mBAAiB,MAAM,GACtBC,wCAAe,SACd,cAAc;GACd,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,KAAK;AACzC,OAAI,aAAa,IAChB,+DAC8B,KAAK,UAAU,UAAU,CAAC,CACxD;AAED,UAAO,QAAQ,aAAa,MAAM,IAAI,IAAI;AAE1C,oBAAiB,OAAO,SAAS,EAAE,EAAE;KAEtC,mBACA;AACD,mBAAiB,MAAM,GACtBA,wCAAe,UACd,eAAe,WAAW,WAAW,EACtC,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAIA,wCAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAIA,wCAAe,SAAS,oBAAoB;;IAEtE,CAAC,OAAO,CAAC;AAEZ,QACC,2CAACC;EACS;EACE;EACC;EACJ;EACG;EAEV;GACsB"}

package/dist/SliceSimulator.d.cts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from "react";
+import { SliceSimulatorProps } from "@prismicio/simulator/kit";
+
+//#region src/SliceSimulator.d.ts
+
+/**
+ * Parameters provided to the Slice Simulator page.
+ */
+type SliceSimulatorParams = {
+  searchParams: Promise<{
+    state?: string;
+  }>;
+};
+type SliceSimulatorProps$1 = SliceSimulatorProps & {
+  children: ReactNode;
+  className?: string;
+};
+/**
+ * Simulate slices in isolation. The slice simulator enables live slice
+ * development in Slice Machine and live previews in the Page Builder.
+ */
+declare const SliceSimulator: FC<SliceSimulatorProps$1>;
+//#endregion
+export { SliceSimulator, SliceSimulatorParams, SliceSimulatorProps$1 as SliceSimulatorProps };
+//# sourceMappingURL=SliceSimulator.d.cts.map

package/dist/SliceSimulatorWrapper.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _prismicio_simulator_kit = require("@prismicio/simulator/kit");
+
+//#region src/SliceSimulatorWrapper.tsx
+/**
+* A wrapper for the slice simulator that isolates the given children from the
+* page's layout.
+*/
+const SliceSimulatorWrapper = ({ className, children, zIndex, background, message, hasSlices }) => {
+	const defaultProps = (0, _prismicio_simulator_kit.getDefaultProps)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: [_prismicio_simulator_kit.simulatorClass, className].filter(Boolean).join(" "),
+		style: {
+			zIndex: typeof zIndex === "undefined" ? defaultProps.zIndex : zIndex ?? void 0,
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100vh",
+			overflow: "auto",
+			background: typeof background === "undefined" ? defaultProps.background : background ?? void 0
+		},
+		children: message ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", { dangerouslySetInnerHTML: { __html: message } }) : hasSlices ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: "root",
+			className: _prismicio_simulator_kit.simulatorRootClass,
+			onClickCapture: _prismicio_simulator_kit.onClickHandler,
+			onSubmitCapture: _prismicio_simulator_kit.disableEventHandler,
+			children
+		}) : null
+	});
+};
+
+//#endregion
+exports.SliceSimulatorWrapper = SliceSimulatorWrapper;
+//# sourceMappingURL=SliceSimulatorWrapper.cjs.map

package/dist/SliceSimulatorWrapper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliceSimulatorWrapper.cjs","names":["simulatorClass","simulatorRootClass","onClickHandler","disableEventHandler"],"sources":["../src/SliceSimulatorWrapper.tsx"],"sourcesContent":["import {\n\tdisableEventHandler,\n\tgetDefaultProps,\n\tonClickHandler,\n\tsimulatorClass,\n\tsimulatorRootClass,\n} from \"@prismicio/simulator/kit\";\nimport type { SliceSimulatorProps } from \"@prismicio/simulator/kit\";\nimport type { FC, ReactNode } from \"react\";\n\ntype SliceSimulatorWrapperProps = SliceSimulatorProps & {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tmessage?: string;\n\thasSlices: boolean;\n};\n\n/**\n * A wrapper for the slice simulator that isolates the given children from the\n * page's layout.\n */\nexport const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({\n\tclassName,\n\tchildren,\n\tzIndex,\n\tbackground,\n\tmessage,\n\thasSlices,\n}) => {\n\tconst defaultProps = getDefaultProps();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[simulatorClass, className].filter(Boolean).join(\" \")}\n\t\t\tstyle={{\n\t\t\t\tzIndex:\n\t\t\t\t\ttypeof zIndex === \"undefined\"\n\t\t\t\t\t\t? defaultProps.zIndex\n\t\t\t\t\t\t: (zIndex ?? undefined),\n\t\t\t\tposition: \"fixed\",\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: \"100%\",\n\t\t\t\theight: \"100vh\",\n\t\t\t\toverflow: \"auto\",\n\t\t\t\tbackground:\n\t\t\t\t\ttypeof background === \"undefined\"\n\t\t\t\t\t\t? defaultProps.background\n\t\t\t\t\t\t: (background ?? undefined),\n\t\t\t}}\n\t\t>\n\t\t\t{message ? (\n\t\t\t\t<article dangerouslySetInnerHTML={{ __html: message }} />\n\t\t\t) : hasSlices ? (\n\t\t\t\t<div\n\t\t\t\t\tid=\"root\"\n\t\t\t\t\tclassName={simulatorRootClass}\n\t\t\t\t\tonClickCapture={onClickHandler as unknown as React.MouseEventHandler}\n\t\t\t\t\tonSubmitCapture={\n\t\t\t\t\t\tdisableEventHandler as unknown as React.FormEventHandler\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;AAqBA,MAAa,yBAAyD,EACrE,WACA,UACA,QACA,YACA,SACA,gBACK;CACL,MAAM,8DAAgC;AAEtC,QACC,2CAAC;EACA,WAAW,CAACA,yCAAgB,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,OAAO;GACN,QACC,OAAO,WAAW,cACf,aAAa,SACZ,UAAU;GACf,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,UAAU;GACV,YACC,OAAO,eAAe,cACnB,aAAa,aACZ,cAAc;GACnB;YAEA,UACA,2CAAC,aAAQ,yBAAyB,EAAE,QAAQ,SAAS,GAAI,GACtD,YACH,2CAAC;GACA,IAAG;GACH,WAAWC;GACX,gBAAgBC;GAChB,iBACCC;GAGA;IACI,GACH;GACC"}

package/dist/getSlices.cjs

@@ -0,0 +1,12 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let _prismicio_simulator_kit = require("@prismicio/simulator/kit");
+let lz_string = require("lz-string");
+
+//#region src/getSlices.ts
+const getSlices = (state) => {
+	return state ? JSON.parse((0, lz_string.decompressFromEncodedURIComponent)(state)) : (0, _prismicio_simulator_kit.getDefaultSlices)();
+};
+
+//#endregion
+exports.getSlices = getSlices;
+//# sourceMappingURL=getSlices.cjs.map

package/dist/getSlices.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSlices.cjs","names":[],"sources":["../src/getSlices.ts"],"sourcesContent":["import { getDefaultSlices } from \"@prismicio/simulator/kit\";\nimport type { StateEvents, StateEventType } from \"@prismicio/simulator/kit\";\nimport { decompressFromEncodedURIComponent } from \"lz-string\";\n\nexport const getSlices = (\n\tstate: string | null | undefined,\n): StateEvents[StateEventType.Slices] => {\n\treturn state\n\t\t? JSON.parse(decompressFromEncodedURIComponent(state))\n\t\t: getDefaultSlices();\n};\n"],"mappings":";;;;;AAIA,MAAa,aACZ,UACwC;AACxC,QAAO,QACJ,KAAK,uDAAwC,MAAM,CAAC,mDAClC"}

package/dist/getSlices.d.cts

@@ -0,0 +1,7 @@
+import { StateEventType, StateEvents } from "@prismicio/simulator/kit";
+
+//#region src/getSlices.d.ts
+declare const getSlices: (state: string | null | undefined) => StateEvents[StateEventType.Slices];
+//#endregion
+export { getSlices };
+//# sourceMappingURL=getSlices.d.cts.map

package/dist/index.cjs

@@ -5,13 +5,17 @@ const require_enableAutoPreviews = require('./enableAutoPreviews.cjs');
 const require_redirectToPreviewURL = require('./redirectToPreviewURL.cjs');
 const require_imgixLoader = require('./imgixLoader.cjs');
 const require_PrismicNextImage = require('./PrismicNextImage.cjs');
+const require_getSlices = require('./getSlices.cjs');
+const require_SliceSimulator = require('./SliceSimulator.cjs');
 const require_createLocaleRedirect = require('./createLocaleRedirect.cjs');
 
 exports.PrismicNextImage = require_PrismicNextImage.PrismicNextImage;
 exports.PrismicNextLink = require_PrismicNextLink.PrismicNextLink;
 exports.PrismicPreview = require_PrismicPreview.PrismicPreview;
+exports.SliceSimulator = require_SliceSimulator.SliceSimulator;
 exports.createLocaleRedirect = require_createLocaleRedirect.createLocaleRedirect;
 exports.enableAutoPreviews = require_enableAutoPreviews.enableAutoPreviews;
 exports.exitPreview = require_exitPreview.exitPreview;
+exports.getSlices = require_getSlices.getSlices;
 exports.imgixLoader = require_imgixLoader.imgixLoader;
 exports.redirectToPreviewURL = require_redirectToPreviewURL.redirectToPreviewURL;

package/dist/index.d.cts

@@ -5,6 +5,8 @@ import { EnableAutoPreviewsConfig, enableAutoPreviews } from "./enableAutoPrevie
 import { CreateClientConfig } from "./types.cjs";
 import { RedirectToPreviewURLConfig, redirectToPreviewURL } from "./redirectToPreviewURL.cjs";
 import { PrismicNextImage, PrismicNextImageProps } from "./PrismicNextImage.cjs";
+import { SliceSimulator, SliceSimulatorParams, SliceSimulatorProps } from "./SliceSimulator.cjs";
+import { getSlices } from "./getSlices.cjs";
 import { imgixLoader } from "./imgixLoader.cjs";
 import { CreateLocaleRedirectConfig, createLocaleRedirect } from "./createLocaleRedirect.cjs";
-export { type CreateClientConfig, type CreateLocaleRedirectConfig, type EnableAutoPreviewsConfig, PrismicNextImage, type PrismicNextImageProps, PrismicNextLink, type PrismicNextLinkProps, PrismicPreview, type PrismicPreviewProps, type RedirectToPreviewURLConfig, createLocaleRedirect, enableAutoPreviews, exitPreview, imgixLoader, redirectToPreviewURL };
+export { type CreateClientConfig, type CreateLocaleRedirectConfig, type EnableAutoPreviewsConfig, PrismicNextImage, type PrismicNextImageProps, PrismicNextLink, type PrismicNextLinkProps, PrismicPreview, type PrismicPreviewProps, type RedirectToPreviewURLConfig, SliceSimulator, type SliceSimulatorParams, type SliceSimulatorProps, createLocaleRedirect, enableAutoPreviews, exitPreview, getSlices, imgixLoader, redirectToPreviewURL };

package/dist/package.cjs

@@ -1,6 +1,6 @@
 
 //#region package.json
-var version = "2.1.1";
+var version = "2.2.0-canary.070be83";
 
 //#endregion
 Object.defineProperty(exports, 'version', {

package/dist/pages/PrismicPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicPreview.cjs","names":["Script","prismicCookie"],"sources":["../../src/pages/PrismicPreview.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { type ReactNode, useEffect } from \"react\";\nimport { useRouter } from \"next/router\";\nimport Script from \"next/script\";\nimport { getToolbarSrc, cookie as prismicCookie } from \"@prismicio/client\";\n\n/** Props for `<PrismicPreview>`. */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t */\n\texitPreviewURL?: string;\n\n\t/** Children to render adjacent to the Prismic Toolbar. */\n\tchildren?: ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically refresh the page with the\n * changes.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport const PrismicPreview: FC<PrismicPreviewProps> = (props) => {\n\tconst {\n\t\trepositoryName,\n\t\tupdatePreviewURL = \"/api/preview\",\n\t\texitPreviewURL = \"/api/exit-preview\",\n\t\tchildren,\n\t} = props;\n\n\tconst router = useRouter();\n\n\tconst toolbarSrc = getToolbarSrc(repositoryName);\n\n\tuseEffect(() => {\n\t\tconst controller = new AbortController();\n\n\t\twindow.addEventListener(\"prismicPreviewUpdate\", onUpdate, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\t\twindow.addEventListener(\"prismicPreviewEnd\", onEnd, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\n\t\t// Start the preview for preview share links. Previews from\n\t\t// share links do not go to the `updatePreviewURL` like a normal\n\t\t// preview.\n\t\t//\n\t\t// We check that the current URL is a descendant of the base\n\t\t// path to prevent infinite refrehes.\n\t\tif (\n\t\t\twindow.location.href.startsWith(\n\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t) &&\n\t\t\tgetPreviewCookieRepositoryName() === repositoryName &&\n\t\t\t!router.isPreview\n\t\t) {\n\t\t\tstart();\n\t\t}\n\n\t\tfunction onEnd(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tfetch(router.basePath + exitPreviewURL, { signal: controller.signal })\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (!res.ok) {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${exitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction onUpdate(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tstart();\n\t\t}\n\n\t\tfunction start() {\n\t\t\t// We check `opaqueredirect` because we don't care if\n\t\t\t// the redirect was successful or not. As long as it\n\t\t\t// redirects, we know the endpoint exists and at least\n\t\t\t// attempted to set preview data.\n\t\t\tfetch(router.basePath + updatePreviewURL, {\n\t\t\t\tredirect: \"manual\",\n\t\t\t\tsignal: controller.signal,\n\t\t\t})\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (res.type !== \"opaqueredirect\") {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to start or update the preview using \"${updatePreviewURL}\". Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction refresh() {\n\t\t\trouter.replace(router.asPath, undefined, { scroll: false });\n\t\t}\n\n\t\treturn () => controller.abort();\n\t}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<Script src={toolbarSrc} strategy=\"lazyOnload\" />\n\t\t</>\n\t);\n};\n\nfunction getPreviewCookieRepositoryName() {\n\tconst cookie = window.document.cookie\n\t\t.split(\"; \")\n\t\t.find((row) => row.startsWith(`${prismicCookie.preview}=`))\n\t\t?.split(\"=\")[1];\n\n\treturn (decodeURIComponent(cookie ?? \"\").match(/\"([^\"]+)\\.prismic\\.io\"/) ||\n\t\t[])[1];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuCA,MAAa,kBAA2C,UAAU;CACjE,MAAM,EACL,gBACA,mBAAmB,gBACnB,iBAAiB,qBACjB,aACG;CAEJ,MAAM,qCAAoB;CAE1B,MAAM,kDAA2B,eAAe;AAEhD,4BAAgB;EACf,MAAM,aAAa,IAAI,iBAAiB;AAExC,SAAO,iBAAiB,wBAAwB,UAAU,EACzD,QAAQ,WAAW,QACnB,CAAC;AACF,SAAO,iBAAiB,qBAAqB,OAAO,EACnD,QAAQ,WAAW,QACnB,CAAC;AAQF,MACC,OAAO,SAAS,KAAK,WACpB,OAAO,SAAS,SAAS,OAAO,SAChC,IACD,gCAAgC,KAAK,kBACrC,CAAC,OAAO,UAER,QAAO;EAGR,SAAS,MAAM,OAAc;AAC5B,SAAM,gBAAgB;AACtB,SAAM,OAAO,WAAW,gBAAgB,EAAE,QAAQ,WAAW,QAAQ,CAAC,CACpE,MAAM,QAAQ;AACd,QAAI,CAAC,IAAI,IAAI;AACZ,aAAQ,MACP,6DAA6D,eAAe,gCAC5E;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,SAAS,OAAc;AAC/B,SAAM,gBAAgB;AACtB,UAAO;;EAGR,SAAS,QAAQ;AAKhB,SAAM,OAAO,WAAW,kBAAkB;IACzC,UAAU;IACV,QAAQ,WAAW;IACnB,CAAC,CACA,MAAM,QAAQ;AACd,QAAI,IAAI,SAAS,kBAAkB;AAClC,aAAQ,MACP,mEAAmE,iBAAiB,mBACpF;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,UAAU;AAClB,UAAO,QAAQ,OAAO,QAAQ,QAAW,EAAE,QAAQ,OAAO,CAAC;;AAG5D,eAAa,WAAW,OAAO;IAC7B;EAAC;EAAgB;EAAkB;EAAgB;EAAO,CAAC;AAE9D,QACC,qFACE,UACD,2CAACA;EAAO,KAAK;EAAY,UAAS;GAAe,IAC/C;;AAIL,SAAS,iCAAiC;CACzC,MAAM,SAAS,OAAO,SAAS,OAC7B,MAAM,KAAK,CACX,MAAM,QAAQ,IAAI,WAAW,GAAGC,yBAAc,QAAQ,GAAG,CAAC,EACzD,MAAM,IAAI,CAAC;AAEd,SAAQ,mBAAmB,UAAU,GAAG,CAAC,MAAM,yBAAyB,IACvE,EAAE,EAAE"}
+{"version":3,"file":"PrismicPreview.cjs","names":["Script","prismicCookie"],"sources":["../../src/pages/PrismicPreview.tsx"],"sourcesContent":["import { getToolbarSrc, cookie as prismicCookie } from \"@prismicio/client\";\nimport { useRouter } from \"next/router\";\nimport Script from \"next/script\";\nimport type { FC } from \"react\";\nimport { type ReactNode, useEffect } from \"react\";\n\n/** Props for `<PrismicPreview>`. */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t */\n\texitPreviewURL?: string;\n\n\t/** Children to render adjacent to the Prismic Toolbar. */\n\tchildren?: ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically refresh the page with the\n * changes.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport const PrismicPreview: FC<PrismicPreviewProps> = (props) => {\n\tconst {\n\t\trepositoryName,\n\t\tupdatePreviewURL = \"/api/preview\",\n\t\texitPreviewURL = \"/api/exit-preview\",\n\t\tchildren,\n\t} = props;\n\n\tconst router = useRouter();\n\n\tconst toolbarSrc = getToolbarSrc(repositoryName);\n\n\tuseEffect(() => {\n\t\tconst controller = new AbortController();\n\n\t\twindow.addEventListener(\"prismicPreviewUpdate\", onUpdate, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\t\twindow.addEventListener(\"prismicPreviewEnd\", onEnd, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\n\t\t// Start the preview for preview share links. Previews from\n\t\t// share links do not go to the `updatePreviewURL` like a normal\n\t\t// preview.\n\t\t//\n\t\t// We check that the current URL is a descendant of the base\n\t\t// path to prevent infinite refrehes.\n\t\tif (\n\t\t\twindow.location.href.startsWith(\n\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t) &&\n\t\t\tgetPreviewCookieRepositoryName() === repositoryName &&\n\t\t\t!router.isPreview\n\t\t) {\n\t\t\tstart();\n\t\t}\n\n\t\tfunction onEnd(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tfetch(router.basePath + exitPreviewURL, { signal: controller.signal })\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (!res.ok) {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${exitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction onUpdate(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tstart();\n\t\t}\n\n\t\tfunction start() {\n\t\t\t// We check `opaqueredirect` because we don't care if\n\t\t\t// the redirect was successful or not. As long as it\n\t\t\t// redirects, we know the endpoint exists and at least\n\t\t\t// attempted to set preview data.\n\t\t\tfetch(router.basePath + updatePreviewURL, {\n\t\t\t\tredirect: \"manual\",\n\t\t\t\tsignal: controller.signal,\n\t\t\t})\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (res.type !== \"opaqueredirect\") {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to start or update the preview using \"${updatePreviewURL}\". Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction refresh() {\n\t\t\trouter.replace(router.asPath, undefined, { scroll: false });\n\t\t}\n\n\t\treturn () => controller.abort();\n\t}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<Script src={toolbarSrc} strategy=\"lazyOnload\" />\n\t\t</>\n\t);\n};\n\nfunction getPreviewCookieRepositoryName() {\n\tconst cookie = window.document.cookie\n\t\t.split(\"; \")\n\t\t.find((row) => row.startsWith(`${prismicCookie.preview}=`))\n\t\t?.split(\"=\")[1];\n\n\treturn (decodeURIComponent(cookie ?? \"\").match(/\"([^\"]+)\\.prismic\\.io\"/) ||\n\t\t[])[1];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuCA,MAAa,kBAA2C,UAAU;CACjE,MAAM,EACL,gBACA,mBAAmB,gBACnB,iBAAiB,qBACjB,aACG;CAEJ,MAAM,qCAAoB;CAE1B,MAAM,kDAA2B,eAAe;AAEhD,4BAAgB;EACf,MAAM,aAAa,IAAI,iBAAiB;AAExC,SAAO,iBAAiB,wBAAwB,UAAU,EACzD,QAAQ,WAAW,QACnB,CAAC;AACF,SAAO,iBAAiB,qBAAqB,OAAO,EACnD,QAAQ,WAAW,QACnB,CAAC;AAQF,MACC,OAAO,SAAS,KAAK,WACpB,OAAO,SAAS,SAAS,OAAO,SAChC,IACD,gCAAgC,KAAK,kBACrC,CAAC,OAAO,UAER,QAAO;EAGR,SAAS,MAAM,OAAc;AAC5B,SAAM,gBAAgB;AACtB,SAAM,OAAO,WAAW,gBAAgB,EAAE,QAAQ,WAAW,QAAQ,CAAC,CACpE,MAAM,QAAQ;AACd,QAAI,CAAC,IAAI,IAAI;AACZ,aAAQ,MACP,6DAA6D,eAAe,gCAC5E;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,SAAS,OAAc;AAC/B,SAAM,gBAAgB;AACtB,UAAO;;EAGR,SAAS,QAAQ;AAKhB,SAAM,OAAO,WAAW,kBAAkB;IACzC,UAAU;IACV,QAAQ,WAAW;IACnB,CAAC,CACA,MAAM,QAAQ;AACd,QAAI,IAAI,SAAS,kBAAkB;AAClC,aAAQ,MACP,mEAAmE,iBAAiB,mBACpF;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,UAAU;AAClB,UAAO,QAAQ,OAAO,QAAQ,QAAW,EAAE,QAAQ,OAAO,CAAC;;AAG5D,eAAa,WAAW,OAAO;IAC7B;EAAC;EAAgB;EAAkB;EAAgB;EAAO,CAAC;AAE9D,QACC,qFACE,UACD,2CAACA;EAAO,KAAK;EAAY,UAAS;GAAe,IAC/C;;AAIL,SAAS,iCAAiC;CACzC,MAAM,SAAS,OAAO,SAAS,OAC7B,MAAM,KAAK,CACX,MAAM,QAAQ,IAAI,WAAW,GAAGC,yBAAc,QAAQ,GAAG,CAAC,EACzD,MAAM,IAAI,CAAC;AAEd,SAAQ,mBAAmB,UAAU,GAAG,CAAC,MAAM,yBAAyB,IACvE,EAAE,EAAE"}

package/dist/pages/SliceSimulator.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_SliceSimulatorWrapper = require('../SliceSimulatorWrapper.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _prismicio_simulator_kit = require("@prismicio/simulator/kit");
+
+//#region src/pages/SliceSimulator.tsx
+const simulatorManager = new _prismicio_simulator_kit.SimulatorManager();
+/**
+* Simulate slices in isolation. The slice simulator enables live slice
+* development in Slice Machine and live previews in the Page Builder.
+*/
+const SliceSimulator = ({ background, zIndex, className, sliceZone: SliceZoneComp }) => {
+	const [slices, setSlices] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultSlices)());
+	const [message, setMessage] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultMessage)());
+	(0, react.useEffect)(() => {
+		simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Slices, (_slices) => {
+			setSlices(_slices);
+		}, "simulator-slices");
+		simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Message, (_message) => {
+			setMessage(_message);
+		}, "simulator-message");
+		simulatorManager.init();
+		return () => {
+			simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Slices, "simulator-slices");
+			simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Message, "simulator-message");
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
+		message,
+		hasSlices: slices.length > 0,
+		background,
+		zIndex,
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliceZoneComp, { slices })
+	});
+};
+
+//#endregion
+exports.SliceSimulator = SliceSimulator;
+//# sourceMappingURL=SliceSimulator.cjs.map

package/dist/pages/SliceSimulator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","StateEventType","SliceSimulatorWrapper"],"sources":["../../src/pages/SliceSimulator.tsx"],"sourcesContent":["import { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n\tgetDefaultSlices,\n} from \"@prismicio/simulator/kit\";\nimport type {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSliceSimulatorState,\n} from \"@prismicio/simulator/kit\";\nimport { useEffect, useState } from \"react\";\nimport type { ComponentType, FC } from \"react\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorSliceZoneProps = {\n\tslices: SliceSimulatorState[\"slices\"];\n};\n\nexport type SliceSimulatorProps = BaseSliceSimulatorProps & {\n\t/**\n\t * React component to render simulated Slices.\n\t *\n\t * @example\n\t *\n\t * ```tsx\n\t * import { SliceSimulator } from \"@slicemachine/adapter-next/simulator\";\n\t * import { SliceZone } from \"@prismicio/react\";\n\t *\n\t * import { components } from \"../slices\";\n\t *\n\t * <SliceSimulator\n\t * \tsliceZone={({ slices }) => (\n\t * \t\t<SliceZone slices={slices} components={components} />\n\t * \t)}\n\t * />;\n\t * ```\n\t */\n\tsliceZone: ComponentType<SliceSimulatorSliceZoneProps>;\n\tclassName?: string;\n};\n\n/**\n * Simulate slices in isolation. The slice simulator enables live slice\n * development in Slice Machine and live previews in the Page Builder.\n */\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tbackground,\n\tzIndex,\n\tclassName,\n\tsliceZone: SliceZoneComp,\n}) => {\n\tconst [slices, setSlices] = useState(() => getDefaultSlices());\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(_slices) => {\n\t\t\t\tsetSlices(_slices);\n\t\t\t},\n\t\t\t\"simulator-slices\",\n\t\t);\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Message,\n\t\t\t(_message) => {\n\t\t\t\tsetMessage(_message);\n\t\t\t},\n\t\t\t\"simulator-message\",\n\t\t);\n\n\t\tsimulatorManager.init();\n\n\t\treturn () => {\n\t\t\tsimulatorManager.state.off(StateEventType.Slices, \"simulator-slices\");\n\n\t\t\tsimulatorManager.state.off(StateEventType.Message, \"simulator-message\");\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\n\t\t\thasSlices={slices.length > 0}\n\t\t\tbackground={background}\n\t\t\tzIndex={zIndex}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SliceZoneComp slices={slices} />\n\t\t</SliceSimulatorWrapper>\n\t);\n};\n"],"mappings":";;;;;;;AAcA,MAAM,mBAAmB,IAAIA,2CAAkB;;;;;AAiC/C,MAAa,kBAA2C,EACvD,YACA,QACA,WACA,WAAW,oBACN;CACL,MAAM,CAAC,QAAQ,uFAA8C,CAAC;CAC9D,MAAM,CAAC,SAAS,yFAAgD,CAAC;AAEjE,4BAAgB;AACf,mBAAiB,MAAM,GACtBC,wCAAe,SACd,YAAY;AACZ,aAAU,QAAQ;KAEnB,mBACA;AACD,mBAAiB,MAAM,GACtBA,wCAAe,UACd,aAAa;AACb,cAAW,SAAS;KAErB,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAIA,wCAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAIA,wCAAe,SAAS,oBAAoB;;IAEtE,EAAE,CAAC;AAEN,QACC,2CAACC;EACS;EACT,WAAW,OAAO,SAAS;EACf;EACJ;EACG;YAEX,2CAAC,iBAAsB,SAAU;GACV"}

package/dist/pages/SliceSimulator.d.cts

@@ -0,0 +1,37 @@
+import { ComponentType, FC } from "react";
+import { SliceSimulatorProps, SliceSimulatorState } from "@prismicio/simulator/kit";
+
+//#region src/pages/SliceSimulator.d.ts
+type SliceSimulatorSliceZoneProps = {
+  slices: SliceSimulatorState["slices"];
+};
+type SliceSimulatorProps$1 = SliceSimulatorProps & {
+  /**
+   * React component to render simulated Slices.
+   *
+   * @example
+   *
+   * ```tsx
+   * import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
+   * import { SliceZone } from "@prismicio/react";
+   *
+   * import { components } from "../slices";
+   *
+   * <SliceSimulator
+   * 	sliceZone={({ slices }) => (
+   * 		<SliceZone slices={slices} components={components} />
+   * 	)}
+   * />;
+   * ```
+   */
+  sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
+  className?: string;
+};
+/**
+ * Simulate slices in isolation. The slice simulator enables live slice
+ * development in Slice Machine and live previews in the Page Builder.
+ */
+declare const SliceSimulator: FC<SliceSimulatorProps$1>;
+//#endregion
+export { SliceSimulator, SliceSimulatorProps$1 as SliceSimulatorProps, SliceSimulatorSliceZoneProps };
+//# sourceMappingURL=SliceSimulator.d.cts.map

package/dist/pages.cjs

@@ -2,6 +2,7 @@ const require_PrismicNextLink = require('./PrismicNextLink.cjs');
 const require_imgixLoader = require('./imgixLoader.cjs');
 const require_PrismicNextImage = require('./PrismicNextImage.cjs');
 const require_createLocaleRedirect = require('./createLocaleRedirect.cjs');
+const require_SliceSimulator = require('./pages/SliceSimulator.cjs');
 const require_PrismicPreview = require('./pages/PrismicPreview.cjs');
 const require_enableAutoPreviews = require('./pages/enableAutoPreviews.cjs');
 const require_redirectToPreviewURL = require('./pages/redirectToPreviewURL.cjs');
@@ -11,6 +12,7 @@ const require_setPreviewData = require('./pages/setPreviewData.cjs');
 exports.PrismicNextImage = require_PrismicNextImage.PrismicNextImage;
 exports.PrismicNextLink = require_PrismicNextLink.PrismicNextLink;
 exports.PrismicPreview = require_PrismicPreview.PrismicPreview;
+exports.SliceSimulator = require_SliceSimulator.SliceSimulator;
 exports.createLocaleRedirect = require_createLocaleRedirect.createLocaleRedirect;
 exports.enableAutoPreviews = require_enableAutoPreviews.enableAutoPreviews;
 exports.exitPreview = require_exitPreview.exitPreview;

package/dist/pages.d.cts

@@ -2,10 +2,11 @@ import { PrismicNextLink, PrismicNextLinkProps } from "./PrismicNextLink.cjs";
 import { PrismicNextImage, PrismicNextImageProps } from "./PrismicNextImage.cjs";
 import { imgixLoader } from "./imgixLoader.cjs";
 import { CreateLocaleRedirectConfig, createLocaleRedirect } from "./createLocaleRedirect.cjs";
+import { SliceSimulator, SliceSimulatorProps, SliceSimulatorSliceZoneProps } from "./pages/SliceSimulator.cjs";
 import { PrismicPreview, PrismicPreviewProps } from "./pages/PrismicPreview.cjs";
 import { CreateClientConfig } from "./pages/types.cjs";
 import { EnableAutoPreviewsConfig, enableAutoPreviews } from "./pages/enableAutoPreviews.cjs";
 import { RedirectToPreviewURLConfig, redirectToPreviewURL } from "./pages/redirectToPreviewURL.cjs";
 import { ExitPreviewAPIRouteConfig, exitPreview } from "./pages/exitPreview.cjs";
 import { SetPreviewDataConfig, setPreviewData } from "./pages/setPreviewData.cjs";
-export { type CreateClientConfig, type CreateLocaleRedirectConfig, type EnableAutoPreviewsConfig, type ExitPreviewAPIRouteConfig, PrismicNextImage, type PrismicNextImageProps, PrismicNextLink, type PrismicNextLinkProps, PrismicPreview, type PrismicPreviewProps, type RedirectToPreviewURLConfig, type SetPreviewDataConfig, createLocaleRedirect, enableAutoPreviews, exitPreview, imgixLoader, redirectToPreviewURL, setPreviewData };
+export { type CreateClientConfig, type CreateLocaleRedirectConfig, type EnableAutoPreviewsConfig, type ExitPreviewAPIRouteConfig, PrismicNextImage, type PrismicNextImageProps, PrismicNextLink, type PrismicNextLinkProps, PrismicPreview, type PrismicPreviewProps, type RedirectToPreviewURLConfig, type SetPreviewDataConfig, SliceSimulator, type SliceSimulatorProps, type SliceSimulatorSliceZoneProps, createLocaleRedirect, enableAutoPreviews, exitPreview, imgixLoader, redirectToPreviewURL, setPreviewData };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "2.1.1",
+	"version": "2.2.0-canary.070be83",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -55,7 +55,9 @@
 		"types": "tsc --noEmit"
 	},
 	"dependencies": {
-		"imgix-url-builder": "^0.0.5"
+		"@prismicio/simulator": "^0.2.0",
+		"imgix-url-builder": "^0.0.5",
+		"lz-string": "^1.5.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.49.1",

package/src/SliceSimulator.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper";
+import { getSlices } from "./getSlices";
+import {
+	SimulatorManager,
+	StateEventType,
+	getDefaultMessage,
+} from "@prismicio/simulator/kit";
+import type { SliceSimulatorProps as BaseSliceSimulatorProps } from "@prismicio/simulator/kit";
+import { compressToEncodedURIComponent } from "lz-string";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import type { FC, ReactNode } from "react";
+
+const STATE_PARAMS_KEY = "state";
+
+const simulatorManager = new SimulatorManager();
+
+/**
+ * Parameters provided to the Slice Simulator page.
+ */
+export type SliceSimulatorParams = {
+	searchParams: Promise<{
+		state?: string;
+	}>;
+};
+
+export type SliceSimulatorProps = BaseSliceSimulatorProps & {
+	children: ReactNode;
+	className?: string;
+};
+
+/**
+ * Simulate slices in isolation. The slice simulator enables live slice
+ * development in Slice Machine and live previews in the Page Builder.
+ */
+export const SliceSimulator: FC<SliceSimulatorProps> = ({
+	children,
+	background,
+	zIndex,
+	className,
+}) => {
+	const [message, setMessage] = useState(() => getDefaultMessage());
+	const router = useRouter();
+
+	const state =
+		typeof window !== "undefined"
+			? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)
+			: undefined;
+	const hasSlices = getSlices(state).length > 0;
+
+	useEffect(() => {
+		simulatorManager.state.on(
+			StateEventType.Slices,
+			(newSlices) => {
+				const url = new URL(window.location.href);
+				url.searchParams.set(
+					STATE_PARAMS_KEY,
+					compressToEncodedURIComponent(JSON.stringify(newSlices)),
+				);
+
+				window.history.replaceState(null, "", url);
+				// Wait until the next tick to prevent URL state race conditions.
+				setTimeout(() => router.refresh(), 0);
+			},
+			"simulator-slices",
+		);
+		simulatorManager.state.on(
+			StateEventType.Message,
+			(newMessage) => setMessage(newMessage),
+			"simulator-message",
+		);
+
+		simulatorManager.init();
+
+		return () => {
+			simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
+
+			simulatorManager.state.off(StateEventType.Message, "simulator-message");
+		};
+	}, [router]);
+
+	return (
+		<SliceSimulatorWrapper
+			message={message}
+			hasSlices={hasSlices}
+			background={background}
+			zIndex={zIndex}
+			className={className}
+		>
+			{children}
+		</SliceSimulatorWrapper>
+	);
+};

package/src/SliceSimulatorWrapper.tsx

@@ -0,0 +1,68 @@
+import {
+	disableEventHandler,
+	getDefaultProps,
+	onClickHandler,
+	simulatorClass,
+	simulatorRootClass,
+} from "@prismicio/simulator/kit";
+import type { SliceSimulatorProps } from "@prismicio/simulator/kit";
+import type { FC, ReactNode } from "react";
+
+type SliceSimulatorWrapperProps = SliceSimulatorProps & {
+	children: ReactNode;
+	className?: string;
+	message?: string;
+	hasSlices: boolean;
+};
+
+/**
+ * A wrapper for the slice simulator that isolates the given children from the
+ * page's layout.
+ */
+export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
+	className,
+	children,
+	zIndex,
+	background,
+	message,
+	hasSlices,
+}) => {
+	const defaultProps = getDefaultProps();
+
+	return (
+		<div
+			className={[simulatorClass, className].filter(Boolean).join(" ")}
+			style={{
+				zIndex:
+					typeof zIndex === "undefined"
+						? defaultProps.zIndex
+						: (zIndex ?? undefined),
+				position: "fixed",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100vh",
+				overflow: "auto",
+				background:
+					typeof background === "undefined"
+						? defaultProps.background
+						: (background ?? undefined),
+			}}
+		>
+			{message ? (
+				<article dangerouslySetInnerHTML={{ __html: message }} />
+			) : hasSlices ? (
+				<div
+					id="root"
+					className={simulatorRootClass}
+					onClickCapture={onClickHandler as unknown as React.MouseEventHandler}
+					onSubmitCapture={
+						disableEventHandler as unknown as React.FormEventHandler
+					}
+				>
+					{children}
+				</div>
+			) : null}
+		</div>
+	);
+};

package/src/getSlices.ts

@@ -0,0 +1,11 @@
+import { getDefaultSlices } from "@prismicio/simulator/kit";
+import type { StateEvents, StateEventType } from "@prismicio/simulator/kit";
+import { decompressFromEncodedURIComponent } from "lz-string";
+
+export const getSlices = (
+	state: string | null | undefined,
+): StateEvents[StateEventType.Slices] => {
+	return state
+		? JSON.parse(decompressFromEncodedURIComponent(state))
+		: getDefaultSlices();
+};

package/src/index.ts

@@ -15,6 +15,14 @@ export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
 export { PrismicNextImage } from "./PrismicNextImage";
 export type { PrismicNextImageProps } from "./PrismicNextImage";
 
+export { SliceSimulator } from "./SliceSimulator";
+export type {
+	SliceSimulatorProps,
+	SliceSimulatorParams,
+} from "./SliceSimulator";
+
+export { getSlices } from "./getSlices";
+
 export { imgixLoader } from "./imgixLoader";
 
 export type { CreateClientConfig } from "./types";

package/src/pages/PrismicPreview.tsx

@@ -1,8 +1,8 @@
-import type { FC } from "react";
-import { type ReactNode, useEffect } from "react";
+import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client";
+import type { FC } from "react";
+import { type ReactNode, useEffect } from "react";
 
 /** Props for `<PrismicPreview>`. */
 export type PrismicPreviewProps = {

package/src/pages/SliceSimulator.tsx

@@ -0,0 +1,93 @@
+import { SliceSimulatorWrapper } from "../SliceSimulatorWrapper";
+import {
+	SimulatorManager,
+	StateEventType,
+	getDefaultMessage,
+	getDefaultSlices,
+} from "@prismicio/simulator/kit";
+import type {
+	SliceSimulatorProps as BaseSliceSimulatorProps,
+	SliceSimulatorState,
+} from "@prismicio/simulator/kit";
+import { useEffect, useState } from "react";
+import type { ComponentType, FC } from "react";
+
+const simulatorManager = new SimulatorManager();
+
+export type SliceSimulatorSliceZoneProps = {
+	slices: SliceSimulatorState["slices"];
+};
+
+export type SliceSimulatorProps = BaseSliceSimulatorProps & {
+	/**
+	 * React component to render simulated Slices.
+	 *
+	 * @example
+	 *
+	 * ```tsx
+	 * import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
+	 * import { SliceZone } from "@prismicio/react";
+	 *
+	 * import { components } from "../slices";
+	 *
+	 * <SliceSimulator
+	 * 	sliceZone={({ slices }) => (
+	 * 		<SliceZone slices={slices} components={components} />
+	 * 	)}
+	 * />;
+	 * ```
+	 */
+	sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
+	className?: string;
+};
+
+/**
+ * Simulate slices in isolation. The slice simulator enables live slice
+ * development in Slice Machine and live previews in the Page Builder.
+ */
+export const SliceSimulator: FC<SliceSimulatorProps> = ({
+	background,
+	zIndex,
+	className,
+	sliceZone: SliceZoneComp,
+}) => {
+	const [slices, setSlices] = useState(() => getDefaultSlices());
+	const [message, setMessage] = useState(() => getDefaultMessage());
+
+	useEffect(() => {
+		simulatorManager.state.on(
+			StateEventType.Slices,
+			(_slices) => {
+				setSlices(_slices);
+			},
+			"simulator-slices",
+		);
+		simulatorManager.state.on(
+			StateEventType.Message,
+			(_message) => {
+				setMessage(_message);
+			},
+			"simulator-message",
+		);
+
+		simulatorManager.init();
+
+		return () => {
+			simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
+
+			simulatorManager.state.off(StateEventType.Message, "simulator-message");
+		};
+	}, []);
+
+	return (
+		<SliceSimulatorWrapper
+			message={message}
+			hasSlices={slices.length > 0}
+			background={background}
+			zIndex={zIndex}
+			className={className}
+		>
+			<SliceZoneComp slices={slices} />
+		</SliceSimulatorWrapper>
+	);
+};

package/src/pages/index.ts

@@ -4,6 +4,12 @@ export { type PrismicNextLinkProps } from "../PrismicNextLink";
 export { PrismicNextImage } from "../PrismicNextImage";
 export { type PrismicNextImageProps } from "../PrismicNextImage";
 
+export { SliceSimulator } from "./SliceSimulator";
+export type {
+	SliceSimulatorProps,
+	SliceSimulatorSliceZoneProps,
+} from "./SliceSimulator";
+
 export { imgixLoader } from "../imgixLoader";
 
 export { PrismicPreview } from "./PrismicPreview";