@beyondwork/docx-react-component 1.0.37 → 1.0.39

package/src/ui-tailwind/toolbar/tw-scope-posture-menu.tsx

@@ -0,0 +1,182 @@
+/**
+ * Scope posture menu — replaces the old "Mark section" button with a
+ * topnav dropdown listing the seven `ScopeRailPosture` values so
+ * editors can mark regions with an explicit workflow mode instead of a
+ * single "marked" flag.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.4, the menu lives inline
+ * in the editor role's primary action region (not in the review queue
+ * strip).  Postures align 1:1 with the rail vocabulary so the rail
+ * updates visually as soon as the user picks one.
+ */
+
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import {
+  BookmarkPlus,
+  ChevronDown,
+  Eye,
+  Flag,
+  Lock,
+  MessageCircle,
+  Pencil,
+  Sparkles,
+} from "lucide-react";
+
+import type { ScopeRailPosture } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwScopePostureMenuProps {
+  disabled?: boolean;
+  /** Called when the user picks a posture.  Host decides the scope to mark. */
+  onSelect: (posture: ScopeRailPosture) => void;
+  /** Optional explicit label override (defaults to "Mark…"). */
+  label?: string;
+  "data-testid"?: string;
+}
+
+interface PostureEntry {
+  posture: ScopeRailPosture;
+  label: string;
+  hint: string;
+  icon: React.ComponentType<{ className?: string }>;
+  tone: "accent" | "warning" | "comment" | "secondary" | "danger";
+}
+
+/**
+ * Posture catalog.  Mirrors `POSTURE_STYLES` in `tw-scope-rail-layer.tsx`
+ * but with lucide icon components (the rail uses CSS pseudo-element
+ * glyphs via the `data-icon` attribute).  Extract both into a single
+ * source of truth in a follow-up.
+ */
+const POSTURE_ENTRIES: readonly PostureEntry[] = [
+  {
+    posture: "edit",
+    label: "Edit scope",
+    hint: "Full authoring inside this region",
+    icon: Pencil,
+    tone: "accent",
+  },
+  {
+    posture: "suggest",
+    label: "Suggest scope",
+    hint: "Tracked-change suggestions only",
+    icon: Sparkles,
+    tone: "warning",
+  },
+  {
+    posture: "comment",
+    label: "Comment scope",
+    hint: "Comments only; body is read-only",
+    icon: MessageCircle,
+    tone: "comment",
+  },
+  {
+    posture: "view",
+    label: "In scope",
+    hint: "Read-only, in scope of review",
+    icon: Eye,
+    tone: "secondary",
+  },
+  {
+    posture: "candidate",
+    label: "Propose scope",
+    hint: "Candidate — not yet committed",
+    icon: Flag,
+    tone: "warning",
+  },
+  {
+    posture: "preserve-only",
+    label: "Preserve only",
+    hint: "Blocked — export-preserving only",
+    icon: Lock,
+    tone: "danger",
+  },
+  {
+    posture: "blocked-import",
+    label: "Blocked import",
+    hint: "Blocked — imported region is locked",
+    icon: Lock,
+    tone: "danger",
+  },
+];
+
+export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          aria-label={`${props.label ?? "Mark"} section`}
+          aria-expanded={open}
+          disabled={props.disabled}
+          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 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"
+          data-testid={props["data-testid"] ?? "scope-posture-menu-trigger"}
+        >
+          <BookmarkPlus className="h-3.5 w-3.5" />
+          <span>{props.label ?? "Mark…"}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="z-50 w-[260px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+          sideOffset={8}
+          align="start"
+          data-testid="scope-posture-menu-content"
+        >
+          <div className="mb-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Mark section with posture
+          </div>
+          {POSTURE_ENTRIES.map((entry) => (
+            <Popover.Close key={entry.posture} asChild>
+              <button
+                type="button"
+                aria-label={`Mark section as ${entry.label}`}
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => {
+                  props.onSelect(entry.posture);
+                }}
+                className="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-[11px] transition-colors hover:bg-surface focus-visible:outline-none focus-visible:bg-surface"
+                data-testid={`scope-posture-option-${entry.posture}`}
+                data-posture={entry.posture}
+              >
+                <entry.icon
+                  className={[
+                    "mt-0.5 h-3.5 w-3.5 shrink-0",
+                    toneClass(entry.tone),
+                  ].join(" ")}
+                />
+                <span className="flex flex-col">
+                  <span className="font-medium text-primary">{entry.label}</span>
+                  <span className="text-[10px] text-secondary">{entry.hint}</span>
+                </span>
+              </button>
+            </Popover.Close>
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+function toneClass(tone: PostureEntry["tone"]): string {
+  switch (tone) {
+    case "accent":
+      return "text-accent";
+    case "warning":
+      return "text-warning";
+    case "comment":
+      return "text-comment";
+    case "danger":
+      return "text-danger";
+    case "secondary":
+    default:
+      return "text-secondary";
+  }
+}
+
+export default TwScopePostureMenu;

package/src/ui-tailwind/toolbar/tw-shell-header.tsx

@@ -0,0 +1,162 @@
+import React, { type ReactNode } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+
+/**
+ * TwShellHeader — the top "app chrome" bar above the document canvas.
+ *
+ * Anatomy matches the editorial reference mock:
+ *   ┌─────────────────────────────────────────────────────────────────────┐
+ *   │  [brand]        Edit | Review | Workflow | More          [⋯] [CTA] │
+ *   └─────────────────────────────────────────────────────────────────────┘
+ *
+ * All three regions are optional slots — hosts opt in by supplying the
+ * corresponding prop.  When nothing is supplied the header renders empty but
+ * preserves layout height so the document canvas does not jump when a CTA
+ * appears.
+ */
+
+export type ShellHeaderMode = "edit" | "review" | "workflow" | "more";
+
+export interface ShellHeaderModeOption {
+  id: ShellHeaderMode;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ShellHeaderPrimaryAction {
+  label: string;
+  onClick: () => void;
+  tone?: "accent" | "neutral";
+  disabled?: boolean;
+}
+
+export interface ShellHeaderIconAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick?: () => void;
+  href?: string;
+}
+
+export interface TwShellHeaderProps {
+  brand?: ReactNode;
+  modes?: readonly ShellHeaderModeOption[];
+  activeMode?: ShellHeaderMode;
+  onModeChange?: (mode: ShellHeaderMode) => void;
+  iconActions?: readonly ShellHeaderIconAction[];
+  primaryAction?: ShellHeaderPrimaryAction;
+  /** Thin bottom border appears only when the document has scrolled. */
+  isScrolled?: boolean;
+  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 TwShellHeader(props: TwShellHeaderProps) {
+  const hasContent =
+    props.brand ||
+    (props.modes && props.modes.length > 0) ||
+    (props.iconActions && props.iconActions.length > 0) ||
+    props.primaryAction;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  const className = [
+    "flex h-12 shrink-0 items-center justify-between gap-4 px-4 bg-canvas/92 backdrop-blur-sm",
+    props.isScrolled ? "border-b border-border" : "border-b border-transparent",
+    "transition-colors duration-[var(--motion-fast)]",
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <header className={className} data-testid="tw-shell-header">
+      <div className="flex min-w-0 items-center gap-3">
+        {props.brand ? (
+          <div
+            className="font-[family-name:var(--font-legal-serif)] text-[15px] font-semibold text-primary truncate"
+            data-testid="tw-shell-header__brand"
+          >
+            {props.brand}
+          </div>
+        ) : null}
+      </div>
+
+      {props.modes && props.modes.length > 0 && props.activeMode ? (
+        <Tabs.Root
+          value={props.activeMode}
+          onValueChange={(v: string) =>
+            props.onModeChange?.(v as ShellHeaderMode)
+          }
+        >
+          <Tabs.List
+            aria-label="Workspace modes"
+            className="flex items-center gap-1"
+          >
+            {props.modes.map((mode) => (
+              <Tabs.Trigger
+                key={mode.id}
+                value={mode.id}
+                disabled={mode.disabled}
+                className={`wre-rail-tab ${focusRingClass}`}
+                data-testid={`tw-shell-header__mode-${mode.id}`}
+              >
+                {mode.label}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </Tabs.Root>
+      ) : (
+        <div aria-hidden="true" />
+      )}
+
+      <div className="flex items-center gap-1">
+        {props.iconActions?.map((action) => {
+          const commonProps = {
+            key: action.id,
+            "aria-label": action.label,
+            title: action.label,
+            className: `inline-flex h-8 w-8 items-center justify-center rounded-sm text-secondary transition-colors hover:bg-surface-hover hover:text-primary ${focusRingClass}`,
+          } as const;
+
+          if (action.href) {
+            return (
+              <a {...commonProps} href={action.href}>
+                <span aria-hidden="true">{action.icon}</span>
+              </a>
+            );
+          }
+
+          return (
+            <button {...commonProps} type="button" onClick={action.onClick}>
+              <span aria-hidden="true">{action.icon}</span>
+            </button>
+          );
+        })}
+
+        {props.primaryAction ? (
+          <button
+            type="button"
+            disabled={props.primaryAction.disabled}
+            onClick={props.primaryAction.onClick}
+            data-tone={props.primaryAction.tone ?? "accent"}
+            className={[
+              "ml-2 inline-flex h-8 items-center rounded-sm px-3 text-xs font-semibold transition-colors disabled:opacity-40",
+              props.primaryAction.tone === "neutral"
+                ? "bg-surface text-primary hover:bg-surface-hover"
+                : "bg-accent text-white hover:bg-[color-mix(in_srgb,var(--color-accent)_85%,#000)]",
+              focusRingClass,
+            ].join(" ")}
+            data-testid="tw-shell-header__primary-action"
+          >
+            {props.primaryAction.label}
+          </button>
+        ) : null}
+      </div>
+    </header>
+  );
+}

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -42,12 +42,18 @@ import {
 
 import type {
   ActiveListContext,
+  ChromePinSurface,
+  ChromePinsState,
   CompatibilityPanelSnapshot,
+  EditorRole,
   EditorStoryTarget,
   EditorWarning,
   FormattingStateSnapshot,
   FormattingAlignment,
   InsertImageOptions,
+  PinState,
+  ReviewQueueSnapshot,
+  ScopeRailPosture,
   SectionBreakType,
   StyleCatalogSnapshot,
   WorkflowBlockedCommandReason,
@@ -58,12 +64,19 @@ import type {
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
 import {
   getToolbarChromePlacement,
+  isChromeItemOwnedByRoleRegion,
   isToolbarChromeItemVisible,
   resolveScopedChromePolicy,
   type ScopedChromePolicy,
 } from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwHealthPanel } from "../review/tw-health-panel";
+import {
+  TwRoleActionRegion,
+  type MarkupDisplayMode,
+  type WorkflowWorkItemSnapshot,
+} from "./tw-role-action-region";
+import { TwDetachHandle } from "../chrome/tw-detach-handle";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -121,6 +134,46 @@ export interface TwToolbarProps {
   onContinueNumbering?: () => void;
   onUpdateFields?: () => void;
   onUpdateTableOfContents?: () => void;
+
+  // ───── R1: role-scoped inline action region (spec §6.4) ──────────────
+  /**
+   * Active editor role.  When supplied, the toolbar renders the inline
+   * `TwRoleActionRegion` between the left formatting cluster and the
+   * right view cluster.  Omit to keep the pre-R1 layout.
+   */
+  role?: EditorRole;
+  /** Review-queue snapshot for the review role's inline prev/next/counts. */
+  reviewQueue?: ReviewQueueSnapshot;
+  /** Active work item for the workflow role's inline queue. */
+  workflowItem?: WorkflowWorkItemSnapshot | null;
+  /** Markup display mode for the review role. */
+  markupDisplay?: MarkupDisplayMode;
+
+  // Shared: editor + review role (comment + TC in role region)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+  // Workflow + review role: scope posture
+  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;
+  /** Current chrome pin state; when supplied enables the topnav detach handle. */
+  chromePins?: ChromePinsState;
+  /** Called when the user detaches or re-attaches the topnav. */
+  onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -170,6 +223,7 @@ export function TwToolbar(props: TwToolbarProps) {
         } as any)
       : undefined,
     activeListContext: props.activeListContext,
+    ...(props.role ? { role: props.role } : {}),
   });
   const showStyleSelectors = isToolbarChromeItemVisible(scopedChromePolicy, "text-style-selectors");
   const showInlineFormatting = isToolbarChromeItemVisible(scopedChromePolicy, "inline-formatting");
@@ -177,7 +231,12 @@ export function TwToolbar(props: TwToolbarProps) {
   const showTextColors = isToolbarChromeItemVisible(scopedChromePolicy, "text-colors");
   const showParagraphAlignment = isToolbarChromeItemVisible(scopedChromePolicy, "paragraph-alignment");
   const showInsertMenu = isToolbarChromeItemVisible(scopedChromePolicy, "insert-actions");
-  const showTrackedChangesToggle = isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle");
+  const showTrackedChangesToggle =
+    isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle") &&
+    !isChromeItemOwnedByRoleRegion("tracked-changes-toggle", props.role);
+  const showRightClusterComment =
+    isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
+    !isChromeItemOwnedByRoleRegion("comment", props.role);
   const showHealth =
     showDiagnosticsChrome &&
     isToolbarChromeItemVisible(scopedChromePolicy, "health") &&
@@ -476,6 +535,40 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
       </div>
 
+      {/* R1: role-scoped inline action region (spec §6.4) */}
+      {props.role ? (
+        <TwRoleActionRegion
+          role={props.role}
+          policy={scopedChromePolicy}
+          compactMode={isCompact}
+          reviewQueue={props.reviewQueue}
+          workflowItem={props.workflowItem}
+          markupDisplay={props.markupDisplay}
+          canAddComment={canAddComment}
+          showTrackedChanges={props.showTrackedChanges}
+          capabilities={caps}
+          onAddComment={props.onAddComment}
+          onShowTrackedChangesChange={props.onShowTrackedChangesChange}
+          onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges}
+          onReviewSidebarComments={props.onReviewSidebarComments}
+          onMarkScopePosture={props.onMarkScopePosture}
+          onReviewPrev={props.onReviewPrev}
+          onReviewNext={props.onReviewNext}
+          onReviewAccept={props.onReviewAccept}
+          onReviewReject={props.onReviewReject}
+          onReviewAcceptAll={props.onReviewAcceptAll}
+          onReviewRejectAll={props.onReviewRejectAll}
+          onReviewMarkupMode={props.onReviewMarkupMode}
+          onWorkflowPrev={props.onWorkflowPrev}
+          onWorkflowNext={props.onWorkflowNext}
+          onWorkflowMarkComplete={props.onWorkflowMarkComplete}
+          onWorkflowClaim={props.onWorkflowClaim}
+          onWorkflowSkip={props.onWorkflowSkip}
+          onWorkflowMarkBlocked={props.onWorkflowMarkBlocked}
+          onWorkflowJumpToScope={props.onWorkflowJumpToScope}
+        />
+      ) : null}
+
       {/* Right cluster: comment, track changes, markup, view, export */}
       <div className={`flex items-center gap-0.5 ${isCompact ? "ml-auto flex-wrap justify-end" : ""}`}>
         {scopedChromePolicy.scopeStatusLabel ? (
@@ -498,7 +591,7 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        {isToolbarChromeItemVisible(scopedChromePolicy, "comment") ? (
+        {showRightClusterComment ? (
           <TwToolbarIconButton
             icon={MessageSquare}
             label="Add comment"
@@ -740,6 +833,15 @@ export function TwToolbar(props: TwToolbarProps) {
             onClick={props.onExport}
           />
         ) : null}
+
+        {props.onChromePinChange ? (
+          <TwDetachHandle
+            surface="topnav"
+            pin={props.chromePins?.topnav}
+            onChange={props.onChromePinChange}
+            label="Detach toolbar"
+          />
+        ) : null}
       </div>
     </header>
   );