iter(g53): 新增 tour 引导漫游组件

apps/demo/main.ts

@@ -60,6 +60,7 @@ import {
   textField,
   timeline,
   toast,
+  tour,
   tooltip,
 } from '@ui-arch/ui';
 import type { RowKey } from '@ui-arch/ui';
@@ -688,6 +689,17 @@ const content = h(
       button({ label: '错误（可关）', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500，请稍后重试', variant: 'danger' }) }),
     ),
   ),
+  section(
+    'sec-tour',
+    '引导漫游',
+    'tour({ steps }) 返回句柄：start() 从第一步播放，聚光框按目标选择器定位、卡片自动选上下方位，Esc / × 跳过走 onClose。',
+    h(
+      'div',
+      { class: 'row' },
+      button({ label: '开始引导（3 步）', variant: 'primary', onClick: () => demoTour.start() }),
+      h('span', { class: 'desc' }, '三步分别指向本段、分栏段与返回顶部段，滚动后位置会实时重算。'),
+    ),
+  ),
   section(
     'sec-colorpicker',
     '颜色选择',
@@ -967,6 +979,18 @@ const content = h(
   ),
 );
 
+// 引导漫游实例：根节点需挂到 body（fixed 定位，不参与布局）
+const demoTour = tour({
+  steps: [
+    { target: '#sec-tour', title: '引导漫游', description: '聚光框按 target 选择器定位，卡片会自动挑空间更大的一侧。' },
+    { target: '#sec-splitter', title: '可拖拽分栏', description: '分隔条支持指针拖拽与方向键微调，双击复位。' },
+    { target: '#sec-backtop', title: '返回顶部', description: '滚过 300px 后右下角浮现，外环是已滚比例。' },
+  ],
+  onFinish: () => toast.success('引导完成'),
+  onClose: () => toast.info('已跳过引导'),
+});
+document.body.append(demoTour.el);
+
 const toc = h('aside', { class: 'toc' }, h('div', { class: 'toc-title' }, '目录')); // 目录项由 buildToc 填充
 const app = h('div', { class: 'shell' }, toc, content);