@marimo-team/islands 0.20.5-dev83 → 0.20.5-dev88

package/dist/{vega-component-D2knjGgv.js → vega-component-CnO3mkFC.js}

@@ -2,7 +2,7 @@ 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 { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DLS-bHHT.js";
-import { d as Objects, g as Logger, h as Events } from "./button-DQpBib29.js";
+import { d as Objects, g as Logger, h as Events, y as cn } from "./button-DQpBib29.js";
 import "./Combination-Dk6JxauT.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-CqtLRVZP.js";
@@ -598,7 +598,7 @@ var VegaComponent = (e) => {
       children: B.stack
     })]
   }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: "relative",
+    className: cn("relative", "width" in W && W.width === "container" && "vega-container-width"),
     onPointerDown: Events.stopPropagation(),
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: R }), Q()]
   })] });

package/package.json

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

package/src/components/editor/cell/cell-context-menu.tsx

@@ -25,7 +25,7 @@ import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
-import { copyToClipboard } from "@/utils/copy";
+import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
 import { Logger } from "@/utils/Logger";
 import type { ActionButton } from "../actions/types";
@@ -127,11 +127,7 @@ export const CellActionsContextMenu = ({
       icon: <ClipboardCopyIcon size={13} strokeWidth={1.5} />,
       handle: async () => {
         if (imageRightClicked) {
-          const response = await fetch(imageRightClicked.src);
-          const blob = await response.blob();
-          const item = new ClipboardItem({ [blob.type]: blob });
-          await navigator.clipboard
-            .write([item])
+          await copyImageToClipboard(imageRightClicked.src)
             .then(() => {
               toast({
                 title: "Copied image to clipboard",

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useLayoutEffect } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -33,6 +33,52 @@ import { useWrapText } from "../useWrapText";
 import { processOutput } from "./process-output";
 import { RenderTextWithLinks } from "./text-rendering";
 
+/**
+ * Delay in ms before clearing console outputs.
+ * This prevents flickering when a cell re-runs and outputs are briefly cleared
+ * before new outputs arrive (e.g., plt.show() with a slider).
+ */
+export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
+
+/**
+ * Debounces the clearing of console outputs.
+ * - Non-empty updates are applied immediately.
+ * - Transitions to empty are delayed by CONSOLE_CLEAR_DEBOUNCE_MS,
+ *   giving new outputs a chance to arrive and replace the old ones
+ *   without a visible flicker.
+ */
+function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
+  const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Non-empty outputs: apply immediately and cancel any pending clear
+  if (outputs.length > 0 && debouncedOutputs !== outputs) {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setDebouncedOutputs(outputs);
+  }
+
+  // Empty outputs: delay the clear so new outputs can arrive first
+  useEffect(() => {
+    if (outputs.length === 0 && timerRef.current === null) {
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        setDebouncedOutputs([]);
+      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    }
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [outputs]);
+
+  return debouncedOutputs;
+}
+
 interface Props {
   cellId: CellId;
   cellName: string;
@@ -63,7 +109,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     setValue: setStdinValue,
   });
   const {
-    consoleOutputs,
+    consoleOutputs: rawConsoleOutputs,
     stale,
     cellName,
     cellId,
@@ -73,6 +119,9 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     className,
   } = props;
 
+  // Debounce clearing to prevent flickering when cells re-run
+  const consoleOutputs = useDebouncedConsoleOutputs(rawConsoleOutputs);
+
   /* The debugger UI needs some work. For now just use the regular
   /* console output. */
   /* if (debuggerActive) {

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
-import { ConsoleOutput } from "../ConsoleOutput";
+import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
 
 SetupMocks.resizeObserver();
 
@@ -193,3 +193,94 @@ describe("ConsoleOutput pdb history", () => {
     expect(input).toHaveValue("");
   });
 });
+
+describe("ConsoleOutput debounced clearing", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const createOutput = (
+    data: string,
+    channel = "stdout",
+  ): WithResponse<OutputMessage> => ({
+    channel: channel as "stdout" | "stderr",
+    mimetype: "text/plain",
+    data,
+    timestamp: 0,
+    response: undefined,
+  });
+
+  const defaultProps = {
+    cellId: "cell-1" as CellId,
+    cellName: "test_cell",
+    consoleOutputs: [] as WithResponse<OutputMessage>[],
+    stale: false,
+    debuggerActive: false,
+    onSubmitDebugger: vi.fn(),
+  };
+
+  it("should keep old outputs visible when cleared, then show new outputs immediately", () => {
+    const outputs1 = [createOutput("hello world")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput {...defaultProps} consoleOutputs={outputs1} />,
+    );
+
+    // Old output is visible
+    expect(screen.getByText("hello world")).toBeInTheDocument();
+
+    // Clear outputs (simulates cell re-run)
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+      </TooltipProvider>,
+    );
+
+    // Old output should still be visible during debounce period
+    expect(screen.getByText("hello world")).toBeInTheDocument();
+
+    // New outputs arrive before debounce fires
+    const outputs2 = [createOutput("new output")];
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
+      </TooltipProvider>,
+    );
+
+    // New output should be shown immediately
+    expect(screen.getByText("new output")).toBeInTheDocument();
+    expect(screen.queryByText("hello world")).not.toBeInTheDocument();
+  });
+
+  it("should clear outputs after debounce period if no new outputs arrive", () => {
+    const outputs1 = [createOutput("old output")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput {...defaultProps} consoleOutputs={outputs1} />,
+    );
+
+    expect(screen.getByText("old output")).toBeInTheDocument();
+
+    // Clear outputs
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+      </TooltipProvider>,
+    );
+
+    // Still visible during debounce
+    expect(screen.getByText("old output")).toBeInTheDocument();
+
+    // Advance past debounce period
+    act(() => {
+      vi.advanceTimersByTime(CONSOLE_CLEAR_DEBOUNCE_MS + 1);
+    });
+
+    // Now the output should be cleared
+    expect(screen.queryByText("old output")).not.toBeInTheDocument();
+  });
+});

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -13,6 +13,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { type ResolvedTheme, useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
@@ -139,9 +140,15 @@ export const DataExplorerComponent = ({
     const responsiveSpec = makeResponsive(spec);
     // TODO: We can optimize by updating the data dynamically. https://github.com/vega/react-vega?tab=readme-ov-file#recipes
     const augmentedSpec = augmentSpecWithData(responsiveSpec, chartData);
+    const isContainerWidth = responsiveSpec.width === "container";
 
     return (
-      <div className="flex overflow-y-auto justify-center items-center flex-1 w-[90%]">
+      <div
+        className={cn(
+          "flex overflow-y-auto justify-center items-center flex-1 w-[90%]",
+          isContainerWidth && "vega-container-width",
+        )}
+      >
         <VegaEmbed spec={augmentedSpec} options={chartOptions(theme)} />
       </div>
     );

package/src/plugins/impl/vega/vega-component.tsx

@@ -16,6 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
@@ -304,7 +305,12 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className="relative"
+        className={cn(
+          "relative",
+          "width" in selectableSpec &&
+            selectableSpec.width === "container" &&
+            "vega-container-width",
+        )}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >

package/src/plugins/impl/vega/vega.css

@@ -1,18 +1,11 @@
 @reference "../../../css/globals.css";
 
 .vega-embed {
-  width: 100%;
-  flex: 1;
-  display: inline-block;
-
-  @media (min-width: 500px) {
-    min-width: 300px;
-  }
+  max-width: 100%;
+}
 
-  /* For vega embeds in slots, reset the styles to let the user set the width */
-  @container style(--slot: true) {
-    min-width: unset;
-  }
+.vega-container-width .vega-embed {
+  width: 100%;
 }
 
 .vega-embed > .chart-wrapper {

package/src/utils/__tests__/copy.test.ts

@@ -0,0 +1,129 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { copyImageToClipboard, isSafari } from "../copy";
+
+describe("isSafari", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns true for Safari on macOS", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15",
+    );
+    expect(isSafari()).toBe(true);
+  });
+
+  it("returns true for Safari on iOS", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(true);
+  });
+
+  it("returns false for Chrome", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Chrome on iOS (CriOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Firefox on iOS (FxiOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/120.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Edge on iOS (EdgiOS)", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/120.0.0.0 Mobile/15E148 Safari/604.1",
+    );
+    expect(isSafari()).toBe(false);
+  });
+
+  it("returns false for Firefox on desktop", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0",
+    );
+    expect(isSafari()).toBe(false);
+  });
+});
+
+describe("copyImageToClipboard", () => {
+  let writeMock: ReturnType<typeof vi.fn>;
+  let clipboardItemSpy: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    writeMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: { write: writeMock },
+    });
+
+    // ClipboardItem is not available in jsdom, so we mock it
+    clipboardItemSpy = vi.fn().mockImplementation((data) => ({ data }));
+    vi.stubGlobal("ClipboardItem", clipboardItemSpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses blob type from response on non-Safari browsers", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
+    );
+
+    const fakeBlob = new Blob(["fake"], { type: "image/jpeg" });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(fakeBlob, {
+        headers: { "Content-Type": "image/jpeg" },
+      }),
+    );
+
+    await copyImageToClipboard("https://example.com/image.jpg");
+
+    expect(writeMock).toHaveBeenCalledOnce();
+    // Non-Safari path: awaits blob, uses blob.type as key
+    const arg = clipboardItemSpy.mock.calls[0][0];
+    expect(arg).toHaveProperty("image/jpeg");
+    expect(arg["image/jpeg"].type).toBe("image/jpeg");
+  });
+
+  it("uses image/png on Safari", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15",
+    );
+
+    const fakeBlob = new Blob(["fake"], { type: "image/png" });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response(fakeBlob));
+
+    await copyImageToClipboard("https://example.com/image.png");
+
+    expect(writeMock).toHaveBeenCalledOnce();
+    // Safari path: uses "image/png" key with a Promise<Blob>
+    expect(clipboardItemSpy).toHaveBeenCalledWith({
+      "image/png": expect.any(Promise),
+    });
+  });
+
+  it("propagates fetch errors", async () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(
+      "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
+    );
+
+    vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("Network error"));
+
+    await expect(
+      copyImageToClipboard("https://example.com/image.png"),
+    ).rejects.toThrow("Network error");
+  });
+});

package/src/utils/copy.ts

@@ -21,3 +21,46 @@ export async function copyToClipboard(text: string) {
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
   });
 }
+
+/**
+ * Returns true if the current browser is Safari.
+ *
+ * Safari requires special handling for clipboard operations because it
+ * drops the user-activation context during async operations like fetch.
+ */
+export function isSafari(): boolean {
+  const ua = navigator.userAgent;
+  // Safari includes "Safari" but not "Chrome"/"Chromium" in its UA string.
+  // iOS in-app browsers (CriOS, FxiOS, EdgiOS) also include "Safari"
+  // but are excluded by checking for their specific tokens.
+  return (
+    /safari/i.test(ua) && !/chrome|chromium|crios|fxios|edgios|opios/i.test(ua)
+  );
+}
+
+/**
+ * Copies an image to the clipboard from a URL.
+ *
+ * On Safari, the ClipboardItem is constructed synchronously with a
+ * Promise<Blob> to preserve the user-activation context, which Safari
+ * drops during async operations like fetch. This means we must assume
+ * the MIME type (image/png) since we can't inspect the response first.
+ *
+ * On other browsers, we await the fetch and use the actual MIME type.
+ */
+export async function copyImageToClipboard(imageSrc: string): Promise<void> {
+  let item: ClipboardItem;
+  if (isSafari()) {
+    // Safari drops user-activation context during await, so we must
+    // construct the ClipboardItem synchronously with a Promise<Blob>.
+    item = new ClipboardItem({
+      "image/png": fetch(imageSrc).then((response) => response.blob()),
+    });
+  } else {
+    const response = await fetch(imageSrc);
+    const blob = await response.blob();
+    item = new ClipboardItem({ [blob.type]: blob });
+  }
+
+  await navigator.clipboard.write([item]);
+}