@marimo-team/islands 0.23.7-dev1 → 0.23.7-dev11

package/dist/stylus-SfWSnzPv.js

@@ -0,0 +1,4 @@
+import { t as stylus } from "./stylus-Bn_ZjOQ3.js";
+export {
+  stylus
+};

package/dist/swift-jRPdq2zR.js

@@ -0,0 +1,4 @@
+import { t as swift } from "./swift-BLUJhMbz.js";
+export {
+  swift
+};

package/dist/tcl-_hpTHGX3.js

@@ -0,0 +1,4 @@
+import { t as tcl } from "./tcl-C86fxecl.js";
+export {
+  tcl
+};

package/dist/textile-C9h8slqH.js

@@ -0,0 +1,4 @@
+import { t as textile } from "./textile-DmHh2rsK.js";
+export {
+  textile
+};

package/dist/{time-CMdrp3hw.js → time-C1SGcFMH.js}

@@ -1,7 +1,7 @@
 import { a as tickStep, s as bisector } from "./precisionRound-CnHPY_5v.js";
-import { a as copy, i as continuous } from "./linear-DnHwODZa.js";
+import { a as copy, i as continuous } from "./linear-2NnK4cxi.js";
 import { A as durationSecond, C as timeMinute, D as durationHour, E as durationDay, M as durationYear, N as millisecond, O as durationMinute, S as utcHour, T as second, _ as utcSunday, c as timeMonth, j as durationWeek, k as durationMonth, l as utcMonth, o as timeYear, p as timeSunday, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour, y as unixDay } from "./defaultLocale-DoeErsX2.js";
-import { n as initRange } from "./init-D-g0ONX1.js";
+import { n as initRange } from "./init-uv0kkh4g.js";
 function max(e, g) {
   let _;
   if (g === void 0) for (let g2 of e) g2 != null && (_ < g2 || _ === void 0 && g2 >= g2) && (_ = g2);

package/dist/{timeline-definition-IT6M3QCI-E4NzxCs3.js → timeline-definition-IT6M3QCI-DJnh1ks5.js}

@@ -1,7 +1,7 @@
 import "./purify.es-DT70lfR0.js";
-import { t as arc_default } from "./arc-CHF8PiiF.js";
-import { i as log, n as __export, r as __name, t as select_default } from "./src-BY0BGg6V.js";
-import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-BrBb_0yY.js";
+import { t as arc_default } from "./arc-DfkSnvZm.js";
+import { i as log, n as __export, r as __name, t as select_default } from "./src-Bf2iLOlr.js";
+import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-D0cLy8Bb.js";
 var parser = (function() {
   var t = /* @__PURE__ */ __name(function(t2, S2, C2, w) {
     for (C2 || (C2 = {}), w = t2.length; w--; C2[t2[w]] = S2) ;

package/dist/toml-DWvtinD4.js

@@ -0,0 +1,4 @@
+import { t as toml } from "./toml-GWANRNAD.js";
+export {
+  toml
+};

package/dist/{treemap-GDKQZRPO-CoKHPxa7.js → treemap-GDKQZRPO-Du95DV6u.js}

@@ -1,6 +1,6 @@
 import "./chunk-TCCFYFTB-d3HOqL2I.js";
 import "./main-CThhXnXU.js";
-import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-Ds8wZXyP.js";
+import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-D9-XOau1.js";
 export {
   createTreemapServices
 };

package/dist/troff-Dwo_A0y7.js

@@ -0,0 +1,4 @@
+import { t as troff } from "./troff-BHTsomIy.js";
+export {
+  troff
+};

package/dist/ttcn-V--CPFKq.js

@@ -0,0 +1,4 @@
+import { t as ttcn } from "./ttcn-DQuhn5Mn.js";
+export {
+  ttcn
+};

package/dist/ttcn-cfg-CPSMchTG.js

@@ -0,0 +1,4 @@
+import { t as ttcnCfg } from "./ttcn-cfg-HjFYtdB-.js";
+export {
+  ttcnCfg
+};

package/dist/turtle-B4rPGBWu.js

@@ -0,0 +1,4 @@
+import { t as turtle } from "./turtle-nCay33Nv.js";
+export {
+  turtle
+};

package/dist/vb-DaMBBd4j.js

@@ -0,0 +1,4 @@
+import { t as vb } from "./vb-BG-XlqqJ.js";
+export {
+  vb
+};

package/dist/vbscript-BMJQqcE2.js

@@ -0,0 +1,4 @@
+import { t as vbScript } from "./vbscript-B6vyW0-D.js";
+export {
+  vbScript
+};

package/dist/{vega-component-CC8TqWWV.js → vega-component-C2BYPkfd.js}

@@ -15,10 +15,11 @@ import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats
 import { n as formats } from "./vega-loader.browser-3_z8GoFC.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BvW0-YWZ.js";
 import { t as useAsyncData } from "./useAsyncData-B6hCGywC.js";
-import { t as j } from "./react-vega-k9ODWPlI.js";
+import { t as j } from "./react-vega-Dh6-UKKe.js";
 import "./defaultLocale-BpsHxBd7.js";
 import "./defaultLocale-DoeErsX2.js";
 import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CmwDuYUH.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) {
   return e.data && "url" in e.data && (e.data.url = asRemoteURL(e.data.url).href), e;
@@ -455,26 +456,27 @@ function getBestSelectionForMark(e) {
       return ["point", "interval"];
   }
 }
+var VEGA_DATA_FETCH_CONCURRENCY = 5;
 async function resolveVegaSpecData(e) {
   if (!e) return e;
-  let C = "datasets" in e ? { ...e.datasets } : {}, w = async (e2) => {
+  let C = "datasets" in e ? { ...e.datasets } : {}, w = new Semaphore(VEGA_DATA_FETCH_CONCURRENCY), T = async (e2) => {
     if (!e2) return e2;
     if ("layer" in e2) {
-      let C2 = await Promise.all(e2.layer.map(w));
+      let C2 = await Promise.all(e2.layer.map(T));
       e2 = {
         ...e2,
         layer: C2
       };
     }
     if ("hconcat" in e2) {
-      let C2 = await Promise.all(e2.hconcat.map(w));
+      let C2 = await Promise.all(e2.hconcat.map(T));
       e2 = {
         ...e2,
         hconcat: C2
       };
     }
     if ("vconcat" in e2) {
-      let C2 = await Promise.all(e2.vconcat.map(w));
+      let C2 = await Promise.all(e2.vconcat.map(T));
       e2 = {
         ...e2,
         vconcat: C2
@@ -482,22 +484,22 @@ async function resolveVegaSpecData(e) {
     }
     if ("spec" in e2 && (e2 = {
       ...e2,
-      spec: await w(e2.spec)
+      spec: await T(e2.spec)
     }), !e2.data || !("url" in e2.data)) return e2;
-    let T2;
+    let E2;
     try {
-      T2 = asRemoteURL(e2.data.url);
+      E2 = asRemoteURL(e2.data.url);
     } catch {
       return e2;
     }
-    let E = await vegaLoadData(T2.href, e2.data.format);
-    return C[T2.pathname] = E, {
+    let D = e2.data.format, O = await w.run(() => vegaLoadData(E2.href, D));
+    return C[E2.pathname] = O, {
       ...e2,
-      data: { name: T2.pathname }
+      data: { name: E2.pathname }
     };
-  }, T = await w(e);
-  return Object.keys(C).length === 0 ? T : {
-    ...T,
+  }, E = await T(e);
+  return Object.keys(C).length === 0 ? E : {
+    ...E,
     datasets: C
   };
 }

package/dist/velocity-CGq2QRq2.js

@@ -0,0 +1,4 @@
+import { t as velocity } from "./velocity-CWegueqO.js";
+export {
+  velocity
+};

package/dist/verilog-CUNo8F5u.js

@@ -0,0 +1,4 @@
+import { t as verilog } from "./verilog-CzSQm4cG.js";
+export {
+  verilog
+};

package/dist/vhdl-CCzA0msW.js

@@ -0,0 +1,4 @@
+import { t as vhdl } from "./vhdl-DqnNVL7r.js";
+export {
+  vhdl
+};

package/dist/webidl-CqIMDIBL.js

@@ -0,0 +1,4 @@
+import { t as webIDL } from "./webidl-DXEUpDWH.js";
+export {
+  webIDL
+};

package/dist/xquery-XC5Kbr-1.js

@@ -0,0 +1,4 @@
+import { t as xQuery } from "./xquery-Ba_NB5bD.js";
+export {
+  xQuery
+};

package/dist/{xychartDiagram-PRI3JC2R-CuxTvjw5.js → xychartDiagram-PRI3JC2R-Dk2d_bX0.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
 import "./purify.es-DT70lfR0.js";
-import { t as linear } from "./linear-DnHwODZa.js";
-import { n as ordinal } from "./ordinal-2jIulmcR.js";
+import { t as linear } from "./linear-2NnK4cxi.js";
+import { n as ordinal } from "./ordinal-B43ZeR68.js";
 import { t as range } from "./range-BOiA8qqU.js";
 import "./defaultLocale-BpsHxBd7.js";
-import { t as line_default } from "./line-BWRi3U3S.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-DphMP0FA.js";
-import { n as initRange } from "./init-D-g0ONX1.js";
-import { i as log, r as __name } from "./src-BY0BGg6V.js";
-import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-BrBb_0yY.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-Jiw9ca1u.js";
-import "./dist-C89sHDXk.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-6wbaigKe.js";
+import { t as line_default } from "./line-C5s_12ee.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-mQeCz5CE.js";
+import { n as initRange } from "./init-uv0kkh4g.js";
+import { i as log, r as __name } from "./src-Bf2iLOlr.js";
+import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-D0cLy8Bb.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-BKNXdLmD.js";
+import "./dist-BGdYVvOu.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-D6c6cOBG.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/dist/yacas-CGOv7Dzy.js

@@ -0,0 +1,4 @@
+import { t as yacas } from "./yacas-HKQU6hyk.js";
+export {
+  yacas
+};

package/dist/z80-CXhVmi-f.js

@@ -0,0 +1,4 @@
+import { t as z80 } from "./z80-CXkHXLdj.js";
+export {
+  z80
+};

package/package.json

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

package/src/components/data-table/TableTopBar.tsx

@@ -34,6 +34,7 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   showTableExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isAnyPanelOpen?: boolean;
+  sizeBytes?: number | null;
 }
 
 export const TableTopBar: React.FC<TableTopBarProps> = ({
@@ -48,6 +49,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   togglePanel,
   isAnyPanelOpen,
   downloadAs,
+  sizeBytes,
 }) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
@@ -130,7 +132,9 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             Explore
           </Button>
         )}
-        {downloadAs && <ExportMenu downloadAs={downloadAs} />}
+        {downloadAs && (
+          <ExportMenu downloadAs={downloadAs} sizeBytes={sizeBytes} />
+        )}
       </div>
     </div>
   );

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

@@ -70,6 +70,9 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   setSorting?: OnChangeFn<SortingState>; // controlled sorting
   // Pagination
   totalRows: number | TooManyRows;
+  // JSON-serialized size of the currently-rendered data. Forwarded to
+  // ExportMenu so hosts can size-gate the Export button via downloadSizeLimitAtom.
+  sizeBytes?: number | null;
   totalColumns: number;
   pagination?: boolean;
   manualPagination?: boolean; // server-side pagination
@@ -121,6 +124,7 @@ const DataTableInternal = <TData,>({
   selection,
   totalColumns,
   totalRows,
+  sizeBytes,
   manualSorting = false,
   sorting,
   setSorting,
@@ -309,6 +313,7 @@ const DataTableInternal = <TData,>({
             togglePanel={togglePanel}
             isAnyPanelOpen={isAnyPanelOpen}
             downloadAs={downloadAs}
+            sizeBytes={sizeBytes}
           />
           <Table
             className={cn(

package/src/components/data-table/download-policy/atoms.ts

@@ -0,0 +1,10 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom } from "jotai";
+
+export interface DownloadSizeLimit {
+  limitBytes: number;
+  unavailableMessage: string;
+}
+
+export const downloadSizeLimitAtom = atom<DownloadSizeLimit | null>(null);

package/src/components/data-table/export-actions.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtomValue } from "jotai";
 import {
   BracesIcon,
   BrickWallIcon,
@@ -9,6 +10,7 @@ import {
 } from "lucide-react";
 import React from "react";
 import { useLocale } from "react-aria";
+import { downloadSizeLimitAtom } from "./download-policy/atoms";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -84,6 +86,11 @@ export interface ExportActionProps {
     error?: string | null;
     missing_packages?: string[] | null;
   }>;
+  // JSON-serialized size of the currently-rendered data. Used together with
+  // downloadSizeLimitAtom to disable the Export button when a host (e.g.,
+  // marimo-lsp inside VS Code) declares a download size cap. Null/undefined
+  // means "no info" and the gate stays disabled (fail-open).
+  sizeBytes?: number | null;
 }
 
 const labelForDownloadFormat = (format: DownloadFormat): string =>
@@ -94,12 +101,19 @@ const labelForCopyFormat = (format: CopyFormat): string =>
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const { locale } = useLocale();
   const [open, setOpen] = React.useState(false);
+  const policy = useAtomValue(downloadSizeLimitAtom);
+  const disabled = !!(
+    policy &&
+    props.sizeBytes != null &&
+    props.sizeBytes > policy.limitBytes
+  );
 
   const button = (
     <Button
       data-testid="export-button"
       size="xs"
       variant="text"
+      disabled={disabled}
       className={cn(
         "print:hidden text-xs gap-1",
         open ? "text-primary" : "text-muted-foreground",
@@ -113,7 +127,10 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const resolveDownloadUrl = async (
     format: DownloadFormat,
     onRetry: () => void,
-  ): Promise<{ url: string; filename: string } | null> => {
+  ): Promise<{
+    url: string;
+    filename: string;
+  } | null> => {
     let response: Awaited<ReturnType<typeof props.downloadAs>>;
     try {
       response = await props.downloadAs({ format });
@@ -143,7 +160,10 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
       return null;
     }
 
-    return { url: response.url, filename: response.filename };
+    return {
+      url: response.url,
+      filename: response.filename,
+    };
   };
 
   const handleDownload = async (format: DownloadFormat) => {
@@ -229,8 +249,15 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
 
   return (
     <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
-      <Tooltip content="Export" open={open ? false : undefined}>
-        <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
+      <Tooltip
+        content={disabled ? policy?.unavailableMessage : "Export"}
+        open={open ? false : undefined}
+      >
+        <DropdownMenuTrigger asChild={true} disabled={disabled}>
+          <span tabIndex={disabled ? 0 : -1} className="inline-flex">
+            {button}
+          </span>
+        </DropdownMenuTrigger>
       </Tooltip>
       <DropdownMenuContent side="bottom" className="print:hidden">
         <DropdownMenuLabel className="text-xs text-muted-foreground">

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

@@ -11,6 +11,9 @@ import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
 import { resolvePaths } from "@/utils/pathUtils";
+import { mapWithConcurrency } from "@/utils/semaphore";
+
+const FILE_OP_CONCURRENCY = 5;
 
 /**
  * Normalized result of a file mutation: the server response when successful,
@@ -159,28 +162,26 @@ export class RequestingTree {
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
 
-    await Promise.all(
-      fromIds.map(async (id) => {
-        const node = this.delegate.find(id);
-        if (!node) {
-          return;
-        }
-        const originalPath = node.data.path;
-        const newPath = this.path.join(
-          parentPath,
-          this.path.basename(originalPath as FilePath),
-        );
-        const result = await this.callbacks
-          .renameFileOrFolder({ path: originalPath, newPath })
-          .then(handleFileResponse);
-        if (!result) {
-          return;
-        }
+    await mapWithConcurrency(fromIds, FILE_OP_CONCURRENCY, async (id) => {
+      const node = this.delegate.find(id);
+      if (!node) {
+        return;
+      }
+      const originalPath = node.data.path;
+      const newPath = this.path.join(
+        parentPath,
+        this.path.basename(originalPath as FilePath),
+      );
+      const result = await this.callbacks
+        .renameFileOrFolder({ path: originalPath, newPath })
+        .then(handleFileResponse);
+      if (!result) {
+        return;
+      }
 
-        this.delegate.move({ id, parentId, index: 0 });
-        this.delegate.update({ id, changes: { path: newPath } });
-      }),
-    );
+      this.delegate.move({ id, parentId, index: 0 });
+      this.delegate.update({ id, changes: { path: newPath } });
+    });
 
     this.onChange(this.delegate.data);
 
@@ -262,11 +263,12 @@ export class RequestingTree {
       this.rootPath,
       ...ids.map((id) => this.delegate.find(id)?.data.path),
     ].filter(Boolean);
-    // Request all folders in parallel, and catch any errors
-    const data = await Promise.all(
-      openFolders.map((path) =>
+    // Request open folders with bounded concurrency; swallow per-folder errors.
+    const data = await mapWithConcurrency(
+      openFolders,
+      FILE_OP_CONCURRENCY,
+      (path) =>
         this.callbacks.listFiles({ path: path }).catch(() => ({ files: [] })),
-      ),
     );
 
     for (const [idx, openFolder] of openFolders.entries()) {

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

@@ -3,13 +3,14 @@
 import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
-import { serializeBlob } from "@/utils/blob";
 import { withLoadingToast } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { mapWithConcurrency } from "@/utils/semaphore";
 import { refreshRoot } from "./state";
 
 const MAX_SIZE = 1024 * 1024 * 100; // 100MB
+const UPLOAD_CONCURRENCY = 5;
 
 export function useFileExplorerUpload(options: DropzoneOptions = {}) {
   const { sendCreateFileOrFolder } = useRequestClient();
@@ -59,30 +60,28 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
         loadingTitle,
         async (progress) => {
           progress.addTotal(acceptedFiles.length);
-          for (const file of acceptedFiles) {
-            // We strip the leading slash since File.path can return
-            // `/path/to/file`.
-            const filePath = stripLeadingSlash(getPath(file));
-            let directoryPath = "" as FilePath;
-            if (filePath) {
-              directoryPath =
-                PathBuilder.guessDeliminator(filePath).dirname(filePath);
-            }
+          await mapWithConcurrency(
+            acceptedFiles,
+            UPLOAD_CONCURRENCY,
+            async (file) => {
+              // We strip the leading slash since File.path can return
+              // `/path/to/file`.
+              const filePath = stripLeadingSlash(getPath(file));
+              let directoryPath = "" as FilePath;
+              if (filePath) {
+                directoryPath =
+                  PathBuilder.guessDeliminator(filePath).dirname(filePath);
+              }
 
-            // File contents are sent base64-encoded to support arbitrary
-            // bytes data
-            //
-            // get the raw base64-encoded data from a string starting with
-            // data:*/*;base64,
-            const base64 = (await serializeBlob(file)).split(",")[1];
-            await sendCreateFileOrFolder({
-              path: directoryPath,
-              type: "file",
-              name: file.name,
-              contents: base64,
-            });
-            progress.increment(1);
-          }
+              await sendCreateFileOrFolder({
+                path: directoryPath,
+                type: "file",
+                name: file.name,
+                file,
+              });
+              progress.increment(1);
+            },
+          );
           await refreshRoot();
         },
         onFinish,

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -246,7 +246,7 @@ describe("insertImage", () => {
       path: "public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -291,7 +291,7 @@ describe("insertImage", () => {
       path: "nested/public", // store in public folder of notebook directory
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -337,7 +337,7 @@ describe("insertImage", () => {
       path: "/Users/user/Development/project/public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     // Should convert absolute path to relative path

package/src/core/codemirror/markdown/commands.ts

@@ -313,7 +313,6 @@ export async function insertImage(view: EditorView, file: File) {
   // If the file is base64 encoded, we can save it locally to prevent large file strings
   try {
     if (dataUrl.startsWith("data:")) {
-      const base64 = dataUrl.split(",")[1];
       let inputFilename = prompt(
         "We can save your image as a file. Enter a filename.",
         file.name,
@@ -348,7 +347,7 @@ export async function insertImage(view: EditorView, file: File) {
           path: publicFolderPath as FilePath,
           type: "file",
           name: inputFilename,
-          contents: base64,
+          file,
         });
 
         if (createFileRes.success) {

package/src/core/network/requests-network.ts

@@ -6,6 +6,19 @@ import { API, createClientWithRuntimeManager } from "./api";
 import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
+/**
+ * Options for POSTing FormData via openapi-fetch. openapi-fetch types
+ * request bodies from the JSON schema, so we bypass the body type and
+ * override the serializer to pass the FormData through unchanged; the
+ * browser then sets the multipart Content-Type with boundary.
+ */
+function multipartInit(formData: FormData) {
+  return {
+    body: formData as never,
+    bodySerializer: (body: unknown) => body as never,
+  };
+}
+
 const { handleResponse, handleResponseReturnNull } = API;
 
 export function createNetworkRequests(): EditRequests & RunRequests {
@@ -298,10 +311,15 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     sendCreateFileOrFolder: async (request) => {
       await waitForConnectionOpen();
+      const formData = new FormData();
+      formData.append("path", request.path);
+      formData.append("type", request.type);
+      formData.append("name", request.name);
+      if (request.file) {
+        formData.append("file", request.file, request.name);
+      }
       return getClient()
-        .POST("/api/files/create", {
-          body: request,
-        })
+        .POST("/api/files/create", multipartInit(formData))
         .then(handleResponse);
     },
     sendDeleteFileOrFolder: async (request) => {