@beyondwork/docx-react-component 1.0.41 → 1.0.43

package/src/ui-tailwind/chrome/collab-tamper-banner.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import type { MetadataIntegrity } from "../../runtime/tamper-gate.ts";
+
+export interface CollabTamperBannerProps {
+  /** Current `metadataIntegrity` state from `session.getMetadataIntegrity()`. */
+  integrity: MetadataIntegrity;
+  /** Called when the user acknowledges. Caller routes to `session.acknowledgeMetadataTampering()`. */
+  onAcknowledge: () => void;
+  className?: string;
+}
+
+/**
+ * Banner surfaced in the `"collab"` chrome preset (P9d) whenever the
+ * tamper gate reports `"tampered"`. Renders nothing in `"verified"` /
+ * `"unsigned"` states so hosts can mount it unconditionally inside the
+ * top nav and let it self-gate on the integrity signal.
+ *
+ * Contract:
+ *   - Renders nothing when `integrity !== "tampered"`.
+ *   - When tampered, shows a prominent banner with a single
+ *     "Acknowledge & continue" action.
+ *   - The acknowledge button calls `onAcknowledge()`. The runtime's
+ *     tamper gate treats the first `acknowledge()` as the gate-unlock;
+ *     subsequent calls while `verified` are no-ops.
+ *   - Subscribing to `metadata_integrity_violation` is the host's job;
+ *     this component is pure and idempotent.
+ */
+export function CollabTamperBanner({
+  integrity,
+  onAcknowledge,
+  className,
+}: CollabTamperBannerProps): React.ReactElement | null {
+  if (integrity !== "tampered") return null;
+
+  const rootClass = [
+    "tw-collab-tamper-banner",
+    className ?? null,
+  ]
+    .filter((v): v is string => v !== null)
+    .join(" ");
+
+  return (
+    <div
+      className={rootClass}
+      data-testid="collab-tamper-banner"
+      data-integrity={integrity}
+      role="alert"
+      aria-live="assertive"
+    >
+      <span className="tw-collab-tamper-banner__icon" aria-hidden="true">
+        ⚠
+      </span>
+      <span className="tw-collab-tamper-banner__message">
+        Metadata integrity check failed. The workflow payload was modified
+        outside the editor. Mutations are blocked until you acknowledge.
+      </span>
+      <button
+        type="button"
+        className="tw-collab-tamper-banner__ack"
+        data-testid="collab-tamper-banner-ack"
+        onClick={onAcknowledge}
+      >
+        Acknowledge &amp; continue
+      </button>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/collab-top-nav-container.tsx

@@ -0,0 +1,281 @@
+import * as React from "react";
+
+import type { CollabSession } from "../../runtime/collab-session.ts";
+import type {
+  CommentAudience,
+} from "../../api/comment-presentation-types.ts";
+import type { WordReviewEditorChromeOptions } from "../../api/public-types.ts";
+import type { TransportStatus } from "../../api/awareness-identity-types.ts";
+import { CollabPresenceStrip } from "./collab-presence-strip.tsx";
+import { CollabRoleChip } from "./collab-role-chip.tsx";
+import { CollabAudienceChip } from "./collab-audience-chip.tsx";
+import { CollabTamperBanner } from "./collab-tamper-banner.tsx";
+import { CollabNegotiationActionBar } from "./collab-negotiation-action-bar.tsx";
+import { CollabSendToSupplierButton } from "./collab-send-to-supplier-button.tsx";
+import {
+  CollabSendToSupplierModal,
+  type CollabSendToSupplierSubmitArgs,
+} from "./collab-send-to-supplier-modal.tsx";
+
+export type CollabSubSurfaceVisibility = Pick<
+  WordReviewEditorChromeOptions,
+  | "showCollabTopNav"
+  | "showCollabPresenceStrip"
+  | "showCollabRoleChip"
+  | "showCollabAudienceChip"
+  | "showCollabTamperBanner"
+  | "showCollabNegotiationActionBar"
+  | "showCollabSendToSupplier"
+>;
+
+export interface CollabTopNavContainerProps {
+  /** Wired collab session. When `undefined` / detached, the container renders nothing. */
+  session: CollabSession | undefined;
+  /** The currently-focused comment id (if any). Host supplies this from its own selection signal. */
+  activeCommentId?: string;
+  /**
+   * Fresh identity metadata about the local user. The session falls
+   * back to `author` if no awareness is wired, which matches the
+   * `CollabPosture` contract. This prop is passed through so tests /
+   * hosts can override the actor id used by the action bar without
+   * also mutating awareness.
+   */
+  actorId: string;
+  /** Current transport status signal (from the host's provider). */
+  transportStatus?: TransportStatus;
+  /** Visibility toggles from the chrome preset options. */
+  visibility?: CollabSubSurfaceVisibility;
+  /**
+   * Minimum send-to-supplier args a host wants to commit to before the
+   * confirmation modal even appears. The modal collects the rest.
+   */
+  sendBaseline?: {
+    originDocumentId: string;
+    originPayloadId: string;
+    originContentHash: string;
+    payloadXml: string;
+  };
+  /**
+   * Optional override for the activeStory filter passed into
+   * `getPresenceSnapshot({ activeStoryFilter })`.
+   */
+  activeStoryFilter?: string;
+  className?: string;
+}
+
+const DEFAULT_VISIBILITY: Required<CollabSubSurfaceVisibility> = {
+  showCollabTopNav: true,
+  showCollabPresenceStrip: true,
+  showCollabRoleChip: true,
+  showCollabAudienceChip: true,
+  showCollabTamperBanner: true,
+  showCollabNegotiationActionBar: true,
+  showCollabSendToSupplier: true,
+};
+
+/**
+ * P9g — chrome-toolbar container. Subscribes to the `CollabSession`
+ * event stream and renders the six P9a–f components from live
+ * snapshots. Pure React, no Yjs / awareness coupling — the session
+ * abstracts those away.
+ *
+ * The container intentionally renders `null` when no session is wired
+ * so the chrome toolbar can mount it unconditionally while the host
+ * decides whether to supply a session.
+ *
+ * Individual sub-surfaces can be opted out via `visibility`; the
+ * defaults mirror the `"collab"` chrome preset so hosts that
+ * instantiate directly get the full top nav.
+ */
+export function CollabTopNavContainer({
+  session,
+  activeCommentId,
+  actorId,
+  transportStatus,
+  visibility,
+  sendBaseline,
+  activeStoryFilter,
+  className,
+}: CollabTopNavContainerProps): React.ReactElement | null {
+  const effective: Required<CollabSubSurfaceVisibility> = {
+    ...DEFAULT_VISIBILITY,
+    ...normalizeVisibility(visibility),
+  };
+
+  const [tick, setTick] = React.useState(0);
+  const [sendModalOpen, setSendModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!session) return undefined;
+    const off = session.subscribe((event) => {
+      // Any event from the bridge OR the tamper gate triggers a
+      // re-read. The container is cheap to re-render; the underlying
+      // snapshots are already deep-cloned by the stores.
+      //
+      // We deliberately ignore the event type — the container is
+      // declarative about what it renders, so a single bump is enough.
+      void event;
+      setTick((n) => n + 1);
+    });
+    return off;
+  }, [session]);
+
+  if (!session || !effective.showCollabTopNav) return null;
+
+  const presence = session.getPresenceSnapshot({
+    ...(transportStatus ? { transportStatus } : {}),
+    ...(activeStoryFilter !== undefined ? { activeStoryFilter } : {}),
+  });
+  const posture = session.getCollabPosture({
+    ...(transportStatus ? { transportStatus } : {}),
+  });
+  const integrity = session.getMetadataIntegrity();
+  const presentation = session.getCommentPresentationSnapshot();
+  const negotiation = session.getCommentNegotiationSnapshot();
+
+  const activePresentation = activeCommentId
+    ? presentation.entries.find((e) => e.commentId === activeCommentId)
+    : undefined;
+  const activeNegotiation = activeCommentId
+    ? negotiation.entries.find((e) => e.commentId === activeCommentId)
+    : undefined;
+
+  const internalCount = presentation.entries.filter(
+    (e) => e.audience === "internal",
+  ).length;
+  const shareableCount = presentation.entries.filter(
+    (e) => e.audience !== "internal",
+  ).length;
+
+  const canEditAudience = posture.role !== "observer" && activePresentation !== undefined;
+  const tampered = integrity === "tampered";
+
+  const rootClass = [
+    "tw-collab-top-nav",
+    `tw-collab-top-nav--${posture.role}`,
+    tampered ? "tw-collab-top-nav--tampered" : null,
+    className ?? null,
+  ]
+    .filter((v): v is string => v !== null)
+    .join(" ");
+
+  const handleAudienceCycle = (next: CommentAudience): void => {
+    if (!activeCommentId) return;
+    void session.dispatchCommentPresentation({
+      type: "set-audience",
+      commentId: activeCommentId,
+      audience: next,
+    });
+  };
+
+  const handleNegotiationDispatch = (
+    action: Parameters<CollabSession["dispatchCommentNegotiation"]>[0],
+  ): void => {
+    session.dispatchCommentNegotiation(action, {
+      role: posture.role,
+      now: new Date().toISOString(),
+    });
+  };
+
+  const handleSendSubmit = async (
+    args: CollabSendToSupplierSubmitArgs,
+  ): Promise<void> => {
+    if (!sendBaseline) {
+      setSendModalOpen(false);
+      return;
+    }
+    await session.sendToExternal({
+      payloadXml: sendBaseline.payloadXml,
+      originDocumentId: sendBaseline.originDocumentId,
+      originPayloadId: sendBaseline.originPayloadId,
+      originContentHash: sendBaseline.originContentHash,
+      recipient: args.recipient,
+      sentBy: actorId,
+      archiveRef: args.archiveRef,
+    });
+    setSendModalOpen(false);
+  };
+
+  return (
+    <div
+      className={rootClass}
+      data-testid="collab-top-nav-container"
+      data-tick={tick.toString()}
+      data-role={posture.role}
+      data-integrity={integrity}
+    >
+      {effective.showCollabTamperBanner ? (
+        <CollabTamperBanner
+          integrity={integrity}
+          onAcknowledge={() => session.acknowledgeMetadataTampering()}
+        />
+      ) : null}
+
+      <div className="tw-collab-top-nav__row">
+        {effective.showCollabPresenceStrip ? (
+          <CollabPresenceStrip
+            presence={presence}
+            localRole={posture.role}
+          />
+        ) : null}
+
+        {effective.showCollabRoleChip ? (
+          <CollabRoleChip
+            posture={posture}
+            {...(transportStatus ? { transportStatus } : {})}
+          />
+        ) : null}
+
+        {effective.showCollabAudienceChip ? (
+          <CollabAudienceChip
+            audience={activePresentation?.audience}
+            canEdit={canEditAudience}
+            onCycle={handleAudienceCycle}
+          />
+        ) : null}
+
+        {effective.showCollabNegotiationActionBar ? (
+          <CollabNegotiationActionBar
+            entry={activeNegotiation}
+            actorId={actorId}
+            role={posture.role}
+            onDispatch={handleNegotiationDispatch}
+            disabled={tampered}
+          />
+        ) : null}
+
+        {effective.showCollabSendToSupplier ? (
+          <CollabSendToSupplierButton
+            role={posture.role}
+            integrity={integrity}
+            shareableCount={shareableCount}
+            internalCount={internalCount}
+            onOpenModal={() => setSendModalOpen(true)}
+          />
+        ) : null}
+      </div>
+
+      {effective.showCollabSendToSupplier ? (
+        <CollabSendToSupplierModal
+          open={sendModalOpen}
+          shareableCount={shareableCount}
+          internalCount={internalCount}
+          onClose={() => setSendModalOpen(false)}
+          onSubmit={handleSendSubmit}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function normalizeVisibility(
+  visibility: CollabSubSurfaceVisibility | undefined,
+): Partial<Required<CollabSubSurfaceVisibility>> {
+  if (!visibility) return {};
+  const out: Partial<Required<CollabSubSurfaceVisibility>> = {};
+  for (const key of Object.keys(DEFAULT_VISIBILITY) as (keyof CollabSubSurfaceVisibility)[]) {
+    const v = visibility[key];
+    if (typeof v === "boolean") out[key] = v;
+  }
+  return out;
+}

package/src/ui-tailwind/chrome/forward-non-drag-click.ts

@@ -0,0 +1,104 @@
+/**
+ * Re-dispatch a click that landed on an invisible resize grip to the element
+ * beneath it, so PM-rendered cell text still receives mousedown/mouseup/click
+ * when the user clicks near a cell edge without dragging.
+ *
+ * This is the click-trap fix for the table grip layer.  It is extracted into
+ * its own module with dependency injection so the hardening rules can be
+ * unit-tested in isolation:
+ *
+ *   - Never re-dispatch into chrome overlays (`[data-chrome-overlay]`).
+ *     Forwarding into a scope card / toolbar / picker would trigger that
+ *     overlay's own handlers and potentially re-enter the grip.
+ *   - Never re-dispatch when modifier keys are held — Shift/Ctrl/Meta/Alt
+ *     clicks carry selection semantics that do not survive synthesis.
+ *   - Never re-dispatch for non-primary mouse buttons.
+ *   - Always restore `pointerEvents` on the grip, even if layout queries
+ *     throw.  `elementFromPoint` is permitted to throw in some browsers
+ *     when called during layout invalidation.
+ *   - Tolerate a detached `gripEl`: a React re-render between mousedown and
+ *     mouseup can unmount the grip; style writes on an orphaned element
+ *     are harmless, but we must not throw if the owner document is gone.
+ */
+
+export interface ForwardNonDragClickOptions {
+  /**
+   * Injector for `document.elementFromPoint` (used in tests).  Defaults
+   * to `gripEl.ownerDocument?.elementFromPoint`.
+   */
+  elementFromPoint?: (x: number, y: number) => Element | null;
+}
+
+const CHROME_OVERLAY_SELECTOR = "[data-chrome-overlay]";
+
+export function forwardNonDragClick(
+  gripEl: HTMLElement,
+  event: MouseEvent,
+  options: ForwardNonDragClickOptions = {},
+): void {
+  if (event.button !== 0) return;
+  if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
+
+  const ownerDocument = gripEl.ownerDocument;
+  if (!ownerDocument) return;
+
+  const previousPointerEvents = gripEl.style.pointerEvents;
+  const canMutateStyle = gripEl.isConnected || previousPointerEvents !== "";
+  if (canMutateStyle) {
+    try {
+      gripEl.style.pointerEvents = "none";
+    } catch {
+      // style mutation can fail in extremely narrow edge cases; proceed anyway.
+    }
+  }
+
+  try {
+    const locate =
+      options.elementFromPoint ??
+      ((x: number, y: number) =>
+        ownerDocument.elementFromPoint
+          ? ownerDocument.elementFromPoint(x, y)
+          : null);
+
+    let beneath: Element | null;
+    try {
+      beneath = locate(event.clientX, event.clientY);
+    } catch {
+      return;
+    }
+
+    if (!beneath || beneath === gripEl) return;
+    if (beneath.closest && beneath.closest(CHROME_OVERLAY_SELECTOR)) return;
+
+    const view = ownerDocument.defaultView ?? null;
+    if (!view) return;
+
+    const init: MouseEventInit = {
+      bubbles: true,
+      cancelable: true,
+      view,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      button: event.button,
+      buttons: event.buttons,
+      ctrlKey: false,
+      metaKey: false,
+      shiftKey: false,
+      altKey: false,
+    };
+    const MouseEventCtor = view.MouseEvent;
+    beneath.dispatchEvent(new MouseEventCtor("mousedown", init));
+    beneath.dispatchEvent(new MouseEventCtor("mouseup", init));
+    beneath.dispatchEvent(new MouseEventCtor("click", init));
+  } finally {
+    if (canMutateStyle) {
+      try {
+        gripEl.style.pointerEvents = previousPointerEvents;
+      } catch {
+        // Orphaned / detached elements may reject style writes; ignore.
+      }
+    }
+  }
+}

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

@@ -37,6 +37,7 @@ export function TwModeDock(props: TwModeDockProps) {
       aria-label="Mode dock"
       className={className}
       data-testid="tw-mode-dock"
+      data-chrome-overlay="mode-dock"
     >
       <div className="flex items-center gap-1.5 pl-1 pr-1.5">
         {props.icon ? (

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

@@ -138,6 +138,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
         <div
           className="pointer-events-auto absolute"
           data-placement="detached"
+          data-chrome-overlay="selection-tool"
           style={{
             left: `calc(50% + ${detachedOffset.x}px)`,
             top: `${12 + detachedOffset.y}px`,
@@ -156,6 +157,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
         <div
           className="pointer-events-auto absolute"
           data-placement={props.placement.placement}
+          data-chrome-overlay="selection-tool"
           style={props.placement.style}
         >
           {wrappedContent}
@@ -169,7 +171,11 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
       className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
       data-testid={overlayTestId}
     >
-      <div className="pointer-events-auto" data-placement="fallback">
+      <div
+        className="pointer-events-auto"
+        data-placement="fallback"
+        data-chrome-overlay="selection-tool"
+      >
         {wrappedContent}
       </div>
     </div>

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -30,50 +30,13 @@ import type {
 import type { OverlayCoordinateSpace } from "../chrome-overlay/chrome-overlay-projector";
 import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector";
 import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
+import { forwardNonDragClick } from "./forward-non-drag-click";
 
 const GRIP_PX = 6;
 const DRAG_THRESHOLD_PX = 3;
 const MIN_COLUMN_TWIPS = 720;
 const MIN_ROW_TWIPS = 120;
 
-/**
- * Re-dispatch a click that landed on an invisible resize grip to the element
- * beneath it.  Called when a mouseup fires without any drag movement, so the
- * user's intended target (typically PM-rendered cell text) still receives
- * mousedown/mouseup/click and can place the caret.
- */
-function forwardNonDragClick(gripEl: HTMLElement, event: MouseEvent): void {
-  const previous = gripEl.style.pointerEvents;
-  gripEl.style.pointerEvents = "none";
-  try {
-    const beneath = gripEl.ownerDocument?.elementFromPoint(
-      event.clientX,
-      event.clientY,
-    );
-    if (!beneath || beneath === gripEl) return;
-    const init: MouseEventInit = {
-      bubbles: true,
-      cancelable: true,
-      view: gripEl.ownerDocument?.defaultView ?? window,
-      clientX: event.clientX,
-      clientY: event.clientY,
-      screenX: event.screenX,
-      screenY: event.screenY,
-      button: event.button,
-      buttons: event.buttons,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      shiftKey: event.shiftKey,
-      altKey: event.altKey,
-    };
-    beneath.dispatchEvent(new MouseEvent("mousedown", init));
-    beneath.dispatchEvent(new MouseEvent("mouseup", init));
-    beneath.dispatchEvent(new MouseEvent("click", init));
-  } finally {
-    gripEl.style.pointerEvents = previous;
-  }
-}
-
 export interface TwTableGripLayerProps {
   facet: WordReviewEditorLayoutFacet;
   tableContext: TableStructureContextSnapshot | null;

package/src/ui-tailwind/chrome-overlay/index.ts

@@ -7,6 +7,12 @@
 
 export { TwChromeOverlay, type TwChromeOverlayProps } from "./tw-chrome-overlay";
 export { TwScopeRailLayer, type TwScopeRailLayerProps } from "./tw-scope-rail-layer";
+export {
+  TwPageStackOverlayLayer,
+  resolvePageOverlayRects,
+  type PageOverlayRect,
+  type TwPageStackOverlayLayerProps,
+} from "./tw-page-stack-overlay-layer";
 export { TwScopeCard, type TwScopeCardProps } from "./tw-scope-card";
 export { TwScopeCardLayer, type TwScopeCardLayerProps } from "./tw-scope-card-layer";
 export {

package/src/ui-tailwind/chrome-overlay/scope-card-role-model.ts

@@ -0,0 +1,78 @@
+/**
+ * Scope card role visibility model.
+ *
+ * Per docs/plans/scope-card-overlay.md P3, the card's content adapts
+ * to the active editor role: editor-mode keeps just mode + issue;
+ * review-mode shows the full surface (suggestions, timeline, agent);
+ * workflow-mode additionally exposes scope-tag editing.  Host-supplied
+ * `reviewRailSections` never overrides these — the rail and the
+ * over-document card are different surfaces.
+ */
+
+import type { EditorRole } from "../../api/public-types";
+
+export interface ScopeCardSectionVisibility {
+  /** Always true — header is always rendered. */
+  header: boolean;
+  /** Mode selector (edit/suggest/comment/view). */
+  modeRow: boolean;
+  /** Issue severity + owner + Resolve/Waive/Escalate row (R2). */
+  issueRow: boolean;
+  /** Suggestion-group chips + Accept/Reject (R3). */
+  suggestionRows: boolean;
+  /** Review-action audit timeline (K1). */
+  timeline: boolean;
+  /** "Ask review agent" button (K2). */
+  agentButton: boolean;
+  /**
+   * Scope-tag editor row shown under the mode row.  Only in workflow
+   * role; the host renders the actual editor inside a slot the card
+   * reserves.
+   */
+  scopeTagEditor: boolean;
+}
+
+export function resolveScopeCardVisibility(role: EditorRole): ScopeCardSectionVisibility {
+  switch (role) {
+    case "editor":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: false,
+        timeline: false,
+        agentButton: false,
+        scopeTagEditor: false,
+      };
+    case "review":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: false,
+      };
+    case "workflow":
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: true,
+      };
+    default:
+      return {
+        header: true,
+        modeRow: true,
+        issueRow: true,
+        suggestionRows: true,
+        timeline: true,
+        agentButton: true,
+        scopeTagEditor: false,
+      };
+  }
+}

package/src/ui-tailwind/chrome-overlay/scope-keyboard-cycle.ts

@@ -0,0 +1,49 @@
+/**
+ * Pure scope-cycling helper for P3d keyboard navigation.
+ *
+ * J advances `currentScopeId` one position in document order; K
+ * retreats it.  Both wrap around the list.  When no scope is
+ * currently active, J opens the first, K opens the last.
+ *
+ * Exported from a dedicated module so unit tests can exercise the
+ * logic without mounting the workspace keydown listener.
+ */
+
+export function cycleScopeIndex(
+  currentScopeId: string | null,
+  scopeIds: readonly string[],
+  direction: 1 | -1,
+): string | null {
+  if (scopeIds.length === 0) return null;
+  const currentIndex = currentScopeId ? scopeIds.indexOf(currentScopeId) : -1;
+  if (currentIndex < 0) {
+    return direction > 0 ? scopeIds[0] ?? null : scopeIds[scopeIds.length - 1] ?? null;
+  }
+  const nextIndex = (currentIndex + direction + scopeIds.length) % scopeIds.length;
+  return scopeIds[nextIndex] ?? null;
+}
+
+/**
+ * Determine whether a keyboard event should be handled as scope
+ * navigation, or left alone so the PM surface / contenteditable /
+ * form controls / open scope card can consume it.
+ */
+export function shouldHandleScopeNavKey(event: KeyboardEvent): boolean {
+  if (event.metaKey || event.ctrlKey || event.altKey) return false;
+  if (
+    event.key !== "j" &&
+    event.key !== "k" &&
+    event.key !== "J" &&
+    event.key !== "K" &&
+    event.key !== "Enter"
+  ) {
+    return false;
+  }
+  const target = event.target as Element | null;
+  if (!target || typeof target.closest !== "function") return true;
+  if (target.closest(".ProseMirror")) return false;
+  if (target.closest("[contenteditable='true']")) return false;
+  if (target.closest("input, textarea, select")) return false;
+  if (target.closest("[data-testid='scope-card']")) return false;
+  return true;
+}