@yfwu2020/dsh-selection-explain 0.4.1 → 0.7.0

package/lib/client.js

@@ -27,6 +27,8 @@ window.__ModuleLoader__.load({
     var API = '/selection-explain/api/analyze'
     var PING = '/selection-explain/api/ping'
     var PROMOTE = '/selection-explain/api/promote'
+    /** 胶囊拖到别处后的位置（记在 host 上：拖到别处→存，吸附回右下角→清，挂载→读回来）。 */
+    var PILL_POS = '/selection-explain/api/pill'
     var HISTORY = '/selection-explain/api/history'
     /** 模型清单（带每个模型支持的推理等级）。 */
     var MODELS = '/selection-explain/api/models'
@@ -102,6 +104,88 @@ window.__ModuleLoader__.load({
     var FONT =
       '-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif'
 
+    // —— 悬浮状态胶囊的几何/手感参数（CSS 与 placePill 都要用，所以放这一层） ——
+    /**
+     * **兜底**最大宽度：只有"量不到费用胶囊"时才生效（见 placePill）。
+     *
+     * 有费用胶囊时宽度写死成它的实测宽度 —— 两者共用 CSS 里那条 `max-width:280px`，
+     * 所以并排时同宽同位置；而单独一枚浮在右下角时 280 显得"横着一条"（旁边什么都没有，
+     * 分量感全在这条胶囊上），收到 200。取值依据（真浏览器 8x 截图 + 量墨迹）：
+     *   · 短内容「划词解读 · 就绪」自然宽度 146.6px → 不受影响；
+     *   · 英文选中「the migratio… · 完成 · 3 轮」214px → 会截一点；
+     *   · 最坏组合「12 字中文 + · 追问中 12.3s」名字那格还剩 ~54px ≈ 3 个字。
+     * 状态格 `flex:0 0 auto` 永不缩 —— 宽度不够时只牺牲选中文字（省略号收尾）。
+     */
+    var PILL_FALLBACK_MAX = 200
+    /** 收成小球后的直径（px）。收球 = 把 max-width 收到它（能过渡，所以收/放都是动画）。 */
+    var PILL_BALL_SIZE = 32
+    /** 静置多久收成小球（毫秒）——"长时间没有点击或者小窗活动"的那个"长时间"。 */
+    var PILL_BALL_IDLE_MS = 10000
+    /** 松手时离"贴角位置"多近就吸附回去（px，按左上角比）。 */
+    var PILL_SNAP_RADIUS = 96
+    /** 位移超过多少像素才算"拖"而不是"点"（px，曼哈顿距离）。 */
+    var PILL_DRAG_SLOP = 4
+    /**
+     * 收球 / 展开那条过渡（时长 + 曲线），CSS 里多处引用。
+     *
+     * 曲线选 `cubic-bezier(.5,0,.5,1)` 是因为它**时间对称**：控制点关于中心对称，
+     * 于是 p(t) = 1 - p(1-t) —— 把收球的动画倒过来放，恰好就是展开的动画。
+     * 用户报的收放不对称就是这么来的：之前用 easeOutQuint，前后半程不镜像，
+     * 收是「快起慢收」、放也是「快起慢收」，两个方向看着像两件事。
+     * 时长给 .34s：所有会变的属性共用它（任何一条不一致，中间帧的宽度就由另一条曲线决定，对称性就破了）。
+     */
+    var PILL_MORPH = '.28s cubic-bezier(.4,0,.6,1)'
+    /**
+     * 收球后球心里的星芒 —— 与「✦ 解读」浮标那颗星**逐点同形**。
+     *
+     * 按钮里那颗星是 16 画布上的八边形：外半径 5.6、内半径 2.1213（内外比 .3788）、四条边是直线
+     * （path `M8 2.4l1.5 4.1 4.1 1.5-4.1 1.5L8 13.6 6.5 9.5 2.4 8l4.1-1.5L8 2.4z`）。
+     * 球里的尺寸：外半径 6.0 → 墨迹 12.0px —— 和胶囊里文字（字号 12px）同高（用户要求）。
+     * （原来按 1.5 倍放大到 16.8px，在 32px 球里显得比文字壮太多。）
+     *
+     * 形变方式：把"圆点"和"星"都看成 **32 边形**逐顶点插值 ——
+     *   · PILL_STAR_DOT_D：32 个顶点同半径 4 → 8px 圆点（8px 下与正圆无差，最大偏差 0.02px）
+     *   · PILL_STAR_D：32 个顶点正好落在星边界上（尖与谷仍是精确顶点）→ 与按钮那条 path 逐点相同
+     * 两条 path 命令结构一致（M + 31×L + Z），所以 Chrome 能对 `d` 做插值。
+     * 于是"圆点长成星芒"是**同一个形状在长**，而不是"淡出一个、淡入另一个"（那样中间帧会掉分量）。
+     *
+     * ⚠️ 别改成"八个顶点一起插值"：数学上更短，但中间帧会经过一个**正菱形**（谷还没收、边是直的），
+     *    读起来像"方块"，和圆点/星芒都不是一路。必须取样到 32 个顶点（星那条边上的取样点精确落在线段上）。
+     * 顶点由 `node scripts/gen-star-path.mjs` 生成，可重跑核对。
+     */
+    /**
+     * 收放时长（毫秒）—— 必须与 PILL_MORPH 里的 .28s 一致：CSS 管胶囊、JS 管球心图形，
+     * 两者同拍才是"同一件事"。见 animatePillStar。
+     */
+    var PILL_MORPH_MS = 280
+    /** 形变采样点数（圆与星都按 32 边形逐顶点插值）。 */
+    var PILL_STAR_SAMPLES = 32
+    /** 尖/身两段的交界：尖先抽出来（0→.62），身再收成星（.38→1），重叠 .24 段保证无速度断点。 */
+    var PILL_STAR_TIP_END = 0.62
+    var PILL_STAR_BODY_START = 0.38
+    /**
+     * 球心图形那条曲线（时间对称：.45+.55=1、0+1=1 → 倒放即另一个方向）。
+     * 比胶囊那条 (.4,0,.6,1) 略收一点，于是两层不是同一个节拍：胶囊滑、图形落定得干脆些。
+     * ⚠️ 试过给曲线加"过冲"（y 越出 [0,1]）——**不行**：时间对称的 cubic-bezier 只要 y1+y2=1，
+     *    曲线就必是"上-下-上"的波浪（实测 (.4,1.12,.6,-.12) 在 0.25 处已经 0.40、0.75 处才 0.60），
+     *    看着是一顿一顿的。过冲要放在**形状空间**里（PILL_STAR_POP），时间轴上始终是干净的 S。
+     */
+    var PILL_STAR_EASE = [0.45, 0, 0.55, 1]
+    /**
+     * 形状空间的过冲：尖长到位后再"冲出去一点点"再收回（0.075 = 尖最多到 8.73，落定回 8.4）。
+     * 包络在 p=.55 起、p=.8 附近到顶、p=1 归零 —— 两端为 0 所以不影响端点。
+     * 它是 p 的函数，所以收/放仍然严格互为倒放。
+     */
+    var PILL_STAR_POP = 0.075
+    /** 微转（度）：圆点态 -8°、星芒态 0°；过冲时会略过 0 再落定。圆点旋转不变，所以起手看不出来。 */
+    var PILL_STAR_TWIST = 8
+
+    var PILL_STAR_DOT_D = 'M4 0L3.92 0.78L3.7 1.53L3.33 2.22L2.83 2.83L2.22 3.33L1.53 3.7L0.78 3.92L0 4L-0.78 3.92L-1.53 3.7L-2.22 3.33L-2.83 2.83L-3.33 2.22L-3.7 1.53L-3.92 0.78L-4 0L-3.92 -0.78L-3.7 -1.53L-3.33 -2.22L-2.83 -2.83L-2.22 -3.33L-1.53 -3.7L-0.78 -3.92L0 -4L0.78 -3.92L1.53 -3.7L2.22 -3.33L2.83 -2.83L3.33 -2.22L3.7 -1.53L3.92 -0.78Z'
+    var PILL_STAR_D = 'M6 0L3.89 0.77L2.81 1.17L2.12 1.42L1.61 1.61L1.42 2.12L1.17 2.81L0.77 3.89L0 6L-0.77 3.89L-1.17 2.81L-1.42 2.12L-1.61 1.61L-2.12 1.42L-2.81 1.17L-3.89 0.77L-6 0L-3.89 -0.77L-2.81 -1.17L-2.12 -1.42L-1.61 -1.61L-1.42 -2.12L-1.17 -2.81L-0.77 -3.89L0 -6L0.77 -3.89L1.17 -2.81L1.42 -2.12L1.61 -1.61L2.12 -1.42L2.81 -1.17L3.89 -0.77Z'
+
+    /** 吸附滑行的时长（毫秒）：比过渡时长多一点，走完就把定位交还给 right/bottom。 */
+    var PILL_SNAP_MS = 360
+
     // ────────────────────────────── 小工具 ──────────────────────────────
 
     function el(tag, cls, text) {
@@ -218,7 +302,13 @@ window.__ModuleLoader__.load({
       '.dsh-sel-btn[data-pop="1"]{animation:dsh-sel-pop .24s cubic-bezier(.34,1.56,.64,1) both}',
       '.dsh-sel-btn:hover{filter:brightness(1.08)}',
       '.dsh-sel-btn:active{transform:scale(.97)}',
-      '.dsh-sel-btn svg{width:13px;height:13px;display:block}',
+      // 图标：13px 画布 + **左移 1px**。
+      // 为什么要有这个负外边距：画布是 16×16、图形墨迹只占中间 ~11px，左右各留 ~2px 空白，
+      // 而右边「解读 / 引用」两个字的墨迹几乎没有右边距（0.4~1.2px）—— 按盒子居中的话，
+      // 视觉上左边比右边宽 ~1.7px，整组看着偏右（实测墨迹中心偏 +0.88px）。
+      // 负外边距把"墨迹"而不是"画布"摆正；用 1px 而不是精确的 0.87px：两个浮标的文字
+      // 边距不同（「解读」0.4 / 「引用」1.2），取整后两枚浮标的偏差都在 0.5px 内。
+      '.dsh-sel-btn svg{width:13px;height:13px;display:block;margin-left:-1px}',
       // 全局一个主色：**青**（两节同色，和「详解」一致）。
       //   --sel-a1/a2      装饰：边条 / 呼吸点 / 淡底（不承载文字，不需要 AA）
       //   --sel-a*-text    文字：术语、标题、符号、链接（实测 AA 达标）
@@ -576,18 +666,62 @@ window.__ModuleLoader__.load({
       // 悬浮状态胶囊：样式对齐右下角那枚费用胶囊（dsh-spend），摆在它上方
       // 逐项对齐 dsh-spend 的 .dsu-pill：同样的 padding / 字号 / 行高 / 边框 / 圆角 / 阴影，
       // 连小三角都用同一个字符 ▴ ▾（以前用 ▲ ▼，比它大一圈、也不一样淡）
+      // max-width 280 是"跟随费用胶囊"那条路的封顶（和 .dsu-pill 同值，并排时才能同宽）；
+      // **没有**费用胶囊可跟随时，placePill() 会用内联样式收到 PILL_FALLBACK_MAX（200）。
+      // 过渡（收球 / 拖动吸附 / 跟随位置变化）挂在 [data-ready="1"] 上：插件挂载那一下是先贴好
+      // 位置再开过渡的，否则会从 CSS 默认的 bottom:64 一路滑到实测位置。
+      //
+      // 收球 / 展开**共用这一条**（时长 + 曲线），而且曲线是**时间对称**的：
+      //   cubic-bezier(.5,0,.5,1) 的控制点关于中心对称 → p(t) = 1 - p(1-t)，
+      //   也就是"把收球的动画倒过来放"恰好等于展开（用户要的对称性）。
+      // 之前用 easeOutQuint(.22,1,.36,1)：前后半程不镜像，收快放慢，两个方向看着是两回事。
+      // 所有会变的属性都必须挂同一条（时长/曲线一致），否则中间某一帧的宽度由**另一条曲线**决定，
+      // 对称性就破了 —— 这也是下面 min-width / padding / gap / 文字 max-width 都要一起过渡的原因。
       '.dsh-sel-pill{position:fixed;right:20px;bottom:64px;z-index:' + String(Z_BTN) + ';display:flex;align-items:center;gap:8px;',
-      'box-sizing:border-box;padding:6px 14px;border-radius:999px;cursor:pointer;user-select:none;max-width:280px;white-space:nowrap;',
+      // height 钉死 32：收球时 padding 要归零，若高度由 padding 撑，展开那一下会先被压扁再长回来
+      // （实测的"不流畅"之一）。min-width 给数值 0，好让"球→胶囊"能从 32 平滑过渡回 0。
+      'box-sizing:border-box;height:' + String(PILL_BALL_SIZE) + 'px;min-width:0;padding:6px 14px;border-radius:999px;cursor:pointer;user-select:none;max-width:280px;white-space:nowrap;',
       'background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#24292f);',
       'border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.22));box-shadow:0 4px 16px rgba(0,0,0,.12);',
-      'font-family:inherit;font-size:12px;line-height:18px;font-weight:400;transition:box-shadow .15s ease}',
+      'font-family:inherit;font-size:12px;line-height:18px;font-weight:400}',
+      '.dsh-sel-pill[data-ready="1"]{transition:box-shadow .15s ease,width ' + PILL_MORPH + ',',
+      'max-width ' + PILL_MORPH + ',min-width ' + PILL_MORPH + ',padding ' + PILL_MORPH + ',gap ' + PILL_MORPH + ',',
+      'left ' + PILL_MORPH + ',top ' + PILL_MORPH + ',right ' + PILL_MORPH + ',bottom ' + PILL_MORPH + '}',
+      // 鼠标正按着拖：位置每帧都在变，有过渡就"黏手"
+      '.dsh-sel-pill[data-drag="1"]{transition:none;cursor:grabbing}',
+      // 收成小球：只改**能过渡的属性** —— 宽度由内联 max-width/min-width 收到 32（见 placePill），
+      // 这里把 padding/gap 归零。刻意不用 justify-content:center 让圆点居中：那是离散属性、
+      // 一翻就跳（圆点会瞬移），改用圆点自己的 margin-left（可过渡）把它挪到圆的中心。
+      '.dsh-sel-pill[data-ball="1"]{padding:0;gap:0}',
+      // 三段文字（名字 / 状态 / 箭头）收起来：max-width 过渡 + 淡出，而不是 display:none（那个没法过渡）。
+      // ⚠️ 基础态必须给一个**数值** max-width（320px，比任何内容都宽 = 等于不限制）：
+      //    否则它是从 none 过渡到 0，而 none 不可插值 —— 文字会瞬间塌掉。
+      //    实测（真时间轴逐帧采样宽度）：漏了这句时整枚胶囊 60ms 就缩完了，看着像啪一下拍扁，
+      //    而不是收进去。
+      // overflow:hidden 常驻（不收球时也留着）：它是离散属性，若只在球态给，展开第一帧文字会先溢出来。
+      '.dsh-sel-pill .dsh-sel-pillname,.dsh-sel-pill .dsh-sel-pillmeta,.dsh-sel-pill .dsh-sel-pillcaret{max-width:320px;overflow:hidden;transition:opacity ' + PILL_MORPH + ',max-width ' + PILL_MORPH + '}',
+      '.dsh-sel-pill[data-ball="1"] .dsh-sel-pillname,.dsh-sel-pill[data-ball="1"] .dsh-sel-pillmeta,.dsh-sel-pill[data-ball="1"] .dsh-sel-pillcaret{max-width:0;opacity:0;pointer-events:none}',
       '.dsh-sel-pill:hover{box-shadow:0 6px 22px rgba(0,0,0,.18)}',
       '.dsh-sel-pill[data-open="1"]{border-color:color-mix(in srgb,var(--sel-a1,#0d9488) 55%,transparent)}',
-      '.dsh-sel-pilldot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-label-tertiary,#8c959f)}',
-      '.dsh-sel-pill[data-tone=busy] .dsh-sel-pilldot{background:var(--sel-a1,#0d9488);animation:dsh-sel-pillpulse 1.5s ease-in-out infinite}',
-      '.dsh-sel-pill[data-tone=done] .dsh-sel-pilldot{background:var(--sel-a1,#0d9488)}',
-      '.dsh-sel-pill[data-tone=error] .dsh-sel-pilldot{background:var(--dsw-alias-state-error-primary,#e5484d)}',
-      '.dsh-sel-pill[data-tone=paused] .dsh-sel-pilldot{background:#d97706}',
+      // 球心里的图形：一枚 32×32 的 SVG 画布，两侧 -12px 负边距把**布局占位**压成 8px ——
+      // 和原来那枚 8px 圆点占位完全相同，所以胶囊的排版与宽度一个像素都不用改；
+      // 而画布本身是 32px，于是 viewBox 的 1 单位 = 1px，设计稿上的数字可以照抄。
+      '.dsh-sel-pillicon{flex:none;width:32px;height:32px;margin:0 -12px;display:block;overflow:visible;transition:margin ' + PILL_MORPH + '}',
+      '.dsh-sel-pillstar{fill:var(--dsw-alias-label-tertiary,#8c959f)}',
+      // 图形本身不做 CSS 过渡：两条静态 path 之间 CSS 只能线性插值（中途会出现正菱形），
+      // 所以路径由 animatePillStar 按 p 现算（见那里的注释）。
+      // path 的坐标中心是 (0,0)。百分比原点在 SVG 中却算成 (16px,16px)，
+      // 旋转 -8° 会把圆点墨迹推到画布右上方；必须绕路径真正的中心转。
+      '.dsh-sel-pillstar{transform-origin:0 0}',
+      // 球态：画布在 32px 的圆里居中 —— 内宽 32-2(边框)=30，两侧各 -1px 负边距正好摆正（中心 16）
+      '.dsh-sel-pill[data-ball="1"] .dsh-sel-pillicon{margin:0 -1px}',
+      // 状态色照旧，只是从圆点的 background 挪到星的 fill；
+      // "进行中"的呼吸动画挂在画布上（transform 绕自身中心缩放，和原来的圆点脉冲同一条 keyframes）
+      '.dsh-sel-pill[data-tone=busy] .dsh-sel-pillstar{fill:var(--sel-a1,#0d9488)}',
+      '.dsh-sel-pill[data-tone=busy] .dsh-sel-pillicon{animation:dsh-sel-pillpulse 1.5s ease-in-out infinite}',
+      '.dsh-sel-pill[data-tone=done] .dsh-sel-pillstar{fill:var(--sel-a1,#0d9488)}',
+      '.dsh-sel-pill[data-tone=error] .dsh-sel-pillstar{fill:var(--dsw-alias-state-error-primary,#e5484d)}',
+      '.dsh-sel-pill[data-tone=paused] .dsh-sel-pillstar{fill:#d97706}',
       '@keyframes dsh-sel-pillpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}',
       // 三段的明暗节奏也照抄：主体加粗、次要信息 --secondary、箭头 --tertiary
       // 宽度由 JS 固定成下面那枚费用胶囊的宽度，所以文字必须自己让位：
@@ -1971,12 +2105,23 @@ window.__ModuleLoader__.load({
       pill.setAttribute('role', 'button')
       pill.setAttribute('tabindex', '0')
       pill.style.pointerEvents = 'auto'
-      var pillDot = el('span', 'dsh-sel-pilldot')
+      // 球心里的图形：一枚 32×32 的 SVG（viewBox -16..16，1 单位 = 1px），里面只有一条 path。
+      // 展开态它画成 8px 圆点（PILL_STAR_DOT_D），收球时把 d 换成星芒（PILL_STAR_D）——
+      // 两条 path 命令结构一致，Chrome 对 d 插值，于是"圆点长成星芒"是一条连续形变。
+      var pillIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      pillIcon.setAttribute('class', 'dsh-sel-pillicon')
+      pillIcon.setAttribute('viewBox', '-16 -16 32 32')
+      pillIcon.setAttribute('aria-hidden', 'true')
+      pillIcon.setAttribute('focusable', 'false')
+      var pillStar = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      pillStar.setAttribute('class', 'dsh-sel-pillstar')
+      pillStar.setAttribute('d', PILL_STAR_DOT_D)
+      pillIcon.appendChild(pillStar)
       // 和费用胶囊同构：主体一段（加粗）、次要一段（淡）、箭头一段（更淡）
       var pillName = el('span', 'dsh-sel-pillname', '划词解读')
       var pillMeta = el('span', 'dsh-sel-pillmeta', '· 就绪')
       var pillCaret = el('span', 'dsh-sel-pillcaret', '▴')
-      pill.appendChild(pillDot)
+      pill.appendChild(pillIcon)
       pill.appendChild(pillName)
       pill.appendChild(pillMeta)
       pill.appendChild(pillCaret)
@@ -2199,6 +2344,32 @@ window.__ModuleLoader__.load({
       var PILL_POLL_MIN = 2000
       var PILL_POLL_MAX = 60000
       var pillPollDelay = PILL_POLL_MIN
+      /**
+       * 胶囊的拖动 / 吸附 / 收球状态（几何参数 PILL_* 在文件上方，CSS 也要用）。
+       *
+       *   · pillDock：'anchor' = 贴费用胶囊（量不到就贴右下角，由 placePill 管）；
+       *               'free'   = 用户拖到别处了 —— 位置归用户，轮询不许再动它。
+       *   · pillFreeRight：自由摆放时记的是**右边缘**（收球/展开都以右侧为锚点：
+       *     胶囊向左展开、向右收成球，右边缘一个像素都不动 —— 用户要的就是这个）。
+       *     记中心是不行的：收球时右边缘会往左跑，球看起来"飘"了一下。
+       *   · pillAnchorWidth：本次量到的费用胶囊宽度（0 = 没量到）—— 决定"跟随"还是"兜底"，
+       *     也是"能不能收球"的前提（用户定的：只有没有费用胶囊时才收成小球）。
+       */
+      var pillDock = 'anchor'
+      var pillFreeRight = null
+      var pillBall = false
+      var pillHover = false
+      var pillDrag = null
+      /** 刚拖完的那一下 click 要吞掉（拖动不该顺手开关小窗）。 */
+      var pillDragMoved = false
+      /** 静置计时器 id（0 = 没有）。用裸 setTimeout：它每帧都可能被重置，塞进 timers 数组会一直长。 */
+      var pillIdleId = 0
+      /**
+       * 吸附滑行窗口的截止时刻（见 settlePillDrop / placePill）：
+       * 这段时间内位置按 left/top 维持（能过渡），之后再交还给 right/bottom 的稳态定位。
+       */
+      var pillSnapUntil = 0
+      var pillAnchorWidth = 0
       var pillPlacerId = 0
       /** 上一次量到的费用胶囊容器 / 正在观察它的 ResizeObserver（浏览器没有这个 API 时为 null）。 */
       var pillHost = null
@@ -3303,7 +3474,10 @@ window.__ModuleLoader__.load({
           snippet ? '最近一次划词：' + snippet : '还没有划过词',
           status.text,
           panelOpen ? '点击收起小窗' : '点击回到这个小窗',
+          '可拖动（拖到右下角附近会吸附回去）',
         ].join('｜')
+        // 画一次就算一次活动：状态在变（翻译中/生成中/完成）时不该被收成小球，也顺便重置静置计时
+        notePillActivity()
       }
 
       /**
@@ -3329,10 +3503,12 @@ window.__ModuleLoader__.load({
       }
 
       /**
-       * 把胶囊摆到右下角"费用胶囊"上方。
+       * 量一次"贴哪儿、多宽"。
        * 那个插件不一定装着、也不一定什么时候出现，所以每次都用实测位置，取不到才用兜底偏移。
+       * 返回 { right, bottom, width }：right/bottom 是视口右/下边距；width 是那枚胶囊的实测宽度
+       * （0 = 没量到 —— 调用方据此决定"跟随它"还是"走兜底"）。
        */
-      function placePill() {
+      function measurePillAnchor() {
         // 兜底位置：**贴页面底部**（和费用胶囊自己的 right:20/bottom:20 同高）。
         // 以前兜底是 64，等于永远给"下面那枚胶囊"留位置——没装那个插件时就悬在半空（实测被吐槽）。
         var right = 20
@@ -3361,25 +3537,490 @@ window.__ModuleLoader__.load({
         } catch (error) {
           /* noop：量不到就留在兜底位置 */
         }
+        return { right: right, bottom: bottom, width: width }
+      }
+
+      /* ── 位置记忆（host 存储）：拖到别处就存，吸附回右下角就清，挂载时读回来 ── */
+
+      function savePillPos() {
+        if (!pillFreeRight) return
+        fetch(PILL_POS, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ right: Math.round(pillFreeRight.right), y: Math.round(pillFreeRight.y) }),
+        }).catch(function () {})
+      }
+
+      function clearPillPos() {
+        fetch(PILL_POS, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ clear: true }),
+        }).catch(function () {})
+      }
+
+      var pillPosAsked = false
+      /** 用户自己拖过位置（拖过就不再用 host 上的存档覆盖） */
+      var pillUserPlaced = false
+
+      /** 挂载时读回上次拖到的位置：有就切成自由摆放、按右边缘摆回去（host 不可达时静默忽略）。 */
+      function loadPillPos() {
+        if (pillPosAsked) return
+        pillPosAsked = true
+        fetch(PILL_POS)
+          .then(function (res) {
+            return res.json()
+          })
+          .then(function (data) {
+            var pos = data && data.position
+            if (!pos || typeof pos.right !== 'number' || typeof pos.y !== 'number') return
+            if (pillUserPlaced) return // 用户已经自己拖过了，别用存档覆盖他
+            pillDock = 'free'
+            pillFreeRight = { right: pos.right, y: pos.y }
+            applyFreePill()
+            clampFreePill()
+            placePill()
+          })
+          .catch(function () {})
+      }
+
+      /** 自由摆放：用 CSS right 钉住右边缘，宽度过渡的每一帧都往左长/往左收。 */
+      function applyFreePill() {
+        if (!pillFreeRight) return
+        var h = pill.offsetHeight || 0
+        pill.style.left = 'auto'
+        pill.style.right = Math.round(window.innerWidth - pillFreeRight.right) + 'px'
+        pill.style.top = Math.round(pillFreeRight.y - h / 2) + 'px'
+        pill.style.bottom = 'auto'
+      }
+
+      /**
+       * 自由摆放时也必须还在视口里（用户拖出去过 / 窗口变小了）。
+       * 右边缘为锚：先把右边缘夹进视口，再保证左边缘不出界（展开变宽时右边缘可能被推右一点）。
+       * 位置没变就一个像素都不写。
+       */
+      function clampFreePill() {
+        if (!pillFreeRight) return false
+        var w = pill.offsetWidth || 0
+        var h = pill.offsetHeight || 0
+        var right = clamp(pillFreeRight.right, w + 4, Math.max(w + 4, window.innerWidth - 4))
+        var top = clamp(pillFreeRight.y - h / 2, 4, Math.max(4, window.innerHeight - h - 4))
+        var y = top + h / 2
+        if (Math.abs(right - pillFreeRight.right) < 0.5 && Math.abs(y - pillFreeRight.y) < 0.5) return false
+        pillFreeRight = { right: right, y: y }
+        applyFreePill()
+        return true
+      }
+
+      /** 贴角/跟随时那枚胶囊会落在哪（视口坐标）—— 松手时拿它判"要不要吸附回去"。 */
+      function pillAnchorRect() {
+        var anchor = measurePillAnchor()
+        var w = anchor.width > 0 ? anchor.width : pill.offsetWidth || 0
+        var h = pill.offsetHeight || 0
+        return {
+          left: window.innerWidth - anchor.right - w,
+          top: window.innerHeight - anchor.bottom - h,
+          width: w,
+          height: h,
+        }
+      }
+
+      /**
+       * 把胶囊摆到右下角"费用胶囊"上方。
+       *
+       * 三种处境：
+       *   · anchor（默认）：贴费用胶囊；量不到就贴右下角 20/20，宽度收到 PILL_FALLBACK_MAX；
+       *   · free：用户把它拖到别处了 —— 位置归用户（**右边缘**为锚，见 applyFreePill），
+       *     这里只保证"别掉出视口"；
+       *   · ball：静置太久收成小球 —— 上限收到 PILL_BALL_SIZE（见 collapsePill）。
+       * 宽度和上限三种处境都一样算（拖动不该顺手改宽度），只有位置分家。
+       */
+      function placePill() {
+        var anchor = measurePillAnchor()
+        pillAnchorWidth = anchor.width
+        // 费用胶囊**出现**了：小球没有存在的意义（收球的前提就是"没有可跟随的胶囊"）→ 立刻展开
+        if (pillAnchorWidth > 0 && pillBall) expandPill()
         // 只在真的变了才写 style（每帧无脑赋值会让浏览器反复标脏样式）
         var changed = false
-        var wantedRight = right + 'px'
-        var wantedBottom = bottom + 'px'
+        function write(prop, value) {
+          if (pill.style[prop] !== value) {
+            pill.style[prop] = value
+            changed = true
+          }
+        }
         // 宽度**写死**成费用胶囊的宽度：文字长短不再让它伸缩（长文字自己省略号收尾）
-        var wantedWidth = width > 0 ? width + 'px' : ''
-        if (pill.style.right !== wantedRight) {
-          pill.style.right = wantedRight
-          changed = true
+        write('width', anchor.width > 0 ? anchor.width + 'px' : '')
+        // 上限分三种情况（前两条是用户定的规则）：
+        //   · 收成小球 → 球的尺寸（max-width 参与过渡，收/放才是动画而不是跳变）；
+        //   · 量到了费用胶囊 → 清掉内联上限，回到 CSS 那条 280 —— 和它并排时同宽；
+        //   · 量不到（没装 dsh-spend / 它的胶囊此刻宽高为 0）→ 收到 PILL_FALLBACK_MAX。
+        // 判据是**本次量到的宽度**而不是"有没有找到容器"：容器在但胶囊被折叠/隐藏时同样跟不了，
+        // 那种情况也该走兜底。
+        write('maxWidth', pillBall ? PILL_BALL_SIZE + 'px' : anchor.width > 0 ? '' : PILL_FALLBACK_MAX + 'px')
+        // min-width 也一起过渡：球是 32×32 的圆，展开时要**平滑回到 0**。
+        // 之前它挂在 [data-ball="1"] 上，一摘属性就瞬间失效 → 展开第一帧宽度塌到内容宽（10px）
+        // 再长回来，看着就是先抽一下（真时间轴采样到的 0:10）。
+        write('minWidth', pillBall ? PILL_BALL_SIZE + 'px' : '0px')
+        if (pillDock === 'free') {
+          // 位置归用户：CSS right 持续钉住右边缘，只保证胶囊还在视口里。
+          clampFreePill()
+          return changed
+        }
+        if (Date.now() < pillSnapUntil) {
+          // 吸附那一下的"滑回去"窗口（见 settlePillDrop）：这期间位置仍按 left/top 维持 ——
+          // left/top 与 right/bottom 之间**不可插值**（left:124px → auto 会直接瞬移），
+          // 所以滑行必须靠 left/top 走完，之后再交还给 right/bottom 那套稳态定位。
+          var snapWidth = anchor.width > 0 ? anchor.width : pill.offsetWidth || 0
+          write('left', Math.round(window.innerWidth - anchor.right - snapWidth) + 'px')
+          write('top', Math.round(window.innerHeight - anchor.bottom - (pill.offsetHeight || 0)) + 'px')
+          write('right', 'auto')
+          write('bottom', 'auto')
+          return changed
+        }
+        // 稳态：right/bottom 定位（宽度一变，右边缘仍和费用胶囊对齐）
+        write('left', '')
+        write('top', '')
+        write('right', anchor.right + 'px')
+        write('bottom', anchor.bottom + 'px')
+        return changed
+      }
+
+      /**
+       * 静置收球。
+       *
+       * 规则（用户定的）：**只有量不到费用胶囊时**才收球 —— 有费用胶囊时它是要跟人家并排的，
+       * 收成球反而突兀。下面几种情况一律不收：小窗开着、正在翻译/追问、鼠标停在上面、正在拖。
+       * 动画靠 max-width 过渡（收球 = 把上限收到 PILL_BALL_SIZE），所以收/放是同一条平滑曲线，
+       * 不需要预先量宽度，也不会有跳变。
+       */
+      function pillCanBall() {
+        return (
+          pillAnchorWidth === 0 &&
+          !pillBall &&
+          !panelOpen &&
+          !pillHover &&
+          !pillDrag &&
+          pillStatus().tone !== 'busy'
+        )
+      }
+
+      /* ── 球心图形的形变：一个纯函数 f(p) + 一条时间对称曲线 ──────────────────
+         ⚠️ 这里**不能**用 CSS 的 `transition:d`：两条静态 path 之间 CSS 只能**线性**插值，
+            于是中途会经过一个正菱形（谷跟着尖一起动）——正是设计阶段否掉的那版。
+            必须在 JS 里按 p 现算路径，才能让"尖先抽出来、身再收进去"这个非线性轨迹成立。
+         另：f(p) 只依赖 p，p 又由时间对称曲线给出，所以收/放天然互为倒放（镜像）。 */
+
+      /** 时间对称曲线的 y(x)：和 CSS 的 cubic-bezier 同一套解法（二分 24 次足够）。 */
+      function pillStarEase(x) {
+        var c = PILL_STAR_EASE
+        var cx = 3 * c[0]
+        var bx = 3 * (c[2] - c[0]) - cx
+        var ax = 1 - cx - bx
+        var cy = 3 * c[1]
+        var by = 3 * (c[3] - c[1]) - cy
+        var ay = 1 - cy - by
+        var lo = 0
+        var hi = 1
+        var t = x
+        for (var i = 0; i < 24; i += 1) {
+          t = (lo + hi) / 2
+          if (((ax * t + bx) * t + cx) * t < x) lo = t
+          else hi = t
+        }
+        t = (lo + hi) / 2
+        return ((ay * t + by) * t + cy) * t
+      }
+
+      /** smoothstep：两端速度都为 0 —— 段与段交界处不会有速度断点（那正是"生硬"的来源）。 */
+      function pillStarSmooth(x) {
+        var c = x < 0 ? 0 : x > 1 ? 1 : x
+        return c * c * (3 - 2 * c)
+      }
+
+      /** 星的多边形顶点（8 个：尖谷交替，与「✦ 解读」那颗星同一条几何）。 */
+      function pillStarPolygon() {
+        var tip = 6.0 // 墨迹 12.0px：与胶囊里 12px 的文字同高
+        var valley = tip * 0.3788
+        var pts = []
+        for (var k = 0; k < 4; k += 1) {
+          pts.push([tip * Math.cos(k * Math.PI / 2), tip * Math.sin(k * Math.PI / 2)])
+          pts.push([valley * Math.cos((k * 90 + 45) * Math.PI / 180), valley * Math.sin((k * 90 + 45) * Math.PI / 180)])
+        }
+        return pts
+      }
+
+      /** 从原点沿 angDeg 打射线，和多边形求交 → 该角度的边界半径。 */
+      function pillStarBoundaryRadius(poly, angDeg) {
+        var a = angDeg * Math.PI / 180
+        var dx = Math.cos(a)
+        var dy = Math.sin(a)
+        var best = Infinity
+        for (var i = 0; i < poly.length; i += 1) {
+          var p0 = poly[i]
+          var p1 = poly[(i + 1) % poly.length]
+          var ex = p1[0] - p0[0]
+          var ey = p1[1] - p0[1]
+          var den = dx * ey - dy * ex
+          if (Math.abs(den) < 1e-9) continue
+          var t = (p0[0] * ey - p0[1] * ex) / den
+          var u = (p0[0] * dy - p0[1] * dx) / den
+          if (t > 0 && u >= -1e-6 && u <= 1 + 1e-6 && t < best) best = t
+        }
+        return best === Infinity ? 4 : best
+      }
+
+      var pillStarPoly = pillStarPolygon()
+
+      /**
+       * p=0 → 32 个顶点同半径 4（8px 圆点，与正圆最大偏差 0.02px）；
+       * p=1 → 32 个顶点正好落在按钮那颗星的边界上（尖与谷仍是精确顶点）。
+       * 尖走 p/.62 的 smoothstep、身走 (p-.38)/.62 的 smoothstep —— 两条都两端速度为 0，
+       * 于是整个 280ms 里图形一直在动、且没有速度断点（实测：旧版尖在 160ms 速度从 4.98 直接掉到 0）。
+       * p 允许略微越界（过冲曲线会给到 -0.03…1.06），半径按同一式子外推 —— 于是"冲出去一点再收回"。
+       */
+      function pillStarPathAt(p) {
+        var pTip = pillStarSmooth(p / PILL_STAR_TIP_END)
+        var pBody = pillStarSmooth((p - PILL_STAR_BODY_START) / (1 - PILL_STAR_BODY_START))
+        var popEnv = pillStarPopEnvelope(p)
+        var out = []
+        for (var i = 0; i < PILL_STAR_SAMPLES; i += 1) {
+          var ang = i * 360 / PILL_STAR_SAMPLES
+          var rStar = pillStarBoundaryRadius(pillStarPoly, ang)
+          // 顶点按"要往外长还是要往里收"分流：
+          //   目标半径 ≥ 4（尖和紧邻的顶点）跟"尖"的进度 pTip；< 4（往内收的顶点）跟"身"的进度 pBody。
+          // 为什么不能按"离尖的角度权重 w"混合（试过）：22.5° 那个顶点目标半径已 < 4（要往里收），却因为
+          //   w 不小而跟着尖的进度**提前**内收 → 比谷还深，边上出现一道波浪（缩小尺寸后 22.5° 比 33.75°
+          //   还深 0.11px，被冒烟抓到）。分流之后单调性可证：
+          //   外扩顶点 r = 4 + (rStar-4)·pTip ≥ 4 ≥ 4 + (rStar-4)·pBody = 内收顶点。
+          var prog = rStar >= 4 ? pTip : pBody
+          // 过冲只加在"尖"上（外扩顶点）：尖先冲出去一点、谷按部就班收 —— 呼吸感来自这里
+          if (rStar >= 4) prog += PILL_STAR_POP * popEnv
+          var r = 4 + (rStar - 4) * prog
+          var rad = ang * Math.PI / 180
+          var x = Math.round(r * Math.cos(rad) * 100) / 100
+          var y = Math.round(r * Math.sin(rad) * 100) / 100
+          out.push((i ? 'L' : 'M') + x + ' ' + y)
+        }
+        return out.join('') + 'Z'
+      }
+
+      /** 过冲的包络：p≤.55 为 0，p≈.8 到顶，p=1 归零（两端为 0 → 不破坏端点）。 */
+      function pillStarPopEnvelope(p) {
+        if (p <= 0.55 || p >= 1) return 0
+        return Math.sin(Math.PI * (p - 0.55) / 0.45)
+      }
+
+      /** 微转：圆点态 -8° → 星芒态 0°。 */
+      function pillStarTwistAt(p) {
+        return PILL_STAR_TWIST * (1 - p)
+      }
+
+      var pillStarP = 0
+      var pillStarTargetP = 0
+      var pillStarTimer = 0
+      var pillStarStarts = 0
+      var pillStarLog = ''
+
+      /** 按 p 画一帧（路径 + 微转）。 */
+      function paintPillStar(p) {
+        pillStarP = p
+        pillStar.setAttribute('d', pillStarPathAt(p))
+        pillStar.style.transform = 'rotate(' + (Math.round(pillStarTwistAt(p) * 100) / 100) + 'deg)'
+      }
+
+      /**
+       * 从当前 p 走到 to（1=收球成星，0=展开回圆点）。
+       * 时长与胶囊那条 CSS 过渡一致（PILL_MORPH_MS / PILL_MORPH），两者同拍；
+       * 被打断（比如收球途中鼠标移上去）就从当前 p 接着走，不会跳。
+       *
+       * 为什么用 setTimeout 而不是 requestAnimationFrame：
+       *   · 进度是**按时间算的**（Date.now()），不是按帧累加的 —— 所以节奏用什么驱动不影响保真度；
+       *   · 冒烟脚本跑在 --virtual-time-budget 下，那个环境**不派发 rAF**（定时器照走），
+       *     用 rAF 的话整段动画在测试里根本观察不到（也就会漏掉"中途形状不对"这类 bug）；
+       *   · 用 Date.now() 而不是 performance.now()：虚拟时钟下后者是冻住的。
+       * 16ms ≈ 60fps，和 rAF 同档；后台标签里被节流也只是直接跳到终值，无副作用。
+       */
+      function animatePillStar(to) {
+        // ① 同目标的重复调用 = 空操作。**不要**重置已经跑了一半的动画 ——
+        //    否则"反复收到同一条指令"会让它永远停在半路（实测踩过：序列 10101010、进度卡在 0.158）。
+        if (to === pillStarTargetP && (pillStarTimer || pillStarP === to)) return
+        if (pillStarTimer) {
+          clearTimeout(pillStarTimer)
+          pillStarTimer = 0
+        }
+        pillStarTargetP = to
+        pillStarStarts += 1
+        pillStarLog = (pillStarLog + (to ? '1' : '0')).slice(-40)
+        var from = pillStarP
+        if (from === to) {
+          paintPillStar(to)
+          return
         }
-        if (pill.style.bottom !== wantedBottom) {
-          pill.style.bottom = wantedBottom
-          changed = true
+        // ② 打断后接着走：时长按**剩余距离**等比缩短 → 速度不变，而且一定会走到终点。
+        //    否则"收球途中被展开"这种来回打断会让每一段都跑满 280ms，永远追不上目标。
+        var span = Math.max(60, PILL_MORPH_MS * Math.abs(to - from))
+        var done = 0
+        var last = Date.now()
+        function step() {
+          var now = Date.now()
+          var elapsed = now - last
+          // 时钟被冻住时（--virtual-time-budget 那种虚拟时钟：定时器照走、Date.now() 不动）
+          // 按"一拍 16ms"推进 —— 否则动画永远停在第一帧，测试也就看不到中途形状
+          //（而"中途形状不对"正是上一版漏掉的那个 bug）。真实环境里 elapsed 就是真实间隔。
+          if (elapsed <= 0) elapsed = 16
+          last = now
+          done += elapsed
+          var x = done / span
+          if (x >= 1) {
+            pillStarTimer = 0
+            paintPillStar(to)
+            return
+          }
+          paintPillStar(from + (to - from) * pillStarEase(x))
+          pillStarTimer = setTimeout(step, 16)
         }
-        if (pill.style.width !== wantedWidth) {
-          pill.style.width = wantedWidth
-          changed = true
+        step()
+      }
+
+      /** 球心里的图形切到"圆点"（展开）或"星芒"（收球）。 */
+      function setPillStar(ball) {
+        animatePillStar(ball ? 1 : 0)
+      }
+
+      function collapsePill() {
+        if (pillBall) return false
+        pillBall = true
+        pill.setAttribute('data-ball', '1')
+        setPillStar(true)
+        placePill() // 上限 → 球的尺寸（过渡动画交给 CSS 的 max-width）
+        if (pillDock === 'free') applyFreePill()
+        return true
+      }
+
+      function expandPill() {
+        if (!pillBall) return false
+        pillBall = false
+        pill.removeAttribute('data-ball')
+        setPillStar(false)
+        placePill() // 上限交回 200 / 费用胶囊那条
+        if (pillDock === 'free') applyFreePill()
+        return true
+      }
+
+      /**
+       * 静置计时：任何"活动"都把它重新拨满（见 notePillActivity）。
+       * 用裸 setTimeout 而不是 later()：这个计时器每帧都可能被重置，塞进 timers 数组会一直长。
+       */
+      function schedulePillIdle() {
+        if (pillIdleId) clearTimeout(pillIdleId)
+        pillIdleId = setTimeout(function () {
+          pillIdleId = 0
+          if (pillCanBall()) collapsePill()
+        }, PILL_BALL_IDLE_MS)
+      }
+
+      /** 有活动（点/划过/小窗在动/状态在变）→ 收着球就展开，并把静置计时重新拨满。 */
+      function notePillActivity() {
+        if (pillBall) expandPill()
+        schedulePillIdle()
+      }
+
+      /**
+       * 开始拖胶囊（鼠标；和面板拖动同一套写法）。
+       *
+       * 三个要点：
+       *   · 位移超过 PILL_DRAG_SLOP 才算"拖"，否则仍按点击处理（点一下要能开关小窗）；
+       *   · 一开拖就切到 free —— 贴角的轮询从此不许再动它（否则拖到一半会被拽回去）；
+       *   · 拖动期间关掉过渡（data-drag），松手再打开：吸附那一下才有动画，拖的时候不黏手。
+       */
+      function beginPillDrag(event) {
+        if (event.button !== undefined && event.button !== 0) return
+        if (pillBall) expandPill() // 球也能直接拖：先展开（hover 那条路通常已经展开了）
+        var rect = pill.getBoundingClientRect()
+        var drag = {
+          offsetX: event.clientX - rect.left,
+          offsetY: event.clientY - rect.top,
+          startX: event.clientX,
+          startY: event.clientY,
+          moved: false,
+        }
+        pillDrag = drag
+        pillDragMoved = false
+        pillSnapUntil = 0
+        var move = function (moveEvent) {
+          if (pillDrag !== drag) return
+          if (!drag.moved) {
+            var travelled = Math.abs(moveEvent.clientX - drag.startX) + Math.abs(moveEvent.clientY - drag.startY)
+            if (travelled < PILL_DRAG_SLOP) return
+            drag.moved = true
+            pillDragMoved = true
+            pill.setAttribute('data-drag', '1')
+          }
+          var w = pill.offsetWidth
+          var h = pill.offsetHeight
+          var left = clamp(moveEvent.clientX - drag.offsetX, 4, Math.max(4, window.innerWidth - w - 4))
+          var top = clamp(moveEvent.clientY - drag.offsetY, 4, Math.max(4, window.innerHeight - h - 4))
+          // 真的拖了 → 从"贴角/跟随"切成自由摆放：位置归用户，轮询不再动它
+          pillDock = 'free'
+          pillFreeRight = { right: left + w, y: top + h / 2 }
+          applyFreePill()
         }
-        return changed
+        var up = function () {
+          window.removeEventListener('mousemove', move, true)
+          window.removeEventListener('mouseup', up, true)
+          if (pillDrag !== drag) return
+          var dropRect = drag.moved ? pill.getBoundingClientRect() : null
+          pillDrag = null
+          if (!drag.moved) {
+            pill.removeAttribute('data-drag')
+            return // 没动 = 点击：交给 click 处理（不在这里 reopen）
+          }
+          settlePillDrop(dropRect)
+          notePillActivity()
+        }
+        window.addEventListener('mousemove', move, true)
+        window.addEventListener('mouseup', up, true)
+      }
+
+      /**
+       * 松手：拖到贴角位置附近就吸附回去 —— 有费用胶囊就吸附到"跟随它的位置"，
+       * 没有就吸附到右下角 20/20；离得远就留在原地（位置归用户）。
+       */
+      function settlePillDrop(rect) {
+        var target = pillAnchorRect()
+        var near =
+          Math.abs(rect.left - target.left) <= PILL_SNAP_RADIUS && Math.abs(rect.top - target.top) <= PILL_SNAP_RADIUS
+        if (!near) {
+          pillDock = 'free'
+          pillUserPlaced = true
+          clampFreePill()
+          savePillPos() // 位置归用户：记住它（存 host 上）
+          pill.removeAttribute('data-drag')
+          return false
+        }
+        // 吸附：要"滑回去"而不是瞬移。
+        // left/top 与 right/bottom 之间不可插值（left:124px → auto 会直接跳），所以先把目标位置
+        // 写成 left/top 让过渡跑完，窗口结束（PILL_SNAP_MS）再交还给 right/bottom 那套稳态定位。
+        var snappedTo = pillAnchorRect()
+        pillDock = 'anchor'
+        pillFreeRight = null
+        clearPillPos() // 吸附回右下角 = 默认位置，不用记了
+        pillSnapUntil = Date.now() + PILL_SNAP_MS
+        // 拖动时位置由 right 控制；吸附滑行由 left 控制。先在禁用过渡时
+        // 把当前几何位置交给 left，再启用过渡写目标位置，避免 auto 属性瞬跳。
+        pill.style.left = Math.round(rect.left) + 'px'
+        pill.style.top = Math.round(rect.top) + 'px'
+        pill.style.right = 'auto'
+        pill.style.bottom = 'auto'
+        void pill.offsetWidth
+        pill.removeAttribute('data-drag')
+        pill.style.left = Math.round(snappedTo.left) + 'px'
+        pill.style.top = Math.round(snappedTo.top) + 'px'
+        later(function () {
+          pillSnapUntil = 0
+          if (pillDock === 'anchor') placePill()
+        }, PILL_SNAP_MS)
+        return true
       }
 
       /**
@@ -6070,18 +6711,36 @@ window.__ModuleLoader__.load({
         // 拖拽/划词的手势不该被胶囊接走
         event.preventDefault()
         event.stopPropagation()
+        beginPillDrag(event)
       })
 
       var offPillClick = listen(pill, 'click', function (event) {
         event.preventDefault()
         event.stopPropagation()
+        // 刚拖完的那一下不算点击（否则拖到别处会顺手把抽屉开开关关）
+        if (pillDragMoved) {
+          pillDragMoved = false
+          return
+        }
         reopenLast()
+        notePillActivity()
+      })
+
+      // 鼠标停在上面就不收球（要"点得到"，不是"藏起来"）；离开时重新开始静置计时
+      var offPillEnter = listen(pill, 'mouseenter', function () {
+        pillHover = true
+        notePillActivity()
+      })
+      var offPillLeave = listen(pill, 'mouseleave', function () {
+        pillHover = false
+        notePillActivity()
       })
 
       var offPillKey = listen(pill, 'keydown', function (event) {
         if (event.key !== 'Enter' && event.key !== ' ') return
         event.preventDefault()
         reopenLast()
+        notePillActivity()
       })
 
       /**
@@ -6111,10 +6770,20 @@ window.__ModuleLoader__.load({
       })
 
       // 费用胶囊的位置/尺寸会变（展开、缩放、数字变长、插件迟到挂载）→ 自适应频率地贴上去
+      loadPillPos() // 先问一句上次拖到哪儿（异步，回来再摆）
       placePill()
       ensureResizeWatch()
       schedulePillPlacer()
       paintPill()
+      // 过渡要等"第一帧已经贴好位置"之后再打开：否则挂载那一下会从 CSS 默认的 bottom:64
+      // 一路滑到实测位置（右下角看着像自己飞过去）
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(function () {
+          pill.setAttribute('data-ready', '1')
+        })
+      } else {
+        pill.setAttribute('data-ready', '1')
+      }
 
       var offResize = listen(window, 'resize', function () {
         hideButton()
@@ -7470,6 +8139,60 @@ window.__ModuleLoader__.load({
 
       // —— 调试钩子（自动化验证用） ——
       window.__dshSelectionExplain = {
+        /** 重新读一次 host 上的胶囊位置（测试用；正常路径只在挂载时读一次）。 */
+        loadPillPos: function () {
+          pillPosAsked = false
+          pillUserPlaced = false // 测试要确定性地验"读回来"这条路径
+          loadPillPos()
+          return true
+        },
+        /** 球心图形在进度 p 处的 path（p 可略越界）—— 测试按它核对整条形变轨迹。 */
+        pillStarAt: function (p) {
+          return pillStarPathAt(p)
+        },
+        /** 当前进度与目标（测试核对收/放确实把图形推向了正确的一端）。 */
+        pillStarProgress: function () {
+          return pillStarP
+        },
+        pillStarTarget: function () {
+          return pillStarTargetP
+        },
+        /** 形变动画被起跑了几次 + 目标序列（诊断用：一直重新起跑就永远到不了终点）。 */
+        pillStarStarts: function () {
+          return pillStarStarts
+        },
+        pillStarLog: function () {
+          return pillStarLog
+        },
+        /** 直接跑一次形变动画（与胶囊状态解耦）：测试用它确定性地验"计时器在推进"。 */
+        pillStarAnimate: function (to) {
+          animatePillStar(to ? 1 : 0)
+          return true
+        },
+        /** 同步画到某个进度（几何断言/截图用，绕开计时器与异步活动）。 */
+        pillStarTo: function (p) {
+          if (pillStarTimer) {
+            clearTimeout(pillStarTimer)
+            pillStarTimer = 0
+          }
+          pillStarTargetP = p
+          paintPillStar(p)
+          return true
+        },
+        pillStarEaseAt: function (x) {
+          return pillStarEase(x)
+        },
+        /** JS 那条时长（毫秒）—— 测试核对它与 CSS 那条 .28s 是否同拍。 */
+        pillMorphMs: function () {
+          return PILL_MORPH_MS
+        },
+        /** 球心里那两条 path（圆点态 / 星芒态）—— 自检与截图模式用它，避免在测试里抄一遍几何。 */
+        pillStarD: function () {
+          return PILL_STAR_D
+        },
+        pillStarDotD: function () {
+          return PILL_STAR_DOT_D
+        },
         open: function (text, context, label, keyContext) {
           state.selection = { text: text, range: null, rect: null }
           // 和真实划词完全同一条路径（含本地缓存命中）；keyContext 省略时与 context 相同
@@ -7733,6 +8456,54 @@ window.__ModuleLoader__.load({
         place: function () {
           return placePill()
         },
+        /**
+         * 自检用：胶囊的停靠 / 拖动 / 收球状态。
+         * 拖动、吸附、收球那几条断言都读它（真浏览器里跑，量的是真布局）。
+         */
+        pillState: function () {
+          var rect = pill.getBoundingClientRect()
+          return {
+            dock: pillDock,
+            ball: pillBall,
+            hover: pillHover,
+            dragging: !!pillDrag,
+            ready: pill.getAttribute('data-ready') === '1',
+            anchorWidth: pillAnchorWidth,
+            freeRight: pillFreeRight ? { right: Math.round(pillFreeRight.right), y: Math.round(pillFreeRight.y) } : null,
+            rect: {
+              left: Math.round(rect.left),
+              top: Math.round(rect.top),
+              width: Math.round(rect.width),
+              height: Math.round(rect.height),
+              right: Math.round(window.innerWidth - rect.right),
+              bottom: Math.round(window.innerHeight - rect.bottom),
+            },
+            style: {
+              left: pill.style.left,
+              top: pill.style.top,
+              right: pill.style.right,
+              bottom: pill.style.bottom,
+              width: pill.style.width,
+              maxWidth: pill.style.maxWidth,
+            },
+            ballSize: PILL_BALL_SIZE,
+            idleMs: PILL_BALL_IDLE_MS,
+            snapRadius: PILL_SNAP_RADIUS,
+          }
+        },
+        /**
+         * 自检用：立刻跑一次"静置该不该收球"（测试里等不起 PILL_BALL_IDLE_MS 那 10 秒）。
+         * 返回 true = 这次真的收成球了。
+         */
+        pillIdle: function () {
+          if (pillIdleId) {
+            clearTimeout(pillIdleId)
+            pillIdleId = 0
+          }
+          if (!pillCanBall()) return false
+          collapsePill()
+          return true
+        },
         /** 自检用：当前的自适应间隔（毫秒）。 */
         pollDelay: function () {
           return pillPollDelay
@@ -7859,6 +8630,8 @@ window.__ModuleLoader__.load({
           offDrag()
           offPillDown()
           offPillClick()
+          offPillEnter()
+          offPillLeave()
           offPillKey()
           offPreviewHeight()
           offBridgeMessage()
@@ -7906,6 +8679,9 @@ window.__ModuleLoader__.load({
           state.quotes = []
           if (state.request) state.request.abort()
           for (var i = 0; i < timers.length; i++) clearTimeout(timers[i])
+          // 静置计时器是裸 setTimeout（不进 timers 数组，见 schedulePillIdle），单独清
+          if (pillIdleId) clearTimeout(pillIdleId)
+        if (pillStarTimer) clearTimeout(pillStarTimer)
           cache.clear()
           if (layer.parentNode) layer.parentNode.removeChild(layer)
           if (button.parentNode) button.parentNode.removeChild(button)
@@ -8148,13 +8924,22 @@ window.__ModuleLoader__.load({
       return svg
     }
 
+    /**
+     * 解读浮标上的四角星（✦）。
+     *
+     * 路径必须在 16×16 画布里**墨迹居中**（上下各留 2.4，墨迹中心 = 8）：
+     * 浮动按钮是 `align-items:center` 的 flex，居中的是**画布盒子**，
+     * 画布内偏一点，图标就整体偏一点。老路径 y 占 1.2~12.4（中心 6.8），
+     * 星形于是比右边「解读」两个字高了 1.1px（用户报的"✦ 和 解读 没对齐"）。
+     * 同理 x 占 2.4~13.6（中心 8，本来就对称）—— 横向那点偏差交给 CSS 的负外边距。
+     */
     function sparkleIcon() {
       var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       svg.setAttribute('viewBox', '0 0 16 16')
       svg.setAttribute('fill', 'currentColor')
       svg.setAttribute('aria-hidden', 'true')
       var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-      path.setAttribute('d', 'M8 1.2l1.5 4.1 4.1 1.5-4.1 1.5L8 12.4 6.5 8.3 2.4 6.8l4.1-1.5L8 1.2z')
+      path.setAttribute('d', 'M8 2.4l1.5 4.1 4.1 1.5-4.1 1.5L8 13.6 6.5 9.5 2.4 8l4.1-1.5L8 2.4z')
       svg.appendChild(path)
       return svg
     }