iter(g15): toast 悬停暂停自动关闭

.ua/backlog.json

@@ -476,6 +476,14 @@
       "acceptance": "apps/demo/main.ts 的 buildToc 前置搜索框，输入按标题子串过滤目录链接（无匹配给空态提示），Esc 清空；不破坏 IntersectionObserver 高亮；npm run check 全绿",
       "status": "done",
       "notes": "buildToc 顶部加 type=search 输入框，input 事件按标题子串小写匹配过滤（hidden 属性 + .toc-link[hidden] 覆盖 display:block），无匹配显示 .toc-empty 空态，Esc 清空后恢复全量；IntersectionObserver 高亮逻辑未改动；样式写在 apps/demo/build.mjs 模板内"
+    },
+    {
+      "id": "g15",
+      "title": "toast 悬停暂停自动关闭",
+      "motivation": "toast 到点即消失，用户来不及读完长文案；悬停暂停是主流反馈组件的常规可用性细节",
+      "acceptance": "showToast 悬停时暂停倒计时、移出后按剩余时长继续；duration 语义不变；manifest 与 demo 说明同步；npm run check 全绿",
+      "status": "open",
+      "notes": "自补：既有组件可用性细节"
     }
   ]
 }

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T02:50:02.720Z",
+  "generatedAt": "2026-10-26T02:54:41.057Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -160,7 +160,7 @@
           "tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
           "avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色",
           "alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报",
-          "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
+          "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
           "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转",
           "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转",
           "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",

apps/demo/main.ts

@@ -344,7 +344,7 @@ const content = h(
   section(
     'sec-toast',
     '消息提示',
-    'toast 右上角堆叠弹出，默认 3s 自动淡出移除；语义色四档，出入场微动画。',
+    'toast 右上角堆叠弹出，默认 3s 自动淡出移除（悬停可暂停倒计时）；语义色四档，出入场微动画。',
     h(
       'div',
       { class: 'row' },

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T02:50:02.720Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T02:54:41.057Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1025,7 +1025,7 @@ API 速览：
 - tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）
 - avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色
 - alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报
-- toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
+- toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
 - tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转
 - popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转
 - skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画

llms.txt

@@ -65,7 +65,7 @@
   - tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）
   - avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色
   - alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报
-  - toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
+  - toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
   - tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转
   - popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转
   - skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画

packages/skin/ui/src/toast.ts

@@ -24,6 +24,9 @@ function dismiss(item: HTMLElement): void {
 export function showToast(props: ToastProps): HTMLElement {
   // —— 状态集中声明 ——
   const duration = props.duration ?? 3000; // 停留时长毫秒
+  let timer = 0;         // 自动关闭计时器句柄
+  let remain = duration; // 悬停暂停时记下的剩余时长
+  let startedAt = 0;     // 本段计时起点，用于折算剩余
   const item = h(
     'div',
     { class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}`, role: 'status', id: `ua-toast-${++seq}` },
@@ -35,7 +38,12 @@ export function showToast(props: ToastProps): HTMLElement {
 
   stack.appendChild(item);
   requestAnimationFrame(() => item.classList.add('ua-open')); // 下一帧入场，保证过渡生效
-  window.setTimeout(() => dismiss(item), duration);
+  const arm = (ms: number): void => { startedAt = Date.now(); timer = window.setTimeout(() => dismiss(item), ms); }; // 重新武装倒计时
+  if (duration > 0) {
+    arm(duration);
+    item.addEventListener('pointerenter', () => { window.clearTimeout(timer); remain -= Date.now() - startedAt; }); // 悬停暂停：记下剩余时长
+    item.addEventListener('pointerleave', () => arm(remain)); // 移出后按剩余时长继续
+  }
   return item;
 }
 

packages/skin/ui/ua.manifest.json

@@ -31,7 +31,7 @@
       "tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
       "avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色",
       "alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报",
-      "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
+      "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
       "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转",
       "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转",
       "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",