@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/dist/ui-tailwind/index.js

@@ -0,0 +1,575 @@
+import {
+  TwAlertBanner,
+  TwCommentSidebar,
+  TwHealthPanel,
+  TwReviewRail,
+  TwReviewWorkspace,
+  TwRevisionSidebar,
+  TwSelectionToolbar,
+  TwStatusBar,
+  TwToolbar,
+  TwToolbarIconButton,
+  createCommentDecorationModel,
+  createRevisionDecorationModel,
+  createSelectionSnapshot,
+  deriveCapabilities,
+  getCommentHighlightClass,
+  getCommentRangeState,
+  getRevisionHighlightClass,
+  getRevisionRangeState,
+  selectionTouchesRange,
+  shouldHideInCleanMode
+} from "../chunk-2TG72QSW.js";
+import "../chunk-GBVOWFIK.js";
+import "../chunk-KLMXQVYK.js";
+import "../chunk-EILUG3VB.js";
+import "../chunk-SWKWQZXM.js";
+import "../chunk-5FN54NDH.js";
+import "../chunk-EBI3BX6U.js";
+
+// src/ui-tailwind/editor-surface/tw-editor-surface.tsx
+import { useMemo } from "react";
+
+// src/ui/headless/use-editor-keyboard.ts
+function createEditorKeyboardHandler(context, callbacks) {
+  return function handleKeyDown(event) {
+    const { selection, storySize, canEdit } = context;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveSelection(selection.anchor, selection.head - 1, event.shiftKey, storySize, callbacks);
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveSelection(selection.anchor, selection.head + 1, event.shiftKey, storySize, callbacks);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      moveSelection(selection.anchor, 0, event.shiftKey, storySize, callbacks);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      moveSelection(selection.anchor, storySize, event.shiftKey, storySize, callbacks);
+      return;
+    }
+    if (!canEdit || event.metaKey || event.ctrlKey || event.altKey) {
+      return;
+    }
+    switch (event.key) {
+      case "Backspace":
+        event.preventDefault();
+        callbacks.onDeleteBackward?.();
+        return;
+      case "Delete":
+        event.preventDefault();
+        callbacks.onDeleteForward?.();
+        return;
+      case "Tab":
+        event.preventDefault();
+        if (event.shiftKey) {
+          callbacks.onOutdentTab?.();
+        } else {
+          callbacks.onInsertTab?.();
+        }
+        return;
+      case "Enter":
+        event.preventDefault();
+        if (event.shiftKey) {
+          callbacks.onInsertHardBreak?.();
+        } else {
+          callbacks.onSplitParagraph?.();
+        }
+        return;
+      default:
+        if (event.key.length === 1) {
+          event.preventDefault();
+          callbacks.onInsertText?.(event.key);
+        }
+    }
+  };
+}
+function moveSelection(anchor, nextHead, extend, storySize, callbacks) {
+  const clampedHead = Math.max(0, Math.min(storySize, nextHead));
+  callbacks.onSelectionChange?.(
+    createSelectionSnapshot(extend ? anchor : clampedHead, clampedHead)
+  );
+}
+
+// src/ui-tailwind/editor-surface/tw-opaque-block.tsx
+import { jsx, jsxs } 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";
+function TwOpaqueBlock(props) {
+  const { block, selection, workflowTargeted } = props;
+  const selected = selectionTouchesRange(selection, block.from, block.to);
+  return /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-tertiary/60 font-medium", children: "Lock" }),
+      /* @__PURE__ */ jsx("span", { className: "inline-block h-1 w-1 rounded-full", style: { backgroundColor: "var(--color-comment)" } })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(block.from, block.to));
+        },
+        className: [
+          "w-full text-left border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20",
+          "cursor-pointer transition-colors",
+          selected ? "ring-1 ring-accent/30 bg-warning-soft/40" : "hover:bg-warning-soft/30",
+          focusRingClass
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-tertiary mb-1", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u{1F512}" }),
+            /* @__PURE__ */ jsx("span", { children: block.label }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-comment bg-warning-soft", children: "preserve-only" }),
+            workflowTargeted && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-amber-700 bg-amber-100", children: "workflow-targeted" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary", children: block.detail })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui-tailwind/editor-surface/tw-caret.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function renderTwCaret(selection, position) {
+  return selection.isCollapsed && selection.anchor === position ? /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-block w-0.5 h-[1.2em] bg-accent rounded-full align-middle animate-wre-blink"
+    }
+  ) : null;
+}
+
+// src/ui-tailwind/editor-surface/tw-inline-token.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } 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 TwInlineToken(props) {
+  const { segment, selection } = props;
+  const selected = selectionTouchesRange(selection, segment.from, segment.to);
+  const commentClass = getCommentHighlightClass(
+    props.commentDecorations,
+    segment.from,
+    segment.to,
+    props.markupDisplay
+  );
+  const showSymbols = props.markupDisplay !== "clean";
+  if (segment.kind === "tab") {
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+        },
+        className: `inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? "bg-surface-hover" : ""} ${focusRingClass2} ${showSymbols ? "mx-0.5 text-tertiary/50" : "w-8"}`,
+        title: "Tab character",
+        children: [
+          renderTwCaret(selection, segment.from),
+          showSymbols ? /* @__PURE__ */ jsx3("span", { className: "text-xs", children: "\u2192" }) : /* @__PURE__ */ jsx3("span", { className: "w-8" }),
+          renderTwCaret(selection, segment.to)
+        ]
+      }
+    );
+  }
+  if (segment.kind === "hard_break") {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+          },
+          className: `inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? "bg-surface-hover" : ""} ${focusRingClass2} ${showSymbols ? "mx-0.5 text-tertiary/40" : ""}`,
+          title: "Line break",
+          children: [
+            renderTwCaret(selection, segment.from),
+            showSymbols ? /* @__PURE__ */ jsx3("span", { className: "text-xs", children: "\u21B5" }) : null,
+            renderTwCaret(selection, segment.to)
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("br", {})
+    ] });
+  }
+  if (segment.kind === "image") {
+    const isMissing = segment.state === "missing";
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+        },
+        className: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none cursor-pointer ${commentClass} ${isMissing ? "text-danger bg-delete-soft" : "text-secondary bg-surface"} ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass2}`,
+        title: segment.detail ?? segment.altText ?? "Inline image",
+        children: [
+          renderTwCaret(selection, segment.from),
+          /* @__PURE__ */ jsx3("span", { children: "\u{1F4F7}" }),
+          segment.altText ?? (isMissing ? "Missing image" : "Image"),
+          renderTwCaret(selection, segment.to)
+        ]
+      }
+    );
+  }
+  if (segment.kind === "opaque_inline") {
+    if (segment.presentation === "quiet-marker") {
+      return /* @__PURE__ */ jsx3(
+        "span",
+        {
+          "aria-label": segment.label,
+          title: segment.detail,
+          className: "inline-block h-0 w-0 overflow-hidden align-baseline",
+          "data-inline-presentation": "quiet-marker"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+        },
+        className: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft border-none cursor-pointer ${commentClass} ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass2}`,
+        title: segment.detail,
+        children: [
+          renderTwCaret(selection, segment.from),
+          /* @__PURE__ */ jsx3("span", { children: "\u{1F512}" }),
+          segment.label,
+          renderTwCaret(selection, segment.to)
+        ]
+      }
+    );
+  }
+  return null;
+}
+
+// src/ui-tailwind/editor-surface/tw-segment-view.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function TwSegmentView(props) {
+  const { segment, selection, markupDisplay } = props;
+  if (segment.kind === "tab" || segment.kind === "hard_break" || segment.kind === "image" || segment.kind === "opaque_inline") {
+    return /* @__PURE__ */ jsx4(
+      TwInlineToken,
+      {
+        segment,
+        selection,
+        markupDisplay,
+        commentDecorations: props.commentDecorations,
+        onSelectionChange: props.onSelectionChange
+      }
+    );
+  }
+  if (segment.kind !== "text") {
+    return null;
+  }
+  const characters = Array.from(segment.text);
+  return /* @__PURE__ */ jsx4(Fragment2, { children: characters.map((character, index) => {
+    const from = segment.from + index;
+    const to = from + 1;
+    const isSelected = selectionTouchesRange(selection, from, to);
+    if (shouldHideInCleanMode(props.revisionDecorations, from, to) && markupDisplay === "clean") {
+      return null;
+    }
+    const commentClass = getCommentHighlightClass(props.commentDecorations, from, to, markupDisplay);
+    const revisionClass = getRevisionHighlightClass(props.revisionDecorations, from, to, markupDisplay);
+    const commentState = getCommentRangeState(props.commentDecorations, from, to);
+    const overlappingComment = commentState.overlapping[0];
+    let markClasses = "";
+    if (segment.marks) {
+      if (segment.marks.includes("bold")) markClasses += "font-bold ";
+      if (segment.marks.includes("italic")) markClasses += "italic ";
+      if (segment.marks.includes("underline")) markClasses += "underline ";
+      if (segment.marks.includes("strikethrough")) markClasses += "line-through ";
+    }
+    const hyperlinkClass = segment.hyperlinkHref ? "text-accent underline decoration-1 underline-offset-2 " : "";
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          props.onSelectionChange?.(createSelectionSnapshot(to));
+          if (overlappingComment) {
+            props.onCommentActivated?.(overlappingComment.commentId);
+          }
+        },
+        "data-comment-id": overlappingComment?.commentId,
+        className: [
+          "relative inline border-none bg-transparent cursor-text whitespace-pre p-0 m-0",
+          "text-[15px] text-primary leading-normal",
+          commentClass,
+          revisionClass,
+          markClasses,
+          hyperlinkClass,
+          isSelected ? "bg-surface-hover rounded-[3px]" : ""
+        ].filter(Boolean).join(" "),
+        children: [
+          character,
+          selection.isCollapsed && selection.anchor === from ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "absolute left-0 top-[0.1em] w-0.5 h-[1em] bg-accent rounded-full animate-wre-blink pointer-events-none" }) : null
+        ]
+      },
+      `${segment.segmentId}-${from}`
+    );
+  }) });
+}
+
+// src/ui-tailwind/editor-surface/tw-paragraph-block.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TwParagraphBlock(props) {
+  const { block, selection, markupDisplay } = props;
+  const headingLevel = inferHeadingLevel(block.styleId);
+  const hasComment = getCommentRangeState(props.commentDecorations, block.from, block.to).hasComments;
+  const hasChange = getRevisionRangeState(props.revisionDecorations, block.from, block.to).hasChanges;
+  let marginClass = "";
+  if (markupDisplay === "simple" && (hasComment || hasChange)) {
+    if (hasComment && hasChange) marginClass = "border-l-2 border-l-comment/50 pl-3 ";
+    else if (hasComment) marginClass = "border-l-2 border-l-comment/40 pl-3 ";
+    else marginClass = "border-l-2 border-l-insert/40 pl-3 ";
+  }
+  const dots = [];
+  if (markupDisplay === "clean" && hasComment) {
+    dots.push("var(--color-comment)");
+  } else if (markupDisplay !== "simple") {
+    if (hasComment) dots.push("var(--color-comment)");
+    if (hasChange) dots.push("var(--color-insert)");
+  }
+  const segmentElements = /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx5(
+      CaretButton,
+      {
+        position: block.from,
+        selection,
+        onSelectionChange: props.onSelectionChange
+      }
+    ),
+    block.segments.length > 0 ? block.segments.map((segment) => /* @__PURE__ */ jsx5(
+      TwSegmentView,
+      {
+        segment,
+        selection,
+        markupDisplay,
+        commentDecorations: props.commentDecorations,
+        revisionDecorations: props.revisionDecorations,
+        onSelectionChange: props.onSelectionChange,
+        onCommentActivated: props.onCommentActivated,
+        onRevisionActivated: props.onRevisionActivated
+      },
+      segment.segmentId
+    )) : /* @__PURE__ */ jsx5("span", { className: "text-secondary italic", children: "Empty paragraph" }),
+    /* @__PURE__ */ jsx5(
+      CaretButton,
+      {
+        position: block.to,
+        selection,
+        onSelectionChange: props.onSelectionChange
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs4("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx5(
+      BlockHint,
+      {
+        label: headingLevel ? `H${headingLevel}` : "P",
+        dots: dots.length > 0 ? dots : void 0
+      }
+    ),
+    headingLevel ? /* @__PURE__ */ jsx5("div", { className: `${marginClass}transition-colors`, children: /* @__PURE__ */ jsx5(HeadingElement, { level: headingLevel, children: segmentElements }) }) : /* @__PURE__ */ jsx5("p", { className: `text-base leading-[1.75] text-primary ${marginClass}transition-colors`, children: segmentElements })
+  ] });
+}
+function CaretButton(props) {
+  const isActive = props.selection.isCollapsed && props.selection.anchor === props.position;
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        props.onSelectionChange?.(createSelectionSnapshot(props.position));
+      },
+      "aria-label": `Set caret at ${props.position}`,
+      className: `p-0 m-0 border-none bg-transparent cursor-text inline-flex items-center ${isActive ? "min-w-[2px] h-[22px]" : "w-0 h-0 overflow-hidden"}`,
+      children: renderTwCaret(props.selection, props.position)
+    }
+  );
+}
+function BlockHint(props) {
+  return /* @__PURE__ */ jsx5("div", { className: "absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-tertiary/60 font-medium", children: props.label }),
+    props.dots?.map((color, i) => /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "inline-block h-1 w-1 rounded-full",
+        style: { backgroundColor: color }
+      },
+      i
+    ))
+  ] }) });
+}
+function HeadingElement(props) {
+  switch (props.level) {
+    case 1:
+      return /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-medium text-primary leading-tight", children: props.children });
+    case 2:
+      return /* @__PURE__ */ jsx5("h3", { className: "text-xl font-medium text-primary leading-snug", children: props.children });
+    case 3:
+      return /* @__PURE__ */ jsx5("h4", { className: "text-lg font-medium text-primary leading-snug", children: props.children });
+  }
+}
+function inferHeadingLevel(styleId) {
+  if (!styleId) return null;
+  const lower = styleId.toLowerCase();
+  if (lower === "heading1") return 1;
+  if (lower === "heading2") return 2;
+  if (lower === "heading3") return 3;
+  return null;
+}
+
+// src/ui-tailwind/editor-surface/tw-editor-surface.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function TwEditorSurface(props) {
+  const { currentUser, markupDisplay, onBlur, onFocus, snapshot } = props;
+  const surface = snapshot.surface;
+  const canEdit = Boolean(
+    surface && snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError
+  );
+  const commentDecorations = useMemo(
+    () => createCommentDecorationModel(snapshot.comments),
+    [snapshot.comments]
+  );
+  const showTrackedChanges = props.showTrackedChanges !== false;
+  const revisionDecorations = useMemo(
+    () => showTrackedChanges ? createRevisionDecorationModel(snapshot.trackedChanges, props.activeRevisionId) : void 0,
+    [snapshot.trackedChanges, props.activeRevisionId, showTrackedChanges]
+  );
+  const handleKeyDown = useMemo(() => {
+    if (!surface) return void 0;
+    return createEditorKeyboardHandler(
+      {
+        selection: snapshot.selection,
+        storySize: surface.storySize,
+        canEdit
+      },
+      {
+        onSelectionChange: props.onSelectionChange,
+        onInsertText: props.onInsertText,
+        onDeleteBackward: props.onDeleteBackward,
+        onDeleteForward: props.onDeleteForward,
+        onInsertTab: props.onInsertTab,
+        onInsertHardBreak: props.onInsertHardBreak,
+        onSplitParagraph: props.onSplitParagraph
+      }
+    );
+  }, [surface, snapshot.selection, canEdit, props]);
+  const fontClass = markupDisplay === "clean" ? "font-[family-name:var(--font-legal-sans)]" : "font-[family-name:var(--font-legal-serif)]";
+  return /* @__PURE__ */ jsx6("section", { "aria-label": "Document canvas", className: "min-w-0", children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "aria-label": "Document surface",
+      "aria-multiline": "true",
+      role: "textbox",
+      tabIndex: 0,
+      onFocus,
+      onBlur,
+      onKeyDown: handleKeyDown,
+      className: `bg-transparent border-none px-12 py-10 outline-offset-1 ${fontClass}`,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex justify-between gap-4 items-start mb-5", children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx6("h1", { className: "font-[family-name:var(--font-legal-serif)] text-2xl leading-tight text-primary", children: snapshot.sourceLabel ?? "Document draft" }),
+            /* @__PURE__ */ jsxs5("p", { className: "text-xs text-secondary mt-2", children: [
+              snapshot.sessionId,
+              " \xB7 ",
+              snapshot.documentStats.storyLength,
+              " chars"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { className: "text-xs text-secondary whitespace-nowrap", children: [
+            "Reviewer ",
+            currentUser.displayName
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "space-y-4 pl-10 relative", children: [
+          surface ? surface.blocks.map(
+            (block) => block.kind === "paragraph" ? /* @__PURE__ */ jsx6(
+              TwParagraphBlock,
+              {
+                block,
+                selection: snapshot.selection,
+                markupDisplay,
+                commentDecorations,
+                revisionDecorations,
+                onSelectionChange: props.onSelectionChange,
+                onCommentActivated: props.onCommentActivated,
+                onRevisionActivated: props.onRevisionActivated
+              },
+              block.blockId
+            ) : block.kind === "opaque_block" ? /* @__PURE__ */ jsx6(
+              TwOpaqueBlock,
+              {
+                block,
+                selection: snapshot.selection,
+                onSelectionChange: props.onSelectionChange
+              },
+              block.blockId
+            ) : null
+          ) : /* @__PURE__ */ jsx6("p", { className: "text-sm text-secondary leading-relaxed", children: "Loading the review surface. Compatibility cues and edit actions appear here once the runtime snapshot is ready." }),
+          snapshot.fatalError ? /* @__PURE__ */ jsxs5("p", { className: "text-sm text-danger", children: [
+            "Fatal runtime error: ",
+            snapshot.fatalError.message
+          ] }) : null
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  TwAlertBanner,
+  TwCommentSidebar,
+  TwEditorSurface,
+  TwHealthPanel,
+  TwInlineToken,
+  TwOpaqueBlock,
+  TwParagraphBlock,
+  TwReviewRail,
+  TwReviewWorkspace,
+  TwRevisionSidebar,
+  TwSegmentView,
+  TwSelectionToolbar,
+  TwStatusBar,
+  TwToolbar,
+  TwToolbarIconButton,
+  createCommentDecorationModel,
+  createEditorKeyboardHandler,
+  createRevisionDecorationModel,
+  createSelectionSnapshot,
+  deriveCapabilities,
+  getCommentHighlightClass,
+  getCommentRangeState,
+  getRevisionHighlightClass,
+  getRevisionRangeState,
+  renderTwCaret,
+  selectionTouchesRange,
+  shouldHideInCleanMode
+};
+//# sourceMappingURL=index.js.map

package/dist/ui-tailwind/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui-tailwind/editor-surface/tw-editor-surface.tsx","../../src/ui/headless/use-editor-keyboard.ts","../../src/ui-tailwind/editor-surface/tw-opaque-block.tsx","../../src/ui-tailwind/editor-surface/tw-caret.tsx","../../src/ui-tailwind/editor-surface/tw-inline-token.tsx","../../src/ui-tailwind/editor-surface/tw-segment-view.tsx","../../src/ui-tailwind/editor-surface/tw-paragraph-block.tsx"],"sourcesContent":["import React, { type FocusEventHandler, useMemo } from \"react\";\n\nimport type {\n  EditorUser,\n  RuntimeRenderSnapshot,\n  SelectionSnapshot,\n} from \"../../api/public-types\";\nimport {\n  createCommentDecorationModel,\n  type MarkupDisplay,\n} from \"../../ui/headless/comment-decoration-model\";\nimport { createRevisionDecorationModel } from \"../../ui/headless/revision-decoration-model\";\nimport { createEditorKeyboardHandler } from \"../../ui/headless/use-editor-keyboard\";\nimport { TwOpaqueBlock } from \"./tw-opaque-block\";\nimport { TwParagraphBlock } from \"./tw-paragraph-block\";\n\nexport interface TwEditorSurfaceProps {\n  currentUser: EditorUser;\n  snapshot: RuntimeRenderSnapshot;\n  reviewMode: \"editing\" | \"review\";\n  markupDisplay: MarkupDisplay;\n  activeRevisionId?: string;\n  /** When false, revision decorations are suppressed in the document surface. */\n  showTrackedChanges?: boolean;\n  onFocus: FocusEventHandler<HTMLDivElement>;\n  onBlur: FocusEventHandler<HTMLDivElement>;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n  onInsertText?: (text: string) => void;\n  onDeleteBackward?: () => void;\n  onDeleteForward?: () => void;\n  onInsertTab?: () => void;\n  onInsertHardBreak?: () => void;\n  onSplitParagraph?: () => void;\n  onCommentActivated?: (commentId: string) => void;\n  onRevisionActivated?: (revisionId: string) => void;\n}\n\nexport function TwEditorSurface(props: TwEditorSurfaceProps) {\n  const { currentUser, markupDisplay, onBlur, onFocus, snapshot } = props;\n  const surface = snapshot.surface;\n\n  const canEdit = Boolean(\n    surface && snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError,\n  );\n\n  const commentDecorations = useMemo(\n    () => createCommentDecorationModel(snapshot.comments),\n    [snapshot.comments],\n  );\n\n  const showTrackedChanges = props.showTrackedChanges !== false;\n  const revisionDecorations = useMemo(\n    () => showTrackedChanges\n      ? createRevisionDecorationModel(snapshot.trackedChanges, props.activeRevisionId)\n      : undefined,\n    [snapshot.trackedChanges, props.activeRevisionId, showTrackedChanges],\n  );\n\n  const handleKeyDown = useMemo(() => {\n    if (!surface) return undefined;\n    return createEditorKeyboardHandler(\n      {\n        selection: snapshot.selection,\n        storySize: surface.storySize,\n        canEdit,\n      },\n      {\n        onSelectionChange: props.onSelectionChange,\n        onInsertText: props.onInsertText,\n        onDeleteBackward: props.onDeleteBackward,\n        onDeleteForward: props.onDeleteForward,\n        onInsertTab: props.onInsertTab,\n        onInsertHardBreak: props.onInsertHardBreak,\n        onSplitParagraph: props.onSplitParagraph,\n      },\n    );\n  }, [surface, snapshot.selection, canEdit, props]);\n\n  const fontClass = markupDisplay === \"clean\"\n    ? \"font-[family-name:var(--font-legal-sans)]\"\n    : \"font-[family-name:var(--font-legal-serif)]\";\n\n  return (\n    <section aria-label=\"Document canvas\" className=\"min-w-0\">\n      <div\n        aria-label=\"Document surface\"\n        aria-multiline=\"true\"\n        role=\"textbox\"\n        tabIndex={0}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={handleKeyDown}\n        className={`bg-transparent border-none px-12 py-10 outline-offset-1 ${fontClass}`}\n      >\n        {/* Document header */}\n        <div className=\"flex justify-between gap-4 items-start mb-5\">\n          <div>\n            <h1 className=\"font-[family-name:var(--font-legal-serif)] text-2xl leading-tight text-primary\">\n              {snapshot.sourceLabel ?? \"Document draft\"}\n            </h1>\n            <p className=\"text-xs text-secondary mt-2\">\n              {snapshot.sessionId} · {snapshot.documentStats.storyLength} chars\n            </p>\n          </div>\n          <span className=\"text-xs text-secondary whitespace-nowrap\">\n            Reviewer {currentUser.displayName}\n          </span>\n        </div>\n\n        {/* Document blocks */}\n        <div className=\"space-y-4 pl-10 relative\">\n          {surface ? (\n            surface.blocks.map((block) =>\n              block.kind === \"paragraph\" ? (\n                <TwParagraphBlock\n                  key={block.blockId}\n                  block={block}\n                  selection={snapshot.selection}\n                  markupDisplay={markupDisplay}\n                  commentDecorations={commentDecorations}\n                  revisionDecorations={revisionDecorations}\n                  onSelectionChange={props.onSelectionChange}\n                  onCommentActivated={props.onCommentActivated}\n                  onRevisionActivated={props.onRevisionActivated}\n                />\n              ) : block.kind === \"opaque_block\" ? (\n                <TwOpaqueBlock\n                  key={block.blockId}\n                  block={block}\n                  selection={snapshot.selection}\n                  onSelectionChange={props.onSelectionChange}\n                />\n              ) : null,\n            )\n          ) : (\n            <p className=\"text-sm text-secondary leading-relaxed\">\n              Loading the review surface. Compatibility cues and edit actions appear here once\n              the runtime snapshot is ready.\n            </p>\n          )}\n          {snapshot.fatalError ? (\n            <p className=\"text-sm text-danger\">\n              Fatal runtime error: {snapshot.fatalError.message}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    </section>\n  );\n}\n","import type { KeyboardEvent } from \"react\";\n\nimport type { SelectionSnapshot } from \"../../api/public-types\";\nimport { createSelectionSnapshot } from \"./selection-helpers\";\n\nexport interface EditorKeyboardCallbacks {\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n  onInsertText?: (text: string) => void;\n  onDeleteBackward?: () => void;\n  onDeleteForward?: () => void;\n  onInsertTab?: () => void;\n  onOutdentTab?: () => void;\n  onInsertHardBreak?: () => void;\n  onSplitParagraph?: () => void;\n}\n\nexport interface EditorKeyboardContext {\n  selection: SelectionSnapshot;\n  storySize: number;\n  canEdit: boolean;\n}\n\nexport function createEditorKeyboardHandler(\n  context: EditorKeyboardContext,\n  callbacks: EditorKeyboardCallbacks,\n): (event: KeyboardEvent<HTMLDivElement>) => void {\n  return function handleKeyDown(event: KeyboardEvent<HTMLDivElement>): void {\n    const { selection, storySize, canEdit } = context;\n\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      moveSelection(selection.anchor, selection.head - 1, event.shiftKey, storySize, callbacks);\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      moveSelection(selection.anchor, selection.head + 1, event.shiftKey, storySize, callbacks);\n      return;\n    }\n\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      moveSelection(selection.anchor, 0, event.shiftKey, storySize, callbacks);\n      return;\n    }\n\n    if (event.key === \"End\") {\n      event.preventDefault();\n      moveSelection(selection.anchor, storySize, event.shiftKey, storySize, callbacks);\n      return;\n    }\n\n    if (!canEdit || event.metaKey || event.ctrlKey || event.altKey) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"Backspace\":\n        event.preventDefault();\n        callbacks.onDeleteBackward?.();\n        return;\n      case \"Delete\":\n        event.preventDefault();\n        callbacks.onDeleteForward?.();\n        return;\n      case \"Tab\":\n        event.preventDefault();\n        if (event.shiftKey) {\n          callbacks.onOutdentTab?.();\n        } else {\n          callbacks.onInsertTab?.();\n        }\n        return;\n      case \"Enter\":\n        event.preventDefault();\n        if (event.shiftKey) {\n          callbacks.onInsertHardBreak?.();\n        } else {\n          callbacks.onSplitParagraph?.();\n        }\n        return;\n      default:\n        if (event.key.length === 1) {\n          event.preventDefault();\n          callbacks.onInsertText?.(event.key);\n        }\n    }\n  };\n}\n\nfunction moveSelection(\n  anchor: number,\n  nextHead: number,\n  extend: boolean,\n  storySize: number,\n  callbacks: EditorKeyboardCallbacks,\n): void {\n  const clampedHead = Math.max(0, Math.min(storySize, nextHead));\n  callbacks.onSelectionChange?.(\n    createSelectionSnapshot(extend ? anchor : clampedHead, clampedHead),\n  );\n}\n","import React from \"react\";\n\nimport type { SelectionSnapshot, SurfaceBlockSnapshot } from \"../../api/public-types\";\nimport { selectionTouchesRange, createSelectionSnapshot } from \"../../ui/headless/selection-helpers\";\n\nexport interface TwOpaqueBlockProps {\n  block: Extract<SurfaceBlockSnapshot, { kind: \"opaque_block\" }>;\n  selection: SelectionSnapshot;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n  workflowTargeted?: boolean;\n}\n\nconst focusRingClass =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas\";\n\nexport function TwOpaqueBlock(props: TwOpaqueBlockProps) {\n  const { block, selection, workflowTargeted } = props;\n  const selected = selectionTouchesRange(selection, block.from, block.to);\n\n  return (\n    <div className=\"group relative\">\n      <div className=\"absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right\">\n        <div className=\"flex items-center gap-0.5\">\n          <span className=\"text-[10px] text-tertiary/60 font-medium\">Lock</span>\n          <span className=\"inline-block h-1 w-1 rounded-full\" style={{ backgroundColor: \"var(--color-comment)\" }} />\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.onSelectionChange?.(createSelectionSnapshot(block.from, block.to));\n        }}\n        className={[\n          \"w-full text-left border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20\",\n          \"cursor-pointer transition-colors\",\n          selected ? \"ring-1 ring-accent/30 bg-warning-soft/40\" : \"hover:bg-warning-soft/30\",\n          focusRingClass,\n        ].join(\" \")}\n      >\n        <div className=\"flex items-center gap-1.5 text-xs text-tertiary mb-1\">\n          <span>🔒</span>\n          <span>{block.label}</span>\n          <span className=\"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-comment bg-warning-soft\">\n            preserve-only\n          </span>\n          {workflowTargeted && (\n            <span className=\"inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-amber-700 bg-amber-100\">\n              workflow-targeted\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-secondary\">{block.detail}</p>\n      </button>\n    </div>\n  );\n}\n","import React from \"react\";\n\nimport type { SelectionSnapshot } from \"../../api/public-types\";\n\nexport function renderTwCaret(selection: SelectionSnapshot, position: number) {\n  return selection.isCollapsed && selection.anchor === position ? (\n    <span\n      aria-hidden=\"true\"\n      className=\"inline-block w-0.5 h-[1.2em] bg-accent rounded-full align-middle animate-wre-blink\"\n    />\n  ) : null;\n}\n","import React from \"react\";\n\nimport type { SelectionSnapshot, SurfaceInlineSegment } from \"../../api/public-types\";\nimport type { CommentDecorationModel } from \"../../ui/headless/comment-decoration-model\";\nimport { getCommentHighlightClass, type MarkupDisplay } from \"../../ui/headless/comment-decoration-model\";\nimport { createSelectionSnapshot, selectionTouchesRange } from \"../../ui/headless/selection-helpers\";\nimport { renderTwCaret } from \"./tw-caret\";\n\nexport interface TwInlineTokenProps {\n  segment: SurfaceInlineSegment;\n  selection: SelectionSnapshot;\n  markupDisplay: MarkupDisplay;\n  commentDecorations?: CommentDecorationModel;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n}\n\nconst focusRingClass =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas\";\n\nexport function TwInlineToken(props: TwInlineTokenProps) {\n  const { segment, selection } = props;\n  const selected = selectionTouchesRange(selection, segment.from, segment.to);\n  const commentClass = getCommentHighlightClass(\n    props.commentDecorations,\n    segment.from,\n    segment.to,\n    props.markupDisplay,\n  );\n\n  const showSymbols = props.markupDisplay !== \"clean\";\n\n  if (segment.kind === \"tab\") {\n    return (\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));\n        }}\n        className={`inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? \"bg-surface-hover\" : \"\"} ${focusRingClass} ${showSymbols ? \"mx-0.5 text-tertiary/50\" : \"w-8\"}`}\n        title=\"Tab character\"\n      >\n        {renderTwCaret(selection, segment.from)}\n        {showSymbols ? <span className=\"text-xs\">→</span> : <span className=\"w-8\" />}\n        {renderTwCaret(selection, segment.to)}\n      </button>\n    );\n  }\n\n  if (segment.kind === \"hard_break\") {\n    return (\n      <>\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          onMouseDown={(e) => {\n            e.preventDefault();\n            props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));\n          }}\n          className={`inline-flex items-center border-none bg-transparent cursor-text ${commentClass} ${selected ? \"bg-surface-hover\" : \"\"} ${focusRingClass} ${showSymbols ? \"mx-0.5 text-tertiary/40\" : \"\"}`}\n          title=\"Line break\"\n        >\n          {renderTwCaret(selection, segment.from)}\n          {showSymbols ? <span className=\"text-xs\">↵</span> : null}\n          {renderTwCaret(selection, segment.to)}\n        </button>\n        <br />\n      </>\n    );\n  }\n\n  if (segment.kind === \"image\") {\n    const isMissing = segment.state === \"missing\";\n    return (\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));\n        }}\n        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none cursor-pointer ${commentClass} ${\n          isMissing ? \"text-danger bg-delete-soft\" : \"text-secondary bg-surface\"\n        } ${selected ? \"ring-1 ring-accent/30\" : \"\"} ${focusRingClass}`}\n        title={segment.detail ?? segment.altText ?? \"Inline image\"}\n      >\n        {renderTwCaret(selection, segment.from)}\n        <span>📷</span>\n        {segment.altText ?? (isMissing ? \"Missing image\" : \"Image\")}\n        {renderTwCaret(selection, segment.to)}\n      </button>\n    );\n  }\n\n  // opaque_inline\n  if (segment.kind === \"opaque_inline\") {\n    if (segment.presentation === \"quiet-marker\") {\n      return (\n        <span\n          aria-label={segment.label}\n          title={segment.detail}\n          className=\"inline-block h-0 w-0 overflow-hidden align-baseline\"\n          data-inline-presentation=\"quiet-marker\"\n        />\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));\n        }}\n        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft border-none cursor-pointer ${commentClass} ${selected ? \"ring-1 ring-accent/30\" : \"\"} ${focusRingClass}`}\n        title={segment.detail}\n      >\n        {renderTwCaret(selection, segment.from)}\n        <span>🔒</span>\n        {segment.label}\n        {renderTwCaret(selection, segment.to)}\n      </button>\n    );\n  }\n\n  return null;\n}\n","import React from \"react\";\n\nimport type { SelectionSnapshot, SurfaceInlineSegment } from \"../../api/public-types\";\nimport type { CommentDecorationModel } from \"../../ui/headless/comment-decoration-model\";\nimport { getCommentHighlightClass, getCommentRangeState, type MarkupDisplay } from \"../../ui/headless/comment-decoration-model\";\nimport type { RevisionDecorationModel } from \"../../ui/headless/revision-decoration-model\";\nimport { getRevisionHighlightClass, shouldHideInCleanMode } from \"../../ui/headless/revision-decoration-model\";\nimport { createSelectionSnapshot, selectionTouchesRange } from \"../../ui/headless/selection-helpers\";\nimport { TwInlineToken } from \"./tw-inline-token\";\n\nexport interface TwSegmentViewProps {\n  segment: SurfaceInlineSegment;\n  selection: SelectionSnapshot;\n  markupDisplay: MarkupDisplay;\n  commentDecorations?: CommentDecorationModel;\n  revisionDecorations?: RevisionDecorationModel;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n  onCommentActivated?: (commentId: string) => void;\n  onRevisionActivated?: (revisionId: string) => void;\n}\n\nexport function TwSegmentView(props: TwSegmentViewProps) {\n  const { segment, selection, markupDisplay } = props;\n\n  // Non-text segments delegate to TwInlineToken\n  if (segment.kind === \"tab\" || segment.kind === \"hard_break\" || segment.kind === \"image\" || segment.kind === \"opaque_inline\") {\n    return (\n      <TwInlineToken\n        segment={segment}\n        selection={selection}\n        markupDisplay={markupDisplay}\n        commentDecorations={props.commentDecorations}\n        onSelectionChange={props.onSelectionChange}\n      />\n    );\n  }\n\n  if (segment.kind !== \"text\") {\n    return null;\n  }\n\n  // Text segment: render character-by-character for click-to-position editing\n  const characters = Array.from(segment.text);\n\n  return (\n    <>\n      {characters.map((character, index) => {\n        const from = segment.from + index;\n        const to = from + 1;\n        const isSelected = selectionTouchesRange(selection, from, to);\n\n        // Hide deletions in clean mode\n        if (shouldHideInCleanMode(props.revisionDecorations, from, to) && markupDisplay === \"clean\") {\n          return null;\n        }\n\n        const commentClass = getCommentHighlightClass(props.commentDecorations, from, to, markupDisplay);\n        const revisionClass = getRevisionHighlightClass(props.revisionDecorations, from, to, markupDisplay);\n\n        // Check if clicking this char should activate a comment or revision\n        const commentState = getCommentRangeState(props.commentDecorations, from, to);\n        const overlappingComment = commentState.overlapping[0];\n\n        // Build mark classes\n        let markClasses = \"\";\n        if (segment.marks) {\n          if (segment.marks.includes(\"bold\")) markClasses += \"font-bold \";\n          if (segment.marks.includes(\"italic\")) markClasses += \"italic \";\n          if (segment.marks.includes(\"underline\")) markClasses += \"underline \";\n          if (segment.marks.includes(\"strikethrough\")) markClasses += \"line-through \";\n        }\n\n        const hyperlinkClass = segment.hyperlinkHref\n          ? \"text-accent underline decoration-1 underline-offset-2 \"\n          : \"\";\n\n        return (\n          <button\n            key={`${segment.segmentId}-${from}`}\n            type=\"button\"\n            tabIndex={-1}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              props.onSelectionChange?.(createSelectionSnapshot(to));\n\n              // Activate comment/revision on click if decorated\n              if (overlappingComment) {\n                props.onCommentActivated?.(overlappingComment.commentId);\n              }\n            }}\n            data-comment-id={overlappingComment?.commentId}\n            className={[\n              \"relative inline border-none bg-transparent cursor-text whitespace-pre p-0 m-0\",\n              \"text-[15px] text-primary leading-normal\",\n              commentClass,\n              revisionClass,\n              markClasses,\n              hyperlinkClass,\n              isSelected ? \"bg-surface-hover rounded-[3px]\" : \"\",\n            ].filter(Boolean).join(\" \")}\n          >\n            {character}\n            {selection.isCollapsed && selection.anchor === from ? (\n              <span aria-hidden=\"true\" className=\"absolute left-0 top-[0.1em] w-0.5 h-[1em] bg-accent rounded-full animate-wre-blink pointer-events-none\" />\n            ) : null}\n          </button>\n        );\n      })}\n    </>\n  );\n}\n","import React from \"react\";\n\nimport type { SelectionSnapshot, SurfaceBlockSnapshot, SurfaceInlineSegment } from \"../../api/public-types\";\nimport type { CommentDecorationModel } from \"../../ui/headless/comment-decoration-model\";\nimport { getCommentRangeState, type MarkupDisplay } from \"../../ui/headless/comment-decoration-model\";\nimport type { RevisionDecorationModel } from \"../../ui/headless/revision-decoration-model\";\nimport { getRevisionRangeState } from \"../../ui/headless/revision-decoration-model\";\nimport { createSelectionSnapshot } from \"../../ui/headless/selection-helpers\";\nimport { renderTwCaret } from \"./tw-caret\";\nimport { TwSegmentView } from \"./tw-segment-view\";\n\nexport interface TwParagraphBlockProps {\n  block: Extract<SurfaceBlockSnapshot, { kind: \"paragraph\" }>;\n  selection: SelectionSnapshot;\n  markupDisplay: MarkupDisplay;\n  commentDecorations?: CommentDecorationModel;\n  revisionDecorations?: RevisionDecorationModel;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n  onCommentActivated?: (commentId: string) => void;\n  onRevisionActivated?: (revisionId: string) => void;\n}\n\nexport function TwParagraphBlock(props: TwParagraphBlockProps) {\n  const { block, selection, markupDisplay } = props;\n  const headingLevel = inferHeadingLevel(block.styleId);\n  const hasComment = getCommentRangeState(props.commentDecorations, block.from, block.to).hasComments;\n  const hasChange = getRevisionRangeState(props.revisionDecorations, block.from, block.to).hasChanges;\n\n  // Margin indicator per mode\n  let marginClass = \"\";\n  if (markupDisplay === \"simple\" && (hasComment || hasChange)) {\n    if (hasComment && hasChange) marginClass = \"border-l-2 border-l-comment/50 pl-3 \";\n    else if (hasComment) marginClass = \"border-l-2 border-l-comment/40 pl-3 \";\n    else marginClass = \"border-l-2 border-l-insert/40 pl-3 \";\n  }\n\n  // Dot markers for gutter\n  const dots: string[] = [];\n  if (markupDisplay === \"clean\" && hasComment) {\n    dots.push(\"var(--color-comment)\");\n  } else if (markupDisplay !== \"simple\") {\n    if (hasComment) dots.push(\"var(--color-comment)\");\n    if (hasChange) dots.push(\"var(--color-insert)\");\n  }\n\n  const segmentElements = (\n    <>\n      <CaretButton\n        position={block.from}\n        selection={selection}\n        onSelectionChange={props.onSelectionChange}\n      />\n      {block.segments.length > 0 ? (\n        block.segments.map((segment) => (\n          <TwSegmentView\n            key={segment.segmentId}\n            segment={segment}\n            selection={selection}\n            markupDisplay={markupDisplay}\n            commentDecorations={props.commentDecorations}\n            revisionDecorations={props.revisionDecorations}\n            onSelectionChange={props.onSelectionChange}\n            onCommentActivated={props.onCommentActivated}\n            onRevisionActivated={props.onRevisionActivated}\n          />\n        ))\n      ) : (\n        <span className=\"text-secondary italic\">Empty paragraph</span>\n      )}\n      <CaretButton\n        position={block.to}\n        selection={selection}\n        onSelectionChange={props.onSelectionChange}\n      />\n    </>\n  );\n\n  return (\n    <div className=\"group relative\">\n      <BlockHint\n        label={headingLevel ? `H${headingLevel}` : \"P\"}\n        dots={dots.length > 0 ? dots : undefined}\n      />\n      {headingLevel ? (\n        <div className={`${marginClass}transition-colors`}>\n          <HeadingElement level={headingLevel}>{segmentElements}</HeadingElement>\n        </div>\n      ) : (\n        <p className={`text-base leading-[1.75] text-primary ${marginClass}transition-colors`}>\n          {segmentElements}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction CaretButton(props: {\n  position: number;\n  selection: SelectionSnapshot;\n  onSelectionChange?: (selection: SelectionSnapshot) => void;\n}) {\n  const isActive = props.selection.isCollapsed && props.selection.anchor === props.position;\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      onMouseDown={(e) => {\n        e.preventDefault();\n        props.onSelectionChange?.(createSelectionSnapshot(props.position));\n      }}\n      aria-label={`Set caret at ${props.position}`}\n      className={`p-0 m-0 border-none bg-transparent cursor-text inline-flex items-center ${isActive ? \"min-w-[2px] h-[22px]\" : \"w-0 h-0 overflow-hidden\"}`}\n    >\n      {renderTwCaret(props.selection, props.position)}\n    </button>\n  );\n}\n\nfunction BlockHint(props: { label: string; dots?: string[] }) {\n  return (\n    <div className=\"absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right\">\n      <div className=\"flex items-center gap-0.5\">\n        <span className=\"text-[10px] text-tertiary/60 font-medium\">{props.label}</span>\n        {props.dots?.map((color, i) => (\n          <span\n            key={i}\n            className=\"inline-block h-1 w-1 rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction HeadingElement(props: { level: 1 | 2 | 3; children: React.ReactNode }) {\n  switch (props.level) {\n    case 1: return <h2 className=\"text-2xl font-medium text-primary leading-tight\">{props.children}</h2>;\n    case 2: return <h3 className=\"text-xl font-medium text-primary leading-snug\">{props.children}</h3>;\n    case 3: return <h4 className=\"text-lg font-medium text-primary leading-snug\">{props.children}</h4>;\n  }\n}\n\nfunction inferHeadingLevel(styleId?: string): 1 | 2 | 3 | null {\n  if (!styleId) return null;\n  const lower = styleId.toLowerCase();\n  if (lower === \"heading1\") return 1;\n  if (lower === \"heading2\") return 2;\n  if (lower === \"heading3\") return 3;\n  return null;\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","focusRingClass","Fragment","jsx","jsxs","Fragment","jsx","jsxs","jsx","jsxs"]}