@contentful/experiences-svelte 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -1,3 +1,153 @@
+## 0.11.0 (2026-10-08)
+
+### 🚀 Features
+
+- ⚠️  remove sdk viewport surface [SPA-5275] ([#220](https://github.com/contentful/experiences/pull/220))
+
+### ⚠️  Breaking Changes
+
+- remove sdk viewport surface [SPA-5275]  ([#220](https://github.com/contentful/experiences/pull/220))
+  The SDK no longer exposes viewport definitions, viewport-aware design-value resolution, or active-viewport hooks. Use CSS media queries or application-owned matchMedia integration for responsive behavior. Delivered design property values are now flat and require no migration."
+  M	AGENTS.md
+  M	ARCHITECTURE.md
+  M	CONTRIBUTING.md
+  M	README.md
+  M	catalog-info.yaml
+  M	examples/angular/README.md
+  M	examples/angular/src/app/components/heading.component.ts
+  D	examples/angular/src/app/lib/detect-viewport.ts
+  M	examples/angular/src/app/lib/experience-config.ts
+  M	examples/angular/src/app/lib/experience-route-data.ts
+  M	examples/angular/src/app/pages/experience-page.component.ts
+  M	examples/angular/src/server.ts
+  M	examples/nextjs/README.md
+  M	examples/nextjs/app/[slug]/page.tsx
+  M	examples/nextjs/components/Heading.tsx
+  M	examples/nextjs/components/LivePreviewExperience.tsx
+  M	examples/nextjs/components/Section.tsx
+  D	examples/nextjs/lib/detect-viewport.ts
+  M	examples/nextjs/lib/experience-config.tsx
+  M	examples/scripts/bootstrap-example.ts
+  M	examples/scripts/fixture/experience.ts
+  M	examples/scripts/fixture/types.ts
+  M	examples/sveltekit/README.md
+  M	examples/sveltekit/src/lib/components/Heading.svelte
+  D	examples/sveltekit/src/lib/detect-viewport.ts
+  M	examples/sveltekit/src/lib/experience-config.ts
+  M	examples/sveltekit/src/routes/[slug]/+page.server.ts
+  M	examples/sveltekit/src/routes/[slug]/+page.svelte
+  M	examples/sveltekit/vite.config.ts
+  M	package-lock.json
+  M	packages/adapter-angular/README.md
+  M	packages/adapter-angular/src/client-experience-renderer.component.ts
+  M	packages/adapter-angular/src/context.ts
+  M	packages/adapter-angular/src/debug-experience.test.ts
+  M	packages/adapter-angular/src/debug-panel-coverage.ssr.test.ts
+  M	packages/adapter-angular/src/debug-panel-coverage.test.ts
+  M	packages/adapter-angular/src/dom-parity.test.ts
+  M	packages/adapter-angular/src/experience-defaults.ts
+  M	packages/adapter-angular/src/experience-scope.ts
+  M	packages/adapter-angular/src/index.ts
+  D	packages/adapter-angular/src/inject-active-viewport.ts
+  M	packages/adapter-angular/src/inject-design-values.ts
+  M	packages/adapter-angular/src/inject-experience-plan.ts
+  M	packages/adapter-angular/src/live-preview-experience.ssr.test.ts
+  M	packages/adapter-angular/src/live-preview-experience.test.ts
+  M	packages/adapter-angular/src/node-render-engine.test.ts
+  M	packages/adapter-angular/src/node-render-engine.ts
+  M	packages/adapter-angular/src/node-scopes.ts
+  M	packages/adapter-angular/src/nodes-renderer.ssr.test.ts
+  M	packages/adapter-angular/src/server-experience-renderer.component.ts
+  M	packages/adapter-angular/src/server-renderer.test.ts
+  M	packages/adapter-angular/src/test-fixtures/render-harness.ts
+  M	packages/adapter-angular/src/types.ts
+  M	packages/adapter-react/README.md
+  M	packages/adapter-react/src/client-renderer.tsx
+  M	packages/adapter-react/src/context.tsx
+  M	packages/adapter-react/src/debug-experience.test.tsx
+  M	packages/adapter-react/src/debug-experience.tsx
+  M	packages/adapter-react/src/debug-panel-coverage.test.tsx
+  M	packages/adapter-react/src/index.ts
+  M	packages/adapter-react/src/nodes-renderer.ssr.test.tsx
+  M	packages/adapter-react/src/nodes-renderer.test.tsx
+  M	packages/adapter-react/src/nodes-renderer.tsx
+  M	packages/adapter-react/src/server-renderer.test.tsx
+  M	packages/adapter-react/src/server-renderer.tsx
+  M	packages/adapter-react/src/types.ts
+  D	packages/adapter-react/src/use-active-viewport.ts
+  M	packages/adapter-react/src/use-design-values.tsx
+  M	packages/adapter-react/src/use-experience-plan.test.tsx
+  M	packages/adapter-react/src/use-experience-plan.ts
+  M	packages/adapter-react/src/use-live-preview-experience.test.tsx
+  M	packages/adapter-react/src/use-live-preview.test.tsx
+  M	packages/adapter-svelte/README.md
+  M	packages/adapter-svelte/src/ClientExperienceRenderer.svelte
+  M	packages/adapter-svelte/src/DebugExperience.svelte
+  M	packages/adapter-svelte/src/DebugExperience.test.ts
+  M	packages/adapter-svelte/src/NodeRenderer.svelte
+  M	packages/adapter-svelte/src/NodeRenderer.test.ts
+  M	packages/adapter-svelte/src/NodesRenderer.svelte
+  M	packages/adapter-svelte/src/ServerExperienceRenderer.svelte
+  M	packages/adapter-svelte/src/component-props.ts
+  M	packages/adapter-svelte/src/context.ts
+  M	packages/adapter-svelte/src/debug-panel-coverage.ssr.test.ts
+  M	packages/adapter-svelte/src/debug-panel-coverage.test.ts
+  M	packages/adapter-svelte/src/get-design-values.ts
+  M	packages/adapter-svelte/src/index.ts
+  M	packages/adapter-svelte/src/nodes-renderer.ssr.test.ts
+  M	packages/adapter-svelte/src/server-renderer.test.ts
+  M	packages/adapter-svelte/src/types.ts
+  D	packages/adapter-svelte/src/use-active-viewport.svelte.ts
+  M	packages/adapter-svelte/src/use-experience-plan.test.ts
+  M	packages/adapter-svelte/src/use-live-preview-experience.test.ts
+  M	packages/adapter-svelte/src/use-live-preview.test.ts
+  M	packages/client/src/contentful-experiences.test.ts
+  M	packages/client/src/contentful-experiences.ts
+  M	packages/client/src/fetch-experience.test.ts
+  M	packages/client/src/fetch-experience.ts
+  M	packages/core/README.md
+  A	packages/core/src/design-properties.test.ts
+  A	packages/core/src/design-properties.ts
+  M	packages/core/src/index.ts
+  M	packages/core/src/resolve-experience.test.ts
+  M	packages/core/src/resolve-experience.ts
+  M	packages/core/src/types.ts
+  D	packages/core/src/viewport.test.ts
+  D	packages/core/src/viewport.ts
+  M	packages/design/README.md
+  M	packages/design/package.json
+  M	packages/design/src/index.ts
+  D	packages/design/src/media-query-matchers.ts
+  D	packages/design/src/select-resolved-design.ts
+  D	packages/design/src/viewport.test.ts
+  D	packages/design/src/viewport.ts
+  M	packages/live-preview/README.md
+  M	packages/live-preview/src/experience-payload.ts
+  M	packages/live-preview/src/fetch-preview-session.test.ts
+  M	packages/live-preview/src/fetch-preview-session.ts
+  M	packages/live-preview/src/live-preview-client.test.ts
+  M	packages/node/README.md
+  M	packages/node/src/contentful-experiences.test.ts
+  M	packages/node/src/contentful-experiences.ts
+  M	packages/web/README.md
+  M	packages/web/src/contentful-experiences.test.ts
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.6.0
+- Updated client to 0.9.0
+- Updated design to 0.12.0
+- Updated core to 0.12.0
+
+## 0.10.0 (2026-10-06)
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.5.0
+- Updated client to 0.8.0
+- Updated design to 0.11.0
+- Updated core to 0.11.0
+
 ## 0.9.1 (2026-10-01)
 
 ### 🚀 Features

package/README.md

@@ -107,11 +107,10 @@ fails. The last valid `data` remains available.
 ### Renderers
 
 ```ts
-ServerExperienceRenderer; // SSR-safe; active viewport seeded from initialViewportId
-ClientExperienceRenderer; // Subscribes to window.matchMedia via runes
+ServerExperienceRenderer; // SSR-safe renderer
+ClientExperienceRenderer; // Client renderer
 MissingComponent; // Default fallback for unregistered component types
 NodesRenderer; // Exposed so you can re-render a slot's raw nodes yourself (see Slot children)
-useActiveViewport; // Rune-backed reactive object; you'll rarely need it directly
 ```
 
 ### Styling + runtime context (helpers)
@@ -119,13 +118,13 @@ useActiveViewport; // Rune-backed reactive object; you'll rarely need it directl
 ```ts
 getDesignValues<T>(); // Escape hatch: the same resolved design record that auto-fills props; read in a $derived to stay reactive
 toCss(design, options?); // Turns a design record into a plain style object, keeping only real CSS keys
-getExperience(); // RenderContext: debug, metadata, viewports, activeViewport
+getExperience(); // RenderContext: debug, metadata
 getContentfulComponent(); // Raw payload for the enclosing node (or undefined)
 getContentfulExperienceTemplate(); // Same, for an enclosing coded Experience Template node
 type ToCssOptions;
 ```
 
-Resolved design values (viewport-cascaded + token-resolved server-side) are **auto-filled onto your component's props** by key, alongside content. Styling from `$props()` is the one recommended path. `getDesignValues()` exposes the same record (read it in a `$derived` to stay reactive) as an escape hatch. Reach for it only for a nested child that isn't itself a registered component, or for design needed outside the render path (an effect, an imperative measurement) — see [Styling components](../../README.md#styling-components). Token resolution is configured with `resolveToken` on your `Config` (`type ResolveToken`).
+Resolved design values are **auto-filled onto your component's props** by key, alongside content. Styling from `$props()` is the one recommended path. `getDesignValues()` exposes the same record as an escape hatch. Reach for it only for a nested child that isn't itself a registered component, or for design needed outside the render path (an effect, an imperative measurement) — see [Styling components](../../README.md#styling-components). Token resolution is configured with `resolveToken` on your `Config` (`type ResolveToken`).
 
 ### Re-exported types and utilities
 
@@ -137,12 +136,10 @@ type ContentfulComponent, ContentfulExperienceTemplate,
 type RenderContext, ResolveToken,
 type ExperiencePayload, ExperienceNode, ComponentNode, ExperienceTemplateNode,
 type PortableRenderPlan, PortableRenderNode, PortableRegistration,
-type DesignPropValue, ManualDesignValue, DesignToken, ValuesByViewport,
-type ViewportDef, ExperienceContext, ResolveContext,
+type DesignPropValue, ManualDesignValue, DesignToken, ExperienceContext, ResolveContext,
 type ResolverConfig, ResolveExperienceOptions
 
-// From design (if you want to do your own viewport-aware resolution)
-getValueForViewport, getViewportIndex, resolveDesignProperties, toCssMediaQuery,
+// From design
 isCssProperty, toCssKey, CSS_PROPERTIES
 
 // From client
@@ -244,7 +241,7 @@ Every slot arrives as a prop named after the slot, holding an **array of Snippet
 
 If you'd rather render a slot's raw nodes yourself, they are still on the payload at `getContentfulComponent().slots` (a `Record<string, PortableRenderNode[]>`) — hand them to `NodesRenderer`.
 
-For the full getting-started walkthrough, the merge-precedence rules, viewport handling, and design rationale, see the [root README](../../README.md) and [`AGENTS.md`](../../AGENTS.md).
+For the full getting-started walkthrough, merge-precedence rules, and design rationale, see the [root README](../../README.md) and [`AGENTS.md`](../../AGENTS.md).
 
 ---
 

package/dist/ClientExperienceRenderer.svelte

@@ -1,15 +1,9 @@
 <!--
- * Client Experience renderer. First paint matches the server renderer
- * (active viewport resolved from `initialViewportId`); after hydration,
- * `useActiveViewport` takes over via `window.matchMedia` and re-renders
- * when the viewport changes.
- *
- * Safe to render on the server: `useActiveViewport` no-ops outside the
- * browser, so SSR output matches `<ServerExperienceRenderer>` given the
- * same seed.
+ * Client Experience renderer. It renders the resolved plan directly, with no
+ * browser-only design-property work.
 -->
 <script lang="ts">
-  import type { ExperienceContext, ViewportDef } from '@contentful/experiences-sdk-core';
+  import type { ExperienceContext } from '@contentful/experiences-sdk-core';
 
   import ComponentError from './ComponentError.svelte';
   import DebugExperience from './DebugExperience.svelte';
@@ -18,25 +12,15 @@
   import type { ClientExperienceRendererProps } from './component-props.js';
   import { setExperience } from './context.js';
   import type { RenderContext } from './types.js';
-  import { useActiveViewport } from './use-active-viewport.svelte.js';
 
   const DEFAULT_CONTEXT: ExperienceContext = {
     debug: false,
     metadata: {},
-    viewports: [],
-  };
-
-  const FALLBACK_VIEWPORT: ViewportDef = {
-    id: '_',
-    query: '*',
-    displayName: 'Default',
-    previewSize: '100%',
   };
 
   let {
     experience,
     config,
-    initialViewportId,
     metadata,
     debug,
     renderUnknown = MissingComponent,
@@ -70,15 +54,8 @@
     });
   }
 
-  const viewports = $derived(experience?.viewports ?? []);
-  // Seed from the plan so first paint matches the server renderer.
-  const seedViewportId = $derived(
-    initialViewportId ?? experience?.viewports[experience.fallbackViewportIndex]?.id
-  );
-  const tracker = useActiveViewport(viewports, seedViewportId);
-
   // A $state-backed mirror so descendants reading getExperience() stay
-  // reactive across viewport changes. The fields update in an $effect below.
+  // reactive when the plan or rendering options change.
   const liveContext = $state<RenderContext>({
     ...DEFAULT_CONTEXT,
     debug: debug ?? experience?.debug ?? false,
@@ -87,21 +64,12 @@
       ...(experience?.metadata ?? {}),
       ...(metadata ?? {}),
     },
-    viewports: experience?.viewports ?? [],
-    activeViewport: experience?.viewports[0] ?? FALLBACK_VIEWPORT,
-    activeViewportIndex: 0,
-    fallbackViewportIndex: experience?.fallbackViewportIndex ?? 0,
   });
 
   setExperience(liveContext);
 
   $effect(() => {
     if (!experience) return;
-    const idx = tracker.activeViewportIndex;
-    liveContext.viewports = experience.viewports;
-    liveContext.activeViewport = experience.viewports[idx] ?? FALLBACK_VIEWPORT;
-    liveContext.activeViewportIndex = idx;
-    liveContext.fallbackViewportIndex = experience.fallbackViewportIndex;
     liveContext.debug = resolvedDebug;
     liveContext.metadata = {
       ...DEFAULT_CONTEXT.metadata,

package/dist/ClientExperienceRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"AA+HA,QAAA,MAAM,wBAAwB,kGAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAoGA,QAAA,MAAM,wBAAwB,kGAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/DebugExperience.svelte

@@ -1,15 +1,15 @@
 <!--
  * First-party debug panel. Renders the resolved Experience plan as pretty
  * JSON so a customer can see exactly what the SDK interpreted from the payload
- * — node tree, registrations, resolved props, viewports.
+ * — node tree, registrations, and resolved props.
  *
  * Two ways to use it:
  *  - Auto-mounted by the renderers when `debug` is on (above the tree).
  *  - Mounted manually anywhere: `<DebugExperience experience={plan} />`.
  *
  * v1 is just the JSON dump wrapped in a native <details> so it collapses
- * without any extra JS. Room to grow into a node-tree explorer, viewport
- * indicator, and resolveData timing panel — kept deliberately small for now.
+ * without any extra JS. Room to grow into a node-tree explorer and resolveData
+ * timing panel — kept deliberately small for now.
 -->
 <script lang="ts">
   import type { DebugExperienceProps } from './component-props.js';

package/dist/DebugExperience.test.js

@@ -3,8 +3,6 @@ import { describe, expect, it } from 'vitest';
 import DebugExperience from './DebugExperience.svelte';
 const emptyPlan = {
     nodes: [],
-    viewports: [],
-    fallbackViewportIndex: 0,
     metadata: {},
     debug: false,
     diagnostics: [],
@@ -40,9 +38,7 @@ describe('DebugExperience.svelte', () => {
         const { container: zero } = render(DebugExperience, { props: { experience: emptyPlan } });
         expect(zero.innerHTML).toContain('Experience debug — 0 top-level nodes');
         const one = {
-            viewports: [],
             nodes: [node('button')],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -52,9 +48,7 @@ describe('DebugExperience.svelte', () => {
     });
     it('names experienceTemplate nodes in the summary', () => {
         const plan = {
-            viewports: [],
             nodes: [templateNode('page')],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -64,9 +58,7 @@ describe('DebugExperience.svelte', () => {
     });
     it('omits the experience-template summary for a composite experience', () => {
         const plan = {
-            viewports: [],
             nodes: [node('button'), node('text')],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -77,9 +69,7 @@ describe('DebugExperience.svelte', () => {
     });
     it('dumps the plan as pretty JSON', () => {
         const plan = {
-            viewports: [],
             nodes: [node('button', { label: 'Go' })],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -93,9 +83,7 @@ describe('DebugExperience.svelte', () => {
         const n = node('button');
         n.props.resolved = { self: n.props };
         const plan = {
-            viewports: [],
             nodes: [n],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -117,9 +105,7 @@ describe('DebugExperience.svelte', () => {
             },
         });
         const plan = {
-            viewports: [],
             nodes: [n],
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],

package/dist/NodeRenderer.svelte

@@ -12,7 +12,6 @@
   import type { Snippet } from 'svelte';
 
   import type { PortableRenderNode } from '@contentful/experiences-sdk-core';
-  import { selectResolvedDesign } from '@contentful/experiences-design';
 
   import {
     setContentfulComponent,
@@ -58,7 +57,7 @@
   const isExperienceTemplate = kind === 'experienceTemplate';
 
   // Any reactive re-run of this component's `$derived`/`{@const}` blocks
-  // (e.g. an ancestor's viewport change) would otherwise re-report the same
+  // would otherwise re-report the same
   // diagnostic every time — matches Angular's `lastDiagnostics` guard in
   // NodeRenderEngine and React's equivalent in NodeRenderer. `reported` is a
   // plain (non-reactive) binding, stable for this component instance's
@@ -102,21 +101,7 @@
     setContentfulComponent(contentful);
   }
 
-  const tokenResolvedDesign = $derived.by(() => {
-    const { props, unresolved } = selectResolvedDesign(
-      node.props,
-      experience.viewports,
-      experience.activeViewportIndex,
-      experience.fallbackViewportIndex,
-      config.resolveToken
-    );
-    if (unresolved.length && typeof console !== 'undefined') {
-      console.warn(
-        `[@contentful/experiences-svelte] resolveToken returned undefined for token id(s) on ${kind} "${id}": ${unresolved.join(', ')}. getDesignValues() will omit those keys.`
-      );
-    }
-    return props;
-  });
+  const tokenResolvedDesign = $derived(node.props.design);
 
   setResolvedDesign(() => tokenResolvedDesign);
 

package/dist/NodeRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/NodeRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAQ3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAKH,KAAK,MAAM,EACX,KAAK,aAAa,EACnB,MAAM,YAAY,CAAC;AAGpB,UAAU,iBAAiB;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;IACjC;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;CACzC;AAgKH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/NodeRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAO3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAKH,KAAK,MAAM,EACX,KAAK,aAAa,EACnB,MAAM,YAAY,CAAC;AAGpB,UAAU,iBAAiB;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;IACjC;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;CACzC;AAiJH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/NodeRenderer.test.js

@@ -5,7 +5,7 @@
  * for that documented, proven gap. Both `ServerExperienceRenderer` and
  * `ClientExperienceRenderer` share the same `NodesRenderer`/`NodeRenderer`
  * boundary code, so both are exercised — the distinction between the two
- * components is about viewport-tracking reactivity, not error handling.
+ * components is about client-side reactivity, not error handling.
  */
 import { render } from '@testing-library/svelte';
 import { describe, expect, it, vi } from 'vitest';
@@ -20,7 +20,6 @@ import ClientExperienceRenderer from './ClientExperienceRenderer.svelte';
 import ServerExperienceRenderer from './ServerExperienceRenderer.svelte';
 import BrokenFixture from './test-fixtures/BrokenFixture.svelte';
 import ButtonFixture from './test-fixtures/ButtonFixture.svelte';
-const VIEWPORTS = [{ id: 'desktop', query: '*', displayName: 'Desktop', previewSize: '100%' }];
 function componentNode(typeId, rest = {}) {
     return {
         component: {
@@ -41,7 +40,6 @@ describe.each([
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [
                     componentNode('broken', { id: 'b' }),
                     componentNode('contentful-button', { id: 'f', contentProperties: { label: 'sibling' } }),
@@ -81,7 +79,6 @@ describe.each([
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [componentNode('broken', { id: 'b' })],
             };
             const config = { components: { broken: BrokenFixture } };
@@ -102,7 +99,6 @@ describe('ClientExperienceRenderer — render-time diagnostics dedupe across re-
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [componentNode('missing', { id: 'm' })],
             };
             const config = { components: {} };
@@ -111,7 +107,7 @@ describe('ClientExperienceRenderer — render-time diagnostics dedupe across re-
                 props: { experience: plan, config, debug: true },
             });
             // Force NodeRenderer's reactive blocks to re-run without any real new
-            // occurrence — an ancestor re-render (a viewport change, an unrelated
+            // occurrence — an ancestor re-render (an unrelated
             // parent update) does the same thing in production.
             await rerender({ experience: plan, config, debug: true });
             expect(container.querySelectorAll('[data-experiences-debug-errors] li')).toHaveLength(1);

package/dist/NodesRenderer.svelte

@@ -17,8 +17,7 @@
  * The Experience runtime context and the raw Contentful payload are read
  * via `getExperience` / `getContentfulComponent`.
  *
- * Server vs client variants share this component; they differ only in how
- * the active viewport is sourced (initial seed vs reactive matchMedia).
+ * Server and client renderers share this component.
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';

package/dist/ServerExperienceRenderer.svelte

@@ -1,15 +1,12 @@
 <!--
- * Server-safe Experience renderer. Resolves the active viewport once from
- * `initialViewportId` (typically derived from User-Agent on the request)
- * and renders without any reactive subscription. SSR-friendly.
+ * Server-safe Experience renderer. It renders the resolved plan directly.
  *
  * SSR + interactive editor mode are mutually exclusive — the message-event
  * preview client requires window listeners and lives only in the client
  * renderer. For editor mode, render the client variant on a hydrated route.
 -->
 <script lang="ts">
-  import type { ExperienceContext, ViewportDef } from '@contentful/experiences-sdk-core';
-  import { getViewportIndex } from '@contentful/experiences-design';
+  import type { ExperienceContext } from '@contentful/experiences-sdk-core';
 
   import ComponentError from './ComponentError.svelte';
   import DebugExperience from './DebugExperience.svelte';
@@ -22,20 +19,11 @@
   const DEFAULT_CONTEXT: ExperienceContext = {
     debug: false,
     metadata: {},
-    viewports: [],
-  };
-
-  const FALLBACK_VIEWPORT: ViewportDef = {
-    id: '_',
-    query: '*',
-    displayName: 'Default',
-    previewSize: '100%',
   };
 
   let {
     experience,
     config,
-    initialViewportId,
     metadata,
     debug,
     renderUnknown = MissingComponent,
@@ -46,13 +34,6 @@
   const resolvedDebug = $derived(debug ?? experience?.debug ?? false);
 
   function buildContext(): RenderContext {
-    const viewports = experience?.viewports ?? [];
-    // Default to the pre-resolved viewport so first paint needs no recompute.
-    const idx = !experience
-      ? 0
-      : initialViewportId === undefined
-        ? experience.fallbackViewportIndex
-        : getViewportIndex(experience.viewports, initialViewportId);
     return {
       ...DEFAULT_CONTEXT,
       debug: resolvedDebug,
@@ -61,10 +42,6 @@
         ...(experience?.metadata ?? {}),
         ...(metadata ?? {}),
       },
-      viewports,
-      activeViewport: experience?.viewports[idx] ?? FALLBACK_VIEWPORT,
-      activeViewportIndex: idx,
-      fallbackViewportIndex: experience?.fallbackViewportIndex ?? 0,
     };
   }
 

package/dist/ServerExperienceRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AA0F1E,QAAA,MAAM,wBAAwB,mEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAqE1E,QAAA,MAAM,wBAAwB,mEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/component-props.d.ts

@@ -4,7 +4,6 @@ import type { Config } from './types.js';
 export interface ServerExperienceRendererProps {
     experience: PortableRenderPlan | null | undefined;
     config: Config;
-    initialViewportId?: string;
     /** Shallow-merges over the plan's `metadata`. Only needed to override it. */
     metadata?: Record<string, unknown>;
     /**

package/dist/component-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-props.d.ts","sourceRoot":"","sources":["../src/component-props.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yEAAyE;IACzE,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAE7D,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAC;AAEzD;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAExD,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB"}
+{"version":3,"file":"component-props.d.ts","sourceRoot":"","sources":["../src/component-props.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yEAAyE;IACzE,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAE7D,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAC;AAEzD;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAExD,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB"}

package/dist/context.d.ts

@@ -5,7 +5,7 @@ export declare function setContentfulExperienceTemplate(tpl: ContentfulExperienc
 /**
  * Publish the resolved design values for the enclosing node or experience template. Takes a
  * getter (not a snapshot) so callers reading it inside a `$derived` stay
- * reactive across viewport changes.
+ * reactive across plan changes.
  */
 export declare function setResolvedDesign(getDesign: () => Record<string, unknown>): void;
 export declare function getExperience(): RenderContext;

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AASnG,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAEtD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAEtE;AAED,wBAAgB,+BAA+B,CAAC,GAAG,EAAE,4BAA4B,GAAG,IAAI,CAEvF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAEhF;AAED,wBAAgB,aAAa,IAAI,aAAa,CAQ7C;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,SAAS,CAExE;AAED,wBAAgB,+BAA+B,IAAI,4BAA4B,GAAG,SAAS,CAE1F;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAGvE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AASnG,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAEtD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAEtE;AAED,wBAAgB,+BAA+B,CAAC,GAAG,EAAE,4BAA4B,GAAG,IAAI,CAEvF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAEhF;AAED,wBAAgB,aAAa,IAAI,aAAa,CAQ7C;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,SAAS,CAExE;AAED,wBAAgB,+BAA+B,IAAI,4BAA4B,GAAG,SAAS,CAE1F;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAGvE"}

package/dist/context.js

@@ -6,8 +6,7 @@
  * the helper from the top of its `<script>` block.
  *
  * Reactivity: the client renderer stores a `$state` proxy in context, so
- * reads through the returned object (`exp.activeViewport`, from the
- * template or a `$derived`) stay reactive across viewport changes.
+ * reads through the returned object stay reactive across plan changes.
  * Destructuring the return of `getExperience()` loses that reactivity —
  * same rule as Svelte 5 `$props()`.
  *
@@ -32,7 +31,7 @@ export function setContentfulExperienceTemplate(tpl) {
 /**
  * Publish the resolved design values for the enclosing node or experience template. Takes a
  * getter (not a snapshot) so callers reading it inside a `$derived` stay
- * reactive across viewport changes.
+ * reactive across plan changes.
  */
 export function setResolvedDesign(getDesign) {
     setContext(RESOLVED_DESIGN_KEY, getDesign);

package/dist/debug-panel-coverage.ssr.test.js

@@ -16,7 +16,6 @@ import { render } from 'svelte/server';
 import { resolveExperience } from '@contentful/experiences-sdk-core';
 import ServerExperienceRenderer from './ServerExperienceRenderer.svelte';
 import ButtonFixture from './test-fixtures/ButtonFixture.svelte';
-const VIEWPORTS = [{ id: 'desktop', query: '*', displayName: 'Desktop', previewSize: '100%' }];
 function componentNode(typeId, rest = {}) {
     return {
         component: {
@@ -34,7 +33,6 @@ describe('debug panel — true SSR coverage of a resolve-time diagnostic', () =>
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [
                     componentNode('button', {
                         id: 'b',