@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/{design-system249.js.map → design-system267.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system249.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system267.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system269.js

@@ -0,0 +1,8 @@
+import e from "./design-system267.js";
+/* empty css                 */
+//#region src/components/BTour/BTour.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system269.js.map

package/dist/design-system269.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system269.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/{design-system252.js → design-system270.js}

@@ -580,4 +580,4 @@ var re = ["aria-multiselectable"], ie = [
 //#endregion
 export { g as default };
 
-//# sourceMappingURL=design-system252.js.map
+//# sourceMappingURL=design-system270.js.map