@beyondwork/docx-react-component 1.0.369 → 1.0.370

package/dist/{chunk-NZWRRQ3F.js → chunk-4T2EC23H.js}

@@ -15,7 +15,7 @@ import {
   resolveChromeUnits,
   resolveChromeVisibilityFromConfig,
   sessionCanTrackChangesAuthoring
-} from "./chunk-FGYKA36U.js";
+} from "./chunk-NVUBNJK6.js";
 import {
   RIBBON_GROUP_LABELS,
   buildPageAnchorAttributes,
@@ -1196,6 +1196,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,
@@ -1545,6 +1546,7 @@ var CUSTOM_SCOPE_COLOR_SWATCHES = [
   "#0891b2"
 ];
 function TwScopePostureMenu(props) {
+  const strings = useChromeStrings();
   const [customOpen, setCustomOpen] = React2.useState(false);
   const iconOnly = props.responsiveTier === "mobile" || props.responsiveTier === "compact";
   return /* @__PURE__ */ jsxs4(
@@ -1552,8 +1554,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__ */ jsx6("div", { className: "flex shrink-0 items-center gap-px", children: SCOPE_POSTURE_MENU_ENTRIES.map((entry) => /* @__PURE__ */ jsx6(
@@ -1580,9 +1583,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),
@@ -1594,7 +1597,7 @@ function TwScopePostureMenu(props) {
             "data-label-visibility": iconOnly ? "icon-only" : "text",
             children: [
               /* @__PURE__ */ jsx6(TwGlyphIcon, { name: "plus", className: "h-3.5 w-3.5 text-accent" }),
-              iconOnly ? null : /* @__PURE__ */ jsx6("span", { children: "Custom" })
+              iconOnly ? null : /* @__PURE__ */ jsx6("span", { children: strings.customLabel })
             ]
           }
         ),
@@ -1610,6 +1613,7 @@ function TwScopePostureMenu(props) {
   );
 }
 function CustomScopeDialog(props) {
+  const strings = useChromeStrings();
   const [mode, setMode] = React2.useState("suggest");
   const [color, setColor] = React2.useState(CUSTOM_SCOPE_COLOR_SWATCHES[0]);
   const [metadataRows, setMetadataRows] = React2.useState([0]);
@@ -1655,12 +1659,12 @@ function CustomScopeDialog(props) {
       },
       children: [
         /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx6("span", { className: "font-semibold text-[var(--ink-primary)]", children: "Custom scope" }),
+          /* @__PURE__ */ jsx6("span", { className: "font-semibold text-[var(--ink-primary)]", children: strings.customScopeLabel }),
           /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
-              "aria-label": "Close custom scope dialog",
+              "aria-label": strings.closeCustomScopeDialogLabel,
               onMouseDown: preserveEditorSelectionMouseDown,
               onClick: props.onClose,
               className: ds38IconButtonClass,
@@ -1669,19 +1673,19 @@ function CustomScopeDialog(props) {
           )
         ] }),
         /* @__PURE__ */ jsxs4("label", { className: "grid gap-1 font-medium text-[var(--ink-secondary)]", children: [
-          "Name",
+          strings.nameLabel,
           /* @__PURE__ */ jsx6(
             "input",
             {
               autoFocus: true,
-              "aria-label": "Custom scope name",
+              "aria-label": strings.customScopeNameLabel,
               name: "scope-label",
               className: ds38SmallInputClass
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", role: "group", "aria-label": "Custom scope mode", children: [
-          /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Mode" }),
+        /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", role: "group", "aria-label": strings.customScopeModeInputLabel, children: [
+          /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.modeLabel }),
           /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", children: ["edit", "suggest", "comment", "view"].map((entry) => /* @__PURE__ */ jsx6(
             "button",
             {
@@ -1702,8 +1706,8 @@ function CustomScopeDialog(props) {
             entry
           )) })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", role: "group", "aria-label": "Custom scope color", children: [
-          /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Color" }),
+        /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", role: "group", "aria-label": strings.customScopeColorInputLabel, children: [
+          /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.colorLabel }),
           /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
             CUSTOM_SCOPE_COLOR_SWATCHES.map((swatch) => /* @__PURE__ */ jsx6(
               "button",
@@ -1724,9 +1728,9 @@ function CustomScopeDialog(props) {
             /* @__PURE__ */ jsx6(
               "input",
               {
-                "aria-label": "Custom scope color",
+                "aria-label": strings.customScopeColorInputLabel,
                 name: "scope-color",
-                placeholder: "#64748b",
+                placeholder: strings.scopeColorPlaceholder,
                 className: `${ds38SmallInputClass} w-24`
               }
             )
@@ -1734,7 +1738,7 @@ function CustomScopeDialog(props) {
         ] }),
         /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", children: [
           /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: "Metadata" }),
+            /* @__PURE__ */ jsx6("span", { className: "font-medium text-[var(--ink-secondary)]", children: strings.metadataLabelText }),
             /* @__PURE__ */ jsx6(
               "button",
               {
@@ -1742,7 +1746,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
               }
             )
           ] }),
@@ -1752,7 +1756,7 @@ function CustomScopeDialog(props) {
               {
                 "aria-label": `Metadata key ${index + 1}`,
                 name: "metadata-key",
-                placeholder: "Key",
+                placeholder: strings.metadataKeyPlaceholderLabel,
                 className: ds38SmallInputClass
               }
             ),
@@ -1761,7 +1765,7 @@ function CustomScopeDialog(props) {
               {
                 "aria-label": `Metadata value ${index + 1}`,
                 name: "metadata-value",
-                placeholder: "Value",
+                placeholder: strings.metadataValuePlaceholderLabel,
                 className: ds38SmallInputClass
               }
             ),
@@ -1794,7 +1798,7 @@ function CustomScopeDialog(props) {
               onMouseDown: preserveEditorSelectionMouseDown,
               onClick: props.onClose,
               className: ds38TextButtonClass,
-              children: "Cancel"
+              children: strings.cancelLabel
             }
           ),
           /* @__PURE__ */ jsx6(
@@ -1803,7 +1807,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
             }
           )
         ] })
@@ -1983,6 +1987,7 @@ function toneClass(tone) {
 // src/ui-tailwind/toolbar/tw-role-action-region.tsx
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "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 = [];
@@ -2018,6 +2023,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,
@@ -2034,7 +2040,7 @@ function TwRoleActionRegion(props) {
           },
           id
         )) }, group.key)),
-        overflowIds.length > 0 ? /* @__PURE__ */ jsx7(TwRibbonGroup, { label: "More", children: /* @__PURE__ */ jsx7(RoleActionOverflow, { ids: overflowIds, props }) }) : null
+        overflowIds.length > 0 ? /* @__PURE__ */ jsx7(TwRibbonGroup, { label: strings.moreLabel, children: /* @__PURE__ */ jsx7(RoleActionOverflow, { ids: overflowIds, props }) }) : null
       ]
     }
   );
@@ -2184,6 +2190,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;
@@ -2195,7 +2202,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,
@@ -2204,7 +2211,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ jsx7(TwGlyphIcon, { name: "comment", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Add comment" }) })
+        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.addCommentLabel }) })
       ] });
     case "review-compare-document":
       return /* @__PURE__ */ jsx7(
@@ -2215,7 +2222,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.";
@@ -2228,7 +2235,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)]",
@@ -2242,7 +2249,7 @@ function RoleActionButton(arg) {
             "data-testid": "role-review-track-changes-toggle",
             children: [
               /* @__PURE__ */ jsx7(TwGlyphIcon, { name: "edit", className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsx7("span", { children: trackedChangesAuthoringEnabled ? "Tracking on" : "Tracking off" })
+              /* @__PURE__ */ jsx7("span", { children: trackedChangesAuthoringEnabled ? strings.trackedChangesOnLabel : strings.trackedChangesOffLabel })
             ]
           }
         ) }),
@@ -2255,7 +2262,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,
@@ -2264,7 +2271,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ jsx7(TwGlyphIcon, { name: "diff", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Tracked changes panel" }) })
+        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.trackedChangesPanelLabel }) })
       ] });
     case "comments-panel":
       return /* @__PURE__ */ jsxs5(Tooltip2.Root, { children: [
@@ -2272,7 +2279,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,
@@ -2281,7 +2288,7 @@ function RoleActionButton(arg) {
             children: /* @__PURE__ */ jsx7(TwGlyphIcon, { name: "comment", badge: "alert", className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: "Comments panel" }) })
+        /* @__PURE__ */ jsx7(Tooltip2.Portal, { children: /* @__PURE__ */ jsx7(Tooltip2.Content, { className: ds38TooltipClass, sideOffset: 6, children: strings.commentsPanelLabel }) })
       ] });
     case "editor-scope-posture-menu":
       return /* @__PURE__ */ jsx7(
@@ -2641,14 +2648,15 @@ function IconTextButton(arg) {
   );
 }
 function ReviewCompareDocumentButton(props) {
+  const strings = useChromeStrings();
   const inputRef = React3.useRef(null);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx7(
       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"
@@ -2661,7 +2669,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];
@@ -2679,14 +2687,15 @@ function ReviewCompareDocumentButton(props) {
   ] });
 }
 function CompareMenuRow(arg) {
+  const strings = useChromeStrings();
   const inputRef = React3.useRef(null);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx7(
       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()
       }
@@ -2698,7 +2707,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];
@@ -2797,6 +2806,7 @@ function TwRibbonTab(props) {
     "button",
     {
       type: "button",
+      "data-chrome-unit-id": "chrome.ribbon",
       role: "tab",
       "aria-selected": selected,
       "aria-label": label,
@@ -2834,15 +2844,24 @@ function TwRibbonTab(props) {
 
 // src/ui-tailwind/toolbar/tw-ribbon-tab-strip.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "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 = React5.useMemo(
@@ -2853,6 +2872,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: [
@@ -2864,22 +2884,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__ */ jsx10(
+            children: TAB_IDS.map((id) => /* @__PURE__ */ jsx10(
               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
             ))
           }
         ),
@@ -2891,10 +2911,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)]",
@@ -2916,15 +2936,17 @@ function TwRibbonTabStrip(props) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-analytics.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 function TwRibbonTabBodyAnalytics(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ jsx11(
     "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__ */ jsx11("span", { className: "px-3 text-[length:var(--text-xs)] text-tertiary", children: "Analytics unavailable" })
+      children: props.children ?? /* @__PURE__ */ jsx11("span", { className: "px-3 text-[length:var(--text-xs)] text-tertiary", children: strings.analyticsUnavailable })
     }
   );
 }
@@ -2942,12 +2964,14 @@ var GROUP_LABEL = {
   symbol: "Symbol"
 };
 function TwRibbonTabBodyInsert(props) {
+  const strings = useChromeStrings();
   const entries = filterRegistryByTab("insert");
   const byGroup = groupEntriesByGroup(entries);
   return /* @__PURE__ */ jsx12(
     "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",
@@ -2958,7 +2982,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)
         },
@@ -2998,6 +3022,7 @@ var GROUP_LABEL2 = {
   ruler: "Ruler"
 };
 function TwRibbonTabBodyLayout(props) {
+  const strings = useChromeStrings();
   const entries = filterRegistryByTab("layout");
   const byGroup = {};
   for (const entry of entries) {
@@ -3009,6 +3034,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",
@@ -3019,7 +3045,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)
         },
@@ -3040,13 +3066,15 @@ function labelForEntry2(id) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-mode.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 function TwRibbonTabBodyMode(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ jsx14(
     "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
     }
@@ -3056,13 +3084,15 @@ function TwRibbonTabBodyMode(props) {
 // src/ui-tailwind/toolbar/tw-ribbon-tab-body-review.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function TwRibbonTabBodyReview(props) {
+  const strings = useChromeStrings();
   return /* @__PURE__ */ jsx15(
     "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
     }
@@ -3105,6 +3135,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",
@@ -6961,6 +6992,11 @@ function TwModePill(props) {
 
 // src/ui-tailwind/toolbar/tw-shell-header.tsx
 import { jsx as jsx26, jsxs as jsxs15 } from "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)",
@@ -6968,8 +7004,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";
@@ -7082,8 +7119,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)]",
@@ -7103,13 +7140,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__ */ jsx26(TwGlyphIcon, { name: "bar-blocks", className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx26("span", { className: atLeastStandard ? "inline" : "hidden", children: "Analytics" })
+                    /* @__PURE__ */ jsx26("span", { className: atLeastStandard ? "inline" : "hidden", children: strings.analyticsLabel })
                   ]
                 }
               ) : null,
@@ -12397,6 +12434,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";
@@ -12406,7 +12444,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"}`;
@@ -12436,7 +12474,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;
@@ -12515,7 +12553,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__ */ jsx37(
                               "span",
@@ -12524,7 +12562,7 @@ function TwStatusBar(props) {
                                 className: `h-1.5 w-1.5 shrink-0 rounded-[1px] ${STATUS_POSTURE_PIP_CLASS.blocked}`
                               }
                             ),
-                            /* @__PURE__ */ jsx37("span", { className: atLeastCompact ? "" : "hidden", children: "Export blocked" })
+                            /* @__PURE__ */ jsx37("span", { className: atLeastCompact ? "" : "hidden", children: strings.exportBlockedLabel })
                           ]
                         }
                       ) : null,
@@ -12558,7 +12596,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__ */ jsxs26("span", { className: "inline-flex h-5 items-center gap-1 rounded-[var(--r-2)] px-1.5 text-[var(--text-secondary)]", children: [
                     hiddenStoryCount,
@@ -12573,12 +12611,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__ */ jsxs26(
                     "button",
                     {
                       type: "button",
-                      "aria-label": "Track Changes",
+                      "aria-label": strings.trackedChangesLabel,
                       "aria-pressed": trackingEnabled,
                       disabled: trackingDisabled,
                       onClick: () => props.onTrackedChangesAuthoringChange?.(!trackingEnabled),
@@ -12615,7 +12653,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__ */ jsx37(
                         "div",
@@ -12752,13 +12790,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__ */ jsx37(
                       StatusChromeButton,
                       {
                         active: props.workspace === "canvas",
-                        ariaLabel: "Canvas view",
+                        ariaLabel: strings.canvasViewLabel,
                         disabled: !props.onWorkspaceModeChange,
                         onClick: () => props.onWorkspaceModeChange?.("canvas"),
                         children: /* @__PURE__ */ jsx37(TwGlyphIcon, { name: "desktop", className: "h-3 w-3", "aria-hidden": "true" })
@@ -12768,7 +12806,7 @@ function TwStatusBar(props) {
                       StatusChromeButton,
                       {
                         active: props.workspace === "page",
-                        ariaLabel: "Page view",
+                        ariaLabel: strings.pageViewLabel,
                         disabled: !props.onWorkspaceModeChange,
                         onClick: () => props.onWorkspaceModeChange?.("page"),
                         children: /* @__PURE__ */ jsx37(TwGlyphIcon, { name: "document", className: "h-3 w-3", "aria-hidden": "true" })
@@ -12788,13 +12826,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__ */ jsx37(
                         "button",
                         {
                           type: "button",
-                          "aria-label": "Zoom out",
+                          "aria-label": strings.zoomOutLabel,
                           disabled: !canDecreaseZoom,
                           onClick: () => applyZoom(zoomPercent - STATUS_ZOOM_BUTTON_STEP),
                           className: [
@@ -12806,7 +12844,7 @@ function TwStatusBar(props) {
                       /* @__PURE__ */ jsx37(
                         "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,
@@ -12837,7 +12875,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: [
@@ -19090,6 +19128,7 @@ function ChromePresetToolbar(props) {
 // src/ui-tailwind/toolbar/tw-analytics-ribbon.tsx
 import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 function TwAnalyticsRibbon(props) {
+  const strings = useChromeStrings();
   const commentThreads = props.comments?.threads ?? [];
   const resolvedCommentIds = props.comments?.resolvedCommentIds ?? [];
   const revisions = props.trackedChanges?.revisions ?? [];
@@ -19110,7 +19149,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__ */ jsxs33(
@@ -19118,34 +19157,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__ */ jsxs33(TwRibbonGroup, { label: "Document", children: [
-          /* @__PURE__ */ jsx48(FactCell, { label: "Pages", value: props.pageCount == null ? "..." : String(props.pageCount) }),
-          /* @__PURE__ */ jsx48(FactCell, { label: "Chars", value: formatCompactNumber(props.documentStats?.storyLength ?? 0) }),
-          /* @__PURE__ */ jsx48(FactCell, { label: "Export", value: props.exportBlocked ? "Blocked" : "Ready", tone: props.exportBlocked ? "blocked" : "ready" })
+        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: strings.documentGroupLabel, children: [
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.pagesLabel, value: props.pageCount == null ? "..." : String(props.pageCount) }),
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.charsLabel, value: formatCompactNumber(props.documentStats?.storyLength ?? 0) }),
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.exportLabel, value: props.exportBlocked ? strings.blockedLabel : strings.readyLabel, tone: props.exportBlocked ? "blocked" : "ready" })
         ] }),
-        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: "Review", children: [
-          /* @__PURE__ */ jsx48(FactCell, { label: "Items", value: String(totalReviewItems), tone: totalReviewItems > 0 ? "attention" : "neutral" }),
-          /* @__PURE__ */ jsx48(MetricCell, { label: "Changes", value: pendingChanges, color: "var(--sem-warning)" }),
-          /* @__PURE__ */ jsx48(MetricCell, { label: "Comments", value: openComments, color: "var(--markup-comment-ink)" })
+        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: strings.reviewGroupLabel, children: [
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.itemsLabel, value: String(totalReviewItems), tone: totalReviewItems > 0 ? "attention" : "neutral" }),
+          /* @__PURE__ */ jsx48(MetricCell, { label: strings.changesLabel, value: pendingChanges, color: "var(--sem-warning)" }),
+          /* @__PURE__ */ jsx48(MetricCell, { label: strings.commentsLabel, value: openComments, color: "var(--markup-comment-ink)" })
         ] }),
-        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: "Risk", children: [
-          /* @__PURE__ */ jsx48(FactCell, { label: "Opaque", value: String(props.documentStats?.opaqueFragmentCount ?? 0), tone: (props.documentStats?.opaqueFragmentCount ?? 0) > 0 ? "attention" : "neutral" }),
-          /* @__PURE__ */ jsx48(FactCell, { label: "Blocked", value: String(blocked), tone: blocked > 0 ? "blocked" : "neutral" })
+        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: strings.riskGroupLabel, children: [
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.opaqueLabel, value: String(props.documentStats?.opaqueFragmentCount ?? 0), tone: (props.documentStats?.opaqueFragmentCount ?? 0) > 0 ? "attention" : "neutral" }),
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.blockedLabel, value: String(blocked), tone: blocked > 0 ? "blocked" : "neutral" })
         ] }),
-        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: "Workflow", children: [
-          /* @__PURE__ */ jsx48(FactCell, { label: "Scopes", value: String(scopeCount) }),
-          /* @__PURE__ */ jsx48(MetricCell, { label: "Tasks", value: tasks, color: "var(--mode-workflow)" }),
-          /* @__PURE__ */ jsx48(MetricCell, { label: "Approvals", value: approvals, color: "var(--scope-review-marker)" }),
-          /* @__PURE__ */ jsx48(MetricCell, { label: "Blocked", value: blocked, color: "var(--sem-error)" })
+        /* @__PURE__ */ jsxs33(TwRibbonGroup, { label: strings.workflowGroupLabel, children: [
+          /* @__PURE__ */ jsx48(FactCell, { label: strings.scopesLabel, value: String(scopeCount) }),
+          /* @__PURE__ */ jsx48(MetricCell, { label: strings.tasksLabel, value: tasks, color: "var(--mode-workflow)" }),
+          /* @__PURE__ */ jsx48(MetricCell, { label: strings.approvalsLabel, value: approvals, color: "var(--scope-review-marker)" }),
+          /* @__PURE__ */ jsx48(MetricCell, { label: strings.blockedLabel, value: blocked, color: "var(--sem-error)" })
         ] }),
-        /* @__PURE__ */ jsx48(TwRibbonGroup, { label: "Scopes", children: /* @__PURE__ */ jsx48(ScopeBreakdown, { segments: scopeRailSegments }) }),
-        toolCount > 0 ? /* @__PURE__ */ jsx48(TwRibbonGroup, { label: "Tools", children: /* @__PURE__ */ jsx48(FactCell, { label: "Tools", value: String(toolCount) }) }) : null,
-        /* @__PURE__ */ jsx48(TwRibbonGroup, { label: "Next", children: visibleNextActions.slice(0, 2).map((action, index) => /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx48(TwRibbonGroup, { label: strings.scopesGroupLabel, children: /* @__PURE__ */ jsx48(ScopeBreakdown, { segments: scopeRailSegments, label: strings.scopeBreakdownLabel }) }),
+        toolCount > 0 ? /* @__PURE__ */ jsx48(TwRibbonGroup, { label: strings.toolsGroupLabel, children: /* @__PURE__ */ jsx48(FactCell, { label: strings.toolsGroupLabel, value: String(toolCount) }) }) : null,
+        /* @__PURE__ */ jsx48(TwRibbonGroup, { label: strings.nextGroupLabel, children: visibleNextActions.slice(0, 2).map((action, index) => /* @__PURE__ */ jsx48(
           "span",
           {
             className: "max-w-28 truncate px-1 text-[length:var(--tx-xs)] font-medium text-[var(--ink-secondary)]",
@@ -19199,7 +19239,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__ */ jsx48(BreakdownSegment, { value: counts.edit, total, color: "var(--scope-edit-marker)" }),