@agent-native/core-corpus 0.201.0-nightly-20261005153421 → 0.201.0

package/corpus/templates/content/app/components/editor/DocumentToolbar.tsx

@@ -135,7 +135,6 @@ import {
   contentNavigationBranchFilter,
   useContentActionMutation,
 } from "@/hooks/use-content-action-mutation";
-import { useContentDatabasePersonalView } from "@/hooks/use-content-database";
 import { useCreativeContextLab } from "@/hooks/use-creative-context-lab";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 import {
@@ -151,10 +150,7 @@ import {
 } from "@/hooks/use-notion";
 import { contentAgentPromptValues } from "@/lib/content-agent-prompt";
 import { documentQueryFilter } from "@/lib/document-query";
-import {
-  filesNavigationOrder,
-  filesNavigationPageParams,
-} from "@/lib/files-navigation";
+import { filesNavigationPageParams } from "@/lib/files-navigation";
 import {
   localSourceAbsolutePath,
   revealLinkedLocalSourceFile,
@@ -655,27 +651,15 @@ function useBreadcrumbSiblingPage(
   siblings: ToolbarBreadcrumbSiblings,
   options: { enabled: boolean; cursor?: string },
 ) {
-  const personalView = useContentDatabasePersonalView(
-    siblings.filesDatabaseId,
-    { enabled: options.enabled },
-  );
-  const order = personalView.data
-    ? filesNavigationOrder(personalView.data.overrides)
-    : null;
-  const page = useActionQuery<ContentDatabaseNavigationPageResponse>(
+  return useActionQuery<ContentDatabaseNavigationPageResponse>(
     "query-content-database-items",
-    order
-      ? filesNavigationPageParams({
-          databaseId: siblings.filesDatabaseId,
-          parentId: siblings.parentId,
-          sort: order.order.mode,
-          viewId: order.activeViewId,
-          cursor: options.cursor,
-        })
-      : undefined,
-    { enabled: options.enabled && order !== null },
+    filesNavigationPageParams({
+      databaseId: siblings.filesDatabaseId,
+      parentId: siblings.parentId,
+      cursor: options.cursor,
+    }),
+    { enabled: options.enabled },
   );
-  return { personalView, page };
 }
 
 // Reads the sidebar's cached page for the branch without fetching, so an item
@@ -684,7 +668,7 @@ function useCachedBreadcrumbPeerCount(
   siblings: ToolbarBreadcrumbSiblings,
   documentId: string | undefined,
 ) {
-  const { page } = useBreadcrumbSiblingPage(siblings, { enabled: false });
+  const page = useBreadcrumbSiblingPage(siblings, { enabled: false });
   if (!page.data) return null;
   if (page.data.pagination.hasMore) return Number.POSITIVE_INFINITY;
   const peers = page.data.items.filter((peer) => peer.sourceKind !== "folder");
@@ -711,16 +695,16 @@ function ToolbarBreadcrumbSiblingPage({
 }) {
   const t = useT();
   const [nextPageVisible, setNextPageVisible] = useState(false);
-  const { personalView, page } = useBreadcrumbSiblingPage(siblings, {
+  const page = useBreadcrumbSiblingPage(siblings, {
     enabled: true,
     cursor,
   });
-  if (personalView.isError || page.isError) {
+  if (page.isError) {
     return (
       <DropdownMenuItem
         onSelect={(event) => {
           event.preventDefault();
-          void (personalView.isError ? personalView.refetch() : page.refetch());
+          void page.refetch();
         }}
       >
         {t("database.retry")}

package/corpus/templates/content/app/components/editor/PageDraftRecovery.tsx

@@ -20,7 +20,10 @@ import {
   useUpdatePreviewDocumentDraft,
 } from "@/hooks/use-documents";
 import { isDocumentCreationPending } from "@/lib/optimistic-document";
-import { readPageIconRowHint } from "@/lib/page-icon-row-hint";
+import {
+  readDocumentShapeHint,
+  readPageIconRowHint,
+} from "@/lib/page-startup-hints";
 
 import { documentBodyHydrationIsPending } from "./body-hydration";
 import { saveDocumentWithRebase } from "./document-save-rebase";
@@ -675,6 +678,7 @@ export function PageDraftRecovery({
       <DocumentEditorSkeleton
         title={document.title}
         iconRow={readPageIconRowHint(document.id)}
+        shape={readDocumentShapeHint(document)}
       />
     );
   if (!draft) return withNotice(null);
@@ -685,6 +689,7 @@ export function PageDraftRecovery({
       <DocumentEditorSkeleton
         title={document.title}
         iconRow={readPageIconRowHint(document.id)}
+        shape={readDocumentShapeHint(document)}
       />
     );
   const savedVersion = conflictDocument ?? document;

package/corpus/templates/content/app/components/editor/TableHoverControls.tsx

@@ -165,7 +165,7 @@ function getCellAtAddress(
   return getCells(row)[address.columnIndex] ?? null;
 }
 
-function getSelectionOverlayRect(rects: DOMRect[]) {
+function getSelectionOverlayRect(table: HTMLElement, rects: DOMRect[]) {
   if (rects.length === 0) return null;
 
   const left = Math.min(...rects.map((rect) => rect.left));
@@ -173,12 +173,32 @@ function getSelectionOverlayRect(rects: DOMRect[]) {
   const top = Math.min(...rects.map((rect) => rect.top));
   const bottom = Math.max(...rects.map((rect) => rect.bottom));
 
+  return clampToScrollport(
+    { height: bottom - top, left, top, width: right - left },
+    getTableScrollport(table),
+  );
+}
+
+// Tables scroll sideways inside `.tableWrapper`, but these controls render
+// beside the editor, outside its clipping, so they clip themselves to it.
+function getTableScrollport(table: HTMLElement) {
+  return (table.closest(".tableWrapper") ?? table).getBoundingClientRect();
+}
+
+function clampToScrollport(
+  rect: SelectionOverlayRect,
+  scrollport: DOMRect,
+): SelectionOverlayRect {
+  const clamp = (x: number) =>
+    Math.min(Math.max(x, scrollport.left), scrollport.right);
+  const left = clamp(rect.left);
+
   return {
-    height: bottom - top,
+    height: rect.height,
     left,
-    top,
-    width: right - left,
-  } satisfies SelectionOverlayRect;
+    top: rect.top,
+    width: clamp(rect.left + rect.width) - left,
+  };
 }
 
 function getRowSelectionOverlayRect(
@@ -188,6 +208,7 @@ function getRowSelectionOverlayRect(
   if (!address) return null;
 
   return getSelectionOverlayRect(
+    table,
     getCells(getRows(table)[address.rowIndex]).map((cell) =>
       cell.getBoundingClientRect(),
     ),
@@ -201,6 +222,7 @@ function getColumnSelectionOverlayRect(
   if (!address) return null;
 
   return getSelectionOverlayRect(
+    table,
     getRows(table)
       .map((row) => getCells(row)[address.columnIndex])
       .filter((cell): cell is HTMLElement => Boolean(cell))
@@ -381,6 +403,7 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
   const [columnMenuOpen, setColumnMenuOpen] = useState(false);
   const [rowMenuOpen, setRowMenuOpen] = useState(false);
   const [viewRetry, setViewRetry] = useState(0);
+  const [, setGeometryRevision] = useState(0);
 
   const holdTableUiSelection = () => {
     tableUiPointerDownRef.current = true;
@@ -971,7 +994,19 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
       syncOverlay();
     };
 
-    const handleGeometryChange = () => syncOverlay();
+    const handleGeometryChange = () => {
+      syncOverlay();
+      setGeometryRevision((revision) => revision + 1);
+    };
+    // Page scrolls carry the overlay along with the tables, but a table
+    // scrolled sideways inside its own `.tableWrapper` leaves the overlay behind.
+    const handleScroll = (event: Event) => {
+      if (event.target instanceof Node && view.dom.contains(event.target)) {
+        handleGeometryChange();
+      } else {
+        syncOverlay();
+      }
+    };
     const observer = new MutationObserver(syncOverlay);
 
     syncOverlay();
@@ -982,7 +1017,7 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
     document.addEventListener("click", handlePointerDown, true);
     document.addEventListener("pointermove", handleHoverPointerMove, true);
     window.addEventListener("resize", handleGeometryChange);
-    window.addEventListener("scroll", handleGeometryChange, true);
+    window.addEventListener("scroll", handleScroll, true);
     view.dom.addEventListener("keyup", handleKeyUp);
 
     return () => {
@@ -992,7 +1027,7 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
       document.removeEventListener("click", handlePointerDown, true);
       document.removeEventListener("pointermove", handleHoverPointerMove, true);
       window.removeEventListener("resize", handleGeometryChange);
-      window.removeEventListener("scroll", handleGeometryChange, true);
+      window.removeEventListener("scroll", handleScroll, true);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
       view.dom.removeEventListener("keyup", handleKeyUp);
@@ -1000,6 +1035,18 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
     };
   }, [editor, viewRetry]);
 
+  // Panels opening beside the page narrow the editor without a window resize.
+  useEffect(() => {
+    const view = getMountedEditorView(editor);
+    if (!view || tables.length === 0) return;
+    const observer = new ResizeObserver(() =>
+      setGeometryRevision((revision) => revision + 1),
+    );
+    observer.observe(view.dom);
+    for (const table of tables) observer.observe(table);
+    return () => observer.disconnect();
+  }, [editor, tables]);
+
   const view = getMountedEditorView(editor);
   if (!view) return null;
 
@@ -1020,6 +1067,13 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
       : null);
   const selectedTableRect =
     selectedTable?.getBoundingClientRect() ?? selectedTableRectRef.current;
+  const selectedScrollport = selectedTable
+    ? getTableScrollport(selectedTable)
+    : null;
+  const visibleSelectedRect =
+    selectedRect && selectedScrollport
+      ? clampToScrollport(selectedRect, selectedScrollport)
+      : null;
   const selectedDimensions = selectedTable
     ? getTableDimensions(selectedTable)
     : { rowCount: 0, columnCount: 0 };
@@ -1050,9 +1104,9 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
     typeof window === "undefined"
       ? Number.POSITIVE_INFINITY
       : window.innerHeight;
-  const columnMenuWouldOverflowRight = selectedRect
-    ? selectedRect.left +
-        selectedRect.width / 2 +
+  const columnMenuWouldOverflowRight = visibleSelectedRect
+    ? visibleSelectedRect.left +
+        visibleSelectedRect.width / 2 +
         COLUMN_OPTIONS_MENU_ALIGN_OFFSET +
         COLUMN_OPTIONS_MENU_WIDTH >
       viewportWidth - MENU_COLLISION_PADDING
@@ -1084,9 +1138,12 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
 
   return (
     <>
-      {selectedRect && selectedTable && selectedTableRect ? (
+      {visibleSelectedRect &&
+      selectedScrollport &&
+      selectedTable &&
+      selectedTableRect ? (
         <>
-          {selectedColumnOverlayRect ? (
+          {selectedColumnOverlayRect?.width ? (
             <div
               className="pointer-events-none absolute z-20 rounded-[3px] border-2 border-primary/60 bg-primary/10"
               data-testid="table-selected-column"
@@ -1099,7 +1156,7 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
             />
           ) : null}
 
-          {selectedRowOverlayRect ? (
+          {selectedRowOverlayRect?.width ? (
             <div
               className="pointer-events-none absolute z-20 rounded-[3px] border-2 border-primary/60 bg-primary/10"
               data-testid="table-selected-row"
@@ -1112,22 +1169,27 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
             />
           ) : null}
 
-          <div
-            className="pointer-events-none absolute z-30 rounded-[3px] border-2 border-primary/75 bg-primary/10"
-            data-testid="table-selected-cell"
-            style={{
-              left: selectedRect.left - wrapperRect.left,
-              top: selectedRect.top - wrapperRect.top,
-              width: selectedRect.width,
-              height: selectedRect.height,
-            }}
-          />
+          {visibleSelectedRect.width ? (
+            <div
+              className="pointer-events-none absolute z-30 rounded-[3px] border-2 border-primary/75 bg-primary/10"
+              data-testid="table-selected-cell"
+              style={{
+                left: visibleSelectedRect.left - wrapperRect.left,
+                top: visibleSelectedRect.top - wrapperRect.top,
+                width: visibleSelectedRect.width,
+                height: visibleSelectedRect.height,
+              }}
+            />
+          ) : null}
 
           <DropdownMenu open={columnMenuOpen} onOpenChange={setColumnMenuOpen}>
             <DropdownMenuTrigger asChild>
               <button
                 aria-label={t("database.columnOptions")}
-                className={lineButtonClass}
+                className={cn(
+                  lineButtonClass,
+                  !visibleSelectedRect.width && "invisible",
+                )}
                 data-testid="table-column-options"
                 onClickCapture={(event) => {
                   event.preventDefault();
@@ -1146,9 +1208,9 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
                 }}
                 style={{
                   left:
-                    selectedRect.left -
+                    visibleSelectedRect.left -
                     wrapperRect.left +
-                    selectedRect.width / 2,
+                    visibleSelectedRect.width / 2,
                   top:
                     selectedTableRect.top -
                     wrapperRect.top -
@@ -1290,13 +1352,13 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
                 }}
                 style={{
                   left:
-                    selectedTableRect.left -
+                    Math.max(selectedTableRect.left, selectedScrollport.left) -
                     wrapperRect.left -
                     ROW_OPTIONS_HIT_WIDTH / 2,
                   top:
-                    selectedRect.top -
+                    visibleSelectedRect.top -
                     wrapperRect.top +
-                    selectedRect.height / 2,
+                    visibleSelectedRect.height / 2,
                   height: ROW_OPTIONS_HIT_HEIGHT,
                   transform: "translateY(-50%)",
                   width: ROW_OPTIONS_HIT_WIDTH,
@@ -1416,55 +1478,62 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
 
         const tableId = getTableOverlayId(table);
         const rect = table.getBoundingClientRect();
-        const left = rect.left - wrapperRect.left;
+        const scrollportRect = getTableScrollport(table);
+        const visibleLeft = Math.max(rect.left, scrollportRect.left);
+        const visibleRight = Math.min(rect.right, scrollportRect.right);
+        const isTableEndVisible = rect.right <= visibleRight + 1;
         const top = rect.top - wrapperRect.top;
         const right = rect.right - wrapperRect.left;
         const bottom = rect.bottom - wrapperRect.top;
+        const visibleCenter =
+          (visibleLeft + visibleRight) / 2 - wrapperRect.left;
         const isColumnHandleVisible = hoveredEdges.columnTable === table;
         const isRowHandleVisible = hoveredEdges.rowTable === table;
 
         return (
           <div key={tableId}>
-            <Tooltip delayDuration={EDGE_HANDLE_TOOLTIP_DELAY}>
-              <TooltipTrigger asChild>
-                <button
-                  aria-label={t("database.tableColumnHandle")}
-                  className={cn(
-                    handleClass,
-                    "cursor-col-resize -translate-y-1/2",
-                    isColumnHandleVisible && "opacity-100",
-                  )}
-                  data-table-edge-control
-                  data-table-edge="column"
-                  data-table-id={tableId}
-                  data-testid="table-column-handle"
-                  onPointerDown={(event) =>
-                    startHandlePointer("column", table, event)
-                  }
-                  style={{
-                    height: COLUMN_EDGE_HANDLE_HIT_HEIGHT,
-                    left: right - COLUMN_EDGE_HANDLE_HIT_WIDTH / 2,
-                    top: top + rect.height / 2,
-                    width: COLUMN_EDGE_HANDLE_HIT_WIDTH,
-                  }}
-                  type="button"
-                >
-                  <span
-                    className={edgeHandleMarkerClass}
+            {isTableEndVisible ? (
+              <Tooltip delayDuration={EDGE_HANDLE_TOOLTIP_DELAY}>
+                <TooltipTrigger asChild>
+                  <button
+                    aria-label={t("database.tableColumnHandle")}
+                    className={cn(
+                      handleClass,
+                      "cursor-col-resize -translate-y-1/2",
+                      isColumnHandleVisible && "opacity-100",
+                    )}
+                    data-table-edge-control
+                    data-table-edge="column"
+                    data-table-id={tableId}
+                    data-testid="table-column-handle"
+                    onPointerDown={(event) =>
+                      startHandlePointer("column", table, event)
+                    }
                     style={{
-                      height: EDGE_HANDLE_LENGTH,
-                      width: EDGE_HANDLE_THICKNESS,
+                      height: COLUMN_EDGE_HANDLE_HIT_HEIGHT,
+                      left: right - COLUMN_EDGE_HANDLE_HIT_WIDTH / 2,
+                      top: top + rect.height / 2,
+                      width: COLUMN_EDGE_HANDLE_HIT_WIDTH,
                     }}
-                  />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <strong>{t("database.click")}</strong>{" "}
-                {t("database.toAddAColumn")}{" "}
-                <strong>{t("database.drag")}</strong>{" "}
-                {t("database.toAddOrRemoveColumns")}
-              </TooltipContent>
-            </Tooltip>
+                    type="button"
+                  >
+                    <span
+                      className={edgeHandleMarkerClass}
+                      style={{
+                        height: EDGE_HANDLE_LENGTH,
+                        width: EDGE_HANDLE_THICKNESS,
+                      }}
+                    />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <strong>{t("database.click")}</strong>{" "}
+                  {t("database.toAddAColumn")}{" "}
+                  <strong>{t("database.drag")}</strong>{" "}
+                  {t("database.toAddOrRemoveColumns")}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
 
             <Tooltip delayDuration={EDGE_HANDLE_TOOLTIP_DELAY}>
               <TooltipTrigger asChild>
@@ -1484,7 +1553,7 @@ export function TableHoverControls({ editor }: TableHoverControlsProps) {
                   }
                   style={{
                     height: ROW_EDGE_HANDLE_HIT_HEIGHT,
-                    left: left + rect.width / 2,
+                    left: visibleCenter,
                     top: bottom - ROW_EDGE_HANDLE_HIT_HEIGHT / 2,
                     width: ROW_EDGE_HANDLE_HIT_WIDTH,
                   }}

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -165,6 +165,8 @@ import {
   resolveSuggestionPresentationRange,
   type SuggestionPresentationTransition,
 } from "./suggestions/presentation-rebase";
+import { SuggestingReadOnlyBlocks } from "./suggestions/read-only-blocks";
+import { ContentTableView } from "./table-view";
 import { TableHoverControls } from "./TableHoverControls";
 
 function compareDocumentBodyRevisions(
@@ -364,7 +366,11 @@ function dispatchLiteralPaste(view: EditorView, slice: Slice): void {
     .setMeta("paste", true)
     .setMeta("uiEvent", "paste");
   const expected = insertion.doc;
+  const before = view.state.doc;
   view.dispatch(insertion);
+  // A filter refused the paste (for example into a block that is read-only
+  // while suggesting); retrying it as a raw range would insert it anyway.
+  if (view.state.doc === before) return;
 
   if (!view.state.doc.eq(expected)) {
     view.dispatch(
@@ -1967,6 +1973,7 @@ interface VisualEditorExtensionOptions {
   onImageComment?: (quotedText: string, offsetTop: number) => void;
   onImageFilePickerRequest?: (request: PendingImagePicker) => void;
   canMutateMedia?: () => boolean;
+  isSuggesting?: () => boolean;
   onJoinTitle?: (text: string) => void;
   onOpenNotionPageLink?: (documentId: string) => void;
   localFilePath?: string | null;
@@ -2566,6 +2573,7 @@ export function createVisualEditorExtensions({
   onImageComment,
   onImageFilePickerRequest,
   canMutateMedia,
+  isSuggesting,
   onJoinTitle,
   onOpenNotionPageLink,
   localFilePath,
@@ -2638,6 +2646,7 @@ export function createVisualEditorExtensions({
       MediaSourceCommit.configure({ onMediaSourceCommitted }),
       CustomTable.configure({
         resizable: true,
+        View: ContentTableView,
         HTMLAttributes: { class: "notion-table" },
       }),
       TableRow,
@@ -2645,6 +2654,9 @@ export function createVisualEditorExtensions({
       NotionTableCell,
       NormalizeTableHeaders,
       NormalizeTableAlignment,
+      ...(isSuggesting
+        ? [SuggestingReadOnlyBlocks.configure({ isSuggesting })]
+        : []),
       ...createNotionEditorExtensions({
         documentId,
         onOpenPageLink: onOpenNotionPageLink,
@@ -3165,6 +3177,7 @@ export function VisualEditor({
     }
   }, [documentId, fileStorageConfigured]);
   const canMutateMedia = useCallback(() => !suggestingRef.current, []);
+  const isSuggesting = useCallback(() => suggestingRef.current, []);
   const isVisualEditorFocused = useCallback((editor: CoreEditor) => {
     if (editor.isFocused) return true;
     const activeElement = editor.view.dom.ownerDocument.activeElement;
@@ -3210,6 +3223,7 @@ export function VisualEditor({
         onImageComment: onComment,
         onImageFilePickerRequest,
         canMutateMedia,
+        isSuggesting,
         onJoinTitle,
         onOpenNotionPageLink,
         localFilePath,
@@ -3252,6 +3266,7 @@ export function VisualEditor({
       onComment,
       onImageFilePickerRequest,
       canMutateMedia,
+      isSuggesting,
       onJoinTitle,
       onOpenNotionPageLink,
       localFilePath,
@@ -4525,7 +4540,7 @@ export function VisualEditor({
         />
       ) : null}
       <LinkHoverPreview editor={editor} editable={editable} />
-      {editable ? <TableHoverControls editor={editor} /> : null}
+      {editable && !suggesting ? <TableHoverControls editor={editor} /> : null}
       {editable && isDraggingMedia ? (
         <div className="media-drop-overlay">
           <div className="media-drop-overlay__content">