@marimo-team/islands 0.19.3-dev28 → 0.19.3-dev30

package/dist/main.js

@@ -18579,11 +18579,9 @@ ${JSON.stringify(e2, null, 4)}`);
       }
     ])), f.hoverEnabled && h.push(hoverTooltip((e2, c2) => r == null ? null : r.requestHoverTooltip(e2, offsetToPos(e2.state.doc, c2)), e.hoverConfig)), f.signatureHelpEnabled) {
       h.push(signatureHelpTooltipField);
-      let e2 = (e3) => {
-        e3.state.field(signatureHelpTooltipField) && e3.dispatch({
-          effects: setSignatureHelpTooltip.of(null)
-        });
-      };
+      let e2 = (e3) => e3.state.field(signatureHelpTooltipField) ? (e3.dispatch({
+        effects: setSignatureHelpTooltip.of(null)
+      }), true) : false;
       h.push(EditorView.domEventHandlers({
         mousedown: (r2, c2) => (e2(c2), false)
       })), h.push(keymap.of([
@@ -18593,7 +18591,7 @@ ${JSON.stringify(e2, null, 4)}`);
         },
         {
           key: "Escape",
-          run: (r2) => (e2(r2), true)
+          run: (r2) => e2(r2)
         }
       ])), h.push(EditorView.updateListener.of((c2) => {
         if (!(r && f.signatureActivateOnTyping) || !c2.state.field(signatureHelpTooltipField) || !(c2.selectionSet || c2.docChanged)) return;
@@ -101157,7 +101155,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev28"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev30"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.3-dev28",
+  "version": "0.19.3-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -55,7 +55,7 @@
     "@lezer/markdown": "^1.6.2",
     "@lezer/python": "^1.1.18",
     "@marimo-team/codemirror-ai": "^0.3.5",
-    "@marimo-team/codemirror-languageserver": "^1.16.8",
+    "@marimo-team/codemirror-languageserver": "^1.16.10",
     "@marimo-team/codemirror-mcp": "^0.1.5",
     "@marimo-team/codemirror-sql": "^0.2.4",
     "@marimo-team/llm-info": "workspace:*",

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -20,7 +20,7 @@ import { XIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { LazyMount } from "@/components/utils/lazy-mount";
+import { LazyActivity } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
@@ -34,6 +34,7 @@ import {
   PANEL_MAP,
   PANELS,
   type PanelDescriptor,
+  type PanelType,
 } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
 import { PanelsWrapper } from "./panels";
@@ -253,6 +254,29 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     return <LazyChatPanel />;
   };
 
+  const SIDEBAR_PANELS: Record<PanelType, React.ReactNode> = {
+    files: <LazyFileExplorerPanel />,
+    variables: <LazySessionPanel />,
+    dependencies: <LazyDependencyGraphPanel />,
+    packages: <LazyPackagesPanel />,
+    outline: <LazyOutlinePanel />,
+    documentation: <LazyDocumentationPanel />,
+    snippets: <LazySnippetsPanel />,
+    ai: renderAiPanel(),
+    errors: <LazyErrorsPanel />,
+    scratchpad: <LazyScratchpadPanel />,
+    tracing: <LazyTracingPanel />,
+    secrets: <LazySecretsPanel />,
+    logs: <LazyLogsPanel />,
+    terminal: (
+      <LazyTerminal
+        visible={isSidebarOpen && selectedPanel === "terminal"}
+        onClose={() => setIsSidebarOpen(false)}
+      />
+    ),
+    cache: <LazyCachePanel />,
+  };
+
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
@@ -328,26 +352,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           </div>
           <Suspense>
             <TooltipProvider>
-              {selectedPanel === "files" && <LazyFileExplorerPanel />}
-              {selectedPanel === "variables" && <LazySessionPanel />}
-              {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
-              {selectedPanel === "packages" && <LazyPackagesPanel />}
-              {selectedPanel === "outline" && <LazyOutlinePanel />}
-              {selectedPanel === "documentation" && <LazyDocumentationPanel />}
-              {selectedPanel === "snippets" && <LazySnippetsPanel />}
-              {selectedPanel === "ai" && renderAiPanel()}
-              {selectedPanel === "errors" && <LazyErrorsPanel />}
-              {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
-              {selectedPanel === "tracing" && <LazyTracingPanel />}
-              {selectedPanel === "secrets" && <LazySecretsPanel />}
-              {selectedPanel === "logs" && <LazyLogsPanel />}
-              {selectedPanel === "terminal" && (
-                <LazyTerminal
-                  visible={isSidebarOpen}
-                  onClose={() => setIsSidebarOpen(false)}
-                />
-              )}
-              {selectedPanel === "cache" && <LazyCachePanel />}
+              {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
+                <LazyActivity
+                  key={key}
+                  mode={selectedPanel === key ? "visible" : "hidden"}
+                >
+                  {Panel}
+                </LazyActivity>
+              ))}
             </TooltipProvider>
           </Suspense>
         </div>
@@ -388,6 +400,18 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     </Panel>
   );
 
+  const DEVELOPER_PANELS: Record<PanelType, React.ReactNode> = {
+    ...SIDEBAR_PANELS,
+    terminal: (
+      <LazyTerminal
+        visible={
+          isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
+        }
+        onClose={() => setIsDeveloperPanelOpen(false)}
+      />
+    ),
+  };
+
   const bottomPanel = (
     <Panel
       ref={developerPanelRef}
@@ -475,43 +499,16 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         <Suspense fallback={<div />}>
           <PanelSectionProvider value="developer-panel">
             <div className="flex-1 overflow-hidden">
-              {selectedDeveloperPanelTab === "files" && (
-                <LazyFileExplorerPanel />
-              )}
-              {selectedDeveloperPanelTab === "variables" && (
-                <LazySessionPanel />
-              )}
-              {selectedDeveloperPanelTab === "dependencies" && (
-                <LazyDependencyGraphPanel />
-              )}
-              {selectedDeveloperPanelTab === "packages" && (
-                <LazyPackagesPanel />
-              )}
-              {selectedDeveloperPanelTab === "outline" && <LazyOutlinePanel />}
-              {selectedDeveloperPanelTab === "documentation" && (
-                <LazyDocumentationPanel />
-              )}
-              {selectedDeveloperPanelTab === "snippets" && (
-                <LazySnippetsPanel />
-              )}
-              {selectedDeveloperPanelTab === "ai" && renderAiPanel()}
-              {selectedDeveloperPanelTab === "errors" && <LazyErrorsPanel />}
-              {selectedDeveloperPanelTab === "scratchpad" && (
-                <LazyScratchpadPanel />
-              )}
-              {selectedDeveloperPanelTab === "tracing" && <LazyTracingPanel />}
-              {selectedDeveloperPanelTab === "secrets" && <LazySecretsPanel />}
-              {selectedDeveloperPanelTab === "logs" && <LazyLogsPanel />}
-              {/* LazyMount needed for Terminal to avoid spurious connection */}
-              {selectedDeveloperPanelTab === "terminal" && (
-                <LazyMount isOpen={isDeveloperPanelOpen}>
-                  <LazyTerminal
-                    visible={isDeveloperPanelOpen}
-                    onClose={() => setIsDeveloperPanelOpen(false)}
-                  />
-                </LazyMount>
-              )}
-              {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
+              {Object.entries(DEVELOPER_PANELS).map(([key, Panel]) => (
+                <LazyActivity
+                  key={key}
+                  mode={
+                    selectedDeveloperPanelTab === key ? "visible" : "hidden"
+                  }
+                >
+                  {Panel}
+                </LazyActivity>
+              ))}
             </div>
           </PanelSectionProvider>
         </Suspense>

package/src/components/utils/lazy-mount.tsx

@@ -1,5 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { type PropsWithChildren } from "react";
+import React, {
+  Activity,
+  type ActivityProps,
+  type PropsWithChildren,
+} from "react";
 
 interface Props {
   isOpen: boolean;
@@ -12,13 +16,30 @@ export const LazyMount: React.FC<PropsWithChildren<Props>> = ({
   isOpen,
   children,
 }) => {
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
 
-  React.useEffect(() => {
-    if (isOpen && !isMounted) {
-      setIsMounted(true);
-    }
-  }, [isOpen, isMounted]);
+  if (isOpen && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
 
-  return isMounted ? children : null;
+  return hasMountedBefore || isOpen ? children : null;
+};
+
+/**
+ * Wraps a component in an Activity component. It is not mounted until it is open for the first time.
+ */
+export const LazyActivity: React.FC<PropsWithChildren<ActivityProps>> = (
+  props,
+) => {
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
+
+  if (props.mode === "visible" && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
+
+  if (hasMountedBefore) {
+    return <Activity {...props} />;
+  }
+
+  return null;
 };