dsh-select-quote 0.3.1 → 0.3.3

package/lib/client.js

@@ -51,60 +51,122 @@ function lastEditable() {
 }
 //#endregion
 //#region src/client/styles.ts
+/**
+* Every style the plugin ships, in four layers.
+*
+*   1. tokens   — product design tokens, aliased once with their fallbacks
+*   2. atoms    — shared shapes (`.dsq_a_*`), no numbers, no colors
+*   3. components — one block per UI piece; everything measurable lives here
+*   4. host     — rules that reach into product DOM, theme flips, keyframes
+*
+* Injection order is the cascade order, so a component rule always wins over an
+* atom on the same element — which is what lets atoms stay shape-only and the
+* component blocks stay the single source of numbers.
+*/
+/** Layer 2 — atoms. Shape only: adding a number here is a layering violation. */
+const ATOMS = {
+	row: "display: flex; align-items: center;",
+	inlineRow: "display: inline-flex; align-items: center;",
+	col: "display: flex; flex-direction: column;",
+	colEnd: "display: flex; flex-direction: column; align-items: flex-end;",
+	gridMid: "display: grid; place-items: center;",
+	ell: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+	plain: "appearance: none; border: none; background: transparent; cursor: pointer;",
+	keep: "flex: none;",
+	grow: "flex: 1; min-width: 0;",
+	box: "box-sizing: border-box;"
+};
+const toKebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+const atomRules = Object.entries(ATOMS).map(([name, declarations]) => `.dsq_a_${toKebab(name)} { ${declarations} }`).join("\n");
+/** Atom class names, for `cx(styles.card, A.row)`. */
+const A = Object.fromEntries(Object.keys(ATOMS).map((name) => [name, `dsq_a_${toKebab(name)}`]));
+/** Join class parts, dropping the falsy ones so a variant can be `cond && A.x`. */
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
 const CSS = `
+/* Layer 1 — tokens. Every product token this plugin reads is aliased here once,
+   with the fallback it used to repeat inline at each use site. Scoped to \`body\`,
+   not \`:root\`: the product flips its palette on body[data-ds-dark-theme], so an
+   alias computed on the root element would freeze the light values and inherit
+   them into the dark page. */
+body {
+  --dsq-chat-width: var(--dsh-chat-content-width, 748px);
+  --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));
+  --dsq-focus-ring: var(--dsw-alias-button-primary-fill, #1677ff);
+  --dsq-fill-hover: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+  --dsq-label: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  --dsq-label-inverted: var(--dsw-alias-label-primary-inverted, #fff);
+  --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-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);
+  --dsq-accent-tint-hover: var(--dsw-static-blue-75, #e5f0ff);
+  --dsq-accent-tint-dark: var(--dsw-static-blue-950, #172554);
+  --dsq-neutral-50: var(--dsw-static-neutral-50, #fafafa);
+  --dsq-neutral-100: var(--dsw-static-neutral-100, #f5f5f5);
+  --dsq-neutral-800: var(--dsw-static-neutral-800, #292929);
+  --dsq-neutral-850: var(--dsw-static-neutral-850, #212123);
+}
+
+/* Layer 2 — atoms (generated from ATOMS above; the class names and the rules
+   cannot drift apart because both come from the same table). */
+${atomRules}
+
+/* Layer 3 — components. Floating selection toolbar. */
 .dsq_toolbar {
   position: fixed;
   z-index: 10060;
   transform: translate(-50%, -100%);
-  display: flex;
-  align-items: center;
   gap: 2px;
   padding: 4px;
-  /* 无边框：--dsw-elevation-soft 自带 0 0 0 .5px 的描边环，由它勾勒轮廓，
+  /* 无边框：--dsq-shadow-soft 自带 0 0 0 .5px 的描边环，由它勾勒轮廓，
      所以这里不要再画 border，否则描边会和环叠成两条线。 */
   border: 0;
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-2, #fff);
-  box-shadow: var(--dsw-elevation-soft, 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 0, 0, 0.06));
+  border-radius: 12px;
+  background: var(--dsq-bg-panel);
+  box-shadow: var(--dsq-shadow-soft);
   pointer-events: auto;
   /* Mounts once per selection, after the drag ends: soft rise + fade. */
   animation: dsq-toolbar-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-@keyframes dsq-toolbar-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -100%) translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -100%);
-  }
-}
-
 .dsq_button {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  color: var(--dsq-label);
   font: inherit;
-  font-size: 13px;
+  font-size: 12px;
   line-height: 20px;
-  cursor: pointer;
-  border-radius: 999px;
+  border-radius: 8px;
   padding: 4px 10px;
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
   white-space: nowrap;
 }
-
 .dsq_button:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
+  background: var(--dsq-fill-hover);
+}
+
+.dsq_buttonAddComment {
+  background: var(--dsq-accent);
+  color:#fff;
+}
+.dsq_buttonAddComment:hover {
+  background: var(--dsq-accent-400);
 }
 
 .dsq_button:focus-visible {
-  outline: 2px solid var(--dsw-alias-button-primary-fill, #1677ff);
+  outline: 2px solid var(--dsq-focus-ring);
   outline-offset: 1px;
 }
 
@@ -115,7 +177,7 @@ const CSS = `
 .dsq_divider {
   width: 1px;
   height: 14px;
-  background: var(--dsw-alias-border-l4, rgba(0, 0, 0, 0.12));
+  background: var(--dsq-line-divider);
   margin: 0 2px;
 }
 
@@ -125,8 +187,8 @@ const CSS = `
   transform: translate(-50%, 8px);
   padding: 4px 10px;
   border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-3, rgba(0, 0, 0, 0.78));
-  color: var(--dsw-alias-label-primary-inverted, #fff);
+  background: var(--dsq-bg-toast);
+  color: var(--dsq-label-inverted);
   font-size: 12px;
   line-height: 18px;
   pointer-events: none;
@@ -142,23 +204,20 @@ const CSS = `
   width: 20%;
   min-width: 148px;
   max-width: 220px;
-  display: flex;
-  flex-direction: column;
   align-items: stretch;
   gap: 6px;
   pointer-events: auto;
 }
 
-/* One quote card. Geometry mirrors the product's own file card
-   (.nyYjTG_file in ui-deliverables): hairline border, neutral fill,
-   18px radius, fixed 72px row, centered content, background transition. */
+/* One annotation card, shared by the composer and the transcript: the base
+   carries the shape, and \`.dsq_tCard\` / \`.dsq_tCardIcon\` override only the
+   numbers where the transcript really differs.
+   Geometry mirrors the product's own file card (\`.nyYjTG_file\` in
+   ui-deliverables): hairline border, neutral fill, 18px radius, fixed 72px row. */
 .dsq_card {
-  --dsq-card-fill: var(--dsw-static-neutral-50, #fafafa);
-  --dsq-card-hover: var(--dsw-static-neutral-100, #f5f5f5);
-  box-sizing: border-box;
+  --dsq-card-fill: var(--dsq-neutral-50);
+  --dsq-card-hover: var(--dsq-neutral-100);
   flex: 0 0 auto;
-  display: flex;
-  align-items: center;
   gap: 10px;
   width: fit-content;
   max-width: calc(25% - 5px);
@@ -166,10 +225,10 @@ const CSS = `
   height: 64px;
   margin: 0;
   padding: 10px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+  border: 0.5px solid var(--dsq-line);
   border-radius: 18px;
   background: var(--dsq-card-fill);
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  color: var(--dsq-label);
   transition: background-color 0.12s;
   position: relative;
   overflow: hidden;
@@ -185,15 +244,12 @@ const CSS = `
    quarter of the input, so 48px would leave no room for the quote text. */
 .dsq_cardIcon {
   z-index: 2;
-  flex: none;
   width: 36px;
   height: 36px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+  border: 0.5px solid var(--dsq-line);
   border-radius: 12px;
-  display: grid;
-  place-items: center;
   background: var(--dsq-card-fill);
-  color: var(--dsw-alias-link, rgba(0, 0, 0, 0.65));
+  color: var(--dsq-link);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: -0.02em;
@@ -201,13 +257,13 @@ const CSS = `
 
 .dsq_cardBody {
   z-index: 2;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
   gap: 2px;
-  /* Keeps the ellipsised title clear of the corner remove button. */
+}
+
+/* Keeps the ellipsised title clear of the corner remove button, which only the
+   composer stack renders. */
+.dsq_cardStack .dsq_cardBody {
   padding-right: 14px;
 }
 
@@ -215,19 +271,13 @@ const CSS = `
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--dsq-label);
 }
 
 .dsq_cardSubtitle {
   font-size: 12px;
   line-height: 18px;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--dsq-label-3);
 }
 
 /* Corner remove button: hidden until the card is hovered or focused. */
@@ -236,16 +286,10 @@ const CSS = `
   top: 4px;
   right: 4px;
   z-index: 3;
-  appearance: none;
-  border: none;
-  background: transparent;
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  cursor: pointer;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
-  display: grid;
-  place-items: center;
+  color: var(--dsq-label-3);
   font-size: 14px;
   line-height: 1;
   opacity: 0;
@@ -262,8 +306,8 @@ const CSS = `
 }
 
 .dsq_cardClose:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-label);
 }
 
 /* Secondary corner action (edit comment). */
@@ -272,16 +316,10 @@ const CSS = `
   top: 4px;
   right: 28px;
   z-index: 3;
-  appearance: none;
-  border: none;
-  background: transparent;
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  cursor: pointer;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
-  display: grid;
-  place-items: center;
+  color: var(--dsq-label-3);
   font-size: 12px;
   line-height: 1;
   opacity: 0;
@@ -296,42 +334,35 @@ const CSS = `
 }
 
 .dsq_cardAction:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
+  background: var(--dsq-fill-hover);
 }
 
 /* Qoder-style annotation summary (“N 条批注”) inside the composer. */
 .dsq_summary {
   position: relative;
   z-index: 10040;
-  display: flex;
-  align-items: center;
   gap: 10px;
   width: 100%;
   max-width: 100%;
   padding: 8px 10px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+  border: 0.5px solid var(--dsq-line);
   border-radius: 18px;
-  background: var(--dsw-static-neutral-50, #fafafa);
+  background: var(--dsq-neutral-50);
   pointer-events: auto;
   user-select: none;
 }
 
 .dsq_summaryIcon {
-  flex: none;
   width: 32px;
   height: 32px;
   border-radius: 10px;
-  display: grid;
-  place-items: center;
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
-  color: var(--dsw-alias-link, rgba(0, 0, 0, 0.65));
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-link);
   font-size: 13px;
   font-weight: 600;
 }
 
 .dsq_summaryBody {
-  flex: 1;
-  min-width: 0;
   position: relative;
 }
 
@@ -339,16 +370,18 @@ const CSS = `
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  color: var(--dsq-label);
 }
 
 .dsq_summaryHint {
   font-size: 12px;
   line-height: 18px;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
+  color: var(--dsq-label-3);
 }
 
 .dsq_summaryHover {
+  /* \`display: none\` here is the closed state, so this rule must not take the
+     flex atoms — the open class below turns display back on. */
   display: none;
   position: fixed;
   z-index: 10050;
@@ -378,63 +411,47 @@ const CSS = `
   transform-origin: bottom center;
 }
 
-@keyframes dsq-panel-in {
-  from {
-    transform: scale(0.96);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 .dsq_summaryHoverInner {
-  display: flex;
-  flex-direction: column;
   gap: 4px;
   max-height: min(420px, calc(100vh - 120px));
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 6px;
-  border-radius: 14px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+  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(--dsw-specific-menu, #fff) 82%, transparent);
+  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(--dsw-elevation-prominent, 0 3px 8px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--dsq-shadow-pop);
 }
 
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .dsq_summaryHoverInner {
-    background: var(--dsw-specific-menu, #fff);
+    background: var(--dsq-menu);
   }
 }
 
 .dsq_summaryItem {
   display: block;
   padding: 8px 10px;
-  border-radius: 10px;
+  border-radius: 8px;
   transition: background-color 0.12s;
 }
 
 .dsq_summaryItem:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+  background: color-mix(in srgb, var(--dsq-fill-hover) 50%, transparent) ;
 }
 
 .dsq_summaryItemHead {
-  display: flex;
-  align-items: center;
   gap: 6px;
 }
 
 .dsq_summaryItemBadge {
-  flex: none;
-  display: grid;
-  place-items: center;
   width: 18px;
   height: 18px;
   border-radius: 999px;
-  background: var(--dsw-static-blue-500, #3b82f6);
+  background: var(--dsq-accent);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
@@ -442,8 +459,6 @@ const CSS = `
 }
 
 .dsq_summaryItemActions {
-  display: flex;
-  align-items: center;
   gap: 2px;
   margin-left: auto;
   opacity: 0.5;
@@ -456,21 +471,15 @@ const CSS = `
 }
 
 .dsq_summaryItemAction {
-  appearance: none;
-  border: none;
-  background: transparent;
   width: 26px;
   height: 26px;
   border-radius: 7px;
-  cursor: pointer;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
-  display: grid;
-  place-items: center;
+  color: var(--dsq-label-3);
 }
 
 .dsq_summaryItemAction:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-label);
 }
 
 .dsq_summaryItemMain {
@@ -478,14 +487,10 @@ const CSS = `
 }
 
 .dsq_summaryItemButton {
-  appearance: none;
   display: block;
   width: 100%;
   text-align: left;
   font: inherit;
-  border: none;
-  background: transparent;
-  cursor: pointer;
   border-radius: 8px;
   padding: 2px 0 0;
 }
@@ -501,13 +506,13 @@ const CSS = `
 .dsq_summaryItemLabel {
   font-size: 11px;
   line-height: 16px;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
+  color: var(--dsq-label-3);
 }
 
 .dsq_summaryItemText {
   font-size: 13px;
   line-height: 18px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  color: var(--dsq-label);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   display: -webkit-box;
@@ -517,14 +522,14 @@ const CSS = `
 }
 
 .dsq_summaryItemTextEmpty {
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
+  color: var(--dsq-label-3);
 }
 
 /* Inline edit form rendered inside the hover panel item (no extra layer). */
 .dsq_annEditText {
   font-size: 13px;
   line-height: 20px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
+  color: var(--dsq-label);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   max-height: 132px;
@@ -533,7 +538,6 @@ const CSS = `
 }
 
 .dsq_annEditInput {
-  box-sizing: border-box;
   width: 100%;
   min-height: 72px;
   resize: vertical;
@@ -543,54 +547,49 @@ const CSS = `
   font: inherit;
   font-size: 13px;
   line-height: 20px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
+  color: var(--dsq-label);
+  background: var(--dsq-fill-hover);
   outline: none;
 }
 
 .dsq_annEditInput::placeholder {
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
+  color: var(--dsq-label-3);
 }
 
 .dsq_annEditActions {
-  display: flex;
   justify-content: flex-end;
-  align-items: center;
   gap: 8px;
+  margin-top: 4px;
 }
 
 .dsq_annEditCancel {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, rgba(0, 0, 0, 0.65));
+  color: var(--dsq-label-2);
   font: inherit;
   font-size: 13px;
-  padding: 6px 10px;
-  border-radius: 999px;
-  cursor: pointer;
+  padding: 4px 12px;
+  border-radius: 10px;
 }
 
 .dsq_annEditCancel:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+  background: var(--dsq-fill-hover);
 }
 
 .dsq_annEditSave {
   appearance: none;
   border: none;
-  background: var(--dsw-static-blue-500, #3b82f6);
+  background: var(--dsq-accent);
   color: #fff;
   font: inherit;
   font-size: 13px;
   font-weight: 500;
-  padding: 6px 16px;
-  border-radius: 999px;
+  padding: 4px 12px;
+  border-radius: 10px;
   cursor: pointer;
   transition: filter 0.12s;
 }
 
 .dsq_annEditSave:hover {
-  filter: brightness(1.06);
+  background: var(--dsq-accent-400);
 }
 
 .dsq_annEditSave:disabled {
@@ -604,36 +603,32 @@ const CSS = `
   z-index: 10050;
   transform: translate(-50%, 4px);
   width: min(320px, calc(100vw - 24px));
-  display: flex;
-  flex-direction: column;
   gap: 8px;
-  padding: 10px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--dsw-specific-menu, #fff) 88%, transparent);
-  backdrop-filter: blur(14px) saturate(1.4);
+  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(--dsw-elevation-prominent, 0 3px 8px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--dsq-shadow-pop);
 }
 
 .dsq_commentInput {
-  box-sizing: border-box;
   width: 100%;
   min-height: 64px;
   resize: none;
   border: none;
-  border-radius: 10px;
+  border-radius: 8px;
   padding: 8px 10px;
   font: inherit;
   font-size: 13px;
   line-height: 20px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
+  color: var(--dsq-label);
+  background: var(--dsq-fill-hover);
   outline: none;
 }
 
 .dsq_commentInput::placeholder {
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
+  color: var(--dsq-label-3);
 }
 
 .dsq_commentActions {
@@ -659,104 +654,38 @@ const CSS = `
   margin-right: 0;
 }
 
+/* Transcript-only differences from the shared card. Unlike the composer
+   summary (one collapsed row per message) each history card shows its own
+   comment, so the fixed height and single-line clamps are lifted on \`.dsq_tCardButton\`. */
 .dsq_tCard {
-  --dsq-card-fill: var(--dsw-static-neutral-50, #fafafa);
-  --dsq-card-hover: var(--dsw-static-neutral-100, #f5f5f5);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: fit-content;
-  max-width: min(calc(var(--dsh-chat-content-width, 748px) * 0.72), 520px);
-  min-width: 0;
-  height: 64px;
-  margin: 0 0 0 auto;
-  padding: 10px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
-  border-radius: 18px;
-  background: var(--dsq-card-fill);
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  transition: background-color 0.12s;
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-}
-
-.dsq_tCard:hover {
-  background: var(--dsq-card-hover);
+  max-width: min(calc(var(--dsq-chat-width) * 0.72), 520px);
+  margin-left: auto;
 }
 
 .dsq_tCardIcon {
-  z-index: 2;
-  flex: none;
   width: 40px;
   height: 40px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  background: var(--dsq-card-fill);
-  color: var(--dsw-alias-link, rgba(0, 0, 0, 0.65));
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.dsq_tCardBody {
-  z-index: 2;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-}
-
-.dsq_tCardTitle {
   font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.dsq_tCardSubtitle {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, 0.45));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Transcript card wrapper: the card itself is a click target that scrolls back
-   to the marked text. Unlike the composer summary (one collapsed row per
-   message) each history card shows its own comment, so the fixed 64px height
-   and the single-line clamps are lifted here. */
 .dsq_tCardButton {
-  appearance: none;
-  display: block;
   /* Compact cards: several fit in one row before wrapping. */
+  display: block;
   flex: 0 1 auto;
   width: 230px;
   max-width: 100%;
   padding: 0;
-  border: none;
-  background: transparent;
   font: inherit;
   text-align: left;
-  cursor: pointer;
   border-radius: 14px;
 }
 
 .dsq_tCardButton:focus-visible {
-  outline: 2px solid var(--dsw-static-blue-500, #3b82f6);
+  outline: 2px solid var(--dsq-accent);
   outline-offset: 2px;
 }
 
-.dsq_tCardButton .dsq_tCard {
+.dsq_tCardButton .dsq_card {
   height: auto;
   min-height: 0;
   align-items: flex-start;
@@ -766,14 +695,14 @@ const CSS = `
   border-radius: 14px;
 }
 
-.dsq_tCardButton .dsq_tCardIcon {
+.dsq_tCardButton .dsq_cardIcon {
   width: 22px;
   height: 22px;
   border-radius: 8px;
   font-size: 11px;
 }
 
-.dsq_tCardButton .dsq_tCardTitle {
+.dsq_tCardButton .dsq_cardTitle {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -784,7 +713,7 @@ const CSS = `
   line-height: 18px;
 }
 
-.dsq_tCardButton .dsq_tCardSubtitle {
+.dsq_tCardButton .dsq_cardSubtitle {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -798,24 +727,18 @@ const CSS = `
 
 /* A comment is the user's own words — give it more presence than the neutral
    "no comment" placeholder. */
-.dsq_tCardButton .dsq_tCardSubtitle[data-dsq-has-comment='true'] {
-  color: var(--dsw-alias-label-secondary, rgba(0, 0, 0, 0.65));
+.dsq_cardSubtitle[data-dsq-has-comment='true'] {
+  color: var(--dsq-label-2);
 }
 
 /* Replacement user bubble (quote block stripped from display). */
 .dsq_userRow {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
   gap: 6px;
 }
 
 .dsq_userStack {
   min-width: 0;
-  max-width: min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  max-width: min(calc(var(--dsq-chat-width) * 0.702), 82%);
   gap: 8px;
 }
 
@@ -823,48 +746,28 @@ const CSS = `
   max-width: 100%;
   padding: 10px 16px;
   border-radius: 22px;
-  background: var(--dsw-specific-bubble, rgba(0, 0, 0, 0.05));
-  color: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
-  font-size: var(--dsh-content-font-size, 14px);
-  line-height: calc(22px + var(--dsh-content-font-delta, 0px));
+  background: var(--dsq-bubble);
+  color: var(--dsq-label);
+  font-size: var(--dsq-font-size);
+  line-height: calc(22px + var(--dsq-font-delta));
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-/* Reserve room for the floating quote cards inside the composer card, so the
-   attachment rail and the editor flow below them instead of being covered. */
-.dsq_cardPad {
-  padding-top: var(--dsq-quote-pad, 88px) !important;
-}
-
 /* Durable message images of a replacement user bubble. */
 .dsq_userImages {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
   max-width: 100%;
 }
 
-/* Dark theme: the product flips its palette on body[data-ds-dark-theme], and
-   every --dsw-alias-* token follows it. Only the card fill is ours. */
-body[data-ds-dark-theme] .dsq_card,
-body[data-ds-dark-theme] .dsq_tCard {
-  --dsq-card-fill: var(--dsw-static-neutral-850, #212123);
-  --dsq-card-hover: var(--dsw-static-neutral-800, #292929);
-}
-
 /* Model-written :dsh-annotation{index="N"} chips. */
 .dsq_annDirective {
   appearance: none;
-  display: inline-flex;
-  align-items: center;
   margin: 0 2px;
   padding: 0 6px;
-  border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  border: 0.5px solid var(--dsq-line);
   border-radius: 6px;
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
-  color: var(--dsw-alias-link, #1677ff);
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-link);
   font: inherit;
   font-size: 12px;
   line-height: 18px;
@@ -872,14 +775,10 @@ body[data-ds-dark-theme] .dsq_tCard {
   vertical-align: baseline;
 }
 
-.dsq_annDirective:hover {
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.08));
-}
-
 /* Inline annotation mark in message bodies: highlight underline + ordinal badge. */
 .dsq_annMark {
-  --dsq-mark-color: var(--dsw-static-blue-500, #3b82f6);
-  --dsq-mark-tint: var(--dsw-static-blue-50p, #eaf3ff);
+  --dsq-mark-color: var(--dsq-accent);
+  --dsq-mark-tint: var(--dsq-accent-tint);
   background: var(--dsq-mark-tint);
   text-decoration: underline;
   text-decoration-style: dashed;
@@ -912,13 +811,36 @@ body[data-ds-dark-theme] .dsq_tCard {
 }
 
 .dsq_annMark:hover {
-  background: var(--dsw-static-blue-75, #e5f0ff);
+  background: var(--dsq-accent-tint-hover);
 }
 
 .dsq_annMarkFlash {
   animation: dsq-ann-flash 1.4s ease-out;
 }
 
+/* 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);
@@ -930,8 +852,22 @@ body[data-ds-dark-theme] .dsq_tCard {
   }
 }
 
+/* The product flips its palette on body[data-ds-dark-theme], and every
+   --dsq-* alias follows it. Only values we own ourselves need restating — the
+   transcript card carries .dsq_card too, so one selector covers both. */
+body[data-ds-dark-theme] .dsq_card {
+  --dsq-card-fill: var(--dsq-neutral-850);
+  --dsq-card-hover: var(--dsq-neutral-800);
+}
+
 body[data-ds-dark-theme] .dsq_annMark {
-  --dsq-mark-tint: var(--dsw-static-blue-950, #172554);
+  --dsq-mark-tint: var(--dsq-accent-tint-dark);
+}
+
+/* Reserve room for the floating quote cards inside the composer card, so the
+   attachment rail and the editor flow below them instead of being covered. */
+.dsq_cardPad {
+  padding-top: var(--dsq-quote-pad, 88px) !important;
 }
 `;
 const TAG_ID = "dsh-select-quote/toolbar.css";
@@ -947,6 +883,7 @@ function ensureToolbarStyles() {
 const styles = {
 	toolbar: "dsq_toolbar",
 	button: "dsq_button",
+	buttonAddComment: "dsq_buttonAddComment",
 	divider: "dsq_divider",
 	status: "dsq_status",
 	cardStack: "dsq_cardStack",
@@ -992,9 +929,6 @@ const styles = {
 	tCardButton: "dsq_tCardButton",
 	tCard: "dsq_tCard",
 	tCardIcon: "dsq_tCardIcon",
-	tCardBody: "dsq_tCardBody",
-	tCardTitle: "dsq_tCardTitle",
-	tCardSubtitle: "dsq_tCardSubtitle",
 	userRow: "dsq_userRow",
 	userStack: "dsq_userStack",
 	userImages: "dsq_userImages",
@@ -1041,9 +975,17 @@ function collectCleanText(root) {
 	return entries;
 }
 function flowItemOf(node) {
-	const item = (node instanceof Element ? node : node.parentElement)?.closest(FLOW_ITEM);
+	const item = (node instanceof Element ? node : node?.parentElement)?.closest(FLOW_ITEM);
 	return item instanceof HTMLElement ? item : null;
 }
+/**
+* True when the node lives inside a conversation message. Selections in the
+* sidebar, settings, model picker or any other app chrome are not quotes, so
+* the toolbar must stay away from them.
+*/
+function isInsideTranscript(node) {
+	return flowItemOf(node) !== null;
+}
 function pointOffset(entries, container, offset) {
 	for (const entry of entries) if (entry.node === container) return entry.start + Math.min(offset, entry.end - entry.start);
 	if (!(container instanceof Element)) return null;
@@ -1383,22 +1325,6 @@ function findElementByText(text) {
 	}
 	return best;
 }
-//#endregion
-//#region src/client/runtime.ts
-/**
-* Shared runtime handles across slot scopes.
-* The selection toolbar mounts at root (`shell.overlay`) while the annotation
-* panel is session-scoped — pending annotations use one shared store key so
-* both sides always read the same list.
-*/
-const runtime = {};
-function setRuntimeSession(sessionId) {
-	if (sessionId) runtime.sessionId = sessionId;
-}
-/** Store partition for pending annotations (single active composer). */
-function annotationStoreKey() {
-	return "pending";
-}
 const DRAFT_MARKER_RE = /\u200B/g;
 /** Plain text from Chat user-node content blocks (string or block array). */
 function contentBlocksToText(content) {
@@ -1591,11 +1517,27 @@ function scanAnnotatedMessage(text) {
 	};
 }
 //#endregion
+//#region src/client/runtime.ts
+/**
+* Shared runtime handles across slot scopes.
+*
+* The selection toolbar mounts at root (`shell.overlay`) while the annotation
+* panel is session-scoped, so both sides read one partition keyed by the
+* session the host minted for the active composer.
+*/
+const runtime = {};
+function setRuntimeSession(sessionId) {
+	if (sessionId) runtime.sessionId = sessionId;
+}
+//#endregion
 //#region src/client/state/annotation-store.ts
 /** Per-session pending selection annotations (composer-side store). */
 const EMPTY$1 = [];
+/** Bucket for annotations added before a session id is known (never persisted). */
+const MEMORY_KEY = "pending";
 const bySession = /* @__PURE__ */ new Map();
 const listeners = /* @__PURE__ */ new Set();
+let persistence = null;
 function notify() {
 	for (const listener of [...listeners]) listener();
 }
@@ -1605,12 +1547,25 @@ function subscribeAnnotations(listener) {
 		listeners.delete(listener);
 	};
 }
-function key(sessionId) {
-	return sessionId ?? annotationStoreKey();
+/**
+* Store partition: the live session when one is bound, otherwise a memory-only
+* bucket. The host always mints a session before the composer accepts text, so
+* the bucket is the "cannot happen" path and never reaches storage.
+*/
+function partition(sessionId) {
+	return sessionId ?? runtime.sessionId ?? MEMORY_KEY;
+}
+/** Attach the persistence port (null detaches it). */
+function setAnnotationPersistence(port) {
+	persistence = port;
+}
+function persist(partitionKey) {
+	if (!persistence || partitionKey === MEMORY_KEY) return;
+	persistence.save(partitionKey, bySession.get(partitionKey) ?? EMPTY$1);
 }
 /** Append one selection; an identical text+comment pair is reused. */
 function saveAnnotation(sessionId, input) {
-	const k = key(sessionId);
+	const k = partition(sessionId);
 	const comment = input.comment?.trim() ?? "";
 	const current = bySession.get(k) ?? EMPTY$1;
 	const duplicate = current.find((item) => item.text === input.text && (item.comment ?? "") === comment);
@@ -1622,14 +1577,15 @@ function saveAnnotation(sessionId, input) {
 		sources: input.sources?.length ? input.sources : [{ text: input.text }]
 	};
 	bySession.set(k, [...current, annotation]);
+	persist(k);
 	notify();
 	return annotation;
 }
 function getAnnotations(sessionId) {
-	return bySession.get(key(sessionId)) ?? EMPTY$1;
+	return bySession.get(partition(sessionId)) ?? EMPTY$1;
 }
 function updateAnnotationComment(sessionId, id, comment) {
-	const k = key(sessionId);
+	const k = partition(sessionId);
 	const current = bySession.get(k);
 	if (!current) return;
 	const next = current.map((item) => {
@@ -1644,20 +1600,59 @@ function updateAnnotationComment(sessionId, id, comment) {
 		};
 	});
 	bySession.set(k, next);
+	persist(k);
 	notify();
 }
 function removeAnnotation(sessionId, id) {
-	const k = key(sessionId);
+	const k = partition(sessionId);
 	const current = bySession.get(k);
 	if (!current) return;
 	const next = current.filter((item) => item.id !== id);
 	if (next.length === current.length) return;
 	if (next.length === 0) bySession.delete(k);
 	else bySession.set(k, next);
+	if (next.length === 0 && k !== MEMORY_KEY) persistence?.clear(k);
+	else persist(k);
 	notify();
 }
 function clearAnnotations(sessionId) {
-	if (bySession.delete(key(sessionId))) notify();
+	const k = partition(sessionId);
+	if (!bySession.delete(k)) return;
+	if (k !== MEMORY_KEY) persistence?.clear(k);
+	notify();
+}
+/**
+* Bind the active session and adopt whatever it left unsent.
+*
+* Called from render-phase bridges, so adoption is deferred to a microtask:
+* the resulting notify() must not land inside another component's render.
+* Re-binding the same session is a no-op.
+*/
+function bindAnnotationSession(sessionId) {
+	if (!sessionId || sessionId === runtime.sessionId) return;
+	setRuntimeSession(sessionId);
+	queueMicrotask(() => adoptPersistedAnnotations(sessionId));
+}
+/**
+* Adopt persisted annotations for a session.
+*
+* In-memory entries win on conflict — they can only be newer, because anything
+* added after the bind is persisted immediately. Annotations parked in the
+* memory-only bucket (added before the bind) move over as well.
+*/
+function adoptPersistedAnnotations(sessionId) {
+	if (!persistence) return;
+	const stored = persistence.load(sessionId);
+	const current = bySession.get(sessionId) ?? EMPTY$1;
+	const orphaned = bySession.get(MEMORY_KEY) ?? EMPTY$1;
+	const merged = /* @__PURE__ */ new Map();
+	for (const item of stored) merged.set(item.id, item);
+	for (const item of [...current, ...orphaned]) merged.set(item.id, item);
+	const next = [...merged.values()];
+	if (next.length === current.length && next.every((item, i) => item.id === current[i]?.id) && orphaned.length === 0) return;
+	bySession.set(sessionId, next);
+	if (orphaned.length > 0) bySession.delete(MEMORY_KEY);
+	notify();
 }
 function annotationTitle(annotation) {
 	return previewTitle(annotation.text);
@@ -1966,23 +1961,23 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 	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", {
-		className: composer ? styles.card : styles.tCard,
+		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", {
-				className: composer ? styles.cardIcon : styles.tCardIcon,
+				className: cx(A.keep, A.gridMid, styles.cardIcon, !composer && styles.tCardIcon),
 				"aria-hidden": true,
 				children: index ? String(index) : "AI"
 			}),
 			(0, react_jsx_runtime.jsxs)("div", {
-				className: composer ? styles.cardBody : styles.tCardBody,
+				className: cx(A.grow, A.col, styles.cardBody),
 				children: [(0, react_jsx_runtime.jsx)("div", {
-					className: composer ? styles.cardTitle : styles.tCardTitle,
+					className: cx(A.ell, styles.cardTitle),
 					title: text,
 					children: title
 				}), (0, react_jsx_runtime.jsx)("div", {
-					className: composer ? styles.cardSubtitle : styles.tCardSubtitle,
+					className: cx(A.ell, styles.cardSubtitle),
 					...comment ? {
 						title: comment,
 						"data-dsq-has-comment": "true"
@@ -1992,14 +1987,14 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 			}),
 			composer && onEditComment ? (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: styles.cardAction,
+				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", {
 				type: "button",
-				className: styles.cardClose,
+				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("card.remove"),
 				onClick: onRemove,
 				children: "×"
@@ -2183,16 +2178,16 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		onPointerEnter: openPop,
 		onPointerLeave,
 		children: (0, react_jsx_runtime.jsx)("div", {
-			className: styles.summaryHoverInner,
+			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: styles.summaryItemHead,
+						className: cx(A.row, styles.summaryItemHead),
 						children: [
 							(0, react_jsx_runtime.jsx)("div", {
-								className: styles.summaryItemBadge,
+								className: cx(A.keep, A.gridMid, styles.summaryItemBadge),
 								"aria-hidden": true,
 								children: String(i + 1)
 							}),
@@ -2201,16 +2196,16 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 								children: t("common.selectedText")
 							}),
 							!isEditing && (onItemRemove || onItemEdit) ? (0, react_jsx_runtime.jsxs)("div", {
-								className: styles.summaryItemActions,
+								className: cx(A.row, styles.summaryItemActions),
 								children: [onItemEdit ? (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									className: styles.summaryItemAction,
+									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: styles.summaryItemAction,
+									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" })
@@ -2230,7 +2225,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 							}),
 							(0, react_jsx_runtime.jsx)("textarea", {
 								ref: editInputRef,
-								className: styles.annEditInput,
+								className: cx(A.box, styles.annEditInput),
 								placeholder: t("common.commentPlaceholder"),
 								value: editDraft,
 								onChange: (e) => setEditDraft(e.target.value),
@@ -2247,10 +2242,10 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 								}
 							}),
 							(0, react_jsx_runtime.jsxs)("div", {
-								className: styles.annEditActions,
+								className: cx(A.row, styles.annEditActions),
 								children: [(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									className: styles.annEditCancel,
+									className: cx(A.plain, styles.annEditCancel),
 									onClick: () => setEditing(null),
 									children: t("common.cancel")
 								}), (0, react_jsx_runtime.jsx)("button", {
@@ -2265,7 +2260,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 						className: styles.summaryItemMain,
 						children: (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
-							className: styles.summaryItemButton,
+							className: cx(A.plain, styles.summaryItemButton),
 							onClick: () => {
 								onItemSelect?.(i, item);
 								closePop();
@@ -2292,7 +2287,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 	}) : null;
 	return (0, react_jsx_runtime.jsxs)("div", {
 		ref: rootRef,
-		className: styles.summary,
+		className: cx(A.row, styles.summary),
 		tabIndex: 0,
 		"data-selection-annotation-summary": "true",
 		"aria-label": t("summary.aria", { count }),
@@ -2304,12 +2299,12 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		onKeyDown,
 		children: [
 			(0, react_jsx_runtime.jsx)("div", {
-				className: styles.summaryIcon,
+				className: cx(A.keep, A.gridMid, styles.summaryIcon),
 				"aria-hidden": true,
 				children: String(count)
 			}),
 			(0, react_jsx_runtime.jsxs)("div", {
-				className: styles.summaryBody,
+				className: cx(A.grow, styles.summaryBody),
 				children: [(0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryTitle,
 					children: t("summary.title", { count })
@@ -2320,7 +2315,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 			}),
 			onRemoveAll ? (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: styles.cardClose,
+				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("summary.removeAll"),
 				onClick: onRemoveAll,
 				children: (0, react_jsx_runtime.jsx)(LucideIcon, {
@@ -2413,6 +2408,31 @@ function useSendIntercept({ itemCount, draftRef, setDraft, onFolded }) {
 //#region src/client/composer/AnnotationPanel.tsx
 const EMPTY = [];
 /**
+* True while an IME composition is in flight.
+*
+* Composition events bubble, so a capture listener on the document sees them
+* wherever the composer lives. Anything that writes the draft must check this:
+* replacing editor content mid-composition drops the composing text.
+*/
+function useComposing() {
+	const composing = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		const onStart = () => {
+			composing.current = true;
+		};
+		const onEnd = () => {
+			composing.current = false;
+		};
+		document.addEventListener("compositionstart", onStart, true);
+		document.addEventListener("compositionend", onEnd, true);
+		return () => {
+			document.removeEventListener("compositionstart", onStart, true);
+			document.removeEventListener("compositionend", onEnd, true);
+		};
+	}, []);
+	return composing;
+}
+/**
 * Composer annotation summary (`conversation.input.overlay`).
 *
 * Pending selections never enter the editor as text: the summary card is the
@@ -2426,6 +2446,7 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 	const draftRef = (0, react.useRef)(draft);
 	const actionsRef = (0, react.useRef)(inputActions);
 	const sessionRef = (0, react.useRef)(sessionId);
+	const composing = useComposing();
 	draftRef.current = draft;
 	actionsRef.current = inputActions;
 	sessionRef.current = sessionId;
@@ -2436,7 +2457,7 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 		setItems(getAnnotations());
 	}, []);
 	(0, react.useEffect)(() => {
-		if (sessionId) setRuntimeSession(sessionId);
+		bindAnnotationSession(sessionId);
 	}, [sessionId]);
 	(0, react.useEffect)(() => {
 		ensureToolbarStyles();
@@ -2472,6 +2493,19 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 		setDraft,
 		onFolded: () => setItems(EMPTY)
 	});
+	(0, react.useEffect)(() => {
+		if (composing.current) return;
+		if (items.length === 0) {
+			if (draft.includes("​")) setDraft(stripDraftMarker(draft));
+			return;
+		}
+		if (!draft.includes("​") && draft.trim() === "") setDraft(withDraftMarker(draft));
+	}, [
+		items,
+		draft,
+		setDraft,
+		composing
+	]);
 	const onRemoveAll = (0, react.useCallback)(() => {
 		clearAnnotations();
 		setItems(EMPTY);
@@ -2501,7 +2535,7 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 	if (!sessionId || items.length === 0) return null;
 	return (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
-		className: styles.cardStack,
+		className: cx(A.col, styles.cardStack),
 		children: (0, react_jsx_runtime.jsx)(AnnotationSummary, {
 			count: items.length,
 			items: items.map((item) => ({
@@ -2571,7 +2605,8 @@ function toolbarPosition(rect) {
 	};
 }
 /**
-* Read the live selection when it is a non-empty range outside the composer.
+* Read the live selection when it is a non-empty range inside a conversation
+* message and outside the composer / our own chrome.
 */
 function readSelectionSnapshot(toolbarRoot) {
 	const selection = window.getSelection();
@@ -2580,6 +2615,7 @@ function readSelectionSnapshot(toolbarRoot) {
 	if (!anchorNode || !focusNode) return null;
 	if (isInsideComposerInput(anchorNode) || isInsideComposerInput(focusNode)) return null;
 	if (toolbarRoot?.contains(anchorNode) || toolbarRoot?.contains(focusNode)) return null;
+	if (!isInsideTranscript(anchorNode) || !isInsideTranscript(focusNode)) return null;
 	const text = selection.toString().replace(/\r\n/g, "\n").trim();
 	if (!text) return null;
 	const rect = getRangeFirstLineRect(selection.getRangeAt(0));
@@ -2628,7 +2664,7 @@ function SelectionToolbar({ sessionId }) {
 	activeRef.current = active;
 	(0, react.useEffect)(() => {
 		ensureToolbarStyles();
-		if (sessionId) setRuntimeSession(sessionId);
+		if (sessionId) bindAnnotationSession(sessionId);
 	}, [sessionId]);
 	const hide = (0, react.useCallback)(() => {
 		setActive(null);
@@ -2791,7 +2827,7 @@ function SelectionToolbar({ sessionId }) {
 	return (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
 		(0, react_jsx_runtime.jsx)("div", {
 			ref: toolbarRef,
-			className: styles.toolbar,
+			className: cx(A.row, styles.toolbar),
 			style: toolbarStyle,
 			role: "toolbar",
 			"aria-label": t("toolbar.aria"),
@@ -2820,7 +2856,7 @@ function SelectionToolbar({ sessionId }) {
 				children: [
 					(0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: styles.button,
+						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: () => void handleCopy(),
 						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "copy",
@@ -2833,7 +2869,7 @@ function SelectionToolbar({ sessionId }) {
 					}),
 					(0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: styles.button,
+						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: openComment,
 						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "plus",
@@ -2845,14 +2881,14 @@ function SelectionToolbar({ sessionId }) {
 		}),
 		phase === "comment" ? (0, react_jsx_runtime.jsxs)("div", {
 			ref: commentWrapRef,
-			className: styles.commentPop,
+			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", {
 				ref: commentRef,
-				className: styles.commentInput,
+				className: cx(A.box, styles.commentInput),
 				placeholder: t("common.commentPlaceholder"),
 				value: comment,
 				onChange: (e) => setComment(e.target.value),
@@ -2871,12 +2907,12 @@ function SelectionToolbar({ sessionId }) {
 				className: styles.commentActions,
 				children: [(0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: styles.button,
+					className: cx(A.plain, A.inlineRow, styles.button),
 					onClick: () => commitAnnotation(void 0),
 					children: t("toolbar.skipComment")
 				}), (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: styles.button,
+					className: cx(A.plain, A.inlineRow, styles.button, styles.buttonAddComment),
 					disabled: !comment.trim(),
 					onClick: () => commitAnnotation(comment),
 					children: t("toolbar.addComment")
@@ -2898,6 +2934,7 @@ function SelectionToolbar({ sessionId }) {
 * Display-only decoration — durable message text is never rewritten.
 */
 const DECO = "dsq-ann-directive";
+const DECO_KEY = "dsqAnnDirective";
 function decorateTextNode(node) {
 	const value = node.nodeValue;
 	if (!value || !value.includes(":dsh-annotation{")) return;
@@ -2916,9 +2953,9 @@ function decorateTextNode(node) {
 		const index = Number(m[1]);
 		const chip = document.createElement("button");
 		chip.type = "button";
-		chip.className = "dsq_annDirective";
-		chip.dataset[DECO] = String(index);
+		chip.className = cx(styles.annDirective, A.inlineRow);
 		chip.setAttribute("data-dsq-deco", "true");
+		chip.dataset[DECO_KEY] = String(index);
 		chip.textContent = t("chip.annotation", { index });
 		chip.addEventListener("click", () => {
 			const mark = findAnnotationMarkBefore(index, chip);
@@ -2956,7 +2993,7 @@ function refreshDirectiveChips(root) {
 	const el = root ?? (typeof document === "undefined" ? void 0 : document.body);
 	if (!el) return;
 	for (const chip of el.querySelectorAll(`[data-${DECO}]`)) {
-		const index = Number(chip.dataset[DECO]);
+		const index = Number(chip.dataset[DECO_KEY]);
 		if (Number.isFinite(index)) chip.textContent = t("chip.annotation", { index });
 	}
 }
@@ -3017,7 +3054,7 @@ function TranscriptQuoteCard({ node }) {
 		className: styles.tCardStack,
 		"data-dsq-deco": "true",
 		children: quotes.map((quote, index) => (0, react_jsx_runtime.jsx)("div", {
-			className: styles.tCardButton,
+			className: cx(A.plain, styles.tCardButton),
 			role: "button",
 			tabIndex: 0,
 			"aria-label": quote.title,
@@ -3054,7 +3091,8 @@ function contentImages(content) {
 * Replacement for the built-in `user` Chat node view.
 *
 * Strips the `<response-annotations>` protocol block from the bubble **and**
-* renders one card per annotation right under it.
+* renders one card per annotation right above it — the same order the composer
+* shows them in, so the sent message reads like the draft did.
 *
 * Why the cards live here instead of on a `select-quote` Chat node:
 * `conversation.chat.node` is gated by the shipped `TURN_PROCESS_INDEPENDENT_KINDS`
@@ -3074,12 +3112,12 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 	const images = contentImages(node.data?.content);
 	if (!text && images.length === 0 && quotes.length === 0) return null;
 	return (0, react_jsx_runtime.jsx)("div", {
-		className: styles.userRow,
+		className: cx(A.colEnd, styles.userRow),
 		children: (0, react_jsx_runtime.jsxs)("div", {
-			className: styles.userStack,
+			className: cx(A.colEnd, styles.userStack),
 			children: [
 				images.length > 0 && renderMessageImages !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
-					className: styles.userImages,
+					className: cx(A.colEnd, styles.userImages),
 					"data-message-attachments": true,
 					children: renderMessageImages({
 						images,
@@ -3087,16 +3125,214 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 						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", {
 					className: styles.userBubble,
 					children: text
-				}, "bubble") : null,
-				quotes.length > 0 ? (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }, "quotes") : null
+				}, "bubble") : null
 			]
 		})
 	});
 }
 //#endregion
+//#region src/client/state/annotation-persistence.ts
+/** localStorage prefix; a session id is appended as `.<sessionId>`. */
+const ANNOTATION_KEY_PREFIX = "dsh.select-quote.annotations";
+const PAYLOAD_VERSION = 1;
+function keyForSession(sessionId) {
+	return `${ANNOTATION_KEY_PREFIX}.${sessionId}`;
+}
+function sessionIdOfKey(key) {
+	const prefix = `${ANNOTATION_KEY_PREFIX}.`;
+	return key.startsWith(prefix) ? key.slice(prefix.length) : null;
+}
+function isAnnotation(value) {
+	if (!value || typeof value !== "object") return false;
+	const item = value;
+	return typeof item.id === "string" && typeof item.text === "string" && Array.isArray(item.sources);
+}
+/** Tolerant read: a corrupt or foreign payload degrades to "nothing stored". */
+function itemsOf(value) {
+	if (!value || typeof value !== "object") return [];
+	const payload = value;
+	if (!Array.isArray(payload.items)) return [];
+	return payload.items.filter(isAnnotation);
+}
+function encode(items, now) {
+	return JSON.stringify({
+		v: PAYLOAD_VERSION,
+		updatedAt: now,
+		items
+	});
+}
+function decode(raw) {
+	if (raw === null) return [];
+	try {
+		return itemsOf(JSON.parse(raw));
+	} catch {
+		return [];
+	}
+}
+/** One warn per session, never a throw: a full quota must not break typing. */
+let quotaWarned = false;
+function warnQuota() {
+	if (quotaWarned) return;
+	quotaWarned = true;
+	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.
+*/
+function createStoragePersistence(storage) {
+	let degraded = false;
+	return {
+		load: (sessionId) => decode(storage.getItem(keyForSession(sessionId))),
+		save: (sessionId, items) => {
+			if (degraded) return;
+			try {
+				storage.setItem(keyForSession(sessionId), encode(items, Date.now()));
+			} catch {
+				degraded = true;
+				warnQuota();
+			}
+		},
+		clear: (sessionId) => {
+			try {
+				storage.removeItem(keyForSession(sessionId));
+			} catch {}
+		},
+		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;
+	const maxAgeMs = options.maxAgeMs ?? 6048e5;
+	const rows = [];
+	for (const key of storage.keys()) {
+		const sessionId = sessionIdOfKey(key);
+		if (sessionId === null) continue;
+		const raw = storage.getItem(key);
+		let updatedAt = 0;
+		try {
+			const parsed = JSON.parse(raw ?? "null");
+			if (parsed && typeof parsed.updatedAt === "number") updatedAt = parsed.updatedAt;
+		} catch {
+			updatedAt = 0;
+		}
+		rows.push({
+			sessionId,
+			updatedAt
+		});
+	}
+	const removed = /* @__PURE__ */ new Set();
+	for (const row of rows) if (now - row.updatedAt > maxAgeMs) removed.add(row.sessionId);
+	rows.sort((a, b) => b.updatedAt - a.updatedAt);
+	for (const row of rows.slice(maxSessions)) removed.add(row.sessionId);
+	for (const sessionId of removed) storage.removeItem(keyForSession(sessionId));
+	return [...removed];
+}
+function createNoopPersistence() {
+	return {
+		load: () => [],
+		save: () => {},
+		clear: () => {},
+		prune: () => []
+	};
+}
+//#endregion
+//#region src/client/state/annotation-storage.ts
+/**
+* Backend selection 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.
+*
+* 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 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;
+		if (!storage) return null;
+		return {
+			getItem: (key) => storage.getItem(key),
+			setItem: (key, value) => storage.setItem(key, value),
+			removeItem: (key) => storage.removeItem(key),
+			keys: () => {
+				const out = [];
+				for (let i = 0; i < storage.length; i += 1) {
+					const key = storage.key(i);
+					if (key !== null) out.push(key);
+				}
+				return out;
+			}
+		};
+	} catch {
+		return null;
+	}
+}
+function createAnnotationPersistence() {
+	const storage = browserStorage();
+	const defineStore = hostDefineStore();
+	if (storage && defineStore) return createHostStorePersistence(defineStore, storage);
+	if (storage) return createStoragePersistence(storage);
+	return createNoopPersistence();
+}
+//#endregion
 //#region src/client/index.tsx
 /**
 * Browser half of dsh-select-quote.
@@ -3141,6 +3377,12 @@ function apply(ctx) {
 		syncPendingAnnotationJobs(getAnnotations());
 		return subscribeAnnotations(() => syncPendingAnnotationJobs(getAnnotations()));
 	}, "dsh-select-quote: pending annotation marks");
+	ctx.effect(() => {
+		const port = createAnnotationPersistence();
+		setAnnotationPersistence(port);
+		port.prune();
+		return () => setAnnotationPersistence(null);
+	}, "dsh-select-quote: annotation persistence");
 	ctx.slots.inject("shell.overlay", () => {
 		ctx.slots.register({
 			name: "shell.overlay",
@@ -3172,7 +3414,7 @@ function apply(ctx) {
 }
 /** Invisible session-scoped bridge that publishes sessionId for the root toolbar. */
 function SessionBridge({ sessionId }) {
-	setRuntimeSession(sessionId);
+	bindAnnotationSession(sessionId);
 	return null;
 }
 //#endregion