@beyondwork/docx-react-component 1.0.53 → 1.0.55

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

@@ -57,6 +57,10 @@ import {
   useVisiblePageIndexRange,
 } from "./page-stack/use-visible-block-range.ts";
 import { sliceBlocksForPage } from "./editor-surface/page-slice-util.ts";
+import {
+  findScrollAnchor,
+  restoreScrollAnchor,
+} from "./editor-surface/scroll-anchor.ts";
 import { TwPageBlockView } from "./editor-surface/tw-page-block-view.tsx";
 import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
 import type { SessionCapabilities } from "../runtime/session-capabilities";
@@ -140,14 +144,31 @@ export interface TwReviewWorkspaceProps {
     helpLabel?: string;
   };
   /**
-   * Opt-in floating mode dock pinned to the bottom of the workspace.
-   * Hosts pass the derived label / icon / actions; defaults to hidden.
+   * @deprecated — Lane 6b §6b.U4 (designsystem §6.26).
+   *
+   * The floating bottom-center mode dock is retained for back-compat but is
+   * off by default.  Its functionality is covered by TwShellHeader mode tabs
+   * + TwRoleActionRegion.  To render it, hosts must supply BOTH `modeDock`
+   * data and `experimental.showModeDock = true`.
    */
   modeDock?: {
     label: string;
     icon?: ReactNode;
     actions?: readonly import("./chrome/tw-mode-dock").TwModeDockAction[];
   };
+  /**
+   * Experimental feature flags.  Anything here is subject to change or
+   * removal without a major-version bump.  Do not depend on these in
+   * production consumers.
+   */
+  experimental?: {
+    /**
+     * Re-enable the deprecated TwModeDock floating bottom dock.  Defaults to
+     * `false` — the shell header + role action region supersede this surface
+     * per designsystem §6.26.
+     */
+    showModeDock?: boolean;
+  };
   document: ReactNode;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
@@ -1152,7 +1173,22 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 : undefined}
               onWorkspaceModeChange={(value) => {
                 dismissSelectionToolbar();
+                // L6d.U3: capture the block the viewport sits over,
+                // then restore the same block's scroll offset after
+                // the new mode has painted.  Two rAFs: the first waits
+                // for React to commit the mode change, the second
+                // waits for layout + the page-break widgets to paint
+                // before we write scrollTop.
+                const root = scrollRootRef.current;
+                const anchor = findScrollAnchor(root);
                 props.onWorkspaceModeChange(value);
+                if (anchor && typeof requestAnimationFrame === "function") {
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      restoreScrollAnchor(scrollRootRef.current, anchor);
+                    });
+                  });
+                }
               }}
               onToggleSidebar={() => {
                 dismissSelectionToolbar();
@@ -1220,9 +1256,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           </div>
         ) : null}
 
-        {/* Legacy TwReviewQueueBar is suppressed — review role's action region
-            now owns queue prev/next + counts inline in the top toolbar. */}
-
         {chromeVisibility.alerts ? <TwAlertBanner
           snapshot={snapshot}
           preserveOnlyCount={preserveOnlyCount}
@@ -1784,7 +1817,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             </div>
           ) : null}
         </div>
-        {props.modeDock ? (
+        {props.modeDock && props.experimental?.showModeDock === true ? (
           <TwModeDock
             label={props.modeDock.label}
             icon={props.modeDock.icon}

package/src/ui-tailwind/chrome/review-queue-bar.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-
-import { ChevronLeft, ChevronRight, MessageSquareText, Rows3 } from "lucide-react";
-
-import type { ReviewQueueSnapshot } from "../../api/public-types";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-/** @deprecated Use the role action region (TwRoleActionRegion) for queue navigation. */
-export interface TwReviewQueueBarProps {
-  queue: ReviewQueueSnapshot;
-  onPrevious?: () => void;
-  onNext?: () => void;
-}
-
-const buttonClass =
-  "inline-flex h-8 items-center gap-1 rounded-lg border border-border/80 bg-canvas px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-40";
-
-export function TwReviewQueueBar(props: TwReviewQueueBarProps) {
-  const activeItem = props.queue.items[props.queue.activeIndex] ?? null;
-  const activeLabel =
-    activeItem?.label ??
-    (props.queue.totalCount > 0 ? "Review queue" : "No review items");
-  const activeKindLabel = activeItem ? formatReviewQueueItemKind(activeItem.kind) : null;
-
-  return (
-    <div className="border-b border-border/80 bg-surface/80 px-3 py-2.5 backdrop-blur-sm">
-      <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          aria-label="Previous review item"
-          className={buttonClass}
-          disabled={props.queue.totalCount === 0}
-          onMouseDown={preserveEditorSelectionMouseDown}
-          onClick={props.onPrevious}
-        >
-          <ChevronLeft className="h-3.5 w-3.5" />
-          Prev
-        </button>
-        <button
-          type="button"
-          aria-label="Next review item"
-          className={buttonClass}
-          disabled={props.queue.totalCount === 0}
-          onMouseDown={preserveEditorSelectionMouseDown}
-          onClick={props.onNext}
-        >
-          Next
-          <ChevronRight className="h-3.5 w-3.5" />
-        </button>
-        <div className="ml-auto flex flex-wrap items-center gap-2 text-xs text-secondary">
-          <span className="inline-flex items-center gap-1 rounded-full bg-canvas px-2.5 py-1 font-medium text-primary">
-            <MessageSquareText className="h-3.5 w-3.5 text-comment" />
-            {props.queue.openCount} open
-          </span>
-          <span className="inline-flex items-center gap-1 rounded-full bg-canvas px-2.5 py-1 font-medium text-primary">
-            <Rows3 className="h-3.5 w-3.5 text-accent" />
-            {props.queue.totalCount} total
-          </span>
-        </div>
-      </div>
-      <div className="mt-2 flex items-center gap-2 min-w-0">
-        {activeKindLabel ? (
-          <span
-            className="inline-flex shrink-0 rounded-full bg-canvas px-2 py-0.5 text-[11px] font-medium text-secondary"
-            data-testid="review-queue-item-kind"
-          >
-            {activeKindLabel}
-          </span>
-        ) : null}
-        <div className="min-w-0 truncate text-sm font-medium text-primary">{activeLabel}</div>
-      </div>
-    </div>
-  );
-}
-
-function formatReviewQueueItemKind(kind: ReviewQueueSnapshot["items"][number]["kind"]): string {
-  switch (kind) {
-    case "comment":
-      return "Comment";
-    case "change":
-      return "Redline";
-    case "section_mark":
-      return "Tag";
-  }
-}