@beyondwork/docx-react-component 1.0.18 → 1.0.20

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

@@ -52,34 +52,34 @@ export function TwReviewRail(props: TwReviewRailProps) {
   return (
     <aside
       aria-label="Review rail"
-      className="flex w-[340px] shrink-0 flex-col border-l border-border bg-canvas"
+      className="flex w-[304px] shrink-0 flex-col border-l border-border bg-canvas"
     >
       <Tabs.Root
         value={props.activeTab}
         onValueChange={(v: string) => props.onActiveTabChange(v as ReviewRailTab)}
         className="flex flex-1 flex-col min-h-0"
       >
-        <Tabs.List className="flex shrink-0 border-b border-border">
+        <Tabs.List className="flex shrink-0 border-b border-border px-2">
           <Tabs.Trigger
             value="comments"
-            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
           >
             Comments{" "}
-            <span className="text-tertiary">{props.comments.totalCount}</span>
+            <span className="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">{props.comments.totalCount}</span>
           </Tabs.Trigger>
           <Tabs.Trigger
             value="changes"
-            className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
           >
             Changes{" "}
-            <span className="text-tertiary">{props.trackedChanges.totalCount}</span>
+            <span className="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">{props.trackedChanges.totalCount}</span>
           </Tabs.Trigger>
           {/* Health moved to toolbar popover */}
         </Tabs.List>
 
         <ScrollArea.Root className="flex-1 min-h-0">
           <ScrollArea.Viewport className="h-full w-full">
-            <Tabs.Content value="comments" className="p-3 outline-none">
+            <Tabs.Content value="comments" className="p-2.5 outline-none">
               <TwCommentSidebar
                 currentUserId={props.currentUserId}
                 comments={props.comments}
@@ -92,7 +92,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
               />
             </Tabs.Content>
 
-            <Tabs.Content value="changes" className="p-3 outline-none">
+            <Tabs.Content value="changes" className="p-2.5 outline-none">
               <TwRevisionSidebar
                 trackedChanges={props.trackedChanges}
                 markupDisplay={props.markupDisplay}

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

@@ -28,16 +28,16 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
 
   return (
     <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
+      <p className="mb-2 text-[10px] text-tertiary">
         {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
       </p>
 
       {/* Bulk actions */}
-      <div className="flex gap-1.5 mb-3">
+      <div className="mb-2 flex gap-1">
         <button
           type="button"
           disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          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})
@@ -45,7 +45,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
         <button
           type="button"
           disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
           onClick={props.onRejectAllChanges}
         >
           Reject all
@@ -76,14 +76,14 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                   : rev.kind === "deletion" ? "bg-danger"
                   : "bg-tertiary"
                 }`} />
-                <div className="p-2.5 flex-1 min-w-0">
-                  <div className="flex items-start justify-between gap-2 mb-1">
-                    <span className="text-sm font-medium text-primary">{rev.anchorLabel}</span>
+                <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="text-xs text-tertiary mb-1">{rev.authorId} · {rev.createdAt}</p>
+                  <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
                   {rev.excerpt ? (
-                    <p className={`text-sm ${
+                    <p className={`text-[11px] ${
                       rev.kind === "insertion" ? "text-insert"
                       : rev.kind === "deletion" ? "text-danger line-through"
                       : "text-secondary"
@@ -91,18 +91,18 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       {rev.excerpt}
                     </p>
                   ) : (
-                    <p className="text-sm text-secondary">{rev.label}</p>
+                    <p className="text-[11px] text-secondary">{rev.label}</p>
                   )}
                   {rev.detail ? (
-                    <p className="text-xs text-secondary mt-1">{rev.detail}</p>
+                    <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
                   ) : null}
-                  <div className="flex gap-1.5 mt-2">
+                  <div className="mt-1.5 flex gap-1">
                     {rev.actionability === "actionable" ? (
                       <>
                         <button
                           type="button"
                           disabled={!rev.canAccept || rev.status === "accepted"}
-                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onAcceptRevision?.(rev.revisionId);
@@ -113,7 +113,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                         <button
                           type="button"
                           disabled={!rev.canReject || rev.status === "rejected"}
-                          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onRejectRevision?.(rev.revisionId);
@@ -123,7 +123,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                         </button>
                       </>
                     ) : (
-                      <span className="text-xs text-tertiary px-2 py-1">Preserve-only</span>
+                      <span className="px-1.5 py-0.5 text-[10px] text-tertiary">Preserve-only</span>
                     )}
                   </div>
                 </div>

package/src/ui-tailwind/theme/editor-theme.css

@@ -68,6 +68,11 @@
   --font-legal-serif: var(--font-legal-serif, "Source Serif 4", "Georgia", "Times New Roman", serif);
   --font-legal-sans: var(--font-legal-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
   --font-legal-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;
+
+  /* Page-mode document surface */
+  --color-page-shadow: rgba(16, 24, 40, 0.06);
+  --color-page-border: rgba(0, 0, 0, 0.04);
+  --color-page-bg: #ffffff;
 }
 
 /* ─── Dark mode overrides ─── */
@@ -108,6 +113,96 @@
 
   --color-shadow: rgba(0, 0, 0, 0.32);
   --color-shadow-strong: rgba(0, 0, 0, 0.48);
+
+  --color-page-shadow: rgba(0, 0, 0, 0.18);
+  --color-page-border: rgba(255, 255, 255, 0.06);
+  --color-page-bg: #1e1e1e;
+}
+
+/*
+ * ─── Font substitution map ───
+ *
+ * Common Word font families mapped to redistributable metric-compatible or
+ * open substitutes. These CSS custom properties are consumed by the
+ * ProseMirror surface font_family mark and by the page-mode typography
+ * layer. Hosts can override individual properties to supply their own
+ * licensed fonts.
+ *
+ * Strategy:
+ *   1. Use metric-compatible open substitutes where available
+ *      (e.g. Liberation Serif for Times New Roman, Carlito for Calibri).
+ *   2. Fall back through system-installed metric-compatible fonts
+ *      (e.g. Cambria → system serif, Calibri → system sans).
+ *   3. Final fallback to the editor's legal-serif or legal-sans role font.
+ *
+ * This pipeline does NOT ship proprietary Microsoft fonts. It uses only
+ * redistributable or system-installed families.
+ */
+:root {
+  /* Serif substitutions */
+  --wre-font-times-new-roman: "Liberation Serif", "Times New Roman", "Source Serif 4", "Georgia", serif;
+  --wre-font-cambria: "Caladea", "Cambria", "Source Serif 4", "Georgia", serif;
+  --wre-font-garamond: "EB Garamond", "Garamond", "Source Serif 4", serif;
+  --wre-font-book-antiqua: "Palatino Linotype", "Book Antiqua", "Source Serif 4", serif;
+  --wre-font-georgia: "Georgia", "Source Serif 4", serif;
+
+  /* Sans-serif substitutions */
+  --wre-font-calibri: "Carlito", "Calibri", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --wre-font-arial: "Liberation Sans", "Arial", "Inter", sans-serif;
+  --wre-font-helvetica: "Liberation Sans", "Helvetica Neue", "Helvetica", "Inter", sans-serif;
+  --wre-font-verdana: "Verdana", "Inter", sans-serif;
+  --wre-font-tahoma: "Tahoma", "Inter", sans-serif;
+  --wre-font-segoe-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --wre-font-century-gothic: "URW Gothic", "Century Gothic", "Inter", sans-serif;
+
+  /* Monospace substitutions */
+  --wre-font-courier-new: "Liberation Mono", "Courier New", "JetBrains Mono", monospace;
+  --wre-font-consolas: "JetBrains Mono", "Consolas", "SF Mono", monospace;
+}
+
+/* ─── Page-mode typography ─── */
+.wre-page-surface {
+  font-family: var(--font-legal-serif);
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures;
+}
+
+.wre-page-surface p {
+  margin: 0 0 0.5em 0;
+  orphans: 2;
+  widows: 2;
+}
+
+/* Page chrome — shadow, border, and background for the page-mode document panel */
+.wre-page-chrome {
+  background: var(--color-page-bg);
+  border: 1px solid var(--color-page-border);
+  border-radius: 2px;
+  box-shadow: 0 1px 4px var(--color-page-shadow);
+}
+
+/* Canvas-mode typography — lighter, review-first baseline */
+.wre-canvas-surface {
+  font-family: var(--font-legal-serif);
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+
+/* Wide-table readability in page mode */
+.wre-page-surface table {
+  font-size: 14px;
+  line-height: 1.45;
 }
 
 /* ─── Base resets ─── */
@@ -171,6 +266,10 @@
   margin: 0 0 0.5em 0;
 }
 
+.prosemirror-surface .ProseMirror p[data-numbered="true"][data-list-continuation="true"] {
+  margin-bottom: 0.25em;
+}
+
 .prosemirror-surface .ProseMirror [data-node-type="opaque_block"] {
   user-select: none;
   cursor: default;
@@ -188,3 +287,31 @@
 .prosemirror-surface .ProseMirror ::selection {
   background: var(--color-accent-soft);
 }
+
+.prosemirror-surface .ProseMirror .ProseMirror-selectednode {
+  outline: none;
+  background-color: var(--color-accent-soft);
+  border-radius: 4px;
+}
+
+/*
+ * ─── Preservation noise suppression ───
+ *
+ * Quiet-marker opaque inlines (w:proofErr, w:lastRenderedPageBreak, w:permStart,
+ * w:permEnd) are preserved in the canonical document for export safety but
+ * contribute zero visual weight to the reading/editing surface. They remain in
+ * the DOM as zero-dimension spans so round-trip export is unaffected.
+ */
+.prosemirror-surface .ProseMirror [data-inline-presentation="quiet-marker"] {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  vertical-align: baseline;
+  pointer-events: none;
+}
+
+/* ─── Page workspace zoom scaling ─── */
+.wre-page-chrome[style*="scale"] {
+  will-change: transform;
+}

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

@@ -1,6 +1,8 @@
 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;
@@ -19,7 +21,9 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
       <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-md transition-colors outline-none",