@contentful/experiences-react 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.8.3 (2026-09-11)
+
+### 🚀 Features
+
+- **live-preview:** expose preview status helper [SPA-5289] ([#170](https://github.com/contentful/experiences/pull/170))
+- **live-preview:** add framework adapters [SPA-5161] ([#165](https://github.com/contentful/experiences/pull/165))
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.1.1
+- Updated client to 0.4.3
+- Updated design to 0.8.3
+- Updated core to 0.8.3
+
 ## 0.8.2 (2026-09-10)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -8,7 +8,7 @@ The React adapter for the Contentful Experiences SDK. You bring your own React c
 npm install @contentful/experiences-react
 ```
 
-This is the **only SDK package you install**. It re-exports everything you need from `@contentful/experiences-sdk-core`, `@contentful/experiences-design`, and `@contentful/experiences-client`. The other packages are workspace-internal.
+This is the only rendering SDK package you install. It re-exports everything you need from `@contentful/experiences-sdk-core`, `@contentful/experiences-design`, and `@contentful/experiences-client`. The optional `@contentful/experiences-live-preview` package is also customer-facing and provides the framework-neutral live-preview client.
 
 ---
 
@@ -38,6 +38,50 @@ type ExperienceOptions, ClientOptions, ResolveOptions, CreateClientOptions
 resolveExperience(payload, config, opts?)   // Async; walks payload, runs resolveData, returns a PortableRenderPlan
 ```
 
+### Live preview
+
+Use `useLivePreview` when the app should subscribe to Preview Session updates,
+resolve each payload, and render the resulting plan from `data`:
+
+```tsx
+const livePreview = useLivePreview({
+  previewSessionOptions,
+  initialPayload,
+  initialPlan,
+  resolveOptions: { config: experienceConfig },
+});
+
+<ClientExperienceRenderer experience={livePreview.data} config={experienceConfig} />;
+```
+
+For separate access to the raw payload and rendered plan, use
+`useLivePreviewExperience` and `useExperiencePlan`:
+
+```tsx
+const livePreview = useLivePreviewExperience({
+  previewSessionOptions: {
+    spaceId,
+    environmentId,
+    previewToken,
+    sessionId,
+  },
+  initialPayload,
+});
+
+const plan = useExperiencePlan({
+  payload: livePreview.data,
+  initialPlan,
+  resolveOptions: { config: experienceConfig },
+});
+
+<ClientExperienceRenderer experience={plan.data} config={experienceConfig} />;
+```
+
+`useLivePreviewExperience` returns the latest raw Experience payload.
+`initialPayload` seeds the first value. `useExperiencePlan` turns that payload
+into the `PortableRenderPlan` consumed by the renderer and keeps the current rendered
+experience while an update is being resolved.
+
 ### Renderers
 
 ```ts

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { ComponentError, ComponentErrorProps } from './component-error.js';
 export { DebugExperience, DebugExperienceProps } from './debug-experience.js';
 export { UseActiveViewportResult, useActiveViewport } from './use-active-viewport.js';
 export { DiagnosticReporter, RenderError, RenderUnknown } from './nodes-renderer.js';
+export { UseLivePreviewExperienceOptions, UseLivePreviewExperienceResult, useLivePreviewExperience } from './use-live-preview-experience.js';
+export { UseLivePreviewOptions, UseLivePreviewResult, useLivePreview } from './use-live-preview.js';
+export { ExperiencePlanResolveOptions, UseExperiencePlanOptions, UseExperiencePlanResult, useExperiencePlan } from './use-experience-plan.js';
+export { LivePreviewClient, PreviewSessionOptions } from '@contentful/experiences-live-preview';
 export { useContentfulComponent, useContentfulExperienceTemplate, useExperience } from './context.js';
 export { useDesignValues } from './use-design-values.js';
 export { ToCssOptions, toCss } from './design-utils.js';

package/dist/index.js

@@ -7,6 +7,9 @@ import { MissingComponent } from "./missing-component";
 import { ComponentError } from "./component-error";
 import { DebugExperience } from "./debug-experience";
 import { useActiveViewport } from "./use-active-viewport";
+import { useLivePreviewExperience } from "./use-live-preview-experience";
+import { useLivePreview } from "./use-live-preview";
+import { useExperiencePlan } from "./use-experience-plan";
 import { useExperience, useContentfulComponent, useContentfulExperienceTemplate } from "./context";
 import { useDesignValues } from "./use-design-values";
 import { toCss } from "./design-utils";
@@ -72,6 +75,9 @@ export {
   useContentfulComponent,
   useContentfulExperienceTemplate,
   useDesignValues,
-  useExperience
+  useExperience,
+  useExperiencePlan,
+  useLivePreview,
+  useLivePreviewExperience
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n * Public API surface for `@contentful/experiences-react`.\n *\n * Customers add ONLY this package to their app's dependencies. Everything\n * needed to render an Experience — types, the resolver, viewport utilities,\n * the renderer components, the authoring helpers — is re-exported from here.\n * The internal `@contentful/experiences-sdk-core` and\n * `@contentful/experiences-design` packages are workspace-only implementation\n * details; they are not part of the public API.\n *\n * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR\n * consumers explicitly import `ServerExperienceRenderer`.\n */\n\n// ─── Renderers ─────────────────────────────────────────────────────────────\nexport {\n  ClientExperienceRenderer as ExperienceRenderer,\n  ClientExperienceRenderer,\n} from './client-renderer';\nexport type { ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer';\nexport type { ClientExperienceRendererProps } from './client-renderer';\n\nexport { ServerExperienceRenderer } from './server-renderer';\nexport type { ServerExperienceRendererProps } from './server-renderer';\n\nexport { MissingComponent } from './missing-component';\nexport type { MissingComponentProps } from './missing-component';\n\nexport { ComponentError } from './component-error';\nexport type { ComponentErrorProps } from './component-error';\n\nexport { DebugExperience } from './debug-experience';\nexport type { DebugExperienceProps } from './debug-experience';\n\nexport { useActiveViewport } from './use-active-viewport';\nexport type { UseActiveViewportResult } from './use-active-viewport';\n\nexport type { DiagnosticReporter, RenderError, RenderUnknown } from './nodes-renderer';\n\n// ─── Runtime context hooks ───────────────────────────────────────────────\nexport { useExperience, useContentfulComponent, useContentfulExperienceTemplate } from './context';\nexport { useDesignValues } from './use-design-values';\nexport { toCss } from './design-utils';\nexport type { ToCssOptions } from './design-utils';\n\n// ─── Authoring helpers + Config types ─────────────────────────────────────\nexport {\n  defineComponent,\n  defineExperienceTemplate,\n  normalizeComponentRegistration,\n  normalizeExperienceTemplateRegistration,\n} from './types';\nexport type {\n  ComponentConfig,\n  Components,\n  Config,\n  ContentfulComponent,\n  ContentfulExperienceTemplate,\n  ExperienceTemplateConfig,\n  ExperienceTemplateRegistration,\n  ExperienceTemplates,\n  Registration,\n  RenderContext,\n  ResolveToken,\n} from './types';\n\n// ─── Resolver (re-exported from render-core) ──────────────────────────────\nexport { resolveExperience } from '@contentful/experiences-sdk-core';\nexport type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';\n\n// ─── Core IR + payload types (re-exported from render-core) ───────────────\nexport type {\n  ComponentNode,\n  ComponentRef,\n  DesignPropValue,\n  DesignToken,\n  ExperienceContext,\n  ExperienceNode,\n  ExperiencePayload,\n  ExperienceSourceMap,\n  ExperienceSys,\n  ExperienceTemplateNode,\n  ExperienceTemplateRef,\n  ManualDesignValue,\n  PortableRegistration,\n  PortableRenderNode,\n  PortableRenderPlan,\n  ResolveContext,\n  ValuesByViewport,\n  ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\n// ─── Design utilities (re-exported from design) ───────────────────────────\nexport {\n  CSS_PROPERTIES,\n  getValueForViewport,\n  getViewportIndex,\n  isCssProperty,\n  resolveDesignProperties,\n  toCssKey,\n  toCssMediaQuery,\n} from '@contentful/experiences-design';\n\n// ─── Delivery client + fetchExperience ────────────────────────────────────\nexport {\n  ContentfulViewDelivery,\n  ContentfulViewDeliveryClient,\n  DELIVERY_HOST,\n  ExperienceFetchError,\n  NotFoundError,\n  PREVIEW_HOST,\n  createClient,\n  fetchExperience,\n  readSourceMap,\n  toExperiencePayload,\n} from '@contentful/experiences-client';\nexport type {\n  ClientOptions,\n  CreateClientOptions,\n  ExperienceOptions,\n  ExperienceResponse,\n  ResolveOptions,\n} from '@contentful/experiences-client';\n"],"mappings":"AAeA;AAAA,EAC8B;AAAA,EAC5B,4BAAAA;AAAA,OACK;AAIP,SAAS,gCAAgC;AAGzC,SAAS,wBAAwB;AAGjC,SAAS,sBAAsB;AAG/B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAMlC,SAAS,eAAe,wBAAwB,uCAAuC;AACvF,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAItB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,yBAAyB;AA0BlC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["ClientExperienceRenderer"]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n * Public API surface for `@contentful/experiences-react`.\n *\n * Customers add ONLY this package to their app's dependencies. Everything\n * needed to render an Experience — types, the resolver, viewport utilities,\n * the renderer components, the authoring helpers — is re-exported from here.\n * The internal `@contentful/experiences-sdk-core` and\n * `@contentful/experiences-design` packages are workspace-only implementation\n * details; they are not part of the public API.\n *\n * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR\n * consumers explicitly import `ServerExperienceRenderer`.\n */\n\n// ─── Renderers ─────────────────────────────────────────────────────────────\nexport {\n  ClientExperienceRenderer as ExperienceRenderer,\n  ClientExperienceRenderer,\n} from './client-renderer';\nexport type { ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer';\nexport type { ClientExperienceRendererProps } from './client-renderer';\n\nexport { ServerExperienceRenderer } from './server-renderer';\nexport type { ServerExperienceRendererProps } from './server-renderer';\n\nexport { MissingComponent } from './missing-component';\nexport type { MissingComponentProps } from './missing-component';\n\nexport { ComponentError } from './component-error';\nexport type { ComponentErrorProps } from './component-error';\n\nexport { DebugExperience } from './debug-experience';\nexport type { DebugExperienceProps } from './debug-experience';\n\nexport { useActiveViewport } from './use-active-viewport';\nexport type { UseActiveViewportResult } from './use-active-viewport';\n\nexport type { DiagnosticReporter, RenderError, RenderUnknown } from './nodes-renderer';\n\nexport { useLivePreviewExperience } from './use-live-preview-experience';\nexport type {\n  UseLivePreviewExperienceOptions,\n  UseLivePreviewExperienceResult,\n} from './use-live-preview-experience';\nexport { useLivePreview } from './use-live-preview';\nexport type { UseLivePreviewOptions, UseLivePreviewResult } from './use-live-preview';\n\nexport { useExperiencePlan } from './use-experience-plan';\nexport type {\n  ExperiencePlanResolveOptions,\n  UseExperiencePlanOptions,\n  UseExperiencePlanResult,\n} from './use-experience-plan';\nexport type {\n  LivePreviewClient,\n  PreviewSessionOptions,\n} from '@contentful/experiences-live-preview';\n\n// ─── Runtime context hooks ───────────────────────────────────────────────\nexport { useExperience, useContentfulComponent, useContentfulExperienceTemplate } from './context';\nexport { useDesignValues } from './use-design-values';\nexport { toCss } from './design-utils';\nexport type { ToCssOptions } from './design-utils';\n\n// ─── Authoring helpers + Config types ─────────────────────────────────────\nexport {\n  defineComponent,\n  defineExperienceTemplate,\n  normalizeComponentRegistration,\n  normalizeExperienceTemplateRegistration,\n} from './types';\nexport type {\n  ComponentConfig,\n  Components,\n  Config,\n  ContentfulComponent,\n  ContentfulExperienceTemplate,\n  ExperienceTemplateConfig,\n  ExperienceTemplateRegistration,\n  ExperienceTemplates,\n  Registration,\n  RenderContext,\n  ResolveToken,\n} from './types';\n\n// ─── Resolver (re-exported from render-core) ──────────────────────────────\nexport { resolveExperience } from '@contentful/experiences-sdk-core';\nexport type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';\n\n// ─── Core IR + payload types (re-exported from render-core) ───────────────\nexport type {\n  ComponentNode,\n  ComponentRef,\n  DesignPropValue,\n  DesignToken,\n  ExperienceContext,\n  ExperienceNode,\n  ExperiencePayload,\n  ExperienceSourceMap,\n  ExperienceSys,\n  ExperienceTemplateNode,\n  ExperienceTemplateRef,\n  ManualDesignValue,\n  PortableRegistration,\n  PortableRenderNode,\n  PortableRenderPlan,\n  ResolveContext,\n  ValuesByViewport,\n  ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\n// ─── Design utilities (re-exported from design) ───────────────────────────\nexport {\n  CSS_PROPERTIES,\n  getValueForViewport,\n  getViewportIndex,\n  isCssProperty,\n  resolveDesignProperties,\n  toCssKey,\n  toCssMediaQuery,\n} from '@contentful/experiences-design';\n\n// ─── Delivery client + fetchExperience ────────────────────────────────────\nexport {\n  ContentfulViewDelivery,\n  ContentfulViewDeliveryClient,\n  DELIVERY_HOST,\n  ExperienceFetchError,\n  NotFoundError,\n  PREVIEW_HOST,\n  createClient,\n  fetchExperience,\n  readSourceMap,\n  toExperiencePayload,\n} from '@contentful/experiences-client';\nexport type {\n  ClientOptions,\n  CreateClientOptions,\n  ExperienceOptions,\n  ExperienceResponse,\n  ResolveOptions,\n} from '@contentful/experiences-client';\n"],"mappings":"AAeA;AAAA,EAC8B;AAAA,EAC5B,4BAAAA;AAAA,OACK;AAIP,SAAS,gCAAgC;AAGzC,SAAS,wBAAwB;AAGjC,SAAS,sBAAsB;AAG/B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAKlC,SAAS,gCAAgC;AAKzC,SAAS,sBAAsB;AAG/B,SAAS,yBAAyB;AAYlC,SAAS,eAAe,wBAAwB,uCAAuC;AACvF,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAItB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,yBAAyB;AA0BlC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["ClientExperienceRenderer"]}

package/dist/use-experience-plan.d.ts

@@ -0,0 +1,16 @@
+import { ResolveExperienceOptions, ResolverConfig, ExperiencePayload, PortableRenderPlan } from '@contentful/experiences-sdk-core';
+
+interface ExperiencePlanResolveOptions extends ResolveExperienceOptions {
+    config: ResolverConfig;
+}
+interface UseExperiencePlanOptions {
+    payload: ExperiencePayload | undefined;
+    initialPlan?: PortableRenderPlan;
+    resolveOptions: ExperiencePlanResolveOptions;
+}
+interface UseExperiencePlanResult {
+    readonly data: PortableRenderPlan | undefined;
+}
+declare function useExperiencePlan(options: UseExperiencePlanOptions): UseExperiencePlanResult;
+
+export { type ExperiencePlanResolveOptions, type UseExperiencePlanOptions, type UseExperiencePlanResult, useExperiencePlan };

package/dist/use-experience-plan.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect, useState } from "react";
+import { resolveExperience } from "@contentful/experiences-sdk-core";
+function useExperiencePlan(options) {
+  const { payload, initialPlan, resolveOptions } = options;
+  const [plan, setPlan] = useState(initialPlan);
+  const { config, metadata, debug, initialViewportId, sourceMap } = resolveOptions;
+  useEffect(() => {
+    let isCurrent = true;
+    if (payload === void 0) {
+      return () => {
+        isCurrent = false;
+      };
+    }
+    void resolveExperience(payload, config, { metadata, debug, initialViewportId, sourceMap }).then((nextPlan) => {
+      if (isCurrent && nextPlan.diagnostics.length === 0) {
+        setPlan(nextPlan);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      isCurrent = false;
+    };
+  }, [payload, config, metadata, debug, initialViewportId, sourceMap]);
+  return { data: plan };
+}
+export {
+  useExperiencePlan
+};
+//# sourceMappingURL=use-experience-plan.js.map

package/dist/use-experience-plan.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-experience-plan.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { resolveExperience } from '@contentful/experiences-sdk-core';\nimport type {\n  ExperiencePayload,\n  PortableRenderPlan,\n  ResolveExperienceOptions,\n  ResolverConfig,\n} from '@contentful/experiences-sdk-core';\n\nexport interface ExperiencePlanResolveOptions extends ResolveExperienceOptions {\n  config: ResolverConfig;\n}\n\nexport interface UseExperiencePlanOptions {\n  payload: ExperiencePayload | undefined;\n  initialPlan?: PortableRenderPlan;\n  resolveOptions: ExperiencePlanResolveOptions;\n}\n\nexport interface UseExperiencePlanResult {\n  readonly data: PortableRenderPlan | undefined;\n}\n\nexport function useExperiencePlan(options: UseExperiencePlanOptions): UseExperiencePlanResult {\n  const { payload, initialPlan, resolveOptions } = options;\n  const [plan, setPlan] = useState<PortableRenderPlan | undefined>(initialPlan);\n  const { config, metadata, debug, initialViewportId, sourceMap } = resolveOptions;\n\n  useEffect(() => {\n    let isCurrent = true;\n\n    if (payload === undefined) {\n      return () => {\n        isCurrent = false;\n      };\n    }\n\n    void resolveExperience(payload, config, { metadata, debug, initialViewportId, sourceMap })\n      .then((nextPlan) => {\n        if (isCurrent && nextPlan.diagnostics.length === 0) {\n          setPlan(nextPlan);\n        }\n      })\n      .catch(() => {\n        // Keep the last usable experience when resolving an update fails.\n      });\n\n    return () => {\n      isCurrent = false;\n    };\n  }, [payload, config, metadata, debug, initialViewportId, sourceMap]);\n\n  return { data: plan };\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAEpC,SAAS,yBAAyB;AAsB3B,SAAS,kBAAkB,SAA4D;AAC5F,QAAM,EAAE,SAAS,aAAa,eAAe,IAAI;AACjD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyC,WAAW;AAC5E,QAAM,EAAE,QAAQ,UAAU,OAAO,mBAAmB,UAAU,IAAI;AAElE,YAAU,MAAM;AACd,QAAI,YAAY;AAEhB,QAAI,YAAY,QAAW;AACzB,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF;AAEA,SAAK,kBAAkB,SAAS,QAAQ,EAAE,UAAU,OAAO,mBAAmB,UAAU,CAAC,EACtF,KAAK,CAAC,aAAa;AAClB,UAAI,aAAa,SAAS,YAAY,WAAW,GAAG;AAClD,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF,CAAC,EACA,MAAM,MAAM;AAAA,IAEb,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,UAAU,OAAO,mBAAmB,SAAS,CAAC;AAEnE,SAAO,EAAE,MAAM,KAAK;AACtB;","names":[]}

package/dist/use-live-preview-experience.d.ts

@@ -0,0 +1,13 @@
+import { PreviewSessionOptions } from '@contentful/experiences-live-preview';
+import { ExperiencePayload } from '@contentful/experiences-sdk-core';
+
+type UseLivePreviewExperienceOptions = {
+    previewSessionOptions?: PreviewSessionOptions;
+    initialPayload?: ExperiencePayload;
+};
+interface UseLivePreviewExperienceResult {
+    readonly data: ExperiencePayload | undefined;
+}
+declare function useLivePreviewExperience(options: UseLivePreviewExperienceOptions): UseLivePreviewExperienceResult;
+
+export { type UseLivePreviewExperienceOptions, type UseLivePreviewExperienceResult, useLivePreviewExperience };

package/dist/use-live-preview-experience.js

@@ -0,0 +1,41 @@
+"use client";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import {
+  createLivePreviewClient,
+  sendPreviewStatus
+} from "@contentful/experiences-live-preview";
+function useLivePreviewExperience(options) {
+  const { previewSessionOptions, initialPayload } = options;
+  const client = useMemo(() => {
+    if (previewSessionOptions === void 0) return void 0;
+    return createLivePreviewClient(previewSessionOptions, initialPayload);
+  }, [
+    previewSessionOptions?.spaceId,
+    previewSessionOptions?.environmentId,
+    previewSessionOptions?.previewToken,
+    previewSessionOptions?.sessionId,
+    previewSessionOptions?.sessionHost,
+    previewSessionOptions?.debug
+  ]);
+  const emptySource = useMemo(
+    () => ({
+      getSnapshot: () => initialPayload,
+      subscribe: () => () => void 0
+    }),
+    [initialPayload]
+  );
+  const source = client ?? emptySource;
+  const data = useSyncExternalStore(source.subscribe, source.getSnapshot, source.getSnapshot);
+  useEffect(() => {
+    if (client === void 0) {
+      sendPreviewStatus("static");
+      return;
+    }
+    return client.subscribeStatus(sendPreviewStatus);
+  }, [client]);
+  return { data };
+}
+export {
+  useLivePreviewExperience
+};
+//# sourceMappingURL=use-live-preview-experience.js.map

package/dist/use-live-preview-experience.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-live-preview-experience.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport {\n  createLivePreviewClient,\n  sendPreviewStatus,\n  type PreviewSessionOptions,\n} from '@contentful/experiences-live-preview';\nimport type { ExperiencePayload } from '@contentful/experiences-sdk-core';\n\nexport type UseLivePreviewExperienceOptions = {\n  previewSessionOptions?: PreviewSessionOptions;\n  initialPayload?: ExperiencePayload;\n};\n\nexport interface UseLivePreviewExperienceResult {\n  readonly data: ExperiencePayload | undefined;\n}\n\nexport function useLivePreviewExperience(\n  options: UseLivePreviewExperienceOptions\n): UseLivePreviewExperienceResult {\n  const { previewSessionOptions, initialPayload } = options;\n  const client = useMemo(() => {\n    if (previewSessionOptions === undefined) return undefined;\n\n    return createLivePreviewClient(previewSessionOptions, initialPayload);\n  }, [\n    previewSessionOptions?.spaceId,\n    previewSessionOptions?.environmentId,\n    previewSessionOptions?.previewToken,\n    previewSessionOptions?.sessionId,\n    previewSessionOptions?.sessionHost,\n    previewSessionOptions?.debug,\n  ]);\n\n  const emptySource = useMemo(\n    () => ({\n      getSnapshot: () => initialPayload,\n      subscribe: () => () => undefined,\n    }),\n    [initialPayload]\n  );\n  const source = client ?? emptySource;\n  const data = useSyncExternalStore(source.subscribe, source.getSnapshot, source.getSnapshot);\n\n  useEffect(() => {\n    if (client === undefined) {\n      sendPreviewStatus('static');\n      return;\n    }\n\n    return client.subscribeStatus(sendPreviewStatus);\n  }, [client]);\n\n  return { data };\n}\n"],"mappings":";AAEA,SAAS,WAAW,SAAS,4BAA4B;AAEzD;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAYA,SAAS,yBACd,SACgC;AAChC,QAAM,EAAE,uBAAuB,eAAe,IAAI;AAClD,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,0BAA0B,OAAW,QAAO;AAEhD,WAAO,wBAAwB,uBAAuB,cAAc;AAAA,EACtE,GAAG;AAAA,IACD,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM,MAAM;AAAA,IACzB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AACA,QAAM,SAAS,UAAU;AACzB,QAAM,OAAO,qBAAqB,OAAO,WAAW,OAAO,aAAa,OAAO,WAAW;AAE1F,YAAU,MAAM;AACd,QAAI,WAAW,QAAW;AACxB,wBAAkB,QAAQ;AAC1B;AAAA,IACF;AAEA,WAAO,OAAO,gBAAgB,iBAAiB;AAAA,EACjD,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO,EAAE,KAAK;AAChB;","names":[]}

package/dist/use-live-preview.d.ts

@@ -0,0 +1,16 @@
+import { ExperiencePayload, PortableRenderPlan } from '@contentful/experiences-sdk-core';
+import { PreviewSessionOptions } from '@contentful/experiences-live-preview';
+import { ExperiencePlanResolveOptions } from './use-experience-plan.js';
+
+interface UseLivePreviewOptions {
+    previewSessionOptions?: PreviewSessionOptions;
+    initialPayload?: ExperiencePayload;
+    initialPlan?: PortableRenderPlan;
+    resolveOptions: ExperiencePlanResolveOptions;
+}
+interface UseLivePreviewResult {
+    readonly data: PortableRenderPlan | undefined;
+}
+declare function useLivePreview(options: UseLivePreviewOptions): UseLivePreviewResult;
+
+export { type UseLivePreviewOptions, type UseLivePreviewResult, useLivePreview };

package/dist/use-live-preview.js

@@ -0,0 +1,18 @@
+"use client";
+import { useLivePreviewExperience } from "./use-live-preview-experience";
+import { useExperiencePlan } from "./use-experience-plan";
+function useLivePreview(options) {
+  const livePreview = useLivePreviewExperience({
+    previewSessionOptions: options.previewSessionOptions,
+    initialPayload: options.initialPayload
+  });
+  return useExperiencePlan({
+    payload: livePreview.data,
+    initialPlan: options.initialPlan,
+    resolveOptions: options.resolveOptions
+  });
+}
+export {
+  useLivePreview
+};
+//# sourceMappingURL=use-live-preview.js.map

package/dist/use-live-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-live-preview.ts"],"sourcesContent":["'use client';\n\nimport type { ExperiencePayload, PortableRenderPlan } from '@contentful/experiences-sdk-core';\nimport type { PreviewSessionOptions } from '@contentful/experiences-live-preview';\n\nimport { useLivePreviewExperience } from './use-live-preview-experience';\nimport { useExperiencePlan, type ExperiencePlanResolveOptions } from './use-experience-plan';\n\nexport interface UseLivePreviewOptions {\n  previewSessionOptions?: PreviewSessionOptions;\n  initialPayload?: ExperiencePayload;\n  initialPlan?: PortableRenderPlan;\n  resolveOptions: ExperiencePlanResolveOptions;\n}\n\nexport interface UseLivePreviewResult {\n  readonly data: PortableRenderPlan | undefined;\n}\n\nexport function useLivePreview(options: UseLivePreviewOptions): UseLivePreviewResult {\n  const livePreview = useLivePreviewExperience({\n    previewSessionOptions: options.previewSessionOptions,\n    initialPayload: options.initialPayload,\n  });\n\n  return useExperiencePlan({\n    payload: livePreview.data,\n    initialPlan: options.initialPlan,\n    resolveOptions: options.resolveOptions,\n  });\n}\n"],"mappings":";AAKA,SAAS,gCAAgC;AACzC,SAAS,yBAA4D;AAa9D,SAAS,eAAe,SAAsD;AACnF,QAAM,cAAc,yBAAyB;AAAA,IAC3C,uBAAuB,QAAQ;AAAA,IAC/B,gBAAgB,QAAQ;AAAA,EAC1B,CAAC;AAED,SAAO,kBAAkB;AAAA,IACvB,SAAS,YAAY;AAAA,IACrB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,QAAQ;AAAA,EAC1B,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-react",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "React adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
   "license": "MIT",
   "type": "module",
@@ -30,9 +30,13 @@
     "directory": "packages/adapter-react"
   },
   "dependencies": {
-    "@contentful/experiences-client": "0.4.2",
-    "@contentful/experiences-sdk-core": "0.8.2",
-    "@contentful/experiences-design": "0.8.2"
+    "@contentful/experiences-client": "0.4.3",
+    "@contentful/experiences-sdk-core": "0.8.3",
+    "@contentful/experiences-design": "0.8.3",
+    "@contentful/experiences-live-preview": "0.1.1"
+  },
+  "devDependencies": {
+    "jsdom": "^30.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",