@marimo-team/islands 0.23.2-dev3 → 0.23.2-dev30

package/src/components/data-table/pagination.tsx

@@ -2,7 +2,7 @@
 "use no memo";
 
 import type { Table } from "@tanstack/react-table";
-import { range } from "lodash-es";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,9 +37,6 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { PluralWord } from "@/utils/pluralize";
-import type { PageRange } from "./types";
-
-const MAX_PAGES_BEFORE_CLAMPING = 100;
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -189,6 +186,81 @@ export const DataTablePagination = <TData,>({
   );
 };
 
+const PAGE_ITEM_HEIGHT = 32;
+
+/**
+ * Compute contiguous ranges of page numbers whose string starts with `prefix`,
+ * without scanning every page. O(log10(totalPages)).
+ *
+ * For prefix "5", totalPages=500: [[5,5], [50,59], [500,500]]
+ */
+export function matchingPageRanges(
+  prefix: string,
+  totalPages: number,
+): [number, number][] {
+  const n = Number.parseInt(prefix, 10);
+  if (Number.isNaN(n) || n <= 0 || String(n) !== prefix) {
+    return [];
+  }
+
+  const ranges: [number, number][] = [];
+  let power = 1;
+  while (n * power <= totalPages) {
+    const start = n * power;
+    const end = Math.min((n + 1) * power - 1, totalPages);
+    ranges.push([start, end]);
+    power *= 10;
+  }
+  return ranges;
+}
+
+interface PageMapping {
+  count: number;
+  pageAtIndex: (index: number) => number;
+  indexOfPage: (page: number) => number;
+}
+
+function createPageMapping(search: string, totalPages: number): PageMapping {
+  if (search === "") {
+    return {
+      count: totalPages,
+      pageAtIndex: (i) => i + 1,
+      indexOfPage: (p) => p - 1,
+    };
+  }
+
+  const ranges = matchingPageRanges(search, totalPages);
+  let count = 0;
+  for (const [s, e] of ranges) {
+    count += e - s + 1;
+  }
+
+  return {
+    count,
+    pageAtIndex: (i) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        const size = end - start + 1;
+        if (i < offset + size) {
+          return start + (i - offset);
+        }
+        offset += size;
+      }
+      return -1;
+    },
+    indexOfPage: (p) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        if (p >= start && p <= end) {
+          return offset + (p - start);
+        }
+        offset += end - start + 1;
+      }
+      return -1;
+    },
+  };
+}
+
 export const PageSelector = ({
   currentPage,
   totalPages,
@@ -199,19 +271,31 @@ export const PageSelector = ({
   onPageChange: (page: number) => void;
 }) => {
   const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
 
-  const pageRanges = React.useMemo(
-    () => getPageRanges(currentPage, totalPages),
-    [currentPage, totalPages],
+  const mapping = React.useMemo(
+    () => createPageMapping(search, totalPages),
+    [search, totalPages],
   );
 
   const handleSelect = (page: number) => {
     onPageChange(page - 1);
+    setSearch("");
     setOpen(false);
   };
 
+  const listHeight = Math.min(mapping.count * PAGE_ITEM_HEIGHT, 240);
+
   return (
-    <Popover open={totalPages > 1 ? open : false} onOpenChange={setOpen}>
+    <Popover
+      open={totalPages > 1 ? open : false}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setSearch("");
+        }
+      }}
+    >
       <PopoverTrigger asChild={true} disabled={totalPages <= 1}>
         <button
           type="button"
@@ -229,18 +313,15 @@ export const PageSelector = ({
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-36 p-0" align="center" sideOffset={6}>
-        <Command
-          shouldFilter={true}
-          filter={(value, search) => {
-            return value.startsWith(search) ? 1 : 0;
-          }}
-        >
+        <Command shouldFilter={false} value={String(currentPage)}>
           <CommandInput
             placeholder={`Page (1–${totalPages})`}
             rootClassName="px-2 h-8"
             className="text-xs h-8"
             autoFocus={true}
             icon={null}
+            value={search}
+            onValueChange={setSearch}
             onKeyDown={(e) => {
               // Allow navigation/editing keys, block non-numeric input
               const allowed = [
@@ -248,6 +329,8 @@ export const PageSelector = ({
                 "Delete",
                 "ArrowLeft",
                 "ArrowRight",
+                "ArrowUp",
+                "ArrowDown",
                 "Tab",
                 "Enter",
                 "Escape",
@@ -257,27 +340,19 @@ export const PageSelector = ({
               }
             }}
           />
-          <CommandList className="max-h-60">
-            {pageRanges.map((item) =>
-              item.type === "ellipsis" ? null : (
-                <CommandItem
-                  key={item.page}
-                  value={String(item.page)}
-                  data-testid="page-option"
-                  className={cn(
-                    "text-xs cursor-pointer",
-                    item.page === currentPage && "font-semibold bg-accent",
-                  )}
-                  onSelect={() => handleSelect(item.page)}
-                  onMouseDown={Events.preventFocus}
-                >
-                  {item.page}
-                </CommandItem>
-              ),
+          <CommandList className="max-h-60 overflow-hidden">
+            {mapping.count === 0 ? (
+              <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
+                No matching page
+              </CommandEmpty>
+            ) : (
+              <VirtualizedPageList
+                mapping={mapping}
+                currentPage={currentPage}
+                listHeight={listHeight}
+                onSelect={handleSelect}
+              />
             )}
-            <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
-              No matching page
-            </CommandEmpty>
           </CommandList>
         </Command>
       </PopoverContent>
@@ -285,57 +360,95 @@ export const PageSelector = ({
   );
 };
 
-export function getPageRanges(
-  currentPage: number,
-  totalPages: number,
-): PageRange[] {
-  if (totalPages <= MAX_PAGES_BEFORE_CLAMPING) {
-    return range(totalPages).map((i) => ({ type: "page", page: i + 1 }));
-  }
-
-  const middle = Math.floor(totalPages / 2);
-
-  const items: PageRange[] = [];
-  const addPages = (start: number, count: number) => {
-    for (let i = 0; i < count; i++) {
-      items.push({ type: "page", page: start + i });
-    }
-  };
-
-  addPages(1, 10);
-  items.push({ type: "ellipsis", key: "e1" });
-
-  if (currentPage > 10 && currentPage <= middle - 5) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e1b" },
-    );
-  }
+const VirtualizedPageList = ({
+  mapping,
+  currentPage,
+  listHeight,
+  onSelect,
+}: {
+  mapping: PageMapping;
+  currentPage: number;
+  listHeight: number;
+  onSelect: (page: number) => void;
+}) => {
+  const parentRef = React.useRef<HTMLDivElement>(null);
 
-  addPages(middle - 4, 10);
-  items.push({ type: "ellipsis", key: "e2" });
+  const currentIndex = mapping.indexOfPage(currentPage);
 
-  if (currentPage > middle + 5 && currentPage <= totalPages - 10) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e2b" },
-    );
-  }
+  const virtualizer = useVirtualizer({
+    count: mapping.count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => PAGE_ITEM_HEIGHT,
+    overscan: 10,
+    initialOffset:
+      currentIndex > 0
+        ? Math.max(0, currentIndex * PAGE_ITEM_HEIGHT - listHeight / 2)
+        : 0,
+  });
 
-  addPages(totalPages - 9, 10);
+  // Scroll to top when filtered results change (user is searching)
+  const prevCount = React.useRef(mapping.count);
+  React.useEffect(() => {
+    if (mapping.count !== prevCount.current) {
+      virtualizer.scrollToIndex(0);
+      prevCount.current = mapping.count;
+    }
+  }, [mapping.count, virtualizer]);
 
-  return items;
-}
+  return (
+    <div ref={parentRef} style={{ height: listHeight, overflow: "auto" }}>
+      <div
+        style={{
+          height: virtualizer.getTotalSize(),
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const page = mapping.pageAtIndex(virtualItem.index);
+          return (
+            <CommandItem
+              key={page}
+              value={String(page)}
+              data-testid="page-option"
+              aria-selected={page === currentPage}
+              className={cn(
+                "text-xs cursor-pointer",
+                page === currentPage && "font-semibold bg-accent",
+              )}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: virtualItem.size,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+              onSelect={() => onSelect(page)}
+              onMouseDown={Events.preventFocus}
+            >
+              {page}
+            </CommandItem>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 export function prettifyRowCount(rowCount: number, locale: string): string {
   return `${prettyNumber(rowCount, locale)} ${new PluralWord("row").pluralize(rowCount)}`;
 }
 
-export const prettifyRowColumnCount = (
-  numRows: number | "too_many",
-  totalColumns: number,
-  locale: string,
-): string => {
+export const prettifyRowColumnCount = ({
+  numRows,
+  totalColumns,
+  locale,
+}: {
+  numRows: number | "too_many";
+  totalColumns: number;
+  locale: string;
+}): string => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
   const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;

package/src/components/data-table/types.ts

@@ -105,7 +105,3 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }
-
-export type PageRange =
-  | { type: "page"; page: number }
-  | { type: "ellipsis"; key: string };

package/src/components/editor/Output.tsx

@@ -263,7 +263,7 @@ const MimeBundleOutputRenderer: React.FC<{
   const { mode } = useAtomValue(viewStateAtom);
   const appView = mode === "present" || mode === "read";
 
-  // Extract metadata if present (e.g., for retina image rendering)
+  // Extract metadata if present (e.g., to maintain a constant display size regardless of DPI/PPI)
   const metadata = mimebundle[METADATA_KEY];
 
   // Filter out metadata from the mime entries and type narrow

package/src/components/editor/actions/useNotebookActions.tsx

@@ -381,6 +381,18 @@ export function useNotebookActions() {
             });
           },
         },
+        {
+          icon: <MarimoPlusIcon size={14} strokeWidth={1.5} />,
+          label: "Create molab notebook",
+          handle: async () => {
+            const code = await readCode();
+            const url = createShareableLink({
+              code: code.contents,
+              baseUrl: `${Constants.molab}/new`,
+            });
+            window.open(url, "_blank");
+          },
+        },
       ],
     },
 

package/src/components/editor/cell/code/cell-editor.tsx

@@ -270,6 +270,7 @@ const CellEditorInternal = ({
     userConfig.language_servers,
     userConfig.display,
     userConfig.diagnostics,
+    userConfig.ai?.inline_tooltip,
     aiEnabled,
     theme,
     showPlaceholder,

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -305,4 +305,46 @@ describe("applyTransactionChanges edge cases", () => {
       "
     `);
   });
+
+  it("set-code updates the mounted editor view's document", () => {
+    // Existing tests only check cellData.code — this covers the editor
+    // view side, so regressions in the reducer's imperative sync (or in
+    // the CellEditor useEffect that backs it up) don't go unnoticed.
+    setup('x = "BEFORE"');
+    const [a] = state.cellIds.inOrderIds;
+    const editorView = state.cellHandles[a].current?.editorViewOrNull;
+    expect(editorView?.state.doc.toString()).toBe('x = "BEFORE"');
+
+    apply([{ type: "set-code", cellId: a, code: 'x = "AFTER"' }]);
+
+    expect(state.cellData[a].code).toBe('x = "AFTER"');
+    expect(editorView?.state.doc.toString()).toBe('x = "AFTER"');
+  });
+
+  it("create-cell then set-code on same cell updates editor", () => {
+    // Mirrors the code_mode flow that exposed marimo-pair#27: create_cell
+    // in one batch, edit_cell in a second batch, each arriving as a
+    // separate transaction.
+    setup();
+    apply([
+      {
+        type: "create-cell",
+        cellId: cellId("repro"),
+        code: 'x = "BEFORE"',
+        name: "repro_bug",
+        config: {},
+      },
+    ]);
+    const editorView =
+      state.cellHandles[cellId("repro")].current?.editorViewOrNull;
+    expect(editorView?.state.doc.toString()).toBe('x = "BEFORE"');
+
+    apply([
+      { type: "set-code", cellId: cellId("repro"), code: 'x = "AFTER"' },
+      { type: "reorder-cells", cellIds: [cellId("repro")] },
+    ]);
+
+    expect(state.cellData[cellId("repro")].code).toBe('x = "AFTER"');
+    expect(editorView?.state.doc.toString()).toBe('x = "AFTER"');
+  });
 });

package/src/core/cells/__tests__/logs.test.ts

@@ -5,6 +5,11 @@ import { cellId } from "@/__tests__/branded";
 import type { CellMessage } from "../../kernel/messages";
 import { formatLogTimestamp, getCellLogsForMessage } from "../logs";
 
+// Stable mock reference so every (re)import of use-toast sees the same spy,
+// even after vi.resetModules() clears the module cache between tests.
+const { toastMock } = vi.hoisted(() => ({ toastMock: vi.fn() }));
+vi.mock("@/components/ui/use-toast", () => ({ toast: toastMock }));
+
 describe("getCellLogsForMessage", () => {
   beforeEach(() => {
     // Mock console.log to avoid cluttering test output
@@ -324,6 +329,102 @@ describe("getCellLogsForMessage", () => {
   });
 });
 
+describe("getCellLogsForMessage - internal error toast", () => {
+  // Re-imported per test after vi.resetModules() so the module-level
+  // `didAlreadyToastError` flag starts fresh and all jotai atom references
+  // (initialModeAtom, etc.) match the versions used by the reset logs.ts.
+  let getLogs: typeof import("../logs").getCellLogsForMessage;
+  let store: typeof import("@/core/state/jotai").store;
+  let initialModeAtom: typeof import("@/core/mode").initialModeAtom;
+
+  beforeEach(async () => {
+    vi.spyOn(console, "log").mockImplementation(() => {
+      // no-op
+    });
+    vi.resetModules();
+    ({ getCellLogsForMessage: getLogs } = await import("../logs"));
+    ({ store } = await import("@/core/state/jotai"));
+    ({ initialModeAtom } = await import("@/core/mode"));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
+
+  const makeErrorCellMessage = (id: CellMessage["cell_id"]): CellMessage => ({
+    cell_id: id,
+    console: [],
+    output: {
+      mimetype: "application/vnd.marimo+error",
+      data: [
+        {
+          type: "exception",
+          exception_type: "ValueError",
+          msg: "something exploded",
+          traceback: ["File foo.py, line 1", "ValueError: something exploded"],
+        },
+      ],
+      channel: "marimo-error",
+      timestamp: 0,
+    } as unknown as CellMessage["output"],
+    status: "idle",
+    stale_inputs: null,
+    timestamp: 0,
+  });
+
+  test("shows toast for internal errors in app (read) mode", () => {
+    store.set(initialModeAtom, "read");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-1")));
+
+    expect(toastMock).toHaveBeenCalledTimes(1);
+    expect(toastMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "An internal error occurred",
+        variant: "danger",
+      }),
+    );
+  });
+
+  test("does not show toast for internal errors in edit mode", () => {
+    store.set(initialModeAtom, "edit");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-2")));
+
+    expect(toastMock).not.toHaveBeenCalled();
+  });
+
+  test("edit-mode errors do not consume the once-per-session toast slot", () => {
+    // Errors received while in edit mode should be silently skipped...
+    store.set(initialModeAtom, "edit");
+    getLogs(makeErrorCellMessage(cellId("cell-err-3")));
+    expect(toastMock).not.toHaveBeenCalled();
+
+    // ...and a subsequent error in app mode should still toast.
+    store.set(initialModeAtom, "read");
+    getLogs(makeErrorCellMessage(cellId("cell-err-4")));
+    expect(toastMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("toast only fires once across multiple app-mode errors", () => {
+    store.set(initialModeAtom, "read");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-5")));
+    getLogs(makeErrorCellMessage(cellId("cell-err-6")));
+
+    expect(toastMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("suppresses toast when initial mode has not been set", () => {
+    // Leave initialModeAtom at its default (undefined); getInitialAppMode
+    // will throw and the logic should swallow it without toasting.
+    getLogs(makeErrorCellMessage(cellId("cell-err-7")));
+
+    expect(toastMock).not.toHaveBeenCalled();
+  });
+});
+
 describe("formatLogTimestamp", () => {
   test("formats unix timestamp correctly", () => {
     // January 1, 2024, 12:00:00 PM UTC

package/src/core/cells/logs.ts

@@ -7,6 +7,7 @@ import { Strings } from "@/utils/strings";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellId } from "./ids";
+import { initialModeAtom } from "../mode";
 import { store } from "../state/jotai";
 import { tracebackModalAtom } from "../errors/traceback-atom";
 import React from "react";
@@ -83,7 +84,14 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
         error.type === "internal",
     );
 
-    if (exceptionErrors.length > 0 && !didAlreadyToastError) {
+    // Only show the toast in app mode: edit mode already surfaces errors in
+    // the cell UI, so toasting there would be noisy and duplicative. Read the
+    // atom directly so an unset initial mode (e.g. in tests/islands) simply
+    // returns undefined instead of throwing and masking real errors.
+    const isAppMode = store.get(initialModeAtom) === "read";
+
+    // Only show toast once, and only in app mode
+    if (exceptionErrors.length > 0 && !didAlreadyToastError && isAppMode) {
       didAlreadyToastError = true;
 
       // Find first error with a traceback

package/src/core/codemirror/__tests__/__snapshots__/setup.test.ts.snap

@@ -9,9 +9,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
@@ -27,9 +25,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
@@ -118,15 +114,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
-      "run": "cursorLineDown",
-      "shift": "selectLineDown",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "ArrowUp": [
@@ -136,15 +129,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
-      "run": "cursorLineUp",
-      "shift": "selectLineUp",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "Backspace": [

package/src/core/codemirror/cells/extensions.ts

@@ -169,8 +169,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowUp",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);
@@ -188,8 +186,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowDown",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);