@pushwoosh/websdk-common 6.16.0 → 6.17.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pushwoosh/websdk-common",
-  "version": "6.16.0",
-  "description": "Code shared by the Pushwoosh WebSDK and the Control Panel, one entry point per module (web-popups: web popup model and renderer)",
+  "version": "6.17.1",
+  "description": "Code shared by the Pushwoosh WebSDK and the Control Panel, one entry point per module (web-popups: web popup model and renderer; subscription-widget: push subscription widget model and renderer)",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
@@ -14,6 +14,10 @@
       "types": "./web-popups/index.d.ts",
       "default": "./web-popups/index.js"
     },
+    "./subscription-widget": {
+      "types": "./subscription-widget/index.d.ts",
+      "default": "./subscription-widget/index.js"
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

package/subscription-widget/SubscriptionWidgetReader.d.ts

@@ -0,0 +1,23 @@
+import { type SubscriptionWidgetConfig, type SubscriptionWidgetPromptVariant, type SubscriptionWidgetReaderProps } from './types';
+import { type WebPopupResolvedColors } from '../web-popups/types';
+/** The prompt box without placement, for CP forms that show it beside their fields. */
+export declare function SubscriptionPromptBox({ config, variant, colors, busy, onAccept, onDecline }: {
+    config: SubscriptionWidgetConfig;
+    variant: SubscriptionWidgetPromptVariant;
+    colors: WebPopupResolvedColors;
+    busy?: boolean;
+    onAccept?: () => void;
+    onDecline?: () => void;
+}): import("react").JSX.Element;
+/** The launcher bell without placement. */
+export declare function SubscriptionLauncherButton({ config, blocked, colors, onClick }: {
+    config: SubscriptionWidgetConfig;
+    blocked: boolean;
+    colors: WebPopupResolvedColors;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+/**
+ * The launcher, or while `open` the prompt in its place; 'live' pins it to the viewport, 'preview' to the
+ * nearest positioned parent with no enter animation. The host owns `open` and every side effect.
+ */
+export declare function SubscriptionWidgetReader({ config, permission, open, mode, colorScheme, busy, onAccept, onDecline, onLauncherClick, }: SubscriptionWidgetReaderProps): import("react").JSX.Element | null;

package/subscription-widget/SubscriptionWidgetReader.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SUBSCRIPTION_WIDGET_KEYFRAMES } from './constants';
+import { subscriptionWidgetLauncherVisible, subscriptionWidgetPromptVariant } from './helpers';
+import { useColorScheme } from '../web-popups/colorScheme';
+import { webPopupButtonPillStyle } from '../web-popups/constants';
+import { WEB_POPUP_GLYPH_PATHS } from '../web-popups/glyphs';
+import { resolveWebPopupColors, webPopupDarkEnabled } from '../web-popups/palette';
+const CARD_WIDTH = 360;
+const MODAL_WIDTH = 420;
+const EDGE_GAP = 16;
+const BOX_SHADOW = '0 12px 32px rgba(16, 24, 40, 0.18)';
+const BELL_SLASH_PATH = 'M4 4l16 16';
+function cornerStyle(corner, offset) {
+  const [v, h] = corner.split('-');
+  return {
+    [v]: offset,
+    [h]: offset
+  };
+}
+function enterAnimation(fromTop, animate) {
+  return animate ? `${fromTop ? 'pw-subw-drop' : 'pw-subw-rise'} 0.3s ease-out backwards` : undefined;
+}
+function promptFrameStyle(config, position, animate) {
+  const {
+    layout,
+    position: at
+  } = config.prompt;
+  const base = {
+    position,
+    zIndex: config.zIndex,
+    boxSizing: 'border-box',
+    pointerEvents: 'auto'
+  };
+  if (layout === 'bar') {
+    return {
+      ...base,
+      left: 0,
+      right: 0,
+      [at]: 0,
+      animation: enterAnimation(at === 'top', animate)
+    };
+  }
+  if (layout === 'modal') {
+    return {
+      ...base,
+      top: '50%',
+      left: '50%',
+      width: `min(${MODAL_WIDTH}px, calc(100% - ${EDGE_GAP * 2}px))`,
+      transform: 'translate(-50%, -50%)',
+      animation: animate ? 'pw-subw-fade 0.25s ease-out backwards' : undefined
+    };
+  }
+  const width = `min(${CARD_WIDTH}px, calc(100% - ${EDGE_GAP * 2}px))`;
+  const animation = enterAnimation(at.startsWith('top'), animate);
+  if (at === 'top' || at === 'bottom') {
+    return {
+      ...base,
+      [at]: EDGE_GAP,
+      left: '50%',
+      width,
+      transform: 'translateX(-50%)',
+      animation
+    };
+  }
+  return {
+    ...base,
+    ...cornerStyle(at, EDGE_GAP),
+    width,
+    animation
+  };
+}
+function Button({
+  label,
+  primary,
+  colors,
+  disabled,
+  onClick
+}) {
+  return _jsx("button", {
+    type: "button",
+    disabled: disabled,
+    onClick: onClick,
+    style: {
+      ...webPopupButtonPillStyle(primary ? 'primary' : 'secondary', colors),
+      display: 'inline-block',
+      width: 'auto',
+      padding: '8px 18px',
+      whiteSpace: 'nowrap',
+      opacity: disabled ? 0.6 : 1,
+      cursor: disabled ? 'default' : 'pointer'
+    },
+    children: label
+  });
+}
+/** The prompt box without placement, for CP forms that show it beside their fields. */
+export function SubscriptionPromptBox({
+  config,
+  variant,
+  colors,
+  busy,
+  onAccept,
+  onDecline
+}) {
+  const {
+    prompt,
+    texts
+  } = config;
+  const bar = prompt.layout === 'bar';
+  const blocked = variant === 'blocked';
+  return _jsxs("div", {
+    role: "dialog",
+    "aria-label": blocked ? texts.blockedTitle : texts.title,
+    style: {
+      display: 'flex',
+      flexDirection: bar ? 'row' : 'column',
+      alignItems: bar ? 'center' : 'stretch',
+      flexWrap: bar ? 'wrap' : 'nowrap',
+      gap: 16,
+      padding: bar ? '12px 20px' : 20,
+      boxSizing: 'border-box',
+      width: '100%',
+      borderRadius: bar ? 0 : prompt.borderRadius,
+      boxShadow: BOX_SHADOW,
+      backgroundColor: colors.background,
+      color: colors.text,
+      fontFamily: config.fontFamily,
+      colorScheme: colors.scheme
+    },
+    children: [_jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 12,
+        flex: bar ? '1 1 240px' : undefined
+      },
+      children: [prompt.iconUrl && _jsx("img", {
+        src: prompt.iconUrl,
+        alt: "",
+        width: 48,
+        height: 48,
+        style: {
+          flex: 'none',
+          borderRadius: 8,
+          objectFit: 'cover'
+        }
+      }), _jsxs("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+          minWidth: 0
+        },
+        children: [_jsx("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 600,
+            lineHeight: 1.4
+          },
+          children: blocked ? texts.blockedTitle : texts.title
+        }), _jsx("div", {
+          style: {
+            fontSize: 14,
+            lineHeight: 1.5,
+            color: colors.textSecondary
+          },
+          children: blocked ? texts.blockedMessage : texts.message
+        })]
+      })]
+    }), _jsx("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: 8,
+        flex: 'none'
+      },
+      children: blocked ? _jsx(Button, {
+        label: texts.closeText,
+        primary: true,
+        colors: colors,
+        onClick: onDecline
+      }) : _jsxs(_Fragment, {
+        children: [_jsx(Button, {
+          label: texts.declineText,
+          primary: false,
+          colors: colors,
+          onClick: onDecline
+        }), _jsx(Button, {
+          label: texts.acceptText,
+          primary: true,
+          colors: colors,
+          disabled: busy,
+          onClick: onAccept
+        })]
+      })
+    })]
+  });
+}
+/** The launcher bell without placement. */
+export function SubscriptionLauncherButton({
+  config,
+  blocked,
+  colors,
+  onClick
+}) {
+  const {
+    size
+  } = config.launcher;
+  const label = blocked ? config.texts.launcherBlockedLabel : config.texts.launcherLabel;
+  const iconSize = Math.round(size / 2);
+  return _jsx("button", {
+    type: "button",
+    "aria-label": label,
+    title: label,
+    onClick: onClick,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: size,
+      height: size,
+      padding: 0,
+      border: 'none',
+      borderRadius: '50%',
+      backgroundColor: colors.accent,
+      color: colors.onAccent,
+      boxShadow: BOX_SHADOW,
+      cursor: 'pointer',
+      opacity: blocked ? 0.7 : 1
+    },
+    children: _jsxs("svg", {
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [_jsx("path", {
+        d: WEB_POPUP_GLYPH_PATHS.bell
+      }), blocked && _jsx("path", {
+        d: BELL_SLASH_PATH
+      })]
+    })
+  });
+}
+/**
+ * The launcher, or while `open` the prompt in its place; 'live' pins it to the viewport, 'preview' to the
+ * nearest positioned parent with no enter animation. The host owns `open` and every side effect.
+ */
+export function SubscriptionWidgetReader({
+  config,
+  permission,
+  open,
+  mode = 'live',
+  colorScheme = 'auto',
+  busy,
+  onAccept,
+  onDecline,
+  onLauncherClick
+}) {
+  const scheme = useColorScheme(colorScheme, webPopupDarkEnabled(config));
+  const colors = resolveWebPopupColors(config, scheme);
+  const live = mode === 'live';
+  const position = live ? 'fixed' : 'absolute';
+  const launcher = !open && subscriptionWidgetLauncherVisible(config, permission);
+  if (!config.enable || !open && !launcher) return null;
+  return _jsxs(_Fragment, {
+    children: [live && _jsx("style", {
+      children: SUBSCRIPTION_WIDGET_KEYFRAMES
+    }), launcher && _jsx("div", {
+      style: {
+        position,
+        zIndex: config.zIndex,
+        pointerEvents: 'auto',
+        ...cornerStyle(config.launcher.position, config.launcher.offset)
+      },
+      children: _jsx(SubscriptionLauncherButton, {
+        config: config,
+        blocked: permission === 'denied',
+        colors: colors,
+        onClick: onLauncherClick
+      })
+    }), open && config.prompt.overlay && _jsx("div", {
+      style: {
+        position,
+        inset: 0,
+        zIndex: config.zIndex,
+        backgroundColor: 'rgba(16, 24, 40, 0.5)',
+        animation: live ? 'pw-subw-fade 0.2s ease-out backwards' : undefined,
+        pointerEvents: 'auto'
+      },
+      onClick: onDecline
+    }), open && _jsx("div", {
+      style: promptFrameStyle(config, position, live),
+      children: _jsx(SubscriptionPromptBox, {
+        config: config,
+        variant: subscriptionWidgetPromptVariant(permission),
+        colors: colors,
+        busy: busy,
+        onAccept: onAccept,
+        onDecline: onDecline
+      })
+    })]
+  });
+}

package/subscription-widget/constants.d.ts

@@ -0,0 +1,19 @@
+import { type SubscriptionWidgetConfig, type SubscriptionWidgetCorner, type SubscriptionWidgetLayout, type SubscriptionWidgetPosition, type SubscriptionWidgetTrigger } from './types';
+/** Positions each layout accepts; the first one is the layout's default. */
+export declare const SUBSCRIPTION_WIDGET_POSITIONS: Record<SubscriptionWidgetLayout, SubscriptionWidgetPosition[]>;
+export declare const SUBSCRIPTION_WIDGET_LAYOUTS: SubscriptionWidgetLayout[];
+export declare const SUBSCRIPTION_WIDGET_CORNERS: SubscriptionWidgetCorner[];
+export declare const SUBSCRIPTION_WIDGET_TRIGGERS: SubscriptionWidgetTrigger[];
+/** Inclusive bounds every numeric field is clamped to. */
+export declare const SUBSCRIPTION_WIDGET_LIMITS: {
+    readonly delay: readonly [0, 3600];
+    readonly cappingCount: readonly [0, 100];
+    readonly cappingInterval: readonly [0, 8760];
+    readonly borderRadius: readonly [0, 32];
+    readonly offset: readonly [0, 100];
+    readonly size: readonly [32, 80];
+    readonly zIndex: readonly [0, 2147483647];
+};
+export declare const SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH = 300;
+export declare const SUBSCRIPTION_WIDGET_DEFAULT_CONFIG: SubscriptionWidgetConfig;
+export declare const SUBSCRIPTION_WIDGET_KEYFRAMES = "\n@keyframes pw-subw-fade { from { opacity: 0; } }\n@keyframes pw-subw-drop { from { opacity: 0; translate: 0 -16px; } }\n@keyframes pw-subw-rise { from { opacity: 0; translate: 0 16px; } }\n";

package/subscription-widget/constants.js

@@ -0,0 +1,61 @@
+import { WEB_POPUP_DEFAULT_COLORS, WEB_POPUP_FONT_STACK } from '../web-popups/constants';
+/** Positions each layout accepts; the first one is the layout's default. */
+export const SUBSCRIPTION_WIDGET_POSITIONS = {
+  card: ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+  bar: ['top', 'bottom'],
+  modal: ['center']
+};
+export const SUBSCRIPTION_WIDGET_LAYOUTS = Object.keys(SUBSCRIPTION_WIDGET_POSITIONS);
+export const SUBSCRIPTION_WIDGET_CORNERS = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+export const SUBSCRIPTION_WIDGET_TRIGGERS = ['auto', 'launcher', 'manual'];
+/** Inclusive bounds every numeric field is clamped to. */
+export const SUBSCRIPTION_WIDGET_LIMITS = {
+  delay: [0, 3600],
+  cappingCount: [0, 100],
+  cappingInterval: [0, 8760],
+  borderRadius: [0, 32],
+  offset: [0, 100],
+  size: [32, 80],
+  zIndex: [0, 2147483647]
+};
+export const SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH = 300;
+export const SUBSCRIPTION_WIDGET_DEFAULT_CONFIG = {
+  enable: false,
+  prompt: {
+    layout: 'card',
+    position: 'top',
+    borderRadius: 12,
+    overlay: false
+  },
+  launcher: {
+    enabled: false,
+    position: 'bottom-right',
+    offset: 20,
+    size: 48
+  },
+  display: {
+    trigger: 'auto',
+    delay: 5,
+    cappingCount: 3,
+    cappingInterval: 4
+  },
+  texts: {
+    title: 'Stay in the loop',
+    message: 'Allow notifications to get our news and special offers first.',
+    acceptText: 'Allow',
+    declineText: 'Not now',
+    closeText: 'Got it',
+    blockedTitle: 'Notifications are blocked',
+    blockedMessage: 'To get our notifications, allow them for this site in your browser settings.',
+    launcherLabel: 'Subscribe to notifications',
+    launcherBlockedLabel: 'Notifications are blocked'
+  },
+  colors: WEB_POPUP_DEFAULT_COLORS,
+  fontFamily: WEB_POPUP_FONT_STACK,
+  zIndex: 2147483000
+};
+export const SUBSCRIPTION_WIDGET_KEYFRAMES = `
+@keyframes pw-subw-fade { from { opacity: 0; } }
+@keyframes pw-subw-drop { from { opacity: 0; translate: 0 -16px; } }
+@keyframes pw-subw-rise { from { opacity: 0; translate: 0 16px; } }
+`;

package/subscription-widget/helpers.d.ts

@@ -0,0 +1,16 @@
+import { type SubscriptionWidgetConfig, type SubscriptionWidgetHistory, type SubscriptionWidgetPermission, type SubscriptionWidgetPromptVariant } from './types';
+/**
+ * The widget configuration from API-writable json: enums whitelisted, numbers
+ * clamped, strings trimmed and capped, urls sanitized, defaults for the rest.
+ */
+export declare function normalizeSubscriptionWidgetConfig(raw: unknown): SubscriptionWidgetConfig;
+/** True when the visitor can still act on the ask: not subscribed and push is supported. */
+export declare function subscriptionWidgetActionable(permission: SubscriptionWidgetPermission): boolean;
+/** Which prompt a visitor gets for their permission state. */
+export declare function subscriptionWidgetPromptVariant(permission: SubscriptionWidgetPermission): SubscriptionWidgetPromptVariant;
+/** Whether the launcher is on screen. */
+export declare function subscriptionWidgetLauncherVisible(config: SubscriptionWidgetConfig, permission: SubscriptionWidgetPermission): boolean;
+/** Whether the prompt may open by itself now; the host still waits `display.delay` before showing it. */
+export declare function subscriptionWidgetCanAutoShow(config: SubscriptionWidgetConfig, permission: SubscriptionWidgetPermission, history: SubscriptionWidgetHistory, nowMs: number): boolean;
+/** The history after one more auto show at `nowMs`. */
+export declare function nextSubscriptionWidgetHistory(history: SubscriptionWidgetHistory, nowMs: number): SubscriptionWidgetHistory;

package/subscription-widget/helpers.js

@@ -0,0 +1,110 @@
+import { SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, SUBSCRIPTION_WIDGET_TRIGGERS } from './constants';
+import { normalizeWebPopupColors, normalizeWebPopupDark, safeUrl } from '../web-popups/helpers';
+const HOUR_MS = 3600 * 1000;
+function record(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value) ? value : {};
+}
+function oneOf(value, allowed, fallback) {
+  return allowed.includes(value) ? value : fallback;
+}
+function clamped(value, [min, max], fallback) {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return fallback;
+  return Math.max(min, Math.min(max, Math.round(value)));
+}
+function text(value, fallback) {
+  if (typeof value !== 'string') return fallback;
+  const trimmed = value.trim();
+  return trimmed ? trimmed.slice(0, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH) : fallback;
+}
+function imageUrl(value) {
+  const url = safeUrl(typeof value === 'string' ? value : undefined);
+  return url && /^(https?:\/\/|\/)/i.test(url) ? url : undefined;
+}
+function normalizeTexts(raw) {
+  const defaults = SUBSCRIPTION_WIDGET_DEFAULT_CONFIG.texts;
+  const keys = Object.keys(defaults);
+  return Object.fromEntries(keys.map(key => [key, text(raw[key], defaults[key])]));
+}
+/**
+ * The widget configuration from API-writable json: enums whitelisted, numbers
+ * clamped, strings trimmed and capped, urls sanitized, defaults for the rest.
+ */
+export function normalizeSubscriptionWidgetConfig(raw) {
+  const defaults = SUBSCRIPTION_WIDGET_DEFAULT_CONFIG;
+  const config = record(raw);
+  const prompt = record(config.prompt);
+  const launcher = record(config.launcher);
+  const display = record(config.display);
+  const limits = SUBSCRIPTION_WIDGET_LIMITS;
+  const layout = oneOf(prompt.layout, SUBSCRIPTION_WIDGET_LAYOUTS, defaults.prompt.layout);
+  const positions = SUBSCRIPTION_WIDGET_POSITIONS[layout];
+  const trigger = oneOf(display.trigger, SUBSCRIPTION_WIDGET_TRIGGERS, defaults.display.trigger);
+  const iconUrl = imageUrl(prompt.iconUrl);
+  const colors = normalizeWebPopupColors({
+    colors: config.colors
+  });
+  const dark = normalizeWebPopupDark({
+    dark: config.dark
+  }, colors);
+  return {
+    enable: config.enable === true,
+    prompt: {
+      layout,
+      position: oneOf(prompt.position, positions, positions[0]),
+      ...(iconUrl ? {
+        iconUrl
+      } : {}),
+      borderRadius: clamped(prompt.borderRadius, limits.borderRadius, defaults.prompt.borderRadius),
+      overlay: layout === 'modal' || prompt.overlay === true
+    },
+    launcher: {
+      enabled: trigger === 'launcher' || launcher.enabled === true,
+      position: oneOf(launcher.position, SUBSCRIPTION_WIDGET_CORNERS, defaults.launcher.position),
+      offset: clamped(launcher.offset, limits.offset, defaults.launcher.offset),
+      size: clamped(launcher.size, limits.size, defaults.launcher.size)
+    },
+    display: {
+      trigger,
+      delay: clamped(display.delay, limits.delay, defaults.display.delay),
+      cappingCount: clamped(display.cappingCount, limits.cappingCount, defaults.display.cappingCount),
+      cappingInterval: clamped(display.cappingInterval, limits.cappingInterval, defaults.display.cappingInterval)
+    },
+    texts: normalizeTexts(record(config.texts)),
+    colors,
+    ...(dark ? {
+      dark
+    } : {}),
+    fontFamily: text(config.fontFamily, defaults.fontFamily),
+    zIndex: clamped(config.zIndex, limits.zIndex, defaults.zIndex)
+  };
+}
+/** True when the visitor can still act on the ask: not subscribed and push is supported. */
+export function subscriptionWidgetActionable(permission) {
+  return permission === 'default' || permission === 'denied';
+}
+/** Which prompt a visitor gets for their permission state. */
+export function subscriptionWidgetPromptVariant(permission) {
+  return permission === 'denied' ? 'blocked' : 'ask';
+}
+/** Whether the launcher is on screen. */
+export function subscriptionWidgetLauncherVisible(config, permission) {
+  return config.enable && config.launcher.enabled && subscriptionWidgetActionable(permission);
+}
+/** Whether the prompt may open by itself now; the host still waits `display.delay` before showing it. */
+export function subscriptionWidgetCanAutoShow(config, permission, history, nowMs) {
+  const {
+    trigger,
+    cappingCount,
+    cappingInterval
+  } = config.display;
+  if (!config.enable || trigger !== 'auto' || permission !== 'default') return false;
+  if (cappingCount > 0 && history.shownCount >= cappingCount) return false;
+  return history.lastShownAt === null || nowMs - history.lastShownAt >= cappingInterval * HOUR_MS;
+}
+/** The history after one more auto show at `nowMs`. */
+export function nextSubscriptionWidgetHistory(history, nowMs) {
+  return {
+    shownCount: history.shownCount + 1,
+    lastShownAt: nowMs
+  };
+}

package/subscription-widget/index.d.ts

@@ -0,0 +1,4 @@
+export { SubscriptionWidgetReader, SubscriptionPromptBox, SubscriptionLauncherButton } from './SubscriptionWidgetReader';
+export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory, } from './helpers';
+export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, } from './constants';
+export type { SubscriptionWidgetConfig, SubscriptionWidgetCorner, SubscriptionWidgetDisplay, SubscriptionWidgetHistory, SubscriptionWidgetLauncher, SubscriptionWidgetLayout, SubscriptionWidgetPermission, SubscriptionWidgetPosition, SubscriptionWidgetPrompt, SubscriptionWidgetPromptVariant, SubscriptionWidgetReaderMode, SubscriptionWidgetReaderProps, SubscriptionWidgetTexts, SubscriptionWidgetTrigger, } from './types';

package/subscription-widget/index.js

@@ -0,0 +1,3 @@
+export { SubscriptionWidgetReader, SubscriptionPromptBox, SubscriptionLauncherButton } from './SubscriptionWidgetReader';
+export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory } from './helpers';
+export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH } from './constants';

package/subscription-widget/types.d.ts

@@ -0,0 +1,90 @@
+import { type WebPopupColors, type WebPopupColorSchemePref, type WebPopupDark } from '../web-popups/types';
+/** How the ask is drawn: a corner/edge card, a full-width bar, or a centered modal. */
+export type SubscriptionWidgetLayout = 'card' | 'bar' | 'modal';
+/** Screen corner a launcher or a card sits in. */
+export type SubscriptionWidgetCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Where the prompt sits; each layout accepts a subset (see SUBSCRIPTION_WIDGET_POSITIONS). */
+export type SubscriptionWidgetPosition = SubscriptionWidgetCorner | 'top' | 'bottom' | 'center';
+/** What opens the prompt: a timer on page load, a launcher click only, or the host API only. */
+export type SubscriptionWidgetTrigger = 'auto' | 'launcher' | 'manual';
+/** Browser notification permission as the host sees it; 'granted' = subscribed. */
+export type SubscriptionWidgetPermission = 'default' | 'granted' | 'denied' | 'unsupported';
+/** 'ask' invites to subscribe, 'blocked' explains how to unblock notifications in the browser. */
+export type SubscriptionWidgetPromptVariant = 'ask' | 'blocked';
+/** Every visitor-facing string of the widget. */
+export type SubscriptionWidgetTexts = {
+    title: string;
+    message: string;
+    acceptText: string;
+    declineText: string;
+    /** Dismisses the 'blocked' prompt. */
+    closeText: string;
+    blockedTitle: string;
+    blockedMessage: string;
+    /** Launcher tooltip while the visitor can still subscribe. */
+    launcherLabel: string;
+    /** Launcher tooltip while notifications are blocked. */
+    launcherBlockedLabel: string;
+};
+/** The ask itself. */
+export type SubscriptionWidgetPrompt = {
+    layout: SubscriptionWidgetLayout;
+    position: SubscriptionWidgetPosition;
+    /** Image drawn beside the copy; absent = no image. */
+    iconUrl?: string;
+    borderRadius: number;
+    /** Page dim behind the prompt; a modal always has one. */
+    overlay: boolean;
+};
+/** The floating bell that reopens the prompt. */
+export type SubscriptionWidgetLauncher = {
+    enabled: boolean;
+    position: SubscriptionWidgetCorner;
+    /** Distance from the screen edges, px. */
+    offset: number;
+    /** Button diameter, px. */
+    size: number;
+};
+/** When the prompt shows by itself. */
+export type SubscriptionWidgetDisplay = {
+    trigger: SubscriptionWidgetTrigger;
+    /** Seconds after page load before an auto show. */
+    delay: number;
+    /** Auto shows per visitor; 0 = unlimited. */
+    cappingCount: number;
+    /** Hours between two auto shows. */
+    cappingInterval: number;
+};
+/** The whole widget configuration as stored in the WebSDK config (`subscriptionWidget`). */
+export type SubscriptionWidgetConfig = {
+    enable: boolean;
+    prompt: SubscriptionWidgetPrompt;
+    launcher: SubscriptionWidgetLauncher;
+    display: SubscriptionWidgetDisplay;
+    texts: SubscriptionWidgetTexts;
+    colors: WebPopupColors;
+    dark?: WebPopupDark;
+    fontFamily: string;
+    zIndex: number;
+};
+/** What the host remembers about auto shows for one visitor. */
+export type SubscriptionWidgetHistory = {
+    shownCount: number;
+    /** Epoch ms of the last auto show; null = never shown. */
+    lastShownAt: number | null;
+};
+/** 'live' draws fixed to the viewport; 'preview' draws the same inside the nearest positioned parent. */
+export type SubscriptionWidgetReaderMode = 'live' | 'preview';
+export type SubscriptionWidgetReaderProps = {
+    config: SubscriptionWidgetConfig;
+    permission: SubscriptionWidgetPermission;
+    /** Whether the prompt is on screen; the host owns this state. */
+    open: boolean;
+    mode?: SubscriptionWidgetReaderMode;
+    colorScheme?: WebPopupColorSchemePref;
+    /** Disables the accept button while the browser permission dialog is up. */
+    busy?: boolean;
+    onAccept?: () => void;
+    onDecline?: () => void;
+    onLauncherClick?: () => void;
+};

package/subscription-widget/types.js

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

package/web-popups/WebPopupReader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { useColorScheme } from './colorScheme';
 import { webPopupButtonPillStyle, webPopupFormInputStyle, webPopupRatingScores, webPopupTextColor, webPopupSlotGap, webPopupSlotRole, WEB_POPUP_BG_SECTION_FALLBACK, WEB_POPUP_BUTTON_SLOT_PADDING, WEB_POPUP_FONT_STACK, WEB_POPUP_KEYFRAMES, WEB_POPUP_PAGE_TRANSITION_MS, WEB_POPUP_RETRY_ERROR, WEB_POPUP_TEXT_SLOT_PADDING, WEB_POPUP_TEXT_VARIANT_STYLES } from './constants';
 import { WEB_POPUP_GLYPH_PATHS, WEB_POPUP_THUMB_UP_PATH } from './glyphs';
 import { placementMaxSize, resolveWebPopupPages, safeUrl, sanitizeWebPopupHtml, startPageOf, webPopupLinkTargetAttrs } from './helpers';
@@ -1294,27 +1295,6 @@ function fixedContainerStyle(params, width, height) {
   style.transition = `width ${WEB_POPUP_PAGE_TRANSITION_MS}ms ease`;
   return style;
 }
-const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
-function prefersDark() {
-  return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(DARK_MEDIA_QUERY).matches;
-}
-// 'auto' follows the visitor's OS setting and keeps following it: a popup can
-// be on screen when the theme flips, and a stale palette is the visible half.
-function useColorScheme(pref, watch) {
-  const [dark, setDark] = useState(() => pref === 'auto' && watch && prefersDark());
-  useEffect(() => {
-    if (pref !== 'auto' || !watch || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-      return undefined;
-    }
-    const media = window.matchMedia(DARK_MEDIA_QUERY);
-    const onChange = event => setDark(event.matches);
-    setDark(media.matches);
-    media.addEventListener('change', onChange);
-    return () => media.removeEventListener('change', onChange);
-  }, [pref, watch]);
-  if (pref !== 'auto') return pref;
-  return dark ? 'dark' : 'light';
-}
 export function WebPopupReader({
   params,
   mode = 'live',

package/web-popups/colorScheme.d.ts

@@ -0,0 +1,2 @@
+import { type WebPopupColorScheme, type WebPopupColorSchemePref } from './types';
+export declare function useColorScheme(pref: WebPopupColorSchemePref, watch: boolean): WebPopupColorScheme;

package/web-popups/colorScheme.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+function prefersDark() {
+  return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(DARK_MEDIA_QUERY).matches;
+}
+// 'auto' follows the visitor's OS setting and keeps following it: a popup can
+// be on screen when the theme flips, and a stale palette is the visible half.
+export function useColorScheme(pref, watch) {
+  const [dark, setDark] = useState(() => pref === 'auto' && watch && prefersDark());
+  useEffect(() => {
+    if (pref !== 'auto' || !watch || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return undefined;
+    }
+    const media = window.matchMedia(DARK_MEDIA_QUERY);
+    const onChange = event => setDark(event.matches);
+    setDark(media.matches);
+    media.addEventListener('change', onChange);
+    return () => media.removeEventListener('change', onChange);
+  }, [pref, watch]);
+  if (pref !== 'auto') return pref;
+  return dark ? 'dark' : 'light';
+}