@beyondwork/docx-react-component 1.0.0

package/services/react-word-editor/app/editor/[sessionId]/page.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+
+import { HarnessWorkspacePage } from "../../../components/harness-workspace-page";
+
+export const metadata: Metadata = {
+  title: "Review Workspace Session",
+};
+
+export default async function EditorSessionPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{
+    sessionId: string;
+  }>;
+  searchParams: Promise<{
+    panel?: string;
+    runId?: string;
+    saved?: string;
+    targetId?: string;
+    targetType?: string;
+  }>;
+}) {
+  const { sessionId } = await params;
+
+  return (
+    <HarnessWorkspacePage
+      requestedSessionId={sessionId}
+      routeKind="editor"
+      searchParams={await searchParams}
+    />
+  );
+}

package/services/react-word-editor/app/fixtures/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+export default function FixturesPage() {
+  redirect("/demo?panel=library");
+}

package/services/react-word-editor/app/globals.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+
+@theme {
+  /* Backgrounds */
+  --color-surface: #f7f7f5;
+  --color-surface-hover: #ebebea;
+  --color-surface-active: #e3e3e1;
+  --color-subtle: #f0f0ee;
+  --color-canvas: #ffffff;
+  --color-shell-bg: #f3efe7;
+  --color-card: #faf8f2;
+  --color-editor-frame: #f6f3ee;
+
+  /* Text */
+  --color-primary: #1f1f1f;
+  --color-secondary: #6b6b6b;
+  --color-tertiary: #616161;
+
+  /* Accent */
+  --color-accent: #1660a8;
+  --color-accent-soft: rgba(22, 96, 168, 0.08);
+
+  /* Review */
+  --color-comment: #7a4f00;
+  --color-comment-soft: rgba(255, 212, 0, 0.14);
+  --color-comment-strong: rgba(255, 212, 0, 0.25);
+  --color-insert: #1a7f37;
+  --color-insert-soft: rgba(26, 127, 55, 0.08);
+  --color-delete: #cf222e;
+  --color-delete-soft: rgba(207, 34, 46, 0.06);
+
+  /* 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);
+
+  /* Borders */
+  --color-border: rgba(0, 0, 0, 0.06);
+  --color-border-strong: rgba(0, 0, 0, 0.12);
+
+  /* Shadows */
+  --color-shadow: rgba(16, 24, 40, 0.08);
+  --color-shadow-strong: rgba(16, 24, 40, 0.14);
+
+  /* Typography roles */
+  --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;
+}
+
+/* ─── Dark mode overrides ─── */
+.dark {
+  --color-surface: #1e1e1e;
+  --color-surface-hover: #2a2a2a;
+  --color-surface-active: #333333;
+  --color-subtle: #252525;
+  --color-canvas: #191919;
+  --color-shell-bg: #171514;
+  --color-card: #23211f;
+  --color-editor-frame: #1d1b19;
+
+  --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-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.14);
+
+  --color-shadow: rgba(0, 0, 0, 0.32);
+  --color-shadow-strong: rgba(0, 0, 0, 0.48);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--color-surface);
+  color: var(--color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html[data-reduced-motion="true"] {
+  scroll-behavior: auto;
+}
+
+html[data-reduced-motion="true"] *,
+html[data-reduced-motion="true"] *::before,
+html[data-reduced-motion="true"] *::after {
+  animation: none !important;
+  scroll-behavior: auto !important;
+  transition: none !important;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/services/react-word-editor/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Inter, Source_Serif_4 } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-legal-sans",
+});
+
+const sourceSerif = Source_Serif_4({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-legal-serif",
+});
+
+export const metadata: Metadata = {
+  title: "React Word Editor Harness",
+  description: "Internal Railway harness for editor and validation workflows.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${inter.variable} ${sourceSerif.variable}`}>
+      <body className="font-[family-name:var(--font-legal-sans)]">{children}</body>
+    </html>
+  );
+}

package/services/react-word-editor/app/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+
+import { HarnessWorkspacePage } from "../components/harness-workspace-page";
+
+export const dynamic = "force-dynamic";
+export const metadata: Metadata = {
+  title: "Word Review Editor",
+  description:
+    "Live runtime editor with harness controls for fixtures, upload, validation, and certification.",
+};
+
+export default async function MainPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    panel?: string;
+    runId?: string;
+    saved?: string;
+    sessionId?: string;
+    targetId?: string;
+    targetType?: string;
+  }>;
+}) {
+  return (
+    <HarnessWorkspacePage
+      routeKind="demo"
+      searchParams={await searchParams}
+    />
+  );
+}

package/services/react-word-editor/app/runs/[runId]/page.tsx

@@ -0,0 +1,34 @@
+import { notFound, redirect } from "next/navigation";
+
+import { getHarnessValidationRunModel } from "../../../lib/harness-client";
+import { buildWorkspaceHref } from "../../../lib/workspace-navigation";
+
+export const dynamic = "force-dynamic";
+
+export default async function ValidationRunPage({
+  params,
+}: {
+  params: Promise<{
+    runId: string;
+  }>;
+}) {
+  const { runId } = await params;
+  const model = await getHarnessValidationRunModel(runId);
+
+  if (!model) {
+    notFound();
+  }
+
+  if (model.session?.sessionId) {
+    redirect(
+      buildWorkspaceHref({
+        routeKind: "editor",
+        sessionId: model.session.sessionId,
+        panel: "run",
+        runId,
+      }),
+    );
+  }
+
+  redirect(`/demo?panel=run&runId=${encodeURIComponent(runId)}`);
+}

package/services/react-word-editor/app/wave-10-word-review/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+export default function Wave10WordReviewPage() {
+  redirect("/demo?panel=wave10-review");
+}

package/services/react-word-editor/components/harness-control-bar.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useId, type ChangeEvent } from "react";
+import * as Select from "@radix-ui/react-select";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import {
+  ChevronDown,
+  Download,
+  FileCheck2,
+  FileText,
+  Moon,
+  Sun,
+  Upload,
+} from "lucide-react";
+
+export interface HarnessSourceOption {
+  sourceId: string;
+  sourceKind: "fixture" | "scenario" | "upload";
+  name: string;
+  sourceLabel: string;
+  available: boolean;
+  kindLabel: string;
+  primaryBadge?: string;
+}
+
+export interface HarnessSessionInfo {
+  sessionId: string;
+  documentId: string;
+  sourceId: string;
+  sourceLabel: string;
+}
+
+export interface HarnessControlBarProps {
+  sources: HarnessSourceOption[];
+  currentSession: HarnessSessionInfo;
+  isDirty: boolean;
+  darkMode: boolean;
+  reducedMotion: boolean;
+  /** Result of last validation, if any. */
+  validationLabel?: string | null;
+  /** Whether a validate action is in progress. */
+  isValidating?: boolean;
+  /** Whether an export action is in progress. */
+  isExporting?: boolean;
+  onSourceSelect: (sourceId: string) => void;
+  onUpload: (file: File) => void;
+  /** Validate through the canonical workspace flow. */
+  onValidate?: () => void;
+  /** Export through the canonical workspace flow. */
+  onExport?: () => void;
+  onDarkModeChange: (dark: boolean) => void;
+  onReducedMotionChange: (reduced: boolean) => void;
+}
+
+const focusRing =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+
+const kindColors: Record<string, string> = {
+  fixture: "text-insert bg-insert-soft",
+  scenario: "text-accent bg-accent-soft",
+  upload: "text-secondary bg-subtle",
+};
+
+export function HarnessControlBar(props: HarnessControlBarProps) {
+  const uploadId = useId();
+
+  const fixtures = props.sources.filter((s) => s.sourceKind === "fixture");
+  const scenarios = props.sources.filter((s) => s.sourceKind === "scenario");
+  const uploads = props.sources.filter((s) => s.sourceKind === "upload");
+
+  function handleUploadChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (file) props.onUpload(file);
+    event.target.value = "";
+  }
+
+  return (
+    <div className="flex h-9 shrink-0 items-center gap-3 border-b border-border bg-surface px-3 text-xs">
+      {/* Source picker */}
+      <Select.Root
+        value={props.currentSession.sourceId}
+        onValueChange={props.onSourceSelect}
+      >
+        <Select.Trigger
+          className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-primary transition-colors hover:bg-surface-hover outline-none max-w-[240px] ${focusRing}`}
+        >
+          <FileText className="h-3 w-3 text-tertiary shrink-0" />
+          <Select.Value />
+          <Select.Icon>
+            <ChevronDown className="h-3 w-3 text-tertiary" />
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            className="overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border z-50 max-h-[400px]"
+            position="popper"
+            sideOffset={4}
+          >
+            <Select.Viewport className="p-1">
+              {fixtures.length > 0 && (
+                <Select.Group>
+                  <Select.Label className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-tertiary">
+                    Fixtures
+                  </Select.Label>
+                  {fixtures.map((s) => (
+                    <SourceItem key={s.sourceId} source={s} />
+                  ))}
+                </Select.Group>
+              )}
+              {scenarios.length > 0 && (
+                <Select.Group>
+                  <Select.Label className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-tertiary mt-1">
+                    Scenarios
+                  </Select.Label>
+                  {scenarios.map((s) => (
+                    <SourceItem key={s.sourceId} source={s} />
+                  ))}
+                </Select.Group>
+              )}
+              {uploads.length > 0 && (
+                <Select.Group>
+                  <Select.Label className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-tertiary mt-1">
+                    Uploads
+                  </Select.Label>
+                  {uploads.map((s) => (
+                    <SourceItem key={s.sourceId} source={s} />
+                  ))}
+                </Select.Group>
+              )}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+
+      {/* Upload */}
+      <Tooltip.Provider delayDuration={400}>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <label
+              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-tertiary cursor-pointer hover:bg-surface-hover hover:text-primary transition-colors ${focusRing}`}
+            >
+              <Upload className="h-3 w-3" />
+              <span>Upload</span>
+              <input
+                accept=".docx"
+                className="sr-only"
+                id={uploadId}
+                type="file"
+                onChange={handleUploadChange}
+              />
+            </label>
+          </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}
+            >
+              Upload a .docx file
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+
+      {/* Divider */}
+      <div className="h-3 w-px bg-border" />
+
+      {/* Session info */}
+      <span className="text-tertiary truncate max-w-[180px]">
+        {props.currentSession.sourceLabel}
+      </span>
+      <span className="flex items-center gap-1.5">
+        <span
+          className={`inline-block h-1.5 w-1.5 rounded-full ${
+            props.isDirty ? "bg-comment" : "bg-insert"
+          }`}
+        />
+        <span className="text-tertiary">
+          {props.isDirty ? "Unsaved" : "Ready"}
+        </span>
+      </span>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Validate */}
+      <Tooltip.Provider delayDuration={400}>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              onClick={props.onValidate}
+              disabled={props.isValidating || !props.onValidate}
+              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-secondary hover:bg-surface-hover hover:text-primary transition-colors disabled:opacity-40 ${focusRing}`}
+            >
+              <FileCheck2 className="h-3 w-3" />
+              {props.isValidating
+                ? "Validating..."
+                : props.validationLabel
+                  ? props.validationLabel
+                  : "Validate"}
+            </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}
+            >
+              Export and validate against OpenXML SDK
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+
+        {/* Export */}
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              onClick={props.onExport}
+              disabled={props.isExporting || !props.onExport}
+              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-secondary hover:bg-surface-hover hover:text-primary transition-colors disabled:opacity-40 ${focusRing}`}
+            >
+              <Download className="h-3 w-3" />
+              Export
+            </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}
+            >
+              Download edited .docx
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+
+      {/* Divider */}
+      <div className="h-3 w-px bg-border" />
+
+      {/* Dark mode */}
+      <button
+        type="button"
+        onClick={() => props.onDarkModeChange(!props.darkMode)}
+        className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-tertiary hover:bg-surface-hover transition-colors ${focusRing}`}
+        aria-label={props.darkMode ? "Light mode" : "Dark mode"}
+      >
+        {props.darkMode ? (
+          <Sun className="h-3.5 w-3.5" />
+        ) : (
+          <Moon className="h-3.5 w-3.5" />
+        )}
+      </button>
+
+      {/* Reduced motion */}
+      <label className="flex items-center gap-1.5 text-tertiary cursor-pointer select-none">
+        <input
+          checked={props.reducedMotion}
+          type="checkbox"
+          className="h-3 w-3 accent-accent"
+          onChange={(e) => props.onReducedMotionChange(e.target.checked)}
+        />
+        <span className="hidden sm:inline">Reduced motion</span>
+      </label>
+    </div>
+  );
+}
+
+function SourceItem(props: { source: HarnessSourceOption }) {
+  const { source } = props;
+  return (
+    <Select.Item
+      value={source.sourceId}
+      disabled={!source.available}
+      className={`flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed ${focusRing}`}
+    >
+      <Select.ItemText>{source.name}</Select.ItemText>
+      {source.primaryBadge && (
+        <span className="shrink-0 rounded px-1 py-px text-[10px] font-medium bg-primary text-white">
+          {source.primaryBadge}
+        </span>
+      )}
+      <span
+        className={`shrink-0 rounded px-1 py-px text-[10px] font-medium ${kindColors[source.sourceKind] ?? "text-secondary bg-subtle"}`}
+      >
+        {source.kindLabel}
+      </span>
+    </Select.Item>
+  );
+}