@marimo-team/islands 0.20.3-dev79 → 0.20.3-dev82

package/dist/main.js

@@ -70347,7 +70347,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.3-dev79"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.3-dev82"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -78866,7 +78866,7 @@ ${c}
     resizeHandleEnabled: "data-panel-resize-handle-enabled",
     resizeHandleId: "data-panel-resize-handle-id",
     resizeHandleState: "data-resize-handle-state"
-  }, PRECISION = 10, useIsomorphicLayoutEffect$1 = import_react.useLayoutEffect, useId$8 = import_react.useId, wrappedUseId = typeof useId$8 == "function" ? useId$8 : () => null, counter = 0;
+  }, PRECISION = 10, useIsomorphicLayoutEffect = import_react.useLayoutEffect, useId$8 = import_react.useId, wrappedUseId = typeof useId$8 == "function" ? useId$8 : () => null, counter = 0;
   function useUniqueId(e = null) {
     let r = wrappedUseId(), c = (0, import_react.useRef)(e || r || null);
     return c.current === null && (c.current = "" + counter++), e ?? c.current;
@@ -78893,12 +78893,12 @@ ${c}
     });
     (0, import_react.useRef)({
       didLogMissingDefaultSizeWarning: false
-    }), useIsomorphicLayoutEffect$1(() => {
+    }), useIsomorphicLayoutEffect(() => {
       let { callbacks: e2, constraints: r2 } = qY.current, _2 = {
         ...r2
       };
       qY.current.id = KY, qY.current.idIsFromProps = v !== void 0, qY.current.order = M, e2.onCollapse = w, e2.onExpand = E, e2.onResize = O, r2.collapsedSize = c, r2.collapsible = d, r2.defaultSize = f, r2.maxSize = y, r2.minSize = S, (_2.collapsedSize !== r2.collapsedSize || _2.collapsible !== r2.collapsible || _2.maxSize !== r2.maxSize || _2.minSize !== r2.minSize) && HY(qY.current, _2);
-    }), useIsomorphicLayoutEffect$1(() => {
+    }), useIsomorphicLayoutEffect(() => {
       let e2 = qY.current;
       return UY(e2), () => {
         GY(e2);
@@ -79364,7 +79364,7 @@ ${c}
   function useWindowSplitterPanelGroupBehavior({ committedValuesRef: e, eagerValuesRef: r, groupId: c, layout: d, panelDataArray: f, panelGroupElement: _, setLayout: v }) {
     (0, import_react.useRef)({
       didWarnAboutMissingResizeHandle: false
-    }), useIsomorphicLayoutEffect$1(() => {
+    }), useIsomorphicLayoutEffect(() => {
       if (!_) return;
       let e2 = getResizeHandleElementsForGroup(c, _);
       for (let r2 = 0; r2 < f.length - 1; r2++) {
@@ -79662,7 +79662,7 @@ ${c}
         });
         areEqual(c2, f2) || (IY(f2), HY.current.layout = f2, r2 && r2(f2), callPanelCallbacks(d2, f2, RY.current));
       }
-    }), []), useIsomorphicLayoutEffect$1(() => {
+    }), []), useIsomorphicLayoutEffect(() => {
       VY.current.autoSaveId = e, VY.current.direction = d, VY.current.dragState = z, VY.current.id = M, VY.current.onLayout = v, VY.current.storage = S;
     }), useWindowSplitterPanelGroupBehavior({
       committedValuesRef: VY,
@@ -79752,7 +79752,7 @@ ${c}
     }, [
       LY
     ]);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect(() => {
       if (HY.current.panelDataArrayChanged) {
         HY.current.panelDataArrayChanged = false;
         let { autoSaveId: e2, onLayout: r2, storage: c2 } = VY.current, { layout: d2, panelDataArray: f2 } = HY.current, _2 = null;
@@ -79769,7 +79769,7 @@ ${c}
         });
         areEqual(d2, v2) || (IY(v2), HY.current.layout = v2, r2 && r2(v2), callPanelCallbacks(f2, v2, RY.current));
       }
-    }), useIsomorphicLayoutEffect$1(() => {
+    }), useIsomorphicLayoutEffect(() => {
       let e2 = HY.current;
       return () => {
         e2.layout = [];
@@ -79960,7 +79960,7 @@ ${c}
     let { direction: LY, groupId: RY, registerResizeHandle: zY, startDragging: BY, stopDragging: VY, panelGroupElement: HY } = IY, UY = useUniqueId(f), [WY, GY] = (0, import_react.useState)("inactive"), [KY, qY] = (0, import_react.useState)(false), [JY, YY] = (0, import_react.useState)(null), XY = (0, import_react.useRef)({
       state: WY
     });
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect(() => {
       XY.current.state = WY;
     }), (0, import_react.useEffect)(() => {
       if (c) YY(null);
@@ -91520,18 +91520,6 @@ ${c}
   function withoutNaN(e) {
     return e == null || Number.isNaN(e) ? null : e;
   }
-  var useIsomorphicLayoutEffect = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0 ? import_react.useLayoutEffect : import_react.useEffect;
-  function useEvent(e) {
-    let r = (0, import_react.useRef)(e);
-    return useIsomorphicLayoutEffect(() => {
-      r.current = e;
-    }), (0, import_react.useCallback)(function() {
-      var e2 = [
-        ...arguments
-      ];
-      return r.current == null ? void 0 : r.current(...e2);
-    }, []);
-  }
   const MessageSchema = object$1({
     content: union([
       object$1({
@@ -91585,10 +91573,8 @@ ${c}
       this.buffer = [];
     }
     getAndClear() {
-      let e = [
-        ...this.buffer
-      ];
-      return this.clear(), e;
+      let e = this.buffer;
+      return this.buffer = [], e;
     }
   };
   const PanelPlugin = createPlugin("marimo-panel").withData(object$1({
@@ -91609,16 +91595,22 @@ ${c}
     return window.Bokeh != null;
   }
   var PanelSlot = (e) => {
-    let { data: r, functions: c, host: d } = e, { extension: f, docs_json: _, render_json: v } = r, y = (0, import_react.useRef)(null), S = (0, import_react.useRef)(null), w = (0, import_react.useRef)(null), [E, O] = (0, import_react.useState)(false), [M, I] = (0, import_react.useState)(null), z = useEvent(() => {
-      if (!G.current || !S.current) return;
-      let e2 = G.current.getAndClear(), r2 = S.current.create_json_patch(e2), d2 = {
-        ...window.Bokeh.protocol.Message.create("PATCH-DOC", {}, r2)
-      }, f2 = [];
-      d2.content = extractBuffers(d2.content, f2), c.send_to_widget({
-        message: d2,
-        buffers: f2
-      });
-    }), G = (0, import_react.useRef)(new EventBuffer(z));
+    let { data: r, functions: c, host: d } = e, { extension: f, docs_json: _, render_json: v } = r, y = (0, import_react.useRef)(null), S = (0, import_react.useRef)(null), w = (0, import_react.useRef)(null), [E, O] = (0, import_react.useState)(false), [M, I] = (0, import_react.useState)(null), z = (0, import_react.useRef)(c);
+    z.current = c;
+    let G = (0, import_react.useCallback)(() => {
+      if (!q.current) return;
+      let e2 = q.current.getAndClear();
+      if (e2.length === 0) return;
+      let r2 = e2.at(0);
+      if (!isDocumentEvent(r2)) return;
+      let c2 = r2.document, d2 = e2.filter((e3) => isDocumentEvent(e3) && e3.document === c2), f2 = c2.create_json_patch(d2), _2 = window.Bokeh.protocol.Message.create("PATCH-DOC", {}, f2), v2 = [];
+      _2.content = extractBuffers(_2.content, v2), z.current.send_to_widget({
+        message: _2,
+        buffers: v2
+      }).catch((e3) => {
+        Logger.warn("Failed to send Panel event to backend", e3);
+      });
+    }, []), q = (0, import_react.useRef)(new EventBuffer(G));
     return (0, import_react.useEffect)(() => {
       if (isBokehLoaded()) {
         O(true);
@@ -91637,20 +91629,25 @@ ${c}
       O
     ]), useEventListener(d, MarimoIncomingMessageEvent.TYPE, (e2) => {
       if (e2.detail.message == null) return;
-      let r2 = MessageSchema.parse(e2.detail.message), c2 = e2.detail.buffers, d2 = w.current, f2 = S.current;
-      if (!d2 || !f2) return;
-      let _2 = r2.content;
-      if (_2 !== null && typeof r2.content != "string") {
-        G.current && G.current.size() > 0 && z();
+      let r2 = MessageSchema.parse(e2.detail.message), c2 = e2.detail.buffers, d2 = w.current;
+      if (!d2) return;
+      let f2 = r2.content;
+      if (f2 !== null && typeof r2.content != "string") {
+        q.current && q.current.size() > 0 && G();
         return;
       }
+      let _2 = getDoc(S.current);
+      if (!_2) return;
       if (c2 && c2.length > 0) {
         let e3 = c2[0];
         e3 instanceof ArrayBuffer ? d2.consume(e3) : e3.buffer instanceof ArrayBuffer && d2.consume(e3.buffer);
-      } else if (_2 && typeof _2 == "string") d2.consume(_2);
+      } else if (f2 && typeof f2 == "string") d2.consume(f2);
       else return;
       let v2 = d2.message;
-      v2 != null && Object.keys(v2.content).length > 0 && (v2.content.events !== void 0 && (v2.content.events = v2.content.events.filter((e3) => f2._all_models.has(e3.model.id))), f2.apply_json_patch(v2.content, v2.buffers));
+      v2 != null && Object.keys(v2.content).length > 0 && (v2.content.events !== void 0 && (v2.content.events = v2.content.events.filter((e3) => {
+        var _a3;
+        return ((_a3 = e3 == null ? void 0 : e3.model) == null ? void 0 : _a3.id) && _2._all_models.has(e3.model.id);
+      })), _2.apply_json_patch(v2.content, v2.buffers));
     }), (0, import_react.useEffect)(() => {
       let e2 = Object.keys(_)[0];
       !E || M === e2 || (async () => {
@@ -91661,16 +91658,18 @@ ${c}
         for (let e3 of Object.keys(v.roots)) {
           let c3 = v.roots[e3];
           if (y.current) {
-            let d2 = y.current.querySelector(`#${c3}`);
-            r2.roots[e3] = d2;
+            let d3 = y.current.querySelector(`#${c3}`);
+            r2.roots[e3] = d3;
           }
         }
         let c2 = Object.keys(r2.roots)[0];
         await window.Bokeh.embed.embed_items_notebook(_, [
           r2
-        ]), S.current = window.Bokeh.index.get_by_id(c2).model.document, w.current = new window.Bokeh.protocol.Receiver(), S.current.on_change((e3) => {
+        ]), S.current = c2;
+        let d2 = window.Bokeh.index.get_by_id(c2).model.document;
+        w.current = new window.Bokeh.protocol.Receiver(), d2.on_change((e3) => {
           var _a3;
-          return (_a3 = G.current) == null ? void 0 : _a3.add(e3);
+          isSyncEvent(e3) && e3.sync && ((_a3 = q.current) == null ? void 0 : _a3.add(e3));
         }), I(e2);
       })();
     }, [
@@ -91690,7 +91689,22 @@ ${c}
         })
       }, e2))
     });
-  }, defaultOptions = {
+  };
+  function getDoc(e) {
+    if (!e) return null;
+    try {
+      return window.Bokeh.index.get_by_id(e).model.document;
+    } catch (e2) {
+      return Logger.warn("Failed to get Bokeh document", e2), null;
+    }
+  }
+  function isSyncEvent(e) {
+    return !!e && typeof e == "object" && "sync" in e;
+  }
+  function isDocumentEvent(e) {
+    return !!e && typeof e == "object" && "document" in e;
+  }
+  var defaultOptions = {
     removeOnUnmount: false
   };
   function useScript(e, r = defaultOptions) {

package/package.json

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

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -1,8 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { useEvent } from "@dnd-kit/utilities";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import {
@@ -12,13 +11,14 @@ import {
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import type { IPluginProps } from "@/plugins/types";
+import { Logger } from "@/utils/Logger";
 import { EventBuffer, extractBuffers, MessageSchema } from "./utils";
 
 interface BokehDocument {
   create_json_patch: (events: unknown[]) => unknown;
   apply_json_patch: (content: unknown, buffers: ArrayBuffer[]) => void;
   on_change: (callback: (event: unknown) => void) => void;
-  _all_models: Set<string>;
+  _all_models: Map<string, unknown>;
 }
 
 interface RenderItems {
@@ -77,8 +77,8 @@ type T = Record<string, unknown>;
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type PluginFunctions = {
   send_to_widget: <T>(req: {
-    message?: any;
-    buffers?: any;
+    message?: unknown;
+    buffers?: unknown;
   }) => Promise<null | undefined>;
 };
 
@@ -114,27 +114,52 @@ const PanelSlot = (props: Props) => {
   const { data, functions, host } = props;
   const { extension, docs_json: docsJson, render_json: renderJson } = data;
   const ref = useRef<HTMLDivElement>(null);
-  const docRef = useRef<BokehDocument | null>(null);
+  const rootModelIdRef = useRef<string | null>(null);
   const receiverRef = useRef<InstanceType<
     typeof window.Bokeh.protocol.Receiver
   > | null>(null);
   const [loaded, setLoaded] = useState<boolean>(false);
   const [rendered, setRendered] = useState<string | null>(null);
 
-  const processEvents = useEvent(() => {
-    if (!eventBufferRef.current || !docRef.current) {
+  // Store functions in a ref so the callback captured by EventBuffer stays current
+  const functionsRef = useRef(functions);
+  functionsRef.current = functions;
+
+  const processEvents = useCallback(() => {
+    if (!eventBufferRef.current) {
       return;
     }
 
     const events = eventBufferRef.current.getAndClear();
-    const patch = docRef.current.create_json_patch(events);
-    const message = {
-      ...window.Bokeh.protocol.Message.create("PATCH-DOC", {}, patch),
-    };
+    if (events.length === 0) {
+      return;
+    }
+
+    // Use the event's own document — it is always current, even when
+    // DynamicMap/HoloViews has replaced the document after embedding.
+    const firstEvent = events.at(0);
+    if (!isDocumentEvent(firstEvent)) {
+      return;
+    }
+    const doc = firstEvent.document;
+
+    // Keep only events that belong to this document
+    const sameDocEvents = events.filter(
+      (ev) => isDocumentEvent(ev) && ev.document === doc,
+    );
+
+    const patch = doc.create_json_patch(sameDocEvents);
+    const message = window.Bokeh.protocol.Message.create(
+      "PATCH-DOC",
+      {},
+      patch,
+    );
     const buffers: ArrayBuffer[] = [];
     message.content = extractBuffers(message.content, buffers);
-    functions.send_to_widget({ message, buffers });
-  });
+    functionsRef.current.send_to_widget({ message, buffers }).catch((error) => {
+      Logger.warn("Failed to send Panel event to backend", error);
+    });
+  }, []);
 
   const eventBufferRef = useRef<EventBuffer<unknown> | null>(
     new EventBuffer(processEvents),
@@ -178,9 +203,8 @@ const PanelSlot = (props: Props) => {
       const message = MessageSchema.parse(e.detail.message);
       const buffers = e.detail.buffers;
       const receiver = receiverRef.current;
-      const doc = docRef.current;
 
-      if (!receiver || !doc) {
+      if (!receiver) {
         return;
       }
 
@@ -193,6 +217,11 @@ const PanelSlot = (props: Props) => {
         return;
       }
 
+      const doc = getDoc(rootModelIdRef.current);
+      if (!doc) {
+        return;
+      }
+
       if (buffers && buffers.length > 0) {
         // Check if we already have an ArrayBuffer
         const buffer = buffers[0];
@@ -212,7 +241,7 @@ const PanelSlot = (props: Props) => {
       if (commMessage != null && Object.keys(commMessage.content).length > 0) {
         if (commMessage.content.events !== undefined) {
           commMessage.content.events = commMessage.content.events.filter(
-            (e: any) => doc._all_models.has(e.model.id),
+            (e) => e?.model?.id && doc._all_models.has(e.model.id),
           );
         }
         doc.apply_json_patch(commMessage.content, commMessage.buffers);
@@ -243,9 +272,17 @@ const PanelSlot = (props: Props) => {
       }
       const modelId = Object.keys(renderItem.roots)[0];
       await window.Bokeh.embed.embed_items_notebook(docsJson, [renderItem]);
-      docRef.current = window.Bokeh.index.get_by_id(modelId).model.document;
+      rootModelIdRef.current = modelId;
+      const doc = window.Bokeh.index.get_by_id(modelId).model.document;
       receiverRef.current = new window.Bokeh.protocol.Receiver();
-      docRef.current.on_change((event) => eventBufferRef.current?.add(event));
+      doc.on_change((event) => {
+        // Bokeh tags server-applied patch events with sync=false via
+        // model.setv({...}, {sync: false}) inside apply_json_patch.
+        // Only forward user-initiated events (sync=true, the default).
+        if (isSyncEvent(event) && event.sync) {
+          eventBufferRef.current?.add(event);
+        }
+      });
       setRendered(docId);
     };
 
@@ -263,4 +300,29 @@ const PanelSlot = (props: Props) => {
   );
 };
 
+// Re-fetch the live document from the Bokeh index. DynamicMap/HoloViews
+// may replace the document after initial embedding, so a stale ref would
+// cause "Cannot create a patch using events from a different document".
+function getDoc(id: string | null): BokehDocument | null {
+  if (!id) {
+    return null;
+  }
+  try {
+    return window.Bokeh.index.get_by_id(id).model.document;
+  } catch (error) {
+    Logger.warn("Failed to get Bokeh document", error);
+    return null;
+  }
+}
+
+function isSyncEvent(x: unknown): x is { sync: boolean } {
+  const isObject = !!x && typeof x === "object";
+  return isObject && "sync" in x;
+}
+
+function isDocumentEvent(x: unknown): x is { document: BokehDocument } {
+  const isObject = !!x && typeof x === "object";
+  return isObject && "document" in x;
+}
+
 type Props = IPluginProps<T, PanelData, PluginFunctions>;

package/src/plugins/impl/panel/utils.ts

@@ -99,8 +99,8 @@ export class EventBuffer<T> {
   }
 
   getAndClear() {
-    const events = [...this.buffer];
-    this.clear();
+    const events = this.buffer;
+    this.buffer = [];
     return events;
   }
 }