@marimo-team/islands 0.19.12-dev1 → 0.20.0

package/dist/{vega-component-CnG0vAjf.js → vega-component-B5sxdjMq.js}

@@ -1,19 +1,19 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import "./Combination-BTMrlhzT.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-ChviuF5n.js";
-import { l as Events } from "./button-Cy0ElmIm.js";
-import { o as Objects, s as Logger } from "./hotkeys-B5WnGZXF.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-C8Ms87P-.js";
+import { d as Objects, g as Logger, h as Events } from "./button-KYalaJYu.js";
+import "./Combination-Du-o_hC9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-CqtLRVZP.js";
-import { l as Tooltip, n as ErrorBanner } from "./error-banner-D2zjeN_a.js";
-import { h as useEvent_default, n as useTheme } from "./useTheme-SlKl8MlS.js";
-import { t as _baseUniq_default } from "./_baseUniq-4lqa8rDi.js";
-import { i as debounce_default } from "./constants-DrOu5vvd.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-C0-eIoas.js";
+import { t as Tooltip } from "./tooltip-CL8m4f9y.js";
+import { t as _baseUniq_default } from "./_baseUniq-BlF21ach.js";
+import { i as debounce_default } from "./constants-BGRTDzdW.js";
+import { C as useEvent_default, n as useTheme } from "./useTheme-Cq-gIssy.js";
+import { a as tooltipHandler, n as vegaLoadData } from "./loader-Cob3XFOw.js";
+import { n as ErrorBanner } from "./error-banner-vCG-EbUQ.js";
 import { n as formats } from "./vega-loader.browser-DqHiiBeQ.js";
-import { t as useAsyncData } from "./useAsyncData-dr8GazGv.js";
+import { t as useAsyncData } from "./useAsyncData-BPpyKjTJ.js";
 import { t as j } from "./react-vega-CCNu2JE0.js";
 import "./defaultLocale-DjFHq3Xk.js";
 import "./defaultLocale-B_A76Zpk.js";

package/dist/{xychartDiagram-PRI3JC2R-BltwMWKC.js → xychartDiagram-PRI3JC2R-CFxuifYY.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-Brw-U87Q.js";
+import "./purify.es-D4vaFt5N.js";
 import { t as linear } from "./linear-Bnc6E9kA.js";
 import { n as ordinal } from "./ordinal-DLLbwLkP.js";
 import { t as range } from "./range-DwpxnYuB.js";
 import "./defaultLocale-DjFHq3Xk.js";
 import { t as line_default } from "./line-Bc27KE1D.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CwDGYMVf.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-C_1SJcWo.js";
 import { n as initRange } from "./init-TaqZJsBY.js";
 import { i as log, r as __name } from "./src-jICM_d2B.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-BGWvKte3.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-BlA7aWEw.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-BwNsaa1P.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-Bmo660a9.js";
 import "./dist-BYznkC5E.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-Cm-pccR-.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-n8UTzfok.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/package.json

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

package/src/components/editor/Output.tsx

@@ -123,6 +123,7 @@ export const OutputRenderer: React.FC<{
       );
 
     case "text/plain":
+    case "text/password":
       invariant(
         typeof data === "string",
         `Expected string data for mime=${mimetype}. Got ${typeof data}`,
@@ -141,10 +142,17 @@ export const OutputRenderer: React.FC<{
     case "image/bmp":
     case "image/gif":
     case "image/jpeg":
+    case "image/svg+xml":
       invariant(
         typeof data === "string",
         `Expected string data for mime=${mimetype}. Got ${typeof data}`,
       );
+      if (
+        mimetype === "image/svg+xml" &&
+        !data.startsWith("data:image/svg+xml;base64,")
+      ) {
+        return renderHTML({ html: data, alwaysSanitizeHtml: true });
+      }
       return (
         <ImageOutput
           className={channel}
@@ -154,12 +162,6 @@ export const OutputRenderer: React.FC<{
           height={metadata?.height}
         />
       );
-    case "image/svg+xml":
-      invariant(
-        typeof data === "string",
-        `Expected string data for mime=${mimetype}. Got ${typeof data}`,
-      );
-      return renderHTML({ html: data, alwaysSanitizeHtml: true });
 
     case "video/mp4":
     case "video/mpeg":

package/src/components/editor/__tests__/Output.test.tsx

@@ -64,3 +64,62 @@ describe("OutputRenderer renderFallback prop", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("OutputRenderer image and SVG rendering", () => {
+  const plainSvgString =
+    '<svg><rect x="0" y="0" width="10" height="10"></rect></svg>';
+  const base64SvgDataUrl =
+    "data:image/svg+xml;base64,PHN2Zz48cmVjdCB4PSIwIiB5PSIw";
+  const base64PngDataUrl =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB";
+
+  it("should render plain SVG string via renderHTML", () => {
+    const { container } = render(
+      <OutputRenderer
+        message={{
+          channel: "output",
+          data: plainSvgString,
+          mimetype: "image/svg+xml",
+        }}
+      />,
+    );
+    const svgElement = container.querySelector("svg");
+    expect(svgElement).not.toBeNull();
+    const rectElement = svgElement!.querySelector("rect");
+    expect(rectElement).not.toBeNull();
+    const imgElement = container.querySelector("img");
+    expect(imgElement).toBeNull();
+  });
+
+  it("should render Base64 SVG data URL via ImageOutput", () => {
+    const { container } = render(
+      <OutputRenderer
+        message={{
+          channel: "output",
+          data: base64SvgDataUrl,
+          mimetype: "image/svg+xml",
+        }}
+      />,
+    );
+    const imgElement = container.querySelector("img");
+    expect(imgElement).not.toBeNull();
+    expect(imgElement).toHaveAttribute("src", base64SvgDataUrl);
+    const svgElement = container.querySelector("svg");
+    expect(svgElement).toBeNull();
+  });
+
+  it("should render Base64 PNG data URL via ImageOutput", () => {
+    const { container } = render(
+      <OutputRenderer
+        message={{
+          channel: "output",
+          data: base64PngDataUrl,
+          mimetype: "image/png",
+        }}
+      />,
+    );
+    const imgElement = container.querySelector("img");
+    expect(imgElement).not.toBeNull();
+    expect(imgElement).toHaveAttribute("src", base64PngDataUrl);
+  });
+});

package/src/components/editor/chrome/__tests__/state.test.ts

@@ -0,0 +1,321 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { adaptForLocalStorage } from "@/utils/storage/jotai";
+import type { PanelLayout } from "../state";
+import { exportedForTesting } from "../state";
+
+const { mergePanelLayout } = exportedForTesting;
+
+describe("mergePanelLayout", () => {
+  // Exact localStorage value from SageMaker Studio that caused the bug:
+  // saved before Terminal was added, so "terminal" is absent from
+  // developerPanel and the tab never renders.
+  it("appends terminal to a pre-terminal-era saved layout", () => {
+    const saved: PanelLayout = {
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "snippets",
+        "logs",
+      ],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "snippets",
+        "logs",
+        "terminal",
+      ],
+    });
+  });
+
+  it("appends new sidebar panels missing from saved layout", () => {
+    const saved: PanelLayout = {
+      sidebar: ["files", "variables"],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    });
+  });
+
+  it("appends new developer panel entries missing from saved layout", () => {
+    const saved: PanelLayout = {
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: ["errors", "scratchpad", "tracing", "logs"],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "logs",
+        "secrets",
+        "terminal",
+        "snippets",
+      ],
+    });
+  });
+
+  it("does not duplicate panels already present", () => {
+    const saved: PanelLayout = {
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    });
+  });
+
+  it("preserves panels the user moved between sections", () => {
+    const saved: PanelLayout = {
+      sidebar: ["files"],
+      developerPanel: ["errors", "variables"],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "variables",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    });
+  });
+
+  it("handles empty saved layout", () => {
+    const saved: PanelLayout = {
+      sidebar: [],
+      developerPanel: [],
+    };
+    expect(mergePanelLayout(saved)).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "logs",
+        "terminal",
+        "snippets",
+      ],
+    });
+  });
+});
+
+describe("panelLayoutStorage integration", () => {
+  it("merges missing panels when reading from localStorage", () => {
+    // Simulate the exact SageMaker bug: stale layout in localStorage
+    const staleLayout: PanelLayout = {
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "snippets",
+        "logs",
+      ],
+    };
+
+    // Mock localStorage with the stale value
+    const mockStorage: Storage = {
+      length: 1,
+      key: () => null,
+      clear: () => undefined,
+      removeItem: () => undefined,
+      setItem: () => undefined,
+      getItem: (key: string) => {
+        if (key === "marimo:panel-layout") {
+          return JSON.stringify(staleLayout);
+        }
+        return null;
+      },
+    };
+
+    const storage = adaptForLocalStorage<PanelLayout, PanelLayout>({
+      toSerializable: (v) => v,
+      fromSerializable: (saved) => mergePanelLayout(saved),
+      storage: mockStorage,
+    });
+
+    // This is what atomWithStorage calls on init
+    const defaultValue: PanelLayout = {
+      sidebar: [],
+      developerPanel: [],
+    };
+    const result = storage.getItem("marimo:panel-layout", defaultValue);
+
+    expect(result).toEqual({
+      sidebar: [
+        "files",
+        "variables",
+        "packages",
+        "ai",
+        "outline",
+        "documentation",
+        "dependencies",
+      ],
+      developerPanel: [
+        "errors",
+        "scratchpad",
+        "tracing",
+        "secrets",
+        "snippets",
+        "logs",
+        "terminal",
+      ],
+    });
+  });
+
+  it("returns default when localStorage is empty", () => {
+    const mockStorage: Storage = {
+      length: 0,
+      key: () => null,
+      clear: () => undefined,
+      removeItem: () => undefined,
+      setItem: () => undefined,
+      getItem: () => null,
+    };
+
+    const storage = adaptForLocalStorage<PanelLayout, PanelLayout>({
+      toSerializable: (v) => v,
+      fromSerializable: (saved) => mergePanelLayout(saved),
+      storage: mockStorage,
+    });
+
+    const defaultValue: PanelLayout = {
+      sidebar: ["files"],
+      developerPanel: ["errors"],
+    };
+    const result = storage.getItem("marimo:panel-layout", defaultValue);
+
+    // Should return the initialValue (default) since nothing in storage
+    expect(result).toEqual(defaultValue);
+  });
+});

package/src/components/editor/chrome/state.ts

@@ -5,7 +5,7 @@ import { atomWithStorage } from "jotai/utils";
 import { z } from "zod";
 import { store } from "@/core/state/jotai";
 import { createReducerAndAtoms } from "@/utils/createReducer";
-import { jotaiJsonStorage } from "@/utils/storage/jotai";
+import { adaptForLocalStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
 import type { PanelSection, PanelType } from "./types";
 import { PANELS } from "./types";
@@ -35,10 +35,34 @@ const DEFAULT_PANEL_LAYOUT: PanelLayout = {
   ).map((p) => p.type),
 };
 
+/**
+ * Merge saved layout with current defaults so new panels added in later
+ * versions are appended to their default section. Panels the user has
+ * moved between sections are left where the user put them.
+ */
+function mergePanelLayout(saved: PanelLayout): PanelLayout {
+  const allSaved = new Set([...saved.sidebar, ...saved.developerPanel]);
+  return {
+    sidebar: [
+      ...saved.sidebar,
+      ...DEFAULT_PANEL_LAYOUT.sidebar.filter((p) => !allSaved.has(p)),
+    ],
+    developerPanel: [
+      ...saved.developerPanel,
+      ...DEFAULT_PANEL_LAYOUT.developerPanel.filter((p) => !allSaved.has(p)),
+    ],
+  };
+}
+
+const panelLayoutStorage = adaptForLocalStorage<PanelLayout, PanelLayout>({
+  toSerializable: (v) => v,
+  fromSerializable: (saved) => mergePanelLayout(saved),
+});
+
 export const panelLayoutAtom = atomWithStorage<PanelLayout>(
   "marimo:panel-layout",
   DEFAULT_PANEL_LAYOUT,
-  jotaiJsonStorage,
+  panelLayoutStorage,
   { getOnInit: true },
 );
 
@@ -181,4 +205,5 @@ export const exportedForTesting = {
   reducer,
   createActions,
   initialState,
+  mergePanelLayout,
 };

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

@@ -4,6 +4,7 @@ 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 { refreshRoot } from "./state";
@@ -40,30 +41,52 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
       });
     },
     onDrop: async (acceptedFiles) => {
-      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);
-        }
-
-        // 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,
-        });
+      if (acceptedFiles.length === 0) {
+        return;
       }
-      await refreshRoot();
+      const isSingle = acceptedFiles.length === 1;
+
+      const loadingTitle = isSingle
+        ? "Uploading file..."
+        : "Uploading files...";
+      const onFinish = {
+        title: isSingle
+          ? "File uploaded"
+          : `${acceptedFiles.length} files uploaded`,
+      };
+
+      await withLoadingToast(
+        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);
+            }
+
+            // 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 refreshRoot();
+        },
+        onFinish,
+      );
     },
     ...options,
   });

package/src/components/editor/links/cell-link.tsx

@@ -97,6 +97,7 @@ export function scrollAndHighlightCell(
 ): boolean {
   const cellHtmlId = HTMLCellId.create(cellId);
   const cell: HTMLElement | null = document.getElementById(cellHtmlId);
+  const isCellErrored = cell?.classList.contains("has-error");
 
   if (cell === null) {
     Logger.error(`Cell ${cellHtmlId} not found on page.`);
@@ -106,13 +107,13 @@ export function scrollAndHighlightCell(
     cell.scrollIntoView({ behavior: "smooth", block: "center" });
   }
 
-  if (variant === "destructive") {
+  if (variant === "destructive" || (isCellErrored && variant === undefined)) {
     cell.classList.add("error-outline");
     setTimeout(() => {
       cell.classList.remove("error-outline");
     }, 2000);
   }
-  if (variant === "focus") {
+  if (variant === "focus" || (!isCellErrored && variant === undefined)) {
     cell.classList.add("focus-outline");
     setTimeout(() => {
       cell.classList.remove("focus-outline");