@beyondwork/docx-react-component 1.0.56 → 1.0.57

package/src/ui-tailwind/editor-surface/shape-renderer.ts

@@ -0,0 +1,206 @@
+/**
+ * Lane 6d — Slice N10 (P12.1 + P12.2): pure SVG shape renderer.
+ *
+ * Maps the V2c.5 `kind: "shape"` surface segment onto inline SVG markup
+ * for the most common geometries (rect / ellipse / roundRect).  Pure —
+ * no DOM access, no React; returns a plain markup string the toDOM can
+ * embed via attrs.  Returns `null` for unsupported geometries so the
+ * caller falls back to the existing chip render.
+ *
+ * v1 fill coverage: solid (srgbClr) → `#${hex}`; solid (schemeClr) →
+ * `currentColor` placeholder until Lane 6a theme resolver wires through;
+ * none → `none`.  Gradient + pattern fills are dropped at the surface
+ * boundary (V2c.5 surface only carries solid/none) — they remain on the
+ * canonical model for a future renderer extension.
+ *
+ * v1 line coverage: width = `widthEmu / 9525` px; color same handling as
+ * fill; `noLine: true` → `stroke: "none"`.
+ */
+
+import { EMU_PER_PX } from "../../runtime/units";
+
+const SUPPORTED_GEOMETRIES = new Set(["rect", "ellipse", "roundRect"]);
+
+export type ShapeFill =
+  | { kind: "solid"; color: string; colorType: "srgbClr" | "schemeClr" }
+  | { kind: "none" };
+
+export type ShapeLine = {
+  color?: string;
+  widthEmu?: number;
+  noLine?: boolean;
+};
+
+export interface ResolvedFillCss {
+  fill: string;
+  /** True when caller should warn about unresolved scheme color. */
+  isSchemePlaceholder: boolean;
+}
+
+export interface ResolvedLineCss {
+  stroke: string;
+  strokeWidth: number;
+}
+
+/**
+ * Resolve a shape fill into a CSS color string.  schemeClr falls back
+ * to `currentColor` until Lane 6a's theme resolver is wired here —
+ * `isSchemePlaceholder` flags the placeholder so callers (or follow-up
+ * slices) can later substitute the resolved theme color.
+ */
+export function resolveFillCss(fill: ShapeFill | undefined): ResolvedFillCss {
+  if (!fill || fill.kind === "none") {
+    return { fill: "none", isSchemePlaceholder: false };
+  }
+  if (fill.colorType === "schemeClr") {
+    return { fill: "currentColor", isSchemePlaceholder: true };
+  }
+  // srgbClr — color is uppercase hex without leading `#`.
+  return { fill: `#${fill.color}`, isSchemePlaceholder: false };
+}
+
+/**
+ * Resolve a shape line into stroke + stroke-width values.  `noLine: true`
+ * collapses to `stroke: "none"` per OOXML semantics.  Default stroke
+ * width is 1 px when widthEmu is absent or zero.
+ */
+export function resolveLineCss(line: ShapeLine | undefined): ResolvedLineCss {
+  if (!line || line.noLine) {
+    return { stroke: "none", strokeWidth: 0 };
+  }
+  // Default stroke (no widthEmu) matches the floor used when widthEmu
+  // is set — otherwise a `widthEmu: 0` shape would get a fatter stroke
+  // (1 px) than a `widthEmu: 1` shape (0.5 px from the Math.max floor).
+  const strokeWidth = line.widthEmu && line.widthEmu > 0
+    ? Math.max(0.5, line.widthEmu / EMU_PER_PX)
+    : 0.5;
+  // line.color uses OOXML hex without `#`; "auto" → currentColor.
+  const stroke = !line.color || line.color === "auto"
+    ? "currentColor"
+    : `#${line.color}`;
+  return { stroke, strokeWidth };
+}
+
+export interface ShapeSegmentLike {
+  geometry?: string;
+  fill?: ShapeFill;
+  line?: ShapeLine;
+}
+
+/**
+ * PM `DOMOutputSpec`-style array tree for an SVG element.  Each inner
+ * tuple is `[tag, attrs, ...children]`.  Used by ProseMirror's
+ * `toDOM` to construct DOM nodes without string parsing.
+ */
+export type SvgSpec = readonly [string, Record<string, string>, ...SvgSpec[]];
+
+/**
+ * Render a supported geometry into a PM-compatible DOMOutputSpec tree
+ * for an inline `<svg>`.  Returns `null` when the geometry is unsupported
+ * or the caller did not supply pixel dimensions (a chip-fallback signal).
+ *
+ * The SVG is sized 1:1 to its container; the wrapper span owns the
+ * outer `width:Xpx; height:Ypx`.
+ */
+export function renderShapeSvg(
+  segment: ShapeSegmentLike,
+  widthPx: number,
+  heightPx: number,
+): SvgSpec | null {
+  if (!widthPx || !heightPx) return null;
+  if (!segment.geometry || !SUPPORTED_GEOMETRIES.has(segment.geometry)) {
+    return null;
+  }
+  const fillCss = resolveFillCss(segment.fill);
+  const lineCss = resolveLineCss(segment.line);
+  const sw = lineCss.strokeWidth;
+  // Inset the geometry by half the stroke so the stroke paints inside
+  // the bounding box (browsers default to centered stroke).
+  const insetX = sw / 2;
+  const insetY = sw / 2;
+  const innerW = Math.max(0, widthPx - sw);
+  const innerH = Math.max(0, heightPx - sw);
+
+  let geometryEl: SvgSpec;
+  switch (segment.geometry) {
+    case "rect":
+      geometryEl = [
+        "rect",
+        {
+          x: String(insetX),
+          y: String(insetY),
+          width: String(innerW),
+          height: String(innerH),
+          fill: fillCss.fill,
+          stroke: lineCss.stroke,
+          "stroke-width": String(sw),
+        },
+      ];
+      break;
+    case "roundRect": {
+      // Default OOXML preset uses ~10% of the shorter side for corner radius.
+      const r = Math.min(innerW, innerH) * 0.1;
+      geometryEl = [
+        "rect",
+        {
+          x: String(insetX),
+          y: String(insetY),
+          width: String(innerW),
+          height: String(innerH),
+          rx: String(r),
+          ry: String(r),
+          fill: fillCss.fill,
+          stroke: lineCss.stroke,
+          "stroke-width": String(sw),
+        },
+      ];
+      break;
+    }
+    case "ellipse": {
+      const cx = widthPx / 2;
+      const cy = heightPx / 2;
+      const rx = Math.max(0, (widthPx - sw) / 2);
+      const ry = Math.max(0, (heightPx - sw) / 2);
+      geometryEl = [
+        "ellipse",
+        {
+          cx: String(cx),
+          cy: String(cy),
+          rx: String(rx),
+          ry: String(ry),
+          fill: fillCss.fill,
+          stroke: lineCss.stroke,
+          "stroke-width": String(sw),
+        },
+      ];
+      break;
+    }
+    default:
+      return null;
+  }
+
+  // PM's DOMSerializer parses the tag string for an SVG namespace prefix:
+  // "http://www.w3.org/2000/svg svg" → createElementNS().  Setting an
+  // `xmlns` *attribute* after createElement() is meaningless — the
+  // resulting node is HTMLUnknownElement and won't paint as SVG.
+  // Children inherit the namespace, so the geometry tag stays bare.
+  return [
+    "http://www.w3.org/2000/svg svg",
+    {
+      viewBox: `0 0 ${widthPx} ${heightPx}`,
+      width: String(widthPx),
+      height: String(heightPx),
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+    },
+    geometryEl,
+  ];
+}
+
+/**
+ * Whether N10 v1 supports rendering this geometry as SVG.  Useful for
+ * caller-side branching when the chip fallback should fire.
+ */
+export function isSupportedShapeGeometry(geometry: string | undefined): boolean {
+  return geometry !== undefined && SUPPORTED_GEOMETRIES.has(geometry);
+}

package/src/ui-tailwind/editor-surface/surface-layer.ts

@@ -0,0 +1,66 @@
+/**
+ * R.4 SurfaceLayer — named shell for the outermost input surface layer.
+ * See `docs/plans/lane-1-editing-foundation.md` §R.4.
+ *
+ * Analogous to LibreOffice `SwWrtShell`. Owns: keyboard resolution, paste/drop
+ * routing decisions, composition state. Does NOT own: PM view construction,
+ * DOM manipulation, visible selection chrome — those stay in
+ * `pm-command-bridge.ts` as a thin plugin factory that forwards events here.
+ *
+ * The R.4 scope shipped in this first extraction is the TYPED RESULT SHAPE +
+ * a testable dispatch seam for the keyboard path. Tests can now exercise
+ * "Ctrl+F without React render" by calling `surfaceLayer.resolveKeyDown`
+ * directly — no PM boot, no DOM.
+ *
+ * Follow-up work (not in this slice): migrate `pm-command-bridge.ts`
+ * `handleKeyDown` / `handlePaste` / `handleDrop` to call into
+ * `surfaceLayer.dispatchPaste` / `surfaceLayer.dispatchDrop` so the bridge
+ * becomes a plugin factory with zero dispatch logic.
+ */
+
+import {
+  resolveSurfaceShortcut,
+  resolveShellShortcut,
+  type ShellShortcutContext,
+  type ShellShortcutResolution,
+  type ShortcutKeyInput,
+  type SurfaceShortcutContext,
+  type SurfaceShortcutResolution,
+} from "../../ui/runtime-shortcut-dispatch";
+
+export type SurfaceResult =
+  | { kind: "dispatched"; surface: SurfaceShortcutResolution }
+  | { kind: "shell"; shell: ShellShortcutResolution }
+  | { kind: "pass-through" };
+
+export interface SurfaceLayer {
+  /**
+   * Resolve a keydown event. Consults the shell-level dispatcher first
+   * (Ctrl+F / Ctrl+Shift+E / F5 etc.) and falls back to the surface-level
+   * dispatcher (typing, arrows, Tab). Returns a typed `SurfaceResult` so
+   * callers can switch on the kind without reaching into either
+   * dispatcher's specific resolution types.
+   */
+  resolveKeyDown(
+    input: ShortcutKeyInput,
+    shell: ShellShortcutContext,
+    surface: SurfaceShortcutContext,
+  ): SurfaceResult;
+}
+
+/**
+ * Default stateless SurfaceLayer instance. Safe to share across runtimes.
+ */
+export const surfaceLayer: SurfaceLayer = {
+  resolveKeyDown(input, shell, surface) {
+    const shellResolution = resolveShellShortcut(input, shell);
+    if (shellResolution.kind !== "none") {
+      return { kind: "shell", shell: shellResolution };
+    }
+    const surfaceResolution = resolveSurfaceShortcut(input, surface);
+    if (surfaceResolution.kind !== "none") {
+      return { kind: "dispatched", surface: surfaceResolution };
+    }
+    return { kind: "pass-through" };
+  },
+};

package/src/ui-tailwind/editor-surface/tw-inline-token.tsx

@@ -93,6 +93,35 @@ export function TwInlineToken(props: TwInlineTokenProps) {
     );
   }
 
+  // V2c.5 — shape segment (rect/ellipse/text-box/etc).  Lane 6d N10 will
+  // upgrade this to proper SVG/HTML shape rendering; for now we render a
+  // selectable chip so reviewers can see the shape exists in the doc.
+  if (segment.kind === "shape") {
+    const isTextBox = Boolean(segment.isTextBox);
+    const label = isTextBox && segment.txbxText ? segment.txbxText : segment.label;
+    return (
+      <button
+        type="button"
+        tabIndex={-1}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+        }}
+        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none cursor-pointer ${commentClass} text-secondary bg-surface ${
+          selected ? "ring-1 ring-accent/30" : ""
+        } ${focusRingClass}`}
+        title={segment.detail || segment.label}
+        data-segment-kind="shape"
+        data-shape-geometry={segment.geometry ?? ""}
+      >
+        {renderTwCaret(selection, segment.from)}
+        <span>{isTextBox ? "□" : "◇"}</span>
+        {label}
+        {renderTwCaret(selection, segment.to)}
+      </button>
+    );
+  }
+
   // opaque_inline
   if (segment.kind === "opaque_inline") {
     if (segment.presentation === "quiet-marker") {

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

@@ -23,7 +23,13 @@ export function TwSegmentView(props: TwSegmentViewProps) {
   const { segment, selection, markupDisplay } = props;
 
   // Non-text segments delegate to TwInlineToken
-  if (segment.kind === "tab" || segment.kind === "hard_break" || segment.kind === "image" || segment.kind === "opaque_inline") {
+  if (
+    segment.kind === "tab" ||
+    segment.kind === "hard_break" ||
+    segment.kind === "image" ||
+    segment.kind === "opaque_inline" ||
+    segment.kind === "shape"
+  ) {
     return (
       <TwInlineToken
         segment={segment}

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

@@ -73,6 +73,7 @@ import type {
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
 import {
+  measureWidgetsViaOffsetChain,
   measureWidgetsViaBoundingRect,
   resolvePageOverlayRects,
   type PageOverlayRect,
@@ -176,7 +177,10 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
     const origin = overlayRootRef.current;
     const pageCount = facet.getPageCount();
     if (origin) {
-      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin);
+      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
+        pageCount,
+        visiblePageIndexRange,
+      });
       const originRect = origin.getBoundingClientRect();
       // jsdom + SSR never populate `origin.clientHeight` (no layout
       // pass).  Fall back to `originRect.height`, and if that's also
@@ -194,12 +198,24 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
           widgets,
           pageCount,
           scrollHeight,
+          visiblePageIndexRange,
         }),
       );
     } else {
-      setRects(resolvePageOverlayRects([scrollRoot, pageCount]));
+      const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
+        pageCount,
+        visiblePageIndexRange,
+      });
+      setRects(
+        resolvePageOverlayRects({
+          widgets,
+          pageCount,
+          scrollHeight: scrollRoot.clientHeight,
+          visiblePageIndexRange,
+        }),
+      );
     }
-  }, [facet, scrollRoot]);
+  }, [facet, scrollRoot, visiblePageIndexRange]);
 
   const refreshRects = React.useCallback(() => {
     if (!scrollRoot) {
@@ -371,14 +387,14 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
       }
       style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
     >
-      {rects.map((rect, pageIndex) => {
-        const page = facet.getPage(pageIndex);
+      {rects.map((rect) => {
+        const page = facet.getPage(rect.pageIndex);
         if (!page) return null;
         return (
           <TwPageChromeEntry
             key={`page-chrome-${rect.pageId}`}
             rect={rect}
-            pageIndex={pageIndex}
+            pageIndex={rect.pageIndex}
             page={page}
             facet={facet}
             activeStory={activeStory}

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

@@ -159,7 +159,7 @@ function CommentThreadCard(props: {
   const showExcerpt = Boolean(thread.excerpt) && !isDraftThread && thread.excerpt !== "Empty thread";
 
   const scrollRef = useCallback(
-    (node: HTMLDivElement | null) => {
+    (node: HTMLButtonElement | null) => {
       if (node && isActive && typeof node.scrollIntoView === "function") {
         node.scrollIntoView({ behavior: "smooth", block: "nearest" });
       }
@@ -168,14 +168,13 @@ function CommentThreadCard(props: {
   );
 
   return (
-    <div
+    <button
+      type="button"
       ref={scrollRef}
       data-comment-thread-id={thread.commentId}
       data-comment-thread-status={thread.status}
-      role="button"
-      tabIndex={0}
       className={[
-        "cursor-pointer rounded-lg bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
+        "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)]"
@@ -185,12 +184,6 @@ function CommentThreadCard(props: {
           : "",
       ].join(" ")}
       onClick={() => props.onOpenComment?.(thread)}
-      onKeyDown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          props.onOpenComment?.(thread);
-        }
-      }}
     >
       {/* Header row: avatar + author + date + status */}
       <div className="mb-1.5 flex items-center gap-1.5">
@@ -260,7 +253,7 @@ function CommentThreadCard(props: {
       {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/50 pl-2.5">
+          <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>
@@ -321,7 +314,7 @@ function CommentThreadCard(props: {
           <span className="text-[9px] text-comment">Detached</span>
         )}
       </div>
-    </div>
+    </button>
   );
 }
 
@@ -338,7 +331,8 @@ function InlineEditableBody(props: {
   useEffect(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
-      textareaRef.current.setSelectionRange(draft.length, draft.length);
+      const len = textareaRef.current.value.length;
+      textareaRef.current.setSelectionRange(len, len);
     }
   }, [isEditing]);
 
@@ -367,7 +361,7 @@ function InlineEditableBody(props: {
       ) : null}
       <textarea
         ref={textareaRef}
-        className="w-full resize-none rounded-md bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
+        className="w-full resize-none rounded-md bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border"
         rows={2}
         value={draft}
         placeholder="Type your comment..."
@@ -428,7 +422,7 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
     <div className="w-full mt-1.5" onClick={(e) => e.stopPropagation()}>
       <textarea
         ref={inputRef}
-        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
+        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border"
         rows={2}
         placeholder="Reply..."
         value={body}

package/src/ui-tailwind/review/tw-health-panel.tsx

@@ -187,28 +187,3 @@ export function TwHealthPanel(props: TwHealthPanelProps) {
   );
 }
 
-function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
-  const styles: Record<string, string> = {
-    "supported-roundtrip":
-      "text-[var(--color-semantic-success)] bg-[var(--color-semantic-success-soft)]",
-    "preserve-only":
-      "text-[var(--color-semantic-warning)] bg-[var(--color-semantic-warning-soft)]",
-    "unsupported-fatal":
-      "text-[var(--color-semantic-error)] bg-[var(--color-semantic-error-soft)]",
-  };
-  const labels: Record<string, string> = {
-    "supported-roundtrip": "supported",
-    "preserve-only": "preserve-only",
-    "unsupported-fatal": "blocked",
-  };
-  return (
-    <span
-      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass] ?? ""}`}
-    >
-      {labels[props.featureClass]}
-    </span>
-  );
-}
-
-// Keep FeatureClassBadge exported for potential external use
-export { FeatureClassBadge };

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

@@ -23,6 +23,13 @@ export type RailCardTone =
 
 export interface RailCardAvatar {
   initials: string;
+  /**
+   * Author-specific avatar background color. Caller-provided CSS color string
+   * (hex, rgb, hsl, or named). Intentionally bypasses the design token system:
+   * author identity colors must remain stable across light/dark themes and
+   * across workspace re-brands. Callers should provide a color with sufficient
+   * contrast against white `initials` text (WCAG AA 4.5:1).
+   */
   color?: string;
   alt?: string;
 }
@@ -80,28 +87,14 @@ export function TwRailCard(props: TwRailCardProps) {
   } = props;
 
   const handleClick = onClick || onSelect;
-  const tag: "article" | "button" = handleClick ? "button" : "article";
 
   const clamped = progress
     ? Math.max(0, Math.min(1, progress.total && progress.total > 0 ? progress.value / progress.total : progress.value))
     : 0;
 
-  const commonProps: Record<string, unknown> = {
-    className: `wre-rail-card block w-full text-left${isFocused ? " ring-1 ring-[var(--color-accent-primary)]/30" : ""}`,
-    "data-tone": tone,
-    "data-active": isActive ? "true" : "false",
-    "data-focused": isFocused ? "true" : undefined,
-    "data-testid": dataTestId,
-  };
-
-  if (handleClick) {
-    commonProps.onClick = handleClick;
-    commonProps.type = "button";
-  }
+  const sharedClassName = `wre-rail-card block w-full text-left${isFocused ? " ring-1 ring-[var(--color-accent-primary)]/30" : ""}`;
 
-  return React.createElement(
-    tag,
-    commonProps,
+  const cardChildren = (
     <>
       {counter ? (
         <span className="wre-rail-card__counter" aria-label={counter.label} title={counter.label}>
@@ -153,6 +146,34 @@ export function TwRailCard(props: TwRailCardProps) {
           />
         </span>
       ) : null}
-    </>,
+    </>
+  );
+
+  if (handleClick) {
+    return (
+      <button
+        type="button"
+        className={sharedClassName}
+        data-tone={tone}
+        data-active={isActive ? "true" : "false"}
+        data-focused={isFocused ? "true" : undefined}
+        data-testid={dataTestId}
+        onClick={handleClick}
+      >
+        {cardChildren}
+      </button>
+    );
+  }
+
+  return (
+    <article
+      className={sharedClassName}
+      data-tone={tone}
+      data-active={isActive ? "true" : "false"}
+      data-focused={isFocused ? "true" : undefined}
+      data-testid={dataTestId}
+    >
+      {cardChildren}
+    </article>
   );
 }

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

@@ -157,8 +157,8 @@ export function TwReviewRail(props: TwReviewRailProps) {
         <Tabs.List
           className={
             editorial
-              ? "flex shrink-0 items-center gap-2 border-b border-border/60 px-2"
-              : "flex shrink-0 border-b border-border/60 px-3 py-2"
+              ? "flex shrink-0 items-center gap-2 border-b border-border px-2"
+              : "flex shrink-0 border-b border-border px-3 py-2"
           }
           style={
             editorial

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

@@ -120,18 +120,11 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
               const isActive = activeRevisionId === rev.revisionId;
 
               return (
-                <div
+                <button
                   key={rev.revisionId}
-                  role="button"
-                  tabIndex={0}
-                  className={`flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border/40 ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
+                  type="button"
+                  className={`w-full text-left flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
                   onClick={() => props.onOpenRevision?.(rev)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      props.onOpenRevision?.(rev);
-                    }
-                  }}
                 >
                   <div className={`w-0.5 shrink-0 rounded-l-md ${
                     rev.kind === "insertion" ? "bg-insert"
@@ -189,12 +182,12 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       )}
                     </div>
                   </div>
-                </div>
+                </button>
               );
             })}
           </div>
         ) : (
-          <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border/40">
+          <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border">
             {trackedChanges.totalCount > 0
               ? (visibleRevisions.length > 0
                   ? "No revisions match the current filter."

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -54,7 +54,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   if (uniqueSegments.length === 0) {
     return (
       <div
-        className="wre-workflow-tab-empty rounded-md border border-dashed border-border/60 bg-canvas/50 p-4 text-[11px] text-tertiary"
+        className="wre-workflow-tab-empty rounded-md border border-dashed border-border bg-canvas/50 p-4 text-[11px] text-tertiary"
         data-testid="workflow-tab-empty"
       >
         <div className="font-semibold uppercase tracking-[0.1em] text-secondary">
@@ -82,7 +82,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
           <button
             key={segment.scopeId}
             type="button"
-            className={`wre-workflow-card flex flex-col gap-1 rounded-md border border-border/50 bg-canvas p-3 text-left transition-shadow hover:shadow-md ${
+            className={`wre-workflow-card flex flex-col gap-1 rounded-md border border-border bg-canvas p-3 text-left transition-shadow hover:shadow-md ${
               isActive ? "ring-1 ring-accent/60" : ""
             }`}
             onClick={() => {

package/src/ui-tailwind/theme/editor-theme.css

@@ -154,6 +154,7 @@
  * instead of near-black.  Accents drop from neon to the documented forest
  * green so they do not glow against the deep slate canvas.
  */
+[data-theme="dark"],
 .dark {
   --color-surface: #182420;
   --color-surface-hover: #20302a;

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

@@ -91,6 +91,9 @@
   --color-change-comment: #E8F4EC;
   --color-change-selection: #DDF1E4;
 
+  /* Highlight (user-driven content, stable across themes — §3 cell-fill + text-highlight family) */
+  --color-highlight-default: #FFF59D;
+
   /* Chart — categorical */
   --color-chart-categorical-1: #1F6B4F;
   --color-chart-categorical-2: #72D6AE;
@@ -236,6 +239,9 @@
   --color-change-comment: #21342A;
   --color-change-selection: #294235;
 
+  /* Highlight (dimmed to avoid glare; same chroma family as light-mode yellow) */
+  --color-highlight-default: #B8A829;
+
   /* Chart — categorical */
   --color-chart-categorical-1: #53B487;
   --color-chart-categorical-2: #9AE7C7;