@glowhop/vue-tour 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @glowhop/vue-tour
+
+## 1.0.0
+
+### Major Changes
+
+- e6da5bf: GlowTour.js V.1.0.0 release
+
+### Patch Changes
+
+- Updated dependencies [e6da5bf]
+  - @glowhop/core-tour@1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Glowhop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,28 @@
+# @glowhop/vue-tour
+
+ESM-only Vue 3 adapter with provide/inject refs for native reactive state. Content is Vue slot content. See the [Core guide](https://github.com/Glowhop/GlowTour.js/tree/main/packages/core) for workflow options and actions.
+
+Compatibility: Vue 3.3+ (`^3.3.0`). SSR: the root renders through `@vue/server-renderer` and browser work starts on mount; hydration is verified at package level and in a production Nuxt app. Full contract: [compatibility](https://github.com/Glowhop/GlowTour.js/blob/main/docs/compatibility.md).
+
+<!-- glow-tour:snippet vue-quick-start -->
+```vue
+<script setup lang="ts">
+import "@glowhop/styles-tour/default.css";
+import { GlowTourDefault, createGlowTour } from "@glowhop/vue-tour";
+const tour = createGlowTour();
+const workflow = tour.create("intro").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build();
+function start() { void tour.run(workflow); }
+</script>
+<template><button id="welcome">Welcome</button><button type="button" @click="start">Start tour</button><GlowTourDefault :tour="tour" /></template>
+```
+
+<!-- glow-tour:snippet vue-advanced -->
+```vue
+<script setup lang="ts">
+import { GlowTourRoot, GlowTourOverlay, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, GlowTourAdvanceTrigger, createGlowTour } from "@glowhop/vue-tour";
+const tour = createGlowTour(); const workflow = tour.create("custom").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build(); const start = () => void tour.run(workflow);
+</script>
+<template><button id="welcome" type="button" @click="start">Start</button><GlowTourRoot :tour="tour"><GlowTourOverlay /><GlowTourPopover><GlowTourHeader /><GlowTourContent /><GlowTourFooter><GlowTourAdvanceTrigger /></GlowTourFooter></GlowTourPopover></GlowTourRoot></template>
+```
+
+Use `GlowTourRoot`, `GlowTourOverlay`, `GlowTourPointer`, `GlowTourPopover`, `GlowTourHeader`, `GlowTourContent`, `GlowTourFooter`, and named triggers for composition. Vue refs and provide/inject are the native state surface. Static/dynamic targets, placement, interaction, scroll, callbacks, actions/events, cancellation, and cleanup follow Core.

package/components/default-tour.d.ts

@@ -0,0 +1,25 @@
+import type { GlowTour as CoreGlowTour } from "@glowhop/core-tour";
+import { type PropType } from "vue";
+import type { VueTourContent } from "../glow-tour.js";
+type Tour = CoreGlowTour<VueTourContent>;
+/** Default GlowTour.js component that renders all tour UI elements in a standard layout. */
+export declare const GlowTourDefault: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    idPrefix: {
+        type: StringConstructor;
+    };
+    tour: {
+        required: true;
+        type: PropType<Tour>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    idPrefix: {
+        type: StringConstructor;
+    };
+    tour: {
+        required: true;
+        type: PropType<Tour>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export {};

package/components/default-tour.js

@@ -0,0 +1,39 @@
+// packages/vue/src/components/default-tour.ts
+import { defineComponent, h } from "vue";
+import {
+  GlowTourAdvanceTrigger,
+  GlowTourBackTrigger,
+  GlowTourCancelTrigger,
+  GlowTourContent,
+  GlowTourFooter,
+  GlowTourHeader,
+  GlowTourOverlay,
+  GlowTourPointer,
+  GlowTourPopover,
+  GlowTourRoot
+} from "./tour-components.js";
+var GlowTourDefault = defineComponent({
+  name: "GlowTourDefault",
+  props: {
+    idPrefix: { type: String },
+    tour: { required: true, type: Object }
+  },
+  setup(props) {
+    return () => h(GlowTourRoot, { idPrefix: props.idPrefix, tour: props.tour }, () => [
+      h(GlowTourOverlay),
+      h(GlowTourPointer),
+      h(GlowTourPopover, null, () => [
+        h(GlowTourHeader),
+        h(GlowTourContent),
+        h(GlowTourFooter, null, () => [
+          h(GlowTourCancelTrigger),
+          h(GlowTourBackTrigger),
+          h(GlowTourAdvanceTrigger)
+        ])
+      ])
+    ]);
+  }
+});
+export {
+  GlowTourDefault
+};

package/components/tour-components.d.ts

@@ -0,0 +1,183 @@
+import type { GlowTour as CoreGlowTour, TourState } from "@glowhop/core-tour";
+import type { VNodeChild } from "vue";
+import { type PropType, type ShallowRef } from "vue";
+import type { VueTourContent } from "../glow-tour.js";
+type Tour = CoreGlowTour<VueTourContent>;
+/** Pointer direction content configuration for custom pointer content. */
+export interface PointerDirectionContent {
+    readonly top?: VNodeChild;
+    readonly bottom?: VNodeChild;
+    readonly left?: VNodeChild;
+    readonly right?: VNodeChild;
+}
+/**
+ * Retrieves the current tour state snapshot.
+ * Must be called within a GlowTourRoot component context.
+ * @returns A reactive shallow ref containing the current tour state.
+ */
+export declare function useTour(): ShallowRef<TourState<VueTourContent>>;
+/** Root container component for GlowTour.js. Provides tour context and manages the root binding. */
+export declare const GlowTourRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    idPrefix: {
+        type: StringConstructor;
+    };
+    tour: {
+        required: true;
+        type: PropType<Tour>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    idPrefix: {
+        type: StringConstructor;
+    };
+    tour: {
+        required: true;
+        type: PropType<Tour>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Header component displaying the current step's title. */
+export declare const GlowTourHeader: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Content component displaying the current step's content with live region. */
+export declare const GlowTourContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    ariaLive: {
+        default: string;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaLive: {
+        default: string;
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    ariaLive: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Footer component containing action buttons. Conditionally rendered based on tour step configuration. */
+export declare const GlowTourFooter: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Popover component containing the tour content with accessibility attributes. */
+export declare const GlowTourPopover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    role: {
+        default: string;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    role: {
+        default: string;
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    role: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Pointer component displaying directional indicators pointing to the target element. */
+export declare const GlowTourPointer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    directionContent: {
+        default: undefined;
+        type: PropType<PointerDirectionContent>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    directionContent: {
+        default: undefined;
+        type: PropType<PointerDirectionContent>;
+    };
+}>> & Readonly<{}>, {
+    directionContent: PointerDirectionContent;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Overlay component rendering a clipped SVG mask highlighting the target element. */
+export declare const GlowTourOverlay: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    ariaHidden: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    focusable: {
+        default: string;
+        type: StringConstructor;
+    };
+    viewBox: {
+        default: string;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaHidden: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    focusable: {
+        default: string;
+        type: StringConstructor;
+    };
+    viewBox: {
+        default: string;
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    ariaHidden: boolean;
+    focusable: string;
+    viewBox: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Button component for navigating to the previous step in the tour. */
+export declare const GlowTourBackTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    backLabel: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    backLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Button component for advancing to the next step or finishing the tour. */
+export declare const GlowTourAdvanceTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    finishLabel: {
+        type: StringConstructor;
+    };
+    advanceLabel: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    finishLabel: {
+        type: StringConstructor;
+    };
+    advanceLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Button component for canceling/skipping the tour. */
+export declare const GlowTourCancelTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    ariaLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export {};

package/components/tour-components.js

@@ -0,0 +1,289 @@
+// packages/vue/src/components/tour-components.ts
+import {
+  connectGlowTourRoot,
+  OVERLAY_IDLE_ATTRIBUTES,
+  OVERLAY_IDLE_STYLE,
+  OVERLAY_PATH_IDLE_ATTRIBUTES,
+  POINTER_IDLE_ATTRIBUTES,
+  POINTER_IDLE_STYLE,
+  POPOVER_IDLE_ATTRIBUTES,
+  POPOVER_IDLE_STYLE
+} from "@glowhop/core-tour/adapter";
+import {
+  defineComponent,
+  h,
+  inject,
+  mergeProps,
+  onBeforeUnmount,
+  provide,
+  shallowRef,
+  watch
+} from "vue";
+var DEFAULT_POINTER_DIRECTION_CONTENT = {
+  bottom: "\uD83D\uDC47",
+  left: "\uD83D\uDC48",
+  right: "\uD83D\uDC49",
+  top: "\uD83D\uDC46"
+};
+var TOUR_CONTEXT = Symbol("GlowTourContext");
+function componentName(name) {
+  return `GlowTour${name}`;
+}
+function useTourContext() {
+  const context = inject(TOUR_CONTEXT);
+  if (!context) {
+    throw new Error("GlowTour components must be rendered inside <GlowTourRoot tour={...}>.");
+  }
+  return context;
+}
+function useTourSnapshot(tour) {
+  const snapshot = shallowRef(tour.value.state.get());
+  watch(tour, (activeTour, _previousTour, onCleanup) => {
+    snapshot.value = activeTour.state.get();
+    onCleanup(activeTour.state.subscribe((next) => snapshot.value = next));
+  }, { immediate: true });
+  return snapshot;
+}
+function useTour() {
+  const { tour } = useTourContext();
+  return useTourSnapshot(tour);
+}
+function useStep() {
+  const context = useTourContext();
+  const snapshot = useTourSnapshot(context.tour);
+  return () => snapshot.value.currentStep?.currentProps ?? null;
+}
+function useBoundElement(bind) {
+  const context = useTourContext();
+  const element = shallowRef(null);
+  watch([context.binding, element], ([binding, activeElement], _previous, onCleanup) => {
+    if (!binding || !activeElement)
+      return;
+    onCleanup(bind(binding, activeElement));
+  }, { flush: "post" });
+  return element;
+}
+function isConsumerDisabled(attrs) {
+  return attrs.disabled === "" || attrs.disabled === true;
+}
+var GlowTourRoot = defineComponent({
+  name: componentName("Root"),
+  inheritAttrs: false,
+  props: {
+    idPrefix: { type: String },
+    tour: { required: true, type: Object }
+  },
+  setup(props, { attrs, slots }) {
+    const binding = shallowRef(null);
+    const tour = shallowRef(props.tour);
+    provide(TOUR_CONTEXT, { binding, tour });
+    let element = null;
+    let active;
+    const release = () => {
+      const current = active;
+      if (!current)
+        return;
+      active = undefined;
+      current.binding.release();
+      if (binding.value === current.binding)
+        binding.value = null;
+    };
+    const connect = () => {
+      const activeTour = props.tour;
+      const idPrefix = props.idPrefix;
+      tour.value = activeTour;
+      if (active?.root === element && active.tour === activeTour && active.idPrefix === idPrefix) {
+        return;
+      }
+      release();
+      if (!element)
+        return;
+      const nextBinding = connectGlowTourRoot(activeTour, {
+        idPrefix,
+        root: element
+      });
+      active = { binding: nextBinding, idPrefix, root: element, tour: activeTour };
+      binding.value = nextBinding;
+    };
+    const setRoot = (root) => {
+      element = root instanceof HTMLElement ? root : null;
+      connect();
+    };
+    watch([() => props.tour, () => props.idPrefix], connect);
+    onBeforeUnmount(release);
+    return () => h("section", mergeProps(attrs, { "data-glow-tour-root": "", ref: setRoot }), slots.default?.());
+  }
+});
+var GlowTourHeader = defineComponent({
+  name: componentName("Header"),
+  inheritAttrs: false,
+  setup(_props, { attrs }) {
+    const context = useTourContext();
+    const step = useStep();
+    return () => h("header", mergeProps(attrs, { "data-glow-tour-header": "", id: context.binding.value?.ids.title }), [step()?.title ?? null]);
+  }
+});
+var GlowTourContent = defineComponent({
+  name: componentName("Content"),
+  inheritAttrs: false,
+  props: { ariaLive: { default: "polite", type: String } },
+  setup(props, { attrs }) {
+    const context = useTourContext();
+    const step = useStep();
+    return () => h("div", mergeProps(attrs, {
+      "aria-live": props.ariaLive,
+      "data-glow-tour-content": "",
+      id: context.binding.value?.ids.description
+    }), [step()?.content ?? null]);
+  }
+});
+var GlowTourFooter = defineComponent({
+  name: componentName("Footer"),
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    const step = useStep();
+    return () => step()?.popover?.hideFooter ? null : h("footer", mergeProps(attrs, { "data-glow-tour-footer": "" }), slots.default?.());
+  }
+});
+var GlowTourPopover = defineComponent({
+  name: componentName("Popover"),
+  inheritAttrs: false,
+  props: { role: { default: "dialog", type: String } },
+  setup(props, { attrs, slots }) {
+    const context = useTourContext();
+    const element = useBoundElement((binding, activeElement) => binding.bindPopover(activeElement));
+    return () => h("section", mergeProps({ style: POPOVER_IDLE_STYLE }, attrs, {
+      "aria-describedby": context.binding.value?.ids.description,
+      "aria-hidden": POPOVER_IDLE_ATTRIBUTES["aria-hidden"],
+      "aria-labelledby": context.binding.value?.ids.title,
+      "data-glow-tour-popover": "",
+      id: context.binding.value?.ids.popover,
+      inert: POPOVER_IDLE_ATTRIBUTES.inert,
+      ref: element,
+      role: props.role,
+      tabindex: -1
+    }), slots.default?.());
+  }
+});
+var GlowTourPointer = defineComponent({
+  name: componentName("Pointer"),
+  inheritAttrs: false,
+  props: {
+    directionContent: { default: undefined, type: Object }
+  },
+  setup(props, { attrs }) {
+    const element = useBoundElement((binding, activeElement) => binding.bindPointer(activeElement));
+    return () => {
+      const content = { ...DEFAULT_POINTER_DIRECTION_CONTENT, ...props.directionContent };
+      return h("div", mergeProps({ style: POINTER_IDLE_STYLE }, attrs, {
+        "aria-hidden": POINTER_IDLE_ATTRIBUTES["aria-hidden"],
+        "data-glow-tour-pointer": "",
+        ref: element
+      }), Object.keys(DEFAULT_POINTER_DIRECTION_CONTENT).map((direction) => h("div", { "data-glow-tour-pointer-direction": direction }, [content[direction]])));
+    };
+  }
+});
+var GlowTourOverlay = defineComponent({
+  name: componentName("Overlay"),
+  inheritAttrs: false,
+  props: {
+    ariaHidden: { default: true, type: Boolean },
+    focusable: { default: "false", type: String },
+    viewBox: { default: "0 0 0 0", type: String }
+  },
+  setup(props, { attrs, slots }) {
+    const element = useBoundElement((binding, activeElement) => binding.bindOverlay(activeElement));
+    return () => h("svg", mergeProps({ style: OVERLAY_IDLE_STYLE }, attrs, {
+      "aria-hidden": props.ariaHidden,
+      "data-glow-tour-allow-interaction": OVERLAY_IDLE_ATTRIBUTES["data-glow-tour-allow-interaction"],
+      "data-glow-tour-overlay": "",
+      focusable: props.focusable,
+      inert: OVERLAY_IDLE_ATTRIBUTES.inert,
+      ref: element,
+      role: "presentation",
+      viewBox: props.viewBox
+    }), [
+      h("path", {
+        cursor: OVERLAY_PATH_IDLE_ATTRIBUTES.cursor,
+        "data-glow-tour-overlay-path": "",
+        "fill-rule": "evenodd",
+        opacity: OVERLAY_PATH_IDLE_ATTRIBUTES.opacity,
+        "pointer-events": OVERLAY_PATH_IDLE_ATTRIBUTES["pointer-events"]
+      }),
+      slots.default?.()
+    ]);
+  }
+});
+function trigger(marker, capabilityDisabled, label, ariaLabel, attrs, slots) {
+  const context = useTourContext();
+  return () => {
+    const consumerDisabled = isConsumerDisabled(attrs);
+    const disabled = capabilityDisabled() || consumerDisabled;
+    const buttonProps = {
+      "aria-controls": context.binding.value?.ids.popover,
+      "aria-disabled": disabled ? "true" : "false",
+      "aria-label": attrs["aria-label"] ?? ariaLabel() ?? label(),
+      "data-glow-tour-cancel-trigger": marker === "cancel" ? "" : undefined,
+      "data-glow-tour-consumer-disabled": consumerDisabled ? "true" : undefined,
+      "data-glow-tour-advance-trigger": marker === "advance" ? "" : undefined,
+      "data-glow-tour-previous-trigger": marker === "previous" ? "" : undefined,
+      disabled,
+      type: "button"
+    };
+    return h("button", mergeProps(attrs, buttonProps), slots.default?.(buttonProps) ?? label());
+  };
+}
+var GlowTourBackTrigger = defineComponent({
+  name: componentName("BackTrigger"),
+  inheritAttrs: false,
+  props: { ariaLabel: { type: String }, backLabel: { type: String } },
+  setup(props, { attrs, slots }) {
+    const context = useTourContext();
+    const snapshot = useTourSnapshot(context.tour);
+    const step = useStep();
+    const renderTrigger = trigger("previous", () => !snapshot.value.canPrevious || step()?.popover?.disablePreviousButton === true, () => props.backLabel ?? "Back step", () => props.ariaLabel, attrs, slots);
+    return () => step()?.popover?.hidePreviousButton ? null : renderTrigger();
+  }
+});
+var GlowTourAdvanceTrigger = defineComponent({
+  name: componentName("AdvanceTrigger"),
+  inheritAttrs: false,
+  props: {
+    ariaLabel: { type: String },
+    finishLabel: { type: String },
+    advanceLabel: { type: String }
+  },
+  setup(props, { attrs, slots }) {
+    const context = useTourContext();
+    const snapshot = useTourSnapshot(context.tour);
+    const step = useStep();
+    const renderTrigger = trigger("advance", () => !snapshot.value.canAdvance || step()?.popover?.disableAdvanceButton === true, () => {
+      return snapshot.value.isLastStep ? props.finishLabel ?? "Finish tour" : props.advanceLabel ?? "Advance step";
+    }, () => props.ariaLabel, attrs, slots);
+    return () => step()?.popover?.hideAdvanceButton ? null : renderTrigger();
+  }
+});
+var GlowTourCancelTrigger = defineComponent({
+  name: componentName("CancelTrigger"),
+  inheritAttrs: false,
+  props: { ariaLabel: { type: String } },
+  setup(props, { attrs, slots }) {
+    const context = useTourContext();
+    const snapshot = useTourSnapshot(context.tour);
+    const renderTrigger = trigger("cancel", () => !snapshot.value.canCancel, () => "Skip", () => props.ariaLabel, attrs, slots);
+    return () => snapshot.value.canCancel ? renderTrigger() : null;
+  }
+});
+export {
+  useTour,
+  GlowTourRoot,
+  GlowTourPopover,
+  GlowTourPointer,
+  GlowTourOverlay,
+  GlowTourHeader,
+  GlowTourFooter,
+  GlowTourContent,
+  GlowTourCancelTrigger,
+  GlowTourBackTrigger,
+  GlowTourAdvanceTrigger
+};

package/config.d.ts

@@ -0,0 +1,37 @@
+import type { BuiltinAction, ConfigValidationIssue, EventHandlerConfig as CoreEventHandlerConfig, LifecycleActionRef as CoreLifecycleActionRef, StepActionRef as CoreStepActionRef, StepConfig as CoreStepConfig, TransitionActionRef as CoreTransitionActionRef, WorkflowConfig as CoreWorkflowConfig, WorkflowDefinitionFromConfig as CoreWorkflowDefinitionFromConfig, CreateWorkflowFromConfigOptions, ValidateWorkflowConfigOptions } from "@glowhop/core-tour/config";
+import { ConfigValidationError } from "@glowhop/core-tour/config";
+import type { VueTourContent } from "./glow-tour.js";
+export type { BuiltinAction, ConfigValidationIssue, CreateWorkflowFromConfigOptions, ValidateWorkflowConfigOptions, };
+export { ConfigValidationError };
+/** Vue workflow config: `WorkflowConfig` pre-bound to `VueTourContent`. */
+export type WorkflowConfig = CoreWorkflowConfig<VueTourContent>;
+/** Vue step config: `StepConfig` pre-bound to `VueTourContent`. */
+export type StepConfig = CoreStepConfig<VueTourContent>;
+/** Vue event handler config: `EventHandlerConfig` pre-bound to `VueTourContent`. */
+export type EventHandlerConfig = CoreEventHandlerConfig<VueTourContent>;
+/** Vue step action reference: `StepActionRef` pre-bound to `VueTourContent`. */
+export type StepActionRef = CoreStepActionRef<VueTourContent>;
+/** Vue transition action reference: `TransitionActionRef` pre-bound to `VueTourContent`. */
+export type TransitionActionRef = CoreTransitionActionRef<VueTourContent>;
+/** Vue lifecycle action reference: `LifecycleActionRef` pre-bound to `VueTourContent`. */
+export type LifecycleActionRef = CoreLifecycleActionRef<VueTourContent>;
+/** Vue workflow definition produced from config, pre-bound to `VueTourContent`. */
+export type WorkflowDefinitionFromConfig = CoreWorkflowDefinitionFromConfig<VueTourContent>;
+/**
+ * Builds a Vue `WorkflowDefinition` from a JSON-serializable config, pre-bound to
+ * `VueTourContent` so the result is accepted by `createGlowTour().run(...)` with no generic
+ * and no cast.
+ * @param config The parsed JSON (or equivalent plain object) to build from.
+ * @param options Options; see `CreateWorkflowFromConfigOptions`.
+ * @throws {ConfigValidationError} When the config is invalid.
+ * @returns A frozen `WorkflowDefinition` with `.source` attached.
+ */
+export declare function createWorkflowFromConfig(config: unknown, options?: CreateWorkflowFromConfigOptions): WorkflowDefinitionFromConfig;
+/**
+ * Validates and narrows an unknown value to a Vue `WorkflowConfig`.
+ * @param config The parsed JSON (or equivalent plain object) to validate.
+ * @param options Validation options; see `ValidateWorkflowConfigOptions`.
+ * @throws {ConfigValidationError} When one or more issues are found.
+ * @returns The same value, narrowed to `WorkflowConfig`.
+ */
+export declare function validateWorkflowConfig(config: unknown, options?: ValidateWorkflowConfigOptions): WorkflowConfig;

package/config.js

@@ -0,0 +1,17 @@
+// packages/vue/src/config.ts
+import {
+  ConfigValidationError,
+  createWorkflowFromConfig as createCoreWorkflowFromConfig,
+  validateWorkflowConfig as validateCoreWorkflowConfig
+} from "@glowhop/core-tour/config";
+function createWorkflowFromConfig(config, options = {}) {
+  return createCoreWorkflowFromConfig(config, options);
+}
+function validateWorkflowConfig(config, options = {}) {
+  return validateCoreWorkflowConfig(config, options);
+}
+export {
+  validateWorkflowConfig,
+  createWorkflowFromConfig,
+  ConfigValidationError
+};

package/glow-tour.d.ts

@@ -0,0 +1,20 @@
+import type { GlowTour as CoreGlowTour, StartOptions as CoreStartOptions, StepPropsStore as CoreStepPropsStore, TourState as CoreTourState, WorkflowDefinition as CoreWorkflowDefinition, GlowTourOptions } from "@glowhop/core-tour";
+import type { VNodeChild } from "vue";
+/** Vue content type: any valid Vue VNode child. */
+export type VueTourContent = VNodeChild;
+/** Vue tour controller instance. */
+export type Tour = CoreGlowTour<VueTourContent>;
+/** Vue tour state snapshot. */
+export type TourState = CoreTourState<VueTourContent>;
+/** Vue step properties store. */
+export type StepPropsStore = CoreStepPropsStore<VueTourContent>;
+/** Vue workflow definition. */
+export type WorkflowDefinition = CoreWorkflowDefinition<VueTourContent>;
+/** Vue tour start options. */
+export type StartOptions = CoreStartOptions<VueTourContent>;
+/**
+ * Creates a new GlowTour.js instance for Vue.
+ * @param options Tour options for error handling.
+ * @returns A tour controller ready to run Vue workflows.
+ */
+export declare function createGlowTour(options?: GlowTourOptions): Tour;

package/glow-tour.js

@@ -0,0 +1,8 @@
+// packages/vue/src/glow-tour.ts
+import { createGlowTour as createCoreGlowTour } from "@glowhop/core-tour";
+function createGlowTour(options = {}) {
+  return createCoreGlowTour(options);
+}
+export {
+  createGlowTour
+};

package/index.d.ts

@@ -0,0 +1,6 @@
+export type { GlowTourOptions } from "@glowhop/core-tour";
+export { GlowTourDefault } from "./components/default-tour.js";
+export type { PointerDirectionContent } from "./components/tour-components.js";
+export { GlowTourAdvanceTrigger, GlowTourBackTrigger, GlowTourCancelTrigger, GlowTourContent, GlowTourFooter, GlowTourHeader, GlowTourOverlay, GlowTourPointer, GlowTourPopover, GlowTourRoot, useTour, } from "./components/tour-components.js";
+export type { StartOptions, StepPropsStore, Tour, TourState, VueTourContent, WorkflowDefinition, } from "./glow-tour.js";
+export { createGlowTour } from "./glow-tour.js";

package/index.js

@@ -0,0 +1,31 @@
+// packages/vue/src/index.ts
+import { GlowTourDefault } from "./components/default-tour.js";
+import {
+  GlowTourAdvanceTrigger,
+  GlowTourBackTrigger,
+  GlowTourCancelTrigger,
+  GlowTourContent,
+  GlowTourFooter,
+  GlowTourHeader,
+  GlowTourOverlay,
+  GlowTourPointer,
+  GlowTourPopover,
+  GlowTourRoot,
+  useTour
+} from "./components/tour-components.js";
+import { createGlowTour } from "./glow-tour.js";
+export {
+  useTour,
+  createGlowTour,
+  GlowTourRoot,
+  GlowTourPopover,
+  GlowTourPointer,
+  GlowTourOverlay,
+  GlowTourHeader,
+  GlowTourFooter,
+  GlowTourDefault,
+  GlowTourContent,
+  GlowTourCancelTrigger,
+  GlowTourBackTrigger,
+  GlowTourAdvanceTrigger
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@glowhop/vue-tour",
+  "version": "1.0.0",
+  "description": "Vue 3 adapter for GlowTour.js.",
+  "license": "MIT",
+  "homepage": "https://github.com/Glowhop/GlowTour.js#readme",
+  "bugs": {
+    "url": "https://github.com/Glowhop/GlowTour.js/issues"
+  },
+  "keywords": [
+    "tour",
+    "guided-tour",
+    "vue",
+    "onboarding"
+  ],
+  "engines": {
+    "node": ">=18.19.1"
+  },
+  "files": [
+    "**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Glowhop/GlowTour.js.git",
+    "directory": "packages/vue"
+  },
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./config": {
+      "types": "./config.d.ts",
+      "import": "./config.js"
+    }
+  },
+  "dependencies": {
+    "@glowhop/core-tour": "1.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "sideEffects": false
+}