@astral/ui 4.82.0 → 4.84.0

package/node/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepTransition = void 0;
+const react_1 = require("react");
+const IDLE_PHASE = {
+    isPopoverHidden: false,
+    isHoleMoving: false,
+};
+const HIDDEN_PHASE = {
+    isPopoverHidden: true,
+    isHoleMoving: true,
+};
+/**
+ * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ */
+const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = true }) => {
+    const [phase, setPhase] = (0, react_1.useState)(IDLE_PHASE);
+    const prevKey = (0, react_1.useRef)(stepKey);
+    const prevHadHole = (0, react_1.useRef)(hasHole);
+    // Триггер для эффекта: `prevKey` мутируется во время render, поэтому в эффекте не сравнить.
+    const [transitionId, setTransitionId] = (0, react_1.useState)(0);
+    // Скрываем popover синхронно во время render, иначе виден «прыжок» позиции.
+    if (prevKey.current !== stepKey) {
+        // Прячем popover только для переезда hole (highlight → highlight).
+        const isHoleTravel = prevHadHole.current && hasHole;
+        prevKey.current = stepKey;
+        prevHadHole.current = hasHole;
+        if (isHoleTravel) {
+            setPhase(HIDDEN_PHASE);
+            setTransitionId((id) => id + 1);
+        }
+        else {
+            setPhase(IDLE_PHASE);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        // Первый render (mount) — переход не запускаем.
+        if (transitionId === 0) {
+            return;
+        }
+        const popoverTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isPopoverHidden: false })), popoverHiddenMs);
+        const holeTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isHoleMoving: false })), holeMovingMs);
+        return () => {
+            clearTimeout(popoverTimer);
+            clearTimeout(holeTimer);
+        };
+    }, [transitionId, popoverHiddenMs, holeMovingMs]);
+    return phase;
+};
+exports.useStepTransition = useStepTransition;

package/node/components/Onboarding/ui/hooks/useTargetAnchor/index.d.ts

@@ -0,0 +1 @@
+export * from './useTargetAnchor';

package/node/components/Onboarding/ui/hooks/useTargetAnchor/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTargetAnchor"), exports);

package/node/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.d.ts

@@ -0,0 +1,37 @@
+import { type Rect } from '../../../utils/geometry';
+type UseTargetAnchorOptions = {
+    /**
+     * Обратный вызов при ошибке (элемент не найден за timeout).
+     */
+    onError: (error: Error) => void;
+    /**
+     * Отслеживать ли элемент.
+     * @default true
+     */
+    shouldTrack?: boolean;
+    /**
+     * Прокрутить к элементу при его появлении.
+     * @default false
+     */
+    scrollOnEnter?: boolean;
+    /**
+     * Тайм-аут ожидания появления элемента (мс).
+     * @default DEFAULT_WAIT_ELEMENT_TIMEOUT_MS
+     */
+    timeout?: number;
+};
+type UseTargetAnchorResult = {
+    /**
+     * Найденный элемент.
+     */
+    element: HTMLElement | null;
+    /**
+     * Область элемента (синхронизируется при scroll/resize).
+     */
+    rect: Rect | null;
+};
+/**
+ * Находит элемент по `data-tour-id` и синхронизирует его область.
+ */
+export declare const useTargetAnchor: (targetName: string, { onError, shouldTrack, scrollOnEnter, timeout, }: UseTargetAnchorOptions) => UseTargetAnchorResult;
+export {};

package/node/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTargetAnchor = void 0;
+const react_1 = require("react");
+const getTargetElement_1 = require("../../../utils/getTargetElement");
+const observeRemoval_1 = require("../../../utils/observeRemoval");
+const scrollIntoView_1 = require("../../../utils/scrollIntoView");
+const waitForElement_1 = require("../../../utils/waitForElement");
+const useTrackedRect_1 = require("../useTrackedRect");
+/**
+ * Находит элемент по `data-tour-id` и синхронизирует его область.
+ */
+const useTargetAnchor = (targetName, { onError, shouldTrack = true, scrollOnEnter = false, timeout, }) => {
+    const [element, setElement] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!shouldTrack) {
+            // Очищаем элемент, чтобы useTrackedRect не отслеживал его.
+            setElement(null);
+            return;
+        }
+        let isCancelled = false;
+        let stopRemovalWatch;
+        const track = () => {
+            // Устанавливаем найденный элемент сразу, без задержки.
+            setElement((0, getTargetElement_1.getTargetElement)(targetName));
+            (0, waitForElement_1.waitForElement)(targetName, { timeout })
+                .then(async (target) => {
+                if (isCancelled) {
+                    return;
+                }
+                if (scrollOnEnter) {
+                    await (0, scrollIntoView_1.scrollIntoView)(target);
+                }
+                if (isCancelled) {
+                    return;
+                }
+                setElement(target);
+                stopRemovalWatch = (0, observeRemoval_1.observeRemoval)(target, () => {
+                    if (!isCancelled) {
+                        setElement(null);
+                        track();
+                    }
+                });
+            })
+                .catch((error) => {
+                if (!isCancelled) {
+                    onError(error);
+                }
+            });
+        };
+        track();
+        return () => {
+            isCancelled = true;
+            stopRemovalWatch?.();
+        };
+    }, [targetName, onError, shouldTrack, scrollOnEnter, timeout]);
+    const rect = (0, useTrackedRect_1.useTrackedRect)(element);
+    return { element, rect };
+};
+exports.useTargetAnchor = useTargetAnchor;

package/node/components/Onboarding/ui/hooks/useTrackedRect/index.d.ts

@@ -0,0 +1 @@
+export { useTrackedRect } from './useTrackedRect';

package/node/components/Onboarding/ui/hooks/useTrackedRect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackedRect = void 0;
+var useTrackedRect_1 = require("./useTrackedRect");
+Object.defineProperty(exports, "useTrackedRect", { enumerable: true, get: function () { return useTrackedRect_1.useTrackedRect; } });

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.d.ts

@@ -0,0 +1,5 @@
+import { type Rect } from '../../../utils/geometry';
+/**
+ * Отслеживает область элемента для hole overlay и якоря popover.
+ */
+export declare const useTrackedRect: (element: HTMLElement | null) => Rect | null;

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackedRect = void 0;
+const react_1 = require("react");
+const geometry_1 = require("../../../utils/geometry");
+const getScrollParents_1 = require("../../../utils/getScrollParents");
+/**
+ * Отслеживает область элемента для hole overlay и якоря popover.
+ */
+const useTrackedRect = (element) => {
+    const [rect, setRect] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!element) {
+            setRect(null);
+            return;
+        }
+        // ID текущей рAF-очереди обновления.
+        let frame = 0;
+        const scrollParents = (0, getScrollParents_1.getScrollParents)(element);
+        const update = () => {
+            const elementRect = (0, geometry_1.rectFromDomRect)(element.getBoundingClientRect());
+            const viewport = (0, geometry_1.getViewport)();
+            const next = (0, geometry_1.clampToScrollParents)(elementRect, scrollParents.map((parent) => (0, geometry_1.rectFromDomRect)(parent.getBoundingClientRect())), viewport);
+            setRect((prev) => ((0, geometry_1.isSameRect)(prev, next) ? prev : next));
+        };
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(update);
+        };
+        update();
+        const scrollOptions = { passive: true };
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
+        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
+        window.addEventListener('resize', scheduleUpdate);
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        resizeObserver.observe(element);
+        return () => {
+            cancelAnimationFrame(frame);
+            resizeObserver.disconnect();
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
+            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [element]);
+    return rect;
+};
+exports.useTrackedRect = useTrackedRect;

package/node/components/Onboarding/ui/hooks/useViewportSize/index.d.ts

@@ -0,0 +1 @@
+export { useViewportSize } from './useViewportSize';

package/node/components/Onboarding/ui/hooks/useViewportSize/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewportSize = void 0;
+var useViewportSize_1 = require("./useViewportSize");
+Object.defineProperty(exports, "useViewportSize", { enumerable: true, get: function () { return useViewportSize_1.useViewportSize; } });

package/node/components/Onboarding/ui/hooks/useViewportSize/useViewportSize.d.ts

@@ -0,0 +1,5 @@
+import { type Viewport } from '../../../utils/geometry';
+/**
+ * Синхронизирует размеры viewport без полос прокрутки окна.
+ */
+export declare const useViewportSize: () => Viewport;

package/node/components/Onboarding/ui/hooks/useViewportSize/useViewportSize.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewportSize = void 0;
+const react_1 = require("react");
+const geometry_1 = require("../../../utils/geometry");
+/**
+ * Синхронизирует размеры viewport без полос прокрутки окна.
+ */
+const useViewportSize = () => {
+    const [viewport, setViewport] = (0, react_1.useState)(geometry_1.getViewport);
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => setViewport((0, geometry_1.getViewport)());
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return viewport;
+};
+exports.useViewportSize = useViewportSize;

package/node/components/Onboarding/ui/styles.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../../theme/types';
+/**
+ * Каркас модальных поверхностей: прозрачный backdrop, приподнятый z-index.
+ */
+export declare const onboardingModalSurface: (theme: Theme) => import("@emotion/utils").SerializedStyles;

package/node/components/Onboarding/ui/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onboardingModalSurface = void 0;
+const Backdrop_1 = require("@mui/material/Backdrop");
+const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
+/**
+ * Каркас модальных поверхностей: прозрачный backdrop, приподнятый z-index.
+ */
+const onboardingModalSurface = (theme) => (0, styled_1.css) `
+  && {
+    z-index: ${theme.zIndex.tooltip + constants_1.ONBOARDING_Z_INDEX_OFFSET.base};
+  }
+
+  && .${Backdrop_1.backdropClasses.root} {
+    background-color: transparent;
+  }
+`;
+exports.onboardingModalSurface = onboardingModalSurface;

package/node/components/Onboarding/utils/createVirtualAnchor/createVirtualAnchor.d.ts

@@ -0,0 +1,12 @@
+import { type Rect } from '../geometry';
+/**
+ * Виртуальный anchor для NewPopover — объект с `getBoundingClientRect`,
+ * который MUI Popper внутри NewPopover принимает вместо реального узла.
+ */
+export type VirtualAnchor = {
+    getBoundingClientRect: () => DOMRect;
+};
+/**
+ * Превращает область hole в anchor для позиционирования popover.
+ */
+export declare const createVirtualAnchor: (hole: Rect) => VirtualAnchor;

package/node/components/Onboarding/utils/createVirtualAnchor/createVirtualAnchor.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVirtualAnchor = void 0;
+/**
+ * Превращает область hole в anchor для позиционирования popover.
+ */
+const createVirtualAnchor = (hole) => ({
+    getBoundingClientRect: () => new DOMRect(hole.x, hole.y, hole.width, hole.height),
+});
+exports.createVirtualAnchor = createVirtualAnchor;

package/node/components/Onboarding/utils/createVirtualAnchor/index.d.ts

@@ -0,0 +1 @@
+export * from './createVirtualAnchor';

package/node/components/Onboarding/utils/createVirtualAnchor/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./createVirtualAnchor"), exports);

package/node/components/Onboarding/utils/geometry/index.d.ts

@@ -0,0 +1,4 @@
+export * from './overlayPath';
+export * from './parseOffset';
+export * from './rect';
+export * from './viewport';

package/node/components/Onboarding/utils/geometry/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./overlayPath"), exports);
+__exportStar(require("./parseOffset"), exports);
+__exportStar(require("./rect"), exports);
+__exportStar(require("./viewport"), exports);

package/node/components/Onboarding/utils/geometry/overlayPath/index.d.ts

@@ -0,0 +1 @@
+export { buildOverlayPath } from './overlayPath';

package/node/components/Onboarding/utils/geometry/overlayPath/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildOverlayPath = void 0;
+var overlayPath_1 = require("./overlayPath");
+Object.defineProperty(exports, "buildOverlayPath", { enumerable: true, get: function () { return overlayPath_1.buildOverlayPath; } });

package/node/components/Onboarding/utils/geometry/overlayPath/overlayPath.d.ts

@@ -0,0 +1,6 @@
+import { type Rect } from '../rect';
+import { type Viewport } from '../viewport';
+/**
+ * SVG-путь overlay: viewport + hole-отверстие.
+ */
+export declare const buildOverlayPath: (viewport: Viewport, hole: Rect | null, radius: number) => string;

package/node/components/Onboarding/utils/geometry/overlayPath/overlayPath.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildOverlayPath = void 0;
+/**
+ * SVG-путь скруглённой области (по часовой стрелке).
+ */
+const roundedRectPath = (rect, radius) => {
+    const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+    const { x, y, width, height } = rect;
+    return [
+        `M${x + r},${y}`,
+        `H${x + width - r}`,
+        `A${r},${r} 0 0 1 ${x + width},${y + r}`,
+        `V${y + height - r}`,
+        `A${r},${r} 0 0 1 ${x + width - r},${y + height}`,
+        `H${x + r}`,
+        `A${r},${r} 0 0 1 ${x},${y + height - r}`,
+        `V${y + r}`,
+        `A${r},${r} 0 0 1 ${x + r},${y}`,
+        'Z',
+    ].join(' ');
+};
+/**
+ * SVG-путь overlay: viewport + hole-отверстие.
+ */
+const buildOverlayPath = (viewport, hole, radius) => {
+    const outer = `M0,0 H${viewport.width} V${viewport.height} H0 Z`;
+    if (!hole) {
+        return outer;
+    }
+    return `${outer} ${roundedRectPath(hole, radius)}`;
+};
+exports.buildOverlayPath = buildOverlayPath;

package/node/components/Onboarding/utils/geometry/parseOffset/index.d.ts

@@ -0,0 +1 @@
+export { parseOffset } from './parseOffset';

package/node/components/Onboarding/utils/geometry/parseOffset/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseOffset = void 0;
+var parseOffset_1 = require("./parseOffset");
+Object.defineProperty(exports, "parseOffset", { enumerable: true, get: function () { return parseOffset_1.parseOffset; } });

package/node/components/Onboarding/utils/geometry/parseOffset/parseOffset.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Парсит `highlightOffset` вида `'4px'` в число.
+ */
+export declare const parseOffset: (offset?: `${number}px`) => number;

package/node/components/Onboarding/utils/geometry/parseOffset/parseOffset.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseOffset = void 0;
+const constants_1 = require("../../../constants");
+/**
+ * Парсит `highlightOffset` вида `'4px'` в число.
+ */
+const parseOffset = (offset) => offset ? Number.parseFloat(offset) : constants_1.DEFAULT_HIGHLIGHT_PADDING;
+exports.parseOffset = parseOffset;

package/node/components/Onboarding/utils/geometry/rect/index.d.ts

@@ -0,0 +1,2 @@
+export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';
+export type { Rect } from './rect';

package/node/components/Onboarding/utils/geometry/rect/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rectFromDomRect = exports.isSameRect = exports.inflateRect = exports.clampToViewport = exports.clampToScrollParents = void 0;
+var rect_1 = require("./rect");
+Object.defineProperty(exports, "clampToScrollParents", { enumerable: true, get: function () { return rect_1.clampToScrollParents; } });
+Object.defineProperty(exports, "clampToViewport", { enumerable: true, get: function () { return rect_1.clampToViewport; } });
+Object.defineProperty(exports, "inflateRect", { enumerable: true, get: function () { return rect_1.inflateRect; } });
+Object.defineProperty(exports, "isSameRect", { enumerable: true, get: function () { return rect_1.isSameRect; } });
+Object.defineProperty(exports, "rectFromDomRect", { enumerable: true, get: function () { return rect_1.rectFromDomRect; } });

package/node/components/Onboarding/utils/geometry/rect/rect.d.ts

@@ -0,0 +1,34 @@
+import { type Viewport } from '../viewport';
+/**
+ * Область hole/элемента в координатах viewport.
+ */
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Приводит нативный `DOMRect` к нашему `Rect` (только позиция и размеры).
+ */
+export declare const rectFromDomRect: (domRect: DOMRect) => Rect;
+/**
+ * Равны ли области покомпонентно.
+ */
+export declare const isSameRect: (a: Rect | null, b: Rect) => boolean;
+/**
+ * Расширяет область на padding во все стороны.
+ */
+export declare const inflateRect: (rect: Rect, padding: number) => Rect;
+/**
+ * Обрезает область hole по границам viewport.
+ */
+export declare const clampToViewport: (rect: Rect, viewport: Viewport) => Rect;
+export declare const isViewportSizedRect: (rect: Rect, viewport: Viewport) => boolean;
+/**
+ * Обрезает область элемента видимой областью каждого scroll-предка.
+ * Если элемент лежит во вложенном scroll-контейнере и частично уехал за его
+ * границу — и hole overlay, и якорь popover считаются уже по видимой
+ * части, а не по полной области элемента.
+ */
+export declare const clampToScrollParents: (rect: Rect, scrollParents: readonly Rect[], viewport: Viewport) => Rect;

package/node/components/Onboarding/utils/geometry/rect/rect.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampToScrollParents = exports.isViewportSizedRect = exports.clampToViewport = exports.inflateRect = exports.isSameRect = exports.rectFromDomRect = void 0;
+/**
+ * Приводит нативный `DOMRect` к нашему `Rect` (только позиция и размеры).
+ */
+const rectFromDomRect = (domRect) => ({
+    x: domRect.left,
+    y: domRect.top,
+    width: domRect.width,
+    height: domRect.height,
+});
+exports.rectFromDomRect = rectFromDomRect;
+/**
+ * Равны ли области покомпонентно.
+ */
+const isSameRect = (a, b) => a !== null &&
+    a.x === b.x &&
+    a.y === b.y &&
+    a.width === b.width &&
+    a.height === b.height;
+exports.isSameRect = isSameRect;
+/**
+ * Расширяет область на padding во все стороны.
+ */
+const inflateRect = (rect, padding) => ({
+    x: rect.x - padding,
+    y: rect.y - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2,
+});
+exports.inflateRect = inflateRect;
+/**
+ * Пересечение двух областей. Не пересекаются — ширина/высота 0.
+ */
+const intersectRect = (a, b) => {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    return {
+        x,
+        y,
+        width: Math.max(0, right - x),
+        height: Math.max(0, bottom - y),
+    };
+};
+/**
+ * Обрезает область hole по границам viewport.
+ */
+const clampToViewport = (rect, viewport) => intersectRect(rect, {
+    x: 0,
+    y: 0,
+    width: viewport.width,
+    height: viewport.height,
+});
+exports.clampToViewport = clampToViewport;
+const isViewportSizedRect = (rect, viewport) => rect.width >= viewport.width - 1 && rect.height >= viewport.height - 1;
+exports.isViewportSizedRect = isViewportSizedRect;
+/**
+ * Обрезает область элемента видимой областью каждого scroll-предка.
+ * Если элемент лежит во вложенном scroll-контейнере и частично уехал за его
+ * границу — и hole overlay, и якорь popover считаются уже по видимой
+ * части, а не по полной области элемента.
+ */
+const clampToScrollParents = (rect, scrollParents, viewport) => scrollParents
+    .filter((parent) => !(0, exports.isViewportSizedRect)(parent, viewport))
+    .reduce(intersectRect, rect);
+exports.clampToScrollParents = clampToScrollParents;

package/node/components/Onboarding/utils/geometry/viewport/index.d.ts

@@ -0,0 +1,2 @@
+export { getViewport } from './viewport';
+export type { Viewport } from './viewport';

package/node/components/Onboarding/utils/geometry/viewport/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getViewport = void 0;
+var viewport_1 = require("./viewport");
+Object.defineProperty(exports, "getViewport", { enumerable: true, get: function () { return viewport_1.getViewport; } });

package/node/components/Onboarding/utils/geometry/viewport/viewport.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Размеры viewport.
+ */
+export type Viewport = {
+    width: number;
+    height: number;
+};
+/**
+ * Текущие размеры viewport.
+ *
+ * Именно `documentElement.clientWidth/Height`, а не `window.innerWidth/Height`:
+ * inner-размеры включают полосы прокрутки окна.
+ */
+export declare const getViewport: () => Viewport;

package/node/components/Onboarding/utils/geometry/viewport/viewport.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getViewport = void 0;
+/**
+ * Текущие размеры viewport.
+ *
+ * Именно `documentElement.clientWidth/Height`, а не `window.innerWidth/Height`:
+ * inner-размеры включают полосы прокрутки окна.
+ */
+const getViewport = () => ({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+});
+exports.getViewport = getViewport;

package/node/components/Onboarding/utils/getScrollParents/getScrollParents.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Возвращает цепочку scroll-предков элемента (от ближайшего к корню).
+ *
+ * Нужна, чтобы прокручивать вложенные контейнеры и слушать их `scroll`
+ * для синхронизации hole overlay.
+ */
+export declare const getScrollParents: (element: Element | null) => HTMLElement[];