@beyondwork/docx-react-component 1.0.0 → 1.0.1

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

@@ -1,546 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

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