@beyondwork/docx-react-component 1.0.0 → 1.0.2

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

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

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

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

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

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

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

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

@@ -1,289 +0,0 @@
-"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>
-  );
-}