@contentful/experiences-svelte 0.10.0 → 0.11.0

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

@@ -25,7 +25,6 @@ import ButtonFixture from './test-fixtures/ButtonFixture.svelte';
 async function flushMicrotasks() {
     await new Promise((resolve) => queueMicrotask(resolve));
 }
-const VIEWPORTS = [{ id: 'desktop', query: '*', displayName: 'Desktop', previewSize: '100%' }];
 function componentNode(typeId, rest = {}) {
     return {
         component: {
@@ -42,7 +41,7 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
     it('malformed-payload: a non-array nodes field', async () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
-            const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: 'not-an-array' }, { components: {} });
+            const plan = await resolveExperience({ nodes: 'not-an-array' }, { components: {} });
             const { container } = render(ServerExperienceRenderer, {
                 props: { experience: plan, config: { components: {} }, debug: true },
             });
@@ -57,7 +56,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [
                     componentNode('contentful-container', {
                         id: 'page',
@@ -81,7 +79,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [{ pattern: {} }, componentNode('button', { id: 'b' })],
             };
             const config = { components: { button: ButtonFixture } };
@@ -100,7 +97,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [componentNode('button', { id: 'b' })],
             };
             const config = {
@@ -131,7 +127,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [
                     componentNode('button', {
                         id: 'b',
@@ -159,7 +154,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [componentNode('missing', { id: 'm' })],
             };
             const config = { components: {} };
@@ -178,7 +172,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [
                     {
                         experienceTemplate: {
@@ -208,7 +201,6 @@ describe('debug panel — end-to-end coverage of every non-happy-path failure mo
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         try {
             const payload = {
-                viewports: VIEWPORTS,
                 nodes: [componentNode('broken', { id: 'b' })],
             };
             const config = { components: { broken: BrokenFixture } };

package/dist/get-design-values.d.ts

@@ -1,7 +1,7 @@
 /**
- * Read the current node's resolved design values (viewport-cascaded +
- * token-resolved). Returns `{}` when there's no design in scope. Read it
- * inside a `$derived` to stay current across viewport changes.
+ * Read the current node's token-resolved design values. Returns `{}` when
+ * there's no design in scope. Read it inside a `$derived` to stay current
+ * across plan changes.
  *
  * Pass a type argument to shape the bag:
  *

package/dist/get-design-values.js

@@ -1,8 +1,8 @@
 import { getResolvedDesign } from './context.js';
 /**
- * Read the current node's resolved design values (viewport-cascaded +
- * token-resolved). Returns `{}` when there's no design in scope. Read it
- * inside a `$derived` to stay current across viewport changes.
+ * Read the current node's token-resolved design values. Returns `{}` when
+ * there's no design in scope. Read it inside a `$derived` to stay current
+ * across plan changes.
  *
  * Pass a type argument to shape the bag:
  *

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export { default as MissingComponent } from './MissingComponent.svelte';
 export { default as ComponentError } from './ComponentError.svelte';
 export { default as DebugExperience } from './DebugExperience.svelte';
 export { default as NodesRenderer } from './NodesRenderer.svelte';
-export { useActiveViewport } from './use-active-viewport.svelte.js';
-export type { UseActiveViewportResult } from './use-active-viewport.svelte.js';
 export { useLivePreviewExperience } from './use-live-preview-experience.svelte.js';
 export type { UseLivePreviewExperienceOptions, UseLivePreviewExperienceResult, } from './use-live-preview-experience.svelte.js';
 export { useLivePreview } from './use-live-preview.svelte.js';
@@ -26,8 +24,8 @@ export { resolveExperience } from '@contentful/experiences-sdk-core';
 export type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';
 export { DEFAULT_PAGE_PROPERTIES, EventBuilder } from '@contentful/experiences-client';
 export type { ClickBuilderArgs, EventBuilderConfig, FlagViewBuilderArgs, HoverBuilderArgs, IdentifyBuilderArgs, InteractionBuilderArgsBase, PageViewBuilderArgs, TrackBuilderArgs, UniversalEventBuilderArgs, ViewBuilderArgs, } from '@contentful/experiences-client';
-export type { ComponentNode, ComponentRef, DesignPropValue, DesignToken, ExperienceContext, ExperienceNode, ExperiencePayload, ExperienceSourceMap, ExperienceSys, ExperienceTemplateNode, ExperienceTemplateRef, ManualDesignValue, PortableRegistration, PortableRenderNode, PortableRenderPlan, ResolveContext, ValuesByViewport, ViewportDef, } from '@contentful/experiences-sdk-core';
-export { CSS_PROPERTIES, getValueForViewport, getViewportIndex, isCssProperty, resolveDesignProperties, toCssKey, toCssMediaQuery, } from '@contentful/experiences-design';
+export type { ComponentNode, ComponentRef, DesignPropValue, DesignToken, ExperienceContext, ExperienceNode, ExperiencePayload, ExperienceSourceMap, ExperienceSys, ExperienceTemplateNode, ExperienceTemplateRef, ManualDesignValue, PortableRegistration, PortableRenderNode, PortableRenderPlan, ResolveContext, } from '@contentful/experiences-sdk-core';
+export { CSS_PROPERTIES, isCssProperty, toCssKey } from '@contentful/experiences-design';
 export { ANONYMOUS_ID_COOKIE, ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, readSourceMap, toExperiencePayload, toExperiencePayloadFromDestination, } from '@contentful/experiences-client';
 export type { ByDestinationNodeIdExperienceOptions, ByDestinationPathExperienceOptions, ByIdExperienceOptions, ClientOptions, CreateClientOptions, DestinationRedirectResult, ExperienceOptions, ExperienceResponse, ResolveOptions, } from '@contentful/experiences-client';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -2,7 +2,7 @@
  * Public API surface for `@contentful/experiences-svelte`.
  *
  * Customers add ONLY this package to their app's dependencies. Everything
- * needed to render an Experience — types, the resolver, viewport utilities,
+ * needed to render an Experience — types, the resolver, design utilities,
  * the renderer components, the authoring helpers — is re-exported from here.
  * The internal `@contentful/experiences-sdk-core` and
  * `@contentful/experiences-design` packages are workspace-only implementation
@@ -22,7 +22,6 @@ export { default as DebugExperience } from './DebugExperience.svelte';
 // advanced customers can render a slot's raw nodes themselves instead:
 // e.g. `<NodesRenderer nodes={contentful.slots.header as PortableRenderNode[]} ... />`.
 export { default as NodesRenderer } from './NodesRenderer.svelte';
-export { useActiveViewport } from './use-active-viewport.svelte.js';
 export { useLivePreviewExperience } from './use-live-preview-experience.svelte.js';
 export { useLivePreview } from './use-live-preview.svelte.js';
 export { useExperiencePlan } from './use-experience-plan.svelte.js';
@@ -38,6 +37,6 @@ export { resolveExperience } from '@contentful/experiences-sdk-core';
 // ─── Event builder (re-exported from client) ──────────────────────────────
 export { DEFAULT_PAGE_PROPERTIES, EventBuilder } from '@contentful/experiences-client';
 // ─── Design utilities (re-exported from design) ───────────────────────────
-export { CSS_PROPERTIES, getValueForViewport, getViewportIndex, isCssProperty, resolveDesignProperties, toCssKey, toCssMediaQuery, } from '@contentful/experiences-design';
+export { CSS_PROPERTIES, isCssProperty, toCssKey } from '@contentful/experiences-design';
 // ─── Delivery client + fetchExperience ────────────────────────────────────
 export { ANONYMOUS_ID_COOKIE, ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, readSourceMap, toExperiencePayload, toExperiencePayloadFromDestination, } from '@contentful/experiences-client';

package/dist/nodes-renderer.ssr.test.js

@@ -19,7 +19,6 @@ import BrokenFixture from './test-fixtures/BrokenFixture.svelte';
 import ButtonFixture from './test-fixtures/ButtonFixture.svelte';
 import ContainerFixture from './test-fixtures/ContainerFixture.svelte';
 import ExperienceTemplateFixture from './test-fixtures/ExperienceTemplateFixture.svelte';
-const VIEWPORTS = [{ id: 'desktop', query: '*', displayName: 'Desktop', previewSize: '100%' }];
 const componentNode = (typeId, rest = {}) => ({
     component: {
         sys: {
@@ -62,7 +61,6 @@ const renderPlan = async (payload) => {
 describe('NodesRenderer — SSR (server-compiled output)', () => {
     it('renders a component node’s slot children', async () => {
         const html = await renderPlan({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('contentful-container', {
                     id: 'container',
@@ -77,7 +75,6 @@ describe('NodesRenderer — SSR (server-compiled output)', () => {
     });
     it('renders a coded Experience Template node’s named `content` slot', async () => {
         const html = await renderPlan({
-            viewports: VIEWPORTS,
             nodes: [
                 experienceTemplateNode('page', {
                     id: 'tpl',
@@ -95,7 +92,6 @@ describe('NodesRenderer — SSR (server-compiled output)', () => {
     });
     it('renders deeply nested slot children', async () => {
         const html = await renderPlan({
-            viewports: VIEWPORTS,
             nodes: [
                 experienceTemplateNode('page', {
                     id: 'tpl',
@@ -118,7 +114,6 @@ describe('NodesRenderer — SSR (server-compiled output)', () => {
     });
     it('renders a composite experience unwrapped', async () => {
         const html = await renderPlan({
-            viewports: VIEWPORTS,
             nodes: [button('Alone')],
         });
         expect(html).toContain('Alone');
@@ -141,7 +136,6 @@ describe('NodesRenderer — SSR component-render-error (the documented gap)', ()
     };
     it('has no recovery path under svelte/server — no graceful fallback markup is produced', async () => {
         const payload = {
-            viewports: VIEWPORTS,
             nodes: [componentNode('broken', { id: 'b' }), button('sibling')],
         };
         const plan = await resolveExperience(payload, brokenConfig);

package/dist/server-renderer.test.js

@@ -12,16 +12,7 @@ import ExperienceTemplateFixture from './test-fixtures/ExperienceTemplateFixture
 import WrappingContainerFixture from './test-fixtures/WrappingContainerFixture.svelte';
 import { captureSink } from './test-fixtures/capture-sink.js';
 import { toCss } from './design-utils.js';
-const VIEWPORTS = [
-    { id: 'desktop', query: '*', displayName: 'Desktop', previewSize: '100%' },
-    { id: 'tablet', query: '<992px', displayName: 'Tablet', previewSize: '100%' },
-    { id: 'mobile', query: '<576px', displayName: 'Mobile', previewSize: '100%' },
-];
 const m = (value) => ({ type: 'ManualDesignValue', value });
-const vbv = (values) => ({
-    type: 'ValuesByViewport',
-    values,
-});
 const dt = (value) => ({ type: 'DesignToken', value });
 function componentNode(typeId, rest = {}) {
     return {
@@ -78,13 +69,12 @@ const config = {
     },
 };
 const payload = {
-    viewports: VIEWPORTS,
     nodes: [
         componentNode('contentful-container', {
             id: 'page',
             contentProperties: {},
             designProperties: {
-                cfPadding: vbv({ desktop: m('40px'), mobile: m('12px') }),
+                cfPadding: m('40px'),
             },
             slots: {
                 children: [
@@ -92,18 +82,14 @@ const payload = {
                         id: 'heading',
                         contentProperties: { text: 'Build faster' },
                         designProperties: {
-                            cfFontSize: vbv({ desktop: m('32px'), mobile: m('20px') }),
+                            cfFontSize: m('32px'),
                         },
                     }),
                     componentNode('contentful-button', {
                         id: 'btn',
                         contentProperties: { label: 'Get started' },
                         designProperties: {
-                            cfBackgroundColor: vbv({
-                                desktop: m('#4f39f6'),
-                                tablet: m('#ff0000'),
-                                mobile: m('#00aa00'),
-                            }),
+                            cfBackgroundColor: m('#4f39f6'),
                         },
                     }),
                 ],
@@ -112,7 +98,7 @@ const payload = {
     ],
 };
 describe('ServerExperienceRenderer', () => {
-    it('renders a nested experience with desktop-resolved design props by default', async () => {
+    it('renders a nested experience with design props', async () => {
         const plan = await resolveExperience(payload, config);
         const { container } = render(ServerExperienceRenderer, {
             props: { experience: plan, config },
@@ -124,25 +110,6 @@ describe('ServerExperienceRenderer', () => {
         expect(html).toContain('Build faster');
         expect(html).toContain('Get started');
     });
-    it('honors initialViewportId when resolving design props', async () => {
-        const plan = await resolveExperience(payload, config);
-        const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config, initialViewportId: 'mobile' },
-        });
-        const html = container.innerHTML;
-        expect(html).toContain('data-padding="12px"');
-        expect(html).toContain('data-font-size="20px"');
-        expect(html).toContain('data-bg="#00aa00"');
-    });
-    it('cascades design values when the active viewport has none', async () => {
-        const plan = await resolveExperience(payload, config);
-        const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config, initialViewportId: 'tablet' },
-        });
-        const html = container.innerHTML;
-        expect(html).toContain('data-font-size="32px"'); // cascaded from desktop
-        expect(html).toContain('data-bg="#ff0000"'); // tablet-specific
-    });
     it('renders nothing meaningful when plan is null/undefined', () => {
         const { container: nullContainer } = render(ServerExperienceRenderer, {
             props: { experience: null, config },
@@ -153,40 +120,12 @@ describe('ServerExperienceRenderer', () => {
         });
         expect(undefContainer.querySelector('*')).toBeNull();
     });
-    it('exposes the active viewport on render context (defaults to viewport[0])', async () => {
-        const captureConfig = { components: { capture: CapturingComponent } };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture')] }, captureConfig);
-        render(ServerExperienceRenderer, {
-            props: { experience: plan, config: captureConfig },
-        });
-        expect(captureSink.length).toBe(1);
-        const ctx = captureSink[0].experience;
-        expect(ctx.activeViewportIndex).toBe(0);
-        expect(ctx.activeViewport).toBe(VIEWPORTS[0]);
-        expect(ctx.viewports).toBe(VIEWPORTS);
-    });
-    it('honors initialViewportId when computing the active viewport', async () => {
-        const captureConfig = { components: { capture: CapturingComponent } };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture')] }, captureConfig);
-        render(ServerExperienceRenderer, {
-            props: {
-                experience: plan,
-                config: captureConfig,
-                initialViewportId: 'mobile',
-            },
-        });
-        const ctx = captureSink[0].experience;
-        expect(ctx.activeViewportIndex).toBe(2);
-        expect(ctx.activeViewport).toBe(VIEWPORTS[2]);
-    });
     it('renders missing-component fallback in debug mode', () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         const justContainer = {
             components: { 'contentful-container': ContainerFixture },
         };
         const planWithMissing = {
-            viewports: VIEWPORTS,
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -224,7 +163,7 @@ describe('ServerExperienceRenderer', () => {
     });
     it('auto-mounts DebugExperience only when debug is on', async () => {
         const captureConfig = { components: { capture: CapturingComponent } };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
+        const plan = await resolveExperience({ nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
         const { container: off } = render(ServerExperienceRenderer, {
             props: { experience: plan, config: captureConfig },
         });
@@ -237,7 +176,7 @@ describe('ServerExperienceRenderer', () => {
     });
     it('threads top-level metadata into getExperience()', async () => {
         const captureConfig = { components: { capture: CapturingComponent } };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
+        const plan = await resolveExperience({ nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
         render(ServerExperienceRenderer, {
             props: { experience: plan, config: captureConfig, metadata: { slug: 'home' } },
         });
@@ -253,7 +192,6 @@ describe('ServerExperienceRenderer', () => {
             },
         };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('item', {
                     id: 'i',
@@ -277,7 +215,6 @@ describe('ServerExperienceRenderer', () => {
             },
         };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('item', {
                     id: 'i',
@@ -300,8 +237,6 @@ describe('ServerExperienceRenderer', () => {
             },
         };
         const planWithResolved = {
-            viewports: VIEWPORTS,
-            fallbackViewportIndex: 0,
             metadata: {},
             debug: false,
             diagnostics: [],
@@ -335,7 +270,6 @@ describe('ServerExperienceRenderer', () => {
         // prop — the fixture renders it, so the child only appears if that holds.
         const tplPayload = {
             sys: sysWithExperienceTemplate('page'),
-            viewports: VIEWPORTS,
             nodes: [
                 experienceTemplateNode('page', {
                     id: 'tpl',
@@ -363,7 +297,6 @@ describe('ServerExperienceRenderer', () => {
         };
         const plan = await resolveExperience({
             sys: sysWithExperienceTemplate('hero'),
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('item', { id: 'a', contentProperties: { value: 'one' } }),
                 componentNode('item', { id: 'b', contentProperties: { value: 'two' } }),
@@ -382,7 +315,6 @@ describe('ServerExperienceRenderer', () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         const cfg = { components: { item: PrecedenceFixture } };
         const tplPayload = {
-            viewports: VIEWPORTS,
             nodes: [
                 experienceTemplateNode('missing-experienceTemplate', {
                     id: 'tpl',
@@ -409,7 +341,6 @@ describe('ServerExperienceRenderer', () => {
 });
 describe('ServerExperienceRenderer — slot children as an array', () => {
     const childrenPayload = () => ({
-        viewports: VIEWPORTS,
         nodes: [
             componentNode('contentful-container', {
                 id: 'c',
@@ -458,7 +389,7 @@ describe('ServerExperienceRenderer — slot children as an array', () => {
         const cfg = {
             components: { 'contentful-container': WrappingContainerFixture },
         };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('contentful-container', { id: 'c' })] }, cfg);
+        const plan = await resolveExperience({ nodes: [componentNode('contentful-container', { id: 'c' })] }, cfg);
         const { container } = render(ServerExperienceRenderer, {
             props: { experience: plan, config: cfg },
         });
@@ -471,7 +402,6 @@ describe('ServerExperienceRenderer — bare-component registrations', () => {
     it('accepts a bare Svelte component as a registry entry', async () => {
         const cfg = { components: { item: PrecedenceFixture } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [componentNode('item', { id: 'b', contentProperties: { value: 'hi' } })],
         }, cfg);
         const { container } = render(ServerExperienceRenderer, {
@@ -482,7 +412,6 @@ describe('ServerExperienceRenderer — bare-component registrations', () => {
     it('does NOT spread experience/contentful as props onto components', async () => {
         const cfg = { components: { capture: CapturingComponent } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'c',
@@ -506,12 +435,11 @@ describe('ServerExperienceRenderer — getContentfulComponent()', () => {
     it('exposes the raw Contentful payload to descendants', async () => {
         const cfg = { components: { capture: CapturingComponent } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'btn-1',
                     contentProperties: { label: 'Buy now' },
-                    designProperties: { cfPadding: vbv({ desktop: m('40px') }) },
+                    designProperties: { cfPadding: m('40px') },
                 }),
             ],
         }, cfg);
@@ -523,7 +451,7 @@ describe('ServerExperienceRenderer — getContentfulComponent()', () => {
             componentId: 'capture',
             nodeId: 'btn-1',
             content: { label: 'Buy now' },
-            design: { cfPadding: vbv({ desktop: m('40px') }) },
+            design: { cfPadding: m('40px') },
             resolved: undefined,
         });
     });
@@ -536,7 +464,7 @@ describe('ServerExperienceRenderer — getContentfulComponent()', () => {
                 },
             },
         };
-        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'i' })] }, cfg);
+        const plan = await resolveExperience({ nodes: [componentNode('capture', { id: 'i' })] }, cfg);
         render(ServerExperienceRenderer, {
             props: { experience: plan, config: cfg },
         });
@@ -550,7 +478,6 @@ describe('ServerExperienceRenderer — resolveToken', () => {
             resolveToken: (ref) => (ref.value === 'color/surface/hero' ? '#4f39f6' : undefined),
         };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('contentful-button', {
                     id: 'b',
@@ -572,7 +499,6 @@ describe('ServerExperienceRenderer — resolveToken', () => {
             resolveToken: () => undefined,
         };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('contentful-button', {
                     id: 'b',
@@ -592,7 +518,6 @@ describe('ServerExperienceRenderer — resolveToken', () => {
     it('leaves token values untouched when no resolver is supplied (backward-compatible)', async () => {
         const cfg = { components: { 'contentful-button': ButtonFixture } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('contentful-button', {
                     id: 'b',
@@ -617,7 +542,6 @@ describe('ServerExperienceRenderer — resolveToken', () => {
         };
         const tplPayload = {
             sys: sysWithExperienceTemplate('page'),
-            viewports: VIEWPORTS,
             nodes: [
                 experienceTemplateNode('page', {
                     id: 'tpl',
@@ -629,10 +553,8 @@ describe('ServerExperienceRenderer — resolveToken', () => {
             ],
         };
         const plan = await resolveExperience(tplPayload, tplConfig);
-        // Render at a non-fallback viewport (mobile ≠ fallback index 0) so the
-        // adapter recomputes from the raw design and runs resolveToken itself.
         const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config: tplConfig, initialViewportId: 'mobile' },
+            props: { experience: plan, config: tplConfig },
         });
         expect(container.innerHTML).toContain('data-bg="#111827"');
     });
@@ -641,7 +563,6 @@ describe('ServerExperienceRenderer — design values auto-fill props', () => {
     it('spreads resolved design values onto component props by their raw key', async () => {
         const cfg = { components: { capture: CapturingComponent } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'p',
@@ -668,7 +589,6 @@ describe('ServerExperienceRenderer — design values auto-fill props', () => {
     it('lets content override design on a key collision (content wins)', async () => {
         const cfg = { components: { capture: CapturingComponent } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'p',
@@ -691,7 +611,6 @@ describe('ServerExperienceRenderer — getDesignValues()', () => {
             resolveToken: (ref) => (ref.value === 'brand/primary' ? '#4f39f6' : undefined),
         };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'p',
@@ -708,67 +627,22 @@ describe('ServerExperienceRenderer — getDesignValues()', () => {
             cfPadding: '24px',
         });
     });
-    it('honors the active viewport when reading design values', async () => {
+    it('returns design values when reading design values', async () => {
         const cfg = { components: { capture: CapturingComponent } };
         const plan = await resolveExperience({
-            viewports: VIEWPORTS,
             nodes: [
                 componentNode('capture', {
                     id: 'p',
-                    designProperties: {
-                        cfPadding: vbv({ desktop: m('40px'), mobile: m('12px') }),
-                    },
+                    designProperties: { cfPadding: m('40px') },
                 }),
             ],
         }, cfg);
-        render(ServerExperienceRenderer, {
-            props: { experience: plan, config: cfg, initialViewportId: 'mobile' },
-        });
-        expect(captureSink[0].designValues).toEqual({ cfPadding: '12px' });
-    });
-});
-describe('ServerExperienceRenderer — server pre-resolved design values', () => {
-    const probePayload = {
-        viewports: VIEWPORTS,
-        nodes: [
-            componentNode('contentful-container', {
-                id: 'p',
-                designProperties: { cfPadding: vbv({ desktop: m('40px'), mobile: m('12px') }) },
-            }),
-        ],
-    };
-    it('consumes props.design as-is when the active viewport equals the fallback', async () => {
-        const plan = await resolveExperience(probePayload, config, { initialViewportId: 'mobile' });
-        // Tamper the precomputed values with a sentinel the cascade could never produce.
-        plan.nodes[0].props.design = { cfPadding: 'SENTINEL' };
-        const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config, initialViewportId: 'mobile' },
-        });
-        expect(container.innerHTML).toContain('data-padding="SENTINEL"');
-    });
-    it('recomputes from raw design properties when the active viewport differs from the fallback', async () => {
-        const plan = await resolveExperience(probePayload, config, { initialViewportId: 'mobile' });
-        plan.nodes[0].props.design = { cfPadding: 'SENTINEL' };
-        // Active viewport (desktop, idx 0) ≠ fallback (mobile, idx 2) → recompute.
-        const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config, initialViewportId: 'desktop' },
-        });
-        expect(container.innerHTML).toContain('data-padding="40px"');
-        expect(container.innerHTML).not.toContain('SENTINEL');
-    });
-    it('recomputes when the active viewport differs from the default fallback (viewport[0])', async () => {
-        const plan = await resolveExperience(probePayload, config);
-        // No fallback configured → pre-resolved against viewport[0] (desktop, idx 0).
-        expect(plan.fallbackViewportIndex).toBe(0);
-        // Active viewport is mobile (idx 2) ≠ fallback (idx 0) → recompute to 12px.
-        const { container } = render(ServerExperienceRenderer, {
-            props: { experience: plan, config, initialViewportId: 'mobile' },
-        });
-        expect(container.innerHTML).toContain('data-padding="12px"');
+        render(ServerExperienceRenderer, { props: { experience: plan, config: cfg } });
+        expect(captureSink[0].designValues).toEqual({ cfPadding: '40px' });
     });
 });
-describe('ServerExperienceRenderer — absent payload.viewports', () => {
-    it('renders flat design values when the payload has no viewports field', async () => {
+describe('ServerExperienceRenderer — design values', () => {
+    it('renders resolved design values', async () => {
         const cfg = { components: { heading: HeadingFixture } };
         const plan = await resolveExperience({
             nodes: [
@@ -778,7 +652,6 @@ describe('ServerExperienceRenderer — absent payload.viewports', () => {
                 }),
             ],
         }, cfg);
-        expect(plan.viewports).toEqual([]);
         const { container } = render(ServerExperienceRenderer, {
             props: { experience: plan, config: cfg },
         });
@@ -821,7 +694,7 @@ describe('ServerExperienceRenderer — render context carried on the plan', () =
         captureSink.splice(0);
     });
     const captureConfig = { components: { capture: CapturingComponent } };
-    const buildPlan = (opts) => resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig, opts);
+    const buildPlan = (opts) => resolveExperience({ nodes: [componentNode('capture', { id: 'c' })] }, captureConfig, opts);
     it('reads metadata off the plan without it being passed to the renderer', async () => {
         const plan = await buildPlan({ metadata: { slug: 'home', locale: 'en-US' } });
         render(ServerExperienceRenderer, { props: { experience: plan, config: captureConfig } });

package/dist/types.d.ts

@@ -10,8 +10,8 @@ export type { ResolveContext, ResolveToken };
  * re-rendering a slot's nodes yourself through the exported `<NodesRenderer />`.
  *
  * Design properties stay in their **raw discriminated form** here (the same
- * shape `ctx.design` carries inside `resolveData`). The viewport-cascaded,
- * token-resolved values are what `getDesignValues()` returns.
+ * shape `ctx.design` carries inside `resolveData`). Token-resolved values are
+ * what `getDesignValues()` returns.
  */
 export interface ContentfulComponent {
     componentId: string;

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

@@ -17,17 +17,8 @@ const payload = (title) => ({
         },
     ],
     sys: { type: 'Experience' },
-    viewports: [
-        {
-            displayName: 'Default',
-            id: 'default',
-            previewSize: '1024px',
-            query: '*',
-        },
-    ],
 });
 const initialPlan = {
-    fallbackViewportIndex: 0,
     nodes: [
         {
             nodeId: 'initial',
@@ -36,7 +27,6 @@ const initialPlan = {
             slots: {},
         },
     ],
-    viewports: payload('initial').viewports,
     metadata: {},
     debug: false,
     diagnostics: [],