@marimo-team/islands 0.23.17-dev56 → 0.23.17-dev58

package/dist/{common-04M48ICO.js → common-DG7DA_Ws.js}

@@ -36331,7 +36331,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.17-dev56");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.17-dev58");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as notebookOutline, $t as isUninstantiated, A as ChevronDownIcon, An
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BRZ_XYUw.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-j30bBjjN.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-BL1GSUUF.js";
-import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-04M48ICO.js";
+import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-DG7DA_Ws.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-Bw4wRj_O.js";
 import { t as Check } from "./check-58HHfHKy.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-DMLVGXRo.js";
@@ -38213,7 +38213,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CshIEPkn.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-BFcV7ayV.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a5;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{reveal-component-CshIEPkn.js → reveal-component-BFcV7ayV.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
 import { ut as outputIsStale } from "./html-to-image-BOiFHx3u.js";
 import "./chunk-5FQGJX7Z-BRZ_XYUw.js";
 import { u as createLucideIcon } from "./dist-j30bBjjN.js";
-import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-04M48ICO.js";
+import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-DG7DA_Ws.js";
 import { R as ChevronDown } from "./strings-DMLVGXRo.js";
 import { X as useDebouncedCallback } from "./input-BRE2a7Ay.js";
 import { v as kioskModeAtom } from "./toDate-BGM7kFtQ.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.17-dev56",
+  "version": "0.23.17-dev58",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/chat-panel.tsx

@@ -329,9 +329,9 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       },
       {
         value: "code_mode",
-        label: "Code Mode",
+        label: "Code Mode (beta)",
         subtitle:
-          "AI with access to the notebook's kernel. Can overwrite changes.",
+          "AI with access to the notebook's kernel. Potentially destructive.",
         Icon: CodeIcon,
       },
     ];

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

@@ -23,7 +23,11 @@ import type { StorageNamespace } from "@/core/storage/types";
 import { variablesAtom } from "@/core/variables/state";
 import type { Variables } from "@/core/variables/types";
 import { openLensTarget } from "../actions";
-import { CODE_LENS_HOVER_DELAY_MS, codeLensBundle } from "../extension";
+import {
+  CODE_LENS_HOVER_DELAY_MS,
+  CODE_LENS_HOVER_GRACE_MS,
+  codeLensBundle,
+} from "../extension";
 import { mountLensPopover } from "../popover";
 
 vi.mock("@/core/config/feature-flag", () => ({
@@ -236,9 +240,85 @@ describe("codeLensBundle", () => {
     );
 
     lens.dispatchEvent(new MouseEvent("mouseleave"));
+    // Not hidden immediately: the pointer may be on its way into the popover
+    expect(v.dom.querySelector(".mo-cm-tooltip")).not.toBeNull();
+    vi.advanceTimersByTime(CODE_LENS_HOVER_GRACE_MS);
+    expect(v.dom.querySelector(".mo-cm-tooltip")).toBeNull();
+  });
+
+  it("stays open while the pointer is over the popover", async () => {
+    seedStore({ tables: [DF_TABLE] });
+    const v = await mount("df = load()");
+    const lens = lenses(v)[0];
+
+    lens.dispatchEvent(new MouseEvent("mouseenter"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_DELAY_MS);
+    const popover = v.dom.querySelector<HTMLElement>(".mo-cm-tooltip");
+    expect(popover).not.toBeNull();
+
+    // Icon -> popover within the grace period
+    lens.dispatchEvent(new MouseEvent("mouseleave"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_GRACE_MS / 2);
+    popover?.dispatchEvent(new MouseEvent("mouseenter"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_GRACE_MS * 5);
+    expect(v.dom.querySelector(".mo-cm-tooltip")).toBe(popover);
+
+    // Popover -> icon: no re-show; the popover is kept as-is
+    popover?.dispatchEvent(new MouseEvent("mouseleave"));
+    lens.dispatchEvent(new MouseEvent("mouseenter"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_DELAY_MS * 2);
+    expect(v.dom.querySelector(".mo-cm-tooltip")).toBe(popover);
+    expect(mountLensPopover).toHaveBeenCalledTimes(1);
+
+    // Leaving the popover for good hides it after the grace period
+    lens.dispatchEvent(new MouseEvent("mouseleave"));
+    popover?.dispatchEvent(new MouseEvent("mouseenter"));
+    popover?.dispatchEvent(new MouseEvent("mouseleave"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_GRACE_MS);
+    expect(v.dom.querySelector(".mo-cm-tooltip")).toBeNull();
+  });
+
+  it("keeps the popover open across a lens rebuild for the same lens", async () => {
+    seedStore({ tables: [DF_TABLE] });
+    const v = await mount("df = load()");
+    const lens = lenses(v)[0];
+
+    lens.dispatchEvent(new MouseEvent("mouseenter"));
+    vi.advanceTimersByTime(CODE_LENS_HOVER_DELAY_MS);
+    const popover = v.dom.querySelector(".mo-cm-tooltip");
+    expect(popover).not.toBeNull();
+
+    // A store update triggers a (debounced) recompute of the same lenses
+    seedStore({ tables: [DF_TABLE] });
+    vi.advanceTimersByTime(300);
+    await Promise.resolve();
+    v.dispatch({});
+    expect(v.dom.querySelector(".mo-cm-tooltip")).toBe(popover);
+
+    // ...but a rebuild that drops the hovered lens closes it
+    seedStore({ tables: [] });
+    vi.advanceTimersByTime(300);
+    await Promise.resolve();
+    v.dispatch({});
+    expect(lenses(v)).toHaveLength(0);
     expect(v.dom.querySelector(".mo-cm-tooltip")).toBeNull();
   });
 
+  it("dismisses the editor's own hover tooltips when the icon is entered", async () => {
+    seedStore({ tables: [DF_TABLE] });
+    const v = await mount("df = load()");
+    const lens = lenses(v)[0];
+    // CodeMirror's `hoverTooltip` listens for `mouseleave` on `view.dom` to
+    // cancel a pending hover and close an open one
+    const onLeave = vi.fn();
+    v.dom.addEventListener("mouseleave", onLeave);
+
+    lens.dispatchEvent(new MouseEvent("mouseenter"));
+
+    expect(onLeave).toHaveBeenCalledTimes(1);
+    expect(onLeave.mock.calls[0][0].relatedTarget).toBe(lens);
+  });
+
   it("does not show a popover before the hover delay", async () => {
     seedStore({ tables: [DF_TABLE] });
     const v = await mount("df = load()");

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",
   },
@@ -290,6 +386,7 @@ export function codeLensBundle(cellId: CellId, enabled = true): Extension {
   return [
     codeLensField,
     codeLensHoverField,
+    lensHoverPlugin,
     ViewPlugin.define(
       (view) => new CodeLensPlugin(view, cellId, getFeatureFlag("cache_panel")),
     ),