@roottale/cms-renderer-next 0.62.0 → 0.64.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @roottale/cms-renderer-next
 
+## 0.64.0
+
+### Minor Changes
+
+- faf7bb5: 관리자 편집 내용을 고객 사이트의 실제 팝업·배너 슬롯에서 미리 볼 수 있도록 출처·창·세션을 검증하는 iframe 연결을 추가합니다. 실제 CSS·배치·닫기 설정을 재사용하며 노출 판정 조회와 숨김 기록 없이 편집합니다. 미리보기 연결과 배포 조건을 문서·Next.js 예제에 설명합니다.
+
+### Patch Changes
+
+- c2222ee: 매번 표시 안내의 일반 닫기를 현재 화면에만 적용하고, 이전 세션 기록이 설정 변경 후 재표시를 막지 않도록 수정합니다. 오늘 그만 보기의 자정 만료는 유지합니다.
+- cbcea75: 단일 이미지 팝업은 이미지 로딩이 끝난 뒤 표시하고 포커스를 이동해, 원본 비율 높이로 렌더링해도 로딩 중 창이 움직이지 않도록 합니다.
+- 56a9bb5: 여러 팝업의 최대 콘텐츠 높이를 측정할 수 있는 비상호작용 영역을 제공하고 이미지 로딩 후 창을 표시합니다.
+- 5bb9e98: 팝업 초기 포커스를 닫기 버튼 대신 대화상자로 옮겨 불필요한 버튼 강조를 없애고 키보드 탐색을 유지합니다.
+- Updated dependencies [5ccf503]
+  - @roottale/cms-client@0.64.0
+  - @roottale/cms-core@0.64.0
+
+## 0.63.0
+
+### Minor Changes
+
+- a858d8e: 목차 배치를 사이트 코드의 `RootTaleBlogPost.tocPosition`으로 관리할 수 있습니다.
+  명시한 값은 CMS 설정보다 우선하며, 생략한 기존 연동은 CMS 배치를 유지합니다.
+  현재 배치를 prop으로 명시하면 실제 화면을 바꾸지 않고 관리 주체를 코드로 옮깁니다.
+
+  공통 블록 디자인은 `RootTaleBlogPost.footerPatternPresentation`과
+  `RootTalePostPattern.presentation`으로 전체 대체할 수 있습니다. `null`은 원격
+  디자인 주입을 생략하고 사이트 CSS에 맡기며, 생략한 기존 연동은 원격값을 유지합니다.
+  고객 콘텐츠와 제작 디자인을 분리하는 문서·발행/미리보기 예제를 함께 갱신합니다.
+
+  공개 `RootTaleCssVars` 타입의 비공개 UI 패키지 참조도 제거해 독립 소비자의
+  strict 타입 검사를 지원합니다.
+
+  섹션 구성·디자인 변경 검사 함수를 공개 CMS core에서 공유해 편집기와 저장 단계가
+  같은 고객 편집 경계를 적용합니다.
+
+### Patch Changes
+
+- Updated dependencies [a858d8e]
+  - @roottale/cms-core@0.63.0
+  - @roottale/cms-client@0.63.0
+
 ## 0.62.0
 
 ### Minor Changes

package/README.md

@@ -170,6 +170,9 @@ export default async function PostPage({
         apiKey={process.env.ROOTTALE_API_KEY!}
         slugOrId={post.id}
         showTableOfContents
+        tocPosition="inline"
+        theme={null}
+        footerPatternPresentation={null}
         tableOfContentsTitle="목차"
         breadcrumb={{ siteUrl: process.env.NEXT_PUBLIC_SITE_URL }}
         relatedPostsCount={3}

package/dist/{chunk-SEPUIKVM.js → chunk-LUL73SKP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-L3I4W5NP.js";
 
 // src/exposures.tsx
-import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
+import { createContext, useCallback as useCallback3, useContext, useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
 
 // src/exposure-decision-client.ts
 import { useEffect, useState } from "react";
@@ -161,7 +161,7 @@ function useExposureDecision(endpoint, pathname, device, slots, enabled = true)
 }
 
 // src/exposure-group.tsx
-import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState6 } from "react";
 
 // src/exposure-content.tsx
 import { useState as useState2 } from "react";
@@ -212,7 +212,7 @@ function contentVariant(campaign) {
 }
 
 // src/exposure-dialog.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var activeDialog = null;
@@ -238,10 +238,38 @@ function exposureCanOpenPopup() {
     return true;
   });
 }
-function ExposureDialog({ title, className, children, onClose, device, size, themeElement }) {
+function ExposureDialog({ title, className, children, onClose, onReady, device, size, themeElement, manageFocus = true }) {
   const rootRef = useRef(null);
   const dialogRef = useRef(null);
   const closeRef = useRef(onClose);
+  const [ready, setReady] = useState3(false);
+  useEffect2(() => {
+    if (ready) onReady?.(true);
+  }, [ready, onReady]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const pending = Array.from(root.querySelectorAll("img")).filter((image) => !image.complete);
+    if (!pending.length) {
+      setReady(true);
+      return;
+    }
+    const remaining = new Set(pending);
+    const settle = (event) => {
+      remaining.delete(event.currentTarget);
+      if (!remaining.size) setReady(true);
+    };
+    for (const image of pending) {
+      image.addEventListener("load", settle);
+      image.addEventListener("error", settle);
+    }
+    return () => {
+      for (const image of pending) {
+        image.removeEventListener("load", settle);
+        image.removeEventListener("error", settle);
+      }
+    };
+  }, []);
   useEffect2(() => {
     closeRef.current = onClose;
   }, [onClose]);
@@ -259,7 +287,7 @@ function ExposureDialog({ title, className, children, onClose, device, size, the
   useEffect2(() => {
     const root = rootRef.current;
     const dialog = dialogRef.current;
-    if (!root || !dialog) return;
+    if (!root || !dialog || !ready) return;
     activeDialog = dialog;
     const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const previousOverflow = document.body.style.overflow;
@@ -280,7 +308,7 @@ function ExposureDialog({ title, className, children, onClose, device, size, the
     const observer = new MutationObserver(inertBackground);
     observer.observe(document.body, { childList: true });
     const focusable = () => Array.from(dialog.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex="0"]')).filter((element) => !element.hidden && !element.closest('[hidden], [aria-hidden="true"]'));
-    (dialog.querySelector("[data-exposure-close]") ?? dialog).focus({ preventScroll: true });
+    if (manageFocus) dialog.focus({ preventScroll: true });
     const handleKey = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -306,7 +334,7 @@ function ExposureDialog({ title, className, children, onClose, device, size, the
       if (event.target instanceof Node && !dialog.contains(event.target)) (focusable()[0] ?? dialog).focus({ preventScroll: true });
     };
     document.addEventListener("keydown", handleKey, true);
-    document.addEventListener("focusin", handleFocus);
+    if (manageFocus) document.addEventListener("focusin", handleFocus);
     return () => {
       observer.disconnect();
       document.removeEventListener("keydown", handleKey, true);
@@ -315,6 +343,7 @@ function ExposureDialog({ title, className, children, onClose, device, size, the
       if (activeDialog === dialog) activeDialog = null;
       document.body.style.overflow = previousOverflow;
       document.body.style.paddingRight = previousPadding;
+      if (!manageFocus) return;
       if (previous?.isConnected && !previous.inert) previous.focus({ preventScroll: true });
       else {
         const fallback = document.querySelector('main, [role="main"]') ?? document.body;
@@ -324,23 +353,23 @@ function ExposureDialog({ title, className, children, onClose, device, size, the
         if (!hadTabIndex) fallback.removeAttribute("tabindex");
       }
     };
-  }, []);
-  return createPortal(/* @__PURE__ */ jsx2("div", { ref: rootRef, className: "rt-exposure-backdrop", "data-device": device, children: /* @__PURE__ */ jsx2("section", { ref: dialogRef, className, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, "data-size": size, children }) }), document.body);
+  }, [ready, manageFocus]);
+  return createPortal(/* @__PURE__ */ jsx2("div", { ref: rootRef, className: "rt-exposure-backdrop", "data-device": device, style: { visibility: ready ? void 0 : "hidden" }, children: /* @__PURE__ */ jsx2("section", { ref: dialogRef, className, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, "data-size": size, children }) }), document.body);
 }
 
 // src/exposure-carousel.tsx
-import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function useExposureCarousel(campaigns, enabled, durationMs, popup) {
-  const [selection, setSelection] = useState3({ id: campaigns[0]?.id, cycle: 0 });
-  const [elapsedState, setElapsed] = useState3({ id: campaigns[0]?.id, value: 0 });
-  const [userPaused, setUserPaused] = useState3(false);
-  const [motionAllowed, setMotionAllowed] = useState3(false);
-  const [reducedMotion, setReducedMotion] = useState3(false);
-  const [hovered, setHovered] = useState3(false);
-  const [focused, setFocused] = useState3(false);
-  const [touching, setTouching] = useState3(false);
-  const [environmentPaused, setEnvironmentPaused] = useState3(false);
+  const [selection, setSelection] = useState4({ id: campaigns[0]?.id, cycle: 0 });
+  const [elapsedState, setElapsed] = useState4({ id: campaigns[0]?.id, value: 0 });
+  const [userPaused, setUserPaused] = useState4(false);
+  const [motionAllowed, setMotionAllowed] = useState4(false);
+  const [reducedMotion, setReducedMotion] = useState4(false);
+  const [hovered, setHovered] = useState4(false);
+  const [focused, setFocused] = useState4(false);
+  const [touching, setTouching] = useState4(false);
+  const [environmentPaused, setEnvironmentPaused] = useState4(false);
   const elapsedRef = useRef2(0);
   const touchOrigin = useRef2(null);
   const index = Math.max(0, campaigns.findIndex((campaign2) => campaign2.id === selection.id));
@@ -489,9 +518,9 @@ function ExposureCarouselControls({ carousel, campaigns }) {
 }
 
 // src/exposure-scroll.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 function useMobileExposureScroll(enabled) {
-  const [hidden, setHidden] = useState4(false);
+  const [hidden, setHidden] = useState5(false);
   useEffect4(() => {
     if (!enabled) {
       setHidden(false);
@@ -596,7 +625,7 @@ function nextExposureMidnight(now, timeZone) {
 function exposureWasHidden(campaign, now, legacyPrefixes = []) {
   const persistent = readPreferences(preferencesCookie);
   const preferences = [persistent.get(compactKey(campaign.slotKey, "g")), persistent.get(compactKey(campaign.id, "c")), readPreferences(sessionCookie).get(compactKey(campaign.id, "c"))];
-  if (preferences.some((preference) => preference?.startsWith("s:") || preference?.startsWith("v:") || preference === "n:1" || preference?.startsWith("u:") && Number(preference.slice(2)) > now)) return true;
+  if (preferences.some((preference) => campaign.repeat !== "always" && (preference?.startsWith("s:") || preference?.startsWith("v:") || preference === "n:1") || preference?.startsWith("u:") && Number(preference.slice(2)) > now)) return true;
   const until = Number(read("local", `rt-exposure-until:${campaign.id}`));
   if (Number.isFinite(until) && until > now) return true;
   if (campaign.repeat === "always") return false;
@@ -617,6 +646,7 @@ function rememberExposureView(campaign, now) {
   if (campaign.delivery && (campaign.repeat === "day" || campaign.repeat === "never")) rememberExposureDismissal(campaign, now);
 }
 function rememberExposureDismissal(campaign, now, forToday = false) {
+  if (campaign.repeat === "always" && !forToday) return;
   if (forToday || campaign.repeat === "day") {
     const until = forToday || campaign.delivery?.dayBoundary === "calendar" ? nextExposureMidnight(now, campaign.delivery?.timeZone ?? "Asia/Seoul") : now + 864e5;
     writePreferenceKey(compactKey(campaign.id, "c"), `u:${until}`, true, now);
@@ -635,7 +665,7 @@ function rememberExposureGroupDismissal(campaigns, now, forToday = false) {
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function useSlideScrollReset(campaignId) {
   const ref = useRef3(null);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (ref.current) ref.current.scrollTop = 0;
   }, [campaignId]);
   return ref;
@@ -646,19 +676,20 @@ function exposureGroupSize(campaigns) {
   return "small";
 }
 function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
-  const [visible, setVisible] = useState5(false);
-  const [dismissed, setDismissed] = useState5(false);
-  const [height, setMeasuredHeight] = useState5(0);
-  const [inView, setInView] = useState5(() => placement !== "inline" || typeof IntersectionObserver === "undefined");
+  const [visible, setVisible] = useState6(Boolean(runtime.preview));
+  const [dismissed, setDismissed] = useState6(false);
+  const [popupReady, setPopupReady] = useState6(false);
+  const [height, setMeasuredHeight] = useState6(0);
+  const [inView, setInView] = useState6(() => placement !== "inline" || typeof IntersectionObserver === "undefined");
   const measuredRef = useRef3(null);
   const campaignIds = campaigns.map((campaign2) => campaign2.id).join(",");
-  const [admission, setAdmission] = useState5(() => ({
+  const [admission, setAdmission] = useState6(() => ({
     ids: campaignIds,
-    allowed: new Map(campaigns.map((campaign2) => [campaign2.id, !exposureWasHidden(campaign2, runtime.now(), runtime.legacyPrefixes)]))
+    allowed: new Map(campaigns.map((campaign2) => [campaign2.id, Boolean(runtime.preview) || !exposureWasHidden(campaign2, runtime.now(), runtime.legacyPrefixes)]))
   }));
   if (admission.ids !== campaignIds) {
     const allowed = new Map(admission.allowed);
-    for (const campaign2 of campaigns) if (!allowed.has(campaign2.id)) allowed.set(campaign2.id, !exposureWasHidden(campaign2, runtime.now(), runtime.legacyPrefixes));
+    for (const campaign2 of campaigns) if (!allowed.has(campaign2.id)) allowed.set(campaign2.id, Boolean(runtime.preview) || !exposureWasHidden(campaign2, runtime.now(), runtime.legacyPrefixes));
     setAdmission({ ids: campaignIds, allowed });
   }
   const viewed = useRef3(/* @__PURE__ */ new Set());
@@ -673,12 +704,16 @@ function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
   const slotKey = campaigns[0]?.slotKey ?? "";
   const hiddenOnScroll = useMobileExposureScroll(runtime.device === "mobile" && runtime.hideMobileBannersOnScroll && (placement === "top" || placement === "bottom"));
   const active = visible && !dismissed && eligible.length > 0;
-  const carousel = useExposureCarousel(eligible, active && !hiddenOnScroll && inView, runtime.slideDurationMs, placement === "popup");
+  const carousel = useExposureCarousel(eligible, active && (placement !== "popup" || popupReady) && !hiddenOnScroll && inView, runtime.slideDurationMs, placement === "popup");
   const campaign = carousel.campaign;
   const activeId = campaign?.id;
   const setHeight = runtime.setHeight;
   const device = runtime.device;
   const slideRef = useSlideScrollReset(activeId);
+  const reportPreview = runtime.preview?.report;
+  useEffect5(() => {
+    if (active && (placement !== "popup" || popupReady)) reportPreview?.(true);
+  }, [active, placement, popupReady, reportPreview]);
   useEffect5(() => {
     const first2 = latest.current.campaigns.find((campaign2) => campaign2.id === firstId);
     if (visible || dismissed || !first2) return;
@@ -732,10 +767,10 @@ function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
   }, [placement, active]);
   useEffect5(() => {
     const campaign2 = latest.current.campaigns.find((item) => item.id === activeId);
-    if (!active || hiddenOnScroll || !inView || !campaign2 || viewed.current.has(campaign2.id)) return;
+    if (runtime.preview || !active || hiddenOnScroll || !inView || !campaign2 || viewed.current.has(campaign2.id)) return;
     viewed.current.add(campaign2.id);
     rememberExposureView(campaign2, latest.current.runtime.now());
-  }, [active, hiddenOnScroll, inView, activeId]);
+  }, [active, hiddenOnScroll, inView, activeId, runtime.preview]);
   useEffect5(() => {
     if (placement !== "top" && placement !== "bottom") return;
     const element = measuredRef.current;
@@ -759,7 +794,7 @@ function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
   }, [active, placement, slotKey, setHeight, hiddenOnScroll, device]);
   function close(forToday = false) {
     releaseExposurePopup(owner.current);
-    rememberExposureGroupDismissal(latest.current.campaigns, latest.current.runtime.now(), forToday);
+    if (!latest.current.runtime.preview) rememberExposureGroupDismissal(latest.current.campaigns, latest.current.runtime.now(), forToday);
     setDismissed(true);
   }
   if (!active || !campaign) return null;
@@ -770,7 +805,8 @@ function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
   const body = /* @__PURE__ */ jsxs3("div", { className: "rt-exposure-carousel", "aria-roledescription": eligible.length > 1 ? "\uCE90\uB7EC\uC140" : void 0, ...carousel.interactions, children: [
     /* @__PURE__ */ jsx4("div", { ref: slideRef, className: "rt-exposure-slide", role: "group", "aria-roledescription": eligible.length > 1 ? "\uC2AC\uB77C\uC774\uB4DC" : void 0, "aria-label": `${carousel.index + 1} / ${eligible.length}`, children: /* @__PURE__ */ jsx4(ExposureContent, { campaign, device: runtime.device }, campaign.id) }),
     closeControls,
-    /* @__PURE__ */ jsx4(ExposureCarouselControls, { carousel, campaigns: eligible })
+    /* @__PURE__ */ jsx4(ExposureCarouselControls, { carousel, campaigns: eligible }),
+    placement === "popup" && eligible.length > 1 ? /* @__PURE__ */ jsx4("div", { className: "rt-exposure-sizer", "aria-hidden": "true", inert: true, style: { visibility: "hidden", pointerEvents: "none" }, children: eligible.map((item) => /* @__PURE__ */ jsx4(ExposureContent, { campaign: item, device: runtime.device }, item.id)) }) : null
   ] });
   const classes = `rt-exposure rt-exposure--${campaign.kind} rt-exposure--${contentVariant(campaign)}`;
   if (placement === "popup") return /* @__PURE__ */ jsx4(
@@ -782,6 +818,8 @@ function ExposureCampaignGroup({ campaigns, runtime, placement, className }) {
       device: runtime.device,
       size: exposureGroupSize(eligible),
       themeElement: runtime.themeElement,
+      manageFocus: !runtime.preview,
+      onReady: setPopupReady,
       children: body
     }
   );
@@ -818,6 +856,97 @@ function RootTaleExposureCarouselPreview({ campaigns, placement = "popup", devic
   ] }) });
 }
 
+// src/exposure-site-preview.ts
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
+var EXPOSURE_PREVIEW_PROTOCOL = "roottale:exposure-preview";
+var defaultOrigins = ["https://admin.roottale.com"];
+function exposureSitePreviewUrl(siteUrl, editorOrigin, session) {
+  try {
+    const url = new URL(siteUrl);
+    const local = ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+    if (url.username || url.password || url.protocol !== "https:" && !(local && url.protocol === "http:")) return null;
+    url.pathname = "/";
+    url.search = "";
+    url.hash = new URLSearchParams({ "rt-exposure-preview": session, origin: editorOrigin }).toString();
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+function previewConnection(origins) {
+  if (typeof window === "undefined" || window.parent === window) return null;
+  const params = new URLSearchParams(window.location.hash.slice(1));
+  const session = params.get("rt-exposure-preview");
+  const origin = params.get("origin");
+  if (!session || !/^[a-f0-9]{8}(?:-[a-f0-9]{4}){3}-[a-f0-9]{12}$/i.test(session) || !origin || ![...defaultOrigins, ...origins].includes(origin)) return null;
+  return { session, origin };
+}
+function parseExposurePreviewCampaign(value, slots) {
+  try {
+    if (JSON.stringify(value).length > 32e3) return null;
+    const snapshot = readExposureDecision({ campaigns: [value], evaluatedAt: "2026-01-01T00:00:00Z", validUntil: "2026-01-01T00:01:00Z" }, slots, 0, 0);
+    const campaign = snapshot?.decision.campaigns[0];
+    if (!campaign?.delivery || campaign.content.title.length > 200 || campaign.content.variant.length > 100) return null;
+    for (const field of ["eyebrow", "description", "assetAlt", "mobileAssetAlt", "linkLabel"]) {
+      const text = campaign.content[field];
+      if (text !== void 0 && (typeof text !== "string" || text.length > 2e3)) return null;
+    }
+    if (campaign.content.linkTarget !== void 0 && !["self", "blank"].includes(campaign.content.linkTarget)) return null;
+    return campaign;
+  } catch {
+    return null;
+  }
+}
+function useExposureSitePreview(slots, origins = defaultOrigins) {
+  const [connection] = useState7(() => previewConnection(origins));
+  const [draft, setDraft] = useState7(null);
+  const revision = useRef4(-1);
+  const slotsKey = slots.join(",");
+  const reply = useCallback2((type, data = {}) => {
+    if (connection) window.parent.postMessage({ type: `${EXPOSURE_PREVIEW_PROTOCOL}:${type}`, session: connection.session, ...data }, connection.origin);
+  }, [connection]);
+  useEffect6(() => {
+    if (!connection) return;
+    function receive(event) {
+      if (event.source !== window.parent || event.origin !== connection.origin) return;
+      const data = event.data;
+      if (!data || data.session !== connection.session) return;
+      if (data.type === `${EXPOSURE_PREVIEW_PROTOCOL}:connect`) {
+        reply("ready");
+        return;
+      }
+      if (data.type !== `${EXPOSURE_PREVIEW_PROTOCOL}:render` || !Number.isSafeInteger(data.revision) || data.revision <= revision.current) return;
+      const campaign = parseExposurePreviewCampaign(data.campaign, slotsKey.split(","));
+      if (!campaign) {
+        reply("error", { revision: data.revision });
+        return;
+      }
+      revision.current = data.revision;
+      setDraft({ revision: data.revision, campaign });
+    }
+    const preventNavigation = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const previewControl = target?.closest("[data-roottale-exposure-slot], .rt-exposure-backdrop");
+      if (event.type === "submit" || !previewControl || target?.closest("a[href]")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    window.addEventListener("message", receive);
+    document.addEventListener("click", preventNavigation, true);
+    document.addEventListener("submit", preventNavigation, true);
+    reply("ready");
+    return () => {
+      window.removeEventListener("message", receive);
+      document.removeEventListener("click", preventNavigation, true);
+      document.removeEventListener("submit", preventNavigation, true);
+    };
+  }, [connection, reply, slotsKey]);
+  const draftRevision = draft?.revision ?? -1;
+  const report = useCallback2((valid) => reply(valid ? "rendered" : "error", { revision: draftRevision }), [reply, draftRevision]);
+  return { active: connection !== null, draft, report };
+}
+
 // src/exposures.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Context = createContext(null);
@@ -831,12 +960,13 @@ function RootTaleExposureProvider({
   slideDurationMs = 5e3,
   hideMobileBannersOnScroll = true,
   legacyDismissalKeyPrefixes = emptyPrefixes,
+  previewOrigins,
   children
 }) {
-  const [themeElement, setThemeElement] = useState6(null);
-  const [device, setDevice] = useState6("desktop");
-  const [heights, setHeights] = useState6({});
-  useEffect6(() => {
+  const [themeElement, setThemeElement] = useState8(null);
+  const [device, setDevice] = useState8("desktop");
+  const [heights, setHeights] = useState8({});
+  useEffect7(() => {
     const media = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const update = () => setDevice(media.matches ? "mobile" : "desktop");
     update();
@@ -846,23 +976,24 @@ function RootTaleExposureProvider({
   const path = pathname.split(/[?#]/, 1)[0] || "/";
   const home = isExposureHome(path, exposureHomePaths(homePaths));
   const routeKey = `${path}:${device}`;
-  const snapshot = useExposureDecision(endpoint, path, device, slots, home);
-  const popupVisit = useRef4({ key: routeKey });
-  useEffect6(() => {
+  const preview = useExposureSitePreview(slots, previewOrigins);
+  const snapshot = useExposureDecision(endpoint, path, device, slots, home && !preview.active);
+  const popupVisit = useRef5({ key: routeKey });
+  useEffect7(() => {
     popupVisit.current = { key: routeKey };
   }, [routeKey]);
-  const now = useCallback2(() => snapshot ? exposureServerNow(snapshot) : Date.now(), [snapshot]);
-  const claimPopup = useCallback2((slot) => {
+  const now = useCallback3(() => snapshot ? exposureServerNow(snapshot) : Date.now(), [snapshot]);
+  const claimPopup = useCallback3((slot) => {
     const claimed = popupVisit.current.slot;
     if (claimed && claimed !== slot) return false;
     popupVisit.current.slot = slot;
     return true;
   }, []);
-  const setHeight = useCallback2((key, placement, height) => {
+  const setHeight = useCallback3((key, placement, height) => {
     setHeights((previous) => previous[key]?.height === height && previous[key]?.placement === placement ? previous : { ...previous, [key]: { placement, height } });
   }, []);
   const value = {
-    campaigns: liveCampaigns(snapshot),
+    campaigns: preview.active ? preview.draft ? [preview.draft.campaign] : [] : liveCampaigns(snapshot),
     device,
     routeKey,
     home,
@@ -872,7 +1003,8 @@ function RootTaleExposureProvider({
     claimPopup,
     setHeight,
     legacyPrefixes: legacyDismissalKeyPrefixes,
-    themeElement
+    themeElement,
+    preview: preview.active ? { revision: preview.draft?.revision ?? 0, report: preview.report } : void 0
   };
   const top = Math.max(0, ...Object.values(heights).filter((item) => item.placement === "top").map((item) => item.height));
   const bottom = Math.max(0, ...Object.values(heights).filter((item) => item.placement === "bottom").map((item) => item.height));
@@ -881,14 +1013,20 @@ function RootTaleExposureProvider({
 }
 function RootTaleExposureSlot({ slotKey, placement, allowedVariants, fallback = null, className = "" }) {
   const runtime = useContext(Context);
+  const previewCampaign = runtime?.preview ? runtime.campaigns[0] : void 0;
+  const reportPreview = runtime?.preview?.report;
+  const validPreview = previewCampaign?.slotKey === slotKey && previewCampaign.kind === (placement === "popup" ? "popup" : "banner") && allowedVariants.includes(previewCampaign.content.variant);
+  useEffect7(() => {
+    if (previewCampaign?.slotKey === slotKey && !validPreview) reportPreview?.(false);
+  }, [previewCampaign, slotKey, validPreview, reportPreview]);
   if (runtime && !runtime.home) return fallback;
   const campaigns = runtime?.campaigns.filter((item) => item.slotKey === slotKey && item.kind === (placement === "popup" ? "popup" : "banner") && allowedVariants.includes(item.content.variant)).slice(0, 20);
   if (!runtime || !campaigns?.length) return fallback;
-  return /* @__PURE__ */ jsx5(ExposureCampaignGroup, { campaigns, runtime, placement, className }, `${runtime.routeKey}:${slotKey}`);
+  return /* @__PURE__ */ jsx5(ExposureCampaignGroup, { campaigns, runtime, placement, className }, `${runtime.routeKey}:${slotKey}:${runtime.preview?.revision ?? "live"}`);
 }
 function RootTaleLegacyExposure({ campaign, allowedVariants }) {
-  const [device, setDevice] = useState6("desktop");
-  useEffect6(() => {
+  const [device, setDevice] = useState8("desktop");
+  useEffect7(() => {
     const media = window.matchMedia("(max-width: 767px)");
     const update = () => setDevice(media.matches ? "mobile" : "desktop");
     update();
@@ -915,8 +1053,11 @@ function RootTaleLegacyExposure({ campaign, allowedVariants }) {
 export {
   RootTaleExposurePreview,
   RootTaleExposureCarouselPreview,
+  EXPOSURE_PREVIEW_PROTOCOL,
+  exposureSitePreviewUrl,
+  parseExposurePreviewCampaign,
   RootTaleExposureProvider,
   RootTaleExposureSlot,
   RootTaleLegacyExposure
 };
-//# sourceMappingURL=chunk-SEPUIKVM.js.map
+//# sourceMappingURL=chunk-LUL73SKP.js.map