v-tutorial 0.0.0-stage → 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue';
+import { TutorialOptions } from './types';
+import { useTutorial, vTutorial } from './useTutorial';
+import { default as TutorialProvider } from './TutorialProvider.vue';
+import { default as TutorialStepComponent } from './TutorialStep.vue';
+export * from './types';
+export * from './keys';
+export * from './responsive';
+export * from './domResolver';
+export * from './positioning';
+export { useTutorial, vTutorial };
+export { TutorialProvider, TutorialStepComponent as VTutorialStep, TutorialStepComponent, };
+export declare const TutorialPlugin: {
+    install(app: App, options?: Partial<TutorialOptions>): void;
+};
+export default TutorialPlugin;
+declare module 'vue' {
+    interface GlobalComponents {
+        TutorialProvider: typeof TutorialProvider;
+        VTutorialStep: typeof TutorialStepComponent;
+    }
+    interface GlobalDirectives {
+        vTutorial: typeof vTutorial;
+    }
+}

package/dist/keys.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey } from 'vue';
+import { TutorialProviderInjection } from './types';
+export declare const TUTORIAL_PROVIDER_KEY: InjectionKey<TutorialProviderInjection>;

package/dist/positioning.d.ts

@@ -0,0 +1,23 @@
+import { TutorialPlacement } from './types';
+export interface ParametrosPosicionamentoCard {
+    hasTargetBox: boolean;
+    spotlightBox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    viewportW: number;
+    viewportH: number;
+    maxCardW: number;
+    cardHeight: number;
+    requestedPlacement: TutorialPlacement;
+    isMobileViewport: boolean;
+    useMobileSheet: boolean;
+}
+export interface ResultadoPosicionamentoCard {
+    resolvedPlacement: TutorialPlacement;
+    cardStyle: Record<string, string>;
+    arrowStyle: Record<string, string> | null;
+}
+export declare function calcularPosicaoCard(params: ParametrosPosicionamentoCard): ResultadoPosicionamentoCard;

package/dist/responsive.d.ts

@@ -0,0 +1,5 @@
+import { TutorialBreakpointName, TutorialBreakpointsConfig, TutorialStep } from './types';
+export declare const BOOTSTRAP_BREAKPOINT_ORDER: TutorialBreakpointName[];
+export declare const DEFAULT_BOOTSTRAP_BREAKPOINTS: TutorialBreakpointsConfig;
+export declare function calcularBreakpointAtivo(larguraTela: number, config: TutorialBreakpointsConfig): TutorialBreakpointName;
+export declare function resolverPassoResponsivo(rawStep: TutorialStep, currentBp: TutorialBreakpointName): TutorialStep;

package/dist/style.css

@@ -0,0 +1 @@
+.v-tutorial-root{--v-tutorial-primary: var(--tblr-primary, #206bc4);--v-tutorial-bg: var(--tblr-bg-surface, #ffffff);--v-tutorial-bg-secondary: var(--tblr-bg-surface-secondary, #f8fafc);--v-tutorial-text: var(--tblr-body-color, #1e293b);--v-tutorial-muted: var(--tblr-secondary, #64748b);--v-tutorial-border: var(--tblr-border-color-translucent, rgba(15, 23, 42, .12));--v-tutorial-danger: var(--tblr-danger, #d63939);--v-tutorial-backdrop: rgba(10, 14, 23, .68);--v-tutorial-radius: 16px;--v-tutorial-z-index: 10040;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--v-tutorial-z-index);pointer-events:none;font-family:inherit}[data-bs-theme=dark] .v-tutorial-root,.dark .v-tutorial-root{--v-tutorial-bg: var(--tblr-bg-surface, #1e293b);--v-tutorial-bg-secondary: var(--tblr-bg-surface-secondary, #0f172a);--v-tutorial-text: var(--tblr-body-color, #f8fafc);--v-tutorial-muted: var(--tblr-secondary, #94a3b8);--v-tutorial-border: var(--tblr-border-color-translucent, rgba(255, 255, 255, .12))}.sistec-full-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background:var(--v-tutorial-backdrop);pointer-events:auto;z-index:calc(var(--v-tutorial-z-index) + 1)}.sistec-click-shield{position:fixed;z-index:calc(var(--v-tutorial-z-index) + 1);pointer-events:auto;background:transparent}.v-tutorial-spotlight-ring{position:fixed;border-radius:12px;border:3px solid var(--v-tutorial-primary);box-shadow:0 0 0 9999px var(--v-tutorial-backdrop),0 0 0 4px color-mix(in srgb,var(--v-tutorial-primary),transparent 70%),0 0 28px color-mix(in srgb,var(--v-tutorial-primary),transparent 35%);pointer-events:none!important;transition:top .2s cubic-bezier(.16,1,.3,1),left .2s cubic-bezier(.16,1,.3,1),width .2s cubic-bezier(.16,1,.3,1),height .2s cubic-bezier(.16,1,.3,1);z-index:calc(var(--v-tutorial-z-index) + 2)}.v-tutorial-spotlight-ring.is-wait-click{animation:spotlightPulse 1.5s infinite ease-in-out}@keyframes spotlightPulse{0%,to{box-shadow:0 0 0 9999px var(--v-tutorial-backdrop),0 0 0 4px color-mix(in srgb,var(--v-tutorial-primary),transparent 65%),0 0 25px color-mix(in srgb,var(--v-tutorial-primary),transparent 35%)}50%{box-shadow:0 0 0 9999px var(--v-tutorial-backdrop),0 0 0 9px color-mix(in srgb,var(--v-tutorial-primary),transparent 85%),0 0 35px color-mix(in srgb,var(--v-tutorial-primary),transparent 15%)}}.v-tutorial-card{position:fixed;max-width:calc(100vw - 24px);background:var(--v-tutorial-bg);color:var(--v-tutorial-text);border:1px solid color-mix(in srgb,var(--v-tutorial-primary),var(--v-tutorial-border) 55%);border-radius:var(--v-tutorial-radius);box-shadow:0 22px 50px #0000006b;pointer-events:auto;z-index:calc(var(--v-tutorial-z-index) + 15);overflow:visible;transition:top .22s cubic-bezier(.16,1,.3,1),left .22s cubic-bezier(.16,1,.3,1),bottom .22s cubic-bezier(.16,1,.3,1)}.v-tutorial-arrow{position:absolute;width:12px;height:12px;background:var(--v-tutorial-bg);border-color:color-mix(in srgb,var(--v-tutorial-primary),var(--v-tutorial-border) 55%);border-style:solid;border-width:0;pointer-events:none;z-index:-1}.v-tutorial-arrow.arrow-right{left:-6px;transform:translateY(-50%) rotate(45deg);border-left-width:1px;border-bottom-width:1px}.v-tutorial-arrow.arrow-left{right:-6px;transform:translateY(-50%) rotate(45deg);border-right-width:1px;border-top-width:1px}.v-tutorial-arrow.arrow-bottom{top:-6px;transform:translate(-50%) rotate(45deg);border-left-width:1px;border-top-width:1px}.v-tutorial-arrow.arrow-top{bottom:-6px;transform:translate(-50%) rotate(45deg);border-right-width:1px;border-bottom-width:1px}.v-tutorial-card-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;background:color-mix(in srgb,var(--v-tutorial-primary),transparent 90%);border-bottom:1px solid var(--v-tutorial-border);border-radius:calc(var(--v-tutorial-radius) - 1px) calc(var(--v-tutorial-radius) - 1px) 0 0}.v-tutorial-step-badge{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--v-tutorial-primary);background:color-mix(in srgb,var(--v-tutorial-primary),transparent 84%);padding:.2rem .65rem;border-radius:999px}.v-tutorial-mode-tag{font-size:.72rem;font-weight:600;color:var(--v-tutorial-muted)}.v-tutorial-card-body{padding:1rem 1.1rem}.v-tutorial-title{margin:0 0 .4rem;font-size:1.02rem;font-weight:700;color:var(--v-tutorial-text)}.v-tutorial-content{font-size:.88rem;line-height:1.48;color:var(--v-tutorial-muted)}.v-tutorial-click-banner{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;font-size:.8rem;font-weight:700;color:var(--v-tutorial-primary);background:color-mix(in srgb,var(--v-tutorial-primary),transparent 90%);border-top:1px dashed color-mix(in srgb,var(--v-tutorial-primary),transparent 65%)}.pulse-click-icon{flex-shrink:0;animation:iconBounce 1.1s infinite ease-in-out}@keyframes iconBounce{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.v-tutorial-progress{height:4px;width:100%;background:var(--v-tutorial-border)}.v-tutorial-progress-bar{height:100%;background:var(--v-tutorial-primary);transition:width .3s ease}.v-tutorial-card-footer{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.1rem;background:color-mix(in srgb,var(--v-tutorial-bg-secondary),transparent 35%);border-top:1px solid var(--v-tutorial-border);border-radius:0 0 calc(var(--v-tutorial-radius) - 1px) calc(var(--v-tutorial-radius) - 1px)}.v-tutorial-card-footer button{margin:0!important}.v-tutorial-nav-group{display:flex;align-items:center;gap:.45rem}.v-tutorial-btn-skip,.v-tutorial-btn-prev,.v-tutorial-btn-next{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-size:.8rem;font-weight:600;border-radius:8px;padding:.35rem .7rem;cursor:pointer;transition:all .15s ease}.v-tutorial-btn-skip{background:transparent;color:var(--v-tutorial-danger);border:1px solid color-mix(in srgb,var(--v-tutorial-danger),transparent 50%)}.v-tutorial-btn-skip:hover{background:var(--v-tutorial-danger);color:#fff}.v-tutorial-btn-prev{background:transparent;color:var(--v-tutorial-muted);border:1px solid transparent}.v-tutorial-btn-prev:hover{background:color-mix(in srgb,var(--v-tutorial-muted),transparent 88%);color:var(--v-tutorial-text)}.v-tutorial-btn-next{background:var(--v-tutorial-primary);color:#fff;border:1px solid var(--v-tutorial-primary);padding:.35rem .9rem;font-weight:700}.v-tutorial-btn-next:hover{filter:brightness(1.08)}.sistec-wait-pill{font-size:.76rem;font-weight:700;color:var(--v-tutorial-primary);background:color-mix(in srgb,var(--v-tutorial-primary),transparent 88%);border:1px solid color-mix(in srgb,var(--v-tutorial-primary),transparent 65%);padding:.28rem .7rem;border-radius:8px}.tutorial-fade-enter-active,.tutorial-fade-leave-active{transition:opacity .2s ease}.tutorial-fade-enter-from,.tutorial-fade-leave-to{opacity:0}

package/dist/types.d.ts

@@ -0,0 +1,152 @@
+import { Component, ComputedRef } from 'vue';
+export type TutorialStepMode = 'wait-click' | 'optional-click' | 'info';
+export type TutorialDirection = 'start' | 'forward' | 'backward';
+export type TutorialPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'bottom-sheet' | 'top-sheet';
+export type TutorialBreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type TutorialBreakpointsConfig = Record<TutorialBreakpointName, number>;
+export type TutorialActionMap = Record<string, any> | string[];
+export interface TutorialStepResponsiveOverride {
+    /** Se true neste breakpoint, o passo é ignorado/pulado automaticamente neste tamanho de tela */
+    disabled?: boolean;
+    target?: string | string[];
+    title?: string;
+    content?: string;
+    mode?: TutorialStepMode;
+    placement?: TutorialPlacement;
+    hintText?: string;
+    spotlightPadding?: number;
+    cardWidth?: number;
+    autoScroll?: boolean;
+    route?: string;
+    rollbackRoute?: string;
+    enterActions?: TutorialActionMap;
+    rollbackActions?: TutorialActionMap;
+    leaveActions?: TutorialActionMap;
+}
+export interface TutorialLabels {
+    skipTutorial?: string;
+    previous?: string;
+    next?: string;
+    finish?: string;
+    waitingClick?: string;
+    interactiveBadge?: string;
+    defaultHint?: string;
+    stepCounter?: (current: number, total: number) => string;
+}
+export interface TutorialClasses {
+    root?: string;
+    backdrop?: string;
+    shield?: string;
+    spotlight?: string;
+    card?: string;
+    arrow?: string;
+    header?: string;
+    badge?: string;
+    modeTag?: string;
+    body?: string;
+    title?: string;
+    content?: string;
+    hintBanner?: string;
+    progressContainer?: string;
+    progressBar?: string;
+    footer?: string;
+    skipButton?: string;
+    prevButton?: string;
+    nextButton?: string;
+    waitPill?: string;
+}
+export interface TutorialOptions {
+    storageKey?: string;
+    autoScroll?: boolean;
+    scrollBehavior?: ScrollBehavior;
+    spotlightPadding?: number;
+    cardWidth?: number;
+    showArrow?: boolean;
+    unstyled?: boolean;
+    /** Limiares em pixels para os breakpoints Mobile-First (padrão Bootstrap 5) */
+    breakpoints?: Partial<TutorialBreakpointsConfig>;
+    /** Se true, em telas xs/sm o placement="auto" ancora o card no topo ou rodapé para não cobrir o alvo */
+    mobileSheetOnAuto?: boolean;
+    labels?: TutorialLabels;
+    classes?: TutorialClasses;
+    router?: {
+        currentRoute: {
+            value: {
+                path: string;
+            };
+        };
+        push: (to: string) => Promise<any> | any;
+    };
+}
+export interface TutorialContext {
+    currentStepIndex: number;
+    currentStep: TutorialStep | null;
+    totalSteps: number;
+    progress: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    direction: TutorialDirection;
+    activeBreakpoint: TutorialBreakpointName;
+    viewportWidth: number;
+    isMobileViewport: boolean;
+    nextStep: () => Promise<void>;
+    prevStep: () => Promise<void>;
+    goToStep: (indexOrId: number | string, direction?: TutorialDirection) => Promise<void>;
+    endTutorial: (markAsCompleted?: boolean) => void;
+    restartTutorial: () => Promise<void>;
+    runRegisteredAction: (actionName: string, ...args: any[]) => Promise<any>;
+    runActionMap: (actions?: TutorialActionMap) => Promise<void>;
+}
+export interface TutorialTargetConfig {
+    id: string;
+    preventNativeClick?: boolean;
+    onTutorialClick?: (event: MouseEvent, ctx: TutorialContext) => void | Promise<void>;
+}
+export interface TutorialStep {
+    id: string;
+    /** Alvo base (xs >= 0px): ID registrado no v-tutorial, seletor CSS ou array de seletores */
+    target?: string | string[];
+    title: string;
+    content?: string;
+    component?: Component;
+    componentProps?: Record<string, any>;
+    mode: TutorialStepMode;
+    placement?: TutorialPlacement;
+    hintText?: string;
+    preventNativeClick?: boolean;
+    afterClickDelay?: number;
+    autoScroll?: boolean;
+    spotlightPadding?: number;
+    cardWidth?: number;
+    disabled?: boolean;
+    route?: string;
+    rollbackRoute?: string;
+    enterActions?: TutorialActionMap;
+    rollbackActions?: TutorialActionMap;
+    leaveActions?: TutorialActionMap;
+    /** Objeto de sobrescrita Mobile-First por breakpoint (xs -> sm -> md -> lg -> xl -> xxl) */
+    breakpoints?: Partial<Record<TutorialBreakpointName, TutorialStepResponsiveOverride>>;
+    /** Atalhos diretos Mobile-First de target por breakpoint */
+    targetSm?: string | string[];
+    targetMd?: string | string[];
+    targetLg?: string | string[];
+    targetXl?: string | string[];
+    targetXxl?: string | string[];
+    /** Atalhos diretos Mobile-First de placement por breakpoint */
+    placementSm?: TutorialPlacement;
+    placementMd?: TutorialPlacement;
+    placementLg?: TutorialPlacement;
+    placementXl?: TutorialPlacement;
+    placementXxl?: TutorialPlacement;
+    beforeEnter?: (ctx: TutorialContext) => void | Promise<void>;
+    onRollback?: (ctx: TutorialContext) => void | Promise<void>;
+    onTargetClick?: (event: MouseEvent, ctx: TutorialContext) => void | Promise<void>;
+    afterClick?: (ctx: TutorialContext) => void | Promise<void>;
+    afterLeave?: (ctx: TutorialContext) => void | Promise<void>;
+}
+export interface TutorialProviderInjection {
+    registerDeclarativeStep: (step: TutorialStep) => void;
+    updateDeclarativeStep: (step: TutorialStep) => void;
+    unregisterDeclarativeStep: (id: string) => void;
+    activeStepId: ComputedRef<string | null>;
+}

package/dist/useTutorial.d.ts

@@ -0,0 +1,180 @@
+import { Directive, Ref } from 'vue';
+import { TutorialStep, TutorialTargetConfig, TutorialContext, TutorialDirection, TutorialOptions, TutorialActionMap, TutorialBreakpointName, TutorialBreakpointsConfig } from './types';
+import { resolveStepElement, resolveStepElements, getStepBoundingRect } from './domResolver';
+declare function runRegisteredAction(name: string, ...args: any[]): Promise<any>;
+declare function runActionMap(actions?: TutorialActionMap): Promise<void>;
+declare function getContext(direction?: TutorialDirection): TutorialContext;
+declare function goToStep(indexOrId: number | string, direction?: TutorialDirection): Promise<void>;
+declare function nextStep(): Promise<void>;
+declare function prevStep(): Promise<void>;
+declare function registerSteps(customSteps: TutorialStep[]): void;
+declare function registerDeclarativeStep(step: TutorialStep): void;
+declare function updateDeclarativeStep(step: TutorialStep): void;
+declare function unregisterDeclarativeStep(id: string): void;
+declare function configureTutorial(options: Partial<TutorialOptions>): void;
+declare function startTutorial(customSteps?: TutorialStep[], force?: boolean): Promise<void>;
+declare function restartTutorial(): Promise<void>;
+declare function completeTutorial(): void;
+declare function endTutorial(markAsCompleted?: boolean): void;
+export declare function useTutorial(options?: Partial<TutorialOptions>): {
+    isActive: Ref<boolean, boolean>;
+    steps: import('vue').ComputedRef<TutorialStep[]>;
+    currentStepIndex: Ref<number, number>;
+    currentStep: import('vue').ComputedRef<TutorialStep | null>;
+    totalSteps: import('vue').ComputedRef<number>;
+    progress: import('vue').ComputedRef<number>;
+    isFirstStep: import('vue').ComputedRef<boolean>;
+    isLastStep: import('vue').ComputedRef<boolean>;
+    isTransitioning: Ref<boolean, boolean>;
+    lastDirection: Ref<TutorialDirection, TutorialDirection>;
+    activeBreakpoint: import('vue').ComputedRef<TutorialBreakpointName>;
+    viewportWidth: Ref<number, number>;
+    isMobileViewport: import('vue').ComputedRef<boolean>;
+    mergedBreakpoints: import('vue').ComputedRef<TutorialBreakpointsConfig>;
+    storageKey: import('vue').ComputedRef<string>;
+    globalOptions: Ref<{
+        storageKey?: string | undefined;
+        autoScroll?: boolean | undefined;
+        scrollBehavior?: ScrollBehavior | undefined;
+        spotlightPadding?: number | undefined;
+        cardWidth?: number | undefined;
+        showArrow?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        breakpoints?: {
+            xs?: number | undefined;
+            sm?: number | undefined;
+            md?: number | undefined;
+            lg?: number | undefined;
+            xl?: number | undefined;
+            xxl?: number | undefined;
+        } | undefined;
+        mobileSheetOnAuto?: boolean | undefined;
+        labels?: {
+            skipTutorial?: string | undefined;
+            previous?: string | undefined;
+            next?: string | undefined;
+            finish?: string | undefined;
+            waitingClick?: string | undefined;
+            interactiveBadge?: string | undefined;
+            defaultHint?: string | undefined;
+            stepCounter?: ((current: number, total: number) => string) | undefined;
+        } | undefined;
+        classes?: {
+            root?: string | undefined;
+            backdrop?: string | undefined;
+            shield?: string | undefined;
+            spotlight?: string | undefined;
+            card?: string | undefined;
+            arrow?: string | undefined;
+            header?: string | undefined;
+            badge?: string | undefined;
+            modeTag?: string | undefined;
+            body?: string | undefined;
+            title?: string | undefined;
+            content?: string | undefined;
+            hintBanner?: string | undefined;
+            progressContainer?: string | undefined;
+            progressBar?: string | undefined;
+            footer?: string | undefined;
+            skipButton?: string | undefined;
+            prevButton?: string | undefined;
+            nextButton?: string | undefined;
+            waitPill?: string | undefined;
+        } | undefined;
+        router?: {
+            currentRoute: {
+                value: {
+                    path: string;
+                };
+            };
+            push: (to: string) => Promise<any> | any;
+        } | undefined;
+    }, TutorialOptions | {
+        storageKey?: string | undefined;
+        autoScroll?: boolean | undefined;
+        scrollBehavior?: ScrollBehavior | undefined;
+        spotlightPadding?: number | undefined;
+        cardWidth?: number | undefined;
+        showArrow?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        breakpoints?: {
+            xs?: number | undefined;
+            sm?: number | undefined;
+            md?: number | undefined;
+            lg?: number | undefined;
+            xl?: number | undefined;
+            xxl?: number | undefined;
+        } | undefined;
+        mobileSheetOnAuto?: boolean | undefined;
+        labels?: {
+            skipTutorial?: string | undefined;
+            previous?: string | undefined;
+            next?: string | undefined;
+            finish?: string | undefined;
+            waitingClick?: string | undefined;
+            interactiveBadge?: string | undefined;
+            defaultHint?: string | undefined;
+            stepCounter?: ((current: number, total: number) => string) | undefined;
+        } | undefined;
+        classes?: {
+            root?: string | undefined;
+            backdrop?: string | undefined;
+            shield?: string | undefined;
+            spotlight?: string | undefined;
+            card?: string | undefined;
+            arrow?: string | undefined;
+            header?: string | undefined;
+            badge?: string | undefined;
+            modeTag?: string | undefined;
+            body?: string | undefined;
+            title?: string | undefined;
+            content?: string | undefined;
+            hintBanner?: string | undefined;
+            progressContainer?: string | undefined;
+            progressBar?: string | undefined;
+            footer?: string | undefined;
+            skipButton?: string | undefined;
+            prevButton?: string | undefined;
+            nextButton?: string | undefined;
+            waitPill?: string | undefined;
+        } | undefined;
+        router?: {
+            currentRoute: {
+                value: {
+                    path: string;
+                };
+            };
+            push: (to: string) => Promise<any> | any;
+        } | undefined;
+    }>;
+    configureTutorial: typeof configureTutorial;
+    registerSteps: typeof registerSteps;
+    registerDeclarativeStep: typeof registerDeclarativeStep;
+    updateDeclarativeStep: typeof updateDeclarativeStep;
+    unregisterDeclarativeStep: typeof unregisterDeclarativeStep;
+    startTutorial: typeof startTutorial;
+    restartTutorial: typeof restartTutorial;
+    nextStep: typeof nextStep;
+    prevStep: typeof prevStep;
+    goToStep: typeof goToStep;
+    endTutorial: typeof endTutorial;
+    completeTutorial: typeof completeTutorial;
+    resolveStepElement: typeof resolveStepElement;
+    resolveStepElements: typeof resolveStepElements;
+    getStepBoundingRect: typeof getStepBoundingRect;
+    registerTarget: (elOrRef: HTMLElement | Ref<HTMLElement | null>, configOrId: string | TutorialTargetConfig) => void;
+    wrapTutorialAction: <T extends (...args: any[]) => any>(stepOrTargetId: string, nativeFn: T, wrapOptions?: {
+        tutorialFn?: (...args: Parameters<T>) => any;
+        preventNativeWhenActive?: boolean;
+        autoAdvance?: boolean;
+    }) => (...args: Parameters<T>) => Promise<any>;
+    registerAction: (name: string, fn: (...args: any[]) => any) => void;
+    runRegisteredAction: typeof runRegisteredAction;
+    runActionMap: typeof runActionMap;
+    onFinish: (cb: (ctx: TutorialContext) => void) => () => boolean;
+    onStop: (cb: (ctx: TutorialContext) => void) => () => boolean;
+    onStepChange: (cb: (ctx: TutorialContext) => void) => () => boolean;
+    getContext: typeof getContext;
+};
+export declare const vTutorial: Directive<HTMLElement, string | TutorialTargetConfig | undefined>;
+export {};