@beyondwork/docx-react-component 1.0.37 → 1.0.39

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 = [
@@ -32,161 +38,367 @@ const CELL_COLORS = [
   "#fce7f3",
 ] as const;
 
+/**
+ * Table tier (R2.4, spec §6.4 / plan table tier matrix).
+ *
+ * - `caret-in-cell` (T2) — single-cell selection.  Minimal inline set:
+ *   row +/−, column +/−.  Anything structural (merge/split/fill/delete
+ *   table) lives behind "More" to keep the panel ~180px wide.
+ * - `multi-cell` (T3) — >1 cell but not a full row/column/table.  Adds
+ *   merge/split/fill palette.
+ * - `row-selected` (T4a) — selection spans exactly one full row
+ *   (`selectedCellCount === columnCount` + currentCell hint).  Row delete
+ *   + insert + fill palette.
+ * - `column-selected` (T4b) — selection spans exactly one full column
+ *   (`selectedCellCount === rowCount`).  Column delete + insert.
+ * - `whole-table` (T5) — selection covers every cell OR the user picked
+ *   the table-select handle (future).  Style + delete + table-level
+ *   formatting.
+ *
+ * The tier resolver is a pure function of the capability snapshot so
+ * tests can drive it from seeded snapshots without a DOM.
+ */
+export type TableTier =
+  | "caret-in-cell"
+  | "multi-cell"
+  | "row-selected"
+  | "column-selected"
+  | "whole-table";
+
+export function resolveTableTier(
+  ctx: TableStructureContextSnapshot,
+): TableTier {
+  const totalCells = ctx.rowCount * ctx.columnCount;
+  if (ctx.selectedCellCount >= totalCells && totalCells > 0) {
+    return "whole-table";
+  }
+  if (
+    ctx.selectedCellCount > 1 &&
+    ctx.selectedCellCount === ctx.columnCount &&
+    ctx.columnCount > 0
+  ) {
+    return "row-selected";
+  }
+  if (
+    ctx.selectedCellCount > 1 &&
+    ctx.selectedCellCount === ctx.rowCount &&
+    ctx.rowCount > 0
+  ) {
+    return "column-selected";
+  }
+  if (ctx.selectedCellCount > 1) {
+    return "multi-cell";
+  }
+  return "caret-in-cell";
+}
+
 export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
   const tableContext = props.tableContext;
-  const tableSizeLabel = tableContext ? `${tableContext.rowCount} x ${tableContext.columnCount}` : null;
-  const selectionLabel = tableContext
-    ? tableContext.selectedCellCount > 1
-      ? `${tableContext.selectedCellCount} cells`
-      : `R${tableContext.currentCell.rowIndex + 1} C${tableContext.currentCell.columnIndex + 1}`
+  const tier = tableContext ? resolveTableTier(tableContext) : "caret-in-cell";
+  const tableSizeLabel = tableContext
+    ? `${tableContext.rowCount} x ${tableContext.columnCount}`
     : null;
+  const selectionLabel = tableContext ? formatSelectionLabel(tableContext, tier) : null;
+
+  // Tier-specific width caps.  Progressive: T2 ≤ 18rem, T3 ≤ 22rem, T4
+  // ≤ 24rem, T5 ≤ 28rem.  Down from the old flat 30rem always.
+  const widthCap = tierWidthCap(tier);
 
   return (
     <div
       data-testid="table-context-toolbar"
-      className="flex max-w-[min(30rem,calc(100vw-1.5rem))] flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
+      data-tier={tier}
+      className={`flex ${widthCap} flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm`}
     >
       <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Table
+        {tierLabel(tier)}
       </span>
       {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
       {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
-      {tableContext?.currentCell.isHeader ? <ToolbarBadge tone="accent">Header row</ToolbarBadge> : null}
-
-      <ToolbarSection label="Style">
-        <select
-          aria-label="Table style"
-          className="h-7 min-w-[9rem] rounded-md border border-border bg-canvas px-2 text-[11px] text-primary disabled:opacity-40"
-          disabled={
-            props.disabled ||
-            props.tableStyles.length === 0 ||
-            !props.onSetTableStyle ||
-            !tableContext?.operations.setTableStyle.enabled
-          }
-          onMouseDown={preserveEditorSelectionMouseDown}
-          onChange={(event) => props.onSetTableStyle?.(event.target.value)}
-          value={tableContext?.currentStyleId ?? ""}
-          title={tableContext?.operations.setTableStyle.reason}
-        >
-          <option value="" disabled>Table style</option>
-          {props.tableStyles.map((style) => (
-            <option key={style.styleId} value={style.styleId}>
-              {style.displayName}
-            </option>
+      {tableContext?.currentCell.isHeader ? (
+        <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>
           ))}
-        </select>
-      </ToolbarSection>
-
-      <ToolbarSection label="Rows">
-        <ToolbarButton
-          ariaLabel="Add row above"
-          capability={tableContext?.operations.addRowBefore}
-          disabled={props.disabled}
-          onClick={props.onAddRowBefore}
-        >
-          Above
-        </ToolbarButton>
-        <ToolbarButton
-          ariaLabel="Add row below"
-          capability={tableContext?.operations.addRowAfter}
-          disabled={props.disabled}
-          onClick={props.onAddRowAfter}
-        >
-          Below
-        </ToolbarButton>
-        <ToolbarButton
-          ariaLabel="Delete row"
-          capability={tableContext?.operations.deleteRow}
-          disabled={props.disabled}
-          onClick={props.onDeleteRow}
-        >
-          Delete row
-        </ToolbarButton>
-      </ToolbarSection>
-
-      <ToolbarSection label="Columns">
-        <ToolbarButton
-          ariaLabel="Add column left"
-          capability={tableContext?.operations.addColumnBefore}
-          disabled={props.disabled}
-          onClick={props.onAddColumnBefore}
-        >
-          Left
-        </ToolbarButton>
-        <ToolbarButton
-          ariaLabel="Add column right"
-          capability={tableContext?.operations.addColumnAfter}
-          disabled={props.disabled}
-          onClick={props.onAddColumnAfter}
-        >
-          Right
-        </ToolbarButton>
-        <ToolbarButton
-          ariaLabel="Delete column"
-          capability={tableContext?.operations.deleteColumn}
-          disabled={props.disabled}
-          onClick={props.onDeleteColumn}
-        >
-          Delete column
-        </ToolbarButton>
-      </ToolbarSection>
-
-      <ToolbarSection label="Cells">
-        <ToolbarButton
-          ariaLabel="Merge cells"
-          capability={tableContext?.operations.mergeCells}
-          disabled={props.disabled}
-          onClick={props.onMergeCells}
-        >
-          Merge
-        </ToolbarButton>
-        <ToolbarButton
-          ariaLabel="Split cell"
-          capability={tableContext?.operations.splitCell}
-          disabled={props.disabled}
-          onClick={props.onSplitCell}
-        >
-          Split
-        </ToolbarButton>
-      </ToolbarSection>
-
-      <ToolbarSection label="Fill">
-        <div className="flex items-center gap-1">
-          {CELL_COLORS.map((color) => (
-            <button
-              key={color}
-              type="button"
-              aria-label={`Set cell fill ${color}`}
-              disabled={
-                props.disabled ||
-                !props.onSetCellBackground ||
-                !tableContext?.operations.setCellBackground.enabled
-              }
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={() => props.onSetCellBackground?.(color)}
-              className="h-5 w-5 rounded border border-border disabled:opacity-40"
-              style={{ backgroundColor: color }}
-              title={tableContext?.operations.setCellBackground.reason}
-            />
+        </ToolbarSection>
+      ) : null}
+
+      {/* T5 whole-table: style selector (primary), delete table */}
+      {tier === "whole-table" ? (
+        <ToolbarSection label="Style">
+          <select
+            aria-label="Table style"
+            className="h-7 min-w-[9rem] rounded-md border border-border bg-canvas px-2 text-[11px] text-primary disabled:opacity-40"
+            disabled={
+              props.disabled ||
+              props.tableStyles.length === 0 ||
+              !props.onSetTableStyle ||
+              !tableContext?.operations.setTableStyle.enabled
+            }
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+            value={tableContext?.currentStyleId ?? ""}
+            title={tableContext?.operations.setTableStyle.reason}
+          >
+            <option value="" disabled>
+              Table style
+            </option>
+            {props.tableStyles.map((style) => (
+              <option key={style.styleId} value={style.styleId}>
+                {style.displayName}
+              </option>
+            ))}
+          </select>
+        </ToolbarSection>
+      ) : null}
+
+      {/* T2 / T4a row-selected: row ops */}
+      {(tier === "caret-in-cell" || tier === "row-selected") ? (
+        <ToolbarSection label="Rows">
+          <ToolbarButton
+            ariaLabel="Add row above"
+            capability={tableContext?.operations.addRowBefore}
+            disabled={props.disabled}
+            onClick={props.onAddRowBefore}
+          >
+            Above
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Add row below"
+            capability={tableContext?.operations.addRowAfter}
+            disabled={props.disabled}
+            onClick={props.onAddRowAfter}
+          >
+            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="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}
+
+      {/* T2 / T4b column-selected: column ops */}
+      {(tier === "caret-in-cell" || tier === "column-selected") ? (
+        <ToolbarSection label="Columns">
+          <ToolbarButton
+            ariaLabel="Add column left"
+            capability={tableContext?.operations.addColumnBefore}
+            disabled={props.disabled}
+            onClick={props.onAddColumnBefore}
+          >
+            Left
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Add column right"
+            capability={tableContext?.operations.addColumnAfter}
+            disabled={props.disabled}
+            onClick={props.onAddColumnAfter}
+          >
+            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="Distribute columns evenly"
+                capability={tableContext?.operations.distributeColumnsEvenly}
+                disabled={props.disabled}
+                onClick={props.onDistributeColumnsEvenly}
+              >
+                Distribute
+              </ToolbarButton>
+            </>
+          ) : null}
+        </ToolbarSection>
+      ) : null}
+
+      {/* T3 multi-cell: merge/split */}
+      {tier === "multi-cell" ||
+      tier === "row-selected" ||
+      tier === "column-selected" ? (
+        <ToolbarSection label="Cells">
+          <ToolbarButton
+            ariaLabel="Merge cells"
+            capability={tableContext?.operations.mergeCells}
+            disabled={props.disabled}
+            onClick={props.onMergeCells}
+          >
+            Merge
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Split cell"
+            capability={tableContext?.operations.splitCell}
+            disabled={props.disabled}
+            onClick={props.onSplitCell}
+          >
+            Split
+          </ToolbarButton>
+        </ToolbarSection>
+      ) : null}
+
+      {/* Fill palette: multi-cell + full-row/column + whole-table */}
+      {tier !== "caret-in-cell" ? (
+        <ToolbarSection label="Fill">
+          <div className="flex items-center gap-1">
+            {CELL_COLORS.map((color) => (
+              <button
+                key={color}
+                type="button"
+                aria-label={`Set cell fill ${color}`}
+                disabled={
+                  props.disabled ||
+                  !props.onSetCellBackground ||
+                  !tableContext?.operations.setCellBackground.enabled
+                }
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => props.onSetCellBackground?.(color)}
+                className="h-5 w-5 rounded border border-border disabled:opacity-40"
+                style={{ backgroundColor: color }}
+                title={tableContext?.operations.setCellBackground.reason}
+              />
+            ))}
+          </div>
+        </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>
           ))}
-        </div>
-      </ToolbarSection>
-
-      <ToolbarSection label="Table">
-        <ToolbarButton
-          ariaLabel="Delete table"
-          capability={tableContext?.operations.deleteTable}
-          danger
-          disabled={props.disabled}
-          onClick={props.onDeleteTable}
-        >
-          Delete table
-        </ToolbarButton>
-      </ToolbarSection>
+        </ToolbarSection>
+      ) : null}
+
+      {/* T5 only: delete table (danger) */}
+      {tier === "whole-table" ? (
+        <ToolbarSection label="Table">
+          <ToolbarButton
+            ariaLabel="Delete table"
+            capability={tableContext?.operations.deleteTable}
+            danger
+            disabled={props.disabled}
+            onClick={props.onDeleteTable}
+          >
+            Delete table
+          </ToolbarButton>
+        </ToolbarSection>
+      ) : null}
     </div>
   );
 }
 
+function formatSelectionLabel(
+  ctx: TableStructureContextSnapshot,
+  tier: TableTier,
+): string {
+  if (tier === "caret-in-cell") {
+    return `R${ctx.currentCell.rowIndex + 1} C${ctx.currentCell.columnIndex + 1}`;
+  }
+  if (tier === "row-selected") {
+    return `Row ${ctx.currentCell.rowIndex + 1}`;
+  }
+  if (tier === "column-selected") {
+    return `Col ${ctx.currentCell.columnIndex + 1}`;
+  }
+  if (tier === "whole-table") {
+    return "Whole table";
+  }
+  return `${ctx.selectedCellCount} cells`;
+}
+
+function tierLabel(tier: TableTier): string {
+  switch (tier) {
+    case "caret-in-cell":
+      return "Cell";
+    case "multi-cell":
+      return "Cells";
+    case "row-selected":
+      return "Row";
+    case "column-selected":
+      return "Column";
+    case "whole-table":
+      return "Table";
+  }
+}
+
+function tierWidthCap(tier: TableTier): string {
+  switch (tier) {
+    case "caret-in-cell":
+      return "max-w-[min(18rem,calc(100vw-1.5rem))]";
+    case "multi-cell":
+      return "max-w-[min(22rem,calc(100vw-1.5rem))]";
+    case "row-selected":
+    case "column-selected":
+      return "max-w-[min(24rem,calc(100vw-1.5rem))]";
+    case "whole-table":
+      return "max-w-[min(28rem,calc(100vw-1.5rem))]";
+  }
+}
+
 function ToolbarBadge(props: {
   children: React.ReactNode;
   tone?: "neutral" | "accent";
@@ -226,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;
@@ -233,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}