dsh-select-quote 0.3.5 → 0.3.7

package/lib/client.js

@@ -5,8 +5,8 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/client/dom/composer-host.ts
 /**
 * Host DOM contract for the resident composer.
@@ -95,7 +95,6 @@ body {
   --dsq-font-size: var(--dsh-content-font-size, 14px);
   --dsq-font-delta: var(--dsh-content-font-delta, 0px);
   --dsq-bg-raised: var(--dsw-alias-bg-layer-1, #fff);
-  --dsq-bg-panel: var(--dsw-alias-bg-layer-2, #fff);
   --dsq-bg-toast: var(--dsw-alias-bg-layer-3, rgba(0, 0, 0, 0.78));
   --dsq-line: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
   --dsq-line-divider: var(--dsw-alias-border-l4, rgba(0, 0, 0, 0.12));
@@ -106,10 +105,9 @@ body {
   --dsq-label-2: var(--dsw-alias-label-secondary, rgba(0, 0, 0, 0.65));
   --dsq-label-3: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
   --dsq-link: var(--dsw-alias-link, rgba(0, 0, 0, 0.65));
-  --dsq-shadow-pop: var(--dsw-elevation-prominent, 0 3px 8px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 0, 0, 0.05));
-  --dsq-shadow-soft: var(--dsw-elevation-soft, 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 0, 0, 0.06));
   --dsq-bubble: var(--dsw-specific-bubble, rgba(0, 0, 0, 0.05));
-  --dsq-menu: var(--dsw-specific-menu, #fff);
+  --dsq-menu: var(--dsw-menu-surface-fill, rgba(248, 249, 250, .58));
+  --dsq-menu-backdrop: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
   --dsq-accent-400: var(--dsw-static-blue-400, #1677ff);
   --dsq-accent: var(--dsw-static-blue-500, #3b82f6);
   --dsq-accent-tint: var(--dsw-static-blue-50p, #eaf3ff);
@@ -126,23 +124,150 @@ body {
 ${atomRules}
 
 /* Layer 3 — components. Floating selection toolbar. */
+
+/* 入场动画位置（2026-10-19 定稿）：scale + Y 位移都放在 .dsq_toolbar 容器上。
+   规范层面 transform 不形成 backdrop root（opacity 才会），磨砂不受影响；用户已在
+   真实客户端验证过容器 scale 没问题。若日后换环境再出问题，回退路径：去掉容器上的
+   animation，给 .dsq_toolbarInner 加回 dsq-rise-in（关键帧还在）。 */
+@keyframes dsq-toolbar-in {
+  from {
+    transform: translate(-50%, -100%) translateY(4px) scale(0.96);
+  }
+  to {
+    transform: translate(-50%, -100%) translateY(0) scale(1);
+  }
+}
+
+/* Same entrance for the below-anchor variant (only the content top uses it). */
+@keyframes dsq-toolbar-in-below {
+  from {
+    transform: translate(-50%, 0) translateY(-4px) scale(0.96);
+  }
+  to {
+    transform: translate(-50%, 0) translateY(0) scale(1);
+  }
+}
+
+/* Comment phase: the hint sits above the popover's top-left corner (explicit
+   top-left placement comes from placeCommentPop), so the entrance no longer
+   owns the centering shift. */
+@keyframes dsq-toolbar-in-popover-top {
+  from {
+    transform: translateY(4px) scale(0.96);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* 内容层的 rise：悬停面板的列表在用；工具条改用容器 scale 后这条在这里待命。 */
+@keyframes dsq-rise-in {
+  from {
+    transform: translateY(4px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* 宿主菜单材质（官方 material 图层同款）：填充走 --dsw-menu-surface-fill，模糊走
+   --dsw-menu-backdrop-filter（恒为 blur(40px) saturate(150%)），亮暗自动翻。
+   画在 z-index:-1 的独立图层上，内容在它之上：模糊只取身后的页面，不会把
+   面板里的文字一起糊掉。工具条、评论气泡、悬停面板三个浮层共用这一条。
+   注意：macOS 上宿主另有一个 --dsw-specific-menu（覆写成 94% 不透明）给它的
+   菜单用；这里按需求用 surface-fill，所以我们的浮层会比宿主自己的菜单更透。 */
+.dsq_toolbar::before,
+.dsq_commentPop::before,
+.dsq_summaryHoverInner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--dsq-menu);
+  backdrop-filter: var(--dsq-menu-backdrop);
+  -webkit-backdrop-filter: var(--dsq-menu-backdrop);
+  pointer-events: none;
+}
+
+/* 覆层不描边：elevation-prominent 自带的那圈 0 0 0 .5px（--dsw-elevation-stroke-color，
+   默认 border-l4）对磨砂覆层是多余的——边缘自带材质分界，再勾一道反而抢视觉，覆写成
+   更淡的 border-l1。
+   两个坑，改之前先读：① 这两行必须写在三个浮层自己的选择器上。写在 body 上会随继承
+   影响页面里其它依赖默认值的面板（宿主带 [data-menu-material] 的菜单有自己的覆写，
+   不受影响）。② --dsq-shadow 也必须在这儿声明，不能留在 body：自定义属性是在**声明处**
+   展开的，--dsq-shadow 留在 body 上时 var(--dsw-elevation-prominent) 会在 body 就被
+   替换成 border-l4 那一版并继承下来，浮层上的描边覆写根本够不着；跟着声明挪到这里，
+   整条链才在浮层元素上取值。 */
+.dsq_toolbar,
+.dsq_commentPop,
+.dsq_summaryHoverInner {
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  --dsq-shadow: var(--dsw-elevation-prominent, 0 0 0 .5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 0, 0, 0.05));
+}
+
+/* 浮层挂载与层带（2026-10-20 定，改前先读）：
+   工具条/评论泡/状态不再 portal 到 body，而是由 dom/floating-layer.ts 挂进对话
+   真正的滚动容器（桌面抽屉布局是 ST7X_W_scrollBody，普通布局是 .icaHSq_scroll）
+   里的一个 absolute host，坐标用**内容坐标**。
+
+   为什么不是 body：header（对话标题那一排）是滚动容器之外的非定位元素，任何
+   body 级 positioned + z-index 的浮层都天然压过它（这就是 z-index 降到 0 也仍在
+   header 之上的原因）；composer 座位是 sticky + z-index 7，只有低于它才不会被
+   输入框穿透。
+
+   现在把两件事交回宿主布局：
+   - 滚动容器负责裁剪：浮层随内容上移，到容器上边缘就被裁掉，自然滑进 header
+     下面，和正文一致；
+   - host 的 z-index 固定 6（见 floating-layer.ts）：低于 composer 的 7，高于
+     内容里吸顶元素的 6（同 z 时 host 追加在滚动容器末尾，DOM 次序压过它们）。
+   host 内部次序：status 3 > toolbar 2 > commentPop 1。
+
+   摘要行与批注卡片在内容普通流里，不参与这套层带；悬停面板仍是 body 级 fixed
+   （原因见 AnnotationCardView 里 contain:layout 的说明）。 */
+
 .dsq_toolbar {
-  position: fixed;
-  z-index: 10060;
-  transform: translate(-50%, -100%);
+  position: absolute;
+  z-index: 2;
+  /* The layer host is 0×0, so an auto-width absolute child would shrink to
+     min-content (Chinese hint text then wraps one character per line).
+     max-content keeps the bubble sized by its row regardless of the host. */
+  width: max-content;
+  max-width: calc(100vw - 24px);
+  transform: translate(-50%, var(--dsq-anchor-y, -100%));
   gap: 2px;
   padding: 4px;
-  /* 无边框：--dsq-shadow-soft 自带 0 0 0 .5px 的描边环，由它勾勒轮廓，
-     所以这里不要再画 border，否则描边会和环叠成两条线。 */
+  /* 无边框：--dsq-shadow（宿主的 elevation-prominent）自带 0 0 0 .5px 的描边环，
+     由它勾勒轮廓，所以这里不要再画 border，否则描边会和环叠成两条线。 */
   border: 0;
   border-radius: 12px;
-  background: var(--dsq-bg-panel);
-  box-shadow: var(--dsq-shadow-soft);
+  /* 底色与模糊都在上面的材质图层里，这里不再画背景 */
+  box-shadow: var(--dsq-shadow);
   pointer-events: auto;
-  /* Mounts once per selection, after the drag ends: soft rise + fade. */
+  /* A/B：scale 入场放在容器上（材质图层归它所有）。关键帧自带 translate(-50%,-100%)，
+     所以缩放不会破坏居中。若真实客户端里磨砂在放大期间消失，改回内容层方案。 */
   animation: dsq-toolbar-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+/* Hangs below the selection: no room above at the very top of the transcript. */
+.dsq_toolbar[data-anchor='below'] {
+  --dsq-anchor-y: 0%;
+  animation-name: dsq-toolbar-in-below;
+}
+
+/* Comment phase: placed at an explicit top-left, 6px above the comment popover. */
+.dsq_toolbar[data-anchor='popover-top'] {
+  transform: none;
+  animation-name: dsq-toolbar-in-popover-top;
+}
+
+/* 按钮行：只负责布局；入场动画在容器上（见 .dsq_toolbar 的 A/B 说明）。 */
+.dsq_toolbarInner {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
 .dsq_button {
   color: var(--dsq-label);
   font: inherit;
@@ -182,8 +307,8 @@ ${atomRules}
 }
 
 .dsq_status {
-  position: fixed;
-  z-index: 10061;
+  position: absolute;
+  z-index: 3;
   transform: translate(-50%, 8px);
   padding: 4px 10px;
   border-radius: 999px;
@@ -200,7 +325,7 @@ ${atomRules}
   position: absolute;
   top: 8px;
   left: 8px;
-  z-index: 40;
+  z-index: 12;
   width: 20%;
   min-width: 148px;
   max-width: 220px;
@@ -340,7 +465,7 @@ ${atomRules}
 /* Qoder-style annotation summary (“N 条批注”) inside the composer. */
 .dsq_summary {
   position: relative;
-  z-index: 10040;
+  z-index: 13;
   gap: 10px;
   width: 100%;
   max-width: 100%;
@@ -384,7 +509,7 @@ ${atomRules}
      flex atoms — the open class below turns display back on. */
   display: none;
   position: fixed;
-  z-index: 10050;
+  z-index: 14;
   width: min(320px, calc(100vw - 16px));
   flex-direction: column;
   padding: 12px;
@@ -397,38 +522,44 @@ ${atomRules}
 }
 
 /* Must come after .dsq_summaryHover (same class weight otherwise loses to display:none). */
+/* 容器上不做 opacity 过渡、也不做 scale 入场。opacity 那条是规范实锤：祖先一带上
+   opacity<1 就成了 backdrop root，::before 采样不到身后的页面，磨砂在整段淡入里
+   消失、结束才糊上——所以 opacity 过渡删掉，只留 place() 里那次 0→1 瞬时翻转
+   （「定位前不可见」的守卫）。scale 一并去掉是保守起见：容器彻底静止，采样区域
+   不会逐帧移动；入场感交给内层列表的 rise（内容不是材质的祖先）。 */
 .dsq_summaryHover.dsq_summaryHoverOpen {
   display: flex;
-  transition: opacity 0.12s ease;
-  animation: dsq-panel-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.dsq_summaryHover[data-side='bottom'] {
-  transform-origin: top center;
 }
 
-.dsq_summaryHover[data-side='top'] {
-  transform-origin: bottom center;
+.dsq_summaryHoverInner {
+  position: relative;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 12px;
+  /* 不画 border：--dsq-shadow（宿主的 elevation-prominent）自带 0 0 0 .5px 的
+     描边环，再画一遍会叠成两条线。底色与模糊都在材质图层里。 */
+  box-shadow: var(--dsq-shadow);
 }
 
-.dsq_summaryHoverInner {
+/* 滚动只放在列表上：材质图层是绝对定位的，留在会滚动的容器里会跟着内容跑掉，
+   滚到底部时面板顶部就露空。入场 rise 也在这层——内容不是材质图层的祖先，
+   动它不会切断磨砂的采样源。 */
+.dsq_summaryList {
   gap: 4px;
-  max-height: min(420px, calc(100vh - 120px));
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 4px;
-  border-radius: 12px;
-  border: 0.5px solid var(--dsq-line);
-  /* Frosted panel: the menu token at partial alpha over a blur. */
-  background: color-mix(in srgb, var(--dsq-bg-raised) 50%, transparent);
-  backdrop-filter: blur(14px) saturate(1.4);
-  -webkit-backdrop-filter: blur(14px) saturate(1.4);
-  box-shadow: var(--dsq-shadow-pop);
+  max-height: min(412px, calc(100vh - 128px));
+  animation: dsq-rise-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+/* 老浏览器没有 backdrop-filter：图层退成不透明底色，否则半透明直接糊在文字上。 */
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-  .dsq_summaryHoverInner {
-    background: var(--dsq-menu);
+  .dsq_toolbar::before,
+  .dsq_commentPop::before,
+  .dsq_summaryHoverInner::before {
+    background: var(--dsq-bg-raised);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 }
 
@@ -599,17 +730,19 @@ ${atomRules}
 
 /* Inline comment composer under the floating selection toolbar. */
 .dsq_commentPop {
-  position: fixed;
-  z-index: 10050;
-  transform: translate(-50%, 4px);
+  position: absolute;
+  z-index: 1;
+  /* Vertical offset comes from placeCommentPop (below the selection); only
+     the horizontal centering belongs to the transform. */
+  transform: translateX(-50%);
   width: min(320px, calc(100vw - 24px));
   gap: 8px;
   padding: 8px;
   border-radius: 16px;
-  background: color-mix(in srgb, var(--dsq-bg-raised) 75%, transparent);
-  backdrop-filter: blur(10px) saturate(1.4);
-  -webkit-backdrop-filter: blur(14px) saturate(1.4);
-  box-shadow: var(--dsq-shadow-pop);
+  /* 底色与模糊都在材质图层里 */
+  box-shadow: var(--dsq-shadow);
+  /* The layer host is pointer-events:none; interactive surfaces opt back in. */
+  pointer-events: auto;
 }
 
 .dsq_commentInput {
@@ -779,6 +912,7 @@ ${atomRules}
 .dsq_annMark {
   --dsq-mark-color: var(--dsq-accent);
   --dsq-mark-tint: var(--dsq-accent-tint);
+  position: relative;
   background: var(--dsq-mark-tint);
   text-decoration: underline;
   text-decoration-style: dashed;
@@ -792,10 +926,17 @@ ${atomRules}
 
 /* Ordinal as a superscript corner badge at the END of the marked text, so it
    never sits between the reader and the sentence. Only the last fragment of a
-   multi-fragment mark carries the index, so the number appears exactly once. */
+   multi-fragment mark carries the index, so the number appears exactly once.
+   Absolute so the badge adds no inline advance width: annotating never reflows
+   the paragraph or moves following words. Bottom (not top) anchors to the last
+   fragment: for a mark spanning several lines the containing block is the union
+   of the first and last fragments, so its bottom edge is the last line. */
 .dsq_annMark[data-dsq-ann-index]::after {
   content: attr(data-dsq-ann-index);
-  display: inline-grid;
+  position: absolute;
+  bottom: 8px;
+  left: 100%;
+  display: grid;
   place-items: center;
   min-width: 15px;
   height: 15px;
@@ -807,7 +948,7 @@ ${atomRules}
   font-size: 10px;
   font-weight: 600;
   line-height: 1;
-  vertical-align: super;
+  pointer-events: none;
 }
 
 .dsq_annMark:hover {
@@ -821,26 +962,6 @@ ${atomRules}
 /* Layer 4 — host surface: keyframes, theme flips, and the two rules that reach
    into product-owned DOM. */
 
-@keyframes dsq-toolbar-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -100%) translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -100%);
-  }
-}
-
-@keyframes dsq-panel-in {
-  from {
-    transform: scale(0.96);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 @keyframes dsq-ann-flash {
   0% {
     background: var(--dsq-mark-color);
@@ -882,6 +1003,7 @@ function ensureToolbarStyles() {
 }
 const styles = {
 	toolbar: "dsq_toolbar",
+	toolbarInner: "dsq_toolbarInner",
 	button: "dsq_button",
 	buttonAddComment: "dsq_buttonAddComment",
 	divider: "dsq_divider",
@@ -914,6 +1036,7 @@ const styles = {
 	annEditCancel: "dsq_annEditCancel",
 	annEditSave: "dsq_annEditSave",
 	summaryHoverInner: "dsq_summaryHoverInner",
+	summaryList: "dsq_summaryList",
 	summaryItemButton: "dsq_summaryItemButton",
 	summaryHoverOpen: "dsq_summaryHoverOpen",
 	summaryItemActions: "dsq_summaryItemActions",
@@ -1111,6 +1234,12 @@ function createMark(job, withIndex) {
 * selections that cross inline elements or paragraph boundaries never reorder
 * the DOM; fragments of one annotation share the mark id, and the ordinal
 * badge rides on the final fragment (end of the annotation).
+*
+* `surroundContents` is load-bearing: `extractContents()` leaves the text
+* before **and after** the range in the same node, so inserting the mark at
+* `node.nextSibling` (the old implementation) appended every partial selection
+* to the end of its parent — a selection starting at offset 0, such as the
+* sentence after a colon, visibly jumped to the paragraph's end.
 */
 function wrapRange(item, job, from, to) {
 	const located = cleanTextRange(item, from, to);
@@ -1120,15 +1249,12 @@ function wrapRange(item, job, from, to) {
 	let wrapped = false;
 	pieces.forEach((piece, i) => {
 		const node = piece.entry.node;
-		const parent = node.parentElement;
-		if (!parent) return;
+		if (!node.parentElement) return;
 		const range = document.createRange();
 		range.setStart(node, piece.start - piece.entry.start);
 		range.setEnd(node, piece.end - piece.entry.start);
 		const mark = createMark(job, i === pieces.length - 1);
-		mark.append(range.extractContents());
-		parent.insertBefore(mark, node.nextSibling);
-		if (node.nodeValue === "") node.remove();
+		range.surroundContents(mark);
 		wrapped = true;
 	});
 	return wrapped;
@@ -1663,20 +1789,24 @@ const GAP = 8;
 const MARGIN = 8;
 /**
 * Place `panel` near `anchor`, flipping vertical side when the preferred side
-* lacks room. Keeps the panel inside the viewport on the horizontal axis.
+* lacks room. Keeps the panel inside `bounds` (the viewport by default).
 */
-function placePopover(anchor, panel, preferred = "bottom", gap = GAP) {
-	const vw = window.innerWidth;
-	const vh = window.innerHeight;
-	const spaceBelow = vh - anchor.bottom;
-	const spaceAbove = anchor.top;
+function placePopover(anchor, panel, preferred = "bottom", gap = GAP, bounds) {
+	const box = bounds ?? {
+		top: 0,
+		left: 0,
+		right: window.innerWidth,
+		bottom: window.innerHeight
+	};
+	const spaceBelow = box.bottom - anchor.bottom;
+	const spaceAbove = anchor.top - box.top;
 	let side = preferred;
 	const need = panel.height + gap;
 	if (preferred === "bottom" && spaceBelow < need && spaceAbove > spaceBelow) side = "top";
 	else if (preferred === "top" && spaceAbove < need && spaceBelow > spaceAbove) side = "bottom";
 	return {
-		top: side === "bottom" ? Math.min(anchor.bottom + gap, vh - panel.height - MARGIN) : Math.max(anchor.top - panel.height - gap, MARGIN),
-		left: Math.min(Math.max(anchor.left, MARGIN), Math.max(MARGIN, vw - panel.width - MARGIN)),
+		top: side === "bottom" ? Math.min(anchor.bottom + gap, box.bottom - panel.height - MARGIN) : Math.max(anchor.top - panel.height - gap, box.top + MARGIN),
+		left: Math.min(Math.max(anchor.left, box.left + MARGIN), Math.max(box.left + MARGIN, box.right - panel.width - MARGIN)),
 		side
 	};
 }
@@ -1694,78 +1824,32 @@ const SVG_ATTRS = {
 	focusable: false
 };
 const SHAPES = {
-	copy: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("rect", {
-		key: "r",
+	copy: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 		width: 14,
 		height: 14,
 		x: 8,
 		y: 8,
 		rx: 2,
 		ry: 2
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p",
-		d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-	})] }),
-	pencil: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "m15 5 4 4"
-	})] }),
-	"trash-2": (0, react_jsx_runtime.jsxs)("g", { children: [
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p1",
-			d: "M10 11v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p2",
-			d: "M14 11v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p3",
-			d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p4",
-			d: "M3 6h18"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p5",
-			d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] }),
+	pencil: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 5 4 4" })] }),
+	"trash-2": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 11v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 11v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
 	] }),
-	x: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M18 6 6 18"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "m6 6 12 12"
-	})] }),
-	plus: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M5 12h14"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "M12 5v14"
-	})] }),
-	"external-link": (0, react_jsx_runtime.jsxs)("g", { children: [
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p1",
-			d: "M15 3h6v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p2",
-			d: "M10 14 21 3"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p3",
-			d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
-		})
+	x: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })] }),
+	plus: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14" })] }),
+	"external-link": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15 3h6v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 14 21 3" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
 	] })
 };
 function LucideIcon({ name, size = 15 }) {
-	return (0, react_jsx_runtime.jsx)("svg", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		...SVG_ATTRS,
 		width: size,
 		height: size,
@@ -1977,23 +2061,23 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 	useLocale();
 	const composer = variant === "composer";
 	const subtitle = comment ? composer ? t("card.commentSubtitle", { comment }) : comment : composer ? t("common.selectedText") : t("summary.noComment");
-	return (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cx(A.box, A.row, styles.card, !composer && styles.tCard),
 		role: "group",
 		"aria-label": index ? t("card.ariaIndexed", { index }) : t("card.ariaPlain"),
 		children: [
-			(0, react_jsx_runtime.jsx)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.keep, A.gridMid, styles.cardIcon, !composer && styles.tCardIcon),
-				"aria-hidden": true,
+				"aria-hidden": "true",
 				children: index ? String(index) : "AI"
 			}),
-			(0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.grow, A.col, styles.cardBody),
-				children: [(0, react_jsx_runtime.jsx)("div", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.ell, styles.cardTitle),
 					title: text,
 					children: title
-				}), (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.ell, styles.cardSubtitle),
 					...comment ? {
 						title: comment,
@@ -2002,14 +2086,14 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 					children: subtitle
 				})]
 			}),
-			composer && onEditComment ? (0, react_jsx_runtime.jsx)("button", {
+			composer && onEditComment ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardAction),
 				"aria-label": t("card.editComment"),
 				onClick: onEditComment,
 				children: "✎"
 			}) : null,
-			composer && onRemove ? (0, react_jsx_runtime.jsx)("button", {
+			composer && onRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("card.remove"),
@@ -2052,7 +2136,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		const { top, left, side } = placePopover(root.getBoundingClientRect(), {
 			width: pop.offsetWidth || 300,
 			height: pop.offsetHeight || 220
-		}, "bottom", 0);
+		}, "top", 0);
 		pop.style.top = `${top}px`;
 		pop.style.left = `${left}px`;
 		pop.style.paddingTop = side === "bottom" ? "12px" : "12px";
@@ -2187,122 +2271,125 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		editDraft,
 		onItemEdit
 	]);
-	const panel = open ? (0, react_jsx_runtime.jsx)("div", {
+	const panel = open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: popRef,
 		className: `${styles.summaryHover} ${styles.summaryHoverOpen}`,
 		role: "dialog",
 		"aria-label": t("summary.dialogAria", { count }),
 		onPointerEnter: openPop,
 		onPointerLeave,
-		children: (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cx(A.col, styles.summaryHoverInner),
-			children: items.map((item, i) => {
-				const isEditing = editing === i;
-				return (0, react_jsx_runtime.jsxs)("div", {
-					className: styles.summaryItem,
-					children: [(0, react_jsx_runtime.jsxs)("div", {
-						className: cx(A.row, styles.summaryItemHead),
-						children: [
-							(0, react_jsx_runtime.jsx)("div", {
-								className: cx(A.keep, A.gridMid, styles.summaryItemBadge),
-								"aria-hidden": true,
-								children: String(i + 1)
-							}),
-							(0, react_jsx_runtime.jsx)("div", {
-								className: styles.summaryItemLabel,
-								children: t("common.selectedText")
-							}),
-							!isEditing && (onItemRemove || onItemEdit) ? (0, react_jsx_runtime.jsxs)("div", {
-								className: cx(A.row, styles.summaryItemActions),
-								children: [onItemEdit ? (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: cx(A.plain, A.gridMid, styles.summaryItemAction),
-									"aria-label": t("summary.edit", { index: i + 1 }),
-									onClick: () => startEdit(i),
-									children: (0, react_jsx_runtime.jsx)(LucideIcon, { name: "pencil" })
-								}) : null, onItemRemove ? (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: cx(A.plain, A.gridMid, styles.summaryItemAction),
-									"aria-label": t("summary.remove", { index: i + 1 }),
-									onClick: () => onItemRemove(i, item),
-									children: (0, react_jsx_runtime.jsx)(LucideIcon, { name: "trash-2" })
-								}) : null]
-							}) : null
-						]
-					}), isEditing ? (0, react_jsx_runtime.jsxs)("div", {
-						className: styles.summaryItemMain,
-						children: [
-							(0, react_jsx_runtime.jsx)("div", {
-								className: styles.annEditText,
-								children: item.text
-							}),
-							(0, react_jsx_runtime.jsx)("div", {
-								className: styles.summaryItemLabel,
-								children: t("summary.userComment")
-							}),
-							(0, react_jsx_runtime.jsx)("textarea", {
-								ref: editInputRef,
-								className: cx(A.box, styles.annEditInput),
-								placeholder: t("common.commentPlaceholder"),
-								value: editDraft,
-								onChange: (e) => setEditDraft(e.target.value),
-								onKeyDown: (e) => {
-									if (e.key === "Escape") {
-										e.preventDefault();
-										setEditing(null);
-										return;
-									}
-									if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-										e.preventDefault();
-										commitEdit();
-									}
-								}
-							}),
-							(0, react_jsx_runtime.jsxs)("div", {
-								className: cx(A.row, styles.annEditActions),
-								children: [(0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: cx(A.plain, styles.annEditCancel),
-									onClick: () => setEditing(null),
-									children: t("common.cancel")
-								}), (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: styles.annEditSave,
-									onClick: commitEdit,
-									children: t("common.save")
-								})]
-							})
-						]
-					}) : (0, react_jsx_runtime.jsx)("div", {
-						className: styles.summaryItemMain,
-						children: (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: cx(A.plain, styles.summaryItemButton),
-							onClick: () => {
-								onItemSelect?.(i, item);
-								closePop();
-							},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cx(A.col, styles.summaryList),
+				children: items.map((item, i) => {
+					const isEditing = editing === i;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: styles.summaryItem,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cx(A.row, styles.summaryItemHead),
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: cx(A.keep, A.gridMid, styles.summaryItemBadge),
+									"aria-hidden": "true",
+									children: String(i + 1)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.summaryItemLabel,
+									children: t("common.selectedText")
+								}),
+								!isEditing && (onItemRemove || onItemEdit) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: cx(A.row, styles.summaryItemActions),
+									children: [onItemEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: cx(A.plain, A.gridMid, styles.summaryItemAction),
+										"aria-label": t("summary.edit", { index: i + 1 }),
+										onClick: () => startEdit(i),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, { name: "pencil" })
+									}) : null, onItemRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: cx(A.plain, A.gridMid, styles.summaryItemAction),
+										"aria-label": t("summary.remove", { index: i + 1 }),
+										onClick: () => onItemRemove(i, item),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, { name: "trash-2" })
+									}) : null]
+								}) : null
+							]
+						}), isEditing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.summaryItemMain,
 							children: [
-								(0, react_jsx_runtime.jsx)("div", {
-									className: styles.summaryItemText,
-									children: item.title
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: styles.annEditText,
+									children: item.text
 								}),
-								(0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: styles.summaryItemLabel,
 									children: t("summary.userComment")
 								}),
-								(0, react_jsx_runtime.jsx)("div", {
-									className: item.comment ? styles.summaryItemText : `${styles.summaryItemText} ${styles.summaryItemTextEmpty}`,
-									children: item.comment || t("summary.noComment")
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+									ref: editInputRef,
+									className: cx(A.box, styles.annEditInput),
+									placeholder: t("common.commentPlaceholder"),
+									value: editDraft,
+									onChange: (e) => setEditDraft(e.target.value),
+									onKeyDown: (e) => {
+										if (e.key === "Escape") {
+											e.preventDefault();
+											setEditing(null);
+											return;
+										}
+										if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+											e.preventDefault();
+											commitEdit();
+										}
+									}
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: cx(A.row, styles.annEditActions),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: cx(A.plain, styles.annEditCancel),
+										onClick: () => setEditing(null),
+										children: t("common.cancel")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: styles.annEditSave,
+										onClick: commitEdit,
+										children: t("common.save")
+									})]
 								})
 							]
-						})
-					})]
-				}, item.id ?? `${i}`);
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: styles.summaryItemMain,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: cx(A.plain, styles.summaryItemButton),
+								onClick: () => {
+									onItemSelect?.(i, item);
+									closePop();
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: styles.summaryItemText,
+										children: item.title
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: styles.summaryItemLabel,
+										children: t("summary.userComment")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: item.comment ? styles.summaryItemText : `${styles.summaryItemText} ${styles.summaryItemTextEmpty}`,
+										children: item.comment || t("summary.noComment")
+									})
+								]
+							})
+						})]
+					}, item.id ?? `${i}`);
+				})
 			})
 		})
 	}) : null;
-	return (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: rootRef,
 		className: cx(A.row, styles.summary),
 		tabIndex: 0,
@@ -2315,27 +2402,27 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		onBlur,
 		onKeyDown,
 		children: [
-			(0, react_jsx_runtime.jsx)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.keep, A.gridMid, styles.summaryIcon),
-				"aria-hidden": true,
+				"aria-hidden": "true",
 				children: String(count)
 			}),
-			(0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.grow, styles.summaryBody),
-				children: [(0, react_jsx_runtime.jsx)("div", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryTitle,
 					children: t("summary.title", { count })
-				}), (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryHint,
 					children: t("summary.hint")
 				})]
 			}),
-			onRemoveAll ? (0, react_jsx_runtime.jsx)("button", {
+			onRemoveAll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("summary.removeAll"),
 				onClick: onRemoveAll,
-				children: (0, react_jsx_runtime.jsx)(LucideIcon, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 					name: "x",
 					size: 13
 				})
@@ -2550,10 +2637,10 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 		sync();
 	}, [sync]);
 	if (!sessionId || items.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
 		className: cx(A.col, styles.cardStack),
-		children: (0, react_jsx_runtime.jsx)(AnnotationSummary, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationSummary, {
 			count: items.length,
 			items: items.map((item) => ({
 				id: item.id,
@@ -2571,9 +2658,116 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 /** Alias kept for overlay registration. */
 const QuoteCard = AnnotationPanel;
 //#endregion
+//#region src/client/dom/floating-layer.ts
+/**
+* Mount point for the selection UI: a zero-size host inside the transcript's
+* real scroll container.
+*
+* The host is `position: absolute` in **content coordinates**, so floating UI
+* scrolls with the selected text and the scroller clips it at its own edges.
+* That is what keeps the toolbar out of the app header and the composer:
+* clipping happens in the scroller's stacking context instead of competing
+* with the header (which is not positioned and therefore loses to any
+* body-level positioned portal, whatever its z-index).
+*
+* Two host layouts exist in the product:
+* - desktop / overlay composer: `ST7X_W_scrollBody` scrolls; the chat frame is
+*   content-sized and the chat's own `.icaHSq_scroll` is `overflow: visible`;
+* - regular layout: `.icaHSq_scroll` is the scroller.
+* Walking up from the selected flow item finds whichever one is live.
+*/
+const HOST_ATTR = "data-dsq-layer";
+/** Below the composer seat (sticky, z-index 7); above in-content stickies (6). */
+const HOST_Z = 6;
+const layers = /* @__PURE__ */ new WeakMap();
+/** flow item → layer, so scrolling does not re-walk the ancestor chain. */
+const itemLayers = /* @__PURE__ */ new WeakMap();
+let fallback = null;
+function contentCoords(scroller, left, top) {
+	const rect = scroller.getBoundingClientRect();
+	return {
+		left: left - rect.left - scroller.clientLeft + scroller.scrollLeft,
+		top: top - rect.top - scroller.clientTop + scroller.scrollTop
+	};
+}
+function layerFor(scroller) {
+	const cached = layers.get(scroller);
+	if (cached?.host.isConnected) return cached;
+	if (getComputedStyle(scroller).position === "static") scroller.style.position = "relative";
+	let host = scroller.querySelector(`:scope > [${HOST_ATTR}]`);
+	if (!host) {
+		host = document.createElement("div");
+		host.setAttribute(HOST_ATTR, "");
+		host.style.cssText = `position:absolute;left:0;top:0;width:0;height:0;z-index:${HOST_Z};pointer-events:none;`;
+		scroller.appendChild(host);
+	}
+	const layer = {
+		host,
+		scroller,
+		bounds: () => {
+			const rect = scroller.getBoundingClientRect();
+			return new DOMRect(rect.left + scroller.clientLeft, rect.top + scroller.clientTop, scroller.clientWidth, scroller.clientHeight);
+		},
+		toContent: (left, top) => contentCoords(scroller, left, top),
+		fromContent: (left, top) => {
+			const rect = scroller.getBoundingClientRect();
+			return {
+				left: left + rect.left + scroller.clientLeft - scroller.scrollLeft,
+				top: top + rect.top + scroller.clientTop - scroller.scrollTop
+			};
+		}
+	};
+	layers.set(scroller, layer);
+	return layer;
+}
+/** Fallback for hosts whose transcript has no scrollable ancestor. */
+function fallbackLayer() {
+	if (fallback?.host.isConnected) return fallback;
+	const host = document.createElement("div");
+	host.setAttribute(HOST_ATTR, "");
+	host.style.cssText = `position:absolute;left:0;top:0;width:0;height:0;z-index:${HOST_Z};pointer-events:none;`;
+	document.body.appendChild(host);
+	fallback = {
+		host,
+		scroller: document.body,
+		bounds: () => new DOMRect(0, 0, window.innerWidth, window.innerHeight),
+		toContent: (left, top) => ({
+			left,
+			top
+		}),
+		fromContent: (left, top) => ({
+			left,
+			top
+		})
+	};
+	return fallback;
+}
+/** Layer for a node inside the transcript (falls back to a body host). */
+function floatingLayerFor(node) {
+	const item = flowItemOf(node);
+	const cached = item ? itemLayers.get(item) : void 0;
+	if (cached?.host.isConnected) return cached;
+	let el = item;
+	while (el && el !== document.body) {
+		const { overflowY } = getComputedStyle(el);
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+			const layer = layerFor(el);
+			if (item) itemLayers.set(item, layer);
+			return layer;
+		}
+		el = el.parentElement;
+	}
+	const layer = fallbackLayer();
+	if (item) itemLayers.set(item, layer);
+	return layer;
+}
+//#endregion
 //#region src/client/dom/selection.ts
 /** Selection snapshot used by the floating toolbar. */
 const TOOLBAR_OFFSET = 12;
+const BELOW_GAP = 8;
+/** Estimated toolbar height; only used to decide above vs below at content top. */
+const TOOLBAR_HEIGHT = 40;
 const VIEWPORT_MARGIN = 12;
 const LINE_TOP_TOLERANCE = 3;
 /**
@@ -2614,12 +2808,24 @@ function getRangeFirstLineRect(range) {
 	const firstTop = Math.min(...rects.map((rect) => rect.top));
 	return mergeRects(rects.filter((rect) => Math.abs(rect.top - firstTop) <= LINE_TOP_TOLERANCE));
 }
-function toolbarPosition(rect) {
+/** Keep the centered toolbar inside the visible horizontal band. */
+function anchorX(rect, bounds) {
 	const center = rect.left + rect.width / 2;
-	return {
-		left: Math.min(Math.max(center, VIEWPORT_MARGIN), window.innerWidth - VIEWPORT_MARGIN),
-		top: Math.max(rect.top - TOOLBAR_OFFSET, VIEWPORT_MARGIN)
-	};
+	const min = bounds.left + VIEWPORT_MARGIN;
+	const max = Math.max(min, bounds.right - VIEWPORT_MARGIN);
+	return Math.min(Math.max(center, min), max);
+}
+/**
+* True when the selection's first line still touches the viewport.
+*
+* The toolbar anchors to that line, so once it has scrolled fully out of
+* view there is nothing to anchor to and the snapshot reads as "gone" — the
+* toolbar hides and comes back when the user scrolls to the selection again
+* (scroll re-reads the selection). A partially visible line still counts:
+* `toolbarPosition` parks the toolbar at the viewport edge in that case.
+*/
+function isFirstLineOnScreen(rect) {
+	return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
 }
 /**
 * Read the live selection when it is a non-empty range inside a conversation
@@ -2637,13 +2843,24 @@ function readSelectionSnapshot(toolbarRoot) {
 	if (!text) return null;
 	const rect = getRangeFirstLineRect(selection.getRangeAt(0));
 	if (!rect) return null;
-	const { left, top } = toolbarPosition(rect);
-	const source = rangeOffsetsInFlowItem(selection.getRangeAt(0));
+	if (!isFirstLineOnScreen(rect)) return null;
+	const layer = floatingLayerFor(anchorNode);
+	const x = anchorX(rect, layer.bounds());
+	const above = layer.toContent(x, rect.top - TOOLBAR_OFFSET);
+	const below = above.top < TOOLBAR_HEIGHT;
+	const anchor = below ? layer.toContent(x, rect.bottom + BELOW_GAP) : above;
+	const range = selection.getRangeAt(0);
+	const union = range.getBoundingClientRect();
+	const selectionBottom = layer.toContent(0, union.height > 0 ? union.bottom : rect.bottom).top;
+	const source = rangeOffsetsInFlowItem(range);
 	const anchorHref = (anchorNode instanceof Element ? anchorNode : anchorNode.parentElement)?.closest("a[href]")?.getAttribute("href") ?? void 0;
 	return {
 		text,
-		left,
-		top,
+		left: anchor.left,
+		top: anchor.top,
+		below,
+		selectionBottom,
+		layer,
 		...source ? { source } : {},
 		...anchorHref ? { anchorHref } : {}
 	};
@@ -2720,35 +2937,72 @@ function SelectionToolbar({ sessionId }) {
 	const [status, setStatus] = (0, react.useState)(null);
 	const activeRef = (0, react.useRef)(null);
 	activeRef.current = active;
+	/** Annotation saved when the comment step opened; the box only edits it. */
+	const pendingIdRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		ensureToolbarStyles();
 		if (sessionId) bindAnnotationSession(sessionId);
 	}, [sessionId]);
 	const hide = (0, react.useCallback)(() => {
+		pendingIdRef.current = null;
 		setActive(null);
 		setPhase("idle");
 		setComment("");
 		setStatus(null);
 	}, []);
+	/**
+	* Keep what was typed when the comment popover goes away without an explicit
+	* cancel. The annotation itself was saved when the step opened, so dropping
+	* the text would also lose the only optional part of the interaction.
+	*/
+	const flushComment = (0, react.useCallback)(() => {
+		const id = pendingIdRef.current;
+		pendingIdRef.current = null;
+		if (!id) return;
+		const typed = commentRef.current?.value ?? "";
+		if (typed.trim()) updateAnnotationComment(void 0, id, typed);
+	}, []);
+	/** Save the current selection without a comment; returns the store id. */
+	const saveSelection = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		if (!snapshot) return null;
+		return saveAnnotation(void 0, {
+			text: snapshot.text,
+			sources: snapshot.source ? [{
+				text: snapshot.text,
+				messageId: snapshot.source.messageId,
+				messageKind: snapshot.source.messageKind,
+				startOffset: snapshot.source.startOffset,
+				endOffset: snapshot.source.endOffset
+			}] : void 0
+		}).id;
+	}, []);
 	const refresh = (0, react.useCallback)(() => {
 		const next = readSelectionSnapshot(toolbarRef.current);
 		if (!next) {
 			if (phaseRef.current === "idle") setActive(null);
 			return;
 		}
-		setActive((prev) => {
-			if (phaseRef.current === "comment" && prev && prev.text !== next.text) {
-				setPhase("idle");
-				setComment("");
-			}
-			if (prev && prev.text === next.text && prev.left === next.left && prev.top === next.top) return prev;
-			return next;
-		});
-	}, []);
+		const current = activeRef.current;
+		if (phaseRef.current === "comment" && current && current.text !== next.text) {
+			flushComment();
+			setPhase("idle");
+			setComment("");
+		}
+		setActive((prev) => prev && prev.text === next.text && prev.left === next.left && prev.top === next.top && prev.below === next.below && prev.layer === next.layer ? prev : next);
+	}, [flushComment]);
 	const phaseRef = (0, react.useRef)(phase);
 	phaseRef.current = phase;
 	(0, react.useEffect)(() => {
-		const schedule = () => window.setTimeout(refresh, 0);
+		let scheduled = false;
+		const schedule = () => {
+			if (scheduled) return;
+			scheduled = true;
+			window.setTimeout(() => {
+				scheduled = false;
+				refresh();
+			}, 0);
+		};
 		let dragging = false;
 		const onPointerDown = (event) => {
 			const target = event.target;
@@ -2758,6 +3012,7 @@ function SelectionToolbar({ sessionId }) {
 			if (inToolbar || inComment) return;
 			dragging = true;
 			if (phaseRef.current === "comment") {
+				flushComment();
 				hide();
 				return;
 			}
@@ -2779,7 +3034,7 @@ function SelectionToolbar({ sessionId }) {
 		const onScroll = (event) => {
 			const target = event.target;
 			if (target instanceof Node && (toolbarRef.current?.contains(target) === true || commentWrapRef.current?.contains(target) === true)) return;
-			hide();
+			schedule();
 		};
 		document.addEventListener("pointerdown", onPointerDown, true);
 		document.addEventListener("pointerup", onPointerUp, true);
@@ -2795,12 +3050,27 @@ function SelectionToolbar({ sessionId }) {
 			window.removeEventListener("resize", schedule);
 			document.removeEventListener("scroll", onScroll, true);
 		};
-	}, [hide, refresh]);
+	}, [
+		flushComment,
+		hide,
+		refresh
+	]);
 	const placeCommentPop = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		const layer = snapshot?.layer;
 		const toolbar = toolbarRef.current;
 		const pop = commentWrapRef.current;
-		if (!toolbar || !pop) return;
-		const anchor = toolbar.getBoundingClientRect();
+		if (!snapshot || !layer || !toolbar || !pop) return;
+		const bounds = layer.bounds();
+		const toolbarW = toolbar.offsetWidth;
+		const toolbarH = toolbar.offsetHeight;
+		const home = layer.fromContent(snapshot.left, snapshot.top);
+		const anchor = {
+			left: home.left - toolbarW / 2,
+			top: home.top - (snapshot.below ? 0 : toolbarH),
+			width: toolbarW,
+			height: toolbarH
+		};
 		pop.style.display = "flex";
 		pop.style.visibility = "hidden";
 		const panel = {
@@ -2808,24 +3078,45 @@ function SelectionToolbar({ sessionId }) {
 			height: pop.offsetHeight || 180
 		};
 		pop.style.visibility = "";
-		const { top } = placePopover(anchor, panel, "bottom");
+		const gap = 8;
+		const margin = 8;
+		const belowTop = layer.fromContent(0, snapshot.selectionBottom).top + gap;
+		const aboveTop = anchor.top - panel.height - gap;
+		const top = belowTop <= bounds.bottom - margin - panel.height ? belowTop : aboveTop >= bounds.top + margin ? aboveTop : Math.max(bounds.top + margin, Math.min(belowTop, bounds.bottom - margin - panel.height));
 		const half = panel.width / 2 + 8;
-		const center = Math.min(Math.max(anchor.left + anchor.width / 2, half), Math.max(half, window.innerWidth - half));
-		pop.style.top = `${top}px`;
-		pop.style.left = `${center}px`;
+		const min = bounds.left + half;
+		const center = Math.min(Math.max(anchor.left + anchor.width / 2, min), Math.max(min, bounds.right - half));
+		const at = layer.toContent(center, top);
+		pop.style.top = `${at.top}px`;
+		pop.style.left = `${at.left}px`;
+		const sideGap = 6;
+		const popLeftView = layer.fromContent(at.left, at.top).left - panel.width / 2;
+		const popTopView = top;
+		let leftView = popLeftView;
+		let topView = popTopView - sideGap - toolbarH;
+		if (topView < bounds.top + margin) topView = popTopView + panel.height + sideGap;
+		leftView = Math.max(bounds.left + margin, Math.min(leftView, bounds.right - margin - toolbarW));
+		topView = Math.max(bounds.top + margin, Math.min(topView, bounds.bottom - margin - toolbarH));
+		const toolbarAt = layer.toContent(leftView, topView);
+		toolbar.style.left = `${toolbarAt.left}px`;
+		toolbar.style.top = `${toolbarAt.top}px`;
 	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (phase === "comment") placeCommentPop();
+	}, [
+		active,
+		phase,
+		placeCommentPop
+	]);
 	(0, react.useEffect)(() => {
-		if (phase === "comment") {
-			placeCommentPop();
-			commentRef.current?.focus();
-		}
-	}, [phase, placeCommentPop]);
+		if (phase === "comment") commentRef.current?.focus();
+	}, [phase]);
 	(0, react.useEffect)(() => {
 		const onResize = () => placeCommentPop();
 		window.addEventListener("resize", onResize);
 		return () => window.removeEventListener("resize", onResize);
 	}, [placeCommentPop]);
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (phase !== "comment") return;
 		const area = commentRef.current;
 		if (!area) return;
@@ -2852,12 +3143,18 @@ function SelectionToolbar({ sessionId }) {
 			setStatus(t("toolbar.copyFailed"));
 		}
 	}, [hide]);
+	/**
+	* "Add to task" is the commit: the quote is saved immediately, with or
+	* without a comment. The popover only edits that saved entry, so dismissing
+	* it (outside click, new selection) can never undo the annotation.
+	*/
 	const openComment = (0, react.useCallback)(() => {
 		if (!activeRef.current) return;
+		pendingIdRef.current = saveSelection();
 		setPhase("comment");
 		setComment("");
 		setStatus(null);
-	}, []);
+	}, [saveSelection]);
 	/**
 	* Hand the selected link to the system browser.
 	*
@@ -2875,97 +3172,75 @@ function SelectionToolbar({ sessionId }) {
 		clearNativeSelection();
 		hide();
 	}, [hide]);
-	/** Quick-add without opening the comment step (double-tap / “Skip comment”). */
-	const commitAnnotation = (0, react.useCallback)((body) => {
-		const snapshot = activeRef.current;
-		if (!snapshot) {
-			hide();
-			return;
-		}
-		saveAnnotation(void 0, {
-			text: snapshot.text,
-			...body && body.trim() ? { comment: body.trim() } : {},
-			sources: snapshot.source ? [{
-				text: snapshot.text,
-				messageId: snapshot.source.messageId,
-				messageKind: snapshot.source.messageKind,
-				startOffset: snapshot.source.startOffset,
-				endOffset: snapshot.source.endOffset
-			}] : void 0
-		});
-		getAnnotations().length;
+	/** Close the optional comment step; the annotation stays saved either way. */
+	const finishComment = (0, react.useCallback)((keepComment) => {
+		if (keepComment) flushComment();
+		else pendingIdRef.current = null;
 		clearNativeSelection();
 		hide();
-		setStatus(null);
 		window.setTimeout(focusComposer, 16);
-	}, [hide]);
+	}, [flushComment, hide]);
 	if (!active) return null;
 	const toolbarStyle = {
 		left: active.left,
 		top: active.top
 	};
 	const link = linkTarget(active.text, active.anchorHref);
-	return (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-		(0, react_jsx_runtime.jsx)("div", {
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: toolbarRef,
 			className: cx(A.row, styles.toolbar),
-			style: toolbarStyle,
+			style: phase === "comment" ? void 0 : toolbarStyle,
 			role: "toolbar",
 			"aria-label": t("toolbar.aria"),
 			"data-dsq-toolbar": "true",
+			"data-anchor": phase === "comment" ? "popover-top" : active.below ? "below" : "above",
 			onPointerDown: handleToolbarPointerDown,
-			children: phase === "comment" ? (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 2
-				},
-				children: (0, react_jsx_runtime.jsx)("span", {
+			children: phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cx(A.inlineRow, styles.toolbarInner),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: {
 						padding: "0 8px",
 						fontSize: 13,
-						opacity: .8
+						opacity: .8,
+						whiteSpace: "nowrap"
 					},
 					children: t("toolbar.commentHint")
 				})
-			}) : (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 2
-				},
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cx(A.inlineRow, styles.toolbarInner),
 				children: [
-					link ? (0, react_jsx_runtime.jsx)("button", {
+					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: handleOpenLink,
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "external-link",
 							size: 14
 						}), t("toolbar.openLink")]
 					}) : null,
-					link ? (0, react_jsx_runtime.jsx)("span", {
+					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: styles.divider,
-						"aria-hidden": true
+						"aria-hidden": "true"
 					}) : null,
-					(0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: () => void handleCopy(),
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "copy",
 							size: 14
 						}), t("toolbar.copy")]
 					}),
-					(0, react_jsx_runtime.jsx)("span", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: styles.divider,
-						"aria-hidden": true
+						"aria-hidden": "true"
 					}),
-					(0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: openComment,
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "plus",
 							size: 14
 						}), t("toolbar.addToTask")]
@@ -2973,14 +3248,13 @@ function SelectionToolbar({ sessionId }) {
 				]
 			})
 		}),
-		phase === "comment" ? (0, react_jsx_runtime.jsxs)("div", {
+		phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: commentWrapRef,
 			className: cx(A.col, styles.commentPop),
-			style: void 0,
 			role: "dialog",
 			"aria-label": t("toolbar.commentDialogAria"),
 			onPointerDown: handleToolbarPointerDown,
-			children: [(0, react_jsx_runtime.jsx)("textarea", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				ref: commentRef,
 				className: cx(A.box, styles.commentInput),
 				placeholder: t("common.commentPlaceholder"),
@@ -2989,37 +3263,38 @@ function SelectionToolbar({ sessionId }) {
 				onKeyDown: (e) => {
 					if (e.key === "Escape") {
 						e.preventDefault();
+						pendingIdRef.current = null;
 						hide();
 						return;
 					}
 					if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
 						e.preventDefault();
-						commitAnnotation(comment);
+						finishComment(true);
 					}
 				}
-			}), (0, react_jsx_runtime.jsxs)("div", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: styles.commentActions,
-				children: [(0, react_jsx_runtime.jsx)("button", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: cx(A.plain, A.inlineRow, styles.button),
-					onClick: () => commitAnnotation(void 0),
+					onClick: () => finishComment(false),
 					children: t("toolbar.skipComment")
-				}), (0, react_jsx_runtime.jsx)("button", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: cx(A.plain, A.inlineRow, styles.button, styles.buttonAddComment),
 					disabled: !comment.trim(),
-					onClick: () => commitAnnotation(comment),
+					onClick: () => finishComment(true),
 					children: t("toolbar.addComment")
 				})]
 			})]
 		}) : null,
-		status ? (0, react_jsx_runtime.jsx)("div", {
+		status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: styles.status,
 			style: toolbarStyle,
 			role: "status",
 			children: status
 		}) : null
-	] }), document.body);
+	] }), active.layer.host);
 }
 //#endregion
 //#region src/client/dom/decorateAnnotationDirectives.ts
@@ -3149,11 +3424,11 @@ function TranscriptQuoteCard({ node }) {
 		scrollToAnnotation(index + 1, text, markIdOf(index));
 	}, [markIdOf]);
 	if (quotes.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
 		className: styles.tCardStack,
 		"data-dsq-deco": "true",
-		children: quotes.map((quote, index) => (0, react_jsx_runtime.jsx)("div", {
+		children: quotes.map((quote, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cx(A.plain, styles.tCardButton),
 			role: "button",
 			tabIndex: 0,
@@ -3164,7 +3439,7 @@ function TranscriptQuoteCard({ node }) {
 				event.preventDefault();
 				onSelect(index, quote.text);
 			},
-			children: (0, react_jsx_runtime.jsx)(AnnotationCardView, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationCardView, {
 				variant: "transcript",
 				title: quote.title,
 				text: quote.text,
@@ -3211,12 +3486,12 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 	const quotes = scanned.annotations;
 	const images = contentImages(node.data?.content);
 	if (!text && images.length === 0 && quotes.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cx(A.colEnd, styles.userRow),
-		children: (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cx(A.colEnd, styles.userStack),
 			children: [
-				images.length > 0 && renderMessageImages !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
+				images.length > 0 && renderMessageImages !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.colEnd, styles.userImages),
 					"data-message-attachments": true,
 					children: renderMessageImages({
@@ -3224,12 +3499,12 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 						align: "end",
 						compact: images.length > 1
 					})
-				}, "images") : null,
-				quotes.length > 0 ? (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }, "quotes") : null,
-				text ? (0, react_jsx_runtime.jsx)("div", {
+				}) : null,
+				quotes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }) : null,
+				text ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.userBubble,
 					children: text
-				}, "bubble") : null
+				}) : null
 			]
 		})
 	});
@@ -3281,8 +3556,8 @@ function warnQuota() {
 	console.warn("dsh-select-quote: annotation persistence disabled (storage write failed)");
 }
 /**
-* Direct localStorage backend (the documented fallback). Writes are wrapped so
-* a quota failure degrades to memory-only instead of breaking the composer.
+* Direct localStorage backend. Writes are wrapped so a quota failure degrades
+* to memory-only instead of breaking the composer.
 */
 function createStoragePersistence(storage) {
 	let degraded = false;
@@ -3305,45 +3580,6 @@ function createStoragePersistence(storage) {
 		prune: (now) => pruneSessions(storage, now)
 	};
 }
-/**
-* Host store backend: the same `defineStore` the composer draft uses, so the
-* write path, per-session keying and failure semantics are the host's.
-*/
-function createHostStorePersistence(defineStore, storage) {
-	const handle = defineStore({
-		init: () => ({
-			v: PAYLOAD_VERSION,
-			updatedAt: 0,
-			items: []
-		}),
-		persist: ANNOTATION_KEY_PREFIX,
-		actions: { replace(draft, items, now) {
-			draft.items = [...items];
-			draft.updatedAt = now;
-		} }
-	});
-	const instances = /* @__PURE__ */ new Map();
-	const instanceOf = (sessionId) => {
-		const cached = instances.get(sessionId);
-		if (cached) return cached;
-		const instance = handle.create(sessionId);
-		instances.set(sessionId, instance);
-		return instance;
-	};
-	return {
-		load: (sessionId) => itemsOf(instanceOf(sessionId).getSnapshot()),
-		save: (sessionId, items) => instanceOf(sessionId).actions.replace(items, Date.now()),
-		clear: (sessionId) => {
-			instanceOf(sessionId).clearPersisted();
-			instances.delete(sessionId);
-		},
-		prune: (now) => {
-			const removed = pruneSessions(storage, now);
-			for (const sessionId of removed) instances.delete(sessionId);
-			return removed;
-		}
-	};
-}
 /** Retention: newest `maxSessions` within `maxAgeMs`, by payload timestamp. */
 function pruneSessions(storage, now = Date.now(), options = {}) {
 	const maxSessions = options.maxSessions ?? 20;
@@ -3383,27 +3619,20 @@ function createNoopPersistence() {
 //#endregion
 //#region src/client/state/annotation-storage.ts
 /**
-* Backend selection for annotation persistence.
+* Environment probe for annotation persistence.
 *
-* Kept apart from `annotation-persistence.ts` because reaching the host's
-* client-store needs a guarded `require`, and that is the one thing the pure
-* module cannot do — verify-bundle imports the pure module straight into Node,
-* where a `declare` statement is not valid JavaScript.
+* Kept apart from `annotation-persistence.ts` because this is the only module
+* that reads `globalThis`: the pure layer stays importable in Node, where
+* verify-bundle replays the whole cycle against a Map-backed storage.
 *
-* Preference order: the host store (same engine and keying as the composer
-* draft), plain localStorage, and a no-op when the environment has no storage
-* at all.
+* The backend is plain localStorage — the same per-origin store the composer
+* draft lives in, under this plugin's own key prefix. Requiring the host's
+* `@deepseek-ai/dsh-client-store` instead would buy nothing: its persistence
+* backend is localStorage with the same key shape and the same whole-value
+* payload, while depending on a Harness Client package that the plugin spec
+* forbids loading as a module (it changes without notice, and a throwing
+* backend selection would take the whole slot entry down with it).
 */
-/** The host package is a platform seed word; older hosts may not carry it. */
-const HOST_STORE_MODULE = "@deepseek-ai/dsh-client-store";
-function hostDefineStore() {
-	try {
-		const loaded = require(HOST_STORE_MODULE);
-		return typeof loaded?.defineStore === "function" ? loaded.defineStore : null;
-	} catch {
-		return null;
-	}
-}
 function browserStorage() {
 	try {
 		const storage = globalThis.localStorage;
@@ -3427,10 +3656,7 @@ function browserStorage() {
 }
 function createAnnotationPersistence() {
 	const storage = browserStorage();
-	const defineStore = hostDefineStore();
-	if (storage && defineStore) return createHostStorePersistence(defineStore, storage);
-	if (storage) return createStoragePersistence(storage);
-	return createNoopPersistence();
+	return storage ? createStoragePersistence(storage) : createNoopPersistence();
 }
 //#endregion
 //#region src/client/index.tsx