@mpgd/tutorial 0.1.0

package/dist/driver.js

@@ -0,0 +1,755 @@
+import { driver } from 'driver.js';
+import { tutorialDomAttributes } from './index.js';
+export function createDriverTutorialPresenter(input) {
+    const root = input.root ?? document;
+    const ownerDocumentCandidate = root.nodeType === 9 ? root : root.ownerDocument;
+    if (ownerDocumentCandidate === null) {
+        throw new Error('Driver tutorial presenter requires an attached owner document.');
+    }
+    const ownerDocument = ownerDocumentCandidate;
+    if (typeof document === 'undefined' || ownerDocument !== document) {
+        throw new Error('Driver tutorial presenter supports only the current browser document.');
+    }
+    const browserWindowCandidate = ownerDocument.defaultView;
+    if (browserWindowCandidate === null) {
+        throw new Error('Driver tutorial presenter requires a browser document.');
+    }
+    const browserWindow = browserWindowCandidate;
+    const stateHost = input.stateHost ?? ownerDocument.body;
+    const targetAttribute = input.targetAttribute ?? tutorialDomAttributes.target;
+    const escapedCopy = (value) => escapeTutorialText(ownerDocument, value);
+    let activePresentation = null;
+    let activePresentationKey = null;
+    let instance = null;
+    let frame;
+    let destroyed = false;
+    let reportedActive = false;
+    let targetSemanticsGuard;
+    let targetRestorePending = false;
+    let dismissedPresentationKey = null;
+    let retryableDismissedKey = null;
+    let missingTargetErrorKey = null;
+    let syncModalSemantics;
+    const pendingSkipOperations = new Set();
+    const reportActive = (active) => {
+        if (reportedActive === active) {
+            return;
+        }
+        reportedActive = active;
+        input.onActiveChange?.(active);
+    };
+    const scheduleRefresh = () => {
+        if (destroyed || frame !== undefined || dismissedPresentationKey !== null) {
+            return;
+        }
+        frame = browserWindow.requestAnimationFrame(() => {
+            frame = undefined;
+            if (destroyed || dismissedPresentationKey !== null) {
+                return;
+            }
+            const currentInstance = instance;
+            if (currentInstance === null || !currentInstance.isActive()) {
+                driveActiveStep();
+                return;
+            }
+            rebindActiveTarget(currentInstance, activePresentation);
+        });
+    };
+    const createInstance = (presentation) => {
+        let created;
+        let modalSemanticsGuard;
+        let popover = null;
+        const syncCreatedModalSemantics = () => {
+            if (popover === null) {
+                return;
+            }
+            const modalSelector = input.modalSelector ?? '[role="dialog"][aria-modal="true"]';
+            const modal = resolveUnderlyingTutorialModal(popover, presentation.step.interaction, created.getActiveElement(), modalSelector, modalSemanticsGuard?.modal ?? null);
+            if (modalSemanticsGuard?.modal === modal && modalSemanticsGuard.popover === popover) {
+                return;
+            }
+            modalSemanticsGuard?.restore();
+            modalSemanticsGuard = configureTutorialModalSemantics(popover, presentation.step.interaction, modal);
+        };
+        created = driver({
+            allowClose: true,
+            allowKeyboardControl: false,
+            allowScroll: true,
+            animate: false,
+            disableActiveInteraction: true,
+            doneBtnText: presentation.finalStep === true
+                ? escapedCopy(presentation.copy.done)
+                : escapedCopy(presentation.copy.next),
+            nextBtnText: escapedCopy(presentation.copy.next),
+            overlayClickBehavior: () => undefined,
+            overlayColor: '#0e1214',
+            overlayOpacity: 0.78,
+            popoverClass: 'mpgd-tutorial-popover',
+            popoverOffset: 12,
+            prevBtnText: '',
+            showButtons: ['next', 'close'],
+            showProgress: false,
+            skipMissingElement: false,
+            smoothScroll: false,
+            stagePadding: 7,
+            stageRadius: 9,
+            waitForElement: 900,
+            onCloseClick: () => {
+                const dismissedKey = activePresentationKey;
+                dismissedPresentationKey = dismissedKey;
+                retryableDismissedKey = null;
+                destroyInstancePreservingTarget(created);
+                const skipOperation = Promise.resolve()
+                    .then(() => input.onSkip())
+                    .catch((error) => {
+                    if (dismissedPresentationKey === dismissedKey) {
+                        retryableDismissedKey = dismissedKey;
+                    }
+                    input.onError?.(error);
+                });
+                pendingSkipOperations.add(skipOperation);
+                void skipOperation
+                    .finally(() => pendingSkipOperations.delete(skipOperation))
+                    .catch(() => undefined);
+            },
+            onDestroyed: () => {
+                if (!targetRestorePending) {
+                    targetSemanticsGuard?.restore(true);
+                }
+                targetSemanticsGuard = undefined;
+                targetRestorePending = false;
+                modalSemanticsGuard?.restore();
+                modalSemanticsGuard = undefined;
+                if (syncModalSemantics === syncCreatedModalSemantics) {
+                    syncModalSemantics = undefined;
+                }
+                if (instance === created) {
+                    instance = null;
+                    clearTutorialState(stateHost);
+                    reportActive(false);
+                }
+                if (!destroyed && activePresentation !== null) {
+                    scheduleRefresh();
+                }
+            },
+            onPopoverRender: ({ closeButton, nextButton, wrapper }) => {
+                closeButton.setAttribute('aria-label', presentation.copy.skip);
+                closeButton.title = presentation.copy.skip;
+                closeButton.textContent = presentation.copy.skip;
+                closeButton.setAttribute(tutorialDomAttributes.skip, 'true');
+                nextButton.setAttribute(tutorialDomAttributes.next, 'true');
+                wrapper.setAttribute(tutorialDomAttributes.popover, 'true');
+                popover = wrapper;
+                syncModalSemantics = syncCreatedModalSemantics;
+                syncCreatedModalSemantics();
+                if (presentation.step.advance.kind === 'acknowledge') {
+                    const initialFocus = created.getActiveStep()?.advanceOnClick === true
+                        ? closeButton
+                        : nextButton;
+                    browserWindow.queueMicrotask(() => initialFocus.focus());
+                }
+            },
+        });
+        return created;
+    };
+    const driveActiveStep = () => {
+        const presentation = activePresentation;
+        const presentationKey = activePresentationKey;
+        if (presentation === null || presentationKey === null || instance?.isActive() === true) {
+            return;
+        }
+        const target = resolvePresentationTarget(presentation, presentationKey);
+        if (destroyed
+            || activePresentation !== presentation
+            || activePresentationKey !== presentationKey) {
+            return;
+        }
+        if (presentation.step.target !== null && target === null) {
+            const policy = input.missingTarget ?? 'wait';
+            if (policy === 'error') {
+                reportMissingTarget(presentation, presentationKey);
+                return;
+            }
+            if (policy === 'wait') {
+                return;
+            }
+        }
+        else {
+            missingTargetErrorKey = null;
+        }
+        const nextInstance = createInstance(presentation);
+        instance = nextInstance;
+        targetSemanticsGuard?.restore();
+        targetSemanticsGuard = target === null
+            ? undefined
+            : preserveTutorialTargetSemantics(target, browserWindow);
+        try {
+            stateHost.setAttribute(tutorialDomAttributes.active, 'true');
+            stateHost.setAttribute(tutorialDomAttributes.step, presentation.step.id);
+            nextInstance.setSteps([
+                createDriveStep(input, presentation, target ?? undefined, ownerDocument),
+            ]);
+            applyDriverTargetMutation(() => nextInstance.drive());
+            syncModalSemantics?.();
+            reportActive(true);
+        }
+        catch (error) {
+            dismissedPresentationKey = activePresentationKey;
+            try {
+                destroyInstancePreservingTarget(nextInstance);
+            }
+            finally {
+                targetSemanticsGuard = undefined;
+                instance = null;
+                syncModalSemantics = undefined;
+                clearTutorialState(stateHost);
+                reportActive(false);
+            }
+            input.onError?.(error);
+        }
+    };
+    const resolvePresentationTarget = (presentation, presentationKey = activePresentationKey) => {
+        if (presentation.step.target === null) {
+            return null;
+        }
+        try {
+            if (input.resolveTarget !== undefined) {
+                return input.resolveTarget(presentation.step.target, root);
+            }
+            return resolveVisibleTutorialTarget({
+                root,
+                target: presentation.step.target,
+                targetAttribute,
+                view: browserWindow,
+            });
+        }
+        catch (error) {
+            if (presentationKey !== null
+                && presentationKey === activePresentationKey
+                && missingTargetErrorKey !== presentationKey) {
+                missingTargetErrorKey = presentationKey;
+                input.onError?.(error);
+            }
+            return null;
+        }
+    };
+    const observationRoot = root.nodeType === 9 ? ownerDocument.documentElement : root;
+    const mutationObserver = new browserWindow.MutationObserver((records) => {
+        if (activePresentation === null && instance === null) {
+            return;
+        }
+        if (records.some((record) => !isDriverOwnedMutation(record))) {
+            scheduleRefresh();
+        }
+    });
+    mutationObserver.observe(observationRoot, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    const resizeObserver = typeof browserWindow.ResizeObserver === 'function'
+        ? new browserWindow.ResizeObserver(scheduleRefresh)
+        : null;
+    resizeObserver?.observe(observationRoot);
+    observationRoot.addEventListener('scroll', scheduleRefresh, true);
+    browserWindow.visualViewport?.addEventListener('resize', scheduleRefresh);
+    browserWindow.visualViewport?.addEventListener('scroll', scheduleRefresh);
+    browserWindow.addEventListener('orientationchange', scheduleRefresh);
+    return {
+        destroy() {
+            destroyed = true;
+            activePresentation = null;
+            activePresentationKey = null;
+            dismissedPresentationKey = null;
+            retryableDismissedKey = null;
+            missingTargetErrorKey = null;
+            mutationObserver.disconnect();
+            resizeObserver?.disconnect();
+            observationRoot.removeEventListener('scroll', scheduleRefresh, true);
+            browserWindow.visualViewport?.removeEventListener('resize', scheduleRefresh);
+            browserWindow.visualViewport?.removeEventListener('scroll', scheduleRefresh);
+            browserWindow.removeEventListener('orientationchange', scheduleRefresh);
+            if (frame !== undefined) {
+                browserWindow.cancelAnimationFrame(frame);
+            }
+            if (instance !== null) {
+                destroyInstancePreservingTarget(instance);
+            }
+            instance = null;
+            targetSemanticsGuard = undefined;
+            clearTutorialState(stateHost);
+            reportActive(false);
+        },
+        present(presentation) {
+            const nextKey = presentation === null
+                ? null
+                : JSON.stringify([
+                    presentation.step.id,
+                    presentation.copy.title,
+                    presentation.copy.description,
+                    presentation.copy.next,
+                    presentation.copy.done,
+                    presentation.copy.skip,
+                    presentation.acknowledgeOnTargetClick === true,
+                    presentation.allowTargetInteraction === true,
+                    presentation.finalStep === true,
+                ]);
+            if (dismissedPresentationKey !== null
+                && nextKey !== null
+                && (dismissedPresentationKey !== nextKey || retryableDismissedKey === nextKey)) {
+                dismissedPresentationKey = null;
+                retryableDismissedKey = null;
+            }
+            if (activePresentationKey !== nextKey) {
+                missingTargetErrorKey = null;
+            }
+            if (activePresentationKey === nextKey) {
+                activePresentation = presentation;
+                scheduleRefresh();
+                return;
+            }
+            activePresentation = presentation;
+            activePresentationKey = nextKey;
+            const previousInstance = instance;
+            instance = null;
+            if (previousInstance !== null) {
+                destroyInstancePreservingTarget(previousInstance);
+            }
+            clearTutorialState(stateHost);
+            reportActive(false);
+            scheduleRefresh();
+        },
+        refresh: scheduleRefresh,
+        resetForReplay() {
+            dismissedPresentationKey = null;
+            retryableDismissedKey = null;
+            missingTargetErrorKey = null;
+            scheduleRefresh();
+        },
+        async waitForPendingSkip() {
+            while (pendingSkipOperations.size > 0) {
+                await Promise.allSettled(pendingSkipOperations);
+            }
+        },
+    };
+    function rebindActiveTarget(currentInstance, presentation) {
+        if (presentation === null || presentation.step.target === null || !currentInstance.isActive()) {
+            applyDriverTargetMutation(() => currentInstance.refresh());
+            syncModalSemantics?.();
+            return;
+        }
+        const presentationKey = activePresentationKey;
+        const target = resolvePresentationTarget(presentation, presentationKey);
+        if (destroyed
+            || activePresentation !== presentation
+            || activePresentationKey !== presentationKey
+            || instance !== currentInstance
+            || !currentInstance.isActive()) {
+            return;
+        }
+        if (target === null) {
+            const policy = input.missingTarget ?? 'wait';
+            if (policy === 'unanchored') {
+                missingTargetErrorKey = null;
+                if (currentInstance.getActiveElement()?.id === 'driver-dummy-element') {
+                    applyDriverTargetMutation(() => currentInstance.refresh());
+                    syncModalSemantics?.();
+                    return;
+                }
+                const current = currentInstance.getActiveStep();
+                if (current === undefined) {
+                    applyDriverTargetMutation(() => currentInstance.refresh());
+                    syncModalSemantics?.();
+                    return;
+                }
+                rebindTarget(currentInstance, presentation, undefined);
+                return;
+            }
+            destroyInstancePreservingTarget(currentInstance);
+            if (policy === 'error') {
+                reportMissingTarget(presentation, presentationKey);
+            }
+            return;
+        }
+        missingTargetErrorKey = null;
+        if (currentInstance.getActiveElement() === target) {
+            applyDriverTargetMutation(() => currentInstance.refresh());
+            syncModalSemantics?.();
+            return;
+        }
+        const current = currentInstance.getActiveStep();
+        if (current === undefined) {
+            applyDriverTargetMutation(() => currentInstance.refresh());
+            syncModalSemantics?.();
+            return;
+        }
+        rebindTarget(currentInstance, presentation, target);
+    }
+    function rebindTarget(currentInstance, presentation, target) {
+        const previousTarget = currentInstance.getActiveElement();
+        targetSemanticsGuard?.restore();
+        const restorePreviousTarget = !(previousTarget instanceof HTMLElement)
+            || previousTarget.id === 'driver-dummy-element'
+            ? undefined
+            : captureTutorialTargetSemantics(previousTarget, target?.parentElement ?? null);
+        targetSemanticsGuard = target === undefined
+            ? undefined
+            : preserveTutorialTargetSemantics(target, browserWindow);
+        const nextStep = createDriveStep(input, presentation, target, ownerDocument);
+        applyDriverTargetMutation(() => currentInstance.highlight(nextStep));
+        restorePreviousTarget?.();
+        syncModalSemantics?.();
+    }
+    function reportMissingTarget(presentation, presentationKey = activePresentationKey) {
+        if (presentationKey === null
+            || presentationKey !== activePresentationKey
+            || missingTargetErrorKey === presentationKey) {
+            return;
+        }
+        missingTargetErrorKey = presentationKey;
+        input.onError?.(new Error(`Tutorial target was not found: ${String(presentation.step.target)}`));
+    }
+    function destroyInstancePreservingTarget(currentInstance) {
+        const target = currentInstance.getActiveElement();
+        targetSemanticsGuard?.restore();
+        const restoreAfterDestroy = !(target instanceof HTMLElement)
+            ? undefined
+            : captureTutorialTargetSemantics(target);
+        targetRestorePending = true;
+        currentInstance.destroy();
+        targetRestorePending = false;
+        restoreAfterDestroy?.();
+        targetSemanticsGuard = undefined;
+    }
+    function applyDriverTargetMutation(mutation) {
+        return targetSemanticsGuard === undefined
+            ? mutation()
+            : targetSemanticsGuard.applyDriverMutation(mutation);
+    }
+}
+export function resolveVisibleTutorialTarget(input) {
+    const root = input.root ?? document;
+    const ownerDocument = root.nodeType === 9 ? root : root.ownerDocument;
+    if (ownerDocument === null) {
+        return null;
+    }
+    const view = input.view ?? ownerDocument.defaultView;
+    if (view === null) {
+        return null;
+    }
+    const attribute = input.targetAttribute ?? tutorialDomAttributes.target;
+    const selector = `[${attribute}="${escapeAttributeValue(input.target)}"]`;
+    const candidates = [...root.querySelectorAll(selector)];
+    return candidates.find((element) => isVisibleTutorialTarget(element, view))
+        ?? candidates.find((element) => isRenderableTutorialTarget(element, view))
+        ?? null;
+}
+export function isVisibleTutorialTarget(element, view = window) {
+    if (!isRenderableTutorialTarget(element, view)) {
+        return false;
+    }
+    let visible = intersectRect(element.getBoundingClientRect(), {
+        bottom: view.innerHeight,
+        left: 0,
+        right: view.innerWidth,
+        top: 0,
+    });
+    let ancestor = element.parentElement;
+    while (visible !== null && ancestor !== null) {
+        const style = view.getComputedStyle(ancestor);
+        if (style.display === 'none'
+            || style.visibility === 'hidden'
+            || Number.parseFloat(style.opacity || '1') <= 0) {
+            return false;
+        }
+        if ([style.overflow, style.overflowX, style.overflowY].some((value) => value === 'auto' || value === 'clip' || value === 'hidden' || value === 'scroll')) {
+            visible = intersectRect(visible, ancestor.getBoundingClientRect());
+        }
+        ancestor = ancestor.parentElement;
+    }
+    return visible !== null && visible.right > visible.left && visible.bottom > visible.top;
+}
+export function bindTutorialReplayTrigger(input) {
+    let pending = false;
+    const listener = () => {
+        if (pending) {
+            return;
+        }
+        pending = true;
+        void Promise.resolve()
+            .then(() => input.presenter.waitForPendingSkip())
+            .then(() => input.beforeReplay?.())
+            .then(() => input.presenter.waitForPendingSkip())
+            .then(() => input.director.replay())
+            .then(() => input.presenter.resetForReplay())
+            .catch((error) => input.onError?.(error))
+            .finally(() => {
+            pending = false;
+        });
+    };
+    input.element.addEventListener('click', listener);
+    return () => input.element.removeEventListener('click', listener);
+}
+function createDriveStep(input, presentation, target, ownerDocument) {
+    const { step } = presentation;
+    const actionGated = step.advance.kind === 'action' || step.advance.kind === 'signal';
+    const acknowledgeOnTargetClick = presentation.acknowledgeOnTargetClick === true
+        && step.advance.kind === 'acknowledge'
+        && step.target !== null
+        && target !== undefined;
+    const targetInteraction = presentation.allowTargetInteraction === true
+        || acknowledgeOnTargetClick
+        || step.interaction === 'target'
+        || step.interaction === 'gameplay';
+    return {
+        ...(target === undefined ? {} : { element: target }),
+        advanceOnClick: acknowledgeOnTargetClick,
+        disableActiveInteraction: !targetInteraction,
+        popover: {
+            ...(step.side === undefined ? {} : { side: step.side }),
+            ...(step.align === undefined ? {} : { align: step.align }),
+            description: escapeTutorialText(ownerDocument, presentation.copy.description),
+            doneBtnText: presentation.finalStep === true
+                ? escapeTutorialText(ownerDocument, presentation.copy.done)
+                : escapeTutorialText(ownerDocument, presentation.copy.next),
+            nextBtnText: presentation.finalStep === true
+                ? escapeTutorialText(ownerDocument, presentation.copy.done)
+                : escapeTutorialText(ownerDocument, presentation.copy.next),
+            showButtons: actionGated || acknowledgeOnTargetClick
+                ? ['close']
+                : ['next', 'close'],
+            title: escapeTutorialText(ownerDocument, presentation.copy.title),
+            onNextClick: () => input.onAcknowledge(step.id),
+        },
+    };
+}
+function resolveUnderlyingTutorialModal(popover, interaction, activeElement, modalSelector, currentModal) {
+    const activeModal = activeElement?.closest(modalSelector) ?? null;
+    if (interaction !== 'blocked') {
+        return activeModal;
+    }
+    if (activeElement !== undefined
+        && currentModal?.isConnected === true
+        && currentModal.contains(activeElement)) {
+        return currentModal;
+    }
+    return activeModal
+        ?? [...popover.ownerDocument.querySelectorAll(modalSelector)]
+            .find((candidate) => candidate !== popover && !popover.contains(candidate))
+        ?? (currentModal?.isConnected === true ? currentModal : null)
+        ?? null;
+}
+function configureTutorialModalSemantics(popover, interaction, underlyingModal) {
+    const ownedAttributes = new Map();
+    if (interaction === 'blocked') {
+        popover.setAttribute('role', 'dialog');
+        popover.setAttribute('aria-modal', 'true');
+        if (underlyingModal !== null) {
+            ownedAttributes.set('aria-modal', 'false');
+        }
+    }
+    else {
+        popover.setAttribute('role', 'region');
+        popover.removeAttribute('aria-modal');
+        if (underlyingModal !== null && popover.id !== '') {
+            const ownedIds = new Set((underlyingModal.getAttribute('aria-owns') ?? '').split(/\s+/u).filter(Boolean));
+            ownedIds.add(popover.id);
+            ownedAttributes.set('aria-owns', [...ownedIds].join(' '));
+        }
+    }
+    const restore = underlyingModal === null
+        ? () => undefined
+        : preserveTutorialModalSemantics(underlyingModal, ownedAttributes, popover.ownerDocument);
+    return { modal: underlyingModal, popover, restore };
+}
+function preserveTutorialModalSemantics(element, ownedAttributes, ownerDocument) {
+    const view = ownerDocument.defaultView;
+    if (view === null || ownedAttributes.size === 0) {
+        return () => undefined;
+    }
+    const previous = new Map();
+    const hostValues = new Map();
+    const captureHostMutations = (records) => {
+        for (const record of records) {
+            const attribute = record.attributeName;
+            if (record.target === element && isTutorialModalAttribute(attribute)) {
+                hostValues.set(attribute, element.getAttribute(attribute));
+            }
+        }
+    };
+    for (const [attribute, value] of ownedAttributes) {
+        const current = element.getAttribute(attribute);
+        if (current === value) {
+            continue;
+        }
+        previous.set(attribute, current);
+        element.setAttribute(attribute, value);
+    }
+    if (previous.size === 0) {
+        return () => undefined;
+    }
+    const observer = new view.MutationObserver(captureHostMutations);
+    observer.observe(element, {
+        attributeFilter: [...previous.keys()],
+        attributes: true,
+    });
+    return () => {
+        captureHostMutations(observer.takeRecords());
+        observer.disconnect();
+        for (const [attribute, previousValue] of previous) {
+            if (hostValues.has(attribute)) {
+                restoreAttribute(element, attribute, hostValues.get(attribute) ?? null);
+                continue;
+            }
+            restoreOwnedAttribute(element, attribute, ownedAttributes.get(attribute) ?? null, previousValue);
+        }
+    };
+}
+function isTutorialModalAttribute(attribute) {
+    return attribute === 'aria-modal' || attribute === 'aria-owns';
+}
+function preserveTutorialTargetSemantics(element, view) {
+    const attributes = ['aria-controls', 'aria-expanded', 'aria-haspopup'];
+    const previous = Object.fromEntries(attributes.map((attribute) => [attribute, element.getAttribute(attribute)]));
+    const driverOwned = {
+        'aria-controls': 'driver-popover-content',
+        'aria-expanded': 'true',
+        'aria-haspopup': 'dialog',
+    };
+    const hostValues = new Map();
+    const decoratedParent = element.parentElement;
+    let active = true;
+    const captureHostMutations = (records) => {
+        for (const record of records) {
+            const attribute = record.attributeName;
+            if (record.target === element && isTutorialTargetAttribute(attribute)) {
+                hostValues.set(attribute, element.getAttribute(attribute));
+            }
+        }
+    };
+    const observer = new view.MutationObserver(captureHostMutations);
+    observer.observe(element, {
+        attributeFilter: [...attributes],
+        attributes: true,
+    });
+    return {
+        applyDriverMutation(mutation) {
+            captureHostMutations(observer.takeRecords());
+            try {
+                return mutation();
+            }
+            finally {
+                observer.takeRecords();
+            }
+        },
+        restore(driverAlreadyDestroyed = false) {
+            if (!active) {
+                return;
+            }
+            if (driverAlreadyDestroyed) {
+                observer.takeRecords();
+            }
+            else {
+                captureHostMutations(observer.takeRecords());
+            }
+            observer.disconnect();
+            active = false;
+            for (const attribute of attributes) {
+                if (hostValues.has(attribute)) {
+                    restoreAttribute(element, attribute, hostValues.get(attribute) ?? null);
+                    continue;
+                }
+                const current = element.getAttribute(attribute);
+                if (current === driverOwned[attribute] || (driverAlreadyDestroyed && current === null)) {
+                    restoreAttribute(element, attribute, previous[attribute]);
+                }
+            }
+            clearDetachedDriverTargetClasses(element, decoratedParent);
+        },
+    };
+}
+function isTutorialTargetAttribute(attribute) {
+    return attribute === 'aria-controls'
+        || attribute === 'aria-expanded'
+        || attribute === 'aria-haspopup';
+}
+function captureTutorialTargetSemantics(element, preservedParent = null) {
+    const attributes = ['aria-controls', 'aria-expanded', 'aria-haspopup'];
+    const decoratedParent = element.parentElement;
+    const captured = Object.fromEntries(attributes.map((attribute) => [attribute, element.getAttribute(attribute)]));
+    return () => {
+        for (const attribute of attributes) {
+            restoreAttribute(element, attribute, captured[attribute]);
+        }
+        clearDetachedDriverTargetClasses(element, decoratedParent, preservedParent);
+    };
+}
+function clearDetachedDriverTargetClasses(element, decoratedParent, preservedParent = null) {
+    element.classList.remove('driver-active-element', 'driver-no-interaction');
+    if (decoratedParent !== preservedParent) {
+        decoratedParent?.classList.remove('driver-active-element-parent', 'driver-active-element-parent-no-scroll');
+    }
+}
+function isRenderableTutorialTarget(element, view) {
+    const rect = element.getBoundingClientRect();
+    if (!element.isConnected || rect.width <= 0 || rect.height <= 0) {
+        return false;
+    }
+    let current = element;
+    while (current !== null) {
+        const style = view.getComputedStyle(current);
+        if (style.display === 'none'
+            || style.visibility === 'hidden'
+            || Number.parseFloat(style.opacity || '1') <= 0) {
+            return false;
+        }
+        current = current.parentElement;
+    }
+    return true;
+}
+function intersectRect(left, right) {
+    const intersection = {
+        bottom: Math.min(left.bottom, right.bottom),
+        left: Math.max(left.left, right.left),
+        right: Math.min(left.right, right.right),
+        top: Math.max(left.top, right.top),
+    };
+    return intersection.right > intersection.left && intersection.bottom > intersection.top
+        ? intersection
+        : null;
+}
+function clearTutorialState(stateHost) {
+    stateHost.removeAttribute(tutorialDomAttributes.active);
+    stateHost.removeAttribute(tutorialDomAttributes.step);
+}
+function restoreAttribute(element, name, value) {
+    if (value === null) {
+        element.removeAttribute(name);
+    }
+    else {
+        element.setAttribute(name, value);
+    }
+}
+function restoreOwnedAttribute(element, name, ownedValue, previousValue) {
+    if (element.getAttribute(name) !== ownedValue) {
+        return;
+    }
+    restoreAttribute(element, name, previousValue);
+}
+function isDriverOwnedMutation(record) {
+    const target = record.target;
+    if (target.nodeType !== 1) {
+        return false;
+    }
+    const element = target;
+    return element.matches('.driver-overlay, .driver-popover, .driver-popover *')
+        || element.closest('.driver-overlay, .driver-popover') !== null;
+}
+function escapeAttributeValue(value) {
+    return value.replaceAll('\\', '\\\\').replaceAll('"', '\\"');
+}
+function escapeTutorialText(ownerDocument, value) {
+    const element = ownerDocument.createElement('span');
+    element.textContent = value;
+    return element.innerHTML;
+}