@beyondwork/docx-react-component 1.0.28 → 1.0.29

package/dist/chunk-2TG72QSW.js

@@ -0,0 +1,3874 @@
+import {
+  DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+  canCreateDocxCommentAnchor,
+  estimateBlockHeight,
+  estimateParagraphLineCount,
+  estimateParagraphLineHeight,
+  findPageForOffset,
+  getUsableColumnWidth,
+  incrementInvalidationCounter,
+  recordPerfSample
+} from "./chunk-GBVOWFIK.js";
+import {
+  createDetachedAnchor,
+  createNodeAnchor,
+  createRangeAnchor
+} from "./chunk-EBI3BX6U.js";
+
+// src/runtime/session-capabilities.ts
+function deriveCapabilities(snapshot, reviewMode, workflowScope) {
+  const hasFatalError = Boolean(snapshot.fatalError);
+  const isReady = snapshot.isReady;
+  const isReadOnly = snapshot.readOnly;
+  const exportBlocked = snapshot.compatibility.blockExport;
+  const activeStory = snapshot.activeStory ?? { kind: "main" };
+  const documentMode = snapshot.documentMode ?? "editing";
+  const phase = !isReady ? "loading" : hasFatalError ? "diagnostics" : "ready";
+  const mode = phase === "diagnostics" ? "read-only-diagnostics" : reviewMode;
+  const canEdit = isReady && !isReadOnly && !hasFatalError && documentMode !== "viewing";
+  const canUndo = snapshot.commandState.canUndo && canEdit;
+  const canRedo = snapshot.commandState.canRedo && canEdit;
+  const canAddComment = canEdit && activeStory.kind === "main" && !snapshot.selection.isCollapsed && Boolean(snapshot.surface) && canCreateDocxCommentAnchor(snapshot.surface, toRuntimeAnchor(snapshot.selection.activeRange));
+  const canExport = isReady && !exportBlocked && !hasFatalError;
+  const actionableRevisions = snapshot.trackedChanges.revisions.filter(
+    (r) => r.status === "active" && r.actionability === "actionable"
+  );
+  const canAcceptChange = canEdit && actionableRevisions.some((r) => r.canAccept);
+  const canRejectChange = canEdit && actionableRevisions.some((r) => r.canReject);
+  const canAcceptAll = canEdit && actionableRevisions.length > 0;
+  const canRejectAll = canEdit && actionableRevisions.length > 0;
+  const preserveOnlyCount = snapshot.compatibility.featureEntries.filter(
+    (e) => e.featureClass === "preserve-only"
+  ).length;
+  const unsupportedFatalCount = snapshot.compatibility.featureEntries.filter(
+    (e) => e.featureClass === "unsupported-fatal"
+  ).length;
+  const workflowOverlayPresent = workflowScope?.overlayPresent ?? false;
+  const workflowBlocked = (workflowScope?.blockedReasons?.length ?? 0) > 0;
+  const trackChangesSupported = snapshot.trackedChanges.totalCount > 0;
+  const hasTrustConcerns = exportBlocked || preserveOnlyCount > 0 || unsupportedFatalCount > 0 || snapshot.warnings.length > 0 || hasFatalError;
+  const reviewRailVisible = workflowOverlayPresent ? false : mode === "review" || mode === "read-only-diagnostics" || mode === "editing" && hasTrustConcerns;
+  const healthIssueCount = preserveOnlyCount + unsupportedFatalCount + snapshot.warnings.length;
+  const protection = snapshot.protectionSnapshot;
+  const hasDocumentProtection = protection?.hasDocumentProtection ?? false;
+  const protectedRangeCount = protection?.ranges?.length ?? 0;
+  return {
+    phase,
+    mode,
+    documentMode,
+    canUndo,
+    canRedo,
+    canEdit,
+    canAddComment,
+    canExport,
+    canAcceptChange,
+    canRejectChange,
+    canAcceptAll,
+    canRejectAll,
+    reviewRailVisible,
+    trackChangesSupported,
+    exportBlocked,
+    preserveOnlyCount,
+    unsupportedFatalCount,
+    hasDocumentProtection,
+    protectedRangeCount,
+    healthIssueCount,
+    workflowOverlayPresent,
+    workflowBlocked,
+    isDirty: snapshot.isDirty,
+    isReady,
+    hasFatalError
+  };
+}
+function toRuntimeAnchor(anchor) {
+  switch (anchor.kind) {
+    case "range":
+      return createRangeAnchor(anchor.from, anchor.to, anchor.assoc);
+    case "node":
+      return createNodeAnchor(anchor.at, anchor.assoc);
+    case "detached":
+      return createDetachedAnchor(anchor.lastKnownRange, anchor.reason);
+  }
+}
+
+// src/ui-tailwind/chrome/tw-alert-banner.tsx
+import { AlertTriangle, XCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TwAlertBanner(props) {
+  const { snapshot, preserveOnlyCount, workflowBlockedReasons = [] } = props;
+  if (snapshot.fatalError) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs", children: [
+      /* @__PURE__ */ jsx(XCircle, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: snapshot.fatalError.message })
+    ] });
+  }
+  if (snapshot.compatibility.blockExport) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs", children: [
+      /* @__PURE__ */ jsx(XCircle, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Export blocked \u2014",
+        " ",
+        snapshot.compatibility.blockExportReasons[0] ?? "unsupported content"
+      ] })
+    ] });
+  }
+  if (preserveOnlyCount > 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-warning-soft text-comment text-xs", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        preserveOnlyCount,
+        " preserve-only feature",
+        preserveOnlyCount !== 1 ? "s" : "",
+        " detected"
+      ] })
+    ] });
+  }
+  if (workflowBlockedReasons.length > 0) {
+    const firstReason = workflowBlockedReasons[0];
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-amber-50 text-amber-700 text-xs", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        firstReason.message,
+        workflowBlockedReasons.length > 1 ? ` (+${workflowBlockedReasons.length - 1} more)` : ""
+      ] })
+    ] });
+  }
+  return null;
+}
+
+// src/ui-tailwind/chrome/tw-selection-toolbar.tsx
+import { forwardRef } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Baseline, Bold, Highlighter, Italic, MessageSquare, Underline } from "lucide-react";
+
+// src/ui/headless/preserve-editor-selection.ts
+function preserveEditorSelectionMouseDown(event) {
+  event.preventDefault();
+}
+
+// src/ui-tailwind/chrome/tw-selection-toolbar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var focusRingClass = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+var TwSelectionToolbar = forwardRef(function TwSelectionToolbar2(props, ref) {
+  const { model } = props;
+  const addCommentDisabled = !model.canAddComment;
+  const formattingDisabled = !model.canToggleFormatting;
+  const contextLabel = summarizeSelectionContext(model);
+  const tooltipLabel = addCommentDisabled ? props.disabledReason ?? "Select text within one paragraph to add a DOCX comment" : "Add comment";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      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",
+      role: "toolbar",
+      "aria-label": "Selection actions",
+      onFocusCapture: props.onFocusCapture,
+      onBlurCapture: props.onBlurCapture,
+      children: [
+        /* @__PURE__ */ jsx2(
+          ToolbarActionButton,
+          {
+            icon: /* @__PURE__ */ jsx2(Bold, { className: "h-3.5 w-3.5" }),
+            label: "Bold selection",
+            pressed: model.boldActive,
+            disabled: formattingDisabled,
+            onClick: props.onToggleBold
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarActionButton,
+          {
+            icon: /* @__PURE__ */ jsx2(Italic, { className: "h-3.5 w-3.5" }),
+            label: "Italic selection",
+            pressed: model.italicActive,
+            disabled: formattingDisabled,
+            onClick: props.onToggleItalic
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarActionButton,
+          {
+            icon: /* @__PURE__ */ jsx2(Underline, { className: "h-3.5 w-3.5" }),
+            label: "Underline selection",
+            pressed: model.underlineActive,
+            disabled: formattingDisabled,
+            onClick: props.onToggleUnderline
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarActionButton,
+          {
+            icon: /* @__PURE__ */ jsx2(Baseline, { className: "h-3.5 w-3.5" }),
+            label: "Text color blue",
+            pressed: false,
+            disabled: formattingDisabled,
+            onClick: () => props.onSetTextColor?.("#1660a8")
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarActionButton,
+          {
+            icon: /* @__PURE__ */ jsx2(Highlighter, { className: "h-3.5 w-3.5" }),
+            label: "Highlight yellow",
+            pressed: false,
+            disabled: formattingDisabled,
+            onClick: () => props.onSetHighlightColor?.("#ffff00")
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "mx-0.5 h-4 w-px bg-border" }),
+        /* @__PURE__ */ jsxs2(Tooltip.Root, { children: [
+          /* @__PURE__ */ jsx2(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Add comment from selection",
+              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}`,
+              children: /* @__PURE__ */ jsx2(MessageSquare, { className: "h-3.5 w-3.5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Tooltip.Portal, { children: /* @__PURE__ */ jsx2(
+            Tooltip.Content,
+            {
+              className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50",
+              sideOffset: 6,
+              children: tooltipLabel
+            }
+          ) })
+        ] }),
+        model.previewText ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("div", { className: "mx-0.5 h-4 w-px bg-border" }),
+          /* @__PURE__ */ jsx2("span", { className: "max-w-[8rem] truncate text-[11px] text-secondary", children: model.previewText })
+        ] }) : null,
+        contextLabel ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          !model.previewText ? /* @__PURE__ */ jsx2("div", { className: "mx-0.5 h-4 w-px bg-border" }) : null,
+          /* @__PURE__ */ jsx2(
+            "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-surface text-tertiary"}`,
+              children: contextLabel
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+function summarizeSelectionContext(model) {
+  if (model.badges.length === 0) {
+    return null;
+  }
+  const accentBadges = model.badges.filter((badge) => badge.tone === "accent");
+  const source = accentBadges.length > 0 ? accentBadges : model.badges;
+  const labels = source.slice(0, 2).map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+  const summary = labels.join(" \xB7 ");
+  return summary.length > 30 ? `${summary.slice(0, 27)}...` : summary;
+}
+function ToolbarActionButton(props) {
+  return /* @__PURE__ */ jsxs2(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx2(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-label": props.label,
+        "aria-pressed": props.pressed,
+        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 ${props.pressed ? "bg-accent-soft text-accent" : "text-secondary hover:bg-surface"} ${focusRingClass}`,
+        children: props.icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(Tooltip.Portal, { children: /* @__PURE__ */ jsx2(
+      Tooltip.Content,
+      {
+        className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50",
+        sideOffset: 6,
+        children: props.label
+      }
+    ) })
+  ] });
+}
+
+// src/ui-tailwind/review/tw-comment-sidebar.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Check, CornerDownRight, RotateCcw } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var focusRingClass2 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+function TwCommentSidebar(props) {
+  const { comments, activeCommentId, currentUserId } = props;
+  return /* @__PURE__ */ jsxs3("div", { className: "outline-none", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mb-2 flex items-center gap-2 text-[10px] text-tertiary", children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
+        comments.openCommentIds.length,
+        " open"
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "text-border", children: "\xB7" }),
+      /* @__PURE__ */ jsxs3("span", { children: [
+        comments.resolvedCommentIds.length,
+        " resolved"
+      ] }),
+      comments.detachedCommentIds.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-border", children: "\xB7" }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          comments.detachedCommentIds.length,
+          " detached"
+        ] })
+      ] })
+    ] }),
+    comments.threads.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "space-y-1.5", children: comments.threads.map((thread) => /* @__PURE__ */ jsx3(
+      CommentThreadCard,
+      {
+        thread,
+        isActive: activeCommentId === thread.commentId,
+        currentUserId,
+        onOpenComment: props.onOpenComment,
+        onResolveComment: props.onResolveComment,
+        onReopenComment: props.onReopenComment,
+        onAddReply: props.onAddReply,
+        onEditBody: props.onEditBody
+      },
+      thread.commentId
+    )) }) : /* @__PURE__ */ jsx3("div", { className: "rounded-lg border border-dashed border-border bg-surface/60 px-2.5 py-3 text-[10px] leading-4 text-tertiary", children: "No comment threads yet. Select text and add one from the toolbar." })
+  ] });
+}
+function CommentThreadCard(props) {
+  const { thread, isActive } = props;
+  const leadEntry = thread.entries[0];
+  const isDraftThread = thread.status === "open" && thread.entryCount === 1 && isEmptyCommentBody(leadEntry?.body);
+  const isOwnComment = props.currentUserId != null && leadEntry?.authorId === props.currentUserId;
+  const canEdit = isOwnComment && thread.status === "open" && props.onEditBody != null;
+  const hasNoBody = isEmptyCommentBody(leadEntry?.body);
+  const showExcerpt = Boolean(thread.excerpt) && !isDraftThread && thread.excerpt !== "Empty thread";
+  const scrollRef = useCallback(
+    (node) => {
+      if (node && isActive && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    },
+    [isActive]
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: scrollRef,
+      "data-comment-thread-id": thread.commentId,
+      "data-comment-thread-status": thread.status,
+      role: "button",
+      tabIndex: 0,
+      className: [
+        "cursor-pointer rounded-lg border px-2 py-1.5 transition-colors",
+        focusRingClass2,
+        isActive ? "border-accent/25 bg-accent-soft/35" : "border-border bg-canvas hover:border-border-strong hover:bg-surface/70",
+        thread.status === "detached" ? "opacity-70" : ""
+      ].join(" "),
+      onClick: () => props.onOpenComment?.(thread),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          props.onOpenComment?.(thread);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "mb-1 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx3("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-accent/10 text-[8px] font-semibold text-accent", children: thread.createdBy.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate text-[10px] font-medium text-primary", children: thread.createdBy }),
+          /* @__PURE__ */ jsx3("span", { "data-comment-thread-created-at": "true", className: "text-[9px] text-tertiary", children: formatCommentDate(thread.createdAt) }),
+          /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
+          isDraftThread ? /* @__PURE__ */ jsx3(StatusBadge, { label: "draft", tone: "draft" }) : null,
+          thread.status === "resolved" ? /* @__PURE__ */ jsx3(StatusBadge, { label: "resolved", tone: "resolved" }) : null,
+          thread.status === "detached" ? /* @__PURE__ */ jsx3(StatusBadge, { label: "detached", tone: "detached" }) : null
+        ] }),
+        showExcerpt ? /* @__PURE__ */ jsx3("p", { className: "mb-1 rounded-md border-l-2 border-comment/25 bg-comment-soft/30 px-2 py-1 text-[9px] leading-4 text-comment/80 italic whitespace-pre-wrap break-words line-clamp-2", children: thread.excerpt }) : null,
+        canEdit && (isActive || hasNoBody) ? /* @__PURE__ */ jsx3(
+          InlineEditableBody,
+          {
+            body: leadEntry?.body ?? "",
+            autoFocus: isActive && hasNoBody,
+            onSave: (newBody) => props.onEditBody?.(thread.commentId, newBody),
+            label: isDraftThread ? "New comment" : void 0
+          }
+        ) : leadEntry?.body ? /* @__PURE__ */ jsx3(
+          "p",
+          {
+            className: "text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4",
+            "data-comment-thread-body": "true",
+            children: leadEntry.body
+          }
+        ) : canEdit ? /* @__PURE__ */ jsx3(
+          "p",
+          {
+            className: "cursor-text text-[10px] italic text-tertiary",
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onOpenComment?.(thread);
+            },
+            children: "New comment"
+          }
+        ) : null,
+        thread.entries.slice(1).map((entry) => /* @__PURE__ */ jsxs3("div", { className: "mt-1.5 ml-4 border-l border-border/50 pl-2.5", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "mb-0.5 flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-[9px] font-medium text-secondary", children: entry.authorId }),
+            /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-tertiary", children: formatCommentDate(entry.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "p",
+            {
+              className: "text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3",
+              "data-comment-reply-body": "true",
+              children: entry.body
+            }
+          )
+        ] }, entry.entryId)),
+        thread.entryCount > thread.entries.length ? /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-[9px] text-tertiary", children: [
+          "+",
+          thread.entryCount - thread.entries.length,
+          " more"
+        ] }) : null,
+        /* @__PURE__ */ jsxs3("div", { className: "mt-1 flex items-center gap-0.5", children: [
+          thread.status === "open" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-insert hover:bg-insert-soft transition-colors",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  props.onResolveComment?.(thread.commentId);
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(Check, { className: "h-2 w-2" }),
+                  " Resolve"
+                ]
+              }
+            ),
+            props.onAddReply && /* @__PURE__ */ jsx3(ReplyInput, { commentId: thread.commentId, onAddReply: props.onAddReply })
+          ] }),
+          thread.status === "resolved" && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-secondary hover:bg-surface transition-colors",
+              "data-comment-thread-action": "reopen",
+              onClick: (e) => {
+                e.stopPropagation();
+                props.onReopenComment?.(thread.commentId);
+              },
+              children: [
+                /* @__PURE__ */ jsx3(RotateCcw, { className: "h-2 w-2" }),
+                " Reopen"
+              ]
+            }
+          ),
+          thread.status === "detached" && /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-comment", children: "Detached" })
+        ] })
+      ]
+    }
+  );
+}
+function InlineEditableBody(props) {
+  const [isEditing, setIsEditing] = useState(props.autoFocus || props.body === "");
+  const [draft, setDraft] = useState(props.body);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(draft.length, draft.length);
+    }
+  }, [isEditing]);
+  if (!isEditing) {
+    return /* @__PURE__ */ jsx3(
+      "p",
+      {
+        className: `cursor-text rounded px-1 text-[10px] leading-[1.15rem] -mx-1 transition-colors hover:bg-surface ${props.body ? "text-secondary" : "text-tertiary italic"}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          setDraft(props.body);
+          setIsEditing(true);
+        },
+        title: "Click to edit",
+        children: props.body || "Click to add comment\u2026"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+    props.label ? /* @__PURE__ */ jsx3("span", { className: "block text-[10px] font-medium uppercase tracking-[0.08em] text-tertiary", children: props.label }) : null,
+    /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: "w-full resize-none rounded-md border border-border bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent",
+        rows: 2,
+        value: draft,
+        placeholder: "Type your comment...",
+        onClick: (e) => e.stopPropagation(),
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: () => {
+          if (draft.trim() && draft.trim() !== props.body) {
+            props.onSave(draft.trim());
+          }
+          setIsEditing(false);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (draft.trim() && draft.trim() !== props.body) {
+              props.onSave(draft.trim());
+            }
+            setIsEditing(false);
+          }
+          if (e.key === "Escape") {
+            setDraft(props.body);
+            setIsEditing(false);
+          }
+          e.stopPropagation();
+        }
+      }
+    )
+  ] });
+}
+function ReplyInput(props) {
+  const [body, setBody] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-tertiary hover:text-secondary hover:bg-surface transition-colors",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx3(CornerDownRight, { className: "h-2.5 w-2.5" }),
+          " Reply"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "w-full mt-1.5", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ref: inputRef,
+        className: "w-full rounded border border-border bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary resize-none focus:outline-none focus:ring-1 focus:ring-accent",
+        rows: 2,
+        placeholder: "Reply...",
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey && body.trim()) {
+            e.preventDefault();
+            props.onAddReply(props.commentId, body.trim());
+            setBody("");
+            setIsOpen(false);
+          }
+          if (e.key === "Escape") {
+            setBody("");
+            setIsOpen(false);
+          }
+          e.stopPropagation();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-1 mt-0.5", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          disabled: !body.trim(),
+          className: "rounded px-1.5 py-0.5 text-[10px] font-medium text-accent hover:bg-accent-soft transition-colors disabled:opacity-40",
+          onClick: () => {
+            if (body.trim()) {
+              props.onAddReply(props.commentId, body.trim());
+              setBody("");
+              setIsOpen(false);
+            }
+          },
+          children: "Send"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "rounded px-1.5 py-0.5 text-[10px] text-tertiary hover:bg-surface transition-colors",
+          onClick: () => {
+            setBody("");
+            setIsOpen(false);
+          },
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+function formatCommentDate(raw) {
+  try {
+    const date = new Date(raw);
+    if (Number.isNaN(date.getTime())) return raw;
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 6e4);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHours = Math.floor(diffMin / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+    }).format(date);
+  } catch {
+    return raw;
+  }
+}
+function StatusBadge(props) {
+  const styles = {
+    resolved: "text-insert bg-insert-soft",
+    detached: "text-comment bg-warning-soft",
+    draft: "text-secondary bg-subtle"
+  };
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: `shrink-0 rounded px-1 py-px text-[8px] font-medium uppercase tracking-[0.08em] ${styles[props.tone] ?? "text-secondary bg-subtle"}`,
+      "data-comment-thread-badge": props.tone,
+      children: props.label
+    }
+  );
+}
+function isEmptyCommentBody(body) {
+  return !body || body.trim() === "";
+}
+
+// src/ui-tailwind/review/tw-revision-sidebar.tsx
+import { Check as Check2, X } from "lucide-react";
+
+// src/ui/shared/revision-filters.ts
+function selectVisibleRevisions(revisions, markupDisplay) {
+  switch (markupDisplay) {
+    case "clean":
+    case "simple":
+      return revisions.filter(
+        (revision) => revision.status === "active" && revision.actionability === "actionable"
+      );
+    case "all":
+      return [...revisions];
+  }
+}
+
+// src/ui-tailwind/review/tw-revision-sidebar.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var focusRingClass3 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+function TwRevisionSidebar(props) {
+  const { trackedChanges, markupDisplay, activeRevisionId } = props;
+  const visibleRevisions = selectVisibleRevisions(trackedChanges.revisions, markupDisplay);
+  const actionablePendingCount = trackedChanges.revisions.filter(
+    (r) => r.status === "active" && r.actionability === "actionable"
+  ).length;
+  return /* @__PURE__ */ jsxs4("div", { className: "outline-none", children: [
+    /* @__PURE__ */ jsxs4("p", { className: "mb-2 text-[10px] text-tertiary", children: [
+      trackedChanges.pendingChangeIds.length,
+      " active \xB7 ",
+      trackedChanges.acceptedChangeIds.length,
+      " accepted \xB7 ",
+      trackedChanges.preserveOnlyChangeIds.length,
+      " preserve-only"
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "mb-2 flex gap-1", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          disabled: actionablePendingCount === 0,
+          className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          onClick: props.onAcceptAllChanges,
+          children: [
+            "Accept all (",
+            actionablePendingCount,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          disabled: actionablePendingCount === 0,
+          className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+          onClick: props.onRejectAllChanges,
+          children: "Reject all"
+        }
+      )
+    ] }),
+    visibleRevisions.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "space-y-1", children: visibleRevisions.map((rev) => {
+      const isActive = activeRevisionId === rev.revisionId;
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: `flex rounded-lg transition-colors cursor-pointer ${focusRingClass3} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`,
+          onClick: () => props.onOpenRevision?.(rev),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              props.onOpenRevision?.(rev);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: `w-0.5 shrink-0 rounded-l-lg ${rev.kind === "insertion" ? "bg-insert" : rev.kind === "deletion" ? "bg-danger" : "bg-tertiary"}` }),
+            /* @__PURE__ */ jsxs4("div", { className: "p-2 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "mb-0.5 flex items-start justify-between gap-2", children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-[11px] font-medium text-primary", children: rev.anchorLabel }),
+                /* @__PURE__ */ jsx4(RevisionBadge, { status: rev.status, actionability: rev.actionability })
+              ] }),
+              /* @__PURE__ */ jsxs4("p", { className: "mb-1 text-[10px] text-tertiary", children: [
+                rev.authorId,
+                " \xB7 ",
+                rev.createdAt
+              ] }),
+              rev.excerpt ? /* @__PURE__ */ jsx4("p", { className: `text-[11px] ${rev.kind === "insertion" ? "text-insert" : rev.kind === "deletion" ? "text-danger line-through" : "text-secondary"}`, children: rev.excerpt }) : /* @__PURE__ */ jsx4("p", { className: "text-[11px] text-secondary", children: rev.label }),
+              rev.detail ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-[10px] text-secondary", children: rev.detail }) : null,
+              /* @__PURE__ */ jsx4("div", { className: "mt-1.5 flex gap-1", children: rev.actionability === "actionable" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !rev.canAccept || rev.status === "accepted",
+                    className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      props.onAcceptRevision?.(rev.revisionId);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx4(Check2, { className: "h-3 w-3" }),
+                      " Accept"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !rev.canReject || rev.status === "rejected",
+                    className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      props.onRejectRevision?.(rev.revisionId);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx4(X, { className: "h-3 w-3" }),
+                      " Reject"
+                    ]
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx4("span", { className: "px-1.5 py-0.5 text-[10px] text-tertiary", children: "Preserve-only" }) })
+            ] })
+          ]
+        },
+        rev.revisionId
+      );
+    }) }) : /* @__PURE__ */ jsx4("p", { className: "text-xs text-tertiary py-4", children: trackedChanges.totalCount > 0 ? "Switch to Full markup to see all tracked changes." : "Tracked change cards will appear here when present." })
+  ] });
+}
+function RevisionBadge(props) {
+  if (props.actionability === "preserve-only") {
+    return /* @__PURE__ */ jsx4("span", { className: "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-comment bg-warning-soft", children: "preserve-only" });
+  }
+  const styles = {
+    active: "text-secondary bg-subtle",
+    accepted: "text-insert bg-insert-soft",
+    rejected: "text-danger bg-delete-soft",
+    detached: "text-comment bg-warning-soft"
+  };
+  return /* @__PURE__ */ jsx4("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`, children: props.status });
+}
+
+// src/ui-tailwind/review/tw-review-rail.tsx
+import * as Tabs from "@radix-ui/react-tabs";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var focusRingClass4 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+function TwReviewRail(props) {
+  const warningCount = props.compatibility.featureEntries.filter(
+    (e) => e.featureClass !== "supported-roundtrip"
+  ).length + props.warnings.length;
+  return /* @__PURE__ */ jsx5(
+    "aside",
+    {
+      "aria-label": "Review rail",
+      className: "flex w-[304px] shrink-0 flex-col border-l border-border bg-canvas",
+      children: /* @__PURE__ */ jsxs5(
+        Tabs.Root,
+        {
+          value: props.activeTab,
+          onValueChange: (v) => props.onActiveTabChange(v),
+          className: "flex flex-1 flex-col min-h-0",
+          children: [
+            /* @__PURE__ */ jsxs5(Tabs.List, { className: "flex shrink-0 border-b border-border px-2", children: [
+              /* @__PURE__ */ jsxs5(
+                Tabs.Trigger,
+                {
+                  value: "comments",
+                  className: `flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass4}`,
+                  children: [
+                    "Comments",
+                    " ",
+                    /* @__PURE__ */ jsx5("span", { className: "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary", children: props.comments.totalCount })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                Tabs.Trigger,
+                {
+                  value: "changes",
+                  className: `flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass4}`,
+                  children: [
+                    "Changes",
+                    " ",
+                    /* @__PURE__ */ jsx5("span", { className: "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary", children: props.trackedChanges.totalCount })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5(ScrollArea.Root, { className: "flex-1 min-h-0", children: [
+              /* @__PURE__ */ jsxs5(ScrollArea.Viewport, { className: "h-full w-full", children: [
+                /* @__PURE__ */ jsx5(Tabs.Content, { value: "comments", className: "p-2.5 outline-none", children: /* @__PURE__ */ jsx5(
+                  TwCommentSidebar,
+                  {
+                    currentUserId: props.currentUserId,
+                    comments: props.comments,
+                    activeCommentId: props.activeCommentId,
+                    onOpenComment: props.onOpenComment,
+                    onResolveComment: props.onResolveComment,
+                    onReopenComment: props.onReopenComment,
+                    onAddReply: props.onAddReply,
+                    onEditBody: props.onEditBody
+                  }
+                ) }),
+                /* @__PURE__ */ jsx5(Tabs.Content, { value: "changes", className: "p-2.5 outline-none", children: /* @__PURE__ */ jsx5(
+                  TwRevisionSidebar,
+                  {
+                    trackedChanges: props.trackedChanges,
+                    markupDisplay: props.markupDisplay,
+                    activeRevisionId: props.activeRevisionId,
+                    onOpenRevision: props.onOpenRevision,
+                    onAcceptRevision: props.onAcceptRevision,
+                    onRejectRevision: props.onRejectRevision,
+                    onAcceptAllChanges: props.onAcceptAllChanges,
+                    onRejectAllChanges: props.onRejectAllChanges
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx5(
+                ScrollArea.Scrollbar,
+                {
+                  orientation: "vertical",
+                  className: "flex w-1.5 touch-none select-none p-0.5",
+                  children: /* @__PURE__ */ jsx5(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-black/[0.12]" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/ui-tailwind/status/tw-status-bar.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function TwStatusBar(props) {
+  const saveState = props.isExportBlocked ? "Read-only" : props.isDirty ? "Unsaved" : "Ready";
+  const exportState = props.isExportBlocked ? "Blocked" : props.preserveOnlyCount > 0 ? "Warnings" : "Ready";
+  return /* @__PURE__ */ jsxs6(
+    "footer",
+    {
+      "data-testid": "status-bar",
+      className: "flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary",
+      children: [
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: `inline-block h-1.5 w-1.5 rounded-full ${props.isExportBlocked ? "bg-danger" : props.isDirty ? "bg-comment" : "bg-insert"}`
+            }
+          ),
+          saveState
+        ] }),
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: `inline-block h-1.5 w-1.5 rounded-full ${props.isExportBlocked ? "bg-danger" : props.preserveOnlyCount > 0 ? "bg-comment" : "bg-insert"}`
+            }
+          ),
+          "Export ",
+          exportState.toLowerCase()
+        ] }),
+        /* @__PURE__ */ jsxs6("span", { children: [
+          props.commentCount,
+          " comment",
+          props.commentCount !== 1 ? "s" : "",
+          " \xB7",
+          " ",
+          props.changeCount,
+          " change",
+          props.changeCount !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsx6("span", { className: "flex-1" }),
+        /* @__PURE__ */ jsx6("span", { children: props.sessionId })
+      ]
+    }
+  );
+}
+
+// src/ui-tailwind/review/tw-health-panel.tsx
+import { AlertTriangle as AlertTriangle2, Info, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function TwHealthPanel(props) {
+  const { compatibility, warnings, blockedReasons = [] } = props;
+  const supportedCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "supported-roundtrip"
+  ).length;
+  const preserveOnlyCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "preserve-only"
+  ).length;
+  const blockedCount = compatibility.featureEntries.filter(
+    (e) => e.featureClass === "unsupported-fatal"
+  ).length;
+  return /* @__PURE__ */ jsxs7("div", { className: "outline-none", children: [
+    /* @__PURE__ */ jsxs7("p", { className: "text-xs text-tertiary mb-3", children: [
+      supportedCount,
+      " supported \xB7 ",
+      preserveOnlyCount,
+      " preserve-only \xB7 ",
+      blockedCount,
+      " blocked",
+      warnings.length > 0 ? ` \xB7 ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : ""
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+      compatibility.featureEntries.map((entry) => /* @__PURE__ */ jsxs7("div", { className: "flex rounded-lg transition-colors hover:bg-surface", children: [
+        entry.featureClass !== "supported-roundtrip" ? /* @__PURE__ */ jsx7("div", { className: `w-0.5 shrink-0 rounded-l-lg ${entry.featureClass === "unsupported-fatal" ? "bg-danger" : "bg-comment"}` }) : null,
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 p-2.5 flex-1", children: [
+          /* @__PURE__ */ jsx7(HealthIcon, { featureClass: entry.featureClass }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-primary", children: entry.message }),
+              /* @__PURE__ */ jsx7(FeatureClassBadge, { featureClass: entry.featureClass })
+            ] }),
+            /* @__PURE__ */ jsx7("p", { className: "text-xs text-tertiary mt-0.5", children: entry.featureKey })
+          ] })
+        ] })
+      ] }, entry.featureEntryId)),
+      warnings.map((warning) => /* @__PURE__ */ jsxs7("div", { className: "flex rounded-lg transition-colors hover:bg-surface", children: [
+        /* @__PURE__ */ jsx7("div", { className: `w-0.5 shrink-0 rounded-l-lg ${warning.severity === "warning" ? "bg-comment" : "bg-accent"}` }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 p-2.5 flex-1", children: [
+          warning.severity === "warning" ? /* @__PURE__ */ jsx7(AlertTriangle2, { className: "h-4 w-4 text-comment shrink-0 mt-0.5" }) : /* @__PURE__ */ jsx7(Info, { className: "h-4 w-4 text-accent shrink-0 mt-0.5" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-primary", children: warning.message }),
+              /* @__PURE__ */ jsx7("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${warning.severity === "warning" ? "text-comment bg-warning-soft" : "text-accent bg-accent-soft"}`, children: warning.code.replace(/_/g, " ") })
+            ] }),
+            /* @__PURE__ */ jsx7("p", { className: "text-xs text-tertiary mt-0.5", children: warning.source })
+          ] })
+        ] })
+      ] }, warning.warningId)),
+      blockedReasons.length > 0 ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsx7("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ jsx7("p", { className: "text-xs font-medium text-tertiary mb-1", children: "Workflow blocked reasons" }) }),
+        blockedReasons.map((reason, index) => /* @__PURE__ */ jsxs7("div", { className: "flex rounded-lg transition-colors hover:bg-surface", children: [
+          /* @__PURE__ */ jsx7("div", { className: "w-0.5 shrink-0 rounded-l-lg bg-amber-400" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 p-2.5 flex-1", children: [
+            /* @__PURE__ */ jsx7(ShieldAlert, { className: "h-4 w-4 text-amber-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-2", children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-primary", children: reason.message }),
+                /* @__PURE__ */ jsx7("span", { className: "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-amber-700 bg-amber-100", children: reason.code.replace(/_/g, " ") })
+              ] }),
+              reason.scopeId ? /* @__PURE__ */ jsxs7("p", { className: "text-xs text-tertiary mt-0.5", children: [
+                "scope: ",
+                reason.scopeId
+              ] }) : null
+            ] })
+          ] })
+        ] }, `blocked-${index}`))
+      ] }) : null,
+      compatibility.featureEntries.length === 0 && warnings.length === 0 && blockedReasons.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-tertiary py-4", children: "No compatibility entries or warnings to display." }) : null
+    ] })
+  ] });
+}
+function HealthIcon(props) {
+  switch (props.featureClass) {
+    case "supported-roundtrip":
+      return /* @__PURE__ */ jsx7(ShieldCheck, { className: "h-4 w-4 text-insert shrink-0 mt-0.5" });
+    case "preserve-only":
+      return /* @__PURE__ */ jsx7(Shield, { className: "h-4 w-4 text-comment shrink-0 mt-0.5" });
+    case "unsupported-fatal":
+      return /* @__PURE__ */ jsx7(ShieldAlert, { className: "h-4 w-4 text-danger shrink-0 mt-0.5" });
+  }
+}
+function FeatureClassBadge(props) {
+  const styles = {
+    "supported-roundtrip": "text-insert bg-insert-soft",
+    "preserve-only": "text-comment bg-warning-soft",
+    "unsupported-fatal": "text-danger bg-delete-soft"
+  };
+  const labels = {
+    "supported-roundtrip": "supported",
+    "preserve-only": "preserve-only",
+    "unsupported-fatal": "blocked"
+  };
+  return /* @__PURE__ */ jsx7("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass]}`, children: labels[props.featureClass] });
+}
+
+// src/ui-tailwind/toolbar/tw-toolbar-icon-button.tsx
+import * as Tooltip2 from "@radix-ui/react-tooltip";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var focusRingClass5 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+function TwToolbarIconButton(props) {
+  return /* @__PURE__ */ jsxs8(Tooltip2.Root, { children: [
+    /* @__PURE__ */ jsx8(Tooltip2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        "aria-label": props.label,
+        disabled: props.disabled,
+        onMouseDown: preserveEditorSelectionMouseDown,
+        onClick: props.onClick,
+        className: [
+          "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors outline-none",
+          "disabled:opacity-30 disabled:cursor-not-allowed",
+          props.emphasis ? "text-accent hover:bg-accent-soft" : props.active ? "bg-accent-soft text-accent" : "text-secondary hover:bg-surface hover:text-primary",
+          focusRingClass5
+        ].join(" "),
+        children: /* @__PURE__ */ jsx8(props.icon, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx8(Tooltip2.Portal, { children: /* @__PURE__ */ jsx8(
+      Tooltip2.Content,
+      {
+        className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50",
+        sideOffset: 6,
+        children: props.label
+      }
+    ) })
+  ] });
+}
+
+// src/ui-tailwind/toolbar/tw-toolbar.tsx
+import React3 from "react";
+import * as Popover from "@radix-ui/react-popover";
+import * as Select from "@radix-ui/react-select";
+import * as Toggle from "@radix-ui/react-toggle";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import * as Tooltip3 from "@radix-ui/react-tooltip";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline as Baseline2,
+  Bold as Bold2,
+  ChevronDown,
+  Download,
+  Eye,
+  EyeOff,
+  FileText,
+  Highlighter as Highlighter2,
+  ImagePlus,
+  Indent,
+  Italic as Italic2,
+  MessageSquare as MessageSquare2,
+  Minus,
+  Monitor,
+  MoreHorizontal,
+  Outdent,
+  Plus,
+  Redo2,
+  Rows3,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  ShieldAlert as ShieldAlert2,
+  ShieldCheck as ShieldCheck2,
+  Underline as Underline2,
+  Undo2
+} from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function getSupportedZoomPresets() {
+  return [75, 100, 125, 150];
+}
+var focusRingClass6 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+var FONT_FAMILIES = ["Arial", "Times New Roman", "Calibri", "Cambria", "Georgia", "Verdana"];
+var FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36];
+var TEXT_COLORS = ["#000000", "#434343", "#1660a8", "#1a7f37", "#cf222e", "#7a4f00"];
+var HIGHLIGHT_COLORS = [
+  { value: "#ffff00", label: "Yellow" },
+  { value: "#00ff00", label: "Green" },
+  { value: "#00ffff", label: "Cyan" },
+  { value: "#ff69b4", label: "Pink" },
+  { value: null, label: "None" }
+];
+function TwToolbar(props) {
+  const caps = props.capabilities;
+  const workspaceMode = props.workspaceMode;
+  const isPageMode = workspaceMode === "page";
+  const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
+  const zoomLevel = props.zoomLevel ?? 100;
+  const canEdit = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
+  const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
+  const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
+  const zoomLabel = typeof zoomLevel === "number" ? `${zoomLevel}%` : zoomLevel === "pageWidth" ? "Fit width" : "Fit page";
+  return /* @__PURE__ */ jsxs9("header", { className: "flex h-10 shrink-0 items-center gap-1 border-b border-border px-2", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Undo2,
+          label: "Undo",
+          disabled: caps ? !caps.canUndo : true,
+          onClick: props.onUndo
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Redo2,
+          label: "Redo",
+          disabled: caps ? !caps.canRedo : true,
+          onClick: props.onRedo
+        }
+      ),
+      /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx9(
+        ToolbarParagraphStyleSelect,
+        {
+          disabled: !canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle,
+          styles: paragraphStyles,
+          value: props.formattingState?.paragraphStyleId,
+          onValueChange: props.onSetParagraphStyle
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarFontFamilySelect,
+        {
+          disabled: !canEdit || !props.onSetFontFamily,
+          value: props.formattingState?.fontFamily,
+          onValueChange: props.onSetFontFamily
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarFontSizeSelect,
+        {
+          disabled: !canEdit || !props.onSetFontSize,
+          value: props.formattingState?.fontSize,
+          onValueChange: props.onSetFontSize
+        }
+      ),
+      /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Bold2,
+          label: "Bold",
+          active: props.formattingState?.bold ?? false,
+          disabled: !canEdit,
+          onClick: props.onToggleBold
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Italic2,
+          label: "Italic",
+          active: props.formattingState?.italic ?? false,
+          disabled: !canEdit,
+          onClick: props.onToggleItalic
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Underline2,
+          label: "Underline",
+          active: props.formattingState?.underline ?? false,
+          disabled: !canEdit,
+          onClick: props.onToggleUnderline
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarFormattingOverflow,
+        {
+          disabled: !canEdit,
+          formattingState: props.formattingState,
+          onToggleStrikethrough: props.onToggleStrikethrough,
+          onToggleSuperscript: props.onToggleSuperscript,
+          onToggleSubscript: props.onToggleSubscript
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarColorPopover,
+        {
+          ariaLabel: "Text color",
+          colors: TEXT_COLORS.map((value) => ({ value, label: value })),
+          disabled: !canEdit || !props.onSetTextColor,
+          icon: /* @__PURE__ */ jsx9(Baseline2, { className: "h-3.5 w-3.5" }),
+          onSelect: (value) => {
+            if (value) {
+              props.onSetTextColor?.(value);
+            }
+          },
+          title: "Text color"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarColorPopover,
+        {
+          ariaLabel: "Highlight color",
+          colors: HIGHLIGHT_COLORS.map((entry) => ({ value: entry.value, label: entry.label })),
+          disabled: !canEdit || !props.onSetHighlightColor,
+          icon: /* @__PURE__ */ jsx9(Highlighter2, { className: "h-3.5 w-3.5" }),
+          onSelect: (value) => props.onSetHighlightColor?.(value),
+          title: "Highlight color"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarAlignmentPopover,
+        {
+          activeAlignment: props.formattingState?.alignment,
+          disabled: !canEdit || !props.onSetAlignment,
+          onSelect: (alignment) => props.onSetAlignment?.(alignment)
+        }
+      ),
+      /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Outdent,
+          label: "Outdent",
+          disabled: !canEdit,
+          onClick: props.onOutdent
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: Indent,
+          label: "Indent",
+          disabled: !canEdit,
+          onClick: props.onIndent
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarInsertMenu,
+        {
+          disabled: !canInsertStructural,
+          onInsertImage: props.onInsertImage,
+          onInsertPageBreak: props.onInsertPageBreak,
+          onInsertSectionBreak: props.onInsertSectionBreak,
+          onInsertTable: props.onInsertTable
+        }
+      ),
+      props.activeStory && props.activeStory.kind !== "main" ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: props.onCloseStory,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: `inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent hover:bg-accent-soft transition-colors outline-none ${focusRingClass6}`,
+            "aria-label": `Editing ${storyLabel(props.activeStory)} \u2014 click to return to main body`,
+            children: [
+              /* @__PURE__ */ jsx9("span", { className: "text-secondary", children: "\u2190" }),
+              storyLabel(props.activeStory)
+            ]
+          }
+        )
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex-1 text-center min-w-0", children: /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium truncate block", children: props.sourceLabel ?? "Untitled" }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx9(
+        TwToolbarIconButton,
+        {
+          icon: MessageSquare2,
+          label: "Add comment",
+          disabled: !canAddComment,
+          emphasis: true,
+          onClick: props.onAddComment
+        }
+      ),
+      /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+        /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+          Toggle.Root,
+          {
+            pressed: props.showTrackedChanges,
+            onPressedChange: props.onShowTrackedChangesChange,
+            disabled: caps ? !caps.trackChangesSupported : false,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none disabled:opacity-40 ${focusRingClass6}`,
+            children: props.showTrackedChanges ? /* @__PURE__ */ jsx9(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(EyeOff, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(
+          Tooltip3.Content,
+          {
+            className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50",
+            sideOffset: 6,
+            children: props.showTrackedChanges ? "Hide tracked changes" : "Show tracked changes"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsxs9(
+        ToggleGroup.Root,
+        {
+          type: "single",
+          value: workspaceMode,
+          onValueChange: (v) => {
+            if (v) props.onWorkspaceModeChange(v);
+          },
+          className: "flex items-center gap-0.5",
+          children: [
+            /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+              /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+                ToggleGroup.Item,
+                {
+                  value: "canvas",
+                  "aria-label": "Canvas workspace",
+                  onMouseDown: preserveEditorSelectionMouseDown,
+                  className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass6}`,
+                  children: /* @__PURE__ */ jsx9(Monitor, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Canvas \u2014 clean flowing text" }) })
+            ] }),
+            /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+              /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+                ToggleGroup.Item,
+                {
+                  value: "page",
+                  "aria-label": "Page workspace",
+                  onMouseDown: preserveEditorSelectionMouseDown,
+                  className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass6}`,
+                  children: /* @__PURE__ */ jsx9(FileText, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Page \u2014 layout-sensitive view" }) })
+            ] })
+          ]
+        }
+      ),
+      isPageMode && props.onZoomChange ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+            /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Zoom out",
+                className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass6}`,
+                disabled: typeof zoomLevel === "number" && zoomLevel <= 50,
+                onMouseDown: preserveEditorSelectionMouseDown,
+                onClick: () => {
+                  const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                  props.onZoomChange(Math.max(50, current - 10));
+                },
+                children: /* @__PURE__ */ jsx9(Minus, { className: "h-3 w-3" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Zoom out" }) })
+          ] }),
+          /* @__PURE__ */ jsxs9(Popover.Root, { children: [
+            /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+              /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Zoom: ${zoomLabel}`,
+                  onMouseDown: preserveEditorSelectionMouseDown,
+                  className: `inline-flex h-7 items-center justify-center rounded-md px-1.5 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass6}`,
+                  children: zoomLabel
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Zoom level" }) })
+            ] }),
+            /* @__PURE__ */ jsx9(Popover.Portal, { children: /* @__PURE__ */ jsx9(
+              Popover.Content,
+              {
+                className: "w-[140px] rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1 z-50",
+                sideOffset: 8,
+                align: "center",
+                children: getSupportedZoomPresets().map((preset) => {
+                  const label = `${preset}%`;
+                  return /* @__PURE__ */ jsx9(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseDown: preserveEditorSelectionMouseDown,
+                      className: `w-full rounded-md px-3 py-1.5 text-left text-xs transition-colors hover:bg-surface ${zoomLevel === preset ? "font-semibold text-accent" : "text-primary"}`,
+                      onClick: () => props.onZoomChange(preset),
+                      children: label
+                    }
+                  ) }, preset);
+                })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+            /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Zoom in",
+                className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass6}`,
+                disabled: typeof zoomLevel === "number" && zoomLevel >= 200,
+                onMouseDown: preserveEditorSelectionMouseDown,
+                onClick: () => {
+                  const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                  props.onZoomChange(Math.min(200, current + 10));
+                },
+                children: /* @__PURE__ */ jsx9(Plus, { className: "h-3 w-3" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Zoom in" }) })
+          ] })
+        ] })
+      ] }) : null,
+      props.compatibility && props.warnings ? /* @__PURE__ */ jsxs9(Popover.Root, { children: [
+        /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+          /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              onMouseDown: preserveEditorSelectionMouseDown,
+              className: `relative inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass6} ${(caps?.healthIssueCount ?? 0) > 0 ? "text-secondary" : "text-secondary"}`,
+              children: [
+                (caps?.healthIssueCount ?? 0) > 0 ? /* @__PURE__ */ jsx9(ShieldAlert2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(ShieldCheck2, { className: "h-4 w-4" }),
+                (caps?.healthIssueCount ?? 0) > 0 ? /* @__PURE__ */ jsx9("span", { className: "absolute -top-0.5 -right-0.5 flex h-3 min-w-[12px] items-center justify-center rounded-full bg-tertiary text-[8px] font-medium text-white", children: caps?.healthIssueCount }) : null
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: (caps?.healthIssueCount ?? 0) > 0 ? `Document health \u2014 ${caps?.healthIssueCount} issue${(caps?.healthIssueCount ?? 0) !== 1 ? "s" : ""}` : "Document health \u2014 no issues" }) })
+        ] }),
+        /* @__PURE__ */ jsx9(Popover.Portal, { children: /* @__PURE__ */ jsx9(
+          Popover.Content,
+          {
+            className: "w-[360px] max-h-[480px] overflow-y-auto rounded-lg bg-canvas shadow-lg ring-1 ring-border p-3 z-50",
+            sideOffset: 8,
+            align: "end",
+            children: /* @__PURE__ */ jsx9(
+              TwHealthPanel,
+              {
+                blockedReasons: props.blockedReasons,
+                compatibility: props.compatibility,
+                warnings: props.warnings
+              }
+            )
+          }
+        ) })
+      ] }) : null,
+      /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+        /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            disabled: caps ? !caps.canExport : true,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: [
+              "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold transition-colors outline-none",
+              focusRingClass6,
+              caps?.exportBlocked ? "cursor-not-allowed text-danger opacity-50" : "text-accent hover:bg-accent-soft"
+            ].join(" "),
+            onClick: props.onExport,
+            children: [
+              /* @__PURE__ */ jsx9(Download, { className: "h-3.5 w-3.5" }),
+              "Export .docx"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: caps?.exportBlocked ? "Export blocked by unsupported content" : "Export document" }) })
+      ] })
+    ] })
+  ] });
+}
+function ToolbarParagraphStyleSelect(props) {
+  const resolvedValue = props.value && props.styles.some((style) => style.styleId === props.value) ? props.value : "";
+  return /* @__PURE__ */ jsxs9(
+    Select.Root,
+    {
+      disabled: props.disabled,
+      onValueChange: (value) => props.onValueChange?.(value),
+      value: resolvedValue,
+      children: [
+        /* @__PURE__ */ jsxs9(
+          Select.Trigger,
+          {
+            "aria-label": "Paragraph style",
+            "aria-disabled": props.disabled || void 0,
+            "data-disabled": props.disabled ? "" : void 0,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: `inline-flex h-7 min-w-[8.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2.5 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+            children: [
+              /* @__PURE__ */ jsx9(Select.Value, { placeholder: "Style" }),
+              /* @__PURE__ */ jsx9(Select.Icon, { children: /* @__PURE__ */ jsx9(ChevronDown, { className: "h-3.5 w-3.5 text-tertiary" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(Select.Portal, { children: /* @__PURE__ */ jsx9(
+          Select.Content,
+          {
+            align: "start",
+            className: "z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border",
+            position: "popper",
+            sideOffset: 8,
+            children: /* @__PURE__ */ jsx9(Select.Viewport, { className: "p-1", children: props.styles.map((style) => /* @__PURE__ */ jsx9(
+              Select.Item,
+              {
+                className: `flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass6}`,
+                value: style.styleId,
+                children: /* @__PURE__ */ jsx9(Select.ItemText, { children: style.displayName })
+              },
+              style.styleId
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ToolbarFontFamilySelect(props) {
+  const resolvedValue = props.value && FONT_FAMILIES.includes(props.value) ? props.value : "";
+  return /* @__PURE__ */ jsxs9(
+    Select.Root,
+    {
+      disabled: props.disabled,
+      onValueChange: (value) => props.onValueChange?.(value),
+      value: resolvedValue,
+      children: [
+        /* @__PURE__ */ jsxs9(
+          Select.Trigger,
+          {
+            "aria-label": "Font family",
+            "aria-disabled": props.disabled || void 0,
+            "data-disabled": props.disabled ? "" : void 0,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: `inline-flex h-7 min-w-[7rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+            children: [
+              /* @__PURE__ */ jsx9(Select.Value, { placeholder: "Font" }),
+              /* @__PURE__ */ jsx9(Select.Icon, { children: /* @__PURE__ */ jsx9(ChevronDown, { className: "h-3.5 w-3.5 text-tertiary" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(Select.Portal, { children: /* @__PURE__ */ jsx9(
+          Select.Content,
+          {
+            align: "start",
+            className: "z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border",
+            position: "popper",
+            sideOffset: 8,
+            children: /* @__PURE__ */ jsx9(Select.Viewport, { className: "p-1", children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsx9(
+              Select.Item,
+              {
+                className: `flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass6}`,
+                value: font,
+                children: /* @__PURE__ */ jsx9(Select.ItemText, { children: font })
+              },
+              font
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ToolbarFontSizeSelect(props) {
+  const resolvedValue = typeof props.value === "number" && FONT_SIZES.includes(props.value) ? String(props.value) : "";
+  return /* @__PURE__ */ jsxs9(
+    Select.Root,
+    {
+      disabled: props.disabled,
+      onValueChange: (value) => props.onValueChange?.(Number(value)),
+      value: resolvedValue,
+      children: [
+        /* @__PURE__ */ jsxs9(
+          Select.Trigger,
+          {
+            "aria-label": "Font size",
+            "aria-disabled": props.disabled || void 0,
+            "data-disabled": props.disabled ? "" : void 0,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            className: `inline-flex h-7 min-w-[4rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+            children: [
+              /* @__PURE__ */ jsx9(Select.Value, { placeholder: "Size" }),
+              /* @__PURE__ */ jsx9(Select.Icon, { children: /* @__PURE__ */ jsx9(ChevronDown, { className: "h-3.5 w-3.5 text-tertiary" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(Select.Portal, { children: /* @__PURE__ */ jsx9(
+          Select.Content,
+          {
+            align: "start",
+            className: "z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border",
+            position: "popper",
+            sideOffset: 8,
+            children: /* @__PURE__ */ jsx9(Select.Viewport, { className: "p-1", children: FONT_SIZES.map((size) => /* @__PURE__ */ jsx9(
+              Select.Item,
+              {
+                className: `flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass6}`,
+                value: String(size),
+                children: /* @__PURE__ */ jsx9(Select.ItemText, { children: size })
+              },
+              size
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ToolbarFormattingOverflow(props) {
+  const [open, setOpen] = React3.useState(false);
+  return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+      /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          "aria-label": "More text formatting",
+          "aria-expanded": open,
+          disabled: props.disabled,
+          onMouseDown: preserveEditorSelectionMouseDown,
+          onClick: () => setOpen((value) => !value),
+          className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+          children: /* @__PURE__ */ jsx9(MoreHorizontal, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "More text formatting" }) })
+    ] }),
+    open ? /* @__PURE__ */ jsxs9("div", { className: "absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border", children: [
+      /* @__PURE__ */ jsx9("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Text styling" }),
+      /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-3 gap-1", children: [
+        /* @__PURE__ */ jsx9(
+          ToolbarPopoverActionButton,
+          {
+            active: props.formattingState?.strikethrough ?? false,
+            ariaLabel: "Strikethrough",
+            disabled: props.disabled,
+            icon: /* @__PURE__ */ jsx9(Strikethrough, { className: "h-3.5 w-3.5" }),
+            onClick: () => {
+              props.onToggleStrikethrough?.();
+              setOpen(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          ToolbarPopoverActionButton,
+          {
+            active: props.formattingState?.superscript ?? false,
+            ariaLabel: "Superscript",
+            disabled: props.disabled,
+            icon: /* @__PURE__ */ jsx9(Superscript, { className: "h-3.5 w-3.5" }),
+            onClick: () => {
+              props.onToggleSuperscript?.();
+              setOpen(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          ToolbarPopoverActionButton,
+          {
+            active: props.formattingState?.subscript ?? false,
+            ariaLabel: "Subscript",
+            disabled: props.disabled,
+            icon: /* @__PURE__ */ jsx9(Subscript, { className: "h-3.5 w-3.5" }),
+            onClick: () => {
+              props.onToggleSubscript?.();
+              setOpen(false);
+            }
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+function ToolbarColorPopover(props) {
+  const [open, setOpen] = React3.useState(false);
+  return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+      /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          "aria-label": props.ariaLabel,
+          "aria-expanded": open,
+          disabled: props.disabled,
+          onMouseDown: preserveEditorSelectionMouseDown,
+          onClick: () => setOpen((value) => !value),
+          className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+          children: props.icon
+        }
+      ) }),
+      /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: props.title }) })
+    ] }),
+    open ? /* @__PURE__ */ jsxs9("div", { className: "absolute left-0 top-9 z-50 w-[180px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border", children: [
+      /* @__PURE__ */ jsx9("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: props.title }),
+      /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-3 gap-1", children: props.colors.map((color) => /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${props.title} ${color.label}`,
+          disabled: props.disabled,
+          onMouseDown: preserveEditorSelectionMouseDown,
+          onClick: () => {
+            props.onSelect(color.value);
+            setOpen(false);
+          },
+          className: `inline-flex h-8 items-center justify-center rounded-md border border-border text-[10px] font-medium text-primary transition-transform hover:scale-[1.04] disabled:cursor-not-allowed disabled:opacity-40 ${color.value ? "" : "bg-surface"} ${focusRingClass6}`,
+          style: color.value ? { backgroundColor: color.value } : void 0,
+          children: color.value ? /* @__PURE__ */ jsx9("span", { className: "sr-only", children: color.label }) : "None"
+        },
+        `${props.ariaLabel}-${color.label}`
+      )) })
+    ] }) : null
+  ] });
+}
+function ToolbarAlignmentPopover(props) {
+  const [open, setOpen] = React3.useState(false);
+  const alignments = [
+    { value: "left", label: "Align left", icon: /* @__PURE__ */ jsx9(AlignLeft, { className: "h-3.5 w-3.5" }) },
+    { value: "center", label: "Align center", icon: /* @__PURE__ */ jsx9(AlignCenter, { className: "h-3.5 w-3.5" }) },
+    { value: "right", label: "Align right", icon: /* @__PURE__ */ jsx9(AlignRight, { className: "h-3.5 w-3.5" }) },
+    { value: "justify", label: "Align justify", icon: /* @__PURE__ */ jsx9(AlignJustify, { className: "h-3.5 w-3.5" }) }
+  ];
+  return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+      /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Paragraph alignment",
+          "aria-expanded": open,
+          disabled: props.disabled,
+          onMouseDown: preserveEditorSelectionMouseDown,
+          onClick: () => setOpen((value) => !value),
+          className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+          children: (alignments.find((entry) => entry.value === props.activeAlignment) ?? alignments[0])?.icon
+        }
+      ) }),
+      /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Paragraph alignment" }) })
+    ] }),
+    open ? /* @__PURE__ */ jsxs9("div", { className: "absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border", children: [
+      /* @__PURE__ */ jsx9("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Paragraph alignment" }),
+      /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-2 gap-1", children: alignments.map((entry) => /* @__PURE__ */ jsx9(
+        ToolbarPopoverActionButton,
+        {
+          active: props.activeAlignment === entry.value,
+          ariaLabel: entry.label,
+          disabled: props.disabled,
+          icon: entry.icon,
+          onClick: () => {
+            props.onSelect(entry.value);
+            setOpen(false);
+          }
+        },
+        entry.value
+      )) })
+    ] }) : null
+  ] });
+}
+function ToolbarInsertMenu(props) {
+  const [open, setOpen] = React3.useState(false);
+  async function handleImageChange(event) {
+    const file = event.target.files?.[0];
+    if (!file || props.disabled || !props.onInsertImage) {
+      event.target.value = "";
+      return;
+    }
+    const data = new Uint8Array(await file.arrayBuffer());
+    props.onInsertImage({
+      data,
+      mimeType: file.type || "image/png",
+      altText: file.name
+    });
+    setOpen(false);
+    event.target.value = "";
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Tooltip3.Root, { children: [
+      /* @__PURE__ */ jsx9(Tooltip3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Insert",
+          "aria-expanded": open,
+          disabled: props.disabled,
+          onMouseDown: preserveEditorSelectionMouseDown,
+          onClick: () => setOpen((value) => !value),
+          className: `inline-flex h-7 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+          children: [
+            "Insert",
+            /* @__PURE__ */ jsx9(ChevronDown, { className: "h-3.5 w-3.5 text-tertiary" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx9(Tooltip3.Portal, { children: /* @__PURE__ */ jsx9(Tooltip3.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Insert" }) })
+    ] }),
+    open ? /* @__PURE__ */ jsx9("div", { className: "absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border", children: /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx9(
+        ToolbarMenuButton,
+        {
+          ariaLabel: "Insert page break",
+          disabled: props.disabled || !props.onInsertPageBreak,
+          icon: /* @__PURE__ */ jsx9(Minus, { className: "h-3.5 w-3.5" }),
+          label: "Page break",
+          onClick: () => {
+            props.onInsertPageBreak?.();
+            setOpen(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarMenuButton,
+        {
+          ariaLabel: "Insert table",
+          disabled: props.disabled || !props.onInsertTable,
+          icon: /* @__PURE__ */ jsx9(Rows3, { className: "h-3.5 w-3.5" }),
+          label: "Table",
+          onClick: () => {
+            props.onInsertTable?.();
+            setOpen(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
+        "label",
+        {
+          className: `flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface ${props.disabled || !props.onInsertImage ? "pointer-events-none opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx9(ImagePlus, { className: "h-3.5 w-3.5 text-secondary" }),
+            /* @__PURE__ */ jsx9("span", { children: "Image" }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                accept: "image/png,image/jpeg,image/gif",
+                "aria-label": "Insert image",
+                className: "sr-only",
+                disabled: props.disabled || !props.onInsertImage,
+                type: "file",
+                onChange: (event) => {
+                  void handleImageChange(event);
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        ToolbarMenuButton,
+        {
+          ariaLabel: "Insert next-page section break",
+          disabled: props.disabled || !props.onInsertSectionBreak,
+          icon: /* @__PURE__ */ jsx9(FileText, { className: "h-3.5 w-3.5" }),
+          label: "Next-page section break",
+          onClick: () => {
+            props.onInsertSectionBreak?.("nextPage");
+            setOpen(false);
+          }
+        }
+      )
+    ] }) }) : null
+  ] });
+}
+function ToolbarPopoverActionButton(props) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      "aria-label": props.ariaLabel,
+      "aria-pressed": props.active,
+      disabled: props.disabled,
+      onMouseDown: preserveEditorSelectionMouseDown,
+      onClick: props.onClick,
+      className: `inline-flex h-8 items-center justify-center rounded-md border border-border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${props.active ? "bg-accent-soft text-accent" : "bg-canvas text-secondary hover:bg-surface"} ${focusRingClass6}`,
+      children: props.icon
+    }
+  );
+}
+function ToolbarMenuButton(props) {
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      "aria-label": props.ariaLabel,
+      disabled: props.disabled,
+      onMouseDown: preserveEditorSelectionMouseDown,
+      onClick: props.onClick,
+      className: `flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass6}`,
+      children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-secondary", children: props.icon }),
+        /* @__PURE__ */ jsx9("span", { children: props.label })
+      ]
+    }
+  );
+}
+function storyLabel(target) {
+  switch (target.kind) {
+    case "header":
+      return `Header (${target.variant})`;
+    case "footer":
+      return `Footer (${target.variant})`;
+    case "footnote":
+      return "Footnote";
+    case "endnote":
+      return "Endnote";
+    default:
+      return "Document";
+  }
+}
+
+// src/ui-tailwind/tw-review-workspace.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import * as Tooltip5 from "@radix-ui/react-tooltip";
+import { ChevronLeft, ChevronRight, List as List2 } from "lucide-react";
+
+// src/ui-tailwind/page-chrome-model.ts
+function computeLineMarkersIfEnabled(input) {
+  if (!input.pageLayout?.lineNumbering) {
+    return [];
+  }
+  return input.buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+}
+
+// src/ui-tailwind/chrome/tw-image-context-toolbar.tsx
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var IMAGE_SIZE_PRESETS = [
+  { label: "Small image", widthEmu: 1828800, heightEmu: 914400 },
+  { label: "Medium image", widthEmu: 2743200, heightEmu: 1371600 },
+  { label: "Large image", widthEmu: 3657600, heightEmu: 1828800 }
+];
+var NUDGE_EMU = 228600;
+function TwImageContextToolbar(props) {
+  const { activeImage } = props;
+  return /* @__PURE__ */ jsxs10(
+    "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",
+      children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Image" }),
+        /* @__PURE__ */ jsx10("span", { className: "rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary", children: activeImage.display }),
+        IMAGE_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx10(
+          ToolbarButton,
+          {
+            ariaLabel: preset.label,
+            disabled: props.disabled || !props.onSetImageLayout,
+            onClick: () => props.onSetImageLayout?.(activeImage.mediaId, {
+              widthEmu: preset.widthEmu,
+              heightEmu: preset.heightEmu
+            }),
+            children: preset.label.replace(" image", "")
+          },
+          preset.label
+        )),
+        activeImage.display === "floating" ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+          /* @__PURE__ */ jsx10(
+            ToolbarButton,
+            {
+              ariaLabel: "Nudge image left",
+              disabled: props.disabled || !props.onSetImageFrame,
+              onClick: () => props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) - NUDGE_EMU
+              }),
+              children: "Left"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            ToolbarButton,
+            {
+              ariaLabel: "Nudge image right",
+              disabled: props.disabled || !props.onSetImageFrame,
+              onClick: () => props.onSetImageFrame?.(activeImage.mediaId, {
+                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) + NUDGE_EMU
+              }),
+              children: "Right"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            ToolbarButton,
+            {
+              ariaLabel: "Nudge image up",
+              disabled: props.disabled || !props.onSetImageFrame,
+              onClick: () => props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) - NUDGE_EMU
+              }),
+              children: "Up"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            ToolbarButton,
+            {
+              ariaLabel: "Nudge image down",
+              disabled: props.disabled || !props.onSetImageFrame,
+              onClick: () => props.onSetImageFrame?.(activeImage.mediaId, {
+                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) + NUDGE_EMU
+              }),
+              children: "Down"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function ToolbarButton(props) {
+  return /* @__PURE__ */ jsx10(
+    "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",
+      children: props.children
+    }
+  );
+}
+
+// src/ui-tailwind/chrome/tw-layout-panel.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function TwLayoutPanel(props) {
+  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
+  const titlePageEnabled = props.pageLayout.differentFirstPage;
+  return /* @__PURE__ */ jsxs11("div", { className: "mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm", children: [
+    /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Section" }),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        ariaLabel: "Insert next-page section break",
+        disabled: props.readOnly || !props.onInsertSectionBreak,
+        onClick: () => props.onInsertSectionBreak?.("nextPage"),
+        children: "Next-page break"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        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
+          }
+        }),
+        children: nextOrientation === "landscape" ? "Landscape" : "Portrait"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        ariaLabel: "Delete current section break",
+        disabled: props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak,
+        onClick: () => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex),
+        children: "Delete break"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        ariaLabel: "Restart page numbering at 1",
+        disabled: props.readOnly || !props.onSetSectionPageNumbering,
+        onClick: () => props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+          ...props.pageLayout.pageNumbering ?? {},
+          start: 1
+        }),
+        children: "Restart numbering"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        ariaLabel: "Use roman page numbering",
+        disabled: props.readOnly || !props.onSetSectionPageNumbering,
+        onClick: () => props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+          ...props.pageLayout.pageNumbering ?? {},
+          format: "roman"
+        }),
+        children: "Roman numerals"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton2,
+      {
+        ariaLabel: "Toggle different first page",
+        disabled: props.readOnly || !props.onUpdateSectionLayout,
+        onClick: () => props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+          titlePage: !titlePageEnabled
+        }),
+        children: titlePageEnabled ? "Same first page" : "Different first page"
+      }
+    )
+  ] });
+}
+function ToolbarButton2(props) {
+  return /* @__PURE__ */ jsx11(
+    "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",
+      children: props.children
+    }
+  );
+}
+
+// src/ui-tailwind/chrome/tw-object-context-toolbar.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function TwObjectContextToolbar(props) {
+  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
+  return /* @__PURE__ */ jsxs12(
+    "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",
+      children: [
+        /* @__PURE__ */ jsx12("span", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Object" }),
+        /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary", children: label }),
+        /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary", children: props.activeObject.display }),
+        /* @__PURE__ */ jsx12("span", { className: "text-xs text-secondary", children: "Object selection is active." })
+      ]
+    }
+  );
+}
+
+// src/ui-tailwind/chrome/tw-page-ruler.tsx
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var MIN_HANDLE_TWIPS = 0;
+var HANDLE_OVERLAP_THRESHOLD_PERCENT = 1.4;
+var HANDLE_OFFSET_PERCENT = 0.9;
+var MARKER_HALF_PX = 8;
+function TwPageRuler(props) {
+  const trackRef = useRef2(null);
+  const dragCleanupRef = useRef2(null);
+  const [, setDragState] = useState2(null);
+  const [previewLayout, setPreviewLayout] = useState2(null);
+  const effectiveLayout = previewLayout ?? props.paragraphLayout;
+  const activeRegion = props.viewState.activePageRegion?.region ?? "body";
+  const isBodyParagraphContext = activeRegion === "body" && Boolean(props.paragraphLayout);
+  const availableHeader = props.pageLayout.headerVariants[0];
+  const availableFooter = props.pageLayout.footerVariants[0];
+  const usablePageWidth = Math.max(
+    1440,
+    props.pageLayout.pageWidth - props.pageLayout.marginLeft - props.pageLayout.marginRight
+  );
+  useEffect2(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
+  function beginDrag(kind, clientX) {
+    if (!isBodyParagraphContext || !props.paragraphLayout || props.readOnly) {
+      return;
+    }
+    dragCleanupRef.current?.();
+    const activeDrag = {
+      kind,
+      startClientX: clientX,
+      startLeftIndent: props.paragraphLayout.leftIndent,
+      startFirstLineOffset: props.paragraphLayout.firstLineOffset
+    };
+    setDragState(activeDrag);
+    const handleMouseMove = (event) => {
+      const track = trackRef.current;
+      if (!track) {
+        return;
+      }
+      const rect = track.getBoundingClientRect();
+      const deltaPx = event.clientX - activeDrag.startClientX;
+      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
+      if (activeDrag.kind === "left-indent") {
+        setPreviewLayout({
+          ...props.paragraphLayout,
+          leftIndent: clampTwips(activeDrag.startLeftIndent + deltaTwips),
+          firstLineOffset: activeDrag.startFirstLineOffset
+        });
+        return;
+      }
+      setPreviewLayout({
+        ...props.paragraphLayout,
+        leftIndent: activeDrag.startLeftIndent,
+        firstLineOffset: activeDrag.startFirstLineOffset + deltaTwips
+      });
+    };
+    const handleMouseUp = (event) => {
+      const track = trackRef.current;
+      if (!track || !props.onSetIndentation) {
+        cleanupDrag();
+        setDragState(null);
+        setPreviewLayout(null);
+        return;
+      }
+      const rect = track.getBoundingClientRect();
+      const deltaPx = event.clientX - activeDrag.startClientX;
+      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
+      const leftIndent = activeDrag.kind === "left-indent" ? clampTwips(activeDrag.startLeftIndent + deltaTwips) : activeDrag.startLeftIndent;
+      const firstLineOffset = activeDrag.kind === "first-line" ? activeDrag.startFirstLineOffset + deltaTwips : activeDrag.startFirstLineOffset;
+      cleanupDrag();
+      props.onSetIndentation(
+        composeIndentation(leftIndent, effectiveLayout?.rightIndent ?? props.paragraphLayout?.rightIndent ?? 0, firstLineOffset)
+      );
+      setDragState(null);
+      setPreviewLayout(null);
+    };
+    const cleanupDrag = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (dragCleanupRef.current === cleanupDrag) {
+        dragCleanupRef.current = null;
+      }
+    };
+    dragCleanupRef.current = cleanupDrag;
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+  const markerLayout = useMemo(() => {
+    if (!effectiveLayout || !isBodyParagraphContext) {
+      return null;
+    }
+    return {
+      leftIndent: twipsToPercent(effectiveLayout.leftIndent, usablePageWidth),
+      firstLine: twipsToPercent(
+        Math.max(MIN_HANDLE_TWIPS, effectiveLayout.leftIndent + effectiveLayout.firstLineOffset),
+        usablePageWidth
+      ),
+      tabStops: effectiveLayout.tabStops.map((tabStop, index) => ({
+        id: `${tabStop.pos}-${index}`,
+        left: twipsToPercent(tabStop.pos, usablePageWidth)
+      }))
+    };
+  }, [effectiveLayout, isBodyParagraphContext, usablePageWidth]);
+  const handlesOverlap = markerLayout ? Math.abs(markerLayout.leftIndent - markerLayout.firstLine) < HANDLE_OVERLAP_THRESHOLD_PERCENT : false;
+  const leftIndentHandleLeft = markerLayout ? offsetHandlePercent(markerLayout.leftIndent, handlesOverlap ? -HANDLE_OFFSET_PERCENT : 0) : 0;
+  const firstLineHandleLeft = markerLayout ? offsetHandlePercent(markerLayout.firstLine, handlesOverlap ? HANDLE_OFFSET_PERCENT : 0) : 0;
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      "aria-label": "Page ruler",
+      className: "mb-4 rounded-2xl border border-border bg-surface/80 px-4 py-3 shadow-sm",
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Return to document body",
+              title: "Return to document body",
+              onClick: props.onReturnToBody,
+              className: regionButtonClass(activeRegion === "body"),
+              children: "Body"
+            }
+          ),
+          availableHeader ? /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Open header story",
+              title: "Open header story",
+              onClick: props.onOpenHeader,
+              className: regionButtonClass(activeRegion === "header"),
+              children: "Header"
+            }
+          ) : null,
+          availableFooter ? /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Open footer story",
+              title: "Open footer story",
+              onClick: props.onOpenFooter,
+              className: regionButtonClass(activeRegion === "footer"),
+              children: "Footer"
+            }
+          ) : null,
+          props.viewState.activeListContext ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+            /* @__PURE__ */ jsx13("div", { className: "h-4 w-px bg-border" }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Continue numbering",
+                title: "Continue numbering from previous list",
+                disabled: props.readOnly,
+                onClick: props.onContinueNumbering,
+                className: controlButtonClass,
+                children: "Continue"
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Restart numbering",
+                title: "Restart numbering at 1",
+                disabled: props.readOnly,
+                onClick: props.onRestartNumbering,
+                className: controlButtonClass,
+                children: "Restart"
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: "mb-2 flex items-center justify-between",
+            "aria-label": `Section ${props.pageLayout.sectionIndex + 1}, ${props.pageLayout.orientation}`,
+            title: `Section ${props.pageLayout.sectionIndex + 1} \xB7 ${props.pageLayout.orientation}`,
+            children: /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Page ruler" })
+          }
+        ),
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            ref: trackRef,
+            "aria-label": "Page ruler track",
+            className: "relative h-14 overflow-hidden rounded-xl border border-border bg-canvas",
+            onClick: (event) => {
+              if (props.readOnly || !isBodyParagraphContext || !props.paragraphLayout || !props.onSetTabStops) {
+                return;
+              }
+              if (event.target.dataset.handle === "true") {
+                return;
+              }
+              const rect = event.currentTarget.getBoundingClientRect();
+              const nextPos = clampTwips(pxToTwips(event.clientX - rect.left, rect.width, usablePageWidth));
+              props.onSetTabStops(
+                [...props.paragraphLayout.tabStops, { pos: nextPos, val: "left" }].sort((left, right) => left.pos - right.pos)
+              );
+            },
+            children: [
+              /* @__PURE__ */ jsx13("div", { className: "absolute inset-x-4 top-2 h-px bg-border" }),
+              /* @__PURE__ */ jsx13("div", { className: "absolute inset-x-4 top-7 h-px bg-border/70" }),
+              Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx13(
+                "div",
+                {
+                  className: "absolute top-1 h-3 w-px bg-border/80",
+                  style: { left: `${12 + index * 12}%` }
+                },
+                `tick-${index}`
+              )),
+              markerLayout ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    "data-handle": "true",
+                    "aria-label": "Left indent handle",
+                    title: `Left indent: ${effectiveLayout?.leftIndent ?? 0} twips`,
+                    disabled: props.readOnly,
+                    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" : ""}`,
+                    style: { left: markerLeftStyle(leftIndentHandleLeft) },
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      beginDrag("left-indent", event.clientX);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    "data-handle": "true",
+                    "aria-label": "First line indent handle",
+                    title: `First line offset: ${effectiveLayout?.firstLineOffset ?? 0} twips`,
+                    disabled: props.readOnly,
+                    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" : ""}`,
+                    style: { left: markerLeftStyle(firstLineHandleLeft) },
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      beginDrag("first-line", event.clientX);
+                    }
+                  }
+                ),
+                markerLayout.tabStops.map((tabStop) => /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    "data-handle": "true",
+                    "aria-label": `Tab stop at ${tabStop.left.toFixed(0)}%`,
+                    title: `Tab stop`,
+                    className: "absolute top-5 h-4 w-4 -translate-x-1/2 rounded-sm border border-border bg-surface-raised shadow-sm",
+                    style: { left: markerLeftStyle(tabStop.left) }
+                  },
+                  tabStop.id
+                ))
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function composeIndentation(leftIndent, rightIndent, firstLineOffset) {
+  const indentation = {};
+  if (leftIndent > 0) {
+    indentation.left = leftIndent;
+  }
+  if (rightIndent > 0) {
+    indentation.right = rightIndent;
+  }
+  if (firstLineOffset > 0) {
+    indentation.firstLine = Math.round(firstLineOffset);
+  } else if (firstLineOffset < 0) {
+    indentation.hanging = Math.round(Math.abs(firstLineOffset));
+  }
+  return indentation;
+}
+function regionButtonClass(active) {
+  return `inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors ${active ? "border-accent/30 bg-accent-soft text-accent" : "border-border bg-canvas text-secondary hover:bg-surface"}`;
+}
+var controlButtonClass = "inline-flex items-center rounded-full border border-border bg-canvas px-3 py-1 text-xs text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50";
+function twipsToPercent(value, usablePageWidth) {
+  return Math.max(0, Math.min(100, value / usablePageWidth * 100));
+}
+function pxToTwips(px, width, usablePageWidth) {
+  if (width <= 0) {
+    return 0;
+  }
+  return Math.round(px / width * usablePageWidth);
+}
+function clampTwips(value) {
+  return Math.max(MIN_HANDLE_TWIPS, Math.round(value));
+}
+function offsetHandlePercent(value, offset) {
+  return Math.max(0, Math.min(100, value + offset));
+}
+function markerLeftStyle(value) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return `clamp(${MARKER_HALF_PX}px, ${clamped}%, calc(100% - ${MARKER_HALF_PX}px))`;
+}
+
+// src/ui-tailwind/chrome/tw-suggestion-card.tsx
+import * as Tooltip4 from "@radix-ui/react-tooltip";
+import { Check as Check3, MessageSquare as MessageSquare3, Pencil, X as X2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var focusRingClass7 = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+function TwSuggestionCard(props) {
+  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 /* @__PURE__ */ jsxs14(
+    "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",
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx14("div", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-warning", children: props.model.kindLabel }),
+            /* @__PURE__ */ jsx14("div", { className: "mt-1 max-w-[16rem] truncate text-sm text-primary", children: props.model.previewText })
+          ] }),
+          contextLabel ? /* @__PURE__ */ jsx14("div", { className: "shrink-0 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-accent", children: contextLabel }) : null
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx14(
+            SuggestionActionButton,
+            {
+              icon: /* @__PURE__ */ jsx14(Check3, { className: "h-3.5 w-3.5" }),
+              label: "Accept suggestion",
+              disabled: !props.model.canAccept,
+              tone: "accept",
+              onClick: props.onAccept
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            SuggestionActionButton,
+            {
+              icon: /* @__PURE__ */ jsx14(X2, { className: "h-3.5 w-3.5" }),
+              label: "Reject suggestion",
+              disabled: !props.model.canReject,
+              tone: "reject",
+              onClick: props.onReject
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            SuggestionActionButton,
+            {
+              icon: /* @__PURE__ */ jsx14(Pencil, { className: "h-3.5 w-3.5" }),
+              label: "Edit suggestion",
+              disabled: !props.model.canEditSuggestion,
+              tone: "neutral",
+              onClick: props.onEditSuggestion
+            }
+          ),
+          /* @__PURE__ */ jsxs14(Tooltip4.Root, { children: [
+            /* @__PURE__ */ jsx14(Tooltip4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+              "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 ${focusRingClass7}`,
+                children: [
+                  /* @__PURE__ */ jsx14(MessageSquare3, { className: "h-3.5 w-3.5" }),
+                  "Comment"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx14(Tooltip4.Portal, { children: /* @__PURE__ */ jsx14(
+              Tooltip4.Content,
+              {
+                className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50",
+                sideOffset: 6,
+                children: tooltipLabel
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function summarizeSuggestionContext(model) {
+  const labels = model.badges.map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+  const summary = labels.slice(0, 2).join(" \xB7 ");
+  return summary.length > 36 ? `${summary.slice(0, 33)}...` : summary;
+}
+function SuggestionActionButton(props) {
+  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" : props.tone === "reject" ? "border-rose-500/30 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-300" : "border-border text-secondary hover:bg-surface";
+  return /* @__PURE__ */ jsxs14(
+    "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} ${focusRingClass7}`,
+      children: [
+        props.icon,
+        props.label.replace(" suggestion", "").replace(" on suggestion", "")
+      ]
+    }
+  );
+}
+
+// src/ui-tailwind/chrome/tw-table-context-toolbar.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var CELL_COLORS = [
+  "#ffffff",
+  "#f0f0ee",
+  "#dbeafe",
+  "#fef3c7",
+  "#dcfce7",
+  "#fce7f3"
+];
+function TwTableContextToolbar(props) {
+  return /* @__PURE__ */ jsxs15(
+    "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",
+      children: [
+        /* @__PURE__ */ jsx15("span", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary", children: "Table" }),
+        /* @__PURE__ */ jsxs15(
+          "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,
+            onMouseDown: preserveEditorSelectionMouseDown,
+            onChange: (event) => props.onSetTableStyle?.(event.target.value),
+            defaultValue: "",
+            children: [
+              /* @__PURE__ */ jsx15("option", { value: "", disabled: true, children: "Table style" }),
+              props.tableStyles.map((style) => /* @__PURE__ */ jsx15("option", { value: style.styleId, children: style.displayName }, style.styleId))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Add row above", disabled: props.disabled, onClick: props.onAddRowBefore, children: "Row above" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Add row below", disabled: props.disabled, onClick: props.onAddRowAfter, children: "Row below" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Delete row", disabled: props.disabled, onClick: props.onDeleteRow, children: "Delete row" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Add column left", disabled: props.disabled, onClick: props.onAddColumnBefore, children: "Column left" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Add column right", disabled: props.disabled, onClick: props.onAddColumnAfter, children: "Column right" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Delete column", disabled: props.disabled, onClick: props.onDeleteColumn, children: "Delete column" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Merge cells", disabled: props.disabled, onClick: props.onMergeCells, children: "Merge" }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Split cell", disabled: props.disabled, onClick: props.onSplitCell, children: "Split" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx15("span", { className: "text-[11px] text-secondary", children: "Fill" }),
+          CELL_COLORS.map((color) => /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Set cell fill ${color}`,
+              disabled: props.disabled || !props.onSetCellBackground,
+              onMouseDown: preserveEditorSelectionMouseDown,
+              onClick: () => props.onSetCellBackground?.(color),
+              className: "h-6 w-6 rounded border border-border disabled:opacity-40",
+              style: { backgroundColor: color }
+            },
+            color
+          ))
+        ] }),
+        /* @__PURE__ */ jsx15(ToolbarButton3, { ariaLabel: "Delete table", danger: true, disabled: props.disabled, onClick: props.onDeleteTable, children: "Delete table" })
+      ]
+    }
+  );
+}
+function ToolbarButton3(props) {
+  return /* @__PURE__ */ jsx15(
+    "button",
+    {
+      type: "button",
+      "aria-label": props.ariaLabel,
+      disabled: props.disabled || !props.onClick,
+      onMouseDown: preserveEditorSelectionMouseDown,
+      onClick: props.onClick,
+      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"}`,
+      children: props.children
+    }
+  );
+}
+
+// src/ui-tailwind/tw-review-workspace.tsx
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function TwReviewWorkspace(inputProps) {
+  const props = {
+    ...inputProps,
+    ...inputProps.commands
+  };
+  const { snapshot, viewState } = props;
+  const selectionToolbarRootRef = useRef3(null);
+  const caps = props.capabilities;
+  const isPageWorkspace = props.workspaceMode === "page";
+  const markupDisplay = props.markupDisplay;
+  const [navOpen, setNavOpen] = useState3(false);
+  const [layoutToolsOpen, setLayoutToolsOpen] = useState3(false);
+  const zoomLevel = props.zoomLevel ?? 100;
+  const zoomScale = typeof zoomLevel === "number" ? zoomLevel / 100 : 1;
+  const preserveOnlyCount = caps?.preserveOnlyCount ?? snapshot.compatibility.featureEntries.filter(
+    (entry) => entry.featureClass === "preserve-only"
+  ).length;
+  const blockedReasons = props.interactionGuardSnapshot?.blockedReasons ?? props.workflowScopeSnapshot?.blockedReasons ?? [];
+  const chromeVisibility = {
+    toolbar: true,
+    alerts: true,
+    selectionOverlay: true,
+    contextToolbars: true,
+    pageChrome: true,
+    statusBar: true,
+    reviewRail: true,
+    ...props.chromeVisibility
+  };
+  const showReviewRail = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
+  const headings = props.documentNavigation?.headings ?? [];
+  const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
+  const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
+  const selectionPosition = viewState.selection.activeRange.kind === "node" ? viewState.selection.activeRange.at : viewState.selection.head;
+  const activeParagraphLayout = useMemo2(
+    () => resolveActiveParagraphLayout(snapshot.surface, selectionPosition),
+    [selectionPosition, snapshot.surface]
+  );
+  const isTableContext = Boolean(
+    props.formattingState?.breadcrumb.some((item) => item.kind === "table" || item.kind === "table_cell" || item.kind === "table_row")
+  );
+  const contextualSurface = props.activeImageContext ? "image" : props.activeObjectContext ? "object" : isTableContext ? "table" : null;
+  const pageChromeModel = useMemo2(
+    () => buildPageChromeModel(
+      snapshot.surface,
+      snapshot.pageLayout,
+      props.documentNavigation,
+      snapshot.activeStory
+    ),
+    [props.documentNavigation, snapshot.activeStory, snapshot.pageLayout, snapshot.surface]
+  );
+  const selectionToolbarPlacement = resolveSelectionToolbarPlacement(
+    props.selectionToolbarAnchor,
+    selectionToolbarRootRef.current,
+    zoomScale
+  );
+  const activePage = props.documentNavigation?.pages[props.documentNavigation.activePageIndex] ?? null;
+  const pageShellMetrics = useMemo2(
+    () => buildPageShellMetrics(snapshot.pageLayout),
+    [snapshot.pageLayout]
+  );
+  const hidePageBorderForActiveEditing = isPageWorkspace && snapshot.activeStory.kind === "main" && shouldHidePageBorderForSelection(viewState.selection);
+  const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
+  const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
+  const pageChromeReadOnly = snapshot.readOnly || snapshot.activeStory.kind !== "main" || effectiveSelectionMode !== "edit";
+  const toolbarInteractionPolicy = caps ? {
+    mode: effectiveSelectionMode,
+    canFormatText: caps.canEdit && effectiveSelectionMode === "edit",
+    canInsertStructural: caps.canEdit && effectiveSelectionMode === "edit",
+    canAddComment: caps.canAddComment && effectiveSelectionMode !== "view" && effectiveSelectionMode !== "blocked"
+  } : void 0;
+  useEffect3(() => {
+    recordPerfSample("workspace.chrome");
+    incrementInvalidationCounter("workspace.chrome.recomputes");
+  }, [activeParagraphLayout, pageChromeModel, pageShellMetrics]);
+  useEffect3(() => {
+    if (isPageWorkspace && snapshot.activeStory.kind !== "main") {
+      setLayoutToolsOpen(true);
+    }
+  }, [isPageWorkspace, snapshot.activeStory.kind]);
+  const dismissSelectionToolbar = useCallback2(() => {
+    props.onDismissSelectionToolbar?.();
+  }, [props.onDismissSelectionToolbar]);
+  const runWithSelectionToolbarDismiss = useCallback2(
+    (action) => () => {
+      dismissSelectionToolbar();
+      action?.();
+    },
+    [dismissSelectionToolbar]
+  );
+  return /* @__PURE__ */ jsx16(Tooltip5.Provider, { delayDuration: 400, children: /* @__PURE__ */ jsxs16("div", { className: "flex h-full flex-col bg-canvas text-primary", children: [
+    chromeVisibility.toolbar ? /* @__PURE__ */ jsx16(
+      TwToolbar,
+      {
+        sourceLabel: snapshot.sourceLabel,
+        capabilities: caps,
+        compatibility: snapshot.compatibility,
+        warnings: snapshot.warnings,
+        interactionPolicy: toolbarInteractionPolicy,
+        workspaceMode: props.workspaceMode,
+        zoomLevel: props.zoomLevel,
+        formattingState: props.formattingState,
+        styleCatalog: props.styleCatalog,
+        showTrackedChanges: props.showTrackedChanges,
+        onUndo: runWithSelectionToolbarDismiss(props.onUndo),
+        onRedo: runWithSelectionToolbarDismiss(props.onRedo),
+        onSetParagraphStyle: props.onSetParagraphStyle ? (styleId) => {
+          dismissSelectionToolbar();
+          props.onSetParagraphStyle?.(styleId);
+        } : void 0,
+        onToggleBold: runWithSelectionToolbarDismiss(props.onToggleBold),
+        onToggleItalic: runWithSelectionToolbarDismiss(props.onToggleItalic),
+        onToggleUnderline: runWithSelectionToolbarDismiss(props.onToggleUnderline),
+        onToggleStrikethrough: runWithSelectionToolbarDismiss(props.onToggleStrikethrough),
+        onToggleSuperscript: runWithSelectionToolbarDismiss(props.onToggleSuperscript),
+        onToggleSubscript: runWithSelectionToolbarDismiss(props.onToggleSubscript),
+        onSetFontFamily: props.onSetFontFamily ? (fontFamily) => {
+          dismissSelectionToolbar();
+          props.onSetFontFamily?.(fontFamily);
+        } : void 0,
+        onSetFontSize: props.onSetFontSize ? (fontSize) => {
+          dismissSelectionToolbar();
+          props.onSetFontSize?.(fontSize);
+        } : void 0,
+        onSetTextColor: props.onSetTextColor ? (color) => {
+          dismissSelectionToolbar();
+          props.onSetTextColor?.(color);
+        } : void 0,
+        onSetHighlightColor: props.onSetHighlightColor ? (color) => {
+          dismissSelectionToolbar();
+          props.onSetHighlightColor?.(color);
+        } : void 0,
+        onSetAlignment: props.onSetAlignment ? (alignment) => {
+          dismissSelectionToolbar();
+          props.onSetAlignment?.(alignment);
+        } : void 0,
+        onOutdent: runWithSelectionToolbarDismiss(props.onOutdent),
+        onIndent: runWithSelectionToolbarDismiss(props.onIndent),
+        onAddComment: runWithSelectionToolbarDismiss(props.onAddComment),
+        onInsertPageBreak: runWithSelectionToolbarDismiss(props.onInsertPageBreak),
+        onInsertTable: runWithSelectionToolbarDismiss(props.onInsertTable),
+        onInsertSectionBreak: props.onInsertSectionBreak ? (type) => {
+          dismissSelectionToolbar();
+          props.onInsertSectionBreak?.(type);
+        } : void 0,
+        onInsertImage: props.onInsertImage ? (options) => {
+          dismissSelectionToolbar();
+          props.onInsertImage?.(options);
+        } : void 0,
+        onExport: runWithSelectionToolbarDismiss(props.onExport),
+        activeStory: snapshot.activeStory,
+        onCloseStory: props.onCloseStory ? runWithSelectionToolbarDismiss(props.onCloseStory) : void 0,
+        onWorkspaceModeChange: (value) => {
+          dismissSelectionToolbar();
+          props.onWorkspaceModeChange(value);
+        },
+        onZoomChange: props.onZoomChange ? (level) => {
+          dismissSelectionToolbar();
+          props.onZoomChange?.(level);
+        } : void 0,
+        onShowTrackedChangesChange: (show) => {
+          dismissSelectionToolbar();
+          props.onShowTrackedChangesChange(show);
+        },
+        blockedReasons
+      }
+    ) : null,
+    chromeVisibility.alerts ? /* @__PURE__ */ jsx16(
+      TwAlertBanner,
+      {
+        snapshot,
+        preserveOnlyCount,
+        workflowBlockedReasons: blockedReasons
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 min-h-0", children: [
+      isPageWorkspace && chromeVisibility.pageChrome ? /* @__PURE__ */ jsx16(
+        "aside",
+        {
+          "aria-label": "Document navigator",
+          className: `shrink-0 border-r border-border bg-surface transition-[width] duration-200 ${navOpen ? "w-48" : "w-0"} overflow-hidden`,
+          children: navOpen ? /* @__PURE__ */ jsxs16("div", { className: "flex h-full flex-col", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border", children: [
+              /* @__PURE__ */ jsx16("span", { className: "text-xs font-medium text-secondary uppercase tracking-wider", children: "Navigator" }),
+              /* @__PURE__ */ jsxs16(Tooltip5.Root, { children: [
+                /* @__PURE__ */ jsx16(Tooltip5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx16(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Collapse navigator",
+                    onMouseDown: preserveEditorSelectionMouseDown,
+                    onClick: () => {
+                      dismissSelectionToolbar();
+                      setNavOpen(false);
+                    },
+                    className: "inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary hover:bg-surface-hover transition-colors",
+                    children: /* @__PURE__ */ jsx16(ChevronLeft, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx16(Tooltip5.Portal, { children: /* @__PURE__ */ jsx16(Tooltip5.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Collapse navigator" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx16("nav", { className: "flex-1 overflow-y-auto px-2 py-2", "aria-label": "Document headings", children: headings.length > 0 ? /* @__PURE__ */ jsx16("ul", { className: "space-y-0.5", children: headings.map((entry) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsx16(
+              "button",
+              {
+                type: "button",
+                className: "block w-full truncate rounded-md px-2 py-1 text-left text-xs text-primary hover:bg-surface-hover",
+                style: { paddingLeft: `${8 + (entry.level - 1) * 12}px` },
+                onMouseDown: preserveEditorSelectionMouseDown,
+                onClick: () => {
+                  dismissSelectionToolbar();
+                  props.onNavigateHeading?.(entry.headingId);
+                  setNavOpen(false);
+                },
+                children: entry.text
+              }
+            ) }, entry.headingId)) }) : /* @__PURE__ */ jsx16("p", { className: "px-2 py-4 text-xs text-tertiary", children: "No headings found." }) })
+          ] }) : null
+        }
+      ) : null,
+      isPageWorkspace && chromeVisibility.pageChrome && !navOpen ? /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-start pt-2 pl-1", children: /* @__PURE__ */ jsxs16(Tooltip5.Root, { children: [
+        /* @__PURE__ */ jsx16(Tooltip5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Open document navigator",
+            onMouseDown: preserveEditorSelectionMouseDown,
+            onClick: () => {
+              dismissSelectionToolbar();
+              setNavOpen(true);
+            },
+            className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary hover:bg-surface-hover transition-colors",
+            children: /* @__PURE__ */ jsx16(List2, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx16(Tooltip5.Portal, { children: /* @__PURE__ */ jsx16(Tooltip5.Content, { className: "rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50", sideOffset: 6, children: "Open document navigator" }) })
+      ] }) }) : null,
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 flex-col min-w-0", children: [
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: `flex-1 overflow-y-auto ${isPageWorkspace ? "bg-surface" : "bg-canvas"}`,
+            "data-wre-scroll-root": "true",
+            children: /* @__PURE__ */ jsxs16(
+              "div",
+              {
+                ref: selectionToolbarRootRef,
+                className: `mx-auto min-h-full ${isPageWorkspace ? "wre-page-chrome wre-page-surface relative max-w-[840px] my-8 overflow-hidden" : "wre-canvas-surface relative bg-canvas"}`,
+                style: isPageWorkspace && zoomScale !== 1 ? { transform: `scale(${zoomScale})`, transformOrigin: "top center" } : void 0,
+                children: [
+                  isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout ? /* @__PURE__ */ jsx16("div", { className: "border-b border-border/70 bg-surface/65 px-5 py-3", "data-testid": "page-context-summary", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-2 text-xs text-secondary", children: [
+                      /* @__PURE__ */ jsx16("span", { className: "rounded-full bg-canvas px-2 py-1 font-medium text-primary", children: activePage ? `Page ${activePage.pageIndex + 1} of ${props.documentNavigation?.pageCount ?? 1}` : "Page workspace" }),
+                      /* @__PURE__ */ jsx16("span", { children: `Section ${snapshot.pageLayout.sectionIndex + 1}` }),
+                      /* @__PURE__ */ jsx16("span", { className: "uppercase tracking-[0.12em] text-tertiary", children: snapshot.pageLayout.orientation })
+                    ] }),
+                    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+                      snapshot.activeStory.kind !== "main" ? /* @__PURE__ */ jsx16(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Return to document body",
+                          onMouseDown: preserveEditorSelectionMouseDown,
+                          onClick: runWithSelectionToolbarDismiss(props.onCloseStory),
+                          className: "inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface",
+                          children: "Body"
+                        }
+                      ) : null,
+                      snapshot.activeStory.kind === "main" && snapshot.pageLayout.sectionIndex > 0 ? /* @__PURE__ */ jsxs16(Fragment8, { children: [
+                        /* @__PURE__ */ jsx16(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Link header to previous",
+                            disabled: !props.onSetHeaderFooterLink || !allowLocalChromeMutations,
+                            onMouseDown: preserveEditorSelectionMouseDown,
+                            onClick: () => {
+                              dismissSelectionToolbar();
+                              props.onSetHeaderFooterLink?.(snapshot.pageLayout.sectionIndex, {
+                                kind: "header",
+                                variant: headerVariant,
+                                linkToPrevious: true
+                              });
+                            },
+                            className: "inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40",
+                            children: "Link header"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx16(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Link footer to previous",
+                            disabled: !props.onSetHeaderFooterLink || !allowLocalChromeMutations,
+                            onMouseDown: preserveEditorSelectionMouseDown,
+                            onClick: () => {
+                              dismissSelectionToolbar();
+                              props.onSetHeaderFooterLink?.(snapshot.pageLayout.sectionIndex, {
+                                kind: "footer",
+                                variant: footerVariant,
+                                linkToPrevious: true
+                              });
+                            },
+                            className: "inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40",
+                            children: "Link footer"
+                          }
+                        )
+                      ] }) : null,
+                      /* @__PURE__ */ jsxs16(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Toggle layout tools",
+                          "aria-expanded": layoutToolsOpen,
+                          onMouseDown: preserveEditorSelectionMouseDown,
+                          onClick: () => {
+                            dismissSelectionToolbar();
+                            setLayoutToolsOpen((open) => !open);
+                          },
+                          className: "inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface",
+                          children: [
+                            /* @__PURE__ */ jsx16(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${layoutToolsOpen ? "rotate-90" : ""}` }),
+                            "Layout tools"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }) }) : null,
+                  isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout && layoutToolsOpen ? /* @__PURE__ */ jsxs16("div", { className: "px-5 pt-3", children: [
+                    /* @__PURE__ */ jsx16(
+                      TwPageRuler,
+                      {
+                        pageLayout: snapshot.pageLayout,
+                        viewState,
+                        paragraphLayout: activeParagraphLayout,
+                        readOnly: pageChromeReadOnly,
+                        onReturnToBody: props.onCloseStory ? runWithSelectionToolbarDismiss(props.onCloseStory) : () => void 0,
+                        onOpenHeader: props.onOpenHeaderStory ? runWithSelectionToolbarDismiss(props.onOpenHeaderStory) : void 0,
+                        onOpenFooter: props.onOpenFooterStory ? runWithSelectionToolbarDismiss(props.onOpenFooterStory) : void 0,
+                        onSetIndentation: props.onSetParagraphIndentation ? (indentation) => {
+                          dismissSelectionToolbar();
+                          props.onSetParagraphIndentation?.(indentation);
+                        } : void 0,
+                        onSetTabStops: props.onSetParagraphTabStops ? (tabStops) => {
+                          dismissSelectionToolbar();
+                          props.onSetParagraphTabStops?.(tabStops);
+                        } : void 0,
+                        onRestartNumbering: props.onRestartNumbering ? runWithSelectionToolbarDismiss(props.onRestartNumbering) : void 0,
+                        onContinueNumbering: props.onContinueNumbering ? runWithSelectionToolbarDismiss(props.onContinueNumbering) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16(
+                      TwLayoutPanel,
+                      {
+                        pageLayout: snapshot.pageLayout,
+                        readOnly: pageChromeReadOnly,
+                        onInsertSectionBreak: props.onInsertSectionBreak ? (type) => {
+                          dismissSelectionToolbar();
+                          props.onInsertSectionBreak?.(type);
+                        } : void 0,
+                        onDeleteSectionBreak: props.onDeleteSectionBreak ? (sectionIndex) => {
+                          dismissSelectionToolbar();
+                          props.onDeleteSectionBreak?.(sectionIndex);
+                        } : void 0,
+                        onUpdateSectionLayout: props.onUpdateSectionLayout ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onUpdateSectionLayout?.(sectionIndex, patch);
+                        } : void 0,
+                        onSetSectionPageNumbering: props.onSetSectionPageNumbering ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onSetSectionPageNumbering?.(sectionIndex, patch);
+                        } : void 0
+                      }
+                    )
+                  ] }) : null,
+                  chromeVisibility.contextToolbars && contextualSurface ? /* @__PURE__ */ jsxs16("div", { className: "px-5 pt-3 space-y-3", children: [
+                    contextualSurface === "table" ? /* @__PURE__ */ jsx16(
+                      TwTableContextToolbar,
+                      {
+                        disabled: !allowLocalChromeMutations,
+                        tableStyles: props.styleCatalog?.tables ?? [],
+                        onSetTableStyle: props.onSetTableStyle ? (styleId) => {
+                          dismissSelectionToolbar();
+                          props.onSetTableStyle?.(styleId);
+                        } : void 0,
+                        onAddRowBefore: runWithSelectionToolbarDismiss(props.onAddRowBefore),
+                        onAddRowAfter: runWithSelectionToolbarDismiss(props.onAddRowAfter),
+                        onAddColumnBefore: runWithSelectionToolbarDismiss(props.onAddColumnBefore),
+                        onAddColumnAfter: runWithSelectionToolbarDismiss(props.onAddColumnAfter),
+                        onDeleteRow: runWithSelectionToolbarDismiss(props.onDeleteRow),
+                        onDeleteColumn: runWithSelectionToolbarDismiss(props.onDeleteColumn),
+                        onDeleteTable: runWithSelectionToolbarDismiss(props.onDeleteTable),
+                        onMergeCells: runWithSelectionToolbarDismiss(props.onMergeCells),
+                        onSplitCell: runWithSelectionToolbarDismiss(props.onSplitCell),
+                        onSetCellBackground: props.onSetCellBackground ? (color) => {
+                          dismissSelectionToolbar();
+                          props.onSetCellBackground?.(color);
+                        } : void 0
+                      }
+                    ) : null,
+                    contextualSurface === "image" && props.activeImageContext ? /* @__PURE__ */ jsx16(
+                      TwImageContextToolbar,
+                      {
+                        activeImage: props.activeImageContext,
+                        disabled: !allowLocalChromeMutations,
+                        onSetImageLayout: props.onSetImageLayout ? (mediaId, dimensions) => {
+                          dismissSelectionToolbar();
+                          props.onSetImageLayout?.(mediaId, dimensions);
+                        } : void 0,
+                        onSetImageFrame: props.onSetImageFrame ? (mediaId, offsets) => {
+                          dismissSelectionToolbar();
+                          props.onSetImageFrame?.(mediaId, offsets);
+                        } : void 0
+                      }
+                    ) : null,
+                    contextualSurface === "object" && props.activeObjectContext ? /* @__PURE__ */ jsx16(TwObjectContextToolbar, { activeObject: props.activeObjectContext }) : null
+                  ] }) : null,
+                  chromeVisibility.selectionOverlay && props.suggestionCard && selectionToolbarPlacement ? /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-0 z-20", "data-testid": "suggestion-card-overlay", children: /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: "pointer-events-auto absolute",
+                      "data-placement": selectionToolbarPlacement.placement,
+                      style: selectionToolbarPlacement.style,
+                      children: /* @__PURE__ */ jsx16(
+                        TwSuggestionCard,
+                        {
+                          model: props.suggestionCard,
+                          onFocusCapture: props.onSelectionToolbarFocusCapture,
+                          onBlurCapture: props.onSelectionToolbarBlurCapture,
+                          onAccept: props.onAcceptSuggestion,
+                          onReject: props.onRejectSuggestion,
+                          onEditSuggestion: props.onEditSuggestion,
+                          onAddComment: props.onAddCommentFromSuggestion ?? props.onAddComment
+                        }
+                      )
+                    }
+                  ) }) : null,
+                  chromeVisibility.selectionOverlay && props.suggestionCard && !selectionToolbarPlacement ? /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3",
+                      "data-testid": "suggestion-card-fallback",
+                      children: /* @__PURE__ */ jsx16("div", { className: "pointer-events-auto", "data-placement": "fallback", children: /* @__PURE__ */ jsx16(
+                        TwSuggestionCard,
+                        {
+                          model: props.suggestionCard,
+                          onFocusCapture: props.onSelectionToolbarFocusCapture,
+                          onBlurCapture: props.onSelectionToolbarBlurCapture,
+                          onAccept: props.onAcceptSuggestion,
+                          onReject: props.onRejectSuggestion,
+                          onEditSuggestion: props.onEditSuggestion,
+                          onAddComment: props.onAddCommentFromSuggestion ?? props.onAddComment
+                        }
+                      ) })
+                    }
+                  ) : null,
+                  chromeVisibility.selectionOverlay && props.selectionToolbar && !props.suggestionCard && selectionToolbarPlacement ? /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-0 z-20", "data-testid": "selection-toolbar-overlay", children: /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: "pointer-events-auto absolute",
+                      "data-placement": selectionToolbarPlacement.placement,
+                      style: selectionToolbarPlacement.style,
+                      children: /* @__PURE__ */ jsx16(
+                        TwSelectionToolbar,
+                        {
+                          ref: props.selectionToolbarRef,
+                          model: props.selectionToolbar,
+                          disabledReason: props.selectionToolbar.disabledReason,
+                          onFocusCapture: props.onSelectionToolbarFocusCapture,
+                          onBlurCapture: props.onSelectionToolbarBlurCapture,
+                          onToggleBold: props.onToggleBold,
+                          onToggleItalic: props.onToggleItalic,
+                          onToggleUnderline: props.onToggleUnderline,
+                          onSetTextColor: props.onSetSelectionTextColor,
+                          onSetHighlightColor: props.onSetSelectionHighlightColor,
+                          onAddComment: props.onAddCommentFromSelection ?? props.onAddComment
+                        }
+                      )
+                    }
+                  ) }) : null,
+                  chromeVisibility.selectionOverlay && props.selectionToolbar && !props.suggestionCard && !selectionToolbarPlacement ? /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3",
+                      "data-testid": "selection-toolbar-fallback",
+                      children: /* @__PURE__ */ jsx16("div", { className: "pointer-events-auto", "data-placement": "fallback", children: /* @__PURE__ */ jsx16(
+                        TwSelectionToolbar,
+                        {
+                          ref: props.selectionToolbarRef,
+                          model: props.selectionToolbar,
+                          disabledReason: props.selectionToolbar.disabledReason,
+                          onFocusCapture: props.onSelectionToolbarFocusCapture,
+                          onBlurCapture: props.onSelectionToolbarBlurCapture,
+                          onToggleBold: props.onToggleBold,
+                          onToggleItalic: props.onToggleItalic,
+                          onToggleUnderline: props.onToggleUnderline,
+                          onSetTextColor: props.onSetSelectionTextColor,
+                          onSetHighlightColor: props.onSetSelectionHighlightColor,
+                          onAddComment: props.onAddCommentFromSelection ?? props.onAddComment
+                        }
+                      ) })
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxs16(
+                    "div",
+                    {
+                      className: isPageWorkspace ? "relative" : void 0,
+                      "data-line-numbering": pageChromeModel.lineNumberingEnabled ? "enabled" : "disabled",
+                      children: [
+                        isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? /* @__PURE__ */ jsx16(
+                          "div",
+                          {
+                            "aria-hidden": "true",
+                            className: "pointer-events-none absolute inset-y-0 left-0 z-10",
+                            "data-testid": "page-line-number-gutter",
+                            style: { width: `${pageChromeModel.gutterWidthPx}px` },
+                            children: pageChromeModel.lineMarkers.map((marker) => /* @__PURE__ */ jsx16(
+                              "span",
+                              {
+                                className: "absolute right-2 font-[family-name:var(--font-legal-sans)] text-[10px] font-medium tabular-nums tracking-[0.12em] text-tertiary/80",
+                                style: { top: `${marker.topPx}px` },
+                                children: marker.label
+                              },
+                              marker.id
+                            ))
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsx16(
+                          "div",
+                          {
+                            className: isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? "pl-12" : void 0,
+                            style: isPageWorkspace ? pageShellMetrics.contentInsetStyle : void 0,
+                            children: /* @__PURE__ */ jsxs16(
+                              "div",
+                              {
+                                className: isPageWorkspace ? "relative" : void 0,
+                                "data-document-grid": pageChromeModel.documentGridType,
+                                "data-page-border-display": pageChromeModel.pageBorderDisplay,
+                                style: isPageWorkspace ? {
+                                  ...pageChromeModel.documentGridStyle,
+                                  ...pageShellMetrics.pageFrameStyle
+                                } : pageChromeModel.documentGridStyle,
+                                children: [
+                                  isPageWorkspace && chromeVisibility.pageChrome ? /* @__PURE__ */ jsxs16(
+                                    "div",
+                                    {
+                                      "data-testid": "page-header-band",
+                                      className: "relative z-10 flex items-center justify-between border-b border-dashed border-border/60 px-4 text-[11px] text-secondary",
+                                      style: pageShellMetrics.headerBandStyle,
+                                      children: [
+                                        /* @__PURE__ */ jsx16("span", { className: "uppercase tracking-[0.12em] text-tertiary", children: "Header" }),
+                                        snapshot.pageLayout?.headerVariants[0] ? /* @__PURE__ */ jsx16(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            "aria-label": "Open header story",
+                                            onClick: props.onOpenHeaderStory,
+                                            className: "rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface",
+                                            children: "Edit header"
+                                          }
+                                        ) : null
+                                      ]
+                                    }
+                                  ) : null,
+                                  isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? /* @__PURE__ */ jsx16(
+                                    "div",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "pointer-events-none absolute inset-0 z-0 rounded-[2px]",
+                                      "data-testid": "page-border-overlay",
+                                      style: pageChromeModel.pageBorderStyle
+                                    }
+                                  ) : null,
+                                  /* @__PURE__ */ jsx16("div", { className: isPageWorkspace ? "relative z-10" : void 0, children: props.document }),
+                                  isPageWorkspace && chromeVisibility.pageChrome ? /* @__PURE__ */ jsxs16(
+                                    "div",
+                                    {
+                                      "data-testid": "page-footer-band",
+                                      className: "relative z-10 flex items-center justify-between border-t border-dashed border-border/60 px-4 text-[11px] text-secondary",
+                                      style: pageShellMetrics.footerBandStyle,
+                                      children: [
+                                        /* @__PURE__ */ jsx16("span", { className: "uppercase tracking-[0.12em] text-tertiary", children: "Footer" }),
+                                        snapshot.pageLayout?.footerVariants[0] ? /* @__PURE__ */ jsx16(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            "aria-label": "Open footer story",
+                                            onClick: props.onOpenFooterStory,
+                                            className: "rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface",
+                                            children: "Edit footer"
+                                          }
+                                        ) : null
+                                      ]
+                                    }
+                                  ) : null
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        chromeVisibility.statusBar ? /* @__PURE__ */ jsx16(
+          TwStatusBar,
+          {
+            isDirty: snapshot.isDirty,
+            isExportBlocked: snapshot.compatibility.blockExport,
+            preserveOnlyCount,
+            commentCount: snapshot.comments.totalCount,
+            changeCount: snapshot.trackedChanges.totalCount,
+            sessionId: snapshot.sessionId
+          }
+        ) : null
+      ] }),
+      showReviewRail ? /* @__PURE__ */ jsx16(
+        TwReviewRail,
+        {
+          activeTab: props.activeRailTab,
+          currentUserId: props.currentUserId,
+          comments: snapshot.comments,
+          trackedChanges: snapshot.trackedChanges,
+          compatibility: snapshot.compatibility,
+          warnings: snapshot.warnings,
+          markupDisplay,
+          activeCommentId: props.activeCommentId,
+          activeRevisionId: props.activeRevisionId,
+          onActiveTabChange: props.onActiveRailTabChange,
+          onOpenComment: props.onOpenComment,
+          onResolveComment: props.onResolveComment,
+          onReopenComment: props.onReopenComment,
+          onAddReply: props.onAddReply,
+          onEditBody: props.onEditBody,
+          onOpenRevision: props.onOpenRevision,
+          onAcceptRevision: props.onAcceptRevision,
+          onRejectRevision: props.onRejectRevision,
+          onAcceptAllChanges: props.onAcceptAllChanges,
+          onRejectAllChanges: props.onRejectAllChanges
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+function shouldHidePageBorderForSelection(selection) {
+  if (selection.isCollapsed) {
+    return false;
+  }
+  return selection.activeRange.kind === "range";
+}
+function resolveActiveParagraphLayout(surface, position) {
+  const paragraph = surface ? findActiveParagraph(surface.blocks, position) : null;
+  if (!paragraph) {
+    return null;
+  }
+  return {
+    leftIndent: paragraph.indentation?.left ?? 0,
+    rightIndent: paragraph.indentation?.right ?? 0,
+    firstLineOffset: paragraph.indentation?.firstLine ?? (paragraph.indentation?.hanging ? -paragraph.indentation.hanging : 0),
+    tabStops: paragraph.tabStops ? [...paragraph.tabStops] : []
+  };
+}
+function findActiveParagraph(blocks, position) {
+  for (const block of blocks) {
+    if (block.kind === "paragraph" && position >= block.from && position <= block.to) {
+      return block;
+    }
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          const paragraph = findActiveParagraph(cell.content, position);
+          if (paragraph) {
+            return paragraph;
+          }
+        }
+      }
+    }
+    if (block.kind === "sdt_block") {
+      const paragraph = findActiveParagraph(block.children, position);
+      if (paragraph) {
+        return paragraph;
+      }
+    }
+  }
+  return null;
+}
+var EMPTY_PAGE_CHROME_MODEL = {
+  lineNumberingEnabled: false,
+  gutterWidthPx: 0,
+  lineMarkers: [],
+  showPageBorder: false,
+  pageBorderDisplay: "none",
+  pageBorderStyle: void 0,
+  documentGridType: "none",
+  documentGridStyle: void 0
+};
+var DOCUMENT_CONTENT_TOP_PADDING_PX = 40;
+function buildPageChromeModel(surface, pageLayout, navigation, activeStory) {
+  if (!surface || !pageLayout || !navigation || activeStory.kind !== "main") {
+    return EMPTY_PAGE_CHROME_MODEL;
+  }
+  const lineMarkers = computeLineMarkersIfEnabled({
+    pageLayout,
+    surfaceBlocks: surface.blocks,
+    pages: navigation.pages,
+    buildLineNumberMarkers
+  });
+  const lineNumberingEnabled = Boolean(pageLayout.lineNumbering) && lineMarkers.length > 0;
+  const distance = pageLayout.lineNumbering?.distance ?? 0;
+  const gutterWidthPx = lineNumberingEnabled ? Math.max(40, Math.min(88, 24 + Math.round(distance * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP))) : 0;
+  const showPageBorder = shouldRenderPageBorder(pageLayout, navigation.pages, navigation.activePageIndex);
+  return {
+    lineNumberingEnabled,
+    gutterWidthPx,
+    lineMarkers,
+    showPageBorder,
+    pageBorderDisplay: pageLayout.pageBorders?.display ?? "none",
+    pageBorderStyle: showPageBorder ? buildPageBorderStyle(pageLayout) : void 0,
+    documentGridType: pageLayout.documentGrid?.type ?? "none",
+    documentGridStyle: buildDocumentGridStyle(pageLayout.documentGrid)
+  };
+}
+function buildPageShellMetrics(pageLayout) {
+  if (!pageLayout) {
+    return {
+      contentInsetStyle: {},
+      pageFrameStyle: {},
+      headerBandStyle: {},
+      footerBandStyle: {}
+    };
+  }
+  const horizontalInsetPx = Math.max(
+    24,
+    Math.min(120, Math.round(pageLayout.marginLeft * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP))
+  );
+  const verticalInsetPx = Math.max(
+    24,
+    Math.min(140, Math.round(pageLayout.marginTop * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP))
+  );
+  const headerBandHeightPx = Math.max(
+    40,
+    Math.min(96, Math.round(pageLayout.headerMargin * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP + 16))
+  );
+  const footerBandHeightPx = Math.max(
+    40,
+    Math.min(96, Math.round(pageLayout.footerMargin * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP + 16))
+  );
+  return {
+    contentInsetStyle: {
+      paddingLeft: `${horizontalInsetPx}px`,
+      paddingRight: `${horizontalInsetPx}px`,
+      paddingTop: `${Math.max(20, verticalInsetPx - 12)}px`,
+      paddingBottom: `${Math.max(20, Math.round(pageLayout.marginBottom * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP) - 12)}px`
+    },
+    pageFrameStyle: {
+      backgroundColor: "var(--color-page-bg)"
+    },
+    headerBandStyle: {
+      minHeight: `${headerBandHeightPx}px`
+    },
+    footerBandStyle: {
+      minHeight: `${footerBandHeightPx}px`
+    }
+  };
+}
+function buildLineNumberMarkers(blocks, pages) {
+  const markers = [];
+  if (pages.length === 0) {
+    return markers;
+  }
+  let currentTopTwips = 0;
+  let lineNumber = 1;
+  let lastPageIndex = -1;
+  let lastSectionIndex = -1;
+  for (const block of blocks) {
+    const pageIndex = findPageForOffset(pages, block.from);
+    const page = pages[pageIndex];
+    if (!page) {
+      continue;
+    }
+    const lineNumbering = page.layout.lineNumbering;
+    const restartMode = lineNumbering?.restart ?? "newPage";
+    const restartStart = lineNumbering?.start ?? 1;
+    const countBy = Math.max(1, lineNumbering?.countBy ?? 1);
+    const columnWidth = getUsableColumnWidth(page.layout);
+    if (pageIndex !== lastPageIndex) {
+      if (restartMode === "newPage" || lastPageIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastPageIndex = pageIndex;
+    }
+    if (page.sectionIndex !== lastSectionIndex) {
+      if (restartMode === "newSection" || lastSectionIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastSectionIndex = page.sectionIndex;
+    }
+    if (block.kind === "paragraph" && lineNumbering) {
+      const lineCount = estimateParagraphLineCount(block, columnWidth);
+      const lineHeight = estimateParagraphLineHeight(block);
+      const suppress = block.suppressLineNumbers === true;
+      for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+        if (!suppress && (lineNumber - restartStart) % countBy === 0) {
+          markers.push({
+            id: `${block.blockId}-${lineIndex}`,
+            label: String(lineNumber),
+            topPx: DOCUMENT_CONTENT_TOP_PADDING_PX + (currentTopTwips + lineIndex * lineHeight) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP
+          });
+        }
+        if (!suppress) {
+          lineNumber += 1;
+        }
+      }
+    }
+    currentTopTwips += estimateBlockHeight(block, columnWidth);
+  }
+  return markers;
+}
+function shouldRenderPageBorder(pageLayout, pages, activePageIndex) {
+  const display = pageLayout?.pageBorders?.display ?? "allPages";
+  const activePage = pages[activePageIndex];
+  if (!pageLayout?.pageBorders || !activePage) {
+    return false;
+  }
+  switch (display) {
+    case "firstPage":
+      return activePage.pageInSection === 0;
+    case "notFirstPage":
+      return activePage.pageInSection > 0;
+    default:
+      return true;
+  }
+}
+function buildPageBorderStyle(pageLayout) {
+  const pageBorders = pageLayout.pageBorders;
+  if (!pageBorders) {
+    return void 0;
+  }
+  const leftInset = createInsetValue(
+    pageBorders.left?.space,
+    pageBorders.offsetFrom === "text" ? pageLayout.marginLeft / Math.max(1, pageLayout.pageWidth) * 100 : 1.25
+  );
+  const rightInset = createInsetValue(
+    pageBorders.right?.space,
+    pageBorders.offsetFrom === "text" ? pageLayout.marginRight / Math.max(1, pageLayout.pageWidth) * 100 : 1.25
+  );
+  const topInset = createInsetValue(
+    pageBorders.top?.space,
+    pageBorders.offsetFrom === "text" ? pageLayout.marginTop / Math.max(1, pageLayout.pageHeight) * 100 : 1.5
+  );
+  const bottomInset = createInsetValue(
+    pageBorders.bottom?.space,
+    pageBorders.offsetFrom === "text" ? pageLayout.marginBottom / Math.max(1, pageLayout.pageHeight) * 100 : 1.5
+  );
+  return {
+    top: topInset,
+    right: rightInset,
+    bottom: bottomInset,
+    left: leftInset,
+    borderTop: toBorderCss(pageBorders.top),
+    borderRight: toBorderCss(pageBorders.right),
+    borderBottom: toBorderCss(pageBorders.bottom),
+    borderLeft: toBorderCss(pageBorders.left),
+    boxSizing: "border-box",
+    mixBlendMode: pageBorders.zOrder === "back" ? "multiply" : void 0
+  };
+}
+function buildDocumentGridStyle(documentGrid) {
+  if (!documentGrid || !documentGrid.type || documentGrid.type === "default") {
+    return void 0;
+  }
+  const linePitchPx = Math.max(
+    18,
+    Math.round((documentGrid.linePitch ?? 360) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP)
+  );
+  const charSpacePx = Math.max(
+    12,
+    Math.round((documentGrid.charSpace ?? 204) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP)
+  );
+  const gridColor = "rgba(15, 23, 42, 0.06)";
+  const backgrounds = [];
+  if (documentGrid.type === "lines" || documentGrid.type === "linesAndChars" || documentGrid.type === "snapToChars") {
+    backgrounds.push(
+      `repeating-linear-gradient(to bottom, ${gridColor} 0, ${gridColor} 1px, transparent 1px, transparent ${linePitchPx}px)`
+    );
+  }
+  if (documentGrid.type === "linesAndChars" || documentGrid.type === "snapToChars") {
+    backgrounds.push(
+      `repeating-linear-gradient(to right, rgba(15, 23, 42, 0.04) 0, rgba(15, 23, 42, 0.04) 1px, transparent 1px, transparent ${charSpacePx}px)`
+    );
+  }
+  if (backgrounds.length === 0) {
+    return void 0;
+  }
+  return {
+    backgroundImage: backgrounds.join(", "),
+    backgroundOrigin: "content-box"
+  };
+}
+function createInsetValue(spaceTwips, percent) {
+  const spacingPx = Math.max(0, Math.round((spaceTwips ?? 0) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP));
+  return `calc(${percent.toFixed(2)}% + ${spacingPx}px)`;
+}
+function resolveSelectionToolbarPlacement(anchor, root, zoomScale) {
+  if (!anchor || !root) {
+    return null;
+  }
+  const rootRect = root.getBoundingClientRect();
+  if (rootRect.width <= 0 || rootRect.height <= 0 || zoomScale <= 0) {
+    return null;
+  }
+  const centerX = (anchor.left + anchor.right) / 2;
+  const centerY = (anchor.top + anchor.bottom) / 2;
+  const localLeftEdge = (anchor.left - rootRect.left) / zoomScale;
+  const localRightEdge = (anchor.right - rootRect.left) / zoomScale;
+  const localLeft = (centerX - rootRect.left) / zoomScale;
+  const localCenterY = (centerY - rootRect.top) / zoomScale;
+  const localTop = (anchor.top - rootRect.top) / zoomScale;
+  const localBottom = (anchor.bottom - rootRect.top) / zoomScale;
+  const edgePadding = 16 / zoomScale;
+  const containerWidth = rootRect.width / zoomScale;
+  const containerHeight = rootRect.height / zoomScale;
+  const gapPx = 12 / zoomScale;
+  const estimatedToolbarWidth = Math.min(260 / zoomScale, Math.max(168 / zoomScale, containerWidth * 0.32));
+  const estimatedToolbarHeight = 44 / zoomScale;
+  const clampedCenterLeft = Math.max(
+    edgePadding,
+    Math.min(localLeft, Math.max(edgePadding, containerWidth - edgePadding))
+  );
+  const clampedCenterY = Math.max(
+    edgePadding + estimatedToolbarHeight / 2,
+    Math.min(localCenterY, Math.max(edgePadding + estimatedToolbarHeight / 2, containerHeight - edgePadding - estimatedToolbarHeight / 2))
+  );
+  const rightClearance = containerWidth - localRightEdge - gapPx - edgePadding;
+  const leftClearance = localLeftEdge - gapPx - edgePadding;
+  if (rightClearance >= estimatedToolbarWidth) {
+    return {
+      placement: "right",
+      style: {
+        left: `${localRightEdge}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+        transform: `translate(${gapPx}px, -50%)`
+      }
+    };
+  }
+  if (leftClearance >= estimatedToolbarWidth) {
+    return {
+      placement: "left",
+      style: {
+        left: `${localLeftEdge}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+        transform: `translate(calc(-100% - ${gapPx}px), -50%)`
+      }
+    };
+  }
+  const placement = localTop < estimatedToolbarHeight + gapPx + edgePadding ? "below" : "above";
+  return {
+    placement,
+    style: {
+      left: `${clampedCenterLeft}px`,
+      top: `${placement === "above" ? localTop : localBottom}px`,
+      maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+      transform: placement === "above" ? `translate(-50%, calc(-100% - ${gapPx}px))` : `translate(-50%, ${gapPx}px)`
+    }
+  };
+}
+function toBorderCss(border) {
+  if (!border || border.value === "none" || border.value === "nil") {
+    return void 0;
+  }
+  const width = border.size ? `${Math.max(1, Math.round(border.size / 8))}px` : "1px";
+  const style = border.value === "double" ? "double" : border.value === "dotted" ? "dotted" : border.value === "dashed" || border.value === "dashSmallGap" ? "dashed" : "solid";
+  const color = border.color && border.color !== "auto" ? `#${border.color}` : "rgba(31, 31, 31, 0.28)";
+  return `${width} ${style} ${color}`;
+}
+
+// src/ui/headless/comment-decoration-model.ts
+function createCommentDecorationModel(snapshot) {
+  if (!snapshot) {
+    return void 0;
+  }
+  return {
+    activeCommentId: snapshot.activeCommentId,
+    threads: snapshot.threads.filter((thread) => thread.anchor.kind !== "detached").map((thread) => {
+      const anchor = thread.anchor;
+      const from = anchor.kind === "range" ? anchor.from : anchor.kind === "node" ? anchor.at : 0;
+      const to = anchor.kind === "range" ? anchor.to : anchor.kind === "node" ? anchor.at : 0;
+      return {
+        commentId: thread.commentId,
+        from,
+        to,
+        status: thread.status,
+        isActive: thread.isActive
+      };
+    })
+  };
+}
+function getCommentRangeState(model, from, to) {
+  if (!model) {
+    return {
+      hasComments: false,
+      hasOpen: false,
+      hasResolved: false,
+      hasActive: false,
+      count: 0,
+      overlapping: []
+    };
+  }
+  const overlapping = model.threads.filter(
+    (thread) => rangesOverlap(thread.from, thread.to, from, to)
+  );
+  return {
+    hasComments: overlapping.length > 0,
+    hasOpen: overlapping.some((thread) => thread.status === "open"),
+    hasResolved: overlapping.some((thread) => thread.status === "resolved"),
+    hasActive: overlapping.some((thread) => thread.isActive),
+    count: overlapping.length,
+    overlapping
+  };
+}
+function getCommentHighlightClass(model, from, to, markupDisplay = "all") {
+  const state = getCommentRangeState(model, from, to);
+  if (!state.hasComments) {
+    return "";
+  }
+  switch (markupDisplay) {
+    case "clean":
+      return state.hasActive ? "bg-comment-soft" : "";
+    case "simple":
+      if (state.hasActive) {
+        return "underline decoration-comment decoration-2 underline-offset-4";
+      }
+      if (state.hasOpen) {
+        return "underline decoration-comment/60 decoration-1 underline-offset-4";
+      }
+      return "underline decoration-comment/40 decoration-1 underline-offset-4";
+    case "all":
+      if (state.hasActive) {
+        return "bg-comment-strong";
+      }
+      if (state.hasOpen) {
+        return "bg-comment-soft";
+      }
+      return "bg-comment-soft opacity-60";
+  }
+}
+function rangesOverlap(leftFrom, leftTo, rightFrom, rightTo) {
+  const leftEnd = Math.max(leftFrom, leftTo);
+  const rightEnd = Math.max(rightFrom, rightTo);
+  return leftFrom < rightEnd && rightFrom < leftEnd;
+}
+
+// src/ui/headless/revision-decoration-model.ts
+function createRevisionDecorationModel(snapshot, activeRevisionId) {
+  if (!snapshot) {
+    return void 0;
+  }
+  return {
+    revisions: snapshot.revisions.filter((rev) => rev.anchor.kind !== "detached" && rev.status === "active").map((rev) => {
+      const anchor = rev.anchor;
+      const from = anchor.kind === "range" ? anchor.from : anchor.kind === "node" ? anchor.at : 0;
+      const to = anchor.kind === "range" ? anchor.to : anchor.kind === "node" ? anchor.at : 0;
+      return {
+        revisionId: rev.revisionId,
+        from,
+        to,
+        kind: rev.kind,
+        status: rev.status,
+        actionability: rev.actionability,
+        isActive: rev.revisionId === activeRevisionId
+      };
+    })
+  };
+}
+function getRevisionRangeState(model, from, to) {
+  if (!model) {
+    return {
+      hasChanges: false,
+      hasInsertions: false,
+      hasDeletions: false,
+      hasActive: false,
+      count: 0,
+      overlapping: []
+    };
+  }
+  const overlapping = model.revisions.filter(
+    (rev) => rangesOverlap(rev.from, rev.to, from, to)
+  );
+  return {
+    hasChanges: overlapping.length > 0,
+    hasInsertions: overlapping.some((rev) => rev.kind === "insertion"),
+    hasDeletions: overlapping.some((rev) => rev.kind === "deletion"),
+    hasActive: overlapping.some((rev) => rev.isActive),
+    count: overlapping.length,
+    overlapping
+  };
+}
+function getRevisionHighlightClass(model, from, to, markupDisplay = "all") {
+  const state = getRevisionRangeState(model, from, to);
+  if (!state.hasChanges) {
+    return "";
+  }
+  const activeRing = state.hasActive ? " ring-1 ring-accent/30" : "";
+  switch (markupDisplay) {
+    case "clean":
+      return "";
+    case "simple":
+      if (state.hasInsertions) {
+        return `underline decoration-insert/60 decoration-1 underline-offset-2 text-primary${activeRing}`;
+      }
+      if (state.hasDeletions) {
+        return `text-secondary line-through decoration-danger/70 decoration-1${activeRing}`;
+      }
+      return activeRing;
+    case "all":
+      if (state.hasInsertions) {
+        return `text-primary bg-insert-soft/80 ring-1 ring-insert/20${activeRing}`;
+      }
+      if (state.hasDeletions) {
+        return `text-danger line-through decoration-danger/80 decoration-1 bg-delete-soft/70${activeRing}`;
+      }
+      return activeRing;
+  }
+}
+function shouldHideInCleanMode(model, from, to) {
+  const state = getRevisionRangeState(model, from, to);
+  return state.hasDeletions;
+}
+
+// src/ui/headless/selection-helpers.ts
+function createSelectionSnapshot(anchor, head = anchor) {
+  const from = Math.min(anchor, head);
+  const to = Math.max(anchor, head);
+  return {
+    anchor,
+    head,
+    isCollapsed: anchor === head,
+    activeRange: {
+      kind: "range",
+      from,
+      to,
+      assoc: {
+        start: -1,
+        end: 1
+      }
+    }
+  };
+}
+function createNodeSelectionSnapshot(at, assoc = 1) {
+  return {
+    anchor: at,
+    head: at,
+    isCollapsed: true,
+    activeRange: {
+      kind: "node",
+      at,
+      assoc
+    }
+  };
+}
+function selectionTouchesRange(selection, from, to) {
+  if (selection.isCollapsed) {
+    return false;
+  }
+  const selectionFrom = Math.min(selection.anchor, selection.head);
+  const selectionTo = Math.max(selection.anchor, selection.head);
+  return selectionFrom < to && from < selectionTo;
+}
+
+export {
+  deriveCapabilities,
+  TwAlertBanner,
+  TwSelectionToolbar,
+  TwCommentSidebar,
+  TwRevisionSidebar,
+  TwReviewRail,
+  TwStatusBar,
+  TwHealthPanel,
+  TwToolbarIconButton,
+  TwToolbar,
+  TwReviewWorkspace,
+  createCommentDecorationModel,
+  getCommentRangeState,
+  getCommentHighlightClass,
+  createRevisionDecorationModel,
+  getRevisionRangeState,
+  getRevisionHighlightClass,
+  shouldHideInCleanMode,
+  createSelectionSnapshot,
+  createNodeSelectionSnapshot,
+  selectionTouchesRange
+};
+//# sourceMappingURL=chunk-2TG72QSW.js.map