@astral/ui 4.81.0 → 4.83.0

package/node/components/Onboarding/types/tour.d.ts

@@ -0,0 +1,168 @@
+import { type ResolvedStep, type Step } from './step';
+/**
+ * Конфигурация тура.
+ */
+export type OnboardingTourConfig<TSteps extends readonly Step[]> = {
+    /**
+     * Имя тура.
+     */
+    name: string;
+    /**
+     * Шаги тура.
+     */
+    steps: TSteps;
+    /**
+     * Можно ли кликать по подсвечиваемым элементам во время тура.
+     * Значение задаётся для всех шагов тура.
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Показывать точки прогресса. Если видимых шагов больше 6 — точки не
+     * отображаются никогда, даже при `true`.
+     * @default true
+     */
+    isDotsVisible?: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     * @default true
+     */
+    isCounterVisible?: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit?: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации внизу шага.
+     */
+    buttons?: OnboardingButtons;
+    /**
+     * Общий тайм-аут ожидания элементов highlight-шагов в DOM (мс).
+     * Переопределяется на уровне шага через `step.waitForTimeout`.
+     *
+     * По умолчанию (`0`) элементы ищутся синхронно, без ожидания.
+     * @default 0
+     */
+    waitForTimeout?: number;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Обработчик закрытия тура, с причиной.
+     */
+    onClose?: (reason: OnboardingCloseReason) => void;
+};
+/**
+ * Причина, по которой тур ушёл с экрана.
+ * - `completed` — пройден до конца;
+ * - `dismissed` — пользователь прервал с подтверждением;
+ * - `closed` — программное закрытие или авто-закрытие из-за ошибки рендера шага.
+ */
+export type OnboardingCloseReason = 'completed' | 'dismissed' | 'closed';
+/**
+ * Настройка для диалога подтверждения выхода.
+ */
+export type ConfirmExitConfig = {
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+/**
+ * Вариант кнопки завершения на последнем шаге тура.
+ */
+export type OnboardingFinishButtonVariant = 'contained' | 'text';
+/**
+ * Настройки кнопок навигации внизу шага.
+ */
+export type OnboardingButtons = {
+    /**
+     * Текст кнопки «назад».
+     * @default 'Назад'
+     */
+    prevLabel?: string;
+    /**
+     * Текст кнопки «вперёд».
+     * @default 'Далее'
+     */
+    nextLabel?: string;
+    /**
+     * Текст кнопки завершения на последнем шаге.
+     * @default 'Закрыть'
+     */
+    finishLabel?: string;
+    /**
+     * Вариант кнопки завершения на последнем шаге.
+     * @default 'contained'
+     */
+    finishVariant?: OnboardingFinishButtonVariant;
+};
+/**
+ * Презентационная конфигурация тура — статична на весь тур (не зависит от
+ * активного шага), значения по умолчанию уже применены в `StepResolver`. Вынесена из
+ * пошагового состояния, чтобы не дублировать проброс одних и тех же полей
+ * на каждом шаге.
+ */
+export type TourPresentation = {
+    /**
+     * Показывать точки прогресса (скрываются если шагов > 6, даже при `true`).
+     */
+    isDotsVisible: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     */
+    isCounterVisible: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации
+     */
+    buttons: Required<OnboardingButtons>;
+};
+/**
+ * Состояние активного шага.
+ */
+export type ActiveStepState = TourPresentation & {
+    tourName: string;
+    step: ResolvedStep;
+    /**
+     * Позиция активного шага среди видимых шагов, с нуля.
+     */
+    position: number;
+    /**
+     * Число видимых шагов = число точек индикатора прогресса.
+     */
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    isInteractive: boolean;
+    /**
+     * Идёт ли сейчас запроса подтверждения выхода (показан ConfirmExit).
+     */
+    isConfirming: boolean;
+    onNext: () => void;
+    onPrev: () => void;
+    /**
+     * Переход к шагу по его позиции среди видимых шагов.
+     */
+    onSelectStep: (position: number) => void;
+    /**
+     * Единая точка выхода
+     */
+    requestClose: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при подтверждении выхода.
+     */
+    onConfirmExit: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при отмене выхода.
+     */
+    onCancelExit: () => void;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError: (error: Error) => void;
+};

package/node/components/Onboarding/types/tour.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,10 @@
+export type ConfirmExitProps = {
+    open: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+export declare const ConfirmExit: ({ open, onConfirm, onCancel, title, description, confirmText, cancelText, }: ConfirmExitProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmExit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const ConfirmExit = ({ open, onConfirm, onCancel, title = 'Выйти из обучения?', description = 'Вы сможете пройти его заново в любой момент', confirmText = 'Выйти', cancelText = 'Продолжить', }) => ((0, jsx_runtime_1.jsx)(styles_1.ConfirmExitDialog, { open: open, title: title, description: description, onClose: onCancel, actions: {
+        confirm: { text: confirmText, variant: 'text', onClick: onConfirm },
+        cancel: { text: cancelText, variant: 'contained' },
+    } }));
+exports.ConfirmExit = ConfirmExit;

package/node/components/Onboarding/ui/ConfirmExit/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmExit } from './ConfirmExit';
+export type { ConfirmExitProps } from './ConfirmExit';

package/node/components/Onboarding/ui/ConfirmExit/index.js

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

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const ConfirmExitDialog: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    title?: string | undefined;
+    description?: import("react").ReactNode;
+    onClose: () => void;
+    actions: {
+        confirm: Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        };
+        cancel?: (Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        }) | undefined;
+    };
+} & Pick<import("../../..").DialogProps, "className" | "aria-describedby" | "aria-labelledby" | "open" | "size" | "disablePortal" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "disableBackdropClick"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmExitDialog = void 0;
+const ConfirmDialog_1 = require("../../../ConfirmDialog");
+const constants_1 = require("../../../ConfirmDialog/constants");
+const styled_1 = require("../../../styled");
+const styles_1 = require("../styles");
+exports.ConfirmExitDialog = (0, styled_1.styled)(ConfirmDialog_1.ConfirmDialog) `
+  ${({ theme }) => (0, styles_1.onboardingModalSurface)(theme)};
+  
+  .${constants_1.confirmDialogClassnames.confirmButton} {
+    order: -1;
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { type Onboarding } from '../../Onboarding';
+export type OnboardingContainerProps = {
+    /**
+     * Экземпляр онбординга, созданный через `createOnboarding`. Контейнер
+     * показывает туры только этого экземпляра.
+     */
+    onboarding: Onboarding;
+};
+/**
+ * Контейнер онбординга.
+ */
+export declare const OnboardingContainer: ({ onboarding, }: OnboardingContainerProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ConfirmExit_1 = require("../ConfirmExit");
+const StepStrategy_1 = require("../StepStrategy");
+const OnboardingErrorBoundary_1 = require("./OnboardingErrorBoundary");
+const useLogic_1 = require("./useLogic");
+/**
+ * Контейнер онбординга.
+ */
+const OnboardingContainer = ({ onboarding, }) => {
+    const { activeStep, isClosing } = (0, useLogic_1.useLogic)(onboarding);
+    if (!activeStep) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(OnboardingErrorBoundary_1.OnboardingErrorBoundary, { onError: activeStep.onError, children: [(0, jsx_runtime_1.jsx)(StepStrategy_1.StepStrategy, { activeStep: activeStep, isClosing: isClosing }), (0, jsx_runtime_1.jsx)(ConfirmExit_1.ConfirmExit, { open: activeStep.isConfirming && !isClosing, onConfirm: activeStep.onConfirmExit, onCancel: activeStep.onCancelExit, ...activeStep.confirmExit })] }));
+};
+exports.OnboardingContainer = OnboardingContainer;

package/node/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, type ReactNode } from 'react';
+export type OnboardingErrorBoundaryProps = {
+    /**
+     * Вызывается при перехвате ошибки render активного шага.
+     */
+    onError: (error: Error) => void;
+    children: ReactNode;
+};
+type State = {
+    hasError: boolean;
+};
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+export declare class OnboardingErrorBoundary extends Component<OnboardingErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error): void;
+    render(): ReactNode;
+}
+export {};

package/node/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingErrorBoundary = void 0;
+const react_1 = require("react");
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+class OnboardingErrorBoundary extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}
+exports.OnboardingErrorBoundary = OnboardingErrorBoundary;

package/node/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+export type { OnboardingErrorBoundaryProps } from './OnboardingErrorBoundary';

package/node/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.js

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

package/node/components/Onboarding/ui/OnboardingContainer/index.d.ts

@@ -0,0 +1 @@
+export { OnboardingContainer, type OnboardingContainerProps, } from './OnboardingContainer';

package/node/components/Onboarding/ui/OnboardingContainer/index.js

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

package/node/components/Onboarding/ui/OnboardingContainer/useLogic/index.d.ts

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

package/node/components/Onboarding/ui/OnboardingContainer/useLogic/index.js

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

package/node/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.d.ts

@@ -0,0 +1,10 @@
+import { type Onboarding } from '../../../Onboarding';
+import { type ActiveStepState } from '../../../types';
+export type UseLogicResult = {
+    activeStep: ActiveStepState | null;
+    isClosing: boolean;
+};
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+export declare const useLogic: (onboarding: Onboarding) => UseLogicResult;

package/node/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const useTheme_1 = require("../../../../theme/hooks/useTheme");
+const useActiveStep_1 = require("../../hooks/useActiveStep");
+const useDelayedActiveStep_1 = require("../../hooks/useDelayedActiveStep");
+const useKeyboardNav_1 = require("../../hooks/useKeyboardNav");
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+const useLogic = (onboarding) => {
+    const theme = (0, useTheme_1.useTheme)();
+    const currentStep = (0, useActiveStep_1.useActiveStep)(onboarding.activeStepStore);
+    const { active: activeStep, isClosing } = (0, useDelayedActiveStep_1.useDelayedActiveStep)(currentStep, theme.transitions.duration.enteringScreen);
+    (0, useKeyboardNav_1.useKeyboardNav)(currentStep);
+    return { activeStep, isClosing };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { type Rect } from '../../utils/geometry';
+export type OverlayProps = {
+    /**
+     * Hole (null для сплошного затемнения).
+     */
+    hole: Rect | null;
+    /**
+     * Проходят ли клики сквозь overlay
+     */
+    isInteractive?: boolean;
+    /**
+     * Показан ли overlay.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Идёт переезд hole на новую цель.
+     */
+    isHoleMoving?: boolean;
+    /**
+     * Клик по overlay.
+     */
+    onClose: () => void;
+};
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export declare const Overlay: ({ hole, isInteractive, isVisible, isHoleMoving, onClose, }: OverlayProps) => import("react").ReactPortal;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const cva_1 = require("../../../utils/cva");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const rootCva = (0, cva_1.cva)(constants_2.overlayClassnames.root, {
+    variants: {
+        isHidden: {
+            true: constants_2.overlayClassnames.hidden,
+        },
+        isHoleMoving: {
+            true: constants_2.overlayClassnames.holeMoving,
+        },
+    },
+});
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+const Overlay = ({ hole, isInteractive, isVisible = true, isHoleMoving = false, onClose, }) => {
+    const { viewport, clampedHole, path } = (0, useLogic_1.useLogic)(hole);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(styles_1.OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible, isHoleMoving }), children: [(0, jsx_runtime_1.jsx)(styles_1.Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: constants_2.overlayClassnames.backdrop }), !isInteractive && clampedHole && ((0, jsx_runtime_1.jsx)(styles_1.HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: constants_1.DEFAULT_HIGHLIGHT_RADIUS, className: constants_2.overlayClassnames.holeBlocker }))] }), document.body);
+};
+exports.Overlay = Overlay;

package/node/components/Onboarding/ui/Overlay/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const overlayClassnames: {
+    root: string;
+    hidden: string;
+    holeMoving: string;
+    backdrop: string;
+    holeBlocker: string;
+};

package/node/components/Onboarding/ui/Overlay/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overlayClassnames = void 0;
+const createUIKitClassname_1 = require("../../../utils/createUIKitClassname");
+exports.overlayClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay'),
+    hidden: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay_hidden'),
+    holeMoving: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay_hole-moving'),
+    backdrop: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay__backdrop'),
+    holeBlocker: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay__hole-blocker'),
+};

package/node/components/Onboarding/ui/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';

package/node/components/Onboarding/ui/Overlay/index.js

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+export declare const OverlayRoot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+export declare const Backdrop: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGPathElement>, {}>;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+export declare const HoleBlocker: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGRectElement>, {}>;

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoleBlocker = exports.Backdrop = exports.OverlayRoot = void 0;
+const styled_1 = require("../../../styled");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+exports.OverlayRoot = styled_1.styled.svg `
+  pointer-events: none;
+
+  position: fixed;
+  z-index: ${({ theme }) => theme.zIndex.tooltip + constants_1.ONBOARDING_Z_INDEX_OFFSET.base};
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 1;
+
+  transition: opacity ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeInOut};
+
+  &.${constants_2.overlayClassnames.hidden} {
+    opacity: 0;
+
+    .${constants_2.overlayClassnames.backdrop}, .${constants_2.overlayClassnames.holeBlocker} {
+      pointer-events: none;
+    }
+  }
+`;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+exports.Backdrop = styled_1.styled.path `
+  pointer-events: auto;
+  cursor: pointer;
+
+  fill: ${({ theme }) => theme.palette.background.modalShadow};
+
+  .${constants_2.overlayClassnames.holeMoving} & {
+    transition: d ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeInOut};
+  }
+`;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+exports.HoleBlocker = styled_1.styled.rect `
+  pointer-events: auto;
+
+  fill: transparent;
+
+  .${constants_2.overlayClassnames.holeMoving} & {
+    transition-timing-function: ${({ theme }) => theme.transitions.easing.easeInOut};
+    transition-duration: ${({ theme }) => theme.transitions.duration.standard}ms;
+    transition-property: x, y, width, height, rx;
+  }
+`;

package/node/components/Onboarding/ui/Overlay/useLogic/index.d.ts

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

package/node/components/Onboarding/ui/Overlay/useLogic/index.js

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

package/node/components/Onboarding/ui/Overlay/useLogic/useLogic.d.ts

@@ -0,0 +1,13 @@
+import { type Rect, type Viewport } from '../../../utils/geometry';
+export type UseLogicResult = {
+    viewport: Viewport;
+    /**
+     * Hole, обрезанный по viewport (null для standalone-шага).
+     */
+    clampedHole: Rect | null;
+    /**
+     * SVG-путь overlay.
+     */
+    path: string;
+};
+export declare const useLogic: (hole: Rect | null) => UseLogicResult;

package/node/components/Onboarding/ui/Overlay/useLogic/useLogic.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const constants_1 = require("../../../constants");
+const geometry_1 = require("../../../utils/geometry");
+const useViewportSize_1 = require("../../hooks/useViewportSize");
+const useLogic = (hole) => {
+    const viewport = (0, useViewportSize_1.useViewportSize)();
+    const clampedHole = hole ? (0, geometry_1.clampToViewport)(hole, viewport) : null;
+    // Путь строится по необрезанной hole для скруглённых углов у края.
+    const path = (0, geometry_1.buildOverlayPath)(viewport, hole, constants_1.DEFAULT_HIGHLIGHT_RADIUS);
+    return { viewport, clampedHole, path };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,6 @@
+import { type StepViewProps } from './steps/types';
+export type StepStrategyProps = Omit<StepViewProps, 'geometry'>;
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+export declare const StepStrategy: ({ activeStep, isClosing }: StepStrategyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepStrategy = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Overlay_1 = require("../Overlay");
+const HighlightStep_1 = require("./steps/HighlightStep");
+const StandaloneStep_1 = require("./steps/StandaloneStep");
+const useLogic_1 = require("./useLogic");
+const STEP_VIEWS = {
+    standalone: StandaloneStep_1.StandaloneStep,
+    highlight: HighlightStep_1.HighlightStep,
+};
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+const StepStrategy = ({ activeStep, isClosing }) => {
+    const { geometry, shouldShowOverlay, isVisible, isHoleMoving, onOverlayClose, } = (0, useLogic_1.useLogic)(activeStep, isClosing);
+    const StepView = STEP_VIEWS[activeStep.step.type];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldShowOverlay && ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, isHoleMoving: isHoleMoving, onClose: onOverlayClose })), (0, jsx_runtime_1.jsx)(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
+};
+exports.StepStrategy = StepStrategy;