@pushwoosh/dumb-components 1.1.171 → 1.1.173

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -11,7 +11,6 @@ import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
-import { GradientOverlay } from './views/shared/styles';
 function dimsScreen(config) {
   if (!config) {
     return false;
@@ -50,16 +49,12 @@ function justifyFor(config) {
       return 'center';
   }
 }
-function renderCoverBackdrop(url, backgroundColor, overlayTopOffset) {
-  return _jsxs(_Fragment, {
-    children: [_jsx(NativeRichMediaCoverImg, {
-      url: url,
-      position: "absolute",
-      inset: true,
-      backgroundColor: backgroundColor
-    }), _jsx(GradientOverlay, {
-      "$topOffset": overlayTopOffset
-    })]
+function renderCoverBackdrop(url, backgroundColor) {
+  return _jsx(NativeRichMediaCoverImg, {
+    url: url,
+    position: "absolute",
+    inset: true,
+    backgroundColor: backgroundColor
   });
 }
 function renderBackdrop(config, activeIndex) {
@@ -72,7 +67,7 @@ function renderBackdrop(config, activeIndex) {
       {
         var _items$clampIndex;
         const items = config.stories.items;
-        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000', '55%');
+        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000');
       }
     default:
       return null;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaContentImgProps } from './types';
+export declare function NativeRichMediaContentImg(props: NativeRichMediaContentImgProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Img } from './styles';
+export function NativeRichMediaContentImg(props) {
+  const {
+    url,
+    margin,
+    borderRadius = 18
+  } = props;
+  return _jsx(Horizontal, {
+    "$margin": margin,
+    "$borderRadius": borderRadius,
+    "$bgColor": Color.FROZEN,
+    "$overflow": "hidden",
+    children: _jsx(Img, {
+      src: url,
+      alt: ""
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaContentImg } from './NativeRichMediaContentImg';

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaContentImg } from './NativeRichMediaContentImg';

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/styles.d.ts

@@ -0,0 +1 @@
+export declare const Img: import("styled-components").StyledComponent<"img", any, {}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Img = styled.img.withConfig({
+  displayName: "Img",
+  componentId: "sc-1q27duj-0"
+})(["display:block;width:100%;height:auto;"]);

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/types.d.ts

@@ -0,0 +1,5 @@
+export type NativeRichMediaContentImgProps = {
+    url?: string;
+    margin?: string;
+    borderRadius?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card, Dot, Dots, GradientOverlay, TextBlock } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Dot, Dots, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
@@ -20,15 +20,13 @@ export function NativeRichMediaCarouselView(props) {
       url: item.image,
       position: "absolute",
       inset: true
-    }), (title.text || message.text) && _jsxs(_Fragment, {
-      children: [_jsx(GradientOverlay, {}), _jsxs(TextBlock, {
-        children: [title.text && _jsx(NativeRichMediaTitle, {
-          "$color": title.color,
-          children: title.text
-        }), message.text && _jsx(NativeRichMediaText, {
-          "$color": message.color,
-          children: message.text
-        })]
+    }), (title.text || message.text) && _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        children: message.text
       })]
     }), items.length > 1 && _jsx(Dots, {
       children: items.map((_, i) => _jsx(Dot

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.d.ts

@@ -1,5 +1,4 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dots: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dot: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js

@@ -3,21 +3,17 @@ export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-15b2cux-0"
 })(["position:relative;margin:0 12px;height:461px;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-15b2cux-1"
-})(["position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-15b2cux-2"
+  componentId: "sc-15b2cux-1"
 })(["position:absolute;left:18px;right:18px;bottom:36px;"]);
 export const Dots = styled.div.withConfig({
   displayName: "Dots",
-  componentId: "sc-15b2cux-3"
+  componentId: "sc-15b2cux-2"
 })(["position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:0;"]);
 export const Dot = styled.div.withConfig({
   displayName: "Dot",
-  componentId: "sc-15b2cux-4"
+  componentId: "sc-15b2cux-3"
 })(["display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4.5px;background:", ";"], ({
   $active
 }) => $active ? '#FFF' : 'rgba(255,255,255,0.4)');

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Card } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaModalView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Card, {
     "$background": block.background,
-    children: [block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "14px 14px 0",
-      height: 179,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '20px' : '30px') + ' 24px 0',

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Handle, Sheet } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaSheetView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Sheet, {
     "$background": block.background,
-    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "26px 14px 0",
-      height: 190,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '16px' : '20px') + ' 24px 0',

package/NativeRichMediaPreview/views/shared/styles.d.ts

@@ -1,6 +1,3 @@
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {
-    $topOffset?: string;
-}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
     $background: string;

package/NativeRichMediaPreview/views/shared/styles.js

@@ -1,18 +1,12 @@
 import styled from 'styled-components';
 import { EDGE_INSET } from '../../helpers';
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-x5bn03-0"
-})(["position:absolute;left:0;right:0;bottom:0;top:", ";background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"], ({
-  $topOffset
-}) => $topOffset ?? '45%');
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-x5bn03-1"
+  componentId: "sc-x5bn03-0"
 })(["margin:0 ", "px ", "px;"], EDGE_INSET, EDGE_INSET);
 export const Card = styled.div.withConfig({
   displayName: "Card",
-  componentId: "sc-x5bn03-2"
+  componentId: "sc-x5bn03-1"
 })(["position:relative;margin:0 12px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
   $padding
 }) => $padding, ({

package/RichmediaPreview/RichmediaPreview.d.ts

@@ -1,8 +1,10 @@
 import { type ReactElement } from 'react';
 import type { RichmediaPreviewProps } from './types';
 /**
- * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
- * localization via {@link useRichmediaHtml}.
+ * Renders a rich-media (in-app) template in a fully isolated sandboxed iframe, resolving
+ * params and localization via {@link useRichmediaHtml}. Template scripts run in an opaque
+ * origin (via {@link SandboxedHtmlFrame}) and cannot reach the control-panel session,
+ * cookies, storage or parent DOM.
  *
  * @example
  * <RichmediaPreview name="Promo" content={html} params={params} language="en" />

package/RichmediaPreview/RichmediaPreview.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { useRichmediaHtml } from './hooks';
 import { RichMediaPreviewContainer, RichMediaPreviewIframe } from './styles';
 /**
- * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
- * localization via {@link useRichmediaHtml}.
+ * Renders a rich-media (in-app) template in a fully isolated sandboxed iframe, resolving
+ * params and localization via {@link useRichmediaHtml}. Template scripts run in an opaque
+ * origin (via {@link SandboxedHtmlFrame}) and cannot reach the control-panel session,
+ * cookies, storage or parent DOM.
  *
  * @example
  * <RichmediaPreview name="Promo" content={html} params={params} language="en" />
@@ -23,7 +24,6 @@ export function RichmediaPreview(props) {
     height = 480,
     isLoading = false
   } = props;
-  const $ref = useRef(null);
   const richmediaHtml = useRichmediaHtml({
     content,
     params,
@@ -31,15 +31,6 @@ export function RichmediaPreview(props) {
     defaultLanguage,
     baseUrl
   });
-  useEffect(() => {
-    var _$ref$current;
-    if (!($ref !== null && $ref !== void 0 && (_$ref$current = $ref.current) !== null && _$ref$current !== void 0 && (_$ref$current = _$ref$current.contentWindow) !== null && _$ref$current !== void 0 && _$ref$current.document)) {
-      return;
-    }
-    $ref.current.contentWindow.document.open('text/html', 'replace');
-    $ref.current.contentWindow.document.write(richmediaHtml);
-    $ref.current.contentWindow.document.close();
-  }, [$ref, richmediaHtml]);
   return _jsx(RichMediaPreviewContainer, {
     width: width,
     height: height,
@@ -49,9 +40,9 @@ export function RichmediaPreview(props) {
       size: "medium",
       color: Color.LOCKED
     }) : _jsx(RichMediaPreviewIframe, {
-      ref: $ref,
+      mode: "isolated",
       title: name,
-      sandbox: "allow-same-origin allow-scripts"
+      html: richmediaHtml
     })
   });
 }

package/RichmediaPreview/styles.d.ts

@@ -1,3 +1,4 @@
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
 export declare const RichMediaPreviewContainer: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
@@ -14,4 +15,4 @@ export declare const RichMediaPreviewContainer: import("styled-components").Styl
     height: string | number;
     $isLoading?: boolean;
 }, "$gridAutoFlow">;
-export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<typeof SandboxedHtmlFrame, any, {}, never>;

package/RichmediaPreview/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Vertical, toCssValue } from '@pushwoosh/kit-helpers';
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
 export const RichMediaPreviewContainer = styled(Vertical).withConfig({
   displayName: "RichMediaPreviewContainer",
   componentId: "sc-1ci6l2b-0"
@@ -11,7 +12,7 @@ export const RichMediaPreviewContainer = styled(Vertical).withConfig({
 }) => toCssValue(height), ShapeRadius.SECTION, ({
   $isLoading
 }) => $isLoading ? Color.FROZEN : Color.CLEAR);
-export const RichMediaPreviewIframe = styled.iframe.withConfig({
+export const RichMediaPreviewIframe = styled(SandboxedHtmlFrame).withConfig({
   displayName: "RichMediaPreviewIframe",
   componentId: "sc-1ci6l2b-1"
 })(["position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:scale(0.51);"]);

package/SandboxedHtmlFrame/SandboxedHtmlFrame.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from 'react';
+import type { SandboxedHtmlFrameProps } from './types';
+/**
+ * Renders untrusted HTML inside a sandboxed iframe. The `mode` fixes the security
+ * boundary so scripts and same-origin access can never be granted together:
+ *
+ * - `isolated` — `sandbox="allow-scripts"`; scripts run in an opaque origin and cannot
+ *   touch the embedding page. The parent gets no DOM access.
+ * - `inspectable` — `sandbox="allow-same-origin"`; scripts are disabled, but the parent
+ *   keeps read access to the frame document via `onReady`.
+ *
+ * @example
+ * <SandboxedHtmlFrame mode="isolated" html={html} title="Preview" />
+ * <SandboxedHtmlFrame mode="inspectable" html={html} title="Stats" onReady={decorate} />
+ */
+export declare function SandboxedHtmlFrame(props: SandboxedHtmlFrameProps): ReactElement;

package/SandboxedHtmlFrame/SandboxedHtmlFrame.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+const SANDBOX = {
+  isolated: 'allow-scripts',
+  inspectable: 'allow-same-origin'
+};
+/**
+ * Renders untrusted HTML inside a sandboxed iframe. The `mode` fixes the security
+ * boundary so scripts and same-origin access can never be granted together:
+ *
+ * - `isolated` — `sandbox="allow-scripts"`; scripts run in an opaque origin and cannot
+ *   touch the embedding page. The parent gets no DOM access.
+ * - `inspectable` — `sandbox="allow-same-origin"`; scripts are disabled, but the parent
+ *   keeps read access to the frame document via `onReady`.
+ *
+ * @example
+ * <SandboxedHtmlFrame mode="isolated" html={html} title="Preview" />
+ * <SandboxedHtmlFrame mode="inspectable" html={html} title="Stats" onReady={decorate} />
+ */
+export function SandboxedHtmlFrame(props) {
+  const {
+    mode,
+    html,
+    title,
+    className
+  } = props;
+  const onReady = mode === 'inspectable' ? props.onReady : undefined;
+  const $ref = useRef(null);
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    setIsReady(false);
+  }, [html]);
+  const handleLoad = useCallback(() => {
+    setIsReady(true);
+  }, []);
+  useEffect(() => {
+    var _$ref$current;
+    if (!isReady || !onReady) {
+      return undefined;
+    }
+    const frameDocument = (_$ref$current = $ref.current) === null || _$ref$current === void 0 ? void 0 : _$ref$current.contentDocument;
+    if (!frameDocument) {
+      return undefined;
+    }
+    return onReady(frameDocument);
+  }, [isReady, onReady]);
+  return _jsx("iframe", {
+    ref: $ref,
+    className: className,
+    title: title,
+    srcDoc: html,
+    sandbox: SANDBOX[mode],
+    onLoad: handleLoad
+  });
+}

package/SandboxedHtmlFrame/__tests__/SandboxedHtmlFrame.test.d.ts

@@ -0,0 +1 @@
+export {};

package/SandboxedHtmlFrame/__tests__/SandboxedHtmlFrame.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
+const HTML = '<p>content</p>';
+function getFrame(container) {
+  const frame = container.querySelector('iframe');
+  if (!frame) {
+    throw new Error('iframe not rendered');
+  }
+  return frame;
+}
+describe('SandboxedHtmlFrame', () => {
+  it('isolates scripts in an opaque origin without same-origin access', () => {
+    const {
+      container
+    } = render(_jsx(SandboxedHtmlFrame, {
+      mode: "isolated",
+      title: "preview",
+      html: HTML
+    }));
+    const frame = getFrame(container);
+    expect(frame.getAttribute('sandbox')).toBe('allow-scripts');
+    expect(frame.getAttribute('srcdoc')).toBe(HTML);
+    expect(frame).toHaveAttribute('title', 'preview');
+  });
+  it('grants same-origin access but disables scripts in inspectable mode', () => {
+    const {
+      container
+    } = render(_jsx(SandboxedHtmlFrame, {
+      mode: "inspectable",
+      title: "stats",
+      html: HTML
+    }));
+    const frame = getFrame(container);
+    expect(frame.getAttribute('sandbox')).toBe('allow-same-origin');
+    expect(frame.getAttribute('sandbox')).not.toContain('allow-scripts');
+  });
+  it('never emits allow-scripts together with allow-same-origin', () => {
+    const isolated = render(_jsx(SandboxedHtmlFrame, {
+      mode: "isolated",
+      title: "a",
+      html: HTML
+    }));
+    const inspectable = render(_jsx(SandboxedHtmlFrame, {
+      mode: "inspectable",
+      title: "b",
+      html: HTML
+    }));
+    [isolated, inspectable].forEach(({
+      container
+    }) => {
+      const sandbox = getFrame(container).getAttribute('sandbox') ?? '';
+      const hasBoth = sandbox.includes('allow-scripts') && sandbox.includes('allow-same-origin');
+      expect(hasBoth).toBe(false);
+    });
+  });
+});

package/SandboxedHtmlFrame/index.d.ts

@@ -0,0 +1,2 @@
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';
+export type { SandboxedHtmlFrameProps, IsolatedSandboxedHtmlFrameProps, InspectableSandboxedHtmlFrameProps, } from './types';

package/SandboxedHtmlFrame/index.js

@@ -0,0 +1 @@
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';

package/SandboxedHtmlFrame/types.d.ts

@@ -0,0 +1,33 @@
+type SandboxedHtmlFrameBaseProps = {
+    /** Untrusted HTML rendered inside the iframe via `srcDoc`. */
+    html: string;
+    /** Accessible title of the iframe. */
+    title: string;
+    /** Forwarded to the iframe element so consumers can size it via `styled()`. */
+    className?: string;
+};
+/**
+ * Fully isolated rendering: scripts run inside an opaque origin and cannot reach the
+ * embedding page (cookies, storage, parent DOM). Use for pure visual previews of
+ * untrusted content.
+ */
+export type IsolatedSandboxedHtmlFrameProps = SandboxedHtmlFrameBaseProps & {
+    mode: 'isolated';
+    onReady?: never;
+};
+/**
+ * Inspectable rendering: scripts are disabled entirely, but the embedding page keeps
+ * same-origin read access to the frame document. Use when the parent must measure or
+ * decorate the rendered DOM (e.g. an interaction heatmap).
+ */
+export type InspectableSandboxedHtmlFrameProps = SandboxedHtmlFrameBaseProps & {
+    mode: 'inspectable';
+    /**
+     * Called with the frame document once it has loaded, and again whenever the callback
+     * identity changes. May return a cleanup run before the next call and on unmount.
+     */
+    onReady?: (document: Document) => void | (() => void);
+};
+/** Props of {@link SandboxedHtmlFrame}. */
+export type SandboxedHtmlFrameProps = IsolatedSandboxedHtmlFrameProps | InspectableSandboxedHtmlFrameProps;
+export {};

package/SandboxedHtmlFrame/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -43,6 +43,7 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { SandboxedHtmlFrame, type SandboxedHtmlFrameProps, type IsolatedSandboxedHtmlFrameProps, type InspectableSandboxedHtmlFrameProps, } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';

package/index.js

@@ -43,6 +43,7 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps } from './FrequencyCapping';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.171",
+  "version": "1.1.173",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",