@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev291

package/src/core/codemirror/language/languages/python.ts

@@ -157,7 +157,7 @@ const pylspClient = once((lspConfig: LSPConfig) => {
   return notebookClient;
 });
 
-const tyLspClient = once((_: LSPConfig) => {
+const tyLspClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 
@@ -176,7 +176,7 @@ const tyLspClient = once((_: LSPConfig) => {
   const notebookClient = new NotebookLanguageServerClient(
     new LanguageServerClient({
       ...lspClientOpts,
-      getWorkspaceConfiguration: (_) => [{ disableLanguageServices: true }],
+      getWorkspaceConfiguration: () => [{ disableLanguageServices: true }],
     }),
     {},
   );
@@ -226,7 +226,7 @@ const pyreflyClient = once(
   },
 );
 
-const pyrightClient = once((_: LSPConfig) => {
+const pyrightClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 
@@ -279,13 +279,19 @@ export class PythonLanguageAdapter implements LanguageAdapter<{}> {
     return this.parser.isSupported(code);
   }
 
-  public getExtension(
-    cellId: CellId,
-    completionConfig: CompletionConfig,
-    hotkeys: HotkeyProvider,
-    placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
-  ): Extension[] {
+  public getExtension({
+    cellId,
+    completionConfig,
+    hotkeys,
+    placeholderType,
+    lspConfig,
+  }: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig };
+  }): Extension[] {
     const getCompletionsExtension = () => {
       const autocompleteOptions = {
         // We remove the default keymap because we use our own which
@@ -416,11 +422,11 @@ function getPlaceholderExtension(placeholderType: PlaceholderType): Extension {
   if (placeholderType === "ai") {
     return clickablePlaceholderExtension({
       beforeText: "Start coding or ",
-      linkText: "generate",
-      afterText: " with AI.",
+      linkText: "generate with AI",
+      afterText: ".",
       onClick: (ev) => {
         const cellActions = ev.state.facet(cellActionsState);
-        cellActions.aiCellCompletion();
+        cellActions.askAiAboutCell();
       },
     });
   }

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -2,7 +2,7 @@
 
 import { acceptCompletion, autocompletion } from "@codemirror/autocomplete";
 import { insertTab } from "@codemirror/commands";
-import { type SQLDialect, type SQLNamespace, sql } from "@codemirror/lang-sql";
+import { type SQLNamespace, sql } from "@codemirror/lang-sql";
 import type { EditorState, Extension } from "@codemirror/state";
 import { Compartment } from "@codemirror/state";
 import {
@@ -155,13 +155,15 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
     return this.parser.isSupported(pythonCode);
   }
 
-  public getExtension(
-    _cellId: CellId,
-    _completionConfig: CompletionConfig,
-    _hotkeys: HotkeyProvider,
-    _placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
-  ): Extension[] {
+  public getExtension({
+    lspConfig,
+  }: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig };
+  }): Extension[] {
     const analysis = createSQLAnalysis();
     const extensions = [
       // This can be updated with a dispatch effect
@@ -495,12 +497,12 @@ function isDuckDBConnection(
 }
 
 /**
- * Update the SQL dialect in the editor view.
+ * The effect that reconfigures the SQL language for the connection's dialect.
+ * Callers dispatch it, alone or with the change that selected the connection.
  */
-function updateSQLDialect(view: EditorView, dialect: SQLDialect) {
-  view.dispatch({
-    effects: sqlConfigCompartment.reconfigure(sql({ dialect })),
-  });
+export function sqlDialectEffect(connectionName: ConnectionName) {
+  const dialect = SCHEMA_CACHE.getDialect(connectionName);
+  return sqlConfigCompartment.reconfigure(sql({ dialect }));
 }
 
 // Helper functions to update the SQL dialect
@@ -509,17 +511,7 @@ export function updateSQLDialectFromConnection(
   view: EditorView,
   connectionName: ConnectionName,
 ) {
-  const dialect = SCHEMA_CACHE.getDialect(connectionName);
-  updateSQLDialect(view, dialect);
-}
-
-export function initializeSQLDialect(view: EditorView) {
-  // Get current engine and update dialect
-  const metadata = getSQLMetadata(view.state);
-  const connectionName = metadata.engine;
-  const dialect = SCHEMA_CACHE.getDialect(connectionName);
-
-  updateSQLDialect(view, dialect);
+  view.dispatch({ effects: sqlDialectEffect(connectionName) });
 }
 
 function getSQLMetadata(state: EditorState): SQLLanguageAdapterMetadata {

package/src/core/codemirror/language/panel/panel.tsx

@@ -101,6 +101,7 @@ export const LanguagePanelComponent: React.FC<{
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}
           <Tooltip content="Format SQL">
             <Button
+              aria-label="Format SQL"
               variant="text"
               size="icon"
               onClick={async () => {

package/src/core/codemirror/language/types.ts

@@ -26,13 +26,13 @@ export interface LanguageAdapter<M = Record<string, any>> {
   transformIn(code: string): [string, number, M];
   transformOut(code: string, metadata: M): [string, number];
   isSupported(code: string): boolean;
-  getExtension(
-    cellId: CellId,
-    completionConfig: CompletionConfig,
-    hotkeys: HotkeyProvider,
-    placeholderType: PlaceholderType,
-    lspConfig: LSPConfig & { diagnostics?: DiagnosticsConfig },
-  ): Extension[];
+  getExtension(options: {
+    cellId: CellId;
+    completionConfig: CompletionConfig;
+    hotkeys: HotkeyProvider;
+    placeholderType: PlaceholderType;
+    lspConfig: LSPConfig & { diagnostics?: DiagnosticsConfig };
+  }): Extension[];
 }
 
 export type LanguageMetadataOf<T extends LanguageAdapter> =

package/src/core/codemirror/language/utils.ts

@@ -2,12 +2,8 @@
 
 import type { EditorState } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
-import { replaceEditorContent } from "../replace-editor-content";
-import {
-  languageAdapterFromCode,
-  languageAdapterState,
-  switchLanguage,
-} from "./extension";
+import { getCellCode } from "./cell-code";
+import { languageAdapterState } from "./extension";
 import { languageMetadataField } from "./metadata";
 
 /**
@@ -19,42 +15,16 @@ export function getEditorCodeAsPython(
   fromPos?: number,
   toPos?: number,
 ): string {
+  if (fromPos === undefined) {
+    return getCellCode(editor.state);
+  }
   const languageAdapter = editor.state.field(languageAdapterState);
   const metadata = editor.state.field(languageMetadataField);
   const editorText = editor.state.doc.toString();
-  if (fromPos !== undefined) {
-    return languageAdapter.transformOut(
-      editorText.slice(fromPos, toPos),
-      metadata,
-    )[0];
-  }
-  return languageAdapter.transformOut(editorText, metadata)[0];
-}
-
-/**
- * Update the editor code from Python code
- * Handles when the editor is showing a different language (e.g. markdown)
- */
-export function updateEditorCodeFromPython(
-  editor: EditorView,
-  pythonCode: string,
-): string {
-  const currentAdapter = editor.state.field(languageAdapterState);
-  const correctAdapter = languageAdapterFromCode(pythonCode);
-
-  // If the language type changed (e.g., markdown → python), switch adapters
-  if (correctAdapter.type !== currentAdapter.type) {
-    switchLanguage(editor, {
-      language: correctAdapter.type,
-      keepCodeAsIs: true,
-    });
-  }
-
-  const languageAdapter = editor.state.field(languageAdapterState);
-  const [code] = languageAdapter.transformIn(pythonCode);
-  // Use replaceEditorContent which preserves cursor position when focused
-  replaceEditorContent(editor, code);
-  return code;
+  return languageAdapter.transformOut(
+    editorText.slice(fromPos, toPos),
+    metadata,
+  )[0];
 }
 
 /**

package/src/core/codemirror/lsp/__tests__/notebook-lsp.test.ts

@@ -11,7 +11,6 @@ import type { CellId } from "@/core/cells/ids";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
 import { createCell } from "@/core/cells/types";
 import { store } from "@/core/state/jotai";
-import { MultiColumn } from "@/utils/id-tree";
 import { topologicalCodesAtom } from "../../copilot/getCodes";
 import { lspWorkspaceAtom } from "@/core/saving/file-state";
 import { languageAdapterState } from "../../language/extension";
@@ -69,7 +68,7 @@ describe("merged document with unmounted editors", () => {
   it("should include the code of cells whose editors are not mounted", () => {
     store.set(notebookAtom, {
       ...initialNotebookState(),
-      cellIds: MultiColumn.from([[Cells.cell1, Cells.cell2]]),
+      cellIds: [Cells.cell1, Cells.cell2],
       cellData: {
         [Cells.cell1]: createCell({ id: Cells.cell1, code: "import math" }),
         [Cells.cell2]: createCell({

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -12,10 +12,8 @@ import { Objects } from "@/utils/objects";
 import { isRecord } from "@/utils/records";
 import { getPositionAtWordBounds } from "../completion/hints";
 import { topologicalCodesAtom } from "../copilot/getCodes";
-import {
-  getEditorCodeAsPython,
-  updateEditorCodeFromPython,
-} from "../language/utils";
+import { prepareCellCodeUpdate } from "../language/cell-code";
+import { getEditorCodeAsPython } from "../language/utils";
 import { createNotebookLens, type NotebookLens } from "./lens";
 import { normalizeLspDocumentation } from "./normalize-markdown-math";
 import {
@@ -770,7 +768,10 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
       // Only update if it has changed
       const code = getEditorCodeAsPython(ev);
       if (code !== newCode) {
-        updateEditorCodeFromPython(ev, newCode);
+        const update = prepareCellCodeUpdate(ev.state, newCode);
+        if (update) {
+          ev.dispatch(update);
+        }
         updatedCount++;
       }
     }

package/src/core/codemirror/lsp/utils.ts

@@ -13,7 +13,7 @@ export function isKnownCellDocumentUri(uri: string): boolean {
   if (!CellDocumentUri.is(uri)) {
     return false;
   }
-  return store.get(cellIdsAtom).inOrderIds.includes(CellDocumentUri.parse(uri));
+  return store.get(cellIdsAtom).includes(CellDocumentUri.parse(uri));
 }
 
 export function getLspRootUri() {

package/src/core/codemirror/misc/__tests__/paste.test.ts

@@ -443,7 +443,9 @@ def _():
     view.dom.onpaste = (evt) => extension[0].domEventHandlers.paste(evt, view);
     view.dom.dispatchEvent(event);
 
-    expect(addOrAppendSetupCell).toHaveBeenCalledWith("import numpy as np");
+    expect(addOrAppendSetupCell).toHaveBeenCalledWith({
+      code: "import numpy as np",
+    });
     expect(createManyBelow).toHaveBeenCalledWith(["x = 1"]);
   });
 });

package/src/core/codemirror/misc/paste.ts

@@ -23,7 +23,7 @@ export function pasteBundle(): Extension[] {
         // The `with app.setup` block belongs in the special setup cell, not in
         // an ordinary cell.
         if (setup !== null) {
-          actions.addOrAppendSetupCell(setup);
+          actions.addOrAppendSetupCell({ code: setup });
         }
         if (cells.length > 0) {
           actions.createManyBelow(cells);

package/src/core/codemirror/placeholder/__tests__/extensions.test.ts

@@ -81,16 +81,32 @@ describe("clickablePlaceholderExtension", () => {
 
     // Check text content
     expect(placeholder.textContent).toBe("Click here to continue");
+    expect(
+      [...placeholder.querySelectorAll('[aria-hidden="true"]')].map(
+        (node) => node.textContent,
+      ),
+    ).toEqual(["Click ", " to continue"]);
+    expect(
+      placeholder.querySelector("button")?.closest('[aria-hidden="true"]'),
+    ).toBeNull();
 
     // Find and check the clickable link
     const link = placeholder.querySelector(".cm-clickable-placeholder")!;
     expect(link).toBeTruthy();
     expect(link.textContent).toBe("here");
+    expect(link.tagName).toBe("BUTTON");
+    expect(link.closest('[aria-hidden="true"]')).toBeNull();
+    expect(link.getAttribute("type")).toBe("button");
 
     // Simulate click
     (link as HTMLElement).click();
     expect(onClick).toHaveBeenCalled();
 
+    view.dispatch({ changes: { from: 0, insert: "Hello" } });
+    expect(view.dom.querySelector(".cm-clickable-placeholder")).toBeNull();
+    view.dispatch({ changes: { from: 0, to: 5 } });
+    expect(view.dom.querySelector("button")?.textContent).toBe("here");
+
     // Check theme classes
     expect(link.classList.contains("cm-clickable-placeholder")).toBe(true);
 
@@ -129,4 +145,63 @@ describe("clickablePlaceholderExtension", () => {
 
     view.destroy();
   });
+
+  describe("caret coordinates", () => {
+    const original = Range.prototype.getClientRects;
+    let rects: Array<Pick<DOMRect, "left" | "right" | "top" | "bottom">>;
+
+    beforeEach(() => {
+      rects = [{ left: 10, right: 50, top: 2, bottom: 18 }];
+      Range.prototype.getClientRects = () => rects as unknown as DOMRectList;
+    });
+
+    afterEach(() => {
+      Range.prototype.getClientRects = original;
+    });
+
+    function renderWidget(beforeText: string) {
+      const view = new EditorView({
+        state: EditorState.create({
+          doc: "",
+          extensions: clickablePlaceholderExtension({
+            beforeText,
+            linkText: "here",
+            afterText: "",
+            onClick: vi.fn(),
+          }),
+        }),
+      });
+      const widget = view.state
+        .facet(EditorView.decorations)
+        .flatMap((deco) => (typeof deco === "function" ? [deco(view)] : [deco]))
+        .map((set) => set.iter().value?.spec.widget)
+        .find(Boolean);
+      const dom = widget.toDOM(view);
+      document.body.append(dom);
+      return { view, widget, dom };
+    }
+
+    it("collapses the caret to the start of the first line of text", () => {
+      const { view, widget, dom } = renderWidget("Type or ");
+      expect(widget.coordsAt(dom, 0, 1)).toEqual({
+        left: 10,
+        right: 10,
+        top: 2,
+        bottom: 18,
+      });
+      dom.style.direction = "rtl";
+      expect(widget.coordsAt(dom, 0, 1)).toMatchObject({ left: 50, right: 50 });
+      dom.remove();
+      view.destroy();
+    });
+
+    it("skips empty text and falls back when nothing is laid out", () => {
+      const { view, widget, dom } = renderWidget("");
+      expect(widget.coordsAt(dom, 0, 1)).toMatchObject({ left: 10 });
+      rects = [];
+      expect(widget.coordsAt(dom, 0, 1)).toBeNull();
+      dom.remove();
+      view.destroy();
+    });
+  });
 });

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

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Extension } from "@codemirror/state";
-import { EditorView, keymap, placeholder } from "@codemirror/view";
+import {
+  Decoration,
+  EditorView,
+  keymap,
+  placeholder,
+  WidgetType,
+} from "@codemirror/view";
 import { isEditorReadonly } from "../readonly/extension";
 
 /**
@@ -60,37 +66,92 @@ export function clickablePlaceholderExtension(opts: {
 }): Extension[] {
   const { beforeText, linkText, afterText, onClick } = opts;
 
-  // Create a placeholder
-  // Needs to be a function to keep event listeners
-  // See https://github.com/codemirror/dev/issues/1457
-  const createPlaceholder = (ev: EditorView) => {
-    const placeholderText = document.createElement("span");
-    placeholderText.append(document.createTextNode(beforeText));
-    const link = document.createElement("span");
-    link.textContent = linkText;
-    link.classList.add("cm-clickable-placeholder");
-    link.onclick = (evt) => {
-      evt.stopPropagation();
-      onClick(ev);
-    };
-    placeholderText.append(link);
-    placeholderText.append(document.createTextNode(afterText));
-    return placeholderText;
-  };
+  class ActionPlaceholder extends WidgetType {
+    public toDOM(ev: EditorView) {
+      const wrapper = document.createElement("span");
+      wrapper.className = "cm-placeholder";
+      wrapper.contentEditable = "false";
+      const before = document.createElement("span");
+      before.textContent = beforeText;
+      before.setAttribute("aria-hidden", "true");
+      wrapper.append(before);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = linkText;
+      button.className = "cm-clickable-placeholder";
+      button.onclick = (event) => {
+        event.stopPropagation();
+        onClick(ev);
+      };
+      const after = document.createElement("span");
+      after.textContent = afterText;
+      after.setAttribute("aria-hidden", "true");
+      wrapper.append(button, after);
+      return wrapper;
+    }
+
+    public override coordsAt(dom: HTMLElement) {
+      // A wrapped placeholder must not make the caret span every line.
+      const walker = document.createTreeWalker(dom, NodeFilter.SHOW_TEXT);
+      let text = walker.nextNode();
+      while (text && !text.textContent) {
+        text = walker.nextNode();
+      }
+      if (!text) {
+        return null;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(text);
+      const rect = range.getClientRects()[0];
+      if (!rect) {
+        return null;
+      }
+      const left =
+        window.getComputedStyle(dom).direction === "rtl"
+          ? rect.right
+          : rect.left;
+      return { left, right: left, top: rect.top, bottom: rect.bottom };
+    }
+
+    public override ignoreEvent(event: Event) {
+      return (
+        event.target instanceof Element &&
+        event.target.closest(".cm-clickable-placeholder") !== null
+      );
+    }
+  }
 
   return [
-    placeholder(createPlaceholder),
+    EditorView.decorations.compute(["doc"], (state) =>
+      state.doc.length === 0
+        ? Decoration.set([
+            Decoration.widget({
+              widget: new ActionPlaceholder(),
+              side: 1,
+            }).range(0),
+          ])
+        : Decoration.none,
+    ),
     EditorView.theme({
       ".cm-placeholder": {
         color: "var(--slate-8)",
       },
       ".cm-clickable-placeholder": {
         cursor: "pointer !important",
+        font: "inherit",
+        background: "transparent",
+        border: "none",
+        padding: "0",
         pointerEvents: "auto",
         color: "var(--slate-9)",
         textDecoration: "underline",
         textUnderlineOffset: "0.2em",
       },
+      ".cm-clickable-placeholder:focus-visible": {
+        outline: "1px solid var(--muted-foreground)",
+        outlineOffset: "2px",
+        borderRadius: "2px",
+      },
       ".cm-clickable-placeholder:hover": {
         color: "var(--sky-11)",
       },

package/src/core/codemirror/readonly/__tests__/extension.test.ts

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { createStore } from "jotai";
 import { describe, expect, it } from "vitest";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { connectionAtom } from "../../../network/connection";
 import { dynamicReadonly, isEditorReadonly } from "../extension";
 

package/src/core/codemirror/readonly/extension.ts

@@ -5,9 +5,9 @@ import type { createStore } from "jotai";
 import {
   isAppConnected,
   isAppConnecting,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { connectionAtom } from "../../network/connection";
-import { ConnectionState } from "../../websocket/types";
+import { ConnectionState } from "../../session/types";
 
 /**
  * State effect for updating readonly status based on connection

package/src/core/codemirror/utils.ts

@@ -122,6 +122,7 @@ export function hasNewLines(tr: Transaction | ViewUpdate): boolean {
 
   let hasNewLines = false;
   // Iterate through all changes in the transaction
+  // oxlint-disable-next-line marimo/prefer-object-params -- CodeMirror supplies positional change ranges and inserted text.
   tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
     // Check if the inserted text contains line breaks
     if (inserted.toString().includes("\n")) {

package/src/core/config/__tests__/app-config.test.ts

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, createStore } from "jotai";
+import { describe, expect, it } from "vitest";
+import { partial } from "@/__mocks__/partial";
+import type { Document, NotebookReplica } from "@/core/notebook/replica";
+import { activeNotebookReplicaAtom } from "@/core/session/active-notebook";
+import { appConfigAtom, pageAppConfigAtom } from "../config";
+
+function document(app_config: Record<string, unknown>, version = 1): Document {
+  return {
+    revision: {
+      notebook_id: "nb",
+      order: [],
+      app_config,
+      etag: `etag-${version}`,
+      saved_etag: null,
+      order_etag: "order",
+      app_config_etag: "config",
+      version,
+    },
+    cells: new Map(),
+  };
+}
+
+function connect(store: ReturnType<typeof createStore>, current: Document) {
+  store.set(
+    activeNotebookReplicaAtom,
+    partial<NotebookReplica>({ documentAtom: atom(current) }, "replica"),
+  );
+}
+
+describe("appConfigAtom", () => {
+  it("reads the page's config until the host document arrives", () => {
+    const store = createStore();
+    expect(store.get(appConfigAtom).width).toBe("compact");
+    store.set(pageAppConfigAtom, { width: "full" });
+    expect(store.get(appConfigAtom).width).toBe("full");
+    connect(store, document({ width: "compact" }));
+    expect(store.get(appConfigAtom).width).toBe("compact");
+  });
+
+  it("fills what the host document leaves out with Python's defaults", () => {
+    const store = createStore();
+    store.set(pageAppConfigAtom, { width: "full" });
+    // The document carries only the options that differ from the defaults.
+    connect(store, document({}));
+    expect(store.get(appConfigAtom)).toEqual({
+      width: "compact",
+      auto_download: [],
+      sql_output: "auto",
+    });
+  });
+
+  it("keeps the same object while the record is unchanged", () => {
+    const store = createStore();
+    connect(store, document({ width: "full" }, 1));
+    const first = store.get(appConfigAtom);
+    connect(store, document({ width: "full" }, 2));
+    expect(store.get(appConfigAtom)).toBe(first);
+    connect(store, document({ width: "medium" }, 3));
+    expect(store.get(appConfigAtom).width).toBe("medium");
+  });
+});