@beyondwork/docx-react-component 1.0.369 → 1.0.370

package/dist/ui-tailwind.cjs

@@ -3169,7 +3169,97 @@ var DEFAULT_CHROME_STRINGS = {
   modeEditDisabledReason: "Editing is not available in this document.",
   typingOffNoticeTitle: "Typing is off in review",
   typingOffNoticeDetail: "Use Suggest change to propose an edit.",
-  typingOffNoticeSuggestingDetail: "Changes are made as suggestions."
+  typingOffNoticeSuggestingDetail: "Changes are made as suggestions.",
+  ribbonTabsLabel: "Ribbon tabs",
+  expandRibbonLabel: "Expand ribbon",
+  collapseRibbonLabel: "Collapse ribbon",
+  analyticsTabBodyLabel: "Analytics tab body",
+  analyticsUnavailable: "Analytics unavailable",
+  reviewTabBodyLabel: "Review tab body",
+  workflowTabBodyLabel: "Workflow tab body",
+  notAvailableCommandHandler: "Not available: command handler not supplied by the toolbar host.",
+  scopeBreakdownLabel: "Scope breakdown",
+  commandPaletteLabel: "Open command palette",
+  toggleAnalyticsLabel: "Toggle analytics",
+  customScopeLabel: "Custom scope",
+  customScopeNameLabel: "Custom scope name",
+  closeCustomScopeDialogLabel: "Close custom scope dialog",
+  addCommentLabel: "Add comment",
+  trackedChangesLabel: "Track Changes",
+  trackedChangesOnLabel: "Tracking on",
+  trackedChangesOffLabel: "Tracking off",
+  trackedChangesOnTitle: "Tracking on: new edits are recorded as redlines",
+  trackedChangesOffTitle: "Tracking off: new edits are applied directly",
+  showTrackedChangesSidebarLabel: "Show tracked changes in sidebar",
+  showCommentsSidebarLabel: "Show comments in sidebar",
+  trackedChangesPanelLabel: "Tracked changes panel",
+  commentsPanelLabel: "Comments panel",
+  compareLabel: "Compare",
+  compareDocumentLabel: "Compare document",
+  compareWithAnotherDocumentLabel: "Compare with another document",
+  chooseDocumentToCompareLabel: "Choose document to compare",
+  moreLabel: "More",
+  pagesLabel: "Pages",
+  charsLabel: "Chars",
+  exportLabel: "Export",
+  blockedLabel: "Blocked",
+  readyLabel: "Ready",
+  itemsLabel: "Items",
+  changesLabel: "Changes",
+  commentsLabel: "Comments",
+  opaqueLabel: "Opaque",
+  scopesLabel: "Scopes",
+  tasksLabel: "Tasks",
+  approvalsLabel: "Approvals",
+  analyticsLabel: "Analytics",
+  homeTabLabel: "Home",
+  insertTabLabel: "Insert",
+  layoutTabLabel: "Layout",
+  reviewTabLabel: "Review",
+  workflowTabLabel: "Workflow",
+  defaultDocumentTitle: "Document",
+  defaultWordmark: "COMPOSER",
+  resolveBlockersAction: "Resolve blockers",
+  reviewPendingChangesAction: "Review pending changes",
+  openCommentThreadAction: "Open comment thread",
+  documentReadyAction: "Document ready",
+  documentGroupLabel: "Document",
+  reviewGroupLabel: "Review",
+  riskGroupLabel: "Risk",
+  workflowGroupLabel: "Workflow",
+  scopesGroupLabel: "Scopes",
+  toolsGroupLabel: "Tools",
+  nextGroupLabel: "Next",
+  savedLabel: "Saved",
+  unsavedLabel: "Unsaved",
+  exportBlockedLabel: "Export blocked",
+  pageAnchoredStoriesNotShownLabel: "Page-anchored stories not shown",
+  trackChangesAuthoringLabel: "Track changes authoring",
+  zoomControlsLabel: "Zoom controls",
+  zoomOutLabel: "Zoom out",
+  zoomLevelLabel: "Zoom level",
+  zoomInLabel: "Zoom in",
+  workspaceViewLabel: "Workspace view",
+  canvasViewLabel: "Canvas view",
+  pageViewLabel: "Page view",
+  markupDisplayLabel: "Markup display",
+  trackingOnDetail: "Tracking on: new typing, insertions, deletions, and formatting changes become redlines.",
+  trackingOffDetail: "Tracking off: new edits are applied directly. Existing markup display is controlled separately.",
+  workflowScopeControlsLabel: "Workflow scope controls",
+  createCustomWorkflowScopeLabel: "Create custom workflow scope",
+  customScopeModeInputLabel: "Custom scope mode",
+  customScopeColorInputLabel: "Custom scope color",
+  scopeColorPlaceholder: "#64748b",
+  metadataKeyPlaceholderLabel: "Key",
+  metadataValuePlaceholderLabel: "Value",
+  customLabel: "Custom",
+  nameLabel: "Name",
+  modeLabel: "Mode",
+  colorLabel: "Color",
+  metadataLabelText: "Metadata",
+  addLabel: "Add",
+  cancelLabel: "Cancel",
+  createLabel: "Create"
 };
 
 // src/ui-tailwind/i18n/chrome-strings.tsx
@@ -40449,6 +40539,7 @@ var CUSTOM_SCOPE_COLOR_SWATCHES = [
   "#0891b2"
 ];
 function TwScopePostureMenu(props) {
+  const strings = useChromeStrings();
   const [customOpen, setCustomOpen] = import_react5.default.useState(false);
   const iconOnly = props.responsiveTier === "mobile" || props.responsiveTier === "compact";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -40456,8 +40547,9 @@ function TwScopePostureMenu(props) {
     {
       className: `relative flex min-w-0 items-center ${iconOnly ? "gap-px" : "gap-1"}`,
       "data-testid": props["data-testid"] ?? "workflow-scope-palette",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-control": "direct-scope-palette",
-      "aria-label": "Workflow scope controls",
+      "aria-label": strings.workflowScopeControlsLabel,
       role: "group",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex shrink-0 items-center gap-px", children: SCOPE_POSTURE_MENU_ENTRIES.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -40484,9 +40576,9 @@ function TwScopePostureMenu(props) {
           "button",
           {
             type: "button",
-            "aria-label": "Create custom workflow scope",
+            "aria-label": strings.createCustomWorkflowScopeLabel,
             "aria-expanded": customOpen,
-            title: "Custom scope",
+            title: strings.customScopeLabel,
             disabled: !props.onCreateCustomScope,
             onMouseDown: preserveEditorSelectionMouseDown,
             onClick: () => setCustomOpen((value) => !value),
@@ -40498,7 +40590,7 @@ function TwScopePostureMenu(props) {
             "data-label-visibility": iconOnly ? "icon-only" : "text",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TwGlyphIcon, { name: "plus", className: "h-3.5 w-3.5 text-accent" }),
-              iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Custom" })
+              iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: strings.customLabel })
             ]
           }
         ),
@@ -40514,6 +40606,7 @@ function TwScopePostureMenu(props) {
   );
 }
 function CustomScopeDialog(props) {
+  const strings = useChromeStrings();
   const [mode, setMode] = import_react5.default.useState("suggest");
   const [color, setColor] = import_react5.default.useState(CUSTOM_SCOPE_COLOR_SWATCHES[0]);
   const [metadataRows, setMetadataRows] = import_react5.default.useState([0]);
@@ -40559,12 +40652,12 @@ function CustomScopeDialog(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-semibold text-[var(--ink-primary)]", children: "Custom scope" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-semibold text-[var(--ink-primary)]", children: strings.customScopeLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
-              "aria-label": "Close custom scope dialog",
+              "aria-label": strings.closeCustomScopeDialogLabel,
               onMouseDown: preserveEditorSelectionMouseDown,
               onClick: props.onClose,
               className: ds38IconButtonClass,
@@ -40573,19 +40666,19 @@ function CustomScopeDialog(props) {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "grid gap-1 font-medium text-[var(--ink-secondary)]", children: [
-          "Name",
+          strings.nameLabel,
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               autoFocus: true,
-              "aria-label": "Custom scope name",
+              "aria-label": strings.customScopeNameLabel,
               name: "scope-label",
               className: ds38SmallInputClass
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid gap-1", role: "group", "aria-label": "Custom scope mode", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Mode" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid gap-1", role: "group", "aria-label": strings.customScopeModeInputLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.modeLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-1", children: ["edit", "suggest", "comment", "view"].map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
@@ -40606,8 +40699,8 @@ function CustomScopeDialog(props) {
             entry
           )) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid gap-1", role: "group", "aria-label": "Custom scope color", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Color" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid gap-1", role: "group", "aria-label": strings.customScopeColorInputLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.colorLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
             CUSTOM_SCOPE_COLOR_SWATCHES.map((swatch) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
@@ -40628,9 +40721,9 @@ function CustomScopeDialog(props) {
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "input",
               {
-                "aria-label": "Custom scope color",
+                "aria-label": strings.customScopeColorInputLabel,
                 name: "scope-color",
-                placeholder: "#64748b",
+                placeholder: strings.scopeColorPlaceholder,
                 className: `${ds38SmallInputClass} w-24`
               }
             )
@@ -40638,7 +40731,7 @@ function CustomScopeDialog(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Metadata" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.metadataLabelText }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
@@ -40646,7 +40739,7 @@ function CustomScopeDialog(props) {
                 onMouseDown: preserveEditorSelectionMouseDown,
                 onClick: () => setMetadataRows((rows) => [...rows, Date.now()]),
                 className: `${ds38TextButtonClass} h-6 px-1.5 text-[10px] text-[var(--accent-primary)]`,
-                children: "Add"
+                children: strings.addLabel
               }
             )
           ] }),
@@ -40656,7 +40749,7 @@ function CustomScopeDialog(props) {
               {
                 "aria-label": `Metadata key ${index + 1}`,
                 name: "metadata-key",
-                placeholder: "Key",
+                placeholder: strings.metadataKeyPlaceholderLabel,
                 className: ds38SmallInputClass
               }
             ),
@@ -40665,7 +40758,7 @@ function CustomScopeDialog(props) {
               {
                 "aria-label": `Metadata value ${index + 1}`,
                 name: "metadata-value",
-                placeholder: "Value",
+                placeholder: strings.metadataValuePlaceholderLabel,
                 className: ds38SmallInputClass
               }
             ),
@@ -40698,7 +40791,7 @@ function CustomScopeDialog(props) {
               onMouseDown: preserveEditorSelectionMouseDown,
               onClick: props.onClose,
               className: ds38TextButtonClass,
-              children: "Cancel"
+              children: strings.cancelLabel
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -40707,7 +40800,7 @@ function CustomScopeDialog(props) {
               type: "submit",
               disabled: pending || !props.onCreate,
               className: `h-7 rounded-[var(--r-2)] bg-[var(--accent-primary)] px-2 text-[length:var(--tx-xs)] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40 ${ds38ControlFocusClass}`,
-              children: "Create"
+              children: strings.createLabel
             }
           )
         ] })
@@ -40887,6 +40980,7 @@ function toneClass(tone) {
 // src/ui-tailwind/toolbar/tw-role-action-region.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TwRoleActionRegion(props) {
+  const strings = useChromeStrings();
   const responsiveTier = props.responsiveTier ?? (props.compactMode ? "compact" : "standard");
   const order = resolveRoleActionOrder(props.role, props.chromeMode);
   const inlineIds = [];
@@ -40922,6 +41016,7 @@ function TwRoleActionRegion(props) {
     "div",
     {
       className: "flex min-w-0 shrink-0 items-stretch",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-testid": props["data-testid"] ?? `role-action-region-${props.chromeMode ?? props.role}`,
       "data-role": props.role,
       "data-mode": props.chromeMode,
@@ -40938,7 +41033,7 @@ function TwRoleActionRegion(props) {
           },
           id
         )) }, group2.key)),
-        overflowIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwRibbonGroup, { label: "More", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RoleActionOverflow, { ids: overflowIds, props }) }) : null
+        overflowIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwRibbonGroup, { label: strings.moreLabel, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RoleActionOverflow, { ids: overflowIds, props }) }) : null
       ]
     }
   );
@@ -41088,6 +41183,7 @@ function roleOverflowLabel(role) {
 }
 function RoleActionButton(arg) {
   const { id, props, responsiveTier } = arg;
+  const strings = useChromeStrings();
   const hideText = shouldUseIconOnlyRoleAction(id, responsiveTier);
   const reviewQueueTotal = props.reviewQueue?.totalCount ?? 0;
   const adjudicationProtected = props.capabilities?.adjudicationBlockedByProtection ?? false;
@@ -41099,7 +41195,7 @@ function RoleActionButton(arg) {
           "button",
           {
             type: "button",
-            "aria-label": "Add comment",
+            "aria-label": strings.addCommentLabel,
             disabled: !props.canAddComment || !props.onAddComment,
             onMouseDown: preserveEditorSelectionMouseDown,
             onClick: props.onAddComment,
@@ -41108,7 +41204,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwGlyphIcon, { name: "comment", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Add comment" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.addCommentLabel }) })
       ] });
     case "review-compare-document":
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -41119,7 +41215,7 @@ function RoleActionButton(arg) {
         }
       );
     case "review-track-changes-toggle": {
-      const trackChangesLabel = "Track Changes";
+      const trackChangesLabel = strings.trackedChangesLabel;
       const trackedChangesAuthoringEnabled = props.trackedChangesAuthoringEnabled ?? false;
       const onTrackedChangesAuthoringChange = props.onTrackedChangesAuthoringChange ?? props.onShowTrackedChangesChange;
       const trackChangesTooltip = trackedChangesAuthoringEnabled ? "Tracking on: new typing, insertions, deletions, and formatting changes become redlines." : "Tracking off: new edits are applied directly. Existing markup display is controlled in the status bar.";
@@ -41132,7 +41228,7 @@ function RoleActionButton(arg) {
             "aria-label": trackChangesLabel,
             disabled: props.capabilities ? !sessionCanTrackChangesAuthoring(props.capabilities) : false,
             onMouseDown: preserveEditorSelectionMouseDown,
-            title: trackedChangesAuthoringEnabled ? "Tracking on: new edits are recorded as redlines" : "Tracking off: new edits are applied directly",
+            title: trackedChangesAuthoringEnabled ? strings.trackedChangesOnTitle : strings.trackedChangesOffTitle,
             className: [
               "inline-flex h-6 items-center justify-center gap-1 rounded-[var(--radius-sm)] px-2",
               "text-[length:var(--text-xs)] font-medium text-[var(--ink-secondary)]",
@@ -41146,7 +41242,7 @@ function RoleActionButton(arg) {
             "data-testid": "role-review-track-changes-toggle",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwGlyphIcon, { name: "edit", className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: trackedChangesAuthoringEnabled ? "Tracking on" : "Tracking off" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: trackedChangesAuthoringEnabled ? strings.trackedChangesOnLabel : strings.trackedChangesOffLabel })
             ]
           }
         ) }),
@@ -41159,7 +41255,7 @@ function RoleActionButton(arg) {
           "button",
           {
             type: "button",
-            "aria-label": "Show tracked changes in sidebar",
+            "aria-label": strings.showTrackedChangesSidebarLabel,
             disabled: !props.onReviewSidebarTrackedChanges,
             onMouseDown: preserveEditorSelectionMouseDown,
             onClick: props.onReviewSidebarTrackedChanges,
@@ -41168,7 +41264,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwGlyphIcon, { name: "diff", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Tracked changes panel" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.trackedChangesPanelLabel }) })
       ] });
     case "comments-panel":
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip.Root, { children: [
@@ -41176,7 +41272,7 @@ function RoleActionButton(arg) {
           "button",
           {
             type: "button",
-            "aria-label": "Show comments in sidebar",
+            "aria-label": strings.showCommentsSidebarLabel,
             disabled: !props.onReviewSidebarComments,
             onMouseDown: preserveEditorSelectionMouseDown,
             onClick: props.onReviewSidebarComments,
@@ -41185,7 +41281,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TwGlyphIcon, { name: "comment", badge: "alert", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Comments panel" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.commentsPanelLabel }) })
       ] });
     case "editor-scope-posture-menu":
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -41545,14 +41641,15 @@ function IconTextButton(arg) {
   );
 }
 function ReviewCompareDocumentButton(props) {
+  const strings = useChromeStrings();
   const inputRef = import_react6.default.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       IconTextButton,
       {
         icon: twGlyphIconComponent("diff"),
-        text: "Compare",
-        ariaLabel: "Compare with another document",
+        text: strings.compareLabel,
+        ariaLabel: strings.compareWithAnotherDocumentLabel,
         disabled: props.disabled,
         onClick: () => inputRef.current?.click(),
         "data-testid": props.testId ?? "role-review-compare-document"
@@ -41565,7 +41662,7 @@ function ReviewCompareDocumentButton(props) {
         type: "file",
         accept: ".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
         className: "sr-only",
-        "aria-label": "Choose document to compare",
+        "aria-label": strings.chooseDocumentToCompareLabel,
         disabled: props.disabled,
         onChange: (event) => {
           const file = event.currentTarget.files?.[0];
@@ -41583,14 +41680,15 @@ function ReviewCompareDocumentButton(props) {
   ] });
 }
 function CompareMenuRow(arg) {
+  const strings = useChromeStrings();
   const inputRef = import_react6.default.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MenuRow,
       {
         icon: twGlyphIconComponent("diff"),
-        label: "Compare document",
-        ariaLabel: "Compare with another document",
+        label: strings.compareDocumentLabel,
+        ariaLabel: strings.compareWithAnotherDocumentLabel,
         disabled: arg.disabled,
         onClick: () => inputRef.current?.click()
       }
@@ -41602,7 +41700,7 @@ function CompareMenuRow(arg) {
         type: "file",
         accept: ".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
         className: "sr-only",
-        "aria-label": "Choose document to compare",
+        "aria-label": strings.chooseDocumentToCompareLabel,
         disabled: arg.disabled,
         onChange: (event) => {
           const file = event.currentTarget.files?.[0];
@@ -41701,6 +41799,7 @@ function TwRibbonTab(props) {
     "button",
     {
       type: "button",
+      "data-chrome-unit-id": "chrome.ribbon",
       role: "tab",
       "aria-selected": selected,
       "aria-label": label,
@@ -41738,15 +41837,24 @@ function TwRibbonTab(props) {
 
 // src/ui-tailwind/toolbar/tw-ribbon-tab-strip.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TAB_DESCRIPTORS = [
-  { id: "home", label: "Home" },
-  { id: "insert", label: "Insert" },
-  { id: "layout", label: "Layout" },
-  { id: "review", label: "Review" },
-  { id: "workflow", label: "Workflow" },
-  { id: "analytics", label: "Analytics" }
+var TAB_IDS = [
+  "home",
+  "insert",
+  "layout",
+  "review",
+  "workflow",
+  "analytics"
 ];
 function TwRibbonTabStrip(props) {
+  const strings = useChromeStrings();
+  const tabLabels = {
+    home: strings.homeTabLabel,
+    insert: strings.insertTabLabel,
+    layout: strings.layoutTabLabel,
+    review: strings.reviewTabLabel,
+    workflow: strings.workflowTabLabel,
+    analytics: strings.analyticsLabel
+  };
   const responsiveTier = props.responsiveTier ?? "standard";
   const isMobile = responsiveTier === "mobile";
   const disabledSet = import_react8.default.useMemo(
@@ -41757,6 +41865,7 @@ function TwRibbonTabStrip(props) {
     "div",
     {
       "data-testid": "ribbon-tab-strip",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-layer": "tabs",
       "data-responsive-tier": responsiveTier,
       className: [
@@ -41768,22 +41877,22 @@ function TwRibbonTabStrip(props) {
           "div",
           {
             role: "tablist",
-            "aria-label": "Ribbon tabs",
+            "aria-label": strings.ribbonTabsLabel,
             className: [
               "flex min-w-0 shrink items-end gap-0",
               "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             ].join(" "),
-            children: TAB_DESCRIPTORS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: TAB_IDS.map((id) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               TwRibbonTab,
               {
-                id: tab.id,
-                label: tab.label,
-                selected: tab.id === props.activeTab,
-                disabled: disabledSet.has(tab.id),
+                id,
+                label: tabLabels[id],
+                selected: id === props.activeTab,
+                disabled: disabledSet.has(id),
                 responsiveTier,
                 onSelect: props.onTabChange
               },
-              tab.id
+              id
             ))
           }
         ),
@@ -41795,10 +41904,10 @@ function TwRibbonTabStrip(props) {
               type: "button",
               "data-testid": "ribbon-collapse-toggle",
               "aria-pressed": props.collapsed,
-              "aria-label": props.collapsed ? "Expand ribbon" : "Collapse ribbon",
+              "aria-label": props.collapsed ? strings.expandRibbonLabel : strings.collapseRibbonLabel,
               onClick: props.onCollapseToggle,
               "data-label-visibility": isMobile ? "icon-only" : "text",
-              title: isMobile ? props.collapsed ? "Expand ribbon" : "Collapse ribbon" : void 0,
+              title: isMobile ? props.collapsed ? strings.expandRibbonLabel : strings.collapseRibbonLabel : void 0,
               className: [
                 "inline-flex h-6 items-center rounded text-[length:var(--text-xs)] text-[var(--ink-secondary)]",
                 "transition-colors duration-[var(--t-fast)] hover:bg-[var(--bg-hover)] hover:text-[var(--ink-primary)]",
@@ -41820,15 +41929,17 @@ function TwRibbonTabStrip(props) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-analytics.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function TwRibbonTabBodyAnalytics(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       "data-testid": "ribbon-tab-body-analytics",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-tab-body": "analytics",
       "data-ribbon-body-density": "standard",
-      "aria-label": "Analytics tab body",
+      "aria-label": strings.analyticsTabBodyLabel,
       className: "flex h-full min-w-0 flex-nowrap items-center overflow-hidden px-0 py-0",
-      children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "px-3 text-[length:var(--text-xs)] text-tertiary", children: "Analytics unavailable" })
+      children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "px-3 text-[length:var(--text-xs)] text-tertiary", children: strings.analyticsUnavailable })
     }
   );
 }
@@ -41846,12 +41957,14 @@ var GROUP_LABEL = {
   symbol: "Symbol"
 };
 function TwRibbonTabBodyInsert(props) {
+  const strings = useChromeStrings();
   const entries = filterRegistryByTab("insert");
   const byGroup = groupEntriesByGroup(entries);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "data-testid": "ribbon-tab-body-insert",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-tab-body": "insert",
       "data-ribbon-body-density": "compact",
       className: "flex h-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden px-3 py-0",
@@ -41862,7 +41975,7 @@ function TwRibbonTabBodyInsert(props) {
           "data-testid": `ribbon-tab-body-insert-entry-${id}`,
           "data-ribbon-entry-id": id,
           disabled: true,
-          title: "Not available: command handler not supplied by the toolbar host.",
+          title: strings.notAvailableCommandHandler,
           className: "inline-flex h-6 items-center rounded px-1.5 text-[length:var(--text-xs)] text-[var(--ink-secondary)] opacity-50",
           children: labelForEntry(id)
         },
@@ -41902,6 +42015,7 @@ var GROUP_LABEL2 = {
   ruler: "Ruler"
 };
 function TwRibbonTabBodyLayout(props) {
+  const strings = useChromeStrings();
   const entries = filterRegistryByTab("layout");
   const byGroup = {};
   for (const entry of entries) {
@@ -41913,6 +42027,7 @@ function TwRibbonTabBodyLayout(props) {
     "div",
     {
       "data-testid": "ribbon-tab-body-layout",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-tab-body": "layout",
       "data-ribbon-body-density": "compact",
       className: "flex h-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden px-3 py-0",
@@ -41923,7 +42038,7 @@ function TwRibbonTabBodyLayout(props) {
           "data-testid": `ribbon-tab-body-layout-entry-${id}`,
           "data-ribbon-entry-id": id,
           disabled: true,
-          title: "Not available: command handler not supplied by the toolbar host.",
+          title: strings.notAvailableCommandHandler,
           className: "inline-flex h-6 items-center rounded px-1.5 text-[length:var(--text-xs)] text-[var(--ink-secondary)] opacity-50",
           children: labelForEntry2(id)
         },
@@ -41944,13 +42059,15 @@ function labelForEntry2(id) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-mode.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function TwRibbonTabBodyMode(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       "data-testid": `ribbon-tab-body-${props.tab}`,
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-tab-body": props.tab,
       "data-ribbon-body-density": "compact",
-      "aria-label": "Workflow tab body",
+      "aria-label": strings.workflowTabBodyLabel,
       className: "flex h-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden px-3 py-0",
       children: props.children ?? null
     }
@@ -41960,13 +42077,15 @@ function TwRibbonTabBodyMode(props) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-review.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function TwRibbonTabBodyReview(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-testid": "ribbon-tab-body-review",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-ribbon-tab-body": "review",
       "data-ribbon-body-density": "compact",
-      "aria-label": "Review tab body",
+      "aria-label": strings.reviewTabBodyLabel,
       className: "flex h-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden px-3 py-0",
       children: props.children ?? null
     }
@@ -42103,6 +42222,7 @@ function TwDisplayModeSelector(props) {
       "button",
       {
         type: "button",
+        "data-chrome-unit-id": "chrome.ribbon",
         disabled: props.disabled,
         "data-testid": props["data-testid"] ?? "display-mode-selector-trigger",
         "data-ribbon-control": "compact-selector",
@@ -42910,6 +43030,7 @@ function TwToolbarIconButton(props) {
       "button",
       {
         type: "button",
+        "data-chrome-unit-id": "chrome.ribbon",
         "aria-label": props.label,
         "aria-pressed": props.active ?? void 0,
         "data-active": props.active ? "true" : void 0,
@@ -46710,6 +46831,11 @@ function TwModePill(props) {
 
 // src/ui-tailwind/toolbar/tw-shell-header.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
+var DEFAULT_SHELL_HEADER_MODES = [
+  { id: "edit", label: DEFAULT_CHROME_STRINGS.modeEditLabel },
+  { id: "review", label: DEFAULT_CHROME_STRINGS.reviewTabLabel },
+  { id: "workflow", label: DEFAULT_CHROME_STRINGS.workflowTabLabel }
+];
 var POSTURE_HUES = {
   ready: "var(--sem-success)",
   unsaved: "var(--accent-primary)",
@@ -46717,8 +46843,9 @@ var POSTURE_HUES = {
   blocked: "var(--sem-error)"
 };
 function TwShellHeader(props) {
-  const title = props.documentTitle ?? props.brand ?? "Document";
-  const wordmark = props.wordmark ?? "COMPOSER";
+  const strings = useChromeStrings();
+  const title = props.documentTitle ?? props.brand ?? strings.defaultDocumentTitle;
+  const wordmark = props.wordmark ?? strings.defaultWordmark;
   const posture = props.posture ?? (props.saveState === "dirty" || props.saveState === "saving" ? "unsaved" : "ready");
   const responsiveTier = props.responsiveTier ?? "wide";
   const atLeastCompact = responsiveTier !== "mobile";
@@ -46831,8 +46958,8 @@ function TwShellHeader(props) {
                   type: "button",
                   "data-testid": "tw-shell-header__command",
                   "data-chrome-command-trigger": "true",
-                  "aria-label": "Open command palette",
-                  title: "Open command palette",
+                  "aria-label": strings.commandPaletteLabel,
+                  title: strings.commandPaletteLabel,
                   disabled: props.commandPaletteDisabled,
                   onClick: props.onOpenCommandPalette,
                   className: "inline-flex h-7 w-7 items-center justify-center rounded text-[var(--ink-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--ink-primary)] disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
@@ -46852,13 +46979,13 @@ function TwShellHeader(props) {
                 {
                   type: "button",
                   "data-testid": "tw-shell-header__analytics",
-                  "aria-label": "Toggle analytics",
+                  "aria-label": strings.toggleAnalyticsLabel,
                   "aria-pressed": props.analyticsActive ?? false,
                   onClick: props.onToggleAnalytics,
                   className: "inline-flex h-7 items-center gap-1.5 rounded px-2 text-[length:var(--tx-sm)] font-medium text-[var(--ink-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--ink-primary)] aria-pressed:bg-[var(--accent-soft)] aria-pressed:text-[var(--accent-on-soft)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TwGlyphIcon, { name: "bar-blocks", className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: atLeastStandard ? "inline" : "hidden", children: "Analytics" })
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: atLeastStandard ? "inline" : "hidden", children: strings.analyticsLabel })
                   ]
                 }
               ) : null,
@@ -46926,6 +47053,7 @@ function isSafeShellHref(href) {
 // src/ui-tailwind/toolbar/tw-analytics-ribbon.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function TwAnalyticsRibbon(props) {
+  const strings = useChromeStrings();
   const commentThreads = props.comments?.threads ?? [];
   const resolvedCommentIds = props.comments?.resolvedCommentIds ?? [];
   const revisions = props.trackedChanges?.revisions ?? [];
@@ -46946,7 +47074,7 @@ function TwAnalyticsRibbon(props) {
   const scopeCount = scopeRailSegments.length;
   const toolCount = props.toolRegistry?.editorActions.length ?? props.toolRegistry?.commandPalette.length ?? 0;
   const state = blocked > 0 ? "blocked" : openComments + pendingChanges + tasks + approvals === 0 ? "empty" : "ready";
-  const recentAction = props.contextAnalytics?.nextActions[0]?.label ?? (blocked > 0 ? "Resolve blockers" : pendingChanges > 0 ? "Review pending changes" : openComments > 0 ? "Open comment thread" : "Document ready");
+  const recentAction = props.contextAnalytics?.nextActions[0]?.label ?? (blocked > 0 ? strings.resolveBlockersAction : pendingChanges > 0 ? strings.reviewPendingChangesAction : openComments > 0 ? strings.openCommentThreadAction : strings.documentReadyAction);
   const nextActions = (props.contextAnalytics?.nextActions ?? []).slice(0, 2).map((action) => action.label);
   const visibleNextActions = nextActions.length > 0 ? nextActions : [recentAction];
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -46954,34 +47082,35 @@ function TwAnalyticsRibbon(props) {
     {
       className: "flex h-full min-w-0 flex-1 items-center overflow-hidden px-1",
       "data-testid": "tw-analytics-ribbon",
+      "data-chrome-unit-id": "chrome.ribbon",
       "data-region": "rib-analytics",
       "data-analytics-state": state,
       "data-analytics-review-items": totalReviewItems,
       "data-analytics-tool-registry-count": toolCount,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: "Document", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Pages", value: props.pageCount == null ? "..." : String(props.pageCount) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Chars", value: formatCompactNumber(props.documentStats?.storyLength ?? 0) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Export", value: props.exportBlocked ? "Blocked" : "Ready", tone: props.exportBlocked ? "blocked" : "ready" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: strings.documentGroupLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.pagesLabel, value: props.pageCount == null ? "..." : String(props.pageCount) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.charsLabel, value: formatCompactNumber(props.documentStats?.storyLength ?? 0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.exportLabel, value: props.exportBlocked ? strings.blockedLabel : strings.readyLabel, tone: props.exportBlocked ? "blocked" : "ready" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: "Review", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Items", value: String(totalReviewItems), tone: totalReviewItems > 0 ? "attention" : "neutral" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: "Changes", value: pendingChanges, color: "var(--sem-warning)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: "Comments", value: openComments, color: "var(--markup-comment-ink)" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: strings.reviewGroupLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.itemsLabel, value: String(totalReviewItems), tone: totalReviewItems > 0 ? "attention" : "neutral" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: strings.changesLabel, value: pendingChanges, color: "var(--sem-warning)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: strings.commentsLabel, value: openComments, color: "var(--markup-comment-ink)" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: "Risk", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Opaque", value: String(props.documentStats?.opaqueFragmentCount ?? 0), tone: (props.documentStats?.opaqueFragmentCount ?? 0) > 0 ? "attention" : "neutral" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Blocked", value: String(blocked), tone: blocked > 0 ? "blocked" : "neutral" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: strings.riskGroupLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.opaqueLabel, value: String(props.documentStats?.opaqueFragmentCount ?? 0), tone: (props.documentStats?.opaqueFragmentCount ?? 0) > 0 ? "attention" : "neutral" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.blockedLabel, value: String(blocked), tone: blocked > 0 ? "blocked" : "neutral" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: "Workflow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Scopes", value: String(scopeCount) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: "Tasks", value: tasks, color: "var(--mode-workflow)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: "Approvals", value: approvals, color: "var(--scope-review-marker)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: "Blocked", value: blocked, color: "var(--sem-error)" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TwRibbonGroup, { label: strings.workflowGroupLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.scopesLabel, value: String(scopeCount) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: strings.tasksLabel, value: tasks, color: "var(--mode-workflow)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: strings.approvalsLabel, value: approvals, color: "var(--scope-review-marker)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MetricCell, { label: strings.blockedLabel, value: blocked, color: "var(--sem-error)" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: "Scopes", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScopeBreakdown, { segments: scopeRailSegments }) }),
-        toolCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: "Tools", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: "Tools", value: String(toolCount) }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: "Next", children: visibleNextActions.slice(0, 2).map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: strings.scopesGroupLabel, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScopeBreakdown, { segments: scopeRailSegments, label: strings.scopeBreakdownLabel }) }),
+        toolCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: strings.toolsGroupLabel, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FactCell, { label: strings.toolsGroupLabel, value: String(toolCount) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TwRibbonGroup, { label: strings.nextGroupLabel, children: visibleNextActions.slice(0, 2).map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "span",
           {
             className: "max-w-28 truncate px-1 text-[length:var(--tx-xs)] font-medium text-[var(--ink-secondary)]",
@@ -47035,7 +47164,7 @@ function ScopeBreakdown(props) {
     "div",
     {
       className: "flex h-2 w-28 overflow-hidden rounded-[var(--r-1)] bg-[var(--bg-muted)]",
-      "aria-label": "Scope breakdown",
+      "aria-label": props.label,
       role: "img",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BreakdownSegment, { value: counts.edit, total, color: "var(--scope-edit-marker)" }),
@@ -54350,6 +54479,7 @@ var STATUS_POSTURE_PIP_CLASS = {
   blocked: "bg-[var(--sem-error)]"
 };
 function TwStatusBar(props) {
+  const strings = useChromeStrings();
   const responsiveTier = props.responsiveTier ?? "wide";
   const atLeastCompact = responsiveTier !== "mobile";
   const atLeastStandard = responsiveTier === "standard" || responsiveTier === "wide";
@@ -54359,7 +54489,7 @@ function TwStatusBar(props) {
   const showPosture = segmentVisible("status-save-state");
   const preservationStatusMessage = getPreserveOnlyStatusMessage(props.preserveOnlyCount);
   const savePosture = props.isDirty ? "unsaved" : "ready";
-  const saveLabel = props.isDirty ? "Unsaved" : "Saved";
+  const saveLabel = props.isDirty ? strings.unsavedLabel : strings.savedLabel;
   const showExportPosture = showPosture && props.isExportBlocked;
   const showOpenChangesPosture = showPosture && props.changeCount > 0;
   const openChangesLabel = `${props.changeCount} ${props.changeCount === 1 ? "change" : "changes"}`;
@@ -54389,7 +54519,7 @@ function TwStatusBar(props) {
   const showZoomControls = (props.zoomLevel != null || props.onZoomChange) && segmentVisible("status-zoom");
   const trackingEnabled = Boolean(props.trackedChangesAuthoringEnabled);
   const trackingDisabled = props.trackedChangesAuthoringDisabled === true || !props.onTrackedChangesAuthoringChange;
-  const trackingTitle = trackingEnabled ? "Tracking on: new typing, insertions, deletions, and formatting changes become redlines." : "Tracking off: new edits are applied directly. Existing markup display is controlled separately.";
+  const trackingTitle = trackingEnabled ? strings.trackingOnDetail : strings.trackingOffDetail;
   const trackingControlTitle = trackingDisabled && props.trackedChangesAuthoringDisabledReason ? props.trackedChangesAuthoringDisabledReason : trackingTitle;
   const statusChromeMode = segmentVisible("status-mode") ? normalizeStatusChromeMode(props.chromeMode) : null;
   const modeLabel = statusChromeMode ? formatStatusChromeModeLabel(statusChromeMode) : null;
@@ -54468,7 +54598,7 @@ function TwStatusBar(props) {
                           className: "inline-flex items-center gap-1",
                           "data-testid": "status-bar-posture-export",
                           "data-posture": "blocked",
-                          title: "Export blocked",
+                          title: strings.exportBlockedLabel,
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                               "span",
@@ -54477,7 +54607,7 @@ function TwStatusBar(props) {
                                 className: `h-1.5 w-1.5 shrink-0 rounded-[1px] ${STATUS_POSTURE_PIP_CLASS.blocked}`
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: atLeastCompact ? "" : "hidden", children: "Export blocked" })
+                            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: atLeastCompact ? "" : "hidden", children: strings.exportBlockedLabel })
                           ]
                         }
                       ) : null,
@@ -54511,7 +54641,7 @@ function TwStatusBar(props) {
                   className: "flex shrink-0 items-center overflow-hidden",
                   "data-testid": "status-bar-page-anchored-stories",
                   "data-chrome-unit-id": "status-page-anchored-stories",
-                  "aria-label": "Page-anchored stories not shown",
+                  "aria-label": strings.pageAnchoredStoriesNotShownLabel,
                   title: `${hiddenStoryCount} page-anchored ${hiddenStoryCount === 1 ? "story" : "stories"} (headers, footers, notes) ${hiddenStoryCount === 1 ? "is" : "are"} not shown in this view`,
                   children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "inline-flex h-5 items-center gap-1 rounded-[var(--r-2)] px-1.5 text-[var(--text-secondary)]", children: [
                     hiddenStoryCount,
@@ -54526,12 +54656,12 @@ function TwStatusBar(props) {
                   className: `flex shrink-0 items-center overflow-hidden ${isWide ? "w-[8.75rem]" : atLeastCompact ? "w-[4rem]" : "w-7"}`,
                   "data-testid": "status-bar-track-changes",
                   "data-chrome-unit-id": "status-track-changes",
-                  "aria-label": "Track changes authoring",
+                  "aria-label": strings.trackChangesAuthoringLabel,
                   children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                     "button",
                     {
                       type: "button",
-                      "aria-label": "Track Changes",
+                      "aria-label": strings.trackedChangesLabel,
                       "aria-pressed": trackingEnabled,
                       disabled: trackingDisabled,
                       onClick: () => props.onTrackedChangesAuthoringChange?.(!trackingEnabled),
@@ -54568,7 +54698,7 @@ function TwStatusBar(props) {
                     className: `shrink-0 items-center gap-1 overflow-hidden ${atLeastStandard ? "flex" : "hidden"} ${isWide ? "w-[8.75rem]" : "w-[4.25rem]"}`,
                     "data-testid": "status-bar-markup-mode",
                     "data-chrome-unit-id": "status-markup-display",
-                    "aria-label": "Markup display",
+                    "aria-label": strings.markupDisplayLabel,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                         "div",
@@ -54705,13 +54835,13 @@ function TwStatusBar(props) {
                   className: "flex w-11 shrink-0 items-center gap-px",
                   "data-testid": "status-bar-workspace-mode",
                   "data-chrome-unit-id": "status-workspace-view",
-                  "aria-label": "Workspace view",
+                  "aria-label": strings.workspaceViewLabel,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       StatusChromeButton,
                       {
                         active: props.workspace === "canvas",
-                        ariaLabel: "Canvas view",
+                        ariaLabel: strings.canvasViewLabel,
                         disabled: !props.onWorkspaceModeChange,
                         onClick: () => props.onWorkspaceModeChange?.("canvas"),
                         children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TwGlyphIcon, { name: "desktop", className: "h-3 w-3", "aria-hidden": "true" })
@@ -54721,7 +54851,7 @@ function TwStatusBar(props) {
                       StatusChromeButton,
                       {
                         active: props.workspace === "page",
-                        ariaLabel: "Page view",
+                        ariaLabel: strings.pageViewLabel,
                         disabled: !props.onWorkspaceModeChange,
                         onClick: () => props.onWorkspaceModeChange?.("page"),
                         children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TwGlyphIcon, { name: "document", className: "h-3 w-3", "aria-hidden": "true" })
@@ -54741,13 +54871,13 @@ function TwStatusBar(props) {
                     ].join(" "),
                     "data-testid": "status-bar-zoom",
                     "data-chrome-unit-id": "status-zoom",
-                    "aria-label": "Zoom controls",
+                    "aria-label": strings.zoomControlsLabel,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                         "button",
                         {
                           type: "button",
-                          "aria-label": "Zoom out",
+                          "aria-label": strings.zoomOutLabel,
                           disabled: !canDecreaseZoom,
                           onClick: () => applyZoom(zoomPercent - STATUS_ZOOM_BUTTON_STEP),
                           className: [
@@ -54759,7 +54889,7 @@ function TwStatusBar(props) {
                       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                         "input",
                         {
-                          "aria-label": "Zoom level",
+                          "aria-label": strings.zoomLevelLabel,
                           type: "range",
                           min: Math.min(STATUS_ZOOM_MIN, Math.floor(zoomPercent / STATUS_ZOOM_STEP) * STATUS_ZOOM_STEP),
                           max: STATUS_ZOOM_MAX,
@@ -54790,7 +54920,7 @@ function TwStatusBar(props) {
                         "button",
                         {
                           type: "button",
-                          "aria-label": "Zoom in",
+                          "aria-label": strings.zoomInLabel,
                           disabled: !canIncreaseZoom,
                           onClick: () => applyZoom(zoomPercent + STATUS_ZOOM_BUTTON_STEP),
                           className: [