@contentful/experiences-design 0.8.3 → 0.8.5

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.8.5 (2026-09-22)
+
+### 🧱 Updated Dependencies
+
+- Updated core to 0.8.5
+
+## 0.8.4 (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 core to 0.8.4
+
 ## 0.8.3 (2026-09-11)
 
 ### 🧱 Updated Dependencies

package/dist/media-query-matchers.d.ts

@@ -1,5 +1,10 @@
 import { ViewportDef } from '@contentful/experiences-sdk-core';
 
+/**
+ * @deprecated Viewports are being removed from the Experiences APIs. No
+ * customer action is needed: this type is only used by the deprecated
+ * active-viewport hooks. Will not be removed before 2026-10-06.
+ */
 interface MediaQueryMatcher {
     index: number;
     signal: MediaQueryList;
@@ -11,6 +16,10 @@ interface MediaQueryMatcher {
  * Outside the browser the matcher list comes back empty and only the wildcard
  * viewport is marked as matching, so callers stay SSR-safe without their own
  * `typeof window` guard.
+ *
+ * @deprecated Viewports are being removed from the Experiences APIs. No
+ * customer action is needed: this helper is only used by the deprecated
+ * active-viewport hooks. Will not be removed before 2026-10-06.
  */
 declare function createMediaQueryMatchers(viewports: ViewportDef[]): [MediaQueryMatcher[], boolean[]];
 

package/dist/media-query-matchers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/media-query-matchers.ts"],"sourcesContent":["/*\n * `window.matchMedia` plumbing for viewport tracking, shared by every adapter.\n *\n * Each adapter owns its own reactivity primitive (React `useState`, Svelte\n * `$state`, Angular signals) but the matcher construction and the SSR guard are\n * identical, so they live here.\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\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\n\nimport { toCssMediaQuery } from './viewport';\n\nexport interface MediaQueryMatcher {\n  index: number;\n  signal: MediaQueryList;\n}\n\n/**\n * Builds one `MediaQueryList` per viewport that has a real media query, plus a\n * parallel array of their current match states.\n *\n * Outside the browser the matcher list comes back empty and only the wildcard\n * viewport is marked as matching, so callers stay SSR-safe without their own\n * `typeof window` guard.\n */\nexport function createMediaQueryMatchers(\n  viewports: ViewportDef[]\n): [MediaQueryMatcher[], boolean[]] {\n  const mediaQueryMatches: boolean[] = new Array(viewports.length).fill(false);\n  // The first viewport is the wildcard \"*\" and always matches.\n  mediaQueryMatches[0] = true;\n\n  const mediaQueryMatchers: MediaQueryMatcher[] = [];\n  if (typeof window === 'undefined') {\n    return [mediaQueryMatchers, mediaQueryMatches];\n  }\n  for (let index = 0; index < viewports.length; index++) {\n    const viewport = viewports[index];\n    if (!viewport) continue;\n    const cssQuery = toCssMediaQuery(viewport);\n    if (!cssQuery) continue;\n    const matcher = window.matchMedia(cssQuery);\n    mediaQueryMatches[index] = matcher.matches;\n    mediaQueryMatchers.push({ index, signal: matcher });\n  }\n  return [mediaQueryMatchers, mediaQueryMatches];\n}\n"],"mappings":"AAeA,SAAS,uBAAuB;AAezB,SAAS,yBACd,WACkC;AAClC,QAAM,oBAA+B,IAAI,MAAM,UAAU,MAAM,EAAE,KAAK,KAAK;AAE3E,oBAAkB,CAAC,IAAI;AAEvB,QAAM,qBAA0C,CAAC;AACjD,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO,CAAC,oBAAoB,iBAAiB;AAAA,EAC/C;AACA,WAAS,QAAQ,GAAG,QAAQ,UAAU,QAAQ,SAAS;AACrD,UAAM,WAAW,UAAU,KAAK;AAChC,QAAI,CAAC,SAAU;AACf,UAAM,WAAW,gBAAgB,QAAQ;AACzC,QAAI,CAAC,SAAU;AACf,UAAM,UAAU,OAAO,WAAW,QAAQ;AAC1C,sBAAkB,KAAK,IAAI,QAAQ;AACnC,uBAAmB,KAAK,EAAE,OAAO,QAAQ,QAAQ,CAAC;AAAA,EACpD;AACA,SAAO,CAAC,oBAAoB,iBAAiB;AAC/C;","names":[]}
+{"version":3,"sources":["../src/media-query-matchers.ts"],"sourcesContent":["/*\n * `window.matchMedia` plumbing for viewport tracking, shared by every adapter.\n *\n * Each adapter owns its own reactivity primitive (React `useState`, Svelte\n * `$state`, Angular signals) but the matcher construction and the SSR guard are\n * identical, so they live here.\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\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\n\nimport { toCssMediaQuery } from './viewport';\n\n/**\n * @deprecated Viewports are being removed from the Experiences APIs. No\n * customer action is needed: this type is only used by the deprecated\n * active-viewport hooks. Will not be removed before 2026-10-06.\n */\nexport interface MediaQueryMatcher {\n  index: number;\n  signal: MediaQueryList;\n}\n\n/**\n * Builds one `MediaQueryList` per viewport that has a real media query, plus a\n * parallel array of their current match states.\n *\n * Outside the browser the matcher list comes back empty and only the wildcard\n * viewport is marked as matching, so callers stay SSR-safe without their own\n * `typeof window` guard.\n *\n * @deprecated Viewports are being removed from the Experiences APIs. No\n * customer action is needed: this helper is only used by the deprecated\n * active-viewport hooks. Will not be removed before 2026-10-06.\n */\nexport function createMediaQueryMatchers(\n  viewports: ViewportDef[]\n): [MediaQueryMatcher[], boolean[]] {\n  const mediaQueryMatches: boolean[] = new Array(viewports.length).fill(false);\n  // The first viewport is the wildcard \"*\" and always matches.\n  mediaQueryMatches[0] = true;\n\n  const mediaQueryMatchers: MediaQueryMatcher[] = [];\n  if (typeof window === 'undefined') {\n    return [mediaQueryMatchers, mediaQueryMatches];\n  }\n  for (let index = 0; index < viewports.length; index++) {\n    const viewport = viewports[index];\n    if (!viewport) continue;\n    const cssQuery = toCssMediaQuery(viewport);\n    if (!cssQuery) continue;\n    const matcher = window.matchMedia(cssQuery);\n    mediaQueryMatches[index] = matcher.matches;\n    mediaQueryMatchers.push({ index, signal: matcher });\n  }\n  return [mediaQueryMatchers, mediaQueryMatches];\n}\n"],"mappings":"AAeA,SAAS,uBAAuB;AAwBzB,SAAS,yBACd,WACkC;AAClC,QAAM,oBAA+B,IAAI,MAAM,UAAU,MAAM,EAAE,KAAK,KAAK;AAE3E,oBAAkB,CAAC,IAAI;AAEvB,QAAM,qBAA0C,CAAC;AACjD,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO,CAAC,oBAAoB,iBAAiB;AAAA,EAC/C;AACA,WAAS,QAAQ,GAAG,QAAQ,UAAU,QAAQ,SAAS;AACrD,UAAM,WAAW,UAAU,KAAK;AAChC,QAAI,CAAC,SAAU;AACf,UAAM,WAAW,gBAAgB,QAAQ;AACzC,QAAI,CAAC,SAAU;AACf,UAAM,UAAU,OAAO,WAAW,QAAQ;AAC1C,sBAAkB,KAAK,IAAI,QAAQ;AACnC,uBAAmB,KAAK,EAAE,OAAO,QAAQ,QAAQ,CAAC;AAAA,EACpD;AACA,SAAO,CAAC,oBAAoB,iBAAiB;AAC/C;","names":[]}

package/dist/select-resolved-design.d.ts

@@ -1,5 +1,14 @@
 import { DesignPropValue, ViewportDef, ResolveToken } from '@contentful/experiences-sdk-core';
 
+/**
+ * Use the server-resolved `props.design` when the active viewport matches the
+ * fallback; otherwise recompute the cascade from raw `props.designRaw`.
+ *
+ * @deprecated Viewports are being removed from the Experiences APIs. No
+ * customer action is needed: with a single viewport, the active and fallback
+ * indices always match, so this always returns `props.design`. Will not be
+ * removed before 2026-10-06.
+ */
 declare function selectResolvedDesign(props: {
     design: Record<string, unknown>;
     designRaw: Record<string, DesignPropValue>;

package/dist/select-resolved-design.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/select-resolved-design.ts"],"sourcesContent":["/*\n * Picks the design record a renderer should use for the active viewport.\n *\n * Shared by every framework adapter: the choice between \"trust the server's\n * pre-resolved values\" and \"recompute the cascade client-side\" is a property of\n * the IR, not of any one framework.\n */\n\nimport type { DesignPropValue, ResolveToken, ViewportDef } from '@contentful/experiences-sdk-core';\nimport { applyTokenResolver, resolveDesignProperties } from '@contentful/experiences-sdk-core';\n\n// Use the server-resolved `props.design` when the active viewport matches the\n// fallback; otherwise recompute the cascade from raw `props.designRaw`.\nexport function selectResolvedDesign(\n  props: { design: Record<string, unknown>; designRaw: Record<string, DesignPropValue> },\n  viewports: ViewportDef[],\n  activeViewportIndex: number,\n  fallbackViewportIndex: number,\n  resolveToken: ResolveToken | undefined\n): { props: Record<string, unknown>; unresolved: string[] } {\n  if (activeViewportIndex === fallbackViewportIndex) {\n    return { props: props.design, unresolved: [] };\n  }\n  const resolvedDesign = resolveDesignProperties(props.designRaw, viewports, activeViewportIndex);\n  return applyTokenResolver(resolvedDesign, resolveToken);\n}\n"],"mappings":"AASA,SAAS,oBAAoB,+BAA+B;AAIrD,SAAS,qBACd,OACA,WACA,qBACA,uBACA,cAC0D;AAC1D,MAAI,wBAAwB,uBAAuB;AACjD,WAAO,EAAE,OAAO,MAAM,QAAQ,YAAY,CAAC,EAAE;AAAA,EAC/C;AACA,QAAM,iBAAiB,wBAAwB,MAAM,WAAW,WAAW,mBAAmB;AAC9F,SAAO,mBAAmB,gBAAgB,YAAY;AACxD;","names":[]}
+{"version":3,"sources":["../src/select-resolved-design.ts"],"sourcesContent":["/*\n * Picks the design record a renderer should use for the active viewport.\n *\n * Shared by every framework adapter: the choice between \"trust the server's\n * pre-resolved values\" and \"recompute the cascade client-side\" is a property of\n * the IR, not of any one framework.\n */\n\nimport type { DesignPropValue, ResolveToken, ViewportDef } from '@contentful/experiences-sdk-core';\nimport { applyTokenResolver, resolveDesignProperties } from '@contentful/experiences-sdk-core';\n\n/**\n * Use the server-resolved `props.design` when the active viewport matches the\n * fallback; otherwise recompute the cascade from raw `props.designRaw`.\n *\n * @deprecated Viewports are being removed from the Experiences APIs. No\n * customer action is needed: with a single viewport, the active and fallback\n * indices always match, so this always returns `props.design`. Will not be\n * removed before 2026-10-06.\n */\nexport function selectResolvedDesign(\n  props: { design: Record<string, unknown>; designRaw: Record<string, DesignPropValue> },\n  viewports: ViewportDef[],\n  activeViewportIndex: number,\n  fallbackViewportIndex: number,\n  resolveToken: ResolveToken | undefined\n): { props: Record<string, unknown>; unresolved: string[] } {\n  if (activeViewportIndex === fallbackViewportIndex) {\n    return { props: props.design, unresolved: [] };\n  }\n  const resolvedDesign = resolveDesignProperties(props.designRaw, viewports, activeViewportIndex);\n  return applyTokenResolver(resolvedDesign, resolveToken);\n}\n"],"mappings":"AASA,SAAS,oBAAoB,+BAA+B;AAWrD,SAAS,qBACd,OACA,WACA,qBACA,uBACA,cAC0D;AAC1D,MAAI,wBAAwB,uBAAuB;AACjD,WAAO,EAAE,OAAO,MAAM,QAAQ,YAAY,CAAC,EAAE;AAAA,EAC/C;AACA,QAAM,iBAAiB,wBAAwB,MAAM,WAAW,WAAW,mBAAmB;AAC9F,SAAO,mBAAmB,gBAAgB,YAAY;AACxD;","names":[]}

package/dist/viewport.d.ts

@@ -5,6 +5,10 @@ export { applyTokenResolver, getValueForViewport, getViewportIndex, resolveDesig
  * Convert a Contentful viewport `query` string into a CSS media query.
  * Returns `undefined` for the wildcard "*" (always matches; no media query needed)
  * or for any unrecognized format.
+ *
+ * @deprecated Viewports are being removed from the Experiences APIs. No
+ * customer action is needed: this helper is only used by the deprecated
+ * active-viewport hooks. Will not be removed before 2026-10-06.
  */
 declare function toCssMediaQuery(viewport: ViewportDef): string | undefined;
 

package/dist/viewport.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/viewport.ts"],"sourcesContent":["/*\n * Viewport → CSS media-query translation. The cascade + token-resolution\n * helpers now live in core (so the resolve pipeline can pre-resolve design\n * server-side) and are re-exported here to keep this package's API unchanged.\n */\n\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\n\nexport {\n  applyTokenResolver,\n  getValueForViewport,\n  getViewportIndex,\n  resolveDesignProperties,\n} from '@contentful/experiences-sdk-core';\n\nconst MEDIA_QUERY_REGEXP = /^(<|>)(\\d+)(px|cm|mm|in|pt|pc)$/;\n\n/**\n * Convert a Contentful viewport `query` string into a CSS media query.\n * Returns `undefined` for the wildcard \"*\" (always matches; no media query needed)\n * or for any unrecognized format.\n */\nexport function toCssMediaQuery(viewport: ViewportDef): string | undefined {\n  const { query } = viewport;\n  if (query === '*') return undefined;\n  const match = query.match(MEDIA_QUERY_REGEXP);\n  if (!match) return undefined;\n  const [, operator, value, unit] = match;\n  if (!operator || !value || !unit) return undefined;\n  if (operator === '<') {\n    return `(max-width: ${Number(value) - 1}${unit})`;\n  }\n  if (operator === '>') {\n    return `(min-width: ${Number(value) + 1}${unit})`;\n  }\n  return undefined;\n}\n"],"mappings":"AAQA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,qBAAqB;AAOpB,SAAS,gBAAgB,UAA2C;AACzE,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,IAAK,QAAO;AAC1B,QAAM,QAAQ,MAAM,MAAM,kBAAkB;AAC5C,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,CAAC,EAAE,UAAU,OAAO,IAAI,IAAI;AAClC,MAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAM,QAAO;AACzC,MAAI,aAAa,KAAK;AACpB,WAAO,eAAe,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;AAAA,EAChD;AACA,MAAI,aAAa,KAAK;AACpB,WAAO,eAAe,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;AAAA,EAChD;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/viewport.ts"],"sourcesContent":["/*\n * Viewport → CSS media-query translation. The cascade + token-resolution\n * helpers now live in core (so the resolve pipeline can pre-resolve design\n * server-side) and are re-exported here to keep this package's API unchanged.\n */\n\nimport type { ViewportDef } from '@contentful/experiences-sdk-core';\n\nexport {\n  applyTokenResolver,\n  getValueForViewport,\n  getViewportIndex,\n  resolveDesignProperties,\n} from '@contentful/experiences-sdk-core';\n\nconst MEDIA_QUERY_REGEXP = /^(<|>)(\\d+)(px|cm|mm|in|pt|pc)$/;\n\n/**\n * Convert a Contentful viewport `query` string into a CSS media query.\n * Returns `undefined` for the wildcard \"*\" (always matches; no media query needed)\n * or for any unrecognized format.\n *\n * @deprecated Viewports are being removed from the Experiences APIs. No\n * customer action is needed: this helper is only used by the deprecated\n * active-viewport hooks. Will not be removed before 2026-10-06.\n */\nexport function toCssMediaQuery(viewport: ViewportDef): string | undefined {\n  const { query } = viewport;\n  if (query === '*') return undefined;\n  const match = query.match(MEDIA_QUERY_REGEXP);\n  if (!match) return undefined;\n  const [, operator, value, unit] = match;\n  if (!operator || !value || !unit) return undefined;\n  if (operator === '<') {\n    return `(max-width: ${Number(value) - 1}${unit})`;\n  }\n  if (operator === '>') {\n    return `(min-width: ${Number(value) + 1}${unit})`;\n  }\n  return undefined;\n}\n"],"mappings":"AAQA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,qBAAqB;AAWpB,SAAS,gBAAgB,UAA2C;AACzE,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,IAAK,QAAO;AAC1B,QAAM,QAAQ,MAAM,MAAM,kBAAkB;AAC5C,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,CAAC,EAAE,UAAU,OAAO,IAAI,IAAI;AAClC,MAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAM,QAAO;AACzC,MAAI,aAAa,KAAK;AACpB,WAAO,eAAe,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;AAAA,EAChD;AACA,MAAI,aAAa,KAAK;AACpB,WAAO,eAAe,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI;AAAA,EAChD;AACA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-design",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Viewport math and design-property resolution utilities for Contentful Experiences",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,6 @@
     "directory": "packages/design"
   },
   "dependencies": {
-    "@contentful/experiences-sdk-core": "0.8.3"
+    "@contentful/experiences-sdk-core": "0.8.5"
   }
 }