@shopgate/engage 7.32.0-beta.11 → 7.32.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.11",
+  "version": "7.32.0-beta.12",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.32.0-beta.11",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.11",
-    "@shopgate/pwa-core": "7.32.0-beta.11",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.11",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.11",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.11",
+    "@shopgate/pwa-common": "7.32.0-beta.12",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.12",
+    "@shopgate/pwa-core": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.12",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/Widgets/Widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAQlE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiDhD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAqEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC2B,KAAK,aAAa,EACnD,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,SAAS,CAAC;AAuCnE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/page/components/Widgets/Widget.js

@@ -1,15 +1,14 @@
-import { Suspense, useCallback } from 'react';
+import { Suspense, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { VisibilityOffIcon, TimeIcon, Loading } from '@shopgate/engage/components';
 import { usePressHandler } from '@shopgate/engage/core/hooks';
+import { getWidgetMediaMargins } from '@shopgate/engage/settings/selectors/appSettings';
 import WidgetProvider from "./WidgetProvider";
 import { dispatchWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
+import { getAppliedMediaMargins, resolveWidgetLayout } from "./helpers";
 import Tooltip from "./Tooltip";
-
-/**
- * Style parameters for the widget, derived from its layout margins.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   marginTop,
@@ -61,15 +60,12 @@ const Widget = ({
   isPreview,
   isCustomLegacyWidget = false
 }) => {
+  const mediaMargins = useSelector(getWidgetMediaMargins);
+  const layout = useMemo(() => resolveWidgetLayout(definition?.layout, getAppliedMediaMargins(definition?.widgetConfigDefinitionCode), mediaMargins), [definition, mediaMargins]);
   const {
     classes,
     cx
-  } = useStyles({
-    marginTop: definition?.layout?.marginTop ?? 0,
-    marginBottom: definition?.layout?.marginBottom ?? 0,
-    marginLeft: definition?.layout?.marginLeft ?? 0,
-    marginRight: definition?.layout?.marginRight ?? 0
-  });
+  } = useStyles(layout);
   const {
     setActiveWidget,
     activeWidget
@@ -92,10 +88,10 @@ const Widget = ({
       [classes.preview]: isPreview
     }),
     style: {
-      marginTop: definition?.layout?.marginTop,
-      marginBottom: definition?.layout?.marginBottom,
-      marginLeft: definition?.layout?.marginLeft,
-      marginRight: definition?.layout?.marginRight
+      marginTop: layout.marginTop || undefined,
+      marginBottom: layout.marginBottom || undefined,
+      marginLeft: layout.marginLeft || undefined,
+      marginRight: layout.marginRight || undefined
     },
     "data-widget-name": definition.widgetConfigDefinitionCode,
     ...(isPreview && {
@@ -119,6 +115,7 @@ const Widget = ({
     }), /*#__PURE__*/_jsx(WidgetProvider, {
       definition: definition,
       isPreview: isPreview,
+      layout: layout,
       children: /*#__PURE__*/_jsx(Suspense, {
         fallback: /*#__PURE__*/_jsx(Loading, {}),
         children: /*#__PURE__*/_jsx(Component, {

package/page/components/Widgets/WidgetContext.d.ts

@@ -1,4 +1,4 @@
-import { type WidgetDefinitionLayout, type WidgetDefinitionVisibility } from './types';
+import { type WidgetDefinitionVisibility, type WidgetLayout } from './types';
 export { type WidgetDefinition } from './types';
 /**
  * Context value provided by the {@link WidgetContext} for a single widget instance.
@@ -17,9 +17,9 @@ export interface WidgetContextType<C = Record<string, unknown>> {
      */
     config: C;
     /**
-     * The widget layout settings.
+     * The resolved margins of the widget container.
      */
-    layout: WidgetDefinitionLayout;
+    layout: WidgetLayout;
     /**
      * The widget visibility settings.
      */

package/page/components/Widgets/WidgetContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetContext.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAChC,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,qEAA4D,CAAC"}
+{"version":3,"file":"WidgetContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetContext.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,qEAA4D,CAAC"}

package/page/components/Widgets/WidgetProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type WidgetDefinition } from './types';
+import { type WidgetDefinition, type WidgetLayout } from './types';
 /**
  * Props of the {@link WidgetProvider} component.
  */
@@ -16,10 +16,14 @@ export interface WidgetProviderProps {
      * Whether the widget is in preview mode.
      */
     isPreview: boolean;
+    /**
+     * The resolved margins of the widget container.
+     */
+    layout: WidgetLayout;
 }
 /**
  * The WidgetProvider component provides the context for a single widget.
  */
-declare const WidgetProvider: ({ children, definition, isPreview }: WidgetProviderProps) => import("react").JSX.Element;
+declare const WidgetProvider: ({ children, definition, isPreview, layout, }: WidgetProviderProps) => import("react").JSX.Element;
 export default WidgetProvider;
 //# sourceMappingURL=WidgetProvider.d.ts.map

package/page/components/Widgets/WidgetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,qCAAqC,mBAAmB,gCAoB/E,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,8CAErB,mBAAmB,gCAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/page/components/Widgets/WidgetProvider.js

@@ -11,12 +11,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const WidgetProvider = ({
   children,
   definition,
-  isPreview
+  isPreview,
+  layout
 }) => {
   const value = useMemo(() => {
     const {
       widgetConfig,
-      layout,
       visibility,
       code,
       widgetConfigDefinitionCode
@@ -29,7 +29,7 @@ const WidgetProvider = ({
       visibility,
       isPreview
     };
-  }, [definition, isPreview]);
+  }, [definition, isPreview, layout]);
   return /*#__PURE__*/_jsx(WidgetContext.Provider, {
     value: value,
     children: children

package/page/components/Widgets/constants.d.ts

@@ -1,5 +1,18 @@
+import { type MediaMarginSettings } from '@shopgate/engage/settings/types/appSettings';
 /**
  * Whether to consider vertical margins when calculating the overlay position.
  */
 export declare const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+/**
+ * The margin sides of a widget container.
+ */
+export declare const MARGIN_SIDES: readonly ["marginTop", "marginBottom", "marginLeft", "marginRight"];
+/**
+ * The media widget margin side that belongs to each margin of a widget container.
+ */
+export declare const MARGIN_SIDE_SETTINGS: Record<typeof MARGIN_SIDES[number], keyof MediaMarginSettings>;
+/**
+ * The sides of the media widget margins.
+ */
+export declare const MEDIA_MARGIN_SIDES: (keyof MediaMarginSettings)[];
 //# sourceMappingURL=constants.d.ts.map

package/page/components/Widgets/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,YAAY,qEAAsE,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,OAAO,YAAY,CAAC,MAAM,CAAC,EAC3B,MAAM,mBAAmB,CAM1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,+BAAsC,CAAC"}

package/page/components/Widgets/constants.js

@@ -1,4 +1,24 @@
 /**
  * Whether to consider vertical margins when calculating the overlay position.
  */
-export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+
+/**
+ * The margin sides of a widget container.
+ */
+export const MARGIN_SIDES = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+
+/**
+ * The media widget margin side that belongs to each margin of a widget container.
+ */
+export const MARGIN_SIDE_SETTINGS = {
+  marginTop: 'top',
+  marginBottom: 'bottom',
+  marginLeft: 'left',
+  marginRight: 'right'
+};
+
+/**
+ * The sides of the media widget margins.
+ */
+export const MEDIA_MARGIN_SIDES = Object.values(MARGIN_SIDE_SETTINGS);

package/page/components/Widgets/helpers.d.ts

@@ -1,3 +1,5 @@
+import { type MediaMarginSettings } from '@shopgate/engage/settings/types/appSettings';
+import { type AppliedMediaMargins, type WidgetDefinitionLayout, type WidgetLayout } from './types';
 /**
  * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
  * a scrollable article element or the window.
@@ -47,4 +49,21 @@ export interface ScheduledStatus {
  * @returns An object containing the scheduling status.
  */
 export declare function checkScheduled({ from, to, timezoneOffset }?: ScheduledParams): ScheduledStatus;
+/**
+ * Retrieves the sides on which a widget gets the media widget margins. Widgets declare them in a
+ * "config.json" inside their folder, which the build adds to the widget mapping. A widget that
+ * declares nothing keeps the margins of its own configuration.
+ * @param name The name of the widget.
+ * @returns The sides that get the media widget margins.
+ */
+export declare function getAppliedMediaMargins(name: string): AppliedMediaMargins;
+/**
+ * Resolves the margins of a widget container. The configuration of the widget instance wins over
+ * the media widget margin, which only applies to the sides the widget asked for.
+ * @param definitionLayout The layout settings of the widget instance.
+ * @param appliedMediaMargins The sides on which the widget gets the media widget margins.
+ * @param settings The media widget margins.
+ * @returns The resolved margins.
+ */
+export declare function resolveWidgetLayout(definitionLayout: Partial<WidgetDefinitionLayout> | undefined, appliedMediaMargins: AppliedMediaMargins, settings: MediaMarginSettings): WidgetLayout;
 //# sourceMappingURL=helpers.d.ts.map

package/page/components/Widgets/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/helpers.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,WAAW,GAAG,IACwC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,GAAE,eAAoB,GACjD,eAAe,CAqBjB"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,sBAAsB,EAC3B,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAGjB;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,WAAW,GAAG,IACwC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,GAAE,eAAoB,GACjD,eAAe,CAqBjB;AAkBD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAgBxE;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAAG,SAAS,EAC7D,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,mBAAmB,GAC5B,YAAY,CAUd"}

package/page/components/Widgets/helpers.js

@@ -1,5 +1,8 @@
+import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.string.replace.js";
+import { componentsConfig } from '@shopgate/pwa-common/helpers/config';
 import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
+import { MARGIN_SIDES, MARGIN_SIDE_SETTINGS, MEDIA_MARGIN_SIDES } from "./constants";
 
 /**
  * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
@@ -45,4 +48,51 @@ export function checkScheduled({
     isActive,
     isExpired
   };
+}
+
+/**
+ * The widget mapping of the components config, reduced to what the layout resolution reads. The
+ * config itself comes from untyped JS, so the shape is described here at the consumption boundary.
+ */
+
+/**
+ * Retrieves the sides on which a widget gets the media widget margins. Widgets declare them in a
+ * "config.json" inside their folder, which the build adds to the widget mapping. A widget that
+ * declares nothing keeps the margins of its own configuration.
+ * @param name The name of the widget.
+ * @returns The sides that get the media widget margins.
+ */
+export function getAppliedMediaMargins(name) {
+  const {
+    widgetsV2
+  } = componentsConfig;
+  const declared = widgetsV2?.[name]?.config?.layout?.applyMediaMargins;
+  if (declared === true) {
+    return MEDIA_MARGIN_SIDES.reduce((sides, side) => ({
+      ...sides,
+      [side]: true
+    }), {});
+  }
+  if (declared && typeof declared === 'object') {
+    return declared;
+  }
+  return {};
+}
+
+/**
+ * Resolves the margins of a widget container. The configuration of the widget instance wins over
+ * the media widget margin, which only applies to the sides the widget asked for.
+ * @param definitionLayout The layout settings of the widget instance.
+ * @param appliedMediaMargins The sides on which the widget gets the media widget margins.
+ * @param settings The media widget margins.
+ * @returns The resolved margins.
+ */
+export function resolveWidgetLayout(definitionLayout, appliedMediaMargins, settings) {
+  return MARGIN_SIDES.reduce((layout, side) => {
+    const mediaSide = MARGIN_SIDE_SETTINGS[side];
+    return {
+      ...layout,
+      [side]: definitionLayout?.[side] ?? (appliedMediaMargins?.[mediaSide] ? settings?.[mediaSide] ?? 0 : 0)
+    };
+  }, {});
 }

package/page/components/Widgets/types.d.ts

@@ -1,3 +1,4 @@
+import { type MediaMarginSettings } from '@shopgate/engage/settings/types/appSettings';
 /**
  * Visibility settings for a widget.
  */
@@ -16,25 +17,50 @@ export interface WidgetDefinitionVisibility {
     scheduleEndDate: string;
 }
 /**
- * Layout settings for a widget.
+ * Layout settings for a widget. A side is null when it has no own configuration.
  */
 export interface WidgetDefinitionLayout {
     /**
      * Top margin for the widget.
      */
-    marginTop: number;
+    marginTop: number | null;
     /**
      * Bottom margin for the widget.
      */
-    marginBottom: number;
+    marginBottom: number | null;
     /**
      * Left margin for the widget.
      */
-    marginLeft: number;
+    marginLeft: number | null;
     /**
      * Right margin for the widget.
      */
-    marginRight: number;
+    marginRight: number | null;
+}
+/**
+ * Margins of a widget container after resolution. Every side is a number, never null.
+ */
+export type WidgetLayout = Record<keyof WidgetDefinitionLayout, number>;
+/**
+ * The sides on which a widget gets the media widget margins. An omitted side does not.
+ */
+export type AppliedMediaMargins = Partial<Record<keyof MediaMarginSettings, boolean>>;
+/**
+ * Static configuration a widget declares about itself. It is picked up at build time, so its
+ * values are known before the widget is loaded.
+ */
+export interface WidgetConfig {
+    /**
+     * How the container that the page builder renders around the widget behaves.
+     */
+    layout?: {
+        /**
+         * On which sides the widget gets the media widget margins that merchants configure in the
+         * theme settings. True for all sides, false for none, or an object to opt in per side.
+         * Margins configured for a single widget instance always win.
+         */
+        applyMediaMargins?: boolean | AppliedMediaMargins;
+    };
 }
 /**
  * Definition of a API widget

package/page/components/Widgets/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAA;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;IACnC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,MAAM,EAAE;YACN;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;eAEG;YACH,OAAO,EAAE,MAAM,CAAC;YAChB;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF;;WAEG;QACH,SAAS,EAAE;YACT;;eAEG;YACH,WAAW,EAAE,OAAO,CAAC;YACrB;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;eAEG;YACH,SAAS,EAAE,OAAO,CAAC;YACnB;;eAEG;YACH,OAAO,EAAE,MAAM,CAAC;YAChB;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAEvF;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAA;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC;AAEtF;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;;;WAIG;QACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;KACnD,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;IACnC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,MAAM,EAAE;YACN;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;eAEG;YACH,OAAO,EAAE,MAAM,CAAC;YAChB;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF;;WAEG;QACH,SAAS,EAAE;YACT;;eAEG;YACH,WAAW,EAAE,OAAO,CAAC;YACrB;;eAEG;YACH,QAAQ,EAAE,OAAO,CAAC;YAClB;;eAEG;YACH,SAAS,EAAE,OAAO,CAAC;YACnB;;eAEG;YACH,OAAO,EAAE,MAAM,CAAC;YAChB;;eAEG;YACH,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/page/widget.config.schema.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Widget configuration",
+  "description": "Declares how the page builder treats a widget. The file lives next to the widget implementation and is read at build time, so its values are known before the widget itself is loaded.",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "Path or url of this schema. Enables autocompletion and validation in the editor."
+    },
+    "layout": {
+      "type": "object",
+      "description": "How the container that the page builder renders around the widget behaves.",
+      "additionalProperties": false,
+      "properties": {
+        "applyMediaMargins": {
+          "description": "On which sides the widget gets the media widget margins that merchants configure in the theme settings. Margins configured for a single widget instance in the page builder always win. Widgets that bring their own spacing should leave this out.",
+          "default": false,
+          "oneOf": [
+            {
+              "type": "boolean",
+              "description": "true applies the media widget margins to all four sides, false to none."
+            },
+            {
+              "type": "object",
+              "description": "Opts in per side. An omitted side does not get the margin.",
+              "additionalProperties": false,
+              "minProperties": 1,
+              "properties": {
+                "top": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin above it."
+                },
+                "bottom": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin below it."
+                },
+                "left": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin on its left. Widgets that are meant to touch the screen edges leave this out."
+                },
+                "right": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin on its right. Widgets that are meant to touch the screen edges leave this out."
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}

package/page/widgets/HeroBanner/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/Image/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageRow/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageSlider/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageSlider/hooks.js

@@ -145,11 +145,13 @@ export const useImageSliderWidget = () => {
         style: {
           ...(layout.marginLeft ? {
             marginLeft: layout.marginLeft * -1,
-            paddingLeft: layout.marginLeft
+            paddingLeft: layout.marginLeft,
+            '--swiper-pagination-inset-left': `${layout.marginLeft}px`
           } : {}),
           ...(layout.marginRight ? {
             marginRight: layout.marginRight * -1,
-            paddingRight: layout.marginRight
+            paddingRight: layout.marginRight,
+            '--swiper-pagination-inset-right': `${layout.marginRight}px`
           } : {})
         }
       } : null),

package/page/widgets/README.md

@@ -0,0 +1,92 @@
+# Widgets
+
+Widgets are the building blocks of a CMS page. The core renders a flat list of containers and each
+widget renders inside one, without knowing anything about its surroundings.
+
+## Widget config
+
+A widget can tell the core a few things about itself. It does that in a `config.json` inside its
+own folder:
+
+```
+libraries/engage/page/widgets/Video/
+  config.json     <- the config of this widget
+  Video.tsx
+  hooks.ts
+  index.ts
+```
+
+Widgets that need no configuration ship no file.
+
+The file is read **at build time** and its content is passed to the app together with the widget
+mapping, so its values are known before the widget itself is loaded. A running build watches the
+config files, which means editing one is picked up without a restart. Adding a whole new widget
+still needs one, because that also changes the component mapping of the app.
+
+A config that does not match the schema, or that cannot be parsed, **fails the build** with a
+message that names the widget.
+
+### Media widget margins
+
+Merchants configure margins around media widgets in the theme settings. They arrive in the app
+settings as `widgets.mediaMargins` and are applied to the container of every widget that asks for
+them:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}
+```
+
+`true` applies the margin on all four sides. To take part on some sides only, name them:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": {
+      "top": true,
+      "bottom": true
+    }
+  }
+}
+```
+
+Widgets that bring their own spacing should not ask for the margins, otherwise the two add up. A
+widget that is meant to touch the screen edges leaves out `left` and `right`.
+
+Margins that a merchant configures for a single widget instance in the page builder always win over
+the media widget margins.
+
+### Editor support
+
+The optional `"$schema"` entry gives autocompletion and inline validation while editing. It is an
+editor feature only - the build never follows it, and it is stripped from the config before it
+reaches the app. What guards a config is the validation the build runs against
+[widget.config.schema.json](../widget.config.schema.json), which happens with or without the entry.
+
+Widgets in this package point at the schema with a path relative to their own folder:
+
+```json
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}
+```
+
+**Widgets in extensions leave the entry out.** There is no relative path that works for them: an
+extension is developed in its own repository, where this package is not present at all, and in an
+app it depends on whether the theme or the app carries `@shopgate/engage`. A wrong path is not
+dangerous - the editor just offers no help - but it is noise that never starts working. Extension
+authors who want the same support can map the schema in their editor instead, for example through
+`json.schemas` in the workspace settings of their repository.
+
+### Widgets of extensions
+
+The config of an extension widget belongs to the repository of that extension. `extensions/` is not
+part of this repository, so a file that is only added to a local checkout never ships.

package/page/widgets/Video/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/settings/reducers/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBA+DlC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAuC7D,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAuElC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAqD7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -67,6 +67,14 @@ export const DEFAULT_APP_SETTINGS = {
   appearance: {
     defaultColorSchemeMode: 'light'
   },
+  widgets: {
+    mediaMargins: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  },
   images: {
     quality: DEFAULT_IMAGE_QUALITY,
     // Already in the image service's format, so the unhydrated path needs no conversion.
@@ -95,8 +103,12 @@ const appSettings = (state, action = {
     const {
       images,
       typography,
-      appearance
+      appearance,
+      widgets
     } = action.settings ?? {};
+    const {
+      mediaMargins
+    } = widgets ?? {};
 
     // Merged over the defaults rather than over the current state, so a field an incoming payload
     // omits falls back to its default instead of keeping the value of an earlier one. The admin
@@ -117,6 +129,17 @@ const appSettings = (state, action = {
       appearance: appearance === null ? undefined : {
         ...appearance,
         defaultColorSchemeMode: appearance?.defaultColorSchemeMode ?? undefined
+      },
+      widgets: widgets === null ? undefined : {
+        ...widgets,
+        // Sides are mapped one by one, because the admin clears a single margin with a null just
+        // like it clears a whole branch with one.
+        mediaMargins: !mediaMargins ? undefined : {
+          top: mediaMargins.top ?? undefined,
+          bottom: mediaMargins.bottom ?? undefined,
+          left: mediaMargins.left ?? undefined,
+          right: mediaMargins.right ?? undefined
+        }
       }
     }, {
       isHydrated: true

package/settings/selectors/appSettings.d.ts

@@ -119,6 +119,14 @@ export declare const getCardShadowSize: ((state: AppSettingsState) => import("..
 }> & {
     clearCache: () => void;
 };
+/**
+ * Selects the margins that are applied around media widgets.
+ */
+export declare const getWidgetMediaMargins: ((state: AppSettingsState) => import("../types/appSettings").MediaMarginSettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").MediaMarginSettings, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
 /**
  * Selects the color scheme mode that applies while the visitor has no own preference stored. A
  * mode rather than a scheme name, since it can also ask to follow the operating system: a

package/settings/selectors/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGhG;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC;AAWF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;CAMpC,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGhG;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAWF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;CAMpC,CAAC"}

package/settings/selectors/appSettings.js

@@ -68,6 +68,11 @@ export const getCardSettings = createSelector(getAppSettingsState, appSettings =
  */
 export const getCardShadowSize = createSelector(getCardSettings, cards => cards.style === 'shadow' ? cards.shadow.size : 'none');
 
+/**
+ * Selects the margins that are applied around media widgets.
+ */
+export const getWidgetMediaMargins = createSelector(getAppSettingsState, appSettings => appSettings.widgets?.mediaMargins ?? DEFAULT_APP_SETTINGS.widgets.mediaMargins);
+
 /**
  * Selects the raw appearance setting: a binding color scheme, or `selectable`.
  */

package/settings/types/appSettings.d.ts

@@ -198,6 +198,37 @@ export interface ImageSettings {
      */
     product: ProductImageSettings;
 }
+/**
+ * Margins around media widgets - the widgets that bring no spacing of their own, like images,
+ * sliders and videos. Applied per side, and only to widgets that ask for them.
+ */
+export interface MediaMarginSettings {
+    /**
+     * Margin above the widget.
+     */
+    top: number;
+    /**
+     * Margin below the widget.
+     */
+    bottom: number;
+    /**
+     * Margin left of the widget.
+     */
+    left: number;
+    /**
+     * Margin right of the widget.
+     */
+    right: number;
+}
+/**
+ * Settings for the cms widgets.
+ */
+export interface WidgetSettings {
+    /**
+     * Margins around media widgets.
+     */
+    mediaMargins: MediaMarginSettings;
+}
 /**
  * Settings for the app's overall appearance.
  */
@@ -234,6 +265,10 @@ export interface AppSettings {
     cards: CardSettings;
     typography: TypographySettings;
     appearance: AppearanceSettings;
+    /**
+     * Settings for the cms widgets.
+     */
+    widgets: WidgetSettings;
 }
 /**
  * A font stylesheet to load. The file carries the `@font-face` rules and points its target at the

package/settings/types/appSettings.d.ts.map

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

package/settings/types/appSettings.js

@@ -98,6 +98,15 @@ export const COLOR_SCHEME_SELECTABLE = 'selectable';
  * service, including category images, carrier logos and page builder widget images.
  */
 
+/**
+ * Margins around media widgets - the widgets that bring no spacing of their own, like images,
+ * sliders and videos. Applied per side, and only to widgets that ask for them.
+ */
+
+/**
+ * Settings for the cms widgets.
+ */
+
 /**
  * Settings for the app's overall appearance.
  */