@marimo-team/islands 0.23.10-dev22 → 0.23.10-dev24

package/dist/{toDate-x-WRDCH7.js → toDate-d8RCRrRd.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { _ as Logger } from "./button-C5K9fIPF.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DHIrRQOe.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DEhDzATN.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{tooltip-C5FYOpQc.js → tooltip-DpcyNkQ2.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-C1BYNeCR.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-Dk6PV_d3.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-CoBiJ5v4.js";
+import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-aLSua2NL.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (n) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = n, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-CVvp1fKr.js → types-ChtMFmZ2.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-iRgKDT5s.js → useAsyncData-PonK__yh.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { T as useEvent_default } from "./useTheme-DHIrRQOe.js";
+import { T as useEvent_default } from "./useTheme-DEhDzATN.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-BRcO_TGJ.js → useDateFormatter-QB-3MpYr.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-GCJA9n6d.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-J57tzLr3.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/dist/{useDeepCompareMemoize-CkQ57VS2.js → useDeepCompareMemoize-D3NGWke6.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { w as dequal } from "./useTheme-DHIrRQOe.js";
+import { w as dequal } from "./useTheme-DEhDzATN.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useLifecycle-BBO9PIph.js → useLifecycle-00mO3OSS.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, r as cva } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { b as atom, v as useSetAtom } from "./useTheme-DHIrRQOe.js";
+import { b as atom, v as useSetAtom } from "./useTheme-DEhDzATN.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-DHIrRQOe.js → useTheme-DEhDzATN.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-CoBiJ5v4.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-aLSua2NL.js";
 import { t as merge_default } from "./merge-Be1CqGnU.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-Dq-SH463.js → vega-component-9h1ACS78.js}

@@ -2,23 +2,23 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-x-WRDCH7.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-d8RCRrRd.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import "./zod-CoBiJ5v4.js";
-import { n as ErrorBanner } from "./error-banner-5bz0L9hS.js";
-import { t as Tooltip } from "./tooltip-C5FYOpQc.js";
+import "./zod-aLSua2NL.js";
+import { n as ErrorBanner } from "./error-banner-Cc0I3C9e.js";
+import { t as Tooltip } from "./tooltip-DpcyNkQ2.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { T as useEvent_default, n as useTheme } from "./useTheme-DHIrRQOe.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-DEhDzATN.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DHxc-FdY.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-C4wO47tk.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BWLPpjKK.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-iRgKDT5s.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CkQ57VS2.js";
+import { t as useAsyncData } from "./useAsyncData-PonK__yh.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D3NGWke6.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/dist/{zod-CoBiJ5v4.js → zod-aLSua2NL.js}

@@ -11758,7 +11758,7 @@ var external_exports = /* @__PURE__ */ __export({
 config(en_default());
 var zod_default = external_exports;
 export {
-  StyleNamespace as $,
+  isInVscodeExtension as $,
   looseObject as A,
   union as B,
   any as C,
@@ -11775,59 +11775,60 @@ export {
   number$1 as N,
   lazy as O,
   object as P,
-  isInVscodeExtension as Q,
+  withSmartCollisionBoundary as Q,
   string$1 as R,
   _null as S,
   boolean$1 as T,
   ZodError as U,
   unknown as V,
   toJSONSchema as W,
-  withFullScreenAsRoot as X,
+  useFullScreenElement as X,
   MAX_HEIGHT_OFFSET as Y,
-  withSmartCollisionBoundary as Z,
+  withFullScreenAsRoot as Z,
   ZodString as _,
-  Primitive as _t,
+  createContextScope as _t,
   ZodIssueCode as a,
-  FocusScope as at,
+  Portal as at,
   _enum as b,
   ZodBoolean as c,
-  Root as ct,
+  DismissableLayer as ct,
   ZodDiscriminatedUnion as d,
-  Presence as dt,
-  hideOthers as et,
+  useId as dt,
+  StyleNamespace as et,
   ZodEnum as f,
-  useControllableState as ft,
+  Presence as ft,
   ZodOptional as g,
-  createContextScope as gt,
+  createContext2 as gt,
   ZodObject as h,
-  createContext2 as ht,
+  composeEventHandlers as ht,
   string as i,
-  Portal as it,
+  useFocusGuards as it,
   nan as j,
   literal as k,
   ZodDate as l,
-  useCallbackRef$1 as lt,
+  Root as lt,
   ZodNumber as m,
-  composeEventHandlers as mt,
+  useLayoutEffect2 as mt,
   date as n,
-  __awaiter as nt,
+  Combination_default as nt,
   ZodAny as o,
-  Branch as ot,
+  FocusScope as ot,
   ZodLiteral as p,
-  useLayoutEffect2 as pt,
+  useControllableState as pt,
   $ZodError as q,
   number as r,
-  useFocusGuards as rt,
+  __awaiter as rt,
   ZodArray as s,
-  DismissableLayer as st,
+  Branch as st,
   zod_default as t,
-  Combination_default as tt,
+  hideOthers as tt,
   ZodDefault as u,
-  useId as ut,
+  useCallbackRef$1 as ut,
   ZodType as v,
-  dispatchDiscreteCustomEvent as vt,
+  Primitive as vt,
   array as w,
   _instanceof as x,
   ZodUnion as y,
+  dispatchDiscreteCustomEvent as yt,
   tuple as z
 };

package/package.json

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

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

@@ -34,6 +34,26 @@ import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
+import { useTheme } from "@/theme/useTheme";
+import {
+  LazyAgentPanel,
+  LazyCachePanel,
+  LazyChatPanel,
+  LazyDependencyGraphPanel,
+  LazyDocumentationPanel,
+  LazyErrorsPanel,
+  LazyFileExplorerPanel,
+  LazyLogsPanel,
+  LazyOutlinePanel,
+  LazyPackagesPanel,
+  LazyScratchpadPanel,
+  LazySecretsPanel,
+  LazySessionPanel,
+  LazySnippetsPanel,
+  LazyTerminal,
+  LazyTracingPanel,
+  PANEL_PRELOADERS,
+} from "./lazy-panels";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import {
   isPanelHidden,
@@ -50,33 +70,26 @@ import { useAiPanelTab } from "./useAiPanel";
 import { useDependencyPanelTab } from "./useDependencyPanelTab";
 import { handleDragging } from "./utils";
 
-const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
-const LazyChatPanel = React.lazy(() => import("@/components/chat/chat-panel"));
-const LazyAgentPanel = React.lazy(
-  () => import("@/components/chat/acp/agent-panel"),
-);
-const LazyDependencyGraphPanel = React.lazy(
-  () => import("@/components/editor/chrome/panels/dependency-graph-panel"),
-);
-const LazySessionPanel = React.lazy(() => import("../panels/session-panel"));
-const LazyDocumentationPanel = React.lazy(
-  () => import("../panels/documentation-panel"),
-);
-const LazyErrorsPanel = React.lazy(() => import("../panels/error-panel"));
-const LazyFileExplorerPanel = React.lazy(
-  () => import("../panels/file-explorer-panel"),
-);
-const LazyLogsPanel = React.lazy(() => import("../panels/logs-panel"));
-const LazyOutlinePanel = React.lazy(() => import("../panels/outline-panel"));
-const LazyPackagesPanel = React.lazy(() => import("../panels/packages-panel"));
-const LazyScratchpadPanel = React.lazy(
-  () => import("../panels/scratchpad-panel"),
-);
-const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
-const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
-const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
-const LazyCachePanel = React.lazy(() => import("../panels/cache-panel"));
-
+// Placeholder that matches the eventual xterm theme background so the
+// transition into the loaded terminal is seamless rather than a blank flash.
+const TerminalSkeleton: React.FC = () => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  return (
+    <div
+      aria-label="Loading terminal"
+      role="status"
+      className="w-full h-full flex items-start p-3 font-mono text-xs select-none"
+      style={{
+        background: isDark ? "#0f172a" : "#ffffff",
+        color: isDark ? "#94a3b8" : "#64748b",
+      }}
+    >
+      <span className="opacity-70">Starting terminal</span>
+      <span className="ml-1 inline-block w-2 h-3.5 align-middle bg-current animate-pulse" />
+    </div>
+  );
+};
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const {
     isSidebarOpen,
@@ -96,6 +109,33 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const capabilities = useAtomValue(capabilitiesAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
 
+  // On mount, idle-preload whichever panels the user had open at last unload,
+  // so the first interaction with the sidebar/dev panel doesn't hit a cold
+  // chunk fetch. Runs once.
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const preloadOpenPanels = () => {
+      if (isSidebarOpen && selectedPanel) {
+        PANEL_PRELOADERS[selectedPanel]?.();
+      }
+      if (isDeveloperPanelOpen && selectedDeveloperPanelTab) {
+        PANEL_PRELOADERS[selectedDeveloperPanelTab]?.();
+      }
+    };
+
+    const canIdle =
+      typeof window !== "undefined" &&
+      typeof window.requestIdleCallback === "function";
+    if (canIdle) {
+      const handle = window.requestIdleCallback(preloadOpenPanels, {
+        timeout: 2000,
+      });
+      return () => window.cancelIdleCallback(handle);
+    }
+    const handle = setTimeout(preloadOpenPanels, 300);
+    return () => clearTimeout(handle);
+  }, []);
+
   // Convert current developer panel items to PanelDescriptors
   // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
@@ -256,32 +296,34 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const renderAiPanel = () => {
     if (agentsEnabled && aiPanelTab === "agents") {
-      return <LazyAgentPanel />;
+      return <LazyAgentPanel.Component />;
     }
-    return <LazyChatPanel />;
+    return <LazyChatPanel.Component />;
   };
 
   const SIDEBAR_PANELS: Record<PanelType, React.ReactNode> = {
-    files: <LazyFileExplorerPanel />,
-    variables: <LazySessionPanel />,
-    dependencies: <LazyDependencyGraphPanel />,
-    packages: <LazyPackagesPanel />,
-    outline: <LazyOutlinePanel />,
-    documentation: <LazyDocumentationPanel />,
-    snippets: <LazySnippetsPanel />,
+    files: <LazyFileExplorerPanel.Component />,
+    variables: <LazySessionPanel.Component />,
+    dependencies: <LazyDependencyGraphPanel.Component />,
+    packages: <LazyPackagesPanel.Component />,
+    outline: <LazyOutlinePanel.Component />,
+    documentation: <LazyDocumentationPanel.Component />,
+    snippets: <LazySnippetsPanel.Component />,
     ai: renderAiPanel(),
-    errors: <LazyErrorsPanel />,
-    scratchpad: <LazyScratchpadPanel />,
-    tracing: <LazyTracingPanel />,
-    secrets: <LazySecretsPanel />,
-    logs: <LazyLogsPanel />,
+    errors: <LazyErrorsPanel.Component />,
+    scratchpad: <LazyScratchpadPanel.Component />,
+    tracing: <LazyTracingPanel.Component />,
+    secrets: <LazySecretsPanel.Component />,
+    logs: <LazyLogsPanel.Component />,
     terminal: (
-      <LazyTerminal
-        visible={isSidebarOpen && selectedPanel === "terminal"}
-        onClose={() => setIsSidebarOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={isSidebarOpen && selectedPanel === "terminal"}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </Suspense>
     ),
-    cache: <LazyCachePanel />,
+    cache: <LazyCachePanel.Component />,
   };
 
   const helpPaneBody = (
@@ -414,12 +456,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const DEVELOPER_PANELS: Record<PanelType, React.ReactNode> = {
     ...SIDEBAR_PANELS,
     terminal: (
-      <LazyTerminal
-        visible={
-          isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
-        }
-        onClose={() => setIsDeveloperPanelOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={
+            isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
+          }
+          onClose={() => setIsDeveloperPanelOpen(false)}
+        />
+      </Suspense>
     ),
   };
 
@@ -474,6 +518,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             className="flex flex-row gap-1"
             minItems={0}
             onAction={(panel) => openApplication(panel.type)}
+            onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
             renderItem={(panel) => (
               <div
                 className={cn(

package/src/components/editor/chrome/wrapper/lazy-panels.ts

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { reactLazyWithPreload } from "@/utils/lazy";
+import { Logger } from "@/utils/Logger";
+import type { PanelType } from "../types";
+
+// Preloading is best-effort: a chunk-load failure here should not surface as
+// an unhandled rejection (the panel will retry the import when actually
+// rendered, where Suspense/ErrorBoundary handle the failure).
+const safePreload = (lazy: { preload: () => Promise<unknown> }) => (): void => {
+  void lazy.preload().catch((error) => {
+    Logger.debug("Failed to preload panel chunk", error);
+  });
+};
+
+// Centralized lazy panels. Using reactLazyWithPreload (instead of React.lazy)
+// gives each panel a .preload() method so the chunk can be fetched on intent
+// (hovering the sidebar icon or developer-panel tab) before the user clicks.
+
+export const LazyTerminal = reactLazyWithPreload(
+  () => import("@/components/terminal/terminal"),
+);
+export const LazyChatPanel = reactLazyWithPreload(
+  () => import("@/components/chat/chat-panel"),
+);
+export const LazyAgentPanel = reactLazyWithPreload(
+  () => import("@/components/chat/acp/agent-panel"),
+);
+export const LazyDependencyGraphPanel = reactLazyWithPreload(
+  () => import("../panels/dependency-graph-panel"),
+);
+export const LazySessionPanel = reactLazyWithPreload(
+  () => import("../panels/session-panel"),
+);
+export const LazyDocumentationPanel = reactLazyWithPreload(
+  () => import("../panels/documentation-panel"),
+);
+export const LazyErrorsPanel = reactLazyWithPreload(
+  () => import("../panels/error-panel"),
+);
+export const LazyFileExplorerPanel = reactLazyWithPreload(
+  () => import("../panels/file-explorer-panel"),
+);
+export const LazyLogsPanel = reactLazyWithPreload(
+  () => import("../panels/logs-panel"),
+);
+export const LazyOutlinePanel = reactLazyWithPreload(
+  () => import("../panels/outline-panel"),
+);
+export const LazyPackagesPanel = reactLazyWithPreload(
+  () => import("../panels/packages-panel"),
+);
+export const LazyScratchpadPanel = reactLazyWithPreload(
+  () => import("../panels/scratchpad-panel"),
+);
+export const LazySecretsPanel = reactLazyWithPreload(
+  () => import("../panels/secrets-panel"),
+);
+export const LazySnippetsPanel = reactLazyWithPreload(
+  () => import("../panels/snippets-panel"),
+);
+export const LazyTracingPanel = reactLazyWithPreload(
+  () => import("../panels/tracing-panel"),
+);
+export const LazyCachePanel = reactLazyWithPreload(
+  () => import("../panels/cache-panel"),
+);
+
+// Preloader registry: hovering an icon/tab calls into this map to warm the
+// corresponding chunk. Two panel types (chat and agents) share the "ai" slot,
+// so we preload both.
+export const PANEL_PRELOADERS: Record<PanelType, () => void> = {
+  files: safePreload(LazyFileExplorerPanel),
+  variables: safePreload(LazySessionPanel),
+  dependencies: safePreload(LazyDependencyGraphPanel),
+  packages: safePreload(LazyPackagesPanel),
+  outline: safePreload(LazyOutlinePanel),
+  documentation: safePreload(LazyDocumentationPanel),
+  snippets: safePreload(LazySnippetsPanel),
+  ai: () => {
+    safePreload(LazyChatPanel)();
+    safePreload(LazyAgentPanel)();
+  },
+  errors: safePreload(LazyErrorsPanel),
+  scratchpad: safePreload(LazyScratchpadPanel),
+  tracing: safePreload(LazyTracingPanel),
+  secrets: safePreload(LazySecretsPanel),
+  logs: safePreload(LazyLogsPanel),
+  terminal: safePreload(LazyTerminal),
+  cache: safePreload(LazyCachePanel),
+};

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -22,6 +22,7 @@ import {
   PANELS,
   type PanelDescriptor,
 } from "../types";
+import { PANEL_PRELOADERS } from "./lazy-panels";
 
 export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab, isSidebarOpen } =
@@ -141,6 +142,7 @@ export const Sidebar: React.FC = () => {
         className="flex flex-col gap-0"
         minItems={0}
         onAction={(panel) => toggleApplication(panel.type)}
+        onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
         renderItem={(panel) => (
           <SidebarItem
             tooltip={panel.tooltip}

package/src/components/slides/reveal-component.tsx

@@ -14,6 +14,7 @@ import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { Button } from "@/components/ui/button";
+import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
@@ -274,6 +275,8 @@ const RevealSlidesComponent = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const deckRef = useRef<RevealApi | null>(null);
   const { width, height } = useSlideDimensions(containerRef);
+  const isFullscreen = useFullScreenElement() != null;
+
   // Skip the Notes plugin inside reveal's own speaker-view iframes so pressing
   // `S` there doesn't try to spawn another popup.
   const kioskMode = useAtomValue(kioskModeAtom);
@@ -607,6 +610,7 @@ const RevealSlidesComponent = ({
         <PanelResizeHandle
           className="mo-slides-notes-resize"
           hitAreaMargins={{ coarse: 12, fine: 4 }}
+          disabled={isFullscreen}
         />
         <Panel
           defaultSize={10}

package/src/components/ui/reorderable-list.tsx

@@ -57,6 +57,12 @@ export interface ReorderableListProps<T> {
    * Callback when an item is clicked
    */
   onAction?: (item: T) => void;
+  /**
+   * Fired when an item is hovered or focused. Useful for preloading the
+   * resource the item points to before it is activated. Attached to the
+   * focusable list item so it works for both pointer and keyboard users.
+   */
+  onItemPreloadHint?: (item: T) => void;
   /**
    * All available items that can be added to the list
    */
@@ -142,6 +148,7 @@ export const ReorderableList = <T extends object>({
   ariaLabel = "Reorderable list",
   className,
   crossListDrag,
+  onItemPreloadHint,
 }: ReorderableListProps<T>) => {
   const mimeType = crossListDrag
     ? getDragMimeType(crossListDrag.dragType)
@@ -294,6 +301,12 @@ export const ReorderableList = <T extends object>({
           key={getKey(item)}
           id={getKey(item)}
           className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          onHoverStart={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
+          onFocus={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
         >
           {renderItem(item)}
         </ListBoxItem>

package/src/utils/lazy.ts

@@ -3,7 +3,12 @@
 import React from "react";
 
 interface LazyComponentWithPreload<T> {
-  preload: () => void;
+  /**
+   * Eagerly trigger the dynamic import. Returns the import promise so callers
+   * can await it or attach error handling; safe to call multiple times (the
+   * import is memoized).
+   */
+  preload: () => Promise<{ default: React.ComponentType<T> }>;
   Component: React.LazyExoticComponent<React.ComponentType<T>>;
 }