@beyondwork/docx-react-component 1.0.1 → 1.0.2

package/src/ui-tailwind/review/tw-review-rail.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+
+import type {
+  CommentSidebarSnapshot,
+  CommentSidebarThreadSnapshot,
+  CompatibilityPanelSnapshot,
+  EditorWarning,
+  TrackedChangesSnapshot,
+  TrackedChangeEntrySnapshot,
+} from "../../api/public-types";
+import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+import { TwCommentSidebar } from "./tw-comment-sidebar";
+import { TwRevisionSidebar } from "./tw-revision-sidebar";
+import { TwHealthPanel } from "./tw-health-panel";
+
+export type ReviewRailTab = "comments" | "changes";
+
+export interface TwReviewRailProps {
+  activeTab: ReviewRailTab;
+  currentUserId?: string;
+  comments: CommentSidebarSnapshot;
+  trackedChanges: TrackedChangesSnapshot;
+  compatibility: CompatibilityPanelSnapshot;
+  warnings: EditorWarning[];
+  markupDisplay: MarkupDisplay;
+  activeCommentId?: string;
+  activeRevisionId?: string;
+  onActiveTabChange: (tab: ReviewRailTab) => void;
+  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
+  onResolveComment?: (commentId: string) => void;
+  onReopenComment?: (commentId: string) => void;
+  onAddReply?: (commentId: string, body: string) => void;
+  onEditBody?: (commentId: string, body: string) => void;
+  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 TwReviewRail(props: TwReviewRailProps) {
+  const warningCount = props.compatibility.featureEntries.filter(
+    (e) => e.featureClass !== "supported-roundtrip",
+  ).length + props.warnings.length;
+
+  return (
+    <aside
+      aria-label="Review rail"
+      className="flex w-[340px] shrink-0 flex-col border-l border-border bg-canvas"
+    >
+      <Tabs.Root
+        value={props.activeTab}
+        onValueChange={(v: string) => props.onActiveTabChange(v as ReviewRailTab)}
+        className="flex flex-1 flex-col min-h-0"
+      >
+        <Tabs.List className="flex shrink-0 border-b border-border">
+          <Tabs.Trigger
+            value="comments"
+            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+          >
+            Comments{" "}
+            <span className="text-tertiary">{props.comments.totalCount}</span>
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            value="changes"
+            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+          >
+            Changes{" "}
+            <span className="text-tertiary">{props.trackedChanges.totalCount}</span>
+          </Tabs.Trigger>
+          {/* Health moved to toolbar popover */}
+        </Tabs.List>
+
+        <ScrollArea.Root className="flex-1 min-h-0">
+          <ScrollArea.Viewport className="h-full w-full">
+            <Tabs.Content value="comments" className="p-3 outline-none">
+              <TwCommentSidebar
+                currentUserId={props.currentUserId}
+                comments={props.comments}
+                activeCommentId={props.activeCommentId}
+                onOpenComment={props.onOpenComment}
+                onResolveComment={props.onResolveComment}
+                onReopenComment={props.onReopenComment}
+                onAddReply={props.onAddReply}
+                onEditBody={props.onEditBody}
+              />
+            </Tabs.Content>
+
+            <Tabs.Content value="changes" className="p-3 outline-none">
+              <TwRevisionSidebar
+                trackedChanges={props.trackedChanges}
+                markupDisplay={props.markupDisplay}
+                activeRevisionId={props.activeRevisionId}
+                onOpenRevision={props.onOpenRevision}
+                onAcceptRevision={props.onAcceptRevision}
+                onRejectRevision={props.onRejectRevision}
+                onAcceptAllChanges={props.onAcceptAllChanges}
+                onRejectAllChanges={props.onRejectAllChanges}
+              />
+            </Tabs.Content>
+
+            {/* Health panel moved to toolbar popover */}
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar
+            orientation="vertical"
+            className="flex w-1.5 touch-none select-none p-0.5"
+          >
+            <ScrollArea.Thumb className="relative flex-1 rounded-full bg-black/[0.12]" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      </Tabs.Root>
+    </aside>
+  );
+}

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>
+  );
+}