@beyondwork/docx-react-component 1.0.30 → 1.0.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/ui-tailwind/chrome/responsive-chrome.ts

@@ -0,0 +1,46 @@
+export const NARROW_CHROME_MAX_WIDTH = 1023;
+
+export interface ResponsiveChromeStateInput {
+  viewportWidth?: number;
+  reviewRailAvailable: boolean;
+  reviewRailOpen: boolean;
+}
+
+export interface ResponsiveChromeState {
+  isNarrow: boolean;
+  showSidebarToggle: boolean;
+  showDockedReviewRail: boolean;
+  showDrawerReviewRail: boolean;
+}
+
+export function isNarrowChromeViewport(viewportWidth?: number): boolean {
+  return typeof viewportWidth === "number" && viewportWidth <= NARROW_CHROME_MAX_WIDTH;
+}
+
+export function getInitialReviewRailOpen(input: {
+  viewportWidth?: number;
+  reviewRailAvailable: boolean;
+}): boolean {
+  return input.reviewRailAvailable && !isNarrowChromeViewport(input.viewportWidth);
+}
+
+export function resolveResponsiveChromeState(
+  input: ResponsiveChromeStateInput,
+): ResponsiveChromeState {
+  const isNarrow = isNarrowChromeViewport(input.viewportWidth);
+  if (!input.reviewRailAvailable) {
+    return {
+      isNarrow,
+      showSidebarToggle: false,
+      showDockedReviewRail: false,
+      showDrawerReviewRail: false,
+    };
+  }
+
+  return {
+    isNarrow,
+    showSidebarToggle: true,
+    showDockedReviewRail: !isNarrow && input.reviewRailOpen,
+    showDrawerReviewRail: isNarrow && input.reviewRailOpen,
+  };
+}

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

@@ -30,12 +30,12 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
   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"
+      className="flex flex-wrap items-center gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
     >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <span className="text-[9px] 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">
+      <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
         {activeImage.display}
       </span>
       {IMAGE_SIZE_PRESETS.map((preset) => (
@@ -113,7 +113,7 @@ function ToolbarButton(props: {
       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"
+      className="inline-flex h-7 items-center rounded-md px-2 text-[11px] 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

@@ -11,18 +11,18 @@ export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
   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"
+      className="flex flex-wrap items-center gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
     >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <span className="text-[9px] 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">
+      <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] 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">
+      <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
         {props.activeObject.display}
       </span>
-      <span className="text-xs text-secondary">
+      <span className="text-[11px] text-secondary">
         Object selection is active.
       </span>
     </div>

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

@@ -10,14 +10,14 @@ 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"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
       role="status"
       aria-live="polite"
     >
-      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Unavailable here
       </div>
-      <div className="mt-1 text-sm text-primary">{props.model.disabledReason}</div>
+      <div className="mt-0.5 text-[13px] text-primary">{props.model.disabledReason}</div>
     </div>
   );
 }

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

@@ -12,12 +12,12 @@ 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"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
     >
-      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Comment
       </div>
-      <div className="mt-1 truncate text-sm text-primary">
+      <div className="mt-0.5 truncate text-[13px] text-primary">
         {props.model.previewText ?? "Comment thread"}
       </div>
       <button
@@ -26,7 +26,7 @@ export function TwSelectionToolComment(props: TwSelectionToolCommentProps) {
         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"
+        className="mt-1.5 inline-flex h-7 items-center 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"
       >
         Comment
       </button>

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

@@ -112,7 +112,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
       ref={props.rootRef}
       onFocusCapture={props.onFocusCapture}
       onBlurCapture={props.onBlurCapture}
-      className="flex flex-col gap-2"
+      className="flex flex-col gap-1.5"
     >
       {props.contextAnalytics ? (
         <TwContextAnalyticsSummary
@@ -125,13 +125,13 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
     </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)]">
+    <div className="flex flex-col gap-1">
+      <div className="inline-flex items-center gap-1.5 self-center rounded-lg border border-border/70 bg-canvas/94 px-1.5 py-1 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)]">
         <button
           type="button"
-          aria-label="Drag top menu"
+          aria-label={isDetached ? "Drag floating menu" : "Drag to float 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"
+          className="inline-flex h-6 items-center justify-center rounded-md border border-transparent px-1.5 text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
           onMouseDown={(event) => {
             preserveEditorSelectionMouseDown(event);
             setIsDetached(true);
@@ -143,21 +143,26 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
             };
           }}
         >
-          <GripHorizontal className="h-3.5 w-3.5" />
+          <GripHorizontal className="h-3 w-3" />
         </button>
-        <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
           {getTopMenuLabel(props.tool.kind)}
         </span>
+        <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em] text-secondary">
+          {isDetached ? "Floating" : "Docked"}
+        </span>
         <button
           type="button"
+          aria-label={isDetached ? "Dock menu" : "Float menu"}
+          aria-pressed={isDetached}
           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"
+          className="inline-flex h-6 items-center rounded-md border border-border/60 px-2 text-[10px] font-medium text-secondary transition-colors hover:bg-surface hover:text-primary"
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={() => {
             setIsDetached((current) => !current);
           }}
         >
-          {isDetached ? "Attach menu" : "Detach menu"}
+          {isDetached ? "Dock menu" : "Float menu"}
         </button>
       </div>
       {content}

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

@@ -71,9 +71,9 @@ export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
       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"
+          className="flex flex-wrap items-center gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
         >
-          <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
             List
           </span>
           <ToolbarButton
@@ -108,7 +108,7 @@ function ToolbarButton(props: {
       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"
+      className="inline-flex h-7 items-center 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"
     >
       {props.children}
     </button>

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

@@ -10,17 +10,17 @@ 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"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
     >
-      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <div className="text-[9px] 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>
+      <div className="mt-0.5 text-[13px] text-primary">{props.model.workflowTitle ?? "Scoped task"}</div>
       {props.model.workflowDetail ? (
-        <div className="mt-1 text-xs text-secondary">{props.model.workflowDetail}</div>
+        <div className="mt-0.5 text-[11px] text-secondary">{props.model.workflowDetail}</div>
       ) : null}
       {props.model.disabledReason ? (
-        <div className="mt-2 text-xs text-tertiary">{props.model.disabledReason}</div>
+        <div className="mt-1 text-[11px] text-tertiary">{props.model.disabledReason}</div>
       ) : null}
     </div>
   );

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

@@ -35,7 +35,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
     <div
       ref={ref}
       data-testid="selection-toolbar"
-      className="inline-flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-1.5 rounded-xl border border-border/80 bg-canvas px-1.5 py-1.5 shadow-lg ring-1 ring-border/80"
+      className="inline-flex max-w-[min(22rem,calc(100vw-1.5rem))] items-center gap-1 rounded-lg border border-border/80 bg-canvas px-1 py-1 shadow-md ring-1 ring-border/70"
       role="toolbar"
       aria-label="Selection actions"
       onFocusCapture={props.onFocusCapture}
@@ -87,9 +87,9 @@ 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-surface disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
+            className={`inline-flex h-6 w-6 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" />
+            <MessageSquare className="h-3 w-3" />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>
@@ -105,7 +105,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
       {model.previewText ? (
         <>
           <div className="mx-0.5 h-4 w-px bg-border" />
-          <span className="max-w-[8rem] truncate text-[11px] text-secondary">
+          <span className="max-w-[7rem] truncate text-[10px] text-secondary">
             {model.previewText}
           </span>
         </>
@@ -115,7 +115,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         <>
           {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
           <span
-            className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
+            className={`min-w-0 max-w-[9rem] truncate rounded-full px-1.5 py-0.5 text-[9px] font-medium tracking-[0.08em] ${
               model.badges.some((badge) => badge.tone === "accent")
                 ? "bg-canvas text-accent ring-1 ring-accent/25"
                 : "bg-surface text-tertiary"
@@ -164,7 +164,7 @@ function ToolbarActionButton(props: ToolbarActionButtonProps) {
           disabled={props.disabled}
           onMouseDown={preserveEditorSelectionMouseDown}
           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 ${
+          className={`inline-flex h-6 w-6 items-center justify-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-30 ${
             props.pressed
               ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm"
               : "text-secondary hover:bg-surface"

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

@@ -29,29 +29,29 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
   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"
+      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-3">
+      <div className="flex items-start justify-between gap-2">
         <div className="min-w-0">
-          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-warning">
+          <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-warning">
             {props.model.kindLabel}
           </div>
-          <div className="mt-1 max-w-[16rem] truncate text-sm text-primary">
+          <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-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-comment ring-1 ring-comment/20">
+          <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.5">
+      <div className="flex flex-wrap items-center gap-1">
         <SuggestionActionButton
           icon={<Check className="h-3.5 w-3.5" />}
           label="Accept suggestion"
@@ -81,9 +81,9 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
               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}`}
+              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.5 w-3.5" />
+              <MessageSquare className="h-3 w-3" />
               Comment
             </button>
           </Tooltip.Trigger>
@@ -130,7 +130,7 @@ function SuggestionActionButton(props: {
       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}`}
+      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", "")}