@marimo-team/islands 0.21.1-dev94 → 0.21.2-dev0

package/dist/{tooltip-SPkubVH3.js → tooltip-CKG75XQa.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-WIWVvdBh.js";
-import { m as useComposedRefs, y as cn } from "./button-DQpBib29.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Dk6JxauT.js";
+import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-C0Rnbr-_.js";
+import { m as useComposedRefs, y as cn } from "./button-BKkuUpZh.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.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 = (t) => {
   let { __scopeTooltip: k, delayDuration: A = DEFAULT_DELAY_DURATION, skipDelayDuration: j = 300, disableHoverableContent: M = false, children: N } = t, P = import_react.useRef(true), F = import_react.useRef(false), I = import_react.useRef(0);

package/dist/{types-0FB-N7AA.js → types-CGc7peZV.js}

@@ -5,17 +5,17 @@ var _a;
 import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-WIWVvdBh.js";
-import { t as Check } from "./check-DpqPQmzz.js";
-import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-BLDcDYdI.js";
+import { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-C0Rnbr-_.js";
+import { t as Check } from "./check-Diwc5emq.js";
+import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-BbpGrh4j.js";
 import { n as clsx_default } from "./clsx-D2KVTYnW.js";
-import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-DQpBib29.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Dk6JxauT.js";
+import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-BKkuUpZh.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-CqtLRVZP.js";
 import { t as toString_default } from "./toString-DbIAWQpF.js";
 import { i as debounce_default, n as Constants } from "./constants-CytQ_3LM.js";
-import { C as useEvent_default } from "./useTheme-D0rdoMBF.js";
+import { C as useEvent_default } from "./useTheme-CPybHVFN.js";
 import { t as memoizeLastValue } from "./once-BqS42WgZ.js";
 var ChevronRight = createLucideIcon("chevron-right", [["path", {
   d: "m9 18 6-6-6-6",

package/dist/{useAsyncData-D7-oahg5.js → useAsyncData-CEjJxwFB.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { C as useEvent_default } from "./useTheme-D0rdoMBF.js";
+import { C as useEvent_default } from "./useTheme-CPybHVFN.js";
 import { t as invariant } from "./invariant-D9QLJ4SZ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-DLS-bHHT.js → useDeepCompareMemoize-BWUwfh37.js}

@@ -4,12 +4,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-WIWVvdBh.js";
-import { a as cva, g as Logger, y as cn } from "./button-DQpBib29.js";
+import { l as createLucideIcon } from "./dist-C0Rnbr-_.js";
+import { a as cva, g as Logger, y as cn } from "./button-BKkuUpZh.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { r as KnownQueryParams } from "./constants-CytQ_3LM.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-D0rdoMBF.js";
-import { i as tableFromIPC } from "./loader-DsE3MiYo.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CPybHVFN.js";
+import { i as tableFromIPC } from "./loader-CABJs6GU.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{useIframeCapabilities-DFGZKWkO.js → useIframeCapabilities-OQaMKgZl.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { g as Logger } from "./button-DQpBib29.js";
+import { g as Logger } from "./button-BKkuUpZh.js";
 import { n as once } from "./once-BqS42WgZ.js";
 function testStorage(e) {
   try {

package/dist/{useTheme-D0rdoMBF.js → useTheme-CPybHVFN.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-DQpBib29.js";
-import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-Dk6JxauT.js";
+import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-BKkuUpZh.js";
+import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-BBPQRrDo.js";
 import { t as _baseIsEqual_default } from "./_baseIsEqual-CvgsjYoW.js";
 import { t as merge_default } from "./merge-NuyC7LN7.js";
 function isEqual(e, A) {

package/dist/{vega-component-CnO3mkFC.js → vega-component-CuPTCRp5.js}

@@ -1,19 +1,19 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DLS-bHHT.js";
-import { d as Objects, g as Logger, h as Events, y as cn } from "./button-DQpBib29.js";
-import "./Combination-Dk6JxauT.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BWUwfh37.js";
+import { d as Objects, g as Logger, h as Events, y as cn } from "./button-BKkuUpZh.js";
+import "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-CqtLRVZP.js";
-import { t as Tooltip } from "./tooltip-SPkubVH3.js";
+import { t as Tooltip } from "./tooltip-CKG75XQa.js";
 import { i as debounce_default } from "./constants-CytQ_3LM.js";
-import { C as useEvent_default, n as useTheme } from "./useTheme-D0rdoMBF.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-DsE3MiYo.js";
+import { C as useEvent_default, n as useTheme } from "./useTheme-CPybHVFN.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-CABJs6GU.js";
 import { t as uniq_default } from "./uniq-H2E5nMLq.js";
-import { n as ErrorBanner } from "./error-banner-BctofTCP.js";
+import { n as ErrorBanner } from "./error-banner-Dmi5ujan.js";
 import { n as formats } from "./vega-loader.browser-CQ-lnUkI.js";
-import { t as useAsyncData } from "./useAsyncData-D7-oahg5.js";
+import { t as useAsyncData } from "./useAsyncData-CEjJxwFB.js";
 import { t as j } from "./react-vega-C6kwcd86.js";
 import "./defaultLocale-Bklbu-Tp.js";
 import "./defaultLocale-CfQ4kBaV.js";
@@ -598,9 +598,12 @@ var VegaComponent = (e) => {
       children: B.stack
     })]
   }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: cn("relative", "width" in W && W.width === "container" && "vega-container-width"),
+    className: cn("relative"),
     onPointerDown: Events.stopPropagation(),
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: R }), Q()]
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      ref: R,
+      "data-container-width": getContainerWidth(W)
+    }), Q()]
   })] });
 };
 function convertSetToList(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.1-dev94",
+  "version": "0.21.2-dev0",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/charts/lazy-chart.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import type { TopLevelSpec } from "vega-lite";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { tooltipHandler } from "@/components/charts/tooltip";
+import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import type { ErrorMessage } from "./chart-spec/spec";
 import { augmentSpecWithData } from "./chart-spec/spec";
@@ -30,6 +31,7 @@ export const LazyChart: React.FC<{
       <React.Suspense fallback={<LoadingChart />}>
         <LazyVegaEmbed
           spec={spec}
+          data-container-width={getContainerWidth(spec)}
           options={{
             theme: theme === "dark" ? "dark" : undefined,
             height: height,

package/src/components/data-table/column-summary/column-summary.tsx

@@ -45,6 +45,7 @@ export const TableColumnSummary = <TData, TValue>({
         <Suspense fallback={skeleton}>
           <LazyVegaEmbed
             spec={spec}
+            data-container-width="container"
             options={{
               width: 80,
               height: 30,

package/src/components/datasources/column-preview.tsx

@@ -224,6 +224,7 @@ export function renderChart(chartSpec: string, theme: Theme) {
   return (
     <Suspense fallback={LoadingChart}>
       <LazyVegaEmbed
+        data-container-width="container"
         spec={updateSpec(JSON.parse(chartSpec) as TopLevelFacetedUnitSpec)}
         options={{
           theme: theme === "dark" ? "dark" : "vox",

package/src/components/editor/Output.tsx

@@ -27,6 +27,7 @@ import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
+import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { Events } from "@/utils/events";
 import { invariant } from "@/utils/invariant";
@@ -205,6 +206,7 @@ export const OutputRenderer: React.FC<{
         <Suspense fallback={<ChartLoadingState />}>
           <LazyVegaEmbed
             spec={parsedJsonData as TopLevelFacetedUnitSpec}
+            data-container-width={getContainerWidth(parsedJsonData)}
             options={{
               theme: theme === "dark" ? "dark" : undefined,
               mode: "vega-lite",

package/src/components/editor/actions/useCellActionButton.tsx

@@ -41,7 +41,10 @@ import { hasOnlyOneCellAtom, useCellActions } from "@/core/cells/cells";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
-import { toggleToLanguage } from "@/core/codemirror/language/commands";
+import {
+  getCurrentLanguageAdapter,
+  toggleToLanguage,
+} from "@/core/codemirror/language/commands";
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
@@ -235,35 +238,41 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         },
         hidden: isSetupCell,
       },
-      {
-        icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
-        label: "Convert to SQL",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
+      // We need to check this here because the user may have toggled the language
+      getCurrentLanguageAdapter(getEditorView()) === "sql"
+        ? {
+            icon: <PythonIcon />,
+            label: "View as Python",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              toggleToLanguage(editorView, "python", { force: true });
+            },
+            hidden: isSetupCell,
           }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          switchLanguage(editorView, {
-            language: "sql",
-            keepCodeAsIs: false,
-          });
-        },
-        hidden: isSetupCell,
-      },
-      {
-        icon: <PythonIcon />,
-        label: "Toggle as Python",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
-          }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          toggleToLanguage(editorView, "python", { force: true });
-        },
-        hidden: isSetupCell,
-      },
+        : {
+            icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
+            label: "Convert to SQL",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              maybeAddMarimoImport({
+                autoInstantiate,
+                createNewCell: createCell,
+              });
+              switchLanguage(editorView, {
+                language: "sql",
+                keepCodeAsIs: false,
+              });
+            },
+            hidden: isSetupCell,
+          },
     ],
 
     // Movement

package/src/components/editor/cell/code/cell-editor.tsx

@@ -163,6 +163,13 @@ const CellEditorInternal = ({
     }
   });
 
+  const afterToggleSQL = useEvent(() => {
+    maybeAddMarimoImport({
+      autoInstantiate,
+      createNewCell: cellActions.createNewCell,
+    });
+  });
+
   const aiEnabled = isAiEnabled(userConfig);
 
   const extensions = useMemo(() => {
@@ -173,6 +180,7 @@ const CellEditorInternal = ({
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
+        afterToggleSQL,
         onRun: handleRunCell,
         deleteCell: handleDelete,
         saveNotebook: saveOrNameNotebook,
@@ -267,6 +275,7 @@ const CellEditorInternal = ({
     handleRunCell,
     setAiCompletionCell,
     afterToggleMarkdown,
+    afterToggleSQL,
     setLanguageAdapter,
     showHiddenCode,
     saveOrNameNotebook,

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
 import { CrosshairIcon, PinIcon, PinOffIcon, XIcon } from "lucide-react";
 import type { PropsWithChildren } from "react";
 import { Panel, PanelResizeHandle } from "react-resizable-panels";
+import { raf2 } from "@/components/editor/navigation/focus-utils";
 import { Button } from "@/components/ui/button";
 import { Toggle } from "@/components/ui/toggle";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -151,6 +152,11 @@ const ResizableComponent = ({ children }: ResizableComponentProps) => {
     startingWidth: 400,
     minWidth: 300,
     maxWidth: 1500,
+    onResize: () => {
+      raf2(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    },
   });
 
   return (

package/src/components/editor/chrome/wrapper/__tests__/utils.test.ts

@@ -0,0 +1,35 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it, vi } from "vitest";
+import { handleDragging } from "../utils";
+
+describe("handleDragging", () => {
+  it("should dispatch a resize event after dragging ends", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(false);
+
+    // raf2: wait two animation frames
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    window.removeEventListener("resize", listener);
+  });
+
+  it("should not dispatch a resize event while dragging", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(true);
+
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).not.toHaveBeenCalled();
+
+    window.removeEventListener("resize", listener);
+  });
+});

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

@@ -17,6 +17,7 @@ import "./app-chrome.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
+import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -26,6 +27,7 @@ import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 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 { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -147,6 +149,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     });
   }, [panelLayout.sidebar, capabilities]);
 
+  const emitResizeEvent = useEvent(() => {
+    // HACK: Unfortunately, we have to do this twice to make sure the
+    // panel is fully expanded before we dispatch the resize event
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+  });
+
   // sync sidebar
   useEffect(() => {
     if (!sidebarRef.current) {
@@ -162,13 +172,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isSidebarOpen]);
 
   // sync panel
@@ -186,13 +190,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isDeveloperPanelOpen]);
 
   // Auto-correct developer panel selection when the selected tab is no longer available

package/src/components/editor/chrome/wrapper/utils.ts

@@ -1,8 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { raf2 } from "../../navigation/focus-utils";
+
 export function handleDragging(isDragging: boolean) {
   if (!isDragging) {
     // Once the user is done dragging, dispatch a resize event
-    window.dispatchEvent(new Event("resize"));
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
   }
 }

package/src/components/editor/header/status.tsx

@@ -5,6 +5,7 @@ import { HourglassIcon, LockIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
+import { onlyScratchpadIsRunningAtom } from "@/core/cells/cells";
 import { viewStateAtom } from "@/core/mode";
 import { type ConnectionStatus, WebSocketState } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
@@ -52,17 +53,24 @@ const LockedIcon = () => (
   </Tooltip>
 );
 
-const RunningIcon = () => (
-  <Tooltip content="Jump to running cell" side="right">
-    <div
-      className={topLeftStatus}
-      data-testid="loading-indicator"
-      onClick={notebookScrollToRunning}
-    >
-      <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
-    </div>
-  </Tooltip>
-);
+const RunningIcon = () => {
+  const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
+  const tooltip = scratchpadOnly
+    ? "Scratchpad is running"
+    : "Jump to running cell";
+
+  return (
+    <Tooltip content={tooltip} side="right">
+      <div
+        className={topLeftStatus}
+        data-testid="loading-indicator"
+        onClick={scratchpadOnly ? undefined : notebookScrollToRunning}
+      >
+        <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
+      </div>
+    </Tooltip>
+  );
+};
 
 const NoiseBackground = () => (
   <>

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -158,12 +158,19 @@ export const GridLayoutRenderer: React.FC<Props> = ({
       compactType={null}
       preventCollision={true}
       rowHeight={layout.rowHeight}
-      onLayoutChange={(cellLayouts) =>
+      onLayoutChange={(cellLayouts) => {
+        // Don't update state in read mode — the layout is static and
+        // updating triggers a re-render cycle that causes an infinite loop
+        // (React error https://react.dev/errors/185 Maximum update depth exceeded).
+        // https://github.com/marimo-team/marimo/issues/8644
+        if (isReading) {
+          return;
+        }
         setLayout({
           ...layout,
           cells: cellLayouts,
-        })
-      }
+        });
+      }}
       droppingItem={
         droppingItem
           ? {

package/src/core/cells/cells.ts

@@ -1640,6 +1640,12 @@ export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );
+export const onlyScratchpadIsRunningAtom = atom((get) => {
+  const { cellRuntime } = get(notebookAtom);
+  return Object.entries(cellRuntime).every(
+    ([id, rt]) => rt.status !== "running" || id === SCRATCH_CELL_ID,
+  );
+});
 export const notebookQueuedOrRunningCountAtom = atom((get) =>
   notebookQueueOrRunningCount(get(notebookAtom)),
 );

package/src/core/cells/utils.ts

@@ -11,6 +11,7 @@ export function notebookIsRunning(state: NotebookState) {
     (cell) => cell.status === "running",
   );
 }
+
 export function notebookQueueOrRunningCount(state: NotebookState) {
   return Object.values(state.cellRuntime).filter(
     (cell) => cell.status === "running" || cell.status === "queued",

package/src/core/codemirror/__tests__/setup.test.ts

@@ -45,6 +45,7 @@ function getOpts() {
       onRun: namedFunction("onRun"),
       deleteCell: namedFunction("deleteCell"),
       afterToggleMarkdown: namedFunction("afterToggleMarkdown"),
+      afterToggleSQL: namedFunction("afterToggleSQL"),
     } as unknown as CodemirrorCellActions,
     completionConfig: {
       activate_on_typing: false,

package/src/core/codemirror/cells/state.ts

@@ -11,6 +11,7 @@ export interface CodemirrorCellActions extends CellActions {
   onRun: () => void;
   deleteCell: () => void;
   afterToggleMarkdown: () => void;
+  afterToggleSQL: () => void;
   saveNotebook: () => void;
 }
 

package/src/core/codemirror/extensions.ts

@@ -42,6 +42,26 @@ export function formatKeymapExtension(hotkeys: HotkeyProvider) {
           actions.afterToggleMarkdown();
         }
 
+        return response !== false;
+      },
+    },
+    {
+      key: hotkeys.getHotkey("cell.viewAsSQL").key,
+      preventDefault: true,
+      run: (ev) => {
+        const currentLanguage = getCurrentLanguageAdapter(ev);
+        const destinationLanguage =
+          currentLanguage === "sql" ? "python" : "sql";
+
+        const response = toggleToLanguage(ev, destinationLanguage, {
+          force: true,
+        });
+
+        if (response === "sql") {
+          const actions = ev.state.facet(cellActionsState);
+          actions.afterToggleSQL();
+        }
+
         return response !== false;
       },
     },

package/src/core/codemirror/language/utils.ts

@@ -3,7 +3,11 @@
 import type { EditorState } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
 import { replaceEditorContent } from "../replace-editor-content";
-import { languageAdapterState } from "./extension";
+import {
+  languageAdapterFromCode,
+  languageAdapterState,
+  switchLanguage,
+} from "./extension";
 import { languageMetadataField } from "./metadata";
 
 /**
@@ -35,6 +39,17 @@ export function updateEditorCodeFromPython(
   editor: EditorView,
   pythonCode: string,
 ): string {
+  const currentAdapter = editor.state.field(languageAdapterState);
+  const correctAdapter = languageAdapterFromCode(pythonCode);
+
+  // If the language type changed (e.g., markdown → python), switch adapters
+  if (correctAdapter.type !== currentAdapter.type) {
+    switchLanguage(editor, {
+      language: correctAdapter.type,
+      keepCodeAsIs: true,
+    });
+  }
+
   const languageAdapter = editor.state.field(languageAdapterState);
   const [code] = languageAdapter.transformIn(pythonCode);
   // Use replaceEditorContent which preserves cursor position when focused