@beyondwork/docx-react-component 1.0.29 → 1.0.30

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

@@ -0,0 +1,121 @@
+import React from "react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import type { ActiveImageContext } from "../../ui/headless/selection-tool-types";
+
+export interface TwImageContextToolbarProps {
+  activeImage: ActiveImageContext;
+  disabled: boolean;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+}
+
+const IMAGE_SIZE_PRESETS = [
+  { label: "Small image", widthEmu: 1828800, heightEmu: 914400 },
+  { label: "Medium image", widthEmu: 2743200, heightEmu: 1371600 },
+  { label: "Large image", widthEmu: 3657600, heightEmu: 1828800 },
+] as const;
+
+const NUDGE_EMU = 228600;
+
+export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
+  const { activeImage } = props;
+
+  return (
+    <div
+      data-testid="image-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">
+        Image
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {activeImage.display}
+      </span>
+      {IMAGE_SIZE_PRESETS.map((preset) => (
+        <ToolbarButton
+          key={preset.label}
+          ariaLabel={preset.label}
+          disabled={props.disabled || !props.onSetImageLayout}
+          onClick={() =>
+            props.onSetImageLayout?.(activeImage.mediaId, {
+              widthEmu: preset.widthEmu,
+              heightEmu: preset.heightEmu,
+            })}
+        >
+          {preset.label.replace(" image", "")}
+        </ToolbarButton>
+      ))}
+      {activeImage.display === "floating" ? (
+        <>
+          <ToolbarButton
+            ariaLabel="Nudge image left"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) - NUDGE_EMU,
+              })}
+          >
+            Left
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image right"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) + NUDGE_EMU,
+              })}
+          >
+            Right
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image up"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) - NUDGE_EMU,
+              })}
+          >
+            Up
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Nudge image down"
+            disabled={props.disabled || !props.onSetImageFrame}
+            onClick={() =>
+              props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) + NUDGE_EMU,
+              })}
+          >
+            Down
+          </ToolbarButton>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-layout-panel.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+import type {
+  PageLayoutSnapshot,
+  SectionPageNumberingPatch,
+  SectionBreakType,
+  SectionLayoutPatch,
+} from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwLayoutPanelProps {
+  pageLayout: PageLayoutSnapshot;
+  readOnly: boolean;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
+  onSetSectionPageNumbering?: (
+    sectionIndex: number,
+    patch: SectionPageNumberingPatch | null,
+  ) => void;
+}
+
+export function TwLayoutPanel(props: TwLayoutPanelProps) {
+  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
+  const titlePageEnabled = props.pageLayout.differentFirstPage;
+
+  return (
+    <div className="mt-3 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">
+        Section
+      </span>
+      <ToolbarButton
+        ariaLabel="Insert next-page section break"
+        disabled={props.readOnly || !props.onInsertSectionBreak}
+        onClick={() => props.onInsertSectionBreak?.("nextPage")}
+      >
+        Next-page break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel={`Switch section to ${nextOrientation}`}
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            pageSize: {
+              orientation: nextOrientation,
+              width: props.pageLayout.pageHeight,
+              height: props.pageLayout.pageWidth,
+            },
+          })}
+      >
+        {nextOrientation === "landscape" ? "Landscape" : "Portrait"}
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Delete current section break"
+        disabled={props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak}
+        onClick={() => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex)}
+      >
+        Delete break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Restart page numbering at 1"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            start: 1,
+          })}
+      >
+        Restart numbering
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Use roman page numbering"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            format: "roman",
+          })}
+      >
+        Roman numerals
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Toggle different first page"
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            titlePage: !titlePageEnabled,
+          })}
+      >
+        {titlePageEnabled ? "Same first page" : "Different first page"}
+      </ToolbarButton>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import type { ActiveObjectContext } from "../../ui/headless/selection-tool-types";
+
+export interface TwObjectContextToolbarProps {
+  activeObject: ActiveObjectContext;
+}
+
+export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
+  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
+
+  return (
+    <div
+      data-testid="object-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">
+        Object
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {label}
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {props.activeObject.display}
+      </span>
+      <span className="text-xs text-secondary">
+        Object selection is active.
+      </span>
+    </div>
+  );
+}