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

package/src/core/network/api.ts

@@ -16,13 +16,45 @@ function getBaseUriWithoutQueryParams(): string {
   return url.toString();
 }
 
-function getExportFilename(response: Response): string {
-  const contentDisposition = response.headers.get("Content-Disposition");
-  const match = contentDisposition?.match(/filename\*=UTF-8''([^;]+)/i);
-  if (!match) {
-    throw new Error("Export response is missing a filename");
+function parseContentDispositionFilename(
+  contentDisposition: string | null,
+): string | undefined {
+  if (!contentDisposition) {
+    return undefined;
   }
-  return decodeURIComponent(match[1]);
+
+  const rfc5987Match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/i);
+  if (rfc5987Match) {
+    try {
+      return decodeURIComponent(rfc5987Match[1]);
+    } catch {
+      return undefined;
+    }
+  }
+
+  const quotedMatch = contentDisposition.match(/filename="([^"]+)"/i);
+  if (quotedMatch) {
+    return quotedMatch[1];
+  }
+
+  const unquotedMatch = contentDisposition.match(/filename=([^;]+)/i);
+  if (unquotedMatch) {
+    return unquotedMatch[1].trim();
+  }
+
+  return undefined;
+}
+
+function getExportFilename(response: Response): string | undefined {
+  const filename = parseContentDispositionFilename(
+    response.headers.get("Content-Disposition"),
+  );
+  if (!filename) {
+    Logger.warn(
+      "Export response is missing a readable Content-Disposition filename",
+    );
+  }
+  return filename;
 }
 
 /**
@@ -129,11 +161,14 @@ export const API = {
     }
     return Promise.resolve(response.data as T);
   },
-  handleExportResponse: async <T extends BlobPart>(response: {
-    data?: T | undefined;
-    error?: Record<string, unknown>;
-    response: Response;
-  }): Promise<ExportedFile<T>> => {
+  handleExportResponse: async <T extends BlobPart>(
+    response: {
+      data?: T | undefined;
+      error?: Record<string, unknown>;
+      response: Response;
+    },
+    opts: { defaultFilename: string },
+  ): Promise<ExportedFile<T>> => {
     const contents = await API.handleResponse<T>(response);
     const mediaType = response.response.headers.get("Content-Type");
     if (!mediaType) {
@@ -142,7 +177,7 @@ export const API = {
 
     return {
       contents,
-      filename: getExportFilename(response.response),
+      filename: getExportFilename(response.response) ?? opts.defaultFilename,
       mediaType,
     };
   },

package/src/core/network/export-filename.ts

@@ -0,0 +1,37 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { Filenames } from "@/utils/filenames";
+import { Paths } from "@/utils/paths";
+import {
+  DEFAULT_MARKDOWN_FLAVOR,
+  MARKDOWN_EXTENSIONS,
+} from "./markdown-export";
+import type { ExportAsMarkdownRequest } from "./types";
+
+const DEFAULT_EXPORT_FILENAME = "download";
+
+function getNotebookStem(): string | undefined {
+  const filename = store.get(filenameAtom);
+  if (!filename) {
+    return undefined;
+  }
+  const basename = Paths.basename(filename);
+  return Filenames.withoutExtension(basename);
+}
+
+export function getDefaultExportFilename(extension: string): string {
+  const stem = getNotebookStem();
+  if (stem) {
+    return `${stem}.${extension}`;
+  }
+  return `${DEFAULT_EXPORT_FILENAME}.${extension}`;
+}
+
+export function getDefaultMarkdownExportFilename(
+  flavor: ExportAsMarkdownRequest["flavor"],
+): string {
+  const extension = MARKDOWN_EXTENSIONS[flavor ?? DEFAULT_MARKDOWN_FLAVOR];
+  return getDefaultExportFilename(extension);
+}

package/src/core/network/markdown-export.ts

@@ -0,0 +1,19 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { MarkdownExportFlavor } from "./types";
+
+export const MARKDOWN_EXTENSIONS = {
+  pymdown: "md",
+  qmd: "qmd",
+  mystmd: "myst.md",
+  mdx: "mdx",
+} satisfies Record<MarkdownExportFlavor, string>;
+export const MARKDOWN_SUFFIXES = [
+  ".myst.md",
+  ".markdown",
+  ".qmd",
+  ".mdx",
+  ".md",
+];
+
+export const DEFAULT_MARKDOWN_FLAVOR: MarkdownExportFlavor = "pymdown";

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

@@ -3,6 +3,10 @@
 import { once } from "@/utils/once";
 import { getRuntimeManager } from "../runtime/config";
 import { API, createClientWithRuntimeManager } from "./api";
+import {
+  getDefaultExportFilename,
+  getDefaultMarkdownExportFilename,
+} from "./export-filename";
 import {
   waitForConnectionOpen,
   waitForConnectionOpenIfNotebook,
@@ -426,7 +430,11 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleExportResponse);
+        .then((response) =>
+          handleExportResponse(response, {
+            defaultFilename: getDefaultExportFilename("html"),
+          }),
+        );
     },
     exportAsMarkdown: async (request) => {
       return getClient()
@@ -435,7 +443,11 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleExportResponse);
+        .then((response) =>
+          handleExportResponse(response, {
+            defaultFilename: getDefaultMarkdownExportFilename(request.flavor),
+          }),
+        );
     },
     exportAsScript: async (request) => {
       return getClient()
@@ -444,7 +456,11 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleExportResponse);
+        .then((response) =>
+          handleExportResponse(response, {
+            defaultFilename: getDefaultExportFilename("script.py"),
+          }),
+        );
     },
     exportAsIPYNB: async (request) => {
       return getClient()
@@ -453,7 +469,11 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleExportResponse);
+        .then((response) =>
+          handleExportResponse(response, {
+            defaultFilename: getDefaultExportFilename("ipynb"),
+          }),
+        );
     },
     exportAsPDF: async (request) => {
       return getClient()
@@ -462,7 +482,11 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "blob",
           params: getParams(),
         })
-        .then(handleExportResponse);
+        .then((response) =>
+          handleExportResponse(response, {
+            defaultFilename: getDefaultExportFilename("pdf"),
+          }),
+        );
     },
     autoExportAsHTML: async (request) => {
       return getClient()

package/src/core/network/types.ts

@@ -22,6 +22,9 @@ export type AutoExportAsMarkdownRequest =
   schemas["AutoExportAsMarkdownRequest"];
 export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
+export type MarkdownExportFlavor = NonNullable<
+  ExportAsMarkdownRequest["flavor"]
+>;
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
 export type ExportAsPDFRequest = schemas["ExportAsPDFRequest"];

package/src/core/storage/types.ts

@@ -61,5 +61,6 @@ export type KnownStorageProtocol =
   | "http"
   | "file"
   | "gdrive"
+  | "hf"
   | "in-memory"
   | "github";

package/src/css/app/codemirror.css

@@ -1,14 +1,18 @@
 @reference "../globals.css";
 
 .light .cm-selectionBackground {
-  /* This is the background for selected text when focused,
-  but we want to use it when not in focus either because we
-  will often lose focus during find/replace or in another editor */
-  background-color: #d7d4f0 !important;
+  /* Keep drawn selections visible when focus moves to find/replace or another editor. */
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-light)
+  ) !important;
 }
 
 .dark .cm-selectionBackground {
-  background-color: #1177cc80 !important;
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-dark)
+  ) !important;
 }
 
 .cm-focused.cm-focused {
@@ -125,7 +129,7 @@
 /* -- Codeium -- */
 
 .cm-codeium-cycle {
-  font-size: 9px;
+  font-size: 0.5625rem;
   background-color: var(--sky-3);
   padding: 2px;
   border-radius: 2px;
@@ -133,7 +137,7 @@
 }
 
 .cm-codeium-cycle-key {
-  font-size: 9px;
+  font-size: 0.5625rem;
   font-family: monospace;
   display: inline-block;
   padding: 2px;

package/src/css/globals.css

@@ -107,6 +107,14 @@
     /* Codemirror editor */
     --cm-background: light-dark(var(--background), #282c34);
     --cm-comment: light-dark(#708090, #6b7280);
+    --cm-selection-background-light: #d7d4f0;
+    --cm-selection-background-dark: #1177cc80;
+    --cm-reactive-reference-color-light: #005f87;
+    --cm-reactive-reference-color-dark: #2a7aa5;
+    --cm-reactive-reference-border-color: #bad3de;
+    --cm-search-match-background-light: #99ff7780;
+    --cm-search-match-background-dark: #22bb0070;
+    --cm-search-match-selected-background-dark: #6199ff88;
   }
 
   .dark,

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -8,10 +8,10 @@ import { LoadingTable } from "@/components/data-table/loading-table";
 import { type FieldTypes, toFieldTypes } from "@/components/data-table/types";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { DelayMount } from "@/components/utils/delay-mount";
-import { DATA_TYPES } from "@/core/kernel/messages";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { createPlugin } from "../core/builder";
 import type { Setter } from "../types";
+import { columnToFieldTypesSchema } from "./data-frames/schema";
 import {
   BulkEdit,
   type DataEditorProps,
@@ -44,14 +44,7 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
       }),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
-      fieldTypes: z
-        .array(
-          z.tuple([
-            z.coerce.string(),
-            z.tuple([z.enum(DATA_TYPES), z.string()]),
-          ]),
-        )
-        .nullish(),
+      fieldTypes: columnToFieldTypesSchema.nullish(),
       editableColumns: z.union([z.array(z.string()), z.literal("all")]),
       columnSizingMode: z.enum(["auto", "fit"]).default("auto"), // TODO: Remove this
     }),

package/src/plugins/impl/__tests__/DataEditorPlugin.test.ts

@@ -0,0 +1,18 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { DataEditorPlugin } from "../DataEditorPlugin";
+
+describe("DataEditorPlugin", () => {
+  it("normalizes an unrecognized field type", () => {
+    const result = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [],
+      fieldTypes: [["geom", ["geometry", "geometry"]]],
+      editableColumns: "all",
+    });
+
+    expect(result.fieldTypes).toEqual([["geom", ["unknown", "geometry"]]]);
+  });
+});

package/src/plugins/impl/chat/chat-ui.tsx

@@ -26,6 +26,11 @@ import {
 } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import {
+  describeChatAbortReason,
+  getAbortReasonFromChunk,
+  resolveChatAbortReason,
+} from "@/components/chat/chat-abort";
 import { renderUIMessage } from "@/components/chat/chat-display";
 import {
   convertToFileUIPart,
@@ -168,6 +173,12 @@ export const Chatbot: React.FC<Props> = (props) => {
   // different message_id are stale (from an aborted-but-not-yet-cancelled run
   // on the kernel) and must be dropped
   const activeRequestIdRef = useRef<string | null>(null);
+  const lastAbortReasonRef = useRef<string | null>(null);
+  const [abortNotice, setAbortNotice] = useState<string | null>(null);
+  const clearAbortState = () => {
+    lastAbortReasonRef.current = null;
+    setAbortNotice(null);
+  };
 
   const { data: backendMessages } = useAsyncData(async () => {
     const response = await props.get_chat_history({});
@@ -231,6 +242,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           // Client-generated id used to (a) route chunks back to this stream
           // and (b) ask the kernel to cancel just this run on Stop.
           const requestId = generateUUID();
+          clearAbortState();
 
           const stream = new ReadableStream<UIMessageChunk>({
             start(controller) {
@@ -297,15 +309,30 @@ export const Chatbot: React.FC<Props> = (props) => {
       },
     }),
     messages: initialMessages,
-    onFinish: (message) => {
+    onFinish: ({ messages, isAbort, finishReason }) => {
       setFiles(undefined);
 
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
-      Logger.debug("Finished streaming message:", message);
+      Logger.debug("Finished streaming message:", { finishReason, isAbort });
+
+      if (isAbort) {
+        const reason = resolveChatAbortReason({
+          isAbort: true,
+          streamReason: lastAbortReasonRef.current,
+        });
+        clearAbortState();
+        if (reason != null) {
+          const description = describeChatAbortReason(reason);
+          Logger.debug("Chat stream aborted", { reason, finishReason });
+          setAbortNotice(description);
+        }
+      } else {
+        clearAbortState();
+      }
 
-      props.setValue(message.messages);
+      props.setValue(messages);
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
@@ -323,6 +350,17 @@ export const Chatbot: React.FC<Props> = (props) => {
       if (!parsedMessage.success) {
         return;
       }
+      // Only record abort reasons for the active request. Late chunks from a
+      // cancelled run must not overwrite the next turn's reason
+      if (
+        parsedMessage.data.content &&
+        parsedMessage.data.message_id === activeRequestIdRef.current
+      ) {
+        const abortReason = getAbortReasonFromChunk(parsedMessage.data.content);
+        if (abortReason !== undefined) {
+          lastAbortReasonRef.current = abortReason;
+        }
+      }
       routeIncomingChatChunk(parsedMessage.data, {
         controllerRef: frontendStreamControllerRef,
         activeRequestIdRef,
@@ -340,6 +378,9 @@ export const Chatbot: React.FC<Props> = (props) => {
       setMessages(newMessages);
 
       props.setValue(newMessages);
+      if (newMessages.length === 0) {
+        clearAbortState();
+      }
     }
   };
 
@@ -389,6 +430,7 @@ export const Chatbot: React.FC<Props> = (props) => {
     props.setValue([]);
     props.delete_chat_history({});
     clearError();
+    clearAbortState();
   };
 
   return (
@@ -483,6 +525,12 @@ export const Chatbot: React.FC<Props> = (props) => {
             </Button>
           </div>
         )}
+
+        {abortNotice && !isLoading && !error && (
+          <div className="flex justify-center py-2">
+            <span className="text-xs text-muted-foreground">{abortNotice}</span>
+          </div>
+        )}
       </div>
       <form
         onSubmit={async (evt) => {

package/src/plugins/impl/data-frames/__tests__/schema.test.ts

@@ -0,0 +1,30 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { columnToFieldTypesSchema } from "../schema";
+
+describe("columnToFieldTypesSchema", () => {
+  it("keeps known field types", () => {
+    const result = columnToFieldTypesSchema.parse([
+      ["count", ["integer", "int64"]],
+      ["label", ["string", "object"]],
+    ]);
+
+    expect(result).toEqual([
+      ["count", ["integer", "int64"]],
+      ["label", ["string", "object"]],
+    ]);
+  });
+
+  it("normalizes an unrecognized field type without discarding other fields", () => {
+    const result = columnToFieldTypesSchema.parse([
+      ["geom", ["geometry", "geometry"]],
+      ["label", ["string", "object"]],
+    ]);
+
+    expect(result).toEqual([
+      ["geom", ["unknown", "geometry"]],
+      ["label", ["string", "object"]],
+    ]);
+  });
+});

package/src/plugins/impl/data-frames/schema.ts

@@ -15,7 +15,10 @@ import {
 } from "./utils/operators";
 
 export const columnToFieldTypesSchema = z.array(
-  z.tuple([z.coerce.string(), z.tuple([z.enum(DATA_TYPES), z.string()])]),
+  z.tuple([
+    z.coerce.string(),
+    z.tuple([z.enum(DATA_TYPES).catch("unknown"), z.string()]),
+  ]),
 );
 
 export const column_id = z

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -49,6 +49,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
     minHeight: "2rem",
   };
 
+  // The slider's width="100%" images resolve against its shadow-DOM wrappers (circular),
+  // so size the images explicitly and letterbox with object-fit to keep them aligned.
+  // Treat empty strings as "not provided" (normalize_dimension passes them through).
+  const imageStyle: React.CSSProperties | undefined =
+    width || height
+      ? {
+          width: width || undefined,
+          height: height || undefined,
+          objectFit: "contain",
+        }
+      : undefined;
+
   // If an image fails to load, the slider collapses to nothing; surface a
   // visible error instead of silently rendering an empty output.
   if (failedSrcs.size > 0) {
@@ -67,12 +79,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   return (
     <div style={containerStyle}>
-      <ImgComparisonSlider value={value} direction={direction}>
+      <ImgComparisonSlider
+        value={value}
+        direction={direction}
+        // inline-block leaves a baseline gap below the slider; align to top.
+        style={{ verticalAlign: "top" }}
+      >
         <img
           slot="first"
           src={beforeSrc}
           alt="Before"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(beforeSrc)}
         />
         <img
@@ -80,6 +98,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
           src={afterSrc}
           alt="After"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(afterSrc)}
         />
       </ImgComparisonSlider>

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -68,4 +68,62 @@ describe("ImageComparisonComponent", () => {
     expect(error?.textContent).toContain("…");
     expect(error?.textContent).not.toContain("A".repeat(200));
   });
+
+  it("sizes both images explicitly when dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.height).toBe("300px");
+      // Letterbox identically so the slider's clip stays aligned.
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies a single dimension to both images when only one is given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies height-only sizing to both images", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.height).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("treats empty-string dimensions as not provided", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="" height="" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
+
+  it("leaves images unstyled when no dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      // No explicit sizing: the slider keeps its intrinsic-size behavior.
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
 });