@beyondwork/docx-react-component 1.0.53 → 1.0.54

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}
           >

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

@@ -33,8 +33,34 @@ export interface TwStatusBarProps {
    * canvas backend is live vs. the empirical fallback.  Absent = skip.
    */
   measurementFidelity?: PublicMeasurementFidelity;
+  /**
+   * Lane 6b §6b.S4: opt-in diagnostics flag.  When `true`, the status
+   * bar reveals the measurement-fidelity badge on the right zone.
+   * Hosts must pair this with `debugMode` in production — the fidelity
+   * badge is a maintainer affordance, not a user-facing surface.
+   */
+  debugMode?: boolean;
+  /**
+   * Lane 6b §6b.S4: explicit opt-in to render the fidelity badge when
+   * `debugMode` is on.  Defaults to `false` so even a debug harness
+   * keeps the badge hidden unless a human asks for it.
+   */
+  showFidelityBadge?: boolean;
 }
 
+/**
+ * TwStatusBar — bottom chrome strip, 28-px tall (designsystem §6.16).
+ *
+ * Three-zone CSS grid (Lane 6b §6b.S4):
+ *   LEFT   — save state dot + export state dot + comment / change counts
+ *   CENTER — Page N of M indicator
+ *   RIGHT  — measurement fidelity badge (opt-in) + session-active label
+ *
+ * Status dots bind `--color-status-*` tokens (Lane 6a §3 semantic family)
+ * so the review / draft / paused / blocked colour ladder stays consistent
+ * with the workflow card grammar.  The fidelity badge is diagnostic-only:
+ * hidden unless `debugMode && showFidelityBadge` are both `true`.
+ */
 export function TwStatusBar(props: TwStatusBarProps) {
   const saveState = props.isExportBlocked
     ? "Read-only"
@@ -46,58 +72,100 @@ export function TwStatusBar(props: TwStatusBarProps) {
     : props.preserveOnlyCount > 0
       ? "Warnings"
       : "Ready";
+
+  const saveDotColor = props.isExportBlocked
+    ? "bg-[var(--color-status-blocked)]"
+    : props.isDirty
+      ? "bg-[var(--color-status-in-progress)]"
+      : "bg-[var(--color-status-ready)]";
+  const exportDotColor = props.isExportBlocked
+    ? "bg-[var(--color-status-blocked)]"
+    : props.preserveOnlyCount > 0
+      ? "bg-[var(--color-semantic-warning)]"
+      : "bg-[var(--color-status-ready)]";
+
+  const showFidelity =
+    props.measurementFidelity != null &&
+    props.debugMode === true &&
+    props.showFidelityBadge === true;
+
   return (
     <footer
       data-testid="status-bar"
-      className="flex h-7 shrink-0 items-center gap-3 border-t border-border/60 bg-surface/72 px-3 text-[11px] text-tertiary"
+      style={{
+        // Lane 6b §6b.U5 — density opt-in.  Scales the 28 px base by the
+        // root `--space-density-multiplier` (compact 0.85 / standard 1 /
+        // comfortable 1.15).  Hosts toggle via the `useDensity` hook
+        // from Lane 6a.
+        height:
+          "calc(28px * var(--space-density-multiplier, 1))",
+      }}
+      className={[
+        "grid shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-3",
+        "border-t border-[var(--color-border-subtle)]",
+        "bg-[var(--color-bg-chrome)]/72",
+        "px-3 text-[11px] text-[var(--color-text-tertiary)]",
+      ].join(" ")}
     >
-      <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-accent"
-          }`}
-        />
-        {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-warning"
-                : "bg-accent"
-          }`}
-        />
-        Export {exportState.toLowerCase()}
-      </span>
-      <span>
-        {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
-        {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
-      </span>
-      {props.displayPageNumber != null && props.pageCount != null ? (
-        <span data-testid="status-bar-page-count">
-          Page {props.displayPageNumber} of {props.pageCount}
+      {/* LEFT zone — save + export + counts */}
+      <div
+        className="flex items-center gap-3"
+        data-region="left"
+        data-testid="status-bar__region-left"
+      >
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`inline-block h-1.5 w-1.5 rounded-[var(--radius-pill)] ${saveDotColor}`}
+            data-testid="status-bar__save-dot"
+          />
+          {saveState}
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`inline-block h-1.5 w-1.5 rounded-[var(--radius-pill)] ${exportDotColor}`}
+            data-testid="status-bar__export-dot"
+          />
+          Export {exportState.toLowerCase()}
         </span>
-      ) : null}
-      <span className="flex-1" />
-      {props.measurementFidelity ? (
-        <span
-          data-testid="status-bar-measurement-fidelity"
-          data-fidelity={props.measurementFidelity}
-          className="uppercase tracking-[0.12em] text-tertiary/70"
-          title={`Measurement fidelity: ${props.measurementFidelity}`}
-        >
-          {formatFidelityBadge(props.measurementFidelity)}
+        <span>
+          {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
+          {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
+        </span>
+      </div>
+
+      {/* CENTER zone — page indicator */}
+      <div
+        className="flex items-center justify-center"
+        data-region="center"
+        data-testid="status-bar__region-center"
+      >
+        {props.displayPageNumber != null && props.pageCount != null ? (
+          <span data-testid="status-bar-page-count">
+            Page {props.displayPageNumber} of {props.pageCount}
+          </span>
+        ) : null}
+      </div>
+
+      {/* RIGHT zone — fidelity badge (opt-in) + session */}
+      <div
+        className="flex items-center justify-end gap-2"
+        data-region="right"
+        data-testid="status-bar__region-right"
+      >
+        {showFidelity ? (
+          <span
+            data-testid="status-bar-measurement-fidelity"
+            data-fidelity={props.measurementFidelity}
+            className="uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]/70"
+            title={`Measurement fidelity: ${props.measurementFidelity}`}
+          >
+            {formatFidelityBadge(props.measurementFidelity!)}
+          </span>
+        ) : null}
+        <span className="truncate text-[10px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]/80">
+          Session active
         </span>
-      ) : null}
-      <span className="truncate text-[10px] uppercase tracking-[0.12em] text-tertiary/80">
-        Session active
-      </span>
+      </div>
     </footer>
   );
 }