@beyondwork/docx-react-component 1.0.38 → 1.0.39

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

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { BookmarkPlus, ChevronLeft, ChevronRight, MessageSquareText, Rows3 } from "lucide-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;
-  onMarkSection?: () => void;
 }
 
 const buttonClass =
@@ -47,18 +47,6 @@ export function TwReviewQueueBar(props: TwReviewQueueBarProps) {
           Next
           <ChevronRight className="h-3.5 w-3.5" />
         </button>
-        {props.onMarkSection ? (
-          <button
-            type="button"
-            aria-label="Mark section for review"
-            className={buttonClass}
-            onMouseDown={preserveEditorSelectionMouseDown}
-            onClick={props.onMarkSection}
-          >
-            <BookmarkPlus className="h-3.5 w-3.5" />
-            Mark section
-          </button>
-        ) : null}
         <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" />

package/src/ui-tailwind/chrome/role-action-sets.ts

@@ -26,16 +26,20 @@ export const ROLE_ACTION_SETS: Record<
   ReadonlyArray<ToolbarChromeItemId>
 > = {
   editor: [
-    // Posture menu replaces the flat "Mark section" button per spec §6.4.
-    "editor-scope-posture-menu",
-    // Insert menu (tables / images / page breaks / section breaks) — only
-    // meaningful for authoring, so it lives in the editor role's action
-    // region rather than the base toolbar.
-    "insert-actions",
-    "update-actions",
-    "list-continuation",
+    // Comment + inline tracked-changes toggle are the two review-layer
+    // actions relevant to authoring.  They live in the role region rather
+    // than the right cluster so the right cluster stays view-focused.
+    "comment",
+    "tracked-changes-toggle",
   ],
   review: [
+    // Optional sidebar panel shortcuts — visible only when the host provides
+    // hasSidebarPanelAccess (e.g. the harness).  Hidden in base runtime.
+    "review-sidebar-tracked-changes",
+    "review-sidebar-comments",
+    // Inline review actions shared with editor role.
+    "comment",
+    "tracked-changes-toggle",
     // Queue navigation + counts, collapsed from the old TwReviewQueueBar.
     "review-queue-prev",
     "review-queue-next",
@@ -50,6 +54,8 @@ export const ROLE_ACTION_SETS: Record<
     "review-markup-mode",
   ],
   workflow: [
+    // Scoping/posture menu is the primary workflow action (tagging sections).
+    "editor-scope-posture-menu",
     // Work-item navigation (distinct from review-queue nav).
     "workflow-prev",
     "workflow-next",

package/src/ui-tailwind/chrome/tw-selection-anchor-resolver.ts

@@ -42,8 +42,8 @@ export interface ResolveSelectionAnchorInput {
  * - structure(image) → byBlockId when the image has a mediaId that the
  *   engine can map back to a block; else falls through to selection.
  * - structure(object) → same as image.
- * - structure(table) → (byTableCell from sibling plan P4 when shipped;
- *   today we fall back to bySelection against the selected cells' range).
+ * - structure(table) → byTableCell(tableBlockId, currentCell.row, col);
+ *   blockId from deterministic "table-{tableBlockIndex}" scheme (P4).
  * - structure(list) → bySelection.
  *
  * Returns `null` when the facet has no render kernel installed or the
@@ -152,12 +152,9 @@ function resolveTableAnchor(
   table: TableStructureContextSnapshot | undefined,
 ): RenderFrameRect | null {
   if (!table) return null;
-  // Sibling plan P4 will expose `byTableCell(tableBlockId, row, col)`
-  // and `byTableColumnEdge` / `byTableRowEdge` on the anchor index.
-  // Today we have only `tableBlockIndex` (ordinal), so the best-effort
-  // fallback is the selection path — callers chain to `anchorForSelection`
-  // when this returns null.
-  void frame;
-  void table;
-  return null;
+  // BlockIds follow the deterministic prefix scheme from surface-projection.ts:
+  // table blocks are keyed as "table-{tableBlockIndex}".
+  const tableBlockId = `table-${table.tableBlockIndex}`;
+  const { rowIndex, columnIndex } = table.currentCell;
+  return frame.anchorIndex.byTableCell(tableBlockId, rowIndex, columnIndex);
 }

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

@@ -65,6 +65,12 @@ export interface TwSelectionToolHostProps {
   ) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
+  // P6: new table ops
+  onToggleRowHeader?: () => void;
+  onToggleRowCantSplit?: () => void;
+  onDistributeColumnsEvenly?: () => void;
+  onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
+  onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
 }
 
 export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
@@ -216,6 +222,11 @@ function renderTool(
           onSetImageFrame={props.onSetImageFrame}
           onRestartNumbering={props.onRestartNumbering}
           onContinueNumbering={props.onContinueNumbering}
+          onToggleRowHeader={props.onToggleRowHeader}
+          onToggleRowCantSplit={props.onToggleRowCantSplit}
+          onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
+          onSetTableAlignment={props.onSetTableAlignment}
+          onSetCellVerticalAlign={props.onSetCellVerticalAlign}
         />
       );
     case "comment-thread":

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

@@ -29,6 +29,12 @@ export interface TwSelectionToolStructureProps {
   ) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
+  // P6: new table ops
+  onToggleRowHeader?: () => void;
+  onToggleRowCantSplit?: () => void;
+  onDistributeColumnsEvenly?: () => void;
+  onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
+  onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
 }
 
 export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
@@ -64,6 +70,11 @@ export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
           onMergeCells={props.onMergeCells}
           onSplitCell={props.onSplitCell}
           onSetCellBackground={props.onSetCellBackground}
+          onToggleRowHeader={props.onToggleRowHeader}
+          onToggleRowCantSplit={props.onToggleRowCantSplit}
+          onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
+          onSetTableAlignment={props.onSetTableAlignment}
+          onSetCellVerticalAlign={props.onSetCellVerticalAlign}
         />
       );
     case "list":

package/src/ui-tailwind/chrome/tw-table-border-picker.tsx

@@ -0,0 +1,245 @@
+/**
+ * R4b: floating border picker for the table context toolbar.
+ *
+ * Opens from a "Borders" button in the toolbar's Cells cluster.  Reads the
+ * current border state via callbacks into `ref.tables.apply()` (set-cell-borders
+ * for selection-scoped edits, set-table-borders for whole-table edits).
+ *
+ * UI shape — two top-level choices the user makes in sequence:
+ *   1. Target family:  Outside / Inside / All / None
+ *      (where "All" applies to every side of every cell in the selection,
+ *       "Outside" limits to the exterior edges, "Inside" to the interior
+ *       edges, and "None" clears the selected sides)
+ *   2. Style:          single / double / dashed / none
+ *   3. Size:           0.5pt / 1pt / 1.5pt / 2pt  (8ths of a point — OOXML uses `sz` in 8ths)
+ *   4. Color:          black / primary / secondary / custom
+ *
+ * The picker itself is a pure UI component — it knows nothing about the
+ * canonical document.  It emits `onApply(config)` with a structured payload
+ * the toolbar hands to `ref.tables.apply({ kind: "set-cell-borders"|"set-table-borders", ... })`.
+ */
+
+import React, { useState } from "react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export type BorderFamily = "outside" | "inside" | "all" | "none";
+export type BorderStyle = "single" | "double" | "dashed" | "none";
+export type BorderSizeEighths = 4 | 8 | 12 | 16; // 0.5pt, 1pt, 1.5pt, 2pt
+
+export interface BorderPickerConfig {
+  family: BorderFamily;
+  style: BorderStyle;
+  sizeEighths: BorderSizeEighths;
+  colorHex: string;
+}
+
+export interface TwTableBorderPickerProps {
+  /** When true, the picker is visible. */
+  open: boolean;
+  /** Disable interaction; applies grey styling. */
+  disabled?: boolean;
+  /**
+   * Called when the user commits a configuration.  The toolbar maps this to
+   * either `set-table-borders` (T5 selection) or `set-cell-borders` (T2/T3/T4).
+   */
+  onApply: (config: BorderPickerConfig) => void;
+  /** Called when the user dismisses without applying. */
+  onDismiss?: () => void;
+}
+
+const FAMILIES: ReadonlyArray<{ id: BorderFamily; label: string }> = [
+  { id: "outside", label: "Outside" },
+  { id: "inside", label: "Inside" },
+  { id: "all", label: "All" },
+  { id: "none", label: "None" },
+];
+
+const STYLES: ReadonlyArray<{ id: BorderStyle; label: string }> = [
+  { id: "single", label: "Single" },
+  { id: "double", label: "Double" },
+  { id: "dashed", label: "Dashed" },
+  { id: "none", label: "None" },
+];
+
+const SIZES: ReadonlyArray<{ id: BorderSizeEighths; label: string }> = [
+  { id: 4, label: "0.5 pt" },
+  { id: 8, label: "1 pt" },
+  { id: 12, label: "1.5 pt" },
+  { id: 16, label: "2 pt" },
+];
+
+const COLORS: ReadonlyArray<{ id: string; label: string; hex: string }> = [
+  { id: "black", label: "Black", hex: "#000000" },
+  { id: "muted", label: "Muted", hex: "#8b8b88" },
+  { id: "accent", label: "Accent", hex: "#2563eb" },
+  { id: "danger", label: "Danger", hex: "#dc2626" },
+];
+
+/**
+ * The picker itself.  Lives inside a parent that controls `open` / `onDismiss`;
+ * a simple popover today, destined to graduate into a tooltip-positioned
+ * overlay once the chrome-overlay floating-tool protocol is stable.
+ */
+export function TwTableBorderPicker(props: TwTableBorderPickerProps) {
+  const [family, setFamily] = useState<BorderFamily>("all");
+  const [style, setStyle] = useState<BorderStyle>("single");
+  const [sizeEighths, setSizeEighths] = useState<BorderSizeEighths>(8);
+  const [colorHex, setColorHex] = useState<string>("#000000");
+
+  if (!props.open) return null;
+
+  const handleApply = () => {
+    props.onApply({ family, style, sizeEighths, colorHex });
+  };
+
+  const baseButton =
+    "inline-flex h-6 items-center rounded border px-2 text-[11px] font-medium transition-colors";
+  const activeButton = "border-accent bg-accent/10 text-accent";
+  const idleButton = "border-border text-secondary hover:bg-surface";
+
+  return (
+    <div
+      data-testid="table-border-picker"
+      role="dialog"
+      aria-label="Border picker"
+      className="flex flex-col gap-2 rounded-lg border border-border bg-canvas px-3 py-2 shadow-md"
+      onMouseDown={preserveEditorSelectionMouseDown}
+    >
+      {/* Family */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-14 text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          Target
+        </span>
+        {FAMILIES.map((f) => (
+          <button
+            key={f.id}
+            type="button"
+            aria-label={`Border target ${f.label}`}
+            aria-pressed={family === f.id}
+            disabled={props.disabled}
+            onClick={() => setFamily(f.id)}
+            className={`${baseButton} ${family === f.id ? activeButton : idleButton}`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Style */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-14 text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          Style
+        </span>
+        {STYLES.map((s) => (
+          <button
+            key={s.id}
+            type="button"
+            aria-label={`Border style ${s.label}`}
+            aria-pressed={style === s.id}
+            disabled={props.disabled}
+            onClick={() => setStyle(s.id)}
+            className={`${baseButton} ${style === s.id ? activeButton : idleButton}`}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Size */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-14 text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          Size
+        </span>
+        {SIZES.map((s) => (
+          <button
+            key={s.id}
+            type="button"
+            aria-label={`Border size ${s.label}`}
+            aria-pressed={sizeEighths === s.id}
+            disabled={props.disabled}
+            onClick={() => setSizeEighths(s.id)}
+            className={`${baseButton} ${sizeEighths === s.id ? activeButton : idleButton}`}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Color */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-14 text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          Color
+        </span>
+        {COLORS.map((c) => (
+          <button
+            key={c.id}
+            type="button"
+            aria-label={`Border color ${c.label}`}
+            aria-pressed={colorHex === c.hex}
+            disabled={props.disabled}
+            onClick={() => setColorHex(c.hex)}
+            className={`h-6 w-6 rounded-full border ${
+              colorHex === c.hex ? "border-accent ring-2 ring-accent/40" : "border-border"
+            }`}
+            style={{ backgroundColor: c.hex }}
+          />
+        ))}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-1.5 pt-1">
+        {props.onDismiss ? (
+          <button
+            type="button"
+            aria-label="Dismiss border picker"
+            onClick={props.onDismiss}
+            disabled={props.disabled}
+            className="h-6 rounded border border-border px-2 text-[11px] font-medium text-secondary hover:bg-surface"
+          >
+            Cancel
+          </button>
+        ) : null}
+        <button
+          type="button"
+          aria-label="Apply borders"
+          data-testid="border-picker-apply"
+          onClick={handleApply}
+          disabled={props.disabled}
+          className="h-6 rounded border border-accent bg-accent px-2 text-[11px] font-medium text-white hover:bg-accent/90 disabled:opacity-40"
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Translate the picker's family + style + size + color into the per-side
+ * partial that the canonical `set-cell-borders` / `set-table-borders` op
+ * expects. Toolbar uses this to build the op payload.
+ *
+ * The emitted object uses runtime-side border keys:
+ *   single → "single", double → "double", dashed → "dashed"
+ * and a size encoded in 8ths of a point.
+ */
+export function configToBordersPatch(
+  config: BorderPickerConfig,
+): {
+  applyToFamily: BorderFamily;
+  sides: {
+    style: BorderStyle;
+    sizeEighths: BorderSizeEighths;
+    colorHex: string;
+  };
+} {
+  return {
+    applyToFamily: config.family,
+    sides: {
+      style: config.style,
+      sizeEighths: config.sizeEighths,
+      colorHex: config.colorHex,
+    },
+  };
+}

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -21,6 +21,12 @@ export interface TwTableContextToolbarProps {
   onSplitCell?: () => void;
   onSetCellBackground?: (color: string) => void;
   onDeleteTable?: () => void;
+  // P6: new ops surfaced from P2 capability flags
+  onToggleRowHeader?: () => void;
+  onToggleRowCantSplit?: () => void;
+  onDistributeColumnsEvenly?: () => void;
+  onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
+  onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
 }
 
 const CELL_COLORS = [
@@ -113,6 +119,24 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         <ToolbarBadge tone="accent">Header row</ToolbarBadge>
       ) : null}
 
+      {/* T5 whole-table: table alignment */}
+      {tier === "whole-table" ? (
+        <ToolbarSection label="Align">
+          {(["left", "center", "right"] as const).map((align) => (
+            <ToolbarButton
+              key={align}
+              ariaLabel={`Align table ${align}`}
+              capability={tableContext?.operations.setTableAlignment}
+              disabled={props.disabled}
+              onClick={() => props.onSetTableAlignment?.(align)}
+              active={tableContext?.currentCell != null && align === "left"}
+            >
+              {align[0]!.toUpperCase()}
+            </ToolbarButton>
+          ))}
+        </ToolbarSection>
+      ) : null}
+
       {/* T5 whole-table: style selector (primary), delete table */}
       {tier === "whole-table" ? (
         <ToolbarSection label="Style">
@@ -162,15 +186,34 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
             Below
           </ToolbarButton>
           {tier === "row-selected" ? (
-            <ToolbarButton
-              ariaLabel="Delete row"
-              capability={tableContext?.operations.deleteRow}
-              disabled={props.disabled}
-              onClick={props.onDeleteRow}
-              danger
-            >
-              Delete row
-            </ToolbarButton>
+            <>
+              <ToolbarButton
+                ariaLabel="Delete row"
+                capability={tableContext?.operations.deleteRow}
+                disabled={props.disabled}
+                onClick={props.onDeleteRow}
+                danger
+              >
+                Delete row
+              </ToolbarButton>
+              <ToolbarButton
+                ariaLabel="Toggle header row"
+                capability={tableContext?.operations.setRowIsHeader}
+                disabled={props.disabled}
+                onClick={props.onToggleRowHeader}
+                active={tableContext?.currentCell.isHeader}
+              >
+                Header
+              </ToolbarButton>
+              <ToolbarButton
+                ariaLabel="Toggle row can't split"
+                capability={tableContext?.operations.setRowCantSplit}
+                disabled={props.disabled}
+                onClick={props.onToggleRowCantSplit}
+              >
+                No break
+              </ToolbarButton>
+            </>
           ) : null}
         </ToolbarSection>
       ) : null}
@@ -195,15 +238,25 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
             Right
           </ToolbarButton>
           {tier === "column-selected" ? (
-            <ToolbarButton
-              ariaLabel="Delete column"
-              capability={tableContext?.operations.deleteColumn}
-              disabled={props.disabled}
-              onClick={props.onDeleteColumn}
-              danger
-            >
-              Delete column
-            </ToolbarButton>
+            <>
+              <ToolbarButton
+                ariaLabel="Delete column"
+                capability={tableContext?.operations.deleteColumn}
+                disabled={props.disabled}
+                onClick={props.onDeleteColumn}
+                danger
+              >
+                Delete column
+              </ToolbarButton>
+              <ToolbarButton
+                ariaLabel="Distribute columns evenly"
+                capability={tableContext?.operations.distributeColumnsEvenly}
+                disabled={props.disabled}
+                onClick={props.onDistributeColumnsEvenly}
+              >
+                Distribute
+              </ToolbarButton>
+            </>
           ) : null}
         </ToolbarSection>
       ) : null}
@@ -257,6 +310,29 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         </ToolbarSection>
       ) : null}
 
+      {/* Cell vertical alignment (caret-in-cell + multi-cell) */}
+      {(tier === "caret-in-cell" || tier === "multi-cell") ? (
+        <ToolbarSection label="V-Align">
+          {(
+            [
+              ["top", "Top"],
+              ["center", "Mid"],
+              ["bottom", "Bot"],
+            ] as const
+          ).map(([align, label]) => (
+            <ToolbarButton
+              key={align}
+              ariaLabel={`Cell vertical align ${align}`}
+              capability={tableContext?.operations.setCellVerticalAlign}
+              disabled={props.disabled}
+              onClick={() => props.onSetCellVerticalAlign?.(align)}
+            >
+              {label}
+            </ToolbarButton>
+          ))}
+        </ToolbarSection>
+      ) : null}
+
       {/* T5 only: delete table (danger) */}
       {tier === "whole-table" ? (
         <ToolbarSection label="Table">
@@ -362,6 +438,7 @@ function ToolbarButton(props: {
   danger?: boolean;
   disabled: boolean;
   onClick?: () => void;
+  active?: boolean;
 }) {
   const capabilityEnabled = props.capability?.enabled ?? true;
   const title = !capabilityEnabled ? props.capability?.reason : undefined;
@@ -369,14 +446,17 @@ function ToolbarButton(props: {
     <button
       type="button"
       aria-label={props.ariaLabel}
+      aria-pressed={props.active}
       disabled={props.disabled || !props.onClick || !capabilityEnabled}
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       title={title}
       className={`inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
-        props.danger
-          ? "text-danger hover:bg-danger/10"
-          : "text-primary hover:bg-surface"
+        props.active
+          ? "bg-accent/15 text-accent"
+          : props.danger
+            ? "text-danger hover:bg-danger/10"
+            : "text-primary hover:bg-surface"
       }`}
     >
       {props.children}