@roottale/cms-renderer-next 0.61.0 → 0.62.0

package/dist/chunk-SEPUIKVM.js

@@ -0,0 +1,922 @@
+"use client";
+
+import {
+  exposureHomePaths,
+  isExposureHome
+} from "./chunk-L3I4W5NP.js";
+
+// src/exposures.tsx
+import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
+
+// src/exposure-decision-client.ts
+import { useEffect, useState } from "react";
+
+// src/exposure-runtime-data.ts
+function validLink(value, internal = true) {
+  if (value == null) return true;
+  if (typeof value !== "string" || /[\u0000-\u0020\u007f\\]/.test(value)) return false;
+  if (internal && value.startsWith("/") && !value.startsWith("//")) return true;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" && !url.username && !url.password;
+  } catch {
+    return false;
+  }
+}
+function readExposureDecision(value, slots, receivedAt, elapsed) {
+  if (!value || typeof value !== "object") return null;
+  const data = value;
+  const evaluated = Date.parse(data.evaluatedAt);
+  const validUntil = Date.parse(data.validUntil);
+  if (!Number.isFinite(evaluated) || !Number.isFinite(validUntil) || validUntil <= evaluated || !Array.isArray(data.campaigns) || data.campaigns.length > 200) return null;
+  const serverAtReceipt = evaluated + Math.max(0, elapsed);
+  const expiresAt = receivedAt + Math.min(validUntil - serverAtReceipt, 12e4);
+  if (expiresAt <= receivedAt) return null;
+  const campaigns = [];
+  for (const item of data.campaigns) {
+    if (!item || typeof item.id !== "string" || !slots.includes(item.slotKey) || item.kind !== "banner" && item.kind !== "popup" || !item.content || typeof item.content.title !== "string" || typeof item.content.variant !== "string" || !["always", "session", "day", "never"].includes(item.repeat) || !validLink(item.content.linkUrl) || !validLink(item.content.assetUrl, false) || !validLink(item.content.mobileAssetUrl, false)) return null;
+    if (item.endsAt != null && !Number.isFinite(Date.parse(item.endsAt))) return null;
+    if (item.delivery) {
+      const delivery = item.delivery;
+      if (delivery.version !== 2 || !Number.isFinite(delivery.delaySeconds) || delivery.delaySeconds < 0 || delivery.delaySeconds > 30 || ![null, 25, 50, 75].includes(delivery.scrollPercent) || !["small", "medium", "large"].includes(delivery.size) || !["calendar", "rolling"].includes(delivery.dayBoundary) || typeof delivery.dismissible !== "boolean" || typeof delivery.hideForToday !== "boolean") return null;
+      try {
+        new Intl.DateTimeFormat("en", { timeZone: delivery.timeZone });
+      } catch {
+        return null;
+      }
+    }
+    const popupSlot = campaigns.find((existing) => existing.kind === "popup")?.slotKey;
+    if (!campaigns.some((existing) => existing.id === item.id) && campaigns.filter((existing) => existing.slotKey === item.slotKey).length < 20 && (item.kind !== "popup" || popupSlot === void 0 || popupSlot === item.slotKey)) campaigns.push(item);
+  }
+  const boundary = data.nextChangeAt == null ? null : Date.parse(data.nextChangeAt);
+  if (boundary !== null && !Number.isFinite(boundary)) return null;
+  return {
+    decision: { ...data, campaigns },
+    receivedAt,
+    serverAtReceipt,
+    expiresAt,
+    nextAt: boundary === null ? null : receivedAt + boundary - serverAtReceipt
+  };
+}
+function exposureServerNow(snapshot) {
+  return snapshot.serverAtReceipt + performance.now() - snapshot.receivedAt;
+}
+function liveCampaigns(snapshot) {
+  if (!snapshot || performance.now() >= snapshot.expiresAt) return [];
+  const now = exposureServerNow(snapshot);
+  return snapshot.decision.campaigns.filter((campaign) => !campaign.endsAt || Date.parse(campaign.endsAt) > now);
+}
+
+// src/exposure-decision-client.ts
+function useExposureDecision(endpoint, pathname, device, slots, enabled = true) {
+  const slotsKey = slots.join(",");
+  const requestKey = JSON.stringify([endpoint, pathname, device, slotsKey, enabled]);
+  const [result, setResult] = useState(null);
+  useEffect(() => {
+    if (!enabled) return;
+    let disposed = false;
+    let sequence = 0;
+    let controller;
+    let pollTimer;
+    let expiryTimer;
+    let requestTimer;
+    let current = null;
+    const clearPoll = () => {
+      clearTimeout(pollTimer);
+      clearTimeout(requestTimer);
+      controller?.abort();
+      sequence++;
+    };
+    function schedule(delay) {
+      clearTimeout(pollTimer);
+      if (!disposed && document.visibilityState !== "hidden") pollTimer = setTimeout(refresh, Math.max(100, Math.min(delay, 6e4)));
+    }
+    function expireKnownCampaigns() {
+      if (!current) return;
+      setResult(performance.now() >= current.expiresAt ? null : { key: requestKey, snapshot: current });
+      armExpiry();
+    }
+    function armExpiry() {
+      clearTimeout(expiryTimer);
+      if (!current || current.expiresAt <= performance.now()) return;
+      const ends = current.decision.campaigns.flatMap((campaign) => campaign.endsAt ? [current.receivedAt + Date.parse(campaign.endsAt) - current.serverAtReceipt] : []);
+      const future = [current.expiresAt, ...ends].filter((time) => time > performance.now());
+      expiryTimer = setTimeout(expireKnownCampaigns, Math.max(1, Math.min(...future) - performance.now()));
+    }
+    async function refresh() {
+      if (disposed || document.visibilityState === "hidden") return;
+      clearPoll();
+      if (current && performance.now() >= current.expiresAt) setResult(null);
+      const seq = sequence;
+      controller = new AbortController();
+      const startedAt = performance.now();
+      let refreshed = false;
+      requestTimer = setTimeout(() => controller?.abort(), 1e4);
+      try {
+        const url = new URL(endpoint, window.location.origin);
+        if (url.origin !== window.location.origin || url.username || url.password) throw new Error("Exposure endpoint must be same origin");
+        url.search = new URLSearchParams({ path: pathname, device }).toString();
+        const response = await fetch(url, { cache: "no-store", credentials: "same-origin", signal: controller.signal });
+        if (!response.ok) throw new Error("Exposure unavailable");
+        const payload = await response.json();
+        if (disposed || seq !== sequence) return;
+        const receivedAt = performance.now();
+        current = readExposureDecision(payload, slotsKey.split(","), receivedAt, receivedAt - startedAt);
+        refreshed = current !== null;
+        setResult(current ? { key: requestKey, snapshot: current } : null);
+        armExpiry();
+      } catch {
+        if (disposed || seq !== sequence) return;
+        if (!current || performance.now() >= current.expiresAt) {
+          current = null;
+          setResult(null);
+        }
+      } finally {
+        if (!disposed && seq === sequence) {
+          clearTimeout(requestTimer);
+          const now = performance.now();
+          const next = current?.nextAt;
+          const boundaryDelay = next != null && next > now ? next - now : 6e4;
+          const refreshDelay = refreshed && current ? Math.max(1e3, current.expiresAt - now - 1e4) : 6e4;
+          schedule(Math.min(boundaryDelay, refreshDelay));
+        }
+      }
+    }
+    function onVisibility() {
+      if (document.visibilityState === "hidden") clearPoll();
+      else void refresh();
+    }
+    void refresh();
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("focus", refresh);
+    return () => {
+      disposed = true;
+      clearPoll();
+      clearTimeout(expiryTimer);
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("focus", refresh);
+    };
+  }, [endpoint, pathname, device, slotsKey, requestKey, enabled]);
+  return enabled && result?.key === requestKey ? result.snapshot : null;
+}
+
+// src/exposure-group.tsx
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState5 } from "react";
+
+// src/exposure-content.tsx
+import { useState as useState2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExposureContent({ campaign, device, controls }) {
+  const { content } = campaign;
+  const [failedUrls, setFailedUrls] = useState2([]);
+  const preferred = device === "mobile" && content.mobileAssetUrl ? content.mobileAssetUrl : content.assetUrl;
+  const textOnly = campaign.delivery?.version === 2 && ["notice", "card"].includes(content.variant);
+  const assetUrl = textOnly ? void 0 : preferred && !failedUrls.includes(preferred) ? preferred : content.assetUrl && !failedUrls.includes(content.assetUrl) ? content.assetUrl : void 0;
+  const assetAlt = device === "mobile" && assetUrl === content.mobileAssetUrl ? content.mobileAssetAlt ?? content.assetAlt : content.assetAlt;
+  const imageOnly = content.variant === "image" && Boolean(assetUrl);
+  const linkProps = { href: content.linkUrl, ...content.linkTarget === "blank" ? { target: "_blank", rel: "noopener noreferrer" } : {} };
+  const asset = assetUrl ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "rt-exposure__asset",
+      src: assetUrl,
+      alt: assetAlt ?? content.title,
+      onError: () => setFailedUrls((previous) => [...previous, assetUrl])
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: `rt-exposure__body${imageOnly ? " rt-exposure__body--image" : ""}`, children: [
+    imageOnly && content.linkUrl ? /* @__PURE__ */ jsx("a", { ...linkProps, "aria-label": content.linkLabel ?? content.title, children: asset }) : asset,
+    /* @__PURE__ */ jsxs("div", { className: `rt-exposure__copy${imageOnly ? " rt-exposure__sr-only" : ""}`, children: [
+      content.eyebrow ? /* @__PURE__ */ jsx("p", { className: "rt-exposure__eyebrow", children: content.eyebrow }) : null,
+      /* @__PURE__ */ jsx("h2", { className: "rt-exposure__title", children: content.title }),
+      content.description ? /* @__PURE__ */ jsx("p", { className: "rt-exposure__description", children: content.description }) : null,
+      !imageOnly && content.linkUrl && content.linkLabel ? /* @__PURE__ */ jsx("a", { className: "rt-exposure__link", ...linkProps, children: content.linkLabel }) : null
+    ] }),
+    controls
+  ] });
+}
+function RootTaleExposurePreview({ campaign, placement = campaign.kind === "popup" ? "popup" : "inline", device = "desktop", className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `rt-exposure rt-exposure--${campaign.kind} rt-exposure--${contentVariant(campaign)} rt-exposure--preview ${className}`,
+      "data-placement": placement,
+      "data-device": device,
+      "data-size": campaign.delivery?.size ?? "medium",
+      children: /* @__PURE__ */ jsx(ExposureContent, { campaign, device })
+    }
+  );
+}
+function contentVariant(campaign) {
+  return campaign.content.variant.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+
+// src/exposure-dialog.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var activeDialog = null;
+var openingOwner = null;
+function reserveExposurePopup(owner) {
+  if (openingOwner !== null && openingOwner !== owner) return false;
+  openingOwner = owner;
+  return true;
+}
+function releaseExposurePopup(owner) {
+  if (openingOwner === owner) openingOwner = null;
+}
+function exposureCanOpenPopup() {
+  const focused = document.activeElement;
+  if (focused instanceof HTMLElement && (focused.matches("input, textarea, select") || focused.isContentEditable)) return false;
+  if (activeDialog?.isConnected) return false;
+  return !Array.from(document.querySelectorAll('dialog[open], [role="dialog"][aria-modal="true"]')).some((element) => {
+    for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+      if (ancestor.hidden || ancestor.inert || ancestor.getAttribute("aria-hidden") === "true") return false;
+      const style = getComputedStyle(ancestor);
+      if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse") return false;
+    }
+    return true;
+  });
+}
+function ExposureDialog({ title, className, children, onClose, device, size, themeElement }) {
+  const rootRef = useRef(null);
+  const dialogRef = useRef(null);
+  const closeRef = useRef(onClose);
+  useEffect2(() => {
+    closeRef.current = onClose;
+  }, [onClose]);
+  useEffect2(() => {
+    const target = rootRef.current;
+    if (!themeElement || !target) return;
+    const computed = getComputedStyle(themeElement);
+    target.style.fontFamily = computed.fontFamily;
+    target.style.color = computed.color;
+    for (let index = 0; index < computed.length; index++) {
+      const key = computed.item(index);
+      if (key.startsWith("--")) target.style.setProperty(key, computed.getPropertyValue(key));
+    }
+  }, [themeElement]);
+  useEffect2(() => {
+    const root = rootRef.current;
+    const dialog = dialogRef.current;
+    if (!root || !dialog) return;
+    activeDialog = dialog;
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const previousOverflow = document.body.style.overflow;
+    const previousPadding = document.body.style.paddingRight;
+    const gutter = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+    const padding = Number.parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+    document.body.style.overflow = "hidden";
+    if (gutter > 0) document.body.style.paddingRight = `${padding + gutter}px`;
+    const inertBefore = /* @__PURE__ */ new Map();
+    function inertBackground() {
+      for (const child of document.body.children) {
+        if (!(child instanceof HTMLElement) || child === root || child.contains(root) || inertBefore.has(child)) continue;
+        inertBefore.set(child, child.inert);
+        child.inert = true;
+      }
+    }
+    inertBackground();
+    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 });
+    const handleKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        closeRef.current();
+      }
+      if (event.key !== "Tab") return;
+      const items = focusable();
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (!first || !last) {
+        event.preventDefault();
+        dialog.focus();
+      } else if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (document.activeElement === last || document.activeElement === dialog)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const handleFocus = (event) => {
+      if (event.target instanceof Node && !dialog.contains(event.target)) (focusable()[0] ?? dialog).focus({ preventScroll: true });
+    };
+    document.addEventListener("keydown", handleKey, true);
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("keydown", handleKey, true);
+      document.removeEventListener("focusin", handleFocus);
+      for (const [element, wasInert] of inertBefore) element.inert = wasInert;
+      if (activeDialog === dialog) activeDialog = null;
+      document.body.style.overflow = previousOverflow;
+      document.body.style.paddingRight = previousPadding;
+      if (previous?.isConnected && !previous.inert) previous.focus({ preventScroll: true });
+      else {
+        const fallback = document.querySelector('main, [role="main"]') ?? document.body;
+        const hadTabIndex = fallback.hasAttribute("tabindex");
+        if (!hadTabIndex) fallback.tabIndex = -1;
+        fallback.focus({ preventScroll: true });
+        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);
+}
+
+// src/exposure-carousel.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } 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 elapsedRef = useRef2(0);
+  const touchOrigin = useRef2(null);
+  const index = Math.max(0, campaigns.findIndex((campaign2) => campaign2.id === selection.id));
+  const campaign = campaigns[index];
+  const elapsed = elapsedState.id === campaign?.id ? elapsedState.value : 0;
+  const latest = useRef2({ campaigns, index });
+  useEffect3(() => {
+    latest.current = { campaigns, index };
+  }, [campaigns, index]);
+  const duration = Math.max(3e3, Math.min(3e4, durationMs));
+  const paused = userPaused || hovered || focused || touching || environmentPaused || reducedMotion && !motionAllowed;
+  const select = useCallback((nextIndex) => {
+    const items = latest.current.campaigns;
+    if (!items.length) return;
+    const normalized = (nextIndex + items.length) % items.length;
+    latest.current.index = normalized;
+    elapsedRef.current = 0;
+    setElapsed({ id: items[normalized].id, value: 0 });
+    setSelection((previous2) => ({ id: items[normalized].id, cycle: previous2.cycle + 1 }));
+  }, []);
+  const next = useCallback(() => select(latest.current.index + 1), [select]);
+  const previous = useCallback(() => select(latest.current.index - 1), [select]);
+  useEffect3(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const changed = () => setReducedMotion(media.matches);
+    changed();
+    media.addEventListener("change", changed);
+    return () => media.removeEventListener("change", changed);
+  }, []);
+  useEffect3(() => {
+    const changed = () => setEnvironmentPaused(document.visibilityState === "hidden" || !popup && !exposureCanOpenPopup());
+    changed();
+    const check = setInterval(changed, 250);
+    document.addEventListener("visibilitychange", changed);
+    return () => {
+      clearInterval(check);
+      document.removeEventListener("visibilitychange", changed);
+    };
+  }, [popup]);
+  useEffect3(() => {
+    elapsedRef.current = 0;
+  }, [campaign?.id, selection.cycle]);
+  useEffect3(() => {
+    if (!enabled || paused || campaigns.length < 2) return;
+    let previousTick = performance.now();
+    const timer = setInterval(() => {
+      const now = performance.now();
+      elapsedRef.current += now - previousTick;
+      previousTick = now;
+      if (elapsedRef.current >= duration) next();
+      else setElapsed({ id: campaign?.id, value: elapsedRef.current });
+    }, 100);
+    return () => clearInterval(timer);
+  }, [campaign?.id, campaigns.length, enabled, paused, duration, next, selection.cycle]);
+  function onTouchStart(event) {
+    const touch = event.touches[0];
+    if (touch) {
+      touchOrigin.current = { x: touch.clientX, y: touch.clientY };
+      setTouching(true);
+    }
+  }
+  function onTouchEnd(event) {
+    const origin = touchOrigin.current;
+    const touch = event.changedTouches[0];
+    touchOrigin.current = null;
+    setTouching(false);
+    if (!origin || !touch || campaigns.length < 2) return;
+    const dx = touch.clientX - origin.x;
+    const dy = touch.clientY - origin.y;
+    if (Math.abs(dx) >= 48 && Math.abs(dx) > Math.abs(dy) * 1.4) {
+      if (dx < 0) next();
+      else previous();
+    }
+  }
+  function onFocus(event) {
+    if (!(event.target instanceof HTMLElement)) return;
+    if (event.target.closest("[data-exposure-close], .rt-exposure__hide-today")) {
+      setFocused(false);
+      return;
+    }
+    setFocused(true);
+  }
+  const interactions = {
+    onPointerEnter: (event) => {
+      if (event.pointerType === "mouse") setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
+    onFocusCapture: onFocus,
+    onBlurCapture: (event) => {
+      if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+    },
+    onTouchStart,
+    onTouchEnd,
+    onTouchCancel: () => {
+      touchOrigin.current = null;
+      setTouching(false);
+    }
+  };
+  const toggle = () => {
+    setFocused(false);
+    setHovered(false);
+    if (reducedMotion && !motionAllowed) {
+      setMotionAllowed(true);
+      setUserPaused(false);
+    } else setUserPaused((value) => !value);
+  };
+  return {
+    campaign,
+    index,
+    paused,
+    userPaused: userPaused || reducedMotion && !motionAllowed,
+    progress: Math.min(1, elapsed / duration),
+    seconds: Math.max(1, Math.ceil((duration - elapsed) / 1e3)),
+    next,
+    previous,
+    select,
+    toggle,
+    interactions
+  };
+}
+function ExposureCarouselControls({ carousel, campaigns }) {
+  if (campaigns.length < 2) return null;
+  const firstDot = Math.max(0, Math.min(campaigns.length - 5, carousel.index - 2));
+  return /* @__PURE__ */ jsxs2("div", { className: "rt-exposure-carousel-controls", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rt-exposure-carousel-meta", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "rt-exposure-carousel-count", "aria-live": carousel.paused ? "polite" : "off", children: [
+        /* @__PURE__ */ jsx3("strong", { children: String(carousel.index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          " / ",
+          String(campaigns.length).padStart(2, "0")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "rt-exposure-carousel-time", children: carousel.paused ? "\uC804\uD658 \uC77C\uC2DC\uC815\uC9C0" : `${carousel.seconds}\uCD08 \uD6C4 \uB2E4\uC74C \uC548\uB0B4` }),
+      /* @__PURE__ */ jsxs2("div", { className: "rt-exposure-carousel-actions", children: [
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": "\uC774\uC804 \uC548\uB0B4", onClick: carousel.previous, children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "m14 6-6 6 6 6" }) }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": carousel.userPaused ? "\uC790\uB3D9 \uC804\uD658 \uC7AC\uC0DD" : "\uC790\uB3D9 \uC804\uD658 \uC77C\uC2DC\uC815\uC9C0", onClick: carousel.toggle, "aria-pressed": carousel.userPaused, children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: carousel.userPaused ? /* @__PURE__ */ jsx3("path", { d: "m9 5 10 7-10 7Z" }) : /* @__PURE__ */ jsx3("path", { d: "M9 5v14M15 5v14" }) }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": "\uB2E4\uC74C \uC548\uB0B4", onClick: carousel.next, children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "m10 6 6 6-6 6" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "rt-exposure-carousel-progress", role: "progressbar", "aria-label": "\uB2E4\uC74C \uC548\uB0B4\uAE4C\uC9C0 \uC9C4\uD589", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(carousel.progress * 100), children: /* @__PURE__ */ jsx3("span", { style: { transform: `scaleX(${carousel.progress})` } }) }),
+    /* @__PURE__ */ jsx3("div", { className: "rt-exposure-carousel-dots", "aria-label": "\uC548\uB0B4 \uC120\uD0DD", children: campaigns.slice(firstDot, firstDot + 5).map((campaign, offset) => {
+      const index = firstDot + offset;
+      return /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `${index + 1}\uBC88\uC9F8 \uC548\uB0B4: ${campaign.content.title}`, "aria-current": index === carousel.index ? "true" : void 0, onClick: () => carousel.select(index), children: /* @__PURE__ */ jsx3("span", {}) }, campaign.id);
+    }) })
+  ] });
+}
+
+// src/exposure-scroll.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
+function useMobileExposureScroll(enabled) {
+  const [hidden, setHidden] = useState4(false);
+  useEffect4(() => {
+    if (!enabled) {
+      setHidden(false);
+      return;
+    }
+    let previous = Math.max(0, window.scrollY);
+    let distance = 0;
+    const onScroll = () => {
+      const current = Math.max(0, window.scrollY);
+      const delta = current - previous;
+      previous = current;
+      if (current < 32) {
+        distance = 0;
+        setHidden(false);
+        return;
+      }
+      if (Math.sign(delta) !== Math.sign(distance)) distance = 0;
+      distance += delta;
+      if (distance >= 12) {
+        setHidden(true);
+        distance = 0;
+      } else if (distance <= -8) {
+        setHidden(false);
+        distance = 0;
+      }
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [enabled]);
+  return enabled && hidden;
+}
+
+// src/exposure-storage.ts
+function read(kind, key) {
+  try {
+    const store = kind === "session" ? sessionStorage : localStorage;
+    return store.getItem(key);
+  } catch {
+    return null;
+  }
+}
+var cookieFallback = /* @__PURE__ */ new Map();
+var sessionCookie = "rt_exposure_session";
+var preferencesCookie = "rt_exposure_preferences";
+function compactKey(value, scope) {
+  let left = 2166136261;
+  let right = 2246822519;
+  for (let index = 0; index < value.length; index++) {
+    left = Math.imul(left ^ value.charCodeAt(index), 16777619);
+    right = Math.imul(right ^ value.charCodeAt(index), 3266489917);
+  }
+  return `${scope}${(left >>> 0).toString(16).padStart(8, "0")}${(right >>> 0).toString(16).padStart(8, "0")}`;
+}
+function rawCookie(name) {
+  const entry = document.cookie.split(";").map((part) => part.trim()).find((part) => part.startsWith(`${name}=`));
+  return entry ? entry.slice(name.length + 1) : null;
+}
+function readPreferences(name) {
+  let raw;
+  try {
+    raw = cookieFallback.get(name) ?? rawCookie(name) ?? null;
+  } catch {
+    raw = cookieFallback.get(name) ?? null;
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const entry of raw?.split(".") ?? []) {
+    const match = /^([cg][a-f0-9]{16})_([svun])([0-9a-z]+)$/.exec(entry);
+    if (match) result.set(match[1], `${match[2]}:${match[2] === "u" ? Number.parseInt(match[3], 36) * 1e3 : 1}`);
+  }
+  return result;
+}
+function writePreferenceKey(key, value, persistent, now) {
+  const name = persistent ? preferencesCookie : sessionCookie;
+  const values = readPreferences(name);
+  for (const [id, preference] of values) if (preference.startsWith("u:") && Number(preference.slice(2)) <= now) values.delete(id);
+  values.delete(key);
+  values.set(key, value);
+  const packed = [...values].slice(-100).map(([id, preference]) => `${id}_${preference[0]}${preference.startsWith("u:") ? Math.ceil(Number(preference.slice(2)) / 1e3).toString(36) : "1"}`).join(".");
+  try {
+    const secure = location.protocol === "https:" ? "; Secure" : "";
+    document.cookie = `${name}=${packed}; Path=/; SameSite=Lax${secure}${persistent ? "; Max-Age=34560000" : ""}`;
+    if (rawCookie(name) !== packed) cookieFallback.set(name, packed);
+    else cookieFallback.delete(name);
+  } catch {
+    cookieFallback.set(name, packed);
+  }
+}
+function dateInZone(epoch, timeZone) {
+  return new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(epoch);
+}
+function nextExposureMidnight(now, timeZone) {
+  const today = dateInZone(now, timeZone);
+  let low = now;
+  let high = now + 48 * 36e5;
+  while (high - low > 1) {
+    const mid = Math.floor((low + high) / 2);
+    if (dateInZone(mid, timeZone) === today) low = mid;
+    else high = mid;
+  }
+  return high;
+}
+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;
+  const until = Number(read("local", `rt-exposure-until:${campaign.id}`));
+  if (Number.isFinite(until) && until > now) return true;
+  if (campaign.repeat === "always") return false;
+  if (campaign.repeat === "session" && read("session", `rt-exposure-viewed:${campaign.id}`)) return true;
+  const kind = campaign.repeat === "session" ? "session" : "local";
+  for (const prefix of ["rt-exposure-dismissed:", ...legacyPrefixes]) {
+    const value = read(kind, `${prefix}${campaign.id}`);
+    if (value === null) continue;
+    if (campaign.repeat !== "day") return true;
+    const dismissedAt = Number(value);
+    const calendar = prefix === "rt-exposure-dismissed:" && campaign.delivery?.dayBoundary === "calendar";
+    if (Number.isFinite(dismissedAt) && (calendar ? dateInZone(dismissedAt, campaign.delivery.timeZone) === dateInZone(now, campaign.delivery.timeZone) : now - dismissedAt < 864e5)) return true;
+  }
+  return false;
+}
+function rememberExposureView(campaign, now) {
+  if (campaign.repeat === "session") writePreferenceKey(compactKey(campaign.id, "c"), "v:1", false, now);
+  if (campaign.delivery && (campaign.repeat === "day" || campaign.repeat === "never")) rememberExposureDismissal(campaign, now);
+}
+function rememberExposureDismissal(campaign, now, forToday = false) {
+  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);
+  } else if (campaign.repeat === "never") writePreferenceKey(compactKey(campaign.id, "c"), "n:1", true, now);
+  else writePreferenceKey(compactKey(campaign.id, "c"), "s:1", false, now);
+}
+function rememberExposureGroupDismissal(campaigns, now, forToday = false) {
+  if (forToday && campaigns[0]) {
+    writePreferenceKey(compactKey(campaigns[0].slotKey, "g"), `u:${nextExposureMidnight(now, campaigns[0].delivery?.timeZone ?? "Asia/Seoul")}`, true, now);
+    return;
+  }
+  for (const campaign of campaigns) rememberExposureDismissal(campaign, now, forToday);
+}
+
+// src/exposure-group.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function useSlideScrollReset(campaignId) {
+  const ref = useRef3(null);
+  useLayoutEffect(() => {
+    if (ref.current) ref.current.scrollTop = 0;
+  }, [campaignId]);
+  return ref;
+}
+function exposureGroupSize(campaigns) {
+  if (campaigns.some((campaign) => campaign.delivery?.size === "large")) return "large";
+  if (campaigns.some((campaign) => (campaign.delivery?.size ?? "medium") === "medium")) return "medium";
+  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 measuredRef = useRef3(null);
+  const campaignIds = campaigns.map((campaign2) => campaign2.id).join(",");
+  const [admission, setAdmission] = useState5(() => ({
+    ids: campaignIds,
+    allowed: new Map(campaigns.map((campaign2) => [campaign2.id, !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));
+    setAdmission({ ids: campaignIds, allowed });
+  }
+  const viewed = useRef3(/* @__PURE__ */ new Set());
+  const owner = useRef3(/* @__PURE__ */ Symbol("exposure-group"));
+  const latest = useRef3({ campaigns, runtime });
+  useEffect5(() => {
+    latest.current = { campaigns, runtime };
+  }, [campaigns, runtime]);
+  const eligible = campaigns.filter((campaign2) => admission.allowed.get(campaign2.id));
+  const first = eligible[0];
+  const firstId = first?.id;
+  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 campaign = carousel.campaign;
+  const activeId = campaign?.id;
+  const setHeight = runtime.setHeight;
+  const device = runtime.device;
+  const slideRef = useSlideScrollReset(activeId);
+  useEffect5(() => {
+    const first2 = latest.current.campaigns.find((campaign2) => campaign2.id === firstId);
+    if (visible || dismissed || !first2) return;
+    let opened = false;
+    let delayPassed = false;
+    const scrollPercent = first2.delivery?.scrollPercent;
+    const tryOpen = () => {
+      if (opened || !delayPassed || document.visibilityState === "hidden") return;
+      if (scrollPercent) {
+        const scrollable = document.documentElement.scrollHeight - window.innerHeight;
+        if (scrollable <= 0 || window.scrollY / scrollable * 100 < scrollPercent) return;
+      }
+      if (placement === "popup") {
+        if (!exposureCanOpenPopup() || !reserveExposurePopup(owner.current)) return;
+        if (!latest.current.runtime.claimPopup(first2.slotKey)) {
+          releaseExposurePopup(owner.current);
+          return;
+        }
+      }
+      opened = true;
+      setVisible(true);
+      clearInterval(retry);
+    };
+    const timer = setTimeout(() => {
+      delayPassed = true;
+      tryOpen();
+    }, placement === "popup" ? (first2.delivery?.delaySeconds ?? 0) * 1e3 : 0);
+    const retry = setInterval(tryOpen, 500);
+    window.addEventListener("scroll", tryOpen, { passive: true });
+    window.addEventListener("resize", tryOpen);
+    document.addEventListener("visibilitychange", tryOpen);
+    return () => {
+      clearTimeout(timer);
+      clearInterval(retry);
+      window.removeEventListener("scroll", tryOpen);
+      window.removeEventListener("resize", tryOpen);
+      document.removeEventListener("visibilitychange", tryOpen);
+    };
+  }, [firstId, visible, dismissed, placement]);
+  useEffect5(() => {
+    const token = owner.current;
+    return () => releaseExposurePopup(token);
+  }, []);
+  useEffect5(() => {
+    if (placement !== "inline" || !active) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const element = measuredRef.current;
+    const observer = new IntersectionObserver(([entry]) => setInView(Boolean(entry?.isIntersecting)), { threshold: 0.1 });
+    if (element) observer.observe(element);
+    return () => observer.disconnect();
+  }, [placement, active]);
+  useEffect5(() => {
+    const campaign2 = latest.current.campaigns.find((item) => item.id === activeId);
+    if (!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]);
+  useEffect5(() => {
+    if (placement !== "top" && placement !== "bottom") return;
+    const element = measuredRef.current;
+    const measure = () => {
+      const rect = element?.getBoundingClientRect();
+      const fullHeight = active && rect ? Math.ceil(rect.height) : 0;
+      setMeasuredHeight((previous) => active ? Math.max(previous, fullHeight) : 0);
+      setHeight(slotKey, placement, hiddenOnScroll ? 0 : placement === "top" && device === "desktop" && rect ? Math.max(0, Math.min(fullHeight, Math.ceil(rect.bottom))) : fullHeight);
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    if (element) observer?.observe(element);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, { passive: true });
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure);
+      setHeight(slotKey, placement, 0);
+    };
+  }, [active, placement, slotKey, setHeight, hiddenOnScroll, device]);
+  function close(forToday = false) {
+    releaseExposurePopup(owner.current);
+    rememberExposureGroupDismissal(latest.current.campaigns, latest.current.runtime.now(), forToday);
+    setDismissed(true);
+  }
+  if (!active || !campaign) return null;
+  const closeControls = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    placement === "popup" || placement === "bottom" || (campaign.delivery?.dismissible ?? true) ? /* @__PURE__ */ jsx4("button", { type: "button", "data-exposure-close": "", className: "rt-exposure__close", "aria-label": "\uC548\uB0B4 \uB2EB\uAE30", onClick: () => close(), children: "\xD7" }) : null,
+    placement === "popup" && campaigns.some((item) => item.delivery?.hideForToday) ? /* @__PURE__ */ jsx4("button", { type: "button", className: "rt-exposure__hide-today", onClick: () => close(true), children: "\uC624\uB298 \uADF8\uB9CC \uBCF4\uAE30" }) : null
+  ] });
+  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 })
+  ] });
+  const classes = `rt-exposure rt-exposure--${campaign.kind} rt-exposure--${contentVariant(campaign)}`;
+  if (placement === "popup") return /* @__PURE__ */ jsx4(
+    ExposureDialog,
+    {
+      title: "\uD648\uD398\uC774\uC9C0 \uC548\uB0B4",
+      className: `${classes} ${className}`,
+      onClose: () => close(),
+      device: runtime.device,
+      size: exposureGroupSize(eligible),
+      themeElement: runtime.themeElement,
+      children: body
+    }
+  );
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className,
+      "data-roottale-exposure-slot": slotKey,
+      "data-roottale-exposure-placement": placement,
+      style: placement === "bottom" || runtime.device === "mobile" && placement === "top" ? { height } : { minHeight: height },
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ref: measuredRef,
+          className: `rt-exposure-position rt-exposure-position--${placement}`,
+          "data-device": runtime.device,
+          "data-scroll-hidden": hiddenOnScroll ? "true" : "false",
+          "aria-hidden": hiddenOnScroll || void 0,
+          inert: hiddenOnScroll || void 0,
+          children: /* @__PURE__ */ jsx4("aside", { className: classes, "aria-label": "\uD648\uD398\uC774\uC9C0 \uC548\uB0B4", children: body })
+        }
+      )
+    }
+  );
+}
+function RootTaleExposureCarouselPreview({ campaigns, placement = "popup", device = "desktop", slideDurationMs = 5e3 }) {
+  const carousel = useExposureCarousel(campaigns, true, slideDurationMs, true);
+  const campaign = carousel.campaign;
+  const slideRef = useSlideScrollReset(campaign?.id);
+  if (!campaign) return null;
+  return /* @__PURE__ */ jsx4("div", { className: `rt-exposure rt-exposure--${campaign.kind} rt-exposure--preview`, "data-placement": placement, "data-device": device, "data-size": exposureGroupSize(campaigns), children: /* @__PURE__ */ jsxs3("div", { className: "rt-exposure-carousel", ...carousel.interactions, children: [
+    /* @__PURE__ */ jsx4("div", { ref: slideRef, className: "rt-exposure-slide", children: /* @__PURE__ */ jsx4(ExposureContent, { campaign, device }, campaign.id) }),
+    /* @__PURE__ */ jsx4(ExposureCarouselControls, { carousel, campaigns })
+  ] }) });
+}
+
+// src/exposures.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Context = createContext(null);
+var emptyPrefixes = [];
+function RootTaleExposureProvider({
+  endpoint,
+  pathname,
+  slots,
+  breakpoint = 768,
+  homePaths,
+  slideDurationMs = 5e3,
+  hideMobileBannersOnScroll = true,
+  legacyDismissalKeyPrefixes = emptyPrefixes,
+  children
+}) {
+  const [themeElement, setThemeElement] = useState6(null);
+  const [device, setDevice] = useState6("desktop");
+  const [heights, setHeights] = useState6({});
+  useEffect6(() => {
+    const media = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setDevice(media.matches ? "mobile" : "desktop");
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, [breakpoint]);
+  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(() => {
+    popupVisit.current = { key: routeKey };
+  }, [routeKey]);
+  const now = useCallback2(() => snapshot ? exposureServerNow(snapshot) : Date.now(), [snapshot]);
+  const claimPopup = useCallback2((slot) => {
+    const claimed = popupVisit.current.slot;
+    if (claimed && claimed !== slot) return false;
+    popupVisit.current.slot = slot;
+    return true;
+  }, []);
+  const setHeight = useCallback2((key, placement, height) => {
+    setHeights((previous) => previous[key]?.height === height && previous[key]?.placement === placement ? previous : { ...previous, [key]: { placement, height } });
+  }, []);
+  const value = {
+    campaigns: liveCampaigns(snapshot),
+    device,
+    routeKey,
+    home,
+    slideDurationMs: Number.isFinite(slideDurationMs) ? slideDurationMs : 5e3,
+    hideMobileBannersOnScroll,
+    now,
+    claimPopup,
+    setHeight,
+    legacyPrefixes: legacyDismissalKeyPrefixes,
+    themeElement
+  };
+  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));
+  const style = { display: "contents", "--rt-exposure-top-height": `${top}px`, "--rt-exposure-bottom-height": `${bottom}px` };
+  return /* @__PURE__ */ jsx5(Context.Provider, { value, children: /* @__PURE__ */ jsx5("div", { ref: setThemeElement, "data-roottale-exposure-root": "", style, children }) });
+}
+function RootTaleExposureSlot({ slotKey, placement, allowedVariants, fallback = null, className = "" }) {
+  const runtime = useContext(Context);
+  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}`);
+}
+function RootTaleLegacyExposure({ campaign, allowedVariants }) {
+  const [device, setDevice] = useState6("desktop");
+  useEffect6(() => {
+    const media = window.matchMedia("(max-width: 767px)");
+    const update = () => setDevice(media.matches ? "mobile" : "desktop");
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  if (!allowedVariants.includes(campaign.content.variant)) return null;
+  const runtime = {
+    campaigns: [campaign],
+    device,
+    routeKey: "legacy",
+    home: true,
+    slideDurationMs: 5e3,
+    hideMobileBannersOnScroll: true,
+    now: Date.now,
+    claimPopup: () => true,
+    setHeight: () => void 0,
+    legacyPrefixes: emptyPrefixes,
+    themeElement: null
+  };
+  return /* @__PURE__ */ jsx5(ExposureCampaignGroup, { campaigns: [campaign], runtime, placement: campaign.kind === "popup" ? "popup" : "inline", className: "" }, campaign.id);
+}
+
+export {
+  RootTaleExposurePreview,
+  RootTaleExposureCarouselPreview,
+  RootTaleExposureProvider,
+  RootTaleExposureSlot,
+  RootTaleLegacyExposure
+};
+//# sourceMappingURL=chunk-SEPUIKVM.js.map