@iasiv5/dsh-quota-watch 0.1.11 → 0.1.13

package/README.md

@@ -6,7 +6,7 @@
 
 ## 功能
 
-- **悬浮胶囊**（0.1.1 起为唯一浮动形态，圆球已退役）：拖拽松手后磁性贴靠左右屏幕边缘、完整可见（距边 8px），记住停靠边与纵向位置，跨重启恢复；数据文本变宽、窗口缩放或转屏后自动重新贴边。拖拽跟手（保持抓取点，transform 渲染）；触摸设备可直接拖拽（触摸阈值更宽防误拖）、长按 500ms 呼出菜单，点击热区扩展到 44px，自动避让 iPhone 刘海 / 小黑条（safe-area）。胶囊一行显示「GLM 13% · Copilot 24%」，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时胶囊轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动、贴边直落无动画）；颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出摘要。
+- **悬浮胶囊**（0.1.1 起为唯一浮动形态，圆球已退役）：常驻屏幕（默认右下角安全区），可自由拖拽到屏幕任意位置停放，位置跨重启记忆，越界自动钳回视口（距边 8px 安全边距）。拖拽跟手（保持抓取点，transform 渲染）；触摸设备可直接拖拽（触摸阈值更宽防误拖）、长按 500ms 呼出菜单，点击热区扩展到 44px，自动避让 iPhone 刘海 / 小黑条（safe-area）。胶囊一行显示「GLM 13% · Copilot 24%」，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时胶囊轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动）；颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出摘要。
 - **面板**：点击胶囊展开浮动详情面板（半透明毛玻璃底，宽 `min(320px, 100vw−24px)`，靠边自动翻侧，滚动 / 缩放跟随；≤480px 窄屏自动改为底部弹层并避开 safe-area），头部带标题与 ✕，Esc 或点击面板外关闭。概览列两个 provider 行，点击进入详情：GLM 为今日 Tokens / 调用次数双大数字 + 五列对齐窗口网格（MCP（月）→ 5 小时 → 每月 → 每周固定排序，周窗口未下发时显示「每周额度 · ♾️（无限）」占位）+ 分模型用量行；Copilot 为可用额度、本期已用（credits 消耗 + 弱化百分比）、重置时间三行。接口未下发有效 `remaining` / `percent_remaining` 时该行不渲染，`credits_used` 绝不用于推算余额。
 - **侧边栏卡片（可选，默认隐藏）**：胶囊是默认界面；需要侧栏卡片时在胶囊右键菜单开启「显示侧边栏卡片」（Web profile 侧栏底部区块存在时才可选）。卡片显示时提供摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测。侧栏收起（Web 窄栏）或容器过窄（<160px，跨 profile 通用判据）时卡片自动隐藏，侧栏整体不存在（Desktop 收起态）同样自然缺席、无报错——入口始终由悬浮胶囊承载。
 - **右键菜单**：显示 / 隐藏侧边栏卡片 · 立即刷新。菜单项随上下文增减（无侧栏卡片挂载点时只剩刷新项）。
@@ -47,4 +47,4 @@ dsh plugin --profile web add @iasiv5/dsh-quota-watch
 
 ## English summary
 
-DSH Quota Watch is a personal DSH quota monitor built around a persistent floating capsule: a one-line `GLM x% · Copilot y%` summary that turns amber past 80% and red past 95%. Dragging it is grab-accurate (transform-based, rAF-batched) and the capsule magnetically docks to the nearest left/right screen edge after release — fully visible, with the docked edge and vertical offset remembered across restarts. Touch devices drag directly (wider slop against accidental drags), a 500ms long-press opens the context menu (iOS has no right-click), the hit area is padded to 44px and the dock respects `env(safe-area-inset-*)`. Clicking the capsule opens a floating glass panel whose overview reuses the classic 0.0.18 summary rows (label · bar · percent · extra · chevron) and whose detail pages replicate the 0.0.18 big numbers, window grid and per-model list; the panel closes via ✕, Esc or an outside click, and viewports ≤480px dock it to the bottom as a sheet. A sidebar card remains an opportunistic extra entry on web profiles, opt-in from the capsule's menu, and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating capsule alone. The right-click menu (long-press on touch) offers card visibility and an immediate provider re-probe. Credentials are resolved on every host-side probe, only normalized values reach the browser, no usage history is kept, and a Copilot balance is never inferred from credits used. Colors ride DSH semantic theme tokens with hardcoded fallbacks; all UI lives inside a shadow root (ADR 0001).
+DSH Quota Watch is a personal DSH quota monitor built around a persistent floating capsule: a one-line `GLM x% · Copilot y%` summary that turns amber past 80% and red past 95%. Dragging it is grab-accurate (transform-based, rAF-batched) and free to place anywhere on the screen, with position remembered across restarts and viewport boundaries automatically clamped. Touch devices drag directly (wider slop against accidental drags), a 500ms long-press opens the context menu (iOS has no right-click), the hit area is padded to 44px and placement respects `env(safe-area-inset-*)`. Clicking the capsule opens a floating glass panel whose overview reuses the classic 0.0.18 summary rows (label · bar · percent · extra · chevron) and whose detail pages replicate the 0.0.18 big numbers, window grid and per-model list; the panel closes via ✕, Esc or an outside click, and viewports ≤480px dock it to the bottom as a sheet. A sidebar card remains an opportunistic extra entry on web profiles, opt-in from the capsule's menu, and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating capsule alone. The right-click menu (long-press on touch) offers card visibility and an immediate provider re-probe. Credentials are resolved on every host-side probe, only normalized values reach the browser, no usage history is kept, and a Copilot balance is never inferred from credits used. Colors ride DSH semantic theme tokens with hardcoded fallbacks; all UI lives inside a shadow root (ADR 0001).

package/lib/client.js

@@ -82,7 +82,7 @@ function remainingToUsed(percentRemaining) {
 }
 
 // src/client/prefs.mjs
-var FLOAT_DOCK_KEY = "dsh-quota-watch:float-dock";
+var FLOAT_POSITION_KEY = "dsh-quota-watch:float-position";
 var SURFACE_FLAGS_KEY = "dsh-quota-watch:surface-flags";
 var MARGIN = 8;
 var ZERO_INSETS = { left: 0, right: 0, top: 0, bottom: 0 };
@@ -107,26 +107,25 @@ function clampPoint(point, viewport, size = 0, insets = ZERO_INSETS) {
     y: Math.min(Math.max(point.y, minY), maxY)
   };
 }
-var DOCK_EDGES = /* @__PURE__ */ new Set(["left", "right"]);
-function loadFloatDock(storage) {
+function loadFloatPosition(storage) {
   try {
-    const raw = storage.getItem(FLOAT_DOCK_KEY);
+    const raw = storage.getItem(FLOAT_POSITION_KEY);
     if (typeof raw !== "string" || raw === "") return null;
     const parsed = JSON.parse(raw);
-    if (typeof parsed !== "object" || parsed === null || !DOCK_EDGES.has(parsed.edge) || !Number.isFinite(parsed.offsetY)) {
+    if (typeof parsed !== "object" || parsed === null || !Number.isFinite(parsed.x) || !Number.isFinite(parsed.y)) {
       return null;
     }
-    return { edge: parsed.edge, offsetY: parsed.offsetY };
+    return { x: parsed.x, y: parsed.y };
   } catch {
     return null;
   }
 }
-function saveFloatDock(storage, dock) {
-  if (typeof dock !== "object" || dock === null || !DOCK_EDGES.has(dock.edge) || !Number.isFinite(dock.offsetY)) {
-    throw new TypeError(`invalid float dock: ${JSON.stringify(dock)}`);
+function saveFloatPosition(storage, point) {
+  if (typeof point !== "object" || point === null || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+    throw new TypeError(`invalid float position: ${JSON.stringify(point)}`);
   }
   try {
-    storage.setItem(FLOAT_DOCK_KEY, JSON.stringify({ edge: dock.edge, offsetY: dock.offsetY }));
+    storage.setItem(FLOAT_POSITION_KEY, JSON.stringify({ x: point.x, y: point.y }));
   } catch {
   }
 }
@@ -166,17 +165,6 @@ function pillTopLeft(point, grab) {
 function clampFrame(point, grab, size, viewport, insets) {
   return clampPoint(pillTopLeft(point, grab), viewport, size, insets);
 }
-function releaseDock(point, grab, size, viewport, insets) {
-  const topLeft = pillTopLeft(point, grab);
-  const centerX = topLeft.x + size.width / 2;
-  const edge = centerX < viewport.width / 2 ? "left" : "right";
-  return { edge, offsetY: clampPoint(topLeft, viewport, size, insets).y };
-}
-function dockX(edge, width, viewport, insets) {
-  const insetLeft = Number.isFinite(insets?.left) ? insets.left : 0;
-  const insetRight = Number.isFinite(insets?.right) ? insets.right : 0;
-  return edge === "left" ? MARGIN + insetLeft : viewport.width - insetRight - MARGIN - width;
-}
 function parseInset(computedValue) {
   const value = Number.parseFloat(computedValue);
   return Number.isFinite(value) ? value : 0;
@@ -296,11 +284,10 @@ var FLOAT_STYLE_TEXT = `
 .dqw-capsule-glm.warn, .dqw-capsule-copilot.warn { color: var(--dsw-alias-label-warning, #d29922); }
 .dqw-capsule-glm.danger, .dqw-capsule-copilot.danger { color: var(--dsw-alias-label-danger, #c93c3c); }
 .dqw-capsule[hidden] { display: none; }
-.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); will-change: transform; transition: none; }
+.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: scale(1.04); transition: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
   .dqw-capsule { transition: border-color .12s ease-out, box-shadow .12s ease-out; }
-  .dqw-capsule--snapping { transition: transform 150ms cubic-bezier(.2,.8,.2,1); }
 }
 @media print { :host { display: none !important; } }
 @keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@@ -544,19 +531,19 @@ function mountQuotaCard({
     const rect = surface.getBoundingClientRect();
     return rect.width > 0 ? { width: rect.width, height: rect.height } : FALLBACK_SIZE;
   };
-  const applyDock = () => {
+  const applyPosition = () => {
     const viewWidth = win.innerWidth ?? 1024;
     const viewHeight = win.innerHeight ?? 768;
     const viewport = { width: viewWidth, height: viewHeight };
     const size = measureSurface();
-    const dock = loadFloatDock(win.localStorage) ?? {
-      edge: "right",
-      offsetY: viewHeight - MARGIN - size.height
-    };
     const insets = readInsets();
-    const top = clampPoint({ x: 0, y: dock.offsetY }, viewport, size, insets).y;
-    floatHost.style.left = `${Math.round(dockX(dock.edge, size.width, viewport, insets))}px`;
-    floatHost.style.top = `${Math.round(top)}px`;
+    const pos = loadFloatPosition(win.localStorage) ?? {
+      x: viewWidth - MARGIN - insets.right - size.width,
+      y: viewHeight - MARGIN - insets.bottom - size.height
+    };
+    const point = clampPoint(pos, viewport, size, insets);
+    floatHost.style.left = `${Math.round(point.x)}px`;
+    floatHost.style.top = `${Math.round(point.y)}px`;
   };
   const safeAreaProbe = text(doc, "div", "", "");
   safeAreaProbe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);";
@@ -574,7 +561,7 @@ function mountQuotaCard({
       return ZERO_INSETS2;
     }
   };
-  applyDock();
+  applyPosition();
   floatRoot.append(panel);
   const menu = doc.createElement("div");
   menu.className = "dqw-menu";
@@ -654,17 +641,20 @@ function mountQuotaCard({
         if (!dragging || !lastPoint || disposed) return;
         const viewWidth = win.innerWidth ?? 1024;
         const viewHeight = win.innerHeight ?? 768;
-        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, ZERO_INSETS2);
+        const insets = readInsets();
+        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, insets);
         const dx = topLeft.x - restX;
         const dy = topLeft.y - restY;
-        surfaceEl.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0) scale(1.03)`;
+        floatHost.style.willChange = "transform";
+        floatHost.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`;
       });
     };
-    const finishDragRelease = (dock) => {
-      surfaceEl.classList.remove("dqw-capsule--dragging", "dqw-capsule--snapping");
-      surfaceEl.style.transform = "";
-      saveFloatDock(win.localStorage, dock);
-      applyDock();
+    const finishDragRelease = (point) => {
+      surfaceEl.classList.remove("dqw-capsule--dragging");
+      floatHost.style.willChange = "";
+      floatHost.style.transform = "";
+      saveFloatPosition(win.localStorage, point);
+      applyPosition();
       suppressNextClick = true;
     };
     const onPointerUp = (event) => {
@@ -678,7 +668,7 @@ function mountQuotaCard({
       const viewHeight = win.innerHeight ?? 768;
       const insets = readInsets();
       const viewport = { width: viewWidth, height: viewHeight };
-      const dock = releaseDock(
+      const point = clampFrame(
         { x: event.clientX, y: event.clientY },
         grab,
         dragSize,
@@ -686,26 +676,7 @@ function mountQuotaCard({
         insets
       );
       suppressNextClick = true;
-      const motionAllowed = typeof win.matchMedia === "function" && win.matchMedia("(prefers-reduced-motion: no-preference)").matches;
-      if (motionAllowed) {
-        surfaceEl.classList.remove("dqw-capsule--dragging");
-        surfaceEl.classList.add("dqw-capsule--snapping");
-        const targetLeft = dockX(dock.edge, dragSize.width, viewport, insets);
-        surfaceEl.style.transform = `translate3d(${Math.round(targetLeft - restX)}px, ${Math.round(dock.offsetY - restY)}px, 0) scale(1)`;
-        let settled = false;
-        let snapTimer;
-        const settle = () => {
-          if (settled || disposed) return;
-          settled = true;
-          surfaceEl.removeEventListener("transitionend", settle);
-          win.clearTimeout(snapTimer);
-          finishDragRelease(dock);
-        };
-        surfaceEl.addEventListener("transitionend", settle);
-        snapTimer = win.setTimeout(settle, 200);
-      } else {
-        finishDragRelease(dock);
-      }
+      finishDragRelease(point);
     };
     const onPointerCancel = () => {
       if (!dragging) return;
@@ -713,8 +684,9 @@ function mountQuotaCard({
       clearLongPress();
       unbindGesture();
       doc.body.style.userSelect = "";
-      surfaceEl.classList.remove("dqw-capsule--dragging", "dqw-capsule--snapping");
-      surfaceEl.style.transform = "";
+      surfaceEl.classList.remove("dqw-capsule--dragging");
+      floatHost.style.willChange = "";
+      floatHost.style.transform = "";
     };
     surfaceEl.addEventListener("pointerdown", onPointerDown);
     const disposeDrag2 = () => {
@@ -1016,7 +988,7 @@ function mountQuotaCard({
     const label = summary === "" ? copy.title : locale === "zh" ? `${copy.title}\uFF1A${summary}` : `${copy.title}: ${summary}`;
     surface.setAttribute("aria-label", label);
     surface.title = label;
-    applyDock();
+    applyPosition();
   };
   const onSurfaceClick = () => {
     if (suppressNextClick) {
@@ -1236,7 +1208,7 @@ function mountQuotaCard({
   const onWinResize = () => {
     placePanel();
     syncCardVisibility();
-    applyDock();
+    applyPosition();
   };
   const onDocKeydown = (event) => {
     if (event.key !== "Escape") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client/drag.mjs

@@ -1,8 +1,8 @@
-// DOM-free drag state machine for @iasiv5/dsh-quota-watch (ADR 0002).
+// DOM-free drag state machine for @iasiv5/dsh-quota-watch.
 // Point/rect values come from the caller; nothing here touches the DOM, so the
 // math stays unit-testable under jsdom.
 
-import { MARGIN, clampPoint } from './prefs.mjs'
+import { clampPoint } from './prefs.mjs'
 
 export const DRAG_SLOP_MOUSE = 6
 export const DRAG_SLOP_TOUCH = 10
@@ -22,26 +22,11 @@ function pillTopLeft(point, grab) {
   return { x: point.x - grab.dx, y: point.y - grab.dy }
 }
 
-/** Live clamp for the pill top-left while the gesture is active. */
+/** Live clamp for the pill top-left while the gesture is active or upon release. */
 export function clampFrame(point, grab, size, viewport, insets) {
   return clampPoint(pillTopLeft(point, grab), viewport, size, insets)
 }
 
-/** Rest dock for a release: nearest horizontal edge by pill center, vertical offset clamped. */
-export function releaseDock(point, grab, size, viewport, insets) {
-  const topLeft = pillTopLeft(point, grab)
-  const centerX = topLeft.x + size.width / 2
-  const edge = centerX < viewport.width / 2 ? 'left' : 'right'
-  return { edge, offsetY: clampPoint(topLeft, viewport, size, insets).y }
-}
-
-/** Resting x for a docked pill: always derived, never stored. */
-export function dockX(edge, width, viewport, insets) {
-  const insetLeft = Number.isFinite(insets?.left) ? insets.left : 0
-  const insetRight = Number.isFinite(insets?.right) ? insets.right : 0
-  return edge === 'left' ? MARGIN + insetLeft : viewport.width - insetRight - MARGIN - width
-}
-
 /** Computed-style padding value ("20px" | "" | "auto") → numeric inset or 0. */
 export function parseInset(computedValue) {
   const value = Number.parseFloat(computedValue)

package/src/client/prefs.mjs

@@ -1,7 +1,7 @@
 // Float-shell preferences for @iasiv5/dsh-quota-watch.
 // Pure logic: no DOM. `storage` is a localStorage-like object (getItem/setItem).
 
-export const FLOAT_DOCK_KEY = 'dsh-quota-watch:float-dock'
+export const FLOAT_POSITION_KEY = 'dsh-quota-watch:float-position'
 export const SURFACE_FLAGS_KEY = 'dsh-quota-watch:surface-flags'
 
 export const MARGIN = 8
@@ -31,40 +31,38 @@ export function clampPoint(point, viewport, size = 0, insets = ZERO_INSETS) {
   }
 }
 
-const DOCK_EDGES = new Set(['left', 'right'])
-
-export function loadFloatDock(storage) {
+export function loadFloatPosition(storage) {
   try {
-    const raw = storage.getItem(FLOAT_DOCK_KEY)
+    const raw = storage.getItem(FLOAT_POSITION_KEY)
     if (typeof raw !== 'string' || raw === '') return null
     const parsed = JSON.parse(raw)
     if (
       typeof parsed !== 'object' ||
       parsed === null ||
-      !DOCK_EDGES.has(parsed.edge) ||
-      !Number.isFinite(parsed.offsetY)
+      !Number.isFinite(parsed.x) ||
+      !Number.isFinite(parsed.y)
     ) {
       return null
     }
-    return { edge: parsed.edge, offsetY: parsed.offsetY }
+    return { x: parsed.x, y: parsed.y }
   } catch {
     return null
   }
 }
 
-export function saveFloatDock(storage, dock) {
+export function saveFloatPosition(storage, point) {
   if (
-    typeof dock !== 'object' ||
-    dock === null ||
-    !DOCK_EDGES.has(dock.edge) ||
-    !Number.isFinite(dock.offsetY)
+    typeof point !== 'object' ||
+    point === null ||
+    !Number.isFinite(point.x) ||
+    !Number.isFinite(point.y)
   ) {
-    throw new TypeError(`invalid float dock: ${JSON.stringify(dock)}`)
+    throw new TypeError(`invalid float position: ${JSON.stringify(point)}`)
   }
   try {
-    storage.setItem(FLOAT_DOCK_KEY, JSON.stringify({ edge: dock.edge, offsetY: dock.offsetY }))
+    storage.setItem(FLOAT_POSITION_KEY, JSON.stringify({ x: point.x, y: point.y }))
   } catch {
-    /* storage unavailable; dock stays session-only */
+    /* storage unavailable; position stays session-only */
   }
 }
 

package/src/client.mjs

@@ -1,7 +1,7 @@
 import { CLIENT_POLL_INTERVAL_MS, CLIENT_ROUTES } from './shared.mjs'
 import { remainingToUsed } from './core/adapters.mjs'
-import { MARGIN, clampPoint, loadFloatDock, loadSurfaceFlags, saveFloatDock, saveSurfaceFlags } from './client/prefs.mjs'
-import { DRAG_SLOP_MOUSE, DRAG_SLOP_TOUCH, LONG_PRESS_MS, parseInset, clampFrame, dockX, dragSlop, grabOffset, releaseDock } from './client/drag.mjs'
+import { MARGIN, clampPoint, loadFloatPosition, loadSurfaceFlags, saveFloatPosition, saveSurfaceFlags } from './client/prefs.mjs'
+import { DRAG_SLOP_MOUSE, DRAG_SLOP_TOUCH, LONG_PRESS_MS, parseInset, clampFrame, dragSlop, grabOffset } from './client/drag.mjs'
 
 export const name = 'quota-watch-client'
 export const inject = []
@@ -130,11 +130,10 @@ const FLOAT_STYLE_TEXT = `
 .dqw-capsule-glm.warn, .dqw-capsule-copilot.warn { color: var(--dsw-alias-label-warning, #d29922); }
 .dqw-capsule-glm.danger, .dqw-capsule-copilot.danger { color: var(--dsw-alias-label-danger, #c93c3c); }
 .dqw-capsule[hidden] { display: none; }
-.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); will-change: transform; transition: none; }
+.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: scale(1.04); transition: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
   .dqw-capsule { transition: border-color .12s ease-out, box-shadow .12s ease-out; }
-  .dqw-capsule--snapping { transition: transform 150ms cubic-bezier(.2,.8,.2,1); }
 }
 @media print { :host { display: none !important; } }
 @keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@@ -442,23 +441,21 @@ export function mountQuotaCard({
     const rect = surface.getBoundingClientRect()
     return rect.width > 0 ? { width: rect.width, height: rect.height } : FALLBACK_SIZE
   }
-  /** Rest position = docked edge + persisted offsetY; x is always derived (ADR 0002). */
-  const applyDock = () => {
+  /** Position = user preferred {x, y} clamped to viewport & safe-area insets. */
+  const applyPosition = () => {
     const viewWidth = win.innerWidth ?? 1024
     const viewHeight = win.innerHeight ?? 768
     const viewport = { width: viewWidth, height: viewHeight }
     const size = measureSurface()
-    const dock = loadFloatDock(win.localStorage) ?? {
-      edge: 'right',
-      offsetY: viewHeight - MARGIN - size.height,
-    }
-    // Deliberately NOT persisted here: a window that starts small (Electron
-    // restore, split-screen) must not clobber the user's stored dock — storage
-    // updates on drag release only; this is the visual clamp.
     const insets = readInsets()
-    const top = clampPoint({ x: 0, y: dock.offsetY }, viewport, size, insets).y
-    floatHost.style.left = `${Math.round(dockX(dock.edge, size.width, viewport, insets))}px`
-    floatHost.style.top = `${Math.round(top)}px`
+    const pos = loadFloatPosition(win.localStorage) ?? {
+      x: viewWidth - MARGIN - insets.right - size.width,
+      y: viewHeight - MARGIN - insets.bottom - size.height,
+    }
+    // Clamped visually so a restored or shrunk window never lets the capsule fall outside.
+    const point = clampPoint(pos, viewport, size, insets)
+    floatHost.style.left = `${Math.round(point.x)}px`
+    floatHost.style.top = `${Math.round(point.y)}px`
   }
   // Safe-area probe: env() insets ride computed padding; jsdom reports '' which
   // parseInset normalizes to 0, so tests without a stub see zero insets.
@@ -480,7 +477,7 @@ export function mountQuotaCard({
       return ZERO_INSETS
     }
   }
-  applyDock()
+  applyPosition()
   // Panel lives inside the float shadow root from now on (契约总表「归属时序」).
   floatRoot.append(panel)
   const menu = doc.createElement('div')
@@ -575,17 +572,20 @@ export function mountQuotaCard({
         if (!dragging || !lastPoint || disposed) return
         const viewWidth = win.innerWidth ?? 1024
         const viewHeight = win.innerHeight ?? 768
-        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, ZERO_INSETS)
+        const insets = readInsets()
+        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, insets)
         const dx = topLeft.x - restX
         const dy = topLeft.y - restY
-        surfaceEl.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0) scale(1.03)`
+        floatHost.style.willChange = 'transform'
+        floatHost.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`
       })
     }
-    const finishDragRelease = (dock) => {
-      surfaceEl.classList.remove('dqw-capsule--dragging', 'dqw-capsule--snapping')
-      surfaceEl.style.transform = ''
-      saveFloatDock(win.localStorage, dock)
-      applyDock()
+    const finishDragRelease = (point) => {
+      surfaceEl.classList.remove('dqw-capsule--dragging')
+      floatHost.style.willChange = ''
+      floatHost.style.transform = ''
+      saveFloatPosition(win.localStorage, point)
+      applyPosition()
       suppressNextClick = true
     }
     const onPointerUp = (event) => {
@@ -599,53 +599,27 @@ export function mountQuotaCard({
       const viewHeight = win.innerHeight ?? 768
       const insets = readInsets()
       const viewport = { width: viewWidth, height: viewHeight }
-      const dock = releaseDock(
+      const point = clampFrame(
         { x: event.clientX, y: event.clientY },
         grab,
         dragSize,
         viewport,
         insets,
       )
-      // The real click lands within ms of pointerup — suppression is armed
-      // synchronously here, never deferred to the animation's settle (E1-2).
       suppressNextClick = true
-      // jsdom has no matchMedia: the typeof guard keeps the release working
-      // (direct commit) where the motion query cannot be asked at all.
-      const motionAllowed = typeof win.matchMedia === 'function'
-        && win.matchMedia('(prefers-reduced-motion: no-preference)').matches
-      if (motionAllowed) {
-        surfaceEl.classList.remove('dqw-capsule--dragging')
-        surfaceEl.classList.add('dqw-capsule--snapping')
-        // Animate toward the NEW dock (delta from rest) — the host still sits
-        // at the old dock until settle commits it, so (0,0) would slide the
-        // pill backwards first and then teleport (E1-1).
-        const targetLeft = dockX(dock.edge, dragSize.width, viewport, insets)
-        surfaceEl.style.transform = `translate3d(${Math.round(targetLeft - restX)}px, ${Math.round(dock.offsetY - restY)}px, 0) scale(1)`
-        let settled = false
-        let snapTimer
-        const settle = () => {
-          if (settled || disposed) return
-          settled = true
-          surfaceEl.removeEventListener('transitionend', settle)
-          win.clearTimeout(snapTimer)
-          finishDragRelease(dock)
-        }
-        surfaceEl.addEventListener('transitionend', settle)
-        snapTimer = win.setTimeout(settle, 200)
-      } else {
-        finishDragRelease(dock)
-      }
+      finishDragRelease(point)
     }
     /** A canceled pointer (scroll takeover, incoming call, palm) resets the
-     * gesture: no dock is persisted and the trailing click stays allowed. */
+     * gesture: no position is persisted and the trailing click stays allowed. */
     const onPointerCancel = () => {
       if (!dragging) return
       dragging = false
       clearLongPress()
       unbindGesture()
       doc.body.style.userSelect = ''
-      surfaceEl.classList.remove('dqw-capsule--dragging', 'dqw-capsule--snapping')
-      surfaceEl.style.transform = ''
+      surfaceEl.classList.remove('dqw-capsule--dragging')
+      floatHost.style.willChange = ''
+      floatHost.style.transform = ''
     }
     surfaceEl.addEventListener('pointerdown', onPointerDown)
     const disposeDrag = () => {
@@ -977,9 +951,7 @@ export function mountQuotaCard({
     const label = summary === '' ? copy.title : locale === 'zh' ? `${copy.title}：${summary}` : `${copy.title}: ${summary}`
     surface.setAttribute('aria-label', label)
     surface.title = label
-    // Re-derive the docked x every render: the pill's width follows its text,
-    // and the stored dock only knows the edge, not the pixel (ADR 0002).
-    applyDock()
+    applyPosition()
   }
 
   const onSurfaceClick = () => {
@@ -1224,7 +1196,7 @@ export function mountQuotaCard({
   const onWinResize = () => {
     placePanel()
     syncCardVisibility()
-    applyDock()
+    applyPosition()
   }
   const onDocKeydown = (event) => {
     if (event.key !== 'Escape') return