@beyondwork/docx-react-component 1.0.29 → 1.0.31

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import type { FocusEventHandler } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Check, MessageSquare, Pencil, X } from "lucide-react";
+
+import type { SuggestionCardModel } from "../../ui/headless/selection-toolbar-model";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwSuggestionCardProps {
+  model: SuggestionCardModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onEditSuggestion?: () => void;
+  onAddComment?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwSuggestionCard(props: TwSuggestionCardProps) {
+  const contextLabel = summarizeSuggestionContext(props.model);
+  const commentDisabled = !props.model.canAddComment;
+  const tooltipLabel = commentDisabled
+    ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
+    : "Comment on suggestion";
+
+  return (
+    <div
+      data-testid="suggestion-card"
+      className="inline-flex max-w-[min(24rem,calc(100vw-1.5rem))] flex-col gap-1.5 rounded-xl border border-border/80 bg-canvas px-2.5 py-1.5 shadow-lg ring-1 ring-border/75"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      role="group"
+      aria-label="Suggestion actions"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-warning">
+            {props.model.kindLabel}
+          </div>
+          <div className="mt-0.5 max-w-[14rem] truncate text-[13px] text-primary">
+            {props.model.previewText}
+          </div>
+        </div>
+        {contextLabel ? (
+          <div className="shrink-0 rounded-full bg-canvas px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em] text-comment ring-1 ring-comment/20">
+            {contextLabel}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1">
+        <SuggestionActionButton
+          icon={<Check className="h-3.5 w-3.5" />}
+          label="Accept suggestion"
+          disabled={!props.model.canAccept}
+          tone="accept"
+          onClick={props.onAccept}
+        />
+        <SuggestionActionButton
+          icon={<X className="h-3.5 w-3.5" />}
+          label="Reject suggestion"
+          disabled={!props.model.canReject}
+          tone="reject"
+          onClick={props.onReject}
+        />
+        <SuggestionActionButton
+          icon={<Pencil className="h-3.5 w-3.5" />}
+          label="Edit suggestion"
+          disabled={!props.model.canEditSuggestion}
+          tone="neutral"
+          onClick={props.onEditSuggestion}
+        />
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Comment on suggestion"
+              disabled={commentDisabled}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-7 items-center gap-1 rounded-md border border-border px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              <MessageSquare className="h-3 w-3" />
+              Comment
+            </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}
+            >
+              {tooltipLabel}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </div>
+    </div>
+  );
+}
+
+function summarizeSuggestionContext(model: SuggestionCardModel): string | null {
+  const labels = model.badges.map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+  const summary = labels.slice(0, 2).join(" · ");
+  return summary.length > 36 ? `${summary.slice(0, 33)}...` : summary;
+}
+
+function SuggestionActionButton(props: {
+  icon: React.ReactNode;
+  label: string;
+  disabled: boolean;
+  tone: "accept" | "reject" | "neutral";
+  onClick?: () => void;
+}) {
+  const toneClass = props.tone === "accept"
+    ? "border-success/35 bg-canvas text-success hover:bg-surface"
+    : props.tone === "reject"
+      ? "border-danger/35 bg-canvas text-danger hover:bg-surface"
+      : "border-border text-secondary hover:bg-surface";
+
+  return (
+    <button
+      type="button"
+      aria-label={props.label}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-7 items-center gap-1 rounded-md border px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
+    >
+      {props.icon}
+      {props.label.replace(" suggestion", "").replace(" on suggestion", "")}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -0,0 +1,250 @@
+import React from "react";
+
+import type {
+  StyleCatalogSnapshot,
+  TableOperationCapabilitySnapshot,
+  TableStructureContextSnapshot,
+} from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwTableContextToolbarProps {
+  disabled: boolean;
+  tableContext: TableStructureContextSnapshot | null;
+  tableStyles: StyleCatalogSnapshot["tables"];
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onDeleteTable?: () => void;
+}
+
+const CELL_COLORS = [
+  "#ffffff",
+  "#f0f0ee",
+  "#dbeafe",
+  "#fef3c7",
+  "#dcfce7",
+  "#fce7f3",
+] as const;
+
+export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
+  const tableContext = props.tableContext;
+  const tableSizeLabel = tableContext ? `${tableContext.rowCount} x ${tableContext.columnCount}` : null;
+  const selectionLabel = tableContext
+    ? tableContext.selectedCellCount > 1
+      ? `${tableContext.selectedCellCount} cells`
+      : `R${tableContext.currentCell.rowIndex + 1} C${tableContext.currentCell.columnIndex + 1}`
+    : null;
+
+  return (
+    <div
+      data-testid="table-context-toolbar"
+      className="flex max-w-[min(30rem,calc(100vw-1.5rem))] flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
+    >
+      <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Table
+      </span>
+      {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
+      {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
+      {tableContext?.currentCell.isHeader ? <ToolbarBadge tone="accent">Header row</ToolbarBadge> : null}
+
+      <ToolbarSection label="Style">
+        <select
+          aria-label="Table style"
+          className="h-7 min-w-[9rem] rounded-md border border-border bg-canvas px-2 text-[11px] text-primary disabled:opacity-40"
+          disabled={
+            props.disabled ||
+            props.tableStyles.length === 0 ||
+            !props.onSetTableStyle ||
+            !tableContext?.operations.setTableStyle.enabled
+          }
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+          value={tableContext?.currentStyleId ?? ""}
+          title={tableContext?.operations.setTableStyle.reason}
+        >
+          <option value="" disabled>Table style</option>
+          {props.tableStyles.map((style) => (
+            <option key={style.styleId} value={style.styleId}>
+              {style.displayName}
+            </option>
+          ))}
+        </select>
+      </ToolbarSection>
+
+      <ToolbarSection label="Rows">
+        <ToolbarButton
+          ariaLabel="Add row above"
+          capability={tableContext?.operations.addRowBefore}
+          disabled={props.disabled}
+          onClick={props.onAddRowBefore}
+        >
+          Above
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add row below"
+          capability={tableContext?.operations.addRowAfter}
+          disabled={props.disabled}
+          onClick={props.onAddRowAfter}
+        >
+          Below
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete row"
+          capability={tableContext?.operations.deleteRow}
+          disabled={props.disabled}
+          onClick={props.onDeleteRow}
+        >
+          Delete row
+        </ToolbarButton>
+      </ToolbarSection>
+
+      <ToolbarSection label="Columns">
+        <ToolbarButton
+          ariaLabel="Add column left"
+          capability={tableContext?.operations.addColumnBefore}
+          disabled={props.disabled}
+          onClick={props.onAddColumnBefore}
+        >
+          Left
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add column right"
+          capability={tableContext?.operations.addColumnAfter}
+          disabled={props.disabled}
+          onClick={props.onAddColumnAfter}
+        >
+          Right
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete column"
+          capability={tableContext?.operations.deleteColumn}
+          disabled={props.disabled}
+          onClick={props.onDeleteColumn}
+        >
+          Delete column
+        </ToolbarButton>
+      </ToolbarSection>
+
+      <ToolbarSection label="Cells">
+        <ToolbarButton
+          ariaLabel="Merge cells"
+          capability={tableContext?.operations.mergeCells}
+          disabled={props.disabled}
+          onClick={props.onMergeCells}
+        >
+          Merge
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Split cell"
+          capability={tableContext?.operations.splitCell}
+          disabled={props.disabled}
+          onClick={props.onSplitCell}
+        >
+          Split
+        </ToolbarButton>
+      </ToolbarSection>
+
+      <ToolbarSection label="Fill">
+        <div className="flex items-center gap-1">
+          {CELL_COLORS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              aria-label={`Set cell fill ${color}`}
+              disabled={
+                props.disabled ||
+                !props.onSetCellBackground ||
+                !tableContext?.operations.setCellBackground.enabled
+              }
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={() => props.onSetCellBackground?.(color)}
+              className="h-5 w-5 rounded border border-border disabled:opacity-40"
+              style={{ backgroundColor: color }}
+              title={tableContext?.operations.setCellBackground.reason}
+            />
+          ))}
+        </div>
+      </ToolbarSection>
+
+      <ToolbarSection label="Table">
+        <ToolbarButton
+          ariaLabel="Delete table"
+          capability={tableContext?.operations.deleteTable}
+          danger
+          disabled={props.disabled}
+          onClick={props.onDeleteTable}
+        >
+          Delete table
+        </ToolbarButton>
+      </ToolbarSection>
+    </div>
+  );
+}
+
+function ToolbarBadge(props: {
+  children: React.ReactNode;
+  tone?: "neutral" | "accent";
+}) {
+  return (
+    <span
+      className={[
+        "rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em]",
+        props.tone === "accent"
+          ? "bg-accent-soft text-accent"
+          : "bg-surface text-secondary",
+      ].join(" ")}
+    >
+      {props.children}
+    </span>
+  );
+}
+
+function ToolbarSection(props: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-1 rounded-md bg-surface/60 px-1.5 py-1 ring-1 ring-border/35">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-tertiary">
+        {props.label}
+      </span>
+      <div className="flex flex-wrap items-center gap-1">{props.children}</div>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  capability?: TableOperationCapabilitySnapshot;
+  children: React.ReactNode;
+  danger?: boolean;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  const capabilityEnabled = props.capability?.enabled ?? true;
+  const title = !capabilityEnabled ? props.capability?.reason : undefined;
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled || !props.onClick || !capabilityEnabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      title={title}
+      className={`inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+        props.danger
+          ? "text-danger hover:bg-danger/10"
+          : "text-primary hover:bg-surface"
+      }`}
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-unsaved-modal.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { AlertTriangle } from "lucide-react";
+
+export interface TwUnsavedModalProps {
+  open: boolean;
+  message?: string;
+  onDiscard: () => void;
+  onCancel: () => void;
+}
+
+export function TwUnsavedModal(props: TwUnsavedModalProps) {
+  if (!props.open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/30 backdrop-blur-sm"
+        onClick={props.onCancel}
+      />
+
+      {/* Modal */}
+      <div className="relative mx-4 w-full max-w-md rounded-xl bg-canvas p-6 shadow-lg ring-1 ring-border">
+        <div className="flex items-start gap-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-warning-soft">
+            <AlertTriangle className="h-5 w-5 text-warning" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-base font-semibold text-primary">
+              Unsaved changes
+            </h3>
+            <p className="mt-1.5 text-sm text-secondary leading-relaxed">
+              {props.message ??
+                "You have unsaved changes that will be lost. Your work is being autosaved, but the latest edits may not be saved yet."}
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={props.onCancel}
+            className="rounded-lg px-4 py-2 text-sm font-medium text-secondary hover:bg-surface transition-colors"
+          >
+            Keep editing
+          </button>
+          <button
+            type="button"
+            onClick={props.onDiscard}
+            className="rounded-lg bg-danger px-4 py-2 text-sm font-medium text-white hover:bg-danger/90 transition-colors"
+          >
+            Discard changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/use-before-unload.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+/**
+ * Prompts the browser's native "unsaved changes" dialog when the user
+ * tries to close the tab or navigate away while `shouldWarn` is true.
+ */
+export function useBeforeUnload(shouldWarn: boolean): void {
+  useEffect(() => {
+    if (!shouldWarn) return;
+
+    function handleBeforeUnload(event: BeforeUnloadEvent) {
+      event.preventDefault();
+      // Modern browsers ignore custom messages and show their own.
+      event.returnValue = "";
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [shouldWarn]);
+}

package/src/ui-tailwind/editor-surface/perf-probe.ts

@@ -0,0 +1,179 @@
+export type PerfProbeKind =
+  | "typing"
+  | "selection"
+  | "runtime.create"
+  | "snapshot.surface"
+  | "snapshot.compatibility"
+  | "snapshot.navigation"
+  | "pm.rebuild"
+  | "pm.decorations"
+  | "pm.mount"
+  | "shell.render"
+  | "workspace.chrome"
+  | "selection.sync";
+
+export interface PerfProbeSample {
+  token: string;
+  kind: PerfProbeKind;
+  durationMs: number;
+  recordedAt: number;
+}
+
+interface PendingProbe {
+  kind: PerfProbeKind;
+  startedAt: number;
+}
+
+interface PerfProbeState {
+  enabled?: boolean;
+  nextToken?: number;
+  pending?: Record<string, PendingProbe>;
+  samples?: PerfProbeSample[];
+  maxSamples?: number;
+  invalidationCounts?: Record<string, number>;
+}
+
+export interface PerfProbeSummary {
+  samples: PerfProbeSample[];
+  latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>>;
+  invalidationCounts: Record<string, number>;
+}
+
+declare global {
+  interface Window {
+    __DOCX_REACT_PERF_PROBE__?: PerfProbeState;
+  }
+}
+
+export function startPerfProbe(kind: PerfProbeKind): string | null {
+  const state = getEnabledState();
+  if (!state) {
+    return null;
+  }
+
+  const token = `${kind}-${state.nextToken ?? 0}`;
+  state.nextToken = (state.nextToken ?? 0) + 1;
+  state.pending ??= {};
+  state.pending[token] = {
+    kind,
+    startedAt: performance.now(),
+  };
+  return token;
+}
+
+export function finishPerfProbe(token: string | null | undefined): PerfProbeSample | null {
+  if (!token) {
+    return null;
+  }
+  const state = getEnabledState();
+  if (!state?.pending?.[token]) {
+    return null;
+  }
+
+  const pending = state.pending[token];
+  delete state.pending[token];
+
+  const sample: PerfProbeSample = {
+    token,
+    kind: pending.kind,
+    durationMs: performance.now() - pending.startedAt,
+    recordedAt: Date.now(),
+  };
+
+  pushSample(state, sample);
+
+  return sample;
+}
+
+export function recordPerfSample(
+  kind: PerfProbeKind,
+  durationMs = 0,
+): PerfProbeSample | null {
+  const state = getEnabledState();
+  if (!state) {
+    return null;
+  }
+
+  const token = `${kind}-${state.nextToken ?? 0}`;
+  state.nextToken = (state.nextToken ?? 0) + 1;
+  const sample: PerfProbeSample = {
+    token,
+    kind,
+    durationMs,
+    recordedAt: Date.now(),
+  };
+  pushSample(state, sample);
+  return sample;
+}
+
+export function incrementInvalidationCounter(
+  counter: string,
+  amount = 1,
+): number {
+  const state = getEnabledState();
+  if (!state) {
+    return 0;
+  }
+
+  state.invalidationCounts ??= {};
+  state.invalidationCounts[counter] =
+    (state.invalidationCounts[counter] ?? 0) + amount;
+  return state.invalidationCounts[counter]!;
+}
+
+export function getLatestPerfSummary(): PerfProbeSummary | null {
+  const state = getEnabledState();
+  const samples = state?.samples ?? [];
+  if (!state || samples.length === 0) {
+    return null;
+  }
+
+  return {
+    samples: [...samples],
+    latest: buildLatestSampleMap(samples),
+    invalidationCounts: { ...(state.invalidationCounts ?? {}) },
+  };
+}
+
+export function resetPerfProbeState(): void {
+  const state = getEnabledState();
+  if (!state) {
+    return;
+  }
+  state.nextToken = 0;
+  state.pending = {};
+  state.samples = [];
+  state.invalidationCounts = {};
+}
+
+function getEnabledState(): PerfProbeState | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const state = window.__DOCX_REACT_PERF_PROBE__;
+  if (!state?.enabled) {
+    return null;
+  }
+  return state;
+}
+
+function pushSample(state: PerfProbeState, sample: PerfProbeSample): void {
+  state.samples ??= [];
+  state.samples.push(sample);
+  const maxSamples = state.maxSamples ?? 20;
+  if (state.samples.length > maxSamples) {
+    state.samples.splice(0, state.samples.length - maxSamples);
+  }
+}
+
+function buildLatestSampleMap(
+  samples: PerfProbeSample[],
+): Partial<Record<PerfProbeKind, PerfProbeSample | null>> {
+  const latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>> = {};
+  for (const sample of [...samples].reverse()) {
+    if (latest[sample.kind] === undefined) {
+      latest[sample.kind] = sample;
+    }
+  }
+  return latest;
+}