@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/{chunk-HUIKIDM5.js → chunk-WUISZ3WU.js}

@@ -1,3 +1,6 @@
+import {
+  useLatestTaskRunner
+} from "./chunk-WEHMPOXK.js";
 import {
   ArtifactSurface,
   EditableArtifactMessage,
@@ -6,7 +9,7 @@ import {
   editableArtifactProjectionKey,
   editableArtifactStatusLabel,
   useEditableArtifactView
-} from "./chunk-KCGXPP5V.js";
+} from "./chunk-Y2PRMYLC.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";
@@ -583,83 +586,104 @@ function DocumentEditorCore({
                   {
                     type: "button",
                     onClick: addFirstParagraph,
-                    className: "mt-3 rounded-og-md border border-og-border bg-og-surface-1 px-3 py-1.5 text-og-sm text-og-fg hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent",
+                    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: "Start writing"
                   }
                 ) : null
-              ] }) }) : /* @__PURE__ */ jsx("div", { className: "relative min-w-full", style: { height: axis.total }, children: mountedIndexes.map((pageIndex) => {
-                const page = pages[pageIndex];
-                const top = axis.offsets[pageIndex];
-                return /* @__PURE__ */ jsx(
-                  "article",
-                  {
-                    "aria-label": `${layout === "paginated" ? "Page" : "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" ? "left-1/2 -translate-x-1/2 border shadow-og-sm" : "left-0 right-0 border-b border-og-border bg-og-surface-1 text-og-fg"
-                    ),
-                    style: {
-                      top,
-                      color: layout === "paginated" ? "#171717" : void 0,
-                      backgroundColor: layout === "paginated" ? "#fff" : void 0,
-                      borderColor: layout === "paginated" ? "#0000001a" : void 0,
-                      width: layout === "paginated" ? page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale : void 0,
-                      height: page.height
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      MeasuredPageBody,
+              ] }) }) : /* @__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",
                       {
-                        pageKey: page.key,
-                        measureToken: documentRevision,
-                        onHeight: recordPageHeight,
+                        "aria-label": `${layout === "paginated" ? "Page" : "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(
-                          layout === "paginated" ? "absolute left-0 top-0 overflow-hidden" : "mx-auto"
+                          "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: {
-                          ...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"
-                          } : {}
+                          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: page.blocks.map(({ block, listOrdinal }) => /* @__PURE__ */ jsx(
-                          DocumentBlockView,
+                        children: /* @__PURE__ */ jsx(
+                          MeasuredPageBody,
                           {
-                            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);
+                            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"
+                              } : {}
                             },
-                            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
-                );
-              }) })
+                            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
+                    );
+                  })
+                }
+              )
             ]
           }
         )
@@ -670,6 +694,7 @@ function DocumentEditorCore({
 function DocumentArtifactSurface({
   document: document2,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -681,6 +706,7 @@ function DocumentArtifactSurface({
     {
       modality: "document",
       title,
+      showHeader,
       subtitle,
       busy,
       className,
@@ -699,6 +725,7 @@ function DocumentArtifactSurface({
 function DocumentProjectionArtifactSurface({
   projection,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -710,6 +737,7 @@ function DocumentProjectionArtifactSurface({
     {
       modality: "document",
       title,
+      showHeader,
       subtitle,
       busy,
       className,
@@ -874,9 +902,10 @@ var ParagraphLeaf = memo(
     onKeyDown
   }) {
     const composing = useRef(false);
+    const suppressNextEnter = useRef(false);
     const Tag = headingTag(paragraph.style.headingLevel);
     const label = paragraph.style.list?.kind === "number" ? `Numbered list item ${listOrdinal ?? 1}` : paragraph.style.list?.kind === "bullet" ? "Bullet list item" : paragraph.style.headingLevel ? `Heading ${paragraph.style.headingLevel}` : "Paragraph";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Tag,
       {
         ref: registerEditor,
@@ -898,6 +927,12 @@ var ParagraphLeaf = memo(
         },
         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);
         },
@@ -919,15 +954,18 @@ var ParagraphLeaf = memo(
         onKeyDown: (event) => {
           onKeyDown(event, paragraph);
           if (event.defaultPrevented || readOnly) return;
-          if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.altKey) {
-            event.preventDefault();
-            insertPlainText(event.currentTarget, "\n");
-            onInput(paragraph, event.currentTarget.textContent ?? "");
-            onSelection(paragraph);
-          }
+          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 ?? "");
           }
         },
@@ -937,16 +975,19 @@ var ParagraphLeaf = memo(
           !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}`
-        ))
+        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
+        ]
       }
     );
   },
@@ -961,12 +1002,13 @@ function DocumentTableView({
   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: "overflow-x-auto py-2",
+      className: "w-full max-w-full overflow-x-auto py-2",
       children: /* @__PURE__ */ jsxs(
         "table",
         {
@@ -995,6 +1037,8 @@ function DocumentTableView({
                     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) => (
@@ -1013,6 +1057,32 @@ function DocumentTableView({
     }
   );
 }
+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,
@@ -1160,12 +1230,12 @@ function visiblePageIndexes(axis, count, scrollTop, viewportHeight, overscan, re
 function responsiveDocumentPageScale(page, viewportWidth) {
   if (viewportWidth <= 0) return 1;
   const naturalWidth = page.widthPt * POINT_TO_CSS_PIXEL;
-  return Math.min(1, Math.max(0.1, (viewportWidth - 32) / naturalWidth));
+  return Math.min(1, Math.max(0.75, (viewportWidth - 32) / naturalWidth));
 }
 function pageContentStyle(page, layout) {
   if (layout === "continuous") {
     return {
-      padding: "24px clamp(24px, 8vw, 96px)"
+      padding: "24px clamp(12px, 4cqw, 72px)"
     };
   }
   return {
@@ -1257,6 +1327,38 @@ function selectionOffsets(root) {
     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;
@@ -1265,10 +1367,12 @@ function insertPlainText(root, text) {
   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;
@@ -1666,6 +1770,7 @@ var DOCUMENT_COMPOSITION_ATTEMPTS = 3;
 function EditableDocumentArtifactSurface({
   session,
   title,
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -1682,6 +1787,7 @@ function EditableDocumentArtifactSurface({
     error: null
   });
   const loadGeneration = useRef2(0);
+  const scheduleLoad = useLatestTaskRunner(session);
   const commandStateRef = useRef2(null);
   if (commandStateRef.current?.session !== session) {
     commandStateRef.current = {
@@ -1699,36 +1805,36 @@ function EditableDocumentArtifactSurface({
     setState(
       (current) => current.session === session ? { ...current, loading: true, error: null } : { session, projection: null, loading: true, error: null }
     );
-    void composeDocumentEditorProjection(session).then(
-      (projection2) => {
-        if (cancelled || generation !== loadGeneration.current || commandStateRef.current !== commandState) {
-          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 (cancelled || generation !== loadGeneration.current || commandStateRef.current !== commandState) {
-          return;
+    const superseded = () => cancelled || generation !== loadGeneration.current || commandStateRef.current !== commandState;
+    scheduleLoad(async () => {
+      if (superseded()) return;
+      await composeDocumentEditorProjection(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, "Could not open this document")
+          });
         }
-        setState({
-          session,
-          projection: null,
-          loading: false,
-          error: asEditableArtifactError(cause, "Could not open this document")
-        });
-      }
-    );
+      );
+    });
     return () => {
       cancelled = true;
     };
-  }, [commandState, invalidator, retryEpoch, session]);
+  }, [commandState, invalidator, retryEpoch, scheduleLoad, session]);
   const refresh = useCallback2(() => setRetryEpoch((value) => value + 1), []);
   const writable = !readOnly && view.writable;
   const applyCommit = useCallback2(
@@ -1833,6 +1939,7 @@ function EditableDocumentArtifactSurface({
     {
       ...surfaceProps,
       title,
+      showHeader,
       subtitle: subtitle ?? `${projection.blocks.length} block${projection.blocks.length === 1 ? "" : "s"}${writable ? "" : " \xB7 Read only"}`,
       projection,
       commit: writable ? applyCommit : void 0,
@@ -1845,6 +1952,7 @@ function EditableDocumentArtifactSurface({
     {
       modality: "document",
       title,
+      showHeader,
       subtitle: subtitle ?? status,
       busy: !accessRevoked && !state.error,
       className: surfaceProps.className,
@@ -2145,4 +2253,4 @@ export {
   DocumentProjectionArtifactSurface,
   EditableDocumentArtifactSurface
 };
-//# sourceMappingURL=chunk-HUIKIDM5.js.map
+//# sourceMappingURL=chunk-WUISZ3WU.js.map