@beyondwork/docx-react-component 1.0.80 → 1.0.81

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/api/public-types.ts

@@ -5611,17 +5611,15 @@ export interface WordReviewEditorProps {
     import("../ui/headless/chrome-registry").SelectionToolRegistryEntry
   >;
   /**
-   * Phase C.γ host-callback bag. When supplied, the workspace mounts
-   * `TwWorkspaceChromeHost` which in turn mounts the right-click
-   * context menu (`TwContextMenuPortal`) and the Ctrl/Cmd+K command
-   * palette (`TwCommandPaletteMount`), dispatching through the shared
-   * `editorActionRegistry`. Actions without a wired callback are
-   * hidden from every surface — progressive disclosure per
-   * `designsystem.md §2.1 principle 4`.
-   *
-   * Omit to preserve pre-Phase-C behavior (no right-click menu, no
-   * palette). Required for the default editor to expose the
-   * Phase C.γ surfaces shipped in `5fce913a`.
+   * Optional host-callback extension bag for workspace command chrome.
+   * The default `<WordReviewEditor />` path now mounts
+   * `TwWorkspaceChromeHost` with product-backed commands for formatting,
+   * paragraph/list actions, comments, and table insertion/structure.
+   * Supplying this bag overrides or extends those defaults for host-owned
+   * actions such as custom table properties, hyperlink handling, or
+   * object metadata. Actions without a wired callback are hidden from
+   * every surface — progressive disclosure per `designsystem.md §2.1
+   * principle 4`.
    */
   editorActionHost?: import("../ui-tailwind/chrome/editor-action-registry").EditorActionHostCallbacks;
   /**
@@ -5637,8 +5635,8 @@ export interface WordReviewEditorProps {
   /**
    * Suppress the global Ctrl/Cmd+K palette listener — e.g. when a
    * higher-priority modal captures keyboard focus. Defaults to
-   * `false` (palette listener is active when `editorActionHost` is
-   * supplied).
+   * `false` (the default product command palette listener is active
+   * unless this prop suppresses it).
    */
   commandPaletteDisabled?: boolean;
   /**

package/src/api/v3/ui/chrome-composition.ts

@@ -131,6 +131,7 @@ export interface ChromeCompositionInput {
     | "simple"
     | "all";
   readonly activeRailTab?: EditorRailTab | null;
+  readonly railOpen?: boolean;
   readonly pinnedRailTabs?: ReadonlySet<EditorRailTab>;
   readonly density?: ChromeDensity;
   readonly containerWidth?: number;
@@ -255,13 +256,18 @@ function resolveVisibleRailTabs(
   railOpen: boolean,
   diagnosticsSignal: DiagnosticsSignal,
   pinned: ReadonlySet<EditorRailTab>,
+  mode: EditorChromeMode,
 ): ReadonlySet<EditorRailTab> {
   const visible = new Set<EditorRailTab>();
   if (railOpen) {
     visible.add("comments");
     visible.add("changes");
     visible.add("workflow");
-    if (diagnosticsSignal.severity !== "none" || diagnosticsSignal.count > 0) {
+    if (
+      diagnosticsSignal.severity !== "none" ||
+      diagnosticsSignal.count > 0 ||
+      mode === "more"
+    ) {
       visible.add("health");
     }
   }
@@ -294,11 +300,13 @@ export function resolveChromeComposition(
   const density: ChromeDensity = input.density ?? "standard";
   const pinnedRailTabs: ReadonlySet<EditorRailTab> =
     input.pinnedRailTabs ?? new Set<EditorRailTab>();
-  const railOpen = options.showReviewRail && visibility.reviewRail;
+  const railOpen =
+    input.railOpen ?? (options.showReviewRail && visibility.reviewRail);
   const visibleTabs = resolveVisibleRailTabs(
     railOpen,
     diagnosticsSignal,
     pinnedRailTabs,
+    mode,
   );
 
   // Default active tab: honor caller; otherwise land on the mode-appropriate tab.

package/src/ui/WordReviewEditor.tsx

@@ -186,6 +186,7 @@ import { EditorShellView } from "./editor-shell-view.tsx";
 import { TwDebugPresentation } from "../ui-tailwind/debug/index.ts";
 import { shellPasteFragmentParser as SHELL_PASTE_FRAGMENT_PARSER } from "../shell/paste-adapter.ts";
 import { EditorSurfaceController } from "./editor-surface-controller.tsx";
+import type { EditorActionHostCallbacks } from "../ui-tailwind/chrome/editor-action-registry";
 import type { TwWorkspaceChromeHostController } from "../ui-tailwind/chrome/tw-workspace-chrome-host";
 import {
   resolveChromePreset,
@@ -3306,6 +3307,63 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       },
     });
 
+    const productEditorActionHost = useMemo<EditorActionHostCallbacks>(() => {
+      const runClipboardCommand = (command: "copy" | "cut") => {
+        try {
+          globalThis.document?.execCommand?.(command);
+        } catch {
+          // Browser-native clipboard commands are best-effort fallbacks.
+        }
+      };
+
+      const defaultHost: EditorActionHostCallbacks = {
+        onUndo: commands.onUndo,
+        onRedo: commands.onRedo,
+        onCut: () => runClipboardCommand("cut"),
+        onCopy: () => runClipboardCommand("copy"),
+        onPaste: () => {
+          const readText = globalThis.navigator?.clipboard?.readText;
+          if (typeof readText !== "function") return;
+          void readText.call(globalThis.navigator.clipboard)
+            .then((text: string) => {
+              if (!text) return;
+              dispatchTextCommand(
+                activeRuntime,
+                { type: "insert-text", text },
+                DISPATCH_CONTEXT,
+              );
+            })
+            .catch(() => {
+              // Clipboard permission failures should not break the menu.
+            });
+        },
+        onToggleBold: commands.onToggleBold,
+        onToggleItalic: commands.onToggleItalic,
+        onToggleUnderline: commands.onToggleUnderline,
+        onToggleStrikethrough: commands.onToggleStrikethrough,
+        onToggleBulletedList: commands.onToggleBulletedList,
+        onToggleNumberedList: commands.onToggleNumberedList,
+        onOutdent: commands.onOutdent,
+        onIndent: commands.onIndent,
+        onSetAlignment: (alignment) => commands.onSetAlignment?.(alignment),
+        onInsertTable: commands.onInsertTable,
+        onAddComment: commands.onAddComment,
+        onInsertRowAbove: commands.onAddRowBefore,
+        onInsertRowBelow: commands.onAddRowAfter,
+        onInsertColumnBefore: commands.onAddColumnBefore,
+        onInsertColumnAfter: commands.onAddColumnAfter,
+        onDeleteRow: commands.onDeleteRow,
+        onDeleteColumn: commands.onDeleteColumn,
+        onDeleteTable: commands.onDeleteTable,
+        onMergeCells: commands.onMergeCells,
+        onSplitCell: commands.onSplitCell,
+      };
+
+      return editorActionHost
+        ? { ...defaultHost, ...editorActionHost }
+        : defaultHost;
+    }, [activeRuntime, commands, editorActionHost]);
+
     const harnessShowUnsupportedPreviews = readHarnessDebugPortsFlag(__harnessDebugPorts, "unsupportedObjectPreviews");
     const effectiveShowUnsupportedPreviews = computeEffectiveShowUnsupportedPreviews({
       harnessShowUnsupportedPreviews,
@@ -3342,7 +3400,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         activeWorkflowScopeIds={workflowScopeSnapshot?.activeWorkItem?.scopeIds ?? []}
         workflowMetadata={workflowMarkupSnapshot?.metadata}
         onSelectionToolbarAnchorChange={handleSelectionToolbarAnchorChange}
-        {...(editorActionHost ? { onContextMenuRequested: handleContextMenuRequested } : {})}
+        onContextMenuRequested={handleContextMenuRequested}
         {...editorCallbacks}
         dispatchRuntimeCommand={(command) =>
           activeRuntime.applyActiveStoryTextCommand(command as never)
@@ -3420,8 +3478,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         interactionGuardSnapshot={interactionGuardSnapshot}
         chromePreset={effectiveChromePreset}
         chromeOptions={chromeOptions}
-        {...(editorActionHost ? { editorActionHost } : {})}
-        {...(editorActionHost ? { chromeControllerRef: teedChromeControllerRef } : {})}
+        density={density}
+        editorActionHost={productEditorActionHost}
+        chromeControllerRef={teedChromeControllerRef}
         {...(commandPaletteDisabled !== undefined
           ? { commandPaletteDisabled }
           : {})}

package/src/ui/editor-shell-view.tsx

@@ -83,6 +83,7 @@ export interface EditorShellViewProps {
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   chromePreset?: WordReviewEditorChromePreset;
   chromeOptions?: Partial<WordReviewEditorChromeOptions>;
+  density?: "compact" | "standard" | "comfortable";
   editorActionHost?: import("../ui-tailwind/chrome/editor-action-registry.ts").EditorActionHostCallbacks;
   chromeControllerRef?: React.Ref<
     import("../ui-tailwind/chrome/tw-workspace-chrome-host.tsx").TwWorkspaceChromeHostController

package/src/ui-tailwind/chrome/editor-action-registry.ts

@@ -66,11 +66,30 @@ export interface EditorActionDispatchContext {
  * `WordReviewEditorRef`; the surface is intentionally minimal now.
  */
 export interface EditorActionHostCallbacks {
+  // Command history
+  readonly onUndo?: () => void;
+  readonly onRedo?: () => void;
+
   // Clipboard (always available — browser-native fallback acceptable)
   readonly onCut?: () => void;
   readonly onCopy?: () => void;
   readonly onPaste?: () => void;
 
+  // Formatting / paragraph operations (plain text + table-cell targets)
+  readonly onToggleBold?: () => void;
+  readonly onToggleItalic?: () => void;
+  readonly onToggleUnderline?: () => void;
+  readonly onToggleStrikethrough?: () => void;
+  readonly onToggleBulletedList?: () => void;
+  readonly onToggleNumberedList?: () => void;
+  readonly onOutdent?: () => void;
+  readonly onIndent?: () => void;
+  readonly onSetAlignment?: (
+    alignment: "left" | "center" | "right" | "justify",
+  ) => void;
+  readonly onInsertTable?: () => void;
+  readonly onAddComment?: () => void;
+
   // Tracked-change operations (suggestion target)
   readonly onAcceptSuggestion?: () => void;
   readonly onRejectSuggestion?: () => void;
@@ -87,6 +106,7 @@ export interface EditorActionHostCallbacks {
   readonly onInsertColumnAfter?: () => void;
   readonly onDeleteRow?: () => void;
   readonly onDeleteColumn?: () => void;
+  readonly onDeleteTable?: () => void;
   readonly onMergeCells?: () => void;
   readonly onSplitCell?: () => void;
   readonly onOpenTableProperties?: () => void;
@@ -220,6 +240,24 @@ function mkArg<A, K extends keyof EditorActionHostCallbacks>(opts: {
 }
 
 export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
+  // -------- History --------
+  mk({
+    id: "undo",
+    label: "Undo",
+    shortcut: ["Mod", "Z"],
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onUndo",
+  }),
+  mk({
+    id: "redo",
+    label: "Redo",
+    shortcut: ["Mod", "Shift", "Z"],
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onRedo",
+  }),
+
   // -------- Clipboard (always available across every target kind) --------
   mk({
     id: "cut",
@@ -271,6 +309,113 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     callback: "onPaste",
   }),
 
+  // -------- Formatting / paragraph --------
+  mk({
+    id: "format-bold",
+    label: "Bold",
+    shortcut: ["Mod", "B"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleBold",
+  }),
+  mk({
+    id: "format-italic",
+    label: "Italic",
+    shortcut: ["Mod", "I"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleItalic",
+  }),
+  mk({
+    id: "format-underline",
+    label: "Underline",
+    shortcut: ["Mod", "U"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleUnderline",
+  }),
+  mk({
+    id: "format-strikethrough",
+    label: "Strikethrough",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleStrikethrough",
+  }),
+  mk({
+    id: "list-bulleted",
+    label: "Bulleted list",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleBulletedList",
+  }),
+  mk({
+    id: "list-numbered",
+    label: "Numbered list",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onToggleNumberedList",
+  }),
+  mk({
+    id: "paragraph-outdent",
+    label: "Decrease indent",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onOutdent",
+  }),
+  mk({
+    id: "paragraph-indent",
+    label: "Increase indent",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onIndent",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-left",
+    label: "Align left",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "left",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-center",
+    label: "Align center",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "center",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-right",
+    label: "Align right",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "right",
+  }),
+  mkArg<"left" | "center" | "right" | "justify", "onSetAlignment">({
+    id: "align-justify",
+    label: "Justify",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetAlignment",
+    payload: "justify",
+  }),
+  mk({
+    id: "insert-table",
+    label: "Insert table",
+    group: "table",
+    targetKinds: ["plain-text"],
+    callback: "onInsertTable",
+  }),
+  mk({
+    id: "comment-add",
+    label: "Add comment",
+    group: "comment",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onAddComment",
+  }),
+
   // -------- Suggestion / tracked change --------
   mk({
     id: "accept-suggestion",
@@ -379,6 +524,14 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     targetKinds: ["table-column", "table-whole"],
     callback: "onDeleteColumn",
   }),
+  // ── Whole-table destructive op ──
+  mk({
+    id: "table-delete-table",
+    label: "Delete table",
+    group: "table",
+    targetKinds: ["table-whole"],
+    callback: "onDeleteTable",
+  }),
   // ── Whole-table — properties / borders surface at any tier so
   //    they are reachable from a single right-click in a cell ──
   mk({

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -75,6 +75,7 @@ export interface TwSelectionToolHostProps {
   onDistributeColumnsEvenly?: () => void;
   onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  onOpenTableMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 /**
@@ -299,6 +300,7 @@ function renderTool(
           onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
           onSetTableAlignment={props.onSetTableAlignment}
           onSetCellVerticalAlign={props.onSetCellVerticalAlign}
+          onOpenTableMore={props.onOpenTableMore}
         />
       );
     case "comment-thread":

package/src/ui-tailwind/chrome/tw-selection-tool-structure.tsx

@@ -35,6 +35,7 @@ export interface TwSelectionToolStructureProps {
   onDistributeColumnsEvenly?: () => void;
   onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  onOpenTableMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
@@ -58,7 +59,10 @@ export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
       return (
         <TwTableContextToolbar
           disabled={!props.model.canMutate}
-          tableContext={props.model.activeTable ?? null}          tableStyles={props.model.tableStyles ?? []}
+          tableContext={props.model.activeTable ?? null}
+          tableStyles={props.model.tableStyles ?? []}
+          compact={true}
+          onOpenMore={props.onOpenTableMore}
           onSetTableStyle={props.onSetTableStyle}
           onAddRowBefore={props.onAddRowBefore}
           onAddRowAfter={props.onAddRowAfter}

package/src/ui-tailwind/chrome/use-context-menu-controller.ts

@@ -58,6 +58,18 @@ function tableContextToKinds(
   }
 }
 
+function mergeTableTierKinds(
+  kinds: readonly TargetKind[],
+  tableContext: TableStructureContextSnapshot | null | undefined,
+): readonly TargetKind[] {
+  if (!kinds.includes("table-cell") || !tableContext) return kinds;
+  const merged = [...kinds];
+  for (const k of tableContextToKinds(tableContext)) {
+    if (!merged.includes(k)) merged.push(k);
+  }
+  return merged;
+}
+
 export interface ContextMenuRequest {
   readonly clientX: number;
   readonly clientY: number;
@@ -149,14 +161,7 @@ export function useContextMenuController(
       // is in a table cell. Cell-level ops carry every table-* kind
       // (so they are still visible) and tier-only ops (delete row /
       // delete column) gate on the matching kind.
-      const tierKinds =
-        baseKinds.includes("table-cell") && tableContext
-          ? tableContextToKinds(tableContext)
-          : [];
-      const merged = [...baseKinds];
-      for (const k of tierKinds) {
-        if (!merged.includes(k)) merged.push(k);
-      }
+      const merged = mergeTableTierKinds(baseKinds, tableContext);
       const entries = buildEntries(merged);
       // Progressive disclosure: if no actions resolve (every host callback
       // absent + no scope-anchor + etc), don't open an empty menu.  Let
@@ -180,7 +185,7 @@ export function useContextMenuController(
       clientY: number;
       kinds: readonly TargetKind[];
     }) => {
-      const entries = buildEntries(args.kinds);
+      const entries = buildEntries(mergeTableTierKinds(args.kinds, tableContext));
       if (entries.length === 0) return;
       setState({
         open: true,
@@ -189,7 +194,7 @@ export function useContextMenuController(
         entries,
       });
     },
-    [buildEntries],
+    [buildEntries, tableContext],
   );
 
   // D.5.Nit1 — the return value is consumed directly by the caller

package/src/ui-tailwind/review-workspace/types.ts

@@ -150,6 +150,7 @@ export interface TwReviewWorkspaceProps {
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   chromePreset?: WordReviewEditorChromePreset;
   chromeOptions?: Partial<WordReviewEditorChromeOptions>;
+  density?: "compact" | "standard" | "comfortable";
   /** P9g — live collab session for the `"collab"` chrome preset's top nav. */
   collabSession?: import("../../runtime/collab-session.ts").CollabSession;
   collabTransportStatus?: import("../../api/awareness-identity-types.ts").TransportStatus;

package/src/ui-tailwind/review-workspace/use-workspace-composition.ts

@@ -10,10 +10,18 @@ export type UseWorkspaceCompositionOptions = Pick<
   ChromeCompositionInput,
   | "chromePreset"
   | "chromeOptions"
+  | "chromeVisibility"
   | "reviewMode"
   | "role"
+  | "readOnly"
   | "markupDisplay"
+  | "activeRailTab"
+  | "railOpen"
+  | "pinnedRailTabs"
+  | "density"
+  | "containerWidth"
   | "diagnosticsSignal"
+  | "modeOverride"
 >;
 
 /**
@@ -49,11 +57,11 @@ export type UseWorkspaceCompositionOptions = Pick<
  * downstream. Review M6 (2026-04-22) flagged this as a silent perf
  * regression risk.
  *
- * `readOnly` is intentionally omitted from the option set: the
- * composition seam is independent of read-only posture today; Phase E
- * threads it through the interactionGuardSnapshot wiring once the rail
- * owns the full posture composition.
- */
+   * Product-lane note: this hook intentionally accepts the full set of
+   * mounted composition signals the resolver already models. Leaving these
+   * out makes `resolveChromeComposition()` look canonical in tests while the
+   * shipped editor silently falls back to stale defaults.
+   */
 export function useWorkspaceComposition(
   options: UseWorkspaceCompositionOptions,
 ): ReturnType<typeof resolveChromeComposition> {
@@ -61,10 +69,18 @@ export function useWorkspaceComposition(
   const {
     chromePreset,
     chromeOptions,
+    chromeVisibility,
     reviewMode,
     role,
+    readOnly,
     markupDisplay,
+    activeRailTab,
+    railOpen,
+    pinnedRailTabs,
+    density,
+    containerWidth,
     diagnosticsSignal,
+    modeOverride,
   } = options;
 
   return useMemo(
@@ -72,15 +88,39 @@ export function useWorkspaceComposition(
       const input: ChromeCompositionInput = {
         chromePreset,
         chromeOptions,
+        chromeVisibility,
         reviewMode,
         role,
+        readOnly,
         markupDisplay,
+        activeRailTab,
+        railOpen,
+        pinnedRailTabs,
+        density,
+        containerWidth,
         diagnosticsSignal,
+        modeOverride,
       };
       return ui
         ? ui.chrome.getComposition(input)
         : resolveChromeComposition(input);
     },
-    [ui, chromePreset, chromeOptions, reviewMode, role, markupDisplay, diagnosticsSignal],
+    [
+      ui,
+      chromePreset,
+      chromeOptions,
+      chromeVisibility,
+      reviewMode,
+      role,
+      readOnly,
+      markupDisplay,
+      activeRailTab,
+      railOpen,
+      pinnedRailTabs,
+      density,
+      containerWidth,
+      diagnosticsSignal,
+      modeOverride,
+    ],
   );
 }

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -43,7 +43,10 @@ import {
 import { TwContextBand } from "./chrome/tw-context-band";
 import { TwRoleActionRegion } from "./toolbar/tw-role-action-region";
 import { LocalSurfaceArbiterContext } from "./chrome/local-surface-arbiter";
-import { TwWorkspaceChromeHost } from "./chrome/tw-workspace-chrome-host";
+import {
+  TwWorkspaceChromeHost,
+  type TwWorkspaceChromeHostController,
+} from "./chrome/tw-workspace-chrome-host";
 import { TwChromeOverlay, TwPageStackOverlayLayer } from "./chrome-overlay";
 import { TwFloatingImageLayer } from "./page-stack/tw-floating-image-layer.tsx";
 import { shouldHidePageBorderForSelection } from "./review-workspace/paragraph-layout.ts";
@@ -85,16 +88,14 @@ export type {
 import type { EditorRole } from "../api/public-types.ts";
 
 // Default shell-header modes for the workspace's default composition.
-// Designsystem §6.1 prescribes a 4-mode switcher (edit / review / workflow
-// / more).  "more" is kept in the layout for parity but marked disabled
-// until its handler is defined by refactor/11 Slice 7 + refactor/10
-// Slice 5 (Phase Q debug UX).  Hosts that want a fully-wired 4-mode set
-// supply their own `shellHeader` prop.
+// Designsystem §6.1 prescribes a 4-mode switcher; all four are reachable in
+// the product path. "More" is a shell-owned diagnostics/search posture, so it
+// uses `ChromeCompositionInput.modeOverride` instead of changing runtime role.
 const DEFAULT_WORKSPACE_SHELL_MODES: readonly ShellHeaderModeOption[] = [
   { id: "edit", label: "Edit" },
   { id: "review", label: "Review" },
   { id: "workflow", label: "Workflow" },
-  { id: "more", label: "More", disabled: true },
+  { id: "more", label: "More" },
 ];
 
 function editorRoleToShellMode(role: EditorRole): ShellHeaderMode {
@@ -121,6 +122,47 @@ function shellModeToEditorRole(mode: ShellHeaderMode): EditorRole | null {
   }
 }
 
+function TwMoreContextBandContent(props: {
+  onOpenDiagnostics: () => void;
+  onOpenCompatibility: () => void;
+  onOpenOutline: () => void;
+  onOpenSearch?: () => void;
+}): React.JSX.Element {
+  return (
+    <div
+      className="flex min-w-0 items-center gap-1"
+      data-testid="more-context-band-content"
+    >
+      <ContextBandButton label="Diagnostics" onClick={props.onOpenDiagnostics} />
+      <ContextBandButton label="Compatibility" onClick={props.onOpenCompatibility} />
+      <ContextBandButton label="Outline" onClick={props.onOpenOutline} />
+      <ContextBandButton
+        label="Search"
+        onClick={props.onOpenSearch}
+        disabled={!props.onOpenSearch}
+      />
+    </div>
+  );
+}
+
+function ContextBandButton(props: {
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-7 items-center rounded-[var(--radius-md)] px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.label}
+    </button>
+  );
+}
+
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const props = {
     ...inputProps,
@@ -128,6 +170,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   } as TwReviewWorkspaceProps & EditorCommandBag;
   const { snapshot, viewState } = props;
   const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
+  const workspaceChromeControllerRef =
+    useRef<TwWorkspaceChromeHostController | null>(null);
+  const [shellModeOverride, setShellModeOverride] =
+    useState<ShellHeaderMode | null>(null);
   // P8.11 — body slot wrapping `{props.document}` (the PM surface) + scroll
   // root ref.  The chrome layer's `TwPageStackChromeLayer` needs both to
   // measure per-page rects and to reparent PM's DOM node across band
@@ -382,18 +428,46 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     props.onSetParagraphTabStops,
   ]);
 
+  const setWorkspaceChromeController = useCallback(
+    (instance: TwWorkspaceChromeHostController | null) => {
+      workspaceChromeControllerRef.current = instance;
+      const ref = props.chromeControllerRef;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(instance);
+        return;
+      }
+      (ref as React.MutableRefObject<TwWorkspaceChromeHostController | null>).current =
+        instance;
+    },
+    [props.chromeControllerRef],
+  );
+
+  const openTableMoreMenu = useCallback(
+    (coords: { clientX: number; clientY: number }) => {
+      workspaceChromeControllerRef.current?.openWithKinds({
+        ...coords,
+        kinds: ["table-cell"],
+      });
+    },
+    [],
+  );
+
   // Audit §2.4 — the shell header is ALWAYS present in default composition.
   // When the host does not supply a pre-assembled shell node, fall back to
   // a default TwShellHeader wired to the workspace's editor-role state so
   // the mode tabs actually change the active role instead of being
-  // decorative.  The "more" tab is included for layout parity with §6.1
-  // but disabled until its handler is defined (Phase Q debug UX / Slice 7).
+  // decorative. The "more" tab is shell-owned diagnostics/search posture:
+  // it drives composition mode via `modeOverride` and does not mutate the
+  // runtime editor role.
   // Host-supplied shells continue to win (back-compat).
   const defaultShellModes: readonly ShellHeaderModeOption[] =
     DEFAULT_WORKSPACE_SHELL_MODES;
   const defaultShellActiveMode: ShellHeaderMode = editorRoleToShellMode(
     viewState.editorRole,
   );
+  const activeShellMode: ShellHeaderMode =
+    shellModeOverride === "more" ? "more" : defaultShellActiveMode;
   // coord-11 §21 — host-supplied shellHeader wins; otherwise the default
   // TwShellHeader mounts only when `chromeVisibility.shellHeader === true`
   // (default for every preset except `selection`). The `selection` preset
@@ -406,8 +480,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         ? (
           <TwShellHeader
             modes={defaultShellModes}
-            activeMode={defaultShellActiveMode}
+            activeMode={activeShellMode}
             onModeChange={(mode) => {
+              if (mode === "more") {
+                setShellModeOverride("more");
+                setReviewRailOpen(true);
+                props.onActiveRailTabChange?.("health");
+                return;
+              }
+              setShellModeOverride(null);
               const nextRole = shellModeToEditorRole(mode);
               if (nextRole !== null && nextRole !== viewState.editorRole) {
                 props.onEditorRoleChange?.(nextRole);
@@ -444,10 +525,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const composition = useWorkspaceComposition({
     chromePreset,
     chromeOptions: props.chromeOptions,
+    chromeVisibility: props.chromeVisibility,
     reviewMode: props.reviewMode,
     role: viewState.editorRole,
+    readOnly: snapshot.readOnly,
     markupDisplay: props.markupDisplay,
+    activeRailTab: props.activeRailTab,
+    railOpen: reviewRailOpen,
+    density: props.density,
+    containerWidth: viewportWidth,
     diagnosticsSignal,
+    modeOverride: shellModeOverride === "more" ? "more" : undefined,
   });
   const showHealthRailTab = composition.rail.visibleTabs.has("health");
 
@@ -481,7 +569,20 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
          */}
         {chromeVisibility.toolbar ? (
           <TwContextBand mode={composition.mode}>
-            {viewState.editorRole ? (
+            {composition.mode === "more" ? (
+              <TwMoreContextBandContent
+                onOpenDiagnostics={() => {
+                  setReviewRailOpen(true);
+                  props.onActiveRailTabChange?.("health");
+                }}
+                onOpenCompatibility={() => {
+                  setReviewRailOpen(true);
+                  props.onActiveRailTabChange?.("health");
+                }}
+                onOpenOutline={() => setNavOpen(true)}
+                onOpenSearch={props.reviewRailFooter?.onSearch}
+              />
+            ) : viewState.editorRole ? (
               <TwRoleActionRegion
                 role={viewState.editorRole}
                 policy={scopedChromePolicy}
@@ -574,9 +675,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           <TwWorkspaceChromeHost
             mode={composition.mode}
             editorActionHost={props.editorActionHost}
-            {...(props.chromeControllerRef
-              ? { controllerRef: props.chromeControllerRef }
-              : {})}
+            controllerRef={setWorkspaceChromeController}
             {...(props.commandPaletteDisabled !== undefined
               ? { paletteDisabled: props.commandPaletteDisabled }
               : {})}
@@ -875,6 +974,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
                     onSetTableAlignment={props.onSetTableAlignment}
                     onSetCellVerticalAlign={props.onSetCellVerticalAlign}
+                    onOpenTableMore={openTableMoreMenu}
                     chromePins={viewState.chromePins}
                     onChromePinChange={props.onChromePinChange}
                   />