@contentful/experiences-react 0.8.5 → 0.8.7

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.8.7 (2026-09-22)
+
+### 🚀 Features
+
+- **live-preview:** expose connection errors [SPA-5151] ([#198](https://github.com/contentful/experiences/pull/198))
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.1.5
+
+## 0.8.6 (2026-09-21)
+
+### 🚀 Features
+
+- deprecate the SDK viewport surface, guard absent viewports [SPA-5272] ([4a74473](https://github.com/contentful/experiences/commit/4a74473))
+
+### 🩹 Fixes
+
+- reword deprecation notices, drop internal ticket link [SPA-5272] ([8361460](https://github.com/contentful/experiences/commit/8361460))
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.1.4
+- Updated client to 0.4.5
+- Updated design to 0.8.4
+- Updated core to 0.8.4
+
 ## 0.8.5 (2026-09-21)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -30,6 +30,7 @@ createClient(options)                       // Functional constructor matching t
 ContentfulViewDeliveryClient                // Re-exported delivery client for advanced use cases
 NotFoundError                               // Thrown when the Experience ID doesn't exist
 PreviewSessionFetchError                   // Thrown when fetching a Preview Session fails
+LivePreviewConnectionError                 // Reported when the live-preview connection fails
 ContentfulViewDelivery                      // Full error namespace from the delivery client
 type ExperienceOptions, PreviewSessionExperienceOptions, PreviewSessionClientOptions,
   PreviewSessionResolveOptions, ClientOptions, ResolveOptions, CreateClientOptions
@@ -102,6 +103,9 @@ const plan = useExperiencePlan({
 into the `PortableRenderPlan` consumed by the renderer and keeps the current rendered
 experience while an update is being resolved.
 
+The live-preview results also expose `error` when the Preview Session connection
+fails. The last valid `data` remains available.
+
 ### Renderers
 
 ```ts

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { DiagnosticReporter, RenderError, RenderUnknown } from './nodes-renderer
 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, PREVIEW_WEBSOCKET_HOST, PreviewSessionClientOptions, PreviewSessionExperienceOptions, PreviewSessionFetchError, PreviewSessionOptions, PreviewSessionResolveOptions, fetchPreviewSession } from '@contentful/experiences-live-preview';
+export { LivePreviewClient, LivePreviewConnectionError, LivePreviewResult, PREVIEW_WEBSOCKET_HOST, PreviewSessionClientOptions, PreviewSessionExperienceOptions, PreviewSessionFetchError, PreviewSessionOptions, PreviewSessionResolveOptions, fetchPreviewSession } 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

@@ -12,6 +12,7 @@ import { useLivePreview } from "./use-live-preview";
 import { useExperiencePlan } from "./use-experience-plan";
 import {
   fetchPreviewSession,
+  LivePreviewConnectionError,
   PREVIEW_WEBSOCKET_HOST,
   PreviewSessionFetchError
 } from "@contentful/experiences-live-preview";
@@ -56,6 +57,7 @@ export {
   DebugExperience,
   ExperienceFetchError,
   ClientExperienceRenderer as ExperienceRenderer,
+  LivePreviewConnectionError,
   MissingComponent,
   NotFoundError,
   PREVIEW_HOST,

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\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  PreviewSessionClientOptions,\n  PreviewSessionExperienceOptions,\n  PreviewSessionOptions,\n  PreviewSessionResolveOptions,\n} from '@contentful/experiences-live-preview';\nexport {\n  fetchPreviewSession,\n  PREVIEW_WEBSOCKET_HOST,\n  PreviewSessionFetchError,\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;AAalC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,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  LivePreviewResult,\n  PreviewSessionClientOptions,\n  PreviewSessionExperienceOptions,\n  PreviewSessionOptions,\n  PreviewSessionResolveOptions,\n} from '@contentful/experiences-live-preview';\nexport {\n  fetchPreviewSession,\n  LivePreviewConnectionError,\n  PREVIEW_WEBSOCKET_HOST,\n  PreviewSessionFetchError,\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;AAclC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,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-active-viewport.d.ts

@@ -1,8 +1,18 @@
 import { ViewportDef } from '@contentful/experiences-sdk-core';
 
+/**
+ * @deprecated Viewports are being removed from the Experiences APIs, with no
+ * direct replacement — use CSS media queries or `window.matchMedia` instead.
+ * Will not be removed before 2026-10-06.
+ */
 interface UseActiveViewportResult {
     activeViewportIndex: number;
 }
+/**
+ * @deprecated Viewports are being removed from the Experiences APIs, with no
+ * direct replacement — use CSS media queries or `window.matchMedia` instead.
+ * Will not be removed before 2026-10-06.
+ */
 declare function useActiveViewport(viewports: ViewportDef[], initialViewportId?: string): UseActiveViewportResult;
 
 export { type UseActiveViewportResult, useActiveViewport };

package/dist/use-active-viewport.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-active-viewport.ts"],"sourcesContent":["/*\n * Reactive viewport-matcher hook.\n *\n * \"Active viewport\" = the last-matching media query in the ordered viewports\n * list. With desktop-first ordering (`*`, `<992px`, `<576px`), the narrowest\n * matching query wins. With mobile-first ordering, the widest wins. Either\n * way: the last `findLastIndex` of `mediaQueryMatches[i] === true`.\n *\n * Pass `initialViewportId` (typically derived from User-Agent on the server)\n * to seed the first render so SSR + client agree on viewport before\n * window.matchMedia takes over.\n */\n\n'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\nimport { createMediaQueryMatchers, getViewportIndex } from '@contentful/experiences-design';\n\nfunction useMediaQueryMatchers(viewports: ViewportDef[]): boolean[] {\n  const [, initialMatches] = createMediaQueryMatchers(viewports);\n  const [matches, setMatches] = useState<boolean[]>(initialMatches);\n\n  useEffect(() => {\n    const [matchers] = createMediaQueryMatchers(viewports);\n    const listeners = matchers.map(({ index, signal }) => {\n      const onChange = (): void =>\n        setMatches((prev) => {\n          const next = [...prev];\n          next[index] = signal.matches;\n          return next;\n        });\n      signal.addEventListener('change', onChange);\n      return onChange;\n    });\n    return () => {\n      listeners.forEach((listener, i) => {\n        const matcher = matchers[i];\n        if (matcher) matcher.signal.removeEventListener('change', listener);\n      });\n    };\n  }, [viewports]);\n\n  return matches;\n}\n\nexport interface UseActiveViewportResult {\n  activeViewportIndex: number;\n}\n\nexport function useActiveViewport(\n  viewports: ViewportDef[],\n  initialViewportId?: string\n): UseActiveViewportResult {\n  const matches = useMediaQueryMatchers(viewports);\n  const [activeViewportIndex, setActiveViewportIndex] = useState<number>(() =>\n    getViewportIndex(viewports, initialViewportId)\n  );\n\n  useEffect(() => {\n    const currentIndex = matches.findLastIndex((isMatch) => isMatch);\n    if (currentIndex !== -1 && currentIndex !== activeViewportIndex) {\n      setActiveViewportIndex(currentIndex);\n    }\n  }, [activeViewportIndex, matches]);\n\n  return { activeViewportIndex };\n}\n"],"mappings":";AAeA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,0BAA0B,wBAAwB;AAE3D,SAAS,sBAAsB,WAAqC;AAClE,QAAM,CAAC,EAAE,cAAc,IAAI,yBAAyB,SAAS;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAoB,cAAc;AAEhE,YAAU,MAAM;AACd,UAAM,CAAC,QAAQ,IAAI,yBAAyB,SAAS;AACrD,UAAM,YAAY,SAAS,IAAI,CAAC,EAAE,OAAO,OAAO,MAAM;AACpD,YAAM,WAAW,MACf,WAAW,CAAC,SAAS;AACnB,cAAM,OAAO,CAAC,GAAG,IAAI;AACrB,aAAK,KAAK,IAAI,OAAO;AACrB,eAAO;AAAA,MACT,CAAC;AACH,aAAO,iBAAiB,UAAU,QAAQ;AAC1C,aAAO;AAAA,IACT,CAAC;AACD,WAAO,MAAM;AACX,gBAAU,QAAQ,CAAC,UAAU,MAAM;AACjC,cAAM,UAAU,SAAS,CAAC;AAC1B,YAAI,QAAS,SAAQ,OAAO,oBAAoB,UAAU,QAAQ;AAAA,MACpE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AACT;AAMO,SAAS,kBACd,WACA,mBACyB;AACzB,QAAM,UAAU,sBAAsB,SAAS;AAC/C,QAAM,CAAC,qBAAqB,sBAAsB,IAAI;AAAA,IAAiB,MACrE,iBAAiB,WAAW,iBAAiB;AAAA,EAC/C;AAEA,YAAU,MAAM;AACd,UAAM,eAAe,QAAQ,cAAc,CAAC,YAAY,OAAO;AAC/D,QAAI,iBAAiB,MAAM,iBAAiB,qBAAqB;AAC/D,6BAAuB,YAAY;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,qBAAqB,OAAO,CAAC;AAEjC,SAAO,EAAE,oBAAoB;AAC/B;","names":[]}
+{"version":3,"sources":["../src/use-active-viewport.ts"],"sourcesContent":["/*\n * Reactive viewport-matcher hook.\n *\n * \"Active viewport\" = the last-matching media query in the ordered viewports\n * list. With desktop-first ordering (`*`, `<992px`, `<576px`), the narrowest\n * matching query wins. With mobile-first ordering, the widest wins. Either\n * way: the last `findLastIndex` of `mediaQueryMatches[i] === true`.\n *\n * Pass `initialViewportId` (typically derived from User-Agent on the server)\n * to seed the first render so SSR + client agree on viewport before\n * window.matchMedia takes over.\n */\n\n'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\nimport { createMediaQueryMatchers, getViewportIndex } from '@contentful/experiences-design';\n\nfunction useMediaQueryMatchers(viewports: ViewportDef[]): boolean[] {\n  const [, initialMatches] = createMediaQueryMatchers(viewports);\n  const [matches, setMatches] = useState<boolean[]>(initialMatches);\n\n  useEffect(() => {\n    const [matchers] = createMediaQueryMatchers(viewports);\n    const listeners = matchers.map(({ index, signal }) => {\n      const onChange = (): void =>\n        setMatches((prev) => {\n          const next = [...prev];\n          next[index] = signal.matches;\n          return next;\n        });\n      signal.addEventListener('change', onChange);\n      return onChange;\n    });\n    return () => {\n      listeners.forEach((listener, i) => {\n        const matcher = matchers[i];\n        if (matcher) matcher.signal.removeEventListener('change', listener);\n      });\n    };\n  }, [viewports]);\n\n  return matches;\n}\n\n/**\n * @deprecated Viewports are being removed from the Experiences APIs, with no\n * direct replacement — use CSS media queries or `window.matchMedia` instead.\n * Will not be removed before 2026-10-06.\n */\nexport interface UseActiveViewportResult {\n  activeViewportIndex: number;\n}\n\n/**\n * @deprecated Viewports are being removed from the Experiences APIs, with no\n * direct replacement — use CSS media queries or `window.matchMedia` instead.\n * Will not be removed before 2026-10-06.\n */\nexport function useActiveViewport(\n  viewports: ViewportDef[],\n  initialViewportId?: string\n): UseActiveViewportResult {\n  const matches = useMediaQueryMatchers(viewports);\n  const [activeViewportIndex, setActiveViewportIndex] = useState<number>(() =>\n    getViewportIndex(viewports, initialViewportId)\n  );\n\n  useEffect(() => {\n    const currentIndex = matches.findLastIndex((isMatch) => isMatch);\n    if (currentIndex !== -1 && currentIndex !== activeViewportIndex) {\n      setActiveViewportIndex(currentIndex);\n    }\n  }, [activeViewportIndex, matches]);\n\n  return { activeViewportIndex };\n}\n"],"mappings":";AAeA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,0BAA0B,wBAAwB;AAE3D,SAAS,sBAAsB,WAAqC;AAClE,QAAM,CAAC,EAAE,cAAc,IAAI,yBAAyB,SAAS;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAoB,cAAc;AAEhE,YAAU,MAAM;AACd,UAAM,CAAC,QAAQ,IAAI,yBAAyB,SAAS;AACrD,UAAM,YAAY,SAAS,IAAI,CAAC,EAAE,OAAO,OAAO,MAAM;AACpD,YAAM,WAAW,MACf,WAAW,CAAC,SAAS;AACnB,cAAM,OAAO,CAAC,GAAG,IAAI;AACrB,aAAK,KAAK,IAAI,OAAO;AACrB,eAAO;AAAA,MACT,CAAC;AACH,aAAO,iBAAiB,UAAU,QAAQ;AAC1C,aAAO;AAAA,IACT,CAAC;AACD,WAAO,MAAM;AACX,gBAAU,QAAQ,CAAC,UAAU,MAAM;AACjC,cAAM,UAAU,SAAS,CAAC;AAC1B,YAAI,QAAS,SAAQ,OAAO,oBAAoB,UAAU,QAAQ;AAAA,MACpE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AACT;AAgBO,SAAS,kBACd,WACA,mBACyB;AACzB,QAAM,UAAU,sBAAsB,SAAS;AAC/C,QAAM,CAAC,qBAAqB,sBAAsB,IAAI;AAAA,IAAiB,MACrE,iBAAiB,WAAW,iBAAiB;AAAA,EAC/C;AAEA,YAAU,MAAM;AACd,UAAM,eAAe,QAAQ,cAAc,CAAC,YAAY,OAAO;AAC/D,QAAI,iBAAiB,MAAM,iBAAiB,qBAAqB;AAC/D,6BAAuB,YAAY;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,qBAAqB,OAAO,CAAC;AAEjC,SAAO,EAAE,oBAAoB;AAC/B;","names":[]}

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

@@ -7,6 +7,7 @@ type UseLivePreviewExperienceOptions = {
 };
 interface UseLivePreviewExperienceResult {
     readonly data: ExperiencePayload | undefined;
+    readonly error: Error | undefined;
 }
 declare function useLivePreviewExperience(options: UseLivePreviewExperienceOptions): UseLivePreviewExperienceResult;
 

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

@@ -18,15 +18,15 @@ function useLivePreviewExperience(options) {
     previewSessionOptions?.sessionHost,
     previewSessionOptions?.debug
   ]);
-  const emptySource = useMemo(
-    () => ({
-      getSnapshot: () => initialPayload,
+  const emptySource = useMemo(() => {
+    const result2 = { data: initialPayload, error: void 0 };
+    return {
+      getResult: () => result2,
       subscribe: () => () => void 0
-    }),
-    [initialPayload]
-  );
+    };
+  }, [initialPayload]);
   const source = client ?? emptySource;
-  const data = useSyncExternalStore(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const result = useSyncExternalStore(source.subscribe, source.getResult, source.getResult);
   useEffect(() => {
     if (client === void 0) {
       sendPreviewStatus("static");
@@ -34,7 +34,7 @@ function useLivePreviewExperience(options) {
     }
     return client.subscribeStatus(sendPreviewStatus);
   }, [client]);
-  return { data };
+  return result;
 }
 export {
   useLivePreviewExperience

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

@@ -1 +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?.resourceResolution,\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,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":[]}
+{"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 LivePreviewClient,\n  type LivePreviewResult,\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  readonly error: Error | 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?.resourceResolution,\n    previewSessionOptions?.sessionHost,\n    previewSessionOptions?.debug,\n  ]);\n\n  const emptySource = useMemo<Pick<LivePreviewClient, 'getResult' | 'subscribe'>>(() => {\n    const result: LivePreviewResult = { data: initialPayload, error: undefined };\n    return {\n      getResult: () => result,\n      subscribe: () => () => undefined,\n    };\n  }, [initialPayload]);\n  const source = client ?? emptySource;\n  const result = useSyncExternalStore(source.subscribe, source.getResult, source.getResult);\n\n  useEffect(() => {\n    if (client === undefined) {\n      sendPreviewStatus('static');\n      return;\n    }\n\n    return client.subscribeStatus(sendPreviewStatus);\n  }, [client]);\n\n  return result;\n}\n"],"mappings":";AAEA,SAAS,WAAW,SAAS,4BAA4B;AAEzD;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAaA,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,IACvB,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,cAAc,QAA4D,MAAM;AACpF,UAAMA,UAA4B,EAAE,MAAM,gBAAgB,OAAO,OAAU;AAC3E,WAAO;AAAA,MACL,WAAW,MAAMA;AAAA,MACjB,WAAW,MAAM,MAAM;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AACnB,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,qBAAqB,OAAO,WAAW,OAAO,WAAW,OAAO,SAAS;AAExF,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;AACT;","names":["result"]}

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

@@ -10,6 +10,7 @@ interface UseLivePreviewOptions {
 }
 interface UseLivePreviewResult {
     readonly data: PortableRenderPlan | undefined;
+    readonly error: Error | undefined;
 }
 declare function useLivePreview(options: UseLivePreviewOptions): UseLivePreviewResult;
 

package/dist/use-live-preview.js

@@ -6,11 +6,12 @@ function useLivePreview(options) {
     previewSessionOptions: options.previewSessionOptions,
     initialPayload: options.initialPayload
   });
-  return useExperiencePlan({
+  const plan = useExperiencePlan({
     payload: livePreview.data,
     initialPlan: options.initialPlan,
     resolveOptions: options.resolveOptions
   });
+  return { data: plan.data, error: livePreview.error };
 }
 export {
   useLivePreview

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

@@ -1 +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":[]}
+{"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  readonly error: Error | undefined;\n}\n\nexport function useLivePreview(options: UseLivePreviewOptions): UseLivePreviewResult {\n  const livePreview = useLivePreviewExperience({\n    previewSessionOptions: options.previewSessionOptions,\n    initialPayload: options.initialPayload,\n  });\n\n  const plan = useExperiencePlan({\n    payload: livePreview.data,\n    initialPlan: options.initialPlan,\n    resolveOptions: options.resolveOptions,\n  });\n\n  return { data: plan.data, error: livePreview.error };\n}\n"],"mappings":";AAKA,SAAS,gCAAgC;AACzC,SAAS,yBAA4D;AAc9D,SAAS,eAAe,SAAsD;AACnF,QAAM,cAAc,yBAAyB;AAAA,IAC3C,uBAAuB,QAAQ;AAAA,IAC/B,gBAAgB,QAAQ;AAAA,EAC1B,CAAC;AAED,QAAM,OAAO,kBAAkB;AAAA,IAC7B,SAAS,YAAY;AAAA,IACrB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,QAAQ;AAAA,EAC1B,CAAC;AAED,SAAO,EAAE,MAAM,KAAK,MAAM,OAAO,YAAY,MAAM;AACrD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-react",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "React adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
   "license": "MIT",
   "type": "module",
@@ -30,10 +30,10 @@
     "directory": "packages/adapter-react"
   },
   "dependencies": {
-    "@contentful/experiences-client": "0.4.4",
-    "@contentful/experiences-sdk-core": "0.8.3",
-    "@contentful/experiences-design": "0.8.3",
-    "@contentful/experiences-live-preview": "0.1.3"
+    "@contentful/experiences-client": "0.4.5",
+    "@contentful/experiences-sdk-core": "0.8.4",
+    "@contentful/experiences-design": "0.8.4",
+    "@contentful/experiences-live-preview": "0.1.5"
   },
   "devDependencies": {
     "jsdom": "^30.0.1"