@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-57AZS3IE.js

@@ -0,0 +1,2317 @@
+"use client";
+import {
+  useLatestTaskRunner
+} from "./chunk-2DDJ6YH6.js";
+import {
+  ArtifactSubmissionProvider,
+  ArtifactSurface,
+  EditableArtifactDownloadButton,
+  EditableArtifactMessage,
+  artifactSubmissionSessionKey,
+  asEditableArtifactError,
+  editableArtifactAccessRevoked,
+  editableArtifactProjectionKey,
+  editableArtifactStatusLabel,
+  useArtifactSubmissions,
+  useEditableArtifactView
+} from "./chunk-7VMZGLYI.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/components/artifacts/document-editor.tsx
+import {
+  BoldIcon,
+  Columns2Icon,
+  ItalicIcon,
+  MessageSquareTextIcon,
+  PilcrowIcon,
+  Rows3Icon,
+  UnderlineIcon
+} from "lucide-react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var POINT_TO_CSS_PIXEL = 4 / 3;
+var DEFAULT_VIEWPORT_HEIGHT = 640;
+var RESPONSIVE_CONTINUOUS_LAYOUT_WIDTH = 640;
+var PAGINATED_GAP = 24;
+var CONTINUOUS_GAP = 1;
+var MAX_PLAIN_TEXT_TRANSFER = 1e6;
+var MAX_PROJECTION_BLOCKS = 1e5;
+var MAX_PROJECTION_TABLE_CELLS = 1e6;
+var MAX_PROJECTION_ANNOTATIONS = 1e5;
+var MAX_PROJECTION_TEXT = 1e6;
+var EMPTY_COMMENTS = [];
+var EMPTY_CHANGES = [];
+function DocumentEditor(props) {
+  return /* @__PURE__ */ jsx(DocumentEditorCore, { ...props, document: asDocumentView(props.document) });
+}
+function DocumentProjectionEditor({
+  projection,
+  commit,
+  onCommandError,
+  onSelectionChange,
+  readOnly = false,
+  ...props
+}) {
+  const view = useMemo(() => documentViewFromProjection(projection), [projection]);
+  return /* @__PURE__ */ jsx(
+    DocumentEditorCore,
+    {
+      ...props,
+      document: view.document,
+      revisionToken: projection.revision,
+      readOnly: readOnly || !commit,
+      onCommandError,
+      blockIdForView: (blockId) => view.externalIdByInternal.get(blockId) ?? blockId,
+      onSelectionChange: (selection) => onSelectionChange?.({
+        ...selection,
+        blockId: view.externalIdByInternal.get(selection.blockId) ?? selection.blockId
+      }),
+      onCommit: (command) => commit?.(mapDocumentCommit(command, view.externalIdByInternal))
+    }
+  );
+}
+function DocumentEditorCore({
+  document: document2,
+  revisionToken,
+  layout: controlledLayout,
+  defaultLayout,
+  onLayoutChange,
+  onSelectionChange,
+  onCommit,
+  onCommandError,
+  blockIdForView = identity,
+  readOnly = false,
+  ariaLabel: ariaLabelProp,
+  viewportHeight = DEFAULT_VIEWPORT_HEIGHT,
+  overscanPages = 1,
+  className
+}) {
+  const t = useOpenGeniText();
+  const ariaLabel = ariaLabelProp === void 0 ? t("artifacts.documentEditor.documentEditor") : ariaLabelProp;
+  const [uncontrolledLayout, setUncontrolledLayout] = useState(
+    defaultLayout ?? "paginated"
+  );
+  const [scrollTop, setScrollTop] = useState(0);
+  const [measuredViewport, setMeasuredViewport] = useState({ width: 0, height: 0 });
+  const [localRevision, setLocalRevision] = useState(document2.revision);
+  const [measuredPageHeights, setMeasuredPageHeights] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [selectedBlockId, setSelectedBlockId] = useState(null);
+  const [hasTextSelection, setHasTextSelection] = useState(false);
+  const selectionRef = useRef(null);
+  const [openThreadId, setOpenThreadId] = useState(null);
+  const [pendingCommands, setPendingCommands] = useState(0);
+  const [commandFailure, setCommandFailure] = useState(null);
+  const editorNodes = useRef(/* @__PURE__ */ new Map());
+  const viewportRef = useRef(null);
+  const pendingScrollTop = useRef(0);
+  const scrollFrame = useRef(null);
+  const pendingMeasurementAnchor = useRef(null);
+  const responsiveLayoutInitialized = useRef(false);
+  const measuredPageHeightsRef = useRef(/* @__PURE__ */ new Map());
+  const mountedRef = useRef(true);
+  const commandScopeRef = useRef(0);
+  const commandVersionsRef = useRef(/* @__PURE__ */ new Map());
+  const layout = controlledLayout ?? uncontrolledLayout;
+  const documentRevision = revisionToken ?? document2.revision;
+  const pageGap = layout === "paginated" ? PAGINATED_GAP : CONTINUOUS_GAP;
+  const basePages = useMemo(
+    () => projectPages(document2, layout),
+    // The revision values intentionally invalidate projections over the mutable public model.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [document2, documentRevision, layout, localRevision]
+  );
+  const naturalPages = useMemo(
+    () => basePages.map((page) => ({
+      ...page,
+      // Estimates seed unmounted pages only. Once mounted, intrinsic content
+      // may correct the page in either direction while preserving paper size.
+      height: measuredPageHeights.has(page.key) ? Math.max(page.minimumHeight, measuredPageHeights.get(page.key) ?? page.height) : page.height
+    })),
+    [basePages, measuredPageHeights]
+  );
+  const pages = useMemo(
+    () => naturalPages.map((page) => {
+      const renderScale = layout === "paginated" ? responsiveDocumentPageScale(page.page, measuredViewport.width) : 1;
+      return {
+        ...page,
+        naturalHeight: page.height,
+        renderScale,
+        height: page.height * renderScale,
+        minimumHeight: page.minimumHeight * renderScale
+      };
+    }),
+    [layout, measuredViewport.width, naturalPages]
+  );
+  const annotations = useMemo(
+    () => indexAnnotations(document2),
+    // The revision values intentionally invalidate indexes over the mutable public model.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [document2, documentRevision, localRevision]
+  );
+  const axis = useMemo(() => buildPageAxis(pages, pageGap), [pages, pageGap]);
+  const pagesRef = useRef(pages);
+  const axisRef = useRef(axis);
+  pagesRef.current = pages;
+  axisRef.current = axis;
+  const blockPageIndex = useMemo(() => {
+    const index = /* @__PURE__ */ new Map();
+    pages.forEach((page, pageIndex) => {
+      for (const { block } of page.blocks) index.set(block.id, pageIndex);
+    });
+    return index;
+  }, [pages]);
+  const activePage = selectedBlockId ? blockPageIndex.get(selectedBlockId) ?? -1 : -1;
+  const mountedIndexes = useMemo(
+    () => visiblePageIndexes(
+      axis,
+      pages.length,
+      scrollTop,
+      Math.max(1, measuredViewport.height || viewportHeight),
+      Math.max(0, Math.floor(overscanPages)),
+      activePage
+    ),
+    [
+      activePage,
+      axis,
+      measuredViewport.height,
+      overscanPages,
+      pages.length,
+      scrollTop,
+      viewportHeight
+    ]
+  );
+  useLayoutEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const measure = () => {
+      const width = element.clientWidth;
+      const height = element.clientHeight;
+      if (width <= 0 && height <= 0) return;
+      setMeasuredViewport(
+        (current) => current.width === width && current.height === height ? current : { width, height }
+      );
+    };
+    measure();
+    const observer = globalThis.ResizeObserver ? new globalThis.ResizeObserver(measure) : null;
+    observer?.observe(element);
+    globalThis.addEventListener?.("resize", measure);
+    return () => {
+      observer?.disconnect();
+      globalThis.removeEventListener?.("resize", measure);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (responsiveLayoutInitialized.current || controlledLayout !== void 0 || defaultLayout !== void 0 || measuredViewport.width <= 0) {
+      return;
+    }
+    responsiveLayoutInitialized.current = true;
+    if (measuredViewport.width < RESPONSIVE_CONTINUOUS_LAYOUT_WIDTH) {
+      setUncontrolledLayout("continuous");
+      onLayoutChange?.("continuous");
+    }
+  }, [controlledLayout, defaultLayout, measuredViewport.width, onLayoutChange]);
+  useEffect(() => {
+    commandScopeRef.current += 1;
+    commandVersionsRef.current.clear();
+    selectionRef.current = null;
+    setSelectedBlockId(null);
+    setHasTextSelection(false);
+    setOpenThreadId(null);
+    setLocalRevision(document2.revision);
+    setPendingCommands(0);
+    setCommandFailure(null);
+  }, [document2, revisionToken]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (scrollFrame.current !== null && globalThis.cancelAnimationFrame) {
+        globalThis.cancelAnimationFrame(scrollFrame.current);
+      }
+    };
+  }, []);
+  const handleScroll = useCallback((event) => {
+    pendingScrollTop.current = event.currentTarget.scrollTop;
+    if (scrollFrame.current !== null) return;
+    if (!globalThis.requestAnimationFrame) {
+      scrollFrame.current = -1;
+      queueMicrotask(() => {
+        scrollFrame.current = null;
+        setScrollTop(pendingScrollTop.current);
+      });
+      return;
+    }
+    scrollFrame.current = globalThis.requestAnimationFrame(() => {
+      scrollFrame.current = null;
+      setScrollTop(pendingScrollTop.current);
+    });
+  }, []);
+  const clearSelection = useCallback(() => {
+    selectionRef.current = null;
+    setSelectedBlockId(null);
+    setHasTextSelection(false);
+  }, []);
+  const recordPageHeight = useCallback((key, height) => {
+    if (!Number.isFinite(height) || height <= 0) return;
+    const rounded = Math.ceil(height);
+    const current = measuredPageHeightsRef.current;
+    if (Math.abs((current.get(key) ?? 0) - rounded) <= 1) return;
+    const currentPages = pagesRef.current;
+    if (!currentPages.some((page) => page.key === key)) return;
+    const viewport = viewportRef.current;
+    if (viewport && pendingMeasurementAnchor.current === null) {
+      const currentAxis = axisRef.current;
+      const anchorIndex = pageAtOffset(currentAxis, currentPages.length, viewport.scrollTop);
+      const anchorPage = currentPages[anchorIndex];
+      if (anchorPage) {
+        pendingMeasurementAnchor.current = {
+          axis: currentAxis,
+          key: anchorPage.key,
+          offset: viewport.scrollTop - currentAxis.offsets[anchorIndex],
+          scrollTop: viewport.scrollTop
+        };
+      }
+    }
+    const next = /* @__PURE__ */ new Map();
+    for (const page of currentPages) {
+      const measured = current.get(page.key);
+      if (measured !== void 0) next.set(page.key, measured);
+    }
+    next.set(key, rounded);
+    measuredPageHeightsRef.current = next;
+    setMeasuredPageHeights(next);
+  }, []);
+  useLayoutEffect(() => {
+    const anchor = pendingMeasurementAnchor.current;
+    if (!anchor || anchor.axis === axis) return;
+    pendingMeasurementAnchor.current = null;
+    const viewport = viewportRef.current;
+    if (!viewport || Math.abs(viewport.scrollTop - anchor.scrollTop) > 1) return;
+    const anchorIndex = pages.findIndex((page) => page.key === anchor.key);
+    if (anchorIndex < 0) return;
+    const nextScrollTop = Math.max(0, axis.offsets[anchorIndex] + anchor.offset);
+    if (Math.abs(viewport.scrollTop - nextScrollTop) > 0.5) {
+      viewport.scrollTop = nextScrollTop;
+    }
+    const correctedScrollTop = viewport.scrollTop;
+    pendingScrollTop.current = correctedScrollTop;
+    setScrollTop(
+      (current) => Math.abs(current - correctedScrollTop) > 0.5 ? correctedScrollTop : current
+    );
+  }, [axis, pages]);
+  const publishSelection = useCallback(
+    (next) => {
+      selectionRef.current = next;
+      setSelectedBlockId((current) => current === next.blockId ? current : next.blockId);
+      const nextHasTextSelection = next.end > next.start;
+      setHasTextSelection(
+        (current) => current === nextHasTextSelection ? current : nextHasTextSelection
+      );
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const readDomSelection = useCallback(
+    (blockId) => {
+      const node = editorNodes.current.get(blockId);
+      const offsets = node ? selectionOffsets(node) : null;
+      const next = {
+        blockId,
+        start: offsets?.start ?? 0,
+        end: offsets?.end ?? 0
+      };
+      publishSelection(next);
+      return next;
+    },
+    [publishSelection]
+  );
+  const runCommit = useCallback(
+    (command) => {
+      if (!onCommit) return;
+      const scope = commandScopeRef.current;
+      const submit = () => {
+        const key = command.blockId;
+        const version = (commandVersionsRef.current.get(key) ?? 0) + 1;
+        commandVersionsRef.current.set(key, version);
+        setCommandFailure(null);
+        const fail = (cause) => {
+          if (!mountedRef.current || commandScopeRef.current !== scope || commandVersionsRef.current.get(key) !== version) {
+            return;
+          }
+          const error = asDocumentError(cause);
+          setCommandFailure({ message: error.message, retry: submit });
+          onCommandError?.(error);
+        };
+        let result;
+        try {
+          result = onCommit(command);
+        } catch (cause) {
+          fail(cause);
+          return;
+        }
+        if (!result || typeof result.then !== "function") return;
+        setPendingCommands((current) => current + 1);
+        void Promise.resolve(result).then(
+          () => {
+            if (!mountedRef.current || commandScopeRef.current !== scope) return;
+            setPendingCommands((current) => Math.max(0, current - 1));
+          },
+          (cause) => {
+            if (!mountedRef.current || commandScopeRef.current !== scope) return;
+            setPendingCommands((current) => Math.max(0, current - 1));
+            fail(cause);
+          }
+        );
+      };
+      submit();
+    },
+    [onCommandError, onCommit]
+  );
+  const commitText = useCallback(
+    (paragraph, text) => {
+      if (readOnly || paragraph.text === text) return;
+      paragraph.text = text;
+      runCommit({
+        kind: "text",
+        blockId: paragraph.id,
+        text,
+        revision: revisionToken ?? document2.revision
+      });
+    },
+    [document2, readOnly, revisionToken, runCommit]
+  );
+  const applyFormat = useCallback(
+    (property) => {
+      const selection = selectionRef.current;
+      if (readOnly || !selection) return;
+      let block;
+      try {
+        block = document2.resolve(selection.blockId);
+      } catch {
+        clearSelection();
+        return;
+      }
+      if (!isDocumentParagraph(block)) return;
+      const node = editorNodes.current.get(block.id);
+      if (node) commitText(block, node.textContent ?? "");
+      const current = selectionOffsets(node) ?? selection;
+      const start = Math.max(0, Math.min(current.start, block.text.length));
+      const end = Math.max(start, Math.min(current.end, block.text.length));
+      if (end <= start) return;
+      const effectiveEnd = end;
+      const effectiveStart = start;
+      const style = toggledTextStyle(block, effectiveStart, effectiveEnd, property);
+      block.format({ start: effectiveStart, end: effectiveEnd, style });
+      runCommit({
+        kind: "format",
+        blockId: block.id,
+        range: { start: effectiveStart, end: effectiveEnd },
+        style,
+        revision: revisionToken ?? document2.revision
+      });
+      queueMicrotask(() => restoreSelection(editorNodes.current.get(block.id), start, end));
+    },
+    [clearSelection, commitText, document2, readOnly, revisionToken, runCommit]
+  );
+  const handleEditorKeyDown = useCallback(
+    (event, paragraph) => {
+      const modifier = event.metaKey || event.ctrlKey;
+      if (!modifier) return;
+      const key = event.key.toLowerCase();
+      if (key !== "b" && key !== "i" && key !== "u") return;
+      event.preventDefault();
+      const current = readDomSelection(paragraph.id);
+      selectionRef.current = current;
+      const property = key === "b" ? "bold" : key === "i" ? "italic" : "underline";
+      const start = current.start;
+      const end = current.end;
+      if (end <= start || readOnly) return;
+      const effectiveStart = start;
+      const effectiveEnd = end;
+      const style = toggledTextStyle(paragraph, effectiveStart, effectiveEnd, property);
+      paragraph.format({ start: effectiveStart, end: effectiveEnd, style });
+      runCommit({
+        kind: "format",
+        blockId: paragraph.id,
+        range: { start: effectiveStart, end: effectiveEnd },
+        style,
+        revision: revisionToken ?? document2.revision
+      });
+      queueMicrotask(() => restoreSelection(editorNodes.current.get(paragraph.id), start, end));
+    },
+    [document2, readDomSelection, readOnly, revisionToken, runCommit]
+  );
+  const changeLayout = (next) => {
+    if (controlledLayout === void 0) setUncontrolledLayout(next);
+    onLayoutChange?.(next);
+  };
+  const addFirstParagraph = () => {
+    if (readOnly) return;
+    const paragraph = document2.blocks.addParagraph("");
+    setLocalRevision(document2.revision);
+    publishSelection({ blockId: paragraph.id, start: 0, end: 0 });
+    runCommit({
+      kind: "insert-paragraph",
+      blockId: paragraph.id,
+      revision: revisionToken ?? document2.revision
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-og-document-editor": "",
+      "data-og-document-layout": layout,
+      "data-og-command-state": commandFailure ? "error" : pendingCommands > 0 ? "pending" : "idle",
+      "aria-busy": pendingCommands > 0 ? "true" : void 0,
+      className: cn("flex h-full min-h-0 min-w-0 flex-col bg-og-surface-2", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "toolbar",
+            "aria-label": t("artifacts.documentEditor.documentFormatting"),
+            className: "flex min-h-10 shrink-0 items-center gap-1 border-b border-og-border bg-og-surface-1 px-2",
+            children: [
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: t("artifacts.documentEditor.bold"),
+                  shortcut: "\u2318B",
+                  disabled: readOnly || !selectedBlockId || !hasTextSelection,
+                  onPress: () => applyFormat("bold"),
+                  children: /* @__PURE__ */ jsx(BoldIcon, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: t("artifacts.documentEditor.italic"),
+                  shortcut: "\u2318I",
+                  disabled: readOnly || !selectedBlockId || !hasTextSelection,
+                  onPress: () => applyFormat("italic"),
+                  children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: t("artifacts.documentEditor.underline"),
+                  shortcut: "\u2318U",
+                  disabled: readOnly || !selectedBlockId || !hasTextSelection,
+                  onPress: () => applyFormat("underline"),
+                  children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-1 h-5 w-px bg-og-border" }),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: t("artifacts.documentEditor.continuousLayout"),
+                  pressed: layout === "continuous",
+                  onPress: () => changeLayout("continuous"),
+                  children: /* @__PURE__ */ jsx(Rows3Icon, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: t("artifacts.documentEditor.paginatedLayout"),
+                  pressed: layout === "paginated",
+                  onPress: () => changeLayout("paginated"),
+                  children: /* @__PURE__ */ jsx(Columns2Icon, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto truncate text-og-xs text-og-fg-muted", children: [
+                commandFailure ? t("artifacts.documentEditor.changeNotSaved") : pendingCommands > 0 ? t("artifacts.documentEditor.saving") : readOnly ? t("artifacts.documentEditor.readOnly") : t("artifacts.documentEditor.editing"),
+                " ",
+                t("artifacts.documentEditor.localestringBlocks", {
+                  localeString: document2.blocks.items.length.toLocaleString(t.locale)
+                })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? (pendingCommands > 0 ? t("artifacts.documentEditor.savingDocumentChanges") : "") }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: viewportRef,
+            role: "document",
+            "aria-label": ariaLabel,
+            "aria-readonly": readOnly,
+            tabIndex: -1,
+            onPointerDown: (event) => {
+              const target = event.target;
+              if (target instanceof Element && !target.closest("[data-og-paragraph]")) {
+                clearSelection();
+              }
+            },
+            onScroll: handleScroll,
+            className: cn(
+              "relative min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain outline-hidden [overflow-anchor:none]",
+              layout === "paginated" ? "bg-og-surface-3" : "bg-og-surface-1"
+            ),
+            style: { height: Math.max(1, viewportHeight) },
+            children: [
+              commandFailure ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "alert",
+                  className: "absolute left-2 top-2 z-30 flex w-fit items-center gap-2 rounded-og-sm border border-og-status-failed/30 bg-og-surface-1/95 px-2 py-1 text-og-xs text-og-status-failed shadow-og-sm",
+                  style: { maxWidth: "calc(100% - 1rem)" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: commandFailure.message }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: commandFailure.retry,
+                        className: "shrink-0 rounded-og-xs px-1.5 py-0.5 font-medium outline-hidden hover:bg-og-surface-3 focus-visible:ring-2 focus-visible:ring-og-accent",
+                        children: t("artifacts.documentEditor.retry")
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              pages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center p-8 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(PilcrowIcon, { "aria-hidden": true, className: "mx-auto mb-3 size-7 text-og-fg-subtle" }),
+                /* @__PURE__ */ jsx("p", { className: "text-og-sm text-og-fg-muted", children: t("artifacts.documentEditor.thisDocumentIsEmpty") }),
+                !readOnly ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: addFirstParagraph,
+                    className: "mt-3 rounded-og-md border border-og-primary-border bg-og-primary px-3 py-1.5 text-og-sm text-og-primary-fg hover:bg-og-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent",
+                    children: t("artifacts.documentEditor.startWriting")
+                  }
+                ) : null
+              ] }) }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "relative min-w-full",
+                  style: {
+                    height: axis.total,
+                    minWidth: layout === "paginated" ? pages.reduce(
+                      (width, page) => Math.max(
+                        width,
+                        page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale + 32
+                      ),
+                      0
+                    ) : void 0
+                  },
+                  children: mountedIndexes.map((pageIndex) => {
+                    const page = pages[pageIndex];
+                    const top = axis.offsets[pageIndex];
+                    const pageWidth = page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale;
+                    return /* @__PURE__ */ jsx(
+                      "article",
+                      {
+                        "aria-label": `${layout === "paginated" ? t("artifacts.documentEditor.page") : t("artifacts.documentEditor.section")} ${pageIndex + 1} of ${pages.length}`,
+                        "aria-posinset": pageIndex + 1,
+                        "aria-setsize": pages.length,
+                        "data-og-document-page": pageIndex + 1,
+                        "data-og-page-width-pt": page.page.widthPt,
+                        "data-og-page-height-pt": page.page.heightPt,
+                        className: cn(
+                          "absolute overflow-hidden",
+                          layout === "paginated" ? "border shadow-og-sm" : "left-0 right-0 border-b border-og-border bg-og-surface-1 text-og-fg"
+                        ),
+                        style: {
+                          top,
+                          // Center against the visible viewport, not the shared width
+                          // reserved for the widest section in this document.
+                          left: layout === "paginated" ? Math.max(16, (measuredViewport.width - pageWidth) / 2) : void 0,
+                          color: layout === "paginated" ? "#171717" : void 0,
+                          backgroundColor: layout === "paginated" ? "#fff" : void 0,
+                          borderColor: layout === "paginated" ? "#0000001a" : void 0,
+                          width: layout === "paginated" ? pageWidth : void 0,
+                          height: page.height,
+                          containerType: layout === "continuous" ? "inline-size" : void 0
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          MeasuredPageBody,
+                          {
+                            pageKey: page.key,
+                            measureToken: documentRevision,
+                            onHeight: recordPageHeight,
+                            className: cn(
+                              layout === "paginated" ? "absolute left-0 top-0 overflow-hidden" : "mx-auto"
+                            ),
+                            style: {
+                              ...pageContentStyle(page.page, layout),
+                              maxWidth: layout === "continuous" ? "68rem" : void 0,
+                              ...layout === "paginated" ? {
+                                width: page.page.widthPt * POINT_TO_CSS_PIXEL,
+                                minHeight: page.naturalHeight,
+                                transform: `scale(${page.renderScale})`,
+                                transformOrigin: "top left"
+                              } : {}
+                            },
+                            children: page.blocks.map(({ block, listOrdinal }) => /* @__PURE__ */ jsx(
+                              DocumentBlockView,
+                              {
+                                block,
+                                viewBlockId: blockIdForView(block.id),
+                                comments: annotations.comments.get(block.id) ?? EMPTY_COMMENTS,
+                                changes: annotations.changes.get(block.id) ?? EMPTY_CHANGES,
+                                projectionRevision: localRevision,
+                                listOrdinal,
+                                readOnly,
+                                selected: selectedBlockId === block.id,
+                                openThreadId,
+                                registerEditor: (node) => {
+                                  if (node) editorNodes.current.set(block.id, node);
+                                  else editorNodes.current.delete(block.id);
+                                },
+                                onThreadToggle: (threadId) => setOpenThreadId((current) => current === threadId ? null : threadId),
+                                onInput: (paragraph, text) => commitText(paragraph, text),
+                                onBlur: () => setLocalRevision(document2.revision),
+                                onSelection: (paragraph) => readDomSelection(paragraph.id),
+                                onKeyDown: handleEditorKeyDown
+                              },
+                              block.id
+                            ))
+                          }
+                        )
+                      },
+                      page.key
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DocumentArtifactSurface({
+  document: document2,
+  title,
+  showHeader,
+  subtitle,
+  busy,
+  className,
+  editorClassName,
+  ...editorProps
+}) {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsx(
+    ArtifactSurface,
+    {
+      modality: "document",
+      title,
+      showHeader,
+      subtitle,
+      busy,
+      className,
+      children: /* @__PURE__ */ jsx(
+        DocumentEditor,
+        {
+          ...editorProps,
+          document: document2,
+          ariaLabel: t("artifacts.documentEditor.titleDocument", { title }),
+          className: editorClassName
+        }
+      )
+    }
+  );
+}
+function DocumentProjectionArtifactSurface({
+  projection,
+  title,
+  showHeader,
+  subtitle,
+  actions,
+  busy,
+  className,
+  editorClassName,
+  ...editorProps
+}) {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsx(
+    ArtifactSurface,
+    {
+      modality: "document",
+      title,
+      showHeader,
+      subtitle,
+      actions,
+      busy,
+      className,
+      children: /* @__PURE__ */ jsx(
+        DocumentProjectionEditor,
+        {
+          ...editorProps,
+          projection,
+          ariaLabel: t("artifacts.documentEditor.titleDocument", { title }),
+          className: editorClassName
+        }
+      )
+    }
+  );
+}
+function MeasuredPageBody({
+  pageKey,
+  measureToken,
+  onHeight,
+  className,
+  style,
+  children
+}) {
+  const nodeRef = useRef(null);
+  useLayoutEffect(() => {
+    const node = nodeRef.current;
+    if (!node) return;
+    const report = () => onHeight(pageKey, Math.max(node.clientHeight, node.scrollHeight));
+    report();
+    if (!globalThis.ResizeObserver) return;
+    const observer = new globalThis.ResizeObserver(report);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [measureToken, onHeight, pageKey]);
+  return /* @__PURE__ */ jsx("div", { ref: nodeRef, className, style, children });
+}
+function DocumentBlockView({
+  block,
+  viewBlockId,
+  comments,
+  changes,
+  projectionRevision,
+  listOrdinal,
+  readOnly,
+  selected,
+  openThreadId,
+  registerEditor,
+  onThreadToggle,
+  onInput,
+  onBlur,
+  onSelection,
+  onKeyDown
+}) {
+  const t = useOpenGeniText();
+  if (isDocumentTable(block)) {
+    return /* @__PURE__ */ jsx(DocumentTableView, { table: block, viewBlockId });
+  }
+  const unresolved = comments.filter((thread) => !thread.resolved);
+  const commentPanelOpen = comments.some((thread) => thread.id === openThreadId);
+  const paragraphStyle = toParagraphStyle(block);
+  const segments = annotateRuns(block, unresolved, changes);
+  const marker = block.style.list ? block.style.list.kind === "number" ? `${listOrdinal ?? 1}.` : "\u2022" : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-og-document-block": viewBlockId,
+      "data-og-block-kind": "paragraph",
+      className: cn(
+        "group relative flex min-h-7 min-w-0 gap-2 rounded-sm px-1 transition-colors",
+        selected && "bg-og-accent-soft ring-1 ring-inset ring-og-accent"
+      ),
+      children: [
+        marker ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "w-7 shrink-0 select-none text-right opacity-70",
+            style: {
+              paddingLeft: `${(block.style.list?.level ?? 0) * 12}px`,
+              paddingTop: "0.1em"
+            },
+            children: marker
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ParagraphLeaf,
+          {
+            paragraph: block,
+            viewBlockId,
+            segments,
+            paragraphStyle,
+            listOrdinal,
+            readOnly,
+            registerEditor,
+            onInput,
+            onBlur,
+            onSelection,
+            onKeyDown
+          },
+          `${block.id}:${projectionRevision}`
+        ),
+        comments.length > 0 || changes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "relative flex w-7 shrink-0 flex-col items-center gap-1 pt-0.5", children: [
+          comments.length > 0 ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": unresolved.length > 0 ? t("artifacts.documentEditor.unresolvedComments", { count: unresolved.length }) : t("artifacts.documentEditor.resolvedComments", { count: comments.length }),
+              "aria-expanded": commentPanelOpen,
+              onClick: () => onThreadToggle((unresolved[0] ?? comments[0]).id),
+              className: cn(
+                "grid size-6 place-items-center rounded-full focus-visible:outline-hidden focus-visible:ring-2",
+                unresolved.length > 0 ? "bg-og-accent-soft text-og-status-waiting hover:bg-og-surface-3 focus-visible:ring-og-status-waiting" : "bg-og-surface-3 text-og-fg-muted hover:text-og-fg focus-visible:ring-og-accent"
+              ),
+              children: /* @__PURE__ */ jsx(MessageSquareTextIcon, { className: "size-3.5" })
+            }
+          ) : null,
+          changes.length > 0 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "img",
+              "aria-label": t("artifacts.documentEditor.trackedChanges", { count: changes.length }),
+              className: "mt-1 h-4 w-1 rounded-full bg-og-status-idle"
+            }
+          ) : null,
+          commentPanelOpen ? /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              "aria-label": t("artifacts.documentEditor.commentThread"),
+              className: "absolute right-0 top-8 z-20 w-64 rounded-og-md border border-og-border bg-og-surface-1 p-3 text-og-xs text-og-fg shadow-og-lg",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 font-medium", children: comments.length === 1 ? t("artifacts.documentEditor.comment") : t("artifacts.documentEditor.lengthComments", { length: comments.length }) }),
+                /* @__PURE__ */ jsx("ol", { className: "max-h-72 space-y-3 overflow-y-auto", children: comments.map((thread) => /* @__PURE__ */ jsxs("li", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-og-fg-muted", children: thread.resolved ? t("artifacts.documentEditor.resolved") : t("artifacts.documentEditor.open") }),
+                  thread.replies.map((reply, index) => (
+                    // Reply position is stable within the append-only comment thread.
+                    // oxlint-disable-next-line react/no-array-index-key
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-og-fg-muted", children: reply.author }),
+                      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: reply.text })
+                    ] }, `${reply.createdAt}:${index}`)
+                  ))
+                ] }, thread.id)) })
+              ]
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+var ParagraphLeaf = memo(
+  function ParagraphLeaf2({
+    paragraph,
+    viewBlockId,
+    segments,
+    paragraphStyle,
+    listOrdinal,
+    readOnly,
+    registerEditor,
+    onInput,
+    onBlur,
+    onSelection,
+    onKeyDown
+  }) {
+    const t = useOpenGeniText();
+    const composing = useRef(false);
+    const suppressNextEnter = useRef(false);
+    const Tag = headingTag(paragraph.style.headingLevel);
+    const label = paragraph.style.list?.kind === "number" ? t("artifacts.documentEditor.numberedListItemListordinal", {
+      listOrdinal: listOrdinal ?? 1
+    }) : paragraph.style.list?.kind === "bullet" ? t("artifacts.documentEditor.bulletListItem") : paragraph.style.headingLevel ? t("artifacts.documentEditor.headingHeadinglevel", {
+      headingLevel: paragraph.style.headingLevel
+    }) : t("artifacts.documentEditor.paragraph");
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        ref: registerEditor,
+        contentEditable: !readOnly,
+        suppressContentEditableWarning: true,
+        tabIndex: readOnly ? 0 : void 0,
+        role: !readOnly && !paragraph.style.headingLevel ? "textbox" : void 0,
+        "aria-label": label,
+        "aria-multiline": !readOnly || void 0,
+        "aria-readonly": readOnly,
+        spellCheck: !readOnly,
+        "data-og-paragraph": viewBlockId,
+        onFocus: () => onSelection(paragraph),
+        onSelect: () => onSelection(paragraph),
+        onKeyUp: () => onSelection(paragraph),
+        onMouseUp: () => onSelection(paragraph),
+        onCompositionStart: () => {
+          composing.current = true;
+        },
+        onCompositionEnd: (event) => {
+          composing.current = false;
+          suppressNextEnter.current = true;
+          queueMicrotask(() => {
+            suppressNextEnter.current = false;
+          });
+          syncTrailingBreak(event.currentTarget);
+          stabilizeCaretAfterTrailingNewline(event.currentTarget);
+          onInput(paragraph, event.currentTarget.textContent ?? "");
+          onSelection(paragraph);
+        },
+        onPaste: (event) => {
+          if (readOnly) return;
+          event.preventDefault();
+          const text = event.clipboardData.getData("text/plain").slice(0, MAX_PLAIN_TEXT_TRANSFER);
+          if (!text) return;
+          insertPlainText(event.currentTarget, text);
+          onInput(paragraph, event.currentTarget.textContent ?? "");
+          onSelection(paragraph);
+        },
+        onDragOver: (event) => {
+          if (!readOnly) event.preventDefault();
+        },
+        onDrop: (event) => {
+          if (!readOnly) event.preventDefault();
+        },
+        onKeyDown: (event) => {
+          onKeyDown(event, paragraph);
+          if (event.defaultPrevented || readOnly) return;
+          if (event.key !== "Enter" || event.metaKey || event.ctrlKey || event.altKey) return;
+          if (isDocumentImeComposing(event, composing.current)) return;
+          event.preventDefault();
+          if (suppressNextEnter.current) return;
+          insertPlainText(event.currentTarget, "\n");
+          onInput(paragraph, event.currentTarget.textContent ?? "");
+          onSelection(paragraph);
+        },
+        onInput: (event) => {
+          if (!composing.current && !event.nativeEvent.isComposing) {
+            syncTrailingBreak(event.currentTarget);
+            stabilizeCaretAfterTrailingNewline(event.currentTarget);
+            onInput(paragraph, event.currentTarget.textContent ?? "");
+          }
+        },
+        onBlur,
+        className: cn(
+          "min-w-0 flex-1 whitespace-pre-wrap break-words rounded-sm outline-hidden",
+          !readOnly && "cursor-text focus-visible:ring-2 focus-visible:ring-og-accent"
+        ),
+        style: paragraphStyle,
+        children: [
+          segments.map((segment, index) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-og-commented": segment.commented || void 0,
+              "data-og-change": segment.changeKind,
+              style: segment.style,
+              children: segment.text
+            },
+            `${segment.start}:${index}`
+          )),
+          segments.at(-1)?.text.endsWith("\n") ? /* @__PURE__ */ jsx("br", { "data-og-trailing-break": "", "aria-hidden": "true" }) : null
+        ]
+      }
+    );
+  },
+  (previous, next) => {
+    if (next.readOnly || previous.viewBlockId !== next.viewBlockId) return false;
+    const active = globalThis.document?.activeElement;
+    return active instanceof HTMLElement && active.dataset.ogParagraph === next.viewBlockId;
+  }
+);
+function DocumentTableView({
+  table,
+  viewBlockId
+}) {
+  const columnWidths = table.style.columnWidthsPt;
+  const headerColor = tableHeaderTextColor(table.style.headerFill);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-og-document-block": viewBlockId,
+      "data-og-block-kind": "table",
+      className: "w-full max-w-full overflow-x-auto py-2",
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: "w-full border-collapse text-left",
+          style: {
+            fontSize: "0.92em",
+            width: table.style.widthPt ? `${table.style.widthPt}pt` : void 0
+          },
+          children: [
+            columnWidths ? /* @__PURE__ */ jsx("colgroup", { children: columnWidths.map((width, index) => (
+              // Column position is its identity in the document table model.
+              // oxlint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ jsx("col", { style: { width: `${width}pt` } }, index)
+            )) }) : null,
+            /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, rowIndex) => (
+              // Row position is its identity in the document table model.
+              // oxlint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ jsx("tr", { children: row.map((cell, columnIndex) => {
+                const header = rowIndex < (table.style.headerRows ?? 0);
+                const Cell = header ? "th" : "td";
+                return /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    scope: header ? "col" : void 0,
+                    className: cn("border align-middle", header && "font-semibold"),
+                    style: {
+                      borderColor: table.style.borderColor ?? "#d1d5db",
+                      background: header ? table.style.headerFill ?? "#f3f4f6" : void 0,
+                      // An explicitly colored run still owns its authored text style.
+                      color: header ? headerColor : void 0,
+                      padding: `${table.style.cellPaddingPt ?? 6}pt`
+                    },
+                    children: cell.map((run, index) => (
+                      // Run position is stable within the immutable cell projection.
+                      // oxlint-disable-next-line react/no-array-index-key
+                      /* @__PURE__ */ jsx("span", { style: toRunStyle(run.style), children: run.text }, index)
+                    ))
+                  },
+                  columnIndex
+                );
+              }) }, rowIndex)
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function tableHeaderTextColor(fill) {
+  if (!fill) return "#171717";
+  const hex = /^#([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.exec(fill)?.[1];
+  if (!hex) return void 0;
+  const channels = hex.length === 3 ? [...hex].map((digit) => Number.parseInt(digit + digit, 16)) : [0, 2, 4].map((index) => Number.parseInt(hex.slice(index, index + 2), 16));
+  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6), 16) / 255 : 1;
+  const luminanceOn = (backdrop) => {
+    const linear = channels.map((channel) => {
+      const normalized = (channel * alpha + backdrop * (1 - alpha)) / 255;
+      return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+    });
+    return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+  };
+  const backdrops = alpha < 1 ? [luminanceOn(0), luminanceOn(255)] : [luminanceOn(255)];
+  const darkTextLuminance = ((23 / 255 + 0.055) / 1.055) ** 2.4;
+  const whiteContrast = Math.min(...backdrops.map((value) => 1.05 / (value + 0.05)));
+  const darkContrast = Math.min(
+    ...backdrops.map(
+      (value) => (Math.max(value, darkTextLuminance) + 0.05) / (Math.min(value, darkTextLuminance) + 0.05)
+    )
+  );
+  if (Math.max(whiteContrast, darkContrast) < 4.5) {
+    return alpha < 1 ? void 0 : "#000";
+  }
+  return whiteContrast > darkContrast ? "#fff" : "#171717";
+}
+function ToolbarButton({
+  label,
+  shortcut,
+  pressed,
+  disabled,
+  onPress,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": pressed,
+      title: shortcut ? `${label} (${shortcut})` : label,
+      disabled,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: onPress,
+      className: cn(
+        "grid size-7 place-items-center rounded-og-sm text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent disabled:pointer-events-none disabled:opacity-40",
+        pressed && "bg-og-surface-3 text-og-fg"
+      ),
+      children
+    }
+  );
+}
+function projectPages(document2, layout) {
+  const pages = [];
+  const sections = document2.sections.items;
+  let sectionIndex = 0;
+  let pageGeometry = sections[0]?.page ?? document2.page;
+  let blocks = [];
+  let used = 0;
+  let pageIndex = 0;
+  let numberOrdinal = 0;
+  const flush = (force = false) => {
+    if (blocks.length === 0 && !force) return;
+    const physicalPageHeight = pageGeometry.heightPt * POINT_TO_CSS_PIXEL;
+    const pageVerticalChrome = (pageGeometry.marginTopPt + pageGeometry.marginBottomPt) * POINT_TO_CSS_PIXEL;
+    pages.push({
+      key: `${layout}:${sections[sectionIndex]?.id ?? "default"}:${pageIndex++}:${blocks[0]?.block.id ?? "blank"}`,
+      blocks,
+      height: layout === "paginated" ? Math.max(physicalPageHeight, used + pageVerticalChrome) : Math.max(1, used + 48),
+      minimumHeight: layout === "paginated" ? physicalPageHeight : 1,
+      page: { ...pageGeometry }
+    });
+    blocks = [];
+    used = 0;
+  };
+  for (let blockIndex = 0; blockIndex < document2.blocks.items.length; blockIndex += 1) {
+    while (sectionIndex + 1 < sections.length && sections[sectionIndex + 1].startBlockIndex <= blockIndex) {
+      flush();
+      sectionIndex += 1;
+      pageGeometry = sections[sectionIndex].page;
+    }
+    const block = document2.blocks.items[blockIndex];
+    if (isDocumentPageBreak(block)) {
+      flush(true);
+      numberOrdinal = 0;
+      continue;
+    }
+    if (isDocumentParagraph(block) && block.style.pageBreakBefore) flush();
+    const height = estimateBlockHeight(block);
+    const physicalPageHeight = pageGeometry.heightPt * POINT_TO_CSS_PIXEL;
+    const usableHeight = Math.max(
+      120,
+      physicalPageHeight - (pageGeometry.marginTopPt + pageGeometry.marginBottomPt) * POINT_TO_CSS_PIXEL
+    );
+    const targetHeight = layout === "paginated" ? usableHeight : Math.max(560, usableHeight);
+    if (blocks.length > 0 && used + height > targetHeight) flush();
+    if (isDocumentParagraph(block) && block.style.list?.kind === "number") {
+      numberOrdinal += 1;
+    } else {
+      numberOrdinal = 0;
+    }
+    blocks.push({
+      block,
+      height,
+      listOrdinal: isDocumentParagraph(block) && block.style.list?.kind === "number" ? numberOrdinal : void 0
+    });
+    used += height;
+  }
+  flush();
+  return pages;
+}
+function indexAnnotations(document2) {
+  const comments = /* @__PURE__ */ new Map();
+  const changes = /* @__PURE__ */ new Map();
+  for (const thread of document2.comments.items) {
+    const items = comments.get(thread.blockId);
+    if (items) items.push(thread);
+    else comments.set(thread.blockId, [thread]);
+  }
+  for (const change of document2.changes.items) {
+    const items = changes.get(change.blockId);
+    if (items) items.push(change);
+    else changes.set(change.blockId, [change]);
+  }
+  return { comments, changes };
+}
+function estimateBlockHeight(block) {
+  if (isDocumentTable(block)) {
+    return Math.max(48, block.rows.length * 38 + 16);
+  }
+  const fontSize = block.runs.reduce(
+    (largest, run) => Math.max(largest, run.style.fontSizePt ?? 11),
+    block.style.headingLevel ? Math.max(14, 26 - block.style.headingLevel * 2) : 11
+  );
+  const lineHeight = fontSize * POINT_TO_CSS_PIXEL * (block.style.lineHeight ?? 1.35);
+  const lines = Math.max(
+    1,
+    block.text.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(line.length / 72)), 0)
+  );
+  return Math.max(
+    28,
+    lines * lineHeight + ((block.style.spaceBeforePt ?? 2) + (block.style.spaceAfterPt ?? 6)) * POINT_TO_CSS_PIXEL
+  );
+}
+function buildPageAxis(pages, gap) {
+  const offsets = new Float64Array(pages.length + 1);
+  for (let index = 0; index < pages.length; index += 1) {
+    offsets[index + 1] = offsets[index] + pages[index].height + gap;
+  }
+  return { offsets, total: Math.max(1, (offsets[pages.length] ?? 0) - gap) };
+}
+function pageAtOffset(axis, count, offset) {
+  if (count <= 1) return 0;
+  let low = 0;
+  let high = count;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (axis.offsets[middle + 1] <= offset) low = middle + 1;
+    else high = middle;
+  }
+  return Math.max(0, Math.min(count - 1, low));
+}
+function visiblePageIndexes(axis, count, scrollTop, viewportHeight, overscan, required) {
+  if (count === 0) return [];
+  const start = Math.max(0, pageAtOffset(axis, count, scrollTop) - overscan);
+  const end = Math.min(count, pageAtOffset(axis, count, scrollTop + viewportHeight) + overscan + 1);
+  const indexes = Array.from({ length: end - start }, (_, index) => start + index);
+  if (required >= 0 && (required < start || required >= end)) indexes.push(required);
+  return indexes.sort((left, right) => left - right);
+}
+function responsiveDocumentPageScale(page, viewportWidth) {
+  if (viewportWidth <= 0) return 1;
+  const naturalWidth = page.widthPt * POINT_TO_CSS_PIXEL;
+  return Math.min(1, Math.max(0.75, (viewportWidth - 32) / naturalWidth));
+}
+function pageContentStyle(page, layout) {
+  if (layout === "continuous") {
+    return {
+      padding: "24px clamp(12px, 4cqw, 72px)"
+    };
+  }
+  return {
+    paddingTop: `${page.marginTopPt * POINT_TO_CSS_PIXEL}px`,
+    paddingRight: `${page.marginRightPt * POINT_TO_CSS_PIXEL}px`,
+    paddingBottom: `${page.marginBottomPt * POINT_TO_CSS_PIXEL}px`,
+    paddingLeft: `${page.marginLeftPt * POINT_TO_CSS_PIXEL}px`
+  };
+}
+function headingTag(level) {
+  if (!level) return "p";
+  return `h${Math.max(1, Math.min(6, level))}`;
+}
+function toParagraphStyle(paragraph) {
+  const firstRun = paragraph.runs[0];
+  return {
+    textAlign: paragraph.style.alignment,
+    marginTop: `${paragraph.style.spaceBeforePt ?? 0}pt`,
+    marginBottom: `${paragraph.style.spaceAfterPt ?? 0}pt`,
+    lineHeight: paragraph.style.lineHeight ?? 1.35,
+    breakBefore: paragraph.style.pageBreakBefore ? "page" : void 0,
+    fontFamily: firstRun?.style.fontFamily,
+    fontSize: firstRun?.style.fontSizePt ? `${firstRun.style.fontSizePt}pt` : void 0,
+    fontWeight: paragraph.style.headingLevel ? 650 : void 0
+  };
+}
+function toRunStyle(style) {
+  return {
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSizePt ? `${style.fontSizePt}pt` : void 0,
+    color: style.color,
+    fontWeight: style.bold ? 700 : void 0,
+    fontStyle: style.italic ? "italic" : void 0,
+    textDecoration: [style.underline ? "underline" : "", style.strike ? "line-through" : ""].filter(Boolean).join(" ") || void 0
+  };
+}
+function annotateRuns(paragraph, comments, changes) {
+  const segments = [];
+  let runStart = 0;
+  for (const run of paragraph.runs) {
+    const runEnd = runStart + run.text.length;
+    const boundaries = /* @__PURE__ */ new Set([runStart, runEnd]);
+    for (const annotation of [...comments, ...changes]) {
+      if (annotation.start > runStart && annotation.start < runEnd)
+        boundaries.add(annotation.start);
+      if (annotation.end > runStart && annotation.end < runEnd) boundaries.add(annotation.end);
+    }
+    const ordered = [...boundaries].sort((left, right) => left - right);
+    for (let index = 0; index < ordered.length - 1; index += 1) {
+      const start = ordered[index];
+      const end = ordered[index + 1];
+      const commented = comments.some((comment) => comment.start < end && comment.end > start);
+      const change = changes.find((item) => item.start < end && item.end > start);
+      const baseStyle = toRunStyle(run.style);
+      segments.push({
+        text: run.text.slice(start - runStart, end - runStart),
+        start,
+        commented,
+        changeKind: change?.kind,
+        style: {
+          ...baseStyle,
+          backgroundColor: commented ? "color-mix(in oklch, var(--og-color-status-waiting) 18%, transparent)" : void 0,
+          textDecoration: change?.kind === "delete" ? "line-through" : change?.kind === "insert" ? "underline" : baseStyle.textDecoration,
+          textDecorationColor: change?.kind === "delete" ? "var(--og-color-status-failed)" : change?.kind === "insert" ? "var(--og-color-status-idle)" : void 0
+        }
+      });
+    }
+    runStart = runEnd;
+  }
+  if (segments.length === 0) {
+    segments.push({ text: "", start: 0, style: {}, commented: false });
+  }
+  return segments;
+}
+function selectionOffsets(root) {
+  if (!root) return null;
+  const selection = globalThis.getSelection?.();
+  if (!selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return null;
+  const beforeStart = range.cloneRange();
+  beforeStart.selectNodeContents(root);
+  beforeStart.setEnd(range.startContainer, range.startOffset);
+  const beforeEnd = range.cloneRange();
+  beforeEnd.selectNodeContents(root);
+  beforeEnd.setEnd(range.endContainer, range.endOffset);
+  return {
+    start: beforeStart.toString().length,
+    end: beforeEnd.toString().length
+  };
+}
+var TRAILING_BREAK_ATTR = "data-og-trailing-break";
+function isDocumentImeComposing(event, composing) {
+  const native = event.nativeEvent;
+  return composing || native.isComposing === true || native.keyCode === 229;
+}
+function syncTrailingBreak(root) {
+  const existing = root.querySelector(`br[${TRAILING_BREAK_ATTR}]`);
+  const needsBreak = (root.textContent ?? "").endsWith("\n");
+  if (needsBreak && !existing) {
+    const br = globalThis.document.createElement("br");
+    br.setAttribute(TRAILING_BREAK_ATTR, "");
+    br.setAttribute("aria-hidden", "true");
+    root.appendChild(br);
+  } else if (!needsBreak && existing) {
+    existing.remove();
+  }
+}
+function stabilizeCaretAfterTrailingNewline(root) {
+  const text = root.textContent ?? "";
+  if (!text.endsWith("\n")) return;
+  const selection = globalThis.getSelection?.();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) return;
+  const offsets = selectionOffsets(root);
+  if (!offsets || offsets.start !== text.length) return;
+  const br = root.querySelector(`br[${TRAILING_BREAK_ATTR}]`);
+  if (!br) return;
+  const range = globalThis.document.createRange();
+  range.setStartBefore(br);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function insertPlainText(root, text) {
+  const selection = globalThis.getSelection?.();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return;
+  range.deleteContents();
+  const node = globalThis.document.createTextNode(text);
+  range.insertNode(node);
+  syncTrailingBreak(root);
+  range.setStartAfter(node);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  stabilizeCaretAfterTrailingNewline(root);
+}
+function restoreSelection(root, requestedStart, requestedEnd) {
+  if (!root || !globalThis.getSelection) return;
+  const textLength = root.textContent?.length ?? 0;
+  const start = Math.max(0, Math.min(requestedStart, textLength));
+  const end = Math.max(start, Math.min(requestedEnd, textLength));
+  const startPoint = textPointAt(root, start);
+  const endPoint = textPointAt(root, end);
+  if (!startPoint || !endPoint) return;
+  const range = document.createRange();
+  range.setStart(startPoint.node, startPoint.offset);
+  range.setEnd(endPoint.node, endPoint.offset);
+  const domSelection = globalThis.getSelection();
+  domSelection?.removeAllRanges();
+  domSelection?.addRange(range);
+}
+function textPointAt(root, target) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let remaining = target;
+  let node = walker.nextNode();
+  while (node) {
+    const length = node.textContent?.length ?? 0;
+    if (remaining <= length) return { node, offset: remaining };
+    remaining -= length;
+    node = walker.nextNode();
+  }
+  return { node: root, offset: root.childNodes.length };
+}
+function toggledTextStyle(paragraph, start, end, property) {
+  let allEnabled = end > start;
+  let offset = 0;
+  for (const run of paragraph.runs) {
+    const runEnd = offset + run.text.length;
+    if (runEnd > start && offset < end && run.style[property] !== true) {
+      allEnabled = false;
+      break;
+    }
+    offset = runEnd;
+  }
+  return { [property]: !allEnabled };
+}
+function documentViewFromProjection(projection) {
+  if (projection.blocks.length > MAX_PROJECTION_BLOCKS) {
+    throw new Error(`Document projection exceeds ${MAX_PROJECTION_BLOCKS} blocks`);
+  }
+  if ((projection.comments?.length ?? 0) > MAX_PROJECTION_ANNOTATIONS || (projection.changes?.length ?? 0) > MAX_PROJECTION_ANNOTATIONS) {
+    throw new Error(`Document projection exceeds ${MAX_PROJECTION_ANNOTATIONS} annotations`);
+  }
+  const sections = [...projection.sections ?? []].sort(
+    (left, right) => left.startBlockIndex - right.startBlockIndex
+  );
+  if (sections.some(
+    (section, index) => section.startBlockIndex < 0 || index > 0 && section.startBlockIndex <= sections[index - 1].startBlockIndex
+  )) {
+    throw new Error("Document projection sections must have unique increasing block indexes");
+  }
+  const firstPage = sections[0]?.startBlockIndex === 0 ? sections[0].page : projection.page;
+  validateProjectionPage(firstPage);
+  const externalIdByInternal = /* @__PURE__ */ new Map();
+  const paragraphByExternal = /* @__PURE__ */ new Map();
+  const objects = /* @__PURE__ */ new Map();
+  const blocks = [];
+  const documentSections = [];
+  const comments = [];
+  const changes = [];
+  const seenIds = /* @__PURE__ */ new Set();
+  const remember = (internalId, externalId, value) => {
+    if (!externalId || seenIds.has(externalId)) {
+      throw new Error(`Document projection contains an invalid or duplicate id: ${externalId}`);
+    }
+    seenIds.add(externalId);
+    externalIdByInternal.set(internalId, externalId);
+    objects.set(internalId, value);
+  };
+  let revision = 0;
+  let localParagraphId = 0;
+  const changed = () => {
+    revision += 1;
+  };
+  const document2 = {
+    get revision() {
+      return revision;
+    },
+    page: copyDocumentPage(firstPage),
+    blocks: {
+      items: blocks,
+      addParagraph(text = "") {
+        let id;
+        do {
+          localParagraphId += 1;
+          id = `projection-paragraph-${localParagraphId}`;
+        } while (objects.has(id));
+        const paragraph = new ProjectionParagraphView(id, [{ text, style: {} }], {}, changed);
+        blocks.push(paragraph);
+        objects.set(id, paragraph);
+        changed();
+        return paragraph;
+      }
+    },
+    sections: { items: documentSections },
+    comments: { items: comments },
+    changes: { items: changes },
+    resolve(id) {
+      const value = objects.get(id);
+      if (!value) throw new Error(`Unknown document object id: ${id}`);
+      return value;
+    }
+  };
+  let sectionIndex = sections[0]?.startBlockIndex === 0 ? 1 : 0;
+  if (sections[0]?.startBlockIndex === 0) {
+    const projectedSection = sections[0];
+    validateProjectionPage(projectedSection.page);
+    const section = {
+      ...projectedSection,
+      page: copyDocumentPage(projectedSection.page)
+    };
+    documentSections.push(section);
+    remember(section.id, projectedSection.id, section);
+  } else {
+    documentSections.push({
+      id: "projection-default-section",
+      startBlockIndex: 0,
+      page: copyDocumentPage(firstPage)
+    });
+  }
+  for (let blockIndex = 0; blockIndex < projection.blocks.length; blockIndex += 1) {
+    while (sections[sectionIndex]?.startBlockIndex === blockIndex) {
+      const projectedSection = sections[sectionIndex];
+      validateProjectionPage(projectedSection.page);
+      const section = {
+        ...projectedSection,
+        page: copyDocumentPage(projectedSection.page)
+      };
+      documentSections.push(section);
+      remember(section.id, projectedSection.id, section);
+      sectionIndex += 1;
+    }
+    const projectedBlock = projection.blocks[blockIndex];
+    if (projectedBlock.kind === "paragraph") {
+      const paragraph = new ProjectionParagraphView(
+        projectedBlock.id,
+        projectedBlock.runs.length > 0 ? projectedBlock.runs.map((run) => ({
+          text: run.text.slice(0, MAX_PROJECTION_TEXT),
+          style: { ...run.style ?? {} }
+        })) : [{ text: "", style: {} }],
+        { ...projectedBlock.style ?? {} },
+        changed
+      );
+      blocks.push(paragraph);
+      remember(paragraph.id, projectedBlock.id, paragraph);
+      paragraphByExternal.set(projectedBlock.id, paragraph);
+    } else if (projectedBlock.kind === "table") {
+      const columns = projectedBlock.rows.reduce(
+        (maximum, row) => Math.max(maximum, row.length),
+        0
+      );
+      if (projectedBlock.rows.length === 0 || columns === 0 || projectedBlock.rows.some((row) => row.length !== columns)) {
+        throw new Error(`Document table ${projectedBlock.id} must be a non-empty rectangle`);
+      }
+      if (projectedBlock.rows.length * columns > MAX_PROJECTION_TABLE_CELLS) {
+        throw new Error(`Document table ${projectedBlock.id} exceeds the projected cell limit`);
+      }
+      const table = {
+        kind: "table",
+        id: projectedBlock.id,
+        rows: projectedBlock.rows.map(
+          (row) => row.map(
+            (cell) => cell.length > 0 ? cell.map((run) => ({
+              text: run.text.slice(0, MAX_PROJECTION_TEXT),
+              style: { ...run.style ?? {} }
+            })) : [{ text: "", style: {} }]
+          )
+        ),
+        style: { ...projectedBlock.style ?? {} }
+      };
+      blocks.push(table);
+      remember(table.id, projectedBlock.id, table);
+    } else {
+      const pageBreak = {
+        kind: "pageBreak",
+        id: projectedBlock.id
+      };
+      blocks.push(pageBreak);
+      remember(pageBreak.id, projectedBlock.id, pageBreak);
+    }
+  }
+  while (sections[sectionIndex]?.startBlockIndex === projection.blocks.length) {
+    const projectedSection = sections[sectionIndex];
+    validateProjectionPage(projectedSection.page);
+    const section = {
+      ...projectedSection,
+      page: copyDocumentPage(projectedSection.page)
+    };
+    documentSections.push(section);
+    remember(section.id, projectedSection.id, section);
+    sectionIndex += 1;
+  }
+  if (sectionIndex < sections.length) {
+    throw new Error("Document projection section starts beyond the projected blocks");
+  }
+  for (const projected of projection.comments ?? []) {
+    const paragraph = paragraphByExternal.get(projected.blockId);
+    const first = projected.replies[0];
+    if (!paragraph || !first) continue;
+    if (!Number.isSafeInteger(projected.start) || !Number.isSafeInteger(projected.end) || projected.start < 0 || projected.end < projected.start || projected.end > paragraph.text.length) {
+      throw new Error(`Document comment ${projected.id} has an invalid range`);
+    }
+    const thread = {
+      ...projected,
+      replies: projected.replies.map((reply) => ({ ...reply }))
+    };
+    comments.push(thread);
+    remember(thread.id, projected.id, thread);
+  }
+  for (const projected of projection.changes ?? []) {
+    const paragraph = paragraphByExternal.get(projected.blockId);
+    if (!paragraph) continue;
+    if (!Number.isSafeInteger(projected.start) || !Number.isSafeInteger(projected.end) || projected.start < 0 || projected.end <= projected.start || projected.end > paragraph.text.length) {
+      throw new Error(`Document tracked change ${projected.id} has an invalid range`);
+    }
+    const change = { ...projected };
+    changes.push(change);
+    remember(change.id, projected.id, change);
+  }
+  return { document: document2, externalIdByInternal };
+}
+function copyDocumentPage(page) {
+  return {
+    widthPt: page.widthPt,
+    heightPt: page.heightPt,
+    marginTopPt: page.marginTopPt,
+    marginRightPt: page.marginRightPt,
+    marginBottomPt: page.marginBottomPt,
+    marginLeftPt: page.marginLeftPt,
+    ...page.headerPt === void 0 ? {} : { headerPt: page.headerPt },
+    ...page.footerPt === void 0 ? {} : { footerPt: page.footerPt },
+    ...page.gutterPt === void 0 ? {} : { gutterPt: page.gutterPt }
+  };
+}
+var ProjectionParagraphView = class {
+  constructor(id, runs, style, changed) {
+    this.id = id;
+    this.changed = changed;
+    this.runStorage = normalizeProjectionRuns(runs);
+    this.style = { ...style, ...style.list ? { list: { ...style.list } } : {} };
+  }
+  kind = "paragraph";
+  runStorage;
+  style;
+  get runs() {
+    return this.runStorage;
+  }
+  get text() {
+    return this.runStorage.map((run) => run.text).join("");
+  }
+  set text(value) {
+    const current = this.text;
+    if (current === value) return;
+    let start = 0;
+    while (start < current.length && start < value.length && current[start] === value[start]) {
+      start += 1;
+    }
+    let currentEnd = current.length;
+    let valueEnd = value.length;
+    while (currentEnd > start && valueEnd > start && current[currentEnd - 1] === value[valueEnd - 1]) {
+      currentEnd -= 1;
+      valueEnd -= 1;
+    }
+    const inheritedStyle = projectionStyleAt(this.runStorage, start);
+    this.runStorage = normalizeProjectionRuns([
+      ...sliceProjectionRuns(this.runStorage, 0, start),
+      ...valueEnd > start ? [{ text: value.slice(start, valueEnd), style: inheritedStyle }] : [],
+      ...sliceProjectionRuns(this.runStorage, currentEnd, current.length)
+    ]);
+    this.changed();
+  }
+  format({
+    start,
+    end,
+    style
+  }) {
+    const textLength = this.text.length;
+    if (start < 0 || end <= start || end > textLength || Object.keys(style).length === 0) return;
+    this.runStorage = normalizeProjectionRuns([
+      ...sliceProjectionRuns(this.runStorage, 0, start),
+      ...sliceProjectionRuns(this.runStorage, start, end).map((run) => ({
+        text: run.text,
+        style: { ...run.style, ...style }
+      })),
+      ...sliceProjectionRuns(this.runStorage, end, textLength)
+    ]);
+    this.changed();
+  }
+};
+function sliceProjectionRuns(runs, start, end) {
+  if (end <= start) return [];
+  const result = [];
+  let offset = 0;
+  for (const run of runs) {
+    const runEnd = offset + run.text.length;
+    const overlapStart = Math.max(start, offset);
+    const overlapEnd = Math.min(end, runEnd);
+    if (overlapEnd > overlapStart) {
+      result.push({
+        text: run.text.slice(overlapStart - offset, overlapEnd - offset),
+        style: { ...run.style }
+      });
+    }
+    offset = runEnd;
+    if (offset >= end) break;
+  }
+  return result;
+}
+function normalizeProjectionRuns(runs) {
+  const normalized = [];
+  for (const run of runs) {
+    if (!run.text && runs.length > 1) continue;
+    const style = { ...run.style };
+    const previous = normalized.at(-1);
+    if (previous && sameProjectionStyle(previous.style, style)) {
+      normalized[normalized.length - 1] = { text: previous.text + run.text, style };
+    } else {
+      normalized.push({ text: run.text, style });
+    }
+  }
+  return normalized.length > 0 ? normalized : [{ text: "", style: {} }];
+}
+function projectionStyleAt(runs, offset) {
+  let cursor = 0;
+  for (const run of runs) {
+    const end = cursor + run.text.length;
+    if (offset <= end) return { ...run.style };
+    cursor = end;
+  }
+  return { ...runs.at(-1)?.style ?? {} };
+}
+function sameProjectionStyle(left, right) {
+  return left.fontFamily === right.fontFamily && left.fontSizePt === right.fontSizePt && left.color === right.color && left.bold === right.bold && left.italic === right.italic && left.underline === right.underline && left.strike === right.strike;
+}
+function validateProjectionPage(page) {
+  const values = [
+    page.widthPt,
+    page.heightPt,
+    page.marginTopPt,
+    page.marginRightPt,
+    page.marginBottomPt,
+    page.marginLeftPt
+  ];
+  if (values.some((value) => !Number.isFinite(value) || value < 0) || page.widthPt <= 0 || page.heightPt <= 0 || page.marginLeftPt + page.marginRightPt >= page.widthPt || page.marginTopPt + page.marginBottomPt >= page.heightPt) {
+    throw new Error("Document projection contains invalid page geometry");
+  }
+}
+function isDocumentParagraph(value) {
+  return isDocumentBlockKind(value, "paragraph");
+}
+function isDocumentTable(value) {
+  return isDocumentBlockKind(value, "table");
+}
+function isDocumentPageBreak(value) {
+  return isDocumentBlockKind(value, "pageBreak");
+}
+function isDocumentBlockKind(value, kind) {
+  return typeof value === "object" && value !== null && "kind" in value && value.kind === kind;
+}
+function asDocumentView(document2) {
+  return document2;
+}
+function mapDocumentCommit(command, externalIdByInternal) {
+  return {
+    ...command,
+    blockId: externalIdByInternal.get(command.blockId) ?? command.blockId
+  };
+}
+function identity(value) {
+  return value;
+}
+function asDocumentError(cause) {
+  return cause instanceof Error ? cause : new Error("Document change failed");
+}
+
+// src/components/artifacts/editable-document.tsx
+import {
+  DOCUMENT_ARTIFACT_COMMAND_VERSION
+} from "@opengeni/sdk/editable-artifacts";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DOCUMENT_PAGE_ITEMS = 512;
+var DOCUMENT_MAX_BLOCKS = 4096;
+var DOCUMENT_MAX_SECTIONS = 1024;
+var DOCUMENT_MAX_REVIEW_ITEMS = 4096;
+var DOCUMENT_MAX_TEXT_UTF16 = 1e6;
+var DOCUMENT_MAX_TABLE_CELLS = 1e5;
+var DOCUMENT_MAX_QUERY_PAGES = 64;
+var DOCUMENT_COMPOSITION_ATTEMPTS = 3;
+function EditableDocumentArtifactSurface(props) {
+  return /* @__PURE__ */ jsx2(ArtifactSubmissionProvider, { children: /* @__PURE__ */ jsx2(EditableDocumentArtifactSurfaceSession, { ...props }) }, artifactSubmissionSessionKey(props.session));
+}
+function EditableDocumentArtifactSurfaceSession({
+  session,
+  title,
+  showHeader,
+  subtitle,
+  readOnly = false,
+  onCommit,
+  onCommandError,
+  download,
+  actions: actionsProp,
+  ...surfaceProps
+}) {
+  const t = useOpenGeniText();
+  const view = useEditableArtifactView(session);
+  const submissions = useArtifactSubmissions();
+  const invalidator = editableArtifactProjectionKey(view);
+  const [retryEpoch, setRetryEpoch] = useState2(0);
+  const [state, setState] = useState2({
+    session,
+    projection: null,
+    loading: true,
+    error: null
+  });
+  const loadGeneration = useRef2(0);
+  const scheduleLoad = useLatestTaskRunner(session);
+  const commandStateRef = useRef2(null);
+  if (commandStateRef.current?.session !== session) {
+    commandStateRef.current = {
+      session,
+      tail: Promise.resolve(),
+      paragraphText: /* @__PURE__ */ new Map(),
+      localParagraphIds: /* @__PURE__ */ new Set(),
+      optimisticParagraphIds: /* @__PURE__ */ new Map()
+    };
+  }
+  const commandState = commandStateRef.current;
+  useEffect2(() => {
+    const generation = ++loadGeneration.current;
+    let cancelled = false;
+    setState(
+      (current) => current.session === session ? { ...current, loading: true, error: null } : { session, projection: null, loading: true, error: null }
+    );
+    const superseded = () => cancelled || generation !== loadGeneration.current || commandStateRef.current !== commandState;
+    scheduleLoad(async () => {
+      if (superseded()) return;
+      await composeDocumentEditorProjection(t, session).then(
+        (projection2) => {
+          if (superseded()) return;
+          const nextParagraphText = paragraphTextById(projection2);
+          for (const [localId, canonicalId] of commandState.optimisticParagraphIds) {
+            if (nextParagraphText.has(canonicalId)) continue;
+            const optimisticText = commandState.paragraphText.get(canonicalId) ?? commandState.paragraphText.get(localId);
+            if (optimisticText !== void 0) nextParagraphText.set(canonicalId, optimisticText);
+          }
+          commandState.paragraphText = nextParagraphText;
+          setState({ session, projection: projection2, loading: false, error: null });
+        },
+        (cause) => {
+          if (superseded()) return;
+          setState({
+            session,
+            projection: null,
+            loading: false,
+            error: asEditableArtifactError(
+              cause,
+              t("artifacts.editableDocument.couldNotOpenThisDocument")
+            )
+          });
+        }
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [commandState, invalidator, retryEpoch, scheduleLoad, session, t]);
+  const refresh = useCallback2(() => setRetryEpoch((value) => value + 1), []);
+  const writable = !readOnly && view.writable;
+  const applyCommit = useCallback2(
+    (commit) => {
+      const projection2 = state.session === session ? state.projection : null;
+      if (!projection2) return Promise.reject(new Error("Document projection is not ready"));
+      if (!writable)
+        return Promise.reject(new Error(t("artifacts.editableDocument.thisDocumentIsReadOnly")));
+      if (String(commit.revision) !== String(projection2.revision)) {
+        return Promise.reject(
+          new Error(t("artifacts.editableDocument.theDocumentChangedRetryThis"))
+        );
+      }
+      const execute = async () => {
+        if (commandStateRef.current !== commandState) {
+          throw new Error(t("artifacts.editableDocument.theDocumentSessionChangedBefore"));
+        }
+        const allocateLocalParagraph = async (localId) => {
+          const allocated = commandState.optimisticParagraphIds.get(localId);
+          if (allocated !== void 0) return allocated;
+          if (!commandState.localParagraphIds.has(localId)) {
+            throw new Error(t("artifacts.editableDocument.theEditedParagraphIsNo"));
+          }
+          const created = await session.createDocumentParagraph();
+          if (commandStateRef.current !== commandState) {
+            throw new Error(t("artifacts.editableDocument.theDocumentSessionChangedBefore"));
+          }
+          commandState.optimisticParagraphIds.set(localId, created.paragraphId);
+          commandState.paragraphText.set(created.paragraphId, "");
+          return created.paragraphId;
+        };
+        if (commit.kind === "insert-paragraph") {
+          commandState.localParagraphIds.add(commit.blockId);
+          await allocateLocalParagraph(commit.blockId);
+          notifyDocumentCommit(t, onCommit, onCommandError, commit);
+          refresh();
+          return;
+        }
+        const targetId = commandState.localParagraphIds.has(commit.blockId) ? await allocateLocalParagraph(commit.blockId) : commit.blockId;
+        let command = null;
+        let rollbackText = null;
+        if (commit.kind === "text") {
+          const before = commandState.paragraphText.get(targetId);
+          if (before === void 0) {
+            throw new Error(t("artifacts.editableDocument.theEditedParagraphIsNo"));
+          }
+          const edit = minimalUtf16TextEdit(before, commit.text);
+          if (!edit) return;
+          commandState.paragraphText.set(targetId, commit.text);
+          rollbackText = () => {
+            if (commandState.paragraphText.get(targetId) === commit.text) {
+              commandState.paragraphText.set(targetId, before);
+            }
+          };
+          command = {
+            kind: "paragraph.edit",
+            id: targetId,
+            range: edit.range,
+            replacement: edit.replacement,
+            style: null
+          };
+        } else if (commit.kind === "format") {
+          command = {
+            kind: "paragraph.format",
+            id: targetId,
+            range: commit.range,
+            style: documentTextStylePatch(commit.style)
+          };
+        }
+        if (!command) throw new Error("Unsupported document edit");
+        try {
+          await session.applyDocumentCommands({
+            version: DOCUMENT_ARTIFACT_COMMAND_VERSION,
+            commands: [command]
+          });
+          if (commandStateRef.current !== commandState) return;
+          notifyDocumentCommit(t, onCommit, onCommandError, commit);
+          refresh();
+        } catch (cause) {
+          rollbackText?.();
+          throw cause;
+        }
+      };
+      const operation = commandState.tail.then(execute, execute);
+      commandState.tail = operation;
+      void operation.then(
+        () => {
+          if (commandState.tail === operation) commandState.tail = Promise.resolve();
+        },
+        () => {
+          if (commandState.tail === operation) commandState.tail = Promise.resolve();
+        }
+      );
+      return operation;
+    },
+    [commandState, onCommandError, onCommit, refresh, session, state, writable, t]
+  );
+  const submitCommit = useCallback2(
+    (commit) => submissions.run(() => applyCommit(commit)),
+    [applyCommit, submissions]
+  );
+  const actions = download ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    actionsProp,
+    /* @__PURE__ */ jsx2(
+      EditableArtifactDownloadButton,
+      {
+        session,
+        title,
+        download,
+        format: "docx"
+      }
+    )
+  ] }) : actionsProp;
+  const projection = state.session === session ? state.projection : null;
+  const status = editableArtifactStatusLabel(t, view);
+  const accessRevoked = editableArtifactAccessRevoked(view);
+  return projection && !accessRevoked ? /* @__PURE__ */ jsx2(
+    DocumentProjectionArtifactSurface,
+    {
+      ...surfaceProps,
+      title,
+      showHeader,
+      actions,
+      subtitle: subtitle ?? writable ? t("counts.blocks", { count: projection.blocks.length }) : t("artifacts.readOnlySubtitle", {
+        subtitle: t("counts.blocks", { count: projection.blocks.length })
+      }),
+      projection,
+      commit: writable ? submitCommit : void 0,
+      readOnly: !writable,
+      busy: state.loading,
+      onCommandError
+    }
+  ) : /* @__PURE__ */ jsx2(
+    ArtifactSurface,
+    {
+      modality: "document",
+      title,
+      showHeader,
+      subtitle: subtitle ?? status,
+      actions: accessRevoked ? actionsProp : actions,
+      busy: !accessRevoked && !state.error,
+      className: surfaceProps.className,
+      children: /* @__PURE__ */ jsx2(
+        EditableArtifactMessage,
+        {
+          title: accessRevoked ? t("artifacts.editableDocument.accessChanged") : state.error ? t("artifacts.editableDocument.couldNotOpenThisDocument") : t("artifacts.editableDocument.openingDocument"),
+          detail: accessRevoked ? status : state.error?.message ?? status,
+          retry: !accessRevoked && state.error ? refresh : void 0
+        }
+      )
+    }
+  );
+}
+async function composeDocumentEditorProjection(t, session) {
+  if (session.modality !== "document") throw new Error("Expected a document artifact session");
+  let lastRevisionError = null;
+  for (let attempt = 0; attempt < DOCUMENT_COMPOSITION_ATTEMPTS; attempt += 1) {
+    try {
+      return await composeDocumentAttempt(session);
+    } catch (cause) {
+      const error = asEditableArtifactError(
+        cause,
+        t("artifacts.editableDocument.couldNotProjectThisDocument")
+      );
+      if (!isRevisionDrift(error) || attempt === DOCUMENT_COMPOSITION_ATTEMPTS - 1) throw error;
+      lastRevisionError = error;
+    }
+  }
+  throw lastRevisionError ?? new Error("Document changed while it was opening");
+}
+async function composeDocumentAttempt(session) {
+  const summaryPage = await session.queryDocument({ kind: "summary" });
+  const summary = summaryItem(summaryPage);
+  const revision = summaryPage.revision;
+  if (summary.revision !== revision) throw new Error("Document projection revision drifted");
+  if (summary.blockCount > DOCUMENT_MAX_BLOCKS) {
+    throw new Error(`Document exceeds the interactive limit of ${DOCUMENT_MAX_BLOCKS} blocks`);
+  }
+  if (summary.sectionCount > DOCUMENT_MAX_SECTIONS) {
+    throw new Error(`Document exceeds the interactive limit of ${DOCUMENT_MAX_SECTIONS} sections`);
+  }
+  if (summary.commentCount + summary.trackedChangeCount > DOCUMENT_MAX_REVIEW_ITEMS) {
+    throw new Error(
+      `Document exceeds the interactive limit of ${DOCUMENT_MAX_REVIEW_ITEMS} review items`
+    );
+  }
+  const body = await collectDocumentPages(
+    session,
+    "body",
+    revision,
+    DOCUMENT_MAX_BLOCKS,
+    DOCUMENT_MAX_TEXT_UTF16,
+    DOCUMENT_MAX_TABLE_CELLS,
+    (cursor, limits) => ({ kind: "body", startBlock: cursor, limits })
+  );
+  const sections = await collectDocumentPages(
+    session,
+    "sections",
+    revision,
+    DOCUMENT_MAX_SECTIONS,
+    DOCUMENT_MAX_TEXT_UTF16 - body.text,
+    DOCUMENT_MAX_TABLE_CELLS - body.cells,
+    (cursor, limits) => ({ kind: "sections", startSection: cursor, limits })
+  );
+  const review = await collectDocumentPages(
+    session,
+    "review",
+    revision,
+    DOCUMENT_MAX_REVIEW_ITEMS,
+    DOCUMENT_MAX_TEXT_UTF16 - body.text - sections.text,
+    DOCUMENT_MAX_TABLE_CELLS - body.cells - sections.cells,
+    (cursor, limits) => ({ kind: "review", startItem: cursor, limits })
+  );
+  if (body.items.length !== summary.blockCount) {
+    throw new Error("Document body changed while it was opening");
+  }
+  if (sections.items.length !== summary.sectionCount) {
+    throw new Error("Document sections changed while they were opening");
+  }
+  if (review.items.length !== summary.commentCount + summary.trackedChangeCount) {
+    throw new Error("Document review state changed while it was opening");
+  }
+  const totalText = body.text + sections.text + review.text;
+  const totalCells = body.cells + sections.cells + review.cells;
+  if (totalText > DOCUMENT_MAX_TEXT_UTF16) {
+    throw new Error(
+      `Document exceeds the interactive limit of ${DOCUMENT_MAX_TEXT_UTF16} UTF-16 text units`
+    );
+  }
+  if (totalCells > DOCUMENT_MAX_TABLE_CELLS) {
+    throw new Error(
+      `Document exceeds the interactive limit of ${DOCUMENT_MAX_TABLE_CELLS} table cells`
+    );
+  }
+  return Object.freeze({
+    revision: revision.toString(),
+    page: projectDocumentPage(summary.page),
+    blocks: Object.freeze(body.items.map(projectDocumentBlock)),
+    sections: Object.freeze(sections.items.map(projectDocumentSection)),
+    comments: Object.freeze(
+      review.items.filter(isProjectionKind("comment")).map((item) => ({
+        id: item.id,
+        blockId: item.paragraphId,
+        start: item.range.start,
+        end: item.range.end,
+        resolved: item.resolved,
+        replies: item.replies.map((reply) => ({ ...reply }))
+      }))
+    ),
+    changes: Object.freeze(
+      review.items.filter(isProjectionKind("tracked-change")).map((item) => ({
+        id: item.id,
+        blockId: item.paragraphId,
+        kind: item.changeKind,
+        start: item.range.start,
+        end: item.range.end,
+        author: item.author,
+        createdAt: item.createdAt
+      }))
+    )
+  });
+}
+async function collectDocumentPages(session, label, revision, maxItems, maxText, maxCells, query) {
+  const output = { items: [], text: 0, cells: 0 };
+  let cursor = 0;
+  for (let pageIndex = 0; pageIndex < DOCUMENT_MAX_QUERY_PAGES; pageIndex += 1) {
+    if (output.items.length >= maxItems && cursor > 0) {
+      throw new Error(`Document ${label} exceeds its interactive item limit`);
+    }
+    const page = await session.queryDocument(
+      query(cursor, {
+        maxItems: Math.min(DOCUMENT_PAGE_ITEMS, Math.max(1, maxItems - output.items.length)),
+        maxTextUtf16: Math.max(1, maxText - output.text),
+        maxTableCells: Math.max(1, maxCells - output.cells)
+      })
+    );
+    assertDocumentRevision(page, revision);
+    assertDocumentPageKinds(label, page.items);
+    if (output.items.length + page.items.length > maxItems) {
+      throw new Error(`Document ${label} exceeds its interactive item limit`);
+    }
+    output.items.push(...page.items);
+    output.text += page.projectedTextUtf16;
+    output.cells += page.projectedTableCells;
+    if (output.text > maxText || output.cells > maxCells) {
+      throw new Error(`Document ${label} exceeds its interactive content limit`);
+    }
+    if (page.nextCursor === null) return output;
+    if (page.nextCursor <= cursor || page.items.length === 0) {
+      throw new Error(`Document ${label} pagination did not advance`);
+    }
+    cursor = page.nextCursor;
+  }
+  throw new Error(`Document ${label} exceeds ${DOCUMENT_MAX_QUERY_PAGES} query pages`);
+}
+function summaryItem(projection) {
+  if (projection.items.length !== 1 || projection.items[0]?.kind !== "summary" || projection.nextCursor !== null || projection.truncated) {
+    throw new Error("Document summary projection is malformed");
+  }
+  return projection.items[0];
+}
+function assertDocumentRevision(page, revision) {
+  if (page.revision !== revision) throw new Error("Document projection revision drifted");
+}
+function assertDocumentPageKinds(label, items) {
+  const valid = label === "body" ? /* @__PURE__ */ new Set(["paragraph", "table", "page-break"]) : label === "sections" ? /* @__PURE__ */ new Set(["section"]) : /* @__PURE__ */ new Set(["comment", "tracked-change"]);
+  if (items.some((item) => !valid.has(item.kind))) {
+    throw new Error(`Document ${label} projection contains an unexpected item`);
+  }
+}
+function projectDocumentBlock(item) {
+  if (item.kind === "paragraph") {
+    const { headingLevel, list, ...paragraphStyle } = item.style;
+    return {
+      kind: "paragraph",
+      id: item.id,
+      runs: item.runs.map((run) => ({ text: run.text, style: { ...run.style } })),
+      style: {
+        ...paragraphStyle,
+        ...headingLevel === void 0 ? {} : { headingLevel: documentHeadingLevel(headingLevel) },
+        ...list ? {
+          list: {
+            kind: list.kind,
+            ...list.level === null ? {} : { level: list.level },
+            ...list.instanceId === null ? {} : { instanceId: list.instanceId }
+          }
+        } : {}
+      }
+    };
+  }
+  if (item.kind === "table") {
+    return {
+      kind: "table",
+      id: item.id,
+      rows: item.rows.map(
+        (row) => row.map((cell) => cell.map((run) => ({ text: run.text, style: { ...run.style } })))
+      ),
+      style: { ...item.style }
+    };
+  }
+  if (item.kind === "page-break") return { kind: "pageBreak", id: item.id };
+  throw new Error("Document body projection contains an unexpected item");
+}
+function documentHeadingLevel(value) {
+  if (value < 1 || value > 6 || !Number.isInteger(value)) {
+    throw new Error("Document projection contains an invalid heading level");
+  }
+  return value;
+}
+function projectDocumentSection(item) {
+  if (item.kind !== "section") {
+    throw new Error("Document section projection contains an unexpected item");
+  }
+  return {
+    id: item.id,
+    startBlockIndex: item.startBlockIndex,
+    page: projectDocumentPage(item.page),
+    titlePage: item.titlePage,
+    headerBlockCounts: item.headerBlockCounts,
+    footerBlockCounts: item.footerBlockCounts
+  };
+}
+function projectDocumentPage(page) {
+  const points = (value) => Number(value) / 1e3;
+  return {
+    widthPt: points(page.widthMillipoints),
+    heightPt: points(page.heightMillipoints),
+    marginTopPt: points(page.marginTopMillipoints),
+    marginRightPt: points(page.marginRightMillipoints),
+    marginBottomPt: points(page.marginBottomMillipoints),
+    marginLeftPt: points(page.marginLeftMillipoints),
+    headerPt: points(page.headerMillipoints),
+    footerPt: points(page.footerMillipoints),
+    gutterPt: points(page.gutterMillipoints)
+  };
+}
+function isProjectionKind(kind) {
+  return (item) => item.kind === kind;
+}
+function paragraphTextById(projection) {
+  return new Map(
+    projection.blocks.filter((block) => block.kind === "paragraph").map((paragraph) => [paragraph.id, paragraph.runs.map((run) => run.text).join("")])
+  );
+}
+function minimalUtf16TextEdit(before, after) {
+  if (before === after) return null;
+  let start = 0;
+  const maximumStart = Math.min(before.length, after.length);
+  while (start < maximumStart && before.charCodeAt(start) === after.charCodeAt(start)) start += 1;
+  while (start > 0 && (splitsSurrogate(before, start) || splitsSurrogate(after, start))) start -= 1;
+  let suffix = 0;
+  while (suffix < before.length - start && suffix < after.length - start && before.charCodeAt(before.length - suffix - 1) === after.charCodeAt(after.length - suffix - 1)) {
+    suffix += 1;
+  }
+  while (suffix > 0 && (splitsSurrogate(before, before.length - suffix) || splitsSurrogate(after, after.length - suffix))) {
+    suffix -= 1;
+  }
+  return {
+    range: { start, end: before.length - suffix },
+    replacement: after.slice(start, after.length - suffix)
+  };
+}
+function splitsSurrogate(value, index) {
+  if (index <= 0 || index >= value.length) return false;
+  const left = value.charCodeAt(index - 1);
+  const right = value.charCodeAt(index);
+  return left >= 55296 && left <= 56319 && right >= 56320 && right <= 57343;
+}
+function documentTextStylePatch(style) {
+  return {
+    ...style.fontFamily === void 0 ? {} : { fontFamily: style.fontFamily },
+    ...style.fontSizePt === void 0 ? {} : { fontSizePt: style.fontSizePt },
+    ...style.color === void 0 ? {} : { color: style.color },
+    ...style.bold === void 0 ? {} : { bold: style.bold },
+    ...style.italic === void 0 ? {} : { italic: style.italic },
+    ...style.underline === void 0 ? {} : { underline: style.underline },
+    ...style.strike === void 0 ? {} : { strike: style.strike }
+  };
+}
+function isRevisionDrift(error) {
+  return error.message.includes("changed while") || error.message.includes("revision drifted");
+}
+function notifyDocumentCommit(t, observer, onError, commit) {
+  try {
+    const result = observer?.(commit);
+    if (result && typeof result.then === "function") {
+      void Promise.resolve(result).catch(
+        (cause) => onError?.(
+          asEditableArtifactError(
+            cause,
+            t("artifacts.editableDocument.documentCommitObserverFailed")
+          )
+        )
+      );
+    }
+  } catch (cause) {
+    onError?.(
+      asEditableArtifactError(cause, t("artifacts.editableDocument.documentCommitObserverFailed"))
+    );
+  }
+}
+
+export {
+  DocumentEditor,
+  DocumentProjectionEditor,
+  DocumentArtifactSurface,
+  DocumentProjectionArtifactSurface,
+  EditableDocumentArtifactSurface
+};
+//# sourceMappingURL=chunk-57AZS3IE.js.map