@pushwoosh/websdk-common 0.0.0 → 6.17.0

package/web-popups/WebPopupReader.js

@@ -0,0 +1,1394 @@
+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';
+import { webPopupBackgroundImageStyle, webPopupContainerStyle, webPopupScrimGradient } from './layout';
+import { resolveWebPopupBoxChrome, resolveWebPopupColors, webPopupColorAlpha, webPopupDarkEnabled, webPopupImageSrc } from './palette';
+import { webPopupTimerLabels, webPopupTimerRemaining } from './timer';
+// Renders a popup from its model by interpreting each page's embedded layout
+// tree — the same node vocabulary the editor's canvas builds from: container
+// nodes become inline-styled grid divs, `Content` leaves render a named
+// zone's slot stack, `Image` leaves an image param. 'live' mode adds the
+// viewport chrome (overlay, placement, animation, close), 'preview' renders
+// just the popup box inline. Only one page renders at a time; buttons with a
+// `page` action switch pages. All styling is inline (shadow-DOM friendly, no
+// CSS files).
+const ANIMATION_STYLE = {
+  none: undefined,
+  fade: 'pw-vpopup-fade 0.35s ease-out backwards',
+  slide: 'pw-vpopup-slide 0.35s ease-out backwards'
+};
+function TextSlotView({
+  slot,
+  align,
+  inverse,
+  colors
+}) {
+  const style = {
+    ...WEB_POPUP_TEXT_VARIANT_STYLES[slot.variant],
+    textAlign: slot.align ?? align
+  };
+  const color = webPopupTextColor(slot.variant, colors, inverse);
+  if (color) style.color = color;
+  // The html comes from the editor's rich-text slots, but the json is
+  // API-writable — sanitize on render (inline tags only, safe link hrefs).
+  return _jsx("div", {
+    style: style,
+    dangerouslySetInnerHTML: {
+      __html: sanitizeWebPopupHtml(slot.html)
+    }
+  });
+}
+function ButtonSlotView({
+  slot,
+  colors,
+  onRequestClose,
+  onPageChange,
+  onRequestSubscribe
+}) {
+  const [askPhase, setAskPhase] = useState('idle');
+  const pill = webPopupButtonPillStyle(slot.variant, colors);
+  const wrapper = {};
+  if (slot.action.type === 'close') {
+    return _jsx("div", {
+      style: wrapper,
+      children: _jsx("button", {
+        type: "button",
+        style: pill,
+        onClick: onRequestClose,
+        children: slot.label
+      })
+    });
+  }
+  if (slot.action.type === 'page') {
+    const target = slot.action.page;
+    return _jsx("div", {
+      style: wrapper,
+      children: _jsx("button", {
+        type: "button",
+        style: pill,
+        onClick: () => onPageChange(target),
+        children: slot.label
+      })
+    });
+  }
+  if (slot.action.type === 'subscribe') {
+    // 'asking' guards the double click (one prompt, one registerDevice);
+    // 'denied' stays disabled because the browser grants no second prompt.
+    const spent = askPhase !== 'idle';
+    const ask = () => {
+      if (!onRequestSubscribe || spent) return;
+      setAskPhase('asking');
+      onRequestSubscribe().then(result => {
+        // Granted: the CTA is spent, so the popup goes away — that IS the
+        // feedback. Dismissed ('default') or failed: the pill comes back.
+        if (result === 'granted') {
+          onRequestClose?.();
+          return;
+        }
+        setAskPhase(result === 'denied' ? 'denied' : 'idle');
+      }).catch(() => setAskPhase('idle'));
+    };
+    return _jsx("div", {
+      style: wrapper,
+      children: _jsx("button", {
+        type: "button",
+        disabled: spent,
+        style: {
+          ...pill,
+          ...(spent ? {
+            opacity: 0.7
+          } : {})
+        },
+        onClick: ask,
+        children: slot.label
+      })
+    });
+  }
+  const href = safeUrl(slot.action.url);
+  // No (safe) URL yet: an inert pill — not an '#' anchor opening a blank tab.
+  if (!href) {
+    return _jsx("div", {
+      style: wrapper,
+      children: _jsx("button", {
+        type: "button",
+        style: pill,
+        children: slot.label
+      })
+    });
+  }
+  return _jsx("div", {
+    style: wrapper,
+    children: _jsx("a", {
+      href: href,
+      ...webPopupLinkTargetAttrs(slot.action.target),
+      style: pill,
+      children: slot.label
+    })
+  });
+}
+// The copy a submitted slot leaves behind, in the zone's own body style.
+function SlotMessageView({
+  message,
+  align,
+  inverse,
+  colors
+}) {
+  const color = webPopupTextColor('body', colors, inverse);
+  return _jsx("div", {
+    style: {
+      ...WEB_POPUP_TEXT_VARIANT_STYLES.body,
+      padding: WEB_POPUP_TEXT_SLOT_PADDING,
+      textAlign: align,
+      ...(color ? {
+        color
+      } : {})
+    },
+    children: message
+  });
+}
+const FORM_EMAIL_PATTERN = /^\S+@\S+\.\S+$/;
+const FORM_INPUT_TYPES = {
+  email: 'email',
+  phone: 'tel'
+};
+const FORM_AUTOCOMPLETE = {
+  email: 'email',
+  firstName: 'given-name',
+  lastName: 'family-name',
+  phone: 'tel'
+};
+// The privacy-check error renders under the checkbox row; a field key can
+// never collide with it (normalized keys are non-empty slot-local ids).
+const PRIVACY_ERROR_KEY = '__privacy';
+/**
+ * An email-subscription form slot: the fields, the consent row and the
+ * submit pill, all popup-styled. Local state machine: idle → submitting →
+ * success/confirm (the form swaps to the slot's message) or error (the form
+ * stays, a generic retryable note appears). Without an onSubmitForm handler
+ * or a bound formCode the form is inert — inputs type, submit does nothing —
+ * which is exactly what previews and the editor canvas want.
+ */
+function FormSlotView({
+  slot,
+  align,
+  inverse,
+  colors,
+  onSubmitForm
+}) {
+  const [values, setValues] = useState({});
+  const [policyAccepted, setPolicyAccepted] = useState(false);
+  const [focusedKey, setFocusedKey] = useState(null);
+  const [errors, setErrors] = useState({});
+  const [phase, setPhase] = useState('idle');
+  const captionColor = webPopupTextColor('caption', colors, inverse);
+  const captionStyle = {
+    ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+    ...(captionColor ? {
+      color: captionColor
+    } : {})
+  };
+  const errorStyle = {
+    fontSize: 12,
+    lineHeight: 1.4,
+    color: colors.error,
+    paddingTop: 2
+  };
+  if (phase === 'success' || phase === 'confirm') {
+    return _jsx(SlotMessageView, {
+      message: phase === 'confirm' ? slot.confirmEmailMessage : slot.successMessage,
+      align: align,
+      inverse: inverse,
+      colors: colors
+    });
+  }
+  const setFieldValue = (key, value) => {
+    setValues(prev => ({
+      ...prev,
+      [key]: value
+    }));
+    setErrors(prev => prev[key] ? Object.fromEntries(Object.entries(prev).filter(([k]) => k !== key)) : prev);
+  };
+  const submit = () => {
+    if (!onSubmitForm || !slot.formCode || phase === 'submitting') return;
+    const found = {};
+    for (const field of slot.fields) {
+      const value = (values[field.key] ?? '').trim();
+      if (field.required && !value) found[field.key] = 'Required';else if (field.kind === 'email' && value && !FORM_EMAIL_PATTERN.test(value)) {
+        found[field.key] = 'Enter a valid email';
+      }
+    }
+    if (slot.privacy && !policyAccepted) found[PRIVACY_ERROR_KEY] = 'Please accept the privacy policy';
+    setErrors(found);
+    if (Object.keys(found).length > 0) return;
+    const payload = {
+      email: '',
+      policyAccepted: slot.privacy ? policyAccepted : true
+    };
+    const customFields = {};
+    for (const field of slot.fields) {
+      const value = (values[field.key] ?? '').trim();
+      if (!value) continue;
+      if (field.kind === 'email') payload.email = payload.email || value;else if (field.kind === 'firstName') payload.firstName = value;else if (field.kind === 'lastName') payload.lastName = value;else if (field.kind === 'phone') payload.phone = value;else customFields[field.tag || field.key] = value;
+    }
+    if (Object.keys(customFields).length > 0) payload.customFields = customFields;
+    setPhase('submitting');
+    // Promise.resolve wrapper: a host callback that throws SYNCHRONOUSLY
+    // (before returning its promise) must land in the error phase too — a
+    // bare .then(ok, fail) would let the throw escape and strand the form
+    // in 'submitting' with no way back.
+    Promise.resolve().then(() => onSubmitForm(slot.formCode, payload)).then(result => setPhase(result === 'confirm-email' ? 'confirm' : 'success'), () => setPhase('error'));
+  };
+  const submitting = phase === 'submitting';
+  const privacyHref = slot.privacy ? safeUrl(slot.privacy.url) : undefined;
+  const pill = {
+    ...webPopupButtonPillStyle(slot.submitVariant, colors),
+    ...(submitting ? {
+      opacity: 0.6,
+      cursor: 'default'
+    } : {})
+  };
+  return _jsxs("form", {
+    noValidate: true,
+    style: {
+      margin: 0,
+      textAlign: 'left'
+    },
+    onSubmit: event => {
+      event.preventDefault();
+      submit();
+    },
+    children: [slot.fields.map(field => {
+      const error = errors[field.key];
+      let borderColor;
+      if (error) borderColor = colors.error;else if (focusedKey === field.key) borderColor = colors.accent;
+      return _jsxs("div", {
+        style: {
+          padding: WEB_POPUP_TEXT_SLOT_PADDING
+        },
+        children: [field.label && _jsx("div", {
+          style: {
+            ...captionStyle,
+            paddingBottom: 4
+          },
+          children: field.label
+        }), _jsx("input", {
+          type: FORM_INPUT_TYPES[field.kind] ?? 'text',
+          autoComplete: FORM_AUTOCOMPLETE[field.kind],
+          placeholder: field.placeholder || undefined,
+          value: values[field.key] ?? '',
+          disabled: submitting,
+          style: webPopupFormInputStyle(colors, borderColor),
+          onFocus: () => setFocusedKey(field.key),
+          onBlur: () => setFocusedKey(key => key === field.key ? null : key),
+          onChange: event => setFieldValue(field.key, event.currentTarget.value)
+        }), error && _jsx("div", {
+          style: errorStyle,
+          children: error
+        })]
+      }, field.key);
+    }), slot.privacy && _jsxs("div", {
+      style: {
+        padding: WEB_POPUP_TEXT_SLOT_PADDING
+      },
+      children: [_jsxs("label", {
+        style: {
+          ...captionStyle,
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: 8,
+          cursor: 'pointer'
+        },
+        children: [_jsx("input", {
+          type: "checkbox",
+          checked: policyAccepted,
+          disabled: submitting,
+          style: {
+            margin: '2px 0 0',
+            flexShrink: 0
+          },
+          onChange: event => {
+            setPolicyAccepted(event.currentTarget.checked);
+            setErrors(prev => prev[PRIVACY_ERROR_KEY] ? Object.fromEntries(Object.entries(prev).filter(([k]) => k !== PRIVACY_ERROR_KEY)) : prev);
+          }
+        }), _jsxs("span", {
+          children: [slot.privacy.checkboxLabel, privacyHref && _jsxs(_Fragment, {
+            children: [' ', _jsx("a", {
+              href: privacyHref,
+              ...webPopupLinkTargetAttrs(undefined),
+              style: {
+                color: colors.accent
+              },
+              children: slot.privacy.linkLabel || slot.privacy.url
+            })]
+          })]
+        })]
+      }), errors[PRIVACY_ERROR_KEY] && _jsx("div", {
+        style: errorStyle,
+        children: errors[PRIVACY_ERROR_KEY]
+      })]
+    }), _jsx("div", {
+      style: {
+        padding: WEB_POPUP_BUTTON_SLOT_PADDING
+      },
+      children: _jsx("button", {
+        type: "submit",
+        disabled: submitting,
+        style: pill,
+        children: slot.submitLabel
+      })
+    }), phase === 'error' && _jsx("div", {
+      style: {
+        ...errorStyle,
+        textAlign: align
+      },
+      children: WEB_POPUP_RETRY_ERROR
+    })]
+  });
+}
+// The phase-2 slots. The two that submit follow the form slot's rules exactly:
+// inert without a callback, idle → submitting → success/error, then its copy.
+// One cell of the countdown: the digits over their unit label.
+function TimerCell({
+  value,
+  label,
+  digitStyle,
+  labelStyle
+}) {
+  return _jsxs("div", {
+    style: {
+      minWidth: 44
+    },
+    children: [_jsx("div", {
+      style: digitStyle,
+      children: String(value).padStart(2, '0')
+    }), label ? _jsx("div", {
+      style: labelStyle,
+      children: label
+    }) : null]
+  });
+}
+function TimerSlotView({
+  slot,
+  align,
+  inverse,
+  colors,
+  mode,
+  onRequestClose,
+  onPageChange
+}) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const remaining = webPopupTimerRemaining(slot.endTime, slot.timezone, nowMs);
+  const expired = remaining.total === 0;
+  // 'preview' draws a still frame: a gallery is many popups at once, and every
+  // one of them would tick. A finished countdown stops on its own.
+  useEffect(() => {
+    if (mode !== 'live' || expired) return undefined;
+    const id = setInterval(() => setNowMs(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [mode, expired, slot.endTime, slot.timezone]);
+  // Past the deadline, the slot does what it was told. 'hide-popup' gets here
+  // only for a popup left open ACROSS its deadline (the host gates the rest).
+  useEffect(() => {
+    if (mode !== 'live' || !expired) return;
+    if (slot.onExpire === 'hide-popup') onRequestClose?.();else if (slot.onExpire === 'page' && slot.expirePage) onPageChange(slot.expirePage);
+  }, [mode, expired, slot.onExpire, slot.expirePage, onRequestClose, onPageChange]);
+  const digitColor = webPopupTextColor('h2', colors, inverse);
+  const labelColor = webPopupTextColor('caption', colors, inverse);
+  const digitStyle = {
+    fontSize: 28,
+    fontWeight: 700,
+    lineHeight: 1.2,
+    // Tabular figures: without them every second reflows the row.
+    fontVariantNumeric: 'tabular-nums',
+    ...(digitColor ? {
+      color: digitColor
+    } : {})
+  };
+  const labelStyle = {
+    ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+    ...(labelColor ? {
+      color: labelColor
+    } : {})
+  };
+  const labels = webPopupTimerLabels(slot.language);
+  const cells = [{
+    value: remaining.days,
+    label: labels.days
+  }, {
+    value: remaining.hours,
+    label: labels.hours
+  }, {
+    value: remaining.minutes,
+    label: labels.minutes
+  }, {
+    value: remaining.seconds,
+    label: labels.seconds
+  }];
+  return _jsx("div", {
+    style: {
+      padding: WEB_POPUP_TEXT_SLOT_PADDING,
+      textAlign: align
+    },
+    children: _jsx("div", {
+      style: {
+        display: 'inline-flex',
+        gap: 12,
+        textAlign: 'center'
+      },
+      children: cells.map(cell => _jsx(TimerCell, {
+        value: cell.value,
+        label: slot.showLabels ? cell.label : '',
+        digitStyle: digitStyle,
+        labelStyle: labelStyle
+      }, cell.label || cell.value))
+    })
+  });
+}
+function ChoiceSlotView({
+  slot,
+  align,
+  inverse,
+  colors,
+  onSubmitChoice
+}) {
+  const [picked, setPicked] = useState([]);
+  const [phase, setPhase] = useState('idle');
+  const [notice, setNotice] = useState('');
+  if (phase === 'success') {
+    return _jsx(SlotMessageView, {
+      message: slot.successMessage,
+      align: align,
+      inverse: inverse,
+      colors: colors
+    });
+  }
+  const toggle = value => {
+    setNotice('');
+    setPicked(prev => {
+      if (prev.includes(value)) return prev.filter(entry => entry !== value);
+      // At the ceiling the extra tap is refused with a reason rather than
+      // silently dropping the oldest pick.
+      if (slot.max > 0 && prev.length >= slot.max) {
+        setNotice(`Pick up to ${slot.max}`);
+        return prev;
+      }
+      return [...prev, value];
+    });
+  };
+  const submit = () => {
+    if (!onSubmitChoice || !slot.tagName || phase === 'submitting') return;
+    // An empty submit would CLEAR the tag — never what a "save" button means.
+    const floor = Math.max(slot.min, 1);
+    if (picked.length < floor) {
+      setNotice(floor === 1 ? 'Pick at least one' : `Pick at least ${floor}`);
+      return;
+    }
+    const values = slot.options.filter(option => picked.includes(option.value)).map(option => option.tagValue || option.value);
+    setNotice('');
+    setPhase('submitting');
+    // Promise.resolve wrapper: a host callback that throws SYNCHRONOUSLY must
+    // land in the error phase too, not escape and strand the slot.
+    Promise.resolve().then(() => onSubmitChoice({
+      slotKey: slot.key,
+      tagName: slot.tagName,
+      values
+    })).then(() => setPhase('success'), () => setPhase('error'));
+  };
+  const submitting = phase === 'submitting';
+  const textColor = webPopupTextColor('body', colors, inverse);
+  const optionStyle = {
+    ...WEB_POPUP_TEXT_VARIANT_STYLES.body,
+    ...(textColor ? {
+      color: textColor
+    } : {})
+  };
+  const chip = selected => ({
+    padding: '6px 14px',
+    borderRadius: 999,
+    border: `1px solid ${colors.accent}`,
+    backgroundColor: selected ? colors.accent : 'transparent',
+    color: selected ? colors.onAccent : colors.accent,
+    fontFamily: 'inherit',
+    fontSize: 14,
+    lineHeight: 1.4,
+    cursor: 'pointer'
+  });
+  return _jsxs("div", {
+    style: {
+      padding: WEB_POPUP_TEXT_SLOT_PADDING
+    },
+    children: [slot.control === 'chips' ? _jsx("div", {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 8,
+        justifyContent: align === 'center' ? 'center' : 'flex-start'
+      },
+      children: slot.options.map(option => _jsx("button", {
+        type: "button",
+        "aria-pressed": picked.includes(option.value),
+        style: chip(picked.includes(option.value)),
+        onClick: () => toggle(option.value),
+        children: option.label
+      }, option.value))
+    }) : _jsx("div", {
+      style: {
+        display: 'grid',
+        gap: 6
+      },
+      children: slot.options.map(option => _jsxs("label", {
+        style: {
+          ...optionStyle,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          cursor: 'pointer'
+        },
+        children: [_jsx("input", {
+          type: "checkbox",
+          checked: picked.includes(option.value),
+          onChange: () => toggle(option.value),
+          style: {
+            accentColor: colors.accent,
+            width: 16,
+            height: 16,
+            margin: 0
+          }
+        }), option.label]
+      }, option.value))
+    }), notice ? _jsx("div", {
+      style: {
+        ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+        color: colors.error,
+        paddingTop: 4
+      },
+      children: notice
+    }) : null, phase === 'error' ? _jsx("div", {
+      style: {
+        ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+        color: colors.error,
+        paddingTop: 4
+      },
+      children: WEB_POPUP_RETRY_ERROR
+    }) : null, _jsx("div", {
+      style: {
+        padding: WEB_POPUP_BUTTON_SLOT_PADDING
+      },
+      children: _jsx("button", {
+        type: "button",
+        style: {
+          ...webPopupButtonPillStyle(slot.submitVariant, colors),
+          ...(submitting ? {
+            opacity: 0.7
+          } : {})
+        },
+        onClick: submit,
+        children: slot.submitLabel
+      })
+    })]
+  });
+}
+// One rating button: a number for nps, a star for stars, a thumb for thumbs.
+function RatingButton({
+  score,
+  scale,
+  selected,
+  colors,
+  onPick
+}) {
+  const base = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    border: `1px solid ${colors.accent}`,
+    backgroundColor: selected ? colors.accent : 'transparent',
+    color: selected ? colors.onAccent : colors.accent,
+    fontFamily: 'inherit',
+    fontSize: 14,
+    lineHeight: 1,
+    cursor: 'pointer'
+  };
+  if (scale === 'nps') {
+    return _jsx("button", {
+      type: "button",
+      "aria-label": `Rate ${score}`,
+      "aria-pressed": selected,
+      style: {
+        ...base,
+        width: 30,
+        height: 32,
+        borderRadius: 6
+      },
+      onClick: onPick,
+      children: score
+    });
+  }
+  const thumbs = scale === 'thumbs';
+  // Icon-only buttons need a name of their own; the nps row says it in text.
+  let label = `Rate ${score}`;
+  if (thumbs) label = score === 1 ? 'Thumbs up' : 'Thumbs down';
+  return _jsx("button", {
+    type: "button",
+    "aria-label": label,
+    "aria-pressed": selected,
+    style: {
+      ...base,
+      width: thumbs ? 44 : 34,
+      height: thumbs ? 40 : 34,
+      borderRadius: thumbs ? 8 : 6
+    },
+    onClick: onPick,
+    children: _jsx("svg", {
+      width: thumbs ? 22 : 20,
+      height: thumbs ? 22 : 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: _jsx("path", {
+        d: thumbs ? WEB_POPUP_THUMB_UP_PATH : WEB_POPUP_GLYPH_PATHS.star,
+        ...(thumbs && score === 0 ? {
+          transform: 'rotate(180 12 12)'
+        } : {})
+      })
+    })
+  });
+}
+function RatingSlotView({
+  slot,
+  align,
+  inverse,
+  colors,
+  onSubmitRating
+}) {
+  const [score, setScore] = useState(null);
+  const [phase, setPhase] = useState('idle');
+  if (phase === 'success') {
+    return _jsx(SlotMessageView, {
+      message: slot.successMessage,
+      align: align,
+      inverse: inverse,
+      colors: colors
+    });
+  }
+  const send = value => {
+    if (!onSubmitRating || !slot.eventName || phase === 'submitting') return;
+    setPhase('submitting');
+    // See ChoiceSlotView: a synchronous throw must land in 'error' too.
+    Promise.resolve().then(() => onSubmitRating({
+      slotKey: slot.key,
+      eventName: slot.eventName,
+      score: value,
+      scale: slot.scale
+    })).then(() => setPhase('success'), () => setPhase('error'));
+  };
+  const pick = value => {
+    // Same guard as `send`: otherwise a tap during an in-flight submit moves the
+    // highlight while the host keeps the score that was actually sent.
+    if (phase === 'submitting') return;
+    setScore(value);
+    if (slot.submitMode === 'instant') send(value);
+  };
+  const scores = webPopupRatingScores(slot.scale);
+  const labelColor = webPopupTextColor('caption', colors, inverse);
+  const edgeLabelStyle = {
+    ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+    ...(labelColor ? {
+      color: labelColor
+    } : {})
+  };
+  // A star scale fills every button up to the pick — the row IS the score.
+  const isSelected = value => slot.scale === 'stars' ? score !== null && value <= score : score === value;
+  return _jsxs("div", {
+    style: {
+      padding: WEB_POPUP_TEXT_SLOT_PADDING
+    },
+    children: [_jsx("div", {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 6,
+        justifyContent: align === 'center' ? 'center' : 'flex-start'
+      },
+      children: scores.map(value => _jsx(RatingButton, {
+        score: value,
+        scale: slot.scale,
+        selected: isSelected(value),
+        colors: colors,
+        onPick: () => pick(value)
+      }, value))
+    }), slot.labels.low || slot.labels.high ? _jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 8,
+        paddingTop: 4
+      },
+      children: [_jsx("span", {
+        style: edgeLabelStyle,
+        children: slot.labels.low
+      }), _jsx("span", {
+        style: edgeLabelStyle,
+        children: slot.labels.high
+      })]
+    }) : null, phase === 'error' ? _jsx("div", {
+      style: {
+        ...WEB_POPUP_TEXT_VARIANT_STYLES.caption,
+        color: colors.error,
+        paddingTop: 4
+      },
+      children: WEB_POPUP_RETRY_ERROR
+    }) : null, slot.submitMode === 'button' ? _jsx("div", {
+      style: {
+        padding: WEB_POPUP_BUTTON_SLOT_PADDING
+      },
+      children: _jsx("button", {
+        type: "button",
+        style: {
+          ...webPopupButtonPillStyle('primary', colors),
+          ...(phase === 'submitting' ? {
+            opacity: 0.7
+          } : {})
+        },
+        onClick: () => score === null ? undefined : send(score),
+        children: slot.submitLabel
+      })
+    }) : null]
+  });
+}
+function GlyphSlotView({
+  slot,
+  align,
+  inverse,
+  colors
+}) {
+  // No authored color: the accent, or the inverse copy color over a dark image
+  // (where the accent can be the one thing that doesn't read).
+  const color = slot.color || (inverse ? colors.textInverse : colors.accent);
+  return _jsx("div", {
+    style: {
+      padding: WEB_POPUP_TEXT_SLOT_PADDING,
+      textAlign: align,
+      lineHeight: 0
+    },
+    children: _jsx("svg", {
+      width: slot.size,
+      height: slot.size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: {
+        display: 'inline-block'
+      },
+      children: _jsx("path", {
+        d: WEB_POPUP_GLYPH_PATHS[slot.name]
+      })
+    })
+  });
+}
+// A switch, not a chain of `&&`: the compiler is what notices a slot type with
+// no view. Exported so the editor canvas draws these slots with it, not a copy.
+export function WebPopupSlotView({
+  slot,
+  align,
+  inverse,
+  colors,
+  mode = 'live',
+  onRequestClose,
+  onPageChange,
+  onSubmitForm,
+  onSubmitChoice,
+  onSubmitRating,
+  onRequestSubscribe
+}) {
+  // A page jump nobody handles is a no-op, not a crash — the editor canvas
+  // and the previews mount this without any navigation of their own.
+  const pageChange = onPageChange ?? (() => {});
+  switch (slot.type) {
+    case 'text':
+      return _jsx(TextSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors
+      });
+    case 'button':
+      return _jsx(ButtonSlotView, {
+        slot: slot,
+        colors: colors,
+        onRequestClose: onRequestClose,
+        onPageChange: pageChange,
+        onRequestSubscribe: onRequestSubscribe
+      });
+    case 'email-subscription-form':
+      return _jsx(FormSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors,
+        onSubmitForm: onSubmitForm
+      });
+    case 'timer':
+      return _jsx(TimerSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors,
+        mode: mode,
+        onRequestClose: onRequestClose,
+        onPageChange: pageChange
+      });
+    case 'choice':
+      return _jsx(ChoiceSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors,
+        onSubmitChoice: onSubmitChoice
+      });
+    case 'rating':
+      return _jsx(RatingSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors,
+        onSubmitRating: onSubmitRating
+      });
+    case 'glyph':
+      return _jsx(GlyphSlotView, {
+        slot: slot,
+        align: align,
+        inverse: inverse,
+        colors: colors
+      });
+  }
+}
+// A Content leaf: the named zone's slots (texts, buttons and forms in order)
+// as a grid stack. An unknown zone key renders as an empty spot, not a crash.
+function ContentNodeView({
+  node,
+  page,
+  colors,
+  mode,
+  leaf,
+  onRequestClose,
+  onPageChange,
+  onSubmitForm,
+  onSubmitChoice,
+  onSubmitRating,
+  onRequestSubscribe
+}) {
+  const zone = page.contents.find(z => z.key === node.props.content);
+  if (!zone) return null;
+  if (leaf?.renderZone) {
+    return _jsx("div", {
+      style: {
+        minWidth: 0
+      },
+      children: leaf.renderZone(zone, node)
+    });
+  }
+  const align = node.props.align ?? 'left';
+  const inverse = node.props.tone === 'inverse';
+  return _jsx("div", {
+    style: {
+      minWidth: 0
+    },
+    children: zone.slots.map((slot, index) => {
+      const previous = zone.slots[index - 1];
+      const marginTop = previous ? webPopupSlotGap(webPopupSlotRole(previous), webPopupSlotRole(slot)) : 0;
+      return _jsx("div", {
+        style: marginTop ? {
+          marginTop
+        } : undefined,
+        children: _jsx(WebPopupSlotView, {
+          slot: slot,
+          align: align,
+          inverse: inverse,
+          colors: colors,
+          mode: mode,
+          onRequestClose: onRequestClose,
+          onPageChange: onPageChange,
+          onSubmitForm: onSubmitForm,
+          onSubmitChoice: onSubmitChoice,
+          onSubmitRating: onSubmitRating,
+          onRequestSubscribe: onRequestSubscribe
+        })
+      }, slot.key);
+    })
+  });
+}
+// The playable url of a media param, or undefined when it has no video.
+function mediaVideoSrc(image) {
+  return image?.video ? safeUrl(image.video.src) : undefined;
+}
+// A media param's video: autoplay only muted, playsInline to keep iOS out of
+// fullscreen, and in 'preview' it holds on the poster instead of streaming.
+function MediaVideo({
+  image,
+  poster,
+  src,
+  style,
+  mode
+}) {
+  return _jsx("video", {
+    src: src,
+    poster: poster || undefined,
+    style: style,
+    autoPlay: mode === 'live',
+    muted: true,
+    playsInline: true,
+    preload: "metadata",
+    loop: image.video?.loop !== false,
+    controls: image.video?.controls === true
+  });
+}
+function ImageNodeView({
+  node,
+  page,
+  leaf,
+  mode,
+  scheme
+}) {
+  const image = page.images.find(i => i.key === node.props.image);
+  if (!image) return null;
+  // The override sees srcless params too — an editor wants a placeholder
+  // where the runtime shows nothing.
+  if (leaf?.renderImage) return _jsx(_Fragment, {
+    children: leaf.renderImage(image, node)
+  });
+  const video = mediaVideoSrc(image);
+  const src = webPopupImageSrc(image, scheme);
+  if (!src && !video) return null;
+  const style = {
+    display: 'block',
+    width: '100%',
+    minWidth: 0
+  };
+  if (image.fit) {
+    style.height = '100%';
+    style.objectFit = image.fit;
+  } else {
+    style.height = 'auto';
+  }
+  if (image.blur) style.filter = `blur(${image.blur}px)`;
+  if (video) {
+    return _jsx(MediaVideo, {
+      image: image,
+      poster: src,
+      src: video,
+      style: style,
+      mode: mode
+    });
+  }
+  return _jsx("img", {
+    src: src,
+    alt: "",
+    style: style
+  });
+}
+// Both layered backgrounds (blur, video) share this shell: the color/poster
+// paints on an outer grid box, the content rides an inner layer covering it.
+function LayeredBackgroundBox({
+  style,
+  outer,
+  inner,
+  layer,
+  children
+}) {
+  const {
+    backgroundColor,
+    ...rest
+  } = style;
+  return _jsxs("div", {
+    style: {
+      display: 'grid',
+      minWidth: 0,
+      backgroundColor,
+      ...outer
+    },
+    children: [layer, _jsx("div", {
+      style: {
+        ...rest,
+        ...inner
+      },
+      children: children
+    })]
+  });
+}
+// The tree interpreter: containers → grid divs, leaves → zone/image views.
+function LayoutNodeView({
+  node,
+  page,
+  colors,
+  mode,
+  scheme,
+  leaf,
+  onRequestClose,
+  onPageChange,
+  onSubmitForm,
+  onSubmitChoice,
+  onSubmitRating,
+  onRequestSubscribe
+}) {
+  if (node.type === 'Content') {
+    return _jsx(ContentNodeView, {
+      node: node,
+      page: page,
+      colors: colors,
+      mode: mode,
+      scheme: scheme,
+      leaf: leaf,
+      onRequestClose: onRequestClose,
+      onPageChange: onPageChange,
+      onSubmitForm: onSubmitForm,
+      onSubmitChoice: onSubmitChoice,
+      onSubmitRating: onSubmitRating,
+      onRequestSubscribe: onRequestSubscribe
+    });
+  }
+  if (node.type === 'Image') {
+    return _jsx(ImageNodeView, {
+      node: node,
+      page: page,
+      leaf: leaf,
+      mode: mode,
+      scheme: scheme
+    });
+  }
+  const bgKey = node.props?.backgroundImage;
+  const background = bgKey ? page.images.find(i => i.key === bgKey) : undefined;
+  const blur = background?.blur ?? 0;
+  const dim = background?.dim ?? 0;
+  const bgVideo = mediaVideoSrc(background);
+  const bgSrc = background ? webPopupImageSrc(background, scheme) : undefined;
+  const style = webPopupContainerStyle(node, blur > 0 || bgVideo ? undefined : bgSrc || undefined, dim);
+  if (bgKey) style.backgroundColor = WEB_POPUP_BG_SECTION_FALLBACK;
+  const children = node.children.map((child, index) => _jsx(LayoutNodeView
+  // Layout nodes are static per page render — positional keys are fine.
+  , {
+    node: child,
+    page: page,
+    colors: colors,
+    mode: mode,
+    scheme: scheme,
+    leaf: leaf,
+    onRequestClose: onRequestClose,
+    onPageChange: onPageChange,
+    onSubmitForm: onSubmitForm,
+    onSubmitChoice: onSubmitChoice,
+    onSubmitRating: onSubmitRating,
+    onRequestSubscribe: onRequestSubscribe
+  }, index));
+  if (bgVideo && background) {
+    // A background video can't ride the css background property, so it paints
+    // as its own layer; the scrim moves onto the content layer above it.
+    const scrim = webPopupScrimGradient(dim);
+    return _jsx(LayeredBackgroundBox, {
+      style: style,
+      outer: {
+        position: 'relative',
+        overflow: 'hidden',
+        ...(bgSrc ? webPopupBackgroundImageStyle(bgSrc) : {})
+      },
+      inner: {
+        position: 'relative',
+        ...(scrim ? {
+          backgroundImage: scrim
+        } : {})
+      },
+      layer: _jsx(MediaVideo, {
+        image: background,
+        poster: bgSrc ?? '',
+        src: bgVideo,
+        mode: mode,
+        style: {
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          ...(blur > 0 ? {
+            filter: `blur(${blur}px)`
+          } : {})
+        }
+      }),
+      children: children
+    });
+  }
+  if (blur > 0) {
+    // backdrop-filter blurs what's painted BEHIND its element, never the
+    // element's own background — so the image paints on an outer box and the
+    // laid-out content rides an inner blurring layer covering it edge to
+    // edge (grid/padding move onto that layer). The outer box is a grid so
+    // a stretched height (a 'stretch' page's root) passes through to the
+    // layer actually carrying alignContent.
+    return _jsx(LayeredBackgroundBox, {
+      style: style,
+      outer: bgSrc ? webPopupBackgroundImageStyle(bgSrc, dim) : undefined,
+      inner: {
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`
+      },
+      children: children
+    });
+  }
+  return _jsx("div", {
+    style: style,
+    children: children
+  });
+}
+// The popup box: the shared chrome (background, radius, shadow) around one
+// resolved page's layout tree. Exported for the editor — its canvas is this
+// very interpreter with `leafRenderers` swapping the Content/Image leaves
+// for editable views (the container interpretation stays this component's,
+// which is what keeps the canvas true to the runtime); the viewport chrome
+// (placement, overlay, enter animation) is the caller's business there.
+// After a page switch (`animatePage`) the incoming content fades in — keyed
+// by page so the animation restarts per switch — and an explicit px height
+// glides via the transition (auto heights just snap).
+export function WebPopupBox({
+  page,
+  params,
+  mode = 'live',
+  colorScheme = 'light',
+  leafRenderers,
+  animatePage = false,
+  onRequestClose,
+  onPageChange,
+  onSubmitForm,
+  onSubmitChoice,
+  onSubmitRating,
+  onRequestSubscribe
+}) {
+  const colors = resolveWebPopupColors(params, colorScheme);
+  const box = resolveWebPopupBoxChrome(params, colorScheme);
+  const style = {
+    position: 'relative',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    backgroundColor: colors.background,
+    colorScheme: colors.scheme,
+    fontFamily: WEB_POPUP_FONT_STACK,
+    color: colors.text,
+    borderRadius: params.borderRadius > 0 ? params.borderRadius : undefined,
+    boxShadow: box.boxShadow && box.boxShadow !== 'none' ? box.boxShadow : undefined,
+    transition: `height ${WEB_POPUP_PAGE_TRANSITION_MS}ms ease`
+  };
+  if (page.height) {
+    // 'stretch' fills whatever box the caller gives (the fixed container pins
+    // both vertical edges in live mode); a px height is the box's own.
+    style.height = page.height === 'stretch' ? '100%' : page.height;
+    style.overflowY = 'auto';
+  }
+  // A stretch page's tree gets the full box height to lay out in: the
+  // min-height'd single-track grid stretches the root container, so its
+  // alignContent can place the content vertically (a px height keeps the
+  // pre-stretch behavior — content flows from the top).
+  const pageStyle = {
+    ...(animatePage ? {
+      animation: `pw-vpopup-page ${WEB_POPUP_PAGE_TRANSITION_MS}ms ease-out backwards`
+    } : {}),
+    ...(page.height === 'stretch' ? {
+      display: 'grid',
+      minHeight: '100%'
+    } : {})
+  };
+  return _jsx("div", {
+    style: style,
+    children: _jsx("div", {
+      style: pageStyle,
+      children: _jsx(LayoutNodeView, {
+        node: page.layout,
+        page: page,
+        colors: colors,
+        mode: mode,
+        scheme: colors.scheme,
+        leaf: leafRenderers,
+        onRequestClose: onRequestClose,
+        onPageChange: onPageChange ?? (() => {}),
+        onSubmitForm: onSubmitForm,
+        onSubmitChoice: onSubmitChoice,
+        onSubmitRating: onSubmitRating,
+        onRequestSubscribe: onRequestSubscribe
+      })
+    }, page.key)
+  });
+}
+function CloseButton({
+  colors,
+  onRequestClose
+}) {
+  return _jsx("button", {
+    type: "button",
+    "aria-label": "Close",
+    onClick: onRequestClose,
+    style: {
+      position: 'absolute',
+      top: 10,
+      right: 10,
+      width: 24,
+      height: 24,
+      padding: 0,
+      border: 'none',
+      borderRadius: '50%',
+      background: webPopupColorAlpha(colors.surface, 0.92),
+      boxShadow: '0 1px 3px rgba(16, 24, 40, 0.25)',
+      color: colors.chromeIcon,
+      fontSize: 13,
+      lineHeight: 1,
+      cursor: 'pointer'
+    },
+    children: "\u2715"
+  });
+}
+// Fixed viewport placement from the placement param: anchored edges get the
+// offset, unanchored axes center via translate. No width = stretch between
+// the side gutters; height 'stretch' = pinned to both vertical edges the same
+// way. The size is the ACTIVE page's (resolved page ?? chrome), so the box
+// re-anchors itself when a page switch changes it.
+function fixedContainerStyle(params, width, height) {
+  const {
+    placement
+  } = params;
+  const style = {
+    position: 'fixed',
+    boxSizing: 'border-box',
+    maxWidth: placementMaxSize(placement),
+    maxHeight: placementMaxSize(placement),
+    // The widget host is pointer-transparent (a corner banner must not block
+    // the page); the popup itself takes clicks back.
+    pointerEvents: 'auto'
+  };
+  if (width) {
+    style.width = width;
+    const h = placement.h;
+    if (h === 'left') style.left = placement.offset;else if (h === 'right') style.right = placement.offset;else style.left = '50%';
+  } else {
+    // Stretch: pin both side edges regardless of the horizontal anchor.
+    style.left = placement.offset;
+    style.right = placement.offset;
+  }
+  if (height === 'stretch') {
+    // Stretch: pin both vertical edges; the v anchor has nothing to place.
+    style.top = placement.offset;
+    style.bottom = placement.offset;
+  } else if (placement.v === 'top') style.top = placement.offset;else if (placement.v === 'bottom') style.bottom = placement.offset;else style.top = '50%';
+  const tx = width && placement.h === 'center' ? '-50%' : '0';
+  const ty = placement.v === 'middle' && height !== 'stretch' ? '-50%' : '0';
+  if (tx !== '0' || ty !== '0') style.transform = `translate(${tx}, ${ty})`;
+  const anim = ANIMATION_STYLE[params.animation];
+  if (anim) style.animation = anim;
+  // A page switch that changes the (explicit) width glides instead of
+  // jumping; the anchored edges keep the box pinned while it resizes.
+  style.transition = `width ${WEB_POPUP_PAGE_TRANSITION_MS}ms ease`;
+  return style;
+}
+export function WebPopupReader({
+  params,
+  mode = 'live',
+  colorScheme = 'auto',
+  onRequestClose,
+  onSubmitForm,
+  onSubmitChoice,
+  onSubmitRating,
+  onRequestSubscribe,
+  leafRenderers
+}) {
+  // null = never navigated: show the start page. Guarded against keys that
+  // don't exist (anymore) — an edited/older document falls back gracefully.
+  const [pageKey, setPageKey] = useState(null);
+  // Only the active page's images are in the DOM — the rest would start
+  // downloading on the page switch, leaving the previous picture on screen
+  // until the new one arrives. Warm the browser cache for every page up front.
+  useEffect(() => {
+    resolveWebPopupPages(params).forEach(p => p.images.forEach(({
+      src,
+      srcDark
+    }) => {
+      [src, srcDark].forEach(url => {
+        if (url) new Image().src = url;
+      });
+    }));
+  }, [params]);
+  const scheme = useColorScheme(colorScheme, webPopupDarkEnabled(params));
+  const pages = resolveWebPopupPages(params);
+  if (pages.length === 0) return null;
+  const page = pages.find(p => p.key === pageKey) ?? startPageOf(params, pages);
+  // null = the initial page: entry is the chrome's business (the enter
+  // animation in live mode); the page fade only plays on actual switches.
+  const animatePage = pageKey !== null;
+  if (mode === 'preview') {
+    return _jsxs("div", {
+      style: {
+        position: 'relative',
+        width: page.width ?? '100%',
+        transition: `width ${WEB_POPUP_PAGE_TRANSITION_MS}ms ease`
+      },
+      children: [_jsx("style", {
+        children: WEB_POPUP_KEYFRAMES
+      }), _jsx(WebPopupBox, {
+        page: page,
+        params: params,
+        mode: mode,
+        colorScheme: scheme,
+        leafRenderers: leafRenderers,
+        animatePage: animatePage,
+        onRequestClose: onRequestClose,
+        onPageChange: setPageKey,
+        onSubmitForm: onSubmitForm,
+        onSubmitChoice: onSubmitChoice,
+        onSubmitRating: onSubmitRating,
+        onRequestSubscribe: onRequestSubscribe
+      })]
+    });
+  }
+  const {
+    overlay
+  } = resolveWebPopupBoxChrome(params, scheme);
+  return _jsxs(_Fragment, {
+    children: [_jsx("style", {
+      children: WEB_POPUP_KEYFRAMES
+    }), overlay && _jsx("div", {
+      style: {
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: overlay.color,
+        opacity: overlay.opacity,
+        animation: 'pw-vpopup-overlay 0.2s ease-out backwards',
+        pointerEvents: 'auto'
+      },
+      onClick: onRequestClose
+    }), _jsxs("div", {
+      style: fixedContainerStyle(params, page.width, page.height),
+      children: [_jsx(WebPopupBox, {
+        page: page,
+        params: params,
+        mode: mode,
+        colorScheme: scheme,
+        leafRenderers: leafRenderers,
+        animatePage: animatePage,
+        onRequestClose: onRequestClose,
+        onPageChange: setPageKey,
+        onSubmitForm: onSubmitForm,
+        onSubmitChoice: onSubmitChoice,
+        onSubmitRating: onSubmitRating,
+        onRequestSubscribe: onRequestSubscribe
+      }), _jsx(CloseButton, {
+        colors: resolveWebPopupColors(params, scheme),
+        onRequestClose: onRequestClose
+      })]
+    })]
+  });
+}