@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/locale-provider/messages.ts

@@ -32,6 +32,7 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // ── Generic (shared across packages — reuse these before minting a new key) ──
   close: "Close",
   copy: "Copy",
+  clear: "Clear",
   previous: "Previous",
   next: "Next",
   previousSlide: "Previous slide",
@@ -139,6 +140,8 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ui.schemaForm.testAction.success": "Connected",
   "ui.schemaForm.testAction.failure": "Test failed",
   // Pagination's ellipsis (sr-only — the visible glyph is decorative).
+  "ui.breadcrumb.label": "breadcrumb",
+  "ui.pagination.label": "pagination",
   "ui.pagination.morePages": "More pages",
   // Pagination's prev/next links — the ACCESSIBLE NAME (`aria-label`), distinct
   // from the visible `previous`/`next` text below it: an `aria-label` overrides
@@ -161,6 +164,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ui.tree.failedToLoad": "Failed to load",
   // ThemeSwitcher's "follow the OS" option, in both dropdown and toggle modes.
   "ui.themeSwitcher.system": "System",
+  // Group labels + scheme names in the family layout (ADR 0036).
+  "ui.themeSwitcher.theme": "Theme",
+  "ui.themeSwitcher.mode": "Mode",
+  "ui.themeSwitcher.light": "Light",
+  "ui.themeSwitcher.dark": "Dark",
   "ui.navNotifications.label": "Notifications",
   "ui.teamSwitcher.label": "Teams",
   "ui.teamSwitcher.addTeam": "Add team",
@@ -173,11 +181,99 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // `viewer.content` vs this), so a translator can phrase either
   // independently and neither package depends on a string owned by another.
   "ui.table.scrollRegion": "Table contents, scrollable",
+  // NumberInput's step buttons (#4 i18n sweep).
+  "ui.numberInput.decrease": "Decrease",
+  "ui.numberInput.increase": "Increase",
+  // Combobox/VirtualSelect/TreeSelect each keep their own placeholder pair
+  // (English text coincides, but a translator may phrase a search box
+  // differently per surface — same rationale as `ui.table.scrollRegion`).
+  "ui.combobox.placeholder": "Select…",
+  "ui.combobox.searchPlaceholder": "Search…",
+  "ui.virtualSelect.placeholder": "Select…",
+  "ui.virtualSelect.searchPlaceholder": "Search…",
+  "ui.treeSelect.placeholder": "Select…",
+  "ui.treeSelect.moreSelected": "and {count} more selected",
+  "ui.fileUpload.selectedFiles": "Selected files",
+  "ui.fileUpload.dragDropHere": "Drag & drop files here",
+  "ui.fileUpload.browseFiles": "Browse files",
+  // Sidebar's mobile Sheet description (sr-only) and the collapse/expand
+  // trigger's shared name (SidebarTrigger's sr-only text + SidebarRail's
+  // aria-label/title).
+  "ui.sidebar.mobileDescription": "Displays the mobile sidebar.",
+  "ui.sidebar.toggle": "Toggle Sidebar",
+  "ui.revisionTimeline.label": "Revisions",
+  "ui.tree.retry": "Retry",
+  "ui.tree.retryLoadingChildren": "Retry loading children",
+  // Spinner's bare default label — kept WITHOUT an ellipsis (unlike the
+  // generic `loading` key) to stay byte-identical to its pre-i18n default.
+  "ui.spinner.label": "Loading",
+  "ui.statePanel.errorTitle": "Something went wrong",
+  "ui.statePanel.errorDescription": "An unexpected error occurred. Please try again.",
+  "ui.statePanel.errorEyebrow": "Error",
+  "ui.carousel.label": "Carousel",
+  // Transfer (#4 i18n sweep). `panelFallback`/`itemsFallback` back the two
+  // spots where the panel title isn't a plain string (a ReactNode) and the
+  // sr-only text falls back to a generic word instead.
+  "ui.transfer.selectAllIn": "Select all in {title}",
+  "ui.transfer.panelFallback": "panel",
+  "ui.transfer.searchIn": "Search {title}",
+  "ui.transfer.itemsFallback": "items",
+  "ui.transfer.searchPlaceholder": "Search…",
+  "ui.transfer.empty": "No items",
+  "ui.transfer.defaultSourceTitle": "Source",
+  "ui.transfer.defaultTargetTitle": "Target",
+  "ui.transfer.movedToTarget": {
+    one: "{count} item moved to the target list.",
+    other: "{count} items moved to the target list.",
+  },
+  "ui.transfer.movedToSource": {
+    one: "{count} item moved to the source list.",
+    other: "{count} items moved to the source list.",
+  },
+  "ui.transfer.moveControls": "Move controls",
+  "ui.transfer.moveSelectedRight": "Move selected right",
+  "ui.transfer.moveAllRight": "Move all right",
+  "ui.transfer.moveSelectedLeft": "Move selected left",
+  "ui.transfer.moveAllLeft": "Move all left",
+  // ChangeReview (#4 i18n sweep).
+  "ui.changeReview.heading": "Review changes",
+  "ui.changeReview.approvedCount": "{approved} of {total} approved",
+  "ui.changeReview.rejectAll": "Reject all",
+  "ui.changeReview.rejectAllLabel": "Reject all changes",
+  "ui.changeReview.approveAll": "Approve all",
+  "ui.changeReview.approveAllLabel": "Approve all changes",
+  "ui.changeReview.provenanceLabel": "Change provenance",
+  "ui.changeReview.emptyTitle": "No changes to review",
+  "ui.changeReview.emptyDescription":
+    "When an agent proposes edits, they'll appear here for your approval.",
+  "ui.changeReview.statusAdded": "added",
+  "ui.changeReview.statusRemoved": "removed",
+  "ui.changeReview.statusModified": "modified",
+  "ui.changeReview.phaseBefore": "Before",
+  "ui.changeReview.phaseAfter": "After",
+  "ui.changeReview.checkPassed": "Passed",
+  "ui.changeReview.checkFailed": "Failed",
+  "ui.changeReview.showDetail": "Show detail",
+  "ui.changeReview.hideDetail": "Hide detail",
+  "ui.changeReview.rejectHunk": "Reject hunk: {title}",
+  "ui.changeReview.approveHunk": "Approve hunk: {title}",
+  "ui.changeReview.changeType": "Change type: {status}",
+  "ui.changeReview.beforePrefix": "Before: ",
+  "ui.changeReview.afterPrefix": "After: ",
+  "ui.changeReview.approvedBadge": "Approved",
+  "ui.navNotifications.trigger": "Open notifications",
+  "ui.colorPicker.pickColor": "Pick color",
+  "ui.colorPicker.none": "None",
+  "ui.colorPicker.swatches": "Color swatches",
+  "ui.colorPicker.customHexLabel": "Custom hex",
+  "ui.colorPicker.notThemeAware": "(not theme-aware)",
+  "ui.colorPicker.customHex": "Custom hex color",
 
   // ── @elabs-ai/components-data ─────────────────────────────────────────────────────────────
   // The scroll region's accessible name is rendered ONLY when the table actually
   // overflows its container, so it is never announced for a table that fits.
   "data.table.scrollRegion": "Table contents, scrollable",
+  "data.table.loading": "Loading table data…",
   // Fallback name for a row's activation control when the row's first cell holds
   // no primitive value to name it after (see `rowActionLabel`).
   "data.table.rowAction": "Activate row",
@@ -232,6 +328,10 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "data.table.reorderRoleDescription": "sortable",
   "data.facetFilter.clearFilters": "Clear filters",
   "data.columnPicker.toggleColumns": "Toggle columns",
+  "data.columnPicker.label": "Columns",
+  "data.searchInput.label": "Search",
+  "data.searchInput.placeholder": "Search…",
+  "data.searchInput.clear": "Clear search",
 
   // ── @elabs-ai/components-charts ───────────────────────────────────────────────────────────
   // Shared caption for any bare chart surface's layout-shaped skeleton
@@ -254,6 +354,43 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // drift apart in translation.
   "charts.chartFrame.exportSvg": "Export as SVG",
   "charts.chartFrame.exportPng": "Export as PNG",
+  "charts.chartFrame.flipToTable": "Flip to table view",
+  "charts.chartFrame.showChart": "Show chart",
+  "charts.chartFrame.showAsTable": "Show as table",
+  "charts.chartFrame.downloadCsv": "Download CSV",
+  "charts.chartFrame.expandChart": "Expand chart",
+  "charts.chartFrame.expand": "Expand",
+  "charts.chartFrame.summary": "Summary",
+  "charts.chartFrame.noDataToSummarize": "No data to summarize.",
+  "charts.chartFrame.defaultTitle": "Chart",
+  "charts.chartFrame.summaryDetailLabel": "Chart summary",
+  "charts.legend.label": "Chart legend",
+  "charts.gantt.timeline": "Timeline",
+  "charts.gantt.dragToResizeColumn": "Drag to resize column",
+  "charts.gantt.viewControls": "Gantt view controls",
+  "charts.gantt.viewMode": "View mode",
+  "charts.gantt.viewModeLabel": "View mode:",
+  "charts.gantt.taskList": "Task list",
+  "charts.gantt.taskListLabel": "Tasks",
+  "charts.gantt.noTasksToDisplay": "No tasks to display",
+  "charts.gantt.unitDay": "Day",
+  "charts.gantt.unitWeek": "Week",
+  "charts.gantt.unitMonth": "Month",
+  "charts.gantt.unitQuarter": "Quarter",
+  "charts.gantt.unitHour": "Hour",
+  "charts.gantt.unitMinute": "Minute",
+  "charts.gantt.unitSecond": "Second",
+  "charts.gantt.unitMillisecond": "Millisecond",
+
+  // ── @elabs-ai/components-maps ─────────────────────────────────────────────────────────────
+  "maps.popup.close": "Close popup",
+  "maps.canvas.unavailableTitle": "Map unavailable",
+  "maps.canvas.unavailableDescription": "This browser can’t render WebGL maps.",
+
+  // ── @elabs-ai/components-flow ─────────────────────────────────────────────────────────────
+  "flow.inspectorPanel.close": "Close inspector",
+  "flow.inspectorPanel.title": "Inspector",
+  "flow.inspectorPanel.emptyMessage": "Select a node to see its details.",
 
   // ── @elabs-ai/components-ai ───────────────────────────────────────────────────────────────
   // Namespaced `ai.<area>.<key>` so package microcopy can't collide with the
@@ -271,6 +408,7 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.promptInput.stop": "Stop",
   "ai.agent.instructions": "Instructions",
   "ai.agent.tools": "Tools",
+  "ai.agent.outputSchema": "Output Schema",
   "ai.codeBlock.generating": "Generating…",
   "ai.composer.placeholder": "Ask me anything…",
   "ai.tokenUsage.usage": "Model context usage",
@@ -284,6 +422,7 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // The mobile Sheet's sr-only title (#18) — distinct from `contextPanel.toggle`,
   // which labels the button that opens/closes it.
   "ai.contextPanel.title": "Context panel",
+  "ai.contextPanel.description": "Displays the chat context panel.",
   "ai.environmentVariables.toggleVisibility": "Toggle value visibility",
   "ai.gallery.label": "Image gallery",
   "ai.gallery.expandImage": "Expand image",
@@ -293,8 +432,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // Shared by Tool's technical view and SchemaDisplay's request panel.
   "ai.schemaDisplay.parameters": "Parameters",
   "ai.schemaDisplay.response": "Response",
+  "ai.schemaDisplay.requestBody": "Request Body",
   // ReasoningTrigger's default not-yet-timed message (before `duration` is known).
   "ai.reasoning.thoughtDefault": "Thought for a few seconds",
+  "ai.reasoning.thinking": "Thinking…",
+  "ai.reasoning.thoughtForDuration": "Thought for {duration} seconds",
   "ai.stackTrace.empty": "No stack frames",
   "ai.webPreview.noConsoleOutput": "No console output",
   // PlanTrigger's icon-only collapse/expand control (sr-only).
@@ -439,6 +581,185 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.streamdown.copyLink": "Copy link",
   "ai.streamdown.copied": "Copied",
   "ai.streamdown.openLink": "Open link",
+  // Tool (#4 i18n sweep).
+  "ai.tool.showTechnicalDetails": "Show technical details",
+  "ai.tool.error": "Error",
+  "ai.tool.result": "Result",
+  // AssetPreview.
+  "ai.assetPreview.rowCount": { one: "{count} row", other: "{count} rows" },
+  "ai.assetPreview.noPreview": "No preview available…",
+  "ai.assetPreview.preview": "Preview",
+  "ai.assetPreview.raw": "Raw",
+  // WebPreview's sandboxed iframe accessible name.
+  "ai.webPreview.previewTitle": "Preview",
+  // FileTree's expand/collapse chevron control.
+  "ai.fileTree.expandFolder": "Expand {name}",
+  "ai.fileTree.collapseFolder": "Collapse {name}",
+  "ai.fileTree.noAssetsProduced": "No assets produced yet.",
+  "ai.conversation.download": "Download conversation",
+  // OpenInChat. `provider` is a brand name (ChatGPT, Claude, …) — kept
+  // untranslated data, interpolated into the translated "Open in …" phrase.
+  "ai.openInChat.trigger": "Open in chat",
+  "ai.openInChat.openInProvider": "Open in {provider}",
+  // TestResults.
+  "ai.testResults.passedCount": { one: "{count} passed", other: "{count} passed" },
+  "ai.testResults.failedCount": { one: "{count} failed", other: "{count} failed" },
+  "ai.testResults.skippedCount": { one: "{count} skipped", other: "{count} skipped" },
+  "ai.testResults.testsPassed": "{passed}/{total} tests passed",
+
+  // ── @elabs-ai/components-editor ───────────────────────────────────────────
+  // DecisionCard (ai-objects). Status vocabulary + the card's own accessible name
+  // and the "Alternatives considered" section (shared by its heading and its list's
+  // aria-label).
+  "editor.decisionCard.statusAccepted": "Accepted",
+  "editor.decisionCard.statusRejected": "Rejected",
+  "editor.decisionCard.statusProposed": "Proposed",
+  "editor.decisionCard.statusSuperseded": "Superseded",
+  "editor.decisionCard.label": "Decision: {label}",
+  "editor.decisionCard.alternativesConsidered": "Alternatives considered",
+  // KnowledgeCard (ai-objects).
+  "editor.knowledgeCard.label": "Knowledge fact",
+  "editor.knowledgeCard.heading": "Knowledge",
+  "editor.knowledgeCard.sources": "Sources",
+  "editor.knowledgeCard.source": "Source: {name}",
+  "editor.knowledgeCard.sourceUnresolved": "Source (unresolved): {name}",
+  // CalcBlock. `equals` is the sr-only prefix read before a computed value —
+  // intentionally ends in a space so it reads as a prefix (mirrors `ai.diffView.addedLine`).
+  "editor.calcBlock.error": "Error: {message}",
+  "editor.calcBlock.equals": "equals ",
+  "editor.calcBlock.total": "Total",
+  "editor.calcBlock.emptyBlock": "Empty calc block.",
+  // CopyButton. The "Copy" state reuses the shared generic `copy` key.
+  "editor.copyButton.copied": "Copied",
+  // EditorToolbar.
+  "editor.editorToolbar.language": "Language",
+  // Citations (markdown-academic).
+  "editor.citations.citationLabel": "Citation: {name}",
+  "editor.citations.unresolvedCitation": "Unresolved citation",
+  "editor.citations.unresolvedKey": "Unresolved: @{key}",
+  "editor.citations.references": "References",
+  // Math (markdown-academic).
+  "editor.math.renderError": "Could not render math",
+  "editor.math.renderErrorLabel": "Math (could not render): {tex}",
+  // CompletionMenu (markdown-editor).
+  "editor.completions.suggestions": "Suggestions",
+  "editor.completions.noSuggestions": "No suggestions",
+  // SlashMenu (markdown-editor).
+  "editor.slashMenu.insertBlock": "Insert block",
+  "editor.slashMenu.noMatchingBlocks": "No matching blocks",
+  // TableControlsView (markdown-editor/table-view — the WYSIWYG GFM table toolbar).
+  "editor.tableView.tableControls": "Table controls",
+  "editor.tableView.row": "Row",
+  "editor.tableView.col": "Col",
+  "editor.tableView.addRowAbove": "Add row above",
+  "editor.tableView.addRowBelow": "Add row below",
+  "editor.tableView.deleteRow": "Delete row",
+  "editor.tableView.addColumnLeft": "Add column left",
+  "editor.tableView.addColumnRight": "Add column right",
+  "editor.tableView.deleteColumn": "Delete column",
+  // Directive node-views (markdown-editor/directive-views — Milkdown WYSIWYG).
+  "editor.directiveViews.cardTitle": "Card title",
+  "editor.directiveViews.calloutTitle": "Callout title",
+  "editor.directiveViews.unknownBlock": "Unknown block: {name}",
+  "editor.directiveViews.unknownInlineBlock": "Unknown inline block:",
+  "editor.directiveViews.metricLabel": "Metric label",
+  "editor.directiveViews.metricLabelPlaceholder": "Label",
+  "editor.directiveViews.metricValue": "Metric value",
+  "editor.directiveViews.metricValuePlaceholder": "0",
+  "editor.directiveViews.editIteration": "Edit iteration…",
+  "editor.directiveViews.changeLayout": "Change layout",
+  "editor.directiveViews.transpose": "Transpose",
+  "editor.directiveViews.convertToStatic": "Convert to static",
+  "editor.directiveViews.needsEmbeddedValues": "— needs embedded values",
+  "editor.directiveViews.pivot": "Pivot",
+  "editor.directiveViews.iterate": "Iterate",
+  "editor.directiveViews.perItem": "· per {as}",
+  "editor.directiveViews.templateSuffix": "— template",
+  "editor.directiveViews.iterationActions": "Iteration actions",
+  "editor.directiveViews.iterationActionsTitle": "Iteration actions…",
+  // IterationBuilderDialog (markdown-iteration) — the guided iterate/pivot authoring modal.
+  "editor.iterationBuilder.pivotNoun": "pivot",
+  "editor.iterationBuilder.iterationNoun": "iteration",
+  "editor.iterationBuilder.editTitle": "Edit {noun}",
+  "editor.iterationBuilder.insertTitle": "Insert {noun}",
+  "editor.iterationBuilder.pivotDescription":
+    "Pick the row and column values, then write the per-cell template. The matrix below fills in live.",
+  "editor.iterationBuilder.iterationDescription":
+    "Add the list values, then write the per-row template. The result below fills in live.",
+  "editor.iterationBuilder.bindName": "Bind name",
+  "editor.iterationBuilder.bindNamePlaceholder": "item",
+  "editor.iterationBuilder.bindNameHintPrefix": "Use ",
+  "editor.iterationBuilder.bindNameHintSuffix": " in the template.",
+  "editor.iterationBuilder.rowValues": "Row values",
+  "editor.iterationBuilder.values": "Values",
+  "editor.iterationBuilder.valuePlaceholder": "Type a value, press Enter…",
+  "editor.iterationBuilder.columnValues": "Column values",
+  "editor.iterationBuilder.layout": "Layout",
+  "editor.iterationBuilder.perCellTemplate": "Per-cell template",
+  "editor.iterationBuilder.perRowTemplate": "Per-row template",
+  "editor.iterationBuilder.livePreview": "Live preview",
+  "editor.iterationBuilder.cancel": "Cancel",
+  "editor.iterationBuilder.save": "Save",
+  "editor.iterationBuilder.insert": "Insert",
+  // IterationTemplateDialog (markdown-iteration) — the lighter template-only modal.
+  "editor.templateDialog.editPivotTitle": "Edit pivot template",
+  "editor.templateDialog.editIterationTitle": "Edit iteration template",
+  "editor.templateDialog.descriptionPrefix": "The per-{unit} template. Use ",
+  "editor.templateDialog.descriptionMiddle": " placeholders (e.g. ",
+  "editor.templateDialog.descriptionSuffix":
+    ") — each is filled per {unit} when the block renders.",
+  "editor.templateDialog.editorLabel": "Iteration template editor",
+  "editor.templateDialog.cancel": "Cancel",
+  "editor.templateDialog.saveTemplate": "Save template",
+  // DocumentOutline (markdown-outline).
+  "editor.documentOutline.label": "Document outline",
+  "editor.documentOutline.empty": "No headings yet.",
+  // MarkdownToolbar (the source-pane formatting bar). Directive snippet labels
+  // are the Insert menu's fallback item text (`DIRECTIVE_SNIPPETS`); the snippet
+  // MARKDOWN they insert is example document content, not UI chrome, and stays
+  // English (see the `i18n-exempt` comments at each snippet).
+  "editor.markdownToolbar.label": "Markdown formatting",
+  "editor.markdownToolbar.bold": "Bold",
+  "editor.markdownToolbar.italic": "Italic",
+  "editor.markdownToolbar.inlineCode": "Inline code",
+  "editor.markdownToolbar.link": "Link",
+  "editor.markdownToolbar.headingLevel": "Heading level",
+  "editor.markdownToolbar.heading": "Heading",
+  "editor.markdownToolbar.headingLevelItem": "Heading {level}",
+  "editor.markdownToolbar.quote": "Quote",
+  "editor.markdownToolbar.bulletList": "Bullet list",
+  "editor.markdownToolbar.numberedList": "Numbered list",
+  "editor.markdownToolbar.divider": "Divider",
+  "editor.markdownToolbar.insertBlock": "Insert block",
+  "editor.markdownToolbar.insert": "Insert",
+  "editor.markdownToolbar.insertBrandBlock": "Insert brand block",
+  "editor.markdownToolbar.directiveCard": "Card",
+  "editor.markdownToolbar.directiveCallout": "Callout",
+  "editor.markdownToolbar.directiveMetric": "Metric",
+  "editor.markdownToolbar.directiveTimeline": "Timeline",
+  // MarkdownWorkspace's focus-writing toggle.
+  "editor.markdownWorkspace.focusWriting": "Focus writing",
+  "editor.markdownWorkspace.focus": "Focus",
+  "editor.markdownWorkspace.focusWritingHint": "Typewriter scrolling · inactive paragraphs dim",
+  // MermaidDiagram (the inline renderer).
+  "editor.mermaidDiagram.label": "Diagram",
+  "editor.mermaidDiagram.expand": "Expand diagram",
+  "editor.mermaidDiagram.downloadSvg": "Download diagram as SVG",
+  "editor.mermaidDiagram.copySource": "Copy diagram source",
+  "editor.mermaidDiagram.renderFailed": "Diagram failed to render",
+  "editor.mermaidDiagram.rendering": "Rendering diagram…",
+  // MermaidViewer (the expanded zoom/pan/search surface). `nodeCountHint` mirrors
+  // the ORIGINAL (pre-i18n) copy exactly, including its always-plural "nodes" —
+  // it is a static hint ("N nodes · type to filter"), not a real plural form, so
+  // it stays a plain interpolated string rather than a `PluralMessage`.
+  "editor.mermaidViewer.findPlaceholder": "Find in diagram…",
+  "editor.mermaidViewer.findLabel": "Find in diagram",
+  "editor.mermaidViewer.matchCount": { one: "{count} node", other: "{count} nodes" },
+  "editor.mermaidViewer.nodeCountHint": "{count} nodes · type to filter",
+  "editor.mermaidViewer.zoomOut": "Zoom out",
+  "editor.mermaidViewer.zoomIn": "Zoom in",
+  "editor.mermaidViewer.resetZoom": "Reset zoom to 100%",
+  "editor.mermaidViewer.fitDiagram": "Fit diagram",
 
   // ── @elabs-ai/components-viewer (ADR 0024) ─────────────────────────
   // FileViewer chrome. Every control here is icon-only, so these ARE the

package/src/components/mention-input/mention-input.stories.tsx

@@ -77,7 +77,7 @@ function Field({
 }) {
   const id = useId();
   return (
-    <div className="w-[28rem] space-y-2">
+    <div className="w-full max-w-[28rem] space-y-2">
       <Label htmlFor={id}>{label}</Label>
       <MentionInput options={options} {...props}>
         <MentionInputTextarea id={id} placeholder="Type @ to mention someone…" />
@@ -193,7 +193,7 @@ export const SerializedOutput: Story = {
     const payload = useMemo(() => serializeMentions(value), [value]);
 
     return (
-      <div className="w-[28rem] space-y-4">
+      <div className="w-full max-w-[28rem] space-y-4">
         <div className="space-y-2">
           <Label htmlFor={id}>Comment</Label>
           <MentionInput options={ROSTER} value={value} onValueChange={setValue}>
@@ -235,7 +235,7 @@ export const AsyncRoster: Story = {
     const [options, setOptions] = useState<MentionOption[]>([]);
 
     return (
-      <div className="w-[28rem] space-y-2">
+      <div className="w-full max-w-[28rem] space-y-2">
         <Label htmlFor={id}>Assign reviewers</Label>
         <MentionInput
           options={options}

package/src/components/mention-input/mention-input.test.tsx

@@ -1,6 +1,6 @@
 import { createRef, useState } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {
   MentionInput,
@@ -615,3 +615,53 @@ describe("onQueryChange", () => {
     expect(onQueryChange).toHaveBeenLastCalledWith(null);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Mirror re-measure — scoped MutationObserver (perf review §3.3)
+// ---------------------------------------------------------------------------
+
+describe("mirror re-measure observer scope", () => {
+  /**
+   * Regression lock for the fix: the observer that used to watch `<html>`
+   * AND `<body>` for `class`/`style`/`data-theme`/`data-density`/
+   * `data-decoration` now watches only the field's closest `[data-theme]`
+   * ancestor (`<html>` here, since jsdom's default document carries none),
+   * filtered to `data-theme`/`data-density`/`data-decoration` — so a
+   * `style` mutation on `<body>` (what Radix's scroll-lock does on every
+   * `Sheet`/`Dialog`/`Popover` open, anywhere in the app) no longer causes a
+   * re-measure, while a real theme/density/decoration attribute flip still
+   * does.
+   */
+  it("ignores an unrelated body style mutation but reacts to a theme attribute flip", async () => {
+    render(<Harness />);
+    // Let the mount-time layout effects (which call getComputedStyle
+    // themselves) settle before counting.
+    await Promise.resolve();
+    const spy = vi.spyOn(window, "getComputedStyle");
+    spy.mockClear();
+
+    // Simulate Radix's scroll-lock: an inline style write on <body>, nothing
+    // to do with this field's own theme/density/decoration.
+    document.body.style.paddingRight = "17px";
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(spy).not.toHaveBeenCalled();
+    document.body.style.removeProperty("padding-right");
+
+    // A real theme attribute flip on the scope the observer actually
+    // watches (<html>, the field's closest `[data-theme]` ancestor — there
+    // is none here, so it falls back to the document root) DOES trigger a
+    // re-measure.
+    try {
+      await act(async () => {
+        document.documentElement.setAttribute("data-theme", "dark");
+        await vi.waitFor(() => {
+          expect(spy).toHaveBeenCalled();
+        });
+      });
+    } finally {
+      document.documentElement.removeAttribute("data-theme");
+      spy.mockRestore();
+    }
+  });
+});

package/src/components/mention-input/mention-input.tsx

@@ -154,6 +154,45 @@ const MIRRORED_PROPERTIES = [
   "wordBreak",
 ] as const satisfies readonly (keyof CSSStyleDeclaration & string)[];
 
+/**
+ * Extra keys `readMirrorStyle` writes onto the mirror style object BESIDES
+ * `MIRRORED_PROPERTIES` (some of which — `paddingRight`, `whiteSpace` — it
+ * overrides rather than adds). Used by `stylesEqual` below so the "did
+ * anything actually change" check compares every key the object can carry,
+ * without re-deriving that list from an object literal on every call.
+ */
+const EXTRA_MIRROR_KEYS = [
+  "position",
+  "left",
+  "top",
+  "width",
+  "height",
+  "borderStyle",
+  "borderColor",
+  "overflow",
+  "margin",
+] as const;
+
+/**
+ * Field-by-field comparison of two mirror style snapshots (perf review §3.3:
+ * "two JSON.stringify per callback"). Both objects always carry the exact
+ * same key set (`MIRRORED_PROPERTIES` + `EXTRA_MIRROR_KEYS`), so a plain
+ * per-key `!==` walk is both cheaper and exact — `JSON.stringify` also
+ * silently drops `undefined`-valued keys and is sensitive to key order in a
+ * way this object's construction never guarantees.
+ */
+function stylesEqual(a: CSSProperties, b: CSSProperties): boolean {
+  const record = a as Record<string, unknown>;
+  const other = b as Record<string, unknown>;
+  for (const key of MIRRORED_PROPERTIES) {
+    if (record[key] !== other[key]) return false;
+  }
+  for (const key of EXTRA_MIRROR_KEYS) {
+    if (record[key] !== other[key]) return false;
+  }
+  return true;
+}
+
 function readMirrorStyle(textarea: HTMLTextAreaElement): CSSProperties {
   const computed = getComputedStyle(textarea);
   const style: Record<string, string | number> = {};
@@ -540,9 +579,7 @@ export const MentionInput = forwardRef<HTMLDivElement, MentionInputProps>(functi
     const element = textareaRef.current;
     if (!element) return;
     const next = readMirrorStyle(element);
-    setMirrorStyle((previous) =>
-      previous && JSON.stringify(previous) === JSON.stringify(next) ? previous : next,
-    );
+    setMirrorStyle((previous) => (previous && stylesEqual(previous, next) ? previous : next));
   }, []);
 
   useLayoutEffect(() => {
@@ -571,14 +608,27 @@ export const MentionInput = forwardRef<HTMLDivElement, MentionInputProps>(functi
 
       // Theme / density / decoration switches re-resolve the INHERITED font and
       // type scale, and a stale snapshot misaligns every chip on the surface.
-      const rootObserver = new MutationObserver(remeasureMirror);
-      for (const node of [document.documentElement, document.body]) {
-        rootObserver.observe(node, {
+      //
+      // Scoped to the field's OWN nearest `[data-theme]` ancestor (falling
+      // back to `<html>` when the field isn't inside a scoped region), never
+      // the whole document — and filtered to only the three attributes a
+      // theme/density/decoration switch actually writes, never generic
+      // `class`/`style` on `<html>`/`<body>`. The broader, document-wide
+      // observer this replaced fired on every Radix `Sheet`/`Dialog`/`Popover`
+      // scroll-lock ANYWHERE in the app (it toggles inline `style` —
+      // `overflow`, `padding-right` — on `<body>` on every open/close), which
+      // has nothing to do with this field's own metrics (perf review §3.3).
+      const themeScope =
+        element.closest("[data-theme]") ??
+        (typeof document !== "undefined" ? document.documentElement : null);
+      if (themeScope) {
+        const themeObserver = new MutationObserver(remeasureMirror);
+        themeObserver.observe(themeScope, {
           attributes: true,
-          attributeFilter: ["data-theme", "data-density", "data-decoration", "class", "style"],
+          attributeFilter: ["data-theme", "data-density", "data-decoration"],
         });
+        teardown.push(() => themeObserver.disconnect());
       }
-      teardown.push(() => rootObserver.disconnect());
     }
 
     // A web font landing after first paint changes every advance width. This