@beyondwork/docx-react-component 1.0.0 → 1.0.1

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -1,108 +0,0 @@
-/**
- * ProseMirror NodeView implementations for table nodes.
- *
- * These NodeViews render table structure as proper HTML tables with
- * colspan/rowspan support for merged cells (from gridSpan/verticalMerge attrs).
- *
- * Usage with EditorView:
- *   new EditorView(mount, {
- *     nodeViews: tableNodeViews,
- *     ...
- *   })
- */
-
-import type { Node as PMNode } from "prosemirror-model";
-
-/**
- * NodeView for the table node.
- * Renders as <table><tbody>...</tbody></table>.
- * ProseMirror places row content into the tbody via contentDOM.
- */
-export class TableNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(_node: PMNode) {
-    const table = document.createElement("table");
-    table.className = "border-collapse w-full my-2 text-sm";
-
-    const tbody = document.createElement("tbody");
-    table.appendChild(tbody);
-
-    this.dom = table;
-    this.contentDOM = tbody;
-  }
-}
-
-/**
- * NodeView for table_row nodes.
- * Renders as <tr>...</tr>.
- */
-export class TableRowNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(_node: PMNode) {
-    const tr = document.createElement("tr");
-    this.dom = tr;
-    this.contentDOM = tr;
-  }
-}
-
-/**
- * NodeView for table_cell and table_header_cell nodes.
- *
- * Applies colspan/rowspan from node attrs (mapped from gridSpan/verticalMerge
- * in the OOXML model). Distinguishes header cells by tableRole spec attribute.
- */
-export class TableCellNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(node: PMNode) {
-    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
-    const cell = document.createElement(isHeader ? "th" : "td");
-
-    cell.className = isHeader
-      ? "border border-primary/20 p-2 align-top font-semibold bg-surface-raised"
-      : "border border-primary/20 p-2 align-top";
-
-    const colspan = node.attrs.colspan as number;
-    const rowspan = node.attrs.rowspan as number;
-    if (colspan > 1) (cell as HTMLTableCellElement).colSpan = colspan;
-    if (rowspan > 1) (cell as HTMLTableCellElement).rowSpan = rowspan;
-
-    this.dom = cell;
-    this.contentDOM = cell;
-  }
-
-  /**
-   * Update the DOM when the node's attrs change (e.g., after a merge/split operation).
-   * Return false to let ProseMirror rebuild the node view from scratch.
-   */
-  update(node: PMNode): boolean {
-    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
-    const expectedTag = isHeader ? "TH" : "TD";
-    if (this.dom.tagName !== expectedTag) return false;
-
-    const colspan = node.attrs.colspan as number;
-    const rowspan = node.attrs.rowspan as number;
-    const cell = this.dom as HTMLTableCellElement;
-    cell.colSpan = colspan > 1 ? colspan : 1;
-    cell.rowSpan = rowspan > 1 ? rowspan : 1;
-    return true;
-  }
-}
-
-/**
- * NodeView factory map for use with EditorView.nodeViews.
- *
- * Pass this object directly to the EditorView constructor options:
- *   new EditorView(mount, { nodeViews: tableNodeViews, ... })
- */
-export const tableNodeViews = {
-  table: (node: PMNode) => new TableNodeView(node),
-  table_row: (node: PMNode) => new TableRowNodeView(node),
-  table_cell: (node: PMNode) => new TableCellNodeView(node),
-  table_header_cell: (node: PMNode) => new TableCellNodeView(node),
-};

package/src/ui-tailwind/index.ts

@@ -1,61 +0,0 @@
-// Workspace shell
-export { TwReviewWorkspace, type TwReviewWorkspaceProps } from "./tw-review-workspace";
-
-// Editor surface
-export { TwEditorSurface, type TwEditorSurfaceProps } from "./editor-surface/tw-editor-surface";
-export { TwParagraphBlock } from "./editor-surface/tw-paragraph-block";
-export { TwOpaqueBlock } from "./editor-surface/tw-opaque-block";
-export { TwSegmentView } from "./editor-surface/tw-segment-view";
-export { TwInlineToken } from "./editor-surface/tw-inline-token";
-export { renderTwCaret } from "./editor-surface/tw-caret";
-
-// Review rail
-export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./review/tw-review-rail";
-export { TwCommentSidebar } from "./review/tw-comment-sidebar";
-export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
-export { TwHealthPanel } from "./review/tw-health-panel";
-
-// Toolbar
-export { TwToolbar, type TwToolbarProps, type ViewMode } from "./toolbar/tw-toolbar";
-export { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
-
-// Status
-export { TwStatusBar } from "./status/tw-status-bar";
-
-// Chrome
-export { TwAlertBanner } from "./chrome/tw-alert-banner";
-export { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
-
-// Session capabilities
-export {
-  deriveCapabilities,
-  type SessionCapabilities,
-} from "../runtime/session-capabilities";
-
-// Headless (re-export for convenience)
-export {
-  createCommentDecorationModel,
-  getCommentHighlightClass,
-  getCommentRangeState,
-  type CommentDecorationModel,
-  type MarkupDisplay,
-} from "../ui/headless/comment-decoration-model";
-
-export {
-  createRevisionDecorationModel,
-  getRevisionHighlightClass,
-  getRevisionRangeState,
-  shouldHideInCleanMode,
-  type RevisionDecorationModel,
-} from "../ui/headless/revision-decoration-model";
-
-export {
-  createEditorKeyboardHandler,
-  type EditorKeyboardCallbacks,
-  type EditorKeyboardContext,
-} from "../ui/headless/use-editor-keyboard";
-
-export {
-  createSelectionSnapshot,
-  selectionTouchesRange,
-} from "../ui/headless/selection-helpers";

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

@@ -1,276 +0,0 @@
-import React, { useRef, useState } from "react";
-import { Check, MessageSquarePlus } from "lucide-react";
-
-import type { CommentSidebarSnapshot, CommentSidebarThreadSnapshot } from "../../api/public-types";
-
-export interface TwCommentSidebarProps {
-  comments: CommentSidebarSnapshot;
-  activeCommentId?: string;
-  currentUserId?: string;
-  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
-  onResolveComment?: (commentId: string) => void;
-  onReopenComment?: (commentId: string) => void;
-  onAddReply?: (commentId: string, body: string) => void;
-  onEditBody?: (commentId: string, body: string) => 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 TwCommentSidebar(props: TwCommentSidebarProps) {
-  const { comments, activeCommentId, currentUserId } = props;
-
-  return (
-    <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
-        {comments.openCommentIds.length} open · {comments.resolvedCommentIds.length} resolved · {comments.detachedCommentIds.length} detached
-      </p>
-      {comments.threads.length > 0 ? (
-        <div className="space-y-1">
-          {comments.threads.map((thread) => {
-            const isActive = activeCommentId === thread.commentId;
-            const leadEntry = thread.entries[0];
-            const isOwnComment = currentUserId != null && leadEntry?.authorId === currentUserId;
-            const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
-
-            return (
-              <div
-                key={thread.commentId}
-                role="button"
-                tabIndex={0}
-                className={`rounded-lg p-2.5 transition-colors cursor-pointer ${focusRingClass} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`}
-                onClick={() => props.onOpenComment?.(thread)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    props.onOpenComment?.(thread);
-                  }
-                }}
-              >
-                <div className="flex items-start justify-between gap-2 mb-1">
-                  <span className="text-sm font-medium text-primary">{thread.createdBy}</span>
-                  <StatusBadge status={thread.status} />
-                </div>
-                <p className="text-xs text-tertiary mb-1">{thread.createdAt}</p>
-                <p className="text-xs font-medium text-comment bg-comment-soft rounded px-1 py-0.5 inline-block mb-1.5">
-                  {thread.excerpt}
-                </p>
-
-                {/* Comment body — inline editable for own comments on open threads */}
-                {leadEntry?.body ? (
-                  canEdit ? (
-                    <InlineEditableBody
-                      commentId={thread.commentId}
-                      body={leadEntry.body}
-                      onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
-                    />
-                  ) : (
-                    <p className="text-sm text-secondary leading-relaxed">{leadEntry.body}</p>
-                  )
-                ) : null}
-
-                {/* Show reply entries */}
-                {thread.entries.slice(1).map((entry) => (
-                  <div key={entry.entryId} className="mt-2 pl-2 border-l border-border">
-                    <p className="text-xs text-tertiary">{entry.authorId} · {entry.createdAt}</p>
-                    <p className="text-sm text-secondary leading-relaxed">{entry.body}</p>
-                  </div>
-                ))}
-
-                {thread.entryCount > thread.entries.length ? (
-                  <p className="text-xs text-tertiary mt-1.5">
-                    +{thread.entryCount - thread.entries.length} more repl{thread.entryCount - thread.entries.length === 1 ? "y" : "ies"}
-                  </p>
-                ) : null}
-
-                {thread.resolvedAt && thread.resolvedBy ? (
-                  <p className="text-xs text-tertiary mt-1">
-                    Resolved by {thread.resolvedBy} at {thread.resolvedAt}
-                  </p>
-                ) : null}
-
-                <div className="flex gap-1.5 mt-2">
-                  {thread.status === "open" ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        props.onResolveComment?.(thread.commentId);
-                      }}
-                    >
-                      <Check className="h-3 w-3" /> Resolve
-                    </button>
-                  ) : thread.status === "resolved" ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-secondary hover:bg-surface transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        props.onReopenComment?.(thread.commentId);
-                      }}
-                    >
-                      Reopen
-                    </button>
-                  ) : (
-                    <span className="text-xs text-tertiary px-2 py-1">Detached</span>
-                  )}
-                </div>
-
-                {/* Reply input — only for open threads */}
-                {thread.status === "open" && props.onAddReply ? (
-                  <ReplyInput commentId={thread.commentId} onAddReply={props.onAddReply} />
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <p className="text-xs text-tertiary py-4">
-          Comment threads will appear here when the runtime loads them.
-        </p>
-      )}
-    </div>
-  );
-}
-
-function InlineEditableBody(props: {
-  commentId: string;
-  body: string;
-  onSave: (newBody: string) => void;
-}) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [draft, setDraft] = useState(props.body);
-
-  if (!isEditing) {
-    return (
-      <p
-        className="text-sm text-secondary leading-relaxed cursor-text rounded px-1 -mx-1 hover:bg-surface transition-colors"
-        onClick={(e) => {
-          e.stopPropagation();
-          setDraft(props.body);
-          setIsEditing(true);
-        }}
-        title="Click to edit"
-      >
-        {props.body}
-      </p>
-    );
-  }
-
-  return (
-    <textarea
-      className="w-full text-sm text-primary leading-relaxed bg-surface rounded-md border border-border px-2 py-1.5 resize-none focus:outline-none focus:ring-1 focus:ring-accent"
-      rows={Math.max(2, props.body.split("\n").length)}
-      value={draft}
-      autoFocus
-      onClick={(e) => e.stopPropagation()}
-      onChange={(e) => setDraft(e.target.value)}
-      onBlur={() => {
-        if (draft.trim() && draft.trim() !== props.body) {
-          props.onSave(draft.trim());
-        }
-        setIsEditing(false);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
-          if (draft.trim() && draft.trim() !== props.body) {
-            props.onSave(draft.trim());
-          }
-          setIsEditing(false);
-        }
-        if (e.key === "Escape") {
-          setDraft(props.body);
-          setIsEditing(false);
-        }
-        e.stopPropagation();
-      }}
-    />
-  );
-}
-
-function ReplyInput(props: { commentId: string; onAddReply: (commentId: string, body: string) => void }) {
-  const [body, setBody] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-
-  if (!isOpen) {
-    return (
-      <button
-        type="button"
-        className="inline-flex items-center gap-1 text-xs text-tertiary hover:text-secondary transition-colors mt-1"
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsOpen(true);
-        }}
-      >
-        <MessageSquarePlus className="h-3 w-3" /> Reply
-      </button>
-    );
-  }
-
-  return (
-    <div className="mt-2" onClick={(e) => e.stopPropagation()}>
-      <textarea
-        className="w-full rounded-md border border-border bg-surface px-2 py-1.5 text-xs text-primary placeholder:text-tertiary resize-none focus:outline-none focus:ring-1 focus:ring-accent"
-        rows={2}
-        placeholder="Write a reply..."
-        value={body}
-        onChange={(e) => setBody(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && !e.shiftKey && body.trim()) {
-            e.preventDefault();
-            props.onAddReply(props.commentId, body.trim());
-            setBody("");
-            setIsOpen(false);
-          }
-          if (e.key === "Escape") {
-            setBody("");
-            setIsOpen(false);
-          }
-          e.stopPropagation();
-        }}
-        autoFocus
-      />
-      <div className="flex gap-1.5 mt-1">
-        <button
-          type="button"
-          disabled={!body.trim()}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-accent hover:bg-accent-soft transition-colors disabled:opacity-40"
-          onClick={() => {
-            if (body.trim()) {
-              props.onAddReply(props.commentId, body.trim());
-              setBody("");
-              setIsOpen(false);
-            }
-          }}
-        >
-          Reply
-        </button>
-        <button
-          type="button"
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-tertiary hover:bg-surface transition-colors"
-          onClick={() => {
-            setBody("");
-            setIsOpen(false);
-          }}
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatusBadge(props: { status: string }) {
-  const styles: Record<string, string> = {
-    open: "text-accent bg-accent-soft",
-    resolved: "text-insert bg-insert-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/review/tw-health-panel.tsx

@@ -1,120 +0,0 @@
-import React from "react";
-import { AlertTriangle, Info, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
-
-import type {
-  CompatibilityFeatureEntry,
-  CompatibilityPanelSnapshot,
-  EditorWarning,
-} from "../../api/public-types";
-
-export interface TwHealthPanelProps {
-  compatibility: CompatibilityPanelSnapshot;
-  warnings: EditorWarning[];
-}
-
-export function TwHealthPanel(props: TwHealthPanelProps) {
-  const { compatibility, warnings } = props;
-  const supportedCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "supported-roundtrip",
-  ).length;
-  const preserveOnlyCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "preserve-only",
-  ).length;
-  const blockedCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "unsupported-fatal",
-  ).length;
-
-  return (
-    <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
-        {supportedCount} supported · {preserveOnlyCount} preserve-only · {blockedCount} blocked
-        {warnings.length > 0 ? ` · ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : ""}
-      </p>
-
-      <div className="space-y-1">
-        {compatibility.featureEntries.map((entry) => (
-          <div key={entry.featureEntryId} className="flex rounded-lg transition-colors hover:bg-surface">
-            {entry.featureClass !== "supported-roundtrip" ? (
-              <div className={`w-0.5 shrink-0 rounded-l-lg ${
-                entry.featureClass === "unsupported-fatal" ? "bg-danger" : "bg-comment"
-              }`} />
-            ) : null}
-            <div className="flex items-start gap-2 p-2.5 flex-1">
-              <HealthIcon featureClass={entry.featureClass} />
-              <div className="flex-1 min-w-0">
-                <div className="flex items-start justify-between gap-2">
-                  <span className="text-sm font-medium text-primary">{entry.message}</span>
-                  <FeatureClassBadge featureClass={entry.featureClass} />
-                </div>
-                <p className="text-xs text-tertiary mt-0.5">{entry.featureKey}</p>
-              </div>
-            </div>
-          </div>
-        ))}
-
-        {warnings.map((warning) => (
-          <div key={warning.warningId} className="flex rounded-lg transition-colors hover:bg-surface">
-            <div className={`w-0.5 shrink-0 rounded-l-lg ${
-              warning.severity === "warning" ? "bg-comment" : "bg-accent"
-            }`} />
-            <div className="flex items-start gap-2 p-2.5 flex-1">
-              {warning.severity === "warning" ? (
-                <AlertTriangle className="h-4 w-4 text-comment shrink-0 mt-0.5" />
-              ) : (
-                <Info className="h-4 w-4 text-accent shrink-0 mt-0.5" />
-              )}
-              <div className="flex-1 min-w-0">
-                <div className="flex items-start justify-between gap-2">
-                  <span className="text-sm font-medium text-primary">{warning.message}</span>
-                  <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${
-                    warning.severity === "warning"
-                      ? "text-comment bg-warning-soft"
-                      : "text-accent bg-accent-soft"
-                  }`}>
-                    {warning.code.replace(/_/g, " ")}
-                  </span>
-                </div>
-                <p className="text-xs text-tertiary mt-0.5">{warning.source}</p>
-              </div>
-            </div>
-          </div>
-        ))}
-
-        {compatibility.featureEntries.length === 0 && warnings.length === 0 ? (
-          <p className="text-xs text-tertiary py-4">
-            No compatibility entries or warnings to display.
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function HealthIcon(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
-  switch (props.featureClass) {
-    case "supported-roundtrip":
-      return <ShieldCheck className="h-4 w-4 text-insert shrink-0 mt-0.5" />;
-    case "preserve-only":
-      return <Shield className="h-4 w-4 text-comment shrink-0 mt-0.5" />;
-    case "unsupported-fatal":
-      return <ShieldAlert className="h-4 w-4 text-danger shrink-0 mt-0.5" />;
-  }
-}
-
-function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
-  const styles: Record<string, string> = {
-    "supported-roundtrip": "text-insert bg-insert-soft",
-    "preserve-only": "text-comment bg-warning-soft",
-    "unsupported-fatal": "text-danger bg-delete-soft",
-  };
-  const labels: Record<string, string> = {
-    "supported-roundtrip": "supported",
-    "preserve-only": "preserve-only",
-    "unsupported-fatal": "blocked",
-  };
-  return (
-    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass]}`}>
-      {labels[props.featureClass]}
-    </span>
-  );
-}

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

@@ -1,120 +0,0 @@
-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>
-  );
-}