@beyondwork/docx-react-component 1.0.37 → 1.0.39

package/src/ui-tailwind/chrome/tw-selection-tool-placement.ts

@@ -0,0 +1,149 @@
+/**
+ * Selection-tool placement helper — pure function that decides where a
+ * selection-anchored floating chrome panel renders relative to its
+ * anchor rect.
+ *
+ * Extracts the right→left→above/below decision that lived in
+ * `tw-review-workspace.tsx::resolveSelectionToolbarPlacement` so
+ * consumers can feed it render-frame rects instead of DOM rects (R2.1
+ * owns the rect production; this helper is zoom-agnostic).
+ *
+ * The output is a `SelectionToolPlacement` compatible with
+ * `tw-selection-tool-host`'s existing contract so the rewire is
+ * additive — callers that already use `SelectionToolPlacement` keep
+ * working.
+ */
+
+import type { CSSProperties } from "react";
+
+import type { RenderFrameRect } from "../../api/public-types";
+
+export interface SelectionToolPlacementDecision {
+  placement: "right" | "left" | "above" | "below";
+  style: CSSProperties;
+}
+
+export interface ResolveSelectionToolPlacementInput {
+  /** Anchor rect in overlay coordinate space. */
+  anchor: RenderFrameRect;
+  /** Container size in overlay coordinate space. */
+  container: { widthPx: number; heightPx: number };
+  /**
+   * Estimated toolbar width in px.  Defaults to a reasonable bounded
+   * window (`clamp(168, 32% of container, 260)`) so the helper can run
+   * before the toolbar measures its own width.
+   */
+  estimatedToolbarWidthPx?: number;
+  /**
+   * Estimated toolbar height in px.  Defaults to 44 (matches the
+   * legacy DOM-based math).
+   */
+  estimatedToolbarHeightPx?: number;
+  /** Edge padding in px.  Defaults to 16. */
+  edgePaddingPx?: number;
+  /** Gap between anchor and toolbar in px.  Defaults to 12. */
+  gapPx?: number;
+}
+
+const DEFAULT_EDGE_PADDING = 16;
+const DEFAULT_GAP = 12;
+const DEFAULT_TOOLBAR_HEIGHT = 44;
+const TOOLBAR_WIDTH_MIN = 168;
+const TOOLBAR_WIDTH_MAX = 260;
+const TOOLBAR_WIDTH_CONTAINER_FRACTION = 0.32;
+
+/**
+ * Decide where to render the selection-tool panel relative to its
+ * anchor.  Prefers `right` when there is clearance, falls back to
+ * `left`, then `above` / `below` based on vertical room.
+ *
+ * Returns `null` when the container is zero-sized (the caller should
+ * then skip rendering entirely).
+ */
+export function resolveSelectionToolPlacement(
+  input: ResolveSelectionToolPlacementInput,
+): SelectionToolPlacementDecision | null {
+  const { anchor, container } = input;
+  if (container.widthPx <= 0 || container.heightPx <= 0) return null;
+
+  const edgePadding = input.edgePaddingPx ?? DEFAULT_EDGE_PADDING;
+  const gapPx = input.gapPx ?? DEFAULT_GAP;
+  const toolbarHeight = input.estimatedToolbarHeightPx ?? DEFAULT_TOOLBAR_HEIGHT;
+  const toolbarWidth =
+    input.estimatedToolbarWidthPx ??
+    Math.min(
+      TOOLBAR_WIDTH_MAX,
+      Math.max(
+        TOOLBAR_WIDTH_MIN,
+        container.widthPx * TOOLBAR_WIDTH_CONTAINER_FRACTION,
+      ),
+    );
+
+  const anchorLeft = anchor.leftPx;
+  const anchorRight = anchor.leftPx + anchor.widthPx;
+  const anchorTop = anchor.topPx;
+  const anchorBottom = anchor.topPx + anchor.heightPx;
+  const centerX = anchorLeft + anchor.widthPx / 2;
+  const centerY = anchorTop + anchor.heightPx / 2;
+
+  const rightClearance = container.widthPx - anchorRight - gapPx - edgePadding;
+  const leftClearance = anchorLeft - gapPx - edgePadding;
+
+  const clampedCenterX = Math.max(
+    edgePadding,
+    Math.min(
+      centerX,
+      Math.max(edgePadding, container.widthPx - edgePadding),
+    ),
+  );
+  const clampedCenterY = Math.max(
+    edgePadding + toolbarHeight / 2,
+    Math.min(
+      centerY,
+      Math.max(
+        edgePadding + toolbarHeight / 2,
+        container.heightPx - edgePadding - toolbarHeight / 2,
+      ),
+    ),
+  );
+  const maxWidthPx = Math.max(220, container.widthPx - edgePadding * 2);
+
+  if (rightClearance >= toolbarWidth) {
+    return {
+      placement: "right",
+      style: {
+        left: `${anchorRight}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${maxWidthPx}px`,
+        transform: `translate(${gapPx}px, -50%)`,
+      },
+    };
+  }
+
+  if (leftClearance >= toolbarWidth) {
+    return {
+      placement: "left",
+      style: {
+        left: `${anchorLeft}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${maxWidthPx}px`,
+        transform: `translate(calc(-100% - ${gapPx}px), -50%)`,
+      },
+    };
+  }
+
+  const placement: "above" | "below" =
+    anchorTop < toolbarHeight + gapPx + edgePadding ? "below" : "above";
+  return {
+    placement,
+    style: {
+      left: `${clampedCenterX}px`,
+      top: `${placement === "above" ? anchorTop : anchorBottom}px`,
+      maxWidth: `${maxWidthPx}px`,
+      transform:
+        placement === "above"
+          ? `translate(-50%, calc(-100% - ${gapPx}px))`
+          : `translate(-50%, ${gapPx}px)`,
+    },
+  };
+}

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-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-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,
+    },
+  };
+}