@marimo-team/islands 0.21.2-dev9 → 0.21.2-dev90

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

@@ -11,7 +11,8 @@ import {
   type Table,
   type Table as TanStackTable,
 } from "@tanstack/react-table";
-import { type JSX, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import {
   TableBody,
@@ -27,6 +28,7 @@ import { DataTableContextMenu } from "./context-menu";
 import { CellRangeSelectionIndicator } from "./range-focus/cell-selection-indicator";
 import { useCellRangeSelection } from "./range-focus/use-cell-range-selection";
 import { useScrollIntoViewOnFocus } from "./range-focus/use-scroll-into-view";
+import { TABLE_ROW_HEIGHT_PX } from "./types";
 import { stringifyUnknownValue } from "./utils";
 
 export function renderTableHeader<TData>(
@@ -79,6 +81,7 @@ interface DataTableBodyProps<TData> {
   rowViewerPanelOpen: boolean;
   getRowIndex?: (row: TData, idx: number) => number;
   viewedRowIdx?: number;
+  virtualize?: boolean;
 }
 
 export const DataTableBody = <TData,>({
@@ -87,9 +90,30 @@ export const DataTableBody = <TData,>({
   rowViewerPanelOpen,
   getRowIndex,
   viewedRowIdx,
+  virtualize = false,
 }: DataTableBodyProps<TData>) => {
-  // Automatically scroll focused cells into view
+  const rows = table.getRowModel().rows;
+
+  // Find the scroll container (tbody -> table -> overflow-auto wrapper div).
+  // Using useState so that when the element becomes available after mount,
+  // useVirtualizer re-observes the correct element.
+  const [scrollElement, setScrollElement] = useState<HTMLElement | null>(null);
   const tableRef = useRef<HTMLTableSectionElement>(null);
+  useLayoutEffect(() => {
+    // tbody.parentElement = table, table.parentElement = overflow wrapper
+    setScrollElement(tableRef.current?.parentElement?.parentElement ?? null);
+  }, []);
+
+  // Always call useVirtualizer (rules of hooks); count=0 when not virtualizing
+  const virtualizer = useVirtualizer({
+    count: virtualize ? rows.length : 0,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => TABLE_ROW_HEIGHT_PX,
+    overscan: 10,
+  });
+
+  // Automatically scroll focused cells into view.
+  // In virtual mode, off-screen cells won't be in the DOM so this silently no-ops for them.
   useScrollIntoViewOnFocus(tableRef);
 
   const {
@@ -172,57 +196,90 @@ export const DataTableBody = <TData,>({
 
   const hoverTemplate = table.getState().cellHoverTemplate || null;
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {table.getRowModel().rows?.length ? (
-        table.getRowModel().rows.map((row) => {
-          // Only find the row index if the row viewer panel is open
-          const rowIndex = rowViewerPanelOpen
-            ? (getRowIndex?.(row.original, row.index) ?? row.index)
-            : undefined;
-          const isRowViewedInPanel =
-            rowViewerPanelOpen && viewedRowIdx === rowIndex;
+  const renderRow = (row: Row<TData>) => {
+    // Only find the row index if the row viewer panel is open
+    const rowIndex = rowViewerPanelOpen
+      ? (getRowIndex?.(row.original, row.index) ?? row.index)
+      : undefined;
+    const isRowViewedInPanel = rowViewerPanelOpen && viewedRowIdx === rowIndex;
+
+    // Compute hover title once per row using all visible cells
+    let rowTitle: string | undefined;
+    if (hoverTemplate) {
+      const visibleCells = row.getVisibleCells?.() ?? [
+        ...row.getLeftVisibleCells(),
+        ...row.getCenterVisibleCells(),
+        ...row.getRightVisibleCells(),
+      ];
+      rowTitle = applyHoverTemplate(hoverTemplate, visibleCells);
+    }
 
-          // Compute hover title once per row using all visible cells
-          let rowTitle: string | undefined;
-          if (hoverTemplate) {
-            const visibleCells = row.getVisibleCells?.() ?? [
-              ...row.getLeftVisibleCells(),
-              ...row.getCenterVisibleCells(),
-              ...row.getRightVisibleCells(),
-            ];
-            rowTitle = hoverTemplate
-              ? applyHoverTemplate(hoverTemplate, visibleCells)
-              : undefined;
-          }
+    return (
+      <TableRow
+        key={row.id}
+        data-state={row.getIsSelected() && "selected"}
+        title={rowTitle}
+        // These classes ensure that empty rows (nulls) still render
+        className={cn(
+          "border-t h-6",
+          rowViewerPanelOpen && "cursor-pointer",
+          isRowViewedInPanel &&
+            "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)",
+        )}
+        onClick={() => handleRowClick(row)}
+      >
+        {renderCells(row.getLeftVisibleCells())}
+        {renderCells(row.getCenterVisibleCells())}
+        {renderCells(row.getRightVisibleCells())}
+      </TableRow>
+    );
+  };
 
-          return (
-            <TableRow
-              key={row.id}
-              data-state={row.getIsSelected() && "selected"}
-              title={rowTitle}
-              // These classes ensure that empty rows (nulls) still render
-              className={cn(
-                "border-t h-6",
-                rowViewerPanelOpen && "cursor-pointer",
-                isRowViewedInPanel &&
-                  "bg-(--blue-3) hover:bg-(--blue-3) data-[state=selected]:bg-(--blue-4)",
-              )}
-              onClick={() => handleRowClick(row)}
-            >
-              {renderCells(row.getLeftVisibleCells())}
-              {renderCells(row.getCenterVisibleCells())}
-              {renderCells(row.getRightVisibleCells())}
-            </TableRow>
-          );
-        })
-      ) : (
+  const renderRows = () => {
+    if (rows.length === 0) {
+      return (
         <TableRow>
           <TableCell colSpan={columns.length} className="h-24 text-center">
             No results.
           </TableCell>
         </TableRow>
-      )}
+      );
+    }
+
+    if (virtualize) {
+      const virtualItems = virtualizer.getVirtualItems();
+      const totalSize = virtualizer.getTotalSize();
+      return (
+        <>
+          {virtualItems[0]?.start > 0 && (
+            <tr
+              data-virtual-spacer=""
+              style={{ height: virtualItems[0].start }}
+            >
+              <td colSpan={columns.length} />
+            </tr>
+          )}
+          {virtualItems.map((vItem) => renderRow(rows[vItem.index]))}
+          {virtualItems.length > 0 && (
+            <tr
+              data-virtual-spacer=""
+              style={{
+                height: totalSize - (virtualItems.at(-1)?.end ?? totalSize),
+              }}
+            >
+              <td colSpan={columns.length} />
+            </tr>
+          )}
+        </>
+      );
+    }
+
+    return rows.map((row) => renderRow(row));
+  };
+
+  const tableBody = (
+    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
+      {renderRows()}
     </TableBody>
   );
 

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

@@ -1,8 +1,29 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
 import { Objects } from "@/utils/objects";
 
+declare module "@tanstack/react-table" {
+  interface TableMeta<TData extends RowData> {
+    rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+  }
+}
+
+// Pixel heights derived from Tailwind classes applied to table elements.
+// row: h-6 = 24px (TableRow in renderers.tsx)
+// header: min-h-10 = 40px (TableHead in renderers.tsx)
+export const TABLE_ROW_HEIGHT_PX = 24;
+export const TABLE_HEADER_HEIGHT_PX = 40;
+
+// Default number of visible rows when virtualizing without an explicit maxHeight.
+export const DEFAULT_VIRTUAL_ROWS = 15;
+
+// Minimum row count before virtualization kicks in. Below this threshold the
+// DOM overhead is negligible and the virtualizer's measurement cost isn't
+// worth it. Must be greater than DEFAULT_VIRTUAL_ROWS.
+export const MIN_ROWS_TO_VIRTUALIZE = 100;
+
 export type ColumnName = string;
 
 export const ColumnHeaderStatsKeys = [

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

@@ -1,8 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
+import { getMimeValues } from "./mime-cell";
 import { INDEX_COLUMN_NAME } from "./types";
 
 /**
@@ -32,6 +34,21 @@ export async function loadTableData<T = object>(
   return tableData;
 }
 
+/**
+ * Load both table and raw table data. Raw table data is typically when
+ * there is formatting applied to the table data.
+ */
+export async function loadTableAndRawData<T>(
+  tableData: TableData<T>,
+  rawTableData?: TableData<T> | null,
+): Promise<[T[], T[] | undefined]> {
+  if (rawTableData) {
+    return Promise.all([loadTableData(tableData), loadTableData(rawTableData)]);
+  }
+
+  return [await loadTableData(tableData), undefined];
+}
+
 /**
  * Get the stable row ID for a row.
  *
@@ -87,3 +104,73 @@ export function stringifyUnknownValue(opts: {
   }
   return String(value);
 }
+
+function stripHtml(html: string): string {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const text = (div.textContent || div.innerText || "").trim();
+  return text || html;
+}
+
+const HTML_MIMETYPES = new Set(["text/html", "text/markdown"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * Get clipboard-ready text and optional HTML for a cell.
+ *
+ * @param rawValue - The raw (unformatted) value, or undefined if not available.
+ * @param displayedValue - The displayed value (may be a mime bundle).
+ */
+export function getClipboardContent(
+  rawValue: unknown,
+  displayedValue: unknown,
+): { text: string; html?: string } {
+  const mimeValues =
+    typeof displayedValue === "object" && displayedValue !== null
+      ? getMimeValues(displayedValue)
+      : undefined;
+
+  let html: string | undefined;
+  if (mimeValues) {
+    // text/markdown from mo.md() contains rendered HTML
+    const htmlParts = mimeValues
+      .filter((v) => HTML_MIMETYPES.has(v.mimetype))
+      .map((v) => v.data);
+    html = htmlParts.length > 0 ? htmlParts.join("") : undefined;
+  }
+
+  let text: string;
+  if (rawValue !== undefined && rawValue !== displayedValue) {
+    text = stringifyUnknownValue({ value: rawValue });
+  } else if (mimeValues) {
+    text = mimeValues
+      .map((v) => (HTML_MIMETYPES.has(v.mimetype) ? stripHtml(v.data) : v.data))
+      .join(", ");
+  } else {
+    text = stringifyUnknownValue({ value: displayedValue });
+  }
+
+  return { text, html };
+}
+
+/**
+ * Get the raw (unformatted) value for a row/column from the table,
+ * or undefined if raw data is not available.
+ */
+export function getRawValue<TData>(
+  table: Table<TData>,
+  rowIndex: number,
+  columnId: string,
+): unknown {
+  const rawData = table.options.meta?.rawData;
+  if (rawData) {
+    const rawRow = rawData[rowIndex];
+    if (isRecord(rawRow)) {
+      return rawRow[columnId];
+    }
+  }
+  return undefined;
+}

package/src/components/datasources/datasources.tsx

@@ -28,6 +28,7 @@ import {
   INTERNAL_SQL_ENGINES,
 } from "@/core/datasets/engines";
 import {
+  PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
 } from "@/core/datasets/request-registry";
@@ -80,6 +81,7 @@ const INDENT = {
   database: "pl-4",
   schemaEmpty: "pl-8",
   schema: "pl-7",
+  schemaLoading: "pl-8",
   tableLoading: "pl-11",
   tableSchemaless: "pl-8",
   tableWithSchema: "pl-12",
@@ -369,6 +371,49 @@ const SchemaList: React.FC<{
   hasSearch,
   searchValue,
 }) => {
+  const { addSchemaList } = useDataSourceActions();
+  const [schemasRequested, setSchemasRequested] = React.useState(false);
+
+  // Custom loading state, we need to wait for the data to propagate once requested
+  // useAsyncData's loading state may return false before data has propagated
+  const [schemasLoading, setSchemasLoading] = React.useState(false);
+
+  const { isPending, error } = useAsyncData(async () => {
+    if (schemas.length === 0 && engineName && !schemasRequested) {
+      setSchemasRequested(true);
+      setSchemasLoading(true);
+      try {
+        const previewSchemaList = await PreviewSQLSchemaList.request({
+          engine: engineName,
+          database: databaseName,
+        });
+
+        addSchemaList({
+          schemas: previewSchemaList.schemas ?? [],
+          sqlSchemaContext: {
+            engine: engineName,
+            database: databaseName,
+          },
+        });
+      } finally {
+        setSchemasLoading(false);
+      }
+    }
+  }, [schemas.length, engineName, databaseName, schemasRequested]);
+
+  if (isPending || schemasLoading) {
+    return (
+      <LoadingState
+        message="Loading schemas..."
+        className={INDENT.schemaLoading}
+      />
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} className={INDENT.schemaLoading} />;
+  }
+
   if (schemas.length === 0) {
     return (
       <EmptyState

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -5,9 +5,9 @@ import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { createCellRuntimeState } from "@/core/cells/types";
 import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
@@ -39,7 +39,7 @@ describe("Cell data attributes", () => {
     "present",
   ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
     const { store, wrapper } = createTestWrapper();
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const cellName = "test_cell";
 
     const userConfig: UserConfig = {
@@ -83,7 +83,7 @@ describe("Cell data attributes", () => {
 
     const notebook = MockNotebook.notebookState({
       cellData: {
-        [cellId]: {
+        [cid]: {
           code: "",
           name: cellName,
           edited: false,
@@ -97,7 +97,7 @@ describe("Cell data attributes", () => {
       },
     });
 
-    notebook.cellRuntime[cellId] = createCellRuntimeState({
+    notebook.cellRuntime[cid] = createCellRuntimeState({
       status: "idle",
       output: null,
       consoleOutputs: [],
@@ -117,7 +117,7 @@ describe("Cell data attributes", () => {
     const { container } = render(
       <TooltipProvider>
         <Cell
-          cellId={cellId}
+          cellId={cid}
           mode={mode as AppMode}
           canDelete={true}
           userConfig={userConfig}
@@ -131,7 +131,7 @@ describe("Cell data attributes", () => {
       { wrapper },
     );
 
-    const cellElement = container.querySelector(`[data-cell-id="${cellId}"]`);
+    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
     expect(cellElement).toBeTruthy();
     expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
   });
@@ -139,7 +139,7 @@ describe("Cell data attributes", () => {
 
 describe("Output data attributes", () => {
   it("should render output with data-cell-role", () => {
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const output: OutputMessage = {
       channel: "output",
       mimetype: "text/plain",
@@ -151,7 +151,7 @@ describe("Output data attributes", () => {
       <TooltipProvider>
         <OutputArea
           output={output}
-          cellId={cellId}
+          cellId={cid}
           stale={false}
           loading={false}
           allowExpand={true}

package/src/components/editor/ai/__tests__/completion-utils.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+import { variableName } from "@/__tests__/branded";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { dataSourceConnectionsAtom } from "@/core/datasets/data-source-connections";
 import { DUCKDB_ENGINE } from "@/core/datasets/engines";
@@ -7,7 +8,6 @@ import { datasetsAtom } from "@/core/datasets/state";
 import type { DatasetsState } from "@/core/datasets/types";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import type { Variable, VariableName } from "@/core/variables/types";
 import { codeToCells, getAICompletionBody } from "../completion-utils";
 
 // Mock getCodes function
@@ -205,16 +205,16 @@ describe("getAICompletionBody", () => {
 
   it("should return the correct completion body with mentioned variables", () => {
     // Set up test data in the Jotai store
-    const testVariables: Record<VariableName, Variable> = {
-      ["var1" as VariableName]: {
-        name: "var1" as VariableName,
+    const testVariables = {
+      [variableName("var1")]: {
+        name: variableName("var1"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
         usedBy: [],
       },
-      ["var2" as VariableName]: {
-        name: "var2" as VariableName,
+      [variableName("var2")]: {
+        name: variableName("var2"),
         value: "42",
         dataType: "number",
         declaredBy: [],
@@ -253,9 +253,9 @@ describe("getAICompletionBody", () => {
     ];
     store.set(datasetsAtom, { tables: testDatasets } as DatasetsState);
 
-    const testVariables: Record<VariableName, Variable> = {
-      ["var1" as VariableName]: {
-        name: "var1" as VariableName,
+    const testVariables = {
+      [variableName("var1")]: {
+        name: variableName("var1"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
@@ -285,9 +285,9 @@ describe("getAICompletionBody", () => {
 
   it("should handle non-existent variables", () => {
     // Set up test data in the Jotai store
-    const testVariables: Record<VariableName, Variable> = {
-      ["existingVar" as VariableName]: {
-        name: "existingVar" as VariableName,
+    const testVariables = {
+      [variableName("existingVar")]: {
+        name: variableName("existingVar"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
@@ -322,9 +322,9 @@ describe("getAICompletionBody", () => {
     ];
     store.set(datasetsAtom, { tables: testDatasets } as DatasetsState);
 
-    const testVariables: Record<VariableName, Variable> = {
-      ["conflict" as VariableName]: {
-        name: "conflict" as VariableName,
+    const testVariables = {
+      [variableName("conflict")]: {
+        name: variableName("conflict"),
         value: "string value",
         dataType: "string",
         declaredBy: [],

package/src/components/editor/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -85,7 +85,7 @@ store = GCSStore("my-bucket")"
 exports[`generateStorageCode > Google Drive > with browser auth (no credentials) 1`] = `
 "from gdrive_fsspec import GoogleDriveFileSystem
 
-fs = GoogleDriveFileSystem(token="browser")"
+fs = GoogleDriveFileSystem(token="browser", use_listings_cache=False)"
 `;
 
 exports[`generateStorageCode > Google Drive > with service account credentials 1`] = `
@@ -93,7 +93,7 @@ exports[`generateStorageCode > Google Drive > with service account credentials 1
 import json
 
 _creds = json.loads("""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
-fs = GoogleDriveFileSystem(creds=_creds, token="service_account")"
+fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False)"
 `;
 
 exports[`generateStorageCode > S3 > basic connection with all fields 1`] = `

package/src/components/editor/connections/storage/as-code.ts

@@ -173,13 +173,13 @@ function generateGDriveCode(
     );
     const code = dedent(`
       _creds = json.loads("""${connection.credentials_json?.startsWith("ENV:") ? `{${creds}}` : connection.credentials_json}""")
-      fs = GoogleDriveFileSystem(creds=_creds, token="service_account")
+      fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False)
     `);
     return { imports, code };
   }
 
   const code = dedent(`
-    fs = GoogleDriveFileSystem(token="browser")
+    fs = GoogleDriveFileSystem(token="browser", use_listings_cache=False)
   `);
   return { imports, code };
 }

package/src/components/editor/file-tree/file-explorer.tsx

@@ -62,9 +62,11 @@ import type { FileInfo } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
+import { deserializeBlob } from "@/utils/blob";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadBlob } from "@/utils/download";
+import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { fileSplit } from "@/utils/pathUtils";
@@ -650,8 +652,20 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             <DropdownMenuItem
               onSelect={async () => {
                 const details = await sendFileDetails({ path: node.data.path });
-                const contents = details.contents || "";
-                downloadBlob(new Blob([contents]), node.data.name);
+                if (details.isBase64 && details.contents) {
+                  const blob = deserializeBlob(
+                    base64ToDataURL(
+                      details.contents as Base64String,
+                      details.mimeType || "application/octet-stream",
+                    ),
+                  );
+                  downloadBlob(blob, node.data.name);
+                } else {
+                  downloadBlob(
+                    new Blob([details.contents || ""]),
+                    node.data.name,
+                  );
+                }
               }}
             >
               <DownloadIcon className={ic} />

package/src/components/editor/file-tree/file-viewer.tsx

@@ -21,6 +21,7 @@ import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
+import { deserializeBlob } from "@/utils/blob";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadBlob, downloadByURL } from "@/utils/download";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
@@ -121,9 +122,22 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const handleDownload = () => {
-    if (isMediaMime(mimeType)) {
-      const dataURL = base64ToDataURL(data.contents as Base64String, mimeType);
-      downloadByURL(dataURL, data.file.name);
+    if (data.isBase64 && data.contents) {
+      if (isMediaMime(mimeType)) {
+        const dataURL = base64ToDataURL(
+          data.contents as Base64String,
+          mimeType,
+        );
+        downloadByURL(dataURL, data.file.name);
+      } else {
+        const blob = deserializeBlob(
+          base64ToDataURL(
+            data.contents as Base64String,
+            data.mimeType || "application/octet-stream",
+          ),
+        );
+        downloadBlob(blob, data.file.name);
+      }
       return;
     }
 

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -4,8 +4,8 @@
 import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
 import type { CellActions, NotebookState } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
@@ -179,7 +179,7 @@ describe("useCellClipboard", () => {
     });
 
     it("should filter out non-existent cells", async () => {
-      const nonExistentCellId = "non-existent" as CellId;
+      const nonExistentCellId = cellId("non-existent");
 
       const { result } = renderHook(() => useCellClipboard());