@beyondwork/docx-react-component 1.0.39 → 1.0.41

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "packageManager": "pnpm@10.30.3",
   "type": "module",

package/src/api/public-types.ts

@@ -1,6 +1,8 @@
 import type { PersistedEditorSnapshot as RuntimePersistedEditorSnapshot } from "../core/state/editor-state.ts";
 import type { CanonicalParagraphFormatting, CanonicalRunFormatting } from "../model/canonical-document.ts";
 import type { WordReviewEditorLayoutFacet } from "../runtime/layout/public-facet.ts";
+import type { RenderFrameRect } from "../runtime/render/index.ts";
+import type { ScopeRailPosture } from "../runtime/workflow-rail-segments.ts";
 
 export type { CanonicalParagraphFormatting, CanonicalRunFormatting };
 
@@ -1675,6 +1677,102 @@ export interface WorkflowMetadataSnapshot {
   entries: WorkflowMetadataEntry[];
 }
 
+// ---------------------------------------------------------------------------
+// R2 — issue metadata (scope-card-overlay P1)
+// ---------------------------------------------------------------------------
+
+/**
+ * Canonical metadata id for playbook-raised issues. Hosts register a
+ * `WorkflowMetadataDefinition` with this id and push one
+ * `WorkflowMetadataEntry` per issue; the scope card reads the entries
+ * whose `workItemId` or `scopeId` matches a rendered scope.
+ *
+ * Field names line up 1:1 with the CCEP Playbook Engine rule shape so
+ * hosts can push rule output without remapping.
+ */
+export const ISSUE_METADATA_ID = "workflow.metadata.issue" as const;
+
+export type IssueSeverity = "low" | "medium" | "high" | "blocker";
+
+/**
+ * Playbook rule modes. `guidance` is an advisory preference; `fallback`
+ * is a tiered alternative; `mandatory` cannot be silently removed;
+ * `escalate` requires named-owner sign-off; `block` refuses the edit
+ * outright.
+ */
+export type IssueMode =
+  | "guidance"
+  | "fallback"
+  | "mandatory"
+  | "escalate"
+  | "block";
+
+/**
+ * Named escalation / ownership targets for playbook issues. Hosts can
+ * extend the literal via a widened `string` alias if a tenant needs a
+ * custom owner, but the canonical set matches CCEP's playbook rule
+ * shape.
+ */
+export type IssueOwner =
+  | "procurement"
+  | "legal"
+  | "risk"
+  | "finance"
+  | "sustainability";
+
+export interface IssueMetadataValue {
+  issueId: string;
+  ruleId?: string;
+  topic: string;
+  severity: IssueSeverity;
+  mode: IssueMode;
+  owner?: IssueOwner;
+  escalateTo?: IssueOwner;
+  checklistState: "open" | "acknowledged" | "resolved" | "waived";
+  escalationState?: "none" | "requested" | "approved" | "rejected";
+  suggestionIds?: string[];
+  rationale?: string;
+  title: string;
+  summary?: string;
+}
+
+/**
+ * Per-scope action the scope card's issue row exposes. Dispatched as a
+ * `scope-issue-action-requested` event — host decides what the action
+ * means and updates the `IssueMetadataValue.checklistState` /
+ * `escalationState` accordingly. The card never mutates runtime state.
+ */
+export type ScopeIssueAction =
+  | "resolve"
+  | "waive"
+  | "escalate"
+  | "acknowledge";
+
+/**
+ * Scope card projection consumed by the chrome overlay's card layer.
+ * Joins a `WorkflowScope` with its attached issue metadata (R2),
+ * suggestion groups (R3 — P2 populates), review-action count (K1 —
+ * P2 populates), and agent-pending flag (K2 — P2 populates).
+ *
+ * `primaryAnchorRect` is the position the card should hover next to —
+ * resolved via `RenderAnchorIndex.bySelection(fromOffset, toOffset)`
+ * on the active page, or `null` when the scope is off-screen.
+ */
+export interface ScopeCardModel {
+  scopeId: string;
+  workItemId?: string;
+  posture: ScopeRailPosture;
+  label: string;
+  primaryAnchorRect: RenderFrameRect | null;
+  issue?: IssueMetadataValue;
+  /** R3 suggestion groups attached to the scope. P2 populates; P1 = []. */
+  suggestionGroupIds: readonly string[];
+  /** K1 review-action count for the scope's issue. P2 populates; P1 = 0. */
+  reviewActionCount: number;
+  /** K2 agent-pending flag (overlapping WorkflowCandidateRange source:"ai"). P2 populates; P1 = false. */
+  agentPending: boolean;
+}
+
 export interface WorkflowBlockedCommandReason {
   code:
     | "outside_workflow_scope"
@@ -2192,6 +2290,30 @@ export type WordReviewEditorEvent =
       documentId: string;
       command: string;
       reasons: WorkflowBlockedCommandReason[];
+    }
+  | {
+      /**
+       * Scope card mode selector fired a mode change. Host relays to the
+       * existing `setWorkflowOverlay` path (or the CCEP workflow
+       * endpoint) — the card never mutates runtime state directly.
+       */
+      type: "scope-mode-change-requested";
+      documentId: string;
+      scopeId: string;
+      mode: WorkflowScopeMode;
+    }
+  | {
+      /**
+       * Scope card issue row fired an action (resolve / waive /
+       * escalate / acknowledge). Host updates the attached
+       * `IssueMetadataValue.checklistState` / `escalationState` and
+       * re-pushes via `setWorkflowMetadataEntries`.
+       */
+      type: "scope-issue-action-requested";
+      documentId: string;
+      scopeId: string;
+      issueId: string;
+      action: ScopeIssueAction;
     };
 
 export interface LoadResult {

package/src/index.ts

@@ -7,6 +7,8 @@ export {
   validateEditorSessionState,
   EDITOR_SESSION_STATE_VERSION,
 } from "./api/session-state.ts";
+// R2 — issue metadata id for scope-card-overlay P1.
+export { ISSUE_METADATA_ID } from "./api/public-types.ts";
 export type {
   LoadRequest,
   LoadSourcePolicy,
@@ -104,6 +106,13 @@ export type {
   WorkflowMetadataDefinition,
   WorkflowMetadataEntry,
   WorkflowMetadataSnapshot,
+  // R2 — issue metadata (scope-card-overlay P1)
+  IssueSeverity,
+  IssueMode,
+  IssueOwner,
+  IssueMetadataValue,
+  ScopeIssueAction,
+  ScopeCardModel,
   WorkflowBlockedCommandReason,
   WorkflowScopeSnapshot,
   InteractionGuardSnapshot,

package/src/runtime/document-runtime.ts

@@ -496,6 +496,13 @@ export function createDocumentRuntime(
         activeStory,
       };
     },
+    // R2 / scope-card-overlay P1 — surface metadata markup so
+    // `facet.getAllScopeCardModels()` can attach `IssueMetadataValue`
+    // to its scope without the chrome overlay having to re-fetch a
+    // separate snapshot.  Reads through the same cached snapshot the
+    // runtime already builds for comment/revision/search consumers.
+    getWorkflowMarkupMetadata: () =>
+      getCachedWorkflowMarkupSnapshot().metadata,
   });
   renderKernelRef = createRenderKernel({
     facet: layoutFacet,

package/src/runtime/layout/docx-font-loader.ts

@@ -45,12 +45,35 @@ export interface DocxFontLoader {
   refresh(input: FontLoaderInput): void;
 }
 
+interface MinimalFontFace {
+  load(): Promise<MinimalFontFace>;
+}
+
+interface MinimalFontFaceDescriptors {
+  weight?: string;
+  style?: string;
+}
+
+interface MinimalFontFaceConstructor {
+  new (
+    family: string,
+    source: ArrayBuffer | ArrayBufferView | string,
+    descriptors?: MinimalFontFaceDescriptors,
+  ): MinimalFontFace;
+}
+
+interface MinimalFontFaceSet {
+  add(face: MinimalFontFace): void;
+  check(font: string): boolean;
+  ready: Promise<MinimalFontFaceSet>;
+}
+
 export function createDocxFontLoader(initial: FontLoaderInput): DocxFontLoader {
+  const globalDocument = (globalThis as unknown as { document?: { fonts?: unknown } }).document;
   const supported =
-    typeof document !== "undefined" &&
+    globalDocument !== undefined &&
     typeof (globalThis as { FontFace?: unknown }).FontFace !== "undefined" &&
-    // Guard against jsdom which exposes FontFace but not document.fonts
-    Boolean((document as Document & { fonts?: FontFaceSet }).fonts);
+    Boolean(globalDocument.fonts);
 
   let current: FontLoaderInput = initial;
   let readyPromise: Promise<void>;
@@ -58,7 +81,7 @@ export function createDocxFontLoader(initial: FontLoaderInput): DocxFontLoader {
 
   function run(input: FontLoaderInput): Promise<void> {
     if (!supported) return Promise.resolve();
-    const fontSet = (document as Document & { fonts?: FontFaceSet }).fonts;
+    const fontSet = globalDocument?.fonts as MinimalFontFaceSet | undefined;
     if (!fontSet) return Promise.resolve();
 
     const pending: Array<Promise<unknown>> = [];
@@ -70,10 +93,8 @@ export function createDocxFontLoader(initial: FontLoaderInput): DocxFontLoader {
 
         for (const [descriptor, data] of variantsOf(variants)) {
           try {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const FontFaceCtor = (globalThis as any).FontFace as {
-              new (family: string, source: BufferSource, descriptors?: FontFaceDescriptors): FontFace;
-            };
+            const FontFaceCtor = (globalThis as { FontFace?: MinimalFontFaceConstructor }).FontFace;
+            if (!FontFaceCtor) continue;
             const face = new FontFaceCtor(family, data, descriptor);
             pending.push(
               face.load().then((loaded) => {
@@ -88,8 +109,6 @@ export function createDocxFontLoader(initial: FontLoaderInput): DocxFontLoader {
       }
     }
 
-    // Mark declared families as registered if the browser already resolves
-    // them (e.g. system fonts like Calibri, Arial).
     for (const family of input.families) {
       try {
         const probe = `12px "${family.replace(/"/g, "'")}", serif`;
@@ -127,7 +146,7 @@ export function createDocxFontLoader(initial: FontLoaderInput): DocxFontLoader {
 
 function* variantsOf(
   variants: EmbeddedFontBytes,
-): IterableIterator<[FontFaceDescriptors, ArrayBuffer]> {
+): IterableIterator<[MinimalFontFaceDescriptors, ArrayBuffer]> {
   if (variants.regular) {
     yield [{ weight: "400", style: "normal" }, variants.regular];
   }

package/src/runtime/layout/inert-layout-facet.ts

@@ -46,6 +46,7 @@ export function createInertLayoutFacet(): WordReviewEditorLayoutFacet {
     getAnchorRects: () => [],
     getScopeRailSegments: () => [],
     getAllScopeRailSegments: () => [],
+    getAllScopeCardModels: () => [],
     getResolvedFormatting: () => null,
     getResolvedRunFormatting: () => null,
     getMeasurement: () => null,

package/src/runtime/layout/public-facet.ts

@@ -57,6 +57,7 @@ import {
   type ActiveMarginPreset,
 } from "./margin-preset-catalog.ts";
 import {
+  attachScopeCardModel,
   collectScopeRailSegments,
   type ScopeRailSegment,
 } from "../workflow-rail-segments.ts";
@@ -392,6 +393,20 @@ export interface WordReviewEditorLayoutFacet {
   /** Return every scope rail segment across the document. */
   getAllScopeRailSegments(): readonly import("../workflow-rail-segments.ts").ScopeRailSegment[];
 
+  /**
+   * Scope-card projection consumed by the chrome overlay's card layer
+   * (scope-card-overlay P1).  Joins every unique scope segment with
+   * its attached issue metadata (R2 `ISSUE_METADATA_ID`), its
+   * work-item id, and its `primaryAnchorRect` via the render kernel's
+   * anchor index.  P2 fields (`suggestionGroupIds`,
+   * `reviewActionCount`, `agentPending`) are defaulted to empty /
+   * zero / false in P1 and populated by later phases.
+   *
+   * Returns an empty list when no workflow rail input has been wired
+   * or when no scopes are currently on the active story.
+   */
+  getAllScopeCardModels(): readonly import("../../api/public-types.ts").ScopeCardModel[];
+
   // Measurement exposure -------------------------------------------------
   getResolvedFormatting(blockId: string): PublicResolvedParagraphFormatting | null;
   getResolvedRunFormatting(runId: string): PublicResolvedRunFormatting | null;
@@ -471,6 +486,17 @@ export interface CreateLayoutFacetInput {
       >
     | null
     | undefined;
+  /**
+   * Optional workflow-metadata accessor for scope-card issue resolution
+   * (R2 / scope-card-overlay P1).  Returns the
+   * `WorkflowMarkupSnapshot.metadata` array so `getAllScopeCardModels`
+   * can attach issue values to their scopes.  Omit when the host does
+   * not push metadata entries.
+   */
+  getWorkflowMarkupMetadata?: () =>
+    | readonly import("../../api/public-types.ts").WorkflowMetadataMarkup[]
+    | null
+    | undefined;
 }
 
 export function createLayoutFacet(
@@ -711,6 +737,21 @@ export function createLayoutFacet(
       );
     },
 
+    getAllScopeCardModels() {
+      const railInput = input.getWorkflowRailInput?.();
+      const segments = collectScopeRailSegmentsForQuery(railInput, currentGraph());
+      if (segments.length === 0) return [];
+      const kernel = input.renderKernel?.();
+      const anchorIndex = kernel?.getRenderFrame?.()?.anchorIndex ?? null;
+      const metadata = input.getWorkflowMarkupMetadata?.();
+      return attachScopeCardModel({
+        segments,
+        scopes: railInput?.scopes ?? [],
+        metadata: metadata ?? undefined,
+        anchorIndex,
+      });
+    },
+
     getFragmentsForPage(pageIndex) {
       const graph = currentGraph();
       const node = graph.pages[pageIndex];

package/src/runtime/workflow-rail-segments.ts

@@ -15,14 +15,21 @@
 import type {
   EditorAnchorProjection,
   EditorStoryTarget,
+  IssueMetadataValue,
+  ScopeCardModel,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
   WorkflowLockedZone,
+  WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../api/public-types";
+import { ISSUE_METADATA_ID } from "../api/public-types";
 import { MAIN_STORY_TARGET, storyTargetsEqual } from "../core/selection/mapping.ts";
 import type { RuntimePageGraph } from "./layout/page-graph.ts";
-import type { RenderFrameRect } from "./render/render-frame-types.ts";
+import type {
+  RenderAnchorIndex,
+  RenderFrameRect,
+} from "./render/render-frame-types.ts";
 
 // ---------------------------------------------------------------------------
 // Public shape
@@ -278,3 +285,144 @@ function resolveScopePosture(scope: WorkflowScope): ScopeRailPosture {
       return "view";
   }
 }
+
+// ---------------------------------------------------------------------------
+// Scope card projection (P1b — consumed by ref.layout.getAllScopeCardModels)
+// ---------------------------------------------------------------------------
+
+export interface AttachScopeCardModelInput {
+  /**
+   * Segments produced by `collectScopeRailSegments`. The card model
+   * keys off segments so per-scope card state stays aligned with the
+   * rail stripe rendering.
+   */
+  segments: readonly ScopeRailSegment[];
+  /**
+   * Original workflow scopes — used to resolve `workItemId` for each
+   * segment (the segment shape predates workItemId passthrough).
+   * Optional; when absent, cards drop `workItemId` and issue matching
+   * falls back to scope-id only.
+   */
+  scopes?: readonly WorkflowScope[];
+  /**
+   * Workflow metadata markup from `WorkflowMarkupSnapshot.metadata`.
+   * Entries with `metadataId === ISSUE_METADATA_ID` that match a
+   * segment's `workItemId` or `scopeId` attach as the card's issue.
+   */
+  metadata?: readonly WorkflowMetadataMarkup[];
+  /**
+   * Optional anchor index used to resolve each card's
+   * `primaryAnchorRect`. When omitted, cards are produced without
+   * rects — chrome consumers fall back to on-render positioning.
+   */
+  anchorIndex?: RenderAnchorIndex | null;
+}
+
+/**
+ * Project rail segments into per-scope `ScopeCardModel` values.
+ *
+ * For each unique `scopeId` in the segment list:
+ *   - use the first segment (document order) as the card's anchor
+ *   - look up an `ISSUE_METADATA_ID` metadata entry whose
+ *     `workItemId` (preferred) or `scopeId` matches the segment
+ *   - coerce that entry's `value` into `IssueMetadataValue` when the
+ *     required shape is present; drop the issue silently otherwise
+ *     so malformed host input never breaks chrome rendering
+ *
+ * P2 fields (`suggestionGroupIds`, `reviewActionCount`,
+ * `agentPending`) are populated as empty defaults and wired in a
+ * later phase.
+ */
+export function attachScopeCardModel(
+  input: AttachScopeCardModelInput,
+): ScopeCardModel[] {
+  if (input.segments.length === 0) return [];
+
+  // Take the first segment per scopeId (document order preserved by
+  // the segment collector).
+  const firstByScope = new Map<string, ScopeRailSegment>();
+  for (const segment of input.segments) {
+    if (!firstByScope.has(segment.scopeId)) {
+      firstByScope.set(segment.scopeId, segment);
+    }
+  }
+
+  const workItemByScope = new Map<string, string>();
+  for (const scope of input.scopes ?? []) {
+    if (scope.workItemId) {
+      workItemByScope.set(scope.scopeId, scope.workItemId);
+    }
+  }
+
+  const models: ScopeCardModel[] = [];
+  for (const segment of firstByScope.values()) {
+    const workItemId = workItemByScope.get(segment.scopeId);
+    const issue = resolveIssueForScope(
+      segment.scopeId,
+      workItemId,
+      input.metadata,
+    );
+    const primaryAnchorRect = input.anchorIndex
+      ? input.anchorIndex.bySelection(segment.fromOffset, segment.toOffset)
+      : null;
+
+    models.push({
+      scopeId: segment.scopeId,
+      ...(workItemId ? { workItemId } : {}),
+      label: segment.label ?? "",
+      posture: segment.posture,
+      primaryAnchorRect,
+      ...(issue ? { issue } : {}),
+      suggestionGroupIds: [],
+      reviewActionCount: 0,
+      agentPending: false,
+    });
+  }
+
+  return models;
+}
+
+function resolveIssueForScope(
+  scopeId: string,
+  workItemId: string | undefined,
+  metadata: readonly WorkflowMetadataMarkup[] | undefined,
+): IssueMetadataValue | undefined {
+  if (!metadata || metadata.length === 0) return undefined;
+  for (const entry of metadata) {
+    if (entry.metadataId !== ISSUE_METADATA_ID) continue;
+    const matchesWorkItem =
+      workItemId !== undefined &&
+      entry.workItemId !== undefined &&
+      entry.workItemId === workItemId;
+    const matchesScope =
+      entry.scopeId !== undefined && entry.scopeId === scopeId;
+    if (!matchesWorkItem && !matchesScope) continue;
+    const coerced = coerceIssueValue(entry.value);
+    if (coerced) return coerced;
+  }
+  return undefined;
+}
+
+/**
+ * Validate that a host-supplied metadata value looks like an
+ * `IssueMetadataValue`. Guards against malformed input — the card
+ * reads strongly-typed fields, so a missing severity or title must
+ * drop the issue rather than render `undefined` in the UI.
+ */
+function coerceIssueValue(
+  value: unknown,
+): IssueMetadataValue | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const candidate = value as Partial<IssueMetadataValue>;
+  if (
+    typeof candidate.issueId !== "string" ||
+    typeof candidate.topic !== "string" ||
+    typeof candidate.severity !== "string" ||
+    typeof candidate.mode !== "string" ||
+    typeof candidate.checklistState !== "string" ||
+    typeof candidate.title !== "string"
+  ) {
+    return undefined;
+  }
+  return candidate as IssueMetadataValue;
+}

package/src/ui/WordReviewEditor.tsx

@@ -2433,6 +2433,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         document={documentElement}
         onReviewSidebarTrackedChanges={onReviewSidebarTrackedChanges}
         onReviewSidebarComments={onReviewSidebarComments}
+        onScopeModeChangeRequested={(payload) => {
+          onEventRef.current?.({
+            type: "scope-mode-change-requested",
+            documentId,
+            scopeId: payload.scopeId,
+            mode: payload.mode,
+          });
+        }}
+        onScopeIssueActionRequested={(payload) => {
+          onEventRef.current?.({
+            type: "scope-issue-action-requested",
+            documentId,
+            scopeId: payload.scopeId,
+            issueId: payload.issueId,
+            action: payload.action,
+          });
+        }}
       />
     );
   },

package/src/ui/editor-shell-view.tsx

@@ -87,6 +87,24 @@ export interface EditorShellViewProps {
   onReviewSidebarTrackedChanges?: () => void;
   /** Review-role sidebar panel: open sidebar to comments panel. */
   onReviewSidebarComments?: () => void;
+  /**
+   * Scope card mode selector fired a mode change (forwarded from the
+   * workspace).  The editor turns this into a
+   * `scope-mode-change-requested` event.
+   */
+  onScopeModeChangeRequested?: (payload: {
+    scopeId: string;
+    mode: import("../api/public-types.ts").WorkflowScopeMode;
+  }) => void;
+  /**
+   * Scope card issue action fired (forwarded from the workspace).
+   * The editor turns this into a `scope-issue-action-requested` event.
+   */
+  onScopeIssueActionRequested?: (payload: {
+    scopeId: string;
+    issueId: string;
+    action: import("../api/public-types.ts").ScopeIssueAction;
+  }) => void;
 }
 
 export function EditorShellView(props: EditorShellViewProps) {

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

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