@beyondwork/docx-react-component 1.0.38 → 1.0.40

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}

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -0,0 +1,353 @@
+/**
+ * TwTableGripLayer — column-resize and row-resize grips for the active table.
+ *
+ * Grips are positioned via the render-kernel anchor index (P4):
+ *   - Column grips:  `anchorIndex.byTableColumnEdge(blockId, colIndex)`
+ *   - Row grips:     `anchorIndex.byTableRowEdge(blockId, rowIndex)`
+ *
+ * This is a pure overlay consumer: no DOM measurement, no selection mutation,
+ * no PM transactions.  Drag deltas are converted from px → twips using the
+ * kernel's `pxPerTwip` ratio and dispatched through `onSetColumnWidth` /
+ * `onSetRowHeight` callbacks (which route to `ref.tables.apply(op)`).
+ *
+ * Drag state lives in `useRef` so moves don't trigger re-renders mid-drag.
+ *
+ * Click-trap fix: the grip is an invisible 6px-wide (column) / 6px-tall (row)
+ * strip with `pointer-events-auto`, so a click landing near a cell edge hits
+ * the grip instead of cell text.  To keep non-drag clicks from being swallowed,
+ * mousedown no longer calls `preventDefault` — that's deferred to the first
+ * mousemove that crosses `DRAG_THRESHOLD_PX`.  A mouseup without any crossing
+ * is forwarded via `document.elementFromPoint` to the element beneath the
+ * grip so PM still receives the click and places the caret.
+ */
+
+import React, { useCallback, useEffect, useRef } from "react";
+
+import type {
+  TableStructureContextSnapshot,
+  WordReviewEditorLayoutFacet,
+} from "../../api/public-types";
+import type { OverlayCoordinateSpace } from "../chrome-overlay/chrome-overlay-projector";
+import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector";
+import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
+
+const GRIP_PX = 6;
+const DRAG_THRESHOLD_PX = 3;
+const MIN_COLUMN_TWIPS = 720;
+const MIN_ROW_TWIPS = 120;
+
+/**
+ * Re-dispatch a click that landed on an invisible resize grip to the element
+ * beneath it.  Called when a mouseup fires without any drag movement, so the
+ * user's intended target (typically PM-rendered cell text) still receives
+ * mousedown/mouseup/click and can place the caret.
+ */
+function forwardNonDragClick(gripEl: HTMLElement, event: MouseEvent): void {
+  const previous = gripEl.style.pointerEvents;
+  gripEl.style.pointerEvents = "none";
+  try {
+    const beneath = gripEl.ownerDocument?.elementFromPoint(
+      event.clientX,
+      event.clientY,
+    );
+    if (!beneath || beneath === gripEl) return;
+    const init: MouseEventInit = {
+      bubbles: true,
+      cancelable: true,
+      view: gripEl.ownerDocument?.defaultView ?? window,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      button: event.button,
+      buttons: event.buttons,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+    };
+    beneath.dispatchEvent(new MouseEvent("mousedown", init));
+    beneath.dispatchEvent(new MouseEvent("mouseup", init));
+    beneath.dispatchEvent(new MouseEvent("click", init));
+  } finally {
+    gripEl.style.pointerEvents = previous;
+  }
+}
+
+export interface TwTableGripLayerProps {
+  facet: WordReviewEditorLayoutFacet;
+  tableContext: TableStructureContextSnapshot | null;
+  space?: OverlayCoordinateSpace;
+  disabled?: boolean;
+  onSetColumnWidth?: (columnIndex: number, twips: number) => void;
+  onSetRowHeight?: (
+    rowIndex: number,
+    twips: number,
+    rule: "auto" | "atLeast" | "exact",
+  ) => void;
+}
+
+export function TwTableGripLayer({
+  facet,
+  tableContext,
+  space,
+  disabled,
+  onSetColumnWidth,
+  onSetRowHeight,
+}: TwTableGripLayerProps) {
+  if (!tableContext) return null;
+
+  const frame =
+    typeof facet.getRenderFrame === "function"
+      ? (facet.getRenderFrame() ?? null)
+      : null;
+  if (!frame) return null;
+
+  const blockId = `table-${tableContext.tableBlockIndex}`;
+  const pageIndex = facet.getFirstPageIndexForBlock(blockId) ?? 0;
+  const plan = facet.getTableRenderPlan(blockId, pageIndex);
+  if (!plan) return null;
+
+  const pxPerTwip =
+    typeof facet.getRenderZoom === "function"
+      ? (facet.getRenderZoom()?.pxPerTwip ?? DEFAULT_PX_PER_TWIP)
+      : DEFAULT_PX_PER_TWIP;
+
+  return (
+    <>
+      {plan.columnResizeHandles.map((handle) => {
+        const rect = frame.anchorIndex.byTableColumnEdge(
+          blockId,
+          handle.columnIndex,
+        );
+        if (!rect) return null;
+        const pos = projectRectToOverlay(rect, space);
+        return (
+          <ColResizeGrip
+            key={`col-${blockId}-${handle.columnIndex}`}
+            pos={pos}
+            colIndex={handle.columnIndex}
+            originalTwips={plan.columnsTwips[handle.columnIndex] ?? 720}
+            pxPerTwip={pxPerTwip}
+            disabled={!!disabled || !onSetColumnWidth}
+            onCommit={onSetColumnWidth}
+          />
+        );
+      })}
+      {Array.from({ length: tableContext.rowCount }, (_, rowIndex) => {
+        const rect = frame.anchorIndex.byTableRowEdge(blockId, rowIndex);
+        if (!rect) return null;
+        const pos = projectRectToOverlay(rect, space);
+        return (
+          <RowResizeGrip
+            key={`row-${blockId}-${rowIndex}`}
+            pos={pos}
+            rowIndex={rowIndex}
+            pxPerTwip={pxPerTwip}
+            disabled={!!disabled || !onSetRowHeight}
+            onCommit={onSetRowHeight}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Column resize grip
+// ---------------------------------------------------------------------------
+
+interface ColResizeGripProps {
+  pos: { left: string; top: string; width: string; height: string };
+  colIndex: number;
+  originalTwips: number;
+  pxPerTwip: number;
+  disabled: boolean;
+  onCommit?: (columnIndex: number, twips: number) => void;
+}
+
+function ColResizeGrip({
+  pos,
+  colIndex,
+  originalTwips,
+  pxPerTwip,
+  disabled,
+  onCommit,
+}: ColResizeGripProps) {
+  const dragRef = useRef<{
+    startX: number;
+    originalTwips: number;
+    dragStarted: boolean;
+    gripEl: HTMLElement;
+  } | null>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      dragRef.current = {
+        startX: e.clientX,
+        originalTwips,
+        dragStarted: false,
+        gripEl: e.currentTarget,
+      };
+    },
+    [disabled, originalTwips],
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (!drag.dragStarted) {
+        if (Math.abs(e.clientX - drag.startX) < DRAG_THRESHOLD_PX) return;
+        drag.dragStarted = true;
+      }
+      e.preventDefault();
+    };
+    const handleUp = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      if (!drag.dragStarted) {
+        forwardNonDragClick(drag.gripEl, e);
+        return;
+      }
+      const deltaTwips = (e.clientX - drag.startX) / pxPerTwip;
+      const newTwips = Math.max(
+        MIN_COLUMN_TWIPS,
+        Math.round(drag.originalTwips + deltaTwips),
+      );
+      onCommit?.(colIndex, newTwips);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [colIndex, pxPerTwip, onCommit]);
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={`Resize column ${colIndex + 1}`}
+      data-testid={`col-resize-grip-${colIndex}`}
+      className={[
+        "pointer-events-auto absolute",
+        disabled
+          ? "cursor-default opacity-0"
+          : "cursor-col-resize opacity-0 hover:opacity-100",
+        "transition-opacity",
+        "bg-accent",
+      ].join(" ")}
+      style={{
+        left: `calc(${pos.left} - ${GRIP_PX / 2}px)`,
+        top: pos.top,
+        width: `${GRIP_PX}px`,
+        height: pos.height,
+      }}
+      onMouseDown={handleMouseDown}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Row resize grip
+// ---------------------------------------------------------------------------
+
+interface RowResizeGripProps {
+  pos: { left: string; top: string; width: string; height: string };
+  rowIndex: number;
+  pxPerTwip: number;
+  disabled: boolean;
+  onCommit?: (
+    rowIndex: number,
+    twips: number,
+    rule: "auto" | "atLeast" | "exact",
+  ) => void;
+}
+
+function RowResizeGrip({
+  pos,
+  rowIndex,
+  pxPerTwip,
+  disabled,
+  onCommit,
+}: RowResizeGripProps) {
+  const dragRef = useRef<{
+    startY: number;
+    dragStarted: boolean;
+    gripEl: HTMLElement;
+  } | null>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      dragRef.current = {
+        startY: e.clientY,
+        dragStarted: false,
+        gripEl: e.currentTarget,
+      };
+    },
+    [disabled],
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (!drag.dragStarted) {
+        if (Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD_PX) return;
+        drag.dragStarted = true;
+      }
+      e.preventDefault();
+    };
+    const handleUp = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      if (!drag.dragStarted) {
+        forwardNonDragClick(drag.gripEl, e);
+        return;
+      }
+      const deltaY = e.clientY - drag.startY;
+      const deltaTwips = deltaY / pxPerTwip;
+      // We don't know the current row height from the grip alone; use atLeast
+      // so that a positive drag expands and a negative drag collapses to auto.
+      const newTwips = Math.max(MIN_ROW_TWIPS, Math.round(deltaTwips));
+      const rule = newTwips > 0 ? "atLeast" : "auto";
+      onCommit?.(rowIndex, newTwips, rule as "atLeast");
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [rowIndex, pxPerTwip, onCommit]);
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label={`Resize row ${rowIndex + 1}`}
+      data-testid={`row-resize-grip-${rowIndex}`}
+      className={[
+        "pointer-events-auto absolute",
+        disabled
+          ? "cursor-default opacity-0"
+          : "cursor-row-resize opacity-0 hover:opacity-100",
+        "transition-opacity",
+        "bg-accent",
+      ].join(" ")}
+      style={{
+        left: pos.left,
+        top: `calc(${pos.top} - ${GRIP_PX / 2}px)`,
+        width: pos.width,
+        height: `${GRIP_PX}px`,
+      }}
+      onMouseDown={handleMouseDown}
+    />
+  );
+}

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

@@ -9,6 +9,7 @@
  */
 
 import type { RenderFrameRect } from "../../runtime/render/index.ts";
+import { recordPerfSample } from "../editor-surface/perf-probe.ts";
 
 export interface OverlayCoordinateSpace {
   /** Top-left of the overlay in the document column's coordinate space. */
@@ -33,12 +34,15 @@ export function projectRectToOverlay(
   rect: RenderFrameRect,
   space: OverlayCoordinateSpace = { originLeftPx: 0, originTopPx: 0 },
 ): CSSRect {
-  return {
+  const t0 = typeof performance !== "undefined" ? performance.now() : 0;
+  const result: CSSRect = {
     left: `${rect.leftPx - space.originLeftPx}px`,
     top: `${rect.topPx - space.originTopPx}px`,
     width: `${rect.widthPx}px`,
     height: `${rect.heightPx}px`,
   };
+  if (t0 > 0) recordPerfSample("chrome.overlay_reposition", performance.now() - t0);
+  return result;
 }
 
 /**

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

@@ -7,12 +7,8 @@
 
 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 { TwScopeCard, type TwScopeCardProps } from "./tw-scope-card";
+export { TwScopeCardLayer, type TwScopeCardLayerProps } from "./tw-scope-card-layer";
 export {
   inflateRect,
   projectRectToOverlay,