@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -0,0 +1,298 @@
+import React, { useEffect, useRef, useState, type CSSProperties, type FocusEventHandler, type Ref } from "react";
+
+import { GripHorizontal } from "lucide-react";
+
+import type { RuntimeContextAnalyticsSnapshot } from "../../api/public-types";
+import type { ActiveSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwContextAnalyticsSummary } from "./tw-context-analytics-summary";
+import { TwSelectionToolBlocked } from "./tw-selection-tool-blocked";
+import { TwSelectionToolComment } from "./tw-selection-tool-comment";
+import { TwSelectionToolFormatting } from "./tw-selection-tool-formatting";
+import { TwSelectionToolStructure } from "./tw-selection-tool-structure";
+import { TwSelectionToolSuggestion } from "./tw-selection-tool-suggestion";
+import { TwSelectionToolWorkflow } from "./tw-selection-tool-workflow";
+
+export interface SelectionToolPlacement {
+  placement: "right" | "left" | "above" | "below";
+  style: CSSProperties;
+}
+
+export interface TwSelectionToolHostProps {
+  tool: ActiveSelectionToolModel | null;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+  placement: SelectionToolPlacement | null;
+  rootRef?: Ref<HTMLDivElement>;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onAddComment?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+}
+
+export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
+  if (!props.tool) {
+    return null;
+  }
+
+  const [isDetached, setIsDetached] = useState(false);
+  const [detachedOffset, setDetachedOffset] = useState({ x: 0, y: 0 });
+  const dragStateRef = useRef<{
+    startX: number;
+    startY: number;
+    originX: number;
+    originY: number;
+  } | null>(null);
+  const supportsTopMenuControls = isTopMenuKind(props.tool.kind);
+
+  useEffect(() => {
+    setIsDetached(false);
+    setDetachedOffset({ x: 0, y: 0 });
+    dragStateRef.current = null;
+  }, [props.tool.kind]);
+
+  useEffect(() => {
+    if (!supportsTopMenuControls || typeof window === "undefined") {
+      return;
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!dragStateRef.current) {
+        return;
+      }
+      setDetachedOffset({
+        x: dragStateRef.current.originX + (event.clientX - dragStateRef.current.startX),
+        y: dragStateRef.current.originY + (event.clientY - dragStateRef.current.startY),
+      });
+    };
+
+    const handleMouseUp = () => {
+      dragStateRef.current = null;
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [supportsTopMenuControls]);
+
+  const overlayTestId = getOverlayTestId(props.tool.kind, Boolean(props.placement));
+  const toolContent = renderTool(props, props.tool);
+  const content = toolContent ? (
+    <div
+      ref={props.rootRef}
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      className="flex flex-col gap-2"
+    >
+      {props.contextAnalytics ? (
+        <TwContextAnalyticsSummary
+          snapshot={props.contextAnalytics}
+          compact
+          testId="selection-context-analytics"
+        />
+      ) : null}
+      {toolContent}
+    </div>
+  ) : null;
+  const wrappedContent = content && supportsTopMenuControls ? (
+    <div className="flex flex-col gap-1.5">
+      <div className="inline-flex items-center gap-2 self-center rounded-xl border border-border/70 bg-canvas/94 px-2 py-1.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)]">
+        <button
+          type="button"
+          aria-label="Drag top menu"
+          data-testid="selection-tool-drag-handle"
+          className="inline-flex h-7 items-center justify-center rounded-lg border border-transparent px-2 text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
+          onMouseDown={(event) => {
+            preserveEditorSelectionMouseDown(event);
+            setIsDetached(true);
+            dragStateRef.current = {
+              startX: event.clientX,
+              startY: event.clientY,
+              originX: isDetached ? detachedOffset.x : 0,
+              originY: isDetached ? detachedOffset.y : 0,
+            };
+          }}
+        >
+          <GripHorizontal className="h-3.5 w-3.5" />
+        </button>
+        <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          {getTopMenuLabel(props.tool.kind)}
+        </span>
+        <button
+          type="button"
+          data-testid="selection-tool-attach-toggle"
+          className="inline-flex h-7 items-center rounded-lg border border-border/60 px-2.5 text-[11px] font-medium text-secondary transition-colors hover:bg-surface hover:text-primary"
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={() => {
+            setIsDetached((current) => !current);
+          }}
+        >
+          {isDetached ? "Attach menu" : "Detach menu"}
+        </button>
+      </div>
+      {content}
+    </div>
+  ) : content;
+
+  if (!wrappedContent) {
+    return null;
+  }
+
+  if (isDetached) {
+    return (
+      <div className="pointer-events-none absolute inset-0 z-20" data-testid={overlayTestId}>
+        <div
+          className="pointer-events-auto absolute"
+          data-placement="detached"
+          style={{
+            left: `calc(50% + ${detachedOffset.x}px)`,
+            top: `${12 + detachedOffset.y}px`,
+            transform: "translateX(-50%)",
+          }}
+        >
+          {wrappedContent}
+        </div>
+      </div>
+    );
+  }
+
+  if (props.placement) {
+    return (
+      <div className="pointer-events-none absolute inset-0 z-20" data-testid={overlayTestId}>
+        <div
+          className="pointer-events-auto absolute"
+          data-placement={props.placement.placement}
+          style={props.placement.style}
+        >
+          {wrappedContent}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
+      data-testid={overlayTestId}
+    >
+      <div className="pointer-events-auto" data-placement="fallback">
+        {wrappedContent}
+      </div>
+    </div>
+  );
+}
+
+function renderTool(
+  props: TwSelectionToolHostProps,
+  tool: ActiveSelectionToolModel,
+): React.ReactNode {
+  switch (tool.kind) {
+    case "formatting-inline":
+      return (
+        <TwSelectionToolFormatting
+          model={tool}
+          onToggleBold={props.onToggleBold}
+          onToggleItalic={props.onToggleItalic}
+          onToggleUnderline={props.onToggleUnderline}
+          onSetTextColor={props.onSetTextColor}
+          onSetHighlightColor={props.onSetHighlightColor}
+          onAddComment={props.onAddComment}
+        />
+      );
+    case "suggestion-review":
+      return (
+        <TwSelectionToolSuggestion
+          model={tool}
+          onAccept={props.onAcceptSuggestion}
+          onReject={props.onRejectSuggestion}
+          onEditSuggestion={props.onEditSuggestion}
+          onAddComment={props.onAddComment}
+        />
+      );
+    case "structure-context":
+      return (
+        <TwSelectionToolStructure
+          model={tool}
+          onSetTableStyle={props.onSetTableStyle}
+          onAddRowBefore={props.onAddRowBefore}
+          onAddRowAfter={props.onAddRowAfter}
+          onAddColumnBefore={props.onAddColumnBefore}
+          onAddColumnAfter={props.onAddColumnAfter}
+          onDeleteRow={props.onDeleteRow}
+          onDeleteColumn={props.onDeleteColumn}
+          onDeleteTable={props.onDeleteTable}
+          onMergeCells={props.onMergeCells}
+          onSplitCell={props.onSplitCell}
+          onSetCellBackground={props.onSetCellBackground}
+          onSetImageLayout={props.onSetImageLayout}
+          onSetImageFrame={props.onSetImageFrame}
+          onRestartNumbering={props.onRestartNumbering}
+          onContinueNumbering={props.onContinueNumbering}
+        />
+      );
+    case "comment-thread":
+      return <TwSelectionToolComment model={tool} onAddComment={props.onAddComment} />;
+    case "workflow-task":
+      return <TwSelectionToolWorkflow model={tool} />;
+    case "blocked-explainer":
+      return <TwSelectionToolBlocked model={tool} />;
+  }
+}
+
+function getOverlayTestId(kind: ActiveSelectionToolModel["kind"], hasPlacement: boolean): string {
+  switch (kind) {
+    case "suggestion-review":
+      return hasPlacement ? "suggestion-card-overlay" : "suggestion-card-fallback";
+    case "formatting-inline":
+      return hasPlacement ? "selection-toolbar-overlay" : "selection-toolbar-fallback";
+    default:
+      return hasPlacement ? "selection-tool-overlay" : "selection-tool-fallback";
+  }
+}
+
+function isTopMenuKind(kind: ActiveSelectionToolModel["kind"]): boolean {
+  return kind === "formatting-inline" || kind === "suggestion-review" || kind === "workflow-task";
+}
+
+function getTopMenuLabel(kind: ActiveSelectionToolModel["kind"]): string {
+  switch (kind) {
+    case "formatting-inline":
+      return "Formatting";
+    case "suggestion-review":
+      return "Suggestion";
+    case "workflow-task":
+      return "Workflow";
+    default:
+      return "Menu";
+  }
+}

package/src/ui-tailwind/chrome/tw-selection-tool-structure.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+
+import type { StructureContextSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwImageContextToolbar } from "./tw-image-context-toolbar";
+import { TwObjectContextToolbar } from "./tw-object-context-toolbar";
+import { TwTableContextToolbar } from "./tw-table-context-toolbar";
+
+export interface TwSelectionToolStructureProps {
+  model: StructureContextSelectionToolModel;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+}
+
+export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
+  switch (props.model.structureKind) {
+    case "image":
+      return props.model.activeImage ? (
+        <TwImageContextToolbar
+          activeImage={props.model.activeImage}
+          disabled={!props.model.canMutate}
+          onSetImageLayout={props.onSetImageLayout}
+          onSetImageFrame={props.onSetImageFrame}
+        />
+      ) : null;
+    case "object":
+      // Shapes and text boxes are shipped as informational-only structure tools
+      // until there is a real runtime-backed object mutation path.
+      return props.model.activeObject ? (
+        <TwObjectContextToolbar activeObject={props.model.activeObject} />
+      ) : null;
+    case "table":
+      return (
+        <TwTableContextToolbar
+          disabled={!props.model.canMutate}
+          tableContext={props.model.activeTable ?? null}
+          tableStyles={props.model.tableStyles ?? []}
+          onSetTableStyle={props.onSetTableStyle}
+          onAddRowBefore={props.onAddRowBefore}
+          onAddRowAfter={props.onAddRowAfter}
+          onAddColumnBefore={props.onAddColumnBefore}
+          onAddColumnAfter={props.onAddColumnAfter}
+          onDeleteRow={props.onDeleteRow}
+          onDeleteColumn={props.onDeleteColumn}
+          onDeleteTable={props.onDeleteTable}
+          onMergeCells={props.onMergeCells}
+          onSplitCell={props.onSplitCell}
+          onSetCellBackground={props.onSetCellBackground}
+        />
+      );
+    case "list":
+      return (
+        <div
+          data-testid="list-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">
+            List
+          </span>
+          <ToolbarButton
+            ariaLabel="Continue numbering"
+            disabled={!props.model.canMutate || !props.onContinueNumbering}
+            onClick={props.onContinueNumbering}
+          >
+            Continue
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Restart numbering"
+            disabled={!props.model.canMutate || !props.onRestartNumbering}
+            onClick={props.onRestartNumbering}
+          >
+            Restart
+          </ToolbarButton>
+        </div>
+      );
+  }
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  disabled: boolean;
+  onClick?: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center 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"
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-suggestion.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { FocusEventHandler } from "react";
+
+import type { SuggestionReviewSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { TwSuggestionCard } from "./tw-suggestion-card";
+
+export interface TwSelectionToolSuggestionProps {
+  model: SuggestionReviewSelectionToolModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onEditSuggestion?: () => void;
+  onAddComment?: () => void;
+}
+
+export function TwSelectionToolSuggestion(props: TwSelectionToolSuggestionProps) {
+  return (
+    <TwSuggestionCard
+      model={props.model}
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      onAccept={props.onAccept}
+      onReject={props.onReject}
+      onEditSuggestion={props.onEditSuggestion}
+      onAddComment={props.onAddComment}
+    />
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-workflow.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import type { WorkflowTaskSelectionToolModel } from "../../ui/headless/selection-tool-types";
+
+export interface TwSelectionToolWorkflowProps {
+  model: WorkflowTaskSelectionToolModel;
+}
+
+export function TwSelectionToolWorkflow(props: TwSelectionToolWorkflowProps) {
+  return (
+    <div
+      data-testid="workflow-task-selection-tool"
+      className="max-w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-border bg-canvas px-3 py-2 shadow-lg"
+    >
+      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Workflow task
+      </div>
+      <div className="mt-1 text-sm text-primary">{props.model.workflowTitle ?? "Scoped task"}</div>
+      {props.model.workflowDetail ? (
+        <div className="mt-1 text-xs text-secondary">{props.model.workflowDetail}</div>
+      ) : null}
+      {props.model.disabledReason ? (
+        <div className="mt-2 text-xs text-tertiary">{props.model.disabledReason}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-toolbar.tsx

@@ -87,7 +87,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
             disabled={addCommentDisabled}
             onMouseDown={preserveEditorSelectionMouseDown}
             onClick={props.onAddComment}
-            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-surface disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
           >
             <MessageSquare className="h-3.5 w-3.5" />
           </button>
@@ -117,7 +117,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
           <span
             className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
               model.badges.some((badge) => badge.tone === "accent")
-                ? "bg-accent-soft text-accent"
+                ? "bg-canvas text-accent ring-1 ring-accent/25"
                 : "bg-surface text-tertiary"
             }`}
           >
@@ -166,7 +166,7 @@ function ToolbarActionButton(props: ToolbarActionButtonProps) {
           onClick={props.onClick}
           className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-30 ${
             props.pressed
-              ? "bg-accent-soft text-accent"
+              ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm"
               : "text-secondary hover:bg-surface"
           } ${focusRingClass}`}
         >

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

@@ -45,7 +45,7 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
           </div>
         </div>
         {contextLabel ? (
-          <div className="shrink-0 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-accent">
+          <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}
@@ -118,9 +118,9 @@ function SuggestionActionButton(props: {
   onClick?: () => void;
 }) {
   const toneClass = props.tone === "accept"
-    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300"
+    ? "border-success/35 bg-canvas text-success hover:bg-surface"
     : props.tone === "reject"
-      ? "border-rose-500/30 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-300"
+      ? "border-danger/35 bg-canvas text-danger hover:bg-surface"
       : "border-border text-secondary hover:bg-surface";
 
   return (