@beyondwork/docx-react-component 1.0.37 → 1.0.39

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -0,0 +1,680 @@
+/**
+ * Role-scoped inline action region rendered inside `TwToolbar`.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.4 the top chrome carries
+ * a role-scoped action set between the left formatting cluster and the
+ * right view cluster.  This component renders the primary actions for
+ * the active role, driving them from host-supplied callbacks.
+ *
+ * Review-role actions here collapse what used to live in
+ * `TwReviewQueueBar` as a second strip — the review prev/next, counts,
+ * active-item label, accept/reject, markup-mode, and batch operations.
+ * Editor-role actions surface the scope posture menu.  Workflow-role
+ * actions surface work-item traversal + claim/skip/complete.
+ */
+
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import * as Toggle from "@radix-ui/react-toggle";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import {
+  BookmarkCheck,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CircleOff,
+  Eye,
+  EyeOff,
+  FileDiff,
+  Flag,
+  Hand,
+  MessageSquare,
+  MessageSquareDot,
+  MessageSquareText,
+  Rows3,
+  SkipForward,
+  Target,
+  X,
+  XCircle,
+} from "lucide-react";
+
+import type {
+  EditorRole,
+  ReviewQueueSnapshot,
+  ScopeRailPosture,
+} from "../../api/public-types";
+import type { SessionCapabilities } from "../../runtime/session-capabilities";
+import type { ScopedChromePolicy } from "../../ui/headless/scoped-chrome-policy";
+import type { ToolbarChromeItemId } from "../../ui/headless/chrome-registry";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { ROLE_ACTION_SETS } from "../chrome/role-action-sets";
+import { TwScopePostureMenu } from "./tw-scope-posture-menu";
+
+export type MarkupDisplayMode = "clean" | "simple" | "all";
+
+export interface WorkflowWorkItemSnapshot {
+  workItemId: string;
+  title?: string;
+  status?: string;
+  hasPrevious: boolean;
+  hasNext: boolean;
+  canClaim: boolean;
+  canComplete: boolean;
+  canSkip: boolean;
+  canMarkBlocked: boolean;
+}
+
+export interface TwRoleActionRegionProps {
+  role: EditorRole;
+  policy: ScopedChromePolicy;
+  compactMode: boolean;
+  /** Review-queue snapshot for the review role. */
+  reviewQueue?: ReviewQueueSnapshot;
+  /** Active workflow work item for the workflow role. */
+  workflowItem?: WorkflowWorkItemSnapshot | null;
+  markupDisplay?: MarkupDisplayMode;
+
+  // Shared: editor + review role
+  canAddComment?: boolean;
+  showTrackedChanges?: boolean;
+  onAddComment?: () => void;
+  onShowTrackedChangesChange?: (show: boolean) => void;
+  /**
+   * Session capabilities used to gate the role-region tracked-changes
+   * toggle (mirrors the right-cluster gate at tw-toolbar.tsx).  When
+   * `capabilities.trackChangesSupported` is false, the toggle is disabled.
+   */
+  capabilities?: SessionCapabilities;
+
+  // Review sidebar panel (optional — hidden when not provided)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+
+  // Workflow + review role: scope posture menu
+  onMarkScopePosture?: (posture: ScopeRailPosture) => void;
+
+  // Review role
+  onReviewPrev?: () => void;
+  onReviewNext?: () => void;
+  onReviewAccept?: () => void;
+  onReviewReject?: () => void;
+  onReviewAcceptAll?: () => void;
+  onReviewRejectAll?: () => void;
+  onReviewMarkupMode?: (mode: MarkupDisplayMode) => void;
+
+  // Workflow role
+  onWorkflowPrev?: () => void;
+  onWorkflowNext?: () => void;
+  onWorkflowMarkComplete?: () => void;
+  onWorkflowClaim?: () => void;
+  onWorkflowSkip?: () => void;
+  onWorkflowMarkBlocked?: () => void;
+  onWorkflowJumpToScope?: () => void;
+
+  "data-testid"?: string;
+}
+
+export function TwRoleActionRegion(
+  props: TwRoleActionRegionProps,
+): React.JSX.Element | null {
+  const order = ROLE_ACTION_SETS[props.role];
+  const inlineIds: ToolbarChromeItemId[] = [];
+  const overflowIds: ToolbarChromeItemId[] = [];
+
+  for (const id of order) {
+    const entry = props.policy.toolbar[id];
+    if (!entry?.visible) continue;
+    if (entry.placement === "overflow") {
+      overflowIds.push(id);
+    } else if (entry.placement === "inline") {
+      inlineIds.push(id);
+    }
+  }
+
+  if (inlineIds.length === 0 && overflowIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex items-center gap-1 border-l border-r border-border/40 px-1.5"
+      data-testid={props["data-testid"] ?? `role-action-region-${props.role}`}
+      data-role={props.role}
+    >
+      {inlineIds.map((id) => (
+        <RoleActionButton
+          key={id}
+          id={id}
+          compact={props.compactMode}
+          props={props}
+        />
+      ))}
+      {overflowIds.length > 0 ? (
+        <RoleActionOverflow ids={overflowIds} props={props} />
+      ) : null}
+    </div>
+  );
+}
+
+interface RoleActionButtonProps {
+  id: ToolbarChromeItemId;
+  compact: boolean;
+  props: TwRoleActionRegionProps;
+}
+
+function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null {
+  const { id, props } = arg;
+  const focusRingClass =
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+  switch (id) {
+    case "comment":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Add comment"
+              disabled={!props.canAddComment || !props.onAddComment}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-add-comment"
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Add comment
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "tracked-changes-toggle":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Toggle.Root
+              pressed={props.showTrackedChanges ?? false}
+              onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
+              disabled={props.capabilities ? !props.capabilities.trackChangesSupported : false}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
+              data-testid="role-tracked-changes-toggle"
+            >
+              {(props.showTrackedChanges ?? false) ? (
+                <Eye className="h-3.5 w-3.5" />
+              ) : (
+                <EyeOff className="h-3.5 w-3.5" />
+              )}
+            </Toggle.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              {(props.showTrackedChanges ?? false) ? "Hide tracked changes" : "Show tracked changes"}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-tracked-changes":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show tracked changes in sidebar"
+              disabled={!props.onReviewSidebarTrackedChanges}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarTrackedChanges}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-tracked-changes"
+            >
+              <FileDiff className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Tracked changes panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-comments":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show comments in sidebar"
+              disabled={!props.onReviewSidebarComments}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarComments}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-comments"
+            >
+              <MessageSquareDot className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Comments panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "editor-scope-posture-menu":
+      return (
+        <TwScopePostureMenu
+          onSelect={(posture) => props.onMarkScopePosture?.(posture)}
+          disabled={!props.onMarkScopePosture}
+        />
+      );
+    case "review-queue-prev":
+      return (
+        <IconTextButton
+          icon={ChevronLeft}
+          text="Prev"
+          ariaLabel="Previous review item"
+          disabled={(props.reviewQueue?.totalCount ?? 0) === 0 || !props.onReviewPrev}
+          onClick={props.onReviewPrev}
+          data-testid="role-review-prev"
+        />
+      );
+    case "review-queue-next":
+      return (
+        <IconTextButton
+          icon={ChevronRight}
+          iconAfter
+          text="Next"
+          ariaLabel="Next review item"
+          disabled={(props.reviewQueue?.totalCount ?? 0) === 0 || !props.onReviewNext}
+          onClick={props.onReviewNext}
+          data-testid="role-review-next"
+        />
+      );
+    case "review-queue-counts":
+      return props.reviewQueue ? <ReviewQueueCounts queue={props.reviewQueue} /> : null;
+    case "review-queue-active-label":
+      return props.reviewQueue ? <ReviewActiveLabel queue={props.reviewQueue} /> : null;
+    case "review-accept":
+      return (
+        <IconTextButton
+          icon={Check}
+          text="Accept"
+          tone="accent"
+          ariaLabel="Accept current change"
+          disabled={!props.onReviewAccept}
+          onClick={props.onReviewAccept}
+          data-testid="role-review-accept"
+        />
+      );
+    case "review-reject":
+      return (
+        <IconTextButton
+          icon={X}
+          text="Reject"
+          tone="danger"
+          ariaLabel="Reject current change"
+          disabled={!props.onReviewReject}
+          onClick={props.onReviewReject}
+          data-testid="role-review-reject"
+        />
+      );
+    case "review-markup-mode":
+      return (
+        <MarkupModeSelect
+          mode={props.markupDisplay ?? "simple"}
+          onChange={(mode) => props.onReviewMarkupMode?.(mode)}
+          disabled={!props.onReviewMarkupMode}
+        />
+      );
+    case "workflow-prev":
+      return (
+        <IconTextButton
+          icon={ChevronLeft}
+          text="Prev"
+          ariaLabel="Previous work item"
+          disabled={!(props.workflowItem?.hasPrevious && props.onWorkflowPrev)}
+          onClick={props.onWorkflowPrev}
+          data-testid="role-workflow-prev"
+        />
+      );
+    case "workflow-next":
+      return (
+        <IconTextButton
+          icon={ChevronRight}
+          iconAfter
+          text="Next"
+          ariaLabel="Next work item"
+          disabled={!(props.workflowItem?.hasNext && props.onWorkflowNext)}
+          onClick={props.onWorkflowNext}
+          data-testid="role-workflow-next"
+        />
+      );
+    case "workflow-mark-complete":
+      return (
+        <IconTextButton
+          icon={CheckCheck}
+          text="Complete"
+          tone="accent"
+          ariaLabel="Mark work item complete"
+          disabled={!(props.workflowItem?.canComplete && props.onWorkflowMarkComplete)}
+          onClick={props.onWorkflowMarkComplete}
+          data-testid="role-workflow-complete"
+        />
+      );
+    case "workflow-claim":
+      return (
+        <IconTextButton
+          icon={Hand}
+          text="Claim"
+          ariaLabel="Claim work item"
+          disabled={!(props.workflowItem?.canClaim && props.onWorkflowClaim)}
+          onClick={props.onWorkflowClaim}
+          data-testid="role-workflow-claim"
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+interface RoleActionOverflowProps {
+  ids: ToolbarChromeItemId[];
+  props: TwRoleActionRegionProps;
+}
+
+function RoleActionOverflow({
+  ids,
+  props,
+}: RoleActionOverflowProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          aria-label="More role actions"
+          aria-expanded={open}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          data-testid="role-action-overflow-trigger"
+        >
+          More
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="z-50 w-[220px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+          sideOffset={8}
+          align="start"
+          data-testid="role-action-overflow-content"
+        >
+          {ids.map((id) => (
+            <OverflowAction key={id} id={id} props={props} onClose={() => setOpen(false)} />
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+function OverflowAction(arg: {
+  id: ToolbarChromeItemId;
+  props: TwRoleActionRegionProps;
+  onClose: () => void;
+}): React.JSX.Element | null {
+  const { id, props, onClose } = arg;
+  switch (id) {
+    case "review-accept-all":
+      return (
+        <MenuRow
+          icon={CheckCheck}
+          label="Accept all in scope"
+          ariaLabel="Accept all reviewable changes in scope"
+          disabled={!props.onReviewAcceptAll}
+          onClick={() => {
+            props.onReviewAcceptAll?.();
+            onClose();
+          }}
+        />
+      );
+    case "review-reject-all":
+      return (
+        <MenuRow
+          icon={XCircle}
+          label="Reject all in scope"
+          ariaLabel="Reject all reviewable changes in scope"
+          disabled={!props.onReviewRejectAll}
+          onClick={() => {
+            props.onReviewRejectAll?.();
+            onClose();
+          }}
+        />
+      );
+    case "review-markup-mode":
+      return (
+        <MenuRow
+          icon={Rows3}
+          label={`Markup: ${props.markupDisplay ?? "simple"}`}
+          ariaLabel="Change markup display mode"
+          disabled={!props.onReviewMarkupMode}
+          onClick={() => {
+            const next: MarkupDisplayMode =
+              props.markupDisplay === "all"
+                ? "clean"
+                : props.markupDisplay === "simple"
+                  ? "all"
+                  : "simple";
+            props.onReviewMarkupMode?.(next);
+            onClose();
+          }}
+        />
+      );
+    case "workflow-skip":
+      return (
+        <MenuRow
+          icon={SkipForward}
+          label="Skip work item"
+          ariaLabel="Skip work item"
+          disabled={!(props.workflowItem?.canSkip && props.onWorkflowSkip)}
+          onClick={() => {
+            props.onWorkflowSkip?.();
+            onClose();
+          }}
+        />
+      );
+    case "workflow-mark-blocked":
+      return (
+        <MenuRow
+          icon={CircleOff}
+          label="Mark blocked"
+          ariaLabel="Mark work item blocked"
+          disabled={!(props.workflowItem?.canMarkBlocked && props.onWorkflowMarkBlocked)}
+          onClick={() => {
+            props.onWorkflowMarkBlocked?.();
+            onClose();
+          }}
+        />
+      );
+    case "workflow-jump-to-scope":
+      return (
+        <MenuRow
+          icon={Target}
+          label="Jump to scope"
+          ariaLabel="Jump to workflow scope"
+          disabled={!props.onWorkflowJumpToScope}
+          onClick={() => {
+            props.onWorkflowJumpToScope?.();
+            onClose();
+          }}
+        />
+      );
+    case "review-queue-counts":
+      return props.reviewQueue ? (
+        <div className="px-2 py-1.5">
+          <ReviewQueueCounts queue={props.reviewQueue} compact />
+        </div>
+      ) : null;
+    case "review-queue-active-label":
+      return props.reviewQueue ? (
+        <div className="px-2 py-1.5">
+          <ReviewActiveLabel queue={props.reviewQueue} />
+        </div>
+      ) : null;
+    default:
+      return null;
+  }
+}
+
+function IconTextButton(arg: {
+  icon: React.ComponentType<{ className?: string }>;
+  iconAfter?: boolean;
+  text: string;
+  ariaLabel: string;
+  tone?: "default" | "accent" | "danger";
+  disabled?: boolean;
+  onClick?: () => void;
+  "data-testid"?: string;
+}): React.JSX.Element {
+  const Icon = arg.icon;
+  const tone = arg.tone ?? "default";
+  const toneClasses =
+    tone === "accent"
+      ? "text-accent hover:bg-accent/10"
+      : tone === "danger"
+        ? "text-danger hover:bg-danger/10"
+        : "text-secondary hover:bg-surface";
+  return (
+    <button
+      type="button"
+      aria-label={arg.ariaLabel}
+      disabled={arg.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={arg.onClick}
+      data-testid={arg["data-testid"]}
+      className={[
+        "inline-flex h-6 items-center gap-1 rounded-md border border-transparent px-1.5 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas",
+        toneClasses,
+      ].join(" ")}
+    >
+      {!arg.iconAfter ? <Icon className="h-3.5 w-3.5" /> : null}
+      <span>{arg.text}</span>
+      {arg.iconAfter ? <Icon className="h-3.5 w-3.5" /> : null}
+    </button>
+  );
+}
+
+function MenuRow(arg: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  ariaLabel: string;
+  disabled?: boolean;
+  onClick: () => void;
+}): React.JSX.Element {
+  const Icon = arg.icon;
+  return (
+    <button
+      type="button"
+      aria-label={arg.ariaLabel}
+      disabled={arg.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={arg.onClick}
+      className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[11px] font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:bg-surface"
+    >
+      <Icon className="h-3.5 w-3.5 text-secondary" />
+      <span>{arg.label}</span>
+    </button>
+  );
+}
+
+function ReviewQueueCounts({
+  queue,
+  compact,
+}: {
+  queue: ReviewQueueSnapshot;
+  compact?: boolean;
+}): React.JSX.Element {
+  return (
+    <span
+      className={[
+        "inline-flex items-center gap-1.5 text-[10px] text-secondary",
+        compact ? "px-0" : "px-1",
+      ].join(" ")}
+      data-testid="role-review-counts"
+    >
+      <span className="inline-flex items-center gap-1 rounded-full bg-surface px-1.5 py-0.5 font-medium">
+        <MessageSquareText className="h-3 w-3 text-comment" />
+        {queue.openCount} open
+      </span>
+      <span className="inline-flex items-center gap-1 rounded-full bg-surface px-1.5 py-0.5 font-medium">
+        <Rows3 className="h-3 w-3 text-accent" />
+        {queue.totalCount} total
+      </span>
+    </span>
+  );
+}
+
+function ReviewActiveLabel({
+  queue,
+}: {
+  queue: ReviewQueueSnapshot;
+}): React.JSX.Element {
+  const active = queue.items[queue.activeIndex] ?? null;
+  const label =
+    active?.label ??
+    (queue.totalCount > 0 ? "Review queue" : "No review items");
+  const kind =
+    active?.kind === "comment"
+      ? "Comment"
+      : active?.kind === "change"
+        ? "Redline"
+        : active?.kind === "section_mark"
+          ? "Tag"
+          : null;
+  return (
+    <span
+      className="inline-flex min-w-0 items-center gap-1.5 truncate text-[11px] text-primary"
+      data-testid="role-review-active-label"
+    >
+      {kind ? (
+        <span className="shrink-0 rounded-full bg-canvas px-1.5 py-0.5 text-[9px] font-medium text-secondary ring-1 ring-border/50">
+          {kind}
+        </span>
+      ) : null}
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}
+
+function MarkupModeSelect(arg: {
+  mode: MarkupDisplayMode;
+  onChange: (mode: MarkupDisplayMode) => void;
+  disabled?: boolean;
+}): React.JSX.Element {
+  const Icon = arg.mode === "clean" ? BookmarkCheck : arg.mode === "all" ? Flag : Rows3;
+  return (
+    <button
+      type="button"
+      aria-label={`Markup display: ${arg.mode}`}
+      disabled={arg.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={() => {
+        const next: MarkupDisplayMode =
+          arg.mode === "all" ? "clean" : arg.mode === "clean" ? "simple" : "all";
+        arg.onChange(next);
+      }}
+      data-testid="role-review-markup-mode"
+      className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      <Icon className="h-3.5 w-3.5" />
+      <span className="capitalize">{arg.mode}</span>
+    </button>
+  );
+}
+
+export default TwRoleActionRegion;