@marimo-team/islands 0.19.5-dev4 → 0.19.5-dev40

package/dist/{types-CbQF8CBX.js → types-BQOP2pRy.js}

@@ -13,7 +13,7 @@ import { c as useComposedRefs, l as Events, s as composeRefs, t as Button, u as
 import { s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-DJW8xUDg.js";
-import { h as useEvent_default } from "./useTheme-BllQjRdW.js";
+import { h as useEvent_default } from "./useTheme-CVr6Gb_R.js";
 import { t as toString_default } from "./toString-C4TLO6FA.js";
 import { i as debounce_default, n as Constants } from "./constants-DuN_eoAL.js";
 import { t as memoizeLastValue } from "./once-C-NkXwWJ.js";

package/dist/{useAsyncData-TLXJC7yx.js → useAsyncData-kqbhbSuf.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { h as useEvent_default } from "./useTheme-BllQjRdW.js";
+import { h as useEvent_default } from "./useTheme-CVr6Gb_R.js";
 import { t as invariant } from "./invariant-BW72tHBT.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-DVnEG7jx.js → useDeepCompareMemoize-B2QEm3jo.js}

@@ -8,7 +8,7 @@ import { N as createLucideIcon } from "./Combination-BOmAhdTT.js";
 import { a as cva, u as cn } from "./button-D6ZIdUA3.js";
 import { s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
-import { f as waitFor, p as isIslands, u as store, x as atom } from "./useTheme-BllQjRdW.js";
+import { f as waitFor, p as isIslands, u as store, x as atom } from "./useTheme-CVr6Gb_R.js";
 import { r as KnownQueryParams } from "./constants-DuN_eoAL.js";
 import { i as tableFromIPC } from "./loader-DH7xXi-E.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [

package/dist/{useTheme-BllQjRdW.js → useTheme-CVr6Gb_R.js}

@@ -598,7 +598,7 @@ const UserConfigSchema = looseObject({
     markdown: boolean().optional(),
     rtc: boolean().optional()
   }).prefault(() => ({})),
-  server: looseObject({}).prefault(() => ({})),
+  server: looseObject({ disable_file_downloads: boolean().optional() }).prefault(() => ({})),
   diagnostics: looseObject({
     enabled: boolean().optional(),
     sql_linter: boolean().optional()
@@ -681,6 +681,9 @@ atom((e) => e(appConfigAtom).width), atom((e) => {
   var _a, _b;
   let k = e(resolvedMarimoConfigAtom), A = ((_a = k.snippets) == null ? void 0 : _a.custom_paths) ?? [], j = (_b = k.snippets) == null ? void 0 : _b.include_default_snippets;
   return A.length > 0 || j === true;
+}), atom((e) => {
+  var _a;
+  return ((_a = e(resolvedMarimoConfigAtom).server) == null ? void 0 : _a.disable_file_downloads) ?? false;
 });
 var import_compiler_runtime = require_compiler_runtime(), themeAtom = atom((e) => {
   if (isIslands()) {

package/dist/{vega-component-B2QrGnW8.js → vega-component-DAeU1_cV.js}

@@ -2,18 +2,18 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
 import "./Combination-BOmAhdTT.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-DVnEG7jx.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-B2QEm3jo.js";
 import { l as Events } from "./button-D6ZIdUA3.js";
 import { o as Objects, s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-DJW8xUDg.js";
 import { l as Tooltip, n as ErrorBanner } from "./error-banner-BhqH4mGj.js";
-import { h as useEvent_default, n as useTheme } from "./useTheme-BllQjRdW.js";
+import { h as useEvent_default, n as useTheme } from "./useTheme-CVr6Gb_R.js";
 import { t as _baseUniq_default } from "./_baseUniq-BUGws47x.js";
 import { i as debounce_default } from "./constants-DuN_eoAL.js";
 import { a as tooltipHandler, n as vegaLoadData } from "./loader-DH7xXi-E.js";
 import { n as formats } from "./vega-loader.browser-nTy1NZD3.js";
-import { t as useAsyncData } from "./useAsyncData-TLXJC7yx.js";
+import { t as useAsyncData } from "./useAsyncData-kqbhbSuf.js";
 import { t as j } from "./react-vega-z40f-dXy.js";
 import "./defaultLocale-DZtxSCkJ.js";
 import "./defaultLocale-DMZFeDB8.js";

package/package.json

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

package/src/__mocks__/requests.ts

@@ -60,6 +60,7 @@ export const MockRequestClient = {
       shutdownSession: vi.fn().mockResolvedValue({}),
       exportAsHTML: vi.fn().mockResolvedValue({ html: "" }),
       exportAsMarkdown: vi.fn().mockResolvedValue({ markdown: "" }),
+      exportAsPDF: vi.fn().mockResolvedValue(new Blob()),
       autoExportAsHTML: vi.fn().mockResolvedValue({}),
       autoExportAsMarkdown: vi.fn().mockResolvedValue({}),
       autoExportAsIPYNB: vi.fn().mockResolvedValue({}),

package/src/components/app-config/user-config-form.tsx

@@ -993,7 +993,7 @@ export const UserConfigForm: React.FC = () => {
                       <br />
                       <br />
                       Running marimo in a{" "}
-                      <ExternalLink href="https://docs.marimo.io/guides/editor_features/package_management.html#running-marimo-in-a-sandbox-environment-uv-only">
+                      <ExternalLink href="https://docs.marimo.io/guides/package_management/inlining_dependencies.html">
                         sandboxed environment
                       </ExternalLink>{" "}
                       is only supported by <Kbd className="inline">uv</Kbd>
@@ -1283,6 +1283,39 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.server_side_pdf_export"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">
+                      Better PDF Export
+                    </FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="server-side-pdf-export-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.server_side_pdf_export"
+                  />
+                  <FormDescription>
+                    Enable PDF export using{" "}
+                    <Kbd className="inline">nbconvert</Kbd> and{" "}
+                    <Kbd className="inline">playwright</Kbd>. Refer to{" "}
+                    <ExternalLink href="https://docs.marimo.io/guides/exporting/#exporting-to-pdf-slides-or-rst">
+                      the docs
+                    </ExternalLink>
+                    .
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

package/src/components/chat/chat-panel.tsx

@@ -262,7 +262,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     return (
       <TooltipProvider>
-        <div className="px-3 py-2 border-t border-border/20 flex flex-row items-center justify-between">
+        <div className="px-3 py-2 border-t border-border/20 flex flex-row flex-wrap items-center justify-between gap-1">
           <div className="flex items-center gap-2">
             <FeatureFlagged feature="chat_modes">
               <Select value={currentMode} onValueChange={saveModeChange}>

package/src/components/data-table/cell-utils.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { CellId } from "@/core/cells/ids";
+
 export const DATA_CELL_ID = "data-cell-id";
 
 export function getCellDomProps(cellId: string) {
@@ -7,3 +9,11 @@ export function getCellDomProps(cellId: string) {
     [DATA_CELL_ID]: cellId,
   };
 }
+
+export const DATA_FOR_CELL_ID = "data-for-cell-id";
+
+export function getCellForDomProps(cellId: CellId) {
+  return {
+    [DATA_FOR_CELL_ID]: cellId,
+  };
+}

package/src/components/editor/Output.tsx

@@ -20,6 +20,7 @@ import { TextOutput } from "./output/TextOutput";
 import { VideoOutput } from "./output/VideoOutput";
 
 import "./output/Outputs.css";
+import { useAtomValue } from "jotai";
 import {
   ChevronsDownUpIcon,
   ChevronsUpDownIcon,
@@ -27,6 +28,7 @@ import {
 } from "lucide-react";
 import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
+import { viewStateAtom } from "@/core/mode";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
@@ -46,10 +48,9 @@ import { renderMimeIcon } from "./renderMimeIcon";
 
 const METADATA_KEY = "__metadata__";
 
-type MimeBundleWithoutMetadata = Record<
-  OutputMessage["mimetype"],
-  { [key: string]: unknown }
->;
+export type MimeType = OutputMessage["mimetype"];
+
+type MimeBundleWithoutMetadata = Record<MimeType, { [key: string]: unknown }>;
 
 type MimeBundle = MimeBundleWithoutMetadata & {
   [METADATA_KEY]?: Record<string, { width?: number; height?: number }>;
@@ -70,7 +71,7 @@ export const OutputRenderer: React.FC<{
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
   metadata?: { width?: number; height?: number };
-  renderFallback?: (mimetype: OutputMessage["mimetype"]) => React.ReactNode;
+  renderFallback?: (mimetype: MimeType) => React.ReactNode;
 }> = memo((props) => {
   const {
     message,
@@ -90,6 +91,8 @@ export const OutputRenderer: React.FC<{
       case "application/vnd.marimo+mimebundle":
       case "application/vnd.vegalite.v5+json":
       case "application/vnd.vega.v5+json":
+      case "application/vnd.vegalite.v6+json":
+      case "application/vnd.vega.v6+json":
         return typeof data === "string" ? JSON.parse(data) : data;
       default:
         return;
@@ -199,6 +202,8 @@ export const OutputRenderer: React.FC<{
       );
     case "application/vnd.vegalite.v5+json":
     case "application/vnd.vega.v5+json":
+    case "application/vnd.vegalite.v6+json":
+    case "application/vnd.vega.v6+json":
       return (
         <Suspense fallback={<ChartLoadingState />}>
           <LazyVegaEmbed
@@ -216,9 +221,7 @@ export const OutputRenderer: React.FC<{
       return (
         <MimeBundleOutputRenderer
           channel={channel}
-          data={
-            parsedJsonData as Record<OutputMessage["mimetype"], OutputMessage>
-          }
+          data={parsedJsonData as Record<MimeType, OutputMessage>}
         />
       );
     case "application/vnd.jupyter.widget-view+json":
@@ -258,6 +261,8 @@ const MimeBundleOutputRenderer: React.FC<{
   cellId?: CellId;
 }> = memo(({ data, channel, cellId }) => {
   const mimebundle = Array.isArray(data) ? data[0] : data;
+  const { mode } = useAtomValue(viewStateAtom);
+  const appView = mode === "present" || mode === "read";
 
   // Extract metadata if present (e.g., for retina image rendering)
   const metadata = mimebundle[METADATA_KEY];
@@ -265,10 +270,7 @@ const MimeBundleOutputRenderer: React.FC<{
   // Filter out metadata from the mime entries and type narrow
   const mimeEntries = Objects.entries(mimebundle as Record<string, unknown>)
     .filter(([key]) => key !== METADATA_KEY)
-    .map(
-      ([mime, data]) =>
-        [mime, data] as [OutputMessage["mimetype"], CellOutput["data"]],
-    );
+    .map(([mime, data]) => [mime, data] as [MimeType, CellOutput["data"]]);
 
   // If there is none, return null
   const first = mimeEntries[0]?.[0];
@@ -302,7 +304,12 @@ const MimeBundleOutputRenderer: React.FC<{
   return (
     <Tabs defaultValue={first} orientation="vertical">
       <div className="flex">
-        <TabsList className="self-start max-h-none flex flex-col gap-2 mr-4 shrink-0">
+        <TabsList
+          className={cn(
+            "self-start max-h-none flex flex-col gap-2 mr-3 shrink-0",
+            appView && "mt-4",
+          )}
+        >
           {mimeEntries.map(([mime]) => (
             <TabsTrigger
               key={mime}
@@ -315,7 +322,7 @@ const MimeBundleOutputRenderer: React.FC<{
             </TabsTrigger>
           ))}
         </TabsList>
-        <div className="flex-1">
+        <div className="flex-1 w-full">
           {mimeEntries.map(([mime, output]) => (
             <TabsContent key={mime} value={mime}>
               <ErrorBoundary>

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

@@ -54,7 +54,12 @@ import {
 } from "@/core/cells/cells";
 import { disabledCellIds } from "@/core/cells/utils";
 import { useResolvedMarimoConfig } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
 import { Constants } from "@/core/constants";
+import {
+  updateCellOutputsWithScreenshots,
+  useEnrichCellOutputs,
+} from "@/core/export/hooks";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { useTogglePresenting } from "@/core/layout/useTogglePresenting";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
@@ -64,7 +69,12 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  downloadAsPDF,
+  downloadBlob,
+  downloadHTMLAsImage,
+  withLoadingToast,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
 import { newNotebookURL } from "@/utils/urls";
@@ -110,13 +120,15 @@ export function useNotebookActions() {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);
   const setSettingsDialogOpen = useSetAtom(settingDialogAtom);
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
-  const { exportAsMarkdown, readCode, saveCellConfig } = useRequestClient();
+  const { exportAsMarkdown, readCode, saveCellConfig, updateCellOutputs } =
+    useRequestClient();
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
+  const takeScreenshots = useEnrichCellOutputs();
 
   // Fallback: if sharing is undefined, both are enabled by default
   const sharingHtmlEnabled = resolvedConfig.sharing?.html ?? true;
@@ -139,11 +151,7 @@ export function useNotebookActions() {
           label: "Download as HTML",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: true });
@@ -154,11 +162,7 @@ export function useNotebookActions() {
           label: "Download as HTML (exclude code)",
           handle: async () => {
             if (!filename) {
-              toast({
-                variant: "danger",
-                title: "Error",
-                description: "Notebooks must be named to be exported.",
-              });
+              toastNotebookMustBeNamed();
               return;
             }
             await downloadAsHTML({ filename, includeCode: false });
@@ -220,6 +224,26 @@ export function useNotebookActions() {
               </span>
             ),
           handle: async () => {
+            if (getFeatureFlag("server_side_pdf_export")) {
+              if (!filename) {
+                toastNotebookMustBeNamed();
+                return;
+              }
+
+              const downloadPDF = async () => {
+                await updateCellOutputsWithScreenshots(
+                  takeScreenshots,
+                  updateCellOutputs,
+                );
+                await downloadAsPDF({
+                  filename: filename,
+                  webpdf: false,
+                });
+              };
+              await withLoadingToast("Downloading PDF...", downloadPDF);
+              return;
+            }
+
             const beforeprint = new Event("export-beforeprint");
             const afterprint = new Event("export-afterprint");
             function print() {
@@ -527,3 +551,11 @@ export function useNotebookActions() {
       return action;
     });
 }
+
+function toastNotebookMustBeNamed() {
+  toast({
+    title: "Error",
+    description: "Notebooks must be named to be exported.",
+    variant: "danger",
+  });
+}

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

@@ -12,6 +12,7 @@ import React, {
   useState,
 } from "react";
 import useEvent from "react-use-event-hook";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import {
   renderMinimalShortcut,
   renderShortcut,
@@ -104,7 +105,11 @@ const CellActionsDropdownInternal = (
       {...restoreFocus}
     >
       <Command>
-        <CommandInput placeholder="Search actions..." className="h-6 m-1" />
+        <CommandInput
+          placeholder="Search actions..."
+          className="h-6 m-1"
+          {...getCellForDomProps(props.cellId)}
+        />
         <CommandList>
           <CommandEmpty>No results</CommandEmpty>
           {actions.map((group, i) => (

package/src/components/editor/controls/Controls.tsx

@@ -54,9 +54,7 @@ export const Controls = ({
   onRun,
   connectionState,
   running,
-  appConfig,
 }: ControlsProps): JSX.Element => {
-  const appWidth = appConfig.width;
   const undoAvailable = useAtomValue(canUndoDeletesAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
@@ -103,12 +101,7 @@ export const Controls = ({
         </div>
       )}
 
-      <div
-        className={cn(
-          bottomRightControls,
-          appWidth === "compact" && "xl:flex-row items-end",
-        )}
-      >
+      <div className={cn(bottomRightControls)}>
         <HideInKioskMode>
           <SaveComponent kioskMode={false} />
         </HideInKioskMode>

package/src/components/editor/file-tree/file-explorer.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import {
   ArrowLeftIcon,
@@ -47,6 +47,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
+import { disableFileDownloadsAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { FileInfo } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
@@ -396,6 +397,7 @@ const Edit = ({ node }: { node: NodeApi<FileInfo> }) => {
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   const { openFile, sendCreateFileOrFolder, sendFileDetails } =
     useRequestClient();
+  const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileType = node.data.isDirectory
     ? "directory"
@@ -611,7 +613,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           </>
         )}
         <DropdownMenuSeparator />
-        {!node.data.isDirectory && (
+        {!node.data.isDirectory && !disableFileDownloads && (
           <>
             <DropdownMenuItem
               onSelect={async () => {

package/src/components/editor/file-tree/file-viewer.tsx

@@ -15,7 +15,7 @@ import { Suspense, useEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Tooltip } from "@/components/ui/tooltip";
-import { hotkeysAtom } from "@/core/config/config";
+import { disableFileDownloadsAtom, hotkeysAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { FileInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
@@ -49,6 +49,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   const { theme } = useTheme();
   const { sendFileDetails, sendUpdateFile } = useRequestClient();
   const hotkeys = useAtomValue(hotkeysAtom);
+  const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
   const currentNotebookFilename = useAtomValue(filenameAtom);
   // undefined value means not modified yet
   const [internalValue, setInternalValue] = useState<string>("");
@@ -152,11 +153,13 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
           </Button>
         </Tooltip>
       )}
-      <Tooltip content="Download">
-        <Button size="small" onClick={handleDownload}>
-          <DownloadIcon />
-        </Button>
-      </Tooltip>
+      {!disableFileDownloads && (
+        <Tooltip content="Download">
+          <Button size="small" onClick={handleDownload}>
+            <DownloadIcon />
+          </Button>
+        </Tooltip>
+      )}
       {!isMedia(mimeType) && (
         <>
           <Tooltip content="Copy contents to clipboard">

package/src/components/editor/navigation/navigation.ts

@@ -10,6 +10,7 @@ import {
 import { useAtomValue, useSetAtom, useStore } from "jotai";
 import { useMemo } from "react";
 import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
+import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
@@ -101,7 +102,23 @@ function useCellFocusProps(
       // On focus, set the last focused cell id.
       focusActions.focusCell({ cellId });
     },
-    onBlurWithin: () => {
+    onBlurWithin: (e) => {
+      // Check if blur is happening because of vim search panel interaction
+      if (isInVimPanel(e.relatedTarget) || isInVimPanel(e.target)) {
+        // Don't hide code if we're just interacting with vim search
+        return;
+      }
+
+      // If the related target is for a cell id (data-for-cell-id), then we don't want to hide the code, otherwise it might
+      // close the dropdown.
+      if (
+        getDataForCellId(e.relatedTarget) === cellId ||
+        getDataForCellId(e.relatedTarget?.closest(`[${DATA_FOR_CELL_ID}]`)) ===
+          cellId
+      ) {
+        return;
+      }
+
       // On blur, hide the code if it was temporarily shown.
       temporarilyShownCodeActions.remove(cellId);
       actions.markTouched({ cellId });
@@ -116,6 +133,27 @@ function useCellFocusProps(
   return focusWithinProps;
 }
 
+function isInVimPanel(element: Element | null): boolean {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof HTMLElement) {
+    return element.closest(".cm-vim-panel") !== null;
+  }
+  return false;
+}
+
+function getDataForCellId(element: Element | null | undefined): CellId | null {
+  if (!element) {
+    return null;
+  }
+  const cellId = element.getAttribute(DATA_FOR_CELL_ID);
+  if (!cellId) {
+    return null;
+  }
+  return cellId as CellId;
+}
+
 type KeymapHandlers = Record<string, () => boolean>;
 
 /**

package/src/components/editor/renderMimeIcon.tsx

@@ -29,6 +29,8 @@ export function renderMimeIcon(mime: string) {
       return "📝";
     case "application/vnd.vegalite.v5+json":
     case "application/vnd.vega.v5+json":
+    case "application/vnd.vegalite.v6+json":
+    case "application/vnd.vega.v6+json":
       return "📊";
     case "application/vnd.marimo+mimebundle":
       return "📦";

package/src/core/codemirror/language/panel/panel.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { normalizeName } from "@/core/cells/names";
 import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { useAutoGrowInputProps } from "@/hooks/useAutoGrowInputProps";
+import { cellIdState } from "../../cells/state";
 import { formatSQL } from "../../format";
 import { languageAdapterState } from "../extension";
 import { MarkdownLanguageAdapter } from "../languages/markdown";
@@ -31,6 +32,7 @@ export const LanguagePanelComponent: React.FC<{
 }> = ({ view }) => {
   const { spanProps, inputProps } = useAutoGrowInputProps({ minWidth: 50 });
   const languageAdapter = view.state.field(languageAdapterState);
+  const cellId = view.state.facet(cellIdState);
 
   let actions: React.ReactNode = <div />;
   let showDivider = false;
@@ -93,6 +95,7 @@ export const LanguagePanelComponent: React.FC<{
         <SQLEngineSelect
           selectedEngine={metadata.engine}
           onChange={switchEngine}
+          cellId={cellId}
         />
         <div className="flex items-center gap-2 ml-auto">
           {metadata.engine === DUCKDB_ENGINE && <SQLModeSelect />}

package/src/core/codemirror/language/panel/sql.tsx

@@ -8,6 +8,7 @@ import {
   DatabaseBackup,
   SearchCheck,
 } from "lucide-react";
+import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
 import { Button } from "@/components/ui/button";
@@ -22,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tooltip } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
 import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
@@ -38,11 +40,13 @@ import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
 interface SelectProps {
   selectedEngine: ConnectionName;
   onChange: (engine: ConnectionName) => void;
+  cellId: CellId;
 }
 
 export const SQLEngineSelect: React.FC<SelectProps> = ({
   selectedEngine,
   onChange,
+  cellId,
 }) => {
   const connectionsMap = useAtomValue(dataConnectionsMapAtom);
 
@@ -98,10 +102,10 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row gap-1 items-center">
       <Select value={selectedEngine} onValueChange={handleSelectEngine}>
-        <SQLSelectTrigger>
+        <SQLSelectTrigger {...getCellForDomProps(cellId)}>
           <SelectValue placeholder="Select an engine" />
         </SQLSelectTrigger>
-        <SelectContent>
+        <SelectContent {...getCellForDomProps(cellId)}>
           <SelectGroup>
             <SelectLabel>Database connections</SelectLabel>
             {engineIsDisconnected && (

package/src/core/config/config-schema.ts

@@ -190,7 +190,11 @@ export const UserConfigSchema = z
       })
       // Pass through so that we don't remove any extra keys that the user has added.
       .prefault(() => ({})),
-    server: z.looseObject({}).prefault(() => ({})),
+    server: z
+      .looseObject({
+        disable_file_downloads: z.boolean().optional(),
+      })
+      .prefault(() => ({})),
     diagnostics: z
       .looseObject({
         enabled: z.boolean().optional(),