@marimo-team/islands 0.23.17-dev8 → 0.24.0

package/src/core/codemirror/code-lens/extension.ts

@@ -29,12 +29,108 @@ import { mountLensPopover } from "./popover";
 // Delay (in ms) before showing the hover popover, matching the app's
 // tooltip delay
 export const CODE_LENS_HOVER_DELAY_MS = 400;
+// Grace period (in ms) after the pointer leaves the icon (or the popover)
+// before hiding, so the pointer can travel from the icon into the popover
+// without it closing underneath
+export const CODE_LENS_HOVER_GRACE_MS = 200;
 
 const setCodeLenses = StateEffect.define<CodeLensSpec[]>();
 const setHoveredLens = StateEffect.define<CodeLensSpec | null>();
 
-// Pending hover timers, keyed by widget element so `destroy` can cancel them
-const HOVER_TIMERS = new WeakMap<HTMLElement, number>();
+function specEquals(a: CodeLensSpec, b: CodeLensSpec): boolean {
+  return (
+    a.pos === b.pos &&
+    a.kind === b.kind &&
+    a.name === b.name &&
+    a.cache?.boundName === b.cache?.boundName &&
+    a.cache?.cacheName === b.cache?.cacheName
+  );
+}
+
+/**
+ * Per-view hover state shared by the lens icons and their popover, so the
+ * popover stays open while the pointer is over either of them.
+ */
+class LensHoverController {
+  private readonly view: EditorView;
+  private showTimer: number | undefined;
+  private hideTimer: number | undefined;
+
+  constructor(view: EditorView) {
+    this.view = view;
+  }
+
+  /** Pointer entered a lens icon */
+  enterLens(spec: CodeLensSpec, icon: HTMLElement): void {
+    this.clearTimers();
+    dismissEditorHoverTooltips(this.view, icon);
+    const hovered = this.view.state.field(codeLensHoverField, false);
+    if (hovered && specEquals(hovered.spec, spec)) {
+      // Already showing this lens (e.g. pointer came back from the popover)
+      return;
+    }
+    this.showTimer = window.setTimeout(() => {
+      this.showTimer = undefined;
+      this.view.dispatch({ effects: setHoveredLens.of(spec) });
+    }, CODE_LENS_HOVER_DELAY_MS);
+  }
+
+  /** Pointer left a lens icon or the popover */
+  leave(): void {
+    this.clearTimers();
+    this.hideTimer = window.setTimeout(() => {
+      this.hideTimer = undefined;
+      this.hide();
+    }, CODE_LENS_HOVER_GRACE_MS);
+  }
+
+  /** Pointer entered the popover */
+  enterPopover(): void {
+    window.clearTimeout(this.hideTimer);
+    this.hideTimer = undefined;
+  }
+
+  hide(): void {
+    this.clearTimers();
+    if (this.view.state.field(codeLensHoverField, false)) {
+      this.view.dispatch({ effects: setHoveredLens.of(null) });
+    }
+  }
+
+  destroy(): void {
+    this.clearTimers();
+  }
+
+  private clearTimers(): void {
+    window.clearTimeout(this.showTimer);
+    window.clearTimeout(this.hideTimer);
+    this.showTimer = undefined;
+    this.hideTimer = undefined;
+  }
+}
+
+const lensHoverPlugin = ViewPlugin.define(
+  (view) => new LensHoverController(view),
+);
+
+/**
+ * Keeps the editor's own hover tooltips (LSP / documentation hints) from
+ * showing for the token the icon sits after.
+ *
+ * CodeMirror's `hoverTooltip` tracks the last `mousemove` seen on `view.dom`
+ * and, once the pointer has rested for its hover delay, opens a tooltip for
+ * that position. The icon swallows `mousemove` (see the widget), so a pointer
+ * resting on the icon looks to CodeMirror like a pointer resting on the last
+ * character it crossed on the way in, and any hover already open for that
+ * token never gets closed. A `mouseleave` on `view.dom` is the signal it uses
+ * to cancel a pending hover and close an open one, so synthesize that.
+ */
+function dismissEditorHoverTooltips(
+  view: EditorView,
+  relatedTarget: HTMLElement,
+): void {
+  view.dom.dispatchEvent(new MouseEvent("mouseleave", { relatedTarget }));
+}
 
 class CodeLensWidget extends WidgetType {
   private readonly spec: CodeLensSpec;
@@ -45,15 +141,9 @@ class CodeLensWidget extends WidgetType {
   }
 
   override eq(other: CodeLensWidget): boolean {
-    return (
-      // `pos` is captured by the DOM hover/click handlers, so a reused widget
-      // whose anchor moved must not be treated as equal
-      this.spec.pos === other.spec.pos &&
-      this.spec.kind === other.spec.kind &&
-      this.spec.name === other.spec.name &&
-      this.spec.cache?.boundName === other.spec.cache?.boundName &&
-      this.spec.cache?.cacheName === other.spec.cache?.cacheName
-    );
+    // `pos` is captured by the DOM hover/click handlers, so a reused widget
+    // whose anchor moved must not be treated as equal
+    return specEquals(this.spec, other.spec);
   }
 
   override toDOM(view: EditorView): HTMLElement {
@@ -67,23 +157,13 @@ class CodeLensWidget extends WidgetType {
     element.setAttribute("aria-label", LENS_TOOLTIPS[spec.kind]);
     // Static, trusted markup (see icons.ts)
     element.innerHTML = LENS_ICONS[spec.kind];
-    const hidePopover = () => {
-      window.clearTimeout(HOVER_TIMERS.get(element));
-      HOVER_TIMERS.delete(element);
-      if (view.state.field(codeLensHoverField, false)) {
-        view.dispatch({ effects: setHoveredLens.of(null) });
-      }
-    };
-    element.onmouseenter = () => {
-      const timer = window.setTimeout(() => {
-        view.dispatch({ effects: setHoveredLens.of(spec) });
-      }, CODE_LENS_HOVER_DELAY_MS);
-      HOVER_TIMERS.set(element, timer);
-    };
-    element.onmouseleave = hidePopover;
+    const hover = () => view.plugin(lensHoverPlugin);
+    const hidePopover = () => hover()?.hide();
+    element.onmouseenter = () => hover()?.enterLens(spec, element);
+    element.onmouseleave = () => hover()?.leave();
     element.onmousemove = (event) => {
-      // Keep the editor's built-in hover documentation tooltip from also
-      // triggering over the icon
+      // Keep the editor's built-in hover tooltip from re-arming while the
+      // pointer is over the icon (see `dismissEditorHoverTooltips`)
       event.stopPropagation();
     };
     element.onmousedown = (event) => {
@@ -108,48 +188,58 @@ class CodeLensWidget extends WidgetType {
     return element;
   }
 
-  override destroy(dom: HTMLElement): void {
-    window.clearTimeout(HOVER_TIMERS.get(dom));
-    HOVER_TIMERS.delete(dom);
-  }
-
   override ignoreEvent(): boolean {
     // The widget handles its own events
     return true;
   }
 }
 
-function createLensTooltip(spec: CodeLensSpec): Tooltip {
-  return {
+interface HoveredLens {
+  spec: CodeLensSpec;
+  tooltip: Tooltip;
+}
+
+function createHoveredLens(spec: CodeLensSpec): HoveredLens {
+  const tooltip: Tooltip = {
     pos: spec.pos,
     above: true,
-    create: () => {
+    create: (view) => {
       const dom = document.createElement("div");
       // Same chrome as the SQL completion/hover popovers
       dom.classList.add("mo-cm-tooltip", "docs-documentation");
+      // The popover is scrollable, so keep it open while the pointer is
+      // inside it
+      dom.onmouseenter = () => view.plugin(lensHoverPlugin)?.enterPopover();
+      dom.onmouseleave = () => view.plugin(lensHoverPlugin)?.leave();
       const unmount = mountLensPopover(dom, spec);
       return { dom, resize: false, destroy: unmount };
     },
   };
+  return { spec, tooltip };
 }
 
-const codeLensHoverField = StateField.define<Tooltip | null>({
+const codeLensHoverField = StateField.define<HoveredLens | null>({
   create() {
     return null;
   },
-  update(tooltip, tr) {
+  update(hovered, tr) {
     for (const effect of tr.effects) {
       if (effect.is(setHoveredLens)) {
-        return effect.value ? createLensTooltip(effect.value) : null;
+        return effect.value ? createHoveredLens(effect.value) : null;
       }
-      if (effect.is(setCodeLenses)) {
-        // Lenses were rebuilt; the hovered widget may be gone
-        return null;
+      if (effect.is(setCodeLenses) && hovered) {
+        // Lenses were rebuilt (e.g. after a store update); keep the popover
+        // only if the hovered lens is still there, unchanged
+        const stillPresent = effect.value.some((spec) =>
+          specEquals(spec, hovered.spec),
+        );
+        return stillPresent ? hovered : null;
       }
     }
-    return tr.docChanged ? null : tooltip;
+    return tr.docChanged ? null : hovered;
   },
-  provide: (field) => showTooltip.from(field),
+  provide: (field) =>
+    showTooltip.from(field, (hovered) => hovered?.tooltip ?? null),
 });
 
 const codeLensField = StateField.define<DecorationSet>({
@@ -263,13 +353,19 @@ class CodeLensPlugin {
   }
 }
 
+// Padding around the 12px icon so the hover/click target isn't tiny
+const LENS_HIT_PADDING = "3px";
+
 const codeLensTheme = EditorView.baseTheme({
   ".mo-code-lens": {
     display: "inline-flex",
     verticalAlign: "baseline",
     // Optically center the icon against the text
     transform: "translateY(1.5px)",
-    marginLeft: "0.3em",
+    // Enlarge the hit area without affecting layout: the padding is pulled
+    // back in with negative vertical margins so the line height is unchanged
+    padding: LENS_HIT_PADDING,
+    margin: `-${LENS_HIT_PADDING} 0 -${LENS_HIT_PADDING} calc(0.3em - ${LENS_HIT_PADDING})`,
     cursor: "pointer",
     opacity: "0.5",
   },
@@ -281,15 +377,16 @@ const codeLensTheme = EditorView.baseTheme({
 /**
  * Inline icons linking datasource/bucket variables and `mo.cache` /
  * `mo.persistent_cache` calls to their panels.
- * Gated behind the `editor_code_lens` feature flag.
+ * Configurable via the `display.code_lens` user config (on by default).
  */
-export function codeLensBundle(cellId: CellId): Extension {
-  if (!getFeatureFlag("editor_code_lens")) {
+export function codeLensBundle(cellId: CellId, enabled = true): Extension {
+  if (!enabled) {
     return [];
   }
   return [
     codeLensField,
     codeLensHoverField,
+    lensHoverPlugin,
     ViewPlugin.define(
       (view) => new CodeLensPlugin(view, cellId, getFeatureFlag("cache_panel")),
     ),

package/src/core/codemirror/find-replace/search-highlight.ts

@@ -140,11 +140,16 @@ export const searchHighlighter = ViewPlugin.fromClass(
 );
 
 export const highlightTheme = EditorView.baseTheme({
-  "&light .cm-searchMatch": { backgroundColor: "#99ff7780" },
-  "&dark .cm-searchMatch": { backgroundColor: "#22bb0070" },
+  "&light .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-light)",
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-dark)",
+  },
 
   "&light .cm-searchMatch-selected": { backgroundColor: "transparent" },
   "&dark .cm-searchMatch.cm-searchMatch-selected": {
-    backgroundColor: "#6199ff88 !important",
+    backgroundColor:
+      "var(--cm-search-match-selected-background-dark) !important",
   },
 });

package/src/core/codemirror/language/languages/sql/__tests__/renderers.test.tsx

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type {
+  DataTable,
+  DataTableColumn,
+  DataType,
+} from "@/core/kernel/messages";
+import { renderColumnInfo, renderTableInfo } from "../renderers";
+
+const geometryColumn = {
+  name: "geom",
+  type: "geometry" as DataType,
+  external_type: "geometry",
+  sample_values: [],
+} as DataTableColumn;
+
+describe("SQL renderers", () => {
+  it("renders table information with an unrecognized column type", () => {
+    const table: DataTable = {
+      name: "shapes",
+      type: "table",
+      source: "local",
+      source_type: "local",
+      num_rows: null,
+      num_columns: 1,
+      variable_name: null,
+      columns: [geometryColumn],
+      primary_keys: [],
+      indexes: [],
+    };
+
+    const result = render(renderTableInfo(table));
+
+    expect(result.container.querySelector("svg")).not.toBeNull();
+  });
+
+  it("renders column information with an unrecognized column type", () => {
+    const result = render(renderColumnInfo(geometryColumn));
+
+    expect(result.container.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/core/codemirror/language/languages/sql/renderers.tsx

@@ -13,7 +13,7 @@ import {
   TableIcon,
   ViewIcon,
 } from "@/components/databases/namespace-icons";
-import { DATA_TYPE_ICON } from "@/components/datasets/icons";
+import { DATA_TYPE_ICON, resolveDataType } from "@/components/datasets/icons";
 import { Badge } from "@/components/ui/badge";
 import {
   type ConnectionName,
@@ -149,7 +149,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
   );
 
   const columnItems = table.columns.map((column) => {
-    const TypeIcon = DATA_TYPE_ICON[column.type];
+    const TypeIcon = DATA_TYPE_ICON[resolveDataType(column.type)];
     return (
       <div
         key={column.name}
@@ -288,7 +288,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
 };
 
 export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
-  const TypeIcon = DATA_TYPE_ICON[column.type];
+  const TypeIcon = DATA_TYPE_ICON[resolveDataType(column.type)];
 
   const typeBadge = (
     <Badge

package/src/core/codemirror/theme/__tests__/light.test.ts

@@ -1,136 +1,72 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type Tag, tags as t } from "@lezer/highlight";
-import { describe, expect, it } from "vitest";
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it } from "vitest";
+import { darkTheme } from "../dark";
 import { lightTheme } from "../light";
 
-// Helper function to get theme configuration from the source
-const getThemeConfig = () => ({
-  variant: "light",
-  settings: {
-    background: "#ffffff",
-    foreground: "#000000",
-    caret: "#000000",
-    selection: "#d7d4f0",
-    lineHighlight: "#cceeff44",
-    gutterBackground: "var(--color-background)",
-    gutterForeground: "var(--gray-10)",
-  },
-  styles: [
-    { tag: t.comment, color: "#708090" },
-    { tag: t.variableName, color: "#000000" },
-    { tag: [t.string, t.special(t.brace)], color: "#a11" },
-    { tag: t.number, color: "#164" },
-    { tag: t.bool, color: "#219" },
-    { tag: t.null, color: "#219" },
-    { tag: t.keyword, color: "#708", fontWeight: 500 },
-    { tag: t.className, color: "#00f" },
-    { tag: t.definition(t.typeName), color: "#00f" },
-    { tag: t.typeName, color: "#085" },
-    { tag: t.angleBracket, color: "#000000" },
-    { tag: t.tagName, color: "#170" },
-    { tag: t.attributeName, color: "#00c" },
-    { tag: t.operator, color: "#a2f", fontWeight: 500 },
-    { tag: [t.function(t.variableName)], color: "#00c" },
-    { tag: [t.propertyName], color: "#05a" },
-  ],
-});
-
-describe("lightTheme", () => {
-  it("should export a theme", () => {
-    expect(lightTheme).toBeDefined();
-    expect(typeof lightTheme).toBe("object");
-  });
-
-  describe("theme configuration", () => {
-    const config = getThemeConfig();
-
-    it("should have correct basic settings", () => {
-      expect(config.variant).toBe("light");
-      expect(config.settings).toEqual({
-        background: "#ffffff",
-        foreground: "#000000",
-        caret: "#000000",
-        selection: "#d7d4f0",
-        lineHighlight: "#cceeff44",
-        gutterBackground: "var(--color-background)",
-        gutterForeground: "var(--gray-10)",
-      });
-    });
+const mounted: Array<{ host: HTMLDivElement; view: EditorView }> = [];
 
-    describe("syntax highlighting", () => {
-      const findStyle = (tag: Tag | readonly Tag[]) =>
-        config.styles.find((s) =>
-          Array.isArray(s.tag) ? s.tag.includes(tag as Tag) : s.tag === tag,
-        );
+function mountTheme(extension: Extension) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = host.attachShadow({ mode: "open" });
+  const parent = document.createElement("div");
+  root.append(parent);
+  const view = new EditorView({ extensions: extension, parent, root });
+  mounted.push({ host, view });
 
-      it("should style comments", () => {
-        expect(findStyle(t.comment)).toEqual({
-          tag: t.comment,
-          color: "#708090",
-        });
-      });
+  const style = root.querySelector("style");
+  if (!style) {
+    throw new Error("CodeMirror did not mount its theme styles");
+  }
+  return { css: style.textContent ?? "", view };
+}
 
-      it("should style strings", () => {
-        const style = findStyle(t.string);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#a11");
-        expect(Array.isArray(style?.tag)).toBe(true);
-        expect(style?.tag).toContain(t.string);
-        expect(style?.tag).toContain(t.special(t.brace));
-      });
-
-      it("should style numbers and boolean values", () => {
-        expect(findStyle(t.number)).toEqual({
-          tag: t.number,
-          color: "#164",
-        });
-        expect(findStyle(t.bool)).toEqual({
-          tag: t.bool,
-          color: "#219",
-        });
-      });
-
-      it("should style keywords with emphasis", () => {
-        expect(findStyle(t.keyword)).toEqual({
-          tag: t.keyword,
-          color: "#708",
-          fontWeight: 500,
-        });
-      });
+afterEach(() => {
+  for (const { host, view } of mounted.splice(0)) {
+    view.destroy();
+    host.remove();
+  }
+});
 
-      it("should style operators with emphasis", () => {
-        expect(findStyle(t.operator)).toEqual({
-          tag: t.operator,
-          color: "#a2f",
-          fontWeight: 500,
-        });
-      });
+const themeCases = [
+  {
+    name: "light",
+    extension: lightTheme,
+    dark: false,
+    selectionAlias: "var(--cm-selection-background-light)",
+    reactiveColor: "var(--cm-reactive-reference-color-light)",
+  },
+  {
+    name: "dark",
+    extension: darkTheme,
+    dark: true,
+    selectionAlias: "var(--cm-selection-background-dark)",
+    reactiveColor: "var(--cm-reactive-reference-color-dark)",
+  },
+] as const;
 
-      it("should style class and type names", () => {
-        expect(findStyle(t.className)).toEqual({
-          tag: t.className,
-          color: "#00f",
-        });
-        expect(findStyle(t.typeName)).toEqual({
-          tag: t.typeName,
-          color: "#085",
-        });
-      });
+describe.each(themeCases)("$name theme", (theme) => {
+  it("uses the production theme tokens", () => {
+    const { css, view } = mountTheme(theme.extension);
 
-      it("should style function names", () => {
-        const style = findStyle(t.function(t.variableName));
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#00c");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
+    expect(view.state.facet(EditorView.darkTheme)).toBe(theme.dark);
+    expect(css).toContain(
+      `--cm-selection-background: ${theme.selectionAlias};`,
+    );
+    expect(css).toContain("background-color: var(--cm-selection-background);");
+    expect(css).toContain(`color: ${theme.reactiveColor};`);
+    expect(css).toContain(
+      "border-bottom: 2px solid var(--cm-reactive-reference-border-color);",
+    );
 
-      it("should style property names", () => {
-        const style = findStyle(t.propertyName);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#05a");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
-    });
+    const hoverRule = css
+      .split("\n")
+      .find((rule) => rule.includes(".mo-cm-reactive-reference-hover"));
+    expect(hoverRule).toBeDefined();
+    expect(hoverRule).toContain("cursor: pointer;");
+    expect(hoverRule).not.toContain("border-bottom");
   });
 });

package/src/core/codemirror/theme/dark.ts

@@ -11,7 +11,7 @@ export const darkTheme = [
       background: "var(--cm-background)",
       foreground: "#abb2bf",
       caret: "#528bff",
-      selection: "#3E4451",
+      selection: "var(--cm-selection-background)",
       lineHighlight: "#2c313c",
       gutterBackground: "var(--color-background)",
       gutterForeground: "var(--gray-10)",
@@ -36,15 +36,16 @@ export const darkTheme = [
     ],
   }),
   EditorView.theme({
+    "&": {
+      "--cm-selection-background": "var(--cm-selection-background-dark)",
+    },
     ".mo-cm-reactive-reference": {
       fontWeight: "400",
-      color: "#2a7aa5",
-      borderBottom: "2px solid #bad3de",
+      color: "var(--cm-reactive-reference-color-dark)",
+      borderBottom: "2px solid var(--cm-reactive-reference-border-color)",
     },
     ".mo-cm-reactive-reference-hover": {
       cursor: "pointer",
-      borderBottomWidth: "3px",
-      borderBottomColor: "#4a90a5",
     },
   }),
 ];

package/src/core/codemirror/theme/light.ts

@@ -11,7 +11,7 @@ export const lightTheme = [
       background: "#ffffff",
       foreground: "#000000",
       caret: "#000000",
-      selection: "#d7d4f0",
+      selection: "var(--cm-selection-background)",
       lineHighlight: "#cceeff44",
       gutterBackground: "var(--color-background)",
       gutterForeground: "var(--gray-10)",
@@ -45,14 +45,16 @@ export const lightTheme = [
     ],
   }),
   EditorView.theme({
+    "&": {
+      "--cm-selection-background": "var(--cm-selection-background-light)",
+    },
     ".mo-cm-reactive-reference": {
       fontWeight: "400",
-      color: "#005f87",
-      borderBottom: "2px solid #bad3de",
+      color: "var(--cm-reactive-reference-color-light)",
+      borderBottom: "2px solid var(--cm-reactive-reference-border-color)",
     },
     ".mo-cm-reactive-reference-hover": {
       cursor: "pointer",
-      borderBottomWidth: "3px",
     },
   }),
 ];

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

@@ -66,6 +66,7 @@ test("default UserConfig - empty", () => {
       "display": {
         "cell_output": "below",
         "code_editor_font_size": 14,
+        "code_lens": true,
         "dataframes": "rich",
         "default_table_max_columns": 50,
         "default_table_page_size": 10,
@@ -139,6 +140,7 @@ test("default UserConfig - one level", () => {
       "display": {
         "cell_output": "below",
         "code_editor_font_size": 14,
+        "code_lens": true,
         "dataframes": "rich",
         "default_table_max_columns": 50,
         "default_table_page_size": 10,

package/src/core/config/config-schema.ts

@@ -154,6 +154,7 @@ export const UserConfigSchema = z
           }),
         locale: z.string().nullable().optional(),
         reference_highlighting: z.boolean().prefault(true),
+        code_lens: z.boolean().prefault(true),
       })
       .prefault({}),
     package_management: z

package/src/core/config/feature-flag.tsx

@@ -13,7 +13,6 @@ export interface ExperimentalFeatures {
   external_agents: boolean;
   debugger: boolean; // Live frame-watching debugger (gutter breakpoints + pdb)
   line_timing: boolean; // Green active-line highlight + per-line elapsed timer
-  editor_code_lens: boolean; // Inline icons in cell editors linking datasources/buckets/caches to their panels
   // Add new feature flags here
 }
 
@@ -25,7 +24,6 @@ const defaultValues: ExperimentalFeatures = {
   external_agents: import.meta.env.DEV,
   debugger: false,
   line_timing: false,
-  editor_code_lens: import.meta.env.DEV,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(