@marimo-team/islands 0.21.2-dev1 → 0.21.2-dev100

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/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -21,7 +21,12 @@ import {
   isPinnedAtom,
 } from "./atoms";
 
-export type PanelType = "row-viewer" | "column-explorer";
+export const PANEL_TYPES = {
+  ROW_VIEWER: "row-viewer",
+  COLUMN_EXPLORER: "column-explorer",
+} as const;
+
+export type PanelType = (typeof PANEL_TYPES)[keyof typeof PANEL_TYPES];
 
 export const ContextAwarePanel: React.FC = () => {
   const [owner, setOwner] = useAtom(contextAwarePanelOwner);
@@ -51,7 +56,7 @@ export const ContextAwarePanel: React.FC = () => {
             aria-label={isPinned ? "Unpin panel" : "Pin panel"}
           >
             {isPinned ? (
-              <PinIcon className="w-4 h-4" />
+              <PinIcon className="w-4 h-4 text-primary" />
             ) : (
               <PinOffIcon className="w-4 h-4" />
             )}
@@ -95,16 +100,18 @@ export const ContextAwarePanel: React.FC = () => {
 
   const renderBody = () => {
     return (
-      <div className="mt-2 pb-7 mb-4 h-full overflow-auto">
-        <div className="flex flex-row justify-between items-center mx-2">
+      <div className="pb-7 mb-4 h-full overflow-auto">
+        <div className="p-3 border-b flex justify-between items-center">
           {renderModeToggle()}
+          <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button
-            variant="linkDestructive"
-            size="icon"
+            variant="text"
+            size="xs"
+            className="m-0"
             onClick={closePanel}
             aria-label="Close selection panel"
           >
-            <XIcon className="w-4 h-4" />
+            <XIcon className="w-4 h-4 hover:text-destructive" />
           </Button>
         </div>
 
@@ -126,7 +133,7 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={20} minSize={15} maxSize={80}>
+      <Panel defaultSize={25} minSize={25} maxSize={80}>
         {renderBody()}
       </Panel>
     </>
@@ -150,7 +157,7 @@ interface ResizableComponentProps {
 const ResizableComponent = ({ children }: ResizableComponentProps) => {
   const { resizableDivRef, handleRefs, style } = useResizeHandle({
     startingWidth: 400,
-    minWidth: 300,
+    minWidth: 400,
     maxWidth: 1500,
     onResize: () => {
       raf2(() => {

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { startCase } from "lodash-es";
 import { AlertCircleIcon, CheckCircle2Icon, PowerOffIcon } from "lucide-react";
 import type React from "react";
 import { Spinner } from "@/components/icons/spinner";
@@ -18,6 +17,7 @@ import {
 } from "@/core/websocket/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
+import { Strings } from "@/utils/strings";
 
 const CHECK_HEALTH_INTERVAL_MS = 30_000;
 
@@ -84,7 +84,7 @@ export const BackendConnectionStatus: React.FC = () => {
       return "Not connected to a runtime";
     }
 
-    const baseStatus = startCase(connection.toLowerCase());
+    const baseStatus = Strings.startCase(connection.toLowerCase());
     const healthInfo = data?.lastChecked
       ? data.isHealthy
         ? "✓ Healthy"

package/src/components/editor/connections/form-renderers.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { partition } from "lodash-es";
 import { KeyIcon, PlusCircleIcon } from "lucide-react";
 import { createContext, type ReactNode, use } from "react";
 import { z } from "zod";
@@ -28,6 +27,7 @@ import { Input } from "@/components/ui/input";
 import { NumberField } from "@/components/ui/number-field";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { partition } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {

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());
 

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
 import { beforeEach, describe, expect, it } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { MultiColumn } from "@/utils/id-tree";
 import type { CellSelectionState } from "../selection";
 import { exportedForTesting } from "../selection";
@@ -8,11 +9,11 @@ import { exportedForTesting } from "../selection";
 const { initialState, reducer, createActions } = exportedForTesting;
 
 const CellIds = {
-  a: "a" as CellId,
-  b: "b" as CellId,
-  c: "c" as CellId,
-  d: "d" as CellId,
-  e: "e" as CellId,
+  a: cellId("a"),
+  b: cellId("b"),
+  c: cellId("c"),
+  d: cellId("d"),
+  e: cellId("e"),
 };
 
 describe("cell selection reducer", () => {

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import { type CellId, HTMLCellId } from "@/core/cells/ids";
 
 const mockScrollCellIntoView = vi.fn();
@@ -14,12 +15,12 @@ vi.mock("../focus-utils", () => ({
 type TemporarilyShownCodeState = Set<CellId>;
 
 describe("temporarilyShownCodeActions", () => {
-  const cellId = "cell-1" as CellId;
+  const cid = cellId("cell-1");
   let cellElement: HTMLElement;
 
   beforeEach(() => {
     cellElement = document.createElement("div");
-    cellElement.id = HTMLCellId.create(cellId);
+    cellElement.id = HTMLCellId.create(cid);
     document.body.append(cellElement);
     cellElement.focus();
 
@@ -37,17 +38,17 @@ describe("temporarilyShownCodeActions", () => {
   });
 
   it("should scroll cell into view when removing cell causes layout shift", () => {
-    const state = new Set<CellId>([cellId]);
-    removeCell(state, cellId);
+    const state = new Set<CellId>([cid]);
+    removeCell(state, cid);
 
-    expect(mockScrollCellIntoView).toHaveBeenCalledWith(cellId);
+    expect(mockScrollCellIntoView).toHaveBeenCalledWith(cid);
   });
 
   it("should not scroll when focused cell is not found", () => {
     vi.spyOn(HTMLCellId, "findElementThroughShadowDOMs").mockReturnValue(null);
 
-    const state = new Set<CellId>([cellId]);
-    removeCell(state, cellId);
+    const state = new Set<CellId>([cid]);
+    removeCell(state, cid);
 
     expect(mockScrollCellIntoView).not.toHaveBeenCalled();
   });

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -316,7 +316,7 @@ export const MarimoErrorOutput = ({
               <ul className="list-disc">
                 {error.cells.map((cid, cidIdx) => (
                   <li className={liStyle} key={`cell-${cidIdx}`}>
-                    <CellLinkError cellId={cid as CellId} />
+                    <CellLinkError cellId={cid} />
                   </li>
                 ))}
               </ul>
@@ -491,7 +491,7 @@ export const MarimoErrorOutput = ({
                 ) : (
                   <div>
                     {processTextForUrls(error.msg, `exception-${idx}`)}
-                    <CellLinkError cellId={error.raising_cell as CellId} />
+                    <CellLinkError cellId={error.raising_cell} />
                   </div>
                 )}
               </li>
@@ -518,7 +518,7 @@ export const MarimoErrorOutput = ({
               ) : (
                 <div>
                   {error.msg}
-                  <CellLinkError cellId={error.blamed_cell as CellId} />
+                  <CellLinkError cellId={error.blamed_cell} />
                 </div>
               )}
             </li>
@@ -554,13 +554,13 @@ export const MarimoErrorOutput = ({
               {error.msg}
               {error.blamed_cell == null ? (
                 <span>
-                  (<CellLinkError cellId={error.raising_cell as CellId} />)
+                  (<CellLinkError cellId={error.raising_cell} />)
                 </span>
               ) : (
                 <span>
-                  (<CellLinkError cellId={error.raising_cell as CellId} />
+                  (<CellLinkError cellId={error.raising_cell} />
                   &nbsp;blames&nbsp;
-                  <CellLinkError cellId={error.blamed_cell as CellId} />)
+                  <CellLinkError cellId={error.blamed_cell} />)
                 </span>
               )}
             </div>
@@ -578,7 +578,7 @@ export const MarimoErrorOutput = ({
           {ancestorStoppedErrors.map((error, idx) => (
             <div key={`ancestor-stopped-${idx}`}>
               {error.msg}
-              <CellLinkError cellId={error.raising_cell as CellId} />
+              <CellLinkError cellId={error.raising_cell} />
             </div>
           ))}
           {cellId && (

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -3,8 +3,8 @@
 import { render } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { Tracebacks } from "@/__mocks__/tracebacks";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellId } from "@/core/cells/ids";
 import { initialModeAtom } from "@/core/mode";
 import { store } from "@/core/state/jotai";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -14,7 +14,7 @@ import {
   replaceTracebackPrefix,
 } from "../MarimoTracebackOutput";
 
-const cellId = "1" as CellId;
+const cid = cellId("1");
 
 describe("traceback component", () => {
   beforeEach(() => {
@@ -25,7 +25,7 @@ describe("traceback component", () => {
   test("extracts cell-link", () => {
     const traceback = (
       <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cellId} />
+        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
       </TooltipProvider>
     );
     const { unmount, getAllByRole } = render(traceback);
@@ -45,7 +45,7 @@ describe("traceback component", () => {
   test("renames File to Cell for relevant lines", () => {
     const traceback = (
       <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cellId} />
+        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
       </TooltipProvider>
     );
     const { unmount, container } = render(traceback);

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -3,8 +3,8 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellId } from "@/core/cells/ids";
 import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
@@ -24,7 +24,7 @@ describe("ConsoleOutput integration", () => {
   });
 
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
@@ -55,7 +55,7 @@ describe("ConsoleOutput integration", () => {
 
 describe("ConsoleOutput pdb history", () => {
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
@@ -215,7 +215,7 @@ describe("ConsoleOutput debounced clearing", () => {
   });
 
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,

package/src/components/editor/package-alert.tsx

@@ -44,7 +44,7 @@ import {
   type UserConfig,
   UserConfigSchema,
 } from "../../core/config/config-schema";
-import { getDirtyValues } from "../app-config/user-config-form";
+import { getDirtyValues } from "../app-config/get-dirty-values";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -15,7 +15,6 @@ import type { GridLayout, GridLayoutCellSide } from "./types";
 import "react-grid-layout/css/styles.css";
 import "./styles.css";
 import { BorderAllIcon } from "@radix-ui/react-icons";
-import { startCase } from "lodash-es";
 import {
   AlignEndVerticalIcon,
   AlignHorizontalSpaceAroundIcon,
@@ -43,6 +42,7 @@ import { useIsDragging } from "@/hooks/useIsDragging";
 import { cn } from "@/utils/cn";
 import { Maps } from "@/utils/maps";
 import { Objects } from "@/utils/objects";
+import { Strings } from "@/utils/strings";
 
 type Props = ICellRendererProps<GridLayout>;
 
@@ -637,7 +637,7 @@ const GridHoverActions: React.FC<GridHoverActionsProps> = ({
           {Objects.entries(SIDE_TO_ICON).map(([option, Icon]) => (
             <DropdownMenuItem key={option} onSelect={() => setSide(option)}>
               <Icon className={"h-4 w-3 mr-2"} />
-              <span className="flex-1">{startCase(option)}</span>
+              <span className="flex-1">{Strings.startCase(option)}</span>
               {option === side && <CheckIcon className="h-4 w-4" />}
             </DropdownMenuItem>
           ))}

package/src/components/editor/renderers/layout-select.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { startCase } from "lodash-es";
 import {
   Grid3x3Icon,
   ListIcon,
@@ -21,6 +20,7 @@ import { getFeatureFlag } from "@/core/config/feature-flag";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { isWasm } from "@/core/wasm/utils";
 import { logNever } from "@/utils/assertNever";
+import { Strings } from "@/utils/strings";
 import { LAYOUT_TYPES, type LayoutType } from "./types";
 
 export const LayoutSelect: React.FC = () => {
@@ -82,5 +82,5 @@ export function getLayoutIcon(layoutType: LayoutType) {
 }
 
 export function displayLayoutName(layoutType: LayoutType) {
-  return startCase(layoutType);
+  return Strings.startCase(layoutType);
 }

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -91,7 +91,7 @@ function focusCellByName(cellName: string) {
 
       // Look for an editor to focus
       const { cellHandles } = getNotebook();
-      const cellId = cellElement.dataset.cellId as CellId | undefined;
+      const cellId = extractCellIdFromDomElement(cellElement);
 
       if (!cellId) {
         Logger.error(`Missing cellId for cell with name ${cellName}`);
@@ -111,3 +111,10 @@ function focusCellByName(cellName: string) {
     focusFirstEditor();
   }
 }
+
+function extractCellIdFromDomElement(
+  cellElement: HTMLElement,
+): CellId | undefined {
+  const cellIdStr = cellElement.dataset.cellId ?? undefined;
+  return cellIdStr as CellId | undefined;
+}

package/src/components/markdown/markdown-renderer.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { EditorView } from "@codemirror/view";
-import { math } from "@streamdown/math";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
@@ -13,6 +12,7 @@ import { useLastFocusedCellId } from "@/core/cells/focus";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import { autoInstantiateAtom } from "@/core/config/config";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { useTheme } from "@/theme/useTheme";
 import { copyToClipboard } from "@/utils/copy";
@@ -166,11 +166,27 @@ const COMPONENTS: Components = {
   },
 };
 
+// Lazy-load the math plugin to keep katex (~264 KB) out of the critical path.
+// The first render works without math; once loaded, it re-renders with math support.
+let mathPluginCache: StreamdownProps["plugins"] | undefined;
+const useMathPlugin = () => {
+  const { data: plugins } = useAsyncData(async () => {
+    if (mathPluginCache) {
+      return mathPluginCache;
+    }
+    const mod = await import("@streamdown/math");
+    mathPluginCache = { math: mod.math };
+    return mathPluginCache;
+  }, []);
+  return plugins;
+};
+
 export const MarkdownRenderer = memo(({ content }: { content: string }) => {
+  const plugins = useMathPlugin();
   return (
     <Streamdown
       components={COMPONENTS}
-      plugins={{ math }}
+      plugins={plugins}
       className="mo-markdown-renderer"
     >
       {content}