@beyondwork/docx-react-component 1.0.37 → 1.0.38

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -0,0 +1,86 @@
+/**
+ * ChromeOverlay — the single absolute-positioned overlay plane that hosts
+ * every over-document surface (scope rail, comment balloons, revision
+ * margin bars, object handles, workspace view-switcher dock).
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.2, every overlay child
+ * receives `ref.layout` and reads its position from the same render-frame
+ * anchor index — not DOM rects, not selection rects — so the chrome stays
+ * in place across scroll, zoom, and relayout.
+ *
+ * This component owns only the plane and the shared coordinate space.
+ * Each layer it composes is a pure consumer of the facet.
+ */
+
+import * as React from "react";
+import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
+import type { ScopeRailSegment } from "../../runtime/layout";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
+import { TwScopeRailLayer } from "./tw-scope-rail-layer";
+import { TwWorkspaceViewSwitcher, type WorkspaceView } from "./tw-workspace-view-switcher";
+
+export interface TwChromeOverlayProps {
+  /** Layout facet the overlay layers read from. */
+  facet: WordReviewEditorLayoutFacet;
+  /** Optional coordinate space override.  Defaults to the overlay origin. */
+  space?: OverlayCoordinateSpace;
+  /** Active scope id (for emphasis + rail tab sync). */
+  activeScopeId?: string | null;
+  /** Click handler the rail layer forwards to consumers. */
+  onScopeSegmentClick?: (segment: ScopeRailSegment) => void;
+  /** Currently active workspace view preset (draft / layout / review / workflow). */
+  activeWorkspaceView?: WorkspaceView;
+  /** Handler that fires when the user picks a workspace view. */
+  onWorkspaceViewChange?: (view: WorkspaceView) => void;
+  /** Show the bottom workspace view-switcher dock.  Default: true. */
+  showWorkspaceDock?: boolean;
+  /** Test id applied to the overlay root. */
+  "data-testid"?: string;
+  /** Optional extra children (e.g., future comment balloon layer). */
+  children?: React.ReactNode;
+}
+
+/**
+ * Placement contract:
+ *   - The overlay is an absolutely positioned `div` that fills its parent.
+ *   - The parent must be `position: relative` so the overlay anchors to
+ *     the document column (not the viewport).
+ *   - Pointer events are disabled on the root so the editor surface under
+ *     the overlay continues to receive input; individual layers opt in to
+ *     pointer events on their interactive elements (buttons, handles).
+ */
+export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
+  facet,
+  space,
+  activeScopeId,
+  onScopeSegmentClick,
+  activeWorkspaceView,
+  onWorkspaceViewChange,
+  showWorkspaceDock = true,
+  "data-testid": testId,
+  children,
+}) => {
+  return (
+    <div
+      className="wre-chrome-overlay pointer-events-none absolute inset-0 z-30"
+      data-testid={testId ?? "chrome-overlay"}
+      role="presentation"
+    >
+      <TwScopeRailLayer
+        facet={facet}
+        space={space}
+        activeScopeId={activeScopeId}
+        onSegmentClick={onScopeSegmentClick}
+      />
+      {children}
+      {showWorkspaceDock ? (
+        <TwWorkspaceViewSwitcher
+          activeView={activeWorkspaceView ?? "review"}
+          onViewChange={onWorkspaceViewChange}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default TwChromeOverlay;

package/src/ui-tailwind/chrome-overlay/tw-scope-rail-layer.tsx

@@ -0,0 +1,178 @@
+/**
+ * Scope rail layer — renders workflow scopes as a continuous zone with a
+ * gutter icon + label column OUTSIDE the document flow plus a flat block-
+ * level tint BEHIND the scoped paragraphs.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §5, the rail is a projection
+ * over canonical workflow scopes; it never lives inside the PM NodeView
+ * tree.  Positions come from the render kernel's anchor index — not from
+ * DOM rect math — so the rail stays aligned across scroll, zoom, resize,
+ * and through predicted-text reconciliation.
+ */
+
+import * as React from "react";
+import {
+  inflateRect,
+  projectRectToOverlay,
+  unionRect,
+  type OverlayCoordinateSpace,
+} from "./chrome-overlay-projector";
+import type { RenderFrameRect } from "../../runtime/render";
+import type { ScopeRailSegment, ScopeRailPosture } from "../../runtime/layout";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TwScopeRailLayerProps {
+  /** Layout facet that provides segments + anchor index. */
+  facet: WordReviewEditorLayoutFacet;
+  /** Overlay's coordinate space.  Defaults to the overlay's own origin. */
+  space?: OverlayCoordinateSpace;
+  /** Horizontal padding (px) the rail gutter occupies to the left of body. */
+  railLaneWidthPx?: number;
+  /** Optional click handler for a segment label (open-scope drawer, etc). */
+  onSegmentClick?: (segment: ScopeRailSegment) => void;
+  /** Scope id that should render with the `active` emphasis. */
+  activeScopeId?: string | null;
+  /** Test id applied to the layer root. */
+  "data-testid"?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Posture → visual grammar
+// ---------------------------------------------------------------------------
+
+interface PostureStyle {
+  labelText: string;
+  icon: string; // lucide-style key; CSS ::before handles glyph in production
+  railToken: string;
+  tintToken: string;
+}
+
+const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
+  edit: { labelText: "EDIT", icon: "pencil", railToken: "accent", tintToken: "accent" },
+  suggest: { labelText: "SUGGEST", icon: "sparkles", railToken: "warning", tintToken: "warning" },
+  comment: { labelText: "COMMENT", icon: "message", railToken: "insert", tintToken: "insert" },
+  view: { labelText: "IN SCOPE", icon: "eye", railToken: "secondary", tintToken: "secondary" },
+  candidate: { labelText: "PROPOSED", icon: "flag", railToken: "warning", tintToken: "warning" },
+  "preserve-only": { labelText: "BLOCKED", icon: "lock", railToken: "danger", tintToken: "danger" },
+  "blocked-import": { labelText: "BLOCKED", icon: "lock", railToken: "danger", tintToken: "danger" },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const DEFAULT_RAIL_LANE_PX = 120;
+const LABEL_WIDTH_PX = 92;
+
+export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
+  facet,
+  space,
+  railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
+  onSegmentClick,
+  activeScopeId,
+  "data-testid": testId,
+}) => {
+  // Read the render frame once per paint cycle.  The facet.subscribe path
+  // already invalidates the caller's React state on layout changes, so we
+  // just read on render.
+  const frame = typeof facet.getRenderFrame === "function"
+    ? facet.getRenderFrame() ?? null
+    : null;
+  const segments = facet.getAllScopeRailSegments();
+
+  if (!frame || segments.length === 0) {
+    return null;
+  }
+
+  // Group segments by scopeId so multi-page scopes render one contiguous
+  // tint per page range.  (Per-page render happens below because each
+  // scope may span pages.)
+  const items = segments.map((segment) => {
+    const rect = resolveSegmentRect(facet, frame, segment);
+    if (!rect) return null;
+    const style = POSTURE_STYLES[segment.posture];
+    return { segment, rect, style };
+  }).filter((item): item is NonNullable<typeof item> => item !== null);
+
+  const projectorSpace: OverlayCoordinateSpace = space ?? { originLeftPx: 0, originTopPx: 0 };
+
+  return (
+    <div
+      className="wre-scope-rail-layer pointer-events-none absolute inset-0 z-20"
+      data-testid={testId ?? "scope-rail-layer"}
+      aria-hidden="false"
+      role="group"
+      aria-label="Workflow scope rail"
+    >
+      {items.map(({ segment, rect, style }) => {
+        const isActive = activeScopeId === segment.scopeId || segment.isActiveWorkItem;
+        const tintRect = inflateRect(rect, { leftPx: 4, rightPx: 4, topPx: 2, bottomPx: 2 });
+        const labelRect: RenderFrameRect = {
+          leftPx: rect.leftPx - railLaneWidthPx,
+          topPx: rect.topPx,
+          widthPx: LABEL_WIDTH_PX,
+          heightPx: Math.max(20, Math.min(rect.heightPx, 48)),
+        };
+
+        return (
+          <React.Fragment key={`${segment.scopeId}:${segment.pageIndex}:${segment.fromOffset}`}>
+            {/* Flat tint behind the scoped block region */}
+            <div
+              className={`wre-scope-rail-tint wre-scope-rail-tint-${style.tintToken} absolute ${
+                isActive ? "wre-scope-rail-tint-active" : ""
+              }`}
+              data-scope-id={segment.scopeId}
+              data-posture={segment.posture}
+              style={projectRectToOverlay(tintRect, projectorSpace)}
+            />
+            {/* Gutter label + icon outside the page frame */}
+            <button
+              type="button"
+              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken} pointer-events-auto absolute flex flex-col items-center justify-center gap-1 rounded-md text-[10px] font-semibold uppercase tracking-[0.08em] ${
+                isActive ? "wre-scope-rail-label-active" : ""
+              }`}
+              data-scope-id={segment.scopeId}
+              data-posture={segment.posture}
+              data-icon={style.icon}
+              aria-label={`${style.labelText}${segment.label ? `: ${segment.label}` : ""}`}
+              onClick={onSegmentClick ? () => onSegmentClick(segment) : undefined}
+              style={projectRectToOverlay(labelRect, projectorSpace)}
+            >
+              <span aria-hidden="true" className={`wre-scope-rail-icon wre-scope-rail-icon-${style.icon}`} />
+              <span className="wre-scope-rail-label-text">{style.labelText}</span>
+            </button>
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Internals
+// ---------------------------------------------------------------------------
+
+function resolveSegmentRect(
+  facet: WordReviewEditorLayoutFacet,
+  _frame: { anchorIndex: { byRuntimeOffset: (offset: number) => RenderFrameRect | null } },
+  segment: ScopeRailSegment,
+): RenderFrameRect | null {
+  const fromRect = _frame.anchorIndex.byRuntimeOffset(segment.fromOffset);
+  const toRect = _frame.anchorIndex.byRuntimeOffset(Math.max(segment.fromOffset, segment.toOffset - 1));
+  const unioned = unionRect(fromRect, toRect);
+  if (unioned) return unioned;
+  // Fall back to the page rect so long scopes that can't resolve per-line
+  // still render a posture in the gutter.
+  const fallbackPage = facet.getPage(segment.pageIndex);
+  if (!fallbackPage) return null;
+  // Approximate: derive a rect from the page's body region by asking the
+  // render frame for the page rect.  Without a render kernel kernel this
+  // function returns null and the segment is skipped.
+  return null;
+}
+
+export default TwScopeRailLayer;

package/src/ui-tailwind/chrome-overlay/tw-workspace-view-switcher.tsx

@@ -0,0 +1,95 @@
+/**
+ * TwWorkspaceViewSwitcher — floating dock that sits at the bottom of the
+ * chrome overlay.  Mirrors the "WORKFLOW VIEW" bottom bar in image copy.png.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.3, the dock is a
+ * `DraggableFloat`-compatible surface that lives inside the `ChromeOverlay`
+ * plane.  Today it ships the preset selector + the canonical workflow
+ * actions (review / comment / approve) so consumers can wire them without
+ * waiting for the full DraggableFloat primitive.
+ */
+
+import * as React from "react";
+
+export type WorkspaceView = "draft" | "layout" | "review" | "workflow";
+
+export interface WorkspaceViewAction {
+  id: string;
+  label: string;
+  icon: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export interface TwWorkspaceViewSwitcherProps {
+  activeView: WorkspaceView;
+  onViewChange?: (view: WorkspaceView) => void;
+  actions?: readonly WorkspaceViewAction[];
+  "data-testid"?: string;
+}
+
+const DEFAULT_VIEW_ORDER: readonly WorkspaceView[] = [
+  "draft",
+  "layout",
+  "review",
+  "workflow",
+];
+
+const VIEW_LABELS: Record<WorkspaceView, string> = {
+  draft: "DRAFT",
+  layout: "LAYOUT",
+  review: "REVIEW",
+  workflow: "WORKFLOW VIEW",
+};
+
+export const TwWorkspaceViewSwitcher: React.FC<TwWorkspaceViewSwitcherProps> = ({
+  activeView,
+  onViewChange,
+  actions,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      className="wre-workspace-dock pointer-events-auto absolute left-1/2 bottom-6 z-10 -translate-x-1/2 flex items-center gap-2 rounded-full border border-border/70 bg-canvas/95 px-4 py-2 shadow-lg backdrop-blur"
+      data-testid={testId ?? "workspace-view-switcher"}
+      role="toolbar"
+      aria-label="Workspace view"
+    >
+      {DEFAULT_VIEW_ORDER.map((view) => (
+        <button
+          key={view}
+          type="button"
+          className={`wre-workspace-dock-view-btn inline-flex items-center gap-1 rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] ${
+            view === activeView
+              ? "wre-workspace-dock-view-btn-active bg-primary text-white"
+              : "text-secondary hover:text-primary"
+          }`}
+          aria-pressed={view === activeView}
+          onClick={onViewChange ? () => onViewChange(view) : undefined}
+          disabled={!onViewChange}
+        >
+          <span aria-hidden="true" className="wre-workspace-dock-icon h-3 w-3" />
+          {VIEW_LABELS[view]}
+        </button>
+      ))}
+      {actions && actions.length > 0 ? (
+        <div className="wre-workspace-dock-sep mx-1 h-5 w-px bg-border" />
+      ) : null}
+      {actions?.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          className="wre-workspace-dock-action inline-flex h-7 w-7 items-center justify-center rounded-full text-secondary hover:bg-surface hover:text-primary disabled:opacity-40"
+          aria-label={action.label}
+          disabled={action.disabled}
+          onClick={action.onClick}
+          data-action-id={action.id}
+        >
+          <span aria-hidden="true" className={`wre-workspace-dock-icon wre-workspace-dock-icon-${action.icon}`} />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TwWorkspaceViewSwitcher;

package/src/ui-tailwind/editor-surface/fast-text-edit-lane.ts

@@ -103,6 +103,10 @@ export function createFastTextEditLane(
     intent: PredictedIntent,
     buildTx: (tr: Transaction) => Transaction | null,
   ): void {
+    // IME composition holds the DOM range; predicting through it would
+    // fight the browser's composition DOM mutations. The bridge's
+    // compositionstart/end handlers toggle this flag on the session.
+    if (options.session.isComposing()) return;
     const view = options.getView();
     const positionMap = options.getPositionMap();
     if (!view || !positionMap) return;

package/src/ui-tailwind/editor-surface/local-edit-session-state.ts

@@ -43,6 +43,14 @@ export interface LocalEditSessionState {
   clearAllPending(): PendingOp[];
   hasPending(): boolean;
   isPredicted(opId: string): boolean;
+  /**
+   * IME composition state. Set to true while the browser is composing an
+   * IME input sequence (between `compositionstart` and `compositionend`);
+   * the predicted lane must bail from `run()` when composing so IME and
+   * prediction do not fight over the same DOM range.
+   */
+  isComposing(): boolean;
+  setComposing(composing: boolean): void;
 }
 
 export interface CreateLocalEditSessionStateOptions {
@@ -53,12 +61,15 @@ export function createLocalEditSessionState(
   options: CreateLocalEditSessionStateOptions,
 ): LocalEditSessionState {
   let baseRevisionToken = options.baseRevisionToken;
+  let composing = false;
   const pendingOps: PendingOp[] = [];
   const predictedIds = new Set<string>();
 
   return {
     getBaseRevisionToken: () => baseRevisionToken,
     getPendingOps: () => pendingOps.slice(),
+    isComposing: () => composing,
+    setComposing: (value) => { composing = value; },
     appendPending(op) {
       pendingOps.push(op);
       predictedIds.add(op.opId);

package/src/ui-tailwind/editor-surface/perf-probe.ts

@@ -15,7 +15,13 @@ export type PerfProbeKind =
   | "workspace.chrome"
   | "selection.sync"
   | "layout.incremental"
-  | "layout.full";
+  | "layout.full"
+  | "render.frame_build"
+  | "render.frame_diff"
+  | "render.decoration_resolve"
+  | "chrome.overlay_reposition"
+  | "chrome.hit_test"
+  | "rail.segment_project";
 
 /**
  * Counter names the FastTextEditLane emits via `incrementInvalidationCounter`.

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -26,6 +26,12 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
   onUndo: () => void;
   onRedo: () => void;
   onBlockedInput?: (command: "paste" | "drop", message: string) => void;
+  /**
+   * Optional. Fires on `compositionstart` (true) and `compositionend`
+   * (false). The surface forwards this to the predicted lane's session
+   * so the lane can bail from `run()` while IME is composing.
+   */
+  onCompositionChange?: (composing: boolean) => void;
   /**
    * Optional predicted-tx gate plugin. When provided, it replaces the
    * default unconditional filter so the FastTextEditLane can apply
@@ -91,15 +97,20 @@ export function createCommandBridgePlugins(
     props: {
       handleDOMEvents: {
         blur() {
-          isComposing = false;
+          if (isComposing) {
+            isComposing = false;
+            callbacks.onCompositionChange?.(false);
+          }
           return false;
         },
         compositionstart() {
           isComposing = true;
+          callbacks.onCompositionChange?.(true);
           return false;
         },
         compositionend() {
           isComposing = false;
+          callbacks.onCompositionChange?.(false);
           return false;
         },
       },

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -223,6 +223,19 @@ function subtractInlineOverlaps(
   return segments.filter((segment) => segment.from < segment.to);
 }
 
+/**
+ * Rail decorations are now rendered on the `ChromeOverlay` plane via the
+ * `TwScopeRailLayer` consumer of `facet.getAllScopeRailSegments()`, not
+ * through PM Decoration.node.  This function keeps its signature so the
+ * call sites below continue to compile; it warms the range cache (which
+ * other PM decorations can still consume) but emits no node decoration.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §5 the rail must live outside
+ * the PM NodeView tree so: (a) the user perceives it as chrome, not
+ * document content, (b) predicted transactions never flash rail visuals,
+ * and (c) the rail can extend into the page-margin gutter, which PM
+ * cannot paint through block decorations.
+ */
 function pushRailDecorations(
   decorations: Decoration[],
   doc: PMNode,
@@ -231,19 +244,11 @@ function pushRailDecorations(
   spec: RailDecorationSpec,
   rangeCache: Map<string, Array<{ from: number; to: number }>>,
 ): void {
+  void decorations;
+  void spec;
   const cacheKey = `${from}:${to}`;
-  const ranges = rangeCache.get(cacheKey) ?? collectRailRanges(doc, from, to);
   if (!rangeCache.has(cacheKey)) {
-    rangeCache.set(cacheKey, ranges);
-  }
-  for (const range of ranges) {
-    decorations.push(
-      Decoration.node(range.from, range.to, {
-        class: spec.className,
-        "data-workflow-rail": spec.railKind,
-        ...spec.attrs,
-      }),
-    );
+    rangeCache.set(cacheKey, collectRailRanges(doc, from, to));
   }
 }
 
@@ -458,7 +463,12 @@ export function buildDecorations(
           activeScopeIds.has(scope.scopeId)
         );
 
-      if (isSelectionZone && pmRange.allowInline && pmRange.from < pmRange.to) {
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        // Post-R3a: every workflow scope emits inline decorations with
+        // the scope-id attribution.  The flat block-tint + gutter rail
+        // render on the ChromeOverlay — PM keeps only inline class hooks
+        // so selection tools, accessibility, and host scripts can still
+        // resolve the active scope at a text offset.
         const visibleScopeSegments = subtractInlineOverlaps(
           { from: pmRange.from, to: pmRange.to },
           lockedPmRanges.filter((range) => range.to > pmRange.from && range.from < pmRange.to),

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -340,6 +340,9 @@ export const TwProseMirrorSurface = forwardRef<
           onUndo: () => callbacksRef.current?.onUndo(),
           onRedo: () => callbacksRef.current?.onRedo(),
           onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
+          onCompositionChange: (composing) => {
+            sessionRef.current?.setComposing(composing);
+          },
         });
 
     return [

package/src/ui-tailwind/index.ts

@@ -14,10 +14,31 @@ export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./revi
 export { TwCommentSidebar } from "./review/tw-comment-sidebar";
 export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
 export { TwHealthPanel } from "./review/tw-health-panel";
+export { TwWorkflowTab, type TwWorkflowTabProps } from "./review/tw-workflow-tab";
+export {
+  TwRailCard,
+  type TwRailCardProps,
+  type RailCardTone,
+  type RailCardAvatar,
+  type RailCardCounter,
+  type RailCardProgress,
+} from "./review/tw-rail-card";
+export {
+  TwReviewRailFooter,
+  type TwReviewRailFooterProps,
+} from "./review/tw-review-rail-footer";
 
 // Toolbar
 export { TwToolbar, type TwToolbarProps } from "./toolbar/tw-toolbar";
 export { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
+export {
+  TwShellHeader,
+  type TwShellHeaderProps,
+  type ShellHeaderMode,
+  type ShellHeaderModeOption,
+  type ShellHeaderPrimaryAction,
+  type ShellHeaderIconAction,
+} from "./toolbar/tw-shell-header";
 export type { WorkspaceMode, ZoomLevel } from "../api/public-types";
 
 // Status
@@ -27,6 +48,18 @@ export { TwStatusBar } from "./status/tw-status-bar";
 export { TwAlertBanner } from "./chrome/tw-alert-banner";
 export { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
 
+// Chrome overlay plane (R3a — scope rail, workspace dock)
+export {
+  TwChromeOverlay,
+  type TwChromeOverlayProps,
+  TwScopeRailLayer,
+  type TwScopeRailLayerProps,
+  TwWorkspaceViewSwitcher,
+  type TwWorkspaceViewSwitcherProps,
+  type WorkspaceView,
+  type WorkspaceViewAction,
+} from "./chrome-overlay";
+
 // Session capabilities
 export {
   deriveCapabilities,

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

@@ -93,10 +93,10 @@ function CommentThreadCard(props: {
       role="button"
       tabIndex={0}
       className={[
-        "cursor-pointer rounded-md bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
+        "cursor-pointer rounded-lg bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
         focusRingClass,
         isActive
-          ? "bg-accent-soft/40 ring-accent/25"
+          ? "bg-accent-soft/40 ring-accent/25 shadow-[var(--shadow-soft)]"
           : "hover:bg-surface",
         thread.status === "detached" ? "opacity-70" : "",
       ].join(" ")}