@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/chrome/review-queue-bar.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import { BookmarkPlus, ChevronLeft, ChevronRight, MessageSquareText, Rows3 } from "lucide-react";
+
+import type { ReviewQueueSnapshot } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwReviewQueueBarProps {
+  queue: ReviewQueueSnapshot;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  onMarkSection?: () => void;
+}
+
+const buttonClass =
+  "inline-flex h-8 items-center gap-1 rounded-lg border border-border/80 bg-canvas px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-40";
+
+export function TwReviewQueueBar(props: TwReviewQueueBarProps) {
+  const activeItem = props.queue.items[props.queue.activeIndex] ?? null;
+  const activeLabel =
+    activeItem?.label ??
+    (props.queue.totalCount > 0 ? "Review queue" : "No review items");
+  const activeKindLabel = activeItem ? formatReviewQueueItemKind(activeItem.kind) : null;
+
+  return (
+    <div className="border-b border-border/80 bg-surface/80 px-3 py-2.5 backdrop-blur-sm">
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          aria-label="Previous review item"
+          className={buttonClass}
+          disabled={props.queue.totalCount === 0}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={props.onPrevious}
+        >
+          <ChevronLeft className="h-3.5 w-3.5" />
+          Prev
+        </button>
+        <button
+          type="button"
+          aria-label="Next review item"
+          className={buttonClass}
+          disabled={props.queue.totalCount === 0}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={props.onNext}
+        >
+          Next
+          <ChevronRight className="h-3.5 w-3.5" />
+        </button>
+        {props.onMarkSection ? (
+          <button
+            type="button"
+            aria-label="Mark section for review"
+            className={buttonClass}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={props.onMarkSection}
+          >
+            <BookmarkPlus className="h-3.5 w-3.5" />
+            Mark section
+          </button>
+        ) : null}
+        <div className="ml-auto flex flex-wrap items-center gap-2 text-xs text-secondary">
+          <span className="inline-flex items-center gap-1 rounded-full bg-canvas px-2.5 py-1 font-medium text-primary">
+            <MessageSquareText className="h-3.5 w-3.5 text-comment" />
+            {props.queue.openCount} open
+          </span>
+          <span className="inline-flex items-center gap-1 rounded-full bg-canvas px-2.5 py-1 font-medium text-primary">
+            <Rows3 className="h-3.5 w-3.5 text-accent" />
+            {props.queue.totalCount} total
+          </span>
+        </div>
+      </div>
+      <div className="mt-2 flex items-center gap-2 min-w-0">
+        {activeKindLabel ? (
+          <span
+            className="inline-flex shrink-0 rounded-full bg-canvas px-2 py-0.5 text-[11px] font-medium text-secondary"
+            data-testid="review-queue-item-kind"
+          >
+            {activeKindLabel}
+          </span>
+        ) : null}
+        <div className="min-w-0 truncate text-sm font-medium text-primary">{activeLabel}</div>
+      </div>
+    </div>
+  );
+}
+
+function formatReviewQueueItemKind(kind: ReviewQueueSnapshot["items"][number]["kind"]): string {
+  switch (kind) {
+    case "comment":
+      return "Comment";
+    case "change":
+      return "Redline";
+    case "section_mark":
+      return "Tag";
+  }
+}

package/src/ui-tailwind/chrome/tw-context-analytics-summary.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+
+import type { RuntimeContextAnalyticsSnapshot } from "../../api/public-types";
+
+const TONE_CLASS: Record<NonNullable<RuntimeContextAnalyticsSnapshot["badges"][number]["tone"]>, string> = {
+  neutral: "bg-surface text-secondary",
+  accent: "bg-accent-soft text-accent",
+  warning: "bg-warning-soft text-warning",
+  danger: "bg-danger-soft text-danger",
+  success: "bg-success-soft text-success",
+};
+
+export interface TwContextAnalyticsSummaryProps {
+  snapshot?: RuntimeContextAnalyticsSnapshot | null;
+  compact?: boolean;
+  testId?: string;
+  className?: string;
+}
+
+export function TwContextAnalyticsSummary(props: TwContextAnalyticsSummaryProps) {
+  if (!props.snapshot) {
+    return null;
+  }
+
+  const badges = props.snapshot.badges.slice(0, props.compact ? 3 : 4);
+  const primaryAction = props.snapshot.nextActions[0];
+  if (badges.length === 0 && !primaryAction) {
+    return null;
+  }
+
+  return (
+    <div
+      data-testid={props.testId}
+      className={[
+        "rounded-lg bg-surface/92 p-2.5 shadow-[0_1px_0_var(--color-shadow)] ring-1 ring-border/40",
+        props.className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {badges.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {badges.map((badge) => (
+            <span
+              key={badge.key}
+              className={[
+                "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
+                TONE_CLASS[badge.tone ?? "neutral"],
+              ].join(" ")}
+            >
+              {formatBadgeLabel(badge)}
+            </span>
+          ))}
+        </div>
+      ) : null}
+      {primaryAction ? (
+        <p className="mt-1 text-[11px] text-secondary">
+          {primaryAction.label}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function formatContextAnalyticsInlineSummary(
+  snapshot?: RuntimeContextAnalyticsSnapshot | null,
+): string | null {
+  if (!snapshot) {
+    return null;
+  }
+
+  const parts: string[] = [];
+  if (typeof snapshot.counts.openWorkItems === "number" && snapshot.counts.openWorkItems > 0) {
+    parts.push(`${snapshot.counts.openWorkItems} open ${pluralize(snapshot.counts.openWorkItems, "work item")}`);
+  }
+  if (
+    typeof snapshot.counts.unresolvedComments === "number" &&
+    snapshot.counts.unresolvedComments > 0
+  ) {
+    parts.push(
+      `${snapshot.counts.unresolvedComments} unresolved ${pluralize(snapshot.counts.unresolvedComments, "comment")}`,
+    );
+  }
+  if (
+    typeof snapshot.counts.pendingRevisions === "number" &&
+    snapshot.counts.pendingRevisions > 0
+  ) {
+    parts.push(
+      `${snapshot.counts.pendingRevisions} pending ${pluralize(snapshot.counts.pendingRevisions, "change")}`,
+    );
+  }
+  if (
+    parts.length === 0 &&
+    typeof snapshot.counts.blockedCommands === "number" &&
+    snapshot.counts.blockedCommands > 0
+  ) {
+    parts.push(
+      `${snapshot.counts.blockedCommands} blocked ${pluralize(snapshot.counts.blockedCommands, "action")}`,
+    );
+  }
+  if (parts.length === 0) {
+    if (snapshot.state.exportReadiness === "blocked") {
+      parts.push("Export blocked");
+    } else if (snapshot.state.exportReadiness === "warning") {
+      parts.push("Export warnings");
+    }
+  }
+  if (parts.length === 0) {
+    return snapshot.badges[0] ? formatBadgeLabel(snapshot.badges[0]) : null;
+  }
+  return parts.slice(0, 3).join(" · ");
+}
+
+function formatBadgeLabel(
+  badge: RuntimeContextAnalyticsSnapshot["badges"][number],
+): string {
+  return badge.value === undefined ? badge.label : `${badge.label}: ${badge.value}`;
+}
+
+function pluralize(count: number, singular: string): string {
+  return count === 1 ? singular : `${singular}s`;
+}

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

@@ -1,15 +1,7 @@
 import React from "react";
 
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface ActiveImageContext {
-  mediaId: string;
-  display: "inline" | "floating";
-  widthEmu?: number;
-  heightEmu?: number;
-  horizontalOffsetEmu?: number;
-  verticalOffsetEmu?: number;
-}
+import type { ActiveImageContext } from "../../ui/headless/selection-tool-types";
 
 export interface TwImageContextToolbarProps {
   activeImage: ActiveImageContext;

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

@@ -1,9 +1,5 @@
 import React from "react";
-
-export interface ActiveObjectContext {
-  kind: "textbox" | "shape";
-  display: "inline" | "floating";
-}
+import type { ActiveObjectContext } from "../../ui/headless/selection-tool-types";
 
 export interface TwObjectContextToolbarProps {
   activeObject: ActiveObjectContext;

package/src/ui-tailwind/chrome/tw-page-ruler.tsx

@@ -10,6 +10,8 @@ interface ActiveParagraphLayout {
   rightIndent: number;
   firstLineOffset: number;
   tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  indentationReadOnly?: boolean;
+  tabStopsReadOnly?: boolean;
 }
 
 export interface TwPageRulerProps {
@@ -53,6 +55,8 @@ export function TwPageRuler(props: TwPageRulerProps) {
   const activeRegion = props.viewState.activePageRegion?.region ?? "body";
   const isBodyParagraphContext =
     activeRegion === "body" && Boolean(props.paragraphLayout);
+  const indentationReadOnly = props.readOnly || Boolean(props.paragraphLayout?.indentationReadOnly);
+  const tabStopsReadOnly = props.readOnly || Boolean(props.paragraphLayout?.tabStopsReadOnly);
   const availableHeader = props.pageLayout.headerVariants[0];
   const availableFooter = props.pageLayout.footerVariants[0];
 
@@ -68,7 +72,7 @@ export function TwPageRuler(props: TwPageRulerProps) {
   }, []);
 
   function beginDrag(kind: DragKind, clientX: number): void {
-    if (!isBodyParagraphContext || !props.paragraphLayout || props.readOnly) {
+    if (!isBodyParagraphContext || !props.paragraphLayout || indentationReadOnly) {
       return;
     }
 
@@ -211,31 +215,6 @@ export function TwPageRuler(props: TwPageRulerProps) {
             Footer
           </button>
         ) : null}
-        {props.viewState.activeListContext ? (
-          <>
-            <div className="h-4 w-px bg-border" />
-            <button
-              type="button"
-              aria-label="Continue numbering"
-              title="Continue numbering from previous list"
-              disabled={props.readOnly}
-              onClick={props.onContinueNumbering}
-              className={controlButtonClass}
-            >
-              Continue
-            </button>
-            <button
-              type="button"
-              aria-label="Restart numbering"
-              title="Restart numbering at 1"
-              disabled={props.readOnly}
-              onClick={props.onRestartNumbering}
-              className={controlButtonClass}
-            >
-              Restart
-            </button>
-          </>
-        ) : null}
       </div>
 
       <div
@@ -252,7 +231,7 @@ export function TwPageRuler(props: TwPageRulerProps) {
         className="relative h-14 overflow-hidden rounded-xl border border-border bg-canvas"
         onClick={(event) => {
           if (
-            props.readOnly ||
+            tabStopsReadOnly ||
             !isBodyParagraphContext ||
             !props.paragraphLayout ||
             !props.onSetTabStops
@@ -287,7 +266,7 @@ export function TwPageRuler(props: TwPageRulerProps) {
               data-handle="true"
               aria-label="Left indent handle"
               title={`Left indent: ${effectiveLayout?.leftIndent ?? 0} twips`}
-              disabled={props.readOnly}
+              disabled={indentationReadOnly}
               className={`absolute top-8 h-4 w-4 -translate-x-1/2 rounded-[5px] border border-accent/40 bg-accent-soft shadow-sm transition-opacity ${
                 handlesOverlap ? "opacity-80 z-10" : ""
               }`}
@@ -302,7 +281,7 @@ export function TwPageRuler(props: TwPageRulerProps) {
               data-handle="true"
               aria-label="First line indent handle"
               title={`First line offset: ${effectiveLayout?.firstLineOffset ?? 0} twips`}
-              disabled={props.readOnly}
+              disabled={indentationReadOnly}
               className={`absolute top-1 h-4 w-4 -translate-x-1/2 rotate-45 rounded-[4px] border border-primary/30 bg-surface-raised shadow-sm transition-opacity ${
                 handlesOverlap ? "opacity-80 z-20" : ""
               }`}

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+import type { BlockedExplainerSelectionToolModel } from "../../ui/headless/selection-tool-types";
+
+export interface TwSelectionToolBlockedProps {
+  model: BlockedExplainerSelectionToolModel;
+}
+
+export function TwSelectionToolBlocked(props: TwSelectionToolBlockedProps) {
+  return (
+    <div
+      data-testid="blocked-selection-tool"
+      className="max-w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-border bg-canvas px-3 py-2 shadow-lg"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Unavailable here
+      </div>
+      <div className="mt-1 text-sm text-primary">{props.model.disabledReason}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import React from "react";
+
+import type { CommentThreadSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwSelectionToolCommentProps {
+  model: CommentThreadSelectionToolModel;
+  onAddComment?: () => void;
+}
+
+export function TwSelectionToolComment(props: TwSelectionToolCommentProps) {
+  return (
+    <div
+      data-testid="comment-thread-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">
+        Comment
+      </div>
+      <div className="mt-1 truncate text-sm text-primary">
+        {props.model.previewText ?? "Comment thread"}
+      </div>
+      <button
+        type="button"
+        aria-label="Add comment from thread"
+        disabled={!props.model.canAddComment || !props.onAddComment}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={props.onAddComment}
+        className="mt-2 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"
+      >
+        Comment
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import React, { forwardRef } from "react";
+import type { FocusEventHandler } from "react";
+
+import type { FormattingInlineSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { TwSelectionToolbar } from "./tw-selection-toolbar";
+
+export interface TwSelectionToolFormattingProps {
+  model: FormattingInlineSelectionToolModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onAddComment?: () => void;
+}
+
+export const TwSelectionToolFormatting = forwardRef<HTMLDivElement, TwSelectionToolFormattingProps>(
+  function TwSelectionToolFormatting(props, ref) {
+    return (
+      <TwSelectionToolbar
+        ref={ref}
+        model={props.model}
+        disabledReason={props.model.disabledReason}
+        onFocusCapture={props.onFocusCapture}
+        onBlurCapture={props.onBlurCapture}
+        onToggleBold={props.onToggleBold}
+        onToggleItalic={props.onToggleItalic}
+        onToggleUnderline={props.onToggleUnderline}
+        onSetTextColor={props.onSetTextColor}
+        onSetHighlightColor={props.onSetHighlightColor}
+        onAddComment={props.onAddComment}
+      />
+    );
+  },
+);