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

package/dist/main.js

@@ -70720,7 +70720,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev83"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev87"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -100209,6 +100209,16 @@ ${c}
     }, e[0] = c, e[1] = r, e[2] = d) : d = e[2], d;
   }
   var import_compiler_runtime$4 = require_compiler_runtime();
+  function useDebouncedConsoleOutputs(e) {
+    let [r, c] = (0, import_react.useState)(e), d = (0, import_react.useRef)(null);
+    return e.length > 0 && r !== e && (d.current !== null && (clearTimeout(d.current), d.current = null), c(e)), (0, import_react.useEffect)(() => (e.length === 0 && d.current === null && (d.current = setTimeout(() => {
+      d.current = null, c([]);
+    }, 200)), () => {
+      d.current !== null && (clearTimeout(d.current), d.current = null);
+    }), [
+      e
+    ]), r;
+  }
   const ConsoleOutput = (e) => {
     let r = (0, import_compiler_runtime$4.c)(2), c;
     return r[0] === e ? c = r[1] : (c = (0, import_jsx_runtime.jsx)(ErrorBoundary, {
@@ -100223,26 +100233,26 @@ ${c}
       value: y,
       setValue: S
     }, r[0] = y, r[1] = w);
-    let E = useInputHistory(w), { consoleOutputs: O, stale: M, cellName: I, cellId: z, onSubmitDebugger: G, onClear: q, onRefactorWithAI: IY, className: LY } = e, RY = O.length > 0, zY = useSelectAllContent(RY), BY = useOverflowDetection(c, RY), VY;
-    if (r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (VY = () => {
+    let E = useInputHistory(w), { consoleOutputs: O, stale: M, cellName: I, cellId: z, onSubmitDebugger: G, onClear: q, onRefactorWithAI: IY, className: LY } = e, RY = useDebouncedConsoleOutputs(O), zY = RY.length > 0, BY = useSelectAllContent(zY), VY = useOverflowDetection(c, zY), HY;
+    if (r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (HY = () => {
       let e2 = c.current;
       if (!e2) return;
       let r2 = e2.scrollHeight - e2.clientHeight;
       r2 - e2.scrollTop < 120 && (e2.scrollTop = r2);
-    }, r[2] = VY) : VY = r[2], (0, import_react.useLayoutEffect)(VY), !RY && isInternalCellName(I)) return null;
-    let HY, UY, WY, GY, KY, qY, JY, YY, XY, ZY;
-    if (r[3] !== z || r[4] !== LY || r[5] !== O || r[6] !== RY || r[7] !== E || r[8] !== _ || r[9] !== BY || r[10] !== q || r[11] !== IY || r[12] !== G || r[13] !== zY || r[14] !== v || r[15] !== f || r[16] !== M || r[17] !== y || r[18] !== d) {
+    }, r[2] = HY) : HY = r[2], (0, import_react.useLayoutEffect)(HY), !zY && isInternalCellName(I)) return null;
+    let UY, WY, GY, KY, qY, JY, YY, XY, ZY, QY;
+    if (r[3] !== z || r[4] !== LY || r[5] !== RY || r[6] !== zY || r[7] !== E || r[8] !== _ || r[9] !== VY || r[10] !== q || r[11] !== IY || r[12] !== G || r[13] !== BY || r[14] !== v || r[15] !== f || r[16] !== M || r[17] !== y || r[18] !== d) {
       let e2 = [
-        ...O
-      ].reverse(), w2 = e2.some(_temp$2), I2 = e2.findIndex(_temp2$2), VY2;
-      r[29] === O ? VY2 = r[30] : (VY2 = () => O.filter(_temp3$1).map(_temp4$1).join("\n"), r[29] = O, r[30] = VY2);
-      let QY2 = VY2;
-      HY = "relative group", r[31] !== QY2 || r[32] !== RY || r[33] !== _ || r[34] !== BY || r[35] !== v || r[36] !== f || r[37] !== d ? (UY = RY && (0, import_jsx_runtime.jsxs)("div", {
+        ...RY
+      ].reverse(), w2 = e2.some(_temp$2), O2 = e2.findIndex(_temp2$2), I2;
+      r[29] === RY ? I2 = r[30] : (I2 = () => RY.filter(_temp3$1).map(_temp4$1).join("\n"), r[29] = RY, r[30] = I2);
+      let HY2 = I2;
+      UY = "relative group", r[31] !== HY2 || r[32] !== zY || r[33] !== _ || r[34] !== VY || r[35] !== v || r[36] !== f || r[37] !== d ? (WY = zY && (0, import_jsx_runtime.jsxs)("div", {
         className: "absolute top-1 right-4 z-10 opacity-0 group-hover:opacity-100 flex items-center gap-1 print:hidden",
         children: [
           (0, import_jsx_runtime.jsx)(CopyClipboardIcon, {
             tooltip: "Copy console output",
-            value: QY2,
+            value: HY2,
             className: "h-4 w-4"
           }),
           (0, import_jsx_runtime.jsx)(Tooltip, {
@@ -100259,7 +100269,7 @@ ${c}
               })
             })
           }),
-          (BY || _) && (0, import_jsx_runtime.jsx)(Button, {
+          (VY || _) && (0, import_jsx_runtime.jsx)(Button, {
             "aria-label": _ ? "Collapse output" : "Expand output",
             className: "p-0 mb-px",
             onClick: () => v(!_),
@@ -100278,16 +100288,16 @@ ${c}
             })
           })
         ]
-      }), r[31] = QY2, r[32] = RY, r[33] = _, r[34] = BY, r[35] = v, r[36] = f, r[37] = d, r[38] = UY) : UY = r[38], WY = M ? "This console output is stale" : void 0, GY = "console-output-area", KY = c, qY = zY, JY = 0;
-      let $Y2 = M && "marimo-output-stale", eX2 = RY ? "p-5" : "p-3";
-      r[39] !== LY || r[40] !== $Y2 || r[41] !== eX2 ? (YY = cn("console-output-area overflow-hidden rounded-b-lg flex flex-col-reverse w-full gap-1 focus:outline-hidden", $Y2, eX2, LY), r[39] = LY, r[40] = $Y2, r[41] = eX2, r[42] = YY) : YY = r[42], r[43] === _ ? XY = r[44] : (XY = _ ? {
+      }), r[31] = HY2, r[32] = zY, r[33] = _, r[34] = VY, r[35] = v, r[36] = f, r[37] = d, r[38] = WY) : WY = r[38], GY = M ? "This console output is stale" : void 0, KY = "console-output-area", qY = c, JY = BY, YY = 0;
+      let $Y2 = M && "marimo-output-stale", eX2 = zY ? "p-5" : "p-3";
+      r[39] !== LY || r[40] !== $Y2 || r[41] !== eX2 ? (XY = cn("console-output-area overflow-hidden rounded-b-lg flex flex-col-reverse w-full gap-1 focus:outline-hidden", $Y2, eX2, LY), r[39] = LY, r[40] = $Y2, r[41] = eX2, r[42] = XY) : XY = r[42], r[43] === _ ? ZY = r[44] : (ZY = _ ? {
         maxHeight: "none"
-      } : void 0, r[43] = _, r[44] = XY), ZY = e2.map((e3, r2) => {
+      } : void 0, r[43] = _, r[44] = ZY), QY = e2.map((e3, r2) => {
         if (e3.channel === "pdb") return null;
         if (e3.channel === "stdin") {
           invariant(typeof e3.data == "string", "Expected data to be a string");
-          let c2 = O.length - r2 - 1, d2 = e3.mimetype === "text/password";
-          return e3.response == null && I2 === r2 ? (0, import_jsx_runtime.jsx)(StdInput, {
+          let c2 = RY.length - r2 - 1, d2 = e3.mimetype === "text/password";
+          return e3.response == null && O2 === r2 ? (0, import_jsx_runtime.jsx)(StdInput, {
             output: e3.data,
             isPdb: w2,
             isPassword: d2,
@@ -100310,36 +100320,36 @@ ${c}
             wrapText: d
           })
         }, r2);
-      }), r[3] = z, r[4] = LY, r[5] = O, r[6] = RY, r[7] = E, r[8] = _, r[9] = BY, r[10] = q, r[11] = IY, r[12] = G, r[13] = zY, r[14] = v, r[15] = f, r[16] = M, r[17] = y, r[18] = d, r[19] = HY, r[20] = UY, r[21] = WY, r[22] = GY, r[23] = KY, r[24] = qY, r[25] = JY, r[26] = YY, r[27] = XY, r[28] = ZY;
-    } else HY = r[19], UY = r[20], WY = r[21], GY = r[22], KY = r[23], qY = r[24], JY = r[25], YY = r[26], XY = r[27], ZY = r[28];
-    let QY;
-    r[45] !== z || r[46] !== I ? (QY = (0, import_jsx_runtime.jsx)(NameCellContentEditable, {
+      }), r[3] = z, r[4] = LY, r[5] = RY, r[6] = zY, r[7] = E, r[8] = _, r[9] = VY, r[10] = q, r[11] = IY, r[12] = G, r[13] = BY, r[14] = v, r[15] = f, r[16] = M, r[17] = y, r[18] = d, r[19] = UY, r[20] = WY, r[21] = GY, r[22] = KY, r[23] = qY, r[24] = JY, r[25] = YY, r[26] = XY, r[27] = ZY, r[28] = QY;
+    } else UY = r[19], WY = r[20], GY = r[21], KY = r[22], qY = r[23], JY = r[24], YY = r[25], XY = r[26], ZY = r[27], QY = r[28];
+    let $Y;
+    r[45] !== z || r[46] !== I ? ($Y = (0, import_jsx_runtime.jsx)(NameCellContentEditable, {
       value: I,
       cellId: z,
       className: "bg-(--slate-4) border-(--slate-4) hover:bg-(--slate-5) dark:border-(--sky-5) dark:bg-(--sky-6) dark:text-(--sky-12) text-(--slate-12) rounded-l rounded-br-lg absolute right-0 bottom-0 text-xs px-1.5 py-0.5 font-mono max-w-[75%] whitespace-nowrap overflow-hidden"
-    }), r[45] = z, r[46] = I, r[47] = QY) : QY = r[47];
-    let $Y;
-    r[48] !== QY || r[49] !== WY || r[50] !== GY || r[51] !== KY || r[52] !== qY || r[53] !== JY || r[54] !== YY || r[55] !== XY || r[56] !== ZY ? ($Y = (0, import_jsx_runtime.jsxs)("div", {
-      title: WY,
-      "data-testid": GY,
-      ref: KY,
-      ...qY,
-      tabIndex: JY,
-      className: YY,
-      style: XY,
-      children: [
-        ZY,
-        QY
-      ]
-    }), r[48] = QY, r[49] = WY, r[50] = GY, r[51] = KY, r[52] = qY, r[53] = JY, r[54] = YY, r[55] = XY, r[56] = ZY, r[57] = $Y) : $Y = r[57];
+    }), r[45] = z, r[46] = I, r[47] = $Y) : $Y = r[47];
     let eX;
-    return r[58] !== HY || r[59] !== UY || r[60] !== $Y ? (eX = (0, import_jsx_runtime.jsxs)("div", {
-      className: HY,
+    r[48] !== $Y || r[49] !== GY || r[50] !== KY || r[51] !== qY || r[52] !== JY || r[53] !== YY || r[54] !== XY || r[55] !== ZY || r[56] !== QY ? (eX = (0, import_jsx_runtime.jsxs)("div", {
+      title: GY,
+      "data-testid": KY,
+      ref: qY,
+      ...JY,
+      tabIndex: YY,
+      className: XY,
+      style: ZY,
       children: [
-        UY,
+        QY,
         $Y
       ]
-    }), r[58] = HY, r[59] = UY, r[60] = $Y, r[61] = eX) : eX = r[61], eX;
+    }), r[48] = $Y, r[49] = GY, r[50] = KY, r[51] = qY, r[52] = JY, r[53] = YY, r[54] = XY, r[55] = ZY, r[56] = QY, r[57] = eX) : eX = r[57];
+    let tX;
+    return r[58] !== UY || r[59] !== WY || r[60] !== eX ? (tX = (0, import_jsx_runtime.jsxs)("div", {
+      className: UY,
+      children: [
+        WY,
+        eX
+      ]
+    }), r[58] = UY, r[59] = WY, r[60] = eX, r[61] = tX) : tX = r[61], tX;
   }, StdInput = (e) => {
     let r = (0, import_compiler_runtime$4.c)(25), { value: c, setValue: d, inputHistory: f, output: _, isPassword: v, isPdb: y, onSubmit: S, onClear: w } = e, { navigateUp: E, navigateDown: O, addToHistory: M } = f, I;
     r[0] === _ ? I = r[1] : (I = renderText(_), r[0] = _, r[1] = I);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.20.5-dev83",
+  "version": "0.20.5-dev87",
   "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/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]);
+}