@beyondwork/docx-react-component 1.0.53 → 1.0.55

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

@@ -99,7 +99,9 @@ export interface TwReviewRailProps {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
-const PILL_TRIGGER_CLASS = `flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`;
+const PILL_TRIGGER_CLASS = `flex-1 rounded-[var(--radius-md)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)] transition-colors data-[state=active]:bg-[var(--color-bg-selected)] data-[state=active]:text-[var(--color-text-primary)] outline-none ${focusRingClass}`;
+
+const UNDERLINE_TRIGGER_CLASS = `flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-[var(--color-text-tertiary)] border-b-2 border-transparent transition-colors data-[state=active]:border-[var(--color-accent-primary)] data-[state=active]:text-[var(--color-text-primary)] outline-none ${focusRingClass}`;
 
 export function TwReviewRail(props: TwReviewRailProps) {
   const variant = props.variant ?? "docked";
@@ -110,18 +112,19 @@ export function TwReviewRail(props: TwReviewRailProps) {
   const workflowSegments = props.scopeRailSegments ?? [];
   const workflowCount =
     props.workflowCount ?? (props.workflowTab ? undefined : workflowSegments.length);
-  const widthClass = editorial ? "w-[360px]" : "w-[336px]";
+  const widthClass = editorial ? "w-[360px]" : "w-[320px]";
   const drawerWidthClass = editorial
     ? "w-[min(360px,calc(100vw-1rem))]"
     : "w-[min(336px,calc(100vw-1rem))]";
 
   return (
     <aside
+      role="complementary"
       aria-label="Review rail"
       data-wre-drawer={variant === "drawer" ? "true" : "false"}
       data-editorial-header={editorial ? "true" : "false"}
       className={[
-        "flex flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]",
+        "flex flex-col border-l border-[var(--color-border-subtle)]/60 bg-[var(--color-bg-sidebar)]",
         variant === "drawer"
           ? `h-full ${drawerWidthClass} max-w-full shrink-0 shadow-[var(--shadow-float)]`
           : `${widthClass} shrink-0`,
@@ -133,11 +136,19 @@ export function TwReviewRail(props: TwReviewRailProps) {
         className="flex flex-1 flex-col min-h-0"
       >
         {editorial ? (
-          <header className="shrink-0 px-4 pt-[18px] pb-3">
-            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-tertiary">
+          <header
+            className="shrink-0 px-4 pt-[18px] pb-3"
+            style={{
+              paddingLeft: "calc(16px * var(--space-density-multiplier))",
+              paddingRight: "calc(16px * var(--space-density-multiplier))",
+              paddingTop: "calc(18px * var(--space-density-multiplier))",
+              paddingBottom: "calc(12px * var(--space-density-multiplier))",
+            }}
+          >
+            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]">
               {intelligenceEyebrow}
             </p>
-            <p className="mt-1 text-[16px] font-semibold text-primary">
+            <p className="mt-1 text-[16px] font-semibold text-[var(--color-text-primary)]">
               {headerTitle}
             </p>
           </header>
@@ -149,67 +160,50 @@ export function TwReviewRail(props: TwReviewRailProps) {
               ? "flex shrink-0 items-center gap-2 border-b border-border/60 px-2"
               : "flex shrink-0 border-b border-border/60 px-3 py-2"
           }
+          style={
+            editorial
+              ? {
+                  paddingLeft: "calc(8px * var(--space-density-multiplier))",
+                  paddingRight: "calc(8px * var(--space-density-multiplier))",
+                }
+              : {
+                  paddingLeft: "calc(12px * var(--space-density-multiplier))",
+                  paddingRight: "calc(12px * var(--space-density-multiplier))",
+                  paddingTop: "calc(8px * var(--space-density-multiplier))",
+                  paddingBottom: "calc(8px * var(--space-density-multiplier))",
+                }
+          }
           aria-label="Review rail sections"
         >
           <Tabs.Trigger
             value="workflow"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Workflow" : "Workflow "}
             {workflowCount !== undefined && workflowCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {workflowCount}
               </span>
             ) : null}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="comments"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Comments" : "Comments "}
             {props.comments.totalCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {props.comments.totalCount}
               </span>
             ) : null}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="changes"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Changes" : "Changes "}
             {props.trackedChanges.totalCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {props.trackedChanges.totalCount}
               </span>
             ) : null}

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

@@ -16,128 +16,216 @@ export interface TwRevisionSidebarProps {
   onRejectAllChanges?: () => void;
 }
 
+type TypeFilter = "all" | "insertion" | "deletion" | "formatting";
+
+function labelFor(type: TypeFilter): string {
+  switch (type) {
+    case "all": return "All";
+    case "insertion": return "Insertions";
+    case "deletion": return "Deletions";
+    case "formatting": return "Formatting";
+  }
+}
+
 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;
+
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const [authorFilter, setAuthorFilter] = React.useState<string | null>(null);
+
+  // Derive distinct authors from all visible revisions
+  const authors = React.useMemo(() => {
+    const seen = new Set<string>();
+    for (const r of visibleRevisions) {
+      if (r.authorId) seen.add(r.authorId);
+    }
+    return Array.from(seen).sort();
+  }, [visibleRevisions]);
+
+  // Filtered list based on type + author chips
+  const filteredRevisions = React.useMemo(() => {
+    return visibleRevisions.filter((r) => {
+      if (typeFilter !== "all") {
+        // Map filter chip value to revision kinds
+        if (typeFilter === "insertion" && r.kind !== "insertion") return false;
+        if (typeFilter === "deletion" && r.kind !== "deletion") return false;
+        if (typeFilter === "formatting" && r.kind !== "formatting") return false;
+      }
+      if (authorFilter !== null && r.authorId !== authorFilter) return false;
+      return true;
+    });
+  }, [visibleRevisions, typeFilter, authorFilter]);
+
+  const handleAcceptAll = React.useCallback(() => {
+    if (props.onAcceptAllChanges && typeFilter === "all" && authorFilter === null) {
+      // Use dedicated bulk handler when no filter is active
+      props.onAcceptAllChanges();
+    } else {
+      filteredRevisions.forEach((r) => props.onAcceptRevision?.(r.revisionId));
+    }
+  }, [filteredRevisions, typeFilter, authorFilter, props.onAcceptAllChanges, props.onAcceptRevision]);
+
+  const handleRejectAll = React.useCallback(() => {
+    if (props.onRejectAllChanges && typeFilter === "all" && authorFilter === null) {
+      // Use dedicated bulk handler when no filter is active
+      props.onRejectAllChanges();
+    } else {
+      filteredRevisions.forEach((r) => props.onRejectRevision?.(r.revisionId));
+    }
+  }, [filteredRevisions, typeFilter, authorFilter, props.onRejectAllChanges, props.onRejectRevision]);
 
   return (
-    <div className="outline-none">
-      <p className="mb-3 text-[11px] text-tertiary">
+    <div className="flex flex-col outline-none">
+      {/* Stats header */}
+      <p className="px-3 pt-3 pb-1 text-[11px] text-[var(--color-text-tertiary)]">
         {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
       </p>
 
-      {/* Bulk actions */}
-      <div className="mb-3 flex gap-1.5">
+      {/* Filter chip row */}
+      <div className="flex flex-wrap items-center gap-1 px-3 py-2 border-b border-[var(--color-border-subtle)]/60">
+        {(["all", "insertion", "deletion", "formatting"] as const).map((type) => (
+          <button
+            key={type}
+            type="button"
+            aria-pressed={typeFilter === type}
+            onClick={() => setTypeFilter(type)}
+            className={`inline-flex h-6 items-center rounded-[var(--radius-sm)] px-2 text-[11px] font-medium transition-colors
+              aria-pressed:bg-[var(--color-accent-soft)] aria-pressed:text-[var(--color-accent-primary)] aria-pressed:ring-1 aria-pressed:ring-[var(--color-accent-primary)]/20
+              text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]`}
+          >
+            {labelFor(type)}
+          </button>
+        ))}
+        {authors.length > 1 && (
+          <select
+            value={authorFilter ?? ""}
+            onChange={(e) => setAuthorFilter(e.target.value || null)}
+            className="h-6 rounded-[var(--radius-sm)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2 text-[11px] text-[var(--color-text-primary)]"
+          >
+            <option value="">All authors</option>
+            {authors.map((a) => (<option key={a} value={a}>{a}</option>))}
+          </select>
+        )}
+      </div>
+
+      {/* Revision list — scrollable */}
+      <div className="flex-1 overflow-y-auto px-3 py-2">
+        {filteredRevisions.length > 0 ? (
+          <div className="space-y-2">
+            {filteredRevisions.map((rev) => {
+              const isActive = activeRevisionId === rev.revisionId;
+
+              return (
+                <div
+                  key={rev.revisionId}
+                  role="button"
+                  tabIndex={0}
+                  className={`flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border/40 ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "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-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">
+                      {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();
+                              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-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();
+                              props.onRejectRevision?.(rev.revisionId);
+                            }}
+                          >
+                            <X className="h-3 w-3" /> Reject
+                          </button>
+                        </>
+                      ) : (
+                        <span className="px-1.5 py-0.5 text-[10px] text-tertiary">Preserve-only</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border/40">
+            {trackedChanges.totalCount > 0
+              ? (visibleRevisions.length > 0
+                  ? "No revisions match the current filter."
+                  : "Switch to Full markup to see all tracked changes.")
+              : "Tracked change cards will appear here when present."}
+          </p>
+        )}
+      </div>
+
+      {/* Sticky footer — bulk actions */}
+      <div className="sticky bottom-0 border-t border-[var(--color-border-subtle)]/60 bg-[var(--color-bg-sidebar)] px-3 py-2 flex items-center gap-2">
         <button
           type="button"
-          disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          onClick={props.onAcceptAllChanges}
+          onClick={handleAcceptAll}
+          disabled={filteredRevisions.length === 0}
+          className="inline-flex h-7 items-center rounded-[var(--radius-sm)] bg-[var(--color-accent-primary)] px-3 text-[11px] font-medium text-[var(--color-text-on-accent)] hover:bg-[var(--color-accent-primary-hover)] disabled:opacity-40 disabled:cursor-not-allowed"
         >
-          Accept all ({actionablePendingCount})
+          Accept all
         </button>
         <button
           type="button"
-          disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface-hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          onClick={props.onRejectAllChanges}
+          onClick={handleRejectAll}
+          disabled={filteredRevisions.length === 0}
+          className="inline-flex h-7 items-center rounded-[var(--radius-sm)] border border-[var(--color-semantic-error)]/35 px-3 text-[11px] font-medium text-[var(--color-semantic-error)] hover:bg-[var(--color-semantic-error-soft)] disabled:opacity-40 disabled:cursor-not-allowed"
         >
           Reject all
         </button>
+        <span className="ml-auto text-[11px] text-[var(--color-text-tertiary)]">
+          {filteredRevisions.length} of {visibleRevisions.length}
+        </span>
       </div>
-
-      {visibleRevisions.length > 0 ? (
-        <div className="space-y-2">
-          {visibleRevisions.map((rev) => {
-            const isActive = activeRevisionId === rev.revisionId;
-
-            return (
-              <div
-                key={rev.revisionId}
-                role="button"
-                tabIndex={0}
-                className={`flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border/40 ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "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-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">
-                    {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();
-                            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-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();
-                            props.onRejectRevision?.(rev.revisionId);
-                          }}
-                        >
-                          <X className="h-3 w-3" /> Reject
-                        </button>
-                      </>
-                    ) : (
-                      <span className="px-1.5 py-0.5 text-[10px] text-tertiary">Preserve-only</span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border/40">
-          {trackedChanges.totalCount > 0
-            ? "Switch to Full markup to see all tracked changes."
-            : "Tracked change cards will appear here when present."}
-        </p>
-      )}
     </div>
   );
 }

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

@@ -15,6 +15,12 @@ export interface TwWorkflowTabProps {
   segments: readonly ScopeRailSegment[];
   activeScopeId?: string | null;
   onOpenScope?: (segment: ScopeRailSegment) => void;
+  /**
+   * U6 — bidirectional rail↔scope focus sync.  Called when the user
+   * clicks a workflow card so the scope card layer can activate the
+   * matching overlay card.  If omitted, focus sync is not wired.
+   */
+  onActiveScopeChange?: (scopeId: string) => void;
 }
 
 const POSTURE_META: Record<
@@ -34,6 +40,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   segments,
   activeScopeId,
   onOpenScope,
+  onActiveScopeChange,
 }) => {
   // Dedupe by scopeId so a scope spanning multiple pages shows once.
   const byScopeId = new Map<string, ScopeRailSegment>();
@@ -78,7 +85,10 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
             className={`wre-workflow-card flex flex-col gap-1 rounded-md border border-border/50 bg-canvas p-3 text-left transition-shadow hover:shadow-md ${
               isActive ? "ring-1 ring-accent/60" : ""
             }`}
-            onClick={onOpenScope ? () => onOpenScope(segment) : undefined}
+            onClick={() => {
+              onOpenScope?.(segment);
+              onActiveScopeChange?.(segment.scopeId);
+            }}
             data-scope-id={segment.scopeId}
             data-posture={segment.posture}
           >