@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.4

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.d.ts

@@ -1,6 +1,7 @@
 /**
  * Headless bridge that connects the app to the admin frontend settings preview. It listens for
- * messages from the parent window and applies the received styling while in preview mode.
+ * messages from the parent window and applies the received styling, app settings and color scheme
+ * while in preview mode.
  */
 declare const FrontendSettingsPreviewBridge: () => null;
 export default FrontendSettingsPreviewBridge;

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendSettingsPreviewBridge.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.tsx"],"names":[],"mappings":"AAeA;;;GAGG;AACH,QAAA,MAAM,6BAA6B,YAgClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"FrontendSettingsPreviewBridge.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.tsx"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,QAAA,MAAM,6BAA6B,YA+ClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.js

@@ -1,17 +1,27 @@
+import "core-js/modules/es.array.includes.js";
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useIframeMessenger } from '@shopgate/engage/admin-preview/hooks';
 import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from '@shopgate/engage/admin-preview/constants';
 import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+import { logger } from '@shopgate/engage/core/helpers';
+// Imported via its module path, since the "styles" barrel pulls in the ThemeProvider which renders
+// this component, and would therefore create a circular import.
+import useColorScheme from '@shopgate/engage/styles/theme/hooks/useColorScheme';
 import { getOrCreateStyleTag, removeStyleTag, serializeStyling } from "./helpers";
 
 /**
  * Headless bridge that connects the app to the admin frontend settings preview. It listens for
- * messages from the parent window and applies the received styling while in preview mode.
+ * messages from the parent window and applies the received styling, app settings and color scheme
+ * while in preview mode.
  */
 const FrontendSettingsPreviewBridge = () => {
   const [styling, setStyling] = useState(null);
   const dispatch = useDispatch();
+  const {
+    setMode,
+    modes
+  } = useColorScheme();
   const {
     sendToParent
   } = useIframeMessenger(data => {
@@ -21,6 +31,18 @@ const FrontendSettingsPreviewBridge = () => {
         dispatch(receiveAppSettings(data.payload.appSettings));
       }
     }
+    if (data.type === 'setColorScheme') {
+      const colorScheme = data.payload?.colorScheme;
+
+      // setMode rejects unsupported schemes as well, but this message arrives from another origin,
+      // so it is worth naming the admin as the source of the bad value. The `colorScheme` guard also
+      // narrows away the defensive `undefined`, so `modes.includes` and `setMode` typecheck strictly.
+      if (!colorScheme || !modes.includes(colorScheme)) {
+        logger.warn(`FrontendSettingsPreviewBridge: received unsupported color scheme "${colorScheme}"`);
+        return;
+      }
+      setMode(colorScheme);
+    }
   }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
   useEffect(() => {
     sendToParent({

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.d.ts

@@ -8,7 +8,13 @@ export declare const PREVIEW_STYLE_TAG_ID = "frontend-settings-preview-overrides
  */
 export declare const serializeStyling: (styling: FrontendSettingsStyling) => string;
 /**
- * Returns the existing preview style tag or creates it in the document head.
+ * Returns the existing preview style tag or creates it at the preview css insertion point, which
+ * the html template declares directly below the theme css one. The preview has to override both
+ * the defaults that theme initialization generates and the theme css file, and since all three
+ * have the same specificity, only document order decides.
+ *
+ * Falls back to appending when the meta is absent, which is where the tag used to live before the
+ * insertion points existed.
  *
  * @returns The style element used for frontend settings preview overrides.
  */

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,oBAAoB,wCAAwC,CAAC;AAuB1E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,uBAAuB,WAiBpD,CAAC;AAEd;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAW/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,YAG1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,oBAAoB,wCAAwC,CAAC;AAyB1E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,uBAAuB,WAiBpD,CAAC;AAEd;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,wBAkB/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,YAG1B,CAAC"}

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.js

@@ -1,5 +1,6 @@
 import "core-js/modules/es.string.replace.js";
 export const PREVIEW_STYLE_TAG_ID = 'frontend-settings-preview-overrides';
+const INSERTION_POINT_SELECTOR = 'meta[name="preview-css-insertion-point"]';
 const UNITLESS_PROPERTIES = new Set(['font-weight', 'line-height', 'opacity', 'z-index', 'flex', 'flex-grow', 'flex-shrink', 'order']);
 const toKebabCase = property => property.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`);
 const stringifyValue = (property, value) => {
@@ -25,7 +26,13 @@ export const serializeStyling = styling => Object.entries(styling).map(([selecto
 }).filter(Boolean).join('\n');
 
 /**
- * Returns the existing preview style tag or creates it in the document head.
+ * Returns the existing preview style tag or creates it at the preview css insertion point, which
+ * the html template declares directly below the theme css one. The preview has to override both
+ * the defaults that theme initialization generates and the theme css file, and since all three
+ * have the same specificity, only document order decides.
+ *
+ * Falls back to appending when the meta is absent, which is where the tag used to live before the
+ * insertion points existed.
  *
  * @returns The style element used for frontend settings preview overrides.
  */
@@ -35,7 +42,12 @@ export const getOrCreateStyleTag = () => {
     styleTag = document.createElement('style');
     styleTag.setAttribute('id', PREVIEW_STYLE_TAG_ID);
     styleTag.setAttribute('type', 'text/css');
-    document.head.appendChild(styleTag);
+    const insertionPoint = document.querySelector(INSERTION_POINT_SELECTOR);
+    if (insertionPoint) {
+      insertionPoint.parentNode?.insertBefore(styleTag, insertionPoint.nextSibling);
+    } else {
+      document.head.appendChild(styleTag);
+    }
   }
   return styleTag;
 };

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts

@@ -1,4 +1,5 @@
 import type { AppSettings } from '@shopgate/engage/settings/types/appSettings';
+import type { ColorSchemeName } from '@shopgate/engage/styles/theme/createTheme';
 export type CSSDeclarationValue = string | number;
 export type FrontendSettingsStyling = Record<string, Record<string, CSSDeclarationValue>>;
 export type FrontendSettingsPreviewBridgeMessage = {
@@ -7,6 +8,11 @@ export type FrontendSettingsPreviewBridgeMessage = {
         styling?: FrontendSettingsStyling;
         appSettings?: AppSettings;
     };
+} | {
+    type: 'setColorScheme';
+    payload: {
+        colorScheme: ColorSchemeName;
+    };
 } | {
     type: 'frontendSettingsPreviewReady';
     payload?: never;

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;CACH,GACC;IACA,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE;QACP,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}

package/admin-preview/constants/index.d.ts

@@ -1,25 +1,4 @@
-export { PAGE_PREVIEW_PATTERN } from '../detection';
-/**
- * Whether the app is currently in page admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
- * helper, which re-evaluates on every call.
- */
-export declare const IS_PAGE_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the
- * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
- */
-export declare const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- *
- * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
- * which re-evaluates on every call.
- */
-export declare const IS_ADMIN_PREVIEW_ACTIVE: boolean;
+export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
 /**
  * List of allowed origins for cms page preview iFrame communication.
  */

package/admin-preview/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,SAA2B,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,SAAuC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,SAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,29 +1,4 @@
-import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
-export { PAGE_PREVIEW_PATTERN } from "../detection";
-
-/**
- * Whether the app is currently in page admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
- * helper, which re-evaluates on every call.
- */
-export const IS_PAGE_ADMIN_PREVIEW_ACTIVE = detectPageAdminPreview();
-
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the
- * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
- */
-export const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE = detectFrontendSettingsAdminPreview();
-
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- *
- * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
- * which re-evaluates on every call.
- */
-export const IS_ADMIN_PREVIEW_ACTIVE = detectAdminPreview();
+export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 
 /**
  * List of allowed origins for cms page preview iFrame communication.

package/admin-preview/{detection.d.ts → helpers/_internal/detection.d.ts}

@@ -1,17 +1,19 @@
-export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAdminPreviewActive / isPageAdminPreviewActive / isFrontendSettingsAdminPreviewActive
+ * helpers from @shopgate/engage/admin-preview/helpers instead.
+ */
 export declare const FRONTEND_SETTINGS_PREVIEW_PARAM = "frontendSettingsPreview=true";
-export declare const SESSION_STORAGE_KEY_PAGE_PREVIEW = "sgPageAdminPreview";
-export declare const SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW = "sgFrontendSettingsAdminPreview";
 /**
- * Detects whether the app is in page admin preview mode. Once detected, the result is remembered
- * for the rest of the session, because the url is not guaranteed to keep the preview marker.
+ * Detects whether the app is in page admin preview mode. Once detected, the result is latched for
+ * the lifetime of the document, because the url is not guaranteed to keep the preview marker.
  * @returns True if the app is in page admin preview mode, false otherwise.
  */
 export declare const detectPageAdminPreview: () => boolean;
 /**
  * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
- * remembered for the rest of the session, because the url is not guaranteed to keep the query
- * param.
+ * latched for the lifetime of the document, because the app keeps navigating while the preview is
+ * open and the query param only exists on the url it started on.
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
 export declare const detectFrontendSettingsAdminPreview: () => boolean;
@@ -26,6 +28,8 @@ export declare const detectAdminPreview: () => boolean;
  *
  *   window.SGAdminPreviewDebug()
  *
+ * Compare initialHref with currentHref to see whether the url changed since the app booted, and
+ * check latched to see whether a result came from the latch rather than the current url.
  * @returns A snapshot of everything detection depends on.
  */
 export declare const getAdminPreviewDebugInfo: () => {
@@ -36,7 +40,7 @@ export declare const getAdminPreviewDebugInfo: () => {
     urlChangedSinceBoot: boolean;
     isInIframe: boolean;
     referrer: string;
-    stickyFlags: {
+    latched: {
         page: boolean;
         frontendSettings: boolean;
     };

package/admin-preview/helpers/_internal/detection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detection.d.ts","sourceRoot":"","sources":["../../../../admin-preview/helpers/_internal/detection.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAsB9E;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAO,OAQzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kCAAkC,QAAO,OAWrD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO,OAC4B,CAAC;AAEnE;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;CAiBnC,CAAC"}

package/admin-preview/helpers/_internal/detection.js

@@ -0,0 +1,93 @@
+import "core-js/modules/es.array.includes.js";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAdminPreviewActive / isPageAdminPreviewActive / isFrontendSettingsAdminPreviewActive
+ * helpers from @shopgate/engage/admin-preview/helpers instead.
+ */
+
+import { PAGE_PREVIEW_PATTERN } from "../../constants";
+export const FRONTEND_SETTINGS_PREVIEW_PARAM = 'frontendSettingsPreview=true';
+
+/**
+ * The url as it was when this module was first evaluated. Captured here because detection can run
+ * again later, when the url may already have been rewritten.
+ */
+const INITIAL_HREF = window.location.href;
+
+/**
+ * Preview mode is latched in memory rather than persisted. Session storage is scoped per origin
+ * per tab, not per iframe - the admin shows the preview in same-origin iframes on several screens
+ * within one tab, so a persisted flag from one screen would leak into the next. Module state is
+ * per document, so each iframe gets its own.
+ *
+ * The latches only ever go false -> true. Detection must not fall back to re-reading the url,
+ * because the frontend settings preview navigates the app normally: once the admin opens another
+ * page, the query param is gone from the url even though preview mode is still on.
+ */
+let pageAdminPreviewLatched = false;
+let frontendSettingsAdminPreviewLatched = false;
+
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is latched for
+ * the lifetime of the document, because the url is not guaranteed to keep the preview marker.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export const detectPageAdminPreview = () => {
+  if (pageAdminPreviewLatched) {
+    return true;
+  }
+  pageAdminPreviewLatched = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+  return pageAdminPreviewLatched;
+};
+
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * latched for the lifetime of the document, because the app keeps navigating while the preview is
+ * open and the query param only exists on the url it started on.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export const detectFrontendSettingsAdminPreview = () => {
+  if (frontendSettingsAdminPreviewLatched) {
+    return true;
+  }
+  frontendSettingsAdminPreviewLatched = window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM);
+  return frontendSettingsAdminPreviewLatched;
+};
+
+/**
+ * Detects whether the app is in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export const detectAdminPreview = () => detectPageAdminPreview() || detectFrontendSettingsAdminPreview();
+
+/**
+ * Returns the current detection state. Exposed on window as SGAdminPreviewDebug so the values can
+ * be inspected on a deployed build, from the console of the preview iframe:
+ *
+ *   window.SGAdminPreviewDebug()
+ *
+ * Compare initialHref with currentHref to see whether the url changed since the app booted, and
+ * check latched to see whether a result came from the latch rather than the current url.
+ * @returns A snapshot of everything detection depends on.
+ */
+export const getAdminPreviewDebugInfo = () => ({
+  initialHref: INITIAL_HREF,
+  currentHref: window.location.href,
+  pathname: window.location.pathname,
+  search: window.location.search,
+  urlChangedSinceBoot: INITIAL_HREF !== window.location.href,
+  isInIframe: window.parent !== window,
+  referrer: document.referrer,
+  latched: {
+    page: pageAdminPreviewLatched,
+    frontendSettings: frontendSettingsAdminPreviewLatched
+  },
+  detected: {
+    page: detectPageAdminPreview(),
+    frontendSettings: detectFrontendSettingsAdminPreview(),
+    any: detectAdminPreview()
+  }
+});
+
+// @ts-expect-error - debug-only global, intentionally not on the Window type.
+window.SGAdminPreviewDebug = getAdminPreviewDebugInfo;

package/admin-preview/helpers/index.d.ts

@@ -13,4 +13,11 @@ export declare const isPageAdminPreviewActive: () => boolean;
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
 export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export declare const isNavigationBlocked: () => boolean;
 //# sourceMappingURL=index.d.ts.map

package/admin-preview/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,CAAC"}

package/admin-preview/helpers/index.js

@@ -1,4 +1,4 @@
-import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "./_internal/detection";
 
 /**
  * Checks if the app is currently in admin preview mode (pages or frontend settings).
@@ -16,4 +16,12 @@ export const isPageAdminPreviewActive = () => detectPageAdminPreview();
  * Checks if the app is currently in frontend settings admin preview mode.
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
-export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();
+export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();
+
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export const isNavigationBlocked = () => isPageAdminPreviewActive();

package/components/Badge/Badge.d.ts

@@ -0,0 +1,30 @@
+export interface BadgeProps {
+    /**
+     * The number to display. The badge renders nothing when this is 0.
+     */
+    count: number;
+    /**
+     * Counts above this are displayed as `{max}+`.
+     */
+    max?: number;
+    /**
+     * Additional CSS classes. Callers own the badge's positioning.
+     */
+    className?: string;
+    /**
+     * Inline style overrides.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Renders an empty bubble when false, to indicate state without a number.
+     */
+    showCount?: boolean;
+    [key: `data-${string}`]: string;
+}
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+declare const Badge: ({ count, max, className, style, showCount, ...restProps }: BadgeProps) => import("react").JSX.Element | null;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../components/Badge/Badge.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,KAAK,GAAI,2DAOZ,UAAU,uCAqBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Badge/Badge.js

@@ -0,0 +1,48 @@
+import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from "../Typography";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.components.badge.background,
+    color: theme.contrastColor(theme.components.badge.background),
+    borderRadius: theme.spacing(1),
+    height: theme.spacing(2),
+    minWidth: theme.spacing(2),
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5)
+  }
+}));
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+const Badge = ({
+  count,
+  max,
+  className,
+  style,
+  showCount = true,
+  ...restProps
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!count) {
+    return null;
+  }
+  const label = max !== undefined && count > max ? `${max}+` : `${count}`;
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "caption",
+    component: "div",
+    fontWeight: "bold",
+    style: style,
+    className: cx(classes.root, className, 'theme__badge'),
+    ...restProps,
+    children: showCount ? label : ''
+  });
+};
+export default Badge;

package/components/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/components/Badge/index.js

@@ -0,0 +1 @@
+export { default } from "./Badge";

package/components/Badge/spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=spec.d.ts.map

package/components/Badge/spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.d.ts","sourceRoot":"","sources":["../../../components/Badge/spec.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAC"}

package/components/Badge/spec.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+// Loaded at runtime by utils/unit-tests/envSetup.js; imported here for the matcher types.
+import '@testing-library/jest-dom';
+import { ThemeProvider, createTheme } from '@shopgate/engage/styles';
+import Badge from "./Badge";
+
+// ThemeProvider resolves the active breakpoint via matchMedia, which jsdom doesn't implement.
+import { jsx as _jsx } from "react/jsx-runtime";
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: query => ({
+    matches: false,
+    media: query,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn()
+  })
+});
+const theme = createTheme();
+
+/**
+ * Renders the subject within a theme context.
+ * @param ui The element to render.
+ * @returns The render result.
+ */
+const renderWithTheme = ui => render(/*#__PURE__*/_jsx(ThemeProvider, {
+  theme: theme,
+  children: ui
+}));
+describe('<Badge />', () => {
+  it('should render the count', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 3
+    }));
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+  it('should render nothing when the count is zero', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 0
+    }));
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+  it('should cap the count at max', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 6,
+      max: 5
+    }));
+    expect(screen.getByText('5+')).toBeInTheDocument();
+    expect(screen.queryByText('6')).not.toBeInTheDocument();
+  });
+  it('should render the exact count when it equals max', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 5,
+      max: 5
+    }));
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+  it('should render an empty bubble when showCount is false', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 7,
+      showCount: false
+    }));
+    expect(screen.queryByText('7')).not.toBeInTheDocument();
+    expect(document.querySelector('.theme__badge')).toBeInTheDocument();
+  });
+  it('should apply the shared badge class so themes can target it', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(Badge, {
+      count: 1,
+      className: "custom-position"
+    }));
+    const badge = document.querySelector('.theme__badge');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('custom-position');
+  });
+});

package/components/View/components/Content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,yDAUd;;kBApQM,OAAO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAoQe,yDAUd;;kBAvQM,OAAO"}

package/components/View/components/Content/index.js

@@ -38,7 +38,10 @@ const useStyles = makeStyles()({
     WebkitOverflowScrolling: 'touch',
     ...(isAdminPreviewActive() && {
       scrollbarWidth: 'thin',
-      backgroundColor: 'var(--page-background-color)'
+      backgroundColor: 'var(--page-background-color)',
+      // Fill the positioned ancestor exactly. In Safari `100vw` (from containerBase)
+      // includes the vertical scrollbar width, causing a spurious horizontal scrollbar.
+      width: '100%'
     })
   },
   containerWindow: {

package/components/index.d.ts

@@ -183,4 +183,5 @@ export { default as Switch } from './Switch';
 export { default as SnackBarContainer } from './SnackBarContainer';
 export { default as ConnectedReactPortal } from './ConnectedReactPortal';
 export { Typography } from './Typography';
+export { default as Badge } from './Badge';
 //# sourceMappingURL=index.d.ts.map