@beyondwork/docx-react-component 1.0.29 → 1.0.30

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(28rem,calc(100vw-2rem))] flex-col gap-2 rounded-2xl border border-border/80 bg-canvas px-3 py-2 shadow-xl ring-1 ring-border/80"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      role="group"
+      aria-label="Suggestion actions"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-warning">
+            {props.model.kindLabel}
+          </div>
+          <div className="mt-1 max-w-[16rem] truncate text-sm text-primary">
+            {props.model.previewText}
+          </div>
+        </div>
+        {contextLabel ? (
+          <div className="shrink-0 rounded-full bg-canvas px-2 py-0.5 text-[10px] 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.5">
+        <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-8 items-center gap-1 rounded-lg border border-border px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+              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-8 items-center gap-1 rounded-lg border px-2.5 text-xs 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,200 @@
+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) {
+  return (
+    <div
+      data-testid="table-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Table
+      </span>
+
+      {props.tableContext?.currentCell.isHeader ? (
+        <span className="rounded bg-accent-soft px-2 py-1 text-[10px] font-medium text-accent">
+          Header row
+        </span>
+      ) : null}
+
+      <select
+        aria-label="Table style"
+        className="h-8 rounded-md border border-border bg-canvas px-2 text-xs text-primary disabled:opacity-40"
+        disabled={
+          props.disabled ||
+          props.tableStyles.length === 0 ||
+          !props.onSetTableStyle ||
+          !props.tableContext?.operations.setTableStyle.enabled
+        }
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+        value={props.tableContext?.currentStyleId ?? ""}
+        title={props.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>
+
+      <ToolbarButton
+        ariaLabel="Add row above"
+        capability={props.tableContext?.operations.addRowBefore}
+        disabled={props.disabled}
+        onClick={props.onAddRowBefore}
+      >
+        Row above
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Add row below"
+        capability={props.tableContext?.operations.addRowAfter}
+        disabled={props.disabled}
+        onClick={props.onAddRowAfter}
+      >
+        Row below
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Delete row"
+        capability={props.tableContext?.operations.deleteRow}
+        disabled={props.disabled}
+        onClick={props.onDeleteRow}
+      >
+        Delete row
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Add column left"
+        capability={props.tableContext?.operations.addColumnBefore}
+        disabled={props.disabled}
+        onClick={props.onAddColumnBefore}
+      >
+        Column left
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Add column right"
+        capability={props.tableContext?.operations.addColumnAfter}
+        disabled={props.disabled}
+        onClick={props.onAddColumnAfter}
+      >
+        Column right
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Delete column"
+        capability={props.tableContext?.operations.deleteColumn}
+        disabled={props.disabled}
+        onClick={props.onDeleteColumn}
+      >
+        Delete column
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Merge cells"
+        capability={props.tableContext?.operations.mergeCells}
+        disabled={props.disabled}
+        onClick={props.onMergeCells}
+      >
+        Merge
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Split cell"
+        capability={props.tableContext?.operations.splitCell}
+        disabled={props.disabled}
+        onClick={props.onSplitCell}
+      >
+        Split
+      </ToolbarButton>
+
+      <div className="flex items-center gap-1">
+        <span className="text-[11px] text-secondary">Fill</span>
+        {CELL_COLORS.map((color) => (
+          <button
+            key={color}
+            type="button"
+            aria-label={`Set cell fill ${color}`}
+            disabled={
+              props.disabled ||
+              !props.onSetCellBackground ||
+              !props.tableContext?.operations.setCellBackground.enabled
+            }
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => props.onSetCellBackground?.(color)}
+            className="h-6 w-6 rounded border border-border disabled:opacity-40"
+            style={{ backgroundColor: color }}
+            title={props.tableContext?.operations.setCellBackground.reason}
+          />
+        ))}
+      </div>
+
+      <ToolbarButton
+        ariaLabel="Delete table"
+        capability={props.tableContext?.operations.deleteTable}
+        danger
+        disabled={props.disabled}
+        onClick={props.onDeleteTable}
+      >
+        Delete table
+      </ToolbarButton>
+    </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-8 items-center rounded-md px-2 text-xs 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;
+}