dsh-select-quote 0.3.0 → 0.3.2

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",
@@ -1765,195 +1699,224 @@ function LucideIcon({ name, size = 15 }) {
 }
 //#endregion
 //#region src/client/i18n.ts
-const LOCALES = [
-	"ru",
-	"en",
-	"zh"
-];
-const STORAGE_KEY = "dsq-locale";
-const MESSAGES = {
-	ru: {
-		"common.selectedText": "Выделенный текст",
-		"common.commentPlaceholder": "Добавить необязательный комментарий…",
-		"common.cancel": "Отмена",
-		"common.save": "Сохранить",
-		"toolbar.aria": "Действия с выделенным текстом",
-		"toolbar.commentHint": "Добавить аннотацию…",
-		"toolbar.copy": "Копировать",
-		"toolbar.copyFailed": "Не удалось скопировать",
-		"toolbar.addToTask": "Добавить к задаче",
-		"toolbar.commentDialogAria": "Добавить необязательный комментарий",
-		"toolbar.skipComment": "Без комментария",
-		"toolbar.addComment": "Добавить комментарий",
-		"card.commentSubtitle": "Комментарий · {comment}",
-		"card.ariaIndexed": "Аннотация {index}",
-		"card.ariaPlain": "Аннотация к выделенному тексту",
-		"card.editComment": "Изменить комментарий",
-		"card.remove": "Удалить аннотацию",
-		"summary.hint": "Наведите, чтобы увидеть аннотации",
-		"summary.dialogAria": "Детали аннотаций: {count}",
-		"summary.edit": "Изменить аннотацию {index}",
-		"summary.remove": "Удалить аннотацию {index}",
-		"summary.userComment": "Комментарий пользователя",
-		"summary.noComment": "Комментарий не добавлен",
-		"summary.aria": {
-			one: "{count} аннотация. Наведите, чтобы увидеть детали.",
-			few: "{count} аннотации. Наведите, чтобы увидеть детали.",
-			many: "{count} аннотаций. Наведите, чтобы увидеть детали."
-		},
-		"summary.title": {
-			one: "{count} аннотация",
-			few: "{count} аннотации",
-			many: "{count} аннотаций"
-		},
-		"summary.removeAll": "Удалить все аннотации",
-		"chip.annotation": "Аннотация {index}"
-	},
-	en: {
-		"common.selectedText": "Selected text",
-		"common.commentPlaceholder": "Add an optional comment…",
-		"common.cancel": "Cancel",
-		"common.save": "Save",
-		"toolbar.aria": "Selection actions",
-		"toolbar.commentHint": "Add annotation…",
-		"toolbar.copy": "Copy",
-		"toolbar.copyFailed": "Copy failed",
-		"toolbar.addToTask": "Add to task",
-		"toolbar.commentDialogAria": "Add an optional comment",
-		"toolbar.skipComment": "Skip comment",
-		"toolbar.addComment": "Add comment",
-		"card.commentSubtitle": "Comment · {comment}",
-		"card.ariaIndexed": "Annotation {index}",
-		"card.ariaPlain": "Selection annotation",
-		"card.editComment": "Edit comment",
-		"card.remove": "Remove annotation",
-		"summary.hint": "Hover to view annotations",
-		"summary.dialogAria": "Annotation details: {count}",
-		"summary.edit": "Edit annotation {index}",
-		"summary.remove": "Remove annotation {index}",
-		"summary.userComment": "User comment",
-		"summary.noComment": "No comment added",
-		"summary.aria": {
-			one: "{count} annotation. Hover to view details.",
-			other: "{count} annotations. Hover to view details."
-		},
-		"summary.title": {
-			one: "{count} annotation",
-			other: "{count} annotations"
-		},
-		"summary.removeAll": "Remove all annotations",
-		"chip.annotation": "Annotation {index}"
-	},
-	zh: {
-		"common.selectedText": "选中的文本",
-		"common.commentPlaceholder": "添加可选评论…",
-		"common.cancel": "取消",
-		"common.save": "保存",
-		"toolbar.aria": "划词操作",
-		"toolbar.commentHint": "添加批注…",
-		"toolbar.copy": "复制",
-		"toolbar.copyFailed": "复制失败",
-		"toolbar.addToTask": "添加到任务",
-		"toolbar.commentDialogAria": "添加可选评论",
-		"toolbar.skipComment": "暂不评论",
-		"toolbar.addComment": "添加评论",
-		"card.commentSubtitle": "评论 · {comment}",
-		"card.ariaIndexed": "批注 {index}",
-		"card.ariaPlain": "划词批注",
-		"card.editComment": "编辑评论",
-		"card.remove": "移除批注",
-		"summary.hint": "悬停查看批注",
-		"summary.dialogAria": "{count} 条划词批注详情",
-		"summary.edit": "编辑批注 {index}",
-		"summary.remove": "移除批注 {index}",
-		"summary.userComment": "用户评论",
-		"summary.noComment": "未添加评论",
-		"summary.aria": { other: "{count} 条划词批注。悬停查看详情。" },
-		"summary.title": { other: "{count} 条批注" },
-		"summary.removeAll": "移除全部划词批注",
-		"chip.annotation": "批注 {index}"
-	}
+/**
+* Copy for dsh-select-quote, served through the host locale service.
+*
+* The active language is owned by `@deepseek-ai/dsh-client-locale` (Settings →
+* General → Language, persisted as `locale.preference`). This module owns only
+* the dictionaries and the plural form selection that the host's plain-template
+* lookup cannot express; it never resolves a language on its own.
+*
+* NOT localized on purpose:
+*   - wire markers (`> [选中文本]`, `<response-annotations>`,
+*     `:dsh-annotation{index="N"}`) — they are the message format the model
+*     and the transcript parser agree on;
+*   - the `# Response annotations:` header — model-facing instruction prose,
+*     not UI text.
+*/
+const LOCALE_NS = "select-quote";
+const zh = {
+	"common.selectedText": "选中的文本",
+	"common.commentPlaceholder": "添加可选评论…",
+	"common.cancel": "取消",
+	"common.save": "保存",
+	"toolbar.aria": "划词操作",
+	"toolbar.commentHint": "添加批注…",
+	"toolbar.copy": "复制",
+	"toolbar.copyFailed": "复制失败",
+	"toolbar.addToTask": "添加到任务",
+	"toolbar.commentDialogAria": "添加可选评论",
+	"toolbar.skipComment": "暂不评论",
+	"toolbar.addComment": "添加评论",
+	"card.commentSubtitle": "评论 · {comment}",
+	"card.ariaIndexed": "批注 {index}",
+	"card.ariaPlain": "划词批注",
+	"card.editComment": "编辑评论",
+	"card.remove": "移除批注",
+	"summary.hint": "悬停查看批注",
+	"summary.dialogAria": "{count} 条划词批注详情",
+	"summary.edit": "编辑批注 {index}",
+	"summary.remove": "移除批注 {index}",
+	"summary.userComment": "用户评论",
+	"summary.noComment": "未添加评论",
+	"summary.aria.other": "{count} 条划词批注。悬停查看详情。",
+	"summary.title.other": "{count} 条批注",
+	"summary.removeAll": "移除全部划词批注",
+	"chip.annotation": "批注 {index}"
 };
-let cached = null;
-function matchLocale(tag) {
-	const lower = tag.toLowerCase();
-	for (const locale of LOCALES) if (lower === locale || lower.startsWith(`${locale}-`) || lower.startsWith(`${locale}_`)) return locale;
-	return null;
-}
-function localStore() {
-	return globalThis.localStorage;
-}
-function readOverride() {
-	try {
-		const raw = localStore()?.getItem(STORAGE_KEY);
-		return raw ? matchLocale(raw) : null;
-	} catch {
-		return null;
-	}
-}
-function detectLocale() {
-	const override = readOverride();
-	if (override) return override;
-	const nav = globalThis.navigator;
-	const tags = nav ? [...nav.languages ?? [], nav.language].filter(Boolean) : [];
-	for (const tag of tags) {
-		const hit = matchLocale(tag);
-		if (hit) return hit;
-	}
-	return "en";
+const en = {
+	"common.selectedText": "Selected text",
+	"common.commentPlaceholder": "Add an optional comment…",
+	"common.cancel": "Cancel",
+	"common.save": "Save",
+	"toolbar.aria": "Selection actions",
+	"toolbar.commentHint": "Add annotation…",
+	"toolbar.copy": "Copy",
+	"toolbar.copyFailed": "Copy failed",
+	"toolbar.addToTask": "Add to task",
+	"toolbar.commentDialogAria": "Add an optional comment",
+	"toolbar.skipComment": "Skip comment",
+	"toolbar.addComment": "Add comment",
+	"card.commentSubtitle": "Comment · {comment}",
+	"card.ariaIndexed": "Annotation {index}",
+	"card.ariaPlain": "Selection annotation",
+	"card.editComment": "Edit comment",
+	"card.remove": "Remove annotation",
+	"summary.hint": "Hover to view annotations",
+	"summary.dialogAria": "Annotation details: {count}",
+	"summary.edit": "Edit annotation {index}",
+	"summary.remove": "Remove annotation {index}",
+	"summary.userComment": "User comment",
+	"summary.noComment": "No comment added",
+	"summary.aria.one": "{count} annotation. Hover to view details.",
+	"summary.aria.other": "{count} annotations. Hover to view details.",
+	"summary.title.one": "{count} annotation",
+	"summary.title.other": "{count} annotations",
+	"summary.removeAll": "Remove all annotations",
+	"chip.annotation": "Annotation {index}"
+};
+/**
+* Russian is not a shipped host locale: it is added through
+* `ctx.locale.addLanguage()` and its dictionary through the three-argument
+* `register()`. Its fallback chain ends at `en`, as the host requires.
+*/
+const ru = {
+	"common.selectedText": "Выделенный текст",
+	"common.commentPlaceholder": "Добавить необязательный комментарий…",
+	"common.cancel": "Отмена",
+	"common.save": "Сохранить",
+	"toolbar.aria": "Действия с выделенным текстом",
+	"toolbar.commentHint": "Добавить аннотацию…",
+	"toolbar.copy": "Копировать",
+	"toolbar.copyFailed": "Не удалось скопировать",
+	"toolbar.addToTask": "Добавить к задаче",
+	"toolbar.commentDialogAria": "Добавить необязательный комментарий",
+	"toolbar.skipComment": "Без комментария",
+	"toolbar.addComment": "Добавить комментарий",
+	"card.commentSubtitle": "Комментарий · {comment}",
+	"card.ariaIndexed": "Аннотация {index}",
+	"card.ariaPlain": "Аннотация к выделенному тексту",
+	"card.editComment": "Изменить комментарий",
+	"card.remove": "Удалить аннотацию",
+	"summary.hint": "Наведите, чтобы увидеть аннотации",
+	"summary.dialogAria": "Детали аннотаций: {count}",
+	"summary.edit": "Изменить аннотацию {index}",
+	"summary.remove": "Удалить аннотацию {index}",
+	"summary.userComment": "Комментарий пользователя",
+	"summary.noComment": "Комментарий не добавлен",
+	"summary.aria.one": "{count} аннотация. Наведите, чтобы увидеть детали.",
+	"summary.aria.few": "{count} аннотации. Наведите, чтобы увидеть детали.",
+	"summary.aria.many": "{count} аннотаций. Наведите, чтобы увидеть детали.",
+	"summary.aria.other": "{count} аннотаций. Наведите, чтобы увидеть детали.",
+	"summary.title.one": "{count} аннотация",
+	"summary.title.few": "{count} аннотации",
+	"summary.title.many": "{count} аннотаций",
+	"summary.title.other": "{count} аннотаций",
+	"summary.removeAll": "Удалить все аннотации",
+	"chip.annotation": "Аннотация {index}"
+};
+/** Both shipped host locales, required together by the typed `register()`. */
+const SHIPPED_DICTS = Object.freeze({
+	zh,
+	en
+});
+/** Dictionary for the language registered through {@link LANGUAGE_RU}. */
+const DICTIONARIES = Object.freeze({
+	zh,
+	en,
+	ru
+});
+const LANGUAGE_RU = Object.freeze({
+	id: "ru",
+	label: "Русский",
+	fallback: "en"
+});
+let api;
+/**
+* Install the host-bound translation entry point. Called once from `apply()`
+* with `ctx.locale.bind(LOCALE_NS)` and the live snapshot accessors.
+*/
+function bindLocale(next) {
+	api = next;
 }
-/** Active locale (resolved once, then cached). */
-function getLocale() {
-	cached ??= detectLocale();
-	return cached;
+/** Active language id, or `en` before the host service is bound. */
+function activeLocale() {
+	return api?.getActive() ?? "en";
 }
-function pluralize(forms, locale, count) {
+function pluralForm(count) {
+	const locale = activeLocale();
 	if (locale === "ru") {
 		const mod10 = count % 10;
 		const mod100 = count % 100;
-		if (mod10 === 1 && mod100 !== 11) return forms.one ?? forms.other ?? "";
-		if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return forms.few ?? forms.other ?? "";
-		return forms.many ?? forms.other ?? "";
+		if (mod10 === 1 && mod100 !== 11) return "one";
+		if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return "few";
+		return "many";
 	}
-	if (locale === "en") return (count === 1 ? forms.one : void 0) ?? forms.other ?? "";
-	return forms.other ?? forms.many ?? "";
-}
-function interpolate(template, params) {
-	return template.replace(/\{(\w+)\}/g, (whole, name) => name in params ? String(params[name]) : whole);
+	if (locale === "en") return count === 1 ? "one" : "other";
+	return "other";
 }
 /**
-* Translate a key for the active locale.
-* `{name}` placeholders are filled from `params`; a numeric `count` also
-* selects the right plural form when the message is a `PluralForms` object.
+* Translate a `select-quote` key. A numeric `count` selects a plural form and
+* the matching `key.form` entry is used, falling back to `key.other`.
 */
 function t(key, params = {}) {
-	const locale = getLocale();
-	const value = MESSAGES[locale][key] ?? MESSAGES.zh[key] ?? key;
-	return interpolate(typeof value === "string" ? value : pluralize(value, locale, typeof params.count === "number" ? params.count : 0), params);
+	if (!api) return key;
+	if (typeof params.count === "number") {
+		const form = pluralForm(params.count);
+		const exact = api.translate(`${key}.${form}`, params);
+		if (exact !== `${key}.${form}`) return exact;
+		const other = api.translate(`${key}.other`, params);
+		if (other !== `${key}.other`) return other;
+	}
+	return api.translate(key, params);
+}
+/**
+* Subscribe to language or dictionary changes. Components go through
+* `useLocale()` instead; this is the non-React entry point (DOM decorations).
+* Subscribing before the host service is bound is a no-op, so callers subscribe
+* from `apply()`, after `bindLocale()`.
+*/
+function subscribeLocale(listener) {
+	return api ? api.subscribe(listener) : () => {};
+}
+/** Monotonic host revision counter, bumped on locale and dictionary changes. */
+function localeRevision() {
+	return api?.getRevision() ?? 0;
+}
+//#endregion
+//#region src/client/useLocale.ts
+/**
+* Re-render the calling component when the host language changes, so slot copy
+* switches without a page reload. Subscriptions happen after mount, by which
+* time `apply()` has bound the locale service.
+*/
+function useLocale() {
+	(0, react.useSyncExternalStore)(subscribeLocale, localeRevision, localeRevision);
 }
 //#endregion
 //#region src/client/ui/AnnotationCardView.tsx
 function AnnotationCardView({ title, text, comment, variant, index, onRemove, onEditComment }) {
+	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", {
-		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"
@@ -1963,14 +1926,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: "×"
@@ -1993,7 +1956,8 @@ const SETTLE_DELAY = 600;
 * other cancels. Comment editing happens inline in the list — the panel stays
 * put and auto-close is suppressed while an edit is open.
 */
-function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemove, onItemEdit, hint = t("summary.hint") }) {
+function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemove, onItemEdit }) {
+	useLocale();
 	const rootRef = (0, react.useRef)(null);
 	const popRef = (0, react.useRef)(null);
 	const closeTimerRef = (0, react.useRef)(null);
@@ -2153,16 +2117,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)
 							}),
@@ -2171,16 +2135,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" })
@@ -2200,7 +2164,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),
@@ -2217,10 +2181,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", {
@@ -2235,7 +2199,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();
@@ -2262,7 +2226,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 }),
@@ -2274,23 +2238,23 @@ 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 })
 				}), (0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryHint,
-					children: hint
+					children: t("summary.hint")
 				})]
 			}),
 			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, {
@@ -2471,7 +2435,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) => ({
@@ -2586,6 +2550,7 @@ async function copyText(text) {
 /** Cap for the auto-growing comment box; beyond this it scrolls internally. */
 const COMMENT_MAX_HEIGHT = 220;
 function SelectionToolbar({ sessionId }) {
+	useLocale();
 	const toolbarRef = (0, react.useRef)(null);
 	const commentWrapRef = (0, react.useRef)(null);
 	const commentRef = (0, react.useRef)(null);
@@ -2760,7 +2725,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"),
@@ -2789,7 +2754,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",
@@ -2802,7 +2767,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",
@@ -2814,14 +2779,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),
@@ -2840,12 +2805,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")
@@ -2867,6 +2832,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;
@@ -2885,9 +2851,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);
@@ -2913,6 +2879,22 @@ function decorateAnnotationDirectives(root) {
 	}
 	for (const node of hits) decorateTextNode(node);
 }
+/**
+* Re-label chips that are already on screen after the language changed.
+*
+* Chip text is plain DOM, not React state, so a switch would otherwise leave
+* old-language chips next to new-language popovers. Writing `textContent` here
+* is safe for the observer: the new text node never contains the directive
+* literal, so `decorateTextNode()` returns before it can touch the DOM.
+*/
+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_KEY]);
+		if (Number.isFinite(index)) chip.textContent = t("chip.annotation", { index });
+	}
+}
 /** Observe chat DOM and decorate new directive text. Returns disposer. */
 function watchAnnotationDirectives(root) {
 	const el = root ?? (typeof document === "undefined" ? void 0 : document.body);
@@ -2970,7 +2952,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,
@@ -3007,7 +2989,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`
@@ -3027,12 +3010,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,
@@ -3040,11 +3023,11 @@ 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
 			]
 		})
 	});
@@ -3064,10 +3047,30 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 * kind is classified as a turn-process member and `hidden` when the completed
 * turn's process disclosure is folded — mounted, but invisible. `user` is on
 * that allowlist, so the bubble is the only placement that is reliably visible.
+*
+* Language is the host's decision, never this plugin's: dictionaries go to
+* `ctx.locale`, and `t()` resolves against whatever language the user picked in
+* Settings. Self-detecting from `navigator` would disagree with the host on the
+* desktop shell, where Electron pins the document language (`--lang`) to its own
+* value while the host preference comes through `__DSH_LOCALE__`.
 */
-const inject = ["slots", "sessions"];
+const inject = [
+	"slots",
+	"sessions",
+	"locale"
+];
 function apply(ctx) {
 	ensureToolbarStyles();
+	ctx.effect(() => ctx.locale.addLanguage(LANGUAGE_RU), "dsh-select-quote: ru language");
+	ctx.effect(() => ctx.locale.register(LOCALE_NS, SHIPPED_DICTS), "dsh-select-quote: dictionaries (zh, en)");
+	ctx.effect(() => ctx.locale.register(LOCALE_NS, LANGUAGE_RU.id, DICTIONARIES.ru), "dsh-select-quote: dictionary (ru)");
+	bindLocale({
+		translate: ctx.locale.bind(LOCALE_NS),
+		getActive: () => ctx.locale.getLocale().active,
+		getRevision: () => ctx.locale.getSnapshot().revision,
+		subscribe: (listener) => ctx.locale.subscribe(listener)
+	});
+	ctx.effect(() => subscribeLocale(() => refreshDirectiveChips()), "dsh-select-quote: chip language");
 	ctx.effect(() => watchAnnotationDirectives(), "dsh-select-quote: annotation directives");
 	ctx.effect(() => watchAnnotationMarks(), "dsh-select-quote: annotation marks");
 	ctx.effect(() => {