@beyondwork/docx-react-component 1.0.0

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { Check, X } from "lucide-react";
+
+import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
+import { selectVisibleRevisions } from "../../ui/shared/revision-filters";
+import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+
+export interface TwRevisionSidebarProps {
+  trackedChanges: TrackedChangesSnapshot;
+  markupDisplay: MarkupDisplay;
+  activeRevisionId?: string;
+  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onAcceptRevision?: (revisionId: string) => void;
+  onRejectRevision?: (revisionId: string) => void;
+  onAcceptAllChanges?: () => void;
+  onRejectAllChanges?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
+  const { trackedChanges, markupDisplay, activeRevisionId } = props;
+  const visibleRevisions = selectVisibleRevisions(trackedChanges.revisions, markupDisplay);
+  const actionablePendingCount = trackedChanges.revisions.filter(
+    (r) => r.status === "active" && r.actionability === "actionable",
+  ).length;
+
+  return (
+    <div className="outline-none">
+      <p className="text-xs text-tertiary mb-3">
+        {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
+      </p>
+
+      {/* Bulk actions */}
+      <div className="flex gap-1.5 mb-3">
+        <button
+          type="button"
+          disabled={actionablePendingCount === 0}
+          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          onClick={props.onAcceptAllChanges}
+        >
+          Accept all ({actionablePendingCount})
+        </button>
+        <button
+          type="button"
+          disabled={actionablePendingCount === 0}
+          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          onClick={props.onRejectAllChanges}
+        >
+          Reject all
+        </button>
+      </div>
+
+      {visibleRevisions.length > 0 ? (
+        <div className="space-y-1">
+          {visibleRevisions.map((rev) => {
+            const isActive = activeRevisionId === rev.revisionId;
+
+            return (
+              <div
+                key={rev.revisionId}
+                role="button"
+                tabIndex={0}
+                className={`flex rounded-lg transition-colors cursor-pointer ${focusRingClass} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`}
+                onClick={() => props.onOpenRevision?.(rev)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    props.onOpenRevision?.(rev);
+                  }
+                }}
+              >
+                <div className={`w-0.5 shrink-0 rounded-l-lg ${
+                  rev.kind === "insertion" ? "bg-insert"
+                  : rev.kind === "deletion" ? "bg-danger"
+                  : "bg-tertiary"
+                }`} />
+                <div className="p-2.5 flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2 mb-1">
+                    <span className="text-sm font-medium text-primary">{rev.anchorLabel}</span>
+                    <RevisionBadge status={rev.status} actionability={rev.actionability} />
+                  </div>
+                  <p className="text-xs text-tertiary mb-1">{rev.authorId} · {rev.createdAt}</p>
+                  {rev.excerpt ? (
+                    <p className={`text-sm ${
+                      rev.kind === "insertion" ? "text-insert"
+                      : rev.kind === "deletion" ? "text-danger line-through"
+                      : "text-secondary"
+                    }`}>
+                      {rev.excerpt}
+                    </p>
+                  ) : (
+                    <p className="text-sm text-secondary">{rev.label}</p>
+                  )}
+                  {rev.detail ? (
+                    <p className="text-xs text-secondary mt-1">{rev.detail}</p>
+                  ) : null}
+                  <div className="flex gap-1.5 mt-2">
+                    {rev.actionability === "actionable" ? (
+                      <>
+                        <button
+                          type="button"
+                          disabled={!rev.canAccept || rev.status === "accepted"}
+                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            props.onAcceptRevision?.(rev.revisionId);
+                          }}
+                        >
+                          <Check className="h-3 w-3" /> Accept
+                        </button>
+                        <button
+                          type="button"
+                          disabled={!rev.canReject || rev.status === "rejected"}
+                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            props.onRejectRevision?.(rev.revisionId);
+                          }}
+                        >
+                          <X className="h-3 w-3" /> Reject
+                        </button>
+                      </>
+                    ) : (
+                      <span className="text-xs text-tertiary px-2 py-1">Preserve-only</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-tertiary py-4">
+          {trackedChanges.totalCount > 0
+            ? "Switch to Full markup to see all tracked changes."
+            : "Tracked change cards will appear here when present."}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function RevisionBadge(props: { status: string; actionability: string }) {
+  if (props.actionability === "preserve-only") {
+    return (
+      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-comment bg-warning-soft">
+        preserve-only
+      </span>
+    );
+  }
+  const styles: Record<string, string> = {
+    active: "text-secondary bg-subtle",
+    accepted: "text-insert bg-insert-soft",
+    rejected: "text-danger bg-delete-soft",
+    detached: "text-comment bg-warning-soft",
+  };
+  return (
+    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>
+      {props.status}
+    </span>
+  );
+}

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+export interface TwStatusBarProps {
+  isDirty: boolean;
+  isExportBlocked: boolean;
+  preserveOnlyCount: number;
+  commentCount: number;
+  changeCount: number;
+  sessionId: string;
+}
+
+export function TwStatusBar(props: TwStatusBarProps) {
+  const saveState = props.isExportBlocked
+    ? "Read-only"
+    : props.isDirty
+      ? "Unsaved"
+      : "Ready";
+  const exportState = props.isExportBlocked
+    ? "Blocked"
+    : props.preserveOnlyCount > 0
+      ? "Warnings"
+      : "Ready";
+
+  return (
+    <footer className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary">
+      <span className="flex items-center gap-1.5">
+        <span
+          className={`inline-block h-1.5 w-1.5 rounded-full ${
+            props.isExportBlocked
+              ? "bg-danger"
+              : props.isDirty
+                ? "bg-comment"
+                : "bg-insert"
+          }`}
+        />
+        {saveState}
+      </span>
+      <span className="flex items-center gap-1.5">
+        <span
+          className={`inline-block h-1.5 w-1.5 rounded-full ${
+            props.isExportBlocked
+              ? "bg-danger"
+              : props.preserveOnlyCount > 0
+                ? "bg-comment"
+                : "bg-insert"
+          }`}
+        />
+        Export {exportState.toLowerCase()}
+      </span>
+      <span>
+        {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
+        {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
+      </span>
+      <span className="flex-1" />
+      <span>{props.sessionId}</span>
+    </footer>
+  );
+}

package/src/ui-tailwind/theme/editor-theme.css

@@ -0,0 +1,190 @@
+/*
+ * Word Review Editor — Portable Theme
+ *
+ * This file defines all CSS custom properties consumed by the Tailwind-based
+ * editor components. Import it in your app to style the editor, or override
+ * individual variables in your own stylesheet for custom themes.
+ *
+ * Usage:
+ *   @import "@docx-react-component/ui-tailwind/theme/editor-theme.css";
+ *
+ * Custom theme:
+ *   .my-brand { --color-accent: #8b5cf6; }
+ *   <div class="my-brand"><WordReviewEditor ... /></div>
+ */
+
+@import "tailwindcss";
+
+@theme {
+  /* Backgrounds */
+  --color-surface: #f7f7f5;
+  --color-surface-hover: #ebebea;
+  --color-surface-active: #e3e3e1;
+  --color-subtle: #f0f0ee;
+  --color-canvas: #ffffff;
+  --color-shell-bg: #f3efe7;
+  --color-card: #faf8f2;
+  --color-editor-frame: #f6f3ee;
+
+  /* Text */
+  --color-primary: #1f1f1f;
+  --color-secondary: #6b6b6b;
+  --color-tertiary: #616161;
+
+  /* Accent */
+  --color-accent: #1660a8;
+  --color-accent-soft: rgba(22, 96, 168, 0.08);
+
+  /* Review — comments */
+  --color-comment: #7a4f00;
+  --color-comment-soft: rgba(255, 212, 0, 0.14);
+  --color-comment-strong: rgba(255, 212, 0, 0.25);
+
+  /* Review — insertions */
+  --color-insert: #1a7f37;
+  --color-insert-soft: rgba(26, 127, 55, 0.08);
+
+  /* Review — deletions */
+  --color-delete: #cf222e;
+  --color-delete-soft: rgba(207, 34, 46, 0.06);
+
+  /* Semantic */
+  --color-warning: #7a4f00;
+  --color-warning-soft: rgba(154, 103, 0, 0.08);
+  --color-danger: #cf222e;
+  --color-danger-soft: rgba(207, 34, 46, 0.08);
+  --color-success: #1a7f37;
+  --color-success-soft: rgba(26, 127, 55, 0.08);
+
+  /* Borders */
+  --color-border: rgba(0, 0, 0, 0.06);
+  --color-border-strong: rgba(0, 0, 0, 0.12);
+
+  /* Shadows */
+  --color-shadow: rgba(16, 24, 40, 0.08);
+  --color-shadow-strong: rgba(16, 24, 40, 0.14);
+
+  /* Typography roles */
+  --font-legal-serif: var(--font-legal-serif, "Source Serif 4", "Georgia", "Times New Roman", serif);
+  --font-legal-sans: var(--font-legal-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  --font-legal-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;
+}
+
+/* ─── Dark mode overrides ─── */
+.dark {
+  --color-surface: #1e1e1e;
+  --color-surface-hover: #2a2a2a;
+  --color-surface-active: #333333;
+  --color-subtle: #252525;
+  --color-canvas: #191919;
+  --color-shell-bg: #171514;
+  --color-card: #23211f;
+  --color-editor-frame: #1d1b19;
+
+  --color-primary: #e4e4e4;
+  --color-secondary: #a0a0a0;
+  --color-tertiary: #6e6e6e;
+
+  --color-accent: #4ca6f0;
+  --color-accent-soft: rgba(76, 166, 240, 0.12);
+
+  --color-comment: #d4a020;
+  --color-comment-soft: rgba(212, 160, 32, 0.16);
+  --color-comment-strong: rgba(212, 160, 32, 0.28);
+  --color-insert: #3fb950;
+  --color-insert-soft: rgba(63, 185, 80, 0.12);
+  --color-delete: #f85149;
+  --color-delete-soft: rgba(248, 81, 73, 0.12);
+
+  --color-warning: #d4a020;
+  --color-warning-soft: rgba(212, 160, 32, 0.12);
+  --color-danger: #f85149;
+  --color-danger-soft: rgba(248, 81, 73, 0.12);
+  --color-success: #3fb950;
+  --color-success-soft: rgba(63, 185, 80, 0.12);
+
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.14);
+
+  --color-shadow: rgba(0, 0, 0, 0.32);
+  --color-shadow-strong: rgba(0, 0, 0, 0.48);
+}
+
+/* ─── Base resets ─── */
+* {
+  box-sizing: border-box;
+}
+
+/* ─── Reduced motion ─── */
+[data-reduced-motion="true"] {
+  scroll-behavior: auto;
+}
+
+[data-reduced-motion="true"] *,
+[data-reduced-motion="true"] *::before,
+[data-reduced-motion="true"] *::after {
+  animation: none !important;
+  scroll-behavior: auto !important;
+  transition: none !important;
+}
+
+/* ─── Caret blink animation ─── */
+@keyframes wre-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.animate-wre-blink {
+  animation: wre-blink 1s step-end infinite;
+}
+
+/* ─── Focus ring utility ─── */
+.wre-focus-ring:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--color-canvas),
+    0 0 0 4px var(--color-accent);
+}
+
+/* ─── ProseMirror surface ─── */
+.prosemirror-surface .ProseMirror {
+  outline: none;
+  min-height: 200px;
+  cursor: text;
+  border: none;
+  box-shadow: none;
+}
+
+.prosemirror-surface .ProseMirror:focus {
+  outline: none;
+}
+
+.prosemirror-surface .ProseMirror [contenteditable] {
+  outline: none;
+}
+
+.prosemirror-surface:focus-visible {
+  outline: none;
+}
+
+.prosemirror-surface .ProseMirror p {
+  margin: 0 0 0.5em 0;
+}
+
+.prosemirror-surface .ProseMirror [data-node-type="opaque_block"] {
+  user-select: none;
+  cursor: default;
+}
+
+.prosemirror-surface .ProseMirror [data-node-type="opaque_inline"] {
+  user-select: none;
+  cursor: default;
+}
+
+.prosemirror-surface .ProseMirror [data-node-type="tab"] {
+  user-select: none;
+}
+
+.prosemirror-surface .ProseMirror ::selection {
+  background: var(--color-accent-soft);
+}

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

@@ -0,0 +1,48 @@
+import React from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+
+export interface TwToolbarIconButtonProps {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  emphasis?: boolean;
+  onClick?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type="button"
+          disabled={props.disabled}
+          onClick={props.onClick}
+          className={[
+            "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors outline-none",
+            "disabled:opacity-30 disabled:cursor-not-allowed",
+            props.emphasis
+              ? "text-accent hover:bg-accent-soft"
+              : props.active
+                ? "bg-accent-soft text-accent"
+                : "text-secondary hover:bg-surface hover:text-primary",
+            focusRingClass,
+          ].join(" ")}
+        >
+          <props.icon className="h-4 w-4" />
+        </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}
+        >
+          {props.label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}

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

@@ -0,0 +1,231 @@
+import React from "react";
+
+import * as Popover from "@radix-ui/react-popover";
+import * as Toggle from "@radix-ui/react-toggle";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import {
+  Download,
+  Eye,
+  EyeOff,
+  FileText,
+  MessageSquare,
+  Monitor,
+  Redo2,
+  ShieldAlert,
+  ShieldCheck,
+  Undo2,
+} from "lucide-react";
+
+import type { CompatibilityPanelSnapshot, EditorWarning } from "../../api/public-types";
+import type { SessionCapabilities } from "../../runtime/session-capabilities";
+import { TwHealthPanel } from "../review/tw-health-panel";
+import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
+
+export type ViewMode = "canvas" | "document";
+
+export interface TwToolbarProps {
+  sourceLabel?: string;
+  capabilities?: SessionCapabilities;
+  compatibility?: CompatibilityPanelSnapshot;
+  warnings?: EditorWarning[];
+  viewMode: ViewMode;
+  /** Display toggle for tracked change decorations (not a runtime mutation toggle). */
+  showTrackedChanges: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+  onAddComment: () => void;
+  onExport: () => void;
+  onViewModeChange: (value: ViewMode) => void;
+  onShowTrackedChangesChange: (show: boolean) => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwToolbar(props: TwToolbarProps) {
+  const caps = props.capabilities;
+
+  return (
+    <header className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
+      {/* Left cluster: undo/redo + formatting */}
+      <div className="flex items-center gap-0.5">
+        <TwToolbarIconButton
+          icon={Undo2}
+          label="Undo"
+          disabled={caps ? !caps.canUndo : true}
+          onClick={props.onUndo}
+        />
+        <TwToolbarIconButton
+          icon={Redo2}
+          label="Redo"
+          disabled={caps ? !caps.canRedo : true}
+          onClick={props.onRedo}
+        />
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        {/* Paragraph style selector and B/I/U removed — not yet supported */}
+      </div>
+
+      {/* Center: document title */}
+      <div className="flex-1 text-center min-w-0">
+        <span className="text-sm font-medium truncate block">
+          {props.sourceLabel ?? "Untitled"}
+        </span>
+      </div>
+
+      {/* Right cluster: comment, track changes, markup, view, export */}
+      <div className="flex items-center gap-0.5">
+        <TwToolbarIconButton
+          icon={MessageSquare}
+          label="Add comment"
+          disabled={caps ? !caps.canAddComment : true}
+          emphasis
+          onClick={props.onAddComment}
+        />
+
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Toggle.Root
+              pressed={props.showTrackedChanges}
+              onPressedChange={props.onShowTrackedChangesChange}
+              disabled={caps ? !caps.trackChangesSupported : false}
+              className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none disabled:opacity-40 ${focusRingClass}`}
+            >
+              {props.showTrackedChanges ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+            </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 ? "Hide tracked changes" : "Show tracked changes"}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        {/* View mode toggle group: Canvas (clean, flowing) / Document (paged, markup) */}
+        <ToggleGroup.Root
+          type="single"
+          value={props.viewMode}
+          onValueChange={(v: string) => {
+            if (v) props.onViewModeChange(v as ViewMode);
+          }}
+          className="flex items-center gap-0.5"
+        >
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <ToggleGroup.Item
+                value="canvas"
+                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
+              >
+                <Monitor className="h-3.5 w-3.5" />
+              </ToggleGroup.Item>
+            </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}>
+                Canvas — clean flowing text
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <ToggleGroup.Item
+                value="document"
+                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
+              >
+                <FileText className="h-3.5 w-3.5" />
+              </ToggleGroup.Item>
+            </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}>
+                Document — paged with markup
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </ToggleGroup.Root>
+
+        {/* Health indicator */}
+        {props.compatibility && props.warnings ? (
+          <Popover.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Popover.Trigger asChild>
+                  <button
+                    type="button"
+                    className={`relative inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass} ${
+                      (caps?.healthIssueCount ?? 0) > 0 ? "text-secondary" : "text-secondary"
+                    }`}
+                  >
+                    {(caps?.healthIssueCount ?? 0) > 0
+                      ? <ShieldAlert className="h-4 w-4" />
+                      : <ShieldCheck className="h-4 w-4" />
+                    }
+                    {(caps?.healthIssueCount ?? 0) > 0 ? (
+                      <span className="absolute -top-0.5 -right-0.5 flex h-3 min-w-[12px] items-center justify-center rounded-full bg-tertiary text-[8px] font-medium text-white">
+                        {caps?.healthIssueCount}
+                      </span>
+                    ) : null}
+                  </button>
+                </Popover.Trigger>
+              </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}>
+                  {(caps?.healthIssueCount ?? 0) > 0
+                    ? `Document health — ${caps?.healthIssueCount} issue${(caps?.healthIssueCount ?? 0) !== 1 ? "s" : ""}`
+                    : "Document health — no issues"
+                  }
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+            <Popover.Portal>
+              <Popover.Content
+                className="w-[360px] max-h-[480px] overflow-y-auto rounded-lg bg-canvas shadow-lg ring-1 ring-border p-3 z-50"
+                sideOffset={8}
+                align="end"
+              >
+                <TwHealthPanel
+                  compatibility={props.compatibility}
+                  warnings={props.warnings}
+                />
+              </Popover.Content>
+            </Popover.Portal>
+          </Popover.Root>
+        ) : null}
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        {/* Export button */}
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              disabled={caps ? !caps.canExport : true}
+              className={[
+                "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold transition-colors outline-none",
+                focusRingClass,
+                caps?.exportBlocked
+                  ? "cursor-not-allowed text-danger opacity-50"
+                  : "text-accent hover:bg-accent-soft",
+              ].join(" ")}
+              onClick={props.onExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              Export
+            </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}>
+              {caps?.exportBlocked
+                ? "Export blocked by unsupported content"
+                : "Export document"}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </div>
+    </header>
+  );
+}