@beyondwork/docx-react-component 1.0.53 → 1.0.54

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -174,6 +174,40 @@ export interface TwToolbarProps {
   chromePins?: ChromePinsState;
   /** Called when the user detaches or re-attaches the topnav. */
   onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
+
+  /**
+   * Lane 6b §6b.U1 — unread count badges on the sidebar toggle when the
+   * review rail is closed.  Hosts pass summed open-comment / open-change
+   * counts from the runtime snapshot; the badge only shows when
+   * `isSidebarOpen === false` and `(openCommentCount + openChangeCount) > 0`.
+   */
+  openCommentCount?: number;
+  openChangeCount?: number;
+
+  /**
+   * Lane 6b §6b.U2 — mixed-value grammar for the three style / font
+   * dropdowns.  When `true`, the trigger renders italic "Mixed" instead
+   * of the current value (selection spans different values).  Hosts
+   * compute this from whatever mixed-selection signal their runtime
+   * exposes; undefined keeps today's single-value behaviour.
+   */
+  hasMixedParagraphStyle?: boolean;
+  hasMixedFontFamily?: boolean;
+  hasMixedFontSize?: boolean;
+
+  /**
+   * Lane 6b §6b.U3 — per-item disabled-explanation reasons for the
+   * Insert menu.  When the item is disabled (either because its handler
+   * is undefined or because `canInsertStructural` is false), hovering
+   * it surfaces `title="Not available: {reason}"` so the user understands
+   * WHY the capability is missing in the current context.
+   */
+  insertDisabledReasons?: {
+    pageBreak?: string;
+    table?: string;
+    image?: string;
+    sectionBreak?: string;
+  };
 }
 
 export interface ToolbarInteractionPolicy {
@@ -275,11 +309,26 @@ export function TwToolbar(props: TwToolbarProps) {
 
   return (
     <header
+      data-testid="tw-toolbar"
+      style={
+        isCompact
+          ? undefined
+          : {
+              // Lane 6b §6b.U5 — density opt-in.  Scales the 40 px base
+              // by `--space-density-multiplier` so `data-density="compact"`
+              // shrinks the toolbar to ~34 px and `comfortable` expands
+              // it to ~46 px.  Wrap mode keeps flex-wrap semantics in
+              // compact viewports.
+              height:
+                "calc(40px * var(--space-density-multiplier, 1))",
+            }
+      }
       className={[
-        "shrink-0 rounded-xl border border-border/70 bg-canvas/92 px-2.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)] backdrop-blur-sm",
+        "shrink-0 rounded-[var(--radius-sm)] border border-[var(--color-border-subtle)]",
+        "bg-[var(--color-bg-chrome)]/92 px-2.5 shadow-[var(--shadow-soft)] backdrop-blur-sm",
         isCompact
           ? "flex min-h-10 flex-wrap items-center gap-1.5 py-1.5"
-          : "flex h-10 items-center gap-1",
+          : "flex items-center gap-1",
       ].join(" ")}
     >
       {/* Left cluster: undo/redo + formatting */}
@@ -287,12 +336,14 @@ export function TwToolbar(props: TwToolbarProps) {
         <TwToolbarIconButton
           icon={Undo2}
           label="Undo"
+          shortcut="⌘Z"
           disabled={caps ? !caps.canUndo : true}
           onClick={props.onUndo}
         />
         <TwToolbarIconButton
           icon={Redo2}
           label="Redo"
+          shortcut="⌘⇧Z"
           disabled={caps ? !caps.canRedo : true}
           onClick={props.onRedo}
         />
@@ -304,17 +355,20 @@ export function TwToolbar(props: TwToolbarProps) {
               disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
               styles={paragraphStyles}
               value={props.formattingState?.paragraphStyleId}
+              hasMixedValue={props.hasMixedParagraphStyle ?? false}
               onValueChange={props.onSetParagraphStyle}
             />
 
             <ToolbarFontFamilySelect
               disabled={!canEdit || !props.onSetFontFamily}
               value={props.formattingState?.fontFamily}
+              hasMixedValue={props.hasMixedFontFamily ?? false}
               onValueChange={props.onSetFontFamily}
             />
             <ToolbarFontSizeSelect
               disabled={!canEdit || !props.onSetFontSize}
               value={props.formattingState?.fontSize}
+              hasMixedValue={props.hasMixedFontSize ?? false}
               onValueChange={props.onSetFontSize}
             />
 
@@ -327,6 +381,7 @@ export function TwToolbar(props: TwToolbarProps) {
             <TwToolbarIconButton
               icon={Bold}
               label="Bold"
+              shortcut="⌘B"
               active={props.formattingState?.bold ?? false}
               disabled={!canEdit}
               onClick={props.onToggleBold}
@@ -334,6 +389,7 @@ export function TwToolbar(props: TwToolbarProps) {
             <TwToolbarIconButton
               icon={Italic}
               label="Italic"
+              shortcut="⌘I"
               active={props.formattingState?.italic ?? false}
               disabled={!canEdit}
               onClick={props.onToggleItalic}
@@ -341,6 +397,7 @@ export function TwToolbar(props: TwToolbarProps) {
             <TwToolbarIconButton
               icon={Underline}
               label="Underline"
+              shortcut="⌘U"
               active={props.formattingState?.underline ?? false}
               disabled={!canEdit}
               onClick={props.onToggleUnderline}
@@ -455,6 +512,7 @@ export function TwToolbar(props: TwToolbarProps) {
         {showInsertMenu && showInsertActionsInRow ? (
           <ToolbarInsertMenu
             disabled={!canInsertStructural}
+            disabledReasons={props.insertDisabledReasons}
             onInsertImage={props.onInsertImage}
             onInsertPageBreak={props.onInsertPageBreak}
             onInsertSectionBreak={props.onInsertSectionBreak}
@@ -581,12 +639,43 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
         {showSidebarToggle ? (
           <>
-            <TwToolbarIconButton
-              icon={PanelRight}
-              label="Toggle sidebar"
-              active={props.isSidebarOpen ?? false}
-              onClick={props.onToggleSidebar}
-            />
+            {/*
+              Lane 6b §6b.U1 — unread badge on the sidebar toggle when the
+              rail is closed.  Host passes summed open-comment / open-
+              change counts; we only paint the badge when the rail is
+              closed AND there is something unread.
+            */}
+            <span className="relative inline-flex">
+              <TwToolbarIconButton
+                icon={PanelRight}
+                label="Toggle sidebar"
+                active={props.isSidebarOpen ?? false}
+                onClick={props.onToggleSidebar}
+              />
+              {(() => {
+                const isOpen = props.isSidebarOpen ?? false;
+                const count =
+                  (props.openCommentCount ?? 0) +
+                  (props.openChangeCount ?? 0);
+                if (isOpen || count <= 0) return null;
+                const display = count > 99 ? "99+" : String(count);
+                return (
+                  <span
+                    className={[
+                      "pointer-events-none absolute -top-1 -right-1",
+                      "inline-flex h-4 min-w-4 items-center justify-center",
+                      "rounded-[var(--radius-pill)] px-1",
+                      "bg-[var(--color-accent-primary)] text-[var(--color-text-on-accent)]",
+                      "text-[9px] font-semibold leading-none",
+                    ].join(" ")}
+                    data-testid="toolbar-sidebar-toggle-badge"
+                    aria-label={`${count} unread review items`}
+                  >
+                    {display}
+                  </span>
+                );
+              })()}
+            </span>
             <div className="mx-1 h-4 w-px bg-border" />
           </>
         ) : null}
@@ -851,10 +940,14 @@ function ToolbarParagraphStyleSelect(props: {
   styles: StyleCatalogSnapshot["paragraphs"];
   value?: string;
   disabled: boolean;
+  hasMixedValue?: boolean;
   onValueChange?: (styleId: string) => void;
 }) {
+  const isMixed = props.hasMixedValue === true;
   const resolvedValue =
-    props.value && props.styles.some((style) => style.styleId === props.value)
+    !isMixed &&
+    props.value &&
+    props.styles.some((style) => style.styleId === props.value)
       ? props.value
       : "";
 
@@ -868,10 +961,20 @@ function ToolbarParagraphStyleSelect(props: {
         aria-label="Paragraph style"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
+        data-mixed={isMixed ? "true" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[7.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
-        <Select.Value placeholder="Style" />
+        {isMixed ? (
+          <span
+            className="italic text-[var(--color-text-tertiary)]"
+            data-testid="toolbar-paragraph-style-mixed"
+          >
+            Mixed
+          </span>
+        ) : (
+          <Select.Value placeholder="Style" />
+        )}
         <Select.Icon>
           <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
         </Select.Icon>
@@ -903,9 +1006,14 @@ function ToolbarParagraphStyleSelect(props: {
 function ToolbarFontFamilySelect(props: {
   value?: string;
   disabled: boolean;
+  hasMixedValue?: boolean;
   onValueChange?: (fontFamily: string) => void;
 }) {
-  const resolvedValue = props.value && FONT_FAMILIES.includes(props.value) ? props.value : "";
+  const isMixed = props.hasMixedValue === true;
+  const resolvedValue =
+    !isMixed && props.value && FONT_FAMILIES.includes(props.value)
+      ? props.value
+      : "";
 
   return (
     <Select.Root
@@ -917,10 +1025,20 @@ function ToolbarFontFamilySelect(props: {
         aria-label="Font family"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
+        data-mixed={isMixed ? "true" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[6.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
-        <Select.Value placeholder="Font" />
+        {isMixed ? (
+          <span
+            className="italic text-[var(--color-text-tertiary)]"
+            data-testid="toolbar-font-family-mixed"
+          >
+            Mixed
+          </span>
+        ) : (
+          <Select.Value placeholder="Font" />
+        )}
         <Select.Icon>
           <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
         </Select.Icon>
@@ -952,10 +1070,16 @@ function ToolbarFontFamilySelect(props: {
 function ToolbarFontSizeSelect(props: {
   value?: number;
   disabled: boolean;
+  hasMixedValue?: boolean;
   onValueChange?: (fontSize: number) => void;
 }) {
+  const isMixed = props.hasMixedValue === true;
   const resolvedValue =
-    typeof props.value === "number" && FONT_SIZES.includes(props.value) ? String(props.value) : "";
+    !isMixed &&
+    typeof props.value === "number" &&
+    FONT_SIZES.includes(props.value)
+      ? String(props.value)
+      : "";
 
   return (
     <Select.Root
@@ -967,10 +1091,20 @@ function ToolbarFontSizeSelect(props: {
         aria-label="Font size"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
+        data-mixed={isMixed ? "true" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[3.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
-        <Select.Value placeholder="Size" />
+        {isMixed ? (
+          <span
+            className="italic text-[var(--color-text-tertiary)]"
+            data-testid="toolbar-font-size-mixed"
+          >
+            Mixed
+          </span>
+        ) : (
+          <Select.Value placeholder="Size" />
+        )}
         <Select.Icon>
           <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
         </Select.Icon>
@@ -1483,6 +1617,17 @@ function ToolbarAlignmentPopover(props: {
 
 function ToolbarInsertMenu(props: {
   disabled: boolean;
+  /**
+   * Lane 6b §6b.U3 — optional per-item disabled-explanation reasons.
+   * When the item is disabled (no handler or policy-gated), hovering it
+   * surfaces a `title=` tooltip "Not available: {reason}".
+   */
+  disabledReasons?: {
+    pageBreak?: string;
+    table?: string;
+    image?: string;
+    sectionBreak?: string;
+  };
   onInsertPageBreak?: () => void;
   onInsertTable?: () => void;
   onInsertSectionBreak?: (type: SectionBreakType) => void;
@@ -1535,6 +1680,7 @@ function ToolbarInsertMenu(props: {
             <ToolbarMenuButton
               ariaLabel="Insert page break"
               disabled={props.disabled || !props.onInsertPageBreak}
+              disabledReason={props.disabledReasons?.pageBreak}
               icon={<Minus className="h-3.5 w-3.5" />}
               label="Page break"
               onClick={() => {
@@ -1545,6 +1691,7 @@ function ToolbarInsertMenu(props: {
             <ToolbarMenuButton
               ariaLabel="Insert table"
               disabled={props.disabled || !props.onInsertTable}
+              disabledReason={props.disabledReasons?.table}
               icon={<Rows3 className="h-3.5 w-3.5" />}
               label="Table"
               onClick={() => {
@@ -1573,6 +1720,7 @@ function ToolbarInsertMenu(props: {
             <ToolbarMenuButton
               ariaLabel="Insert next-page section break"
               disabled={props.disabled || !props.onInsertSectionBreak}
+              disabledReason={props.disabledReasons?.sectionBreak}
               icon={<FileText className="h-3.5 w-3.5" />}
               label="Next-page section break"
               onClick={() => {
@@ -1616,13 +1764,29 @@ function ToolbarMenuButton(props: {
   disabled: boolean;
   icon: React.ReactNode;
   label: string;
+  /**
+   * Lane 6b §6b.U3 — optional explanation surfaced as `title=` when the
+   * item is disabled.  Hosts pass the capability-policy reason so users
+   * hover the entry and understand why it is unavailable in the current
+   * context, rather than just seeing a faded click target.
+   */
+  disabledReason?: string;
   onClick?: () => void;
 }) {
+  const titleAttr =
+    props.disabled && props.disabledReason
+      ? `Not available: ${props.disabledReason}`
+      : undefined;
   return (
     <button
       type="button"
       aria-label={props.ariaLabel}
+      aria-disabled={props.disabled ? "true" : undefined}
       disabled={props.disabled}
+      title={titleAttr}
+      data-disabled-reason={
+        props.disabled && props.disabledReason ? props.disabledReason : undefined
+      }
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       className={`flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-[11px] font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}

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";
-  }
-}