@icen.ai/ui 0.10.0 → 0.11.0

package/README.md

@@ -1,19 +1,28 @@
 # @icen.ai/ui
 
-icen.ai 的设计系统。组件、图表和 AI 界面，共用一套设计令牌——换肤不用改代码，UI 也能直接交给模型调用。无框架，零运行时依赖，MIT。
+[![npm](https://img.shields.io/npm/v/@icen.ai/ui)](https://www.npmjs.com/package/@icen.ai/ui)
+[![CI](https://github.com/icen-ai/ui/actions/workflows/ci.yml/badge.svg)](https://github.com/icen-ai/ui/actions/workflows/ci.yml)
+[![license](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)
+
+icen.ai 的设计系统。组件、图表和 AI 界面共用一套设计令牌——换肤不改代码，UI 可直接交给模型调用。无框架，零运行时依赖，MIT。
 
 - 文档与实时演示：<https://ui.icen.ai>
-- 安装：`bun add @icen.ai/ui`
+- 安装：`bun add @icen.ai/ui`（或 `npm i`）
 
 ## 快速开始
 
 ```css
-@import '@icen.ai/ui/tokens.css';   /* 设计令牌：预设 + 明暗 + 原语 */
-@import '@icen.ai/ui/ui.css';       /* 全部组件；也可只引 ./components/btn.css */
+/* 全量一行（ui.css 已含 tokens + base + 全部组件） */
+@import '@icen.ai/ui/ui.css';
+
+/* 或按需：tokens 底座 + 单引组件 CSS
+@import '@icen.ai/ui/tokens.css';
+@import '@icen.ai/ui/components/btn.css'; */
 ```
 
 ```html
 <html data-icen-preset="piano" data-icen-theme="dark">
+<!-- 明暗是二态契约：暗色 = 写 data-icen-theme="dark"；亮色 = 移除该属性（没有 "light" 值） -->
 ```
 
 ```ts
@@ -25,75 +34,55 @@ toast.success('已保存');
 renderLine(el, { labels, series }); // 函数式组件：无 init，直接渲染
 ```
 
-每个组件一页文档，页面里就是可点的真实组件：<https://ui.icen.ai/components/>
+纯静态页面走 `<link rel="stylesheet" href="./node_modules/@icen.ai/ui/ui.css">`；ES module 直引需经静态服务器（`file://` 直开会被浏览器 CORS 拦截）。更多入坑答案见 [docs/faq.md](docs/faq.md)。
 
 ## 里面有什么
 
-**组件。** 129 个无框架组件——表单、浮层、导航、数据展示、反馈。纯 CSS 契约加按需行为 JS：类名统一 `.icen-*`，钩子统一 `data-icen-*`，变量统一 `--icen-*`，产物全部进 cascade layers，与任何第三方 CSS 共存零冲突。
-
-**图表。** 一份 JSON，十三种图。悬停、点击、右键、图例开关全部内建，不依赖任何图表库。缩放、降采样、标记线、流式追加、PNG 导出都写在规格里。
-
-**AI 界面。** 做 AI 产品要用的零件都在：对话、推理、工具调用、审批、任务清单、用量与审计。兼容 OpenAI / Anthropic / MCP / AI SDK 四家协议，token 和成本自动记账。一行 `bindComposer` 接通输入台、流式渲染与上下文环；UI 能力可以注册成模型直接调用的工具。
-
-**知识库。** 32 个组件覆盖 RAG 全链路：摄取、检索、问数、治理、权限。引用可溯源，过程可观测，答案可验证；权限域对授权侧诚实、对受限侧沉默。
-
-**主题。** 六套预设，明暗双模，现代、中式、苏式与像素四种原语，全部挂在 `<html>` 的 data 属性上。配色与原语独立：中式推荐「东韵」，苏式推荐「巨构」，也可自由组合其它主题。自建品牌只需在自家 CSS 写一块 token 面，组件代码一行不动。
-
-**React / Vue。** 官方薄封装 `@icen.ai/ui/react`、`@icen.ai/ui/vue`：只做生命周期接线和事件桥，底下是同一个命令式内核。详见 <https://ui.icen.ai/frameworks/>
-
-还内建：RTL 全面支持（逻辑属性 + 方向图标自动镜像，`<html dir="rtl">` 即生效）、i18n 文案注册表（683 个 key，中英双语，`setIcenLocale` 一句切换）、统一事件体系（`onIcen` 一个入口：类型化、选择器委托、策略层）、表单校验（原生约束即 schema，零新词汇）。
+- **组件**：无框架组件库（表单 / 浮层 / 导航 / 数据展示 / 反馈），纯 CSS 契约 + 按需行为 JS。类名 `icen-*`、钩子 `data-icen-*`、变量 `--icen-*`，产物全部进 cascade layers，与任何第三方 CSS 共存零冲突。
+- **图表**：一份 JSON 十三种图，悬停/点击/图例开关内建，不依赖图表库。
+- **AI 界面**：对话 / 推理 / 工具调用 / 审批 / 输入台 / 用量审计；兼容 OpenAI / Anthropic / MCP / AI SDK 协议；UI 能力可注册成模型直接调用的工具。
+- **知识库**：覆盖 RAG 全链路的组件族（摄取 / 检索 / 问数 / 治理 / 权限），权限域 fail-closed。
+- **主题**：色彩预设 × 设计原语 × 明暗，全部挂在 `<html>` data 属性上；自建品牌只需在自家 CSS 写一块 token 面。
+- **React / Vue 官方薄封装**：`@icen.ai/ui/react`、`/vue`，只做生命周期接线与事件桥；兼容契约见 [docs/frameworks.md](docs/frameworks.md)。
+- **RTL 全面支持**（逻辑属性 + 方向图标自动镜像）、**i18n 文案注册表**（中英双语，`setIcenLocale` 切换）、统一事件体系（`onIcen` 一个入口）。
 
 ## 工程信任
 
 生产环境依赖一个 0.x 库之前该问的问题，直接给证据：
 
-- **800+ 个测试 + 10 项纪律守卫**挂在每个 PR 的 CI 上，本地 `bun run verify` 同口径。
-- **[SECURITY.md](https://github.com/icen-ai/ui/blob/main/SECURITY.md)**：支持版本矩阵与漏洞响应承诺；textContent-only 渲染、权限域 fail-closed、OIDC provenance 发布链，逐条可验证。
-- **[CONTRIBUTING.md](https://github.com/icen-ai/ui/blob/main/CONTRIBUTING.md)**：加组件的完整仪式与守卫速查表。
-- **[docs/versioning.md](https://github.com/icen-ai/ui/blob/main/docs/versioning.md)**：0.x 破坏性变更纪律——只在 minor 发生，CHANGELOG 逐条写明契约变化。
-- **发布链**：`git tag v<x.y.z>` → GitHub Actions 经 OIDC trusted publishing 发 npm，无长期 token，每次发布带 provenance 可审计。
+- **全部测试与纪律守卫挂在每个 PR 的 CI 上**，本地 `bun run verify` 同口径；覆盖率地板与体积预算以棘轮文件锁在 [docs/contracts/](docs/contracts/)。
+- **稳定性分层**：Core 走 1.0 冻结轨道，图表 / AI / KB 标 Beta 随 minor 演进；事实源 `docs/contracts/tiers.json`，组件页徽标同源。
+- **公共契约机器快照**：`docs/contracts/snapshot.json` 六个面（类名 / 属性 / 变量 / 事件 / 导出 / 类型签名），`bun run contracts:diff` 做 tag 间对比；破坏性变更只进 minor 且 CHANGELOG 逐条公告（CI 强制联动）。
+- [SECURITY.md](SECURITY.md)：支持矩阵与漏洞响应承诺；textContent-only 渲染、权限域 fail-closed、URL 协议守卫，逐条有测试或守卫背书。
+- [CONTRIBUTING.md](CONTRIBUTING.md)：加组件的仪式与 PR 规范。
+- [docs/versioning.md](docs/versioning.md)：版本与稳定性政策（分层 / 0.x 纪律 / 弃用 / 主题预算 / 1.0 门槛 / 支持周期）。
+- [docs/roadmap.md](docs/roadmap.md)：0.11 → 0.13 → 1.0 收敛线与外部验收门槛；[docs/acceptance.md](docs/acceptance.md)：AI/KB 验收矩阵；[docs/dogfood.md](docs/dogfood.md)：陌生人验收记录。
+- **发布链**：`git tag v<x.y.z>` → CI 全门 → OIDC trusted publishing 发 npm（provenance，无长期 token）→ 自动建 GitHub Release。
 
-## 文档站
+## 消费方接入
 
-`site/` 是公开文档站：首页、色彩色板、129 个组件页、[知识库工作台](https://ui.icen.ai/kb/)（全真接线的成品页，导航栏实时换肤换明暗）。push 到 `main` 即由 Cloudflare Pages 自动构建（根目录 `site`，命令 `bun install && bun run build`，输出 `dist`），无需手动部署。
+- **包引入（推荐）**：`bun add @icen.ai/ui`。CSS 全量一行 `./ui.css`，或按需 `./tokens.css` + `./components/<name>.css`；行为走 `./kit/<slug>` 一行入口。
+- **vendor 复制**：锁定版本或离线构建场景，把 `dist/` 复制进自家仓库。
+- **给 AI 代理**：包内 `AGENTS.md` + `dist/**/*.d.mts`；站点 <https://ui.icen.ai/llms.txt>（索引）与 `/llms-full.txt`（全文 + 类型面）。
 
-## 构建
+## 构建与验证
 
 ```bash
 bun install
-bun run build    # tsup + CSS 拼合 + 设计 token 导出 → dist/
-bun run verify   # tsc + 守卫 + 800+ 测试 + 构建，四道门
+bun run verify   # tsc + 守卫 + 测试 + 构建 + 体积预算（CI 另跑覆盖率、包面检查与 e2e）
 ```
 
-产物：`dist/tokens.css`、`dist/ui.css`、`dist/base.css`、`dist/components/*`、`dist/behaviors/*.mjs` + `.d.mts`、`dist/registry.json`、`dist/index.mjs`。
-
-## 设计 token 导出
-
-构建链末尾自动导出设计工具格式（`scripts/dtcg.mjs` + `scripts/design-tokens.mjs`）；设计侧改 token 可走插件回灌，闭环到 `src/tokens/`：
-
-- `dist/tokens/dtcg.json`：W3C DTCG 经典版，每个预设的明暗两态各一份有效级联结果；`var()` 引用转为规范别名，文件内自洽、无环。
-- `dist/tokens/tokens-studio.json`：Tokens Studio 的 `$themes` 覆盖全部预设的明暗矩阵，导入后按 theme 切换即对齐 CSS。
-- `dist/tokens/figma.variables.json`：Figma Variables，每预设一个 collection，light / dark 双 mode；rem 按 ×16 记 px。
-- **诚实口径**：color-mix、box-shadow 等规范无法表示的值一律跳过并打印清单，不猜、不静默。
+产物：`dist/`（ui.css / tokens.css / base.css / components/ / behaviors/ + .d.mts / registry.json / CLI）。
+设计 token 另导出 DTCG / Tokens Studio / Figma Variables 三格式（`dist/tokens/`）；规范无法表示的值明示跳过，不猜不静默。
 
 ## 目录
 
 ```
-src/tokens/       # 设计令牌：色彩、原语、字体（单一事实源 themes.json，改动后 bun run colors）
-src/base.css      # 元素基线 + 6 个交互基元 + a11y 工具类
-src/components/   # 74 个组件 CSS
-src/behaviors/    # 86 个行为模块（全部 SSR 守卫 + 幂等 init + 返回销毁函数）
-docs/spec/        # 族规格（知识库族、设计原语…）
+src/tokens/       # 设计令牌（单一事实源 themes.json，改动后 bun run colors）
+src/base.css      # 元素基线 + 交互基元 + a11y 工具类
+src/components/   # 组件 CSS（每文件头注释 = DOM 契约）
+src/behaviors/    # 行为模块（SSR 守卫 + 幂等 init + 返回销毁函数）
+docs/             # 治理文档（versioning / contracts / testing / roadmap…）与 spec
 site/             # 文档站（独立 Astro 应用）
-scripts/          # 构建与导出脚本
+scripts/          # 构建、守卫与契约工具
 ```
-
-## 消费方接入
-
-- **包引入（推荐）**：`bun add @icen.ai/ui`，按 `./tokens.css` / `./ui.css` / `./kit/<slug>` 引入。
-- **vendor 复制**：锁定版本或离线构建场景，把 `dist/` 复制进自家仓库（accounts 走这条路，`bun run sync:ui`）。
-- **给 AI 代理**：包内 `AGENTS.md` + `dist/**/*.d.mts`；站点 <https://ui.icen.ai/llms.txt>（索引）与 `/llms-full.txt`（全文 + 类型面）；场景配方 skill `icen-ui`（skill.icen.ai）。
-
-## 现代原语
-
-默认原语「现代」：瓷白内容面、轻盈磨砂操作层、系统排版、统一的几何节奏。想调成自己的品牌，改 `--icen-design-*` 种子即可，`createDesign` 会编译出带明暗与对比度验证的完整配方——本地文档站 `/modern/` 有实时工作台。规范与接入见 [设计原语](docs/spec/design-primitives.md)。

package/dist/base.css

@@ -173,30 +173,60 @@ p { margin: 0 0 1em; }
   background: color-mix(in srgb, var(--icen-token-accent) 35%, transparent);
 }
 
-/* ══════════════════════════════════════════════════════════════
-   全局滚动条：细薄、无上下箭头、贴 token
-   尺寸/轨道/滑块/按钮全部走 --icen-token-scrollbar-*，
-   每个色彩预设可在自己的块里覆盖以表达品牌色差。
-   ══════════════════════════════════════════════════════════════ */
-
-::-webkit-scrollbar { width: var(--icen-token-scrollbar-size); height: var(--icen-token-scrollbar-size); }
+/* Native scrollbar paint; policy slots live in tokens/scrollbars.css. */
+* {
+  scrollbar-width: var(--icen-scrollbar-width, thin);
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-idle, 100%), transparent) var(--icen-token-scrollbar-track);
+  scrollbar-gutter: var(--icen-token-scrollbar-gutter);
+}
+:where(*:not(html):hover) {
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb-hover) var(--icen-scrollbar-hover, 100%), transparent) var(--icen-token-scrollbar-track);
+}
+:where(*:focus-within, [data-icen-scroll-active]) {
+  scrollbar-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent) var(--icen-token-scrollbar-track);
+}
+/* Keep native arrows disabled when standard properties would override the skin. */
+@supports selector(::-webkit-scrollbar) {
+  *, :where(*:hover, *:focus-within, [data-icen-scroll-active]) {
+    scrollbar-width: var(--icen-scrollbar-webkit-width, auto);
+    scrollbar-color: auto;
+  }
+}
+::-webkit-scrollbar {
+  width: var(--icen-token-scrollbar-size);
+  height: var(--icen-token-scrollbar-size);
+  display: var(--icen-scrollbar-display, block);
+}
 ::-webkit-scrollbar-track { background: var(--icen-token-scrollbar-track); }
 ::-webkit-scrollbar-thumb {
-  background: var(--icen-token-scrollbar-thumb);
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-idle, 100%), transparent);
   border-radius: var(--icen-radius-full);
-  border: 2px solid transparent;
+  border: var(--icen-token-scrollbar-inset) solid transparent;
   background-clip: padding-box;
+  transition: background-color var(--icen-token-scrollbar-fade-duration) var(--icen-ease-out);
 }
-::-webkit-scrollbar-thumb:hover {
-  background: var(--icen-token-scrollbar-thumb-hover);
-  background-clip: padding-box;
+:where(*:not(html):hover)::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb-hover) var(--icen-scrollbar-hover, 100%), transparent);
+}
+:is(*:focus-within, [data-icen-scroll-active])::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: color-mix(in srgb, var(--icen-token-scrollbar-thumb) var(--icen-scrollbar-active, 100%), transparent);
 }
 ::-webkit-scrollbar-button,
 ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
 ::-webkit-scrollbar-corner { background: transparent; }
-html {
-  scrollbar-width: thin;
-  scrollbar-color: var(--icen-token-scrollbar-thumb) var(--icen-token-scrollbar-track);
+@media (prefers-reduced-motion: reduce) {
+  ::-webkit-scrollbar-thumb { transition: none; }
+}
+@media (forced-colors: active) {
+  *, :where(*:hover, *:focus-within, [data-icen-scroll-active]) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  ::-webkit-scrollbar { display: block; }
+  ::-webkit-scrollbar-thumb { background-color: CanvasText; }
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -266,7 +296,7 @@ html {
   --icen-z-raised: 10;
   --icen-z-sticky: 50;
   --icen-z-chrome: 200;
-  --icen-z-toast: 400;
+  --icen-z-toast: 560; /* 反馈层必须压过 dialog(500)：模态里触发的 toast 不能被遮罩压住；仍低于 popover/tooltip（瞬态浮层） */
   --icen-z-banner: 450;
   --icen-z-dialog: 500;
   --icen-z-popover: 620;
@@ -289,6 +319,10 @@ html {
 @keyframes icen-spin {
   to { transform: rotate(360deg); }
 }
+@keyframes icen-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
 @keyframes icen-skeleton-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
@@ -484,6 +518,13 @@ html {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
+  /* 强制颜色会丢弃 box-shadow——本库多数焦点环正是 box-shadow(var(--icen-ring))。
+     组件普遍以 outline:none 关闭了默认焦点，所以这里必须提权兜底：
+     所有原生可聚焦元素在强制颜色下都拿到系统焦点框。 */
+  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
+    outline: 2px solid Highlight !important; /* guard:allow-important 高对比模式焦点兜底：组件 outline:none 会吞掉默认焦点 */
+    outline-offset: 2px !important; /* guard:allow-important 高对比模式焦点兜底：组件 outline:none 会吞掉默认焦点 */
+  }
 }
 
 /* 打印：去掉阴影/背景/动效，节约墨水并避免打印截断 */

package/dist/behaviors/accordion.mjs

@@ -21,7 +21,7 @@ function setup(container) {
     if (item.classList.contains("is-disabled")) return;
     const open = item.classList.toggle("is-open");
     trigger.setAttribute("aria-expanded", String(open));
-    const index = Array.from(container.querySelectorAll(".icen-accordion-item")).indexOf(item);
+    const index = Array.from(container.querySelectorAll(":scope > .icen-accordion-item")).indexOf(item);
     emitIcen(container, "icen:accordion-toggle", { item, index, open });
     if (single && open) {
       container.querySelectorAll(".icen-accordion-item.is-open").forEach((other) => {

package/dist/behaviors/ai-branch.mjs

@@ -122,6 +122,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-chat.d.mts

@@ -1,4 +1,4 @@
-import { AiContent, AiContentPart } from './ai-core.js';
+import { AiContent, AiContentPart } from './ai-core.mjs';
 
 /**
  * 初始化 root 下的全部 .icen-ai-chat（root 自身匹配时包含自身）。
@@ -46,7 +46,7 @@ interface AiMessageHandle {
     /** 在正文末开一个流式文本节点，返回 createAiStream 句柄 */
     stream(): AiStreamHandle;
 }
-/** 单个内容部件 → DOM 节点（文本一律 textContent；媒体 src 走 aiContentUrl 归一）。
+/** 单个内容部件 → DOM 节点（文本一律 textContent；媒体 src 走 aiContentUrl 归一 + safeUrl 守卫）。
  *  导出供 ai-tool 的 IO 区复用（MCP 多模态回执；类名 .ai-msg-* 语义即「消息部件」，全局生效）。
  *  前置条件：浏览器环境——本函数无 SSR 守卫，SSR 由调用方守卫覆盖（renderAiMessage /
  *  renderAiToolCall 头部守卫后才会触达此处）。 */

package/dist/behaviors/ai-chat.mjs

@@ -21,6 +21,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",
@@ -1102,6 +1103,15 @@ function svgIcon(svg) {
   return parseSvg(svg);
 }
 
+// src/behaviors/url-safety.ts
+function safeUrl(uri) {
+  const s = uri.replace(/[\t\n\r\0-\x1f\x7f]/g, "").trim().toLowerCase();
+  if (!s) return void 0;
+  if (s.startsWith("javascript:") || s.startsWith("vbscript:")) return void 0;
+  if (/^data:\s*text\/html/.test(s)) return void 0;
+  return uri;
+}
+
 // src/behaviors/ai-chat.ts
 var ICON_COPY = iconHTML("copy");
 var ICON_RETRY = iconHTML("refresh");
@@ -1140,6 +1150,10 @@ function setupChat(chat) {
   if (el.__icenAiChatInit) return void 0;
   el.__icenAiChatInit = true;
   const scrollEl = chat.querySelector(".icen-ai-chat-scroll");
+  if (scrollEl && !scrollEl.hasAttribute("aria-live")) {
+    scrollEl.setAttribute("role", "log");
+    scrollEl.setAttribute("aria-live", "polite");
+  }
   let jump = chat.querySelector(".icen-ai-chat-jump") ?? null;
   let pinned = true;
   let unread = 0;
@@ -1196,6 +1210,26 @@ function setupChat(chat) {
       updateJump();
     }
   };
+  const onUserLeaveIntent = () => {
+    if (!pinned) return;
+    pinned = false;
+    updateJump();
+  };
+  const onWheel = (e) => {
+    if (e.deltaY < 0) onUserLeaveIntent();
+  };
+  let lastTouchY = 0;
+  const onTouchStart = (e) => {
+    lastTouchY = e.touches[0]?.clientY ?? 0;
+  };
+  const onTouchMove = (e) => {
+    const y = e.touches[0]?.clientY ?? 0;
+    if (y > lastTouchY + 4) onUserLeaveIntent();
+    lastTouchY = y;
+  };
+  const onScrollerKeydown = (e) => {
+    if (e.key === "PageUp" || e.key === "Home" || e.key === "ArrowUp") onUserLeaveIntent();
+  };
   const onJumpClick = () => {
     pinned = true;
     unread = 0;
@@ -1251,10 +1285,18 @@ function setupChat(chat) {
     }
     lastMsgCount = scrollEl.querySelectorAll(".icen-ai-msg").length;
     scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    scrollEl.addEventListener("wheel", onWheel, { passive: true });
+    scrollEl.addEventListener("touchstart", onTouchStart, { passive: true });
+    scrollEl.addEventListener("touchmove", onTouchMove, { passive: true });
+    scrollEl.addEventListener("keydown", onScrollerKeydown);
     jump.addEventListener("click", onJumpClick);
     const jumpBtn = jump;
     disposers.push(() => {
       scrollEl.removeEventListener("scroll", onScroll);
+      scrollEl.removeEventListener("wheel", onWheel);
+      scrollEl.removeEventListener("touchstart", onTouchStart);
+      scrollEl.removeEventListener("touchmove", onTouchMove);
+      scrollEl.removeEventListener("keydown", onScrollerKeydown);
       jumpBtn.removeEventListener("click", onJumpClick);
     });
     if (typeof ResizeObserver !== "undefined") {
@@ -1326,6 +1368,8 @@ function createAiStream(el) {
   el.setAttribute("aria-busy", "true");
   if (reasoning) {
     reasoning.classList.add("is-streaming");
+    const timeEl = reasoning.querySelector(".icen-ai-reasoning-time");
+    if (timeEl) timeEl.textContent = t("aiChat.thinkingNow");
     setReasoningOpen(reasoning, true);
     const head = reasoning.querySelector(".icen-ai-reasoning-head");
     if (head && head.dataset.icenReasoningStart == null) head.dataset.icenReasoningStart = String(startedAt);
@@ -1413,10 +1457,9 @@ var ROLE_AVATAR = {
   system: t("aiChat.roleSystem"),
   tool: t("aiChat.roleTool")
 };
-function safeHref(uri) {
-  const s = uri.trim().toLowerCase();
-  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
-  return uri;
+function safeContentUrl(part) {
+  const src = aiContentUrl(part);
+  return src ? safeUrl(src) : void 0;
 }
 function renderAiContentPart(part) {
   if (part.type === "text") {
@@ -1426,7 +1469,7 @@ function renderAiContentPart(part) {
     return span;
   }
   if (part.type === "image") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const img = document.createElement("img");
     img.className = "icen-ai-msg-media icen-ai-msg-media--image";
@@ -1436,7 +1479,7 @@ function renderAiContentPart(part) {
     return img;
   }
   if (part.type === "audio") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const audio = document.createElement("audio");
     audio.className = "icen-ai-msg-media icen-ai-msg-media--audio";
@@ -1445,7 +1488,7 @@ function renderAiContentPart(part) {
     return audio;
   }
   if (part.type === "video") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const video = document.createElement("video");
     video.className = "icen-ai-msg-media icen-ai-msg-media--video";
@@ -1457,7 +1500,7 @@ function renderAiContentPart(part) {
   if (part.type === "file") {
     const chip = h("span", "icen-ai-msg-file");
     chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? t("aiChat.file")));
-    const href2 = part.url ? safeHref(part.url) : void 0;
+    const href2 = part.url ? safeUrl(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
       a2.className = "icen-ai-msg-file-link";
@@ -1470,7 +1513,7 @@ function renderAiContentPart(part) {
   }
   const a = document.createElement("a");
   a.className = "icen-ai-msg-link";
-  const href = safeHref(part.uri);
+  const href = safeUrl(part.uri);
   if (href) a.href = href;
   a.textContent = part.name ?? part.uri;
   a.title = part.uri;
@@ -1532,7 +1575,7 @@ function renderAiMessage(scrollEl, model) {
       errEl.textContent = message;
     },
     stream() {
-      const span = h("span", "ai-msg-stream-text");
+      const span = h("span", "icen-ai-msg-text ai-msg-stream-text");
       body.appendChild(span);
       return createAiStream(span);
     }

package/dist/behaviors/ai-composer.d.mts

@@ -1,8 +1,8 @@
-import { IconName } from './icons.js';
-import { AiContent, AiUsage } from './ai-core.js';
-import { PanelSizing } from './popover.js';
-import { AiTodoItem, AiUsageRingOpts } from './ai-panel.js';
-import { AiClient, AiAuditor } from './ai-provider.js';
+import { IconName } from './icons.mjs';
+import { AiContent, AiUsage } from './ai-core.mjs';
+import { PanelSizing } from './popover.mjs';
+import { AiTodoItem, AiUsageRingOpts } from './ai-panel.mjs';
+import { AiClient, AiAuditor } from './ai-provider.mjs';
 
 interface AiProviderModelOption {
     id: string;

package/dist/behaviors/ai-composer.mjs

@@ -122,6 +122,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",
@@ -1687,6 +1688,15 @@ var ICON_SPARKLES = svgWrap(
   '<path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/>'
 );
 
+// src/behaviors/url-safety.ts
+function safeUrl(uri) {
+  const s = uri.replace(/[\t\n\r\0-\x1f\x7f]/g, "").trim().toLowerCase();
+  if (!s) return void 0;
+  if (s.startsWith("javascript:") || s.startsWith("vbscript:")) return void 0;
+  if (/^data:\s*text\/html/.test(s)) return void 0;
+  return uri;
+}
+
 // src/behaviors/ai-chat.ts
 var ICON_COPY = iconHTML("copy");
 var ICON_RETRY = iconHTML("refresh");
@@ -1714,6 +1724,8 @@ function createAiStream(el) {
   el.setAttribute("aria-busy", "true");
   if (reasoning) {
     reasoning.classList.add("is-streaming");
+    const timeEl = reasoning.querySelector(".icen-ai-reasoning-time");
+    if (timeEl) timeEl.textContent = t("aiChat.thinkingNow");
     setReasoningOpen(reasoning, true);
     const head = reasoning.querySelector(".icen-ai-reasoning-head");
     if (head && head.dataset.icenReasoningStart == null) head.dataset.icenReasoningStart = String(startedAt);
@@ -1801,10 +1813,9 @@ var ROLE_AVATAR = {
   system: t("aiChat.roleSystem"),
   tool: t("aiChat.roleTool")
 };
-function safeHref(uri) {
-  const s = uri.trim().toLowerCase();
-  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
-  return uri;
+function safeContentUrl(part) {
+  const src = aiContentUrl(part);
+  return src ? safeUrl(src) : void 0;
 }
 function renderAiContentPart(part) {
   if (part.type === "text") {
@@ -1814,7 +1825,7 @@ function renderAiContentPart(part) {
     return span;
   }
   if (part.type === "image") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const img = document.createElement("img");
     img.className = "icen-ai-msg-media icen-ai-msg-media--image";
@@ -1824,7 +1835,7 @@ function renderAiContentPart(part) {
     return img;
   }
   if (part.type === "audio") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const audio = document.createElement("audio");
     audio.className = "icen-ai-msg-media icen-ai-msg-media--audio";
@@ -1833,7 +1844,7 @@ function renderAiContentPart(part) {
     return audio;
   }
   if (part.type === "video") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const video = document.createElement("video");
     video.className = "icen-ai-msg-media icen-ai-msg-media--video";
@@ -1845,7 +1856,7 @@ function renderAiContentPart(part) {
   if (part.type === "file") {
     const chip = h("span", "icen-ai-msg-file");
     chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? t("aiChat.file")));
-    const href2 = part.url ? safeHref(part.url) : void 0;
+    const href2 = part.url ? safeUrl(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
       a2.className = "icen-ai-msg-file-link";
@@ -1858,7 +1869,7 @@ function renderAiContentPart(part) {
   }
   const a = document.createElement("a");
   a.className = "icen-ai-msg-link";
-  const href = safeHref(part.uri);
+  const href = safeUrl(part.uri);
   if (href) a.href = href;
   a.textContent = part.name ?? part.uri;
   a.title = part.uri;
@@ -1920,7 +1931,7 @@ function renderAiMessage(scrollEl, model) {
       errEl.textContent = message;
     },
     stream() {
-      const span = h("span", "ai-msg-stream-text");
+      const span = h("span", "icen-ai-msg-text ai-msg-stream-text");
       body.appendChild(span);
       return createAiStream(span);
     }

package/dist/behaviors/ai-core.mjs

@@ -14,6 +14,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-diff.mjs

@@ -21,6 +21,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-feedback.mjs

@@ -21,6 +21,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-panel.d.mts

@@ -1,5 +1,5 @@
-import { AiStatus, AiUsage } from './ai-core.js';
-import { AiAuditor, AiAuditEntry } from './ai-provider.js';
+import { AiStatus, AiUsage } from './ai-core.mjs';
+import { AiAuditor, AiAuditEntry } from './ai-provider.mjs';
 
 interface AiTodoItem {
     content: string;

package/dist/behaviors/ai-panel.mjs

@@ -122,6 +122,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-provider.d.mts

@@ -1,4 +1,4 @@
-import { AiContent, AiUsage, AiContentPart } from './ai-core.js';
+import { AiContent, AiUsage, AiContentPart } from './ai-core.mjs';
 
 interface AiProviderModel {
     id: string;

package/dist/behaviors/ai-provider.mjs

@@ -21,6 +21,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-threads.mjs

@@ -122,6 +122,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",

package/dist/behaviors/ai-tool.d.mts

@@ -1,4 +1,4 @@
-import { AiToolCallModel } from './ai-core.js';
+import { AiToolCallModel } from './ai-core.mjs';
 
 interface AiToolCallHandle {
     el: HTMLElement;