@robertlinde/react-tour-kit 0.8.8 → 1.0.0

package/dist/react-platform/layer/styles.js

@@ -0,0 +1,285 @@
+/**
+ * Styles of the web tour layer. Everything is scoped to `rtk-` classes. Theme values arrive as
+ * CSS variables set on `.rtk-root`. All rules live in a cascade layer, so the app's own CSS wins
+ * over them without `!important` — except for the few properties marked `!important` here: what
+ * keeps the tour in place, clickable and readable, which global resets (Tailwind's preflight,
+ * normalize.css, Bootstrap, `dialog {…}` or `button {…}` rules) would otherwise change. Those
+ * still follow the CSS variables.
+ */
+export const tourCss = `
+@layer react-tour-kit {
+:where(.rtk-root) {
+  --rtk-primary: #2563eb;
+  --rtk-on-primary: #ffffff;
+  --rtk-bg: #ffffff;
+  --rtk-title: #111827;
+  --rtk-text: #4b5563;
+  --rtk-overlay: rgba(0, 0, 0, 0.5);
+  --rtk-radius: 12px;
+  --rtk-spotlight-radius: 8px;
+  --rtk-ease: cubic-bezier(0.2, 0, 0, 1);
+  --rtk-z-index: 2147483000;
+}
+
+.rtk-root {
+  position: fixed !important;
+  inset: 0 !important;
+  box-sizing: border-box !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: var(--rtk-text);
+  overflow: visible !important;
+  outline: none;
+  transform: none !important;
+  filter: none !important;
+  /* The page may have disabled pointer events on <body> (modal libraries do while open). */
+  pointer-events: auto !important;
+  z-index: var(--rtk-z-index) !important;
+  opacity: 0 !important;
+  transition: opacity var(--rtk-fade-duration, 200ms) var(--rtk-ease);
+}
+.rtk-root::backdrop { background: transparent !important; backdrop-filter: none !important; }
+.rtk-root[data-visible] { opacity: 1 !important; }
+
+.rtk-backdrop { position: fixed !important; inset: 0 !important; touch-action: pinch-zoom; }
+.rtk-backdrop[data-closable] { cursor: pointer; }
+
+.rtk-spotlight {
+  /* Its geometry is set inline, which an \`!important\` rule here would override. */
+  position: fixed !important;
+  right: auto;
+  bottom: auto;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  border: 0 !important;
+  pointer-events: none !important;
+  border-radius: var(--rtk-spotlight-radius);
+  box-shadow: 0 0 0 2px var(--rtk-primary), 0 0 0 200vmax var(--rtk-overlay);
+  box-shadow: 0 0 0 2px var(--rtk-primary), 0 0 0 6px color-mix(in srgb, var(--rtk-primary) 30%, transparent), 0 0 0 200vmax var(--rtk-overlay);
+}
+.rtk-spotlight[data-collapsed] { box-shadow: 0 0 0 200vmax var(--rtk-overlay); }
+
+.rtk-tooltip {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  box-sizing: border-box;
+  display: flow-root;
+  outline: none;
+  overflow: visible;
+  transform-origin: var(--rtk-origin, center);
+}
+.rtk-tooltip[data-overflowing] { overflow: auto; overscroll-behavior: contain; }
+.rtk-tooltip[data-hidden] { visibility: hidden; }
+.rtk-tooltip[data-entering] {
+  animation: rtk-enter var(--rtk-enter-duration, 200ms) var(--rtk-ease) var(--rtk-enter-delay, 0ms) both;
+}
+.rtk-measure {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  box-sizing: border-box;
+  display: flow-root;
+}
+
+.rtk-card {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  max-width: 100%;
+  max-height: var(--rtk-max-height, none);
+  border-radius: var(--rtk-radius);
+  background: var(--rtk-bg);
+  color: var(--rtk-text);
+  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.35), 0 4px 12px -6px rgba(15, 23, 42, 0.2);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: start;
+}
+.rtk-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--rtk-bg);
+  transform: rotate(45deg);
+}
+.rtk-arrow[data-side="bottom"] { top: -5px; left: calc(var(--rtk-arrow-offset) - 5px); }
+.rtk-arrow[data-side="top"] { bottom: -5px; left: calc(var(--rtk-arrow-offset) - 5px); }
+.rtk-arrow[data-side="right"] { left: -5px; top: calc(var(--rtk-arrow-offset) - 5px); }
+.rtk-arrow[data-side="left"] { right: -5px; top: calc(var(--rtk-arrow-offset) - 5px); }
+
+.rtk-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 8px 0 16px;
+}
+.rtk-counter {
+  border-radius: 999px;
+  padding: 2px 10px;
+  background: var(--rtk-primary);
+  color: var(--rtk-on-primary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.6;
+  font-variant-numeric: tabular-nums;
+}
+.rtk-close {
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box !important;
+  width: 32px !important;
+  height: 32px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 8px;
+  background: transparent !important;
+  color: var(--rtk-text) !important;
+  cursor: pointer;
+}
+.rtk-close::before, .rtk-button--prev::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity 120ms;
+}
+.rtk-close:hover::before { opacity: 0.1; }
+.rtk-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 8px 16px 16px;
+}
+.rtk-title { margin: 0 0 4px; color: var(--rtk-title); font-size: 17px; font-weight: 600; line-height: 1.35; }
+.rtk-content { margin: 0; overflow-wrap: anywhere; }
+.rtk-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px 16px;
+}
+.rtk-button {
+  position: relative;
+  box-sizing: border-box !important;
+  min-height: 36px !important;
+  margin: 0 !important;
+  padding: 8px 14px !important;
+  border: 0 !important;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  line-height: 1.4 !important;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.rtk-button--prev { background: transparent !important; color: var(--rtk-text) !important; }
+.rtk-button--prev::before { opacity: 0.08; }
+.rtk-button--prev:hover:not(:disabled)::before { opacity: 0.14; }
+.rtk-button--next { background: var(--rtk-primary) !important; color: var(--rtk-on-primary) !important; }
+.rtk-button--next:hover { filter: brightness(1.08); }
+.rtk-button:disabled { cursor: default; opacity: 0.4; }
+.rtk-dots { display: flex; align-items: center; justify-content: center; min-width: 0; }
+.rtk-dot, .rtk-ellipsis {
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box !important;
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: var(--rtk-text) !important;
+}
+.rtk-dot { cursor: pointer; border-radius: 50%; }
+.rtk-dot::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  transition: opacity 150ms, transform 150ms;
+}
+.rtk-dot[aria-current="step"] { color: var(--rtk-primary) !important; }
+.rtk-dot[aria-current="step"]::before { opacity: 1; transform: scale(1.15); }
+.rtk-ellipsis::before { content: '…'; opacity: 0.5; font-size: 12px; letter-spacing: 1px; }
+.rtk-close:focus-visible, .rtk-button:focus-visible, .rtk-dot:focus-visible {
+  outline: 2px solid var(--rtk-primary);
+  outline-offset: 2px;
+}
+.rtk-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Position uses the individual \`translate\` property (applied first), the entrance uses \`transform\`,
+   so scaling happens around the tooltip's own centre and never moves its position. Durations,
+   offsets and reduced motion come from the shared motion settings, as variables. */
+@keyframes rtk-enter {
+  from {
+    opacity: 0;
+    transform: translate(var(--rtk-enter-x, 0), var(--rtk-enter-y, 0)) scale(var(--rtk-enter-scale, 1));
+  }
+}
+
+@media (forced-colors: active) {
+  .rtk-spotlight { outline: 3px solid Highlight; }
+  .rtk-card { border: 1px solid CanvasText; }
+  /* Without backgrounds, a border is what shows a button is one. */
+  .rtk-button { border: 1px solid ButtonText !important; }
+  .rtk-button:disabled { border-color: GrayText !important; }
+  .rtk-dot::before { background: CanvasText; }
+  .rtk-dot[aria-current="step"]::before { background: Highlight; }
+}
+}
+`;
+const injected = new WeakSet();
+/** Adds the stylesheet to a document once. Constructable stylesheets are not subject to CSP `style-src` restrictions. */
+export function injectTourStyles(document_) {
+    if (injected.has(document_)) {
+        return;
+    }
+    injected.add(document_);
+    try {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(tourCss);
+        document_.adoptedStyleSheets = [...document_.adoptedStyleSheets, sheet];
+    }
+    catch {
+        const style = document_.createElement('style');
+        style.dataset.rtk = '';
+        style.textContent = tourCss;
+        document_.head.append(style);
+    }
+}
+//# sourceMappingURL=styles.js.map

package/dist/react-platform/layer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/react-platform/layer/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgQtB,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAY,CAAC;AAEzC,yHAAyH;AACzH,MAAM,UAAU,gBAAgB,CAAC,SAAmB;IAClD,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACxB,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC3B,SAAS,CAAC,kBAAkB,GAAG,CAAC,GAAG,SAAS,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAC1E,CAAC;IAAC,MAAM,CAAC;QACP,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC/C,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG,EAAE,CAAC;QACvB,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;QAC5B,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;AACH,CAAC"}

package/dist/react-platform/layer/web-renderer.d.ts

@@ -0,0 +1,4 @@
+import type { TourRenderer } from '../../shared/renderer/renderer.type.js';
+/** How the web draws the tour. */
+export declare const webRenderer: TourRenderer;
+//# sourceMappingURL=web-renderer.d.ts.map

package/dist/react-platform/layer/web-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-renderer.d.ts","sourceRoot":"","sources":["../../../src/react-platform/layer/web-renderer.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAgBV,YAAY,EACb,MAAM,wCAAwC,CAAC;AAkjBhD,kCAAkC;AAClC,eAAO,MAAM,WAAW,EAAE,YAA6E,CAAC"}

package/dist/react-platform/layer/web-renderer.js

@@ -0,0 +1,390 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState, } from 'react';
+import { clamp } from '../../shared/geometry/box.util.js';
+import { useIsomorphicLayoutEffect } from '../../shared/react/use-isomorphic-layout-effect.hook.js';
+import { motion } from '../../shared/renderer/motion.js';
+import { handlesKey, pageDirection } from '../dom/elements.util.js';
+import { lockScroll } from '../dom/scroll-lock.util.js';
+import { injectTourStyles } from './styles.js';
+const [x1, y1, x2, y2] = motion.easing;
+const standardEasing = `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+// ---------------------------------------------------------------------------------------------
+// Layer: a modal <dialog> in the top layer
+// ---------------------------------------------------------------------------------------------
+/** Elements made inert by the fallback below, so they can be restored. */
+const inertedByTour = new WeakMap();
+/**
+ * Opens the dialog as a modal: top layer, rest of the page inert, focus restored on close.
+ * Without `showModal` (very old browsers, jsdom) the dialog is shown with a high z-index
+ * (`--rtk-z-index`) and the rest of the page is made inert manually.
+ */
+function openModal(dialog) {
+    if (dialog.open || dialog.hasAttribute('open')) {
+        return;
+    }
+    if (typeof dialog.showModal === 'function') {
+        try {
+            dialog.showModal();
+            return;
+        }
+        catch {
+            // Not connected or not allowed: fall through to the fallback.
+        }
+    }
+    dialog.setAttribute('open', '');
+    const others = [...document.body.children].filter((element) => element !== dialog && !element.contains(dialog) && !element.hasAttribute('inert'));
+    for (const element of others) {
+        element.setAttribute('inert', '');
+    }
+    inertedByTour.set(dialog, others);
+}
+function closeModal(dialog) {
+    if (typeof dialog.close === 'function' && dialog.open) {
+        dialog.close();
+    }
+    else {
+        dialog.removeAttribute('open');
+    }
+    for (const element of inertedByTour.get(dialog) ?? []) {
+        element.removeAttribute('inert');
+    }
+    inertedByTour.delete(dialog);
+}
+function safeMatches(element, selector) {
+    try {
+        return element.matches(selector);
+    }
+    catch {
+        return false;
+    }
+}
+/** The tooltip on screen, to put focus on. */
+function shownTooltip(dialog) {
+    return dialog.querySelector('[data-rtk-tooltip]:not([data-hidden])');
+}
+/**
+ * Returns focus to where it was when the tour opened. Browsers do this when a modal dialog closes,
+ * but forget where it was once the dialog has been re-opened over one of the app's own.
+ */
+function restoreFocus(trigger, dialog) {
+    if (!(trigger instanceof HTMLElement) || trigger === document.body || !trigger.isConnected) {
+        return;
+    }
+    const active = document.activeElement;
+    if (!active || active === document.body || dialog.contains(active)) {
+        trigger.focus({ preventScroll: true });
+    }
+}
+/**
+ * A modal `<dialog>` in the top layer: above any z-index, with the page inert, focus restored on
+ * close and the page kept from scrolling. Keys and the dialog's own close requests become intents.
+ */
+function Layer({ children, state, isVisible, fadeMs, isInteractive, theme, titleId, descriptionId, fallbackLabel, announcement, stepKey, onIntent, }) {
+    const layerRef = useRef(null);
+    const liveRef = useRef(null);
+    const reopening = useRef(false);
+    const [direction] = useState(pageDirection);
+    useInsertionEffect(() => {
+        injectTourStyles(document);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        const dialog = layerRef.current;
+        if (!dialog) {
+            return undefined;
+        }
+        const trigger = document.activeElement;
+        openModal(dialog);
+        const unlock = lockScroll(dialog);
+        return () => {
+            unlock();
+            reopening.current = true;
+            closeModal(dialog);
+            restoreFocus(trigger, dialog);
+        };
+    }, []);
+    // If the app opened its own modal (in onBeforeStep), move the tour back on top of it.
+    useEffect(() => {
+        const dialog = layerRef.current;
+        if (!dialog || stepKey === undefined) {
+            return;
+        }
+        const other = [...document.querySelectorAll('dialog')].find((element) => element !== dialog && element.open && safeMatches(element, ':modal'));
+        if (other && dialog.open && safeMatches(dialog, ':modal')) {
+            const focused = document.activeElement;
+            // `close` fires asynchronously; the handler consumes this flag.
+            reopening.current = true;
+            closeModal(dialog);
+            openModal(dialog);
+            // Opening focuses the first button: keep focus where it was in the tour.
+            const refocus = focused instanceof HTMLElement && dialog.contains(focused) ? focused : shownTooltip(dialog);
+            refocus?.focus({ preventScroll: true });
+        }
+    }, [stepKey]);
+    // A custom tooltip may not render an element with the title id: then label the dialog directly.
+    useEffect(() => {
+        const dialog = layerRef.current;
+        if (!dialog || titleId === undefined) {
+            return;
+        }
+        // `getElementById`: ids from useId() contain characters that would need escaping in selectors.
+        // eslint-disable-next-line unicorn/prefer-query-selector
+        if (document.getElementById(titleId)) {
+            dialog.removeAttribute('aria-label');
+        }
+        else {
+            dialog.setAttribute('aria-label', fallbackLabel);
+        }
+    }, [stepKey, titleId, fallbackLabel]);
+    useEffect(() => {
+        if (announcement && liveRef.current) {
+            liveRef.current.textContent = announcement;
+        }
+    }, [announcement, stepKey]);
+    const style = {
+        '--rtk-primary': theme.primaryColor,
+        '--rtk-on-primary': theme.primaryTextColor,
+        '--rtk-bg': theme.tooltipBackground,
+        '--rtk-title': theme.titleColor,
+        '--rtk-text': theme.contentColor,
+        '--rtk-overlay': theme.overlayColor,
+        '--rtk-fade-duration': `${fadeMs}ms`,
+    };
+    const onKeyDown = (event) => {
+        const { nativeEvent, key } = event;
+        if (!isInteractive ||
+            event.defaultPrevented ||
+            nativeEvent.isComposing ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey) {
+            return;
+        }
+        if (key === 'Escape') {
+            event.preventDefault();
+            onIntent('escape');
+            return;
+        }
+        if ((key === 'ArrowRight' || key === 'ArrowLeft') && !handlesKey(event.target, key)) {
+            event.preventDefault();
+            // In right-to-left pages, the arrow pointing to the start goes forward.
+            const isForward = (key === 'ArrowRight') !== (direction === 'rtl');
+            onIntent(isForward ? 'next' : 'previous');
+        }
+    };
+    return (_jsxs("dialog", { ref: layerRef, className: "rtk-root", "data-rtk-root": "", "data-state": state, "data-visible": isVisible ? '' : undefined, dir: direction === 'rtl' ? 'rtl' : undefined, "aria-labelledby": titleId, "aria-describedby": descriptionId, style: style, onKeyDown: onKeyDown, onCancel: (event) => {
+            // Escape (and the Android back gesture) fire `cancel`; the tour decides how to close.
+            event.preventDefault();
+            onIntent('escape');
+        }, onClose: () => {
+            if (reopening.current) {
+                reopening.current = false;
+                return;
+            }
+            // The browser closed the dialog by force (for example a second Escape press).
+            onIntent('escape');
+        }, children: [children, _jsx("div", { ref: liveRef, className: "rtk-sr-only", "aria-live": "polite", "aria-atomic": "true" })] }));
+}
+function Backdrop({ isDismissible, onPress }) {
+    return (_jsx("div", { className: "rtk-backdrop", "data-rtk-backdrop": "", "data-closable": isDismissible ? '' : undefined, onClick: (event) => {
+            onPress({ x: event.clientX, y: event.clientY });
+        } }));
+}
+const spotlightProperties = ['left', 'top', 'width', 'height', 'border-radius'];
+/** How far off screen a hole may be: past the ring around it. */
+const offScreenMargin = 16;
+/**
+ * Keeps a hole that is far off screen (a target still to be scrolled to) just past the screen's
+ * edge: the dim is the hole's shadow, which only reaches so far.
+ */
+function nearScreen(hole) {
+    const width = document.documentElement.clientWidth || globalThis.innerWidth;
+    const height = document.documentElement.clientHeight || globalThis.innerHeight;
+    return {
+        ...hole,
+        x: clamp(hole.x, -offScreenMargin - hole.width, width + offScreenMargin),
+        y: clamp(hole.y, -offScreenMargin - hole.height, height + offScreenMargin),
+    };
+}
+/** The dimmed overlay with a rounded hole, drawn with a single box-shadow. */
+function Spotlight({ hole: requested, transition }) {
+    const hole = requested ? nearScreen(requested) : undefined;
+    const style = hole
+        ? {
+            left: hole.x,
+            top: hole.y,
+            width: hole.width,
+            height: hole.height,
+            borderRadius: `min(var(--rtk-spotlight-radius), ${hole.width / 2}px, ${hole.height / 2}px)`,
+        }
+        : { left: '50%', top: '50%', width: 0, height: 0, borderRadius: 0 };
+    if (transition) {
+        const easing = transition.easing === 'linear' ? 'linear' : standardEasing;
+        style.transition = spotlightProperties
+            .map((property) => `${property} ${transition.durationMs}ms ${easing}`)
+            .join(', ');
+    }
+    return (_jsx("div", { "aria-hidden": "true", className: "rtk-spotlight", "data-rtk-spotlight": "", "data-collapsed": hole ? undefined : '', style: style }));
+}
+function isVerticalWritingMode(element) {
+    return getComputedStyle(element).writingMode.startsWith('vertical');
+}
+/**
+ * True when the tooltip's content is bigger than its frame (it reached the size limits), so the
+ * frame has to scroll. Decorations sticking out of the content (the arrow) do not count.
+ */
+function overflowsFrame(frame) {
+    const children = [...frame.children].filter((child) => child instanceof HTMLElement);
+    if (children.length === 0 || children.length < frame.children.length) {
+        return frame.scrollHeight > frame.clientHeight + 1 || frame.scrollWidth > frame.clientWidth + 1;
+    }
+    let left = 0;
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    for (const child of children) {
+        left = Math.min(left, child.offsetLeft);
+        top = Math.min(top, child.offsetTop);
+        right = Math.max(right, child.offsetLeft + child.offsetWidth);
+        bottom = Math.max(bottom, child.offsetTop + child.offsetHeight);
+    }
+    return left < -1 || top < -1 || right > frame.clientWidth + 1 || bottom > frame.clientHeight + 1;
+}
+/** Positions the tooltip (with `translate`, so the entrance's `transform` never moves it), reports its size and takes focus. */
+function TooltipFrame({ children, layout, entrance, isBusy, isHidden, onSize }) {
+    const ref = useRef(null);
+    const [isEntering, setIsEntering] = useState(true);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    // Report size changes (late-loading fonts or images, content changes); keep scrolling available
+    // when the content does not fit. Sizes come from ResizeObserver's border box: unlike
+    // getBoundingClientRect it ignores the entrance animation's scale. The content is observed too:
+    // it can keep growing once the frame has reached its size limits.
+    useIsomorphicLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return undefined;
+        }
+        const report = (box) => {
+            const isVertical = isVerticalWritingMode(element);
+            const width = box ? (isVertical ? box.blockSize : box.inlineSize) : element.offsetWidth;
+            const height = box ? (isVertical ? box.inlineSize : box.blockSize) : element.offsetHeight;
+            onSize({ width, height });
+        };
+        if (typeof ResizeObserver !== 'function') {
+            // No ResizeObserver (jsdom): report the size once.
+            report(undefined);
+            return undefined;
+        }
+        const observer = new ResizeObserver((entries) => {
+            setIsOverflowing(overflowsFrame(element));
+            const own = entries.find((entry) => entry.target === element);
+            if (own) {
+                report(own.borderBoxSize?.[0]);
+            }
+        });
+        observer.observe(element);
+        for (const child of element.children) {
+            observer.observe(child);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [onSize]);
+    // Move focus into the tooltip so screen readers read it and keyboard users can act on it.
+    useEffect(() => {
+        ref.current?.focus({ preventScroll: true });
+    }, []);
+    const style = {
+        translate: `${layout.x}px ${layout.y}px`,
+        maxWidth: layout.maxWidth,
+        maxHeight: layout.maxHeight,
+        '--rtk-max-height': `${layout.maxHeight}px`,
+        '--rtk-enter-x': `${entrance.dx}px`,
+        '--rtk-enter-y': `${entrance.dy}px`,
+        '--rtk-enter-scale': String(entrance.scale),
+        '--rtk-enter-duration': `${entrance.durationMs}ms`,
+        '--rtk-enter-delay': `${entrance.delayMs}ms`,
+    };
+    return (_jsx("div", { ref: ref, className: "rtk-tooltip", "data-rtk-tooltip": "", "data-placement": layout.placement, "data-entering": isEntering ? '' : undefined, "data-hidden": isHidden ? '' : undefined, "data-overflowing": isOverflowing ? '' : undefined, "aria-busy": isBusy ? 'true' : undefined, tabIndex: -1, style: style, onAnimationEnd: (event) => {
+            // Animations inside a custom tooltip bubble up here too.
+            if (event.target === event.currentTarget) {
+                setIsEntering(false);
+            }
+        }, children: children }));
+}
+function MeasureFrame({ children, maxWidth, maxHeight, onSize }) {
+    const ref = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const element = ref.current;
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            onSize({ width: rect.width, height: rect.height });
+        }
+    }, [onSize]);
+    const style = { maxWidth, maxHeight, '--rtk-max-height': `${maxHeight}px` };
+    return (_jsx("div", { ref: ref, "aria-hidden": "true", className: "rtk-measure", style: style, children: children }));
+}
+// ---------------------------------------------------------------------------------------------
+// Card parts
+// ---------------------------------------------------------------------------------------------
+function CloseIcon() {
+    return (_jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", focusable: "false", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
+}
+function Card({ placement, children }) {
+    return (_jsx("div", { className: "rtk-card", "data-placement": placement, children: children }));
+}
+function Arrow({ side, offset }) {
+    const style = { '--rtk-arrow-offset': `${offset}px` };
+    return _jsx("div", { "aria-hidden": "true", className: "rtk-arrow", "data-side": side, style: style });
+}
+function Header({ children }) {
+    return _jsx("div", { className: "rtk-header", children: children });
+}
+function Counter({ text }) {
+    return _jsx("span", { className: "rtk-counter", children: text });
+}
+function CloseButton({ label, onPress }) {
+    return (_jsx("button", { type: "button", className: "rtk-close", "aria-label": label, onClick: onPress, children: _jsx(CloseIcon, {}) }));
+}
+function Body({ children }) {
+    return _jsx("div", { className: "rtk-body", children: children });
+}
+/** A heading by role rather than an `<h2>`: global heading styles (resets, typography) do not reach it. */
+function Title({ id, children }) {
+    return (_jsx("div", { id: id, role: "heading", "aria-level": 2, className: "rtk-title", children: children }));
+}
+function Content({ id, children }) {
+    return (_jsx("div", { id: id, className: "rtk-content", children: children }));
+}
+function Footer({ children }) {
+    return _jsx("div", { className: "rtk-footer", children: children });
+}
+function Button({ kind, label, isDisabled, onPress }) {
+    return (_jsx("button", { type: "button", className: kind === 'next' ? 'rtk-button rtk-button--next' : 'rtk-button rtk-button--prev', disabled: isDisabled, onClick: onPress, children: label }));
+}
+function Dots({ label, children }) {
+    return (_jsx("div", { className: "rtk-dots", role: "group", "aria-label": label, children: children }));
+}
+function Dot({ label, isCurrent, onPress }) {
+    return (_jsx("button", { type: "button", className: "rtk-dot", "aria-label": label, "aria-current": isCurrent ? 'step' : undefined, onClick: onPress }));
+}
+function Ellipsis() {
+    return _jsx("span", { "aria-hidden": "true", className: "rtk-ellipsis" });
+}
+const card = {
+    Card,
+    Arrow,
+    Header,
+    Counter,
+    CloseButton,
+    Body,
+    Title,
+    Content,
+    Footer,
+    Button,
+    Dots,
+    Dot,
+    Ellipsis,
+};
+/** How the web draws the tour. */
+export const webRenderer = { Layer, Backdrop, Spotlight, TooltipFrame, MeasureFrame, card };
+//# sourceMappingURL=web-renderer.js.map