@marimo-team/islands 0.20.5-dev74 → 0.20.5-dev76

package/dist/main.js

@@ -11701,6 +11701,7 @@ ${d.join("\n")}`;
   function sanitizeBigInt(e) {
     return typeof e == "object" && e && "$bigint" in e && typeof e.$bigint == "string" ? BigInt(e.$bigint) : e;
   }
+  const OBJECT_ID_ATTR = "object-id", RANDOM_ID_ATTR = "random-id";
   var lowercase = "abcdefghijklmnopqrstuvwxyz", alphabet = lowercase + lowercase.toUpperCase(), seen = /* @__PURE__ */ new Set();
   const SCRATCH_CELL_ID = "__scratch__", SETUP_CELL_ID = "setup", CellId = {
     create() {
@@ -11740,7 +11741,7 @@ ${d.join("\n")}`;
   }
   const UIElementId = {
     parse(e) {
-      return e.getAttribute("object-id");
+      return e.getAttribute(OBJECT_ID_ATTR);
     },
     parseOrThrow(e) {
       let r = UIElementId.parse(e);
@@ -61588,7 +61589,7 @@ ${O}`,
       }
       static get observedAttributes() {
         return [
-          "random-id"
+          RANDOM_ID_ATTR
         ];
       }
       attributeChangedCallback(e2, r, c) {
@@ -61969,7 +61970,7 @@ ${O}`,
       }), r[7] = f2, r[8] = _2), _2;
     }
     let w;
-    r[9] === e.host ? w = r[10] : (w = (_a3 = e.host.closest("[random-id]")) == null ? void 0 : _a3.getAttribute("random-id"), r[9] = e.host, r[10] = w);
+    r[9] === e.host ? w = r[10] : (w = (_a3 = e.host.closest(`[${RANDOM_ID_ATTR}]`)) == null ? void 0 : _a3.getAttribute(RANDOM_ID_ATTR), r[9] = e.host, r[10] = w);
     let E = w ?? c, O;
     return r[11] !== _ || r[12] !== y.default || r[13] !== E || r[14] !== f ? (O = (0, import_jsx_runtime.jsx)(LoadedSlot, {
       widget: y.default,
@@ -70719,7 +70720,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev74"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev76"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -81049,6 +81050,7 @@ ${c}
     children: (0, import_jsx_runtime.jsx)(LazyDataTableComponent, {
       isLazy: e.data.lazy,
       preload: e.data.preload,
+      host: e.host,
       children: (0, import_jsx_runtime.jsx)(LoadingDataTableComponent, {
         ...e.data,
         ...e.functions,
@@ -81061,24 +81063,43 @@ ${c}
       })
     })
   }));
+  var previewedTables = /* @__PURE__ */ new Map();
+  function wasTablePreviewed(e, r) {
+    return e != null && r != null && previewedTables.get(e) === r;
+  }
+  function markTablePreviewed(e, r) {
+    e != null && r != null && previewedTables.set(e, r);
+  }
   var LazyDataTableComponent = (e) => {
-    let r = (0, import_compiler_runtime$58.c)(1), { isLazy: c, children: d, preload: f } = e, [_, v] = (0, import_react.useState)(c && !f);
-    if (_) {
+    var _a3;
+    let r = (0, import_compiler_runtime$58.c)(13), { isLazy: c, children: d, preload: f, host: _ } = e, v, y, S, w;
+    if (r[0] !== _ || r[1] !== c || r[2] !== f) {
+      let e2 = _.closest(`[${OBJECT_ID_ATTR}]`);
+      w = e2 ? UIElementId.parse(e2) : null, v = (_a3 = _.closest(`[${RANDOM_ID_ATTR}]`)) == null ? void 0 : _a3.getAttribute(RANDOM_ID_ATTR), y = import_react.useState, S = c && !f && !wasTablePreviewed(w, v), r[0] = _, r[1] = c, r[2] = f, r[3] = v, r[4] = y, r[5] = S, r[6] = w;
+    } else v = r[3], y = r[4], S = r[5], w = r[6];
+    let [E, O] = y(S);
+    if (E) {
       let e2;
-      return r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e2 = (0, import_jsx_runtime.jsx)("div", {
+      r[7] !== v || r[8] !== w ? (e2 = () => {
+        markTablePreviewed(w, v), O(false);
+      }, r[7] = v, r[8] = w, r[9] = e2) : e2 = r[9];
+      let c2;
+      r[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c2 = (0, import_jsx_runtime.jsx)(Table2, {
+        className: "mr-2 h-4 w-4"
+      }), r[10] = c2) : c2 = r[10];
+      let d2;
+      return r[11] === e2 ? d2 = r[12] : (d2 = (0, import_jsx_runtime.jsx)("div", {
         className: "flex h-20 items-center justify-center",
         children: (0, import_jsx_runtime.jsxs)(Button, {
           variant: "outline",
           size: "xs",
-          onClick: () => v(false),
+          onClick: e2,
           children: [
-            (0, import_jsx_runtime.jsx)(Table2, {
-              className: "mr-2 h-4 w-4"
-            }),
+            c2,
             "Preview data"
           ]
         })
-      }), r[0] = e2) : e2 = r[0], e2;
+      }), r[11] = e2, r[12] = d2), d2;
     }
     return d;
   };
@@ -84467,7 +84488,7 @@ ${c}
   var PARENT_DIRECTORY = "..";
   const FileBrowser = ({ value: e, setValue: r, initialPath: c, selectionMode: d, multiple: f, label: _, restrictNavigation: v, list_directory: y, host: S }) => {
     var _a3;
-    let [E, O] = useInternalStateWithSync(c), [M, I] = (0, import_react.useState)("Select all"), [z, G] = (0, import_react.useState)(false), [q, IY] = (0, import_react.useState)(false), LY = (_a3 = S.closest("[random-id]")) == null ? void 0 : _a3.getAttribute("random-id"), { data: RY, error: zY, isPending: BY } = useAsyncData(() => y({
+    let [E, O] = useInternalStateWithSync(c), [M, I] = (0, import_react.useState)("Select all"), [z, G] = (0, import_react.useState)(false), [q, IY] = (0, import_react.useState)(false), LY = (_a3 = S.closest(`[${RANDOM_ID_ATTR}]`)) == null ? void 0 : _a3.getAttribute(RANDOM_ID_ATTR), { data: RY, error: zY, isPending: BY } = useAsyncData(() => y({
       path: E
     }), [
       E,
@@ -101391,7 +101412,7 @@ ${c}
       return extractIslandCodeFromEmbed(this);
     }
     connectedCallback() {
-      let r = this.querySelectorOrThrow(_l2.outputTagName).innerHTML, c = this.getOptionalEditor(), d = this.code, f = c ? () => `${UI_ELEMENT_REGISTRY.lookupValue(c.props["object-id"])}` : () => d;
+      let r = this.querySelectorOrThrow(_l2.outputTagName).innerHTML, c = this.getOptionalEditor(), d = this.code, f = c ? () => `${UI_ELEMENT_REGISTRY.lookupValue(c.props[OBJECT_ID_ATTR])}` : () => d;
       this.root = import_client.createRoot(this), this.render(r, f, c);
     }
     render(e, r, c) {

package/package.json

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

package/src/core/cells/ids.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-redeclare */
 
+import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { invariant } from "@/utils/invariant";
 import type { TypedString } from "../../utils/typed";
 
@@ -110,7 +111,7 @@ export function findCellId(element: HTMLElement): CellId | null {
 export type UIElementId = `${CellId}-${string}`;
 export const UIElementId = {
   parse(element: Element): UIElementId | null {
-    return element.getAttribute("object-id") as UIElementId | null;
+    return element.getAttribute(OBJECT_ID_ATTR) as UIElementId | null;
   },
   parseOrThrow(element: Element): UIElementId {
     const id = UIElementId.parse(element);

package/src/core/dom/ui-element-constants.ts

@@ -0,0 +1,15 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Stable identifier for a UI element, deterministic across re-executions
+ * of the same cell (based on cell ID + creation order).
+ * Used to synchronize multiple instances and kernel state.
+ */
+export const OBJECT_ID_ATTR = "object-id";
+
+/**
+ * Random token that changes every time a UI element is constructed
+ * (i.e., every cell execution). Used to detect stale elements and
+ * force re-renders when a cell re-runs.
+ */
+export const RANDOM_ID_ATTR = "random-id";

package/src/core/dom/ui-element.ts

@@ -8,6 +8,7 @@ import {
   MarimoValueInputEvent,
   type MarimoValueInputEventType,
 } from "./events";
+import { RANDOM_ID_ATTR } from "./ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "./uiregistry";
 
 import "./ui-element.css";
@@ -189,7 +190,7 @@ export function initializeUIElement() {
     // used like a React key. If the random-id changes, we need to unmount and
     // remount its child.
     static get observedAttributes() {
-      return ["random-id"];
+      return [RANDOM_ID_ATTR];
     }
 
     attributeChangedCallback(
@@ -199,7 +200,7 @@ export function initializeUIElement() {
     ) {
       if (this.initialized) {
         const hasChanged = oldValue !== newValue;
-        if (name === "random-id" && hasChanged) {
+        if (name === RANDOM_ID_ATTR && hasChanged) {
           // deregister/clean-up this instance
           this.disconnectedCallback();
           // remove and re-add its child to force it to re-render; note that

package/src/core/islands/components/web-components.tsx

@@ -6,6 +6,7 @@ import ReactDOM, { type Root } from "react-dom/client";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
+import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -60,7 +61,7 @@ export class MarimoIslandElement extends HTMLElement {
     const codeCallback: () => string = optionalEditor
       ? () =>
           `${UI_ELEMENT_REGISTRY.lookupValue(
-            optionalEditor.props["object-id"],
+            optionalEditor.props[OBJECT_ID_ATTR],
           )}`
       : () => code;
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -60,7 +60,11 @@ import { ContextAwarePanelItem } from "@/components/editor/chrome/panels/context
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
-import { type CellId, findCellId } from "@/core/cells/ids";
+import { type CellId, findCellId, UIElementId } from "@/core/cells/ids";
+import {
+  OBJECT_ID_ATTR,
+  RANDOM_ID_ATTR,
+} from "@/core/dom/ui-element-constants";
 import { slotsController } from "@/core/slots/slots";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
@@ -361,6 +365,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         <LazyDataTableComponent
           isLazy={props.data.lazy}
           preload={props.data.preload}
+          host={props.host}
         >
           <LoadingDataTableComponent
             {...props.data}
@@ -377,21 +382,66 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
     );
   });
 
+/**
+ * Tracks which lazy tables have been previewed across remounts (e.g. tab switches).
+ * Keyed by uiElementId (stable across remounts) with randomId as value
+ * (changes on cell re-execution, so stale entries are naturally invalidated).
+ */
+const previewedTables = new Map<UIElementId, string>();
+
+function wasTablePreviewed(
+  uiElementId: UIElementId | null | undefined,
+  randomId: string | null | undefined,
+): boolean {
+  return (
+    uiElementId != null &&
+    randomId != null &&
+    previewedTables.get(uiElementId) === randomId
+  );
+}
+
+function markTablePreviewed(
+  uiElementId: UIElementId | null | undefined,
+  randomId: string | null | undefined,
+): void {
+  if (uiElementId != null && randomId != null) {
+    previewedTables.set(uiElementId, randomId);
+  }
+}
+
 const LazyDataTableComponent = ({
   isLazy: initialIsLazy,
   children,
   preload,
+  host,
 }: {
   isLazy: boolean;
   children: React.ReactNode;
   preload: boolean;
+  host: HTMLElement;
 }) => {
-  const [isLazy, setIsLazy] = useState(initialIsLazy && !preload);
+  const parentElement = host.closest(`[${OBJECT_ID_ATTR}]`);
+  const uiElementId = parentElement ? UIElementId.parse(parentElement) : null;
+
+  const randomId = host
+    .closest(`[${RANDOM_ID_ATTR}]`)
+    ?.getAttribute(RANDOM_ID_ATTR);
+
+  const [isLazy, setIsLazy] = useState(
+    initialIsLazy && !preload && !wasTablePreviewed(uiElementId, randomId),
+  );
 
   if (isLazy) {
     return (
       <div className="flex h-20 items-center justify-center">
-        <Button variant="outline" size="xs" onClick={() => setIsLazy(false)}>
+        <Button
+          variant="outline"
+          size="xs"
+          onClick={() => {
+            markTablePreviewed(uiElementId, randomId);
+            setIsLazy(false);
+          }}
+        >
           <Table2Icon className="mr-2 h-4 w-4" />
           Preview data
         </Button>

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
+import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
@@ -150,7 +151,9 @@ export const FileBrowser = ({
 
   // HACK: use the random-id of the host element to force a re-render
   // when the random-id changes, this means the cell was re-rendered
-  const randomId = host.closest("[random-id]")?.getAttribute("random-id");
+  const randomId = host
+    .closest(`[${RANDOM_ID_ATTR}]`)
+    ?.getAttribute(RANDOM_ID_ATTR);
 
   const { data, error, isPending } = useAsyncData(() => {
     return list_directory({ path: path });

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -4,6 +4,7 @@
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
+import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -145,7 +146,9 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
   }
 
   // Find the closest parent element with an attribute of `random-id`
-  const randomId = props.host.closest("[random-id]")?.getAttribute("random-id");
+  const randomId = props.host
+    .closest(`[${RANDOM_ID_ATTR}]`)
+    ?.getAttribute(RANDOM_ID_ATTR);
   const key = randomId ?? jsUrl;
 
   return (