@marimo-team/islands 0.23.7-dev6 → 0.23.7-dev8

package/dist/{process-output-Bza_GK7Q.js → process-output-ClDgSR3m.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-hMMPiNe_.js";
+import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-_jxGvsrc.js";
 import { u as createLucideIcon } from "./dist-ESg7xyoD.js";
 import { t as Strings } from "./strings-B_FOH6eV.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";

package/dist/{reveal-component-BMOBPyvh.js → reveal-component-DisX89FD.js}

@@ -6,9 +6,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, h as Events, l as useEventListener, t as Button } from "./button-CA5pI2YF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import "./html-to-image-hMMPiNe_.js";
+import "./html-to-image-_jxGvsrc.js";
 import "./chunk-5FQGJX7Z-CO1e63h_.js";
-import { Ft as Code, Mt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, jt as EyeOff, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-jLjZTWEO.js";
+import { Ft as Code, Mt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, jt as EyeOff, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-i-wZHH96.js";
 import "./input-BAOe64zx.js";
 import "./toDate-CHtl9vts.js";
 import "./react-dom-BWRJ_g_k.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.7-dev6",
+  "version": "0.23.7-dev8",
   "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/upload.tsx

@@ -3,7 +3,6 @@
 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";
@@ -69,17 +68,11 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
                 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,
+              file,
             });
             progress.increment(1);
           }

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) => {

package/src/core/network/types.ts

@@ -80,6 +80,17 @@ export type SaveUserConfigurationRequest =
 export interface SetCellConfigRequest {
   configs: Record<CellId, Partial<CellConfig>>;
 }
+/**
+ * Client-side shape for creating a file/directory/notebook. The HTTP
+ * transport sends this as multipart/form-data; the WASM bridge base64-encodes
+ * `file` internally and crosses the JS<->Py boundary as JSON.
+ */
+export interface FileCreateInput {
+  path: string;
+  type: "file" | "directory" | "notebook";
+  name: string;
+  file?: Blob;
+}
 export type UpdateUIElementRequest = schemas["UpdateUIElementRequest"];
 export type ModelRequest = schemas["ModelRequest"];
 export type NotebookDocumentTransactionRequest =
@@ -165,7 +176,7 @@ export interface EditRequests {
   sendListFiles: (request: FileListRequest) => Promise<FileListResponse>;
   sendSearchFiles: (request: FileSearchRequest) => Promise<FileSearchResponse>;
   sendCreateFileOrFolder: (
-    request: FileCreateRequest,
+    request: FileCreateInput,
   ) => Promise<FileCreateResponse>;
   sendDeleteFileOrFolder: (
     request: FileDeleteRequest,

package/src/core/wasm/bridge.ts

@@ -3,6 +3,7 @@
 
 import { toast } from "@/components/ui/use-toast";
 import { userConfigAtom } from "@/core/config/config";
+import { serializeBlob } from "@/utils/blob";
 import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import { Logger } from "@/utils/Logger";
@@ -431,9 +432,21 @@ export class PyodideBridge implements RunRequests, EditRequests {
   sendCreateFileOrFolder: EditRequests["sendCreateFileOrFolder"] = async (
     request,
   ) => {
+    // The WASM RPC boundary can only carry JSON, so we base64-encode the
+    // file bytes here. The HTTP transport uses multipart/form-data instead.
+    let contents: string | null = null;
+    if (request.file) {
+      const dataUrl = await serializeBlob(request.file);
+      contents = dataUrl.split(",")[1] ?? "";
+    }
     const response = await this.rpc.proxy.request.bridge({
       functionName: "create_file_or_directory",
-      payload: request,
+      payload: {
+        path: request.path,
+        type: request.type,
+        name: request.name,
+        contents,
+      },
     });
     return response as FileCreateResponse;
   };

package/src/plugins/impl/DataTablePlugin.tsx

@@ -194,6 +194,7 @@ interface Data<T> {
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
+  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -220,6 +221,7 @@ type DataTableFunctions = {
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
+    size_bytes?: number | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -270,6 +272,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
+      sizeBytes: z.number().nullish(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
@@ -327,6 +330,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
+          size_bytes: z.number().nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -532,6 +536,7 @@ export const LoadingDataTableComponent = memo(
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
+      sizeBytes?: number | null;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -548,6 +553,7 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
+      let sizeBytes = props.sizeBytes ?? null;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -591,6 +597,7 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
+        sizeBytes = searchResults.size_bytes ?? null;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -603,6 +610,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -614,6 +622,7 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
+      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -728,6 +737,7 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -774,6 +784,7 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  sizeBytes,
   maxColumns,
   pagination,
   selection,
@@ -1053,6 +1064,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            sizeBytes={sizeBytes}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -64,6 +64,7 @@ type PluginFunctions = {
     column_types_per_step: FieldTypesWithExternalType[];
     python_code?: string | null;
     sql_code?: string | null;
+    size_bytes?: number | null;
   }>;
   get_column_values: (req: { column: string }) => Promise<{
     values: unknown[];
@@ -81,6 +82,7 @@ type PluginFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number;
+    size_bytes?: number | null;
   }>;
   download_as: DownloadAsArgs;
 };
@@ -118,6 +120,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         column_types_per_step: z.array(columnToFieldTypesSchema),
         python_code: z.string().nullish(),
         sql_code: z.string().nullish(),
+        size_bytes: z.number().nullish(),
       }),
     ),
     get_column_values: rpc.input(z.object({ column: z.string() })).output(
@@ -147,6 +150,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         z.object({
           data: z.union([z.string(), z.array(z.object({}).passthrough())]),
           total_rows: z.number(),
+          size_bytes: z.number().nullish(),
         }),
       ),
     download_as: DownloadAsSchema,
@@ -203,6 +207,7 @@ export const DataFrameComponent = memo(
       column_types_per_step,
       python_code,
       sql_code,
+      size_bytes,
     } = data || {};
 
     const totalColumns = field_types?.length;
@@ -322,6 +327,7 @@ export const DataFrameComponent = memo(
           data={url || ""}
           hasStableRowId={false}
           totalRows={total_rows ?? 0}
+          sizeBytes={size_bytes ?? null}
           totalColumns={totalColumns ?? 0}
           maxColumns="all"
           pageSize={pageSize}