@beyondwork/docx-react-component 1.0.36 → 1.0.38

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

@@ -32,161 +32,297 @@ 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}
+      {tableContext?.currentCell.isHeader ? (
+        <ToolbarBadge tone="accent">Header row</ToolbarBadge>
+      ) : 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>
-          ))}
-        </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}
-            />
-          ))}
-        </div>
-      </ToolbarSection>
-
-      <ToolbarSection label="Table">
-        <ToolbarButton
-          ariaLabel="Delete table"
-          capability={tableContext?.operations.deleteTable}
-          danger
-          disabled={props.disabled}
-          onClick={props.onDeleteTable}
-        >
-          Delete table
-        </ToolbarButton>
-      </ToolbarSection>
+            {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>
+          ) : 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>
+          ) : 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}
+
+      {/* 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";

package/src/ui-tailwind/chrome-overlay/chrome-overlay-projector.ts

@@ -0,0 +1,90 @@
+/**
+ * Chrome-overlay projector — maps `RenderFrameRect` values into CSS-absolute
+ * positions under a chrome overlay's own coordinate space.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.2, every overlay child reads
+ * the same rect math so rails, balloons, toolbars, and handles stay aligned
+ * on scroll, zoom, and resize.  The projector is a tiny pure helper so the
+ * rect math can be unit-tested and reused.
+ */
+
+import type { RenderFrameRect } from "../../runtime/render/index.ts";
+
+export interface OverlayCoordinateSpace {
+  /** Top-left of the overlay in the document column's coordinate space. */
+  originLeftPx: number;
+  originTopPx: number;
+}
+
+export interface CSSRect {
+  left: string;
+  top: string;
+  width: string;
+  height: string;
+}
+
+/**
+ * Convert a RenderFrameRect (which is relative to the document column's
+ * top-left) into CSS absolute-position values relative to the overlay's own
+ * coordinate space.  Output uses `px` units so consumers can pass the
+ * result straight to inline `style={{...}}`.
+ */
+export function projectRectToOverlay(
+  rect: RenderFrameRect,
+  space: OverlayCoordinateSpace = { originLeftPx: 0, originTopPx: 0 },
+): CSSRect {
+  return {
+    left: `${rect.leftPx - space.originLeftPx}px`,
+    top: `${rect.topPx - space.originTopPx}px`,
+    width: `${rect.widthPx}px`,
+    height: `${rect.heightPx}px`,
+  };
+}
+
+/**
+ * Expand a page-interior rect outward by `padLeftPx` / `padRightPx` so a
+ * decoration can spill into the page margin (scope rail gutter).  The
+ * output rect width is adjusted accordingly.
+ */
+export function inflateRect(
+  rect: RenderFrameRect,
+  pad: {
+    leftPx?: number;
+    rightPx?: number;
+    topPx?: number;
+    bottomPx?: number;
+  },
+): RenderFrameRect {
+  const padLeft = pad.leftPx ?? 0;
+  const padRight = pad.rightPx ?? 0;
+  const padTop = pad.topPx ?? 0;
+  const padBottom = pad.bottomPx ?? 0;
+  return {
+    leftPx: rect.leftPx - padLeft,
+    topPx: rect.topPx - padTop,
+    widthPx: rect.widthPx + padLeft + padRight,
+    heightPx: rect.heightPx + padTop + padBottom,
+  };
+}
+
+/**
+ * Union of two rects; returns `null` if either input is nullish so callers
+ * can safely chain lookups.
+ */
+export function unionRect(
+  a: RenderFrameRect | null | undefined,
+  b: RenderFrameRect | null | undefined,
+): RenderFrameRect | null {
+  if (!a) return b ?? null;
+  if (!b) return a;
+  const left = Math.min(a.leftPx, b.leftPx);
+  const top = Math.min(a.topPx, b.topPx);
+  const right = Math.max(a.leftPx + a.widthPx, b.leftPx + b.widthPx);
+  const bottom = Math.max(a.topPx + a.heightPx, b.topPx + b.heightPx);
+  return {
+    leftPx: left,
+    topPx: top,
+    widthPx: right - left,
+    heightPx: bottom - top,
+  };
+}

package/src/ui-tailwind/chrome-overlay/index.ts

@@ -0,0 +1,22 @@
+/**
+ * ChromeOverlay public module entry.
+ *
+ * Importers should pull the overlay + layer components from here; the
+ * internal layer files may be reorganized as the chrome phase continues.
+ */
+
+export { TwChromeOverlay, type TwChromeOverlayProps } from "./tw-chrome-overlay";
+export { TwScopeRailLayer, type TwScopeRailLayerProps } from "./tw-scope-rail-layer";
+export {
+  TwWorkspaceViewSwitcher,
+  type TwWorkspaceViewSwitcherProps,
+  type WorkspaceView,
+  type WorkspaceViewAction,
+} from "./tw-workspace-view-switcher";
+export {
+  inflateRect,
+  projectRectToOverlay,
+  unionRect,
+  type CSSRect,
+  type OverlayCoordinateSpace,
+} from "./chrome-overlay-projector";

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -0,0 +1,86 @@
+/**
+ * ChromeOverlay — the single absolute-positioned overlay plane that hosts
+ * every over-document surface (scope rail, comment balloons, revision
+ * margin bars, object handles, workspace view-switcher dock).
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.2, every overlay child
+ * receives `ref.layout` and reads its position from the same render-frame
+ * anchor index — not DOM rects, not selection rects — so the chrome stays
+ * in place across scroll, zoom, and relayout.
+ *
+ * This component owns only the plane and the shared coordinate space.
+ * Each layer it composes is a pure consumer of the facet.
+ */
+
+import * as React from "react";
+import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
+import type { ScopeRailSegment } from "../../runtime/layout";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
+import { TwScopeRailLayer } from "./tw-scope-rail-layer";
+import { TwWorkspaceViewSwitcher, type WorkspaceView } from "./tw-workspace-view-switcher";
+
+export interface TwChromeOverlayProps {
+  /** Layout facet the overlay layers read from. */
+  facet: WordReviewEditorLayoutFacet;
+  /** Optional coordinate space override.  Defaults to the overlay origin. */
+  space?: OverlayCoordinateSpace;
+  /** Active scope id (for emphasis + rail tab sync). */
+  activeScopeId?: string | null;
+  /** Click handler the rail layer forwards to consumers. */
+  onScopeSegmentClick?: (segment: ScopeRailSegment) => void;
+  /** Currently active workspace view preset (draft / layout / review / workflow). */
+  activeWorkspaceView?: WorkspaceView;
+  /** Handler that fires when the user picks a workspace view. */
+  onWorkspaceViewChange?: (view: WorkspaceView) => void;
+  /** Show the bottom workspace view-switcher dock.  Default: true. */
+  showWorkspaceDock?: boolean;
+  /** Test id applied to the overlay root. */
+  "data-testid"?: string;
+  /** Optional extra children (e.g., future comment balloon layer). */
+  children?: React.ReactNode;
+}
+
+/**
+ * Placement contract:
+ *   - The overlay is an absolutely positioned `div` that fills its parent.
+ *   - The parent must be `position: relative` so the overlay anchors to
+ *     the document column (not the viewport).
+ *   - Pointer events are disabled on the root so the editor surface under
+ *     the overlay continues to receive input; individual layers opt in to
+ *     pointer events on their interactive elements (buttons, handles).
+ */
+export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
+  facet,
+  space,
+  activeScopeId,
+  onScopeSegmentClick,
+  activeWorkspaceView,
+  onWorkspaceViewChange,
+  showWorkspaceDock = true,
+  "data-testid": testId,
+  children,
+}) => {
+  return (
+    <div
+      className="wre-chrome-overlay pointer-events-none absolute inset-0 z-30"
+      data-testid={testId ?? "chrome-overlay"}
+      role="presentation"
+    >
+      <TwScopeRailLayer
+        facet={facet}
+        space={space}
+        activeScopeId={activeScopeId}
+        onSegmentClick={onScopeSegmentClick}
+      />
+      {children}
+      {showWorkspaceDock ? (
+        <TwWorkspaceViewSwitcher
+          activeView={activeWorkspaceView ?? "review"}
+          onViewChange={onWorkspaceViewChange}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default TwChromeOverlay;