@beyondwork/docx-react-component 1.0.38 → 1.0.40

package/src/ui/editor-surface-controller.tsx

@@ -23,7 +23,6 @@ import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-st
 
 export interface EditorSurfaceControllerProps {
   currentUser: EditorUser;
-  ydoc?: import('yjs').Doc;
   awareness?: import("y-protocols/awareness").Awareness;
   snapshot: RuntimeRenderSnapshot;
   canonicalDocument: CanonicalDocumentEnvelope;
@@ -46,6 +45,8 @@ export interface EditorSurfaceControllerProps {
   onDeleteForward?: () => void;
   onInsertTab?: () => void;
   onOutdentTab?: () => void;
+  onListIndent?: () => void;
+  onListOutdent?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
   onUndo?: () => void;
@@ -63,6 +64,13 @@ export interface EditorSurfaceControllerProps {
   dispatchRuntimeCommand?: (
     command: import("../ui-tailwind/editor-surface/fast-text-edit-lane.ts").LaneRuntimeCommand,
   ) => import("../api/public-types.ts").TextCommandAck;
+  layoutFacet?: import("../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  pageChromeHeaderBandPx?: number;
+  pageChromeFooterBandPx?: number;
+  pageChromeInterGapPx?: number;
+  pageBreakRevision?: number;
+  onOpenHeaderStoryForPage?: (pageIndex: number) => void;
+  onOpenFooterStoryForPage?: (pageIndex: number) => void;
 }
 
 export const EditorSurfaceController = forwardRef<

package/src/ui/headless/chrome-registry.ts

@@ -31,6 +31,8 @@ export type ToolbarChromeItemId =
   | "export"
   // R1: role-scoped action region entries
   | "editor-scope-posture-menu"
+  | "review-sidebar-tracked-changes"
+  | "review-sidebar-comments"
   | "review-queue-prev"
   | "review-queue-next"
   | "review-queue-counts"
@@ -72,7 +74,7 @@ export interface ToolbarChromeRegistryEntry extends ChromeRegistryEntryBase {
   roles: ReadonlyArray<EditorRole>;
   fullPlacement: Exclude<ToolbarChromePlacement, "hidden">;
   compactPlacement: ToolbarChromePlacement;
-  runtimeBehavior: "always" | "formatting" | "structure" | "comment";
+  runtimeBehavior: "always" | "formatting" | "structure" | "comment" | "sidebar-panel";
   scopeBehavior?: "default" | "scoped-only" | "hidden-when-scoped";
   /**
    * Optional per-role placement override.  When a role overrides the
@@ -265,6 +267,9 @@ export const TOOLBAR_CHROME_REGISTRY: ReadonlyArray<ToolbarChromeRegistryEntry>
     surfaces: ["top-toolbar"],
     group: "review",
     presets: ["simple", "advanced", "review", "workflow"],
+    // Visible in every role, but editor/review roles render it inside the
+    // role action region (see ROLE_ACTION_SETS) and the right cluster
+    // suppresses it via `isChromeItemOwnedByRoleRegion` to avoid duplication.
     roles: ALL_ROLES,
     fullPlacement: "inline",
     compactPlacement: "inline",
@@ -274,9 +279,8 @@ export const TOOLBAR_CHROME_REGISTRY: ReadonlyArray<ToolbarChromeRegistryEntry>
     id: "tracked-changes-toggle",
     surfaces: ["top-toolbar"],
     group: "review",
-    // R1 promotes this toggle to every preset that shows a toolbar so the
-    // editor role can see inline tracked changes without switching preset.
     presets: ["simple", "advanced", "review", "workflow"],
+    // Same ownership rule as `comment` — editor/review role regions own it.
     roles: ALL_ROLES,
     fullPlacement: "inline",
     compactPlacement: "inline",
@@ -323,18 +327,43 @@ export const TOOLBAR_CHROME_REGISTRY: ReadonlyArray<ToolbarChromeRegistryEntry>
     runtimeBehavior: "always",
   },
 
-  // ───── R1: Editor-role primaries ──────────────────────────────────────
+  // ───── R1: Workflow-role scope posture menu ───────────────────────────
   {
     id: "editor-scope-posture-menu",
     surfaces: ["top-toolbar"],
     group: "scope",
     presets: ["advanced", "review", "workflow"],
-    roles: EDITOR_ONLY,
+    // Scoping/tagging is a workflow-primary action; moved from editor role.
+    roles: WORKFLOW_ONLY,
     fullPlacement: "inline",
     compactPlacement: "overflow",
     runtimeBehavior: "always",
   },
 
+  // ───── R1: Review-role sidebar panel toggles (optional, host-provided) ─
+  {
+    id: "review-sidebar-tracked-changes",
+    surfaces: ["top-toolbar"],
+    group: "review-sidebar",
+    presets: ["review"],
+    roles: REVIEW_ONLY,
+    fullPlacement: "inline",
+    compactPlacement: "inline",
+    // Hidden unless the host provides the sidebar panel callback via
+    // hasSidebarPanelAccess in ResolveScopedChromePolicyInput.
+    runtimeBehavior: "sidebar-panel",
+  },
+  {
+    id: "review-sidebar-comments",
+    surfaces: ["top-toolbar"],
+    group: "review-sidebar",
+    presets: ["review"],
+    roles: REVIEW_ONLY,
+    fullPlacement: "inline",
+    compactPlacement: "inline",
+    runtimeBehavior: "sidebar-panel",
+  },
+
   // ───── R1: Review-role primaries ──────────────────────────────────────
   {
     id: "review-queue-prev",

package/src/ui/headless/scoped-chrome-policy.ts

@@ -11,6 +11,7 @@ import {
   type ToolbarChromeItemId,
   type ToolbarChromePlacement,
 } from "./chrome-registry";
+import { ROLE_ACTION_SETS } from "../../ui-tailwind/chrome/role-action-sets";
 import type { SelectionToolKind } from "./selection-tool-types";
 
 export interface ToolbarChromeItemPolicy {
@@ -44,6 +45,13 @@ export interface ResolveScopedChromePolicyInput {
    * callers that haven't adopted the role model yet).
    */
   role?: EditorRole;
+  /**
+   * Whether the host has wired sidebar-panel callbacks
+   * (`onReviewSidebarTrackedChanges` / `onReviewSidebarComments`).
+   * Defaults to `false` — sidebar panel buttons are hidden unless the host
+   * explicitly opts in (typically the harness).
+   */
+  hasSidebarPanelAccess?: boolean;
 }
 
 export function resolveScopedChromePolicy(
@@ -88,6 +96,9 @@ export function resolveScopedChromePolicy(
           case "comment":
             visible = canAddComment;
             break;
+          case "sidebar-panel":
+            visible = Boolean(input.hasSidebarPanelAccess);
+            break;
           default:
             visible = true;
             break;
@@ -152,6 +163,24 @@ export function isToolbarChromeItemVisible(
   return policy.toolbar[itemId]?.visible ?? false;
 }
 
+/**
+ * Returns true when the given chrome item is owned by the active role's
+ * inline role-action region (i.e. it appears in `ROLE_ACTION_SETS[role]`).
+ * The right-cluster render path uses this to suppress its own copy so we
+ * don't render the same button twice.
+ *
+ * When `role` is undefined (legacy host, no role model adopted) this
+ * returns `false` — the right cluster keeps ownership per the pre-R1
+ * layout.
+ */
+export function isChromeItemOwnedByRoleRegion(
+  itemId: ToolbarChromeItemId,
+  role: EditorRole | undefined,
+): boolean {
+  if (!role) return false;
+  return ROLE_ACTION_SETS[role].includes(itemId);
+}
+
 export function getToolbarChromePlacement(
   policy: ScopedChromePolicy,
   itemId: ToolbarChromeItemId,

package/src/ui-tailwind/chrome/review-queue-bar.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { BookmarkPlus, ChevronLeft, ChevronRight, MessageSquareText, Rows3 } from "lucide-react";
+import { ChevronLeft, ChevronRight, MessageSquareText, Rows3 } from "lucide-react";
 
 import type { ReviewQueueSnapshot } from "../../api/public-types";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 
+/** @deprecated Use the role action region (TwRoleActionRegion) for queue navigation. */
 export interface TwReviewQueueBarProps {
   queue: ReviewQueueSnapshot;
   onPrevious?: () => void;
   onNext?: () => void;
-  onMarkSection?: () => void;
 }
 
 const buttonClass =
@@ -47,18 +47,6 @@ export function TwReviewQueueBar(props: TwReviewQueueBarProps) {
           Next
           <ChevronRight className="h-3.5 w-3.5" />
         </button>
-        {props.onMarkSection ? (
-          <button
-            type="button"
-            aria-label="Mark section for review"
-            className={buttonClass}
-            onMouseDown={preserveEditorSelectionMouseDown}
-            onClick={props.onMarkSection}
-          >
-            <BookmarkPlus className="h-3.5 w-3.5" />
-            Mark section
-          </button>
-        ) : null}
         <div className="ml-auto flex flex-wrap items-center gap-2 text-xs text-secondary">
           <span className="inline-flex items-center gap-1 rounded-full bg-canvas px-2.5 py-1 font-medium text-primary">
             <MessageSquareText className="h-3.5 w-3.5 text-comment" />

package/src/ui-tailwind/chrome/role-action-sets.ts

@@ -26,16 +26,20 @@ export const ROLE_ACTION_SETS: Record<
   ReadonlyArray<ToolbarChromeItemId>
 > = {
   editor: [
-    // Posture menu replaces the flat "Mark section" button per spec §6.4.
-    "editor-scope-posture-menu",
-    // Insert menu (tables / images / page breaks / section breaks) — only
-    // meaningful for authoring, so it lives in the editor role's action
-    // region rather than the base toolbar.
-    "insert-actions",
-    "update-actions",
-    "list-continuation",
+    // Comment + inline tracked-changes toggle are the two review-layer
+    // actions relevant to authoring.  They live in the role region rather
+    // than the right cluster so the right cluster stays view-focused.
+    "comment",
+    "tracked-changes-toggle",
   ],
   review: [
+    // Optional sidebar panel shortcuts — visible only when the host provides
+    // hasSidebarPanelAccess (e.g. the harness).  Hidden in base runtime.
+    "review-sidebar-tracked-changes",
+    "review-sidebar-comments",
+    // Inline review actions shared with editor role.
+    "comment",
+    "tracked-changes-toggle",
     // Queue navigation + counts, collapsed from the old TwReviewQueueBar.
     "review-queue-prev",
     "review-queue-next",
@@ -50,6 +54,8 @@ export const ROLE_ACTION_SETS: Record<
     "review-markup-mode",
   ],
   workflow: [
+    // Scoping/posture menu is the primary workflow action (tagging sections).
+    "editor-scope-posture-menu",
     // Work-item navigation (distinct from review-queue nav).
     "workflow-prev",
     "workflow-next",

package/src/ui-tailwind/chrome/tw-mode-dock.tsx

@@ -0,0 +1,80 @@
+import React, { type ReactNode } from "react";
+
+export interface TwModeDockAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick: () => void;
+  isActive?: boolean;
+}
+
+export interface TwModeDockProps {
+  label: string;
+  icon?: ReactNode;
+  actions?: readonly TwModeDockAction[];
+  className?: string;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+
+export function TwModeDock(props: TwModeDockProps) {
+  const actions = (props.actions ?? []).slice(0, 3);
+
+  const className = [
+    "pointer-events-auto fixed bottom-4 left-1/2 z-40 -translate-x-1/2",
+    "flex h-9 items-center gap-2 rounded-[var(--radius-pill)] border border-border bg-canvas px-2 py-1",
+    "shadow-[var(--shadow-float)] backdrop-blur-sm",
+    "transition-opacity duration-[var(--motion-fast)]",
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Mode dock"
+      className={className}
+      data-testid="tw-mode-dock"
+    >
+      <div className="flex items-center gap-1.5 pl-1 pr-1.5">
+        {props.icon ? (
+          <span aria-hidden="true" className="flex h-3.5 w-3.5 items-center text-tertiary">
+            {props.icon}
+          </span>
+        ) : null}
+        <span
+          className="text-[10px] font-semibold uppercase tracking-[0.14em] text-secondary"
+          data-testid="tw-mode-dock__label"
+        >
+          {props.label}
+        </span>
+      </div>
+      {actions.length > 0 ? (
+        <div className="flex items-center gap-0.5 border-l border-border/70 pl-1.5">
+          {actions.map((action) => (
+            <button
+              key={action.id}
+              type="button"
+              onClick={action.onClick}
+              aria-label={action.label}
+              aria-pressed={action.isActive ?? false}
+              title={action.label}
+              className={[
+                "inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-control)] transition-colors",
+                action.isActive
+                  ? "bg-accent-soft text-accent"
+                  : "text-tertiary hover:bg-surface-hover hover:text-primary",
+                focusRingClass,
+              ].join(" ")}
+              data-testid={`tw-mode-dock__action-${action.id}`}
+            >
+              <span aria-hidden="true">{action.icon}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-anchor-resolver.ts

@@ -42,8 +42,8 @@ export interface ResolveSelectionAnchorInput {
  * - structure(image) → byBlockId when the image has a mediaId that the
  *   engine can map back to a block; else falls through to selection.
  * - structure(object) → same as image.
- * - structure(table) → (byTableCell from sibling plan P4 when shipped;
- *   today we fall back to bySelection against the selected cells' range).
+ * - structure(table) → byTableCell(tableBlockId, currentCell.row, col);
+ *   blockId from deterministic "table-{tableBlockIndex}" scheme (P4).
  * - structure(list) → bySelection.
  *
  * Returns `null` when the facet has no render kernel installed or the
@@ -152,12 +152,9 @@ function resolveTableAnchor(
   table: TableStructureContextSnapshot | undefined,
 ): RenderFrameRect | null {
   if (!table) return null;
-  // Sibling plan P4 will expose `byTableCell(tableBlockId, row, col)`
-  // and `byTableColumnEdge` / `byTableRowEdge` on the anchor index.
-  // Today we have only `tableBlockIndex` (ordinal), so the best-effort
-  // fallback is the selection path — callers chain to `anchorForSelection`
-  // when this returns null.
-  void frame;
-  void table;
-  return null;
+  // BlockIds follow the deterministic prefix scheme from surface-projection.ts:
+  // table blocks are keyed as "table-{tableBlockIndex}".
+  const tableBlockId = `table-${table.tableBlockIndex}`;
+  const { rowIndex, columnIndex } = table.currentCell;
+  return frame.anchorIndex.byTableCell(tableBlockId, rowIndex, columnIndex);
 }

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -65,6 +65,12 @@ export interface TwSelectionToolHostProps {
   ) => 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 TwSelectionToolHost(props: TwSelectionToolHostProps) {
@@ -216,6 +222,11 @@ function renderTool(
           onSetImageFrame={props.onSetImageFrame}
           onRestartNumbering={props.onRestartNumbering}
           onContinueNumbering={props.onContinueNumbering}
+          onToggleRowHeader={props.onToggleRowHeader}
+          onToggleRowCantSplit={props.onToggleRowCantSplit}
+          onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
+          onSetTableAlignment={props.onSetTableAlignment}
+          onSetCellVerticalAlign={props.onSetCellVerticalAlign}
         />
       );
     case "comment-thread":

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