@beyondwork/docx-react-component 1.0.58 → 1.0.60

package/src/ui-tailwind/editor-surface/tw-page-block-view.helpers.ts

@@ -71,6 +71,20 @@ export function resolveMarkerJustificationCss(raw: string | undefined): string {
   }
 }
 
+export function resolveMarkerAlignCss(raw: string | undefined): React.CSSProperties["textAlign"] {
+  switch (raw) {
+    case "left":
+      return "left";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "right";
+  }
+}
+
 /** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
 export function buildParagraphStyle(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
@@ -144,11 +158,12 @@ export function buildMarkerStyle(
   suffix: "tab" | "space" | "nothing" | undefined,
   markerRunProperties: CanonicalRunFormatting | undefined,
   markerWidth: number | undefined,
+  markerStart: number | undefined,
   markerJustification: string | undefined,
 ): React.CSSProperties {
   const style: React.CSSProperties = {
     fontVariantNumeric: "tabular-nums",
-    justifyContent: resolveMarkerJustificationCss(markerJustification),
+    textAlign: resolveMarkerAlignCss(markerJustification),
   };
 
   if (markerRunProperties) {
@@ -180,8 +195,10 @@ export function buildMarkerStyle(
     style.width = `${markerWidthPt}pt`;
     style.minWidth = `${markerWidthPt}pt`;
     style.flexBasis = `${markerWidthPt}pt`;
+    style.marginLeft = `-${markerWidthPt}pt`;
     style.marginRight = 0;
     style.overflow = "visible";
+    void markerStart; // consumed via paragraph padding-left geometry
   } else {
     const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
     const fallbackMarginRight =

package/src/ui-tailwind/editor-surface/tw-page-block-view.tsx

@@ -142,6 +142,7 @@ function ParagraphBlock({
   const resolvedNumbering = block.resolvedNumbering;
   const markerRunProperties = resolvedNumbering?.markerRunProperties;
   const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
+  const markerStart = resolvedNumbering?.geometry?.markerLane?.start;
   const markerJustification = resolvedNumbering?.geometry?.markerJustification;
 
   const prefixSpan =
@@ -164,6 +165,7 @@ function ParagraphBlock({
           numberingSuffix,
           markerRunProperties,
           markerWidth,
+          markerStart,
           markerJustification,
         )}
       >

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -10,6 +10,7 @@
 
 import type { Node as PMNode } from "prosemirror-model";
 import type { NodeViewConstructor, ViewMutationRecord } from "prosemirror-view";
+import { PERCENTAGE_PARTS } from "../../runtime/units.ts";
 
 // R2c: band class styles live in ./tw-table-bands.module.css. Consumers import
 // that stylesheet through their build pipeline (same pattern as editor-theme.css).
@@ -325,7 +326,7 @@ function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
   const tableWidthType = node.attrs.tableWidthType as string | null | undefined;
   let baseClasses = "border-collapse w-full my-2 text-sm";
   if (tableWidthType === "pct" && typeof tableWidth === "number") {
-    // OOXML pct widths are fiftieths of a percent (5000 = 100%).
+    // OOXML pct widths are fiftieths of a percent (PERCENTAGE_PARTS = 100%).
     table.style.width = `${tableWidth / 50}%`;
     baseClasses = "border-collapse my-2 text-sm";
   } else if (tableWidthType === "dxa" && typeof tableWidth === "number") {
@@ -406,6 +407,14 @@ function syncColgroup(table: HTMLTableElement, node: PMNode): void {
   const gridColumns = Array.isArray(node.attrs.gridColumns)
     ? (node.attrs.gridColumns as number[])
     : [];
+  // SOW gap G1 — percent widths win when the table itself is sized in
+  // percent. The relative array sums to 100 and comes from
+  // `computeRelativeGridColumns` in surface-projection so the column
+  // proportions track the container instead of the absolute `pt` widths
+  // sliding against it. `null` (the default) keeps the legacy pt path.
+  const gridColumnsRelative = Array.isArray(node.attrs.gridColumnsRelative)
+    ? (node.attrs.gridColumnsRelative as number[])
+    : null;
   const existing = Array.from(table.children).find(
     (child): child is HTMLTableColElement =>
       child instanceof (table.ownerDocument?.defaultView?.HTMLTableColElement ??
@@ -429,12 +438,19 @@ function syncColgroup(table: HTMLTableElement, node: PMNode): void {
   while (colgroup.childElementCount > desired) {
     colgroup.lastElementChild?.remove();
   }
+  const usePct =
+    gridColumnsRelative !== null && gridColumnsRelative.length === desired;
   for (let i = 0; i < desired; i += 1) {
     const col = colgroup.children[i] as HTMLTableColElement;
     const twips = gridColumns[i] ?? 0;
     col.setAttribute("data-col-index", String(i));
     col.setAttribute("data-col-twips", String(twips));
-    col.style.width = twips > 0 ? `${twips / 20}pt` : "";
+    if (usePct) {
+      const pct = gridColumnsRelative[i] ?? 0;
+      col.style.width = pct > 0 ? `${pct.toFixed(4)}%` : "";
+    } else {
+      col.style.width = twips > 0 ? `${twips / 20}pt` : "";
+    }
   }
 
   if (!existing) {

package/src/ui-tailwind/index.ts

@@ -67,6 +67,15 @@ export {
   type CommandPaletteItem,
   type TwCommandPaletteProps,
 } from "./chrome/tw-command-palette";
+export {
+  TwCommandPaletteMount,
+  type TwCommandPaletteMountProps,
+} from "./chrome/tw-command-palette-mount";
+export {
+  useContainerBreakpoint,
+  resolveBreakpoint,
+  type BreakpointMap,
+} from "./chrome/use-container-breakpoint";
 
 // Collab chrome (P9) — mount when chromePreset === "collab"; each
 // component is pure presentational and takes snapshots + callbacks.

package/src/ui-tailwind/page-chrome-model.ts

@@ -3,6 +3,16 @@ import type {
   PageLayoutSnapshot,
   SurfaceBlockSnapshot,
 } from "../api/public-types.ts";
+import { findPageForOffset } from "../runtime/document-navigation.ts";
+import {
+  DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+  estimateBlockHeight,
+  estimateParagraphLineCount,
+  estimateParagraphLineHeight,
+  getUsableColumnWidth,
+} from "../runtime/page-layout-estimation.ts";
+
+const DOCUMENT_CONTENT_TOP_PADDING_PX = 40;
 
 export interface LineMarker {
   id: string;
@@ -14,14 +24,76 @@ export function computeLineMarkersIfEnabled(input: {
   pageLayout: PageLayoutSnapshot | undefined;
   surfaceBlocks: readonly SurfaceBlockSnapshot[];
   pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>;
-  buildLineNumberMarkers: (
-    blocks: readonly SurfaceBlockSnapshot[],
-    pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
-  ) => LineMarker[];
 }): LineMarker[] {
   if (!input.pageLayout?.lineNumbering) {
     return [];
   }
 
-  return input.buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+  return buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+}
+
+function buildLineNumberMarkers(
+  blocks: readonly SurfaceBlockSnapshot[],
+  pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
+): LineMarker[] {
+  const markers: LineMarker[] = [];
+  if (pages.length === 0) {
+    return markers;
+  }
+
+  let currentTopTwips = 0;
+  let lineNumber = 1;
+  let lastPageIndex = -1;
+  let lastSectionIndex = -1;
+
+  for (const block of blocks) {
+    const pageIndex = findPageForOffset(pages, block.from);
+    const page = pages[pageIndex];
+    if (!page) {
+      continue;
+    }
+
+    const lineNumbering = page.layout.lineNumbering;
+    const restartMode = lineNumbering?.restart ?? "newPage";
+    const restartStart = lineNumbering?.start ?? 1;
+    const countBy = Math.max(1, lineNumbering?.countBy ?? 1);
+    const columnWidth = getUsableColumnWidth(page.layout);
+
+    if (pageIndex !== lastPageIndex) {
+      if (restartMode === "newPage" || lastPageIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastPageIndex = pageIndex;
+    }
+    if (page.sectionIndex !== lastSectionIndex) {
+      if (restartMode === "newSection" || lastSectionIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastSectionIndex = page.sectionIndex;
+    }
+
+    if (block.kind === "paragraph" && lineNumbering) {
+      const lineCount = estimateParagraphLineCount(block, columnWidth);
+      const lineHeight = estimateParagraphLineHeight(block);
+      const suppress = block.suppressLineNumbers === true;
+      for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+        if (!suppress && (lineNumber - restartStart) % countBy === 0) {
+          markers.push({
+            id: `${block.blockId}-${lineIndex}`,
+            label: String(lineNumber),
+            topPx:
+              DOCUMENT_CONTENT_TOP_PADDING_PX +
+              (currentTopTwips + lineIndex * lineHeight) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+          });
+        }
+        if (!suppress) {
+          lineNumber += 1;
+        }
+      }
+    }
+
+    currentTopTwips += estimateBlockHeight(block, columnWidth);
+  }
+
+  return markers;
 }

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -147,7 +147,7 @@ export interface TwPageStackChromeLayerProps {
   "data-testid"?: string;
 }
 
-export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
+const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   facet,
   scrollRoot,
   renderFrameRevision,
@@ -409,4 +409,59 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
   );
 };
 
+function storyTargetEqual(
+  a: TwPageStackChromeLayerProps["activeStory"],
+  b: TwPageStackChromeLayerProps["activeStory"],
+): boolean {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === "main") return true;
+  if (a.kind === "footnote" || a.kind === "endnote") {
+    // TS narrows a to { noteId: string }; b shares the same kind (guard above)
+    return a.noteId === (b as Extract<typeof b, { noteId: string }>).noteId;
+  }
+  if (a.kind === "header" || a.kind === "footer") {
+    const bh = b as Extract<typeof b, { kind: "header" | "footer" }>;
+    return (
+      a.relationshipId === bh.relationshipId &&
+      a.variant === bh.variant &&
+      a.sectionIndex === bh.sectionIndex
+    );
+  }
+  return false;
+}
+
+function rangeEqual(
+  a: { start: number; end: number } | null | undefined,
+  b: { start: number; end: number } | null | undefined,
+): boolean {
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  return a.start === b.start && a.end === b.end;
+}
+
+function propsAreEqual(
+  prev: TwPageStackChromeLayerProps,
+  next: TwPageStackChromeLayerProps,
+): boolean {
+  return (
+    prev.facet === next.facet &&
+    prev.scrollRoot === next.scrollRoot &&
+    prev.renderFrameRevision === next.renderFrameRevision &&
+    storyTargetEqual(prev.activeStory, next.activeStory) &&
+    prev.onOpenStory === next.onOpenStory &&
+    prev.pmSurfaceElement === next.pmSurfaceElement &&
+    prev.pmView === next.pmView &&
+    rangeEqual(prev.visiblePageIndexRange, next.visiblePageIndexRange) &&
+    prev["data-testid"] === next["data-testid"]
+  );
+}
+
+export const TwPageStackChromeLayer = React.memo(
+  TwPageStackChromeLayerInner,
+  propsAreEqual,
+);
+
+/** Exported for unit testing only. */
+export { propsAreEqual as _propsAreEqualForTest };
+
 export default TwPageStackChromeLayer;

package/src/ui-tailwind/page-stack/tw-region-block-renderer.tsx

@@ -140,6 +140,7 @@ function RegionParagraph({
   const resolvedNumbering = block.resolvedNumbering;
   const markerRunProperties = resolvedNumbering?.markerRunProperties;
   const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
+  const markerStart = resolvedNumbering?.geometry?.markerLane?.start;
   const markerJustification = resolvedNumbering?.geometry?.markerJustification;
 
   const prefixSpan =
@@ -164,6 +165,7 @@ function RegionParagraph({
           numberingSuffix,
           markerRunProperties,
           markerWidth,
+          markerStart,
           markerJustification,
         )}
       >

package/src/ui-tailwind/review/tw-comment-sidebar.tsx

@@ -157,6 +157,16 @@ function CommentThreadCard(props: {
   const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
   const hasNoBody = isEmptyCommentBody(leadEntry?.body);
   const showExcerpt = Boolean(thread.excerpt) && !isDraftThread && thread.excerpt !== "Empty thread";
+  const threadCardClassName = [
+    "rounded-lg bg-surface/90 transition-colors ring-1 ring-border",
+    isActive
+      ? "bg-accent-soft/40 ring-accent/25 shadow-[var(--shadow-soft)]"
+      : "hover:bg-surface",
+    thread.status === "detached"
+      ? "border-l-[3px] border-[var(--color-semantic-warning)] opacity-70"
+      : "",
+  ].join(" ");
+  const threadContentPaddingClass = thread.status === "detached" ? "pl-2.5 pr-3" : "px-3";
 
   const scrollRef = useCallback(
     (node: HTMLButtonElement | null) => {
@@ -168,130 +178,123 @@ function CommentThreadCard(props: {
   );
 
   return (
-    <button
-      type="button"
-      ref={scrollRef}
-      data-comment-thread-id={thread.commentId}
-      data-comment-thread-status={thread.status}
-      className={[
-        "w-full text-left cursor-pointer rounded-lg bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border",
-        focusRingClass,
-        isActive
-          ? "bg-accent-soft/40 ring-accent/25 shadow-[var(--shadow-soft)]"
-          : "hover:bg-surface",
-        thread.status === "detached"
-          ? "border-l-[3px] border-[var(--color-semantic-warning)] opacity-70 pl-2.5"
-          : "",
-      ].join(" ")}
-      onClick={() => props.onOpenComment?.(thread)}
-    >
-      {/* Header row: avatar + author + date + status */}
-      <div className="mb-1.5 flex items-center gap-1.5">
-        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-subtle text-[8px] font-semibold text-secondary">
-          {thread.createdBy.charAt(0).toUpperCase()}
-        </span>
-        <span className="truncate text-[10px] font-medium text-primary">{thread.createdBy}</span>
-        {thread.status === "detached" && (
-          <span
-            data-comment-thread-detached-chip="true"
-            className="inline-flex items-center rounded-full bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)] text-[9px] font-semibold uppercase tracking-[0.08em] px-1.5 py-0.5 ml-1.5"
-          >
-            Detached
+    <div data-comment-thread-card={thread.commentId} className={threadCardClassName}>
+      <button
+        type="button"
+        ref={scrollRef}
+        data-comment-thread-id={thread.commentId}
+        data-comment-thread-status={thread.status}
+        className={["w-full cursor-pointer pb-1 pt-2.5 text-left", threadContentPaddingClass, focusRingClass].join(" ")}
+        onClick={() => props.onOpenComment?.(thread)}
+      >
+        {/* Header row: avatar + author + date + status */}
+        <div className="mb-1.5 flex items-center gap-1.5">
+          <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-subtle text-[8px] font-semibold text-secondary">
+            {thread.createdBy.charAt(0).toUpperCase()}
           </span>
-        )}
-        <span data-comment-thread-created-at="true" className="text-[9px] text-tertiary">
-          {formatCommentDate(thread.createdAt)}
-        </span>
-        <span className="flex-1" />
-        {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
-        {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
-      </div>
+          <span className="truncate text-[10px] font-medium text-primary">{thread.createdBy}</span>
+          {thread.status === "detached" && (
+            <span
+              data-comment-thread-detached-chip="true"
+              className="ml-1.5 inline-flex items-center rounded-full bg-[var(--color-semantic-warning-soft)] px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-[0.08em] text-[var(--color-semantic-warning)]"
+            >
+              Detached
+            </span>
+          )}
+          <span data-comment-thread-created-at="true" className="text-[9px] text-tertiary">
+            {formatCommentDate(thread.createdAt)}
+          </span>
+          <span className="flex-1" />
+          {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
+          {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
+        </div>
 
-      {/* Excerpt — anchored text from document */}
-      {showExcerpt ? (
-        <p className="mb-1.5 rounded-md bg-comment-soft px-2 py-1 text-[9px] leading-4 text-secondary italic whitespace-pre-wrap break-words line-clamp-2">
-          {thread.excerpt}
-        </p>
-      ) : null}
+        {/* Excerpt — anchored text from document */}
+        {showExcerpt ? (
+          <p className="mb-1.5 rounded-md bg-comment-soft px-2 py-1 text-[9px] italic leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-2">
+            {thread.excerpt}
+          </p>
+        ) : null}
 
-      {/* Comment body */}
-      {canEdit && (isActive || hasNoBody) ? (
-        <InlineEditableBody
-          body={leadEntry?.body ?? ""}
-          autoFocus={isActive && hasNoBody}
-          onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
-          label={isDraftThread ? "New comment" : undefined}
-        />
-      ) : presentation ? (
-        <CommentMarkdownRenderer
-          body={presentation.body}
-          mentions={presentation.mentions}
-          attachments={presentation.attachments}
-          resolveAttachmentHref={resolveAttachmentHref}
-          className="text-[10px] leading-[1.1rem] text-secondary break-words"
-        />
-      ) : leadEntry?.body ? (
-        <p
-          className="text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4"
-          data-comment-thread-body="true"
-        >
-          {leadEntry.body}
-        </p>
-      ) : canEdit ? (
-        <p
-          className="cursor-text text-[10px] italic text-tertiary"
-          onClick={(e) => {
-            e.stopPropagation();
-            props.onOpenComment?.(thread);
-          }}
-        >
-          New comment
-        </p>
-      ) : null}
+        {/* Comment body */}
+        {canEdit && (isActive || hasNoBody) ? (
+          <InlineEditableBody
+            body={leadEntry?.body ?? ""}
+            autoFocus={isActive && hasNoBody}
+            onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
+            label={isDraftThread ? "New comment" : undefined}
+          />
+        ) : presentation ? (
+          <CommentMarkdownRenderer
+            body={presentation.body}
+            mentions={presentation.mentions}
+            attachments={presentation.attachments}
+            resolveAttachmentHref={resolveAttachmentHref}
+            className="text-[10px] leading-[1.1rem] text-secondary break-words"
+          />
+        ) : leadEntry?.body ? (
+          <p
+            className="text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4"
+            data-comment-thread-body="true"
+          >
+            {leadEntry.body}
+          </p>
+        ) : canEdit ? (
+          <p
+            className="cursor-text text-[10px] italic text-tertiary"
+            onClick={(e) => {
+              e.stopPropagation();
+              props.onOpenComment?.(thread);
+            }}
+          >
+            New comment
+          </p>
+        ) : null}
 
-      {/* Reply entries (compact) */}
-      {thread.entries.slice(1).map((entry) => {
-        const replyPresentation = replyPresentationByEntryId.get(entry.entryId);
-        return (
-          <div key={entry.entryId} className="mt-2 ml-4 border-l border-border pl-2.5">
-            <div className="mb-0.5 flex items-center gap-1">
-              <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
-              <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
+        {/* Reply entries (compact) */}
+        {thread.entries.slice(1).map((entry) => {
+          const replyPresentation = replyPresentationByEntryId.get(entry.entryId);
+          return (
+            <div key={entry.entryId} className="mt-2 ml-4 border-l border-border pl-2.5">
+              <div className="mb-0.5 flex items-center gap-1">
+                <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
+                <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
+              </div>
+              {replyPresentation ? (
+                <CommentMarkdownRenderer
+                  body={replyPresentation.body}
+                  mentions={presentation?.mentions}
+                  attachments={presentation?.attachments}
+                  resolveAttachmentHref={resolveAttachmentHref}
+                  className="text-[10px] leading-4 text-secondary break-words"
+                />
+              ) : (
+                <p
+                  className="text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3"
+                  data-comment-reply-body="true"
+                >
+                  {entry.body}
+                </p>
+              )}
             </div>
-            {replyPresentation ? (
-              <CommentMarkdownRenderer
-                body={replyPresentation.body}
-                mentions={presentation?.mentions}
-                attachments={presentation?.attachments}
-                resolveAttachmentHref={resolveAttachmentHref}
-                className="text-[10px] leading-4 text-secondary break-words"
-              />
-            ) : (
-              <p
-                className="text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3"
-                data-comment-reply-body="true"
-              >
-                {entry.body}
-              </p>
-            )}
-          </div>
-        );
-      })}
+          );
+        })}
 
-      {thread.entryCount > thread.entries.length ? (
-        <p className="mt-1 text-[9px] text-tertiary">
-          +{thread.entryCount - thread.entries.length} more
-        </p>
-      ) : null}
+        {thread.entryCount > thread.entries.length ? (
+          <p className="mt-1 text-[9px] text-tertiary">
+            +{thread.entryCount - thread.entries.length} more
+          </p>
+        ) : null}
+      </button>
 
       {/* Inline actions — compact, horizontal */}
-      <div className="mt-2 flex items-center gap-1">
+      <div className={["mt-2 flex items-center gap-1 pb-2.5", threadContentPaddingClass].join(" ")}>
         {thread.status === "open" && (
           <>
             <button
               type="button"
               className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-accent hover:bg-accent-soft transition-colors"
-              onClick={(e) => { e.stopPropagation(); props.onResolveComment?.(thread.commentId); }}
+              onClick={() => props.onResolveComment?.(thread.commentId)}
             >
               <Check className="h-2 w-2" /> Resolve
             </button>
@@ -305,7 +308,7 @@ function CommentThreadCard(props: {
             type="button"
             className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-secondary hover:bg-surface-hover transition-colors"
             data-comment-thread-action="reopen"
-            onClick={(e) => { e.stopPropagation(); props.onReopenComment?.(thread.commentId); }}
+            onClick={() => props.onReopenComment?.(thread.commentId)}
           >
             <RotateCcw className="h-2 w-2" /> Reopen
           </button>
@@ -314,7 +317,7 @@ function CommentThreadCard(props: {
           <span className="text-[9px] text-comment">Detached</span>
         )}
       </div>
-    </button>
+    </div>
   );
 }
 

package/src/ui-tailwind/review/tw-review-rail-footer.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { HelpCircle, Search } from "lucide-react";
+import { FOCUS_RING_CLASSES } from "../theme/tokens";
 
 /**
  * Thin pinned footer rendered at the bottom of the review rail.  The footer
@@ -14,8 +15,7 @@ export interface TwReviewRailFooterProps {
   searchLabel?: 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";
+const focusRingClass = FOCUS_RING_CLASSES;
 
 /**
  * Accept only http(s) and mailto help links.  Rejects javascript:, data:,

package/src/ui-tailwind/theme/tokens.ts

@@ -273,6 +273,20 @@ export const HOST_LOCKED_TOKENS = [
 export type HostOverridableToken = (typeof HOST_OVERRIDABLE_TOKENS)[number];
 export type HostLockedToken = (typeof HOST_LOCKED_TOKENS)[number];
 
+/**
+ * Canonical focus-visible ring class string (designsystem §4.7 / §7.2).
+ *
+ * Every interactive chrome surface that renders a custom focus indicator
+ * MUST import this constant rather than inline the Tailwind utilities.
+ * The invariant is enforced by `test/ui-tailwind/focus-ring-canonical.test.ts`.
+ *
+ * Exceptions: input / textarea elements that use a 1-px border ring as the
+ * idle-state affordance (e.g. `tw-comment-sidebar` reply composer) are
+ * a distinct pattern and not covered by this utility.
+ */
+export const FOCUS_RING_CLASSES =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
 /** Returns true if `path` is in the locked set (must not be overridden by hosts). */
 export function isTokenPathLocked(path: string): boolean {
   return (HOST_LOCKED_TOKENS as readonly string[]).includes(path);

package/src/ui-tailwind/toolbar/tw-shell-header.tsx

@@ -131,6 +131,11 @@ export function TwShellHeader(props: TwShellHeaderProps): React.ReactElement {
                 key={mode.id}
                 value={mode.id}
                 disabled={mode.disabled}
+                onClick={() => {
+                  if (!mode.disabled) {
+                    props.onModeChange?.(mode.id);
+                  }
+                }}
                 className={`wre-rail-tab ${focusRingClass}`}
                 data-testid={`tw-shell-header__mode-${mode.id}`}
               >