@beyondwork/docx-react-component 1.0.37 → 1.0.38

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

@@ -22,6 +22,15 @@ export interface TwSelectionToolbarProps {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
+/**
+ * Fallback colors for the selection-toolbar one-click apply buttons.
+ * The model can override via `textColorDefault` / `highlightColorDefault`
+ * which R2.5 plumbs through from `formattingState` so the apply button
+ * reflects the user's recent color pick.
+ */
+const DEFAULT_TEXT_COLOR = "#1660a8";
+const DEFAULT_HIGHLIGHT_COLOR = "#ffff00";
+
 export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
   const { model } = props;
   const addCommentDisabled = !model.canAddComment;
@@ -64,17 +73,19 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
       />
       <ToolbarActionButton
         icon={<Baseline className="h-3.5 w-3.5" />}
-        label="Text color blue"
+        label={`Apply ${model.textColorDefault ?? DEFAULT_TEXT_COLOR}`}
         pressed={false}
         disabled={formattingDisabled}
-        onClick={() => props.onSetTextColor?.("#1660a8")}
+        onClick={() => props.onSetTextColor?.(model.textColorDefault ?? DEFAULT_TEXT_COLOR)}
       />
       <ToolbarActionButton
         icon={<Highlighter className="h-3.5 w-3.5" />}
-        label="Highlight yellow"
+        label={`Apply ${model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR} highlight`}
         pressed={false}
         disabled={formattingDisabled}
-        onClick={() => props.onSetHighlightColor?.("#ffff00")}
+        onClick={() =>
+          props.onSetHighlightColor?.(model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR)
+        }
       />
 
       <div className="mx-0.5 h-4 w-px bg-border" />

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