@beyondwork/docx-react-component 1.0.0

package/services/react-word-editor/.tmp-a4/src/ui/editor-surface/editor-surface.tsx

@@ -0,0 +1,546 @@
+import type { Ref } from "react";
+
+import React from "react";
+import type {
+  CompatibilityFeatureClass,
+  DocumentStats,
+  EditorWarning,
+} from "../../api/public-types";
+
+export interface EditorSurfaceWarningItem {
+  warningId: string;
+  severity: EditorWarning["severity"];
+  code: EditorWarning["code"];
+  message: string;
+}
+
+export interface EditorSurfaceCommentItem {
+  commentId: string;
+  preview: string;
+  status: "open" | "resolved" | "detached";
+  isActive: boolean;
+}
+
+export interface EditorSurfaceChangeItem {
+  changeId: string;
+  label: string;
+  status: "active" | "accepted" | "rejected" | "detached";
+}
+
+export interface EditorSurfaceFeatureSummary {
+  featureEntryId: string;
+  featureClass: CompatibilityFeatureClass;
+  message: string;
+}
+
+export interface EditorSurfaceModel {
+  documentId: string;
+  sessionId: string;
+  sourceLabel?: string;
+  isReady: boolean;
+  isDirty: boolean;
+  readOnly: boolean;
+  reviewMode: "editing" | "review";
+  markupDisplay: "clean" | "simple" | "all";
+  documentStats: DocumentStats;
+  selectionLabel: string;
+  warningSummary: string;
+  compatibilitySummary: string;
+  warnings: EditorSurfaceWarningItem[];
+  comments: EditorSurfaceCommentItem[];
+  trackedChanges: EditorSurfaceChangeItem[];
+  features: EditorSurfaceFeatureSummary[];
+}
+
+export interface EditorSurfaceProps {
+  canvasRef?: Ref<HTMLDivElement>;
+  model: EditorSurfaceModel;
+  onOpenComment?: (commentId: string) => void;
+}
+
+const featureAccentByClass: Record<CompatibilityFeatureClass, string> = {
+  "supported-roundtrip": "#376355",
+  "preserve-only": "#8a6c28",
+  "unsupported-fatal": "#8e3b3b",
+};
+
+export function EditorSurface({
+  canvasRef,
+  model,
+  onOpenComment,
+}: EditorSurfaceProps) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gap: "20px",
+        gridTemplateColumns: "minmax(0, 1fr) minmax(260px, 320px)",
+        alignItems: "start",
+      }}
+    >
+      <div
+        style={{
+          minWidth: 0,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          ref={canvasRef}
+          aria-label="Document canvas"
+          role="region"
+          tabIndex={0}
+          style={{
+            width: "min(100%, 860px)",
+            minHeight: "560px",
+            padding: "40px 48px",
+            borderRadius: "24px",
+            border: "1px solid rgba(23, 31, 38, 0.08)",
+            background:
+              "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,249,246,0.98) 100%)",
+            boxShadow:
+              "0 20px 60px rgba(20, 26, 33, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85)",
+            outline: "none",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              gap: "16px",
+              alignItems: "center",
+              marginBottom: "28px",
+              color: "#5f6b76",
+              fontSize: "13px",
+              letterSpacing: "0.01em",
+            }}
+          >
+            <span>{model.sourceLabel ?? "Unlabeled source"}</span>
+            <span>
+              {model.reviewMode} review • {model.markupDisplay} markup
+            </span>
+          </div>
+
+          <div
+            style={{
+              display: "grid",
+              gap: "12px",
+              marginBottom: "28px",
+            }}
+          >
+            <h2
+              style={{
+                margin: 0,
+                color: "#18212a",
+                fontSize: "28px",
+                fontWeight: 600,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              Runtime-owned document session
+            </h2>
+            <p
+              style={{
+                margin: 0,
+                maxWidth: "64ch",
+                color: "#44515c",
+                fontSize: "15px",
+                lineHeight: 1.7,
+              }}
+            >
+              This shell keeps React on the render side of the boundary. The
+              document canvas is centered and the runtime remains the mutation
+              authority for comments, tracked changes, export, and snapshot
+              retrieval.
+            </p>
+          </div>
+
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+              gap: "12px",
+              marginBottom: "28px",
+            }}
+          >
+            {[
+              { label: "Words", value: String(model.documentStats.wordCount) },
+              {
+                label: "Paragraphs",
+                value: String(model.documentStats.paragraphCount),
+              },
+              {
+                label: "Comments",
+                value: String(model.documentStats.commentCount),
+              },
+              {
+                label: "Changes",
+                value: String(model.documentStats.changeCount),
+              },
+            ].map((item) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: "16px",
+                  borderRadius: "18px",
+                  background: "rgba(241, 238, 229, 0.62)",
+                  border: "1px solid rgba(23, 31, 38, 0.06)",
+                }}
+              >
+                <div
+                  style={{
+                    color: "#6b726d",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em",
+                  }}
+                >
+                  {item.label}
+                </div>
+                <div
+                  style={{
+                    marginTop: "8px",
+                    color: "#18212a",
+                    fontSize: "22px",
+                    fontWeight: 600,
+                  }}
+                >
+                  {item.value}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div
+            style={{
+              display: "grid",
+              gap: "12px",
+            }}
+          >
+            <div
+              style={{
+                padding: "18px 20px",
+                borderRadius: "18px",
+                background: "rgba(248, 246, 240, 0.9)",
+                border: "1px solid rgba(23, 31, 38, 0.07)",
+              }}
+            >
+              <div
+                style={{
+                  color: "#6b726d",
+                  fontSize: "12px",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em",
+                  marginBottom: "8px",
+                }}
+              >
+                Selection
+              </div>
+              <div style={{ color: "#24303a", fontSize: "14px" }}>
+                {model.selectionLabel}
+              </div>
+            </div>
+
+            <div
+              style={{
+                padding: "18px 20px",
+                borderRadius: "18px",
+                background: "rgba(248, 246, 240, 0.9)",
+                border: "1px solid rgba(23, 31, 38, 0.07)",
+              }}
+            >
+              <div
+                style={{
+                  color: "#6b726d",
+                  fontSize: "12px",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em",
+                  marginBottom: "8px",
+                }}
+              >
+                Compatibility
+              </div>
+              <div style={{ color: "#24303a", fontSize: "14px" }}>
+                {model.compatibilitySummary}
+              </div>
+            </div>
+
+            <div
+              style={{
+                padding: "18px 20px",
+                borderRadius: "18px",
+                background:
+                  model.warningSummary === "No active runtime warnings"
+                    ? "rgba(237, 245, 240, 0.9)"
+                    : "rgba(249, 243, 230, 0.95)",
+                border: "1px solid rgba(23, 31, 38, 0.07)",
+              }}
+            >
+              <div
+                style={{
+                  color: "#6b726d",
+                  fontSize: "12px",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em",
+                  marginBottom: "8px",
+                }}
+              >
+                Diagnostics
+              </div>
+              <div style={{ color: "#24303a", fontSize: "14px" }}>
+                {model.warningSummary}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <aside
+        aria-label="Review sidebar"
+        style={{
+          minWidth: 0,
+          display: "grid",
+          gap: "14px",
+        }}
+      >
+        <section
+          style={{
+            padding: "18px",
+            borderRadius: "20px",
+            background: "rgba(248, 246, 240, 0.82)",
+            border: "1px solid rgba(23, 31, 38, 0.08)",
+          }}
+        >
+          <div
+            style={{
+              color: "#18212a",
+              fontSize: "14px",
+              fontWeight: 600,
+              marginBottom: "10px",
+            }}
+          >
+            Comments
+          </div>
+          <div style={{ display: "grid", gap: "10px" }}>
+            {model.comments.length === 0 ? (
+              <div style={{ color: "#63707b", fontSize: "13px" }}>
+                No comment threads in the runtime snapshot.
+              </div>
+            ) : (
+              model.comments.map((comment) => (
+                <button
+                  key={comment.commentId}
+                  type="button"
+                  onClick={() => onOpenComment?.(comment.commentId)}
+                  style={{
+                    textAlign: "left",
+                    borderRadius: "16px",
+                    border: comment.isActive
+                      ? "1px solid rgba(55, 99, 85, 0.38)"
+                      : "1px solid rgba(23, 31, 38, 0.07)",
+                    background: comment.isActive
+                      ? "rgba(235, 244, 239, 0.95)"
+                      : "rgba(255, 255, 255, 0.72)",
+                    padding: "12px 14px",
+                    cursor: "pointer",
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#18212a",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {comment.preview}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: "6px",
+                      color: "#63707b",
+                      fontSize: "12px",
+                    }}
+                  >
+                    {comment.status}
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section
+          style={{
+            padding: "18px",
+            borderRadius: "20px",
+            background: "rgba(248, 246, 240, 0.82)",
+            border: "1px solid rgba(23, 31, 38, 0.08)",
+          }}
+        >
+          <div
+            style={{
+              color: "#18212a",
+              fontSize: "14px",
+              fontWeight: 600,
+              marginBottom: "10px",
+            }}
+          >
+            Tracked changes
+          </div>
+          <div style={{ display: "grid", gap: "10px" }}>
+            {model.trackedChanges.length === 0 ? (
+              <div style={{ color: "#63707b", fontSize: "13px" }}>
+                No tracked changes are active in this runtime snapshot.
+              </div>
+            ) : (
+              model.trackedChanges.map((change) => (
+                <div
+                  key={change.changeId}
+                  style={{
+                    borderRadius: "16px",
+                    background: "rgba(255, 255, 255, 0.72)",
+                    border: "1px solid rgba(23, 31, 38, 0.07)",
+                    padding: "12px 14px",
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#18212a",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {change.label}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: "6px",
+                      color: "#63707b",
+                      fontSize: "12px",
+                    }}
+                  >
+                    {change.status}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section
+          style={{
+            padding: "18px",
+            borderRadius: "20px",
+            background: "rgba(248, 246, 240, 0.82)",
+            border: "1px solid rgba(23, 31, 38, 0.08)",
+          }}
+        >
+          <div
+            style={{
+              color: "#18212a",
+              fontSize: "14px",
+              fontWeight: 600,
+              marginBottom: "10px",
+            }}
+          >
+            Compatibility entries
+          </div>
+          <div style={{ display: "grid", gap: "10px" }}>
+            {model.features.length === 0 ? (
+              <div style={{ color: "#63707b", fontSize: "13px" }}>
+                No compatibility features were reported.
+              </div>
+            ) : (
+              model.features.map((feature) => (
+                <div
+                  key={feature.featureEntryId}
+                  style={{
+                    borderRadius: "16px",
+                    background: "rgba(255, 255, 255, 0.72)",
+                    border: `1px solid ${featureAccentByClass[feature.featureClass]}33`,
+                    padding: "12px 14px",
+                  }}
+                >
+                  <div
+                    style={{
+                      color: featureAccentByClass[feature.featureClass],
+                      fontSize: "11px",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.08em",
+                      marginBottom: "6px",
+                    }}
+                  >
+                    {feature.featureClass}
+                  </div>
+                  <div style={{ color: "#18212a", fontSize: "13px" }}>
+                    {feature.message}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section
+          style={{
+            padding: "18px",
+            borderRadius: "20px",
+            background: "rgba(248, 246, 240, 0.82)",
+            border: "1px solid rgba(23, 31, 38, 0.08)",
+          }}
+        >
+          <div
+            style={{
+              color: "#18212a",
+              fontSize: "14px",
+              fontWeight: 600,
+              marginBottom: "10px",
+            }}
+          >
+            Runtime warnings
+          </div>
+          <div style={{ display: "grid", gap: "10px" }}>
+            {model.warnings.length === 0 ? (
+              <div style={{ color: "#63707b", fontSize: "13px" }}>
+                No active runtime warnings.
+              </div>
+            ) : (
+              model.warnings.map((warning) => (
+                <div
+                  key={warning.warningId}
+                  style={{
+                    borderRadius: "16px",
+                    background: warning.severity === "warning"
+                      ? "rgba(249, 243, 230, 0.95)"
+                      : "rgba(235, 244, 239, 0.95)",
+                    border: "1px solid rgba(23, 31, 38, 0.07)",
+                    padding: "12px 14px",
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#18212a",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {warning.message}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: "6px",
+                      color: "#63707b",
+                      fontSize: "12px",
+                    }}
+                  >
+                    {warning.code}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+      </aside>
+    </div>
+  );
+}

package/services/react-word-editor/.tmp-a4/test/ui/word-review-editor.test.tsx

@@ -0,0 +1,146 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import type {
+  EditorDatastoreAdapter,
+  PersistedEditorSnapshot,
+} from "../../src/api/public-types";
+import {
+  __unstable_createWordReviewEditorRuntime,
+  WordReviewEditor,
+} from "../../src/ui/WordReviewEditor";
+
+function createSnapshot(documentId: string): PersistedEditorSnapshot {
+  return {
+    snapshotVersion: "persisted-editor-snapshot/1",
+    schemaVersion: "cds/1.0.0",
+    documentId,
+    docId: `doc-${documentId}`,
+    createdAt: "2026-03-26T00:00:00.000Z",
+    updatedAt: "2026-03-26T00:00:00.000Z",
+    savedAt: "2026-03-26T00:00:00.000Z",
+    editorBuild: "test-build",
+    canonicalDocument: {
+      schemaVersion: "cds/1.0.0",
+      docId: `doc-${documentId}`,
+      content: [{ type: "paragraph" }],
+    },
+    compatibility: {
+      reportVersion: "compatibility-report/1",
+      generatedAt: "2026-03-26T00:00:00.000Z",
+      blockExport: false,
+      featureEntries: [
+        {
+          featureEntryId: "feature-1",
+          featureKey: "supported/paragraphs",
+          featureClass: "supported-roundtrip",
+          message: "Paragraphs are round-trip safe.",
+        },
+      ],
+      warnings: [],
+      errors: [],
+    },
+    warningLog: [],
+  };
+}
+
+test("runtime owns snapshot state and comment mutations outside React", async () => {
+  const events: string[] = [];
+  const runtime = __unstable_createWordReviewEditorRuntime({
+    documentId: "doc-1",
+    readOnly: false,
+    onEvent: (event) => {
+      events.push(event.type);
+    },
+  });
+
+  await runtime.initialize({
+    documentId: "doc-1",
+    initialSource: {
+      kind: "snapshot",
+      snapshot: createSnapshot("doc-1"),
+      sourceLabel: "fixture.docx",
+    },
+  });
+
+  assert.equal(runtime.getRenderSnapshot().isReady, true);
+  assert.equal(runtime.getRenderSnapshot().comments.commentIdsInOrder.length, 0);
+
+  const commentId = runtime.addComment({
+    anchor: {
+      kind: "range",
+      from: 4,
+      to: 12,
+      assoc: { start: 1, end: 1 },
+    },
+    body: "Review the indemnity clause.",
+  });
+
+  assert.equal(commentId, "comment-1");
+  assert.deepEqual(events.slice(0, 3), ["ready", "dirty_changed", "comment_added"]);
+  assert.equal(runtime.getRenderSnapshot().isDirty, true);
+  assert.equal(runtime.getRenderSnapshot().comments.openCommentId, "comment-1");
+  assert.equal(runtime.getRenderSnapshot().documentStats.commentCount, 1);
+});
+
+test("runtime replaceExternalSource reloads the session from the new revision token", async () => {
+  const runtime = __unstable_createWordReviewEditorRuntime({
+    documentId: "doc-2",
+    readOnly: false,
+  });
+
+  await runtime.initialize({
+    documentId: "doc-2",
+    initialSource: {
+      kind: "docx",
+      bytes: new Uint8Array(640),
+      sourceLabel: "first.docx",
+    },
+  });
+
+  const firstSessionId = runtime.getRenderSnapshot().sessionId;
+
+  await runtime.replaceExternalSource("rev-2", {
+    kind: "snapshot",
+    snapshot: createSnapshot("doc-2"),
+    sourceLabel: "second.snapshot",
+  });
+
+  const nextSnapshot = runtime.getRenderSnapshot();
+  assert.notEqual(nextSnapshot.sessionId, firstSessionId);
+  assert.equal(nextSnapshot.revisionToken, "rev-2");
+  assert.equal(nextSnapshot.sourceLabel, "second.snapshot");
+  assert.equal(nextSnapshot.isDirty, false);
+});
+
+test("server-rendered shell keeps the document surface central and chrome secondary", () => {
+  const datastore: EditorDatastoreAdapter = {
+    async load() {
+      return {};
+    },
+    async saveSnapshot() {
+      return { savedAt: "2026-03-26T00:00:00.000Z" };
+    },
+    async saveExport() {
+      return { savedAt: "2026-03-26T00:00:00.000Z", artifactId: "export-1" };
+    },
+  };
+
+  const markup = renderToStaticMarkup(
+    <WordReviewEditor
+      documentId="doc-3"
+      currentUser={{ userId: "u-1", displayName: "Taylor Shaw", initials: "TS" }}
+      initialSnapshot={createSnapshot("doc-3")}
+      initialSourceLabel="agreement.docx"
+      datastore={datastore}
+    />,
+  );
+
+  assert.match(markup, /Runtime-owned document session/);
+  assert.match(markup, /Document canvas/);
+  assert.match(markup, /Review sidebar/);
+  assert.match(markup, /Save snapshot/);
+  assert.match(markup, /Export docx/);
+});

package/services/react-word-editor/.tmp-a4-build/src/api/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });