@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { Check, X } from "lucide-react";
+
+import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
+import { selectVisibleRevisions } from "../../ui/shared/revision-filters";
+import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
+
+export interface TwRevisionSidebarProps {
+  trackedChanges: TrackedChangesSnapshot;
+  markupDisplay: MarkupDisplay;
+  activeRevisionId?: string;
+  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onAcceptRevision?: (revisionId: string) => void;
+  onRejectRevision?: (revisionId: string) => void;
+  onAcceptAllChanges?: () => void;
+  onRejectAllChanges?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
+  const { trackedChanges, markupDisplay, activeRevisionId } = props;
+  const visibleRevisions = selectVisibleRevisions(trackedChanges.revisions, markupDisplay);
+  const actionablePendingCount = trackedChanges.revisions.filter(
+    (r) => r.status === "active" && r.actionability === "actionable",
+  ).length;
+
+  return (
+    <div className="outline-none">
+      <p className="mb-3 text-[11px] 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">
+        <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}
+        >
+          Accept all ({actionablePendingCount})
+        </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}
+        >
+          Reject all
+        </button>
+      </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>
+  );
+}
+
+function RevisionBadge(props: { status: string; actionability: string }) {
+  if (props.actionability === "preserve-only") {
+    return (
+      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-comment bg-warning-soft">
+        preserve-only
+      </span>
+    );
+  }
+  const styles: Record<string, string> = {
+    active: "text-secondary bg-subtle",
+    accepted: "text-insert bg-insert-soft",
+    rejected: "text-danger bg-delete-soft",
+    detached: "text-comment bg-warning-soft",
+  };
+  return (
+    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>
+      {props.status}
+    </span>
+  );
+}

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

@@ -0,0 +1,65 @@
+import React from "react";
+
+import type { RuntimeContextAnalyticsSnapshot } from "../../api/public-types";
+
+export interface TwStatusBarProps {
+  isDirty: boolean;
+  isExportBlocked: boolean;
+  preserveOnlyCount: number;
+  commentCount: number;
+  changeCount: number;
+  sessionId: string;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+}
+
+export function TwStatusBar(props: TwStatusBarProps) {
+  const saveState = props.isExportBlocked
+    ? "Read-only"
+    : props.isDirty
+      ? "Unsaved"
+      : "Ready";
+  const exportState = props.isExportBlocked
+    ? "Blocked"
+    : props.preserveOnlyCount > 0
+      ? "Warnings"
+      : "Ready";
+  return (
+    <footer
+      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"
+    >
+      <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>
+      <span className="flex-1" />
+      <span className="truncate text-[10px] uppercase tracking-[0.12em] text-tertiary/80">
+        Session active
+      </span>
+    </footer>
+  );
+}

package/{dist → src}/ui-tailwind/theme/editor-theme.css

@@ -17,14 +17,15 @@
 
 @theme {
   /* Backgrounds */
-  --color-surface: #f7f7f5;
-  --color-surface-hover: #ebebea;
-  --color-surface-active: #e3e3e1;
-  --color-subtle: #f0f0ee;
+  --color-surface: #fafbf9;
+  --color-surface-hover: #f1f4f1;
+  --color-surface-active: #e8eeea;
+  --color-subtle: #eff3ef;
   --color-canvas: #ffffff;
-  --color-shell-bg: #f3efe7;
-  --color-card: #faf8f2;
-  --color-editor-frame: #f6f3ee;
+  --color-shell-bg: #f4f8f5;
+  --color-card: #ffffff;
+  --color-editor-frame: #f7faf7;
+  --color-sidebar-tint: rgba(247, 250, 247, 0.92);
 
   /* Text */
   --color-primary: #1f1f1f;
@@ -32,29 +33,31 @@
   --color-tertiary: #616161;
 
   /* Accent */
-  --color-accent: #1660a8;
-  --color-accent-soft: rgba(22, 96, 168, 0.08);
+  --color-accent: #18b394;
+  --color-accent-soft: rgba(24, 179, 148, 0.1);
+  --color-workflow: #7557d8;
+  --color-workflow-soft: rgba(117, 87, 216, 0.12);
 
   /* Review — comments */
-  --color-comment: #7a4f00;
-  --color-comment-soft: rgba(255, 212, 0, 0.14);
-  --color-comment-strong: rgba(255, 212, 0, 0.25);
+  --color-comment: #7557d8;
+  --color-comment-soft: rgba(117, 87, 216, 0.12);
+  --color-comment-strong: rgba(117, 87, 216, 0.18);
 
   /* Review — insertions */
-  --color-insert: #1a7f37;
-  --color-insert-soft: rgba(26, 127, 55, 0.08);
+  --color-insert: #2f6b4f;
+  --color-insert-soft: rgba(47, 107, 79, 0.1);
 
   /* Review — deletions */
-  --color-delete: #cf222e;
-  --color-delete-soft: rgba(207, 34, 46, 0.06);
+  --color-delete: #9b4f49;
+  --color-delete-soft: rgba(155, 79, 73, 0.08);
 
   /* Semantic */
-  --color-warning: #7a4f00;
-  --color-warning-soft: rgba(154, 103, 0, 0.08);
-  --color-danger: #cf222e;
-  --color-danger-soft: rgba(207, 34, 46, 0.08);
-  --color-success: #1a7f37;
-  --color-success-soft: rgba(26, 127, 55, 0.08);
+  --color-warning: #7557d8;
+  --color-warning-soft: rgba(117, 87, 216, 0.12);
+  --color-danger: #9b4f49;
+  --color-danger-soft: rgba(155, 79, 73, 0.1);
+  --color-success: #2f6b4f;
+  --color-success-soft: rgba(47, 107, 79, 0.1);
 
   /* Borders */
   --color-border: rgba(0, 0, 0, 0.06);
@@ -85,28 +88,31 @@
   --color-shell-bg: #171514;
   --color-card: #23211f;
   --color-editor-frame: #1d1b19;
+  --color-sidebar-tint: rgba(29, 27, 25, 0.94);
 
   --color-primary: #e4e4e4;
   --color-secondary: #a0a0a0;
   --color-tertiary: #6e6e6e;
 
-  --color-accent: #4ca6f0;
-  --color-accent-soft: rgba(76, 166, 240, 0.12);
-
-  --color-comment: #d4a020;
-  --color-comment-soft: rgba(212, 160, 32, 0.16);
-  --color-comment-strong: rgba(212, 160, 32, 0.28);
-  --color-insert: #3fb950;
-  --color-insert-soft: rgba(63, 185, 80, 0.12);
-  --color-delete: #f85149;
-  --color-delete-soft: rgba(248, 81, 73, 0.12);
-
-  --color-warning: #d4a020;
-  --color-warning-soft: rgba(212, 160, 32, 0.12);
-  --color-danger: #f85149;
-  --color-danger-soft: rgba(248, 81, 73, 0.12);
-  --color-success: #3fb950;
-  --color-success-soft: rgba(63, 185, 80, 0.12);
+  --color-accent: #5edec1;
+  --color-accent-soft: rgba(94, 222, 193, 0.14);
+  --color-workflow: #c7b6ff;
+  --color-workflow-soft: rgba(199, 182, 255, 0.16);
+
+  --color-comment: #c7b6ff;
+  --color-comment-soft: rgba(199, 182, 255, 0.18);
+  --color-comment-strong: rgba(199, 182, 255, 0.24);
+  --color-insert: #8fd2a9;
+  --color-insert-soft: rgba(143, 210, 169, 0.18);
+  --color-delete: #d78d84;
+  --color-delete-soft: rgba(215, 141, 132, 0.14);
+
+  --color-warning: #c7b6ff;
+  --color-warning-soft: rgba(199, 182, 255, 0.16);
+  --color-danger: #d78d84;
+  --color-danger-soft: rgba(215, 141, 132, 0.16);
+  --color-success: #8fd2a9;
+  --color-success-soft: rgba(143, 210, 169, 0.18);
 
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-strong: rgba(255, 255, 255, 0.14);
@@ -184,7 +190,7 @@
   background: var(--color-page-bg);
   border: 1px solid var(--color-page-border);
   border-radius: 2px;
-  box-shadow: 0 1px 4px var(--color-page-shadow);
+  box-shadow: 0 8px 24px -20px var(--color-page-shadow);
 }
 
 /* Canvas-mode typography — lighter, review-first baseline */
@@ -193,6 +199,12 @@
   font-size: 15px;
   line-height: 1.6;
   color: var(--color-primary);
+  width: min(100%, 920px);
+  min-height: 100%;
+  background: var(--color-page-bg);
+  border: 1px solid var(--color-page-border);
+  border-radius: 2px;
+  box-shadow: 0 6px 18px -14px var(--color-page-shadow);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -248,6 +260,7 @@
   cursor: text;
   border: none;
   box-shadow: none;
+  white-space: pre-wrap;
 }
 
 .prosemirror-surface .ProseMirror:focus {
@@ -294,6 +307,11 @@
   text-underline-offset: 0.18em;
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-inline-metadata {
+  background: color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 12%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 22%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-inline-preserve-only {
   background: color-mix(in srgb, var(--color-danger) 7%, transparent);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 18%, transparent);

package/src/ui-tailwind/toolbar/toolbar-layout.ts

@@ -0,0 +1,47 @@
+import type { WordReviewEditorChromePreset } from "../../api/public-types";
+
+export interface ToolbarLayoutModelInput {
+  compactMode: boolean;
+  preset: WordReviewEditorChromePreset;
+  hasActiveListContext: boolean;
+}
+
+export interface ToolbarLayoutModel {
+  showStyleSelectorsInRow: boolean;
+  showListActionsInRow: boolean;
+  showSpacingActionsInRow: boolean;
+  showInsertActionsInRow: boolean;
+  showUpdateActionsInRow: boolean;
+  showCompactOverflow: boolean;
+  showListContinuationInRow: boolean;
+}
+
+export function resolveToolbarLayoutModel(
+  input: ToolbarLayoutModelInput,
+): ToolbarLayoutModel {
+  if (!input.compactMode) {
+    const showListActions = input.preset === "simple" || input.preset === "advanced";
+    return {
+      showStyleSelectorsInRow: input.preset === "advanced",
+      showListActionsInRow: showListActions,
+      showSpacingActionsInRow: true,
+      showInsertActionsInRow: input.preset === "simple" || input.preset === "advanced",
+      showUpdateActionsInRow: input.preset === "advanced",
+      showCompactOverflow: false,
+      showListContinuationInRow: showListActions && input.hasActiveListContext,
+    };
+  }
+
+  const compactOverflowHasSecondaryActions =
+    input.preset === "simple" || input.preset === "advanced";
+
+  return {
+    showStyleSelectorsInRow: false,
+    showListActionsInRow: false,
+    showSpacingActionsInRow: false,
+    showInsertActionsInRow: false,
+    showUpdateActionsInRow: false,
+    showCompactOverflow: compactOverflowHasSecondaryActions,
+    showListContinuationInRow: false,
+  };
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwToolbarIconButtonProps {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  emphasis?: boolean;
+  onClick?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type="button"
+          aria-label={props.label}
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={props.onClick}
+          className={[
+            "inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent transition-colors outline-none",
+            "disabled:opacity-30 disabled:cursor-not-allowed",
+            props.emphasis
+              ? "text-accent hover:border-border/60 hover:bg-surface"
+              : props.active
+                ? "border-border/70 bg-surface text-accent shadow-[0_4px_12px_-10px_var(--color-shadow-strong)]"
+                : "text-secondary hover:border-border/60 hover:bg-surface hover:text-primary",
+            focusRingClass,
+          ].join(" ")}
+        >
+          <props.icon className="h-4 w-4" />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+          sideOffset={6}
+        >
+          {props.label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}