lumen-tour 0.2.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,173 @@
+# lumen-tour
+
+轻量级、零依赖的产品引导（Product Tour / Onboarding Guide）库。TypeScript + 原生 CSS，不依赖任何框架，可在 Vanilla / React / Vue 等任意项目中使用。
+
+## 特性
+
+- 🪶 **零依赖**：无运行时依赖，打包体积小
+- 🎯 **自动定位**：卡片自动选择目标下方/上方，放不下自动翻转，支持手动指定方向
+- ⌨️ **键盘导航**：`→` 下一步、`←` 上一步、`Esc` 跳过
+- 🎨 **可定制**：按钮文案、遮罩颜色、挖孔边距均可配置；支持完全自定义卡片内容
+- 🔄 **跟随重定位**：resize / scroll（含嵌套滚动容器）时自动跟随目标
+- 🧩 **步骤自动跳过**：target 无法解析的步骤自动跳过，不中断引导
+
+## 安装
+
+```bash
+npm install lumen-tour
+```
+
+引入样式（引导卡片的默认样式）：
+
+```ts
+import 'lumen-tour/style.css';
+```
+
+## 快速开始
+
+```ts
+import { createTour } from 'lumen-tour';
+import 'lumen-tour/style.css';
+
+const tour = createTour({
+  steps: [
+    {
+      target: '#logo',               // CSS 选择器或 HTMLElement
+      title: '欢迎来到 Lumen',
+      description: '这里是 logo，点击可返回首页。',
+      media: '/img/step1.png'        // 可选插图
+    },
+    {
+      target: document.querySelector('#menu')!,
+      title: '导航菜单',
+      description: '在这里切换功能模块。',
+      placement: 'right'             // 可选：手动指定卡片方向
+    }
+  ],
+  onNext: async (ctx) => {
+    // 异步校验示例：返回 false 阻止前进
+    const ok = await validateStep(ctx.index);
+    return ok;
+  },
+  onFinish: () => {
+    console.log('引导完成');
+  }
+});
+
+tour.start();
+```
+
+## API
+
+### `createTour(options: TourOptions): TourInstance`
+
+创建引导实例。
+
+### `TourOptions`
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `steps` | `TourStep[]` | （必填） | 引导步骤列表 |
+| `texts` | `Partial<ButtonTexts>` | 见下 | 覆盖按钮文案 |
+| `overlayColor` | `string` | `rgba(0,0,0,0.5)` | 遮罩颜色 |
+| `padding` | `number \| [number, number]` | `8` | 挖孔相对目标元素的内边距（px）；传 `number` 四周等距，传 `[x, y]` 则水平 `x`、垂直 `y` 分别控制 |
+| `hideSkipOnLast` | `boolean` | `false` | 到达最后一步时是否隐藏"跳过"按钮 |
+| `keyboard` | `boolean` | `true` | 是否启用键盘导航（→ 下一步、← 上一步、Esc 跳过） |
+| `onNext` | `(ctx) => void \| boolean \| Promise<void \| boolean>` | — | 点击"下一步"时触发；返回 `false` 可阻止前进（支持异步校验） |
+| `onPrev` | `(ctx) => void` | — | 点击"上一步"时触发 |
+| `onSkip` | `(ctx) => void` | — | 点击"跳过"或按 Esc 时触发 |
+| `onFinish` | `(ctx) => void` | — | 引导完成（最后一步点"完成"）或所有步骤无效结束时触发 |
+| `onStepChange` | `(ctx) => void` | — | 每次切换到新步骤后触发 |
+
+### `TourStep`
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `target` | `string \| HTMLElement` | （必填） | 目标元素，CSS 选择器或元素本身 |
+| `title` | `string` | — | 卡片标题，支持受限 HTML（经白名单清洗，见下） |
+| `description` | `string` | — | 卡片描述文本，支持受限 HTML（经白名单清洗，见下） |
+| `media` | `string` | — | 卡片顶部插图 URL |
+| `placement` | `Placement` | 自动 | 卡片相对目标的方向，共 12 个：基础方向 `'bottom' \| 'top' \| 'left' \| 'right'`（贴边 + 交叉轴居中）；组合方向 `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'`（贴上/下边，左/右缘对齐目标）与 `'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'`（贴左/右边，上/下缘对齐目标）。不传则自动（下方优先，放不下翻转上方）；指定方向主轴放不下时回退自动策略 |
+| `renderMedia` | `(container, ctx) => void` | — | 传入则完全接管卡片插图区（替代 `media` 图片），可渲染视频等任意 HTML |
+| `renderContent` | `(container, ctx) => void` | — | 传入则完全接管卡片内容区（按钮区除外），可渲染任意 HTML |
+
+> 注意：`media` / `title` / `description` 仅在未传 `renderContent` 时生效；`renderContent` 优先级最高；`renderMedia` 优先于 `media`，且不受 `renderContent` 影响（需接管整个卡片请用 `renderContent`）。
+
+### `title` / `description` 的富文本与 XSS 防护
+
+`title` 与 `description` 支持直接渲染 HTML（可加粗、插图、超链接等），但在渲染前会经过**白名单消毒**，剥离脚本与攻击向量：
+
+- **允许的标签**：`a b strong i em u ins s del strike code kbd pre span div p br hr ul ol li blockquote q cite h1-h6 img sub sup mark small abbr figure figcaption` 等；其余标签解包保留文本，`script`/`iframe`/`object`/`embed`/`svg`/`template`/`form` 等危险标签连同内容一并删除。
+- **允许的属性**：`href src alt title class style target rel width height` 等；所有 `on*` 事件处理器属性一律移除。
+- **协议白名单**：`href`/`src` 仅放行 `http(s)`、相对路径、锚点、`mailto`/`tel`；`javascript:`/`vbscript:`/`file:`、`data:text/`、`data:image/svg` 等危险协议清空（`img` 的 `data:image/png|jpeg|gif|webp` 放行）。
+- **内联 style 清洗**：阻断 `expression()`、`-moz-binding`、`behavior`、`url(javascript:)` 等 CSS 注入；外链 `<a target="_blank">` 自动补 `noopener noreferrer`。
+
+若需渲染不受限的 HTML，请改用 `renderContent` 自行控制（注意自行处理 XSS）。
+
+### `ButtonTexts`
+
+| 属性 | 默认值 |
+| --- | --- |
+| `prev` | `'上一步'` |
+| `next` | `'下一步'` |
+| `skip` | `'跳过'` |
+| `finish` | `'完成'` |
+
+### `StepContext`
+
+传给所有回调与 `renderContent` 的上下文：
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `index` | `number` | 当前步索引（从 0 开始） |
+| `total` | `number` | 总步数 |
+| `step` | `TourStep` | 当前步骤配置 |
+
+### `TourInstance` 方法
+
+| 方法 | 说明 |
+| --- | --- |
+| `start()` | 启动引导（从第一个有效步骤开始；可重复调用，已启动则忽略） |
+| `next()` | 前进到下一步（受 `onNext` 校验约束） |
+| `prev()` | 返回上一步 |
+| `skip()` | 跳过引导并触发 `onSkip` |
+| `finish()` | 结束引导并触发 `onFinish` |
+| `goTo(index)` | 跳转到指定步骤（越界忽略） |
+| `destroy()` | 销毁实例并移除 DOM；之后不可再用，需重新 `createTour()` |
+
+## 事件与回调说明
+
+- **`onNext` 拦截**：返回 `false`（或 `Promise<false>`）时停留在当前步。等待异步结果期间重复点击会被防重入，且用户若已 skip/finish/导航离开则不再前进。
+- **步骤自动跳过**：某步 `target` 在文档中找不到时会跳到下一个有效步骤；所有步骤都无效时直接结束并触发 `onFinish`。
+- **destroy 后调用**：任何实例方法都会抛错，提示重新 `createTour()`。
+
+## 自定义卡片内容
+
+```ts
+const tour = createTour({
+  steps: [
+    {
+      target: '#upload',
+      renderContent(container, ctx) {
+        container.innerHTML = `
+          <h3>上传文件（${ctx.index + 1}/${ctx.total}）</h3>
+          <p>支持拖拽上传，单文件不超过 100MB。</p>
+          <video src="/demo.mp4" controls></video>
+        `;
+      }
+    }
+  ]
+});
+```
+
+## 开发
+
+```bash
+npm run dev      # 启动 demo 页
+npm test         # 运行测试（vitest）
+npm run build    # 构建产物到 dist/
+```
+
+## License
+
+MIT

package/dist/create-tour.d.ts

@@ -0,0 +1,3 @@
+import { TourInstance, TourOptions } from './types';
+/** 创建一个新手引导实例 */
+export declare function createTour(options: TourOptions): TourInstance;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Tour } from './tour';
+export { createTour } from './create-tour';
+export { sanitizeHTML } from './sanitize';
+export type { TourStep, TourOptions, TourInstance, StepContext, ButtonTexts } from './types';
+export type { Placement } from './position';

package/dist/lumen-tour.css

@@ -0,0 +1,139 @@
+/*
+  样式隔离：所有选择器都挂在 .lumen-tour-root 下，选择器优先级为 (0,2,0)，
+  高于外部常见的单类选择器（如全局 reset 或业务样式 .lt-xxx），
+  避免宿主页面的样式轻易污染引导组件。
+*/
+.lumen-tour-root,
+.lumen-tour-root *,
+.lumen-tour-root .lt-highlight,
+.lumen-tour-root .lt-card,
+.lumen-tour-root .lt-card * {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
+    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* 引导根容器：全屏透明层，拦截引导期间对下层 DOM 的鼠标交互。
+   z-index 抬到常规页面浮层（导航栏/弹窗，常见 ≤9999）之上；
+   高亮框与卡片是它的子节点，天然位于拦截层之上可正常交互 */
+.lumen-tour-root {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+}
+
+/* 挖孔高亮框（遮罩由 box-shadow 生成） */
+.lumen-tour-root .lt-highlight {
+  position: fixed;
+  border-radius: 8px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  transition: all 0.25s ease;
+  pointer-events: none;
+}
+
+/* 卡片 */
+.lumen-tour-root .lt-card {
+  position: fixed;
+  width: 320px;
+  max-width: calc(100vw - 32px);
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  transition: top 0.25s ease, left 0.25s ease;
+}
+
+/* 指向目标的箭头：位置由 JS 计算在卡片与目标的 gap 中，这里只负责旋转 */
+.lumen-tour-root .lt-arrow {
+  position: absolute;
+  width: 24px;
+  height: 27px;
+  pointer-events: none;
+}
+
+.lumen-tour-root .lt-arrow-bottom { transform: rotate(90deg); }   /* 指向上 */
+.lumen-tour-root .lt-arrow-top { transform: rotate(-90deg); }     /* 指向下 */
+.lumen-tour-root .lt-arrow-left { transform: rotate(180deg); }    /* 指向右 */
+.lumen-tour-root .lt-arrow-right { transform: rotate(0deg); }     /* 指向左（原图方向） */
+
+.lumen-tour-root .lt-media img {
+  display: block;
+  width: 100%;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  background: #edf1fa;
+}
+
+.lumen-tour-root .lt-body {
+}
+
+.lumen-tour-root .lt-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1E1F1F;
+  line-height: 1.4;
+}
+
+.lumen-tour-root .lt-content {
+  padding: 16px 16px 8px 16px;
+}
+
+.lumen-tour-root .lt-desc {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #1E1F1F;
+  line-height: 1.6;
+}
+
+.lumen-tour-root .lt-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px 16px 16px;
+}
+
+.lumen-tour-root .lt-counter {
+  font-size: 14px;
+  color: rgba(142, 144, 145, 1);
+}
+
+.lumen-tour-root .lt-counter-cur {
+  /*color: #1f2329;*/
+  /*font-weight: 600;*/
+}
+
+.lumen-tour-root .lt-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lumen-tour-root .lt-btn {
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 8px;
+  height: 28px;
+  box-sizing: border-box;
+  border: 1px solid #E6E8EB;
+  background-color: #FFF;
+  color: #1E1F1F;
+  transition: background 0.15s ease;
+}
+
+.lumen-tour-root .lt-btn:hover {
+  border-color: #0080FF;
+  color: #0080FF;
+}
+
+.lumen-tour-root .lt-btn-primary {
+  background-color: #0080FF;
+  border-color: #0080FF;
+  color: #ffffff;
+}
+
+.lumen-tour-root .lt-btn-primary:hover {
+  background-color: #59acff;
+  border-color: #59acff;
+  color: #ffffff;
+}

package/dist/overlay.d.ts

@@ -0,0 +1,17 @@
+import { Rect } from './position';
+/**
+ * 挖孔高亮框：用巨大 box-shadow 形成半透明遮罩（纯视觉）。
+ * 拦截点击由根容器 .lumen-tour-root 完成，挖孔与卡片都是它的子节点。
+ */
+export declare class Overlay {
+    readonly el: HTMLElement;
+    private color;
+    constructor(root: HTMLElement, color?: string);
+    /** 按目标元素矩形（视口坐标）+ padding 更新挖孔位置 */
+    update(rect: Rect, padding: {
+        x: number;
+        y: number;
+    }): void;
+    hide(): void;
+    destroy(): void;
+}

package/dist/popover.d.ts

@@ -0,0 +1,40 @@
+import { PositionResult, Rect } from './position';
+import { ButtonTexts, StepContext } from './types';
+export interface PopoverHandlers {
+    onPrev(): void;
+    onNext(): void;
+    onSkip(): void;
+}
+/**
+ * 引导卡片：内容区（快捷模板或 renderContent）+ 按钮区。
+ * 按钮区始终由组件渲染，导航逻辑收口在 Tour 中。
+ */
+export declare class Popover {
+    readonly el: HTMLElement;
+    private contentEl;
+    private mediaEl;
+    private counterEl;
+    private prevBtn;
+    private nextBtn;
+    private skipBtn;
+    private texts;
+    private customTextKeys;
+    private hideSkipOnLast;
+    private placement?;
+    private arrowEl;
+    private root;
+    constructor(root: HTMLElement, texts: Partial<ButtonTexts>, handlers: PopoverHandlers, options?: {
+        hideSkipOnLast?: boolean;
+    });
+    /** 渲染某一步的卡片内容并定位 */
+    render(ctx: StepContext, targetRect: Rect): PositionResult;
+    /**
+     * 箭头定位在卡片与目标之间的 gap 中、指向目标（对齐 Figma：小号三角居中悬浮，
+     * 与卡片、目标之间各留空隙，不贴边）。
+     */
+    private updateArrow;
+    /** 不重渲染内容，仅按新目标矩形重新定位（resize/scroll 用） */
+    reposition(targetRect: Rect): void;
+    hide(): void;
+    destroy(): void;
+}

package/dist/position.d.ts

@@ -0,0 +1,33 @@
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface Viewport {
+    width: number;
+    height: number;
+}
+/**
+ * 卡片相对高亮框的方向。
+ * - top/bottom/left/right：贴对应边，交叉轴以高亮框为中心居中
+ * - topLeft/topRight/bottomLeft/bottomRight：贴上/下边，左/右缘对齐高亮框左/右缘
+ * - leftTop/leftBottom/rightTop/rightBottom：贴左/右边，上/下缘对齐高亮框上/下缘
+ */
+export type Placement = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export interface PositionResult {
+    top: number;
+    left: number;
+    placement: Placement;
+}
+/**
+ * 计算卡片（position: fixed）相对高亮框的位置（调用方需传入含 padding 的高亮矩形）。
+ * 未指定 preferred 时：优先高亮框下方；下方放不下翻转到上方。
+ * 指定 preferred（12 个方向之一）时优先使用该方向，主轴放不下再回退到自动策略；
+ * 交叉轴溢出只夹紧在视口内，不触发回退。
+ * 交叉轴以高亮框为中心居中；溢出视口时与高亮框对应边缘对齐（而非贴视口边缘）。
+ */
+export declare function computePosition(target: Rect, card: {
+    width: number;
+    height: number;
+}, viewport: Viewport, gap?: number, preferred?: Placement): PositionResult;

package/dist/sanitize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 最小化 HTML 消毒器：基于白名单（allowlist）。
+ * 仅保留安全的标签与属性，剥离脚本、事件处理器与危险协议，用于 title / description 的富文本渲染。
+ * 零依赖，解析发生在脱离浏览上下文的 inert document 中（不执行脚本、不加载图片）。
+ */
+/**
+ * 将任意 HTML 字符串清洗为安全的 DocumentFragment。
+ * 在脱离浏览上下文的 inert document 中解析，脚本不会执行、图片不会加载；
+ * 仅返回白名单内的节点。直接 appendChild 即可渲染。
+ */
+export declare function sanitizeHTML(html: string): DocumentFragment;

package/dist/tour.d.ts

@@ -0,0 +1,44 @@
+import { TourInstance, TourOptions } from './types';
+/**
+ * 引导状态机：管理当前步、遮罩、卡片与事件监听。
+ * 通过 createTour() 创建，不要直接 new。
+ */
+export declare class Tour implements TourInstance {
+    private options;
+    private root;
+    private overlay;
+    private popover;
+    private index;
+    private started;
+    private destroyed;
+    private advancing;
+    constructor(options: TourOptions);
+    private get ctx();
+    start(): void;
+    next(): void;
+    private tryAdvance;
+    prev(): void;
+    skip(): void;
+    finish(): void;
+    goTo(index: number): void;
+    destroy(): void;
+    /** 结束本轮引导（保留实例，可再次 start） */
+    private end;
+    /** 找到第一个 target 可解析的步骤索引 */
+    private firstValidIndex;
+    private moveTo;
+    private resolveTarget;
+    /** 目标上下留出的最小余量：保证卡片（约 400px）大概率能放在目标下方 */
+    private static readonly SCROLL_MARGIN;
+    /**
+     * 目标不在可视区域内、或离上下边缘不足 SCROLL_MARGIN 时自动滚动，
+     * 用 block:'center' 把目标带到视口中部（而不是刚好贴边），
+     * 上下都留出空间放卡片；scrollIntoView 同时兼容嵌套滚动容器。
+     * 随后立刻测量位置；CSS smooth 滚动场景由 scroll 监听跟随重定位。
+     */
+    private scrollIntoViewIfNeeded;
+    private targetRect;
+    private handleReposition;
+    private handleKeydown;
+    private assertAlive;
+}

package/dist/types.d.ts

@@ -0,0 +1,62 @@
+/** 每一步的上下文，传给所有回调与自定义渲染函数 */
+export interface StepContext {
+    /** 当前步索引（从 0 开始） */
+    index: number;
+    /** 总步数 */
+    total: number;
+    /** 当前步骤配置 */
+    step: TourStep;
+}
+export interface TourStep {
+    /** 必填：目标元素选择器或元素本身 */
+    target: string | HTMLElement;
+    /** 卡片相对目标的方向，默认自动（下方优先，放不下翻转到上方） */
+    placement?: import('./position').Placement;
+    /** 卡片标题，支持受限 HTML（白名单清洗：剥离 script/事件处理器/危险协议） */
+    title?: string;
+    /** 卡片描述文本，支持受限 HTML（同 title，经白名单清洗） */
+    description?: string;
+    /** 插图区图片 URL，可选 */
+    media?: string;
+    /** 传入则完全接管插图区（替代 media 图片） */
+    renderMedia?: (container: HTMLElement, ctx: StepContext) => void;
+    /** 传入则完全接管卡片内容区（按钮区除外） */
+    renderContent?: (container: HTMLElement, ctx: StepContext) => void;
+}
+export interface ButtonTexts {
+    prev: string;
+    next: string;
+    skip: string;
+    finish: string;
+}
+export interface TourOptions {
+    steps: TourStep[];
+    /** 覆盖任意按钮文案，默认 { prev:'上一步', next:'下一步', skip:'跳过', finish:'完成' } */
+    texts?: Partial<ButtonTexts>;
+    /** 遮罩颜色，默认 rgba(0,0,0,0.5) */
+    overlayColor?: string;
+    /**
+     * 挖孔相对目标元素的内边距，默认 8。
+     * 传 number 则四周等距；传 [x, y] 则水平 x、垂直 y。
+     */
+    padding?: number | [number, number];
+    /** 到达最后一步时是否隐藏"跳过"按钮，默认 false（保留显示） */
+    hideSkipOnLast?: boolean;
+    /** 键盘导航（→ 下一步、← 上一步、Esc 跳过），默认 true */
+    keyboard?: boolean;
+    /** 返回 false 可阻止前进（支持异步校验） */
+    onNext?: (ctx: StepContext) => void | boolean | Promise<void | boolean>;
+    onPrev?: (ctx: StepContext) => void;
+    onSkip?: (ctx: StepContext) => void;
+    onFinish?: (ctx: StepContext) => void;
+    onStepChange?: (ctx: StepContext) => void;
+}
+export interface TourInstance {
+    start(): void;
+    next(): void;
+    prev(): void;
+    skip(): void;
+    finish(): void;
+    goTo(index: number): void;
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "lumen-tour",
+  "version": "0.2.0",
+  "description": "Lightweight zero-dependency product tour / onboarding guide. TypeScript + native CSS.",
+  "author": "felixfjing",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felixfjing/lumen-tour.git"
+  },
+  "bugs": {
+    "url": "https://github.com/felixfjing/lumen-tour/issues"
+  },
+  "homepage": "https://github.com/felixfjing/lumen-tour#readme",
+  "type": "module",
+  "main": "./dist/lumen-tour.cjs",
+  "module": "./dist/lumen-tour.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/lumen-tour.es.js",
+      "require": "./dist/lumen-tour.cjs"
+    },
+    "./style.css": "./dist/lumen-tour.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "demo": "vite",
+    "build": "vite build && node -e \"require('fs').copyFileSync('src/style.css','dist/lumen-tour.css')\"",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "tour",
+    "onboarding",
+    "guide",
+    "intro",
+    "spotlight",
+    "vanilla",
+    "lightweight"
+  ],
+  "devDependencies": {
+    "happy-dom": "^20.11.8",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.11"
+  }
+}