@beyondwork/docx-react-component 1.0.80 → 1.0.82

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
@@ -320,6 +366,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     pageStackScrollRoot,
     snapshot,
     layoutFacet: props.layoutFacet,
+    geometryFacet: props.geometryFacet,
+    renderFrameRevision,
+    viewportScale: zoomScale,
   });
 
   const { dismissSelectionToolbar, runWithSelectionToolbarDismiss } =
@@ -382,18 +431,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 +483,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 +528,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 +572,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 +678,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 +977,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
                     onSetTableAlignment={props.onSetTableAlignment}
                     onSetCellVerticalAlign={props.onSetCellVerticalAlign}
+                    onOpenTableMore={openTableMoreMenu}
                     chromePins={viewState.chromePins}
                     onChromePinChange={props.onChromePinChange}
                   />