@beyondwork/docx-react-component 1.0.84 → 1.0.86

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

@@ -153,6 +153,7 @@ function CommentThreadCard(props: {
   }, [presentation]);
   const leadEntry = thread.entries[0];
   const isDraftThread = thread.status === "open" && thread.entryCount === 1 && isEmptyCommentBody(leadEntry?.body);
+  const isLinkedRevisionThread = thread.linkedRevisionId != null;
   const isOwnComment = props.currentUserId != null && leadEntry?.authorId === props.currentUserId;
   const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
   const hasNoBody = isEmptyCommentBody(leadEntry?.body);
@@ -205,6 +206,7 @@ function CommentThreadCard(props: {
             {formatCommentDate(thread.createdAt)}
           </span>
           <span className="flex-1" />
+          {isLinkedRevisionThread ? <StatusBadge label="tracked change" tone="revision" /> : null}
           {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
           {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
         </div>
@@ -222,7 +224,9 @@ function CommentThreadCard(props: {
             body={leadEntry?.body ?? ""}
             autoFocus={isActive && hasNoBody}
             onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
-            label={isDraftThread ? "New comment" : undefined}
+            label={isDraftThread
+              ? (isLinkedRevisionThread ? "Tracked change discussion" : "New comment")
+              : undefined}
           />
         ) : presentation ? (
           <CommentMarkdownRenderer
@@ -247,7 +251,7 @@ function CommentThreadCard(props: {
               props.onOpenComment?.(thread);
             }}
           >
-            New comment
+            {isLinkedRevisionThread ? "Tracked change discussion" : "New comment"}
           </p>
         ) : null}
 
@@ -494,11 +498,12 @@ function formatCommentDate(raw: string): string {
   }
 }
 
-function StatusBadge(props: { label: string; tone: "resolved" | "detached" | "draft" }) {
+function StatusBadge(props: { label: string; tone: "resolved" | "detached" | "draft" | "revision" }) {
   const styles: Record<string, string> = {
     resolved: "text-insert bg-insert-soft",
     detached: "text-comment bg-warning-soft",
     draft: "text-secondary bg-subtle",
+    revision: "text-accent bg-accent-soft",
   };
   return (
     <span

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

@@ -111,6 +111,7 @@ export interface TwReviewRailProps {
   onAddReply?: (commentId: string, body: string) => void;
   onEditBody?: (commentId: string, body: string) => void;
   onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onReplyToRevision?: (revision: TrackedChangeEntrySnapshot) => void;
   onAcceptRevision?: (revisionId: string) => void;
   onRejectRevision?: (revisionId: string) => void;
   onAcceptAllChanges?: () => void;
@@ -285,6 +286,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
                 markupDisplay={props.markupDisplay}
                 activeRevisionId={props.activeRevisionId}
                 onOpenRevision={props.onOpenRevision}
+                onReplyToRevision={props.onReplyToRevision}
                 onAcceptRevision={props.onAcceptRevision}
                 onRejectRevision={props.onRejectRevision}
                 onAcceptAllChanges={props.onAcceptAllChanges}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Check, X } from "lucide-react";
+import { Check, MessageSquare, X } from "lucide-react";
 
 import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
 import { selectVisibleRevisions } from "../../ui/shared/revision-filters";
@@ -10,6 +10,7 @@ export interface TwRevisionSidebarProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onReplyToRevision?: (revision: TrackedChangeEntrySnapshot) => void;
   onAcceptRevision?: (revisionId: string) => void;
   onRejectRevision?: (revisionId: string) => void;
   onAcceptAllChanges?: () => void;
@@ -120,46 +121,61 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
               const isActive = activeRevisionId === rev.revisionId;
 
               return (
-                <button
+                <div
                   key={rev.revisionId}
-                  type="button"
-                  className={`w-full text-left flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
-                  onClick={() => props.onOpenRevision?.(rev)}
+                  className={`w-full text-left flex rounded-md bg-surface/90 transition-colors ring-1 ring-border ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
                 >
                   <div className={`w-0.5 shrink-0 rounded-l-md ${
                     rev.kind === "insertion" ? "bg-insert"
                     : rev.kind === "deletion" ? "bg-danger"
                     : "bg-tertiary"
                   }`} />
-                  <div className="p-2 flex-1 min-w-0">
-                    <div className="mb-0.5 flex items-start justify-between gap-2">
-                      <span className="text-[11px] font-medium text-primary">{rev.anchorLabel}</span>
-                      <RevisionBadge status={rev.status} actionability={rev.actionability} />
-                    </div>
-                    <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
-                    {rev.excerpt ? (
-                      <p className={`text-[11px] ${
-                        rev.kind === "insertion" ? "text-insert"
-                        : rev.kind === "deletion" ? "text-danger line-through"
-                        : "text-secondary"
-                      }`}>
-                        {rev.excerpt}
-                      </p>
-                    ) : (
-                      <p className="text-[11px] text-secondary">{rev.label}</p>
-                    )}
-                    {rev.detail ? (
-                      <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
-                    ) : null}
-                    <div className="mt-2 flex gap-1.5">
+                  <div className="flex-1 min-w-0">
+                    <button
+                      type="button"
+                      className={`w-full p-2 text-left ${focusRingClass}`}
+                      onClick={() => props.onOpenRevision?.(rev)}
+                    >
+                      <div className="mb-0.5 flex items-start justify-between gap-2">
+                        <span className="text-[11px] font-medium text-primary">{rev.anchorLabel}</span>
+                        <RevisionBadge status={rev.status} actionability={rev.actionability} />
+                      </div>
+                      <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
+                      {rev.excerpt ? (
+                        <p className={`text-[11px] ${
+                          rev.kind === "insertion" ? "text-insert"
+                          : rev.kind === "deletion" ? "text-danger line-through"
+                          : "text-secondary"
+                        }`}>
+                          {rev.excerpt}
+                        </p>
+                      ) : (
+                        <p className="text-[11px] text-secondary">{rev.label}</p>
+                      )}
+                      {rev.detail ? (
+                        <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
+                      ) : null}
+                    </button>
+                    <div className="flex flex-wrap gap-1.5 px-2 pb-2">
+                      {props.onReplyToRevision ? (
+                        <button
+                          type="button"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-secondary hover:bg-canvas transition-colors"
+                          onClick={() => props.onReplyToRevision?.(rev)}
+                        >
+                          <MessageSquare className="h-3 w-3" />
+                          {rev.replyCount && rev.replyCount > 0
+                            ? `Reply ${rev.replyCount}`
+                            : "Reply"}
+                        </button>
+                      ) : null}
                       {rev.actionability === "actionable" ? (
                         <>
                           <button
                             type="button"
                             disabled={!rev.canAccept || rev.status === "accepted"}
                             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                            onClick={() => {
                               props.onAcceptRevision?.(rev.revisionId);
                             }}
                           >
@@ -169,8 +185,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                             type="button"
                             disabled={!rev.canReject || rev.status === "rejected"}
                             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-danger-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                            onClick={() => {
                               props.onRejectRevision?.(rev.revisionId);
                             }}
                           >
@@ -182,7 +197,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       )}
                     </div>
                   </div>
-                </button>
+                </div>
               );
             })}
           </div>

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -36,6 +36,24 @@ const POSTURE_META: Record<
   "blocked-import": { chip: "BLOCKED REGION", kind: "danger" },
 };
 
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+type ScopeFilterKey = "edit" | "suggest" | "comment" | "view" | "candidate" | "blocked";
+
+const SCOPE_FILTERS: ReadonlyArray<{
+  key: ScopeFilterKey;
+  label: string;
+  postures: readonly ScopeRailPosture[];
+}> = [
+  { key: "edit", label: "Edit", postures: ["edit"] },
+  { key: "suggest", label: "Suggest", postures: ["suggest"] },
+  { key: "comment", label: "Comment", postures: ["comment"] },
+  { key: "view", label: "Review", postures: ["view"] },
+  { key: "candidate", label: "Scheduled", postures: ["candidate"] },
+  { key: "blocked", label: "Blocked", postures: ["preserve-only", "blocked-import"] },
+];
+
 export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   segments,
   activeScopeId,
@@ -43,13 +61,38 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   onActiveScopeChange,
 }) => {
   // Dedupe by scopeId so a scope spanning multiple pages shows once.
-  const byScopeId = new Map<string, ScopeRailSegment>();
-  for (const segment of segments) {
-    if (!byScopeId.has(segment.scopeId)) {
-      byScopeId.set(segment.scopeId, segment);
+  const uniqueSegments = React.useMemo(() => {
+    const byScopeId = new Map<string, ScopeRailSegment>();
+    for (const segment of segments) {
+      if (!byScopeId.has(segment.scopeId)) {
+        byScopeId.set(segment.scopeId, segment);
+      }
     }
-  }
-  const uniqueSegments = Array.from(byScopeId.values());
+    return Array.from(byScopeId.values()).sort(compareWorkflowSegments(activeScopeId ?? null));
+  }, [activeScopeId, segments]);
+  const [query, setQuery] = React.useState("");
+  const [enabledFilters, setEnabledFilters] = React.useState<ReadonlySet<ScopeFilterKey>>(
+    () => new Set(SCOPE_FILTERS.map((filter) => filter.key)),
+  );
+  const availableFilters = React.useMemo(() => {
+    const presentPostures = new Set(uniqueSegments.map((segment) => segment.posture));
+    return SCOPE_FILTERS.filter((filter) =>
+      filter.postures.some((posture) => presentPostures.has(posture)),
+    );
+  }, [uniqueSegments]);
+  const visibleSegments = React.useMemo(() => {
+    const normalizedQuery = normalizeScopeQuery(query);
+    return uniqueSegments.filter((segment) => {
+      const filterKey = filterKeyForPosture(segment.posture);
+      if (!enabledFilters.has(filterKey)) {
+        return false;
+      }
+      if (!normalizedQuery) {
+        return true;
+      }
+      return scopeSearchText(segment).includes(normalizedQuery);
+    });
+  }, [enabledFilters, query, uniqueSegments]);
 
   if (uniqueSegments.length === 0) {
     return (
@@ -73,9 +116,79 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
         <div className="text-[10px] font-semibold uppercase tracking-[0.14em] text-accent">
           Document Intelligence
         </div>
-        <div className="text-[15px] font-semibold text-primary">Workflow Scopes</div>
+        <div className="flex items-baseline justify-between gap-3">
+          <div className="text-[15px] font-semibold text-primary">Workflow Scopes</div>
+          <div
+            className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary"
+            data-testid="workflow-scope-count"
+          >
+            {visibleSegments.length}/{uniqueSegments.length} shown
+          </div>
+        </div>
       </div>
-      {uniqueSegments.map((segment) => {
+
+      <div
+        className="wre-workflow-tab-controls rounded-lg border border-border bg-surface/55 p-2"
+        data-testid="workflow-scope-controls"
+      >
+        <input
+          aria-label="Search workflow scopes"
+          className={`h-8 w-full rounded-md border border-border bg-canvas px-2 text-[12px] text-primary placeholder:text-tertiary ${focusRingClass}`}
+          placeholder="Search scope, page, section..."
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+        />
+        {availableFilters.length > 1 ? (
+          <div
+            aria-label="Workflow scope layers"
+            className="mt-2 flex flex-wrap gap-1"
+            role="group"
+          >
+            {availableFilters.map((filter) => {
+              const isEnabled = enabledFilters.has(filter.key);
+              return (
+                <button
+                  key={filter.key}
+                  type="button"
+                  aria-pressed={isEnabled}
+                  className={[
+                    "rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.1em] transition-colors",
+                    isEnabled
+                      ? "border-accent/50 bg-accent/10 text-accent"
+                      : "border-border bg-canvas text-tertiary hover:text-secondary",
+                  ].join(" ")}
+                  data-testid={`workflow-scope-filter-${filter.key}`}
+                  onClick={() => {
+                    setEnabledFilters((current) => {
+                      const next = new Set(current);
+                      if (next.has(filter.key)) {
+                        next.delete(filter.key);
+                      } else {
+                        next.add(filter.key);
+                      }
+                      return next;
+                    });
+                  }}
+                >
+                  {filter.label}
+                </button>
+              );
+            })}
+          </div>
+        ) : null}
+      </div>
+
+      {visibleSegments.length === 0 ? (
+        <div
+          className="rounded-md border border-dashed border-border bg-canvas/50 p-3 text-[11px] text-tertiary"
+          data-testid="workflow-scope-filter-empty"
+        >
+          No workflow scopes match the current search or layer filters.
+        </div>
+      ) : null}
+
+      {visibleSegments.map((segment) => {
         const meta = POSTURE_META[segment.posture];
         const isActive = activeScopeId === segment.scopeId || segment.isActiveWorkItem;
         return (
@@ -115,4 +228,42 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   );
 };
 
+function compareWorkflowSegments(activeScopeId: string | null) {
+  return (left: ScopeRailSegment, right: ScopeRailSegment): number => {
+    const leftActive = left.scopeId === activeScopeId || left.isActiveWorkItem;
+    const rightActive = right.scopeId === activeScopeId || right.isActiveWorkItem;
+    if (leftActive !== rightActive) {
+      return leftActive ? -1 : 1;
+    }
+    if (left.pageIndex !== right.pageIndex) {
+      return left.pageIndex - right.pageIndex;
+    }
+    if (left.sectionIndex !== right.sectionIndex) {
+      return left.sectionIndex - right.sectionIndex;
+    }
+    return (left.label || left.scopeId).localeCompare(right.label || right.scopeId);
+  };
+}
+
+function filterKeyForPosture(posture: ScopeRailPosture): ScopeFilterKey {
+  if (posture === "preserve-only" || posture === "blocked-import") {
+    return "blocked";
+  }
+  return posture;
+}
+
+function normalizeScopeQuery(value: string): string {
+  return value.trim().toLocaleLowerCase();
+}
+
+function scopeSearchText(segment: ScopeRailSegment): string {
+  return normalizeScopeQuery([
+    segment.label,
+    segment.scopeId,
+    segment.posture,
+    `page ${segment.pageIndex + 1}`,
+    `section ${segment.sectionIndex + 1}`,
+  ].filter(Boolean).join(" "));
+}
+
 export default TwWorkflowTab;

package/src/ui-tailwind/review-workspace/types.ts

@@ -145,6 +145,9 @@ export interface TwReviewWorkspaceProps {
   activeRailTab: ReviewRailTab;
   activeCommentId?: string;
   activeRevisionId?: string;
+  /** Authoring mode toggle state: whether new edits are recorded as tracked changes. */
+  trackedChangesAuthoringEnabled?: boolean;
+  /** Visual markup state: whether tracked-change decorations are currently shown. */
   showTrackedChanges: boolean;
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   interactionGuardSnapshot?: InteractionGuardSnapshot;
@@ -192,6 +195,7 @@ export interface TwReviewWorkspaceProps {
   onZoomChange?: (level: ZoomLevel) => void;
   onActiveRailTabChange?: (value: ReviewRailTab) => void;
   onShowTrackedChangesChange?: (show: boolean) => void;
+  onReviewMarkupModeChange?: (mode: MarkupDisplay) => void;
   onUndo?: () => void;
   onRedo?: () => void;
   onSetParagraphStyle?: (styleId: string) => void;
@@ -285,6 +289,7 @@ export interface TwReviewWorkspaceProps {
   onAddReply?: (commentId: string, body: string) => void;
   onEditBody?: (commentId: string, body: string) => void;
   onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onReplyToRevision?: (revision: TrackedChangeEntrySnapshot) => void;
   onAcceptRevision?: (revisionId: string) => void;
   onRejectRevision?: (revisionId: string) => void;
   onAcceptAllChanges?: () => void;
@@ -293,7 +298,7 @@ export interface TwReviewWorkspaceProps {
   /**
    * @deprecated P8.11 — the workspace no longer renders a workspace-level
    * header band with an "Edit header" button; per-page header bands route
-   * clicks via `onOpenStory` / `runtime.openStory` directly.  The prop
+   * double-clicks via `onOpenStory` / `runtime.openStory` directly. The prop
    * remains optional for one release so existing hosts continue to
    * compile; supplying it emits a `console.warn` on mount.
    */
@@ -313,7 +318,7 @@ export interface TwReviewWorkspaceProps {
   onOpenFooterStoryForPage?: (pageIndex: number) => void;
   /**
    * P8.11 — fired when a per-page chrome band (header / footer) is
-   * clicked to promote it into the active editing surface.  Wire to
+   * double-clicked to promote it into the active editing surface. Wire to
    * `runtime.openStory(target)`; the chrome layer's portal mechanism
    * then reparents the PM surface into the matching band's active slot.
    */

package/src/ui-tailwind/review-workspace/use-page-markers.ts

@@ -212,6 +212,16 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
   const [pageMarkers, setPageMarkers] = useState<readonly HTMLElement[]>([]);
 
   useEffect(() => {
+    if (geometryFacet && layoutFacet) {
+      // Warm path: render-kernel geometry gives us page frames and the layout
+      // facet gives us page offsets, so DOM page-break markers are only legacy
+      // fallback. Skipping the marker scan avoids querySelectorAll +
+      // IntersectionObserver churn when PM swaps virtualized blocks at page
+      // dividers during scroll.
+      setPageMarkers((prev) => (prev.length === 0 ? prev : []));
+      return undefined;
+    }
+
     const root = pageStackScrollRoot;
     if (!root) {
       setPageMarkers((prev) => (prev.length === 0 ? prev : []));
@@ -283,7 +293,7 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
     // every requestViewportRefresh(), which would add two extra render passes per
     // scroll event.  The page-0 fallback uses -1 when page1First is unknown,
     // which is correct (no page-0 blocks → synthetic marker contributes nothing).
-  }, [pageStackScrollRoot, snapshot.revisionToken]);
+  }, [geometryFacet, layoutFacet, pageStackScrollRoot, snapshot.revisionToken]);
 
   const selectionBlockIndex = useMemo(() => {
     const sel = snapshot.selection;

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

@@ -25,8 +25,6 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleOff,
-  Eye,
-  EyeOff,
   FileDiff,
   Flag,
   Hand,
@@ -226,32 +224,33 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
           </Tooltip.Portal>
         </Tooltip.Root>
       );
-    case "tracked-changes-toggle":
+    case "tracked-changes-toggle": {
+      const trackChangesLabel = (props.showTrackedChanges ?? false)
+        ? "Stop tracking changes"
+        : "Start tracking changes";
       return (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Toggle.Root
               pressed={props.showTrackedChanges ?? false}
               onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
+              aria-label={trackChangesLabel}
               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" />
-              )}
+              <FileDiff 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"}
+              {trackChangesLabel}
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
       );
+    }
     case "review-sidebar-tracked-changes":
       return (
         <Tooltip.Root>

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

@@ -15,8 +15,7 @@ import {
   Bold,
   ChevronDown,
   Download,
-  Eye,
-  EyeOff,
+  FileDiff,
   FileText,
   Highlighter,
   ImagePlus,
@@ -89,7 +88,7 @@ export interface TwToolbarProps {
   formattingState?: FormattingStateSnapshot;
   activeListContext?: ActiveListContext | null;
   styleCatalog?: StyleCatalogSnapshot;
-  /** Display toggle for tracked change decorations (not a runtime mutation toggle). */
+  /** Authoring toggle for recording new edits as tracked changes. */
   showTrackedChanges: boolean;
   /** Active story target — shows a breadcrumb when editing a secondary story. */
   activeStory?: EditorStoryTarget;
@@ -378,7 +377,7 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Bold"
               shortcut="⌘B"
               active={props.formattingState?.bold ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleBold}
               onClick={props.onToggleBold}
             />
             <TwToolbarIconButton
@@ -386,7 +385,7 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Italic"
               shortcut="⌘I"
               active={props.formattingState?.italic ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleItalic}
               onClick={props.onToggleItalic}
             />
             <TwToolbarIconButton
@@ -394,12 +393,17 @@ export function TwToolbar(props: TwToolbarProps) {
               label="Underline"
               shortcut="⌘U"
               active={props.formattingState?.underline ?? false}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleUnderline}
               onClick={props.onToggleUnderline}
             />
             {showAdvancedFormatting ? (
               <ToolbarFormattingOverflow
-                disabled={!canEdit}
+                disabled={
+                  !canEdit ||
+                  (!props.onToggleStrikethrough &&
+                    !props.onToggleSuperscript &&
+                    !props.onToggleSubscript)
+                }
                 formattingState={props.formattingState}
                 onToggleStrikethrough={props.onToggleStrikethrough}
                 onToggleSuperscript={props.onToggleSuperscript}
@@ -452,14 +456,14 @@ export function TwToolbar(props: TwToolbarProps) {
               icon={List}
               label="Bulleted list"
               active={Boolean(props.activeListContext && !props.activeListContext.isOrdered)}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleBulletedList}
               onClick={props.onToggleBulletedList}
             />
             <TwToolbarIconButton
               icon={Rows3}
               label="Numbered list"
               active={Boolean(props.activeListContext?.isOrdered)}
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onToggleNumberedList}
               onClick={props.onToggleNumberedList}
             />
           </>
@@ -469,13 +473,13 @@ export function TwToolbar(props: TwToolbarProps) {
             <TwToolbarIconButton
               icon={Outdent}
               label="Outdent"
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onOutdent}
               onClick={props.onOutdent}
             />
             <TwToolbarIconButton
               icon={Indent}
               label="Indent"
-              disabled={!canEdit}
+              disabled={!canEdit || !props.onIndent}
               onClick={props.onIndent}
             />
           </>
@@ -669,11 +673,12 @@ export function TwToolbar(props: TwToolbarProps) {
                 <Toggle.Root
                   pressed={props.showTrackedChanges}
                   onPressedChange={props.onShowTrackedChangesChange}
+                  aria-label={props.showTrackedChanges ? "Stop tracking changes" : "Start tracking changes"}
                   disabled={caps ? !caps.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}`}
                 >
-                  {props.showTrackedChanges ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+                  <FileDiff className="h-3.5 w-3.5" />
                 </Toggle.Root>
               </Tooltip.Trigger>
               <Tooltip.Portal>
@@ -681,7 +686,7 @@ export function TwToolbar(props: TwToolbarProps) {
                   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"}
+                  {props.showTrackedChanges ? "Stop tracking changes" : "Start tracking changes"}
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>
@@ -1419,7 +1424,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.strikethrough ?? false}
               ariaLabel="Strikethrough"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleStrikethrough}
               icon={<Strikethrough className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleStrikethrough?.();
@@ -1429,7 +1434,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.superscript ?? false}
               ariaLabel="Superscript"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleSuperscript}
               icon={<Superscript className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleSuperscript?.();
@@ -1439,7 +1444,7 @@ function ToolbarFormattingOverflow(props: {
             <ToolbarPopoverActionButton
               active={props.formattingState?.subscript ?? false}
               ariaLabel="Subscript"
-              disabled={props.disabled}
+              disabled={props.disabled || !props.onToggleSubscript}
               icon={<Subscript className="h-3.5 w-3.5" />}
               onClick={() => {
                 props.onToggleSubscript?.();