@beyondwork/docx-react-component 1.0.67 → 1.0.70

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

@@ -2,7 +2,7 @@ import React from "react";
 
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import type { ActiveImageContext } from "../../ui/headless/selection-tool-types";
-import { EMU_PER_INCH } from "../../runtime/units.ts";
+import { EMU_PER_INCH } from "../../api/public-types.ts";
 
 export interface TwImageContextToolbarProps {
   activeImage: ActiveImageContext;
@@ -15,6 +15,16 @@ export interface TwImageContextToolbarProps {
     mediaId: string,
     offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
   ) => void;
+  /**
+   * Phase D.3 — progressive-disclosure compact mode.  When `true`,
+   * the toolbar reduces to the image badge + a single "More…" button
+   * that opens the shared context menu via `onOpenMore`.  Size
+   * presets + nudge controls move into the registry's image actions
+   * (see `editor-action-registry.ts` — image-size-small/medium/large
+   * + image-replace + image-alt-text).  See DESIGN-EDITOR.md §6.4.
+   */
+  compact?: boolean;
+  onOpenMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 const IMAGE_SIZE_PRESETS = [
@@ -28,6 +38,37 @@ const NUDGE_EMU = 228600;
 export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
   const { activeImage } = props;
 
+  if (props.compact) {
+    return (
+      <div
+        data-testid="image-context-toolbar"
+        data-variant="compact"
+        className="inline-flex items-center gap-[6px] rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2 py-1 shadow-[var(--shadow-float)]"
+      >
+        <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          Image
+        </span>
+        <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
+          {activeImage.display}
+        </span>
+        <button
+          type="button"
+          data-testid="image-context-toolbar-more"
+          aria-label="Image actions menu"
+          className="inline-flex h-6 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={(ev) => {
+            const rect = (ev.currentTarget as HTMLButtonElement).getBoundingClientRect();
+            props.onOpenMore?.({ clientX: rect.left, clientY: rect.bottom });
+          }}
+        >
+          More…
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div
       data-testid="image-context-toolbar"

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

@@ -19,8 +19,8 @@ import type {
   RenderFrameRect,
   SelectionSnapshot,
   TableStructureContextSnapshot,
-  WordReviewEditorLayoutFacet,
 } from "../../api/public-types";
+import type { GeometryFacet } from "../../api/public-types";
 import type {
   ActiveImageContext,
   ActiveObjectContext,
@@ -28,7 +28,11 @@ import type {
 } from "../../ui/headless/selection-tool-types";
 
 export interface ResolveSelectionAnchorInput {
-  facet: WordReviewEditorLayoutFacet;
+  // refactor/05 cross-lane-coord §8.4 migration: read through
+  // runtime.geometry (not runtime.layout). Geometry facet carries
+  // getRenderFrame as a required method; the prior optional form on
+  // WordReviewEditorLayoutFacet is being deleted.
+  geometryFacet: GeometryFacet;
   selection: SelectionSnapshot;
   tool: ActiveSelectionToolModel | null;
 }
@@ -52,12 +56,9 @@ export interface ResolveSelectionAnchorInput {
 export function resolveSelectionAnchor(
   input: ResolveSelectionAnchorInput,
 ): RenderFrameRect | null {
-  const { facet, selection, tool } = input;
+  const { geometryFacet, selection, tool } = input;
   // No kernel, no anchor — caller falls back to DOM rects in that case.
-  const frame =
-    typeof facet.getRenderFrame === "function"
-      ? facet.getRenderFrame() ?? null
-      : null;
+  const frame = geometryFacet.getRenderFrame() ?? null;
   if (!frame) return null;
 
   if (!tool) {

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

@@ -6,18 +6,52 @@ export interface TwSelectionToolBlockedProps {
   model: BlockedExplainerSelectionToolModel;
 }
 
+/**
+ * Blocked-action explanation card. Per designsystem.md §6.8 the spec
+ * calls for:
+ *   - Plain operational copy ("Editing is blocked in this scope.")
+ *   - Always expose the alternative action as a button when available
+ *   - Warning-tone severity ring; not error-tone unless destructive
+ *   - role="status" + aria-live="polite"
+ *
+ * Chrome Closure Pass · Task 5 — split the previous single-line
+ * disabledReason render into an eyebrow ("Unavailable here") + a
+ * full-text body, and add a warning-tone severity ring + leading
+ * severity dot per §3.8 severity ladder. The model carries no
+ * "alternative action" callback today (out-of-scope for this slice
+ * — runtime enrichment is a follow-up issue against L06); when one
+ * lands, the action button slot below already has its placement
+ * guarded by the conditional render so adding a callback is a one-
+ * prop change.
+ */
 export function TwSelectionToolBlocked(props: TwSelectionToolBlockedProps) {
+  const { disabledReason } = props.model;
   return (
     <div
       data-testid="blocked-selection-tool"
-      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-[var(--color-semantic-warning)] bg-canvas px-2.5 py-2 shadow-md ring-1 ring-[var(--color-semantic-warning-soft)]"
       role="status"
       aria-live="polite"
     >
-      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Unavailable here
+      <div className="flex items-center gap-2">
+        <span
+          data-testid="blocked-selection-tool__severity"
+          className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--color-semantic-warning)]"
+          aria-hidden="true"
+        />
+        <span
+          data-testid="blocked-selection-tool__eyebrow"
+          className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[var(--color-semantic-warning)]"
+        >
+          Unavailable here
+        </span>
+      </div>
+      <div
+        data-testid="blocked-selection-tool__reason"
+        className="mt-1 text-[13px] text-primary"
+      >
+        {disabledReason}
       </div>
-      <div className="mt-0.5 text-[13px] text-primary">{props.model.disabledReason}</div>
     </div>
   );
 }

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

@@ -8,22 +8,120 @@ export interface TwSelectionToolCommentProps {
   onAddComment?: () => void;
 }
 
+/**
+ * Format an ISO-8601 timestamp as a relative-time hint suitable for the
+ * comment card header. Matches §6.6 anatomy ("avatar/initials + name +
+ * relative time, text.xs"). Falls through to absolute date when the
+ * delta is more than a week old. Pure helper — no Intl polyfills, no
+ * locale assumptions beyond the canonical ISO format the runtime emits.
+ */
+function formatRelative(iso: string | undefined, now = Date.now()): string {
+  if (!iso) return "";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "";
+  const deltaSec = Math.max(0, Math.floor((now - t) / 1000));
+  if (deltaSec < 60) return "just now";
+  const min = Math.floor(deltaSec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  if (day < 7) return `${day}d ago`;
+  // Older than a week — show the date portion of the ISO string.
+  return iso.slice(0, 10);
+}
+
+/**
+ * Initials helper for the author chip — first letter of each
+ * whitespace-separated word, max 2 chars. Falls back to "?" for empty
+ * input so the visual rhythm of the chip stays stable.
+ */
+function initialsOf(name: string | undefined): string {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const head = parts[0]![0]!;
+  const tail = parts.length > 1 ? parts[parts.length - 1]![0]! : "";
+  return (head + tail).toUpperCase().slice(0, 2);
+}
+
+/**
+ * Comment quick card. Anchored when the selection intersects a comment
+ * anchor. Per designsystem.md §6.6 the spec calls for:
+ *   - Author row: avatar/initials + name + relative time, text.xs
+ *   - One-or-two-line excerpt at text.sm
+ *   - One primary action (Open thread / Reply / Comment)
+ *   - Inline marker pin in margin remains visible (handled elsewhere)
+ *
+ * Chrome Closure Pass · Task 5 — surface the author + timestamp +
+ * thread-status fields the model already exposes; previously the card
+ * showed only `previewText` and a single "Comment" button, leaving the
+ * §6.6 anatomy unrealized despite the data being available.
+ */
 export function TwSelectionToolComment(props: TwSelectionToolCommentProps) {
+  const { thread, previewText, canAddComment } = props.model;
+  const author = thread?.createdBy;
+  const created = thread?.createdAt;
+  const status = thread?.status; // open | resolved | detached
+  const excerpt = thread?.excerpt ?? previewText ?? "Comment thread";
+  const isResolved = status === "resolved";
+  const isDetached = status === "detached";
+
+  const statusToneClass = isResolved
+    ? "bg-[var(--color-semantic-success-soft)] text-[var(--color-semantic-success)]"
+    : isDetached
+      ? "bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)]"
+      : "bg-[var(--color-accent-soft)] text-[var(--color-accent-primary)]";
+
   return (
     <div
       data-testid="comment-thread-selection-tool"
-      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-2 shadow-md"
     >
-      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Comment
+      <div className="flex items-center gap-2">
+        {author ? (
+          <span
+            data-testid="comment-thread-selection-tool__avatar"
+            className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-bg-muted)] text-[9px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]"
+            aria-hidden="true"
+          >
+            {initialsOf(author)}
+          </span>
+        ) : null}
+        <span
+          data-testid="comment-thread-selection-tool__author"
+          className="truncate text-[11px] font-semibold text-[var(--color-text-primary)]"
+        >
+          {author ?? "Comment"}
+        </span>
+        {created ? (
+          <span
+            data-testid="comment-thread-selection-tool__timestamp"
+            className="text-[10px] text-[var(--color-text-tertiary)]"
+            title={created}
+          >
+            {formatRelative(created)}
+          </span>
+        ) : null}
+        {status && status !== "open" ? (
+          <span
+            data-testid="comment-thread-selection-tool__status"
+            className={`ml-auto inline-flex items-center rounded-[var(--radius-pill)] px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.08em] ${statusToneClass}`}
+          >
+            {status}
+          </span>
+        ) : null}
       </div>
-      <div className="mt-0.5 truncate text-[13px] text-primary">
-        {props.model.previewText ?? "Comment thread"}
+      <div
+        data-testid="comment-thread-selection-tool__excerpt"
+        className="mt-1 line-clamp-2 text-[13px] text-primary"
+      >
+        {excerpt}
       </div>
       <button
         type="button"
         aria-label="Add comment from thread"
-        disabled={!props.model.canAddComment || !props.onAddComment}
+        disabled={!canAddComment || !props.onAddComment}
         onMouseDown={preserveEditorSelectionMouseDown}
         onClick={props.onAddComment}
         className="mt-1.5 inline-flex h-7 items-center rounded-md border border-border px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"

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

@@ -7,6 +7,10 @@ import type {
   RuntimeContextAnalyticsSnapshot,
 } from "../../api/public-types";
 import type { ActiveSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import {
+  useLocalSurfaceRequest,
+  type LocalSurfaceKind,
+} from "./local-surface-arbiter";
 import { TwContextAnalyticsSummary } from "./tw-context-analytics-summary";
 import { TwDetachHandle } from "./tw-detach-handle";
 import { TwSelectionToolBlocked } from "./tw-selection-tool-blocked";
@@ -109,10 +113,42 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
   const density = useDwellDensity(props.tool);
   const { onChromePinChange } = props;
 
+  // Phase F.2 — gate the selection tool on the shared local-surface
+  // arbiter.  When a higher-priority peer (scope card, suggestion
+  // card, blocked card, workflow card) has the slot, the host yields
+  // — no hard-thrash between two floats.  The dwell hook above
+  // remains the density promotion authority; the arbiter is the
+  // visibility authority.  A pinned scope card does NOT evict us
+  // because pinned surfaces coexist with the single active slot
+  // (see `local-surface-arbiter.ts` §pinned slot).
+  const arbiterKind = props.tool ? arbiterKindForToolKind(props.tool.kind) : null;
+  const isArbiterActive = useLocalSurfaceRequest(
+    arbiterKind && props.tool
+      ? { kind: arbiterKind, id: `selection-${props.tool.kind}` }
+      : null,
+  );
+
+  // All hooks MUST be called unconditionally per the Rules of Hooks —
+  // keep `useCallback` above the early returns that depend on runtime
+  // state (`props.tool`, arbiter verdict).
+  const handlePinChange = useCallback(
+    (surface: ChromePinSurface, next: PinState | null) => {
+      onChromePinChange?.(surface, next);
+    },
+    [onChromePinChange],
+  );
+
   if (!props.tool) {
     return null;
   }
 
+  if (!isArbiterActive) {
+    // A higher-priority local surface currently owns the slot.
+    // Rendering returns null so the host contributes no DOM and the
+    // rival surface is the only float visible this frame.
+    return null;
+  }
+
   // R2.3: pin state now rides ViewState.chromePins.selectionTier so
   // pinned tools survive snapshot rebuilds.  When the host doesn't pass
   // chromePins/onChromePinChange, the detach handle is suppressed (same
@@ -123,13 +159,6 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
   const supportsDetach =
     supportsDetachForKind(props.tool.kind) && Boolean(props.onChromePinChange);
 
-  const handlePinChange = useCallback(
-    (surface: ChromePinSurface, next: PinState | null) => {
-      onChromePinChange?.(surface, next);
-    },
-    [onChromePinChange],
-  );
-
   const overlayTestId = getOverlayTestId(props.tool.kind, Boolean(props.placement));
   const toolContent = renderTool(props, props.tool, density);
   const content = toolContent ? (
@@ -302,6 +331,36 @@ function supportsDetachForKind(kind: ActiveSelectionToolModel["kind"]): boolean
   return kind !== "blocked-explainer";
 }
 
+/**
+ * Map a selection-tool kind into its local-surface arbiter bucket.
+ * Priority ordering lives in `local-surface-arbiter.ts §LOCAL_SURFACE_PRIORITY`.
+ *   - formatting-inline   → selection-format
+ *   - suggestion-review   → suggestion-card
+ *   - workflow-task       → workflow-card
+ *   - blocked-explainer   → blocked-card
+ *   - comment-thread      → comment-preview
+ *   - structure-context   → selection-format (table/image/object
+ *     selection chrome is the same priority tier as text formatting;
+ *     the audit does not promote it above selection-format).
+ */
+function arbiterKindForToolKind(
+  kind: ActiveSelectionToolModel["kind"],
+): LocalSurfaceKind {
+  switch (kind) {
+    case "formatting-inline":
+    case "structure-context":
+      return "selection-format";
+    case "suggestion-review":
+      return "suggestion-card";
+    case "workflow-task":
+      return "workflow-card";
+    case "blocked-explainer":
+      return "blocked-card";
+    case "comment-thread":
+      return "comment-preview";
+  }
+}
+
 function getTopMenuLabel(kind: ActiveSelectionToolModel["kind"]): string {
   switch (kind) {
     case "formatting-inline":

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

@@ -6,21 +6,67 @@ export interface TwSelectionToolWorkflowProps {
   model: WorkflowTaskSelectionToolModel;
 }
 
+/**
+ * Workflow local card. Per designsystem.md §6.7 the spec calls for:
+ *   - Title (scope name, text.sm semibold)
+ *   - State chip (active / blocked / scheduled, tone per §3.7)
+ *   - Allowed-or-blocked-action row (text.sm)
+ *   - Optional assignee chip
+ *
+ * Chrome Closure Pass · Task 5 — derive a state chip from the model's
+ * `disabledReason`: present → "Blocked" with warning tone; absent →
+ * "Active" with accent tone. Title typography lifts to semibold per
+ * §6.7. Assignee chip omitted (not on the model — runtime enrichment
+ * is a follow-up issue against L06).
+ */
 export function TwSelectionToolWorkflow(props: TwSelectionToolWorkflowProps) {
+  const { workflowTitle, workflowDetail, disabledReason } = props.model;
+  const isBlocked = Boolean(disabledReason);
+  const stateLabel = isBlocked ? "Blocked" : "Active";
+  const stateToneClass = isBlocked
+    ? "bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)]"
+    : "bg-[var(--color-accent-soft)] text-[var(--color-accent-primary)]";
+
   return (
     <div
       data-testid="workflow-task-selection-tool"
-      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-2 shadow-md"
     >
-      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Workflow task
+      <div className="flex items-center gap-2">
+        <span
+          data-testid="workflow-task-selection-tool__eyebrow"
+          className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary"
+        >
+          Workflow
+        </span>
+        <span
+          data-testid="workflow-task-selection-tool__state"
+          className={`ml-auto inline-flex items-center rounded-[var(--radius-pill)] px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.08em] ${stateToneClass}`}
+        >
+          {stateLabel}
+        </span>
+      </div>
+      <div
+        data-testid="workflow-task-selection-tool__title"
+        className="mt-1 text-[13px] font-semibold text-primary"
+      >
+        {workflowTitle ?? "Scoped task"}
       </div>
-      <div className="mt-0.5 text-[13px] text-primary">{props.model.workflowTitle ?? "Scoped task"}</div>
-      {props.model.workflowDetail ? (
-        <div className="mt-0.5 text-[11px] text-secondary">{props.model.workflowDetail}</div>
+      {workflowDetail ? (
+        <div
+          data-testid="workflow-task-selection-tool__detail"
+          className="mt-0.5 text-[11px] text-secondary"
+        >
+          {workflowDetail}
+        </div>
       ) : null}
-      {props.model.disabledReason ? (
-        <div className="mt-1 text-[11px] text-tertiary">{props.model.disabledReason}</div>
+      {disabledReason ? (
+        <div
+          data-testid="workflow-task-selection-tool__reason"
+          className="mt-1 text-[11px] text-[var(--color-semantic-warning)]"
+        >
+          {disabledReason}
+        </div>
       ) : null}
     </div>
   );

package/src/ui-tailwind/chrome/tw-shortcut-hint.tsx

@@ -12,6 +12,12 @@ export interface TwShortcutHintProps {
 
 const MAC_SYMBOL: Record<string, string> = {
   Cmd: "⌘",
+  // "Mod" is the registry's cross-platform modifier — Cmd on Mac,
+  // Ctrl elsewhere. Without this entry rows like `["Mod", "X"]`
+  // rendered as the literal "ModX" on Mac + "Mod+X" on Win instead
+  // of the expected "⌘X" / "Ctrl+X". Chrome Closure Pass Task 4
+  // fix-up.
+  Mod: "⌘",
   Shift: "⇧",
   Alt: "⌥",
   Ctrl: "⌃",
@@ -46,7 +52,7 @@ export function TwShortcutHint(props: TwShortcutHintProps): React.JSX.Element {
   const mapped = keys.map((k) =>
     platform === "mac"
       ? (MAC_SYMBOL[k] ?? k)
-      : (k === "Cmd" ? "Ctrl" : k)
+      : (k === "Cmd" || k === "Mod" ? "Ctrl" : k),
   );
 
   const containerClass = [

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -14,6 +14,16 @@ export interface TwSuggestionCardProps {
   onReject?: () => void;
   onEditSuggestion?: () => void;
   onAddComment?: () => void;
+  /**
+   * Phase D.4 — rail-detail handoff.  When wired, the card exposes a
+   * "See detail →" link that opens the `Changes` rail tab focused on
+   * the current suggestion (audit §2.8 "long suggestion rationale to
+   * rail" + DESIGN-EDITOR.md §6.5 "clicking the card body opens the
+   * rail thread").  Lets the floating card stay compact — summary +
+   * accept/reject + next — while long rationale lives in the rail
+   * where it belongs.
+   */
+  onOpenDetailInRail?: () => void;
 }
 
 const focusRingClass =
@@ -96,6 +106,29 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
+        {/*
+         * Rail-detail handoff (Phase D.4).  Only renders when the host
+         * wires `onOpenDetailInRail` so integrators without a rail
+         * don't get a dead link.  Secondary-tone text link, not a
+         * button — per designsystem.md §6.5 the card stays compact.
+         */}
+        {props.onOpenDetailInRail ? (
+          <button
+            type="button"
+            data-testid="suggestion-card-rail-handoff"
+            aria-label="See suggestion detail in rail"
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={props.onOpenDetailInRail}
+            // D.5.N6 — align focus ring with the design-system
+            // --shadow-focus token (designsystem.md §4.7) rather than
+            // the older Tailwind ring utility used elsewhere in this
+            // file.  The ring token is mint-glow consistent across
+            // light/dark; Phase B/D compact toolbars already use it.
+            className="ml-auto inline-flex h-7 items-center text-[11px] font-medium text-[var(--color-text-tertiary)] underline decoration-dotted underline-offset-2 hover:text-[var(--color-accent-primary)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] rounded-[var(--radius-sm)]"
+          >
+            See detail →
+          </button>
+        ) : null}
       </div>
     </div>
   );

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

@@ -28,6 +28,35 @@ export interface TwTableContextToolbarProps {
   onDistributeColumnsEvenly?: () => void;
   onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  /**
+   * Phase D.2 — progressive-disclosure compact mode.
+   *
+   * When `true`, the toolbar reduces to:
+   *   - the tier badge + size + selection label (diagnostic context)
+   *   - a single "More…" button that fires `onOpenMore`
+   *
+   * All action controls (Add row / Merge / Split / Fill / Style /
+   * Delete / Align / V-align / Distribute / Borders) are suppressed;
+   * the full set lives in the shared editor-action-registry and is
+   * accessed via right-click OR the "More…" button (which opens the
+   * same context menu).  Per DESIGN-EDITOR.md §6.4 ("right-click
+   * cannot be richer than the floating surface; cannot duplicate
+   * command trees") the compact variant pins that rule — there IS no
+   * richer surface to diverge from.
+   *
+   * Default `false` preserves the rich in-tree behavior so no
+   * existing integrator breaks.  Phase D.2 ships the opt-in; Phase E
+   * flips the default to `true` once the end-to-end
+   * `onContextMenuRequested` wiring is proven.
+   */
+  compact?: boolean;
+  /**
+   * Fires when the user clicks the "More…" button in compact mode.
+   * Receives the button's clientX / clientY so the integrator can
+   * open `TwContextMenu` at the button anchor via
+   * `chromeControllerRef.current?.openWithKinds({ kinds: ["table-cell"], clientX, clientY })`.
+   */
+  onOpenMore?: (coords: { clientX: number; clientY: number }) => void;
 }
 
 /**
@@ -117,6 +146,44 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
     : null;
   const selectionLabel = tableContext ? formatSelectionLabel(tableContext, tier) : null;
 
+  // Phase D.2 — compact variant: minimal inline affordance + one
+  // "More…" button that opens the shared context menu.  The full
+  // action set lives in editor-action-registry so right-click and
+  // "More…" always show identical options (DESIGN-EDITOR.md §6.4).
+  if (props.compact) {
+    return (
+      <div
+        data-testid="table-context-toolbar"
+        data-tier={tier}
+        data-variant="compact"
+        className="inline-flex items-center gap-[6px] rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2 py-1 shadow-[var(--shadow-float)]"
+      >
+        <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+          {tierLabel(tier)}
+        </span>
+        {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
+        {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
+        <button
+          type="button"
+          data-testid="table-context-toolbar-more"
+          aria-label="Table actions menu"
+          className="inline-flex h-6 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={(ev) => {
+            const rect = (ev.currentTarget as HTMLButtonElement).getBoundingClientRect();
+            props.onOpenMore?.({
+              clientX: rect.left,
+              clientY: rect.bottom,
+            });
+          }}
+        >
+          More…
+        </button>
+      </div>
+    );
+  }
+
   // Tier-specific width caps.  Progressive: T2 ≤ 18rem, T3 ≤ 22rem, T4
   // ≤ 24rem, T5 ≤ 28rem.  Down from the old flat 30rem always.
   const widthCap = tierWidthCap(tier);
@@ -147,7 +214,17 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
               capability={tableContext?.operations.setTableAlignment}
               disabled={props.disabled}
               onClick={() => props.onSetTableAlignment?.(align)}
-              active={tableContext?.currentCell != null && align === "left"}
+              // Chrome Closure Pass · Task 3 — pre-fix bug:
+              // `active` was hardcoded to `align === "left"`, lighting
+              // up the Left button regardless of the actual table
+              // alignment. `TableStructureContextSnapshot` does not
+              // currently surface table-level alignment (the field
+              // lives on `RuntimeTableRenderPlanSnapshot`); until the
+              // runtime exposes it on the structure context, treat
+              // alignment buttons as plain action buttons (no toggle).
+              // Fix scope: presentation-only correction; runtime
+              // enrichment is a follow-up issue against L07.
+              active={false}
             >
               {align[0]!.toUpperCase()}
             </ToolbarButton>